Web User Interfaces
Currently, web user interfaces mainly use three technologies: HTML, CSS and JavaScript. They take care of the structure, presentation and behavior of web pages.
A web user interface can be decomposed into three parts:
- structure, what are the contents and how they are organized;
- presentation, how the contents should be displayed;
- behavior, how the contents change based on user’s actions.
Web design practices suggest the three parts should be handled separately: HTML builds the structure, CSS forms the presentation, and JavaScript controls the behavior.
Historically, developers often put the three parts together. Bad examples include in-line styles and onclick scripts. This generates code that are hard to maintain. Over the years, the benefits of separating the three parts have been gradually recognized. Besides, the emergence of CSS and JavaScript frameworks encourages developers to separate contents, presentation and behavior.
The separated organization has the following benefits:
- It makes the code portable/reusable across different browsers.
- It makes the web site (both content and code) easy to maintain.
- Separated JavaScript and CSS can be cached in the browser and this reduces latency.
The basic process of developing a web page has the following steps:
- Markup the content with HTML based on the semantics. Identify the title, headings, sections, paragraphs, tables, lists, figures, etc.
- Add CSS styles to enhance the presentation. Design a consistent and reusable style for different components of the web page.
- Create behaviors using JavaScript. Define user interactions with the page.