Archive for the ‘JavaScript’ Category

A very cool way to display images on a web page

March 22, 2008

 Click on an image on this web site: http://www.huddletogether.com/projects/lightbox/ 

The image pops up, overlaying the web page; the web page is still visible translucently.  It’s a very cool way of displaying images.

It’s easy to add this capability.  The capability is implemented using some JavaScript code, so you just connect your web page to that JavaScript.  In your HTML, add this attribute rel=”lightbox” to any link to an image.  That’s all there is to it!   The instructions are on the Lightbox web site (URL above).

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.

Graceful Degradation is Important

January 25, 2008

Graceful degradation is the ability to continue working, albeit with reduced functionality, when some expected capability is absent.

Example: Suppose you use JavaScript in your web page to enhance its interactivity. Your web page degrades gracefully if it continues to function even in a browser that has JavaScript turned off.

This is an example of an HTML link that degrades gracefully:

<a href=”http://solarsystem.jpl.nasa.gov/planets/profile.cfm?Object=Mercury” onclick=”…”>Mercury</a>

If JavaScript is turned on in a user’s browser then the onclick=”…” will be executed. If JavaScript is turned off then the browser’s default behavior ensues: the browser fetches the web page identified by the href value, and replaces the current page with it.

Design your web pages, your software, your machines, your whatever to degrade gracefully. Anticipate things that might be absent or turned off and make your system able to still function.