GDES 45 Online Weekly Instructions
Fall 2012

• Skip to the Current Week
• All video tutorials and lectures can be seen at
  http://streaming.missioncollege.org/mgarrett/media/gdes45_online_videos.htm
• Make sure you have quicktime installed(get it here)
• Check due dates on the calendar in Angel
• All book related files can be downloaded from http://www.learningwebdesign.com/materials/index.html
• If you have general questions, ask them in the discussion forum in the lessons folder in Angel.
• Here is a link to a pdf of the entire Photoshop CS5 help file as a PDF.
  

Week 1 (Aug. 27) Instructions:

1. Read the General Class Information in Angel (http://wvmccd.angellearning.com)
2. Please take this survey so we can better plan our class schedule.
   1. https://www.surveymonkey.com/s/GDES1
3. Download the syllabus in Angel under the resources tab near the top.
4. Watch the video orientation if you missed the real one.
5. Read Chapters 1 and 2 in Learning Web Design.
   1. Important change: A new version of the book came out this week, so please order the 4th edition 2012 http://www.amazon.com/dp/1449319270/ref=rdr_ext_tmb
      
6. Read the file under Day 1 Terms named gdes45_day1_terms_fall08.pdf in the week 1 folder.
7. Assignment 1 - First Page: Create your first web page by watching the Lecture 1 video tutorial. Recreate the page exactly. In later assignments, you will have more creative freedom. You may need to install quicktime on your computer. Drop the file in the Assignment 1 drop box. Include your name in the file name as in mark_garrett_page1.htm. Check the calendar for due dates.

Week 2 (Sept. 3) Instructions:

1. Read Chapter 3 and 4 in Learning Web Design.
2. Also take a look at the Phases of production from the book Web Redesign Workflow that works. See it at http://www.gotomedia.com/goto/redesign/
3. Assignment 2 - Text Formatting Tags: Create your second web page by watching the text formatting tags video tutorial. Please recreate the page exactly. You may need to install quicktime on your computer. Drop your file in the Assignment 2 drop box. Name the file page2.htm with your name in the file name as in mark_garrett_page2.htm. Check the calendar for due dates.
   1. Important note on the videos: I am updating a number of videos this semester, so some may be in XHTML and some may be in HTML5. It's a good idea to know both syntaxes, since you will see both on the web and both are viable. They are not all that different. Check out Ch10 of Learning Web Design for some of the differences, especially pages 181-185.

Week 3 (Sept. 10) Instructions:

1. Read Chapter 5 in Learning Web Design.
2. Read Chapters 1 and 2 of The Principals of Beautiful Web Design, 2nd Edition.
3. Take a look at the file Dos and Don'ts of web design in the weekly folder.
4. You can also check out these articles (Optional):
   1. Biggest Mistakes in Web Design 1995-2015 - from Web Pages That Suck where you learn good web design
   2. Checklist of bad web design Part Two from Web Pages That Suck Learn good web design by looking at bad web design
5. Check out these example bad websites for things not to do.
   1. http://www.angelfire.com/super/badwebs/
   2. http://www.siphawaii.com/
   3. http://www.supervideo.com/
   4. http://www.sixtiespress.co.uk/
6. Read pages 265-268 in Learning Web Design about color and the hexidecimal system. Later we will go over specifying color with RGB.
7. Check out these pages on color schemes and color pickers.
   
   1. http://www.color-wheel-pro.com/color-schemes.html
   2. http://kuler.adobe.com/#themes/mostpopular?time=30
      This is a cool color picker and theme collection from adobe.
   3. http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
      This is another color scheme tool to make coming up with color schemes easier.
      
8. Assignment 3 - Lists: Create a web page by watching the Lists and color intro video tutorial.The bullet3.png file needed for the page is in the weekly folder. For this assignment, please recreate the page exactly. In later assignments, you will have more creative freedom. You may need to install quicktime on your computer. Drop your file Assignment 3 drop box. Name the file page3.htm with your name in the file name as in mark_garrett_page3.htm. Check the calendar for due dates.
   1. Important note on the video: Again, I am updating a number of videos this semester, so the 3rd video has an intro to links, even though you did that in the first video. I have also posted a new version of the first video. Feel free to check it out, although it is not required, and you do not have to redo that assignment.
      
9. You can begin Assignment 4 - Reading Summary which is:
   
   1. Create 1 basic web page on your own with 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take 2 items from each chapter. Use the tags we went over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. You must use the following tags, elements, or css styles at least once. There are samples to look at in the week 3 folder.
      
      1. a heading, h1 for example
         
      2. blockquote
         
      3. strong
      4. background-color
      5. a list
      Check the calendar for due dates.

Week 4 (Sept. 17) Instructions:

1. Review Chapters 4,5 and 6 in Learning Web Design. Chapter 5 covers many of the text tags we have been using. Chapter 6 covers links.
2. Make sure you have read Chapter 1 of your book The Principals of Beautiful Web Design, 2nd Edition.
3. Read pages 1-16 of the file Building Usable Web Sites(usable_sites.pdf) in the week 4 folder.
4. Review the web page on image file formats.
   1. https://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
      
5. Check out this page on scanning if you don't feel comfortable with scanning.
   
   1. https://www.garrettmedia.com/mission/gdes45/gdes45_scanning_tips.htm
6. Finish Assignment 4 - Reading Summary. Check due dates on the calendar.
   1. Create 1 basic web page on your own with 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take 2 items from each chapter. Use the tags we went over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. You must use the following tags, elements, or css styles at least once. There are samples to look at in the week 3 folder.
      
      1. a heading, h1 for example
         
      2. blockquote
         
      3. strong
      4. background-color
      5. a list
      Check the calendar for due dates.
7. Assignment 5 - Links, Paths and First Image: Create 2 web pages by watching the video tutorial. Recreate the site exactly as the one in the video, although you can use a different image. Chapter 6 in Learning Web Design also can help. Name the files page4.htm and page5.htm, and also include your image file. The image will not show up for me unless you send it along with your html files. The link to the page about image file formats is above.
To turn in the assignment:
• Before you zip the folder with your files, test the site before you send it make sure all the links work.
• To turn in assignments with multiple files, it works best if you put all 3 files(2 html pages and 1 image) in a folder and zip the folder. To zip a folder on a PC, create a folder and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder." On a mac, control click or right click on the folder and select compress.
• Drop your zipped files into the Assignment 5 drop box.
• Check due dates on the calendar in angel.

1. You can begin Assignment 6 - Resume or Reading Summary. There are examples in the week 4 folder.
   Full requirements and instructions listed here. Check due dates on the calendar.

If you have general questions, ask them in the discussion forum in the lessons folder.

Week 5 (Sept. 24) Instructions:

1. Read pages 17-30 of the file Building Usable Web Sites(usable_sites.pdf) in the week 5 folder.
2. Make sure you have read Chapters 1 and 2 of your book The Principals of Beautiful Web Design.
3. Review the web page on image file formats.
• https://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
4. Read Chapters 7 and 21 of Learning Web Design for more detail on images.
5. Check out this page on scanning if you don't feel comfortable with scanning.
• https://www.garrettmedia.com/mission/gdes45/gdes45_scanning_tips.htm
6. Finish Assignment 6. There are examples in the week 4 folder. Check due dates on the calendar.
• Full requirements and instructions listed here
7. Assignment 7 - Banner Image and Image Placement: Create a web page by watching the video tutorial. You may need to install quicktime on your computer. Drop your files into the Assignment 7 drop box. Be sure to include all image files. Zip a folder with all your files and drop the zipped file into the drop box. (See week 4 for help) The link to the page about image file formats is above. Remember, the images will not show up for me unless you send it along with your html files. (Check due dates on the calendar.)
   
   Notes on Assignment 7: CSS margins are discussed in Ch. 14 on p.328 of your book Learning Web Design. After watching lecture 5-2 on image placement, you may want to look at p.429 of Learning Web Design which has image replacement techniques you can use on headings like these. It is not required on this assignment. We will go over the technique later in the course. (Check due dates on the calendar.)
   
   Update 10-5-11: It looks like I may have had the old version of the video for assignment 7 linked on the video page. I have posted the new version on the video page as well. I will accept either version for assignment 7. The code image in the weekly folder is from the new version. It just proves what I usually say, make sure you test a page after you make changes, to ensure you did what you think you did ;) I will also will push the due date to Monday because of the error.
   

