ITD 110 Project

12/12/2021 draft - recent modifications are 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.

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 text content, images, or videos 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.
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.

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

Do not wait until the last moment to do it. You will have to upload your work to myDrive, 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.

• anything you choose
• remember you must take (with a camera or phone) or create your own images, so that might affect which topic you choose. In addition to the minimum of 5 images taken by you, a family member or a friend, you may take images from https://unsplash.com. If you use such an image, provide the exact URL in HTML comments for an inline image or in CSS comments for a background image.
• Everything in your site must relate to your topic

General requirements for project

• HTML
  • you may use a text editor such as Brackets, Atom, Notepad++, Notepad, Visual Studio Code, etc. or Dreamweaver. You may not use another web creation tool without approval from the instructor.
  • five 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
  • navigation bar
    • should include a link to all top-level HTML pages. Depending on your design, all of your pages may be top-level pages, but maybe not.
    • for the nav bar on each top-level HTML page, include the current (active) page in the nav bar, so that the nav bar remains consistent from page to page. If you want your users to go through the site in a particular order, that navigation should be in addition to the nav bar rather than replacing it.
    • use a class to style the current (active) page link in the nav bar appropriately
    • the navigation bar should be in an unordered list with the bullet points hidden
  • form - you must have an accessible form that relates to the topic of your site that has at least 5 different types of form elements
  • table - you must have a page utilizing a table or tables (for information that lends itself to tabular presentation, not for general layout)
  • embedded content - you must include either a YouTube video or a Google map. You do not have to create the YouTube video. You may include other videos as long as you created them.
  • spell check - paste your code into Word or Dreamweaver to catch most spelling errors.
  • validation - your html pages should pass validation
  • if you reference Bootstrap classes in your html, put comments in your html as to 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. This 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).
  • If you resize your images to make them smaller, do this in a graphics program such as Paint rather than in html or css; doing it in a graphics program will reduce the file size and download time, whereas HTML or CSS resizing will not.
  • If you resize, keep the aspect ratio (the relationship between height and width) the same or similar.
• CSS:
  • use one and only one external Cascading Style Sheet. In addition, you may reference Google fonts and Bootstrap in addition to your external style sheet but there is no requirement for you to use Google fonts or Bootstrap. If you use Bootstrap, reference the non-minified version - I want to be able to read the Bootstrap code.
  • do not use inline or embedded styles
  • at least one style should use descendant/contextual CSS
  • your CSS file should pass validation
  • if multiple styles are applied to a tag, id, or class, each style should appear on its own line for readibility
  • put comments in your CSS if you are using CSS properties or values which are uncommon. Virtually all classes should be commented as to why you are defining the class. Same goes for styling id's.
  • if you use Bootstrap, no need to put comments in Bootstrap.
• Text
  • Write your own text.
  • Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
  • Spell check - use Dreamweaver for this or copy and paste your text into Word or some other program with a spellchecker
• Appearance
  • While this is not an art class, you should try to make your site look nice.
    
• 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 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.
• Submit a zipped directory or folder in Canvas
  • The directory should contain all files
  • 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 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. 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.
• On Canvas, copy and paste the URL to the directory containing your project on myDrive. 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.
• If convenient, test your website on a computer other than the one you used to develop the site.

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

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 and can notify you of that deficiency right away.