Archive for the ‘HTML’ 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).

Use the Geo-Tag Generator to put location — geo — data in your web pages to enhance regional search requests

March 6, 2008

This web site provides a free online tool that automatically generates HTML <meta> tags containing geo (lat/lon) data:

http://www.geo-tag.de/generator/en.html

It has a form that you simply fill in with your data and out pops the <meta> tags. For example, I filled in the data for Boston and here are the <meta> tags that were automatically generated:

<meta name=”DC.title” content=”Boston” />
<meta name=”geo.region” content=”US-MA” />
<meta name=”geo.placename” content=”Boston” />
<meta name=”geo.position” content=”37.09024;-95.712891″ />
<meta name=”ICBM” content=”37.09024, -95.712891″ />

Here’s a section of the web page which describes the value of embedding geo metadata into your web pages:

What are Geo-Tags for?

According to a survey of The Kelsey Group (Princeton, NJ, USA) from the year 2004, 25% of all commercial online searches are local searches. It understandably makes little sense to look for a baker and find one who has his shop in a completely different town. Today search engines are already able to handle regional search requests, gathering city and street names from the text content of the explored web pages. Geo tags will simplify this task since they provide machine-readable information about country, region and exact latitude/longitude coordinates.

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.

Actual numbers showing the benefit of moving presentation (CSS) out of markup (HTML)

February 7, 2008

Moving presentation (CSS) out of markup (HTML) can have a big impact on both end users and the server.   Here’s an example from The Zen of CSS Design by Dave Shea and Molly E. Holzschlag:

When your traffic is high, the extra bytes trimmed have huge implications for your total bandwidth savings.  Sports network ESPN’s web site went CSS in early 2003, and its numbers are almost unreal.  The developers of ESPN.com estimate they’re saving about 2 terabytes (2 thousand gigabytes) each and every single day.  This means they can serve more users, and serve them quicker, without changing anything else.  That’s substantial return on a one-time investment.

Choose HTML tags based on their purpose, not their appearance

February 5, 2008

Web documents contain content. The content is wrapped (marked up) using HTML tags. Each tag has a certain meaning (semantics). A browser displays the content that is nested inside a tag in a certain way depending on the tag.

Let’s take an example. Most documents have a main title. Suppose this is the title of a document:

Our Solar System Planets

Which HTML tag should we use to wrap this title? Suppose that we want the title to be boldfaced and on its own line. We could use these tags (the <b> tag means “bold” and the <br> tag means break/new line):

<b>Our Solar System Planets</b>
<br>

These tags are being employed to achieve the desired appearance.

Alternatively, there is an HTML tag that has the semantics: “The content of this tag is a top-level document title.” Here the title is wrapped using this tag:

<h1>Our Solar System Planets</h1>

Now we are selecting HTML tags based on their purpose, not their appearance. This is the right approach. Web Standards Design says: choose HTML tags based on their purpose, not their appearance; use CSS to specify appearance.

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.

An easy-to-use technology is a double-edged sword

January 24, 2008

A technology with low barrier to entry can be a double-edged sword.

A technology that people can speedily and easily use will probably be adopted very quickly.  However, there is likely to be a correspondingly low level of quality control.

HTML’s Explosive Growth

HTML’s ease of use is one of the reasons behind the explosive growth of the Web.

Anyone can learn the basics of HTML in a short space of time and create a web page very quickly.

It’s even possible to use WYSIWYG editors to make web pages without ever seeing a line of markup.

The downside to this is that most pages on the Web are badly formed and don’t validate.

Browser vendors have to accept this state of affairs by making their software very forgiving and unfussy.

Much of the code in browser software is dedicated to handling ambiguous use of HTML and trying to second-guess how authors want their web pages to be rendered.

HTML’s low barrier to entry has been a mixed blessing for the Web.

DOM Scripting by Jeremy Keith