Assignments

Edit 0 11 …

Assignments


Instructions and due dates for Research and Presentations

Assignment 1: Blog


Create and add URL to Class Blogs by Friday, October 9

Create a course journal using blogger.com add custom template, and improve as quarter continues. You will be graded at the end of the quarter for your blog. You must have the blog fully functioning by the end of lab one. At week five, you must have modified the template design to be unique to your blog. At quarter end you must have a completely original layout and design. You must have your CSS as an external file. You must include all links to assignments per the instructions in the syllabus under the section titled, “Submitting Assignments”. Answers to study questions also will be posted by end of week to the blog.

Study Questions

Week 1 Study Questions by Saturday, October 10

  • 1. What is meant by accessibility standards?
  • 2. How can color create a barrier to content?
  • 3. Why is it important to provide a way for users to skip the navigation list?
  • 4. What is meant by providing “ALT Text” to the user?
  • 5. What is the difference between Section 508 and WCAG 1.0?
  • 6. How does design differ from style?
  • 7. Why is it important to separate content from presentation?
  • 8. Why is it important to validate our mark-up & CSS?
  • 9. What are the two major parts of a CSS rule?
  • 10. Define these CSS properties: float, margin, padding, and border.
  • 11. Define these CSS properties: font-family, font-size, line-height, letter-spacing.
  • 12. What is the “Box Model?”
  • 13. What is the difference between a CSS class and an ID?
  • 14. What is the difference between a DIV and a SPAN?
  • 15. How does the “Cascade” relate to the conflicts in CSS rules?
  • 16. What is the purpose of the Document Type Declaration?
  • 17. What is the difference between a browser’s “quirks” mode and it’s “standards” model?
  • 18. Define inline, embedded, and external (aka. local, global, and linked) stylesheets?

Additional Resources
o http://www.adobe.com/designcenter/dialogbox/stylevsdesign/
o http://www.blooberry.com/indexdot/css/propindex/all.htm

Week 2 Study Questions by Saturday, October 17

  • 19. How does the float property work?
  • 20. Explain absolute positioning.
  • 21. Explain relative positioning
  • 22. What is the difference between absolute positioning and fixed positioning?
  • 23. What effect do margin, border, and padding have on an element’s width?
  • 24. Draw a diagram explaining the “Box Model”.
  • 25. Explain how vertical margins collapse on block level elements.
  • 26. What is the effect of using the clear property with floated elements?
  • 27. Discuss the principle of unequal spacing.
  • 28. What is the golden section?


Week 3 Study Questions by Saturday, October 24

  • 29. What is the purpose of design?
  • 30. Explain how grouping aids visual organization.
  • 31. Discuss the roles of repetition, echo, and theme in creating visual harmony.
  • 32. How does a layout grid facilitate the design process?
  • 33. What is the key difference between liquid and elastic layout?

Additional Resource
o http://www.csszengarden.com/?cssfile=/063/063.css (elastic layout example by HTMLDog)

Week 4 Study Questions by Saturday, October 31

  • 34. Why use lists for creating navigation systems?
  • 35. How can you create custom bullet graphics for HTML lists?
  • 36. How does one create a horizontal navigation list?
  • 37. How can one create status indicators with CSS only?
  • 38. What are Definition lists and when would we use them?


Additional Resource
o http://www.alistapart.com/articles/taminglists/
o http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/


Week 5 Study Questions by Saturday, November 7

  • 39. Name a site that tracks and documents CSS bug and hacks?
  • 40. How can we circumventing a majority of IE/PC bugs without using hacks?
  • 41. What is one way to catch design problems before they become too complicated to repair?
  • 42. Why is it important to establish a visual hierarchy in design?
  • 43. What is one way to create a clear order of visual dominance?
  • 44. What are some techniques for adding emphasis to page components?
  • 45. Why is it important to develop the skill of evaluation?

Additional Resources
o http://www.positioniseverything.net/ie-primer.html
o http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Week 6 Study Questions by Saturday, November 14

  • 46. What are the size attributes used to change text sizes?
  • 47. What are relative text sizes important to use?
  • 48. What is leading? How do we set it using CSS?
  • 49. What is an em?
  • 50. What are the generic font choices?

Additional Resources
o http://www.counterspace.us/typography
o http://webtypography.net/


Week 7 Study Questions by Saturday, November 21

  • 51. What are some methods for communicating a concept with visual design?
  • 52. Discuss the use of “theme” in visual design.
  • 53. How does “theme” relate to style?



Week 9 Study Questions by Saturday, December 5

  • 54. What is meant by accessibility standards?
  • 55. How can color create a barrier to content?
  • 56. Why is it important to provide a way for users to skip the navigation list?
  • 57. What is meant by providing “ALT Text” to the user?
  • 58. What is the difference between Section 508 and WCAG 1.0?


Assignment 2: CSS Layout


Design comps critique: show on Friday, October 30

Zen Garden due on Friday, November 6

Using the example XHTML provided at http:://csszengarden.com, create a unique layout and page design for this single XHTML document. You are not allowed to modify the HTML at all. You may use embedded stylesheets during the design process, but they must be externalized once the design is complete. You are not allowed to begin with the example CSS file. You may consult it, but you must build your CSS from scratch. A word of advice, keep the style rules as simple as possible. Often, students will create odd combinations of negative margins, absolute positioning and padding to nudge things around the page. More often than not, the same results can be had using only positioning. When things get too complex, scrap the style rule and start fresh. You will end up with the answer faster and with cleaner code. Be diligent in planning your design on paper first. Look at the examples at CSS Zen Garden and realize just how high the benchmark has been set.

You may submit your assignment to the folks at the CSS Zen Garden. Make sure that you read every letter of the submission requirements and the form clarification page before submission.

Assignment 3: Information Architecture for Site Redesign


Due and present on Friday, November 13

Choose a web site redesign. There must be at least one form included for the site with JavaScript functionality. Create the following project documents:
  1. Creative brief
  2. Content inventory
  3. Competitive analysis
  4. Concept model (as needed)
  5. Flow charts
  6. Sitemap
  7. Wireframes

Assignment 4: Visual Design for Site Redesign


Due and present on Friday, November 20

For your web design, create the following visual design documents:
  1. 2-3 logo comps
  2. 2-3 icon comps
  3. 2-3 screen comps each for the home page, content page and form page
  4. Concept note


Assignment 5: Build Out for Site Redesign


Present and critique build out of site on Friday, December 4

Due and show on Friday, December 11

Use XHTML 1.0 Transitional markup and CSS for layout.

    • Each web page must contain the following byline to protect from legal issues:

This web site redesign was created by students for educational purposes at The Art Institute of Charleston and is in no way intended for commercial gain or as a source of public information.

If you plan the site well before you begin, the process will go much more smoothly. Firstly, create and validate the clean, well-structured XHTML. Second, apply the style. The site must appear reasonably consistent between current versions of: Internet Explorer, Firefox, Safari, and Opera.