GDES 45 Online Weekly Instructions
Summer 2013


Week 1 (June 10) Instructions:

  1. Read the General Class Information in Angel (http://wvmccd.angellearning.com)
  2. Download the syllabus in Angel under the resources tab near the top.
  3. Watch the video orientation if you missed the real one.
  4. Please take the opening day survey in the week 1 folder in angel.
  5. Read Chapters 1 and 2 in Learning Web Design.
  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 video on Basic Tags. You may need to install quicktime on your computer to watch the videos. Please recreate the page exactly. In later assignments, you will have more creative freedom. Before you send me your files, always make sure to check your file for errors by submitting it to the W3C validation service at:
    http://validator.w3.org/. Click on Validate File by Upload near the top, then click the browse button, locate your file, and submit. It will point out some coding errors, if you have any. After correcting any mistakes, submit your final files.
    Drop the file in the Assignment 1 drop box. Include your name in the file name as in firstname_lastname_page1.htm. Check the calendar for due dates.
  8. Read Chapter 3 and 4 in Learning Web Design.
  9. 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/
  10. Assignment 2 - Text Formatting Tags: Create your second web page by watching the text formatting tags video tutorial. Please recreate the page exactly. Don't forget to validate as you did with assignment 1 by checking the file at:
    http://validator.w3.org/
    Click on Validate File by Upload near the top, and then click the browse button, locate your file, and submit. Drop your file in the Assignment 2 drop box. Name the file page2.htm with your name in the file name as in firstname_lastname_page2.htm. Check the calendar for due dates.

    Important note on the videos: I have updated a number of videos recently, so most are in html5, while some might be in XHTML. 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.
  11. Please take this survey so we can better plan our class schedule.
    1. https://www.surveymonkey.com/s/GDES1
  12. Read Chapter 5 in Learning Web Design. It is about tags for text.
  13. Read Chapters 1 and 2 of The Principals of Beautiful Web Design, 2nd Edition. They are about layout and color.
  14. Take a look at the file Dos and Don'ts of web design in the weekly folder.
  15. 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
  16. 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/
  17. Find a website you think is poorly designed and post it under the forum topic Poorly Designed Websites in the discussion forum. Also comment on websites posted by others. The instructions for posting are there.
  18. Review pages 265-274 in Learning Web Design about color and the hexidecimal system. A bit of the same material is in Ch.2 of The Principals of Beautiful Web Design. Later, we will go over specifying color with RGB.
  19. Check out these pages on color schemes and color pickers. Some of these are also mentioned in your reading.
    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://colorschemedesigner.com/
  20. 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. Drop your files into the Assignment 3 drop box. Don't forget to include the bullet3.png file with your submission. If you forget, I won't see it. To turn in assignments with multiple files, it works best if you put all files 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. Name the file page3.htm with your name in the file name as in firstname_lastname_page3.htm. Again, don't forget to validate at :
    http://validator.w3.org/
    Check the calendar for due dates.

  21. You can begin Assignment 4 - Reading Summary which is:
    1. Create 1 basic web page on your own with at least 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take at least 2 items from each chapter. Use the tags we we have gone over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. There are samples to look at in the weekly folder. Make sure to validate at http://validator.w3.org/

      Requirements:
      You must use the following tags, elements, or css styles at least once.

      1. a heading, h1 for example
      2. blockquote
      3. strong
      4. background-color
      5. a list
      Check the calendar for due dates.

Week 2 (June 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 Chapters 1 and 2 of The Principals of Beautiful Web Design, 2nd Edition. They are about layout and color.
  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 at least 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take at least 2 items from each chapter. Use the tags we we have gone over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. There are samples to look at in the weekly folder. Make sure to validate HTML at http://validator.w3.org/. You can validate CSS at http://jigsaw.w3.org/css-validator/. You should validate both to see if you can catch errors.
      Note:The validators may give you multiple error messages for 1 mistake, so you may not have as many errors as you think.

      Requirements:
      You must use the following tags, elements, or css styles at least once.

      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 Links, Paths and First Image video. 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 as in the video, and also include your image file. The image will not show up for me unless you send it along with your html files. The names of your files must match the names in your links, or the links will not work. The link to the page about image file formats is above. Always Make sure to check your file for errors by submitting it to the W3C validation services at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/
    • 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.
  8. Assignment 6 - Resume or Reading Summary. There are examples in the weekly 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.
  9. Read pages 17-30 of the file Building Usable Web Sites(usable_sites.pdf) in the week 5 folder.
  10. Review the web page on image file formats.
    https://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
  11. Read Chapters 7 and 21 of Learning Web Design for more detail on images.
  12. Assignment 7 - Banner Image and Image Placement: Create a web page by watching the 2 video tutorials. Be sure to include all image files in your folder. Zip the 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. Make sure to validate HTML and CSS before submitting. Drop your files into the Assignment 7 drop box. 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.)
  13. Don't forget, if you have questions, or just interesting links or observations, post them in the discussion forum in the lessons folder. It is part of your grade ;)
  14. Read Chapter 8 of Learning Web Design for more information on tables.
  15. Read Chapter 22 of Learning Web Design for more detail on optimizing images.
  16. Assignment 8 - Tables : Create a web page like the one in the video lecture by watching the video tutorial Tables and Intro to Background Images. Be sure to include all image files with your submission. The images will not show up for me unless you send it along with your html files. 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. Again, make sure to validate before submitting. Drop your files into the Assignment 8 drop box. Check due dates on the calendar.

Week 3 Instructions (June 24):

  1. 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 original image is in this week's lessons folder.  Drop your finished, optimimized, image file into the Assignment 9 drop box.  Check due dates on the calendar.
  2. 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 banner text 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. 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. 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. The other videos from this week can also help. There are examples in the weekly folder. Check due dates on the calendar.
    1. Assignment 10 Requirements:
    2. 2 linked web pages are required
    3. Create and use at least 1 banner/text image
    4. Use CSS to lay out the pages
      • You can use the templates in Ch. 16 since we haven't really covered CSS layout yet. You do not have to use the templates.
    5. At least 2 tables for some type of data are required
  3. Review Chapters 21 and 22 of Learning Web Design. They have more information on web graphics and how to optimize them.
  4. Watch the intro to CSS video. This video also demonstrates exercises 11-1 and 11-2 from the book, which you will recreate for assignment 11.
  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 that is mentioned in the video.
  6. Watch the video on Background image placement. There is no assignment associated with this video.
  7. 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.
  8. Watch the video on RGBa color. There is no assignment to turn in for this video.
    The file in the lessons folder on Color using the hexidecimal color or RGB, and background color transparency goes along with the video. Also 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.
  9. Post a CSS or Web Site Gallery URL under my post in the discussion forum in angel, by replying to my post. An example would be http://www.cssbeauty.com/gallery/. My post is titled "Web Gallery sites". Also, look at the galleries posted by others, reply to their post by posting the URL of a site you saw in their gallery that you liked, and tell us why.
  10. Watch the video on Locations for CSS and basic selectors. There is no assignment to turn in for this video.
  11. 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.)
  12. 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.
  13. Read Ch. 3 in The Principals of Beautiful Web Design on texture.
  14. Watch the video on the CSS box model.
  15. Be familiar with the information in Chapter 14 of Learning Web Design. It has more information on the css box model.
  16. 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.
  17. Watch the video on creating animated gifs.
  18. 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 weekly 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, then click the button that now says Create Frame Animation.
    timeline screenshot

    The button in the bottom left of the timline panel switches back and forth between a video timeline display and a frame based animation display.
    timline button


    • Requirements:
    • 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.

Week 4 Instructions (July 1)

  1. Read Ch. 4 and 5 in The Principals of Beautiful Web Design on typography.
  2. Be familiar with Ch. 13 of Learning Web Design. It covers more selectors, gradient backgrounds, opacity, and other goodies.
  3. Be familiar with the information in Chapter 15 of Learning Web Design. It has more information on the css positioning and CSS Floats.
  4. Watch the video on css positioning.
  5. 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). The start file may be slightly different from the video, accounting for some errors that were corrected. Don't worry about it. Please recreate the page exactly. Drop your files into the Assignment 14 drop box. Make sure to validate as always. (Check due dates on the calendar.)
  6. 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.
  7. 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.)
  8. 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.
  9. 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. Make sure to validate as always. (Check due dates on the calendar.)
  10. 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.
  11. 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. (Check due dates on the calendar.)
  12. Make sure to read Chapter 16 of Learning Web Design. It has more information on Page Layout with CSS, layout strategies, and layout templates.
  13. Watch the video on Page Layout with CSS - Part 1 - Using Floats. It covers the basics of floats for layouts.
  14. 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). The start file may be slightly different from the video, accounting for some errors that were corrected. Please recreate the page exactly. Drop your finished file into the Assignment 18 drop box. Make sure to validate as always. (Check due dates on the calendar.)
  15. Both Page Layout videos will help with the final project page layout.

Weeks 5 and 6 Instructions (July 8)

  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. All of you probably have to fill out forms often online. Post a screenshot or URL of at least one good or badly designed form in the discussion forum under the post I created, and tell us why you think it's good or bad. Comment on the post of at least one other student.
  4. Review Chapter 18 on CSS Techniques in Learning Web Design. It has more information on CSS techniques like image replacement and CSS sprites.
  5. 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.) Make sure to validate HTML using http://validator.w3.org/ and CSS with http://jigsaw.w3.org/css-validator/
  6. 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!). Here are the files if you want to follow along.
  7. 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. The dropbox is under the lessons link. Don't forget to validate HTML and CSS at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/. (Check due dates on the calendar.)
  8. Usability Testing: There is no formal 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. Check out the following links to learn about usability testing. I would especially look at the Steve Krug Video and book below.
    Assignment: Informal User Testing:
    After looking at some of the information below on User Testing, ask someone to take a look at your site in progress and give you feedback. Post at least one thing you learned in the discussion forum under the post titled "Feedback from informal user testing"
  9. Usability Testing
  10. 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
  11. 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 try to address all the areas on the critique file with 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 weekly 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.)
  12. Watch the video lecture on Web hosting and FTP programs. There is no assignment for this video again, but there may be exam questions.
  13. Watch a short video about our programs in web design, web development and others.
  14. 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.
  15. Take the class exit survey under the lessons tab for more extra credit.
  16. Any late assignments must be turned in by July 18.
  17. Make sure to like our facebook page at http://www.facebook.com/missioncollegedesign. I may post some of your images there!
  18. Take the Final Exam.
  19. Thanks for taking the class, and I hope you enjoyed it.

The Final Exam

The Final Exam will be taken on Angel at 7pm Thursday, July 18. Let me know if you cannot take it at that time.
There are approximately 60-70 questions.
The questions are multiple choice, matching and true false.
The questions will cover information found in the videos, exercises and files used throughout the course.
Login to Angel at 7PM and look under the lessons tab for the exam.
You have 2 hours to complete the exam.
Do not use the save button if visible.
Click the submit button only when you are finished.