Changing the current page subtleties

March 4, 2011 by David Corvoysier

The window.location object has two methods to tell the browser to navigate to a new URL: replace and assign.
The only difference between the two methods is that window.location.replace will not insert a new page in the history: as a consequence, the user will not be able to return to the original page using the back button of the browser.
In all automatic redirection use cases, using window.location.replace makes sense, as the web developer probably doesn’t want the user to be able to come back to the original page, but there are several other use cases where window.location.assign makes more sense, because you actually want the user to be able to use the back button.
So, you would expect both methods to be equally popular, right ? Wrong !
Google search on window.location.replace -> more than 47 millions responses …
Google search on window.location.assign -> only 280 000 responses !
Okay, maybe that’s because window.location.assign("url") is equivalent to window.location.href="url". Well, not only …
Google search on window.location.href -> “only” 12 millions responses …
So, I am now wondering whether people use window.location.replace because it is what they need or just because it comes out first when they google for a way to change a page using javascript …

HTML 5 offline web applications

April 4, 2009 by David Corvoysier

HTML 5 provides a new caching feature to support offline web applications.

Basically, you can specify in a specific file called the “cache manifest” the caching policy to apply to a particular web page.

To activate the HTML 5 caching feature for a specific document, you only need to specify the URI of the cache manifest file in the manifest attribute of the <html> element.

<!DOCTYPE HTML>
<html manifest="myapp.cache">
...

The file that references the cache manifest file is called the master entry.

Please note that to be properly parsed by the browser, the manifest file must have a text/cache-manifest MIME type (which means that you will need either to add a custom file type extension binding to your web server or to specify manually the mime-type, for instance using PHP header directive).

A cache manifest file typically looks like this:

CACHE MANIFEST
index.html
style.css
images/logo.png

NETWORK:
search.php

This file specifies several files to cache (the cache explicit entries), and then specifies that search.php should never be cached (it is said to belong to the online white list), so that any attempt to access that file will bypass the cache.

Whenever the user browses to the page corresponding to a document to which a cache manifest is associated, the browser must check on the server if the latter has been modified:

  • If it hasn’t, then the cached content is used,
  • If a new version of the cache manifest exists, then the cached content is considered as staled and reloaded from the server.

The cache manifest for a document may also contain fallback entries that can be used if the browser can’t retrieve the original content. Below is an example where a static image is used when the retrieval of a dynamically generated image fails:

CACHE MANIFEST
FALLBACK:
images/mirror-effect.php server-busy.jpg

HTML 5 also defines an application cache API to manually trigger cache updates:

  • update(): updates the cache for the current document in the background,
  • swapCache(): reflow the HTML document using updated cached content,
  • onupdateready(): event triggered when the cache content has been updated,
  • onobsolete(): event triggered when the cache content has been marked as obsolete,
  • …

HTML 5 <audio> & <video> elements

April 3, 2009 by David Corvoysier

One of the most revolutionary concept introduced by HTML 5 is the native support of audio and video playback in web pages.

Two new HTML elements have been defined for that purpose: <audio> and <video>, based on the generic media element type.

Media elements use a common set of attributes:

  • src: defines the source of the media to render,
  • autoplay: boolean to activate|prevent immediate playback,
  • loop: boolean to activate|prevent automatic looping on content,
  • controls: boolean to display|hide browser playback user interface.

<video> and <audio> elements can contain elements to be displayed to the user in older browsers that do not support these new elements.

Below is an example of how to use the <audio> element:

<audio src="audio.ogv" controls width="100" height="50">
    <a href="audio.ogv">Listen</a>
</audio>

Alternatively to the src attribute, the content to be rendered can be specified using one or more <source> elements, each of them describing a specific media resource.

Each <source> can be identified by its src and type attributes, optionally complemented by a codecs attribute:

<audio controls width="100" height="50">
     <source src="audio.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio.spx" type="audio/ogg; codecs=speex">
    <source src="audio.oga" type="audio/ogg; codecs=flac">
</audio>

The <video> element has an optional poster attribute that can be used to define an image to be displayed before the video is played:

<video src="oggy.ogv" poster="oggy.jpg" />

These new media elements also support a set of handy javascript method, properties and events, to allow the fine-grained control of the rendered UI.

<script>
function playVideo(url){
     var video = document.getElementById("video");
     video.setAttribute("src",url);
}
</script>
<video id="videoPlayer" controls=false/>
<p>
     <button type="button"
             onclick="video.playbackRate = -2;">
         Rew
     </button>
     <button type="button"
             onclick="video.play();">
         Play
     </button>
     <button type="button"
             onclick="video.pause();">
         Pause
     </button>
     <button type="button"
                 onclick="video.playbackRate = 2;">
         FF
     </button>
</p>

New HTML 5 block-level elements

March 9, 2009 by David Corvoysier

The HTML 5 specification introduces new block elements that can be used to structure documents:

  • <section>: represents a document or application section (a content column for instance),
  • <article>: represents an independent piece of content inside a document/section (a blog entry for instance),
  • <aside>: represents a piece of content not directly related to the displayed content (typically a sidebar),
  • <header>: represents a document header,
  • <footer>: represents a document footer,
  • <nav>: represents a block of navigation links (typically a blog navigation bar),
  • <dialog>: can be used to render a chat session, using complementary <dt> (talker) and <dd> (quote) tags,
  • <figure>: can be used to provide textual information about an embedded content,
  • <address>: represents a document/section contact block,

Introducing: HTML 5

March 6, 2009 by David Corvoysier

The HTML version you are using everyday is HTML 4.0.1, defined back in 1999 by the W3C.

Its XML counterpart is XHTML 1.1, successor of XHTML 1.0 defined in 2000 and revised in 2002 by the W3C.

The newest XHTML 2.0 was at first meant to replace both, but the fact that it was not compatible with XHTML 1.1 raised quite a controversy.

This, added to the fact that some major internet companies and non-profit organizations wanted to expand the typical browser experience to include other internet usages like messaging and media playback led to the creation of the Web Hypertext Application Technology Working Group (WHATWG), that released in 2005 the first version of the HTML 5 specification.

The W3C started in 2007 a new HTML working group that took the WHATWG HTML 5 specification as a basis, leading to the publication of the first HTML 5 draft in 2008.

The W3C HTML 5 working group is led by Ian Hickson from Google, Inc (WHATWG HTML 5 specification editor, CSS 2.1 co-editor, Acid2 and Acid3 developer) and David Hyatt from Apple, Inc (Safari/Webkit project leader, Firefox co-founder).

The HTML 5 specification defines both HTML and XHTML document types.

The W3C maintains a list of differences between HTML 5 and HTML 4.

I will try to explain these differences in separate posts: