CS Multimedia and Communications. Major Assignment. Due: Wednesday, April 7th, 2010 by 3:00PM. Worth 20%

Transcription

1 Page 1 of 5 CS Multimedia and Communications Major Assignment Due: Wednesday, April 7th, 2010 by 3:00PM Worth 20% Overview: You are to create a Personal Website all about you or something relevant to you! Follow the criteria listed below. The website should let internet users get to know a little about you, for example you might include your hobbies and your work experience OR something relevant to you, such as your mom's business, or the band you are playing in, or the high school football team you were on. We are pretty accommodating regarding the main topic of your website but make sure that: there is a component about you (it somehow must be relevant to you) it must be a NEW site that you built for this course(i.e. it can NOT be a site you designed a year ago). the website reflects you and/or a piece of your life all the pages fit together. There is some clear theme that connects all the pages and visitors to your site can tell by looking at your home page what your site is all about. Note: If you are uncomfortable posting information about yourself online, you may use a fictional name and change some of the dates and/or locations. Design Criteria: The personal website website must include: Animation: Add a component of animation A Video Clip: Tailor it to your needs to portray your personality. Some ideas: think of what you have done, what s important to you. It could be career-oriented, about your family or your favourite sports, travel you have done, your hobbies. For example, you consider yourself an artist, you might take several scan in pictures of your paintings, then put them in movie maker, put some transitions between the images, add some sound and convert this to a small movie. Also the video clip can NOT be a link to youtube.com, it MUST be contained within your site and should be a.wmv file or a.mov file or.flv file. Some additional notes about the video: The video should be no longer than 60 seconds The video must contain transitions The video must contain captions, either at the beginning, the end and/or over some portions of images/video If you are having problems playing the video as a.wmv or.mov once you have uploaded your site, you might want to consider converting it to an flv video AS EXPLAINED IN LAB 10 and then inserting it into your page as follows Insert>Media>Flash Video. This is also explained in Lab 10. 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. In your references page you must include references for the video/images you use in your page. If the images/video you use were taken by you or your family/friends just put something like this in the references page: All pictures/video used in video were taken by me If the images/video in your video were taken from the internet you must include the links to those images/clips in your reference page. For example, you might do something like this: Video: the following images were taken from the internet: Picture of Cat Picture of Dog Video: the following video was taken from the internet: Dog Video 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. Build a website with the following criteria:

