Common flaws in HTML Tags and attributes are lowercase – No layout tags – –use CSS instead Avoid inline CSS (style attribute) – 2
Tables are dead The Web Standards Projects (WaSP) Browser Upgrade Initiative (BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach Cons –complexity of documents, difficult to maintain –less flexibility Semantically speaking, the table tag is meant for listing tabular data –it is not optimized to build structure 3
Several designers have taken Jeffrey Zeldmans lead in posting tutorials that have helped us get over the initial hump of table-less design –http://www.alistapart.com/articles/journey/http://www.alistapart.com/articles/journey/ –http://www.glish.com/css/http://www.glish.com/css/ –http://www.bluerobot.com/web/layouts/http://www.bluerobot.com/web/layouts/ –http://www.thenoodleincident.com/tutorials/box_lesson/ index.htmlhttp://www.thenoodleincident.com/tutorials/box_lesson/ index.html –http://www.glish.com/css/hacks.asphttp://www.glish.com/css/hacks.asp –http://www.tantek.com/CSS/Examples/boxmodelhack.h tmlhttp://www.tantek.com/CSS/Examples/boxmodelhack.h tml References –http://www.alistapart.com/articles/practicalcss/http://www.alistapart.com/articles/practicalcss/ –http://www.smashingmagazine.com/2009/04/08/from- table-hell-to-div-hell/http://www.smashingmagazine.com/2009/04/08/from- table-hell-to-div-hell/ 4
Validation HTML is, though its simplicity, still a language –indent it W3C Validation Service –http://validator.w3.org/http://validator.w3.org/ –http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ 5
8 How to design beautiful web pages?
Color Color in design is very subjective –what evokes one reaction in one person may evoke a very different reaction in someone else Color theory is a science in itself –something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling –cultural differences mean that something thats happy and uplifting in one country can be depressing in another ng-and-the-meaning-of-color-within-design/ ng-and-the-meaning-of-color-within-design/ 9
Imitation For example, if you dont know how to mix colors, just look others –http://www.webdesignbooth.com/colors-in-web- design/http://www.webdesignbooth.com/colors-in-web- design/ There are many galleries for inspiration –http://sixrevisions.com/web_design/16-best-web- design-galleries-for-inspiration/http://sixrevisions.com/web_design/16-best-web- design-galleries-for-inspiration/ –http://www.webcreme.com/http://www.webcreme.com/ View source code Trace using tools such as firebug 10
Points to a good presentation Motivation –why your work (topic/system) is important Contribution –fit the motivation and/or achieve better performance Methodology –clearness 11
Points to a good final project A good presentation –convince both the teacher and the students A good work, of course –practicability –user interface A good report –document your presentation (more text) and your work (screenshot with explanations) –include anything worthy extra credit Reasonably evaluate other works 12
Grade 13 The exercises contribute around 50% to your final grades. A missing exercise reduces 3–5 points.