Table Of ContentBien
développer
Web 2.0
pour le
Bonnes pratiques Ajax
Prototype • Script.aculo.us • Accessibilité • JavaScript • DOM • XHTML/CSS
2e édition
C h r i s t o p h e P o r t e n e u v e
Préface de Tristan Nitot,
président de Mozilla Europe
12391Titre_Developper_XP 8/09/08 15:01 Page 1
Bien développer
Web 2.0
pour le
CHEZ LE MÊME ÉDITEUR
Ouvrages sur le développement web
E. Sloïm. – Mémento Sites web. Les bonnes pratiques. E. puyBArEt. – Java 1.4 et 5.0. (coll. Cahiers du
N°12101, 2007, 14 pages. programmeur)
N°11916, 3e édition 2006, 400 pages
A. BouchEr. – Ergonomie web. Pour des sites web efficaces.
N°12158, 2007, 426 pages. S. powErS. – Débuter en JavaScript.
N°12093, 2007, 386 pages (Collection Blanche).
r. GoEttEr. – CSS 2 : pratique du design web.
N°11976, 2e édition, 2007, 324 pages (Collection Blanche). T. tEmpliEr, A. GouGEoN. – JavaScript pour le Web 2.0.
N°12009, 2007, 492 pages (Collection Blanche).
m. NEBrA. – Réussir son site web avec XHTML et CSS.
N°12307, 2e édition, 2008, 336 pages. D. thomAS et al. – Ruby on Rails.
N°12079, 2e édition, 2007, 800 pages (Collection Blanche).
F. DrAillArD – Premiers pas en CSS et XHTML.
N°12390, 2e édition 2008, 250 pages. E. DASpEt et c. piErrE DE GEyEr. – PHP 5 avancé. De PHP
5.3 à PHP 6.
o. ANDriEu. – Réussir son référencement web. N°12369, 5e édition, 2008, 804 pages (Collection Blanche).
N°12264, 2008, 302 pages.
D. SéGuy, p. GAmAchE. – Sécurité PHP 5 et MySQL.
A. clArkE. – Transcender CSS. Sublimez le design web ! N°12114, 2007, 240 pages (Collection Blanche).
N°12107, 2007, 370 pages.
p. roquES. – UML 2. Modéliser une application web.
J.-m. DEFrANcE. – Premières applications Web 2.0 avec N°12389, 4e édition, 2008, 236 pages (Cahiers du
Ajax et PHP. programmeur).
N°12090, 2008, 450 pages (Collection Blanche).
t. ZiADé. – Programmation Python.
k. DJAFAAr. – Développement JEE 5 avec Eclipse Europa. N°11677, 2006, 530 pages (Collection Blanche).
N°12061, 2008, 380 pages (Collection Blanche).
r. rimElé. – Mémento MySQL.
S. BorDAGE, D. thévENoN, l. DupAquiEr, F. BrouSSE. – N°12012, 2007, 14 pages.
Conduite de projet Web. 60 modèles de livrables prêts à
l’emploi. Un outil de création de business plan. 3 études de cas. r. GoEttEr. – Mémento CSS.
N°12325, 4e édition, 2008, 408 pages. N°11726, 2006, 14 pages.
A. tASSo. – Apprendre à programmer en Actionscript. r. GoEttEr. – Mémento XHTML.
N°12199, 2007, 438 pages (Collection Noire). N°11955, 2006, 14 pages.
Autres ouvrages : Web et logiciel libre
D. mErcEr, adapté par S. BurriEl. – Créer son site c. Gémy. – Gimp 2.4. efficace. Dessin et retouche photo.
e-commerce avec osCommerce. N°12152, 2008, 402 pages avec CD-Rom.
N°11932, 2007, 460 pages.
S. croZAt. – Scenari – La chaîne éditoriale libre.
A.-l. quAtrAvAux et D. quAtrAvAux. – Réussir un site web N°12150, 2007, 200 pages.
d’association… avec des outils libres !
N°12000, 2e édition, 2007, 372 pages. i. BArZilAi. – Mise en page avec OpenOffice.org Writer.
De la conception à la réalisation.
pErliNE, A.-L. et D. QuAtrAvAux, m.-m. mAuDEt. – SPIP N°12149, 2007, 338 pages.
1.9. Créer son site avec des outils libres.
N°12002, 2e édition, 2007, 376 pages. S. GAutiEr, c. hArDy, F. lABBE, m. piNquiEr. –
OpenOffice.org 2.2 efficace.
J BAttEllE, trad. D. ruEFF, avec la contribution de S. N°12166, 2007, 420 pages avec CD-Rom (Accès Libre).
BloNDEEl – La révolution Google
N°11903, 2006, 280 pages.
12391Titre_Developper_XP 8/09/08 15:01 Page 2
Bien développer
Web 2.0
pour le
AJAX • Prototype • Script aculo us
• •
XHTML/CSS • JavaScript • DOM
2e édition
C h r i s t o p h e P o r t e n e u v e
Préface de Tristan Nitot,
président de Mozilla Europe
ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à
usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les
établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité
même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui
menacée.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le
présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du
Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.
© Groupe Eyrolles, 2007, 2008, ISBN : 978-2-212-12391-3
Je dédie cette deuxième édition aux membres et fondateurs de l’association Paris-
Web et à ceux d’Open Web, qui font tout leur possible, depuis plusieurs années, pour
amener toujours davantage de professionnels à placer la qualité, l’accessibilité, l’inter-
opérabilité et la conformité aux standards au cœur de leurs projets web.
Je la dédie aussi aux rédacteurs de Pompage.net, qui travaillent, eux, à permettre aux
développeurs web francophones de bénéficier des meilleures ressources web étran-
gères sur ces sujets.
Adrien Leygues, Antoine Cailliau, Cathy Weber, Cédric Magnin, Denis Boudreau,
Éric Daspet, Élie Sloïm, Emmanuel Clément, Fabien Basmaison, Fabrice Bonny,
Florian Hatat, François Nonnenmacher, Frédéric Chotard, Frédéric Valentin,
Goulven Champenois, Ismaël Touama, Jean-Denis Vauguet, Julien Wajsberg,
Laurence Jacquet, Laurent Denis, Laurent Jouanneau, Leo Ludwig, Marc Thierry,
Marie Alhomme, Matthieu Pillard, Maurice Svay, Nicolas Gallet, Nicolas Hoffmann,
Olivier Gendrin, Olivier Meunier, Pascale Lambert-Charreteur, Pierre Equoy,
Renaud Gaudin, Samuel Latchman, Stéphane Deschamps, Stéphanie Booth,
Steve Frécinaux, Sylvain Lelièvre, Tristan Nitot, Vincent Valentin, et ceux que je
risque d’avoir oubliés : vous êtes formidables !
Préface
Vous tenez donc entre vos mains un exemplaire du livre Bien développer pour le
Web 2.0. On pourrait croire que ce qui est important dans le titre, c’est « Web 2.0 ».
Certes, c’est bien le cas. La participation grandissante des utilisateurs, qui est l’une
des deux particularités du Web 2.0, est importante. Vitale, même. Paradoxalement,
cette notion d’un Web où chacun pourrait à la fois lire et écrire, consommer et pro-
duire, est celle de son inventeur, Tim Berners-Lee, même si peu d’internautes ont
réalisé cela.
Mais ce qui est surtout important dans le titre de cet ouvrage, c’est « Bien déve-
lopper ». Développer « comme il faut ». Car le Web dit « 1.0 » ne s’est pas seulement
traduit par un Web où seuls quelques auteurs publiaient pour une foule grandissante
de lecteurs : le Web 1.0 s’est aussi traduit par des errements technologiques qui ont
fait que la promesse du Web n’a été tenue que partiellement, dans la mesure où les
exclus étaient nombreux. Vous n’utilisez pas tel plug-in ? Ah, dommage ! Vous avez
recours à tel navigateur trop moderne ? Tant pis pour vous ! Vous souhaitez consulter
le site avec votre téléphone mobile ? Vous devrez attendre de trouver un PC connecté.
Vous avez désactivé JavaScript dans votre navigateur pour des raisons de sécurité ?
Passez votre chemin ! Vous avez un handicap visuel ou des difficultés pour manipuler
une souris ? Navré, le service n’est pas conçu pour vous. Combien de millions de
personnes se sont retrouvées confrontées à de tels problèmes du Web 1.0 ? C’est
impossible de le dire... Mais ça n’était pas tant le Web qui était en cause que la mau-
vaise façon dont les sites ont été développés, souvent par faute de formation, de recul
sur la technologie, encore toute récente.
Aussi, alors que le Web 2.0 fait tant parler de lui, qu’il convient d’acquérir les compé-
tences techniques pour construire un site utilisant ces technologies, autant apprendre
dès le début la bonne façon de faire. La bonne façon, c’est celle qui consiste à utiliser
des méthodes permettant de conserver la compatibilité avec un éventail aussi large
que possible de navigateurs, d’utilisateurs, de paramétrages, et de connexions.
Bien développer pour le Web 2.0
VIII
Le Web 2.0 fait deux promesses explicites : plus de participation des utilisateurs, et
des interfaces plus agréables et ergonomiques. Il en est une autre qui est implicite :
que les développeurs web apprennent des échecs et difficultés du Web 1.0 pour ne pas
les répéter. Pour éviter le bricolage que fut le Web à ses débuts, en passant à l’époque
de la maturité et de l’industrialisation, en permettant un accès à tous. C’est en cela que
ce livre est important : il ne s’agit pas seulement d’apprendre à « développer pour le
Web 2.0 » mais aussi d’apprendre à bien développer pour le Web.
Tristan Nitot
Président de Mozilla Europe
Table des matières
Avant-propos............................................................................ XXV
À qui s’adresse ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXV
Qu’allez-vous trouver dans ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXVI
Qu’apporte cette deuxième édition ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXVII
Les standards du Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXVII
De quelles technologies parle-t-on ? . . . . . . . . . . . . . . . . . . . . . . . . . . . XXVIII
Qui est à la barre, et où va-t-on ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXIX
À quoi servent les standards du Web ? . . . . . . . . . . . . . . . . . . . . . . . . . . XXXII
Et les navigateurs, qu’en pensent-t-ils ? . . . . . . . . . . . . . . . . . . . . . . . . . XXXIV
Quelques mots sur les dernières versions . . . . . . . . . . . . . . . . . . . . . . . . XXXVI
Qu’est-ce que le « Web 2.0 » ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXXVII
Vue d’ensemble, chapitre par chapitre . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXXIX
Première partie : donner vie aux pages . . . . . . . . . . . . . . . . . . . . . . . . . . XXXIX
Deuxième partie : Ajax, ou l’art de chuchoter discrètement . . . . . . . . . . . . . .XL
Troisième partie : Parler au reste du monde . . . . . . . . . . . . . . . . . . . . . . . . . .XL
Des annexes pour le débutant comme pour l’expert . . . . . . . . . . . . . . . . . . . XLI
Aller plus loin... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XLII
À propos des exemples de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XLII
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XLII
Et pour cette deuxième édition... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XLIII
CHAPITRE 1
Pourquoi et comment relever le défi du Web 2.0 ?.................... 1
Avant/après : quelques scénarios frappants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
La saisie assistée : complétion automatique de texte . . . . . . . . . . . . . . . . . . . . . .1
Le chargement à la volée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
La sauvegarde automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Bien maîtriser ses outils clefs : XHTML, CSS, JS, DOM et Ajax . . . . . . . . . . . .11
