ITE 170 Project
As specified in the syllabus, the project is 25% of your course grade.
+1 point for each day submitted before due date (up to 5 days beforehand)
-1 point for each day submitted after due date
(up to 5 days after)
Please hit REFRESH every time you view this. As students ask me question, I will post clarifications and change the revision date above.
The content and images you create must be 100% your own work.
If you use content you have not created, there will be a major penalty.
If you use images you have not created, there will be a major penalty.
Taking an image or video from the internet and doing a modification of the image or video in Photoshop or some other program violates the requirement that the images and video must be 100% your own work.
If you use videos you have not created, there will be a major penalty. You may not take videos from the internet and alter them.
The one exception that I will make to this general "self-produced" requirement is the use of sound (which is not required in the project) as long as it is properly documented in your text or Word file.
You may use content and images you submitted earlier in the semester as homework as long as you created this content or these images.
Do not wait until the last moment to do it. You will have to FTP your work to a server, so if you had difficulty with this in the "About Me" or later assignment, make sure you get the FTP working as one of the initial steps in working on the project.
Do a website according to the specifications below. Since it is a small website, usually every page will link to every other page, unless you want the visitors to go through the site in a particular order.
- anything you choose
- remember you must take or create your own images, so that might affect which topic you choose
- Everything in your site (text, images, animation, video) must relate to your topic
- Your website can either be on a topic or be a portfolio of your work (e.g. a page with animation, a page with Photoshop, etc.). I suggest doing it on a topic unless you are very talented.
General requirements for project
- you may use Dreamweaver or a text editor such as Brackets, Atom, Notepad++, Notepad, etc.
- five files minimum However something like the Band template at https://www.w3schools.com/bootstrap/trybs_theme_band_full.htm, when if one clicks on links, the page scrolls to that section of the html file rather than going to a separate html page, would meet the 5 page requirement. Each section would have to fill up the entire screen and thus be like a page, even though it's not a separate html file. However, I recommend using 5 separate html files since that is the approach with which you are familiar (like in the hw3 assignment).
- Use CSS rather than deprecated/obsolete tags and attributes
- have the necessary !doctype, html, head, title, and body tags in the proper places
- the filename of the first page of your site (usually the home page) should be index.html or index.htm or some other name so that the server will send the page when a URL without the file name is entered in the browser
- each page should link to every other page, unless you want your visitors to go through your pages in a particular order
- Image files:
- You must use at least 5 image files. They can be used as inline images or as background images
- You may use an image file in more than one place. For example, if you have an image named turtle.jpg, you may use this on all the pages, for example as a background image in the footer. This counts as 1 image.
- Specify an appropriate value for the alt attribute for all non-trivial inline (as opposed to background) images
- do not use inline or embedded styles
- you may use Dreamweaver or a text editor such as Brackets, Atom, Notepad++, Notepad, etc.
- Write your own text.
- Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
- There is no minimum amount of text you need to have on each page.
- Spell check - use Dreamweaver for this or copy and paste your text into Word or some other program with a spell checker
- Can do frame-by-frame or tweening, or a combination of both. You can use Animate in either of two ways:
- To create an animation that is displayed on a web page using the techniques learned in the Animate section of the course; i.e. use the HTML5/Canvas approach; do not use the ActionScript 3.0 format
- To create an animated gif that is part of your Premiere Pro video or that is displayed on your web page using the <img tag>. To create an animated gif, you should use the ActionScript 3.0 format.
- You must use Photoshop on at least one image in some way other than resizing your images. Photoshop can be used to create or modify an image file that will be displayed on a web page, either inline or as background image. Photoshop can also be used to create a .psd file that is incorporated into your Premiere Pro movie.
- Premiere Pro
- Using video(s) that you shot with a phone or other created, use Premiere Pro in some way - e.g. combining several clips, inserting an image (e.g. title or animated gif) into the video, or something else.
- If you are unable to use videos, you may use images in your Premiere Pro video.
- The video output from Premiere Pro must be displayed on one of the web pages in your site (see sample html code to display video).
- Video files can easily get large - keep yours under 750MB.
- Before you do any coding, plan your site -
- what content will be on each page
- what layout would you like for the pages
- Get creative! Have fun!
- It is important that your submission be complete; if I have to go back to you to correct a submission (which may not be right after you submit), your final submission date will be used for grading purposes. Incomplete submissions have been the #1 problem in past semesters with the project submissions.
- Submit one text or Word file in Canvas in which you state when, where, and how you created each of the images and video
- list each image file by name, following by when, where and how you, a family member, or friend created that particular image file
- Example: kitchen.jpg: I took this in November 2017 in my kitchen
- Another example: monastery.png: I took this in July 2016 in Barcelona, Spain
- Another example: pizza.gif I created this image in November 2016 using the Microsoft Paint program.
- The file should specify what modifications you made in the images using Photoshop
- The file should describe how you used Premiere Pro/DaVinci Resolve. If the movie is over 2-3 minutes, tell me what occurs where so I know where to watch.
- Submit a zipped directory or folder in Canvas
- The directory should include the html, css, image, and fla files; the directory should also include files necessary for the animation to play -
- The directory should include a mp4 file produced from Premiere Pro/DaVinci Resolve and the project file from Premiere Pro and the files used in the project file (and similar files from DaVinci Resolve). Since the project file points to the files in the movie, your submission must have the same folder structure as used in the movie. To test this, from the directory you plan to submit, copy the project file and any assets used into the movie to a new folder. In this new folder, open up your project file in Premiere Pro, and see whether the files shown in the movie show up.
- As indicated above, you must use Photoshop for one image for something other than resizing the image. You may use Photoshop to create an image. Alternatively, you can use Photoshop to alter an image. In the latter case, the directory should include the original image and the psd file of the final version of the image, and of course the final version of the image in image format (gif, jpg, or png) if you are displaying it ona web page.
- Name the zip file with your first and last name, e.g BarackObama. Naming the zip file makes it easier to keep track of submissions from different students
- It is important to zip the directory because (1) it makes it easier for downloading given the number of files, and (2) zipping will preserve any folder structure within your folder (e.g. if you have a images folder from the animation)
- Upload the unzipped directory to your myDrive or ite170.com webspace. You can do this either by using myDrive to do the upload or by using an FTP program like CoreFTP. If you use myDrive for the upload, the easiest procedure is for you to upload the zipped directory to myDrive, and then click the unzip button at the upper right hand corner to produce the unzipped directory. Make sure the URL works and pages display as intended
- On Canvas, copy and paste the URL to the directory containing your project on myDrive or ite170.com. a myNOVA URL is only valid if it includes your myNova username. Do not submit a URL that references the c drive or another drive, the Desktop or My Documents
To summarize, the zipped directory submitted on Canvas should contain the following
- html files
- css file
- image files that display on your web pages or are included in your movie
- fla file created by Animate
- .mp4 file produced by Premiere Pro or DaVinci Resolve
- if your animation is displaying on a web page in the HTML5 Canvas form - the .js file and images folder if there is one
- if your animation has been made part of your movie, then the animated.gif file
- at least one psd file where the image was created from scratch or that shows the change you made in an image; it is optional whether you include additional psd files
In Canvas you should submit the URL of your project directory on myDrive or ite170.com and submit two attachments: (1) the text or Word file and (2) the zipped directory. It is better to have the text or Word file outside the zipped directory; that way I can immediately tell whether you have included the text or Word file without unzipping the directory and can notify you of that deficiency..