發文作者:wekon | 四月 24, 2009

[20090416 Seminar 筆記] The road to professional web development (Chris 校園講座交大場)


(http://farm4.static.flickr.com/3329/3447390878_edc83eefcb.jpg)

Last week, Christian Heilmann came to NCTU and gave a speech in the seminar.
This seminar happened to be the course which I took.

In case of the misunderstanding, there was also a translator translating the speech into Chinese.
Honestly speaking, although it was considerable for the audience, I had to do the context switch between the English grammar and the Chinese one.
It was a little bit hurry for me to catch up Chris’s words after the Chinese translation.

Chris gave the speech about website development from the perspective of a front-end engineer.
First of all, he introduced the history of Web technology.

The first one is HTML.
HTML describes the contents of web pages into a structured document.
However, the style of webpage appearance is designed separately in different HTML documents.
It is difficult to modify the style of the website – you have to modify all of the documents in it.

The reason of this problem is that:
1. we can use <font color> or <body bgcolor> for the appearance of webpage, which is the first mistake of HTML
2. some people start to use <table> to construct the layout, which is the second mistake.
Chirs said that, table is a data structure; it should not be used for presentation.
If we make these mistakes, the content and style will be tied up tighter.

In order to solve this problem, here comes CSS.
CSS can be defined once and be used in different web documents.
So, we can separate the design of layout from the content.

After this period, it was DHTML hell.
In DHTML, javascript can be used to control the visual changes in the documents dynamically.
However, the problems of DHTML are that:
1. the javascript-generated content cannot be found by search engine.
2. the functionality of javascript should be enabled in the browser, otherwise, the webpage may look terrible.
3. the degree of the support of javascript is different in different browsers.

In order to solve the third problem, there is a Web Standards Project – WaSP.
e69caae591bde5908d-2
(http://www.webstandards.org/)
(http://archive.webstandards.org/mission.html)
The advantage of following the Web Standard is that if all of the browsers follow their standards, developers will not have to write different codes for different browsers.
Moreover, if the browser upgrades its version, the original designed web pages need not to be modified.
Also, you can verify your code based on this standard.

Chirs proposes the idea that javascript still can be used, if you use it properly.
How to use it properly?
It is the progressive enhancement concept.
Javascript should be used to smooth the process of web browsing.
The process should also be proceeded if the javascript is disabled.
However, if you use it, it will be better.
For example, if there is a table containg contents in it.
Without enabling javascript, you can see it normally.
On the other hand, if you enable javascript, you can use several functions (ex. sorting) for its contents.

The next revolution is AJAX.
AJAV makes web pages more interactive.
For example, you can upload a file without reloading the page.
It works by using javascript, or, DOM scripting.
After the idea of Web 2.0, AJAX is not even a nice-to-have but a main goal.
However, it breaks lots of things:
1. it is meaningless to bookmark a page – the content of the page may be modified
2. back button doesn’t work as users’ expectation
3. No interaction with assistive technology, such as the devices for blind people – they cannot detect the changes driven by AJAX

For web page developers, there are several things should be noticed:
1. learning new technologies, ex. AJAX
2. The same web page may not be displayed properly in different browsers, ex. javascript may not be supported in the browsers on mobile devices
3. the way users interact with the web page may be different, ex. mouse or not
Chris suggests that, we don’t have to solve all the problems for all users.
For example, you don’t have to spend much time for the new interface like iPhone touch screen.

Instead, developers should take more time for these issues:
1. What are the users’ needs?
2. Is it easy to change/maintain?
3. Is it a smooth experience?
4. Does it make it easier for users to do what they want to do?

Of course, we should also prevent us from making the mistakes made in HTML and DHTML

After the introduction to web history, Chris started to introduce YUI.
There are several useful libraries, such as jQuery, prototype, mootools, Dojo, YUI, etc.
(Honestly speaking, none of them I am familiar with … orz)
The advantage of using library is that, if we find out some problems, we can solve it in the libraries.
So, this problem can be solved in all products which use these libraries.

YUI (Yahoo User Interface) was build to make it easier for Yahoo developers to build our products.
YUI supports lots of designed widgets, so that you can use these widgets to build your site easily.
All these widgets can be extended and styled the way you want them do, they are easily extensible.
Moreover, you can use helper libraries to build your own widgets.
These widgets are all open source; you can host them by yourself or get them from Yahoo/Google CDN.

Other useful tool:
http://developer.yahoo.com/yslow/: tests whether your javascript codes are slow

Finally, Chris concludes that several things should be noticed while developing a web site:
– Progressive enhancement
– Standards compliance
– Code validation (JSLint)
– Extensibility
– Modularisation
– Documentation

=============================================

btw, When I write this post, I find an interesting thing.
The first picture in Chris’s slides is here:
e69caae591bde5908d-11
(http://chrisheilmann.s3.amazonaws.com/osdc-accessibility.pdf)

The next stage after YUI is using mobile devices.
Does it imply that we may develop the web site on the mobile device in the future?
Or it only implies the end user using mobile device?

=============================================

Chris’s web site: http://www.wait-till-i.com/
The slides of this speech can also be downloaded at this site
(http://chrisheilmann.s3.amazonaws.com/osdc-accessibility.pdf)


發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

分類

%d 位部落客按了讚: