Now Hear This!

With all the talk about Flash versus HTML5 you might be forgiven for thinking that HTML5 is just about video. It’s not, of course. HTML5 is a major extension of HTML in many areas including media.

Today, I’d like to explore HTML5 audio, which is similar to HTML5 video in many respects, but fundamentally different in others. For starters, a video element is essentially just a TV set embedded in a webpage whereas audio can serve multiple purposes – four examples:

• Sound effects. A button can make a sound when it’s clicked. How about a swoosh sound when a division is toggled open or closed?
• Alerts and notifications. A little bell can sound when an AJAX request completes and updates a page section. Or, an audio “Uh Oh!” can play when you enter a malformed email address into a input field.
• Background sounds. Some web pages can benefit from background music. But say you have a photo gallery of birds. Wouldn’t it be nice to be able to click one and hear it tweet?
• Spoken content. Yes, we have podcasts, but we also need something simpler such as pronunciations of foreign words and phrases, or a click-to-have-this-post-read-to-you feature so you can go off and browse other webpages while I continue to read this one to you.

S i l e n c e.

Yo Dawg, I can’t hear your website!

This isn’t as dumb a statement as it first, um, sounds. Web developers have shied away from including sound in webpages because of several difficulties:

• Confusion – There are codecs and there are file formats. A codec is a method of encoding audio data. A file format is a container for the codec and optional metadata, such as a song title. Some file formats can accommodate multiple codecs; other formats are codec specific. For simplicity, we can narrow this discussion to the most popular file formats/codecs for the Web. These are:
  • wav – An uncompressed format. A wav file with 30 seconds of silence is the same size (megabytes) as a file with 30 seconds of symphonic music.
  • mp3 – A popular format for music that uses a lossy compression format resulting in file sizes typically 1/10 the size of a wav file with the same audio content.
  • ogg – An open-source alternative to mp3 that also uses a lossy compression format.
• Cross-browser incompatibility – Unlike images, where all major browsers support the three major file types—gif, jpg and png—all browsers do not support all audio formats. For instance: mp3 is a proprietary format and its decoding software cannot be included in GPL-licensed, open-source applications such as the Mozilla Foundation’s Firefox browser. Here’s a table showing which formats are supported by the current versions of the major web browsers:
  

  	IE	Firefox	Safari	Chrome	Opera
  wav	NO	YES	YES	NO	NO
  mp3	NO*	NO	YES	YES	YES
  ogg	NO	YES	NO	YES	NO

  (* IE8 does not recognize the audio element at all. The IE9 beta works only with mp3 files. )

• Plugin required – HTML4 Browsers do not support audio natively. A plugin is required and JavaScript must be enabled. While most browsers support audio with a distributed default plugin, web developers must still use the ugly and opaque object, embed and param elements to bring sounds to a webpage.
• Insufficient processing power – For the first time visitor to a page, it can take several seconds for an older or overloaded browser to load the player code, download, decode and play a audio file. This pretty much nixes using sound for mouseover effects, even simple click sounds for navigation buttons.

YouTube made Web video workable. No such service existed to popularize the use of audio in webpages. On the contrary, Napster.com and iTunes focused attention on downloadable music applications. Wouldn’t it be great if there was an easy way to incorporate sounds on a webpage for other purposes. Good News! There is. All major browsers now support basic HTML5 audio with the notable exception of Internet Explorer.

The HTML5 Audio Solution

HTML5 audio consists of the audio element and a JavaScript API for playing the sound it represents. The element is a container (it has both opening and closing tags) and what’s inside is fallback content for legacy browsers and search-bots. It can be written simply as:

<audio src="url" autoplay loop>
        Aw, snap. Your browser doesn't support HTML5 audio!
</audio>

The above would be perfect for playing background music on a webpage. it could be placed anywhere in the body of the document—heard but not seen. For creating a controllable audio player, the controls attribute can be added to the opening tag.

<audio src="url" controls>
        <a href="url">Download the audio file</a>
</audio>

Which, depending on your browser will create a player like one of these:*

IE	Download the audio file
Firefox
Safari
Chrome
Opera

(* Just pictures of the controls in different browsers. They don’t work here; neither does the link.)

