Diego Pessoa » Web developing

Solving the problem of “back” button in Ajax applications

Diego Pessoa — Tue, 10 Mar 2009 00:18:27 +0000

Who here has always dreamed in do Ajax applications that the user can freely navigate using the back and forward buttons, and furthermore, can bookmark specific sections? In theory, this isn’t possible, since the “Ajax” is used by most to reload just some page blocks, keeping active the main page and, consequently, precluding the back button or bookmarks use. Otherwise we’d have the good old reload of the entire page.

But then, how the Gmail works? It’s totally in Ajax and yet you can navigate using the back button. If you put a link like: http://mail.google.com/mail/#compose in the address bar, it will open the e-mail composition screen normally. The big secret is in the #anchors.
Anchor Oriented Navigation

A very interesting thing of the anchors is that they allow you to use the back and forward button, for example, without generate no one full page request and without leaving that page, so, how could we do this?

The first step is create a Javascript file that will be every time verifying if some anchor is active, if so, it sends the Ajax request calling the specific section, based on anchor’s name, that will be loaded inside the main block. Simple, isn’t it?

As is usual for JavaScript today, we will use jQuery, so remember to include the library file in your application.

We would then have a file named “core.js”, thus:

/**
* Loading the page, the timer is started to check if there is an active anchor to each 300ms. */
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
/**
* Method to check if there is some anchor change, if so, sends the Ajax request.
*/
function checkAnchor(){
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
/**
* If doesn’t have no one active anchor, the default section is loaded
*/
if(!currentAnchor)
query = "section=home";
else
{
/**
* Creates the result string. Converting the url: URL/#fotos&id=2 in URL/?section=fotos&id=2
* */
var splits = currentAnchor.substring(1).split(‘&’);
var section = splits[0];
delete splits[0];
var params = splits.join(‘&’);
var query = "section=" + section + params;
}
/**
* Sends the request
*/
$.get("callbacks.php",query, function(data){
$("#main_block").html(data);
});
}
}

OK, the content will be loaded in th e element of ID “main_block” through the Ajax request result that being sent to the page “callbacks.php” in GET Querystring format.

To catch it, we would have something like this:

$section = addslashes(strip_tags($_GET[’section’]));
$page = "pages/".$section.".php";
if (file_exists($page)) {
include($page);
}

Thus, we would need only a folder called “pages” containing the pages with the anchors’ names.

And to call each section, a simple html page with links like:

http://mysite.com/#photos

It would be detected by the Javascript method “checkAnchor()”, and will be call a php request loading the page named photos.php inside the directory “pages”. It will exhibited inside the block “#main_block” that is contained in the same page of the clicked link, and the best of all, you can back, forward and bookmark the sections you want.

To better illustrate the example, I made a blatant copy (haha) of the PHP-PB’s site, with the only difference of having Ajax navigation through anchors (the original has normal navigation). Access the link: http://www.diegopessoa.com/php-pb-ajax

If you want to download the working example, click here!

II PHP-PB Meeting

Diego Pessoa — Mon, 09 Mar 2009 23:47:28 +0000

Hi people,

In the last saturday, March 7, was held in the Shopping Sebrae auditorium, the II PHP Paraiba Meeting. I wish to express my most sincere congratulation to all who participated in this event which is becoming increasingly greater, showing that the PHP Paraiba community is active and partipatory!

For those who could not follow the event, I am providing below the slides from my presentation, “Accessible Web Applications.”

Accessible Web Applications

See the others presentations of the meeting:

http://www.slideshare.net/tag/ii-encontro-php-pb

WCAG! WCAG!

Diego Pessoa — Mon, 02 Feb 2009 03:47:30 +0000

In the beginning of 2009 year, the W3C announced new standards to help the developers to create more accessible sites, ie, cover more adequately to disabled and old users. This is the second WCAG (Web Content Accessibility Guidelines) version, this new standard produced by the Web Accessibility Initiative (WAI) of W3C will attend a huge range of content (such text, images, audio and video) and web applications, allowing better conformance tests and still will prove more flexibility and a larger innovation potential to the web developers. The WCAG 2.0 is easier to understand and to use. Just see the technical and educational material available.

The WCAG 2.0 target the web access difficulties experienced by people with limited vision, hearing, physical, cognitive, neurological and by old users with needs to access the web. Following four principles:

Perceivable – Information and user interface components must be presentable to users in ways they can perceive. (For example, provide alternative texts to images, caption mode for audio, display content adaptable to different ways to be shown and use color contrast).

Operable – User interface components and navigation must be operable. (Provide access to features via keyboard, offer enough time to read and insert data, avoid images that can cause convulsions and improve navigability.

Understandable – Information and the operation of user interface must be understandable. (Provide legible and predictable content to help users to avoid and correct errors)

Robust – Maximize compatibility with current and future user agents, including assistive technologies.

To who already wants to begin to study the new guidelines, visit the reference guide.

To motivate you, see the video with the WCAG 2 theme: