Transcript web tip - National Cheng Kung University

Bioinformatics Programming
EE, NCKU
Tien-Hao Chang (Darby Chang)
1
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;">
2
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
3

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.h
tml

References
– http://www.alistapart.com/articles/practicalcss/
– http://www.smashingmagazine.com/2009/04/08/fromtable-hell-to-div-hell/
4
Validation

HTML is, though its simplicity, still a
language
– indent it

W3C Validation Service
– http://validator.w3.org/
– http://jigsaw.w3.org/css-validator/
5
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-chromeextensions/
6
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-inferfacetechniques/
7
http://www.saarachee.com/images/web_designing_n_development.jpg
How to design beautiful web pages?
8
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/understandi
ng-and-the-meaning-of-color-within-design/
9
Imitation

For example, if you don’t know how to mix
colors, just look others
– http://www.webdesignbooth.com/colors-in-webdesign/

There are many ‘galleries’ for inspiration
– http://sixrevisions.com/web_design/16-best-webdesign-galleries-for-inspiration/
– 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
The exercises contribute around 50% to
your final grades. A missing exercise
reduces 3–5 points.
13