Unfortunately, because of the differing support among browsers for the three file types, this approach won’t work in all browsers. That means having at least mp3 and ogg audio file versions and using browser detection to figure out which to load.

But wait. There’s an alternate form of the audio element that takes a different approach: try one format and, if it doesn’t work, try another. You still need at least two files but the syntax is much simpler.

<audio id="bgSound" loop>
        <source src="audio/bgSound.mp3" type="audio/mp3" />
        <source src="audio/bgSound.ogg" type="audio/ogg" />
        <-- lnsert fallback Flash Player code here --">
</audio>

The audio element must be in the body of the html document. I’ve given an id attribute to the above so it can be referred to by JavaScript statements. Place a script element right after the audio element to get its DOM object:

<script type="text/javascript">
  var bgSound = document.getElementById('bgSound');
</script>

Don’t put the JavaScript in the head of the document, the audio element must be defined before its DOM object can be referenced. The DOM object for the audio allows you to change its properties, start and stop the music. To play the audio as page background, add an onload attribute to the body tag:

<body onload="bgSound.play();">

As an alternative, use jQuery in the document head to call the play method at document ready time (when all the HTML is parsed but images may still be loading.)

<script type="text/javascript">
  $(document).ready( function () {$('#bgSound').play();} );
</script>

The jQuery $ function is similar to JavaScript’s getElementById( ) method. You’ll need the jQuery library for this to work. If it isn’t already loaded, placing the following script element in the document head will get it from Google.

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>

To play a sound effect when the user’s mouse is over a link, remove the loop attribute from the audio tag and add preload, then use the onmouseover attribute in the link. You can get the DOM object and play it in one move:

<audio id="thanks" preload>
        <source src="audio/thanks.mp3" type="audio/mpeg" />
        <source src="audio/thanks.ogg" type="audio/ogg" />
</audio> 

<a href="javascript:void(0);"
   onmouseover="document.getElementById('thanks').play();">A shout out</a>

Or, to assign a sound to a button like the one at the bottom of this post

<audio id="ella" preload>
        <source src="audio/swonderful.mp3" type="audio/mpeg" />
        <source src="audio/swonderful.ogg" type="audio/ogg" />
</audio>

<button onclick="document.getElementById('ella').play()">
        I like it!
</button>

The JavaScript API for HTML5 Media elements contains many more properties and features including a track property which can be used to segment a file into separate sounds of different durations. One audio element could be used to (pre)load dozens of different sound effects for a website. Not all advanced API features will be supported by all browsers in the near future, but eventually, using sound on a website will become as natural and as easy to do as using images.

A shout out to my friends at WWWAC who helped test HTML5 Audio on the IE9 beta release.

What do you think of HTML Audio?    I like it!

Let’s say you have a page on your website and you would like to offer your readers the ability to jot down notes related to the content of that page in some kind of input field. Furthermore, since you expect visitors to revisit the page from time to time, you’d like to store their notes somewhere so that the input field can be loaded when they next load the page. Before HTML5, you would either use a server-side process, cookies or some combination of the two to make this happen. With HTML5, there’s a third choice: the localStorage window object.

First, let’s start with the input field. We could use a textarea element but in HTML5, any element can be turned into an input element by adding the contenteditable attribute:

<ul id="notepad" contenteditable="true">
  <li></li>
</ul>

In the  CSS for this list element, we want to set its size and position:

#notepad {
 height: 20%;
 width: 20%;
 display: none;
 position: fixed;
 top: 0.5in; right: 0.5in;
 overflow: auto;
 padding: 1em;
 border: thin solid;
 list-style-type: none;
 background-color: #fffff0; /* light yellow */
}

This will place the list element 1/2 inch down and in from the top-right corner of the browser’s window. The bordered box will take up 1/5 of the window’s width and height and scrolling will be enabled if there is more content then fits. The display property is set to “none” initially. The user will be able to make the notepad list visible by clicking a button with an onclick handler.

<button id="notepad_toggle"
        onclick="$('#notepad').toggle()">Notepad</button>

I’m using jQuery for the onclick handler because it makes it easy to target elements . If you copy this code, make sure you load jQuery somewhere in the document’s head.

