1. Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 15 :: a

2. NewMediaArts art 249 :: interface design II :: week 15 :: a :: in-class example  Some online links for info on building common layouts using CSS:  http://www.glish.com/css/ http://www.glish.com/css/  http://www.w3.org/2002/11/homepage http://www.w3.org/2002/11/homepage  http://www.w3.org/2002/03/csslayout-howto http://www.w3.org/2002/03/csslayout-howto  http://www.webreference.com/authoring/style/sheets/layout/advanced/ http://www.webreference.com/authoring/style/sheets/layout/advanced/  http://www.thenoodleincident.com/tutorials/box_lesson/index.html http://www.thenoodleincident.com/tutorials/box_lesson/index.html  CSS Creator Layout Generator  http://www.csscreator.com/version2/pagelayout.php http://www.csscreator.com/version2/pagelayout.php  Some random articles and techniques on layout at ALA  http://www.alistapart.com/topics/design/layout/ http://www.alistapart.com/topics/design/layout/  http://www.alistapart.com/articles/negativemargins (negative margins) http://www.alistapart.com/articles/negativemargins  http://www.alistapart.com/d/negativemargins/ex5.htm http://www.alistapart.com/d/negativemargins/ex5.htm  http://www.alistapart.com/articles/flexiblelayouts http://www.alistapart.com/articles/flexiblelayouts  http://www.alistapart.com/articles/practicalcss/ (css floats) http://www.alistapart.com/articles/practicalcss/  http://www.alistapart.com/articles/fauxcolumns (making bg images stretch vertically) http://www.alistapart.com/articles/fauxcolumns

3. NewMediaArts art 249 :: interface design II :: week 15 :: a :: today’s agenda  Today is our last working day before the final critique  Fix your bugs – ask me for help if you need it.  Optional lesson:  Multiple column layouts  Layout #4 - 2 column layout, small left column, all fluid no container Layout #4  Layout #5 - 2 column layout, small left column, fixed width with container Layout #5  Layout #6 - 2 column layout, small right column, all fluid no container Layout #6  Layout #7 - 2 column layout, small right column, fixed width with container Layout #7  Layout #8 - 3 column layout, all fluid no container Layout #8  Layout #9 - 3 column layout, fixed width with container Layout #9

4. NewMediaArts art 249 :: interface design II :: week 15 :: a :: checklist  make sure your site validates  markup - http://validator.w3.org/http://validator.w3.org/  css - http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/  section 508 - http://www.contentquality.com/http://www.contentquality.com/  make sure your site works on all browsers & platforms  time permitting, convert your site from html to xhtml  validate it again  consider the following:  optimizing your code  how can your code be “cleaner”  is there any unnecessary repetition of code?  will multiple css files clarify your code?  optimizing the interface/usability of the site  does your site have multiple means of navigation?  bottom text nav? breadcrumb navigation for sub pages?  do all images have alternate text and/or alt tags?  what is “odd” or simply not working in your design? could it be fixed? how?  update your sitemap  work on “cleaning up” your sketches for your portfolio entries  online checklist: http://www.w3.org/TR/WCAG10/full-checklist.htmlhttp://www.w3.org/TR/WCAG10/full-checklist.html

5. NewMediaArts art 249 :: interface design II :: week 15 :: a :: revised schedule Week 15 Week 16 11.2811.3012.512.7 Optional Lesson: time permitting, we can go over multiple layout options and how to set them up. FINAL critique - web site dueFINAL - portfolio presentation WORK DAY