2 Page 2 of 5 1. Web pages: Home page plus at least FIVE additional web pages, one of which must be your reference. So you must have a home page + four more pages + a reference page. All six pages must be contained in a folder called major on your P: drive. The file name major must be in lowercase, thus you should have a folder called p:\major Your home page/start page must be called index.html. The file name index.html must be in lowercase, thus you should have a file called p:\major\index.html. If you have done the two steps above PROPERLY, you will now have a website called MAKE SURE YOU CAN OPEN THIS WEBSITE IN INTERNET EXPLORER on a machine OTHER than the ones in MC230 and MC235 and other than the machine you designed it on. Also try all your links and check all your images to make sure they work also. IF YOU CAN NOT OPEN IT THEN THE MARKING T.A.S WILL NOT BE ABLE TO OPEN IT AND YOU WILL RECEIVE ZERO FOR THIS ASSIGNMENT. Use your creativity to layout your website with unique link categories based on your personal experiences. For example you might have links such as "Hobbies", "Family", "Education", etc. You decide on content organization and you must create the link categories you feel are appropriate Create the banners, buttons, layout. YOU MUST PROVIDE US WITH THE NATIVE FILES EVEN FOR the banner and buttons, i.e. you must save not only the.jpg/gif files to the p: drive but also the.psd files. 2. Table structure: Your web pages should use a table set up (not cascading styles sheets, we did not cover CSS in class) with a fixed width of 780 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 Photoshop if you choose to make your own buttons AND you must supply us with the.psd files that you used to make those buttons. 4. References: Set up a link off the homepage where you link to the References web page and place all your references of where you obtained any graphics you did not create yourself, and/or if you obtained any content from another site, you must include references for that content, you should also credit any sound/movie clips used. NOTE YOU MUST ALSO INCLUDE REFERENCES TO YOUR ORIGINAL NATIVE FILES (your.psd file, your.fla file, etc... FOLLOW THE FOLLOWING DIRECTIONS TO GIVE US ACCESS TO YOUR NATIVE FILES: 1. Create a sub folder within the folder called major. This folder must be called originals (all lowercase). Thus you will now have a link called 2. Move all of your Photoshop native files, (i.e., all the files that end with the extension.psd), into the folder called originals. NOTE: Remember that the P: drive is VERY case sensitive, so we recommend naming ALL you.psd files with lowercase file names AND with NO SPACES in the filename, thus, a good file name would be homepagebanner.psd and a bad file name would be HomePage Banner Copy.psd 3. Now, double check that you did the copy correctly by seeing if the links work to your psd files. You check your links by opening Internet Explorer and typing in the following address: Thus, using the above example, for user jsmith34, the valid address would be: MAKE SURE THAT THERE IS A WORKING LINK FOR EACH PSD FILE! NOTE: if you try clicking on a.psd link from a machine that does NOT have Photoshop installed, the machine will try to figure out what program to use to open it, just click cancel, this still means your link is correct. HOWEVER, if you click on a link to your.psd file and the machine says "The web page can not be found", then your link is incorrect and you need to fix it. 4. Copy the working address for each.psd file INTO YOUR REFERENCES WEBPAGE. There MUST be a link in your references page for each of the psd files you created for your personal website. 5. Repeat steps 2 to 4 above for all Flash native files you have created. Flash native files have the extension.fla 6. NOTE: you do NOT need to supply us with links to the native file for your movie (the moviemaker.mswmm file) OR with the native file for your sound (the Audacity.aud file). Nor do you need to upload these files to the originals folder, we do not need to have access to them. Be creative but don't forget to be professional also! Marking Scheme: Based on what you have learned from your labs, put together a professional website that uses different Dreamweaver attributes (list, bookmarks, tables, links, buttons, text formatting, etc) to effectively create a professional looking website. Use your creativity and go beyond providing a standard personal website structure. Below is the list of criteria to be used for marking purposes. Criteria:

3 Page 3 of 5 Layout and Some Basic Instructions: The top level folder MUST be called major (all lower case). Your first page MUST be called index.html (all lower case). Thus, eventually, when you copy your final product on to a lab machine in MC230 or MC235 your first page would be found in P:\major\index.html ALL of you images and additional web pages must be UNDER the folder major, i.e. must be contained in the folder major or in sub folders of the folder major. Outer table size must be 780 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. 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. Color creativity: As with every other assignment in CS1033, you must use the colors in your assignment in a creative, clean, professional manner. I.e. the colors must be consistent within each web page and within the site, flow nicely and complement the overall look of your website. Images: Use images effectively through out your website to enhance the theme and visual appeal of your website Use professional, crisp images only You must show instances of the following items used in an appropriate manner: Navigational Links Banner (780 width) Links: You must have one of each type as listed: text links, links, link(s) pointing to your files within your site, link (s) to a website on the Internet Structured List (ordered or unordered ) Bookmarks Text formatting: Appropriate use of headings, font size, font type Appropriate text emphasis Balance of the text size with respect to the overall website Animation: Must be viewable Must be smooth, not jerky Must be used in an appropriate manner (i.e. it must fit in with your website, or add some sort of visual appeal to your website) Video Clip: Must be professional and appropriate Must use effective transitions Must contain music and some sort of appropriate caption at some point. Sound: Must have sound as part of your video clip When marking the assignment, the t.a. 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 t.a. comes to the appropriate page There should be a way to pause/stop the sound/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: With Or Without You by U2, 1987 Or if you wrote the music yourself Music on Video: Original Piece written by me, 2009 Technical: Files must work properly and be viewable from your Publish area File must be well organized within the site Follow the Website Criteria on the course on the website. Also appended to the end of this document, is a checklist for building a website properly. 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 to the Flash and Photoshop native files you created (.psd,.fla) 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.. Handing In Your Major Assignment:

4 Page 4 of 5 You must use your lab machines (in Middlesex College, room 230 or room 235) to hand in your assignment. In order to hand in your major assignment, perform the following steps: 1. Log onto a machine in MC 230 or MC Make sure your entire website is stored in a folder called major. The major folder must contain a file called index.html The index.html file must be your first page and all your other files and other sub folders must be inside major in a well organized manner. The folder name major must be all lowercase. The index.html file name must be all lowercase. It is preferable to do all your work right on the p: drive, thus create a folder called major on the p: drive, then start up Dreamweaver and select Size>New Site and create a new site called Major Assignment that points to P:/major. Then do all your work WITHIN that site. If however, you choose to do it at home, then follow the following steps: 1. Do all your work at home in a folder called major. MAKE SURE YOU COPY ALL OF YOUR images INTO A SUBFOLDER INSIDE major before doing any of the Dreamweaver work. Then, using Dreamweaver at home, create your site. 2. Copy your folder major, including ALL of it's contents, to the P: directory on your Middlesex College lab machine. To see the P: drive, just open Windows Explorer (or explore My Documents) and look at the drop down box. You should see the P: drive there as shown in this image: 3. Double check in Internet Explorer or Fire fox that your website in major is on the internet by typing the following web address: You MUST check this link from a machine that is NOT in Middlesex College, for example your home machine or another machine on campus. For example: if your username was reid, you would type: This should bring up your first page in index.html. If it doesn't, you have done something wrong, try again or contact your professor. 3. Now you must prepare your file to submit to webct. In notepad (or some other simple text editor) create a file called uwouseraccount_major.txt, make sure the name of the file is all lowercase. For example, if your name were John Smith and your UWO user account was jsmith34, then you would create a file called jsmith34_major.txt Inside the uwouseraccount_major.txt, list the following: the web address (include the of where your home page can be viewed For example: if your name was John Smith and your UWO user account was jsmith34, then here is a possible jsmith34_major.txt file:

5 Page 5 of 5 NOTE: you don't need to put references in the above txt file this time because you have included the references in one of your web pages. Go into and upload and submit the following file: uwouseraccount_major.txt (if you fail to submit this file, you will receive an automatic ZERO, the time stamp on this file and the time you uploaded your files to major will be used to decide on the punctuality of your assignment) NOTE: The labs will be VERY busy because every student MUST hand in their assignment via a Middlesex College lab machine. Thus, try to have your assignment done and handed in at least 1 or 2 days before it is due, otherwise you might not be able to find a free machine in the lab! Dreamweaver Website Tips: A lot of the following concepts have been presented during the lectures and used in your lab tutorials, remember to think about them when designing your website :-) TECHNICAL Homepage Other web pages within site Represented as index.html unless index.html is your splash (first) page. In that case, you might call your home page home.html 3 Click Rule structure Banner (top) Approximate size 150 x 780 Can be taller as long as all your side links or top links fit within the window (no scrolling) Images Clear, no noise File size (download time) Alternative Text for major images Meta Tags Description, keywords in homepage and in other major web pages Text Color Text Size Navigational Links Web page Headings Bottom of web page Spelling/Grammar Speed Easy to read Appropriate size, font type relative to overall web page Easy to read Size appropriate with rest of web page Should not have to scroll Target field: new window or not? Need a heading on each web page Need to know what page you are on Complicated Navigational structure, show path chosen Contact information: dept, city, , fax Use Spell Checker Max sec at 56K modem CREATIVE Color Web page Balance Image Links Navigation Images WEBSITE FILE ORGANIZATION Files Upload Color balance (important!!) Pleasing colors to match company profile Page background color Web page boundaries Sections: easily identified, easy to read Balance: size and font Buttons: suitable size Color: what color are links Easy to navigate through your website and placement Fits with rest of color scheme Fits with the content Images folder Use folders to further organize your web pages Always use lower case file names with NO SPACES in them. Server needs: file names and case sensitivity Always use lower case