HTML5 extends the window object with the localStorage property and two primary methods: setItem(name, value) and getItem(name) to set and retrieve name/value pairs of data items. Any number of such items can be stored with a webpage and each page’s storage object is independent of any other page’s. Unlike cookies, local storage items are never sent by the browser to the server and thus provides a efficient means of saving page state information even for megabyte data items.

For our example, we can store the contents of the notepad element each time it is changed. We will do this with the blur method, detecting when the user leaves the notepad to do something else. Here’s some jQuery that does that nicely:

$('#notepad').blur(function () {
  localStorage.setItem('notepad', this.innerHTML);
});

How nice is that? The storage doesn’t have to be initialized; it’s just there waiting for you to throw something into it.

When the page is first loaded we need to check if the notepad contents has been saved from some previous visit by this browser and if so, use the stored value to replace the inner contents of the list. This can be done with the following JavaScript statement:

  if ( localStorage.getItem('notepad') ) {
    var notepad = document.getElementById('notepad');
    notepad.innerHTML = localStorage.getItem('notepad');
  }

Note that there’s no conflict in the three uses of ‘notepad’ in the code above. The name for the local variable can be anything as can the name of the stored data item. Neither has to be the same as the UL element’s ID. Hopefully, I’m avoiding confusion by naming everything ‘notepad’ and not adding any.

Since this is only going to work on some browsers, let’s test to see if local storage is available. If it isn’t,  we can just hide the the button that makes the notepad visible.

if (!window.localStorage) $('#notepad_toggle').hide();

or, for debugging, we can call an alert message.

All of the code can go into a script element embedded in the content body, like this blog post, for example:

Notepad

Click the button above and enter anything in the light yellow notepad that opens in the top right corner of your HTML5 capable browser. Enter anything you want – I’ll never see it, nor will anyone else. What’s entered in your local storage stays in your local storage. Try dragging and dropping images, tables, links and other thingys. Notice something interesting? You can’t use HTML to markup your own typing but anything you drag or paste in retains all of its HTML formatting. Now Go Away! Come back to this page sometime later (with the same browser) and click the notepad button again. There’s your stuff!

Click here to see the code for a stand-alone demo to get you started.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Notepad Demo</title>
<!-- (c) 2010 by Larry Aronson -->
<style>
    body  { padding: 36px; }
    #notepad {
     height: 20%;
     width: 20%;
     display: none;
     position: fixed;
     top: 0.5in; right: 0.5in;
     overflow: auto;
     padding: 1em;
     border: thin solid;
     list-style-type: none;
     background-color: #fffff0; /* light yellow */
    }
</style>

<!-- let's get our jQuery from Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
      if ( window.localStorage ) { 	// see if webstorage is working
        if ( localStorage.getItem('notepad') ) {
          var notepad = document.getElementById('notepad');
          notepad.innerHTML = localStorage.getItem('notepad');
        }
        $('#notepad').blur(function () {	// save when exiting the notepad
          localStorage.setItem('notepad', this.innerHTML);
        });
      }
      else {
        $('#notepad_toggle').hide(); 	// hide button if no webstorage
      }
    });
</script>
</head>  

<body>
  <button id="notepad_toggle"
  	  onclick="$('#notepad').toggle('slow')">Notepad</button>
<ul id="notepad" contenteditable="true">
<li> </li>
</ul>

</body>
</html>

My client, Kate Nasser – the people skills coach, has grown her consulting business by consistently adding content to her blog/website and by using Twitter, LinkedIn and youTube to draw traffic. A recent SEO/SEM assessment of her site recommended adding more keyword-rich content and reducing some of front page’s  clutter.  This is what the page looked liked.

Advanced Tooltips.

We had a box on the right side of the content area listing a dozen “Needs” linked to different site pages or posts. With each need there was an associated comment (technically, a definition list.) We decided to move the box to the left side of the page (ahead of the straight text content,) placing the comment parts in tooltip boxes that appear as you mouse over the topic part. Kate was free to add more content to the hidden (only from humans) comment parts.

