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

Viewing your Web page’s PageRank using the Google Toolbar

March 14, 2008

PageRank is a measure of a Web page’s reputation (credibility).

A Web page that has a high PageRank means it has a good reputation and it will be listed high in the results list when someone does a search query using Google.

PageRank’s scale is 0 – 10.

You can see your Web site’s PageRank using the free Google Toolbar at http://toolbar.Google.com.

I just downloaded it and installed it.  I was a bit disappointed as I expected to be able to go to a Web page and see its PageRank number.  Instead, the Google Toolbar gives a graphic of a sliding bar.  You have to eyeball the graphic and guess the PageRank: “The slider is a bit more than half way, so my PageRank is about 6.”

Web page design: delimit file and folder names with hyphens, not underscores

March 12, 2008

Use hyphens, not underscores, in file and folder names.

Search engines read a hyphen in a web page file name as a space.

  • Example: Web-Standards-Design.html is read as Web Standards Design

The resulting set of words provides useful keywords for the search engine.

Conversely, search engines don’t do anything with underscores.

  • Example: Web_Standards_Design.html is read as Web_Standards_Design

This one long word is not a useful keyword for the search engine, and won’t do anything to boost your web page’s page rank.

Likewise, use hyphens in URLs.

Use file and folder names that are keyword rich.

From the book Building Findable Websites by Aarron Walter:

Separate keywords in file and folder names with a hyphen rather than an underscore to ensure that search engines can read each word individually rather than as one large word. For example, most search engines will read a file named my-page.html as “my” “page,” whereas my_page.html would be read as “my_page,” which is not likely to match a search query. Google recently updated its system to recognize individual words in file names separated by an underscore. Since other search engines could be tripped up by the underscore, stick with hyphen-delimited keywords in your file and folder names to be safe.

Web page design: the importance of a good title and description

March 11, 2008

Open a browser and go to Google.

Type these keywords: web standards

I’ve already done this. You can see the results: http://www.google.com/search?hl=en&q=web+standards&btnG=Google+Search

You will see that the first item in the results list has:

  • Title: The Web Standards Project
  • Description: The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

Where did Google get the title and description?

Answer: from the HTML document’s <title> element and the <meta name=”description” content=”…”> element.

See for yourself: go to http://www.webstandards.org/ then select from the browser’s menu View >> Page Source. Look at the <title> element and the <meta name=”description” content=”…” /> element.

Lessons Learned:

  • When creating a web page, be sure the <title> element’s value contains keywords that signify the key concepts in your document (and are the words that someone doing a Google search would use).
  • When creating a web page, be sure the <meta name=”description” content=”…”> element’s value contains a description that would get a person interested in looking at your web page (Google shows your description in the results page, and if it’s well written then it will motivate the user to click on the link and view your web page).

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.

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.