Alt-I, des informations alternatives

J'ai codé à l'arrache un exemple pratique pour illustrer mon astuce concernant la navigation en Ajax accessible. Bon, c'est pas encore top au point, mais ça fonctionne nickel sous Firefox. Sous Safari 2, l'historique n'est pas modifié donc, pas de précédent ou suivant. Seul le rechargement de page fonctionne. Opera 9.5, seul le bouton Suivant ne fonctionne étrangement pas. Et IE, j'ai pas testé : j'ai pas envie de lancer VMWare : j'attends vos retours en commentaires.

Donc, de quoi s'agit il ? Nous avons une liste paginée. Sont affichés la liste des articles de ce blog par lot de 10 éléments. Une pagination en dessous permet d'afficher les 10 éléments suivants grâce à Ajax. Vous constaterez que lors d'un clic sur un numéro de page, une ancre s'ajoute à l'url. Mais aucun rechargement de page ne s'effectue.

Faîtes donc le test suivant : naviguez de page en page, puis rechargez la page. Vous vous retrouverez à la même pagination où vous étiez \o/ Attention, ce n'est pas fini. Cliquez sur le bouton précédent de votre navigateur… Pas de rechargement ni de changement de page, mais vous voilà quand même à la pagination précédente, toujours en ajax :o Revenez donc en arrière deux ou trois fois, puis repartez en avant. Même principe. Tout se charge par Ajax.

Voilà une application Ajax totalement accessible et qui reste utilisable comme tout site traditionnel.

Ah oui, ça se passe ici :

Exemple pratique pour rendre Ajax accessible

La prochaine étape sera d'écrire un module pour YUI afin de faciliter l'implémentation de cette méthode.

Il existe de nombreuses façons de coder en Javascript. La plus fréquente est malheureusement la plus crade : lister ses fonctions les une après les autres…
Voici comment je code mes classes JS. Il existe peut être de meilleures méthodes mais je trouve celle-ci très propre et très lisible :

var monProjet = {}; // On crée une variable globale du nom du projet
// Ce tableau permettra de stocker et récupérer facilement les objets créés.
//Je lui donne le nom de la classe avec un 's' marquant le pluriel :
monProjet.maClasses = new Array();
/**
 * Classe maClasse : fait des choses.
 */
monProjet.maClasse = function(attr)
{
	// Variable
	this.variable1 = attr;
	
	monProjet.maClasses.push(this);
	this.init();
};
// Méthodes publiques de maClasse
monProjet.maClasse.prototype =
{
	/**
	 * Initialisation, méthode apellée à l'instanciation de l'objet
	 */
	init: function()
	{
		this.variable2 = this.variable1 + 10;
	},
	/**
	 * Autre méthode qui va afficher variable2 dans une alerte
	 */
	autreMethode: function()
	{
		alert(this.variable2);
	},
	/**
	 * Retourne une valeur de l'objet sous forme de chaine
	 */
	toString: function()
	{
		return "maClasse Object";
	}
};
// Méthodes Statiques
/**
 * Une methode statique qui retourne 'yo'
 */
monProjet.maClasse.uneMethodeStatique = function()
{
	return "yo";
};
/**
 * Le genre de méthode statique où on se rends compte de l'utilité du tableau d'objets vu plus haut
 */
monProjet.maClasse.getByVar1 = function(var1)
{
	for (var i = 0; monProjet.maClasses[i]; i++)
	{
		if (monProjet.maClasses[i].variable1 == var1)
		{
			return monProjet.maClasses[i];
		}
	}
	return false;
};

//On peut ensuite créer un objet maClasse et apeller ses méthodes publiques et statiques :

var unObjet = new monProjet.maClasse("youpi");
unObjet.toString(); // retourne "maClasse Object"
monProjet.maClasse.getByVar1("youpi"); // retourne l'objet "unObjet"
monProjet.maClasse.getByVar1("youpi").autreMethode(); // Crée une alerte
…

Nous avons ainsi des classes bien structurées et aucune variable globales (à part la première bien sur) qui pourrait se retrouver écraser par d'autres scripts.