Tooltips are the little yellow boxes that appear when your mouse hovers over a link. The content of the tooltip box is taken from the title attribute of the HTML tag that creates the link. But ordinary tooltips are boring with fixed style and color; yellow wasn’t the best choice given the site’s aqua tones.

So, I installed JQuery Tools from Flowplayer.org which has an easy to use, advanced tooltip tool. JQuery is a library of Javascript functions that make it easy to add dynamic behavior to Web page elements without having to worry about cross-browser incompatibilities. JQuery Tools is a free, lightweight tool collection that provides basic behaviors to attach to any page element. The Advanced Tooltip tool replaces the browser’s builtin tooltip and can be attached to any page element, not just links.

To make Advanced Tooltips work, you have to provide a page element with a unique id to hold the content. It doesn’t matter where it’s placed. The element, typically a division, is dynamically positioned near the moused-over element. The element is re-useable; you only need one holder element for all tooltips of a given style on a page. The tooltip is styled using Normal CSS so I was able to match the colors and typography of that section of the site’s front page.

Technical Details (Expand)

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript">
<?php if (is_page("2")) { ?>
    $(document).ready(function() {
        $("h3.need-title a").tooltip({ tip: "#TipBox",
                                       offset: [-25, 150],
                                       effect: 'fade' });
    });
<?php } ?>
</script>

<div id="TipBox" class="needs-tips">&nbsp;</div>

#TipBox {
 display:none;
 width: 200px;
}

.needs-tips {
 text-align: left;
 background-color: #fafcfb;
 border: 2px solid #009ea0;
 font: italic 10pt comic sans ms;
 color: #000;
 padding: 3px 8px;
}

Random Quotes

Kate has a bunch of her own quotes and was updating her front page every few days with a new quote from the collection. She asked if there were some way to automate the process. I browsed the various code and plugin collections and found noting simple or suitable. I decided to write my own.

I copied her front page as a new draft page and cloned the default page template and assigned it to the new page. Thus, I was able to work on and test the new features without endangering the site’s current front page. The cloned template would contain custom code to randomly pick a quote and place it at the beginning of the content area. The quotes themselves would be stored (and editable) as custom fields for that page with the key, “quote”.

<?php
    $todaysquote = '';
    $quotes = get_post_meta('2', 'quote');
    if (!empty($quotes)) {
        $todaysquote = $quotes[rand(0, sizeof($quotes) - 1)];
    }
?>
<div class="dailyquote">&ldquo;<?php _e($todaysquote); ?>&rdquo;
<span>&mdash;Kate Nasser</span></div>

First, a PHP variable, $todaysquote, is initialized. Then the WordPress function, get_post_meta(), gets all custom fields from post number 2 (that’s the front page) with key = ‘quote’. The values are returned as an array of strings and assigned to the variable, $quotes. If it’s not empty, the built-in, PHP random number generator picks one of its array items. Finally, the last two lines define the HTML division element that will hold the quote,  enclosing it in smart quote marks and adding Kate’s signature. Note the use of the special echo function,  _e($todaysquote),  to encode any HTML characters that might be in the quote string.

One of the upsides of this technique is that a new front page is seen in most every visit to the front page including those by search engine robots. Over time, this can expand the number of keywords associated with the page. Unfortunately, there’s no easy way to measure which quotes work best. If you do add random content like this to a page, you should check to see if you have a caching plug-in active. You might want to exclude that page from the cache.

I added this feature as a template hack because my client only wanted it on one page which already had a customized template. It could be easily generalized and added as a filter to the theme’s functions file, for example, to append a random quote to post content when generating a single-post view.

A plug-in search turned up nothing. No surprise—Wordpress does not support user profile pictures natively. There’s no field in the database for an user’s image file name. Then I remembered reading an article in Smashing Magazine about filters a couple of months ago. They had an example where a subscribe request was appended to the end of each post’s content. Maybe that technique would work to prepend a photo.

In WordPress, a filter is like a plug-in except for two important distinctions: It’s not packaged for distribution and it’s associated with the theme. That is, you can’t manage the filter from the dashboard’s plug-in manager and, if you change themes, it disappears. That was all right for my purposes. The clients were quite happy with the theme we’d chosen – Mistylook, by Sadish Bala – and I could provide instructions on how to remove the filter from the theme’s functions file should they ever want to “deactivate” the feature.

