1. Bioinformatics Programming 1 EE, NCKU Tien-Hao Chang (Darby Chang)

2. Common flaws in HTML Tags and attributes are lowercase – No layout tags – –use CSS instead Avoid inline CSS (style attribute) – 2

3. 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

4. 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

5. 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

6. Javascript A magic language –http://screenr.com/Ye7http://screenr.com/Ye7 Powerful to deal with DOM objects –what is DOM objects? –select them with Javascript (jQuery) –change something about the selected objects All about events Various add-ons/extensions –web developer –firebug –http://mashable.com/2010/02/24/developer-chrome- extensions/http://mashable.com/2010/02/24/developer-chrome- extensions/ 6

7. Candies Various read-to-use packages –http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/ Google Javascript API –http://code.google.com/intl/en/apis/ajax/documentation/http://code.google.com/intl/en/apis/ajax/documentation/ –Google Visualization API motion chart Hans Rosling shows the best stats you've ever seen there is no the best visualization technique, only the most appropriate technique YUI –http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/ –tabview as an example There are many (maybe too many) alternatives –http://docs.jquery.com/UI/Tabshttp://docs.jquery.com/UI/Tabs –http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface- techniques/http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface- techniques/ 7

8. 8 How to design beautiful web pages? http://www.saarachee.com/images/web_designing_n_development.jpg

9. 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 http://speckyboy.com/2010/04/22/understandi ng-and-the-meaning-of-color-within-design/ http://speckyboy.com/2010/04/22/understandi ng-and-the-meaning-of-color-within-design/ 9

10. 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

11. 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

12. 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

13. Grade 13 The exercises contribute around 50% to your final grades. A missing exercise reduces 3–5 points.