web tip - National Cheng Kung University

Document technical information

Format ppt
Size 170.1 kB
First found May 22, 2018

Document content analysis

Category Also themed
Language
English
Type
not defined
Concepts
no text concepts found

Persons

Hans Rosling
Hans Rosling

wikipedia, lookup

Organizations

Places

Transcript

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
×

Report this document