I got the images from the client for the four lawyer/authors—a wallet-sized image and a thumbnail for each. The larger image would appear on the author’s profile page and the thumbnails would be placed at the beginning of their posts, floated left of the text. For the larger image, I modified the author’s template (author.php) as I had with the previous website. For the thumbnails, I would use the filter approach since post content is accessed in several templates and I wanted a unified solution. For the sake of brevity, I’ll skip the part about the author template mods in this article. If you’re interested in that piece, leave a comment and I’ll write another article.

I created a new directory, /wp-content/authors for the larger images and a sub-directory, /wp-content/authors/thumbs for the smaller versions. In each, I renamed the images files to match the corresponding login usernames. If, for example, there was a user with the login username of ‘bobama’, then the two images files would be: /wp-content/authors/bobama.jpg and  /wp-content/authors/thumbs/bobama.jpg . I did this with an ftp program but you can use the dashboard’s Media manager, in which case, the image files will be somewhere in your /wp-content/uploads directory with your other media files. All of the other work described in this article can be done through the dashboard’s theme editor by an admin user but I highly recommend using a good code editor with color syntax highlighting. BBEdit is my favorite.

A WordPress filter goes into the theme’s functions file (functions.php) and consists of two parts: A function definition and a call to add that function to a named WordPress “hook”. I called my function: add_author_photo() and  added it to the ‘the_content’ hook. You can think of this hook as the point in the page building process when WordPress gets the page or post content from the database and starts to get it in shape for the web page it’s building. WordPress passes the content to the function as a string and expects it back in return. Roughly, the outline of the process looks like this:

<?php
     function add_author_photo($content) {
         ...
         return $content;
     }

     add_filter('the_content', 'add_author_photo');
?>

Note how the entire filter is enclosed in a PHP container. This is important!  Now, all we need to do is fill in the “dots”.

First, we need to make sure that our function does its work in the right place since it will be called anytime WordPress fetches the content from the database. We want the thumbnail photo to appear in posts on the home page and on single post pages, but not on static pages (which are, in a sense, “authorless”) nor on the archive and search result pages and especially not in RSS feeds. The following if statement does what we want:

if (is_home() || is_single()) {
    ...
}

Next, the code needs to check that the image file we want for the current post author actually exists. The client may add more authors and contributors before their photos are available and we don’t want an ugly, empty missing-image square to appear where a nice photo is expected. This is a bit tricky. There’s a PHP function, file_exists(), for checking whether a file exists or not but it takes, as its argument, the full Unix path to the file, as opposed to a URL fragment. WordPress provides a function for doing this: get_theme_root() which returns a string that, depending on your hosting company’s site configuration, might look like this:

/var/web/clients/abc.com/htdocs/wp-content/themes

Since my ‘authors’ directory is at the same level in /wp-content as the themes directory, all I have to do is replace the ‘themes’ part in the string above with ‘authors/thumbs/’ and append the image’s file name. The following two lines of code will assign the username to a variable and do the replacement using  PHP’s  str_replace() function.

$author_uname = get_the_author_meta('user_login');
$author_photo = str_replace(
                    'themes',
                    'authors/thumbs/' . $author_uname . '.jpg',
                    get_theme_root() );

We can check whether the file exists with another if statement:

if (file_exists($author_photo)) {
    ...
}

Now we are ready to add the image tag to the beginning of the post content. I’ll add a CSS class, ‘authorImage’, to the image tag which I’ll use to make the image float left and set appropriate margins and padding (see below.) I’ll also enclose the image in an anchor tag that links the image to the author’s profile page. I’ve laid this out here in several lines for readability. The dot at the end of each line is the PHP concatenation operator.

$image_src = '/wp-content/authors/thumbs/' .
             $author_uname . '.jpg';

$content =  '<a href="/author/' .
            $author_uname .
            '"><img class="authorImage" src="' .
            $image_src .
            '" alt="' .
            get_the_author() .
            '" /></a>' .
            $content;

Here’s a screenshot of the final code I pasted into the theme’s functions file. Because I’m a nice guy, I added  /* comments */ to explain what was going on. Click on the image to open a text division with the actual code you can copy.

