ITE 170 Project

revised 12/6/18 - further revisions may be made

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, your grade will be 0.
If you use images you have not created, your grade will be 0.
[December 5th clarification - taking an image from the internet and doing a modification of the image in Photoshop or some other graphics program is not in the spirit of the requirement that the images are something you created. The intent was to limit you to a picture you took or created from scratch using a graphics program. That was why I said the requirement to use your own images might affect the topic you choose. However, since this clarification is coming late, the deduction for this will only be 4 points.]
If you use videos you have not created, your grade will be 0. (If you do not have a cellphone or other device that can record a video, please contact me). You may not take videos from the internet and alter them in Premiere Pro.
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.

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, although 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.
  • 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
• 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. produce a swf which is referenced on the web page, or use the HTML5/Canvas approach)
    • To create an animated gif that is part of your Premiere Pro video
• 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.
  • The video must be displayed on one of the web pages in your site (see sample html code to display video - this link fixed 12/5)
• 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; incomplete submissions will be penalized
• Submit one text or Word file in Blackboard 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 created that particular image file
  • Example: kitchen.jpg: I took this on November 26, 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 on November 15, 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
• 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. swf is you are using the ActionScript 3.0 format, or the JavaScript folder and files if you are using HTML5/Canvas
• The directory should include a mp4 file produced from Premiere Pro
• As indicated above, you must use Photoshop on one image for something other than resizing the image - for one image, 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)
• Zip the directory and attach it to Blackboard. Name the zip file with your first and last name, e.g BarackObama
• It is important to zip the directory because (1) it makes it easier for grading given the number of files, and (2) zipping will preserve any folder structure within your folder (e.g. if you have a folder that contains the JavaScript file(s)
• 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 Blackboard, 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 Blackboard 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 - then the swf if you are using ActionScript 3.0 or JavaScript file(s) if you are using HTML5 Canvas
• if your animation has been made part of your Premiere Pro movie, then the animated.gif file
• at least one psd file that shows the change you made in an image; it is optional whether you include additional psd files

I recommend in Blackboard that you have two attachments: (1) the text or Word file and (2) the zipped directory rather than having the text or Word file inside of the zipped directory..