If you have general questions, ask them in the discussion forum in the lessons folder.

Week 6 Instructions (Oct. 1):

1. See update on assignment 7 above.
2. Read Chapter 8 of Learning Web Design for more information on tables.
3. Read Chapter 22 of Learning Web Design for more detail on optimizing images.
4. Assignment 8 - Tables : Create a web page like the one in the video lecture by watching the video tutorial. The link to the videos is in the lessons area Drop your files into the Assignment 8 drop box. Be sure to include all image files with your submission. You can use the image shown in the video for background images, or one of your own. The image is in this week's lessons folder. The images will not show up for me unless you send it along with your html files.  (Check due dates on the calendar.)
5. Assignment 9 - Image preparation and optimization: Clean up and optimize the soldier1.psd image by following the procedure in the Lecture video Image preparation and optimization. The link to the videos is in the lessons folder. The original image is in this week's lessons folder.  Drop your finished image file into the Assignment 9 drop box.  (Check due dates on the calendar.)
6. Start Assignment 10 - 2 Page Site: Create a 2 page web site about an item in the news. An item in the news would be something like elections, or the California budget crisis. Try to create a design that is both attractive visually and easy to use. Instructions on creating a banner image can be seen here https://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-1 video. If you want to try to use CSS to layout the page, you can look ahead to Chapter 14-16 in Learning Web Design. We will cover very basic CSS layout together soon, but not completely before the assignment is due. Strive for an organized and effective layout. This assignment will be graded both on the requirements above and on design.There are examples in the weekly folder. dropbox is in the week 7 folder. (Check due dates on the calendar.)
   UPDATE:
   Also, for this assignment, feel free to use the layouts in Chapter 16 in Learning Web Design as a starting point. See a video about the templates on the video index page.
   
   
   Assignment 10 Requirements:
   1. Create and use at least 1 banner/text image and use CSS to lay out the pages.
   2. At least 2 tables for some type of data are required.
   3. 2 linked web pages are also required.

