ITE 170 Project

revised 5/8/2020

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 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 in Premiere Pro.

The one exception that I will make to this general "self-produced" requirement is the use of sound (which is not required) 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" assignment, make sure you get the FTP working as one of the initial steps in working on the project.

The schedule page has a couple examples of student projects from Spring 2019 which went far beyond the project requirements.

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, so that might affect which topic you choose
• Everything in your site (text, images, animation, video) must relate to your topic

General requirements for project

• HTML
  • 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 the "about me" 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
• CSS:
  • do not use inline or embedded styles
  • you may use Dreamweaver or a text editor such as Brackets, Atom, Notepad++, Notepad, etc.
• Text
  • Write your own text.
  • Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
  • Unlike the myself assignment, 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
  • 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 - to create an animated gif, you should use the ActionScript 3.0 format.
• Photoshop
  • You must use Photoshop in some way other than resizing your images on at least one image
• 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 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.
• 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 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. 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 - i.e. if using the HTML 5 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 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 space. 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. The 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 Canvase 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
• 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 Premiere Pro movie, then the animated.gif file
• at least one psd file where the image was created from scratch or thatshows 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 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.