Tuesday, June 1, 2010

html5 implementation of deeplinking a la swfaddress

I have been using swfaddress for some heavy ajax based projects.
This library allows deep linking for Flash or Ajax based applications.
Deep linking means that a user knows exactly on which page he/she is after after clicking (taping/touching/you-pick-your-favorite-platform-custom-behavior) on a link.

One of the main problem with Flash/Ajax applications is that most of the time, you have one page handling all the navigation.

The good points:

- no page reload.

- Better User Experience.

But most of the time, no reload means also one and only one URL, no browser back button available...
swfaddress by using an anchor tag, removes these limitations.

An example:

Let's assume that this website is in Flash or Ajax and do not reload the page at all.
http://www.yoursite.com/

if you click on the 'About Us' link, you will see the contents appear but the URL will be:

http://www.yoursite.com/

...

not very practical...

swfaddress mechanism will add an anchor to the URL (which will not force the browser to reload the page):

http://www.yoursite.com/#aboutus.html

Your link in a Ajax based environment is as usual:

http://www.yoursite.com/aboutus.html

when the link is clicked, you get an event in javascript which you can handle this way:

new Ajax({

url :event.target.href+'?raw=true',

onSuccess:function(resp) {

document.getElementById('content').innerHTML=resp

});

NB1: "new Ajax({})", pick your favorite js library here.
NB2:The code is simplified! It is not an swfaddress/javascript tutorial.

the "raw=true" query string just says the application to output the content without the header, menu, footer,etc. (this assumes that is handled by a php/perl/python program that can output the contents in different ways).

Why bother eliminating the page content ? Why not just get rid off it right from the beginning??

Well, you certainly want your website to be user-friendly and seo-friendly.

Not all search engines handle the javascript loaded on your page when they crawl your website. Which means that you still must offer them a page that will be valid and makes sense on its own. (Of course, search engines are not the only ones... I can also mention the ones that turn their javascript off...)
All and all, you get bookmark-able urls, a functioning browser back button. Everyone is happy.

BUT...
This seems very hacky and quite a lot of troubles will come in your way and back fire at you. The overhead/load/security matters that the swfaddress implies are of concern too.

Could it be easier if we could specify all of these directly in an "a" tag???
Let's say:

<a href="aboutus.html" target="[#content]">about us </a>

This will tell the browser to update the url so that it becomes http://www.yoursite.com/aboutus.html
BUT the target specified will imply to not reload the page and instead append the contents into the css selector element specified. Here an element with an id of 'content'...

nobody is going to add the 'raw=true' thiny thing for you so you may have to handle this with javascript in some way (unless the browser adds a specific header when requesting the source this way!) but it will still avoid quite a lot of headaches and offer a more SEO friendly environment...

Well, it is not very far from iframes in itself so if they did not do it this way the first time, it is certainly because I am missing something very crucial here.

but still... would be nice.

?

No comments: