français

a/X web 2 development

Ces termes sont souvent utilisés ensemble, mais leurs définitions sont différentes.

Ajax a une définition précise qui désigne une méthode pour mettre à jour une partie de la page web affichée dans un navigateur, sans recharger toute la page. C'est avant tout une méthode d'optimisation et de confort d'utilisation. Elle utilise le langage javascript, coté navigateur et implique donc qu'il soit disponible et activé.

Démo Le menu principal de cette page est une démonstration d'Ajax : laisser le pointeur plus d'une seconde sur un lien de ce menu, affiche le contenu ciblé, en ne rechargeant que celui-ci. Les effets d'affichage utilisent la bibliothèque javascript script.aculo.us, elle-même basée sur Prototype.
Note : Le pauvre IE6 à des problèmes : couleurs de menus perturbées, effet de fondu absent, texte en colonne. Ce dernier point se voit aussi sur IE7.

Voir le javascript de menu dynamique.

web 2 est un terme beaucoup plus flou. Il signifie quelque chose comme « techniques modernes du web », sans qu'il soit précisément défini quelles sont les techniques requises pour justifier cette appellation.

Les techniques et pratiques modernes sont, sans ordre d'importance :

Interface utilisateur amélioré
Ce point est la source de la confusion Ajax/Web2. Ajax étant une des techniques d'amélioration. En réalité, de nombreuses techniques sont utilisées sur ce point, comme le « glisser-déposer » au sein d'une fenêtre. En majorité, ils reposent sur Javascript, d'autres sur CSS. Le menu réactif de ces pages est un exemple CSS.
Séparation contenu/style
Il s'agit de séparer formellement, souvent dans des fichiers distincts, le contenu d'une page web de la manière dont il est affiché. Cette distinction est importante pour pouvoir facilement adapter l'apparence d'un site au type d'interface qui l'affichera. Il permet aussi de modifier facilement l'habillage du site, éventuellement au goût de l'internaute. La page CSS montre un exemple de changement de feuille de style. Le contenu est spécifié en langage HTML, le style en CSS.
Vous pouvez voir le code de ces pages avec votre navigateur. Le code CSS est visible à la page CSS
Code valide relativement aux spécifications récentes
L'évolution rapide des techniques du web a produit plusieurs niveaux de spécification pour chacun des langages mis en jeu. Il y a des querelles de chapelle sur l'opportunité de choisir telle ou telle spécification (voir le topo XHTML ), mais dans tous les cas un site « web 2 » doit avoir un code valide.

Valid XHTML 1.0 StrictVérifier la validité du code de cette page

La plus grosse difficulté à surmonter provient des navigateurs qui peinent à se conformer eux-mêmes aux spécifications. C'est particulièrement le cas pour Internet Explorer qui est toujours le cancre de la classe, avec 2 ans de retard au minimum, et oblige à des contorsions pénibles et non valides. Même la version 7 reste en deçà de la concurrence.

Architecture MVC
Modèle, Vues, Contrôleurs. Cet aspect est plus rarement lié au web 2, mais il est à coup sûr une garantie de qualité, dès qu'un site devient fonctionnellement élaboré. Il s'agit de clairement diviser le code d'une application en trois domaines.
  • Le premier défini quelles sont les données à traiter, comment elles sont organisées et stockées : en mémoire, en fichiers, dans une base de données. Typiquement en PHP et/ou MySQL.
  • Le second concerne la définition de l'interface utilisateur : ce qui s'affiche. PHP + HTML + CSS côté serveur, Javascript coté client.
  • Le dernier programme le moteur qui va manipuler les donnés en fonction des actions de l'utilisateur, avant de les passer au module d'affichage. En général une combinaison de PHP et de MySQL, parfois assistés de Javascript côté client.

js/ajax_menu.js

//at page load
Event.observe(window,'load', function () {
	$A($('menu_g').getElementsByTagName('a')).each(function (a_cour) {
		if (!Element.hasClassName(a_cour.parentNode, 'actif'))
			Event.observe(a_cour, 'mouseover', set_a_over_event);
	});
});

function set_a_over_event(ev_cour) {
	a_faire = setTimeout(function () {
		li_prec = $('menu_g').getElementsByClassName('actif')[0];
		Effect.Fade($('travail')); // , {queue: 'front'}
		Element.removeClassName(li_prec, 'actif');
		Event.observe(li_prec.firstChild, 'mouseover', set_a_over_event)
		Element.addClassName(this.parentNode, 'actif');
		setTimeout(function () {
			//here is the ajax request
			new Ajax.Updater('travail', 'ajax/' + this.href.replace(/^.*\//, ''), {evalScripts: true, onComplete: function () {
				Effect.Appear($('travail'), {queue: 'end'});
				Event.stopObserving(this, 'mouseover', set_a_over_event);
				masquer();
			}.bind(this)} );
		}.bind(this), 1000);
	}.bind(Event.element(ev_cour)), 1000);
	Event.observe(Event.element(ev_cour), 'mouseout', function (event) {
		clearTimeout(a_faire);
		});
}
	

Valid XHTML 1.0 Strict