1 / 13

Bioinformatics Programming

Bioinformatics Programming. EE, NCKU Tien-Hao Chang (Darby Chang). Common flaws in HTML. Tags and attributes are lowercase <H1> <A HREF="#"> No layout tags <center> <font color="red"> use CSS instead Avoid inline CSS (‘style’ attribute) <p style="color: red;">. Tables are dead.

zamir
Download Presentation

Bioinformatics Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Common flaws in HTML • Tags and attributes are lowercase • <H1> <A HREF="#"> • No layout tags • <center> <font color="red"> • use CSS instead • Avoid inline CSS (‘style’ attribute) • <p style="color: red;">

  3. Tables are dead • The Web Standards Project’s (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

  4. Several designers have taken Jeffrey Zeldman’s 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.glish.com/css/ • http://www.bluerobot.com/web/layouts/ • http://www.thenoodleincident.com/tutorials/box_lesson/index.html • http://www.glish.com/css/hacks.asp • http://www.tantek.com/CSS/Examples/boxmodelhack.html • References • http://www.alistapart.com/articles/practicalcss/ • http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

  5. Validation • HTML is, though its simplicity, still a language • indent it • W3C Validation Service • http://validator.w3.org/ • http://jigsaw.w3.org/css-validator/

  6. Javascript • A magic language • http://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/

  7. Candies • Various read-to-use ‘packages’ • http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/ • Google Javascript API • 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/ • tabview as an example • There are many (maybe too many) alternatives • http://docs.jquery.com/UI/Tabs • http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface-techniques/

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

  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 that’s happy and uplifting in one country can be depressing in another • http://speckyboy.com/2010/04/22/understanding-and-the-meaning-of-color-within-design/

  10. Imitation • For example, if you don’t know how to mix colors, just look others • 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://www.webcreme.com/ • View source code • Trace using tools such as firebug

  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

  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

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

More Related