[RAW]

<?php
/*  Add authors' photos to posts on the home and single-post pages.
     Copyright 2009 Larry Aronson.

     For a post author identified by username, if the image file:
	/wp-content/authors/thumbs/username.jpg
     exists, it will be prepended to the content, floating left
     of the text and linked to the author's profile page		*/

function add_author_photo($content) {
  if(is_home() || is_single()) {
    $author_uname = get_the_author_meta('user_login');
    $author_photo = str_replace('themes',
         'authors/thumbs/' . $author_uname . '.jpg',
         get_theme_root());
    if (file_exists($author_photo)) {
	 $image_src = '/wp-content/authors/thumbs/' . $author_uname . '.jpg';
	 $content = '<a href="/author/' . $author_uname .
             '"><img class="authorImage" src="' .
	     $image_src . '" alt="' . get_the_author() . '" /></a>' .
             $content;
     }
  }
  return $content;
}

/* remove the following line to deactivate the add photo feature */
add_filter('the_content', 'add_author_photo');
?>

[/RAW]

The final version took a bit of debugging to fix some stupid typing errors but it worked as I wanted it to. A look at the source code for the home page shows the generated image tag and link:

<a href="/author/larryaronson"><img class="authorImage"
   src="/wp-content/authors/thumbs/larryaronson.jpg"
   alt="Larry Aronson" /></a>

All that remained was adding some simple CSS to the style sheet to float the image to the left of the post text. The rules shown below does that and sets appropriate margins.  The images already incorporated a border so I removed the border set elsewhere in the CSS and removed the drop shadow background that Mistylook adds to images as a matter of taste.

img.authorImage {
   float: left;
   margin: 0 1em 0 0;
   border: 0;
   padding: 0;
   background-image: none;
 }

That’s it. I hope you found this article useful. Suggestions for improvements are welcome.

Well…, yes, that is right. Easy because services exists that create usable websites using templates and wizards friendly enough for the Internet illiterate.  And free – or at least it’s free in the sense of approaching zero initial software cost. But, in order for your website to grow, you’re going to need that technical knowledge, HTML, to keep your content publishing costs under control.

How amazing it is that we can create and globally distribute content, on zillions of Web pages, to inform and entertain ourselves without moving physical stuff anywhere! The Web page is irrevocably becoming the World’s most common form of communication. It’s the lowest cost replacement for articles, pamphlets, brochures, manuals, directories, flyers, commercials, letters, announcements—almost any kind of document you can think of. The Web does this instantly, adding interactivity, links and searching as a bonus!!

But here’s the problem: By doing so much for so many, the Web has become irreducibly complex. It’s also rapidly evolving. The learning curve never gets any less steep and climbing it is not easy. There just is so much to know about and we all know that even just knowing about what to know ain’t easy.

Content Is Kingdom

For many small website owners, creating and maintaining their own content is paramount. So Web editing tools are the keys to the content kingdom. There are two choices: using a wysiwyg editor on a local PC, downloading and uploading files; or using a Web-based editor to edit content directly on a webserver. The former approch allows you to create Web pages rich in structure and interactivity. The latter is easier by far and can be done anywhere you browse the Web. Unfortunately Web-based wysiwyg editors are rather puny and often frustrating to use when the content has any structure or is already marked up with HTML from another source like Microsoft Word. Knowing HTML helps you avoid many of problems and resolve others before they frustrate, no matter which editing method is used.

When Tim Berners-Lee invented the Web about twenty years ago, he thought that most HTML would be written by software programs. How did that work out? You might ask. Not very well, actually. One of the Web’s great strengths – a dictate that browsers must gracefully tolerate crappy code – is also a weakness. The early browsers; Mosaic, Netscape, AOL and Internet Explorer, went to war competing for market share by introducing new elements into the HTML language. The people writing wysiwyg editors couldn’t keep up with the rapid pace of HTML development, delivering mediocre products that generated bad code, while competition among Web designers to create unique and compelling pages encouraged  advanced HTML techniques beyond the capabilities of the wysiwyg editors.

The Rise Of The Robots

