Overview:

You are to create a website about something that interests you BUT it must involve Food. So, if you love seafood, then you could have the following pages: Home, Fish, Shell Fish, Octapus and a References Page.  Or maybe, if you are a great cook,  you could have something like "My Favourite Recipes" with the pages: Home, Main Course Recipes, Dessert Recipes, Veggie Recipes, and References.. If you are a foodie, maybe it could be about 3 star Michelon restaurants around the world  with a page about restaurant or maybe, it  could be a site about "Food I Hate!" and it could have the pages Home, Radishes, Rabbit, Oysters and References (well, these are the   foods Laura hates!).  The topic for each page is up to you as long as it involves the theme of Food and the pages work well together.

Each page should have at least 1 paragraph of text but you don't need much more than 1 paragraph.

Make sure that:

·   it is a NEW site that you built for this course this year (i.e. it can NOT be a site you designed a year ago).

·   all the pages ítwell together (it makes sense how they relate).

·  there is a CLEAR THEME related to Food that connects all the pages so that visitors to your site can tell by looking at your home page what your site is all about.

·  you designed the layout for the pages. You did not copy and paste the layout from a friend who took the course in a previous year or is currently taking the course. YOU must do the typing. You can use other sites for inspiration but all the typing MUST be done   by you.

PLEASE NOTE: All the material needed to help you ígure out how to complete this assignment can be found in:

·  To create the banner - Labs 2 and 3 (export as .jpg)

·  To create the web pages - Labs 4, 5 and 6 and any of the Week 6 Lecture Videos that start with HTML

·  To create the video and insert it into the site - Lab 9

·  To create the animation and insert it into the site - Lab 7 and 8

[ [Click here to watch a video that goes over what we are looking for and how to mark the major assignment. The video is 35 minutes but worth watching till the very end in order to get a good mark.] ]

NOTE: In order to create a level playingíeld between all students, you may NOT use a professional or preexisting template/web

builder to build your site, you must build it using html5-editor.net and Brackets/Notepad/TextEdit and css. Use a table to achieve your outer layout and the way we did the sites in labs. Do NOT use predesigned templates/tags other than the <table>tag to achieve the

overall layout or you will have a 25%penalty applied. You should be building this site from scratch!

Design Criteria:

The website must include:

·  Animation: Add a component of animation (must be created with PowerPoint as taught during the lab tutorials).

○   You should have a subfolder of the major folder called videoanim. You must use PowerPoint to create the original animation

and you must export it to a .mp4 íle.  You must put your ínal exported .mp4 animation into the subfolder call videoanim. ○   The animation should loop so that the peers who are marking your assignment can índ it easily.

○    If you want (not required) the animation to start automatically, make sure you include these attributes inside the <video> tag:

<video controls="controls" autoplay loop muted ...

If you don't want the controls to show just have:

<video autoplay loop muted ...

○   Your animation should have your Western UserId visible in the TOP right corner (it can be a very small font but it must be visible) throughout the entire animation.

○   Your animation content should relate somehow to the topic of your website.

○    If you use images in your animation from an outside source, you should include references to them on your references page.

○   You should have a subfolder in your major folder called originals. You must store the PowerPoint íle (the .ppt or .pptx íle) you created to make your animation in a subfolder of the major folder called originals.

·  A Video Clip: (Created with Shotcut (PC) , or iMovie (Mac) )

The video clip should be related to the theme of your site.  Also the video clip can NOT be a link to youtube.com, it MUST be

contained within your site and should be an .mp4 íle. Your .mp4 íle MUST be placed in your videoanim folder  Some additional

notes about the video and there is more info below as well:

○   The video should be NO LONGER than 30 seconds (minimum of 15 seconds) and the ílesize of the .mp4 íle should be less than 20 MB.  (You will be docked marks since the longer the video, it takes more space on our servers).

○   The video must contain transitions

○    Must include either a group of pictures that transition from one picture to the next OR you could include actual video but the video must have at least one transition to another video

○   The ínal video (the .mp4 íle) must be stored in the videoanim subfolder

