CS1033 - Multimedia and Communications

CS1033 - Multimedia and Communications

Major Assignment (Assignment 3)

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 fit well 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 figure 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 field 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 thetag 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 file. You must put your final exported .mp4 animation into the subfolder call videoanim.
• The animation should loop so that the peers who are marking your assignment can find it easily.
• If you want (not required) the animation to start automatically, make sure you include these attributes inside the 

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

• 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.o You should have a subfolder in your major folder called originals. You must store the PowerPoint file (the .ppt or .pptx file) 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 file. Your .mp4 file 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 filesize of the .mp4 file 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 final video (the .mp4 file) 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 off)
• The video must contain softsubs (closed captions) that are displayed from second 5 to second 10. So you will need a .vtt file 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 files. 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 first 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 different actual video or a combination of images and video. It is up to you as long as there are transitions and captions in your final 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, then go 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 five pages must be contained in a folder called major. The file name major must be in lowercase.
• Your home page/start page must be called index.html. The file name index.html must be in lowercase, thus you should hava a file 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 files) for the banner but you do NOT need to provide use with the native files 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 fixed 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 youneed, you must make all your buttons in Affinity Photo if you choose to make your own buttons.

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

• The VERY first 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 meo 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 file and animation .ppt file.

NOTE: you do not need to include a reference to the .afphoto file(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 willnow have a link called originals/nameofyouranimation.pptx

2. Move both of your Affinity Photo native file and PowerPoint native file (the banner .afphoto file and the animation .ppt file), into the folder called originals. NOTE: Remember that the webserver is case sensitive, so name your .afphoto and .ppt files with lowercase file names AND with NO SPACES in the filename, For example, a good file name would be homepagebanner.afphoto and a bad file 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 files and .ppt file. 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/filename.afphoto. Thus, using the above example, for userjsmith34, 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 files, this correct and what should happen, HOWEVER, if you click on a link to your .afphoto or .ppt file and the machine says "The web page cannot be found", then your link is incorrect and you need to fix it.

4. Copy the working address that you tested in step 3 above for each .afphoto file INTO YOUR REFERENCES WEBPAGE. There MUST be a link in your references page for the .afphoto file used to create your banner, and the .ppt file used to create your animation

5. NOTE: you do NOT need to supply us with links to the native file for your movie OR with the native file for your sound (the Audacity .aud file) if you used Audacity (you might not have even used Audacity for this assignment) or thenative files you used to create your buttons. Nor do you need to upload these files 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 first 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 becontained 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 five 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 file 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, flow nicely and complement the overall look of your website.
• Images:o Use images effectively 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 files 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:o 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 file for the animation must be stored in your videoanim subfolder
• The .ppt or .pptx file 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 fit in with your website, and add some sort of visual appeal to your website)
• Must have the original PowerPoint file (.ppt or .pptx) that you used to create the animation included in your originals folder. We will be looking at this file.
• Must have a clickable link to the PowerPoint animation file in your references page.
• Must be saved as an .mp4 fileVideo Clip:
• Must be professional and appropriate
• Must use effective transitions.
• Must contain music to set the mood.
• Must have appropriate/effective 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 file size of 15 MB (MegaBytes) or less. It puts a lot of stress on our servers if everyone has big files. Try changing the frame size (640 by 480 is big enough) and lowering the bitrate to get the video file 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 soundcould start automatically when the user comes to the appropriate page
• There should be a way 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 written 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 siteo 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 files 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 test it on a different machine!