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

More people have direct access to more knowledge than at any time in history

March 16, 2008

“The World Wide Web is a marvelous thing.  Because it exists, more people have direct access to more knowledge than at any time in history.”

— Walt Mossberg, The Wall Street Journal

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.

Links and Forms: the fundamental building blocks of the Web

February 29, 2008

The Web is built around links and forms.

Links enable us to get information.  The mechanism for achieving links is HTTP GET.

Forms enable us to send information.  The mechanism for achieving forms is HTTP POST.

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.

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

We’re all learning better ways of designing for the Web

January 17, 2008

We’re all learning better ways of designing for the Web.

For example, we’re discovering methods that increase a web site’s readability and accessibility by using lean, semantic markup and CSS for design.

Bulletproof Web Design by Dan Cederholm