ITE 170 Project

Revised: May 2, 2023. Subsequent modifications will be highlighted.

As specified in the syllabus, the project is 25% of your course grade.

+1 point for each day submitted before due date (up to 7 days beforehand)
-1 point for each day submitted after due date (up to 7 days after)

Please hit REFRESH every time you view this. As students ask me questions, I will post clarifications and change the revision date above and highlight the change..

The content and images you create must be 100% your own work. You may use images or videos taken by a family member or friend if you were there when the image or video was taken.
If you use content or 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, Premiere Pro, or some other program violates the requirement that the images and video must be 100% your own work.

The one exception that I will make to this general "self-produced" requirement is the addition of sound to a video as long as it is properly documented in your text or Word file. However, there is no requirement that your video(s) have sound.

You may use content, animation, or images you submitted earlier in the semester as homework as long as you created that.

Do not wait until the last moment to do it. You will have to upload your URL of your project to myDrive or ite170.com, so if you had difficulty with this in the "About Me" or later assignment, make sure you get the upload working as one of the initial steps in working on the project.

Website 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.

Topic

• anything you choose
• remember you must take or create your own images and video(s), 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 talented and your Animate and Photoshop portions of your project demonstrate that.

General requirements for project

• HTML
  • you may use a text editor such as Brackets, Atom, Notepad++, Notepad, Visual Studio Code, etc. You may use Dreamweaver. Use of any other website creation software requires approval of the instructor.
  • five HTML files minimum
  • 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. You should not drop the current page out of the navigation bar.
  • at the point where you reference a class, put in an HTML comment to indicate why you are referencing the class.
• 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. Using an image multiple times counts as 1 image.
  • Specify an appropriate value for the alt attribute for all non-trivial inline images (background images do not have an alt attribute or equivalent).
  • As a general rule, using a screenshot or taking a picture of a online picture does not meet the requirement that you take or create your own images. However, some exceptions to this rule might be granted by the instructor. For example, if you were doing a tutorial on a program, a screenshot of the program would likely be acceptable.
• CSS:
  • do not use inline or embedded styles
  • comment your CSS if you are doing something unusual; if you define a class, indicate in CSS comments what the purpose of the class is. Same goes for id's.
• Text
  • 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
    
• Animate
  • You must use Animate.
  • Can do frame-by-frame or tweening, or a combination of both. You can use Animate in any of these ways:
    • Create an animation that is displayed on a web page in your project using the HTML5/Canvas approach
    • Create an animated gif that is displayed on your web page using the <img tag> or that is part of your Premiere Pro video.
    • Export from Animate to a movie in mp4 format and incorporate this mp4 file into your project movie just like any other clip - the steps to export to mp4 format are described at https://helpx.adobe.com/animate/how-to/export-video-mp4.html. A movie in an mp4 format cannot use some Animate features, such as button symbols (e.g. responding when certain areas of the animation are clicked)
• Photoshop
• 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. A .psd file incorporated into your movie should be flattened (to reduce the file size).
• Premiere Pro
  • Using video(s) that you shot with a phone or otherwise 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).
  • As with images, some videos of onscreen activity might be acceptable, e.g. of a videogame.
  • Video files can easily get large - keep yours under 750MB if possible.
• Approach
  • 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!

Submission

• 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 approximately 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: pizza.gif I created this image in November 2016 using the Microsoft Paint program.
  • The file should specify (briefly) what modifications you made in the images using Photoshop
  • The file should describe how you used Premiere Pro. If the movie is over 2-3 minutes, and you want me to watch a particular portion, tell me where this is in the video.
• Submit a zipped directory or folder in Canvas.
  • The directory should include the html, css, image (.gif, .jpg., or .png), .fla, .psd, and mp4 files; the directory should also include files necessary for the animation to play - i.e. if using the HTML5 Canvas approach, the JavaScript folder with the .js file, and the images folder if there is one
  • The directory should include a mp4 file produced from Premiere Pro and the project file from Premiere Pro and the files used in the project file. 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 on a 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 (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. Make sure the URL works and pages display as intended. It is always good practice to test your site on a different computer than you used to create the site -- doing so will catch references to the c drive or another drive (these references will not work within your website on myDrive or ite170.com).
• 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
• the project file (.prproj) and .mp4 file produced by Premiere Pro
• if your animation is displaying on a web page in the HTML5 Canvas form - the .js file and images folder if there is one
• the animated gif if that is displayed on a web page or incorporated into your Premiere Pro movie
• 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 right away.