It’s 2009 and although they look much like their counterparts of a dozen years ago, Web pages are coded quite differently in this century. For one thing, good cross-browser support for Cascading Style Sheets (CSS) make it possible to code Web pages with far less HTML markup. Also, a large proportion of Web pages are dynamically generated using HTML templates. These templates are bits of code that may be reused millions of times a day so there’s high value in using the cleanest, leanest HTML markup possible.

By far the biggest change is the rise of search technologies and the role that today’s search platforms: Google, Yahoo, Bing and others, play in our experience of the Web. A modern Website seeks to increase its find-ability and raise its search engine ranking. These requirements has spawned a new business practice called Search Engine Optimization (SEO). Companies providing SEO services specialize in writing HTML that’s very easy for the search engines’ automated scripts (the robots) to understand.

This is Web 2.0, where websites continually exchange information with other websites and where what other websites “know” and “think” about your website can be as important as your site’s content. Knowing the basics of HTML, how it works to add semantic information to page elements and how that information is gathered and used by robots will give you an edge in meeting your online goals.

What’s the difference if I use just my domain name in a URL or use www.mydomain.com?  One of my colleagues said I should use www because more people understand what that is.

Okay. So what is the ‘www’ good for? Is it a necessary part of your Website’s address? In what contexts should it be used or omitted?

Technically, saying,  www.yourdomain.com, directs the Internet user to your domain’s webserver. Saying: yourdomain.com, directs the visitor to your domain’s network and you’ll figure out which server to use along the way.

Conceptually, the former presents your website while the latter presents your brand. Visually, designers like the ‘www’ prefix for its 3.x.3 symmetry. Practically, it makes no difference.

www doesn’t necessarily denote a Webserver, it’s just a widely used convention. Sixteen years ago, when the World Wide Web only attracted the attention of computer geeks, they would install web server software on a separate test or development machine in their corporate network. Each computer in a network must have a unique host name which is prefixed to the domain name. Typically, whoever first created the network would set the theme and server names were chosen from that theme — Norse gods, British warships, state capitals, whatever. There already were loosely adopted conventions — mail, news, gopher (an early, global information system without hyperlinks.) Somebody named a webserver ‘www’ and others followed suit. Interestingly, the Web’s very first home page did not use www, it used info.

The Web’s http protocol has gained dominance over other Internet protocols and the Web’s conceptual framework is synonymous now with the Internet itself. Most organizations make their Web server the primary entry point into their information domain. Hosting companies do this by default for virtual hosting accounts.

Today, search powers the Web and the Web, for many organizations, is the primary means of delivering their service and promoting their brand. When someone wants to find information about You they are more likely to enter You in a search box, than to type your url into a location field. Mobile users really appreciate shorter URLs. And for audio content, the extra ten syllables are a pain.

Like ‘dubya’, ‘www’ should fade away.

— Larry

Photo: Amazon.com

Amazon.com announced today a new version of its Kindle reader. I’ve occasionally seen people using a Kindle on the NYC subway. It’s a beautiful device and I want one. The Kindle2 will ship later this month. You can order it from Amazon.com for $359.

The Kindle2 looks to offer major improvements over the current device. It’s lighter (10.2 oz,) slimmer, faster, has more storage (up to 1500 titles,) longer battery life (up to 4 days with the WIFI on; 2 weeks without) and improved controls. Some other features that excite me:

• It can read text through built in speakers or stereo headphones
• No WIFI contract needed — Amazon pays for Sprint‘s 3G network
• More than a dozen file formats supported
• The battery can be recharged from a USB port

Of course, there are still some things to complain about:

First, it’s a gray scale device, and with only 16 shades of gray at that. It somewhat makes up for this with higher resolution (167 ppi) but still, I read many more documents than just books and color is important.

Secondly, it’s too expensive. Cut the price in half and it could revolutionize education in this country and especially abroad, where the cost of physically acquiring and moving textbooks is prohibitive.

I’m hoping that Amazon realizes the potential in the Kindle line and does something truly innovative in marketing it. Otherwise, it’s just a matter of time before Apple comes out with a large format iPod-Touch and eats Amazon’s lunch.

— Larry