Bien developper pour le Web 2.0 : Ajax, Prototype, Scriptaculous XHTML CSS, JavaScript, DOM

596 Pages·2008·9.57 MB·French

by  Christophe Porteneuve

12028_Developper_Web_XP 26/10/06 10:51 Page 1
e Bien
v
u développer
Web 2.0 e
n
e
t
r
o
P Web 2.0
Bonnes pratiques Ajax C. Porteneuve . pour le
C
Enseignant à l’INSIA où
Adieu, absence d’accessibilité, soupes de balises, combinaisons de Javascript propriétaires et autres ilestresponsable de la
mauvais réflexes qui polluaient le Web 1.0. Créer des interfaces utilisateur bluffantes et interactives à spécialisation Systèmes x
d’Information et Génie
la Web 2.0 (Gmail, Google Maps, Flickr, Netvibes…) est l’occasion d’instaurer de bonnes pratiques de
Logiciel, Christophe
développement garantissant le respect des normes, l’ergonomie et l’accessibilité des applications web. Bonnes pratiques Ajax
Porteneuve conçoit des
pages web depuis plus de
Une bible des meilleures pratiques de développement web et Ajax dixans. Au cœur d’un projet a
d’intranet dynamique
Christophe Porteneuve livre dans cet ouvrage plus de dix années d’expérience en développement et en qualité web. entièrement basé sur XML Prototype • Script.aculo.us • Accessibilité • JavaScript • DOM • XHTML/CSS
Il rappelle les fondamentaux techniques du Web 2.0 (XHTML, CSS, JavaScript, DOM…), décrit l’usage des fra-
et sur des composants
meworks de développement dédiés Prototype et script.aculo.us dans leur version la plus récente, et explore le cœur
visuels XSLT dès 1999,
d’Ajax, XMLHttpRequest, ainsi que la question des contenus et services externes (services web, API REST et flux ilparticipa au premier portail j
de syndication RSS et Atom). Outre une réflexion sur l’accessibilité et l’ergonomie, il explique comment conjuguer JSP en Europe (Freesbee).
toutes ces technologies dans le cadre d’une méthodologie de développement cohérente et qualitative. En 2002, convaincu de la
A
nécessité d’être conforme
aux standards du Web,
Au sommaire ilmet à jour 200 machines
Web 2.0 et standards du Web• Mythes et rumeurs• Rappels JavaScript• Types de données• Opérateurs mécon- du parc de l’INSIA pour
nus• Exceptions• Héritage de prototypes• Binding• Idiomes intéressants• Sélection d’une propriété sur condi- Mozilla Firefox et enseigne
tion• Fonctions et objets anonymes• Simuler des espaces de noms• Bonnes pratiques d’écriture• Déboguer du leXHTML strict sémantique,
JavaScript dans Mozilla Firefox, Opera, Safari, Konqueror, MS-Internet Explorer• Venkman, Firebug• Manipulation CSS 2.1 et XML. Il ouvre
dynamique avec le DOM• Niveaux DOM• Ordre des noeuds• Scripter au bon moment• Pas d’extension proprié- alors un blog, explore RSS
taire• Inspecter le DOM• Gestion propre des événements• Accommoder MSIE• Capture et bouillonnement• et se rapproche de Mozilla s 0
Besoins fréquents: décoration automatique de labels, validation automatique de formulaires• Prototype: simpli-
Europe. Après avoir
pciutiés,s paonrttsab: icliotén veetr éslioéngsan, ceext•r aAccticoènss ,a utrxa énlséfmoremnatstio•n Tsa•b leÉaléumx,e hnatss hé•te Intdéurasti•o nMsa•n iSpturliantgio ennsr idcehsi •s tDyleess teatb lcelaausxs essur•- découvert Ruby, Ruby On e .
Parcours de hiérarchies• Positionnement• Manipulation de formulaires• Événéments• Ajax, ou l’art de chucho- Rails etAjax en 2005, u 2
ildevient contributeur
tAecrti•ve XXM veLrHstutsp Roebqjeute sntat•if AJanvaatoSmcriiep td’•u nCer éceorn vl’eorbsjeatt iorenq Auêjatxeu•r ,I ndsétcarllierer Retu beynv•o yPerré lpaa rreeqr uuênt eé, crheacnegveo ira seytn ctrhariotenre l•a àRails, Prototype q C h r i s t o p h e P o r t e n e u v e
réponse • Types de réponse : XHTML, XML, JS, JSON… XPath • GoogleAJAXSLT • Ajax avec Prototype • etscript.aculo.us.
Ajax.Request• Ajax.Updater• Différencier la mise à jour entre succès et échec• Ajax.PeriodicalUpdater• Petits i b
t
secrets supplémentaires• Script.aculo.us pour l’ergonomie• Effets visuels• Invocation• Options communes•
e
Fonctions de rappel• Files d’effets• Glisser-déplacer avec Draggable et Droppables• Tri de listes• Complétion a Préface de Tristan Nitot,
automatique de texte• Avoir du recul sur Ajax• Ajax et l’accessibilité• Dojo• Mochikit• OpenRico• Services W
web et REST • Contraintes de sécurité• API REST• Exemple d’Amazon.fr• De XML à XHTML: la transformation r président de Mozilla Europe
XSLT• API Flickr• Flux RSS et Atom • Récupérer et afficher des flux• Feuille XSLT• Traiter des quantités mas-
p
sives de HTML encodé• Les dates W3DTF• Annexes• XHTML sémantique• CSS 2.1• Le «plus» de l’expert:
savoir lire une spécification• Les recommandations du W3C• Les RFC de l’IETF• Développer avec son navigateur
web • Problèmes de cache• Firefox, Safari, Internet Explorer Developer Toolbar, Opera.
s
o e
À qui s’adresse cet ouvrage? 8-8 8 mp
––– ÀcÀAo u tmcxoe buduiséxn vacqeneulotui pxtspe oqecuuuhhirn assoi otlwoeugnehitbea sietq exudpnie ltod praoeocivriqen uentéent r, aiprqcr utuouanfaoleitlni ésdm eeeérut tr lhea olucedrcssoe lsbocsigobiinbleinoi liatcthioésèh.sqéaurneecsne tsPe redotet o ddtéyécpvoeeu lvoerpti rps elcemrsiep tnte.tac wchunelobol,.o ugsie;s du Web 2.0; Code éditeur:G12028ISBN:2-212-12028-1ISBN 13: 978-2-212-1202 978221212028 Conception: Nord Co Bonn
42€
Titre_Developper_Web_XP 16/10/06 11:14 Page 1
Bien développer
Web 2.0
pour le
CHEZ LE MÊME ÉDITEUR
J Battelle, trad. D. Rueff, avec la contribution de S. Blondeel – La révolution Google.
N°11903, 2006, 280 pages.
Ouvrages sur le développement web
M. Plasse. – Développez en Ajax.
N°11965, 2006, 314 pages.
J. PRotzenko, B. Picaud. – XUL (coll. Cahiers du programmeur).
N°11675, 2005, 320 pages.
H. WittenBRik. – RSS et Atom. Fils et syndications.
N°11934, 2006, 216 pages.
R. GoetteR. – CSS 2 : pratique du design web (collection Blanche).
N°11570, 2005, 324 pages.
d. tHomas et al. – Ruby on Rails.
N°11746, 2006, 590 pages.
t. ziadé. – Programmation Python.
N°11677, 2006, 530 pages.
E. dasPet et C. PieRRe de GeyeR. – PHP 5 avancé.
N°12004, 3e édition 2006, 804 pages.
m. mason. – Subversion. Pratique du développement collaboratif avec SVN.
n°11919, 2006, 206 pages.
G. Ponçon. – Best practices PHP 5. Les meilleures pratiques de développement en PHP.
N°11676, 2005, 480 pages.
S. maRiel. – PHP 5 (et XML) (Les Cahiers du programmeur).
N°11234, 2004, 290 pages.
J. zeldman. – Design web : utiliser les standards, CSS et XHTML.
N°12026, 2e édition 2006, 444 pages.
Autres ouvrages : Web et logiciel libre
s. Blondeel. – Wikipédia. Comprendre et participer.
N°11941, 2006, 168 pages (collection Connectez-moi !).
f. le fessant. – Le peer-to-peer. Comprendre et utiliser.
N°11731, 2006, 168 pages (collection Connectez-moi !).
c. BécHet. – Créer son blog en 5 minutes.
N°11730, 2006, 132 pages (collection Connectez-moi !).
f. dumesnil. – Les podcasts. Écouter, s’abonner et créer.
N°11724, 2006, 168 pages (collection Connectez-moi !).
o. saRaJa. – La 3D libre avec Blender.
N°11959, 2006, 370 pages.
L. dRicot, contrib. de R. mas. – Ubuntu. La distribution Linux facile à utiliser (coll. Accès libre).
N°12003, 2e édition 2006, 360 pages avec CD-Rom.
m. kRafft, adapté par R. HeRtzoG, R. mas, dir. N. makaRévitcH. – Debian. Administration et configuration avancées.
N°11904, 2006, 674 pages.
s. GautieR, c. HaRdy, f. laBBe, m. PinquieR. – OpenOffice.org 2 efficace.
N°11638, 2006, 420 pages avec CD-Rom.
c. Gémy. – Gimp 2 efficace.
N°11666, 2005, environ 350 pages (collection Accès libre).
m. GRey. – Mémento Firefox et Thunderbird.
N°11780, 2006, 14 pages.
Titre_Developper_Web_XP 16/10/06 11:14 Page 2
Bien développer
Web 2.0
pour le
AJAX • Prototype • Scriptaculous
XHTML/CSS • JavaScript • DOM
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, ISBN : 2-212-12028-1, ISBN 13 : 978-2-212-12028-8
Dépôt légal : novembre 2006
N° d’éditeur : 7540
Imprimé en France
À ma mère, Claude Paris.
Tout ça grâce aux premiers pas, tu sais, les petits...
Préface
Vous tenez donc entre vos mains un exemplaire du livre Bien développer pour le
Web2.0. On pourrait croire que ce qui est important dans le titre, c’est «Web2.0».
Certes, c’est bien le cas. La participation grandissante des utilisateurs, qui est l’une
des deux particularités du Web2.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évelopper». Développer «comme il faut». Car le Web dit «1.0» ne s’est pas seule-
ment traduit par un Web où seuls quelques auteurs publiaient pour une foule gran-
dissante de lecteurs: le Web1.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 con-
sulter 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 mil-
lions de personnes se sont retrouvées confrontées à de tels problèmes du Web1.0?
C’est impossible de le dire... Mais ça n’était pas tant le Web qui était en cause que la
mauvaise 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 Web2.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 Web2.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 Web1.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
Web2.0» mais aussi d’apprendre à bien développer pour le Web.
Tristan Nitot
Président de Mozilla Europe
Table des matières
Avant-propos........................................................................... XXIII
À qui s’adresse ce livre? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXIII
Qu’allez-vous trouver dans ce livre? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXIV
Les standards du Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXV
De quelles technologies parle-t-on? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXV
Qui est à la barre, et où va-t-on? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXVI
À quoi servent les standards? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXIX
Qu’en pensent les concepteurs de navigateurs? . . . . . . . . . . . . . . . . . . . . . XXXI
Quelques mots sur les dernières versions . . . . . . . . . . . . . . . . . . . . . . . . .XXXIII
Qu’est-ce que le «Web2.0»? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXXIV
Vue d’ensemble, chapitre par chapitre . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXXVI
Première partie: donner vie aux pages . . . . . . . . . . . . . . . . . . . . . . . . . .XXXVI
Deuxième partie: Ajax ou l’art de chuchoter . . . . . . . . . . . . . . . . . . . . .XXXVII
Troisième partie: parler au reste du monde . . . . . . . . . . . . . . . . . . . . . .XXXVII
Des annexes pour le débutant comme pour l’expert . . . . . . . . . . . . . . . XXXVIII
Aller plus loin... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXXVIII
À propos des exemples de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXXIX
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XXXIX
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 clés: XHTML, CSS, JS, DOM et Ajax . . . . . . . . . . . .11
Faire la part des choses: Ajax, c’est quoi au juste? . . . . . . . . . . . . . . . . . . . . . . . .13
Plan d’actions pour deux objectifs: méthode et expertise . . . . . . . . . . . . . . . . . . .15