Week 7 Instructions (Oct. 8):

1. Review Chapters 21 and 22 of Learning Web Design. They have more information on web graphics and how to optimize them.
2. Watch the intro to CSS video
3. Update:Watch the video on Background image placement(new on 10-10-12).
   There is no assignment associated with this video.
4. Check out the file in the lessons folder on:
   Color using the hexidecimal color or RGB, and background color transparency.
   Look at CH. 13 and specifically page 271 of Learning Web Design for a description of RGBa, which can be used to make your background colors partially transparent.
5. Assignment 11 - Learning Web Design exercises 11-1 and 11-2: Complete Exercises 11-1 and 11-2 from Learning Web Design using the same code as in the Lecture video from this week. Drop your finished files into the Assignment 11 drop box. (Check due dates on the calendar.) All book related files can be downloaded from http://www.learningwebdesign.com/4e/materials/index.html.
   Here is a link to a page on CSS on my website that is mentioned in the video.
6. Finish Assignment 10 - 2 Page Site: Create a 2 page web site about an item in the news. An item in the news would be something like elections, or the California budget crisis. Try to create a design that is both attractive visually and easy to use. Instructions on creating a banner image can be seen here https://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-1 video. If you want to try to use CSS to layout the page, you can look ahead to Chapter 14-16 in Learning Web Design. We will cover very basic CSS layout together soon, but not completely before the assignment is due. Strive for an organized and effective layout. This assignment will be graded both on the requirements above and on design. There are examples in the weekly folder. The dropbox is in the week 7 folder. (Check due dates on the calendar.)
   Feel free to use the layouts in Chapter 16 in Learning Web Design as a starting point. See a video about the templates on the video index page.
   
   
   Assignment 10 Requirements:
   1. Create and use at least 1 banner/text image and use CSS to lay out the pages.
   2. At least 2 tables for some type of data are required.
   3. 2 linked web pages are also required.

Week 8 Instructions (Oct. 15):

1. Be familiar with the information in Chapters 11 and Chapter 12 of Learning Web Design. They have more information on css and using css to format text.
2. Watch the video on RGBa color. There is no assignment to turn in for this video.
3. Watch the video on Locations for CSS and basic selectors. There is no assignment to turn in for this video.
4. Assignment 12 - CSS for text formatting: Create a web page by watching the video tutorial on CSS for text formatting. Use this start file which has much of the code for the page(right click to download). Please recreate the page exactly. Drop your files into the Assignment 12 drop box. (Check due dates on the calendar.)

Week 9 Instructions (Oct. 22)

