1. Interface Design 2 Week 10

2. Interface Design 2 :: Week 10 :: Calendar

3. Interface Design 2 :: Week 10 :: This Week's Agenda  HTML & CSS Basics  Lesson: how to design and build flexible containers  We will continue the full coding process from Photoshop to HTML  Establishing good semantic markup (html)  ,,, etc...  for paragraphs  Unordered lists for navigation   link   Image replacement

4. Interface Design 2 :: Week 10 :: Lesson  How to create a flexible height container that has a custom graphical treatment, such as rounded corners or a drop shadow.  The key is to use Normal flow to your advantage and figure out where your design can repeat. Sometimes you need to fade out a background image to a solid color in order to have a repeatable graphic.  Common solution:  Container has the repeatable bg image  Header has the top background  Footer has the bottom background

5. Interface Design 2 :: Week 10 :: This Week's Assignment  Continue coding your site.  Take a close look at the structure of your markup (html) for your home page.  Is it semantically correct?  Are you using your title, h1, h2, and p tags appropriately?  Are you using too much absolute positioning?  Is your layout flexible to accompany any amount of text?  or do you have a fixed height on your container? (BAD!)  Now is your chance to go back and recode your home page so that it is set up in the best possible way. You should do this before you begin coding your sub pages.  Coded sub page is due next week.

6. Interface Design 2 :: Week 10 :: Final Assignment Due : Week16A  Coded HTML/CSS Web Site  Based upon the feedback from your final (midterm) round of comps, transform your visual designs into their final format: a coded web site.  Your site must must:  Use an XHTML doctype.  Use web-standard-compliant, well-formed, valid, accessible, and semantic markup (HTML) to best structure the content of your site.  Use external cascading style sheets (CSS) to position your layout.  Work bug-free on all browsers on both platforms (PC: Firefox, IE6, IE7, Opera, Netscape, Safari; MAC: Safari, Firefox, Opera, Netscape).  Validate for CSS, XHTML, and Section 508.  Your site must not:  Use tables for layout

7. Interface Design 2 :: Week 10 :: Final Assignment Due : Week16A  Coded HTML/CSS Web Site  Key dates:  Week 10A: Coded home page is due  Week 11A: Coded sub page template is due  Week 13A: QA Test Day (1st draft of the fully coded site is due)‏  Week 16A: Final coded site is due

8. Interface Design 2 :: Week 10 :: Final Assignment  Coded HTML/CSS Web Site  Purpose/Objectives:  To use current web programming technologies (HTML & CSS) to build a fully interactive, web-standard-compliant web site  To create the most effective user interface for your targeted audience.  To defend the conceptual merits of your own designs.  To meet the needs and deadlines dictated by your client. Due : Week16A

9. Interface Design 2 :: Week 10  Coded HTML/CSS Web Site  Format:  HTML web site.  Post a link to your coded site on your class web page. I suggest that you post your site in a folder called “midterm” under your “art249” directory. In this case, your url will be: http://www2.hawaii.edu/~yourname/art249/midterm/  Portfolio entry.  Create a portfolio entry designed for print showcasing your site and the design process. Choose which assets/productions documents (sketches, site maps, page maps, comps, etc.) that you created in this class and prepare them to become a part of your personal portfolio. Design the layout of your portfolio entry in such a way that demonstrates the full design process from concept to final product.  format: 8.5” x 11”.pdf file of your portfolio entry. Post your.pdf file on your class web page and bring in a printed version to class. :: Final Assignment Due : Week16A