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.
However, the problems of DHTML are that:
In order to solve the third problem, there is a Web Standards Project – WaSP.
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.
How to use it properly?
It is the progressive enhancement concept.
However, if you use it, it will be better.
For example, if there is a table containg contents in it.
The next revolution is AJAX.
AJAV makes web pages more interactive.
For example, you can upload a file without reloading the page.
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
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:
Finally, Chris concludes that several things should be noticed while developing a web site:
– Progressive enhancement
– Standards compliance
– Code validation (JSLint)
btw, When I write this post, I find an interesting thing.
The first picture in Chris’s slides is here:
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