1. Complete Exercises 12-1 through 12-7 from Learning Web Design. They are related to using selectors and formatting text which we covered last week. You do not have to turn in these files.
2. Read Ch. 3 in The Principals of Beautiful Web Design on texture.
3. Watch the video on the CSS box model.
4. Be familiar with the information in Chapter 14 of Learning Web Design. It has more information on the css box model.
5. Complete Exercises 14-1 through 14-3 from Learning Web Design. They are related to the CSS box model. You do not have to turn in these files.
6. Watch the video on creating animated gifs.
7. Assignment 13 - Creating an Animated Gif: Your assignment is to create an animated gif using any software necessary that will promote a product for sale. Watch the video on creating animated gifs for tips. Do not recreate the exact animation from the video. You can also look at the animated_gifs.pdf file in the week 9 folder, and Photoshop help under animation for tips. The requirements are below. Drop your psd of your file and the final gif file into the Assignment 12 drop box. (Check due dates on the calendar.)
   
   NOTE: For Photoshop 6, use the timeline panel instead of the animation panel from the video. Click the little arrow in the middle of the panel and choose create frame animation, and you will see something similar to the older animation panel.
   
   • You may use an image of the product from a website or catalog as a component of your animation, but you must create your own original animation.
   • The size can either be 728x90 Leaderboard or 160x600 as in the video.
   • The animation must be a minimum of 4 frames and must be an appropriately small file size(less than 50k).
   • Remember gifs work better with images that have fewer colors.
   • Try to communicate your information effectively and efficiently.
   • There are samples to view in the weekly folder.
   • Refer to animated_gifs.pdf from Learning Web Design 2 and Photoshop help under frame animation for help.
     • The CS6 user manual is here.
     • Photoshop help files for CS3-CS5 can be found here.

Week 10 Instructions (Oct. 29)

1. Read Ch. 4 in The Principals of Beautiful Web Design on typography.
2. Be familiar with the information in Chapter 15 of Learning Web Design. It has more information on the css positioning and CSS Floats.
3. Watch the lecture on css positioning.
4. Assignment 14 - CSS floats: Create a web page by watching the video tutorial on CSS floats. Use these start files which have much of the code for the page(right click to download). Updated with image file on Nov. 5. Please recreate the page exactly. Drop your files into the Assignment 14 drop box. (Check due dates on the calendar.)
5. For extra practice, complete Exercise 15-1 from Learning Web Design. It is related to CSS floats. You do not have to turn in these files.
6. Assignment 15: Using the file web_critique_criteria3.pdf as a guide, evaluate another student's Assignment 10(2 page site) submission. The submissions are in the assignment 10 drop box. Critique the persons submission who is in the folder below yours. If you are at the bottom of the list, do the person's at the top. Look at their pages and come up with 5-10 comments, observations or suggestions to give them feedback on their design. The idea is to help them see the design with a fresh perspective, and improve their future designs. Again, you can use the file web_critique_criteria3.pdf to help with ideas of things to talk about. Post your comments in the Assign. 15: Discussion Forum for critique of Assign. 10 in the week 10 folder. Make sure to say in your post title who's pages you are evaluating. (Check due dates on the calendar.)

   If you have general questions, ask them in the discussion forum in the lessons folder.

Week 11 Instructions (Nov. 5)

1. Make sure you have read Ch. 4 in The Principals of Beautiful Web Design on typography.
2. Review Chapter 15 of Learning Web Design. It has more information on css floats and positioning.
3. For extra practice, complete Exercise 15-2 through 15-4 from Learning Web Design. They are related to CSS floats. You do not have to turn in these files.
4. Assignment 16 - Lists for Navigation: Create a web page by watching the video tutorial on Lists for Navigation. Use this start file(right click to download). Please recreate the page exactly. Drop your finished file into the Assignment 16 drop box. (Check due dates on the calendar.)
5. Final Project: Begin Final Project. Make sure to check requirements and specifications in the project description(click here for description). See samples of comps, creative briefs and final projects in the weekly folder. There is a drop box for the comps or briefs in the lessons folder. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. (Check due dates on the calendar.) See assignment 17 below for an assignment related to the final project.
6. Assignment 17: Do comps or a Creative Brief for the final Project. You do not have to do both(see instructions below under Final Project). See samples of comps, creative briefs and final projects in the weekly folder. Drop your .psd(photoshop files of your comps) or your Word or PDF file of your creative brief into the Assignment 17 Drop Box which you will be posted next week.

Week 12 Instructions (Nov. 12)

1. Make sure to read Chapter 16 of Learning Web Design. It has more information on Page Layout with CSS, layout strategies, and layout templates.
2. Watch the video on Page Layout with CSS - Part 1 - Using Floats. It covers the basics of floats for layouts.
3. Assignment 18 - Page Layout with CSS - Part 2: Create a web page by watching the video tutorial on Page Layout with CSS - Part 2 - CSS Layout Example. It demonstrates a complete layout. Use this start file(right click to download). Please recreate the page exactly. Drop your finished file into the Assignment 18 drop box. (Check due dates on the calendar.)
4. Both videos will help with the final project page layout.
5. Finish Assignment 17(see above). The drop box for Assignment 17 is in the weekly folder.
6. Final Project: Final Project. Make sure to check requirements and specifications in the project description(click here for description). See samples of comps, creative briefs and final projects in the weekly folder. There is a drop box for the comps or briefs in the lessons folder. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. (Check due dates on the calendar.)

Week 13 Instructions (Nov. 19)

1. Read Chapter 9 of Learning Web Design. It has more information on Forms.
2. Assignment 19 - Creating html Forms: Create 1 web page by watching the video tutorial on creating html forms and duplicating the procedure. Use this start file(right click to download). Recreate the page exactly. Drop your file into the Assignment 19 drop box. (Check due dates on the calendar.)
3. Assignment 20(Extra Credit):Watch the video on styling html forms. Recreate the page exactly starting with your assignment 19 ending file. Drop your file into the Assignment 20 drop box. (Check due dates on the calendar.)
4. Continue Final Project. Make sure to check requirements and specifications in the project description(click here for description). See samples of comps, creative briefs and final projects in the weekly folder. There is a drop box for the comps or briefs in the lessons folder. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. (Check due dates on the calendar.)

Week 14 Instructions (Nov. 26)

1. Review Chapter 18 on CSS Techniques in Learning Web Design. It has more information on CSS techniques like image replacement and CSS sprites.

2. Watch the video lecture on CSS techniques and image maps. There is no assignment for this video(yay!), but some information may be on the final exam(boo!).

3. Complete Assignment 20(Extra Credit):Watch the video on styling html forms. Recreate the page exactly starting with your assignment 19 ending file. Drop your file into the Assignment 20 drop box. (Check due dates on the calendar.)

4. Complete Final Project. Make sure to check requirements and specifications in the project description(click here for description). See samples of comps, creative briefs and final projects in the weekly folder. There is a drop box for the comps or briefs in the lessons folder. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. (Check due dates on the calendar.)
5. Usability Testing: There is no beta test on the Final Project required this semester, although it is a good idea to show your designs to other people throughout the design process to see ways to improve your design. You can also check out the following links to learn about usability testing. I would especially look at the Steve Krug Video and book below.
Usability Testing
• Rocket Surgery Made Easy - Steve Krug book/video on usability testing
  • Steve Krug Video
• Video of usablility test with a paper prototype(with a child test subject)
• Silverback (Guerrilla usability testing software for designers and developers)
• openhallway.com/ online usability testing
  • Video of openhallway
• Eye-tracking Web Usability Test Sample - video
• Usability Testing with Tobii T60 Eye Tracker and Tobii Studio - video
• Voices That Matter: Google Web Toolkit - Usability - video
6. Final Exam information below.

Week 15 Instructions (Dec. 3)

1. Watch the video lecture on Embedding Audio and Video. There is no assignment for this video(yay again!), but some information may be on the final exam(boo again!).
   1. See the page on audio embedding
   2. See the page on video embedding
2. Assignment 21: Critique the final web site of another student. After the due date for the final project, use the same proceedure as assignment 15. Take a look at other students' final projects in the drop box, and post your comments about their design in the Assignment 21 Discussion Forum. Critique the persons submission who is in the folder below yours. If you are at the bottom of the list, do the person's at the top. Look at their pages and come up with at least 5-10 comments, observations or suggestions to give them feedback on their design. The idea is to help them see the design with a fresh perspective, and improve their future designs. Again, you can use the file web_critique_criteria3.pdf to help with ideas of things to talk about. Post your comments in the Assignment 21 Discussion Forum for critique of Final Project in the week 15 folder. Make sure to say in your post title who's pages you are evaluating. You can also post comment about other projects in the folder. (Check due dates on the calendar.)
3. Watch a short video about our programs in web design, web development and others.
4. Take a look at the Web Design and Web Developer Certificates under the Programs link on the GDES Website. We have classes on Dreamweaver, Jquery, Wordpress, Photoshop and more.
5. Take the class exit survey under the lessons tab for more extra credit.
   

Week 16 Instructions (Dec. 10)

1. Watch the video lecture on Web hosting and FTP programs. There is no assignment for this video again.
2. Any late assignments must be turned in by Dec. 14.
3. Take the class exit survey under the lessons tab for more extra credit.
4. Watch a short video about our programs in web design, web development and others.
5. Take a look at the Web Design and Web Developer Certificates under the Programs link on the GDES Website. We have classes on Dreamweaver, Jquery, Wordpress, Photoshop and more.
6. Make sure to like our facebook page at http://www.facebook.com/missioncollegedesign. I may post some of your images there!
7. Take the Final Exam.
8. Thanks for taking the class, and I hope you enjoyed it.
   

Outside Links