○   The video must contain at least 2 hard captions, one being your userid and another one (hard captions that can't be turned oì)

○   The video must contain softsubs (closed captions) that are displayed from second 5 to second 10.  So you will need a .vtt

íle inside your videoanin folder. Check out lab 9 again if you forget how to make softsubs. Remember they ONLY show up once you have uploaded/FTP'd your íles. So you can only test if they work AFTER you have uploaded your site. You cannot test this feature in locally, you MUST upload in order to test your soft captions.

○   Your video should have your Western UserId visible in one of the corners of the video (it can be a very small font but it must be visible) throughout the entire video OR at least the írst 3 seconds of the movie OR the last 3 seconds of the movie.

○   The video may contain either images transitioning to other images or actual video that transitions to diìerent actual video or a combination of images and video. It is up to you as long as there are transitions and captions in your ínal product.

○   The video MUST be created for this course, it can NOT be a video you created before this course started. You may use video

clips or images you created a while ago, BUT you must incorporate those clips/images into a new video made especially for this course.

   If you use images or video or audio in your video from outside sources, you should include references for them on your references page.

○    It should NOT be a YouTube video, it must be a video you created yourself and that you inserted into this webpage with controls.

○   There is a bit more information about the video requirements below.

·   Sound: You must have sound as part of your video clip. If you want to use sound in any other additional way, thengo ahead and use it. You should reference any sound you have your website that you didn't create, just put something like:

Audio in my video: Hello by Adele

you don't have to have a URL to the audio, just tell who wrote the song.

Build a website with the following criteria:

1. Web pages:

○    Home page plus at least FOUR additional web pages, one of which must be your references page. So you must have a home

page + three more pages + a reference page. (i.e. each page should have 5 links/buttons on the page)

○   All íve pages must be contained in a folder called major. The íle name major must be in lowercase.

○   Your home page/start page must be called index.html. The íle name index.html must be in lowercase, thus you should have a íle called index.html.

○    Use your creativity to layout your website with unique link categories. For example, if your site was about Food From My Home Town, you might have links such to your favourite restaurants in the town you grew up in.., , etc.

○   You don't have to have a lot of text on your pages but have at least 1 paragraph of text (3-5 sentences) on each page except for the references page.  NOTE: if you get the text and copy it directly, you MUST put a reference to the text in your references

page that tells the URL where copied the text from. If you paraphrase the text, you don't need to include it in your references page.

   You may decide on content organization and you must create the links you feel are appropriate but make sure you link to at least one outside site in one page that is NOT your references page.

○   You must create the banners and buttons (if you choose to design your own buttons) and design the layout. YOU MUST

PROVIDE US WITH THE NATIVE FILES (the .afphoto íles) for the banner but you do NOT need to provide use with the native íles you used to create the buttons.

   You should put a reference for any images you used to create your banner and buttons in your references page if you got them from a source on the internet.

2. Table structure: Your web pages MUST use a table set up (not using DIVs instead of tables to create the overall structure of your    webpage - we did not cover divs in labs) with a íxed width of about 1000 pixels wide. You may use more than one table to help you lay out your web pages as shown in the lectures.

3. Navigational structure (i.e. links and link layout): Remember to be consistent on each page and make sure your links are easy to navigate through your entire website not just the home page. YOU MAY NOT USE A BUTTON BUILDING PROGRAM to make any buttons you need, you must make all your buttons in Aïnity Photo if you choose to make your own buttons.

4. References Webpage: In the References page, place the following

○   The VERY írst line (under your heading) of the references page must be:

"This website was created by your userid"

For example: "This website was created by jsmit72"

Also, for your references page, you should:

○    keep your references page well organized and neat.

   include URLs for any typed content you obtained from another site

○    include references for the ALL images used on your site with URLs, if some of your images have NO url, e.g. pictures you took yourself or your friends took, reference them similar to this:

○    Image of brown dog:Taken by me

   include a short description with the name of the the composer or a link to the clip of any sound/movie clips you used that were not written/created by you

   If you took text directly from other websites, include a reference for that text, for example:

Second Paragraph on the home page was taken from the following site: www.uwo.ca

NOTE: in this case you do NOT have to use MLA or APA citations, just list the URL you got the text from.

   YOU MUST ALSO INCLUDE:

○    REFERENCES TO YOUR ORIGINAL NATIVE FILES (your banner.afphoto íle and animation .ppt íle. NOTE: you do not need to include a reference to the  .afphoto íle(s) you used to create your buttons (if you created buttons)

FOLLOW THE DIRECTIONS BELOW TO GIVE US ACCESS TO YOUR NATIVE FILES:

1. Create a sub folder within the folder called major. This subfolder must be called originals(all lowercase). Thus you will now have a link called originals/nameofyouranimation.pptx

2. Move both of your Aïnity Photo native íle and PowerPoint native íle (the banner .afphoto íle and the animation .ppt íle), into the folder called originals. NOTE: Remember that the webserver is case sensitive, so name your .afphoto and .ppt íles   with lowercase íle names AND with NO SPACES in the ílename, For example, a good íle name would be

homepagebanner.afphoto and a bad íle name would be HomePage Banner Copy.afphoto

3. Now, double check that you did the copy correctly by seeing if the links work to your .afphoto íles and .ppt íle. You check   your links by opening Internet Explorer or Firefox (not Safari since sometimes it does some weird things to a webpage) and

typing in the following address:

originals/ílename.afphoto.

Thus, using the above example, for user jsmith34, the valid address would be:

originals/homepagebanner.afphoto.

MAKE SURE THAT THERE IS A WORKING LINK FOR EACH AFPHOTO AND PPT FILE!

NOTE: if you try clicking on a .afphoto or .ppt link, it will likely try to download the íles, this correct and what should

happen, HOWEVER, if you click on a link to your .afphoto or .ppt íle and the machine says "The web page cannot be found", then your link is incorrect and you need to íx it.

4. Copy the working address that you tested in step 3 above for each .afphoto íle INTO YOUR REFERENCES WEBPAGE. There

MUST be a link in your references page for the .afphoto íle used to create your banner, and the .ppt íle used to create your animation

5. NOTE: you do NOT need to supply us with links to the native íle for your movie OR with the native íle for your sound (the   Audacity .aud íle) if you used Audacity (you might not have even used Audacity for this assignment) or the native íles you   used to create your buttons. Nor do you need to upload these íles to the originals folder, we do not need to have access to them.

Try to keep your site creative and  professional!

Marking Scheme:

Based on what you have learned from your labs, use your creativity to create a professional/fun/lovely looking website.

Below is the list of criteria to be used for marking purposes:

Criteria:

·   Layout and Some Basic Instructions:

○   The top level folder MUST be called major (all lower case). All your web pages and folders MUST be inside this folder ○   Your írst page MUST be called index.html (all lower case).

○   ALL of your images and additional web pages must be UNDER/INSIDE the folder major, i.e. must be contained in the folder major or in sub folders of the folder major. Think about good organization.

○    Outer table size must be about 1000 pixels wide on the home page. Use as many rows as you need to set up your layout and as many tables required to achieve the look.  (Follow the same schematic as you were taught for the Web assignment).

○   The site must have at least íve web pages, one of which must be the home page and one of which must be the references page plus three additional pages.

○    Each page in the site must be laid out nicely, i.e. clean, not crowded, not cluttered

○   All web page íle names must be lowercase with NO spaces in them.

·   Colour creativity: As with every other assignment in CS1033, you must use the colours in your assignment in a creative, clean, professional manner. The colours must be consistent within each web page and within the site, îow nicely and complement the overall look of your website.

·   Images:

○    Use images eìectively throughout your website to enhance the theme and visual appeal of your website. ○    Use professional, crisp images only

○   Add Alt and title/hover tags for any images you add to your home page AND for your banner (you do not need to add the hover/title tags for the button images).

○   To save you time, you do NOT NEED TO add Hover/Title tags to every image on your site except for the images on the home page.

·  You must show instances of the following items used in an appropriate manner:

○    Navigational Links

○    Banner (1000 width)

○    Links: You must have one of each type as listed: email links, link(s) pointing to your íles within your site (your navigational links/buttons would be acceptable for this), link(s) to a website on the Internet, bookmark/anchor links

○    Structured List (ordered or unordered )

·  Text formatting:

○   Appropriate use of headings, font size, font type

○   Appropriate text emphasis

○    Balance of the text size with respect to the overall website

○   Appropriate use of centering vs. left alignment

·  Animation:

○    Must be viewable

○    Must be smooth, not jerky

○   The .mp4 íle for the animation must be stored in your videoanim subfolder

   The .ppt or .pptx íle used to create the animation must be stored in your originals subfolder.

○    Must be used in an appropriate and creative manner (i.e. it must ít in with your website, and add some sort of visual appeal to your website)

○    Must have the original PowerPoint íle (.ppt or .pptx) that you used to create the animation included in your originals folder. We will be looking at this íle.

○    Must have a clickable link to the PowerPoint animation íle in your references page.

○    Must be saved as an .mp4 íle

·  Video Clip:

○    Must be professional and appropriate

○    Must use eìective transitions.

○    Must contain music to set the mood.

○    Must have appropriate/eìective hard AND soft captions

○    Must be located in the videoanim subfolder

○    Must be under 30 seconds but at least 15 seconds

○    Must be an .mp4 format

○    Must be a íle size of 15 MB (MegaBytes) or less.  t puts a lot of stress on our servers if everyone has big íles. Try changing the frame size (640 by 480 is big enough) and lowering the bitrate to get the video íle size down.  Remember we have

800 students doing this assignment!

·   Sound:

○    Must have sound as part of your video clip

○   When marking the assignment, the peer marker must be able to hear the sound, either by clicking on a play button (for example on the video) or the sound could start automatically when the user comes to the appropriate page

○   There should be away to pause/stop the sound/video

○   The sound should fade away gradually at the end of your video.

○   You should include a reference to the sound in your references page. This does not have to be a link but just a note about the piece of sound you are using. For example, your references page might include the following:

   Music on Video: Hello by Adele, 2015

○    Or if you wrote the music yourself

   Music on Video: Original Piece writen by me, 2019

·  Technical:

○    Files must work properly and be viewable from the Internet (try viewing it from a friend's machine!)

○    Files must be well organized within the site

○    References to extra material that you included in your website must be cited (provide website address of extra material) and

there must be working links

。 See rules regarding your References page.

   This is like a bibliography for any work you reference. You will receive an automatic 0 if the references page is not included or the references for your native íles are missing.

○   YOU MUST TEST YOUR LINK AFTER YOU UPLOADED IT TO CS1033.gaul.csd.uwo.ca  ON A DIFFERENT MACHINE THAN THE ONE YOU BUILT IT ON. It maybe appear to work correctly on your machine but may still have issues. Make sure you

READY TO START BUILDING A WEBSITE

In order to work on this assignment, perform the following steps BEFORE you are build the website. You need to set up the folder name that will contain all your web pages and images. The steps to get the website started are here:

Creating the site:

1. BEFORE YOU BEGIN YOUR ASSIGNMENT - IMPORTANT! PERFORM THE FOLLOWING STEPS:

2. First create a folder called "major" on the machine where you intend to work on the assignment (or on the memory stick you plan to use, but be careful --> losing the memory stick is not a ground for an extension.)

3. Create a subfolder inside the major folder called images.

4. Create a subfolder inside the major folder called videoanim

5. Create a subfolder inside the major folder called originals

6. Move the images you want to include in your website into the major/images folder

7. Move the your animation íle (the .mp4 íles)  into your major/videoanim folder

8. Move the video íle (the .mp4) íle into your  major/videoanim folder

9. Move your .afphoto íles for your banner and animation PowerPoint .ppt to the subfolder major/originals 

HANDING IN YOUR ASSIGNMENT

There are 2 steps to hand in this assignment, make sure you complete BOTH steps (Step 1 is to sftp your major up to publish.gaul.csd.uwo.ca and Step 2 is to enter your URL address in kritik.iofor the Major Assignment)

NOTE: The web server will be VERY busy right before the assignment is due. Thus, try to have your assignment done and handed in at least 1 or 2 days before it is due, otherwise you might índ that your site doesn't get uploaded BEFORE the due time.

STEP 1: Uploading your "major" folder to the Gaul webserver (cs1033.gaul.csd.uwo.ca) by using an SFTP program:

You will use an SFTP program (such as WinSCP for PC users or Fugu or Filezilla for Mac users) to move your major folder from your lab or laptop machine to the Gaul webserver. When connecting use the following information:

1. Host name: cs1033.gaul.csd.uwo.ca  (if you are using Filezilla you must putsftp:/at the beginning

sftp://cs1033.gaul.csd.uwo.ca )

2. Username: Your Western userid

3. Password: Your Western password

4. Port Number(IMPORTANT):The port number should be 1033

NOTE:

WinSCP users: make sure that the File Protocol is SFTP (this is the default so you shouldn't have to do anything, just do NOT change the File Protocol to anything other than SFTP). Step by step help is here.

Filezilla users: if you have problems connecting with a Host Name of cs1033.gaul.csd.uwo.cathen  try using sftp:/cs1033.gaul.csd.uwo.ca for the Host Name: Step by step help is here.

Once you are authenticated:

   Copy the major folder up to webserver (either drag it from the left side to the right side or copy it up)

   After you have uploaded your major folder YOU MUST CHECK to see if your sftp worked. To do this you will open a browser(IE, Chrome, Firefox) and check ALL your links in your site called:

MAKE SURE YOU TEST TO SEE IF YOUR WEBSITE IS VIEWABLE FROM THE INTERNET

WARNING: If you want to check if your site is working (all the links are correct and none of the images are broken), you MUST check it from an account/machine that was NOT used to make assignment. Thus, if you made your assignment on a home machine/laptop

machine, then índ another machine on campus to test the ALL the links OR have a friend test the links for you on their machine or   test it on your phone. If you created your site on the machines in the lab rooms (MC230 or MC235 or NCB 105), then you should test

your links from a home machine, or you can even test it from a machine in MC230/235/NC105 AS LONG AS YOU ARE TESTING IT ON A MACHINE THAT IS NOT LOGGED ON WITH YOUR USERID. DO NOT TEST IT ON THE MACHINE YOU BUILT IT ON, it may appear that

everything is correct but when the  peers marking your assignment goto look at your site, the links may be broken or the images may not appear!

To double check, open a browser such as Internet Explorer or Firefox and type the following web address:

 

This should bring up your home page called index.html. If it doesn't, you have done something wrong, try again or visit a TA during the posted zoom consulting times or email your professor. If your links or images are not working, this means you are referencing them

incorrectly in your web page and should try the following troubleshooting tips:

1. You should look at where you stored the page/image and how you linked it to ígure out what went wrong. 2. Sometimes deleting an image or a link and reinserting it will íx it.

3. Check the case of the ílename.  If you called the image "Cat.jpg"  yet somehow it is looking for cat.jpg, then they will not match.

This may happen because you inserted the image as Cat.jpg and then renamed it to cat.jpg

4. Make sure that all your images and web pages are within the site, i.e. within the folder major.

STEP 2: Entering the URL to your website in kritik for the Major Assignment

1. You ALSO MUST submit a link to your website to kritik.io.  See below for the details of how to do this.

   Goto Kritik.io and paste in the link to your website.  This is the ONLY thing you have to put into the kritik.io text box. It should look like this: 

   Double click on your link in Kritik.io to make sure that it works properly.

2. PEER MARKING INFORMATION: After the late period for submitting ínishes, you will get three days to mark 5-6 of your

peers. 10% of your mark will be based on how well you mark your íve (or six) peers. You will get a better mark the more carefully

you mark, so do not be too easy and do not be too hard, just be fair and careful and correct when marking. 5% of your mark will be based on the written comments you leave. Try to explain GENTLY why you removed marks and any issues you had with the

student's website AND  try to índ something to be positive about the submission since people hopefully have worked hard on the website so your comments should be respectful.

3. FEEDBACK ON FEEDBACK INFORMATION: The last stage, the feedback on feedback stage, is worth 5%, after the peer marking

evaluation stage is done. You only get ONE day to complete this stage.  Read over the comments and rank them as motivational

AND as helpful. Remember that students will be graded on the rankings you give this time so please be thoughtful when doing the rankings and leaving comments about the written feedback you received. For each of the 5 markers that you rank, you get 1 mark  up to a total of 5.

4. DISPUTING THE MARK YOU RECEIVED - If you think there were mistakes in the peer marking on the non subjective portions of the assignment, you may dispute the mark in kritik.io.  Go into the major assignment in Kritik.io and click on the dispute button and

then in the dispute box list the numbers of the rows in the rubric that you think were marked incorrectly. You will have 4 days to complete a dispute starting at and including the Feedback on Feedback day. During these 4 days, at.a. or professor will look at    your dispute and íx the mark and resolve the dispute. After the 4 days are over, the assignment will be ínalized and you can no longer dispute your mark.  .Also note that any íles changed/reuploaded AFTER the due date are no longer eligible for disputes