Archive for the ‘Progressive Enhancement’ Category

Learn XML to learn HTML to learn web service design

February 24, 2008

Ten years ago I was struggling to learn HTML. Then along came this new technology called XML, which quickly captured my attention and interest. As I learned XML, the questions I had with HTML vanished.

I have spent the last 10 years immersed in the XML family of technologies.

For the past year I have been revisiting HTML, and also learning its associated suite of technologies: CSS, JavaScript and DOM. As I learn the HTML family of technologies, the questions I have with building XML-based web applications are vanishing.

I am impressed with HTML. It is the most thoroughly scrutinized and most widely implemented markup language in the world. Spending time thoroughly learning HTML has been time well spent. It has helped me with designing better XML. It’s been a full circle: XML helped me to understand HTML, and HTML has helped me to understand XML.

The HTML family of technologies run within a browser. As I learn the HTML technologies, I have come to appreciate the browser as a remarkably flexible web application. By focusing on HTML and its family of technologies I have come to learn about flexible web application design.

My Recommendation

Building an XML-based web application or web service? Then study HTML, CSS, JavaScript, and DOM. Learn the principles of progressive enhancement, graceful degradation, and web standards design.

Progressive Enhancement is Important

February 1, 2008

[Definition] Progressive enhancement is the layering of additional capabilities onto a basic capability.  If a layer is not supported by the environment, the basic capability continues to operate (i.e. there is  graceful degradation).

Consider employing progressive enhancement in creating your web pages. Here are the steps:

  1. Collect the data that you want to make available
  2. Organize your data
  3. Wrap your data in the most semantically rich HTML tags. Now you have your basic capability. This web page will operate in any browser
  4. Create a CSS document that styles the data in a pleasing manner, and connect the HTML document to the CSS document using the <link> element. You have just added a layer onto your HTML document. Browsers that support CSS will display the HTML in the way specified by the CSS document, and browsers that don’t support CSS will display the HTML using the default display
  5. Create a JavaScript file containing functions that enhance the interactivity of the HTML data.  Connect the HTML document to the JavaScript document using the <script> element. You have just added a second layer onto your HTML document. Browsers that support JavaScript will provide the enhanced interactivity, and browsers that don’t support JavaScript will use the default interactivity.
  6. Add class attributes onto the HTML tags and set their values to the standard Microformat values. This third layer will make your document more globally useful and discoverable by machines.