HTML5 Poalummer 2 LED Ur Le Webdesign
HTML5 Poalummer 2 LED Ur Le Webdesign
HTML5 Poalummer 2 LED Ur Le Webdesign
pour le Webdesign
Conception
Mise en uvre des CSS3
Intgration des mdias
Dveloppement JavaScript
Bill Sanders
Sanders prelims.indd 3
07/09/2012 15:43:28
Sanders prelims.indd 4
07/09/2012 15:43:28
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
propos de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
1.1
11
1.1.1
13
1.1.2
16
1.1.3
20
21
1.2
1.2.1
Mozilla FireFox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
1.2.2
Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
1.2.3
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
1.2.4
Apple Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
1.2.5
27
1.2.6
27
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
1.3
IV
31
2.1
32
2.1.1
32
2.1.2
35
35
2.2
2.2.1
36
2.2.2
36
2.2.3
38
2.2.4
40
2.3
Balises imbriques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
2.4
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
47
3.1
47
Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.1
49
3.1.2
Rchir la structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
3.2
53
3.3
56
3.3.1
56
3.3.2
64
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
69
4.1
69
3.4
Couleur RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1.1
70
4.1.2
71
4.1.3
74
4.1.4
75
4.2
78
4.3
80
4.3.1
81
4.3.2
81
82
4.4
4.5
84
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
5.1
89
5.1.1
90
5.1.2
91
5.1.3
93
5.2
95
5.3
98
5.3.1
99
5.3.2
103
5.3.3
Figures et lgendes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
105
107
5.4.1
107
5.4.2
Rfrence absolue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
108
5.4.3
Rfrence relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
108
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
111
113
6.1
113
6.2
116
117
118
6.3.1
118
6.3.2
120
Tableaux complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
123
6.4.1
123
6.4.2
125
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
128
5.4
5.5
6.2.1
6.3
6.4
6.5
VI
131
7.1
131
7.1.1
132
7.1.2
Icnes de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
135
7.1.3
Prchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
135
7.1.4
137
Liens de pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137
7.2
7.2.1
137
7.2.2
Ancres de page et ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
141
7.2.3
Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
144
145
7.3
7.3.1
146
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
148
151
8.1
151
7.4
8.1.1
152
8.1.2
Navigation globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
153
8.1.3
157
8.2
160
8.3
Maintenir la cohrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
162
8.3.1
163
8.3.2
164
8.3.3
165
8.3.4
168
169
8.4
8.4.1
170
8.4.2
170
8.4.3
173
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
174
8.5
VII
177
9.1
177
9.1.1
178
9.1.2
180
182
184
191
9.3.1
191
9.3.2
193
9.3.3
Application pour les chiers SVG dynamiques partir de chiers CS5 Adobe
Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
196
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
199
Chapitre 10 Son . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
201
201
10.1.1 Autoplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
202
10.1.2 Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
202
10.1.3 Preload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
203
10.1.4 Boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
205
205
206
206
207
208
208
210
211
212
215
Chapitre 11 Vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
217
218
9.2
9.2.1
9.3
9.4
VIII
221
222
222
225
11.3.1 Webcams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
225
226
226
227
228
11.4.1 Src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
228
11.4.2 Poster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
229
11.4.3 Preload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
230
11.4.4 Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
230
11.4.5 Autoplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
231
11.4.6 Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
231
232
233
237
237
238
12.1.2 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
239
240
243
244
246
248
12.3.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
248
12.3.2 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
252
12.3.3 Objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
253
256
IX
259
260
262
269
274
276
13.2.2 Courbes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
280
286
289
289
291
296
298
299
303
307
309
311
15.1 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
311
312
313
316
317
318
321
325
326
327
328
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
329
Introduction
En 1992, je suis parti la dcouverte dInternet (on ne parlait pas encore de surf
ce moment-l) avec un programme qui utilisait le protocole Gopher. Je me trouvais
El Paso, au Texas, et jtais capable de consulter les horaires de chemin de fer entre
Londres et Cambridge en Angleterre. cette poque, cela tenait du miracle et ctait
incroyable.
Je ne pensais pas que lon ferait mieux que Gopher sur Internet, et peu de temps
aprs cela est apparu le navigateur Mosaic et le World Wide Web. Netscape Navigator
a rapidement supplant Mosaic et jai dcouvert HTML. Jtais capable de visualiser
du texte et des images et je pouvais en plus passer dune page Web une autre. En peu
de temps, je me suis dbrouill pour crer mes propres pages Web laide dun diteur
de texte et du nouveau langage de balisage, HTML. Des types du service informatique
me crrent un serveur et je me suis lanc dans laventure.
Pendant un moment, ctait comme sil sortait peu prs tous les ans une nouvelle
version de HTML. CSS et JavaScript rent leur apparition et de plus en plus de
navigateurs devinrent disponibles. Les progrs taient continus, mais aprs HTML4
(qui incluait XHTML), les choses ont sembl stagner. Ces heures sombres de HTML
ont dur de 2000 jusqu 2008. Puis le W3C (World Wide Web Consortium) publia un
document de travail sur HTML5 en 2008. Pourtant aprs la publication de la norme
HTML5 sous une forme provisoire, les choses volurent trs lentement jusqu ce que
je mette la main sur un navigateur HTML5. Lquipe de dveloppement des standards
Introduction
des pages afches dans des navigateurs mobiles comme Mini Opera et Safari, ainsi
que dautres navigateurs mobiles dont vous ne souponnez mme pas lexistence.
propos de lauteur
Remerciements
Jai pris conscience de lintrt immdiat de HTML5 grce Michael Wilson, Zach
Dunn et Nick Greeneld qui ont attir mon attention sur cette technologie. Ils mont
aussi prsent lquipe de Smashing Magazine et mont initi quelques tendances
mergentes. Chris Webb de chez Wiley ma aid dnir les orientations du livre et,
avec Margot Hutchinson de chez Waterside Productions, il ma permis de naliser cet
ouvrage. Ellie Scott de chez Wiley ma assist dans la prise en compte des nombreux
dtails qui aboutissent la cration dun livre. Elizabeth Kuball, qui est une correctrice
talentueuse, a clari et allg ma prose, alors que Harvey Chute, en tant que relecteur
technique, sest assur que tout le code fonctionnait correctement et ma propos
des suggestions damlioration. Pour nir, je souhaite remercier mes collgues de
lUniversit de dveloppement et de conception Web multimdia dHartford, John
Gray et Brian Dorn, qui mont aid quand jen avais besoin, notamment ce jour
critique o un point-virgule manquant avait fait des ravages dans un programme.
PREMIRE PARTIE
Le langage du Web
1
Introduction HTML5
Objectif
12
Si vous tes familier des versions prcdentes de HTML et XHTML, vous serez
capable dadapter vos connaissances HTML5. Et si vous tes totalement novice en
matire de HTML, vous trouverez HTML5 assez simple. Au fond, tout ce que vous
avez faire, cest de placer vos contenus entre une balise douverture et une balise de
fermeture, que lon appelle un conteneur, et qui stylera votre texte ou afchera vos
images et vos mdias sur la page Web. La gure 1.1 illustre le concept de conteneur :
dit linterprteur de votre navigateur de crer un texte crit en gros qui ressemble
ceci :
13
Description
Composition indpendante et autosuffisante au sein dun document
<aside>
<audio>
<canvas>
<command>
<datalist>
Gnre une liste quand il est utilis avec llment <input> et son nouvel
attribut de liste
<details>
Dunod Toute reproduction non autorise est un dlit.
<article>
<embed>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<keygen>
14
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<video>
<wbr>
Certains des nouveaux lments, comme <video> et <audio> ajoutent des contenus
multimdias au HTML et reprsentent une avance importante de HTML. Dautres,
comme <ruby>, sont assez spcialiss et moins que vous nayez besoin de certains
caractres asiatiques, vous nutiliserez probablement pas cet lment.
Un grand nombre de ces nouvelles balises ont pour caractristique de travailler en
conjonction avec CSS3 ou JavaScript. Cependant, la plupart des nouveaux lments
fonctionnent toujours de manire autonome. Quand on ajoute un style ou certaines
fonctionnalits intressantes, il se peut que lon doive utiliser des rudiments de CSS3
15
Quand on ouvre le chier dans le navigateur Opera, on obtient une liste droulante
comme celle qui est illustre la gure 1.2.
16
Description
<!--...-->
Commentaire
<!DOCTYPE>
<a>
<abbr>
Abrviation
<address>
<area>
<b>
Texte gras
<base>
<bdo>
<blockquote>
Bloc de texte
<body>
<br>
Saut de ligne
<button>
Bouton cliquable
<caption>
Lgende de tableau
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<div>
17
<dt>
<em>
Texte en emphase
<fieldset>
<form>
<h1> to <h6>
Titre de niveau 1 6
<head>
<hr>
<html>
<i>
Texte en italique
<iframe>
<img>
Conteneur image
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<object>
<ol>
Liste numrote
<optgroup>
<option>
<p>
Bloc de paragraphe
<param>
Paramtres de plug-in
<pre>
18
<samp>
<script>
<select>
Liste slectionnable
<small>
<span>
<strong>
<style>
<sub>
Texte en indice
<sup>
Texte en exposant
<table>
Dfinition de tableau
<tbody>
<td>
Cellule de tableau
<textarea>
<tfoot>
<th>
<thead>
<title>
Titre du document
<tr>
<ul>
<var>
19
tableau suivant fournit un nouvel exemple danciens lments. Saisissez ce texte dans
un diteur et enregistrez-le sous le nom NouveauAncienTableau.html, et ouvrez-le dans
le navigateur Opera.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tableau</title>
</head>
<body>
<table>
<caption>
=Types dlments=
</caption>
<thead>
<tr>
<th> Type
<th> Texte
<th> Image
<tbody>
<tr>
<th> Interface
<td> saisie de texte
<td> bouton
<tr>
<th> Liens
<td> soulign
<td> icone
</table>
</body>
</html>
En gnral, on nutilise pas les tableaux pour mettre en forme du texte. Au lieu
de cela, les tableaux sont utiliss pour formater des donnes, comme celles dune base
de donnes ou des donnes cres dynamiquement par un autre programme tel que
JavaScript. En HTML5, cependant, les tableaux utiliss conjointement avec CSS3
offrent de meilleures possibilits de mise en forme quavec les versions prcdentes de
HTML et CSS.
20
Supprime ou remplace
<acronym>
<applet>
<basefont>
<bgsound>
<big>
<blink>
Supprime en HTML5
<center>
<dir>
<font>
Supprime en HTML5
<frame>
Supprime en HTML5
<frameset>
Supprime en HTML5
<isindex>
<marquee>
Supprime en HTML5
<multicol>
Supprime en HTML5
<nobr>
Supprime en HTML5
<noframes>
Supprime en HTML5
<noscript>
<s>
<spacer>
Supprime en HTML5
21
<tt>
<u>
<center> est lune des balises les plus courantes qui ait t abandonne, mais il est
facile de centrer du texte avec un peu de code CSS, comme lillustre lexemple suivant.
Saisissez ce texte dans un diteur et enregistrez-le sous le nom CentrezMoi.html, puis
ouvrez-le dans un navigateur Web.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 {
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Centrage avec CSS</title>
</head>
<body>
<h1>Les titres peuvent tre centrs</h1>
</body>
</html>
22
navigateur jusqu ce quil en apparaisse un autre encore plus performant que celui
qui est employ par la moyenne des utilisateurs du Web. Si vous voulez que les gens
qui visitent votre site aient la meilleure exprience possible, essayez de dterminer
le navigateur quils utilisent majoritairement. Il est encore prfrable quand on
dveloppe des logiciels pour soi-mme ou un client de tester ses pages Web sur la
totalit des principaux navigateurs et au moins sur les deux plateformes principales,
Macintosh et Windows. Il existe aussi des navigateurs sous Linux, mais trs peu de
personnes utilisent leur systme Linux pour naviguer sur le Web.
Si lon examine les principaux navigateurs qui prennent en charge HTML5,
la plupart peuvent tre utiliss sous Windows ou Macintosh, mais il arrive quun
navigateur ncessite un systme dexploitation rcent. Dans ces conditions, si vous
avez un systme dexploitation ancien, assurez-vous que les prrequis du navigateur
sont compatibles avec votre systme dexploitation.
Il y a plusieurs annes, Microsoft a arrt le dveloppement dInternet Explorer (IE)
pour Macintosh, alors quApple a dvelopp une version Windows de son navigateur
Safari. Trois diteurs de logiciels, Google, Mozilla et Opera, ne dveloppent pas de
systmes dexploitation pour ordinateur, mais crent en revanche des navigateurs.
Dans cette section, je vais prsenter Firefox, Chrome, Opera, Safari et IE9.
Gardez lesprit que les fonctionnalits des navigateurs voluent avec le temps.
Ce que je dcris ici reprsente donc lactualit au moment o jai crit ces lignes, mais
cela a pu changer quand vous lirez ce livre.
23
24
Figure 1.5 Google Chrome affichant la mme page HTML5 que celle illustre la figure 1-4.
de page Web dans Firefox sur un Macintosh avec un ordinateur sous Windows 7 et
excutant Google Chrome. La gure 1.6 illustre laspect de la comparaison cte cte.
La diffrence est due en partie la manire dont Windows et Mac OS afchent le
texte et linterface utilisateur. Browserlab propose un autre mode dafchage appel
Pelure doignon qui superpose les deux captures dcran an de mieux voir o le texte
et linterface utilisateur apparaissent. La gure 1.7 illustre cette diffrence.
Plus la pelure doignon apparat oue, plus grandes sont les diffrences dafchage
de la page Web. la gure 1.7, vous pouvez constater que lafchage est trs ou,
ce qui signie que des diffrences importantes existent entre les navigateurs et les
systmes dexploitation.
1.2.3 Opera
Quand jai examin le navigateur Opera lpoque o je commenais tester diffrents
navigateurs, il semblait avoir les meilleures fonctionnalits HTML5. De plus, Opera
a un navigateur spcial, Opera Mini 5, que vous pouvez tlcharger gratuitement sur
votre terminal mobile. HTML5 fonctionne bien sur les terminaux mobiles, comme
25
vous pouvez le constater la gure 1.8, qui afche lexemple de page Web sur un
iPhone excutant le navigateur mobile dOpera.
Des versions compltes du navigateur Opera sont galement disponibles sous
Windows, Macintosh et Linux. Quand on cre des pages Web, on doit les planier pour
diffrentes tailles de terminaux. Comme vous pouvez le voir, lexemple dapplication
26
que nous avons utilis fonctionne aussi bien sur un terminal mobile que sur un cran
dordinateur.
Tout comme il y a peu de diffrences entre lapparence des pages Web visualises
sur un ordinateur de bureau ou un portable, vous ne devriez pas voir beaucoup de
diffrences entre les afchages des divers navigateurs pour terminaux mobiles. Cest
27
une excellente chose ! Les dveloppeurs Web perdent beaucoup de temps tenter de
sassurer que leurs pages safchent de manire identique sur les diffrents navigateurs
et les diffrentes plateformes. Avec une implmentation commune de HTML5, cela
ne devrait plus tre un problme. Des fonctionnalits, comme la possibilit douvrir
des onglets, ou dautres caractristiques qui facilitent la navigation sur le Web, sont
intressantes pour autant que limplmentation de HTML5 par le navigateur soit
ralise selon les spcications dnies par le World Wide Web Consortium (W3C).
28
de 1024 x 600. Lafchage dcrans multiples vous aide concevoir votre page et
loptimiser en fonction de vos diffrents utilisateurs. Trouver le meilleur compromis
est un art, mais la tche sera moins pnible si vous connaissez autant que possible
votre public et le matriel quil utilise pour visualiser les pages.
29
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<style type="text/css">
body {
background-color:blanchedAlmond;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
}
h1, h2 {
font-family:"Arial Black", Gadget, sans-serif;
color:midnightBlue;
}
h1 {
text-align:center;
}
h3 {
background-color:goldenrod;
color:ghostwhite;
font-size:11px;
font-family:"Arial";
}
</style>
<title>La roue</title>
</head>
<body>
<h1> ==Votre nom== : Le pro du dveloppement Web HTML5</h1>
<h2> ==Nom de votre socit== fournit des services Web complets</h2>
<ul>
<li>==Service 1==</li>
<li>==Service 2== </li>
<li>==Service 3== </li>
<li>==Service 4== </li>
<li>==Service 5== </li>
</ul>
<h3> Tous les services sont garantis. Notre service contentieux est
joignable : ==URL o la plainte doit tre envoye== . </h3>
</body>
</html>
Testez cette page dans un navigateur et vriez quelle safche comme prvu.
Vous pouvez aussi regarder lafchage sur diffrents navigateurs (noubliez pas que les
navigateurs sont gratuits) et sur votre terminal mobile. Si vous voulez faire plus de
modications, rendez-vous la page suivante :
www.w3.org/TR/css3-color/#svg-color
Vous y trouverez une liste de noms de couleurs que vous pourrez utiliser avec
HTML5. Essayez de changer dans le code le nom des couleurs en choisissant des
couleurs qui vous plaisent.
2
Balises HTML5
Objectif
Les programmeurs classient les langages informatiques en langages de bas niveau
qui sont trs proches du langage binaire de lordinateur et en langages de haut
niveau qui sont proches du langage naturel. La version 5 du HyperText Markup
Language (HTML5) est un langage de trs haut niveau. Cependant, la premire
version de HTML avait trs peu de mots pour dcrire ce que les dveloppeurs et
les concepteurs dsiraient. Au fur et mesure de la croissance du Web, les exigences
sur HTML ont progress. Grce aux CSS (Cascading Style Sheet) et JavaScript,
les concepteurs ont pu amliorer la qualit des pages Web, mais il manquait encore
beaucoup de choses.
La cration des pages Web a t facilite par la sortie de plug-ins qui taient capables
dexcuter des langages comme Java et des applications ralises en Flash. En fait, la
plupart des navigateurs embarquaient la dernire version du plug-in pour Flash de
telle sorte que les utilisateurs pouvaient visualiser les pages cres avec Flash et Flash
Builder (Flex).
Les dveloppeurs Web en voulaient cependant toujours plus et souhaitaient excuter
HTML et CSS en mode natif partir du navigateur. Les diteurs de navigateurs
ajoutaient tranquillement JavaScript des fonctionnalits qui taient ncessaires
pour travailler avec les nouveaux lments de HTML5. Avec les nouvelles versions
de chaque navigateur, non seulement HTML5 tait implment totalement, mais
ctait aussi le cas de JavaScript et CSS3. Ce chapitre explique comment les diffrents
lments de HTML5 fonctionnent et comment ils se combinent avec CSS3 et
JavaScript.
32
33
Parmi ces chiers, les plus importants sont les chiers graphiques car les outils
que vous utilisez pour vos images peuvent les enregistrer automatiquement sous des
formats diffrents que ceux employs pour le Web. Par exemple, Adobe Photoshop
enregistre automatiquement les chiers au format .psd, et Adobe Illustrator au format
.ai. Aucun de ces deux formats de chier graphique ne peut tre utilis avec ces pages
Web. Cependant, la plupart des outils de cration graphique peuvent enregistrer les
chiers dans les formats .jpg, .gif, ou .png si vous utilisez la commande Enregistrer
sous la place de la commande Enregistrer. Quand on utilise la commande Enregistrer
sous, on peut slectionner un format particulier parmi une liste de formats disponibles.
Rglage des paramtres dextension de fichier par dfaut sous Windows
Par dfaut, Windows 7 (et les versions prcdentes) masque les extensions de fichier.
Cela procure une apparence plus propre des noms de fichiers, mais si vous devez
choisir entre un fichier graphique ayant une extension .psd et un fichier ayant une
extension .png, vous devez pouvoir visualiser son extension. Voici comment procder :
Ouvrez le panneau de configuration.
Choisissez Apparence et personnalisation Options des dossiers Cliquez
Figure 2.1 Dsactivation sous Windows de loption Masquer les extensions des fichiers
dont le type est connu.
34
Vous serez prsent capable de voir toutes les extensions de fichier. Ainsi, quand
vous voulez charger un fichier graphique, vous saurez sil sagit dun fichier .png, .jpg
ou .gif en regardant simplement le nom du fichier affich lcran.
Rglages des paramtres de TextEdit sur votre Mac
Si TextEdit sur votre Mac a ses paramtres par dfaut, vous risquez davoir des
problmes quand vous enregistrerez des fichiers au format HTML. Cela est d au
fait que le type de fichier par dfaut dans lequel TextEdit enregistre ses fichiers est
le format Rich Text Format (.rtf) et non pas le format texte (.txt). Au format .rtf,
votre texte est enregistr avec un autre code qui nest pas compatible avec les pages
Web. Voici ce que vous devez faire pour rgler ce problme :
Ouvrez TextEdit.
Dans le menu TextEdit, au sommet de lcran, choisissez Prfrences. La bote
Figure 2.2 Modification de loption Format RTF en Format Texte dans TextEdit.
prsent, quand vous crez une page HTML5 dans TextEdit, votre fichier est enregistr
par dfaut au format .txt et vous pouvez le modifier en format .html en utilisant la
commande Enregistrer sous.
35
Avec JavaScript, le chier externe .js est appel partir du conteneur <script>
plutt qu lintrieur dune balise <link>. Le code suivant charge un chier JavaScript
nomm faitMiracle.js :
Cet ouvrage se concentre sur HTML5, mais vous aurez absolument besoin de CSS3
pour mettre en forme vos pages si bien que nous ltudierons galement. La plupart
du temps, vous verrez du code CSS incorpor dans du code HTML. Au chapitre 3,
vous en apprendrez plus sur lutilisation de CSS3 avec HTML5. Le chapitre 12 aborde
lutilisation de JavaScript avec les balises HTML5 et vous apprendrez exactement
crer et utiliser JavaScript avec HTML5.
36
Ce titre apparat dans les onglets et la fentre de la page. Si vous nen mettez
pas, vous obtiendrez un titre vide ou bien un titre par dfaut. La gure 2-1 illustre
lapparition du titre dans diffrents navigateurs.
37
Comme vous pouvez le voir, le titre Seriously Sweet Page apparat en diffrents
endroits sur les quatre principaux navigateurs. Sur certains, il apparat au sommet
de la fentre et sur longlet, sur dautres uniquement au sommet de la fentre, ou
bien encore uniquement sur longlet. Cela aide lutilisateur trouver sa page quand
plusieurs pages sont ouvertes simultanment (ou bien tout simplement rappeler
lutilisateur quelle page il consulte). On trouve beaucoup dautres contenus dans le
conteneur <head>, comme du code CSS et JavaScript, mais pour le moment, retenez
seulement quil faut inclure un titre.
Figure 2.3 Le titre apparat sur les pages Web et les onglets.
<!DOCTYPE HTML>
<html>
<head>
<title>Le titre se place ici</title>
</head>
<body>
38
Au fur et mesure que vous progresserez dans la lecture de cet ouvrage, vous
rencontrerez de plus en plus dlments de structure inclure dans vos pages. Les
quelques lignes prcdentes vous permettent cependant de commencer crer vos
pages Web.
Vous devez tre trs prudent dans le choix de ce que vous placez entre guillemets.
Par exemple, value="A lattaque" est autoris car attaque est un guillemet simple
(apostrophe). Cependant la valeur ""A lattaque," dit-il" ne fonctionnerait pas
car il y a deux paires de guillemets doubles.
39
Attribut language
Lattribut language (lang) nest pas utilis moins de crer des pages dans une autre
langue que langlais. La liste suivante fournit les valeurs dattribut dautres langues
dans lesquelles vous pouvez crire des pages Web :
Allemand : "de"
Arabe : "ar"
Chinois (mandarin) : "cmn"
Espagnol : "es"
Franais : "fr"
Hbreu : "he"
Hindi : "hi"
Japonais : "ja"
Portugais : "pt"
Russe : "ru"
Un problme classique se produit quand vous avez une page qui contient une
rfrence entre guillemets sur deux parties diffrentes de la page. Au sein dun
paragraphe, on peut placer autant de guillemets que lon souhaite et ils safcheront
sur la page. Cependant, il nest possible dassigner quune seule paire de guillemets
la valeur dun attribut. Examinez le script suivant :
<!DOCTYPE HTML>
<html>
<head>
<title>Soyez attentif avec les guillemets</title>
</head>
<body>
<p>We read Emily Dickinsons "Wild nights! Wild nights!"<p/>
<input type="text" size="50" value="Emily Dickinsons Wild nights! Wild
nights!">
</body>
</html>
Dans le conteneur <p>, les guillemets identient le nom dun pome. Si le mme
texte sert de valeur un attribut, vous ne pouvez utiliser que des apostrophes
(guillemets simples) pour dlimiter le nom du pome. La gure 2.3 illustre lafchage
de la page dans un navigateur.
Quand vous assignez des valeurs des attributs, noubliez pas demployer des
guillemets pour la totalit de la valeur et dutiliser des apostrophes pour mettre en relief
des sections lintrieur de la valeur. Dune manire gnrale, vous vous faciliterez la
tche si vous vitez dutiliser des apostrophes quand vous assignez des valeurs des
attributs.
40
Figure 2.5 Utilisation des guillemets dans les pages et les attributs HTML5.
41
Comme vous pouvez le voir quand vous chargez la page, aucun des commentaires
nest visible dans le navigateur, mais ds que vous retournez dans votre diteur de texte,
ils sont bien prsents. Vous pouvez mettre nimporte quel texte dans un conteneur de
commentaire et il napparatra pas.
On utilise souvent la balise de commentaire pour supprimer temporairement des
balises que lon utilisera plus tard. Ainsi, au lieu de supprimer les balises, il vous suft
de les encadrer par des balises de commentaire et de tester votre page pour voir si vous
la prfrez sans les balises en question. Si vous pensez que le rsultat est meilleur dans
sa forme originale, il ny a qu supprimer les balises de commentaire. Si la page parat
mieux sans les balises mises en commentaire, vous pouvez supprimer dnitivement
les balises devenues inutiles.
Supposons, par exemple que vous vous posiez la question de savoir si une page que
vous concevez pour un client est plus allchante avec un sous-titre et une note de bas
de page. Voici le code original code avec le sous-titre :
<!DOCTYPE HTML>
<html>
<head>
<title>Mise en commentaire</title>
</head>
<body>
<header>
<h1>Restaurant Chez Joe</h1>
<h2>*A survcu a toutes les inspections sanitaires depuis 2005</h2>
</header>
<section>
Joe cuisine les meilleurs repas du quartier ! La nourriture est dlicieuse et
bon march !
</section>
<footer>
<h6>*La table du bobo, dition 2010</h6>
</footer>
</body>
</html>
42
<title>Mise en commentaire</title>
</head>
<body>
<header>
<h1>Restaurant Chez Joe</h1>
<!-- <h2>*A survcu a toutes les inspections sanitaires depuis 2005</h2> -->
</header>
<section>
Joe cuisine les meilleurs repas du quartier ! La nourriture est dlicieuse et
bon march !
</section>
<footer>
<!-- <h6>*La table du bobo, dition 2010</h6> -->
</footer>
</body>
</html>
Une fois que vous avez effectu les changements en mettant en commentaire les
balises non souhaites, vous pouvez apprcier le rsultat (voir la gure 2.5).
43
Ici, la balise <body> ferme le conteneur externe <html>. Le conteneur <h3> est
correct.
44
<html>
<body>Vraiment intressant
<h3>Noubliez pas de voter !</h3>
</html>
</body>
Ici, la balise <header> est ferme avant que la balise <nav> ne soit ferme :
<header>
<nav>
<a href="html5.org">HTML5</a> |
<a href="css3.org">CSS3</a>> |
<a href="php.net">PHP</a>
</header>
<footer>
<a href="html5.org">HTML5</a> |
<a href="css3.org">CSS3</a>> |
<a href="php.net">PHP</a>
</nav>
</footer>
|
|
Parfois, quand on teste une page HTML5, on a un rsultat imprvu, voire rien du
tout. En ce cas, la premire chose vrier est limbrication des balises.
Si vous vous interrogez sur le sens du code , il sagit dun espace inscable
(le point-virgule fait partie de la balise). Vous pouvez vous reprsenter simplement ce
45
caractre comme un espace qui encadre la barre verticale (|) utilise pour sparer les
liens. Dans votre navigateur, vous verrez :
HTML5 | CSS3 | PHP
Quand on place du code lintrieur de balises <nav>, on peut facilement lidentier
comme du code de navigation. Cependant, comme toutes les autres balises, vous devez
faire attention aux rgles dimbrication utilises en HTML5.
La page HTML suivante comporte des erreurs qui ont besoin dtre corriges. Elle
commence par plusieurs balises qui sont vides ou partiellement compltes. L o cela
est ncessaire, vous devez ajouter les bonnes balises ou complter le texte. Parfois,
vous devrez fermer un conteneur qui a t ouvert (<balise>) ou bien en ouvrir un qui
a t ferm (</balise>). Et assurez-vous que les balises sont correctement imbriques
(Indice : la premire balise nest pas une balise HTML, mais une balise spciale qui
commence par un point dexclamation !).
<!
>
<html lang= >
<head>
<!---Palette de couleurs
0B0B0D,29272A,A99A93,E27107,F8AC00 -->
<style type="text/css">
body {
background-color:#F8AC00;
color:#29272a;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
}
h1 {
color:#29272A;
font-family:"Arial Black", Gadget, sans-serif;
}
h2 {
text-indent:10px;
color:#0B0B0D;
background-color:#E27107;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
header {
text-align:center;
}
</style>
<title>==???===</title>
<
>
<body>
<header>
< >Mes prfrences</h1>
</header>
46
<section>
<h2>Ma musique prfre</h2>
==????==<br/>
==????==<br/>
==????==<br/>
< >Mes films prfrs</h2>
==????==<br/>
==????==<br/>
==????==<br/>
<h2>Mes ordinateurs prfrs</h2>
==????==<br/>
==????==<br/>
==????==<br/>
<h2>Mes missions prfres</h2>
==????==<br/>
==????==<br/>
==????== <br/>
<
>
<
>
<h5>Je ne suis pas responsable de mes gots. Cest prendre ou laisser. <
>
</footer>
</body>
</html>
Cet exercice devrait vous aider faire attention aux dtails dans lesquels, comme
chacun le sait, le diable se niche...
3
Balises de texte et un peu de
CSS3
Objectif
Une page Web est diffrente des pages que vous saisissez dans votre traitement
de texte. Les pages Web sont conues pour des crans dordinateurs, quil sagisse
dun ordinateur de bureau, dun portable ou mme dun terminal mobile. Une page
Web ne safche pas sur une feuille de papier au format A4, mais sur un dispositif
dafchage bien plus dynamique. La premire chose laquelle il faut donc penser est
laspect de la page sur un cran numrique.
Pour afcher du texte, il suft de le saisir sur la page dans le conteneur. Vous pouvez
le styler avec la balise <h> comme nous lavons vu dans les chapitres prcdents, mais
le texte de base a seulement besoin dtre prsent au sein dune balise <body>.
Le chargement et lafchage des images utilisent la balise <img> avec le format
suivant :
48
<img src=nomImage.png>
Vous pouvez uniquement utiliser les chiers .jpg, .png ou .gif avec llment img.
Lattribut src fait rfrence la source de limage. Llment img a dautres attributs,
mais le seul attribut indispensable pour afcher une image sur la page est src pour que
le chier puisse tre localis.
Dans cet ouvrage, le terme URL est souvent employ pour faire rfrence
lemplacement dun chier, quel que soit le type de chier impliqu. URL, qui est
lacronyme dUniform Resource Locator (localisateur de ressource uniforme), est un
protocole standard pour trouver et utiliser diffrents types de chiers.
Enn, un lien vers une autre page utilise le format suivant :
<a href=autrePage.html>Lien vers une page</a>
Vous devez toujours spcier lencodage des caractres. Bien que lutilisation de
la balise <meta> soit un peu contraignante, vous pouvez copier cette ligne et la coller
dans toutes vos pages Web. Si vous ne le faites pas, vous vous exposez des problmes
de scurit, ce qui nest bien entendu pas souhaitable.
Il est toujours possible de bricoler la hte une page Web, mais le rsultat
est souvent dcevant et les visiteurs de votre site risquent de ne jamais y revenir.
Examinons une page Web sans structure mais qui en contient cependant les lments
fondamentaux :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Principes de base</title>
</head>
<body>
Ceci est du texte. Il ny a pas besoin de balise pour crire du texte.
49
Comme vous pouvez le voir la gure 3.1, tout est en dsordre. Limage apparat
au milieu de la page, au-dessus du lien (texte soulign en bleu), ce qui nest gure
conforme aux usages.
Quand on cre une page Web, les liens doivent tre organiss selon un systme
de navigation qui est cens faciliter la consultation du site. Dans la page illustre la
gure 3.1, le lien qui est perturb par limage semble faire partie du texte plutt que
dun systme de navigation.
Une des conventions de base de la conception Web est de placer le logo dans le
coin suprieur gauche de la page. De plus, les pages Web placent les liens de manire
organise selon un systme cohrent de navigation. En ajoutant deux balises de plus,
vous pouvez amliorer lorganisation de vos pages :
<br> : Gnre un saut de ligne
<wbr> : Gnre un saut de ligne conditionnel
Un saut de ligne (<br>) force un retour la ligne du texte. Vous pouvez vous le
reprsenter comme un espace unique entre les lignes, ou si vous tes de la vieille cole,
comme un retour de chariot. HTML5 a ajout quelque chose de nouveau qui sappelle
opportunit de saut de ligne. Il arrive que lon ait de trs longs mots, notamment dans
les URL ou les adresses lectroniques. Llment wbr ne force pas de saut de ligne,
mais vous pouvez placer la balise <wbr> lendroit o vous souhaiteriez que le mot
soit coup au cas o il devrait ltre si la page est redimensionne. Cette prise en
compte est particulirement importante pour les terminaux mobiles car ils ont des
crans de petite taille. Par exemple, supposons que vous ayez une trs longue URL qui
est afche sous cette forme :
www.chezjoerestaurantgastronomiquepanoramique.com
50
Si le lien nest pas dcoup, et si la page est redimensionne, vous aurez un grand
trou dans le texte ou bien le mot sera dcoup un endroit qui nest pas souhaitable.
La balise <wbr> vous aide dcouper le texte l o vous le souhaitez. Examinez le
script suivant (SautsDeBase.html dans les chiers de ce chapitre), qui utilise les deux
balises de saut de ligne :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajout de sauts de ligne</title>
</head>
<body>
<img src="logo.png"><br>
Ceci est du texte. Il ny a pas besoin de balise pour crire du texte.<br>
<br>
Il dit, "Il y a parfois de trs longs mots dont on souhaite sassurer quils
sont coups au bon endroit. Par exemple, si vous avez une trs longue URL
comme
www.chez<wbr>joe<wbr>restaurant<wbr>gastronomique<wbr>panoramique<wbr>.com, et
que vous tes oblig de dcouper lURL, il est souhaitable que la coupure ne se
fasse pas nimporte comment."<br><br>
Il dit, "Il y a parfois de trs longs mots dont on souhaite sassurer quils
sont coups au bon endroit. Par exemple, si vous avez une trs longue URL
comme www.chezjoerestaurantgastronomiquepanoramique.com, et que vous tes
oblig de dcouper lURL, il est souhaitable que la coupure ne se fasse pas
nimporte comment."<br><br>
<a href="autrePage.html"> Cliquez ici pour une autre page </a>
</body>
</html>
En ajoutant les deux balises de saut de ligne, la page a un bien meilleur aspect. Le
paragraphe qui nutilise pas la balise <wbr> a un trou lemplacement o lURL longue
na pas t dcoupe. La gure 3.2 illustre laspect de la page.
Bien que cela ne soit toujours pas parfait, cest dj bien mieux que la page originale,
mme si deux nouveaux paragraphes ont t ajouts. Limage se situe dans le coin
suprieur gauche (comme cest le cas pour la plupart des logos), les paragraphes sont
spars par des sauts de ligne et dans le premier paragraphe qui emploie une URL
longue, les sauts seffectuent aux endroits spcis par la balise <wbr>.
51
En vous basant sur les balises que nous avons tudies jusqu prsent, serez-vous
capable de crer une page partir de votre croquis ? Le seul attribut qui manque est
celui qui permet dhabiller le texte autour de limage. Lattribut align de llment img
ralisera cela. Dans cet exemple, limage sera gauche et le texte sera droite, si bien
que la ligne suivante fera laffaire :
52
Vous avez peut-tre remarqu que lattribut alt a galement t inclus. Cet attribut
permet aux utilisateurs de savoir quoi sattendre si limage met du temps se charger.
Ainsi, avec quelques balises et lajout dun attribut, le prochain script cre
parfaitement une page qui correspond la structure du croquis ralis la gure 3.3.
Comme vous le constaterez dans le code suivant (Maquette2Web.html disponible
dans les chiers de ce chapitre), jai utilis un signe dise (#) la place dune vritable
URL dans les liens de navigation. Le signe dise joue le rle dun emplacement rserv
quand vous travaillez sur la structure ; il fonctionne exactement comme une vritable
URL sauf quil ne va nulle part et ne provoque pas de message derreur.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>De la maquette la page Web</title>
</head>
<body>
<img src="logo.png" alt="logo"><br>
<a href="#">Jouets</a> | <a href="#">Vtements</a> | <a
href="#">Sports</a> <br>
<br>
Le paradis des enfants<br>
<br>
<img src="kid.png" alt="kid" align="left"> Les enfants, cest une affaire
srieuse. Ils ont besoin de jouets qui soient la fois srs et ducatifs. Les
jouets doivent tre amusants tout en dveloppant la crativit des enfants. Il
ny a pas de raison de sacrifier la scurit pour privilgier lamusement. Les
enfants ont besoin de beaucoup dhabits car ils grandissent si rapidement. Et
ils ont besoin de pratiquer une activit physique pour combattre lobsit et
toutes les maladies qui y sont lies. <br>
<br>
<a href="#">Jouets</a> | <a href="#">Vtements</a> | <a
href="#">Sports</a>
</body>
</html>
Notez que nous navons utilis aucun des lments H voqus dans les deux
prcdents chapitres. Cela est d au fait que je les traite de manire dtaille dans
la prochaine section. La gure 3.4 illustre bien le fait que la page se rapproche
troitement du croquis de la gure 3.3.
prsent, la page Web illustre la gure 3.4 a plus de structure que nimporte
lequel des exemples prcdents. Les barres de navigation au sommet et en bas de la
page sont pratiques pour lutilisateur, mais elles mriteraient peut-tre dtre centres
sur la page. La barre de navigation suprieure devrait tre centre au sommet de la
page, juste ct du logo. Le texte qui est coinc contre limage pourrait tre un peu
dcal et, bien entendu, le titre devrait tre dans un style diffrent (taille et police de
caractres). Le site est galement assez ennuyeux, ce qui est paradoxal tant donn
53
quil est conu pour des enfants. Mais comme la structure est en constante progression,
vous pourrez rgler tous ces dtails au fur et mesure que vous apprendrez utiliser
dautres techniques pour amliorer le style.
54
55
Si lon regarde la page Web, on peut voir o les diffrents lments h attribuent
des tailles diffrentes chaque partie, mais on ne voit pas les indentations que
Wittgenstein a utilises dans son manuscrit original. La gure 3.6 illustre la page Web
sur un tlphone mobile (quoi que vous pensiez de Wittgenstein, son style fonctionne
merveille sur les crans des terminaux mobiles).
Figure 3.6 Mise en page dun plan laide de balises <h> sur iPhone.
56
<hgroup> dnit la balise <h..> de niveau le plus lev dans le conteneur hgroup en
la page HTML5.
57
Vous pouvez utiliser des feuilles de styles externes qui sont des chiers texte o
Une feuille de styles incorpore nest que lajout dune feuille de styles directement
dans le script HTML5. Dans la balise <head> de la page, ajoutez la feuille de styles
avec un conteneur <style>. Placez llment que vous voulez styler dans le conteneur
de style, puis ajoutez les valeurs la proprit styler. La gure 3.7 indique le format
gnral.
58
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
background-color:#fbf7e4;
font-family:Verdana, Geneva, sans-serif;
margin-left:20px;
color:#8e001c;
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2 {
background-color:#424242;
color:#d3ceaa;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3-Feuille de styles incorpore</title>
</head>
<body>
<h1>Ceci est un grand titre</h1>
<h2> Voici le deuxime titre</h2>
Le corps du texte est styl avec une marge gauche et une police particulire
qui est en couleur. Vous noterez que la couleur de fond du titre stend sur
toute la largeur de la page. Vous remarquerez aussi quun espace inscable (&
nbsp;) donne au deuxime titre, h2, une lgre indentation de telle sorte quil
reste " lintrieur" de la couleur de fond. On na pas ce problme avec le
titre h1 car il est centr.
</body>
</html>
59
Prenons par exemple une palette de couleurs avec un jeu de couleurs qui fait partie
de la charte graphique dun de vos clients, Mighty Smite Web Development (cela
a pour consquence que vous ne pouvez utiliser que le jeu de couleurs qui vous a
t fourni). Vous commencez avec les couleurs suivantes qui font partie de la charte
graphique de lentreprise :
#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205
La couleur de fond doit tre #F2CC6E. Vous navez pas savoir ce quest cette
couleur et vous devez vous contenter de savoir que lentreprise a dcid que ce serait
la couleur de fond, les concepteurs soccupant du reste.
On vous a de plus signi que lentreprise souhaitait une version qui safche la
fois sur un tlphone et sur un ordinateur de bureau. Cela signie que vous allez avoir
besoin de deux feuilles de styles diffrentes. Vous vous proccuperez plus tard de savoir
comment le navigateur sait que lutilisateur afche la page sur un ordinateur ou sur un
tlphone.
Seule la balise suivante est ncessaire :
<link rel=stylesheet type=text/css href=mightySmiteSmall.css />
60
Cette balise va dans le conteneur <head> o la balise <style> allait avec le code
CSS3. Le code CSS3 se trouve prsent dans un chier spar. Vous noterez que
la balise <link> contient un attribut href avec la valeur mightySmiteSmall.css. Il
sagit du nom du chier CSS3 (que vous trouverez dans les chiers de ce chapitre). La
mention Small indique quelle est conue pour les terminaux mobiles. Il faudra crer
un autre chier CSS3, mightySmiteLarge.css, pour les ordinateurs qui ne sont pas des
terminaux mobiles.
Pour crer un chier CSS3, il suft de saisir le code CSS3 dans un diteur de texte
ou dans une application de dveloppement Web et de supprimer les balises <style>.
Le code suivant illustre lexemple que nous allons utiliser :
@charset UTF-8;
/* CSS Document */
/*3C371E,8C5F26,BCA55F,F2CC6E,F26205 */
body
{
background-color:#F2CC6E;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
color:#8C5F26;
font-size:11px;
max-width:480px;
}
h1
{
color:#BCA55F;
background-color:#3C371E;
font-family:Arial Black, Gadget, sans-serif;
text-align:center;
}
h2
{
color:#F26205;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif
}
h3
{
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}
La premire ligne indique au navigateur quil sagit dun jeu de caractres UTF-8 et
les deux lignes suivantes sont des lignes de commentaires. Elles diffrent des lignes de
commentaires en HTML5, mais elles fonctionnent de manire identique. La deuxime
ligne de commentaire est un moyen pratique de mmoriser la palette de couleurs et
peut gagner du temps lors de la dnition de la feuille de styles.
Pour tester cette version mobile du code CSS3, nous utilisons le chier HTML5
ExternalSmall.html qui est disponible avec les chiers de ce chapitre :
<!DOCTYPE HTML>
<html>
<head>
61
Tous les styles du chier CSS3 sont utiliss an de tester leur apparence et le corps
du texte commenant par Lorem ipsum est un texte de remplissage qui est utilis
pour avoir une ide de laspect des blocs de texte (a doit tre un bon texte puisquon
lutilise depuis le seizime sicle).
Dans la dnition du chier CSS3, le seul paramtre qui cible spciquement les
terminaux mobiles est lattribut width de llment body. Il est paramtr 480 px
car cest la largeur de lcran de liPhone qui est utilis pour les tests. Cependant,
en fonction de la manire dont les utilisateurs tiennent en main leur tlphone, ils
peuvent obtenir des rsultats diffrents. Les gures 3.9 et 3.10 illustrent lapparence
de la page quand le tlphone est tenu dans des positions diffrentes.
62
De nombreux terminaux mobiles autorisent lafchage des pages Web verticalement ou horizontalement. Dans ces conditions, quand jlabore un chier CSS3
pour un priphrique mobile, jai tendance dnir la largeur avec la valeur de la
largeur de lcran tenu horizontalement. Vous vous apercevrez cependant rapidement
que les diffrents navigateurs fonctionnement diffremment. Ainsi le navigateur
Safari sur liPhone afche la page dans une page minuscule et illisible qui doit tre
redimensionne, le navigateur Opera Mini (voir les gures 3.9 et 3.10) sur le mme
iPhone utilisant la mme taille dcran afche la page immdiatement dans une taille
optimale, que le tlphone soit tenu horizontalement ou verticalement.
63
Style en ligne
La gure 3.11 illustre le rsultat du test de la page Web dans un navigateur. Gardez
lesprit quil ny a pas dajout de style la deuxime ligne.
Lutilisation dun style CSS3 en ligne peut se rvler trs prcieuse quand votre
chier externe CSS3 ne possde pas le style adquat pour raliser quelque chose
dindispensable sur une page Web. En gnral, il est prfrable dutiliser les styles en
ligne la fois avec parcimonie et discernement. Cela est particulirement vrai quand
on collabore avec dautres dveloppeurs et concepteurs qui travaillent sur une feuille
de styles commune.
64
Classes CSS3
On cre des classes de styles presque de la mme manire que les styles dlments.
Les dnitions avec le point (.) utilises pour crer une classe en CSS3 sont des
tiquettes que lon dnit au lieu dutiliser des noms dlments. La gure 3.12 montre
comment crer une dnition de classe CSS3.
65
Pour voir comment on peut utiliser un texte en surbrillance, le plus pratique est
demployer llment en ligne span. La balise <span> peut tre ajoute au milieu dun
lment de bloc et ne modie que cette partie du contenu du conteneur span sans
changer le reste du bloc. Pour ajouter une classe un lment, on utilise le format
suivant :
<element class=myClass>
Vous noterez que le nom de la classe ninclut pas le point de la dnition. Le point
nest utilis que dans la dnition du style pour faire comprendre lanalyseur que le
mot est une classe et non pas un lment. Le programme suivant (SpanClass.html
disponible dans les chiers du chapitre) fournit un exemple de la manire dont on
peut utiliser la classe avec la balise <span>.
<!DOCTYPE HTML>
<html>
<head>
<style type=text/css>
body {
background-color:#F93;
}
.highlight {
background-color:yellow;
}
div {
font-family:Comic Sans MS, cursive;
font-size:18px;
}
h1 {
font-family:Arial Black, Gadget, sans-serif;
color:#930;
text-align:center;
font-size:20px;
}
</style>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Halloween Highlight</title>
</head>
<body>
<h1>Halloween Party!</h1>
<div>You are invited to a Halloween Party on <span class=highlight>Saturday,
October 29</span>. Costumes are <span class=highlight><i>de
rigueur</i></span>.</div>
</body>
</html>
66
Figure 3.13 Style dfini dans une classe dun conteneur <span> sur un priphrique mobile
(en haut) et sur un ordinateur (en bas).
ne safche pas et elle nest pas en italique (dans Safari, la police est afche en
italique, mais ce nest pas celle qui est dnie).
ID CSS3
Un ID CSS3 est dni presque exactement de la mme manire quune classe, sauf
quil utilise un signe dise (#) au lieu dun point (.) dans la dnition. De plus, en
assignant un ID, on utilise ID au lieu de class pour spcier quel ID utiliser avec un
lment. On peut mme utiliser des ID et des classes avec le mme lment. La balise
suivante est ainsi parfaitement correcte :
<p ID=ceci class=cela>
Tous les deux peuvent slectionner des styles et lID fournit un ID unique pour le
paragraphe.
67
LID a quelques diffrences majeures par rapport une classe. Une classe et un
ID peuvent tre utiliss comme slecteurs de feuille de styles, mais un ID a dautres
limitations et fonctionnalits :
Un ID ne peut tre utilis quune seule fois dans un document.
Un ID peut servir dancre (voir le chapitre 7).
Un ID peut agir comme rfrence de script, ce qui est important pour JavaScript.
Un ID peut tre utilis comme nom dans un lment dobjet dclar.
Un ID peut tre utilis par des agents pour traiter des informations lors de la
Tant que vous nutiliserez pas JavaScript ou dautres langages, vous nexploiterez
que les deux premires fonctionnalits de cette liste. Quoi quil en soit, si vous prenez
garde ces diffrences, vous minimiserez les problmes sur vos pages Web et les autres
vous considreront comme un pro. Lexemple suivant (IDCSS3.html disponible dans
les chiers de ce chapitre) illustre lutilisation dun ID avec CSS3 :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#littleHead {
font-family:Verdana, Geneva, sans-serif;
background-color:#9FC;
font-size:16px;
}
#javascript {
/* rouge */
color:#cc0000;
}
#php {
/* bleu */
color:#009;
}
#actionscript {
/* vert */
color:#063;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Utilisation des ID</title>
</head>
<body>
<div id="littleHead">Tout ce que vous avez toujours voulu<br>
savoir sur les variables :</div>
<p id="javascript"> Les variables JavaScript nont pas tre assignes un
type de donnes.</p>
<p id="php"> Les variables PHP peuvent avoir un type de donnes grce au
typage implicite.</p>
<p id="actionscript"> Les variables ActionScript doivent tre assignes un
type de donnes.</p>
</body>
</html>
68
lexamen de ce code, on peut se demander ce que signient les marques slashastrisque (/* ... */). Il sagit en fait de commentaires pour CSS3. lintrieur dun
conteneur <style> et dans une feuille de styles externe, ils fonctionnent exactement
comme les marques de commentaires <!-- --> en HTML5. La gure 3.14 montre le
rsultat du programme.
Si vous avez une longue page Web avec des discussions sur JavaScript, PHP et
ActionScript, lutilisateur va devoir faire dler la fentre pour trouver le sujet qui
lintresse. En utilisant les ID, on peut crire lURL pour quelle intgre le paragraphe
exact que lutilisateur tente de localiser. Par exemple, lURL suivante va aller
directement sur le paragraphe qui traite de PHP : www.smashingHTML5.com/myIDs#php.
La mention #php qui a t ajoute appelle le paragraphe spcique ayant lID php.
4
Valeurs des couleurs
Objectif
Jusqu prsent, nous avons vu plusieurs exemples dutilisation des codes de couleurs,
mais moins que vous ne compreniez ce que vous lisez, vous avez d avoir
limpression davoir affaire un langage cod. Dans certains exemples, on a utilis
des noms de couleurs, mais il ne sagissait pas des couleurs de base, et il devient
ncessaire de comprendre la manire dont les couleurs sont gres en CSS3. Cela
vous permettra davoir accs des millions de couleurs plutt qu quelques-unes.
70
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
En utilisant les rudiments de HTML5 que vous avez appris jusqu prsent, vous
pouvez facilement crer un graphique qui afche toutes les couleurs (dans la section
vous de jouer ! la n de ce chapitre, vous allez devoir recrer ce tableau). La
gure 4.1 illustre laspect de cette palette de couleurs sur une page Web.
partir de cette base-l, vous pouvez inclure 131 autres noms qui semblent avoir
t choisis au hasard. Ils font tous partie dun ensemble cr dans les annes 1980
et qui se nommait X11. Ils ont t adopts par les premiers navigateurs et ont t
conservs par la suite. Dans la documentation ofcielle du W3C, ils sont lists dans la
rubrique SVG (Scalable Vector Graphics) et ils proviennent tous du jeu original X11.
La liste complte peut tre consulte ladresse :
www.w3.org/TR/SVG/types.html#ColorKeywords
Si tous ces noms nont pas t lists ici, cest parce quen gnral les concepteurs
et les dveloppeurs ne les utilisent pas. Les concepteurs considrent que 131 noms
limitent trop leur palette et quen plus, le choix a t fait en dpit du bon sens. Des
noms de couleurs comme papayawhip et mistyrose ne parlent pas vraiment des
71
artistes. De la mme manire, les dveloppeurs pensent que les valeurs utilises ne
correspondent pas un ensemble mathmatique comme les bonnes vieilles couleurs
du Web qui suivent une logique numrique standard (bien entendu, si vous voulez
vous amuser, vous pouvez inclure les couleurs darkkhaki et ghostwhite dans la palette
de couleurs de vos pages Web). Dans les sections suivantes, vous verrez comment crer
la couleur exacte que vous voulez en choisissant parmi un million de combinaisons
possibles.
72
(Anciennement de Brooklyn)</h1>
</body>
</html>
Vous noterez que la premire valeur nest pas un pourcentage. Cela est d au fait
que les valeurs sont comprises entre 0 et 359 (les 360 degrs dun cercle ; noubliez pas
que 0 et 360 reprsentent le mme point du cercle). En augmentant ou en diminuant
la lumire (le troisime paramtre), on peut rendre la couleur plus claire ou plus
fonce, ce qui est bien plus intuitif que de modier les pourcentages RGB. Le script
HTML5/CSS3 suivant (CouleurHSL.html disponible dans les chiers du chapitre)
montre comme il est facile de diminuer et daugmenter la valeur de la lumire pour
obtenir exactement la bonne teinte de rouge.
73
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.redBase {
color:hsl(0, 100%, 50%);
}
.redDarker {
color:hsl(0, 100%, 25%);
}
.redLighter {
color:hsl(0, 100%, 75%);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Assignation de couleur HSL</title>
</head>
<body>
<h1 class="redBase">Rouge de base</h1>
<h1 class="redDarker">Rouge fonc</h1>
<h1 class="redLighter">Rouge lger</h1>
</body>
</html>
Quand on utilise HSL pour la premire fois, il faut se rappeler le rle que jouent
lombre et la lumire du soleil sur les couleurs. Ce processus de mise au point est plus
facile pour les concepteurs qui sont habitus ces notions. La gure 4.3 montre les
diffrentes teintes de rouge obtenues.
74
Cela nest pas aussi intuitif que HSL, mais au bout dun moment, on commence
avoir une bonne sensation des mlanges bass sur 256 valeurs plutt que sur des
pourcentages. Lexemple suivant (CouleurDec.html disponible dans les chiers du
chapitre) illustre une implmentation simple.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
/* Couleur de fond rouge */
background-color:rgb(255,0,0);
}
h1 {
/* Grand texte en jaune */
color:rgb(255,255,0);
font-family:Verdana, Geneva, sans-serif;
font-size:36px;
font-weight:bold;
}
h2 {
/*Texte en bleu + fond gris */
color:rgb(0,0,255);
background-color:rgb(150,150,150);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Couleurs dcimales</title>
</head>
75
<body>
<h1> Grand titre en jaune</h1>
<h2> Titre en bleu avec un fond gris</h2>
</body>
</html>
Figure 4.4 Couleurs mlanges laide de valeurs exprimes avec des entiers dcimaux.
Comme vous pouvez le voir la gure 4.4, le terminal mobile nafche pas la police
Arial Black, mais il na pas de problme avec les couleurs. Assurez-vous de contrler
lafchage des polices et des autres effets sur un terminal mobile si cela est essentiel
pour votre site. Rappel : la plupart des ordinateurs ont un ensemble de polices et de
styles bien plus complet que les terminaux mobiles, mme si cette diffrence risque de
sestomper avec le temps.
76
recommence avec un nombre deux chiffres (1 et 0) que lon appelle dix . Comme
vous le savez peut-tre, les ordinateurs sont bass sur un systme de commutateurs
deux tats (On et Off). En remplaant On par 1 et Off par 0, on peut crire un code
bas sur un systme binaire ; au lieu davoir dix chiffres, on en a seulement deux, 0 et
1. Le tableau 4.2 liste les valeurs de 0 15 crites en binaire, en dcimal et en base 16,
que lon appelle galement systme hexadcimal.
Tableau 4.2 Systme de numration
Binaire
Dcimal
Hexadcimal
10
11
100
101
110
111
1000
1001
1010
10
1011
11
1100
12
1101
13
1110
14
1111
15
Chacune des valeurs binaires sappelle un bit (0 ou 1), et un groupe de huit bits
sappelle un octet. Dans le tableau 4.2, la plus grande valeur binaire est exprime dans
un nombre de 4 bits. La plus grande valeur dun octet est donc exprime sous la forme
dun nombre de 8 bits, soit 11111111. Quand on compare les valeurs dcimales et
hexadcimales de ce nombre, on voit quelque chose dintressant, comme cela est
illustr dans le tableau 4.3.
Comme vous pouvez le voir dans le tableau 4.3, la valeur hexadcimale FF est la
valeur la plus leve pour un nombre de deux chiffres ; de la mme manire, la valeur
binaire 11111111 est la valeur la plus leve dun octet, alors que le nombre dcimal
77
Dcimal
255
Hexadcimal
FF
est sur trois chiffres et ne reprsente aucune limite. En dautres termes, le systme
dcimal nest pas trs symtrique avec le systme de numration binaire, ce qui nest
pas le cas du systme hexadcimal.
Comme vous le savez, le systme RGB dassignation des entiers aux valeurs de
couleurs utilise des valeurs de 0 255. En utilisant des valeurs hexadcimales, on
na besoin que de nombres deux chiffres (en fait des entiers hexadcimaux) pour
reprsenter la totalit des 256 valeurs, ce qui est plus propre et favorise lutilisation de
lhexadcimal dans le systme dassignation des valeurs de couleurs.
En utilisant six valeurs hexadcimales (deux pour le rouge, deux pour le vert et
deux pour le bleu), on peut assigner nimporte quelle valeur de couleur. Ainsi la valeur
6F001C doit tre dcompose de la manire suivante :
Rouge : 6F
Bleu : 00
Vert : 1C
78
color:#b5aa69;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Palette avec des valeurs hexadcimales</title>
</head>
<body>
<h1> Style avec une palette de couleurs</h1>
<h2> Dsert lautomne</h2>
lautomne, quand lair se rafrachit, le dsert commence se parer dun
ensemble de nuances plus chaudes.
</body>
</html>
Cet exemple utilise une palette de couleurs et place simplement les valeurs de
couleurs dans un commentaire au sein du conteneur <style> de telle sorte quil puisse
tre visualis quand on assemble la page Web. La gure 4.5 illustre le rsultat.
79
Dans la quatrime partie de cet ouvrage, je traite des diffrents moyens dajouter de
la profondeur vos pages avec la balise <canvas> de telle sorte que lorsque lon empile
des objets les uns sur les autres, on peut mieux voir pourquoi lajout de la transparence
est important. Mais pour linstant, vous avez besoin de quelque chose que vous pouvez
placer sous les blocs de texte an quils puissent tre visualiss au travers dun bloc
de texte transparent. La mthode la plus facile est de placer un objet darrire-plan
en utilisant la proprit background-image. Lextrait de code suivant illustre cette
technique :
body { background-image:url(fichierImage.png); }
Vous pouvez utiliser nimporte quel chier .jpg, .gif ou .png comme image de
fond. Dans notre exemple, trois cercles de couleur rouge, verte et bleue sont utiliss
comme arrire-plan et on trouve au sommet de la page du texte <h1> avec 50 pour cent
dopacit pour montrer leffet que les diffrentes couleurs ont quand elles sont afches
au travers dun objet transparent. Le code suivant (Transparence.html disponible dans
les chiers de ce chapitre) utilise la fois les formats rgba() et hsla().
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
background-image:url(rgbBalls.png);
}
.transRed {
color:rgba(255, 0, 0, .5);
}
.transGreen {
color:rgba(0, 255, 0, .5);
}
.transBlue {
color:hsla(240, 100%, 50%, .5);
}
.transBackground
{
background-color:hsla(120, 100%, 50%, .5);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Transparence/Opacit</title>
</head>
<body>
<h1 class="transRed">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transGreen">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transBlue">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transBackground">Testing 123, Testing 123, Testing 123</h1>
</body>
</html>
Le rsultat est illustr la gure 4.6 ; comme vous pouvez le constater, le texte
et larrire-plan transparents permettent limage de fond dtre vue au travers.
80
Quand une couleur est transparente, elle prend la couleur sous-jacente. En pareil
cas, il faut donc faire attention harmoniser la couleur sous-jacente et la couleur de
recouvrement (en ce sens, la gure 4.6 illustre bien les raisons pour lesquelles on utilise
rarement des images darrire-plan car elles mettent en dsordre lcran et dtruisent
toute sensibilit du texte).
81
Pour crer un modle de couleurs avec Kuler, on commence avec une couleur de base
puis on teste diffrents algorithmes pour gnrer des modles de couleurs. Ensuite, on
slectionne un algorithme pour afcher diffrentes manires dassocier les couleurs.
Les rgles qui sont bases sur la thorie des couleurs permettent de choisir entre les
paramtres suivants : analogue, monochromatique, triade, complmentaire, compos,
teintes, ou personnalis. La dernire catgorie est pour les concepteurs qui utilisent
leurs talents artistiques pour gnrer une palette (les dveloppeurs ne sont pas non
plus oublis car ils ont des algorithmes automatiques). La gure 4.7 illustre un exemple
typique de modle de couleurs gnr partir dune couleur de base laide de
lalgorithme analogue.
82
83
84
85
Pour ce faire, on peut utiliser la balise <span> pour assigner les classes au
contenu du conteneur <span>.
DEUXIME PARTIE
Conception
de pages et
de sites Web
5
Organisation de la page
Objectif
Un grand nombre des nouvelles balises HTML5 sont des balises organisationnelles.
Dans les chapitres prcdents, nous en avons utilis quelques-unes, mais nous ne
les avons pas vraiment expliques. Ce chapitre tudie en dtail lorganisation des
pages HTML5 laide de CSS3 et la manire dont il faut apprhender ce processus
organisationnel. On ne peut comprendre certains lments quune fois quon a
commenc utiliser JavaScript, mais si vous dnissez votre page en suivant les
recommandations HTML5, votre page sera parfaitement oprationnelle quand vous
commencerez y ajouter un peu de JavaScript.
90
<meta> a de nombreuses utilisations, mais nous ne lavons employe pour linstant que
pour spcier le jeu de caractres. Nous verrons dautres utilisations de cette balise
dans ce chapitre.
91
<body>
<h1>Ceci est la base daccueil</h1>
<a href="PremiereBase.html">Premire base</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.sandlight.com/html5/smashing/">
<style type="text/css">
body {
background-color:#FC0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Premire base</title>
</head>
<body>
<h1>Ceci est la premire base</h1>
<a href="Base.html">Base daccueil</a>
</body>
</html>
Chaque valeur de lattribut content, qui doit tre spare par une virgule, est cense
dcrire le contenu de votre site. Ces balises, qui sont faciles dnir, permettent
dorienter les utilisateurs vers votre site.
92
Vous pouvez non seulement recharger la mme page, mais vous pouvez aussi
recharger des pages diffrentes. Si vous voulez charger une squence de pages, vous
pouvez dnir la balise meta de la manire suivante an de lui assigner une URL aprs
une demi-seconde :
<meta http-equiv="Refresh" content=".5; URL=pg2.html">
93
94
Comme pour les feuilles de styles, les programmes JavaScript peuvent tre chargs
partir de chiers externes. Cependant, au lieu dutiliser llment link, les chiers
JavaScript sont chargs laide de llment script, comme dans lexemple suivant :
<script type="text/javascript" src="programmeJS.js"></script>
Les chiers JavaScript comportent lextension .js, alors que les chiers CSS3 ont
lextension .css.
Dans la quatrime partie de ce livre, vous verrez quil est intressant dutiliser
JavaScript avec la balise <canvas> et dautres lments HTML5. De plus, les balises
<script> et le code JavaScript peuvent tre ajouts en plein au milieu du script
HTML5. Il y a cependant un avantage placer le code JavaScript dans le conteneur
head, car il est charg en premier, avant la page Web.
95
Les sections sont lune des modications majeures de HTML5 par rapport aux
anciennes versions de HTML. Avant HTML5, on pouvait facilement reprsenter
des sections avec llment body et des balises <h>. En HTML5, on peut envisager une
page avec des sections et des sous-sections. Si lon agrandit le contexte, une page Web
est un article, et comme dans un article de magazine, on peut trouver diffrentes
sections qui constituent les blocs de larticle. La gure 5.4 fournit une vue densemble
des sections dune page HTML5.
En examinant la gure 5.4, on peut voir diffrents blocs dinformation, mais les
balises utilises nont en gnral pas de capacit intrinsque structurer visuellement
linformation. Les balises <h>, qui sont des lments de section, permettent assurment
dafcher le texte dans des tailles diffrentes, mais les autres balises de section servent
tout autant organiser la page qu en spcier laspect visuel.
Voici une liste dlments de section :
Body
Section
96
Nav
Article
Aside
H1 . . . H6
Hgroup
Header
Footer
Address
Llment body est la racine des sections, tout comme llment html est la racine
de la page. Au cours des prcdents chapitres, nous avons dj rencontr plusieurs
lments de section qui vous sont ainsi devenus familiers, mais le script suivant va
vous aider comprendre comment les utiliser conjointement (ArticleStructure.html
qui est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Sections</title>
</head>
<body>
<article>
<header>
<h1>Pilots and Planes</h1>
<p><q>I never left one up there. </q><i>Ace Davis</i></p>
</header>
<nav><a href=#> Safety</a> | <a href=#>Check Lists</a> | <a
href=#>Landings</a></nav>
<section>
<h2>Flying Stories by Real Pilots</h2>
<h3>...and other cures for insomnia.</h3>
<section>
<h4>Short Final</h4>
<p>As we were on short final, control cleared the Maule for immediate
takeoff, which it did in about 15 feet of runway at an airspeed of 20 mph. It
filled my windshield as I approached stall speed. After realizing its mistake,
the tower instructed the Maule to loop, and we were able to land without
incident.</p>
</section>
<section>
<h4>Thermal on Takeoff</h4>
<p>Taking off from Gila Bend, Arizona, with the ambient temperature of
130 F, we encountered a strong thermal at the end of the runway, which took
our Cessna 177b to 15,000 feet in 12 seconds flat, at which time we leveled
off and proceeded to New Mexico via the jet stream, setting a new speed
record.</p>
</section>
</section>
<aside>
<h2>Truthful Pilot Found!</h2>
97
Le but des sections est de diviser la page en parties cohrentes. Il sagit dun
ensemble organis dlments qui peuvent tre utiliss pour de la mise en forme, mais
ce nest pas leur objectif principal. Pour formater un paragraphe ou un groupe de
paragraphes, la norme W3C encourage lemploi de la balise <div>.
La gure 5.5 illustre lafchage du script prcdent dans un navigateur. Bien que
la mise en page ne soit pas particulirement attirante, elle se rvle fonctionnelle.
Larticle est consacr aux pilotes et la navigation arienne. Le titre de larticle
annonce le sujet (les pilotes et les avions) et offre une citation dun pilote en utilisant
une balise <q>. Aprs le titre, la premire section traite dhistoires de pilotage. Deux
autres balises <section> sont imbriques lintrieur de la premire section an de
sparer deux histoires.
Une section sur la vracit des histoires de pilotes davion est place dans un
conteneur dlment spar aside. la gure 5.4, vous avez peut-tre remarqu que
llment aside tait plac dans une colonne spare, mais en soi llment aside est
une rfrence la signication de la page, et il ne sagit donc pas dun lment de mise
en forme en tant que tel.
98
En examinant la page illustre la gure 5.5 et son code, vous pouvez voir la
signication de la page apparatre dans les balises de section. Comme nous lavons
dj dit, il ne sagit pas ici de mise en forme, mais bien dorganiser le sens de la page.
99
<header>
<h1>Les choses importantes de la vie</h1>
</header>
<section>
<h2>Trouver le vritable amour</h2>
<h2>Choisir un bon mtier</h2>
<h2>Trouver une place de parking</h2>
</section>
Quand on visualise la page Web, le rsultat des deux versions du code est identique,
mais il est plus judicieux demployer le code HTML5 avec les nouveaux lments de
section.
La question suivante est de savoir o lon peut utiliser les lments p et div.
En fait, il nest pas souhaitable demployer abondamment ces balises, mme si elles
peuvent se rvler pratiques quand on veut ajouter un lment de style ou un autre
attribut au milieu dune balise <article> ou <section>. Examinez le code suivant
(UtilisationDiv.html qui est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
font-family:"Comic Sans MS", cursive;
color:#0C6;
100
background-color:#FFC;
}
.girls {
background-color:pink;
}
.boys {
background-color:powderblue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prnoms des enfants</title>
</head>
<body>
<article>
<header>
<h1>Prnoms des enfants</h1>
</header>
<section>
<div class="girls">
<h2> Filles</h2>
<ul>
<li>Olivia</li>
<li>Prune</li>
<li>Emilie</li>
</ul>
</div>
</section>
<section>
<div class="boys">
<h2> Garons</h2>
<ul>
<li>Jacques</li>
<li>Richard</li>
<li>John</li>
</ul>
</div>
</section>
</body>
</html>
La gure 5.6 illustre le rsultat, mais le point important est que la balise <div>
na t employe que pour fournir les couleurs de fond des deux diffrents lments
<section>.
Comme vous pouvez le voir dans le listing, llment div a permis lemploi de
deux styles de couleur de fond diffrents dans les conteneurs section sans avoir
ajouter de classes la balise <section>. Vous devez cependant garder lesprit que
dans lensemble <p> et <div> sont des lments plus gnriques et que vous devez
privilgier les lments qui dcrivent le mieux le contenu de votre page Web.
Outre lutilisation de la balise <div> pour le regroupement et le stylage, on peut
aussi employer les listes pour faire ressortir les donnes. HTML5 utilise toujours les
balises <ul> pour regrouper les prnoms des lles et des garons, mais il existe une
diffrence subtile, mais importante entre les listes ordonnes (<ol>) et les listes non
ordonnes (<ul>).
101
102
ul {
background-color:#F20505;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Liste ordonne et non ordonne</title>
</head>
<body>
<h2> Coupe du monde 2010</h2>
<h3>Dbut</h3>
<ul>
<li>Espagne</li>
<li>Pays-Bas</li>
<li>Allemagne</li>
<li>Uruguay</li>
</ul>
<h3>Fin</h3>
<ol>
<li>Espagne</li>
<li>Pays-Bas</li>
<li>Allemagne</li>
<li>Uruguay</li>
</ol>
</body>
</html>
Figure 5.7 Les listes ordonnes et non ordonnes ont des significations diffrentes.
103
Vous noterez galement que les deux diffrentes sortes de listes ont des couleurs de
fond diffrentes qui ont t ajoutes avec CSS3. Cela signie que lorsque lon emploie
des lments de regroupement, on peut galement accentuer le rassemblement du
contenu par lutilisation des couleurs, comme cela a t illustr dans les gures 5.6 et
5.7.
104
<style type=text/css>
/*A1A680,D9D7BA,D90404,8C0303,590202 */
body {
background-color:#A1A680;
color:#590202;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:8px;
}
h4 {
background-color:#D9D7BA;
color:#8C0303;
font-family:Tahoma, Geneva, sans-serif;
}
</style>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Trop de balises HR</title>
</head>
<body>
<header>
<h4> Kubla Khan</h4>
</header>
<article>
<hr>
In Xanadu did Kubla Khan<br>
A stately pleasure-dome decree:<br>
Where Alph, the sacred river, ran<br>
Through caverns measureless to man<br>
Down to a sunless sea.<br>
<hr>
So twice five miles of fertile ground<br>
With walls and towers were girdled round;<br>
And there were gardens bright with sinuous rills,<br>
Where blossomed many an incense-bearing tree;<br>
And here were forests ancient as the hills,<br>
Enfolding sunny spots of greenery.<br>
<hr>
But oh! that deep romantic chasm which slanted<br>
Down the green hill athwart a cedarn cover!<br>
A savage place! as holy and enchanted<br>
As eer beneath a waning moon was haunted<br>
By woman wailing for her demon-lover! </article>
</body>
</html>
Comme vous pouvez le voir, les balises <hr> sont toutes au sein de llment
article, alors que le titre fait partie de llment header. La gure 5.8 montre que
les lignes horizontales ne clarient pas le sens du pome et ont plutt tendance le
fragmenter.
Quand votre page comporte une division importante, une ligne horizontale peut
tre approprie, mais il faut alors ajouter un style CSS3 pour allger llment
hr de telle sorte quil apporte une note subtile (on peut notamment ajouter de
la transparence). Les bons concepteurs savent utiliser les lignes horizontales avec
modration, alors que les nophytes peuvent trs facilement mettre la pagaille dans
leurs pages Web en abusant des balises <hr>.
105
106
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* 732D3F,A66879,D9C3B0,260101,F2F2F2 */
body {
background-color:#D9C3B0;
color:#732D3F;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
aside {
margin-left:260px;
}
h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#F2F2F2;
color:#A66879;
text-align:center;
}
figcaption {
color:#A66879;
background-color:#F2F2F2;
}
img {
margin:5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Regroupement dune figure et de sa lgende</title>
</head>
<body>
<header>
<h1>Souvenirs de Baja</h1>
</header>
<article>
<figure> <img src="PuntaBufeo250.png" alt="Punta Bufeo"><br>
<figcaption> Piste datterrissage sur la plage de Punta
Bufeo </figcaption>
</figure>
<section>
<p>Les meilleures destinations de Baja ne sont accessibles quen 4x4 ou
bien en petit avion. Les plages y sont immacules, dsertes et spacieuses. La
<i>mer de Cortez</i> (appele aussi <i>golfe de Baja</i> et la <i>mer
Vermillion</i>) sont dun bleu transparent.</p>
</section>
</article>
</body>
</html>
107
Comme vous pouvez le voir clairement la gure 5.9, llment <figcaption> est
styl diffremment, mme sil sagit dun descendant du conteneur <figure>. Cependant, vous ne pouvez pas prsupposer quun lment figcaption sera correctement
positionn, comme cest le cas la gure 5.9, simplement parce que cest un enfant de
llment figure quil lgende.
108
Web et dimages charger, il est plus efcace dorganiser le site avec des rpertoires
spars pour les diffrents groupes de chiers. La manire dont on organise ses images
dpend dun certain nombre de facteurs. Voici quelques exemples de classications en
rpertoires et sous-rpertoires :
Classications formelles (Animaux > Mammifres > Rongeurs)
Sujet (Vacances > Destinations > Logement > Affaires emporter)
Processus (Ptisserie > Fabrication de la pte > Prchauffage du four > Temps
de cuisson)
Quel que soit le modle organisationnel choisi, vous devez comprendre comment
accder vos images. Toutes les rfrences aux images sont absolues ou relatives.
Quel que soit lemplacement partir duquel cette URL est appele, le chier
nomm la n de lURL est reconnu. Cela est identique avec une rfrence source
(src) une image. Si votre code comporte le lien suivant, il chargera le chier
nose.png quel que soit lemplacement de la page Web qui rfrence limage :
<img src="http://www.smashinghtml5.com/organization/graphics/nose.png">
Mme si la page Web qui rfrence limage est sur un serveur totalement diffrent,
ladresse absolue fonctionne.
Lavantage de lemploi des adresses absolues est que vous navez pas vous
proccuper si une page gure bien sur votre site Web. Vous navez pas non plus vous
proccuper si elle gure sur le mme serveur. Ce type dorganisation nest cependant
pas optimal et les longues URL ne sont pas faciles grer.
109
Si jai une image dans le dossier HTML5/, je peux utiliser son adresse relative pour
lappeler partir de somePage.html. Par exemple, si jai un chier anyGraphic.png
dans le dossier HTML5, je peux utiliser simplement la rfrence relative suivante :
<img src="anyGraphic.png">
Mais si je veux organiser mes images dans un dossier spar appel images,
lintrieur du dossier HTML5, jutiliserai alors ladresse relative :
<img src="images/anyGraphic.png">
Vous pouvez crer autant de niveaux relatifs que vous le souhaitez, chaque niveau
tant spar par un slash (/). Par exemple, on peut imaginer une arborescence plus
complexe :
<img src="images/animaux/chiens/SaintBernard/monToutou.png">
Si lon peut faire rfrence des niveaux infrieurs, on peut aussi accder aux
niveaux suprieurs. Supposons par exemple que lon dispose du chemin suivant et que
la page HTML5 soit dans le rpertoire dossierBase :
dossierHaut/dossierMilieu/dossierBase
Pour accder une image situe dans le rpertoire dossierMilieu, il faut utiliser la
syntaxe suivante :
<img src=".../anyGraphic.png">
<img src="../../anyGraphic.png">
On na pas besoin de nommer le dossier cible dans lequel se situe la page Web
appelante, mais on utilise les caractres ../ successifs jusqu ce que lon atteigne le
niveau dsir. Cela signie que lon peut remonter au niveau souhait et redescendre
vers une autre branche. Dans lexemple suivant, on remonte jusquau rpertoire
dossierHaut, puis lintrieur de dossierHaut on redescend jusquau dossier qui
contient les images pour atteindre limage cible :
<img src="../../images/anyGraphic.png">
La gure 5.10 fournit une illustration gnrique de laccs aux ressources situes
dans des dossiers de niveaux infrieurs et suprieurs.
Comme cela a t not dans la section Dnition de la base de rfrence , plus
haut dans ce chapitre, votre position relative peut tre dnie un emplacement qui
110
est diffrent de celui o se situe le chier. Examinez, par exemple, les deux pages Web
suivantes (Terre.html et Alien.html qui sont disponibles dans les chiers du chapitre).
La premire appelle la seconde sur un serveur diffrent ; cependant, comme la base de
la premire page est dnie sur le second serveur, lappel est relatif. Le premier chier,
qui se nomme Terre.html, est situ sur le domaine smashingHTML5.com dans le dossier
smashing. Sa base est pourtant dnie smashingHTML5.net dans le dossier smashing.
Il est donc possible dutiliser une URL relative pour accder au chier Alien.html sur
un serveur totalement diffrent.
Base dnie sur un serveur diffrent
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.sandlight.net/html5/smashing/"><meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Terre</title>
</head>
<body>
<h1>Ici la terre</h1>
<a href="Alien.html">Mise feu !</a>
</body>
</html>
111
Muybridge est intressant car en 1878 il a russi crer des lms en utilisant une
srie de photographies. Luniversit Riverside de Californie a conserv les travaux de
Muybridge et les a mis en ligne en utilisant des chiers GIF anims. Pour voir comment
on peut raliser des animations en utilisant le rafrachissement des pages, tlchargez
lun des chiers GIF anims de la collection Muybridge partir du lien ci-dessus et
extrayez les douze photographies individuelles du chier GIF. Vous pouvez extraire
ces images avec Adobe Photoshop, Adobe Fireworks, et plusieurs autres programmes
(cherchez extraire images GIF anim dans un moteur de recherche pour trouver
de nombreuses faons de rcuprer les images individuelles. Si vous avez un Mac, vous
pouvez utiliser lapplication Prvisualisation et simplement faire glisser les images
individuelles dans un dossier spar).
Une fois que vous avez extrait les chiers GIF individuels, concevez votre
animation en utilisant ltat Refresh avec llment meta dans la section <head> de
votre programme. Pour commencer, utilisez le script HTML5 suivant (an1.html qui
est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="0.1; URL=an2.html">
<title>Image 1</title>
</head>
<body>
<img src="an1.png" alt="one">
</body>
</html>
Les chiers GIF individuels ont t sauvegards sous la forme de chier .png et
renomms an1.png jusqu an12.png (le prxe an signie animation). De la mme
manire, les douze chiers HTML ont t nomms en utilisant le prxe an, de
an1.html an12.html. Une fois que vous aurez termin, vous obtiendrez un cheval
qui avance au pas. Si vous liez la douzime page la premire, le cheval narrte pas
de se dplacer.
6
Affichage des donnes dans
des tableaux
Objectif
Aux dbuts de HTML, llment table tait utilis pour la majeure partie de la mise
en forme des pages. Lavnement de CSS a introduit un nouvel ensemble de rgles
de mise en forme et llment table a t abandonn comme outil de mise en forme,
ce qui tait justi. Cependant, CSS3 a rintroduit certains types spciques de
mise en forme, si bien que les tableaux, mme sils ne sont toujours pas des outils
gnriques de mise en forme, ont dsormais des fonctions intressantes pour afcher
des ensembles de donnes et pour grer la mise en forme gnrique CSS3.
Ce chapitre tudie les nouvelles proprits CSS3 que vous pouvez utiliser pour
accomplir des mises en pages gnrales, mais il se concentre principalement sur
lafchage des donnes tabulaires. Les donnes tabulaires ne sont rien dautre que des
donnes disposes dans un tableau pour en faciliter la lecture et pas spcialement des
structures de mise en page.
114
Cela signie quen gnral, les lments table ne doivent pas tre utiliss pour la
mise en page, si ce nest pour les donnes tabulaires. Cependant, si vous avez besoin
de mettre en page des tableaux, il faut utiliser les proprits de tableaux CSS3.
Cet avertissement est d au fait que lorsque CSS est sorti, toutes les mises en page
taient censes tre ralises laide de CSS. An de ne pas dissuader les concepteurs
et les dveloppeurs dutiliser les proprits de tableaux CSS3, le W3C a ajout cette
note. Si vous avez respect cette mise en garde et navez pas utilis les lments table
dans vos mises en page, nous vous conrmons que les proprits de tableaux CSS3
sont parfaites pour la conception, jusqu un certain point.
An dexaminer les fonctionnalits CSS3, la premire tape consiste tudier
les valeurs de la proprit CSS3 display : table et table-cell. Cette proprit peut
tre envisage comme une instruction de mise en page dont les valeurs organisent la
disposition de lafchage. Il peut tre utile de se reprsenter la proprit table comme
un grand conteneur et la proprit table-cells comme les cellules individuelles de
ce conteneur. Pour les conceptions plus sophistiques, table-cells se rapproche de
llment table et de tous les problmes qui lui sont inhrents. Il convient donc de
lutiliser pour les applications simples o il suft de quelques colonnes pour raliser
une tche peu complexe.
La syntaxe CSS3 pour dnir lafchage utilise des classes prdnies, une classe
utilisateur, ou un ID. On assigne la proprit display une simple valeur table ou
table-cell. Voici un exemple (avec une dnition de style) :
.story {
display: table;
}
.col1 {
display: table-cell;
width: 250px;
padding-right: 20px;
color:#cc0000;
}
115
La classe story est un conteneur pour ordonner diffrentes sections qui on assigne
les classes col1 ou col2. Cependant, les classes col1 et col2 nont pas tre places
dans un tableau. Vous noterez que les deux images (places dans deux classes diffrentes
table-cell) sont dnies avec des balises <div> au sein dun conteneur <header>. Elles
sont ensuite utilises une nouvelle fois lintrieur du conteneur <article> qui a
t assign la classe story (table). Les deux sections ont t dnies en tant que
proprits display de col1 et col2, et bien quelles ne soient pas visibles dans les
116
conteneurs des deux images, vous pouvez voir que le texte de couleur diffrente aide
diffrencier leur tat. La gure 6.1 illustre le rsultat attendu dans un navigateur.
117
Un des aspects les plus intressants des balises de tableau est que les balises de
fermeture sont optionnelles, et il ny a aucune recommandation en la matire. Il est
important de mettre en forme le code de telle sorte que les lignes ressortent clairement
an de pouvoir identier clairement la structure du tableau. Si lon ninclut pas
118
les balises de fermeture des cellules, le code parat bien plus lisible, ce qui est une
excellente chose. Nous allons donc abandonner les balises de fermeture des cellules,
moins quelles naient un rel intrt pour la clart du listing. La gure 6.2 illustre le
rsultat du programme dans un navigateur.
Vous noterez qualors que la balise <th> provoque lafchage du texte en gras, ce
nest pas le cas de la balise <caption>. Ce problme peut tre rgl avec CSS3 qui
permet aussi damliorer le reste du tableau. Mais pour linstant, vous navez besoin de
comprendre que les lments de base des tableaux.
119
<style type="text/css">
table {
width:400px;
border-style:groove;
border-width:thick;
border-color:#FF5C19;
color:#C00;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
caption {
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:hsl(17, 60%, 40%);
padding:12px;
}
td, th {
border-style:solid;
border-width:thin;
border-color:#000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bordures aveuglantes</title>
</head>
<body>
<table>
<caption>
Les animaux de la ferme
</caption>
<tr>
<td>§
<th>Poule
<th>Chvre
<th>Oie
<tr>
<th>Cri
<td>Caqutement
<td>Bgutement
<td>Criaillement
<tr>
<th>Petit
<td>Poussin
<td>Chevreau
<td>Oison
</table>
</body>
</html>
La gure 6.3 illustre le rsultat, mais avant de la regarder, examinez le code CSS3
soigneusement. La valeur § est le code de caractre dun symbole saisi en utilisant
son code plutt que le clavier. Tous les caractres UTF-8 peuvent tre saisis de cette
manire et certains symboles, comme les signes suprieur (>) et infrieur (<),
doivent tre saisis avec cette mthode ; dans le cas contraire, lanalyseur les interprte
120
comme faisant partie dune balise. Jetez prsent un coup dil la gure 6.3 pour
voir la page avec ses bordures.
Quand on tente de lire les diffrents lments de donnes, les bordures gnent.
Pour rgler ce problme, il suft dajouter de lespace autour du texte des cellules. Pour
ce faire, on modie le style des lments td et th de la manire suivante :
td, th {
height:50px;
border-style:solid;
border-width:thin;
border-color:#000;
padding:20px;
}
121
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
td {
width:70px;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
caption {
font-family:"Arial Black", Gadget, sans-serif;
font-size:12px;
font-weight:500;
color:#360;
background-color:hsla(113, 46%, 91%, 1);
}
.money {
text-align:right;
}
table {
background-color:#FFC;
}
.alt1 {
background-color:hsla(113, 46%, 91%, .8);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sparation des couleurs</title>
</head>
122
<body>
<table>
<caption>
Comptabilit
</caption>
<tr>
<th>Nom
<th>N de compte
<th>Montant
<tr class="alt1">
<td>Joe Doaks
<td>ID065212
<td class="money">$92.83
<tr>
<td>Jane Franco
<td>ID034986
<td class="money">$17.78
<tr class="alt1">
<td>Fernando Rodriguez
<td>ID019921
<td class="money">$221.83
<tr>
<td>Benny Jet
<td>ID073456
<td class="money">$320.45
</table>
</body>
</html>
Par dfaut, llment td justie le texte gauche, ce qui est souhaitable dans la
plupart des cas. Cependant, avec des nombres dcimaux, il est prfrable dutiliser une
justication droite. Cest la raison pour laquelle une des classes de la feuille de styles
comprend une classe money qui justie droite les donnes nancires.
La totalit du tableau a une teinte jaune clair comme couleur de fond, mais cette
couleur naffecte pas les donnes du conteneur <caption> ; cest la raison pour laquelle
llment caption possde une couleur de fond compatible avec celle du tableau.
Bien que le tableau soit relativement petit, il a t optimis pour un afchage sur des
terminaux mobiles, si bien que le texte est dni 10 px (10 px est assez proche dun
texte afch dans une police en corps 10). La gure 6.5 illustre le rsultat.
En utilisant une couleur avec une opacit infrieure 100 pour cent (cest--dire
avec un peu de transparence), le vert qui alterne est lgrement mlang avec le
jaune clair qui sert de couleur de fond. La couleur de fond du titre est identique au
vert qui alterne dans les lignes, mais il a une opacit 100 pour cent et vous pouvez
constater quil a une teinte lgrement diffrente. Les lments th ont hrit de la
couleur de fond du tableau, mais servent dtiquettes de colonnes sans aucune autre
forme dajustement.
Les largeurs des cellules sont dnies de manire absolue (70 px) car la largeur
rete le fait que le tableau est optimis pour la lecture sur un terminal mobile. Cela
a pour effet que les noms peuvent occuper deux lignes sans nuire la lisibilit du
tableau.
123
Figure 6.5 Alternance des couleurs dans les lignes dun tableau.
124
Figure 6.6 Tableau compos de cellules de taille identique et tableau utilisant les attributs
rowspan et colspan.
125
Cet exemple utilise une bordure lgrement grise de manire mieux visualiser
lemploi des attributs rowspan et colspan, mme si vous navez pas besoin dune
bordure pour vous en servir. En fait, sil ny a pas de bordures, il peut tre difcile de
distinguer les regroupements de cellules, si bien quelles sont plutt utiles dans ce cas
de gure. La gure 6.7 illustre le tableau avec deux regroupements de cellules.
Vous pouvez constater que le tableau de la gure 6.7 comporte 10 cellules, alors
quun tableau de 4 par 3 en comporterait 12. De la mme manire, dans le listing,
vous pouvez voir dix balises <td>. Les attributs colspan et rowspan peuvent tre un
peu dlicats comprendre, mais si vous vous les reprsentez en termes de fusion de
cellules, ils sont plus faciles apprhender.
126
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Suivi de projet</title>
</head>
<body>
<table>
<caption>
Planning de projet
</caption>
<tr>
<th>Tche
<th>Projet
<th>quipe
<th>chance
<tr class="bluish">
<td>Coordination
<td>Cold Fire
<td>Emma Peel
<td>21-01-2012
<tr class="brownish">
<td rowspan="4">Conception
<td rowspan="4">Cold Fire
<td>Sancho Panza
<td rowspan="4">01-10-2011
<tr class="brownish">
<td>John Watson
<tr class="brownish">
<td>Edward McMahon
<tr class="brownish">
<td>Vanna White
<tr class="bluish">
<td rowspan="2">Interaction
<td rowspan="2">Cold Fire
<td rowspan>Garth Algar
<td rowspan="2">12-11-2011
<tr class="bluish">
<td> John McIntyre
<tr class="brownish">
<td rowspan="3">Dveloppement<br>
du frontal
<td rowspan="3">Cold Fire
<td>Barney Rubble
<td rowspan="3">15-12-2011
<tr class="brownish">
<td>Ethel Mertz
<tr class="brownish">
<td>Paul Schaffer
<tr class="bluish">
<td rowspan="2">Test
<td rowspan="2">Cold Fire
<td rowspan>Louise Sawyer
<td rowspan="2">15-01-2012
<tr class="bluish">
<td>Andy Richer
</table>
</body>
</html>
127
128
Fondamentalement, les balises <td> qui incluent un attribut rowspan sont celles
qui doivent tre sufsamment larges pour accueillir le nombre de membres de lquipe
qui seront sur la mme ligne. La gure 6.8 illustre le rsultat dans un navigateur.
La chose la plus importante quil faut se rappeler propos des tableaux est quils
doivent tre utiliss judicieusement. Il ne sagit pas doutils gnriques de mise en
page, mais vous pouvez utiliser CSS3 pour concevoir laspect des donnes tabulaires
afches dans des lments table. En conclusion, vous devez absolument utiliser
CSS3 pour les donnes tabulaires, les tableaux et le contenu non tabulaire.
129
7
Tout sur les liens
Objectif
Outre lafchage de textes et dimages, lintrt majeur des pages Web rside dans
la possibilit de charger dautres pages. En utilisant des pages Web, les gens (ce qui
inclut les concepteurs et les dveloppeurs) ont tendance penser quils vont quelque
part ou quils obtiennent quelque chose. On fournit mme aux utilisateurs des cartes
des sites et des outils de navigation, ce qui peut leur faire penser quils ont entrepris
une sorte de voyage (les problmes de navigation, qui sont importants, seront traits
au chapitre 8).
Ce chapitre est consacr la manire dont les liens chargent dautres pages Web,
et la manire dont on les utilise pour accder dautres feuilles de styles. Nous
tudierons aussi les diffrents attributs qui sont lis au chargement des pages, les
dtails de laccs une page, et les proprits CSS3 utilises pour styler les liens et
grer des fonctionnalits interactives.
132
par les lments de lien ont tendance se focaliser sur le chargement des chiers
(.html, .css et .js) plutt que sur lapparence.
Llment link lui-mme fait partie du contenu des mtadonnes et se trouve
lintrieur du conteneur head, au sommet de la page Web. Au chapitre 3, vous avez
vu comment utiliser link pour charger des chiers CSS externes. Dans la premire
section, je vais vous montrer comment dnir votre page Web pour quelle soit capable
de charger des feuilles de styles indpendantes.
La valeur ref alternate stylesheet est une entit qui est diffrente de la valeur
alternate que je traiterai dans la section suivante. Vous pouvez charger autant de
feuilles de styles que vous voulez, mais lutilisateur ne peut slectionner quune feuille
de styles alternative, et pas une feuille de styles normale.
Pour voir comment les feuilles de styles alternatives fonctionnent, lexemple suivant commence par deux feuilles diffrentes qui se nomment chaud.css et froid.css.
Ensuite, le code de la page Web cre le code qui charge la feuille de style par dfaut
(chaud.css), et lutilisateur peut ensuite permuter entre les deux feuilles de styles.
Thme de couleurs chaudes
@charset "UTF-8";
/* CSS Document */
body {
/*FFE0A3,7F7D78,FFFAF0,7F7052,CCC8C0 */
font-family:Verdana, Geneva, sans-serif;
font-size:11;
background-color:#FFFAF0;
color:#7F7052;
}
h1 {
font-family:"Arial Black", Gadget, sans-serif;
color:#CCC8C0;
text-align:center;
}
h2 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color:#7F7D78;
color:#FFE0A3;
}
133
Les deux thmes utilisent un code CSS3 identique, mis part les valeurs des
couleurs. La page Web suivante (FeuillesDeStylesAlternatives.html disponible
dans les chiers du chapitre) utilise deux chiers CSS externes avec un chier par
dfaut (stylesheet) et un chier alternatif (alternate stylesheet) :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="chaud.css" title="Affichage chaud
(par dfaut)">
<link rel="alternate stylesheet" type="text/css" href="froid.css"
title="Paysage froid">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Feuilles de styles externes alternatives</title>
</head>
<body>
<h1>Chaud et froid</h1>
<h2> Passez du chaud au froid </h2>
Pour permuter, slectionner Afficher (ou Affichage) > Style (ou Style de la
page) partir du menu du navigateur et choisissez le style que vous dsirez.
Utilisez pour commencer Opera ou FireFox, et testez ensuite dautres
navigateurs HTML5.
</body>
</html>
134
135
Dans Firefox, le menu de slection des feuilles de styles est lgrement diffrent,
mais comme dans Opera, il offre aux utilisateurs la possibilit de changer les styles de
manire dynamique sils le souhaitent.
<!DOCTYPE HTML>
<html>
<head>
<meta name="application-name" content="HTML5, CSS3"/>
<meta name="description" content="HTML5 Icne lien"/>
<meta name="application-url" content="IconeLien.html"/>
<link rel="icon" href="Ancre.png" sizes="32x32"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Icne de page</title>
</head>
<body>
Icne de lien
</body>
</html>
Lors des tests dafchage de licne dans cinq navigateurs diffrents (Safari,
Chrome, Opera, Firefox et Internet Explorer), seuls Opera et Firefox taient capables
dafcher licne. Vous noterez galement que les navigateurs des terminaux mobiles
nafchent pas non plus licne. La gure 7.3 indique lemplacement o les icnes
apparaissent (une petite ancre verte) dans les navigateurs Opera et Firefox.
Pour la cration de licne, jai utilis un chier .png dni avec la taille par dfaut
de 32 x 32 pixels. Vous pouvez utiliser dautres tailles, mais les limites ne sont pas
claires (il faut cependant que la hauteur et la largeur de limage soient identiques).
7.1.3 Prchargement
HTML5 a introduit une nouvelle valeur pour lattribut rel de llment link :
prefetch. Supposons que vous ayez une page qui soit un peu lourde car elle contient
136
de grandes images, des contenus vido ou audio. Avant que les utilisateurs naillent
sur cette page, ne serait-il pas intressant de prcharger la page (les images et tout le
reste) de telle sorte que quand ils cliquent sur le lien, tout le contenu soit dj prt ?
Cest la raison dtre du prchargement (que lon appelle aussi prefetching). Quand
le navigateur est au repos, le prchargement lui donne quelque chose faire. Par
exemple, le code suivant utilise le prefetching pour charger une vido :
<link rel="prefetch" href="Test.mov">
Ainsi, quand lutilisateur va sur la page qui contient la vido, elle a dj commenc
se charger ou elle peut mme stre charge compltement et tre prte tre lue.
Voici quelques autres exemples :
<link
<link
<link
<link
href
<link
rel="prefetch" href="monkeys.html">
rel="prefetch" href="monsterTrucksFull.png">
rel="prefetch" href="http://www.sandlight.com">
rel="prefetch alternate stylesheet" ="http://wherever.org/fall.css">
rel="prefetch" href="Vacances.mp4" title="Vacances dt">
Avant de commencer envisager dutiliser la valeur prefetch sur chaque page qui
est lie une page lourde , vous devez rchir la probabilit quont les utilisateurs
de visiter cette page en question. Par exemple, supposons que vous conceviez un site
Web pour un grand magasin et que les utilisateurs puissent slectionner plusieurs
images de produits. Si la page Web prcharge toutes les images, cela va surcharger
inutilement lordinateur de lutilisateur. Ainsi, au lieu dobtenir une rponse rapide,
137
Comme vous lavez constat dans les exemples utilisant lattribut rel, ces autres
attributs sont souvent employs conjointement avec rel.
138
archives
author
bookmark
external
first
help
index
last
license
next
nofollow
noreferrer
prev
search
sidebar
tag
up
139
background-color:#33332D;
color:#9FB4CC;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2 {
background-color:#DB4105;
color:#FFF8E3;
}
a {
text-decoration:none;
font-size:9px;
color:#DB4105;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auteur</title>
</head>
<body>
<header>
<h1>Tout sur HTML5</h1>
</header>
<article>
<header>
<h2> En cela repose la sagesse des anciens </h2>
</header>
<section> Whoaaa !―<em>La sagesse des anciens ?</em>―C est une
lourde responsabilit ! Pourquoi pas―<em>Le mieux que je puisse faire
depuis 2010 ?</em>
<p> Au fait, qui a crit cette chose ?</p>
<h3>Il la fait !↓</h3>
<footer>
<nav><a href="mailto:bill@billzplace.net" rel="author">Bill
Sanders</a></nav>
</footer>
</section>
</article>
</body>
</html>
140
141
Limplmentation de ces types de liens est diffrente selon les navigateurs et il est
prfrable de les utiliser avec llment link an de planier lorganisation dun site
par rapport une page donne plutt que de relier directement une page avec un
lment a.
Pour dnir la cible avec une ancre, il suft dassigner une balise le nom de
lancre de la manire suivante :
<div name="developpeur">
142
color:#BD4A14;
text-decoration:none;
}
nav {
text-align:center;
}
#fsquirell { };
#cats { };
#dogs { };
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ancres</title>
</head>
<body>
<article>
<header>
<nav><a href="#fsquirrel">cureuils volants</a> | <a
href="#chats">Chats</a> | <a href="#chiens">Chiens</a></nav>
<h1>Soins animaliers</h1>
Si vous ntes pas intress par les cureuils volants, vous pouvez
slectionner les ancres "Chat" ou "Chien" pour aller directement votre sujet
de prdilection. </header>
<section ID="fsquirrel">
<header>
<h2>Bien-tre des cureuils volants</h2>
</header>
<h3>Hangars</h3>
<h3>Pistes datterrissage</h3>
<h3>Formation au vol</h3>
<h3>Nourriture</h3>
<h3>Bagages (ces cureuils en ont beaucoup...)</h3>
</section>
<section ID="chats">
<header>
<h2>Bien-tre des chats</h2>
</header>
<h3>Panires</h3>
<h3>Grattoirs</h3>
<h3>Litires</h3>
<h3>Nourriture</h3>
<h3>Souris en peluche</h3>
</section>
<section ID="chiens">
<header>
<h2>Bien-tre des chiens</h2>
</header>
<h3>Niches</h3>
<h3>Promenades</h3>
<h3>Dressage</h3>
<h3>Nourriture</h3>
<h3>Balles en mousse</h3>
</section>
<footer>
<nav><a href="#fsquirrel">cureuils volants</a> | <a
href="#chats">Chats</a> | <a href="#chiens">Chiens</a></nav>
143
</footer>
</body>
</html>
Quand on utilise des ID CSS3 la place dancres sur des terminaux mobiles, on
trouve que la conception nest pas trop contraignante eu gard la petite taille de
lcran. Comme vous pouvez le voir la gure 7.5, les ancres facilitent la navigation
sur la page dun terminal mobile.
la gure 7.5, lcran de gauche illustre la page initiale sur un navigateur Opera
Mini. Quand on clique sur le lien Chiens, la page se positionne directement sur
linformation relative aux chiens. Vous remarquerez que le menu se situe la fois au
sommet et au bas de la page. En gnral, si votre page est sufsamment longue pour
ncessiter des ID pour se dplacer, il est prfrable davoir un menu en haut et en bas
de la page. Si la page est trs longue, vous pouvez fournir un ID llment nav puis
lier chaque section au menu.
Si vous voulez dnir directement un lien vers un ID ou une ancre, vous pouvez
simplement ajouter #nom_ID lURL. Par exemple, si vous voulez crer sur votre site
(ou mme sur un autre site) un lien direct sur les informations relatives aux chats, il
suft de crer le lien suivant :
<a href="http://my.domain.com/IDAncre.html#chats">
144
7.2.3 Target
Jusqu prsent, tous les liens remplaaient la page appelante par une nouvelle page qui
tait charge dans la fentre du navigateur. Vous pouvez cependant utiliser lattribut
target avec la balise <a> pour modier la faon dont une page apparat (on appelle cela
le contexte de navigation). Il existe plusieurs contextes de navigation avec lattribut
target :
_self remplace la page en cours ; cest le comportement par dfaut si aucun
Dans les versions prcdentes de HTML, les lments frame et frameset, qui
taient abondamment utiliss, pouvaient tous les deux tre utiliss comme valeurs de
lattribut target. De la mme manire, les contextes de navigation _parent et _top
taient utiliss pour ouvrir une page dans un cadre diffrent. En HTML5, la principale
utilisation de lattribut target consiste slectionner le contexte _blank par rapport
au comportement par dfaut _self.
145
h1 {
font-family:"Arial Black", Gadget, sans-serif;
color:#060;
}
a {
color:#900;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ouvre une nouvelle page</title>
</head>
<body>
<header>
<h1>Page originale</h1>
</header>
<nav>
<h3><a href="http://www.w3.org" target="_blank">World Wide Web</a></h3>
</nav>
</body>
</html>
146
charger dautres pages Web ou dautres mdias au sein dune seule page Web. Llment
reprsente ce que lon appelle un contexte de navigation imbriqu. La section
Target de ce chapitre a trait des diffrents contextes de navigation en termes
de fentres et donglets diffrents, mais un contexte de navigation imbriqu se produit
quand une page est imbrique lintrieur dune autre page. Fondamentalement, une
balise <iframe> place une page Web lintrieur dune autre page Web.
On peut se poser la question de lintrt dune telle fonctionnalit alors quil suft
douvrir une nouvelle fentre ou un autre onglet. Cela permet en fait aux utilisateurs
davoir une ide de ce quil y a dans ces pages pour quils puissent ensuite sy rendre
sils trouvent leur contenu pertinent.
On peut aussi utiliser les iframes pour placer des vignettes graphiques sur une page,
et ainsi permettre de slectionner diffrentes vignettes an dafcher limage dans sa
taille relle. Vous pouvez ainsi crer une seule page Web o lutilisateur peut visualiser
plusieurs images diffrentes et slectionner les liens graphiques qui afchent limage
sur la mme page, sans quil soit ncessaire dutiliser JavaScript ou Ajax.
147
Cette balise place simplement la page Web source dans le coin suprieur gauche
de la page appelante. An de mieux comprendre les options de la balise iframe, le
programme suivant (iframe.html disponible dans les chiers du chapitre) embarque
deux pages Web diffrentes lintrieur dune page Web et ajoute plusieurs attributs
que vous pouvez voir.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*657BA6,F2EDA2,F2EFBD,F2DCC2,D99379*/
body {
background-color:#F2EDA2;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
color:#657BA6;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Iframe</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Avant iframes</h1>
</header>
<section>
<iframe name="info" width="480", height="320" sandbox="allow-same-origin"
seamless src="http://www.smashingmagazine.com"></iframe>
<iframe name="info2" width="480", height="320" sandbox seamless
src="http://www.w3.org"></iframe>
</section>
<footer>
<h1>Aprs iframes</h1>
</footer>
</article>
</body>
</html>
</body>
</html>
Dans les deux balises <iframe>, vous pouvez voir plusieurs attributs, dont certains
ont dj t utiliss avec dautres lments. Llment iframe lui-mme possde les
sept attributs suivants (plus les attributs HTML5 globaux) :
148
src
srcdoc
name
sandbox
seamless
width
height
149
Figure 7.7 Imbrication de pages Web au sein dune mme page Web.
1. Crez trois pages Web dans lesquelles vous inclurez plusieurs sections avec des
titres et des sous-titres, de telle sorte que lutilisateur devra faire dler lcran
pour voir les sections du bas.
2. Sur chacune des pages Web, dnissez un lien vers une icne (voir Icnes de
liens dans ce chapitre). Cest vous de choisir si vous voulez que chaque page
ait une icne diffrente ou bien quil y ait une icne de site qui soit identique
pour toutes les pages.
3. Crez deux feuilles de styles diffrentes CSS3 (externes) et proposez un accs
ces feuilles de styles alternatives sur tous les pages (voir Feuilles de styles
alternatives dans ce chapitre).
4. Crez une troisime feuille de styles qui ne contiendra que des ID qui seront
utiliss la place dancres. Placez un ID dans chaque section de vos pages.
5. Pour nir, crez des liens sur chacune des trois pages qui renverront aux deux
autres pages et sur tous les ID de chaque page.
6. Prenez le temps de raliser cet exercice. Vous pouvez crer des pages sur
nimporte quel sujet et il ny a pas de raison de se prendre au srieux ( moins
que vous ne pensiez une application pour un client !). Vous navez donc pas
vous proccuper du contenu et vous avez carte blanche pour exprimer votre
crativit.
8
Stratgies de navigation
Objectif
On dsigne habituellement le parcours dun site Web sous le terme de navigation, et
HTML5 accrdite cela en proposant une balise <nav>. La navigation reste simple
quand les sites le sont, mais nimporte quel site Web peut virtuellement tre expos
une navigation inadapte. De la mme manire, une bonne navigation peut rendre
convivial le site le plus complexe et permettre lutilisateur de trouver tout ce quil
recherche.
Dans la mesure o ce livre est consacr HTML5, ce chapitre va vous montrer
comment dnir diffrents systmes de navigation avec les lments spciques de
HTML5. Mais avant de rentrer dans les dtails, vous devez comprendre quelques
concepts gnraux de la navigation Web.
dinterfaces pour le Web dans son ouvrage Designing Interfaces. La plupart des
processus et des modles que traite Tidwell dans son livre sont tudis dans ce
chapitre, mais je nai pas la prtention dtre aussi profond et exhaustif sur ce
sujet ; cest la raison pour laquelle si vous souhaitez obtenir plus dinformation
sur la conception dinterfaces, vous ne devez pas hsiter consulter son livre.
152
153
site. Afcher le nom du lien quand la souris survole un cube ncessite des comptences
en programmation quun concepteur ne possde pas forcment. Si vous voulez crer un
systme de navigation franchement mauvais, il ne vous reste donc plus qu associer
le meilleur concepteur et le meilleur dveloppeur !
Est-il possible dtre un bon concepteur et/ou un bon dveloppeur tout en crant
de bonnes interfaces ? Assurment, mais vous devez y rchir. Vous devez adopter le
point de vue de lutilisateur typique de votre site Web. Qui sont vos utilisateurs ? Est-ce
que ce sont des enfants ou des adultes ? Votre public est-il plutt fminin ou masculin,
ou bien quitablement rparti ? Quelle est sa moyenne dge ? Quel est le style de
lutilisateur ? Sagit-il dhommes daffaire ? Si tel est le cas, quelle est leur activit et
quelle place occupent-ils au sein de leur entreprise ? Est-ce quils sont dirigeants ou
bien employs ? Vous devez dterminer qui sont vos utilisateurs (car vous savez dj
qui vous tes).
Si vous tes un concepteur et que vous crez un site Web pour dautres concepteurs
Web, voulez-vous leur montrer quel bon concepteur vous tes ou bien comment
ils peuvent devenir de meilleurs concepteurs ? De la mme manire, si vous tes
un dveloppeur et que vous crez un site pour dautres dveloppeurs, vous voulez
absolument leur montrer du code qui leur permettra damliorer leurs comptences en
programmation. Les dveloppeurs veulent voir du code, alors que ce nest pas le cas
des concepteurs qui sont plus intresss par les outils et les techniques de conception
(les concepteurs adorent bien entendu le code CSS3 !). Vous devez donc travailler
votre projet de navigation en gardant toujours lesprit ce qui est souhaitable pour
vos utilisateurs.
Le meilleur moyen de savoir si votre interface est correcte consiste la tester avec
des utilisateurs reprsentatifs. Si vous crez un site ducatif pour des coliers, il faut
le tester avec des coliers. De la mme manire, si vous vendez des produits de haute
couture des femmes aises, il nest pas souhaitable de faire tester votre navigation
par des adolescentes. Cela vous prendra un peu plus de temps, mais vous aurez un bien
meilleur site si vous testez votre site avec le type de public qui lutilisera.
Le fait de connatre vos utilisateurs ne signie que vous pouvez vous dispenser de
soigner la conception et dutiliser des technologies sophistiques. Cela signie que
vous devez imaginer ce quils vont penser de votre site. Vous nallez pas changer vos
utilisateurs et vous devez donc raliser le site pour eux, et non pas pour vous. Si le site
ne leur convient pas, ils ny retourneront pas.
154
diffrents tats. Ces autoroutes peuvent tre considres comme les lments globaux
dun priple de 5 000 kilomtres qui permet de relier les deux ctes. Cependant, vous
serez oblig demprunter quelques routes secondaires pour vous connecter au grand
rseau autoroutier.
De la mme manire, dans la navigation globale, vous devez prendre en compte la
navigation entre les liens principaux. Par exemple, supposons que vous ayez un trs
grand site avec une navigation globale dcompose en trois catgories :
Animal
Vgtal
Minral
Il est possible dorganiser les liens de cette navigation globale en crant sur chaque
page la structure suivante :
Animal | Vgtal| Minral
Mais lintrieur de ces catgories gnrales, vous allez avoir besoin de catgories
plus spciques. Par exemple, supposons quun utilisateur veuille trouver une race
particulire de chien : un Saint-Bernard. Un concepteur pourrait proposer le chemin
suivant :
Animal
Mammifre
Chien
Race
Saint Bernard
Chaque sous-menu ayant de nombreux choix, il nous faut examiner les lments
disponibles en HTML5 pour grer ces chemins de navigation dans le cadre dune
navigation globale.
155
background-color:#A6A47D
}
a {
color:#8C1616;
font-size:11px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Navigation par listes</title>
</head>
<body>
<nav> <a href="#">Animal</a> | <a href="#">Vgtal</a> | <a
href="#">Minral</a> |
<ul>
<h3> Animaux</h3>
<li><a href="#">Mammifres</a></li>
<li><a href="#">Poissons</a></li>
<li><a href="#">Oiseaux</a></li>
<ul>
<h3> Mammifres</h3>
<li><a href="#">Chiens</a></li>
<li><a href="#">Chats</a></li>
<li><a href="#">Autres</a></li>
<ul>
<h3> Chiens</h3>
<li><a href="#">Golden Retriever</a></li>
<li><a href="#">Setter irlandais</a></li>
<li><a href="#">Berger allemand</a></li>
<li><a href="#">Saint Bernard</a></li>
</ul>
</ul>
</ul>
</nav>
</body>
</html>
En vous contentant dtudier le code, vous allez sans doute vous rendre compte
que ce type de systme de navigation va rapidement submerger la page. La gure 8.1
illustre le rsultat mme quand le nombre de choix possibles a t considrablement
rduit.
Avec un cran sufsamment grand et des choix abrgs comme ceux que nous
avons utiliss dans notre exemple, on peut envisager davoir un systme de navigation
avec des balises <ul>, mais ce systme de listes est totalement irraliste dans le cas de
terminaux mobiles. La gure 8.2 montre comment la navigation occupe la totalit de
la fentre sur un tlphone mobile.
Comme vous pouvez le constater clairement la gure 8.2, il est ncessaire
denvisager un autre systme de navigation de telle sorte que les rubriques puissent
tre visualises. En fait, ce systme de navigation ressemble plus la carte du site, sujet
que jaborderai plus tard dans ce chapitre, et il ne peut donc pas tre utilis comme
navigation globale.
156
Figure 8.2 La navigation par liste occupe toute la zone daffichage sur un priphrique mobile.
157
Cela peut constituer un moyen pratique de placer tous les liens dun site dans
un petit emplacement et de sen servir comme menu global. Vous pouvez imbriquer
autant de balises <option> lintrieur du conteneur <select> que vous le souhaitez.
An de voir comment cela peut sorganiser dans un systme de navigation globale,
le script HTML5 suivant (NavSelect.html disponible dans les chiers du chapitre)
illustre un exemple simple.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu droulant</title>
</head>
<nav>
<label for="animals">Animaux </label>
<select id="animals" name="global1">
<option value="horses">Chevaux</option>
<option value="dogs">Chiens</option>
<option value="cats">Chats</option>
<option value="rabbits">Lapins</option>
<option value="raccons">Ratons laveurs</option>
</select>
<label for="vegetables">Lgumes </label>
<select id="vegetables" name="global2">
<option value="carrots">Carottes</option>
<option value="squash">Courges</option>
<option value="peas">Petits pois</option>
<option value="rice">Riz</option>
<option value="potatoes">Pommes de terre</option>
</select>
<label for="minerals">Mineraux </label>
<select id="minerals" name="global3">
<option value="tin">tain</option>
<option value="gold">Or</option>
<option value="copper">Cuivre</option>
158
<option value="iron">Fer</option>
<option value="mercury">Mercure</option>
</select>
</nav>
<body>
</body>
</html>
Avec toutes ces balises HTML5, vous vous attendez sans doute une page Web de
taille importante, mais la gure 8.3 montre que cela prend trs peu despace.
Le code HTML5 na pas de code CSS3 pour mettre en forme le texte, et comme
vous pouvez le constater, la police par dfaut du corps du texte est une police avec
empattement alors que la police par dfaut du menu est une police sans empattement.
Quand on utilise CSS3 pour styler, on travaille avec la balise <select> pour attribuer
le style et non pas la balise <option>. Si vous stylez llment option, vous pouvez
styler la famille de police avec dexcellents rsultats, mais les autres formes de stylages
sont imprvisibles entre les diffrents navigateurs.
Figure 8.3 Affichages des choix dun menu avec la balise <select>.
159
<label for="animals">Animaux</label>
<select id="animals" name="global1">
<optgroup label="Chiens">
<option value="hounds">Chien de meute</option>
<option value="work">Chien de travail</option>
<option value="terrier">Terriers</option>
</optgroup>
<optgroup label="Chevaux">
<option value="race">Pur-sang</option>
<option value="work">Cheval de trait</option>
<option value="show">Cheval de parade</option>
</optgroup>
<optgroup label="Lapins">
<option value="pets">Lapin domestique</option>
<option value="pests">Lapin nuisible</option>
<option value="easter">Lapin de Pques</option>
</optgroup>
</select>
</nav>
<body>
</body>
</html>
Lafchage des titres des catgories gnres par llment optgroup diffre selon
les navigateurs. La gure 8.4 illustre les diffrents aspects du mme menu sur plusieurs
navigateurs.
Parmi les cinq navigateurs tests, seuls Firefox et Internet Explorer mettent en
italique les titres optgroup et conservent la combinaison des couleurs quand le menu
souvre. Les autres navigateurs nafchent la bonne combinaison de couleurs que
lorsque le menu est ferm.
160
Les noms des lments form et select sont importants car JavaScript les utilise
comme chemin vers loption slectionne (si vous tes familier avec les tableaux, les
options sont toutes traites comme des lments de tableaux).
Le code JavaScript est plac dans un chier spar car si vous voulez lutiliser dans
un systme de navigation globale, il nest pas souhaitable de le rcrire sur chaque
page. Le code JavaScript suivant doit tre enregistr dans un chier texte nomm
globMenu.js.
function optionMenu()
{
var choice = document.menuNow.global1.selectedIndex;
var urlNow = document.menuNow.global1.options[choice].value;
window.location.href = urlNow;
}
Cela rete le DOM (Document Object Model) HTML5. Le document est la page
Web, menuNow est le nom de llment form, global1 est le nom de llment select,
et selectedIndex est loption slectionne. Comme selectedIndex est un nombre
compris entre 0 et le nombre doptions de la balise <select> du conteneur, il peut tre
utilis pour choisir llment de tableau (option) qui est slectionn. Quelle que soit
la valeur stocke, loption est passe la variable nomme urlNow. Par exemple, la
ligne suivante a une URL relative gale animals/dogs.html :
<option value="animals/dogs.html">Dogs</option>
161
<a href="animals/dogs.html">
Dans ce contexte, une fonction JavaScript diffrente devrait tre crite pour
chaque balise <select> car la fonction utilise une rfrence spcique cette balise
(global1). Un code JavaScript plus sophistiqu pourrait tre dvelopp an dutiliser
des variables pour les diffrents noms des lments, mais la fonction employe ici est
relativement courte et plus facile implmenter.
Pour tester cet exemple, crez des pages Web simples ayant les noms suivants :
horses.html
dogs.html
cats.html
rabbits.html
raccoons.html
Les pages Web peuvent tre minimalistes et ne contenir que leur nom. Puis, dans
le mme rpertoire, saisissez le code HTML5 suivant (NavSelectJS.html disponible
dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="globMenu.js" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu droulant</title>
</head>
<body>
<article>
<header>
<nav>
<form name="menuNow">
<label for="animals">Animaux</label>
<select id="animals" name="global1" ><option value="animals/horses.html">Chevaux</option>
<option value="animals/dogs.html">Chiens</option>
<option value="animals/cats.html">Chats</option>
<option value="animals/rabbits.html">Lapins</option>
<option value="animals/raccoons.html">Ratons laveurs</option>
</select>
<label for="vegetables">Lgumes</label>
<select id="vegetables" name="global2">
<option value="carrots">Carottes</option>
<option value="squash">Courges</option>
<option value="peas">Petits pois</option>
<option value="rice">Riz</option>
<option value="potatoes">Pommes de terre</option>
</select>
<label for="minerals">Mineraux</label>
<select id="minerals" name="global3">
<option value="tin">tain</option>
<option value="gold">Or</option>
162
<option value="copper">Cuivre</option>
<option value="iron">Fer</option>
<option value="mercury">Mercure</option>
</select>
</form>
</nav>
</header>
</article>
</body>
</html>
163
tons de marron, pour la catgorie vgtale, des tons de vert et pour la catgorie
minrale des tons argents. La gure 8.5 illustre un exemple de navigation globale o
les diffrentes pages ont un modle de couleurs qui les diffrencie les unes des autres,
tout en les plaant dans les groupes appropris.
Quand on utilise les plans horizontal et vertical, il est possible de voir simultanment tous les liens globaux et les liens de la rubrique en cours. Une grande partie
164
de la zone dafchage est prise par le systme de navigation, mais avec les crans de
grande taille qui deviennent la norme sur les ordinateurs, cela ne constitue pas un
problme. Avec les tablettes comme liPad qui ont des crans plus petits, cela prend de
lespace sur la zone dafchage utile, mais il ny a rien de catastrophique. En revanche,
sur les tlphones mobiles, particulirement en mode dafchage vertical, lespace du
contenu est considrablement rduit.
Pour crer une zone de liens verticaux avec HTML5, on a simplement besoin de
dnir une page sur deux colonnes en dessous de la zone gnralement rserve au
logo et la barre de navigation globale.
Chacune de ces classes a la mme mise en forme que pour dautres lments, mais
elle est dclare avec le nom de llment spar par le caractre deux-points. Par
exemple, lextrait de code suivant illustre le stylage de la pseudo-classe hover :
a:hover
{
color:#A69055;
}
Quand ce code est ajout une feuille de styles, et lorsque la souris survole le lien
(balise <a>), il modie la couleur de la dnition hover. Bien entendu, les couleurs
dnies pour la balise <a> doivent tre diffrentes de celles de hover, mais vous
pouvez ajouter lintention de lutilisateur des signaux subtils ou agrants que le texte
constitue un lien. De la mme manire, vous pouvez changer dautres caractristiques
en utilisant les pseudo-classes. Les exemples suivants vous donneront quelques ides :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
a:link {
165
color:#cc0000;
text-decoration:none;
}
a:hover {
font-size:14px;
}
a:visited {
color:#00cc00;
text-decoration:none;
}
a:active {
background-color:#ffff00;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pseudo-classes en liens</title>
</head>
<body>
<a href="#">Cliquez ici</a>
</body>
</html>
166
<style type="text/css">
/*141919,2D2B21,A69055,C9B086,FFB88C -- Art japonais*/
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#2D2B21;
background-color:#C9B086;
font-size:12px;
}
.content {
display:table-cell;
width:600px;
padding:15px;
}
aside {
display:table-cell;
width:100px;
background-color:#FFB88C;
padding-right:5px;
}
h1 {
font-family:Papyrus;
color:#2D2B21;
text-align:center;
}
h2 {
color:#A69055;
}
a {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-decoration:none;
color:#141919;
}
a:hover {
color:#A69055;
}
.centerNav {
text-align:center;
}
.indentNav {
margin-left:15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Services gogo</title>
</head>
<body>
<img src="designLogo.png" width="64" height="66" align="left">
<nav class="centerNav"> <a href="#">Conception graphique</a> | <a
href="#">Dveloppement</a> | <a href="#">Conception
dinterface</a> | <a href="#">Architecture de sites</a></nav>
<header>
<h1>Web Services honorables</h1>
</header>
<aside>
<nav class="indentNav"> <a href="#">Aperu gnral</a><br>
<br>
167
<a href="#">Navigation</a><br>
<br>
<a href="#">Abonnement RSS</a><br>
<br>
<a href="#">Iframes</a><br>
<br>
<a href="#">Styles de navigation CSS3</a><br>
<br>
<a href="#">Mesures daudience</a><br>
<br>
<a href="#">Tests de qualit</a><br>
<br>
<a href="#">Ajout doptions mobiles</a><br>
<br>
</nav>
</aside>
<section class="content">
<header>
<h2>Conception dinterface</h2>
</header>
Web Services honorables peut concevoir toutes vos interfaces. Vous pouvez
choisir dans la liste suivante les services que vous dsirez.
<ul>
<li>Interfaces simples de liens textuels</li>
<li>Menus droulants</li>
<li>Liens avec des boutons</li>
<li>Liens avec des listes de donnes</li>
<li>Navigation dans des Iframes</li>
</ul>
Slectionnez lun des liens du menu de gauche pour obtenir plus
dinformations. Assurez-vous galement de consulter nos services de conception
graphique, de dveloppement et darchitecture dans le menu situ en haut de la
page.</section>
</body>
</html>
Quand on excute ce programme, on peut voir que la prsentation est claire bien
quelle offre une grande varit de choix lutilisateur. La navigation globale en haut
de la page offre la totalit des choix principaux, puis sur chaque page lintrieur dune
collection globale, les utilisateurs peuvent choisir des options spciques pour chaque
rubrique slectionne. La gure 8.7 illustre le rsultat dans un navigateur HTML5 sur
lcran dun ordinateur.
Quand on visualise la mme page sur un priphrique mobile, lespace occup sur la
gauche, o le menu vertical a t plac, pousse le contenu vers le bas. Les utilisateurs
doivent ainsi faire dler un peu plus le contenu. Vous noterez aussi que le menu
horizontal en haut de la page est resserr si bien quil tient prsent sur trois lignes.
La gure 8.8 illustre le rsultat sur un tlphone mobile.
Pour les priphriques mobiles, des barres de navigation horizontale deux niveaux
(qui ne poussent pas le contenu en dessous de la zone dafchage) semblent prfrables.
Comme vous pouvez le voir en comparant les gures 8.7 et 8.8, la barre de navigation
horizontale tient sur trois lignes sur le tlphone mobile sans occuper pour autant
trop de place. En revanche, la barre de navigation verticale repousse le contenu (y
168
Les utilisateurs voient licne dune che et cliquent dessus au lieu de cliquer sur
un message textuel. Souvent, les concepteurs utilisent la fois du texte et une image
pour crer un lien vers une autre page, comme dans lexemple suivant :
<a href="page2.html"><img src="flecheDroite.jpg">Page suivante</a>
169
Certains concepteurs crent aussi des icnes qui incorporent du texte, comme cela
est illustr la gure 8.9.
170
charger quune seule chose, ce qui gagnerait du temps car lutilisateur naurait pas
charger ou recharger la totalit de la page. Si vous connaissez quelques rudiments de
JavaScript et dAjax, vous pouvez raliser cela, mais quen est-il si lon se contente de
HTML5 ? Cela est possible !
Cette section tudie la manire dont on fait un lien vers une image et on modie
limage dans un iframe. Quand on cre des applications conues spciquement pour
des priphriques mobiles, on souhaite utiliser le moins de bande passante possible. En
modiant une seule chose sur une page Web, le terminal mobile na besoin de charger
ou recharger quun seul lment, si bien que le temps de rponse est plus rapide.
une image. Par exemple, la ligne de code suivante charge une page vide avec une
image :
<a href=="myGraphic.jpg">Mon image</a>
Quand lutilisateur clique sur le texte du lien, la page en cours disparat et limage
apparat dans le coin suprieur gauche de la nouvelle page.
Le fait de placer une image dans un lment iframe fonctionne comme si lon
plaait une page Web dans un iframe (voir le chapitre 7). Le lien pointe vers la cible
lintrieur de liframe au lieu de pointer vers une autre page Web. Cela signie que
la page Web en cours reste en place et que limage souvre dans liframe.
Le script suivant utilise des icnes pour la navigation, mais au lieu de passer une
autre page, la navigation place une image diffrente dans la zone dafchage principale
(un iframe). En ralisant des versions miniatures des images afcher (que lon appelle
des vignettes), les utilisateurs voient dabord leur slection dans la conception de la
navigation. Cela signie que les vignettes guident lutilisateur vers lafchage en plein
cran.
171
vignettes, nomm thumbs, et un autre pour les images, nomm portraits). Le listing
NavigationIFrame.html est disponible dans les chiers du chapitre.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#F2CF8D;
color:#401E01;
font-size:11px;
}
h1 {
font-family:"Harrington", Arial, sans-serif;
font-size:36px;
color:#8C3503;
margin-left:10px;
}
h4 {
font-family:"Arial Black", Gadget, sans-serif;
color:#8C3503;
margin-left:86px;
}
aside {
margin-left:10px;
}
h5 {
margin-right:40px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Navigation Iframe</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Portrait Studio</h1>
</header>
<aside>
<iframe name="fullSize" width="250", height="312" seamless
src="portraits/man.jpg"></iframe>
</aside>
<section>
<nav> <a href="portraits/man.jpg" target="fullSize"><img
src="thumbs/thumbMan.jpg"></a> <a href="portraits/woman.png"
target="fullSize"><img src="thumbs/thumbWoman.png"></a> <a
href="portraits/boy.jpg" target="fullSize"><img src="thumbs/thumbBoy.jpg"></a>
<a href="portraits/girl.png" target="fullSize"><img
src="thumbs/thumbGirl.png"></a>
<h4>Selectionnez un portrait</h4>
</nav>
172
</section>
<section>
<h5> Toutes les crations sont de <b>Mo Digli Anni</b>, artiste peu connu
habitant Spunky Puddle, dans lOhio. En cliquant sur les boutons des vignettes,
vous pouvez envoyer limage dans une fentre de visualisation plus grande.</h5>
</section>
</article>
</body>
</html>
Quand on teste lexemple, on voit le portrait dun homme puis les quatre vignettes
reprsentant un homme, une femme, un garon et une lle en dessous de limage
lintrieur de liframe. La gure 8.10 illustre la page afche sur lcran dun ordinateur.
Comme vous pouvez le constater la gure 8.10, on demande lutilisateur de
cliquer sur les boutons des vignettes pour voir les diffrents portraits. Linterface est
assez intuitive et lutilisateur sait ce qui lattend quand il clique sur lun des boutons
graphiques. Lintrt de la chose est que seule limage du portrait slectionn est
charge dans liframe et non pas la totalit dune nouvelle page avec tous les boutons
graphiques et les autres composantes de la page.
173
Limage de droite sur la gure 8.11 reprsente le navigateur mobile Safari. Le texte
en bas ne respecte pas la mise en forme CSS3 et continue au-del de la bordure droite
de lcran. Pour autant, les images dans liframe fonctionnent parfaitement et quand
on clique sur une vignette, limage en pleine taille se charge sans recharger la totalit
de la page.
174
TROISIME PARTIE
Multimdia :
images, sons
et vidos
9
Images
Objectif
Une des caractristiques les plus intressantes de HTML5 est sa capacit utiliser
les chiers SVG (Scalable Vector Graphics). Ceux qui se servent de programmes
comme Adobe Illustrator pour crer des dessins vectoriels peuvent enregistrer leurs
chiers au format .svg et les placer directement sur leurs pages Web. Comme les
chiers .svg sont des images au format vectoriel, on peut agrandir ou rtrcir les
images sans perte de rsolution, ce qui nest pas le cas avec les chiers bitmap. Pour
autant, il est toujours possible dutiliser vos images favorites au format bitmap (.jpg,
.gif ou .png) pour les afchages statiques.
Ce chapitre tente de clarier lutilisation des images sur le Web en tudiant les
principaux types dimages que lon peut utiliser, la manire de les placer l o on
le souhaite sur la page Web, et leur optimisation pour un usage sur le Web. Par
ncessit, une grande partie de ce chapitre utilise des applications graphiques que
vous ne possdez peut-tre pas. Parmi ces applications, on peut citer Adobe Illustrator,
Adobe Photoshop et Adobe Fireworks. Vous pouvez cependant les remplacer par
dautres applications, comme Microsoft Paint ou Corel Draw. Enn, pour les dessins
et les photographies, vous allez devoir compter sur vos propres talents artistiques et
vos capacits utiliser les logiciels graphiques ( la rigueur, vous pouvez tlcharger
sur le Web des images libres de droits dans le format de chier dont vous avez besoin).
178
Chapitre 9. Images
mesure au nombre de pixels quelle contient. En gnral, les images de grande taille
en haute dnition contiennent plus de pixels. La taille des images a une consquence
sur le Web : les images les plus lourdes mettent plus de temps circuler sur Internet
et se charger dans une page HTML. Si vous vous tes dj trouv dans la situation
de celui qui regarde xement son cran en attendant le chargement dune page Web
contenant une image de taille importante, vous savez combien cela est frustrant et peut
provoquer des clics incontrls pour actionner le bouton Prcdent du navigateur.
Si vous arrivez comprendre les subtilits des diffrents types de chiers graphiques
et optimiser leur taille, vous tirerez le meilleur parti des images sur vos pages, la
fois en termes daspect et de temps de chargement.
179
Lautre caractristique importante des chiers au format SVG est que lon peut
modier diffrents aspects de limage dynamiquement. Avec JavaScript, vous pouvez
prendre un chier .svg afch sur une page Web et le changer de manire dynamique,
non pas en permutant des gures, mais en modiant un paramtre. Heureusement,
certains outils rcemment sortis facilitent la cration de zones spares modier
et gnrent le code ncessaire pour effectuer ces modications (voir la section
Application pour les chiers SVG dynamiques partir de chiers CS5 Adobe
Illustrator plus loin dans ce chapitre).
180
Chapitre 9. Images
La norme JPEG est un format open source qui ne ncessite loctroi daucune
licence. Il faut cependant noter que certaines fonctionnalits des images au format
JPEG sont brevetes et peuvent ncessiter une licence, mais ces caractristiques ne
sont pas incluses dans la plupart des chiers JPEG si bien que les dveloppeurs et les
concepteurs peuvent utiliser librement le format JPEG.
181
Figure 9.2 Fichier PNG avec un calque prserv et un arrire-plan transparent (illustr dans
un diteur graphique).
chier PNG en fait 225. Nous verrons cependant dans la section suivante comment
conserver les calques tout en rduisant la taille du chier, de manire avoir quand
mme un chier qui se charge rapidement.
182
Chapitre 9. Images
La gure du milieu est limage originale avec ses dimensions originales. Si lon avait
utilis un outil graphique pour agrandir limage, elle napparatrait pas avec des bords
dentels. Vous pouvez constater la gure 9.4 que le mme phnomne se produit
avec des photos numriques.
Limage originale est lextrme gauche alors que limage agrandie montre des
bords dentels et commence se brouiller. Limage lextrme droite est si petite
quil est difcile de distinguer les dtails et de dterminer si elle est crase (les pixels
183
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Distortion dune image Web</title>
</head>
<body>
<!-- Originale -->
<img src="photo.jpg" width="100" height="127">
<!-- largie 400% -->
<img src="photo.jpg" width="400" height="508">
<!-- Rduite 50% -->
<img src="photo.jpg" width="50" height="63.5">
</body>
</html>
Figure 9.4 Photo numrique JPG agrandie et rtrcie avec des attributs HTML5.
Pour trouver la largeur et la hauteur dune image, utilisez la souris pour slectionner
le chier et :
184
Chapitre 9. Images
lisez les valeurs Largeur et Hauteur. Vous pouvez trouver les dimensions dun
chier image en plaant le pointeur de la souris sur le chier.
Sous Mac OS X, faites un Ctrl + clic sur le chier image et slectionnez Obtenir
les informations. Dans la section Plus dinformations, afchez les Dimensions
qui indiquent Largeur x Hauteur.
La plupart des outils Web, comme Dreamweaver, fournissent des informations
sur les dimensions des images. De la mme manire, pratiquement tous les diteurs
graphiques afchent les dimensions des images quand un chier est charg.
teur) ;
Le nombre doctets du chier.
Normalement, le contexte permet de prciser de quelle acception il sagit quand
on parle de taille dune image, mais la plupart du temps, le terme taille fait rfrence
au nombre doctets du chier, alors que le terme dimensions fait rfrence la taille
de limage lcran.
Adobe Photoshop est une application couramment utilise pour retoucher la taille
et la qualit des images. De plus, Photoshop fournit des informations visuelles que
les concepteurs et les dveloppeurs peuvent utiliser pour dcider du pourcentage de
compression que limage peut supporter avant que son apparence ne se dgrade. Les
gures 9.5 et 9.9 illustrent ce processus (les gures 9.6 9.8 montrent des informations
sur les chiers et la manire dont elles apparaissent sur une page Web).
185
Figure 9.5 Affichage dune image et de sa taille sous quatre formes diffrentes.
Pour se faire une ide plus prcise, les deux chiers extrmes en termes de qualit
Web sont enregistrs sur le disque, puis (sur un Macintosh) on visualise la taille de
chaque chier (voir la gure 9.6).
Si lon examine la gure 9.6, on saperoit que les deux chiers ont les mmes
dimensions (432 x 343), mais que lun pse 12 Ko alors que lautre en fait 139 Ko. Les
tudes sur la perception ont montr que lexamen des diffrences minimes a tendance
les attnuer, alors que les diffrences extrmes apparaissent clairement ; cest la
raison pour laquelle quand on commence faire des ajustements sur les images, il est
prfrable de commencer par les grandes diffrences. La gure 9.7 illustre deux chiers
sur une page Web.
Comme vous pouvez le voir, limage de qualit la plus basse ( gauche) et limage de
qualit la plus leve ( droite) sont trs similaires. Avec dautres images sur une page
Web, des diffrences de qualit pourraient apparatre, mais avec les caractristiques
de celles qui sont illustres la gure 9.7, la rduction de la taille ne modie pas
tellement lapparence sur le Web.
186
Chapitre 9. Images
Figure 9.7 Fichiers JPEG en haute qualit et en basse qualit sur une page Web.
On peut constater une plus grosse diffrence avec des photos numriques au format
JPEG. la gure 9.8, la photo de gauche est en qualit la plus basse (8 Ko) et celle
de droite est en qualit la plus leve (115 Ko).
Les diffrences entre les deux photos sont minimes, mais la diffrence en kilooctets
est assez importante (8 Ko contre 115 Ko). Sur un cran dordinateur, limage de
gauche de la gure 9.8 a une dnition plus pauvre autour des bords, mais si la majeure
partie du public dun site Web a une trs faible bande passante disponible, la rduction
de la taille des chiers JPEG ne rduira pas de manire signicative la qualit des
images.
187
Limage de la gure 9.8 a t prise avec une webcam, et des photos numriques
prises par un appareil dot dun capteur de grande qualit montreraient beaucoup plus
de dtails qui seraient susceptibles dtre perdus avec la perte dinformations induite
par la rduction de la taille des chiers. Mais les photos numriques en trs haute
rsolution doivent tre rduites considrablement si lon veut sen servir pour le Web.
Quel que soit le type dappareil photo que vous utilisez, une image bien claire
paratra toujours meilleure quune image mal claire. Tout ce que lon voit (et votre
appareil photo voit) est la rexion de la lumire sur les objets. Si vous accordez un
peu dattention lclairage de votre sujet, vos photos numriques seront meilleures.
Vous navez pas besoin de la lumire dun studio pour prendre de bonnes photos,
mais en ajoutant correctement de la lumire vous pourrez supprimer plus dinformations du chier tout en conservant une qualit sufsante pour lafcher sur le Web.
Voici quelques conseils :
1. Utilisez un clairage indirect. Si vous prenez des photos quand il y a un ciel
nuageux, les photos seront en gnral meilleures. Cela est d au fait que les
nuages diffusent la lumire (avez-vous dj vu ces photos o les malheureux
sujets plissent les yeux face au soleil ? Non seulement ils font une drle de
tte, mais les photos sont surexposes). Pour les photos dintrieur, dirigez une
lumire sur un papier blanc et faites-la rchir sur le sujet. Une feuille de
papier aluminium fait trs bien laffaire pour diffuser la lumire.
2. Utiliser la lumire naturelle si possible. Si vous prenez des photos dintrieur,
ouvrez les rideaux et les stores pour laisser pntrer la lumire naturelle.
188
Chapitre 9. Images
189
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test SVG</title>
</head>
<body style="background-color:#BAD9CB" >
<!-- Safari, Chrome et Opera -->
<img src="logo500x400.svg" width=100 height=80>
<img src="logo500x400.svg" width=200 height=160>
<img src="logo500x400.svg" width=300 height=240><br>
<img src="logo500x400.svg" width=500 height=400>
<!-- Firefox et Opera
<object width=100 height=80 type="image/svg+xml"
data="logo500x400.svg"></object>
<object width=200 height=160 type="image/svg+xml"
data="logo500x400.svg"></object>
<object width=300 height=240 type="image/svg+xml"
data="logo500x400.svg"></object><br>
<object width=500 height=400 type="image/svg+xml"
data="logo500x400.svg"></object>
-->
</body>
</html>
Au cours de la rdaction de ce livre, Firefox nutilisait pas la balise <img> avec les
chiers .svg, mais ncessitait la place lemploi de la balise <object> (le navigateur
Opera quant lui fonctionne avec les deux formats). La gure 9.10 illustre le rsultat
et vous pouvez voir que le logo parat identique, quelle que soit la taille dans laquelle
il est afch.
190
Chapitre 9. Images
Figure 9.10 Image SVG modifie sans distorsion en changeant des attributs.
<style type="text/css">
img {
filter:gray;
}
</style>
La gure 9.11 illustre une image en couleur (voir la gure 9.8) qui est transforme
en niveaux de gris uniquement par lutilisation de code CSS.
Grce cette technique, vous pouvez voir rapidement laspect de limage en
niveaux de gris avant de modier limage. Si vous mettez jour un site et que vous
souhaitez visualiser les images en niveaux de gris, vous pouvez ajouter le code CSS
et tester dabord avec Internet Explorer. Si vous voulez diminuer la taille des chiers
tout en conservant une certaine qualit, vous pouvez passer vos images couleur JPEG
en niveaux de gris, ce qui divisera leur taille par deux.
191
192
Chapitre 9. Images
body {
background-color:#F2F2F2;
color:#0D0D0D;
font-family:Verdana, Geneva, sans-serif;
}
h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Placement simple</title>
</head>
<body>
<article>
<header>
<h1>La gym du dveloppeur Web</h1>
</header>
<section>
<header>
<h2>Sance dentranement du dveloppeur</h2>
</header>
<figure> <img src="webDeveloper.gif" width="250" height="263"
align="left"> </figure>
Vous y avez dj pens. Nest-ce pas le moment de faire vos balises ?
Dveloppez vos lments et vos attributs HTML5 la Salle de gym du Web. Une
fois que vous serez chauff, vous pourrez ajouter une petite balise
<canvas> et vous lancer dans une bonne sance de CSS3. La salle est
ouverte tous les jours et 24 heures sur 24 ; de plus, elle est accessible
partir de nimporte quel endroit de la plante ! Tous vos amis sont l et ils
ont mme ajout des vidos leurs pages Web ! Vous aussi, vous pouvez le
faire ! Ne laissez pas passer un autre jour pour raliser votre rve de
devenir un dveloppeur Web. Commencez maintenant ! </section>
</article>
</body>
</html>
Le placement droite ou gauche de limage est simple car il suft dassigner les
valeurs "right" ou "left" lattribut align. La gure 9.12 illustre le placement de
limage la fois gauche et droite.
la gure 9.12, la page de droite parat correcte, mais la page de gauche serre
le texte trop prs de limage. Vous noterez galement que la page est totalement
dpendante de la taille et des paramtres de page de lutilisateur. En dautres termes,
lutilisation de lattribut align pour le placement des images peut ruiner laspect de
vos pages. La gure 9.13 illustre deux autres afchages de la mme page qui nont pas
le mme aspect.
la gure 9.13, limage de gauche afche un texte dissmin sur toute la page,
alors que limage de droite, qui est visualise sur un tlphone mobile, montre que le
193
texte ne safche que sur une largeur dun mot, la totalit du texte napparaissant pas
dans la zone dafchage.
194
Chapitre 9. Images
195
<section>
<header>
<h2>Sance dentranement du dveloppeur</h2>
</header>
<figure> <img src="flexImages/WebDeveloper.gif" name="pix" align="left">
</figure>
Vous y avez dj pens. Nest-ce pas le moment de faire vos balises ?
Dveloppez vos lments et vos attributs HTML5 la Salle de gym du Web. Une
fois que vous serez chauff, vous pourrez ajouter une petite balise
<canvas> et vous lancer dans une bonne sance de CSS3. La salle est
ouverte tous les jours et 24 heures sur 24 ; de plus, elle est accessible
partir de nimporte quel endroit de la plante ! Tous vos amis sont l et ils
ont mme ajout des vidos leurs pages Web ! Vous aussi, vous pouvez le
faire ! Ne laissez pas passer un autre jour pour raliser votre rve de
devenir un dveloppeur Web. Commencez maintenant ! </section>
</article>
</body>
</html>
Commencez par tester le programme sur votre ordinateur. Vous devriez voir
exactement le mme rsultat que celui qui est illustr la gure 9.12. Essayez ensuite
ce programme sur un priphrique mobile : au lieu de voir safcher une grande image
qui pousse le texte sur le ct, vous voyez une image plus petite qui est encadre
parfaitement par le texte, comme le rsultat obtenu sur votre ordinateur. Cela est d
au fait que la page Web a t capable dutiliser JavaScript pour dterminer si la page
tait charge sur un iPhone ou sur une autre plateforme.
Placez la page Web ainsi que le dossier contenant les deux images dans le mme
rpertoire sur un serveur. Quand vous testez cette page, on dirait quelle a t faite
pour un iPhone, mais en fait elle a t faite pour iPhone ou pour nimporte quel autre
priphrique. Grce au code JavaScript, vous pouvez vraiment tendre les possibilits
de HTML5.
Le code JavaScript utilis dans cet exemple minimaliste peut tre expliqu de la
manire suivante :
On place le contenu de navigator.appVersion dans une variable nomme envir
(abrviation denvironnement).
Comme navigator.appVersion gnre une description longue, on ne rcupre
que la partie des rsultats qui nous intresse et on regarde si elle contient
iPhone ou non.
On cre un nouvel objet image appele imageNow.
On initialise une variable nomme showNow (que nous utiliserons dans la
fonction).
On cre une fonction qui demande : Sagit-il dun environnement diPhone ?
Si tel est le cas, on utilise la petite image. Dans le cas contraire, on utilise
la grande image (il y a une bizarrerie dans Opera Mini : JavaScript retourne
"(iPhon" quand on extrait les six premiers caractres de navigator.appVersion ;
le code doit donc demander sil trouve les deux valeurs, "(iPhon" ou "iPhone"),
ce qui montre le ct accommodant de JavaScript).
196
Chapitre 9. Images
9.3.3 Application pour les fichiers SVG dynamiques partir de fichiers CS5
Adobe Illustrator
Adobe Illustrator CS5 (en abrg AI) possde une nouvelle fonctionnalit, Adobe
Illustrator CS5 HTML5 Pack, qui est disponible http://labs.adobe.com. Cette
fonctionnalit est conue pour permettre aux graphistes utilisant AI de convertir
facilement leurs chiers .ai en chiers .svg contenant des parties qui peuvent tre
197
modies dynamiquement avec HTML5. Pour vous donner une ide de la manire
dont cela fonctionne, lexemple suivant commence avec une image simple dans AI.
Elle possde deux calques et sur lun des calques, le concepteur dsire une couleur
variable qui puisse tre code en HTML5. Le calque auquel on va donner une
caractristique variable est slectionn et afch dans le panneau Apparence (voir la
gure 9.15).
Figure 9.15 La couleur de remplissage est dfinie comme une variable dans Adobe Illustrator
CS5.
Le (X) de la gure 9.15 indique que la couleur de remplissage (Fill) est une variable
qui peut tre modie avec HTML5. An de pouvoir modier cette caractristique (la
couleur de remplissage dans ce cas), AI gnre le code pour le chier SVG qui peut
tre visualis et/ou modi pendant la conversion du chier .ai en chier .svg. Au
cours du processus de conversion, le concepteur clique sur le bouton Afcher le code
SVG, et trouve le nom du calque qui possde une caractristique variable. Dans cet
exemple, voici le code spcique SVG :
<g id="Button">
<ellipse fill="param(SVGID_2__FillColor) #A35563" cx="50" cy="50" rx="40"
ry="40.5"/>
</g>
Lidentiant ayant la valeur Button est le nom du calque dans AI. La valeur param,
SVGID_2__FillColor, est gnre automatiquement par AI.
Pour exploiter les informations SVG dans un programme HTML5, le chier .svg
doit tre rfrenc dans un lment <object> et le paramtre dune balise <param>.
Le chier JavaScript Param.js est aussi gnr automatiquement par AI et doit tre
charg dans conteneur <head> an que Firefox analyse correctement le code. Le code
suivant (AI2svg.html disponible dans les chiers du chapitre) fonctionne avec les
navigateurs Firefox, Safari, Chrome et Opera, mais il existe certaines diffrences
dafchage.
198
Chapitre 9. Images
<!DOCTYPE HTML>
<html>
<head>
<script src="Param.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AI -> SVG</title>
</head>
<body>
<article>
<section>
<figure>
<object type="image/svg+xml" data="butnBkground.svg">
<!--Pas de balises param-->
</object>
</figure>
<figure>
<object type="image/svg+xml" data="butnBkground.svg">
<param name="SVGID_2__FillColor" value="#cc0000" />
</object>
</figure>
</section>
</article>
</body>
</html>
Figure 9.16 Le fichier original AI est transform en un fichier au format SVG avec une couleur
de remplissage variable.
Les chiers Param.js et .svg doivent tre dans le mme dossier que la page HTML5,
tout comme les feuilles de styles externes CSS3 et les chiers graphiques sont censs
se trouver dans le mme dossier que le code HTML5 qui les appelle, ou bien dans le
199
chemin spci par le code HTML5. Ce qui est intressant dans cette technique, cest
que les concepteurs et les dveloppeurs peuvent se concentrer sur les balises HTML5
alors quAdobe Illustrator CS5 soccupe de la gnration du code JavaScript et des
noms des paramtres. Bien entendu, cela implique que les concepteurs sachent utiliser
les images vectorielles et crent des fonctionnalits dynamiques dans leurs images AI.
5. En utilisant lapplication graphique que vous avez dniche sur le Web, crez
une version en qualit suprieure et une version en qualit basse de chacun
des trois types de chiers.
6. En utilisant HTML5 et CSS3, crez une page Web comportant trois lignes.
Sur le ct gauche placez les images en qualit suprieure et sur le ct droit,
placez les images en qualit basse.
7. Entre toutes les images, placez un texte de remplissage de votre choix.
8. Vous pouvez chercher sur Internet le clbre texte de remplissage lorem ipsum.
La gure 9.17 illustre le format gnral de la page Web.
Cet exercice a deux objectifs :
Vous entraner placer du texte autour dimages en utilisant les techniques
CSS3 que vous avez apprises prcdemment car lemploi de lattribut align de
la balise <img> a de srieuses limites.
Faire passer lide que toutes les modications sur les images doivent tre
200
Chapitre 9. Images
Figure 9.17 Affichage des diffrentes sortes et qualits dimages avec du texte.
Ceux qui dsirent exploiter les images vectorielles peuvent tester Adobe Illustrator
CS5 HTML5 Pack. Si vous ne possdez pas Adobe Illustrator CS5, vous pouvez
tlcharger gratuitement une version dvaluation valable 30 jours. Tentez de crer
des parties variables dans une conception AI en utilisant plusieurs calques avec des
noms qui deviendront les noms des ID du paramtre que vous modierez.
10
Son
Objectif
Lajout de sons aux pages Web permet aux dveloppeurs de crer une large palette
de sites Web. Les sites qui jouent de la musique, qui fournissent un contenu ducatif
ou bien qui ajoutent des effets sonores tendent les possibilits de ce que lon peut
raliser avec HTML5. Ce chapitre tudie la manire de prparer des sons pour le
Web et leur utilisation pour rendre vos pages Web sonores.
Vous apprendrez travailler avec les diffrents attributs et paramtres de la balise
<audio>. Vous verrez aussi comment les diffrents navigateurs grent le son et les
diffrents chiers sonores. Comme pour les images, des programmes spcialiss sont
disponibles pour crer des chiers audio et les modier. Aprs avoir tudi les
lments et les attributs HTML5 de base, ce chapitre vous montrera donc comment
crer des sons pour vos sites Web.
202
Lattribut src fonctionne de la mme manire que pour une balise <img> : il sagit
dune rfrence la source du chier. Mais pour couter le chier audio, on a besoin
dattributs.
10.1.1 Autoplay
Lattribut autoplay se passe dexplication. Ds que la page se charge, le chier sonore
commence tre jou. Avant dajouter lattribut autoplay, il est souhaitable de
sassurer que lutilisateur est bien daccord pour couter les sons que vous jouez. Si
vous voulez faire fuir vos utilisateurs, le plus sr moyen est davoir un son continu qui
est jou automatiquement. Ce souci mis part, le script suivant (AudioBasique.html
disponible dans les chiers du chapitre) montre comment crer une page simple qui
commence jouer de la musique ds quelle est charge :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Audio de base</title>
</head>
<body>
Le son est entre les lignes<br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br>
<audio src="jazz.wav" autoplay></audio>
<br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </body>
</html>
Vous pouvez tester ce script avec nimporte quel navigateur, except Google
Chrome car cest le seul qui ne reconnat pas les chiers sonores au format .wav.
Utilisez la place un chier .mp3 ou .ogg pour tester Chrome.
10.1.2 Controls
Comme nous vous lavons fait remarquer, si votre son (musique, effets sonores,
conversation, etc.) ennuie les utilisateurs, ils ne reviendront pas sur votre site. Dans ces
conditions, comment faire pour contrler le son ? Le moyen le plus simple est dajouter
lattribut controls. Comme pour autoplay, vous navez pas fournir de valeur et il
suft de linclure la balise <audio> pour quil apparaisse automatiquement. Testez le
programme suivant (Controles.html disponible dans les chiers du chapitre) :
<!DOCTYPE HTML>
<html>
<style type="text/css">
/* 694703,A83110,E89F06,F5D895,B3CF83 */
203
body {
background-color:#B3CF83;
font-family:Verdana, Geneva, sans-serif;
color:#694703;
}
h1 {
font-family:Braggadocio, "Arial Black";
color:#A83110;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Contrles</title>
</head>
<body>
<article>
<header>
<h1>Veille Jazz</h1>
</header>
<section>
<p>Cliquez sur le triangle pour dmarrer la musique : </p>
<audio src="mists.ogg" controls></audio>
<p>Le symbole des deux barres verticales (||) arrte la musique.</p>
</section>
</article>
</body>
</html>
Quand vous excutez ce programme, assurez-vous dutiliser un navigateur compatible avec le chier audio (employez un chier .wav si le type de chier .ogg ne
fonctionne pas avec votre navigateur). En fonction du type de navigateur utilis, vous
verrez que les contrles sont diffrents. La gure 10.1 illustre laspect des diffrents
navigateurs (Google Chrome est prsent alors que la musique est en cours de lecture).
La barre de contrle audio est classique et le bouton de dmarrage en forme de
triangle se situe gauche, alors que le bouton de contrle du volume se situe droite.
Le bouton stop/pause fonctionne de manire identique sur tous les navigateurs, mais
les graphismes sont uniques (ces diffrences ne plairont sans doute pas aux concepteurs
qui tentent de crer des pages avec un contenu audio totalement compatible avec tous
les navigateurs).
Le fait de donner une certaine forme de contrle aux utilisateurs est essentiel.
Le navigateur Chrome offre une belle grosse barre qui permet lutilisateur de voir
clairement o il en est de lcoute du chier audio. Pour les contenus pdagogiques,
la barre verticale que vous pouvez voir dans le navigateur Chrome la gure 10.1 est
importante car ltudiant peut revenir en arrire pour rcouter certaines parties dune
leon qui sont difciles comprendre.
10.1.3 Preload
Lattribut preload de la balise <audio> peut se rvler important car il commence
le prchargement du contenu audio avant quil ne soit jou. De cette manire,
204
205
le chier. Quand lutilisation dun chier audio est incertaine, il est cependant
raisonnable de charger les mtadonnes car cela consomme peu de ressources
Internet.
auto : si lattribut preload est prsent, il prcharge automatiquement les
informations du chier audio. Lassignation auto agit simplement comme un
rappel que le chier va tre prcharg (cest comme si lon navait assign
aucune valeur lattribut preload).
Plus votre public sera vari, plus vous aurez de contenus audio sur vos pages Web,
ce qui rendra souhaitable lutilisation des options de lattribut preload.
10.1.4 Boucle
Quand on veut quun son se rpte indniment, on utilise une boucle. Cela a
lavantage que vous pouvez prendre un morceau de musique relativement court et le
rpter de telle manire quil apparatra comme une composition complte. De cette
manire, vous minimisez lutilisation des ressources Internet et disposez dune musique
en continu. La syntaxe dutilisation est similaire celle des autres attributs qui agissent
comme des interrupteurs : ils sont actifs ou inactifs. Voici un exemple :
<audio src="Shadows.wav" autoplay loop></audio>
Cette ligne porte en elle les germes de sa propre destruction. Pour de multiples
raisons, les utilisateurs ont tendance vouloir dsactiver le son. Vous pouvez utiliser
JavaScript pour raliser cela, mais il est plus simple dajouter lattribut controls et de
laisser lutilisateur dsactiver le son. Cependant, certains concepteurs, juste titre, ne
souhaitent pas incorporer la barre de contrle dans leurs pages Web car ils pensent
quune jolie musique fait partie intgrante de la conception. Dans ce cas, il faut songer
laborer une routine JavaScript pour dsactiver la musique. Mme si le morceau de
musique est magnique, sa rptition incessante sapparente du lavage de cerveau,
ce qui est interdit par la Convention de Genve.
206
MP3
WAV
OGG
Chrome
Oui
Non
Oui
Firefox
Non
Oui
Oui
Internet Explorer 9
Oui
Non
Non
Opera
Non
Oui
Non
Safari
Oui
Oui
Non
La corve davoir crer plusieurs versions des chiers audio risque dtre fastidieuse, mais mme si vous programmez cela en JavaScript, vous aurez besoin de
plusieurs versions des mdias (au chapitre 9, rappelez-vous quil nous a fallu plusieurs
versions des chiers graphiques pour les plateformes mobiles et non mobiles et que nous
avons utilis JavaScript pour savoir quelle page devait tre afche sur un iPhone).
207
Toutes les valeurs doivent tre des types MIME valides. Les types valides suivent
la rgle media-type dnie dans les spcications W3C de HTML5. Lattribut type
est optionnel, mais si votre site a un trac important, il vous aidera supprimer tout
appel inutile. Si vous voulez creuser cette question, vous devez aussi vous pencher sur
le paramtre codec qui est expliqu dans la section suivante.
208
codec permet de ltrer les types de codecs que le navigateur ne sait pas lire. Par
exemple, tous les chiers .ogg suivants ont des codecs diffrents :
<source src="songFest.ogg" type="audio/ogg; codecs=vorbis">
<source src="songFest.spx" type="audio/ogg; codecs=speex">
<source src="audio.oga" type="audio/ogg; codecs=flac">
Vous devez donc vous souvenir que les codecs et les types de chiers sont deux
choses diffrentes. Si vos pages Web peuvent utiliser des informations compltes sur
les codecs dun chier, il est prfrable de le faire. Dans le cas contraire, certains
navigateurs peuvent tenter de jouer un son pour nir par trouver que le codec est
incompatible.
Certains types de chiers audio possdent une large gamme de codecs. Lextrait
de code suivant illustre des codecs typiques pour tous les chiers sonores HTML5 qui
peuvent tre lus par les navigateurs HTML5 :
<audio controls>
<source src="sound.ogg" type="audio/ogg; codecs=vorbis">
<source src="jazz.mp3" type="audio/mpeg; codecs=mp3">
<source src="Shadows.wav" type="audio/wav; codecs=wav">
</audio>
Lextrait ci-dessus nafche pas tous les codecs possibles de tous les types audio,
mais il reprsente les principaux types de codecs utiliss sur Internet.
209
mais certains microphones sont livrs avec des pilotes que vous devez installer (les
instructions dinstallation sont fournies avec le microphone).
Pour choisir un microphone, utilisez le chemin suivant : Panneau de conguration
> Matriel et audio > Grer les priphriques audio. Quand la fentre Son souvre,
slectionnez longlet Enregistrement, et vous verrez une liste de priphriques denregistrement disponibles, comme ceux qui sont illustrs la gure 10.2.
Vos priphriques denregistrement peuvent tre diffrents, mais en gnral vous
avez au moins le choix entre microphone interne ou microphone ligne entre. Aprs
avoir fait votre choix, cliquez sur le bouton OK, et vous tes maintenant prt ouvrir
lapplication Magntophone.
Quand vous tes prt dmarrer lenregistrement, cliquez sur le point rouge et
commencez parler. Au fur et mesure que vous parlez, vous allez voir une barre
verte qui apparat ct du chronomtre. Si cette barre ne se dplace pas quand vous
parlez, cela signie que votre microphone ne fonctionne pas correctement. Dans le
210
cas contraire, vous allez voir la barre verte se dplacer au fur et mesure que vous
parlez. Quand vous avez termin, cliquez sur le bouton Arrt de lenregistrement
(un carr bleu ; dans lapplication Magntophone sous Windows XP, le bouton Arrt
de lenregistrement est un rectangle noir juste ct du point rouge qui dmarre
lenregistrement).
Quand on clique sur le bouton Arrt de lenregistrement, une nouvelle fentre
Enregistrer sous souvre et vous pouvez slectionner le rpertoire o vous voulez sauvegarder votre enregistrement audio. Comme nous lavons dj mentionn, Windows 7
ne permet denregistrer quau format .wma (Windows Media Audio). Si vous utilisez
la version Windows XP, slectionnez Enregistrer ou Enregistrer sous pour ouvrir une
bote de dialogue et sauvegarder le chier au format .wav (et pas .wma !).
Conversion des fichiers
Si vous utilisez des fichiers audio pour des publics varis, vous allez avoir besoin dune
de ces deux applications :
Un diteur de sons qui enregistre les fichiers audio dans les formats .wav, .mp3 ou
.ogg.
Un programme de conversion. Une simple recherche sur le Web vous en offrira
plusieurs. Par exemple, si vous utilisez le Magntophone de Windows 7, vous aurez
besoin dun programme pour convertir le format .wma en .mp3, .wav ou .ogg. En
gnral, le processus est assez simple, quil sagisse dun Mac ou dun PC.
Une grande varit de programmes de conversion est disponible, mais on peut en
trouver pour Windows 7 http://software-download.name/audio-converter-windows7/. Pour Mac, jai test Switch Sound File Converter (http://download.cnet.com/SwitchAudio-Converter/3000-2140_4-10703967.html) et je lai trouv facile utiliser ; il
convertit les fichiers sonores Mac classiques (comme les fichiers .aiff) en fichiers
audio reconnus par les navigateurs HTML5. Effectuez une recherche sur le Web et
vous trouverez beaucoup dautres convertisseurs pour Windows et Mac.
211
consacr Flash, il met votre disposition plus de 7 000 effets sonores gratuits et libres
de droits. Vous pouvez de plus les tlcharger au format .wav ou .mp3, si bien quils
sont prts tre utiliss sur une page Web HTML5. Si vous effectuez une recherche
sur le Web, vous pouvez trouver pratiquement nimporte quel effet sonore.
Si vous voulez enregistrer vos propres effets sonores, vous pouvez utiliser de simples
bruits domestiques et lapplication denregistrement de votre ordinateur. Par exemple,
un chien qui aboie, le bruit dun avion, ou nimporte quel autre son que vous pouvez
enregistrer (soyez cependant prudent avec la musique qui nest pas libre de droits).
9. Dans ce dossier, placez les pages suivantes (SonTransition.html et SonOuverture.html disponibles dans les chiers du chapitre).
Page de dmarrage sans son
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
font-size:24px;
text-decoration:none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Son de transition</title>
</head>
<body>
212
Enregistrez les pages HTML5 dans le mme dossier que les chiers sonores. Testez
les pages HTML5 avec plusieurs navigateurs. Quand on clique sur le lien, cela ouvre
une page Web et la balise <audio> avec lattribut autoplay doit jouer un son de clic
juste aprs le chargement de la page. Lide est que le son se joue presque en mme
temps que le clic, comme si ctait le clic sur le lien qui avait produit le son. Si la page
met un peu trop de temps se charger, le son de clic se produit quand la page safche,
ce qui nest pas leffet dsir.
Au moment de la rdaction de cet ouvrage, les navigateurs Opera et Firefox sur
Macintosh ne fonctionnaient pas quand lattribut type tait ajout la balise <source>,
mais cela marchait avec Safari et Chrome. Cependant, quand lattribut type tait
omis, les pages Web fonctionnaient parfaitement avec tous les navigateurs HTML5
pour Macintosh. Lors des tests sous Windows 7, les dernires versions de Firefox et de
Safari ne gnraient pas de son, mais Opera et Chrome fonctionnaient (cest la raison
pour laquelle les dveloppeurs Web vieillissent vite). HTML5 est encore jeune et de
nombreuses fonctionnalits sont encore en dveloppement, mais il est possible quau
moment o vous lirez ce livre ces problmes soient rsolus.
213
Avec JavaScript, on dispose de solutions bien plus lgantes, mais lutilisation diframe
est fonctionnelle.
Les quatre pages HTML5 suivantes sont composes dune page qui charge les trois
autres pages dans un iframe. Quand chaque page se charge, elle joue un effet sonore :
un aboiement, un cri et une explosion. Lutilisateur voit liframe passer la couleur du
bouton du haut-parleur sur lequel il a cliqu et entend leffet sonore, sans quune ligne
de JavaScript nait t utilise. La gure 10.4 illustre ce que lutilisateur voit quand il
clique sur licne du haut-parleur bleu.
Vous aurez besoin de tlcharger (ou de crer) trois sons, chacun tant enregistr
la fois au format .wav et .mp3. Utilisez des effets sonores de courte dure et quand
vous cliquerez sur chaque bouton, le son sera jou quand la page sera charge dans
liframe. La page charge ne comporte rien dautre quun son et, pour les besoins de la
dmonstration, elle a une couleur darrire-plan qui correspond la couleur de licne
du haut-parleur. Placez toutes les pages et les six chiers sonores dans le mme dossier
(les chiers suivants sont disponibles dans les chiers du chapitre : SonIFrame.html,
son1.html, son2.html, son3.html).
Une page avec un iframe appelle dautres pages avec des effets sonores
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h3 {
color:#cc0000;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sons dans un iFrame</title>
</head>
<body>
214
<article>
<header>
<h3>Testeur de sons</h3>
<iframe name="ifSound" width="125" height="10"></iframe>
</header>
<section> <a href="son1.html" target="ifSound"><img src="Redspeaker.gif"
width="40" height="40"></a> <a href="son2.html" target="ifSound"><img
src="Greenspeaker.gif" width="40" height="40"></a> <a href="son3.html"
target="ifSound"><img src="Bluespeaker.gif" width="40" height="40"> </a>
</section>
</article>
</body>
</html>
215
Assurez-vous de tester ces pages sur diffrents navigateurs HTML5. Essayez aussi
de crer vos propres sons (vous pouvez embaucher votre chien, votre chat et un
perroquet).
11
Vido
Objectif
La vido est lune des fonctionnalits les plus importantes qui ont t rajoutes
HTML5. Si vous avez dj frquent YouTube, vous tes conscient de la puissance
quexerce la vido sur le Web. De la mme manire, cela fait des annes que les
utilisateurs dAdobe Flash ont incorpor des vidos dans leurs programmes, si bien
que la vido sur le Web nest pas vraiment une nouveaut. Pourtant, les nouvelles
fonctionnalits de HTML5 permettent daccder une vido directement partir
dune page Web, et cest quelque chose que HTML navait pas t capable de faire
dans ses prcdentes versions sans un lien vers un chier Flash (.swf) ou tout autre
chier binaire qui diffusait la vido indpendamment des balises places dans le
chier HTML.
Il faut cependant apporter ici une prcision importante : la vido que vous afchez
sur votre page Web nest pas vritablement une vido diffuse en streaming ; il sagit
en fait dun type de tlchargement progressif. Au fur et mesure que la vido est
tlcharge partir du serveur Web, elle est afche par la page Web, si bien que le
dbit nest pas garanti. En fait, la plupart des vidos cres par les adeptes de Flash
appartiennent trs probablement ce type de vido. Pour le moment, la diffusion de
la vido en streaming ncessite un serveur de vido streaming tel quAdobe Flash
Media Server. On peut cependant sattendre des dveloppements de vritable
streaming au fur et mesure que la vido HTML5 va gagner en popularit.
Si vous avez lu le chapitre 10, vous retrouverez certaines balises que nous avons dj
tudies, comme la balise <source>, mais avec une orientation sur le chargement et
la lecture de vidos.
218
Pour tester ce chier, vous aurez besoin du navigateur Safari sur Macintosh car
pendant lcriture de cet ouvrage, ctait le seul navigateur qui fonctionnait avec ce
type de vido.
Si vous excutez le programme sous Safari, vous devez attendre de voir apparatre
une image avant de lancer la vido. Quand limage apparat, cela signie que la vido
est prte et vous pouvez cliquer sur la che pour jouer la vido. La gure 11.1 illustre
la vido en pause.
Bien videmment, il est souhaitable que votre vido puisse tre lue sur plus dun
navigateur car sinon vous allez perdre beaucoup dutilisateurs. Heureusement, HTML5
a un moyen simple de rsoudre ce problme. Au sein dun conteneur <video>, vous
pouvez ajouter autant de balises <source> que vous le souhaitez. Lattribut source (src)
est dplac dans la balise <source>. Si vous placez plusieurs balises <source> dans un
conteneur <video>, le navigateur va examiner les chiers vido et slectionner celui
quil sait jouer puis le jouer automatiquement. Sil sait jouer plus dun type de format
vido, le navigateur commence jouer le premier quil reconnat et ignore tout le
reste. Tout ceci peut tre ralis en HTML5 sans avoir recours JavaScript. Lextrait
219
de code suivant montre la syntaxe de base pour accder aux chiers vido de cette
manire :
<video>
<source
<source
<source
<source
</video>
src="someVid.3gp">
src="someVid.mp4">
src="someVid.ogv">
src="someVid.webm">
Bien quil existe de nombreux formats vido diffrents, nous nous concentrerons
dans ce chapitre sur lutilisation des formats suivants :
H.264 : .mp4 et .mov
OGG : .ogv
WebM : .webm
3GP : .3gp
Pendant la rdaction de cet ouvrage (et sans doute lavenir) dautres formats
deviendront compatibles avec diffrents navigateurs, mais pour le moment, grce
la balise <source>, vous pouvez facilement rfrencer plusieurs navigateurs diffrents.
220
Quand jai test ce programme avec diffrents navigateurs et sous plusieurs plateformes, tous les navigateurs ont t capables de trouver un format vido compatible et
de jouer la fois la vido et le son. La gure 11.2 illustre la vido lue dans le navigateur
Safari mobile sur un iPhone.
221
La qualit de la lecture tait assez constante sur tous les navigateurs. Sur les
navigateurs Safari et Perfect Browser pour iPhone, la qualit de la vido tait plutt
bonne et elle sest surtout charge rapidement.
Les technologues semblent passer leur temps chercher savoir pourquoi les
diffrentes socits ont choisi tel format particulier de vido. Les entreprises comme
Apple, Microsoft, Google, Opera, Adobe et Mozilla ont choisi les formats de fichier
pour des raisons de proprit intellectuelle, de droit dutilisation, de licence, et pour
des motifs financiers, mais aussi parce que lintgration de cette technologie faisait
partie dautres projets. La seule chose qui doit vous intresser est de savoir ce qui
fonctionne pour vos sites Web et comment vous allez limplmenter. Laissez les
questions mtaphysiques aux experts !
222
H.264
OGG
WebM
3GP
Chrome
Non
Oui
Oui
Non
Firefox
Non
Oui
Inconnu
Non
Internet
Explorer 9
Non
Non
Non
Oui
Opera
Non
Oui
Oui
Non
Safari
Oui
Non
Non
Oui
Safari Mobile
Non
Non
Non
Oui
223
224
225
11.3.1 Webcams
Aujourdhui, la plupart des ordinateurs portables sont livrs avec une webcam intgre,
et il en va de mme de nombreux ordinateurs de bureau. Pour les ordinateurs qui nen
sont pas pourvus, il existe de nombreux modles que lon peut facilement connecter
via le port USB.
Pour les utilisateurs de Windows 7, le meilleur logiciel pour raliser des vidos
laide de la webcam est lutilitaire qui est livr par le fabricant de la webcam. Par
exemple, Logitech et Creative, deux socits qui fabriquent des webcams, livrent
dexcellents logiciels qui enregistrent et stockent les chiers vido qui peuvent tre
convertis pour un usage sur le Web. Vous pouvez aussi ajouter des effets spciaux aux
vidos avec ces logiciels.
Avec Windows 7 et Windows Vista, vous pouvez aussi tlcharger
gratuitement la nouvelle version de Microsoft Movie Maker ladresse :
http://explore.live.com/windows-live-movie-maker.
la diffrence de
Windows XP, qui est livr avec Windows Live Movie Maker, vous devez tlcharger
le logiciel ddition de lms sur le site de Microsoft si vous avez Windows 7 ou
Windows Vista.
Les ordinateurs Apple Macintosh sont en gnral livrs avec des webcams iSight.
Les ordinateurs portables iMac et MacBook ont des webcams intgres au sommet de
lcran. Les modles qui ne sont pas livrs avec des webcams peuvent brancher une
webcam iSight sur le port USB ou Firewire.
Pour la cration des vidos, on peut utiliser lapplication Photo Booth qui est
livre avec les Mac. Tous les chiers pris avec Photo Booth sont enregistrs au format
QuickTime avec lextension .mov. Ils sont en fait au format MP4, et si vous modiez
lextension de .mov en .mp4, ils sont galement reconnus comme des chiers vido.
226
Les webcams sont utiles pour certains types de projets vido. Pour les vidos
ducatives pour le Web, lenseignant peut sasseoir face la webcam et faire son cours
pour ensuite diffuser la vido son public. La ralisation de pages Web en HTML5
prenant en charge une prsentation vido rend la cration de didacticiels aussi simple
que la ralisation de toute prsentation similaire nayant pas t conue pour un usage
sur le Web.
227
tel point quelle stend des matriels peu chers utiliss pour des enregistrements
en famille jusquaux camras professionnelles qui sont employes par des ralisateurs
indpendants.
Comme pour les petits camscopes, les camscopes standard ont des connecteurs
USB ou Firewire. Ces connecteurs peuvent tre relis directement aux logiciels
ddition vido comme Adobe Premier, Apple Final Cut ou Vegas. La vido dite
peut ensuite tre enregistre dans un format qui peut tre utilis par les navigateurs
HTML5.
228
Figure 11.7 Les logiciels de capture vido permettent denregistrer en direct tout ce qui se
passe sur votre cran.
facile et une fois que lon a slectionn le microphone, lopration se droule en une
seule tape.
Ces attributs de la balise <video> sont traits de concert avec la balise <source>
car tous les navigateurs ne lisent pas les mmes types de chiers si bien que plusieurs
sources diffrentes doivent tre listes. La balise <source> permet aux navigateurs de
choisir quel chier vido est compatible avec leurs propres fonctions dafchage vido
(voir le dbut du chapitre).
11.4.1 Src
Lattribut type fait partie de la balise <source>. Comme nous lavons montr au dbut
du chapitre, lattribut src est utilis pour slectionner un chier vido lire. Si le
navigateur ne peut pas lire le chier, il passe au chier suivant de la liste des sources.
An dacclrer ce processus, lattribut type permet au navigateur de savoir quel type
de chier est en attente de lecture et il contient un paramtre MIME qui dit quel
codec est utilis. Cela empche le navigateur de charger le chier puis de se rendre
compte quil ne peut pas le lire. Au lieu de cela, il dtermine partir de lattribut type
si le chier vido est compatible.
229
Lassignation du type peut tre faite avec ou sans le codec. Si vous ne connaissez
pas le codec, vous pouvez laisser cette information en blanc et compter sur le type
pour laisser le navigateur dterminer sil peut lire le chier. Si vous connaissez le
codec ou les codecs, vous pouvez en placer plusieurs dans la liste dassignation. Si
vous ntes pas sr, il est prfrable de laisser la liste des codecs vide. Le programme
suivant (TypeVideoSource.html disponible dans les chiers du chapitre) illustre les
assignations des types pour les quatre principales sortes de chiers vido utilisables sur
le Web.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vido slective</title>
</head>
<body>
<video controls preload="auto">
<source src="mbAux1.3gp" type="video/3gpp; codecs=mp4v.20.8">
<source src="mbAux1small.mp4" type="video/mp4; codecs=mp4v.20.8 ">
<source src="mbAux1small.ogv" type="video/ogg; codecs=theora, vorbis" >
<source src="mbAux1small.webm" type="video/webm; codecs=vorbis,vp8" >
</video>
</body>
</html>
Pour dterminer le type et le codec dun chier, on trouve plusieurs programmes sur
le Web. MediaInfo, qui est disponible gratuitement pour les systmes dexploitation
Windows, Macintosh, et plusieurs versions de Linux peut tre tlcharg ladresse
http://mediainfo.sourceforge.net/en.
11.4.2 Poster
Lattribut poster est utilis avec les grandes vidos et les connexions Internet lentes.
Il est simple utiliser et si vous savez que votre vido sera longue charger lcran,
lattribut poster donne lutilisateur quelque chose voir pendant quil attend. Voici
un extrait de code qui illustre la syntaxe dutilisation :
<video poster="message.png">
<source src="multiformats/mbAux1.mp4" type="video/mp4">
</video>
Vous noterez que lattribut poster gure dans la balise <video> mme si toutes les
informations concernant le chier se trouvent dans la balise <source>. Il ny a pas de
conit entre les attributs de la balise video et ceux de la balise source.
230
11.4.3 Preload
Il semblerait naturel dinclure lattribut preload de la balise <video> sur toutes les pages
Web qui utilisent de la vido. Ainsi, ds que la page se charge, la vido commence se
charger. Cela peut tre important pour une page qui ne comporte quune seule vido
qui est la caractristique principale de la page. Mais sil sagit dune partie secondaire
de la page, ou si plusieurs vidos sont prsentes sur la page, le prchargement peut
absorber toutes les ressources. Cet attribut est donc utile, mais il doit tre employ
judicieusement. Voici sa syntaxe dutilisation :
<video preload="auto">
<source src="mbAux1small.webm" type="video/webm; codecs=vorbis,vp8 " >
</video>
On peut assigner plusieurs valeurs lattribut preload et elles sont identiques aux
valeurs de lattribut preload pour les chiers audio.
none : cette valeur peut sembler trange, mais certains navigateurs peuvent tre
11.4.4 Loop
Une boucle vido est quelque chose que vous devez planier soigneusement de peur de
voir fuir tous vos utilisateurs. Une boucle implique que la mme vido va recommencer
depuis le dbut ds quelle se termine. Voici un exemple dutilisation :
<video loop controls>
<source src="phantom.3gp">
</video>
Vous noterez que dans lextrait ci-dessus, on a inclus un attribut controls, ce qui
permet lutilisateur darrter la vido sil le souhaite. Si vous dnissez une boucle
avec un autoplay et incorporez le tout sur une page, vous risquez de perdre beaucoup
231
dutilisateurs. Si vous crez une publicit en boucle, ne vous attendez pas ce que les
visiteurs soient attirs par le service ou le produit dont vous faites la publicit ; ils le
remarqueront, mais ce nest pas une bonne mthode.
Il y a un certain type de boucle, qui est plus frquent en musique quen vido,
qui peut tre utile. Si la vido est sufsamment courte et ne comporte pas de grands
mouvements, une boucle peut consommer trs peu de ressources et rutiliser la mme
vido qui sera stocke dans le cache. Une dmonstration dun processus ou mme une
publicit qui est ennuyeuse peut tre utilise de cette faon-l.
11.4.5 Autoplay
Comme lattribut loop, lattribut autoplay doit tre utilis bon escient quand il est
employ avec la vido. Lattribut autoplay est une combinaison de prchargement
et de dmarrage automatique de la vido. La syntaxe est un interrupteur et il suft
dintgrer autoplay dans la balise <video> pour que la vido dmarre.
<video poster="wait.jpg" autoplay>
<source src="phantom.3gp">
</video>
11.4.6 Controls
Lattribut controls gnre un panneau de contrle graphique sous la vido qui permet
lutilisateur daccomplir les fonctions suivantes :
Dmarrer la vido,
Arrter la vido,
Couper le son de la vido,
Contrler le volume de la vido,
Indiquer la position,
Avancer ou reculer.
232
Figure 11.8 Navigateurs Opera (gauche) et Chrome (droite) affichant un contrle vido.
Les diffrences dans les contrles relvent principalement du style, mais comme
vous pouvez le voir dans la comparaison des navigateurs Opera et Chrome, Opera
afche la position de la vido en cours de lecture par rapport la dure totale, alors
que Chrome nafche que la position en cours de la vido.
La plupart des vidos conservent un ratio 4:3, comme la rsolution 320 x 240 ;
cependant, avec la vido HD, le ratio est diffrent et ldition modie parfois les
dimensions dune vido. Vous pouvez slectionner un chier vido et regarder ses
proprits, mais on ne vous donne pas toujours ses dimensions. Par exemple, sous
Mac OS X, les informations sur les dimensions des chiers .ogv et .webm ne sont pas
fournies quand on demande lafchage des proprits, alors que les dimensions dune
vido au format MPEG4 sont parfaitement afches.
233
QUATRIME PARTIE
Balises HTML5
dynamiques et un
soupon de JavaScript
12
Introduction JavaScript
Objectif
JavaScript est un langage de programmation Web que lon peut utiliser avec HTML5.
Il sert accder certaines parties des pages Web crites en HTML5 et permet
dautres choses que lon ne peut tout simplement pas raliser sans JavaScript. Ce
chapitre prsente les fonctionnalits de base qui vont tre utilises spciquement
avec les lments HTML5.
JavaScript est considr comme un langage de script car il est interprt par le
navigateur quand la page Web est charge ; le script nest donc pas compil et
stock sur lordinateur en tant que chier binaire. Limplmentation de JavaScript
peut lgrement varier dun navigateur lautre, mais comme JavaScript respecte
la norme ECMAScript (ECMA-262), ces diffrences ne sont pas normes et je ne
traiterai dans ce chapitre que les aspects de JavaScript que lon peut utiliser avec
HTML5.
Vous noterez pour nir que JavaScript et Java nont rien en commun. JavaScript
nest pas une version interprte de Java. Si vous voulez trouver sur le Web des
informations complmentaires propos de JavaScript, il ne vous servira donc rien
de rechercher des renseignements sur Java.
238
Quand on teste ce programme, on voit du texte sur la page et rien dautre. Llment
important pour comprendre la relation entre HTML5 et JavaScript se situe dans la
fonction : document.write(). Document fait rfrence la page Web, et write() est
une mthode qui dit la page Web ce quelle doit faire. En loccurrence, write() dit
au programme dcrire le texte entre guillemets sur la page Web.
239
12.1.2 Fonctions
Les fonctions JavaScript sont des packages de code qui sont excuts quand ils sont
appels par la page Web. Lavantage des fonctions est que lon peut les utiliser pour
rassembler du code et effectuer des modications pour ajouter un nouveau contenu.
La fonction intgre write() requiert seulement que lon saisisse du texte pour quelle
lafche dans le document (la page Web). Vous ntes pas oblig dexploiter les
fonctions intgres et vous pouvez parfaitement crer les vtres. Par exemple, le
programme suivant est un chier JavaScript externe avec une fonction simple qui
ouvre une bote de dialogue alert() (il sagit dune fonction utilisateur qui emploie
une fonction intgre). Enregistrez le programme JavaScript suivant sous le nom de
fonction.js :
// Document JavaScript
var prenom="Bill";
function bonjour(nom)
{
alert("Bonjour " + nom);
}
bonjour(prenom)
Toutes les fonctions sont suivies de parenthses. Si cela est ncessaire, le dveloppeur peut ajouter un paramtre entre parenthses. Dans notre exemple, le paramtre
sappelle nom. Quand la fonction est appele, le dveloppeur place un nom, un
nombre ou toute autre information souhaite dans lespace du paramtre nom. Dans
notre exemple, on assigne la valeur Bill une variable nomme prenom. la n
du programme, la ligne bonjour(prenom) appelle la fonction en plaant la variable
dans le paramtre. La fonction passe la valeur de la variable la fonction alert()
lintrieur de la fonction bonjour(), si bien que lon peut sattendre voir apparatre
lcran une bote de dialogue au lancement du programme. Le code HTML5 suivant
(fonctionJS.html disponible dans les chiers du chapitre) appelle le programme
JavaScript qui appelle la fonction.
<!DOCTYPE HTML>
<html>
<head>
<script src="fonction.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fonction externe</title>
</head>
<body>
</body>
</html>
240
onclick
ondbleclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onloadstart
onload
Voici la syntaxe gnrique de tous les vnements qui sont lis des lments :
<lment vnement= "FonctionJavascript()">
Par exemple,
<body >
241
une bote de dialogue quand la page se charge, le second se dclenche quand on clique
sur la ligne du haut et le troisime afche une bote de dialogue quand on fait un
double-clic sur le deuxime lien.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1, h2 {
font-family:Tahoma, Geneva, sans-serif;
}
a {
text-decoration:none;
color:#060;
}
</style>
<script type="text/javascript">
function detectLoaded()
{
alert("La page est charge.");
}
function detectClick()
{
alert("Vous avez cliqu sur un lien.");
}
function detectDoubleClick()
{
alert("Vous avez fait un double-clic sur un lien.");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event Handler</title>
</head>
<body ><hgroup>
<h1> <a href="#" sur ceci</a></h1>
<h2> <a href="#" un double-clic
sur ceci</a></h2>
</hgroup>
</body>
</html>
Les fonctions JavaScript peuvent effectuer tout ce quon leur demande de faire, ce
qui permet de communiquer avec les utilisateurs. Vous pouvez ainsi leur donner des
instructions, leur proposer des options, les mettre en garde, etc.
242
Ce type de code na rien de nouveau en HTML5. Il est utilis ici pour une simple
raison : quand la souris passe au-dessus du texte lintrieur de la balise <a>, le curseur
est modi de telle sorte que lutilisateur sait quil est au-dessus dun lien.
Cependant, vous pouvez dnir un gestionnaire dvnements pour nimporte quel
lment. Par exemple, examinez la page Web suivante (ClicP.html disponible dans
les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
font-family:Verdana, Geneva, sans-serif;
color:#FF0;
background-color:#00F;
font-size:24px;
text-align:center;
font-weight:bold;
}
</style>
<script type="text/javascript">
function showArticle()
{
alert("Vous venez de cliquer dans un conteneur <article>");
}
function showHeader()
{
alert("Vous venez de cliquer dans un conteneur <header>");
}
function showP()
{
alert("Vous venez de cliquer dans un conteneur <P>");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OnClick dans un lment</title>
</head>
<body>
<article ><header ><h1>Ceci est un lment H1 dans len-tte</h1>
</header>
<section>
<p sur ce paragraphe</p>
Voici simplement du texte dans le conteneur article. Cliquez ici juste
pour voir ce que se passe.</section>
</article>
</body>
</html>
243
Dans la copie dcran du haut, ds que lutilisateur clique sur la ligne Cliquez
sur ce paragraphe, lvnement est noti dans une bote de dialogue. Ensuite, quand
lutilisateur clique sur le bouton OK de la bote de dialogue, une seconde bote apparat
et lui indique quil a aussi cliqu sur un conteneur <article>. Il faut apprhender
les vnements en les remontant, en commenant par le niveau le plus bas de la
hirarchie des lments puis en montant jusquau niveau le plus lev.
244
Quand on accde une partie du DOM, cest en rfrenant un lment de larborescence. On accde chaque lment de larborescence dans lordre hirarchique, en
commenant par document. Les diffrents lments dune page Web sont les diffrentes
proprits ou mthodes (fonctions intgres) du document spares par un point (.).
Par exemple,
document.forms.fred;
accde un formulaire nomm fred au sein dun document. Voici quoi ressemble
le balisage HTML5 :
<form name= "fred">
Parfois, vous verrez une fonction intgre qui ralise dans le document quelque
chose de ce genre :
document.write("Cela vient directement du Document");
qui afche du texte lcran. Vous noterez aussi que la racine window possde
plusieurs fonctions intgres qui sont utiles pour manipuler les zones dafchage dune
page Web.
245
Cette page ncessite une seconde page qui souvre en tant que fentre spare.
Le programme suivant (AutreFenetre.html disponible dans les chiers du chapitre)
provoque louverture dune page et, en mme temps, la fermeture de la fentre ouverte
grce un script bas sur le DOM.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1,h4 {
font-family:Verdana, Geneva, sans-serif;
color:#930;
}
a {
text-decoration:none;
color:#cc0000;
text-align:center;
}
</style>
<script type="text/javascript">
function shutItDown()
{
window.close();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Autre fentre</title>
</head>
<body>
<h1>Cette fentre contient un message important...</h1>
<h4>Attendez que je trouve de quoi il sagit...</h4>
<a href="#" la fentre !</a>
</body>
</html>
La gure 12.2 illustre le rsultat quand la page Web ouvre une seconde fentre.
Jusqu prsent dans cet ouvrage, quand une page tait chane une autre page,
la page en cours disparaissait ds que lutilisateur cliquait sur un lien. Grce ce petit
bout de code JavaScript, vous pouvez dsormais parler directement la page et
lui dire que vous voulez ouvrir une nouvelle fentre dune taille bien prcise, tout en
laissant la fentre en cours ouverte.
246
247
248
taux de la taxe est nul, ce qui provoque un rsultat non numrique. Cependant, ds
que le taux de la taxe est saisi, le rsultat devient un nombre.
Figure 12.3 Utilisation de la balise <output> pour calculer dans le navigateur Opera.
12.3.1 Variables
Une variable est quelque chose qui change (elle varie). Vous pouvez vous reprsenter
une variable comme une bote avec une tiquette dessus. Par exemple, vous pouvez
avoir une bote avec une tiquette TlphoneMobile . Dans la bote, vous ne
pouvez placer quune seule chose. Vous pouvez modier le contenu de la bote,
ce que lon appelle la valeur de la bote. Si vous avez un iPhone dans votre bote
TlphoneMobile, vous pouvez lenlever et placer un iPhone diffrent (un modle
plus rcent) ou bien un autre tlphone, comme un tlphone Android. prsent, la
249
bote a une valeur diffrente. La paire tiquette-valeur (ou paire nom-valeur) est la
combinaison de ltiquette de la variable et de sa valeur actuelle.
Vous navez pas placer le nom dun tlphone mobile dans votre bote TlphoneMobile. Vous pouvez en fait y mettre ce que vous voulez : un talkie-walkie ou
un lphant rose. Vous pouvez mme assigner nimporte quelle valeur de nimporte
quel type cette variable, y compris une autre variable. Cest cependant une bonne
habitude dutiliser des noms de variables qui peuvent tre associs au contenu que
lon assigne la variable. Par exemple, si vous ralisez un site Web qui sera utilis
pour saisir des prix et des taxes (comme ctait le cas dans la section prcdente Les
lments HTML5 et le DOM ), il parat logique dutiliser des noms de variables tels
que cout et taxe .
Pour crer une variable, il suft de fournir un nom et de lui assigner une valeur,
comme dans lexemple suivant :
billVar="Livr par la variable de Bill.";
alert(billVar);
qui cre une variable nomme billVar dont la valeur est Livr par la variable
de Bill. Quand la variable est place dans la fonction alert, vous noterez quelle nest
pas encadre par des guillemets.
Types de donnes
Quand on assigne des valeurs une variable JavaScript, on peut assigner nimporte quel
type puis changer de type. Commenons dabord par donner une ide des diffrents
types de donnes qui sont disponibles. La liste suivante fournit une brve description
de chacun des types :
1. String : trait comme du texte, en gnral entre guillemets ;
2. Number : nombre (entier ou rel) qui peut tre soumis des oprateurs
mathmatiques ;
3. Boolean : type de donnes deux tats (true ou false, 0 ou 1) ;
4. Function : ensemble doprations JavaScript contenues dans un module ;
5. Object : collection de proprits encapsules (variables/tableaux) et de
mthodes (fonctions).
Vous avez dj vu la manire dont les variables string fonctionnent. Quand on
place des nombres dans une variable string, ils sont traits comme du texte et non
pas comme des nombres. Par exemple, la chane suivant traite 123 exactement
comme rue Molire , cest--dire du texte.
adresse="123 rue Molire";
250
premierNombre="123";
secondNombre="7";
total=premierNombre + secondNombre;
document.write(total);
prsent, le rsultat afche 130 comme prvu quand on ajoute des nombres.
Quand loprateur plus (+) est utilis avec du texte (on appelle cela une concatnation), les chanes de caractres sont simplement mises bout bout. Si lon place
nimporte quel type de texte dans une liste de nombres ajouter et quun seul des
nombres soit du texte, tout le reste est considr comme du texte et sera par consquent
concatn.
251
// Variable Boolean
var destin=true;
// Variable string
recherche="Vais-je trouver le vrai bonheur dans HTML5 ? La rponse est : ";
// Variables avec des nombres
fun=100;
maison=23;
// Calcul avec des variables
funPlusMaison=fun + maison;
// Ajout de variable string et number (concatnation)
montreAdresse=funPlusMaison + adresse;
browser=navigator.platform;
document.write(montreAdresse);
document.write(cr);
document.write(recherche);
document.write(destin);
document.write(cr);
document.write(browser);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Variable simple</title>
</head>
<body>
</body>
</html>
252
12.3.2 Tableaux
Une variable ne peut avoir quune seule valeur la fois. Cette valeur peut tre le
rsultat dun calcul bas sur la combinaison de plusieurs valeurs, mais une fois quelle
est stocke lintrieur dune variable, elle devient unique. Pour illustrer cela, voici
un exemple extrait de la prcdente section sur les variables :
premierNombre=123;
secondNombre=7;
total=premierNombre + secondNombre;
La variable nomme total est la somme des deux premires variables et il sagit
dune entit unique. Cela serait galement vrai si les deux variables avaient t
concatnes. Vous devez donc simplement retenir que les variables ne peuvent
contenir quune seule valeur la fois. La gure 12.5 fournit une illustration graphique
de la diffrence entre les variables et les tableaux.
Comme vous pouvez le voir la gure 12.5, il ny a quun seul lment stock dans
la variable nomme Amour, mais le tableau choses contient beaucoup de... choses. On
appelle chacune des donnes stockes avec le nom du tableau suivi dun numro entre
crochets. Ainsi, choses[1] dsigne une ancre et choses[2] une calculatrice.
Certaines applications ncessitent quil y ait plusieurs valeurs dans un seul objet,
ce qui facilite laccs et le stockage des donnes. Chaque valeur du tableau sappelle
253
12.3.3 Objets
Le dernier type de donnes utilis pour stocker les valeurs est un objet. Tous les objets
sont similaires aux tableaux en ce sens o ils peuvent contenir plusieurs valeurs, mais
ils ont plusieurs proprits intgres. Ces proprits ont des valeurs xes (appeles
constantes) ou des valeurs qui changent en fonction des circonstances. Si lon reprend
un extrait du programme de la section prcdente, on peut afcher la longueur du
tableau :
...
document.write("<br>");
document.write(fruit.length);
La valeur de fruit.length est gale 4 car la longueur dun tableau est toujours
suprieure dune unit au numro du dernier lment dun tableau en raison du fait
que la numrotation des lments commence zro.
254
On appelle mthodes certaines proprits des objets. Une mthode est une fonction
qui ralise quelque chose qui a un rapport avec lobjet. Par exemple, lobjet tableau
comporte une mthode pop() qui retourne le dernier lment dun tableau. Grce
cette mthode, on peut assigner une variable une mthode dobjet, tout comme
on peut assigner une variable une fonction. Reprenons nouveau le programme de
la section prcdente. Cette fois-ci, on assigne la variable monFruit fruit.pop().
Cela signie que ce qui se trouve au sommet de la pile du tableau est supprim, mais
si lon utilise une assignation de variable, llment supprim est assign la variable,
comme lindique lextrait suivant :
...
var monFruit=fruit.pop();
document.write("<br>" + monFruit + "<br>");
document.write(fruit.length);
Ensuite, pour ajouter une proprit, il faut trouver un nouveau nom et lui assigner
une valeur. Le nom de lobjet et sa proprit sont spars par un point (.). Par exemple,
la code suivant ajoute une proprit nomme premierNombre et lui assigne la valeur 4 :
Additionneur.premierNombre=4;
Tout comme avec une variable, vous pouvez modier la valeur premierNombre et
lui assigner une autre valeur.
255
Lajout dune mthode (une fonction) est tout aussi facile, mais au lieu dutiliser
une fonction nomme, on utilise une fonction anonyme. Par exemple, le code suivant
ajoute la valeur de deux proprits de lobjet Additionneur et envoie le rsultat
lcran :
Additionneur.total=function()
{
document.write(this.premierNombre + this.secondNombre);
}
Le mot-cl this est une rfrence lobjet Additionneur. Cest comme si lon
crivait Additionneur.premierNombre. Vous noterez aussi que le mot-cl function()
na pas de nom, ce qui en fait une fonction anonyme.
Il est temps prsent de rassembler le tout pour voir comment cela fonctionne
(voir le programme ObjetUtilisateur.html qui est disponible dans les chiers du
chapitre) :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
Additionneur=new Object();
//Proprits de lobjet
Additionneur.premierNombre=4;
Additionneur.secondNombre=66;
//Mthode de lobjet
Additionneur.total=function()
{
document.write(this.premierNombre + this.secondNombre);
}
//Dclenchement de la mthode !
Additionneur.total();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Objet simple</title>
</head>
</html>
Vous noterez que la mthode Additionneur.total() utilise la mthode document.write() (vous pouvez dtecter les mthodes en JavaScript en cherchant les
parenthses). Vous noterez aussi que pour dclencher une mthode, il suft de lister le
nom de lobjet suivi du nom de la mthode. Quand on teste le programme, on constate
que le rsultat est le total des deux proprits.
256
tous les objets du DOM est une liste de tous les lments plus dautres objets qui sont
utiliss conjointement avec le DOM. Par exemple, les objets suivants font partie du
DOM HTML5 mais ils ne sont pas exactement des lments :
Document
Event
Image
Link
Meta
Nous avons vu certains de ces objets dans des balises. Par exemple, lobjet image se
trouve dans les balises <img> et ses proprits sont similaires aux attributs de llment
img. Dautres objets, comme document, sont impliqus dans le DOM en ce sens o une
page Web est un document. Lobjet event est employ dans la gestion des vnements
avec des mthodes comme onClick. Pour le reste, il sagit dlments avec lesquels
vous devez tre familier, mais au lieu davoir des attributs dune balise, vous devez vous
attendre trouver des proprits avec des noms identiques et des fonctions qui sont
quivalentes certains attributs.
257
1. Choisissez une phrase, par exemple Tous les objets sont composs de
proprits et de mthodes .
2. Assignez cette chane de caractres une variable et utilisez
document.write() pour lafcher lcran.
3. Dcomposez cette phrase en plusieurs mots et placez chaque mot dans les
lments dun tableau, puis avec la mthode array.pop() et document.write()
afchez tous les mots de la phrase lcran pour ne former quun seul
message.
4. Pour nir, crez un objet avec une proprit dont le contenu est la phrase
que vous avez choisie. Crez une mthode pour la proprit qui afche la
phrase lcran.
13
Amlioration des sites avec
les canvas
Objectif
La balise <canvas> (en anglais, canvas signie canevas, mais aussi toile de tableau)
constitue lun des ajouts les plus importants de HTML5. Grce elle, vous pouvez
dessiner ce que vous voulez sur une page HTML5, avec simplement deux attributs,
width et height. Llment canvas est cependant implment dans ce que lon
pourrait appeler un style DOM (Document Object Model ; voir le chapitre 12
o le DOM a t dcrit en dtail). Fondamentalement, un style DOM implique
lcriture du code JavaScript ncessaire avec des rfrences des objets ainsi qu
leurs mthodes et proprits.
Si ce genre de discours vous inquite, relaxez-vous. Tout au long de cet ouvrage, les
balises HTML5 (les lments) ont utilis des attributs et les attributs ne sont que
des proprits dlments. Pour lessentiel, lcriture de code JavaScript se rsume
lassignation de valeurs des proprits, et comme vous savez dj assigner des
valeurs des attributs (par exemple height="200"), il ny a rien de bien nouveau
dans lcriture de cette sorte de code.
JavaScript emploie une sorte de POO allge . Le DOM reprsente une programmation oriente objets (POO) car il ny a que des rfrences des objets et
leurs proprits. En adoptant un JavaScript au style similaire (cration dobjets puis
assignation de proprits et de mthodes), votre code va beaucoup ressembler aux
expressions extraites du DOM.
260
La gure 13.1 illustre ce qui apparat quand on ouvre la page avec la balise <canvas>
sur une version ancienne du navigateur Internet Explorer.
Figure 13.1 Message affich par un navigateur qui nest pas compatible HTML5.
261
On pourrait crire quelque chose de plus sophistiqu, mais le message est sufsamment explicite pour que lon sen contente. Si vous avez un navigateur HTML5, tout
se passe correctement et si tel nest pas le cas, lutilisateur est averti par un message (il
est souhaitable dadapter le message votre public).
Avant de se lancer dans la cration de vos propres dessins, nous allons tudier une
autre manire de grer les utilisateurs qui nont pas de navigateur HTML5. Outre
lajout de texte, vous pouvez aussi intgrer des photos ou nimporte quoi dautre dans
le conteneur <canvas>. Par exemple, le script suivant (PhotoCanvas.html disponible
dans les chiers du chapitre) offre une alternative une prsentation plus sophistique
dune photo laide de canvas.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#060;
color:#0FC;
}
img {
padding-top:10px;
padding-bottom:10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pcheur en herbe</title>
</head>
<body>
<body ><canvas id="photo" width="300" height="272" >Cher visiteur, si vous voyez ce
message, cela signifie que vous navez pas de navigateur HTML5 (mais vous
pouvez voir la photo et sa lgende).<br>
<figure> <img src="fisherkid.jpg" width="300" height="272" alt="kid
fishing"/><br>
<figcaption>Pcheur en herbe</figcaption>
</figure>
</canvas>
</body>
</html>
262
Figure 13.3 Affichage dun message alternatif pour les navigateurs non compatibles HTML5.
David Sanders
Explication du quadrillage
Pour exploiter avec succs les canvas, vous devez comprendre comment fonctionnent
le quadrillage et le systme de coordonnes cartsiennes. Le coin suprieur gauche
reprsente la position 0,0 de la page. Quand on se dplace vers la droite, la premire
valeur augmente. Si vous vous dplacez de 15 pixels droite, la valeur passe 15,0
(cest laxe des x). Si vous vous dplacez vers le bas, la seconde valeur (laxe des y)
augmente. Si vous descendez de 20 pixels, la position passe alors 15,20. Supposons
que vous vouliez utiliser cette position comme point de dpart pour crer un carr de
100 pixels de ct. Cela aide de visualiser la position et la taille par rapport la page
263
Web avec le quadrillage, mais on a une ide plus claire de limage que lon cre sans le
quadrillage. En fait, les deux systmes sont utiles.
Cela doit vous paratre assez familier. Les attributs width et height ont une valeur
de 100 pixels, et le nom de lobjet canvas a t dni redHot (jai dj trait de
la balise de fermeture </canvas> et du message dans le conteneur). Tout le reste du
travail nest que de la programmation JavaScript communiquant avec le DOM.
Comme je lai mentionn plus haut, je vais tenter de simplier les choses en
utilisant un peu de POO dans le code JavaScript pour reter la structure de
programmation du DOM. La premire tche consiste donc crer un objet et il
existe une mthode pour ce faire :
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()...
Comme vous lavez vu au chapitre 12, il y a ici une dnition dun objet et de
sa mthode (une fonction qui va appeler les oprations JavaScript quand cela sera
ncessaire).
Ensuite, le programme a besoin dun moyen pour accder au nud DOM du canvas.
Il sagit de la partie du DOM qui a le canvas ainsi que les proprits et mthodes lies
au canvas. La premire tape consiste crer un objet qui contient le nud du DOM.
Plutt que de penser assigner un nud une variable, reprsentez-vous la cration
dune instance dun objet qui a les proprits et les mthodes de lobjet canvas.
canvasNow = document.getElementById("redHot");
Cette ligne cre un objet qui contient lobjet canvas nomm redHot.
Une fois que lon a une instance dun objet canvas, le programme a besoin dun
contexte de rendu. Le seul contexte pratiquement disponible se nomme 2d, ce qui
laisse supposer un contexte de rendu en deux dimensions. Lobjet canvas (canvasNow)
possde une mthode nomme getContext() pour obtenir le contexte de rendu.
contextNow = canvasNow.getContext( 2d);
264
Ralisation du dessin
Avant dtudier la ralisation du dessin, vous vous posez peut-tre des questions sur
les objets canvasNow et contextNow. Sagit-il rellement de variables ? Aprs tout, on
peut assigner des objets des variables. Cest en effet une manire de se reprsenter
les choses, mais les objets sont assigns aux variables avec leurs propres mthodes et
proprits. Ne sagit-il donc pas plutt dinstances dobjets ? Quand on assigne un
nombre rel une variable, il sagit avant tout dun nombre. On peut raliser des
calculs avec la variable comme on le ferait avec un nombre littral. Au lieu dergoter
pour savoir si les structures de programme sont en fait des variables ou des objets,
traitez-les simplement comme des objets (tout comme les variables avec du texte ou
des nombres peuvent tre traites comme des variables de type string ou number).
On va dabord assigner une couleur au dessin. Vous pouvez utiliser lune des
techniques de cration de couleur que nous avons dcrites au chapitre 4. Cet exemple
emploie le format hexadcimal :
contextNow.fillStyle = #cc0000;
La proprit fillStyle ne sert que pour la couleur de remplissage et non pas pour
le trait (le contour) de lobjet.
La couleur de remplissage a ensuite besoin dune forme remplir. Pour remplir un
rectangle, on utilise la syntaxe suivante :
contextNow.fillRect(5,20,100,100);
Les deux premires valeurs placent le dessin dans la zone du canvas (et non pas
sur la totalit de la page Web) et les deux dernires valeurs spcient la largeur et la
hauteur du rectangle.
Pour nir, il faut remplir le rectangle avec la couleur spcie, ce qui est accompli
par la ligne suivante :
contextNow.fill();
265
Peu importe le nombre doprations qui sont dnies, une seule mthode fill()
soccupe de tous les remplissages qui sont dnis dans une mthode plus grande.
Maintenant que toutes les pices sont en place, il faut les assembler dans un
programme HTML5. Le listing suivant (SimpleCarre.html disponible dans les chiers
du chapitre) contient la totalit du script :
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById("redHot");
contextNow = canvasNow.getContext( 2d);
contextNow.fillStyle = #cc0000; // couleur en hexadcimal
contextNow.fillRect(5,20,100,100); // x, y, largeur, hauteur
contextNow.fill();
}
</script>
<style type="text/css">
body {
font-family:Verdana;
color:#cc0000;
}
</style>
<title>Carr rouge</title>
</head>
<body ><figure>
<canvas id="redHot" width="100" height="100" > Vous avez manqu le carr
rouge ! Adoptez un navigateur HTML5 ! </canvas>
<figcaption> <br/>
Carr rouge </figcaption>
</figure>
</body>
</html>
Comme vous pouvez le voir, le programme inclut du code CSS3 et une simple
lgende avec les balises appropries <figure> et <figcaption> qui encadrent la balise
<canvas>. Le rsultat de ce script est illustr la gure 13.5.
Vous noterez aussi que ce script contient un message pour les utilisateurs qui
nont pas de navigateur HTML5, mais comme la gure 13.5 illustre limage canvas, le
navigateur nafche pas le contenu du conteneur <canvas>.
266
267
}
</style>
<title>Tortilla Flat !</title>
</head>
<body ><figure>
<canvas id="totillaHues" width="500" height="120" > Pas de
vous ! Adoptez un navigateur HTML5... rapidement ! </canvas>
<figcaption> <br/>
Tortilla Flat
</figcaption>
</figure>
</body>
</html>
tortillas pour
occuper le mme espace. Les carrs sont aligns sur une ligne horizontale, si bien que
la seule chose laquelle vous devez veiller est la valeur x dans la mesure o la position
verticale restera identique.
Une fois que toutes les mthodes fillStyle() et fillRect() ont t dnies, les
dessins nont besoin que dune seule mthode fill() pour safcher tous ensemble.
La gure 13.6 illustre le rsultat de la gure dans le navigateur mobile Safari sur un
iPhone.
268
269
</head>
<body ><article>
<figure>
<canvas id="strokeAndChomp" width="100" height="100" > Passez un
navigateur HTML5 ! </canvas>
<figcaption> <br/>
Carr </figcaption>
</figure>
<section>
<p><a href="#" des
traits</a></p>
</section>
<section>
<p><a href="#" le carr</a></p>
</section>
<section>
<p><a href="#" le carr</a></p>
</section>
<section>
<p><a href="#" le
carr</a></p>
</section>
</article>
</body>
</html>
Cette page est mise en forme pour un terminal mobile. Elle a t teste avec le
navigateur Opera Mini sur un iPhone, comme cela est illustr la gure 13.7.
Un carr bleu apparat lors du chargement initial. Quand on clique sur le lien
Ajouter des traits, un cadre apparat lintrieur de limage originale. Si vous ajoutez
plus de traits, vous constaterez que le trait spaissit. Quand on clique sur le lien
Perforer le carr, un petit carr apparat au centre du carr bleu. Le lien Effacer le
carr supprime la fois limage et les traits. Si vous cliquez sur le lien Ajouter des traits
aprs avoir supprim le carr bleu, vous ne verrez que le cadre sans le rectangle bleu.
270
271
La couleur peut tre assigne en utilisant lune des mthodes tudies au chapitre 4.
Le dcalage de lombre par rapport limage dpend de la grandeur que vous souhaitez
pour lombre. Testez diffrentes valeurs en commenant par une valeur proche de
5. Dans lexemple suivant, chaque paramtre de dcalage est initialis 10 an de
fournir sufsamment dombre pour que limage se dtache de lcran sans pour autant
craser limage. Enn, la valeur de ou peut tre suprieure ou infrieure en fonction
des valeurs de dcalage et de la quantit de ou que vous souhaitez. Avec de grandes
valeurs de dcalage, il faut une grande valeur de ou.
Pour que lombre produise un effet sur limage, toutes les proprits de lombre
doivent tre saisies avant lcriture de la mthode drawImage(). Cest tout ce quil
y a lieu de faire. Lautre partie JavaScript ncessaire pour dnir le contexte de
rendu du canvas est trs similaire aux dessins de la section prcdente. Le code
suivant (OmbrePhoto.html disponible dans les chiers du chapitre) charge une image
et lencadre avec une ombre porte :
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
//couleurs: F4F1BC,736F36,BFB95A
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById("picFrame");
contextNow = canvasNow.getContext( 2d);
pic = new Image();
pic. >{
contextNow.shadowColor =#BFB95A;
contextNow.shadowOffsetX=10;
contextNow.shadowOffsetY=10;
contextNow.shadowBlur=4;
contextNow.drawImage(pic,10,10);
}
pic.src = fisherkid.jpg ;
}
</script>
<style type="text/css">
body {
font-family:Verdana;
color:#736F36;
272
background-color:#F4F1BC;
}
</style>
<title>Photo encadre</title>
</head>
<body ><article>
<figure>
<canvas id="picFrame" width="340" height="300" > Vous avez manqu une
photo parce que vous navez pas de navigateur HTML5. </canvas>
<figcaption> <br/>
Photo avec une ombre porte</figcaption>
</figure>
</article>
</body>
</html>
Avant de placer vos propres images, vriez leur taille et la taille que la balise
<canvas> a rserve. Dans cet exemple, il y avait sufsamment de place pour limage
Au lieu demployer une valeur hexadcimale, le code utilise un codage RGB avec
un canal alpha (rgba()) qui contrle la transparence. Le dernier paramtre est
273
Figure 13.8 Image et ombre porte avec la balise <canvas>. David Sanders
une valeur comprise entre 0 et 1. Plus la valeur est leve, plus limage sera opaque.
En utilisant une valeur infrieure 1, vous pouvez contrler le degr dopacit. Le
reste de la forme correspond aux dimensions de limage et le ltre est positionn sur le
mme espace.
Pour intgrer une image au reste de la page, il est souhaitable dajouter une teinte
en utilisant la couleur de fond. Le programme suivant (ImageFiltree.html disponible
dans les chiers du chapitre) ajoute dabord limage puis dessine un objet rectangulaire
par-dessus dot dune couleur de remplissage transparente.
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
//couleurs: F26A4B,F2D091=rgb(242,208,145)
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById("filterFrame");
contextNow = canvasNow.getContext( 2d);
pic = new Image();
pic. >{
contextNow.drawImage(pic,0,0);
contextNow.fillStyle = rgba(242, 208, 145, .6);
contextNow.fillRect(0,0,472,306);
contextNow.fill();
274
}
pic.src = dance.gif;
}
</script>
<style type="text/css">
body {
font-family:Verdana;
color:#F26A4B;
background-color:#F2D091;
}
</style>
<title>Filtre dimages</title>
</head>
<body ><article>
<figure>
<canvas id="filterFrame" width="472" height="306" > Vous avez rat la
danse ! Installez un navigateur HTML5 ! </canvas>
<figcaption> <br/>
Image filtre</figcaption>
</figure>
</article>
</body>
</html>
Vous noterez que la squence charge dabord limage puis place le dessin au-dessus
en utilisant lextrait suivant :
contextNow.drawImage(pic,0,0);
contextNow.fillStyle = rgba(242, 208, 145, .6);
contextNow.fillRect(0,0,472,306);
contextNow.fill();
275
context.beginPath()
context.moveTo(x, y)
context.closePath()
context.lineTo(x, y)
Dunod Toute reproduction non autorise est un dlit.
context.quadraticCurveTo(cpx, cpy, x, y)
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.arcTo(x1, y1, x2, y2, radius)
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
context.rect(x, y, w, h)
context.fill()
context.stroke()
context.clip()
context.isPointInPath(x, y)
Le fait de savoir comment utiliser ces mthodes avec une balise <canvas> ne vous
garantit pas un rsultat honorable. Le reste de ce chapitre dtaille la plupart de ces
mthodes. Vous devriez tre capable de crer de nombreuses formes diffrentes aprs
avoir achev la lecture de ce chapitre.
276
et
277
278
</article>
</body>
</html>
La gure 13.11 illustre le rsultat attendu (si vous avez travaill avec vos propres
coordonnes, votre dessin est probablement meilleur).
Jusquici tout va bien, mais la valise originale est de couleur marron et il va donc
nous falloir de la couleur. Pour ajouter de la couleur, on utilise la mme technique
que pour les rectangles : context.fillStyle ="couleur". Les mthodes de dessin
complexe incluent context.fill() pour remplir un contour, si bien quen remplaant
context.stroke() par context.fill(), et en ajoutant une mthode fillStyle le tour
est jou. La gure 13.12 illustre le rsultat.
279
280
</figure>
</article>
</body>
</html>
Quand on teste cette version modie, les rsultats sont trs proches du dessin
original. Comparez la gure 13.10 avec la gure 13.13 pour voir comme limage
gnre par programme est proche de loriginale.
Vous pouvez utiliser les lignes pour dessiner tout ce qui ne contient pas des courbes.
Dans la section suivante, nous allons voir comment ajouter des courbes vos outils
artistiques canvas.
13.2.2 Courbes
La ralisation de courbes, mme avec des outils de dessin, est plus dlicate que le trac
de lignes droites. Pour comprendre comment raliser des courbes, je dbuterai cette
section par une discussion sur les arcs et les mthodes canvas du DOM qui permettent
de les crer. Nous ferons un peu de gomtrie, mais pas trop (il est vraiment ncessaire
de comprendre un peu de gomtrie, mais rassurez-vous, cela reste trs basique).
La premire chose quil faut comprendre, cest la diffrence entre les degrs et
les radians. La plupart des gens savent quun cercle fait 360 degrs. Sur une rose des
vents, 360 ou 0 degr (midi) reprsente le nord. Quand on se dplace dans le sens
des aiguilles dune montre de 90 degrs (3 heures), la boussole pointe vers lest ;
180 degrs (6 heures), elle pointe vers le sud, et 270 degrs (9 heures), elle pointe
vers louest.
Vous devez cependant utiliser des radians la place des degrs, si bien que tous les
degrs doivent tre convertis en radians. Pour ce faire, utilisez la formule suivante :
Radians = (PI 180) degrs
Admettons que vous vouliez connatre les radians pour le plein ouest (9 heures),
270 degrs :
281
Vous trouverez aussi beaucoup de calculatrices en ligne qui feront les conversions
votre place.
Arcs
La mthode DOM canvas pour dessiner des arcs sappelle context.arc(). Cette
mthode comporte plusieurs paramtres qui ont besoin dtre compris individuellement, mais aussi les uns par rapport aux autres :
x,y : centre du cercle
radius : rayon du cercle
startAngle : point de dpart de larc exprim en radians
endAngle : point darrive de larc exprim en radians
anticlockwise : boolen (true reprsente le sens contraire des aiguilles dune
montre et false le sens des aiguilles dune montre)
Je trouve utile dimaginer soit une rose des vents, soit une horloge avec les quatre
points cardinaux et les heures et degrs : nord (midi ou 0 degr), est (3 heures ou
90 degrs), sud (6 heures ou 180 degrs) et ouest (9 heures ou 270 degrs). Voici un
exemple dinstruction dun arc complet :
contextNow.arc(150,100,50,six,0,true);
Cet arc a son centre x = 150 et y = 100, et un rayon de 50. Langle de dpart est
dni 6, qui est une variable que nous avons cre pour reprsenter la position de
6 heures ou 180 degrs. La valeur de la variable a t convertie en radians. Les degrs
et les radians ont la mme valeur la position de midi (0), qui est dans notre exemple
langle darrive. Pour nir, larc est dni true, ce qui signie quil est trac dans le
sens contraire des aiguilles dune montre.
Le programme suivant est utilis pour exprimenter diffrents arcs. Quatre variables
(12, 3, 6 et 9) sont dnies en radians et correspondent aux positions sur une
horloge. Certaines instructions sont mises en commentaires, mais elles seront utilises
ultrieurement.
<!DOCTYPE HTML>
<html>
<head>
282
<script type="text/javascript">
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById("beHappy");
contextNow = canvasNow.getContext( 2d);
contextNow.beginPath();
contextNow.moveTo(0,0);
contextNow.lineTo(300,0);
contextNow.lineTo(300,200);
contextNow.lineTo(0,200);
contextNow.closePath();
contextNow.stroke();
// RADCON = (Math.PI/180) ;
RADCON=0.01745329251994;
twelve=0;
three = RADCON * 90;
six = RADCON * 180;
nine = RADCON * 270;
contextNow.beginPath();
contextNow.arc(125,100,50,six,twelve,true);
//contextNow.closePath();
//contextNow.fill()
contextNow.stroke();
}
</script>
<style type="text/css">
body {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sourire</title>
</head>
<body ><figure>
<canvas id="beHappy" width="300" height="200" > Vous ne voyez pas de sourire
car vous navez pas de navigateur HTML5 !</canvas>
<figcaption>
<p>Le rectangle reprsente les limites du canvas</p>
</figcaption>
</figure>
</body>
</html>
La variable RADCON est une constante ( 180), si bien que tous les degrs ont t
dnis en radians en multipliant leur valeur par RADCON. Comme nous lavons signal,
les noms des variables reprsentent les positions sur une horloge. De plus, un rectangle
autour de la zone o larc est dessin reprsente les limites de la largeur et de la hauteur
de la balise <canvas>. La gure 13.14 illustre le rsultat.
Le point de dpart de larc est gauche et il se dplace dans le sens contraire des
aiguilles dune montre jusquau point darrive sur la droite. Modiez la ligne suivante :
283
contextNow.arc(125,100,50,six,twelve,true);
en :
contextNow.arc(125,100,50,six,twelve,false);
Cela modie le sens du trac qui passe du sens contraire des aiguilles dune montre
au sens des aiguilles dune montre ; cela constitue une belle diffrence, comme vous le
constaterez si vous testez le programme.
Ensuite, en utilisant le mme programme, revenez sa version originale en
modiant nouveau cette ligne :
contextNow.arc(125,100,50,six,twelve,true);
284
Quand toutes les modications sont termines, votre arc ressemble prsent une
bouilloire, comme cela est illustr la gure 13.15.
Le seul moyen dapprendre rellement travailler avec des arcs est de sentraner.
Utilisez le script de cette section pour tester diffrentes choses.
Cercles et dgrads
Jusqu prsent, nous navons utilis quun seul type de remplissage, le remplissage
plein. Dans cette section, vous allez voir comment crer un cercle en utilisant un arc
et en le remplissant avec un dgrad.
La cration des cercles est facile avec la mthode context.arc(). Les paramtres
du radian sont 0 et Math.PI*2. Le paramtre du sens des aiguilles dune montre est
gal false (cest l toute lastuce). Lexemple suivant cre un grand cercle qui est
rempli par un dgrad, an quil ressemble un coucher de soleil :
contextNow.arc(200,200,150,0,Math.PI*2,false);
dnir
les
285
compris entre 0 et 1 et le deuxime est la couleur. Quand les paramtres sont dnis,
on assigne le dgrad context.fillStyle. Lextrait de code suivant illustre les
tapes accomplir pour ajouter un remplissage en dgrad :
sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
sunsetGradient.addColorStop(0, "yellow");
sunsetGradient.addColorStop(1, "#cc0000")
contextNow.fillStyle = sunsetGradient;
286
Quand on teste la page, on voit un grand cercle avec un dgrad qui vire du jaune
au rouge. Vous pouvez aussi utiliser la mme technique de dgrad avec dautres formes.
La gure 13.16 illustre le rsultat.
On peut encore raliser plein dautres choses avec des canvas, et lune des
meilleures caractristiques de ces images cres avec des objets du DOM par rapport
aux images bitmap, cest quelles consomment trs peu de bande passante. Nous
navons cependant que survol ltude de ce nouvel lment HTML5 qui est extrmement puissant.
287
dessus (vous pouvez aussi crer une image avec un autre type de dgrad et la
superposer sur une photo numrique ou une autre image. Que diriez-vous dun
ltre en dgrad ?).
14
Ajout de formulaires
Objectif
Lune des fonctionnalits les plus importantes de toute page Web est sa capacit
dinteraction avec une personne. Dans le jargon informatique, il y a une souscatgorie appele interface homme-machine qui traite les humains comme un autre
type dinterface tel quune imprimante, une cl USB ou une webcam. Cela ne
dshumanise pas les gens qui utilisent un ordinateur, mais au contraire cela traite les
gens comme quelque chose quils ne sont pas et ceci vous posera des problmes un
moment ou un autre. Ce chapitre montre comment ajouter des formulaires et traiter
les personnes comme des personnes.
290
291
</article>
</body>
</html>
Si vous tes dj familier des formulaires HTML, vous savez que ce formulaire est
diffrent car il possde une saisie numrique qui traite les entres comme des nombres
rels et non pas comme du texte qui doit tre converti en nombres par JavaScript.
Cette fonctionnalit ntait pas disponible dans les prcdentes versions de HTML.
La gure 14.1 illustre les contrles spinner qui apparaissent dans Opera quand les
pages Web utilisent une saisie numrique.
292
target
La plupart de ces attributs sont rarement utiliss et certains nont de sens que lorsquon travaille avec des programmes comme PHP et ASP.NET o lon communique
avec une base de donnes. Nous allons cependant tous les examiner.
Si aucun encodage de caractres nest spci, on suppose alors quil est inconnu
et on utilise lencodage par dfaut. Quand on utilise plusieurs encodages, chaque
encodage est spar par un espace en HTML5, alors que dans les versions prcdentes
de HTML le sparateur tait une virgule ou un point-virgule.
La plupart du temps, lattribut enctype est laiss vide et il utilise le paramtre par
dfaut. Lattribut enctype possde trois mots-cls et trois tats (mot-cl/tat) :
application/x-www-form-urlencoded (par dfaut)
multipart/form-data
text/plain
Un formulaire peut tre dni pour accepter le texte clair, ce qui donne lassignation suivante :
<form enctype="text/plain">
Pour la plupart cependant, il sagit dun autre attribut qui nest pas inclus dans la
balise <form>. Cela est d au fait que la valeur par dfaut (urlencoded) est celle qui
est privilgie.
Lattribut novalidate est un boolen utilis dans la validation du formulaire ; il
bloque la validation des donnes saisies par lutilisateur pendant leur soumission. Cela
peut conomiser du temps, mais cela peut aussi conduire des cafouillages. Parfois
un simple formulaire ou un formulaire ouvert (les donnes soumises sont inconnues)
ne se valide pas parce quil y a des problmes de validation qui sont inconnus. Si cet
attribut est prsent dans la balise form, les lments soumis ne seront pas valids :
<form nonvalidate>
293
Vous nutiliserez sans doute pas trs souvent les attributs accept-charset, enctype
et novalidate, mais les attributs de llment input pour grer la non validation et la
saisie des donnes obligatoires peuvent se rvler pratiques.
Autocomplete
autocomplete est un attribut de formulaire assez simple, mais qui est important. Il
possde deux tats, on et off, et sa valeur par dfaut est on. Fondamentalement, si vous
Quand cet attribut est off, les mots qui sont rutiliss ne safcheront pas. Par
exemple, si vous avez chang dadresse lectronique, votre ancienne adresse peut
safcher automatiquement dans les champs de saisie de ladresse lectronique si
lattribut autocomplete nest pas dni off.
Name et target
Lattribut name est lun des attributs les plus importants du formulaire car il est utilis
par le DOM pour lidentier. En tant que proprit de lobjet document, il peut tre
rfrenc soit comme lment de tableau (par exemple forms[0]), soit par son nom.
Dun point de vue pratique, il est plus facile de faire rfrence un formulaire et ses
sous-formulaires par leur nom.
En plus de lattribut name, les formulaires ont un attribut global, id. Les deux
attributs ont des noms. Dans le DOM, la rfrence se fait sur lattribut name, mais
lintrieur dun document Web unique (une page), dautres lments peuvent identier
le formulaire grce une rfrence lID du formulaire. Il y a de plus une nouvelle
fonctionnalit de HTML5 qui permet au formulaire enfant dexister en dehors du
conteneur <form> et davoir un attribut de formulaire qui le relie nimporte quel
formulaire de la page. Par exemple, llment de saisie de texte suivant fait partie du
formulaire dont lid est ralph.
294
name=maison>
Llment de saisie de texte peut se situer nimporte o sur la page, ce qui signie
que les concepteurs nont pas mettre tous les champs de saisie en un mme lieu.
Testez le script suivant (FormID.html disponible dans les chiers du chapitre) avec le
navigateur Opera (qui a implment cette nouvelle fonctionnalit).
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
FormMaster=new Object();
FormMaster.resolveForm=function()
{
favorite = document.formName.favURL.value;
personName=document.formName.person.value;
message= "Le site Web favori de " + personName + " est " +favorite;
document.formName.output.value=message;
}
</script>
<style type="text/css">
h3 {
font-family:"Arial Black", Gadget, sans-serif;
color:#97CCA6;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#EFF09E;
background-color:#AB1F33;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Champs de saisie distants</title>
</head>
<body >
<article>
<header>
<h3>ID connecter</h3>
</header>
<section> Quel est votre site Web favori ?<br>
<label>Site favori :
<input type=url form=formID name=favURL>
</label>
</section>
<section>
<blockquote> Cette section reprsente une coupure entre le premier champ
de saisie (qui ncessite une URL) et le reste du formulaire auquel le
formulaire dURL appartient. Cela laisse plus de latitude aux concepteurs dans
la gestion dun site interactif. </blockquote>
</section>
<section>
<form name=formName id=formID>
<label>Quel est votre nom ?
<input type=text name=person>
</label>
295
<br>
Rsultat :<br>
<textarea name=output cols=50 rows=5></textarea>
<br>
<input type=submit name=submit value="On rassemble les morceaux"
></form>
</section>
</article>
</body>
</html>
296
297
}
</script>
<style type="text/css">
h3 {
font-family:"Arial Black", Gadget, sans-serif;
color:#677E52;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#89725B;
background-color:#B0CC99;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM et formulaires</title>
</head>
<body >
<article>
<header>
<h3>DOM, le formulaire et les noeuds</h3>
</header>
<form name=motherShip>
<input type=number name=firstInput>
Numro<br>
<input type=email name=secondInput>
Courriel<br>
<input type=text name=thirdInput>
Texte<br>
<input type=text name=fourthInput>
Texte<br>
<input type=url name=fifthInput>
URL<br>
<textarea cols="15" rows="6" name=output></textarea>
<input type=button value="Envoyer au DOM"
></form>
</section>
</article>
</body>
</html>
298
299
Fonctionnalit
Type
Fonctionnalit
Bouton de
commande
checkbox
Slection
color
Palette de couleurs
date*
Slectionneur de
date
datetime*
Slectionneur de
date
datetime-local*
Slectionneur de
date
Envoi de fichier
hidden
Masqu
image
Coordonnes
dimage
month*
Slectionneur de
date
number*
Valeur numrique
password
Masque le mot de
passe
radio
Slection
range*
Plage de nombres
reset
search*
Mots de recherche
submit
tel
Numro de
tlphone
text
Valeur string
time*
Slectionneur de
date
url*
Adresse Web
week*
Dunod Toute reproduction non autorise est un dlit.
button
Slectionneur de
date
Les prochaines sections tudient les diffrents regroupements dlments et dattributs de formulaires tant donn le grand nombre de combinaisons possibles. La
premire section couvre lutilisation de llment datalist avec list et les attributs de
form. Comme pour toutes les sections suivantes, celle-ci rassemble un grand nombre
de fonctionnalits tout en se concentrant sur les fonctionnalits importantes qui sont
lobjet de la discussion.
300
Fonctionnalit
Attribut
Fonctionnalit
accept
Type de fichier
accept
alt
Indice de
chargement de
fichier
autocomplete*
Saisie
semi-automatique
autofocus*
checked
tat slectionn
disabled
Inutilisable
form*
Dfinit lID du
formulaire
formaction*
Substitution
formenctype*
Substitution
formmethod*
Substitution
formnovalidate*
Substitution
formtarget*
Substitution
height*
Hauteur en pixels
list*
Suggestion de liste
de donnes
max*
Valeur maximale
maxlength
Longueur maximale
min*
Valeur minimale
multiple
Valeurs multiples
name
Nom DOM
pattern*
Expression rgulire
placeholder*
Disparat la saisie
readonly
Saisie impossible
required*
Champ obligatoire
size
Nombre de
caractres visibles
src
Source
step*
Nombre dtapes
type
Type de saisie
value
Valeurs assignes
width*
Largeur en pixels
301
est stocke en dehors du conteneur <form>, mais elle est connecte via lID de la liste
de donnes.
302
</form>
</section>
</article>
</body>
</html>
En examinant le script, vous vous demandez peut-tre ce que lattribut label fait
dans la balise <option> du conteneur <datalist>. Il ny a pas dattribut label dans
les lments form ou input (voir les tableaux 14.1 et 14.2) car cet attribut se trouve
dans la balise <option>. Bien que cela paraisse vident, quand on ouvre la page, on
voit non seulement les URL, mais aussi le libell dans la fentre de saisie des URL.
Cela sexplique car la balise <input type=url> contient une rfrence aux options de
la liste de donnes via lattribut list du balisage de llment input.
Pendant la rdaction de ce livre, la liste de donnes ne safchait que sous Opera
(Windows 7 ou Mac OS X).
Dans le champ de saisie, on peut voir les slections disponibles dans la liste de
donnes (il y a aussi un libell pour chaque adresse). Quand lutilisateur fait une
slection, elle apparat dans le champ de saisie. Enn, le rsultat de la saisie est pass
la fonction JavaScript qui lafche dans une bote de dialogue (vous noterez que la
bote de dialogue du navigateur Opera afche aussi le domaine).
Le point important de ce processus est que les utilisateurs nont pas saisir les URL.
Toute personne qui a dj saisi une adresse de site Web a commis une faute de frappe
un moment donn. La liste de donnes oriente le choix de lutilisateur et facilite sa
saisie.
303
Figure 14.4 Clavier spcifique pour la saisie dune URL sur un priphrique mobile (gauche)
et clavier mobile standard (droite).
En raison du fait que le script suivant renvoie les donnes saisies un objet
<textarea> de la page, ces donnes doivent tre contrles en utilisant JavaScript
avec une petite boucle pour voir dabord si lattribut checked est gal true ou
false. Si llment est slectionn, le script ajoute ensuite la valeur une proprit
FormMaster nomme this.countVal (cest comme une variable, mais on garde le style
304
305
306
</div>
</article>
</body>
</html>
Bien que ce programme soit un peu long, la majeure partie est du code de mise
en forme si bien quil est de taille convenable et facilite la tche des utilisateurs. La
balise <fieldset> a t utilise pour mettre en vidence un groupe de boutons et pour
encapsuler la fentre de rsultat. Cest une balise essentielle quand on veut regrouper
des lments. La balise <legend> permet de placer une tiquette dans le rectangle qui
encadre lensemble des champs. La gure 14.5 illustre le rsultat attendu.
Quand on excute le programme pour la premire fois, on voit que la case cocher
HTML5 a dj t slectionne. Cela est d au fait que lattribut checked a t ajout
la balise. Il sagit dun boolen, mais on na pas lui assigner la valeur true ou false.
Aprs le chargement de la page, examinez ce qui se passe quand vous cliquez dessus.
La fentre de rsultat abrite toutes les valeurs qui ont t assignes aux cases
cocher et aux boutons radio. Dans une vritable application, ces donnes seraient
envoyes dans une base de donnes.
307
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
FormMaster=new Object();
FormMaster.resolveForm=function()
{
alert(document.calendar.dateNow.value);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Date</title>
</head>
<body >
<form name=calendar>
<input name=dateNow type="date" ></form>
</body>
</html>
Avec simplement cette petite balise dans le conteneur form, vous tes capable
de crer un programme de calendrier complet. Vous pouvez utiliser le gestionnaire
dvnements onChange pour capturer la date slectionne dans le calendrier. La
gure 14.6 illustre lapplication dans le navigateur Opera (le seul prsent qui
fonctionne avec ce nouvel attribut de saisie) sous Windows 7.
Dans cette implmentation particulire, ds que lutilisateur fait son choix, une
bote de dialogue souvre et afche la date slectionne, comme cela est illustr la
gure 14.7.
Le but est ici de montrer comme il est facile de passer la valeur de la date
slectionne. De telles donnes pourraient tre stockes dans une base de donnes
pour un systme de rservation en ligne.
La petite fentre derrire la bote de dialogue montre la date slectionne sans quil
y ait besoin de beaucoup de programmation. Ce nouvel attribut va vraiment faciliter
la vie des utilisateurs quand ils veulent choisir une date. Si vous avez dj expriment
ce genre de systme pour rserver un avion ou un htel, vous savez comme cet outil
est apprciable. Le problme est que pour le moment seul le navigateur Opera la
implment.
308
309
Vous devez utiliser JavaScript pour accder aux donnes qui sont en gnral passes
un programme ct serveur comme PHP, ColdFusion ou ASP.NET. Pour simuler
ce comportement, les exemples de ce chapitre ont utilis un bouton de commande
qui dclenchait un programme JavaScript an denvoyer les rsultats dans une balise
<textarea> o lon pouvait voir ce qui aurait t normalement envoy une base de
donnes. Voici les ds que vous aurez relever :
Imaginez un magasin en ligne qui vend une gamme de produits (au moins cinq)
ou fournit des services (au moins cinq), par exemple un magasin dinformatique
ou bien un service de conception de sites Web.
Concevez une interface o les utilisateurs entrent leur nom, leur adresse
lectronique, une URL, leur adresse complte, un nom dutilisateur et un mot
de passe. La saisie doit tre la plus simple possible pour lutilisateur. Faites tester
le formulaire par quelquun qui ne la jamais vu auparavant.
Les utilisateurs slectionnent ensuite plusieurs produits ou services.
Les slections de lutilisateur sont ensuite afches dans une balise <textarea>
avec leur prix individuel HT et TTC.
Le programme gnre aussi une tiquette dexpdition qui se contentera dtre
afche dans un objet <textarea> et qui ne sera donc pas imprime.
15
Incorporation dobjets et
stockage dinformations
Objectif
Pendant des annes, les utilisateurs ont t capables de raliser des choses remarquables sur le Web grce diffrentes sortes de plug-ins chargs dans le navigateur.
Dune manire gnrale, deux plug-ins principaux sont installs avec la plupart des
navigateurs : Adobe Flash Player et Java.
Certaines des nouvelles fonctionnalits de HTML5 marchent mieux avec des plugins spciaux ou via une URL qui exploite la nouvelle fonctionnalit. Parmi ces
nouveaux objets HTML5, lobjet geolocation permet de raliser des choses trs
intressantes et cest celui que nous tudierons en premier. Ensuite, nous examinerons
comment Flash fonctionne avec HTML5.
15.1 GEOLOCATION
Lobjet geolocation fait partie de lobjet navigation du DOM HTML5. Il permet
notamment de trouver plus ou moins prcisment lemplacement o vous vous
trouvez. Les attributs les plus importants de lobjet geolocation sont latitude et
longitude. Grce ces valeurs, vous pouvez charger une carte dun emplacement si
vous connaissez ses coordonnes.
La cration dune page HTML qui montre aux utilisateurs leur latitude et leur
longitude est parfaite, mais les navigateurs HTML5 sont aussi capables de charger une
carte sur un site Web avec Google Maps. Voici lURL qui permet de raliser cela :
312
Pour ltrer les navigateurs qui ne reconnaissent pas lobjet geolocation, il suft
dutiliser la technique suivante :
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(uneFonction);
}
else
{
alert("Geolocation nest pas reconnu !")
}
Cela permet davertir les utilisateurs que leur navigateur ne prend pas en charge
lobjet geolocation.
La fonction appele pour obtenir les informations de positionnement doit inclure
un paramtre qui stocke ces informations. En utilisant des objets et des mthodes,
lappel de fonction est ralis de la manire suivante :
...
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
...
Vous remarquerez que le paramtre position est similaire une variable qui stocke
les valeurs de latitude et de longitude. Il ne sagit pas dune proprit de lobjet
geolocation (cords.latitude et cords.longitude sont les proprits ; cest moi qui ai
15.1 Geolocation
313
choisi le nom position car je le trouve plus descriptif que NainTracassin , par
exemple, mais vous pouvez utiliser le nom que vous voulez).
Une fois que les valeurs sont assignes au paramtre de lobjet, elles font partie
de lobjet LocationMaster grce lemploi du mot-cl this. Les proprits latNow et
longNow stockent les valeurs comme sil sagissait de variables, la seule diffrence tant
quelles font partie de lobjet.
Vous trouverez une nouvelle mthode dans le cur du DOM HTML5 : getElementById. Dans cet exemple, lID est celui dun lment iFrame, la carte tant lobjet
source, tout comme une image est charge grce lidentication de sa source :
<img src="monImage.jpg">
La seule diffrence est que lendroit o la carte est charge est spci par lID de
liFrame et non pas par la page par dfaut.
314
body {
font-family:Verdana, Geneva, sans-serif;
color:#40372B;
background-color:#FFDDAE;
}
h3 {
font-family:Tahoma, Geneva, sans-serif;
color:#BF7F6C;
}
</style>
<script>
LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;
document.getElementById("mapHolder").src =
"http://maps.google.com/maps?hl=en&ie=UTF8&ll=" + this.latNow + "," +
this.longNow + "&spn=0.054166,0.110378&z=13&output=embed";
}
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
}
else
{
alert("Essayez un navigateur HTML5 diffrent car celui-ci ne
fonctionne pas avec lobjet geolocation.");
}
</script>
<title>Carte minimale</title>
</head>
<body>
<article>
<header>
<h3>Votre emplacement</h3>
</header>
<section>
<iframe id="mapHolder"> </iframe>
</section>
<section>
<p> Cet exemple dutilisation de la golocalisation et de Google Maps
est trs simple. Il a t test avec les principaux navigateurs et les
navigateurs mobiles. </p>
</section>
</article>
</body>
</html>
Quand vous testerez cette page Web, prenez dabord la dernire version du
navigateur Firefox. Essayez ensuite avec Google Chrome et Opera. Avec Safari, qui
reconnat lobjet geolocation, jai t incapable de charger la carte dans lobjet iframe.
Ironiquement, quand jai test ce code sur le navigateur Safari mobile de liPhone, cela
fonctionnait parfaitement. La gure 15.1 illustre le programme avec Internet Explorer
sous Windows 7.
15.1 Geolocation
315
Figure 15.1 Outil geolocation utilis pour trouver la longitude et la latitude avec Google Maps.
Vous pouvez dplacer la carte dans liframe avec la souris et, sur les navigateurs
Safari et Perfect sur un iPhone, avec les doigts. Cependant, sur les navigateurs mobiles,
liframe et limage sont agrandies par un glissement vers le bas.
Pour rendre la page plus pratique pour les utilisateurs mobiles, jai procd quelques
ajustements an de changer lorientation de la carte en modiant l<iframe> de la
manire suivante :
<section>
<iframe id="mapHolder" width="240" height="320"> </iframe>
</section>
316
longitude
altitudeaccuracy : niveau de prcision en mtres de laltitude
heading : direction du dplacement du priphrique hte en degrs (pertinent
priphrique mobile)
Si vous disposez dun tlphone mobile, vous pouvez, par exemple, tester lorientation et la vitesse en voiture, si ce nest pas vous qui conduisez ! Toutes les proprits
de geolocation peuvent tre envoyes un formulaire pour tre afches si vous le
souhaitez. Si vous utilisez ces informations sur un priphrique mobile, vous aurez
besoin dun serveur open-socket ou dun frquent rafrachissement de page.
317
Vous pouvez mettre jour lexemple de page Web avec les mmes dimensions en
donnant la balise <iframe> les attributs suivants : width=500 height=400. Il suft
ensuite de cliquer sur loption Earth au sommet de la carte ; si votre navigateur a
le plug-in, il afchera une vue en 3D. Dans le cas contraire, on vous proposera de
tlcharger le plug-in et de linstaller sur le navigateur.
318
Tous les navigateurs ne supportent pas tous ces contextes de stockage, mais au fur
et mesure que les navigateurs sont mis jour, ils incluent de plus en plus de contextes.
Au moment de la rdaction de cet ouvrage, Safari, Chrome et Opera prenaient en
charge tous les contextes sauf le stockage global ; Firefox prenait en charge tous les
contextes, sauf le stockage de base de donnes.
Le stockage est ralis laide de paires cl/valeur, la cl tant un identiant dune
valeur donne (la cl ressemble une variable avec un libell et une valeur assigne).
Les deux sections suivantes expliquent comment fonctionnent le stockage de session
et le stockage local. Je laisse de ct le stockage global et le stockage de base de
donnes car pour le moment ils sont moins bien implments.
La cl doit tre une chane de caractres (type string), alors que la valeur peut
tre de nimporte quel type de donnes acceptable (numrique, texte, boolen, objet,
fonction). Le code suivant fournit quelques assignations valides :
this.maCle="deuximeCle"; //Nom de cl assign une proprit
function bonjour()
//Fonction avec une valeur de retour
{
return "Salut !";
}
jill="Mon nom est Jill"; //Variable
//Assignation de valeurs aux cls
sessionStorage.setItem("premiereCle",88);
//Nombre (numrique littral)
sessionStorage.setItem(this.maCle,true ); //Boolen
sessionStorage.setItem("troisiemeCle",bonjour() ); //Fonction
sessionStorage.setItem("quatriemeCle","Mon nom est Jack" ); //String littrale
sessionStorage.setItem("cinquiemeCle",jill ); //Variable
Comme vous pouvez le voir, on peut utiliser des variables pour les cls et leurs
valeurs. Tant que la variable (ou la proprit) est une donne de type string, elle peut
tre utilise comme cl (vous pouvez mme utiliser une fonction qui retourne une
valeur string comme cl).
Une fois que vous avez stock les donnes, vous avez besoin dun moyen de les
rcuprer grce une mthode. Voici la syntaxe gnrale pour obtenir les donnes
319
stockes (il faut connatre le nom de la cl de chaque valeur que lon souhaite
rcuprer).
sessionStorage.getItem(("nomCl");
Vous pouvez vous reprsenter le nom de la cl comme sil sagissait dun nom de
variable : si vous connaissez le nom de la variable, vous pouvez retrouver sa valeur. Les
noms de cls fonctionnent de la mme manire.
320
}
h3 {
color:#323F14;
}
fieldset {
color:#790007
}
#playerTable {
display:table;
}
#getPlayer {
display:table-cell;
width:250px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stockage</title>
</head>
<body>
<article>
<header>
<hgroup>
<h2>Entraneur de baseball</h2>
<h3>Assignation des joueurs :</h3>
</hgroup>
</header>
<section>
<form name=players>
<input type=text name=firstBase placeholder="Premire base">
Premire base<br>
<input type=text name=secondBase placeholder="Deuxime base">
Deuxime base<br>
<input type=text name=thirdBase placeholder="Troisime base">
Troisime base<br>
<input type=button value="Assignation
des positions">
</section>
<br>
<div ID="playerTable">
<section ID="getPlayer">
<fieldset>
<legend>Qui joue quoi ?</legend>
<input type=button value="Qui est en
premire base ?">
<br>
<input type=button value="Qui est en
deuxime base ?">
<br>
<input type=button value="Qui est en
troisime base ?">
<br>
</fieldset>
</form>
</section>
</div>
</body>
</html>
321
Quand on charge la page pour la premire fois, on voit un nouvel attribut HTML5
dans les champs de saisie de texte. Il sagit de textes de substitution qui sont cods de
la manire suivante :
< input type=text name=thirdBase placeholder="Troisime base">
Si vous tentez de rcuprer les donnes avant davoir cliqu sur le bouton
Assignation des positions, vous obtiendrez une valeur null dans la bote de dialogue.
Si vous quittez la page et y revenez, vous obtiendrez aussi des valeurs null tant que
vous naurez pas rassign les positions des joueurs.
322
qui nest pas le cas du stockage local ; cela signie que le stockage local demande
beaucoup moins de travail au serveur et au navigateur. Le stockage local nest
transmis que si lon en fait la demande.
Vous verrez que le stockage local et le stockage de session utilisent les mmes
mthodes pour dnir les valeurs et les rcuprer, si bien que vous navez apprendre
la syntaxe quune seule fois. Lexemple suivant (StockageLocal.html disponible dans
les chiers du chapitre) montre comment stocker, retrouver et effacer les donnes du
stockage local.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
StorageMaster=new Object();
//Dfinition des valeurs
StorageMaster.setRegistration=function()
{
this.hobbyNow="";
this.topCount=document.loisirs.elements.length;
for(var count=0;count < this.topCount;count++)
{
if(document.loisirs.elements[count].checked)
{
this.hobbyNow=document.loisirs.hobby[count-2].value;
}
}
localStorage.setItem("uNom",document.loisirs.userName.value);
localStorage.setItem("uHobby",this.hobbyNow);
localStorage.setItem("uVille",document.loisirs.ville.value);
}
//Rcupration des valeurs
StorageMaster.getReg=function()
{
userProfile="Profil Utilisateur :\n";
nomNow=localStorage.getItem("uNom")+"\n";
hobbyNow=localStorage.getItem("uHobby")+"\n";
villeNow=localStorage.getItem("uVille")+"\n";
fileLength=localStorage.length + " lments dans le profil";
this.profile=userProfile+nomNow+hobbyNow+villeNow+fileLength;
document.getElementById("profile").innerHTML = this.profile;
}
StorageMaster.clearReg=function()
{
localStorage.clear();
alert("Stockage local effac");
}
</script>
<style type="text/css">
/*962D3E,343642,979C9C,F2EBC7,348899 */
body {
background-color:#F2EBC7;
color:#962D3E;
323
324
325
Avant HTML5, envoyer une page Web des donnes de manire dynamique sans
recharger la page tait bien plus complexe. Cependant, pour certains programmes
comme Adobe Flash CS6, cest assez facile, comme nous allons le voir dans la
prochaine section.
326
de prsentation entre les plateformes et les navigateurs. Cest la raison pour laquelle
les concepteurs et les dveloppeurs ont utilis Flash.
Vous pouvez placer lanimation sur une page Web de plusieurs manires diffrentes,
mais le plus simple est de la publier en Flash, ce qui gnre automatiquement une
page Web avec une rfrence au chier binaire qui est stock dans le format .swf.
Dans les navigateurs quips du plug-in Flash (ce qui est le cas de pratiquement tous
les navigateurs), le code suivant (EtoileFilante.html disponible dans les chiers du
chapitre) illustre lobjet empaquet dans une page HTML5.
<!DOCTYPE HTML>
<html>
<head>
<title>Etoile filante</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300"
height="200" id="ShootingStar" align="middle">
<param name="movie" value="ShootingStar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
327
328
Index
Symboles
paramtres 281
3GP 219
arcTo 275
A
a 137
attribut 13, 38
language 39
audio 201
accept-charset 292
application Magntophone 208
actualisation
boucle 205
automatique 92
contrles 202
addColorStop 284
conversion des chiers 210
address 97
cration de chiers 208
Adobe Device Central 224
effets sonores 210
Adobe Illustrator CS5 HTML5 Pack 196
formats 206
Adobe Media Encoder CS5 222
lecture automatique 202
afchage
MP3 206
sur des terminaux diffrents 27
OGG 206
align 51, 191
prchargement 203
alternate stylesheet 132
prise en charge par les navigateurs
altitude 316
205
analyse syntaxique 32
sons de transition 211
ancre
source 218
page 141
type 206
animation
WAV 206
Flash 326
WMA 208
anticlockwise 275
audio
apostrophe 39
balise 201
Apple Quick-Time Player 227
Apple Safari 26
source 206
a href 137
arc
330
auteur
identication 138
author 138
autocomplete 293
attribut de saisie 300
autoplay 202, 231
avec le prchargement 204
B
balise 12, Voir aussi lment
attribut 38
de commentaire 40
lment 38
fonctionnement 35
identication des parties 38
imbrication 43
valeur 38
bande passante
optimisation avec des iframes 170
base 90
beginPath 275
bezierCurveTo 275
_blank 144
blocs de texte
organisation 53
body 37, 96
boolean 249
bordure
tableau 118
boucle
audio 205
vido 230
bouton radio 303
br 49
Browserlab 23
mode Pelure doignon 24
C
cadre insr Voir iframe
calendrier
insertion dans un formulaire 307
calque 197
prservation 180
camscope
de taille rduite 226
standard 226
Camtasia 227
canvas 259
ajout dune ombre porte 271
ajout de couleurs 278
ajout de traits 268
arcs 281
attributs 262
cercle 284
chargement dune image 269
couleur de remplissage 264
courbes 280
cration de dessins complexes 274
dgrad 284
objet 263
ombre autout dune image 269
point de dpart 276
prparation du trac 263
quadrillage 262
ralisation de plusieurs dessins 265
simple 262
suppression de dessins 268
travail avec les ltres 272
capture vido 227
caractre
encodage 48
carte
afchage 313
Google Maps 311
sur un terminal mobile 315
case cocher 303
cellule 123
extension 123
cercle 284
chemin
relatif 110
Chrome 23
cite 139
331
Index
classe
cration en CSS3 64
CSS3 64
utilisation avec la balise <span> 65
clearRect 268
closePath 275, 277
code
analyse syntaxique 32
code de caractre 119
codec 207
dtermination 229
cohrence
navigation 162
color
modle 80
noms standard 70
palette 82
RGB 69
SVG 70
transparence 78
utilitaire Kuler 80
couleur de fond
propagation 58
tableau 120
createLinearGradient 284
CSS3 56
ajout de style 56
classe 64
commentaires 68
cration dun chier 60
dnition de tableau 114
exemple de texte styl 57
ID 64, 141
lignes de commentaires 60
pseudo-classes 164
D
datalist 15, 300, 302
332
div
extension
afchage sous Windows 33
compatible Web 32
333
Index
fonction
anonyme 255
JavaScript 239
paramtre 239
footer 97
form 289
formnovalidate 292
formulaire
ajout 289
attribut id 293
attribut name 293
attributs gnraux 291
enfant 293
insertion dun slecteur de date 307
liste de suggestions 300
partie du DOM 296
rferencement des objets 296
regroupement dlments 306
saisie de nombres 291
saisie en dehors du conteneur 295
function 249
geolocation 311
proprits 316
utilisation avec Google Earth 317
gestionnaire dvnements 240
imbriqu 243
getElementById 313
GIF 179
anim 111, 179
modication de la taille des chiers
188
Google Chrome 23
Google Earth 317
Google Maps 311
Graphic Information Format Voir GIF
guillemet
utilisation 39
H
h
ajout de style 56
H.264 218, 219
head 36, 60, 89
height 232
canvas 263
hexadcimal
valeur de couleur 76
hgroup 54, 56
hover 84
hr 103
abus 104
href 48, 137
hreflang 137
HSL 72
HTML
versions prcdentes 16
HTML5
choix dun navigateur 21
chiers connexes 32
notication de lincompatibilit
lutilisateur 260
nouveaux lments 13
http-equiv 92
HyperText Markup Language
Voir HTML
I
icon 135
icne
servant de vignette 170
icne de lien 135
ID
ancre 141
CSS3 64, 66, 143
diffrences par rapport une classe
67
exemple dutilisation 67
IE9 Voir Internet Explorer 9
334
K
Kuler 80
partir dune couleur de base 81
partir dune image 81
L
lang 39
langue 39
last 140
latitude 311
length 253
lien 48, 131, 137
hirarchique 140
squentiel 140
vers une image 170
lineTo 275
link
attributs 131, 137
list
J
JavaScript 93
appel dune page lie 160
dtermination du terminal utilis
193
sous-groupe 158
liste non ordonne 100
liste ordonne 100
LocationMaster 313
longitude 311
335
Index
M
mailto 138
media 137
MediaInfo 229
meta 48, 91
mots-cls 91
mtadonnes 89
mthode 254
ajout un objet 255
microphone
paramtrage 209
Microsoft Movie Maker 225
Miro Video Converter 222
moveTo 275
Mozilla Firefox 22
MP3 206
MPEG-4 218
N
name 141, 293
navigateur
compatibilit vido 221
compatible HTML5 21
dtection de lordinateur utilis 252
chiers lisibles 32
notication de lincompatibilit
HTML5 260
objets 255
prvisualisation 27
prise en charge de laudio 205
slection des feuilles de styles 133
test de compatibilit avec
Browserlab 23
navigation
concepts 151
globale 153
horizontale 163
menus droulants 157
pseudo-classes CSS3 164
stratgies de conception 152
O
object 249
object 327
objet 253
ajout sur une page Web 326
ajustement sur la page 327
cration 254
mthodes 254
proprits 254
OGG 206, 219
ol 100
ombre
proprits 271
onClick 241
ondbleclick 240
onFormInput 247
onLoad 240, 270
Opera 24
optgroup 158
diffrences entre les navigateurs 159
option 157, 158
organisation
en blocs 53
output 246
336
P
padding 120
page
actualisation automatique 92
liens 137
modication automatique 92
organisation 49
structure 50
page Web
chargement partiel 170
imbrication 146
intgration deffets sonores 212
intgration dune vido 218
lecture de chiers vido 219
organisation 90
organise avec des sections 98
sections 95
palette
intgration la page Web 82
paramtre 239
_parent 144
parsing Voir Analyse syntaxique
pattern
PPI 61
prchargement 135, 203
prefetch 135
prefetching Voir prchargement
preload 203, 230
paramtres 204, 230
prev 140
principes de base 47
programmation
multiplateforme 193
programmation oriente objets Voir POO
proprit
ajout un objet 254
Q
quadraticCurveTo 275
quadrillage 276
QuickTime 225
R
radian
diffrence avec un degr 280
range
attribut 137
required 292
attribut de saisie 300
rsolution 61
densit des pixels 61
RGB 69
avec des entiers dcimaux 74
pourcentage 71
rowspan 123
337
Index
S
Safari 26
saisie
adresse lectronique 298
attributs des lments 300
semi-automatique 293
types 298
types des lments 299
URL 298
sandbox 148
saut de ligne
conditionnel 49
opportunit 49
Scalable Vector Graphics Voir SVG
script 94, 238
seamless 148
search
stockage
de session 318
local 321
types en HTML5 317
string 249
strokeRect 268
structuration
en niveaux hirarchiques 55
structure
page Web 50
style
ajout avec CSS3 56
en ligne 57, 63
syntaxe de la dnition 57
style 56, 57
stylesheet 133
SVG 70, 178
code spcique 197
chiers dynamiques 196
modication de la taille des chiers
189
modication dynamique 197
338
variable 248
tlphone
positions diffrentes 61
diffrence avec un tableau 252
problmes de rsolution dcran 61
mlange de diffrents types 250
terminal mobile
type de donnes 249
afchage 27
video
problmes dafchage 61
attributs 228
textarea 297
balise 218
texte
vido 218
habillage par une image 51
3GP 219
styl avec CSS3 57
boucle 230
TextEdit
contrle des dimensions 232
rglages des paramtres par dfaut 34
contrles 231
th 117, 120, 122, 123
conversion de chiers 222
this 255
cration pour le Web 225
Tidwell, Jennifer 151
dtermination du codec 229
time
Flash 218
type de saisie 299
format 4/3 223
title 137
formats pris en charge par les
_top 144
navigateurs 222
tr 117
H.264 218, 219
transparence 78
haute dnition 218
TSL Voir HSL
MPEG-4 218
Tufte, Edward 152
OGG 219
type 137
ratio dafchage 232
attribut 206
streaming 217
codec 207
WebM 219
type de document
vignette 170
dclaration 48
dans un iframe 146
type de donnes 249
U
ul 100
up 140
url 298
URL 48
remplacement par # 52
urlencoded 292
WAV 206
wbr 49
webcam 225
WebM 219
width 61, 232
canvas 263
WMA 208
V
valeur
emploi des guillemets 38
X
X11 70