Vous êtes sur la page 1sur 299

Notions

fondamentales sur
le dveloppement
dapplications
HTML5

Official Academic Course

MTA Examen 98-375

Microsoft Official Academic Course

Notions fondamentales sur


le dveloppement
d'applicationsHTML5,
examen98-375

| i

VP & DITEUR
DITEUR
DIRECTEUR DES VENTES
DIRECTEUR DU MARKETING
CHEF DE PRODUIT MICROSOFT
ASSISTANT DITORIAL
RESPONSABLE ADJOINTE DU MARKETING
DIRECTRICE DE PRODUCTION SENIOR
DIRECTEUR DE PRODUCTION ASSOCI
DIRECTEUR DE LA CRATION
CONCEPTRICE DE LA COUVERTURE
TECHNOLOGIE ET MDIAS

Don Fowley
Bryan Gambrel
Mitchell Beaton
Chris Ruel
Rob Linsky de Microsoft Learning
Jennifer Lartz
Debbie Martin
Janis Soo
Joel Balbin
Harry Nolan
Georgina Smith
Tom Kulesa/Wendy Ashenberg

Cet ouvrage a t ralis en Garamond par Aptara, Inc. et imprim et reli par Bind-Rite Robbinsville.
La couverture a t imprime par Bind-Rite Robbinsville.
Copyright 2013 par John Wiley & Sons, Inc. Tous droits rservs.
Aucune partie de cette publication ne peut tre reproduite, stocke dans un systme de rcupration ou transmise sous
quelque forme ou par quelque moyen que ce soit (lectronique, mcanique, photocopie, enregistrement, numrisation
ou autre), l'exception des cas permis par les articles107 ou108 de la loi amricaine sur les droits d'auteur de1976
(United States Copyright Act), sans l'autorisation crite pralable de l'diteur, ou l'autorisation obtenue moyennant
le paiement des frais par copie appropris au Copyright Clearance Center, Inc. 222 Rosewood Drive, Danvers, MA
01923, site web www.copyright.com. Les demandes d'autorisation l'diteur doivent tre adresses par courrier
Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, (201)748-6011,
tlcopie (201)748-6008, Site web http://www.wiley.com/go/permissions.
Microsoft, ActiveX, Excel, InfoPath, Microsoft Press, MSDN, OneNote, Outlook, PivotChart, PivotTable, PowerPoint,
SharePoint, SQL Server, Visio, Visual Basic, Visual C#, Visual Studio, Windows, Windows7, Windows Mobile,
Windows Server et Windows Vista sont des marques dposes ou des marques commerciales de Microsoft Corporation
aux tats-Unis et/ou dans d'autres pays. Les autres noms de produits et de socits mentionns dans ce document sont
des marques de leurs propritaires respectifs.
Les noms de socits, d'organisations, de produits, de domaines, d'adresses de messagerie, de logos, de personnes,
de lieux et d'vnements mentionns dans les exemples sont fictifs. Toute ressemblance avec des noms ou des
vnements rels est purement fortuite et involontaire.
Cet ouvrage exprime les points de vue et les opinions de l'auteur. Les informations contenues dans cet ouvrage sont
fournies sans garantie expresse, lgale ou implicite. Ni les auteurs, John Wiley & Sons, Inc., Microsoft Corporation, ni
leur revendeurs ou distributeurs ne seront tenus responsables de quelque dommage que ce soit, caus ou prsum avoir
t caus directement ou indirectement par cet ouvrage.
ISBN978-1-118-35993-8
Imprim aux tats-Unis d'Amrique
10987654321

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

CONTRAT DE LICENCE UTILISATEUR FINAL


WILEY POUR LE LIVRE LECTRONIQUE
MOAC ET LE CONTENU DU FORMATEUR
Le prsent document est le Contrat de Licence Utilisateur Final limit de John Wiley and Sons Inc. ( Wiley ) et rgit
votre utilisation du livre lectronique Microsoft Official Academic Course de Wiley (le Livre lectronique MOAC ) et du
contenu sy rapportant (le Contenu du Formateur ). EN TELECHARGEANT, EN UTILISANT OU EN ACCEDANT
AU LIVRE LECTRONIQUE MOAC OU AU CONTENU DU FORMATEUR, VOUS ACCEPTEZ LES CONDITIONS
GENERALES DU PRESENT CONTRAT. SI VOUS NE LES ACCEPTEZ PAS, VOUS NE DEVEZ PAS TELECHARGER,
UTILISER OU ACCEDER AU LIVRE LECTRONIQUE MOAC OU AU CONTENU DU FORMATEUR.
Licence :
Par les prsentes, Wiley concde au membre du Programme Microsoft IT Academy, au formateur ou ltudiant
exerant ses droits en vertu du prsent contrat ( vous ), et vous acceptez, une licence non exclusive et non
transfrable pour utiliser le Livre lectronique MOAC et le Contenu du Formateur sous rserve du respect des
conditions gnrales suivantes uniquement :

a. Vous reconnaissez que le Livre lectronique MOAC et le Contenu du Formateur vous sont concds sous

licence pour une dure limite et que votre utilisation est soumise aux conditions gnrales du prsent contrat.

a. Vous trouverez ci-dessous deux sections distinctes relatives aux droits dutilisation. Une seule vous est

applicable.

i. Si vous tes un membre actif du Programme Microsoft IT Academy :


1.

Les Livres lectroniques MOAC sont uniquement destins tre utiliss par vos formateurs
et tudiants.

2.

Vous pouvez tlcharger uniquement le nombre de copies du titre du Livre lectronique


MOAC ncessaires pour permettre vos formateurs et tudiants denseigner ou dassister
au cours portant sur le titre du Livre lectronique MOAC en question.

3.

Vous tes autoris distribuer le Livre lectronique MOAC uniquement vos formateurs et
vos tudiants qui enseignent ou qui assistent aux cours portant sur le Livre lectronique
en question, et uniquement par :

4.

5.

o e-mail ;
o un dispositif USB scuris directement connect aux dispositifs personnels de vos tudiants ;
o un site Web protg par un mot de passe, auquel seuls vos formateurs et tudiants ont
accs.
Vous tes autoris distribuer le Contenu du Formateur uniquement vos formateurs afin
de leur permettre de prparer et de dispenser lun de vos cours portant sur le titre de Livre
lectronique MOAC associ.
Avant de permettre laccs un Livre lectronique MOAC, vous notifierez chaque individu
quil peut utiliser un Livre lectronique MOAC ou y accder uniquement condition
daccepter de se conformer aux exigences suivantes :
o Il utilisera le Livre lectronique MOAC uniquement pour ses besoins de formation
personnels.
o Il installera le Livre lectronique MOAC uniquement sur un dispositif dont il a la
proprit ou qui est sous son contrle.
o Il ne saurait copier, modifier, imprimer, transmettre, transfrer, publier, poster, afficher,
diffuser, distribuer ou tablir un lien vers le Livre lectronique MOAC, en totalit ou en
partie.
o Il utilisera le Livre lectronique MOAC uniquement pendant la priode la plus longue
entre la dure du cours portant sur le Livre lectronique MOAC en question et une
priode de cent quatre-vingt (180) jours, aprs quoi il devra supprimer de manire
scurise toutes les copies du Livre lectronique MOAC en sa possession ou sous son
contrle.
o o Son utilisation du Livre lectronique MOAC devra galement tre conforme
aux termes, conditions ou licences supplmentaires applicables, inclus dans ou
accompagnant le Livre lectronique MOAC en question.

iv | Contrat de licence utilisateur final wiley pour le livre lectronique moac et le contenu du formateur

6.

Avant de permettre laccs tout Contenu du Formateur, vous notifierez chaque formateur
quil peut utiliser le Contenu du Formateur ou y accder uniquement condition daccepter de se
conformer aux exigences suivantes :
o Il utilisera le Contenu du Formateur uniquement pour prparer et dispenser votre session de
formation.
o Il installera le Contenu du Formateur uniquement sur un dispositif dont il a la proprit ou qui
est sous son contrle.
o Il ne saurait copier, modifier, imprimer, transmettre, transfrer, publier, poster, afficher, diffuser,
distribuer ou tablir un lien vers le Contenu du Formateur, en totalit ou en partie.
o Il utilisera le Contenu du Formateur uniquement pendant la priode la plus longue entre la
dure du cours portant sur le Livre lectronique MOAC associ et une priode de cent quatrevingt (180) jours, aprs quoi il devra supprimer de manire scurise toutes les copies du
Contenu du Formateur en sa possession ou sous son contrle.
o Son utilisation du Contenu du Formateur devra galement tre conforme aux termes, conditions
ou licences supplmentaires applicables, inclus dans ou accompagnant le Contenu du Formateur.

i. Si vous tes un tudiant, vous reconnaissez et acceptez ce qui suit :


1.

Vous assistez actuellement un cours dispens par un membre du Programme IT Academy portant
sur le Livre lectronique MOAC.

2.

Vous utiliserez le Livre lectronique MOAC uniquement pour vos besoins de formation personnels.

3.

Vous installerez le Livre lectronique MOAC uniquement sur un dispositif dont vous avez la proprit
ou qui est sous votre contrle.

4.

Vous ne sauriez copier, modifier, imprimer, transmettre, transfrer, publier, poster, afficher, diffuser,
distribuer ou tablir un lien vers le Livre lectronique MOAC, en totalit ou en partie.

5.

Votre utilisation du Livre lectronique MOAC devra galement tre conforme aux termes, conditions
ou licences supplmentaires applicables, inclus dans ou accompagnant le Livre lectronique MOAC
en question.

a. Sauf autorisation expresse dans le paragraphe b ci-dessus, vous ntes pas autoris tlcharger, copier, modifier,
transmettre, transfrer, diffuser, distribuer ou crer des uvres drives de tout Livre lectronique MOAC ou Contenu
du Formateur, en totalit ou en partie, ni crer par dcompilation ou toute autre mthode le code source de tout
Livre lectronique MOAC ou Contenu du Formateur. Vous ntes pas autoris imprimer des copies de tout Livre
lectronique MOAC ou Contenu du Formateur dans son intgralit, mais vous pouvez imprimer des pages individuelles
ou des passages de chapitres du Livre lectronique MOAC afin de les utiliser en cours. Vous ntes pas autoris
utiliser tout ou partie du Livre lectronique MOAC ou du Contenu du Formateur des fins mercantiles au moyen
dune vente, dune revente, dun prt, dun transfert, dune location ou de toute autre forme dexploitation du Livre
lectronique MOAC ou du Contenu du Formateur. Si vous transfrez la possession dun Livre lectronique MOAC ou
Contenu du Formateur un tiers, votre licence sera automatiquement rsilie. Une telle rsiliation viendra sajouter et
se substituer tout recours quitable, civil ou autre dont pourrait disposer Wiley.
b. Vous pouvez utiliser le Livre lectronique MOAC et le Contenu du Formateur applicables uniquement pendant la
priode la plus longue entre la dure du cours portant sur le Livre lectronique MOAC en question et une priode
de cent quatre-vingt (180) jours, aprs quoi vous devrez supprimer de manire scurise toutes les copies du Livre
lectronique MOAC et du Contenu du Formateur en votre possession ou sous votre contrle.
c. LE LIVRE LECTRONIQUE MOAC ET LE CONTENU DU FORMATEUR SONT CONCDS SOUS LICENCE EN LTAT ET
TELS QUE DISPONIBLES , SANS GARANTIE DAUCUNE SORTE.
d. Vous reconnaissez que tous les droits (y compris, de manire non exhaustive, les droits dauteur, brevets et secrets de
fabrication) sur les Livres lectroniques MOAC et le Contenu du Formateur sont la proprit exclusive de Wiley et de
ses concdants de licence. En acceptant le prsent contrat, vous ne devenez pas le propritaire du Livre lectronique
MOAC ni du Contenu du Formateur, mais vous disposez dune licence limite pour utiliser le Livre lectronique MOAC
et le Contenu du Formateur conformment aux dispositions du prsent contrat. Vous acceptez de protger le Livre
lectronique MOAC et le Contenu du Formateur contre tout chargement, utilisation, tlchargement, reproduction
ou distribution non autoris. Vous convenez galement de ne pas traduire, dcompiler, dsassembler ou autrement
reconstituer la logique de tout Livre lectronique MOAC ou Contenu du Formateur. Wiley se rserve tous les droits qui
ne vous sont pas expressment concds dans le prsent contrat.

Avant-propos de l'diteur
Pour la maison d'dition Wiley, la srie Microsoft Official Academic Course est destine
fournir aux instructeurs et aux tudiants les comptences et les connaissances ncessaires
pour utiliser efficacement les technologies Microsoft dans tous les aspects de leur vie
personnelle et professionnelle. Un enseignement de qualit est ncessaire pour aider les
instructeurs et les tudiants tirer le meilleur parti des outils logiciels de Microsoft et
devenir plus productifs. Ainsi, notre mission est de faire de nos programmes de formation
des supports pdagogiques de confiance pour la vie.
Pour accomplir cette mission, Wiley et Microsoft se sont associs pour dvelopper les
programmes ducatifs de la plus haute qualit pour les travailleurs de l'information, les
professionnels de l'informatique et les dveloppeurs. Les documents issus de ce partenariat
portent le nom de marque Microsoft Official Academic Course, ce qui garantit aux
instructeurs et aux tudiants que le contenu de ces manuels est entirement approuv par
Microsoft, et qu'ils fournissent des informations et des instructions de la plus haute qualit
sur les produits Microsoft. Les manuels Microsoft Official Academic Course sont galement
Official (officiels), car il s'agit des cours agrs officiellement pour les membres de
Microsoft IT Academy.
La srie Microsoft Official Academic Course se concentre sur le dveloppement de la maind'uvre. Ces programmes s'adressent aux tudiants qui cherchent entrer sur le march
du travail, changer d'emploi ou se lancer dans une nouvelle carrire comme travailleurs de
l'information, professionnels de l'informatique et dveloppeurs. Les programmes Microsoft
Official Academic Course rpondent leurs besoins en mettant l'accent sur des scnarios de
lieu de travail authentiques avec de nombreux projets, exercices, cas et valuations.
Les cours de la srie Microsoft Official Academic Course sont mapps sur les recherches et
analyses de tches par poste approfondies de Microsoft, les mmes recherches et analyses
utilises pour crer les examens Microsoft Technology Associate (MTA) et Microsoft
Certified Solutions Developer (MCSD). Les manuels dveloppent des comptences relles
pour de vrais emplois. Les projets et les exercices proposs dans les manuels permettent aux
stagiaires de renforcer leur niveau de connaissances et leur capacit appliquer les dernires
technologies Microsoft dans leurs tches quotidiennes. Les stagiaires acquirent galement
des certifications qui leur permettront d'toffer leurs CV, ce qui pourra les aider trouver un
emploi, conserver leur poste actuel ou poursuivre leurs tudes.
Le concept d'ducation permanente est aujourd'hui une ncessit absolue. Les rles
professionnels et mme des catgories professionnelles entires, voluent si rapidement
qu'aucun d'entre nous ne peut rester comptitif et productif sans continuellement mettre
jour ses comptences et capacits. Les offres de la srie Microsoft Official Academic
Course, et l'accent qu'ils mettent sur la prparation de l'examen de la certification Microsoft,
permettent aux tudiants d'acqurir et de mettre jour de faon efficace leurs comptences
et leurs connaissances. Les ditions Wiley soutiennent les tudiants dans cet effort en
dveloppant et en distribuant ces cours en tant qu'diteur universitaire officiel de Microsoft.
Aujourd'hui, la publication de documents pdagogiques exige de mettre l'accent sur la qualit des
documents imprims et la fiabilit des contenus lectroniques. L'intgration des produits de la
srie Microsoft Official Academic Course, de WileyPLUS et des certifications Microsoft, favorise
la fourniture de solutions efficaces d'apprentissage aux tudiants, ainsi qu'aux enseignants.
Joseph Heider
Directeur gnral et vice-prsident directeur

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

| v

Prface
Bienvenue dans le programme Microsoft Official Academic Course (MOAC) sur les
notions fondamentales du dveloppement d'applicationsHTML5. MOAC est le fruit
de la collaboration entre Microsoft Learning et la maison d'dition John Wiley & Sons,
Inc. Microsoft et Wiley se sont associs pour produire une srie de manuels qui offrent
des solutions d'enseignement efficaces et innovantes aux instructeurs et une exprience
d'apprentissage de qualit aux stagiaires. Imprgns et enrichis des connaissances approfondies
des crateurs de produits Microsoft et conus par un diteur reconnu dans le monde entier pour
la qualit pdagogique de ses produits, ces manuels maximisent le transfert de comptences
en un minimum de temps. Les stagiaires sont encourags exprimer leur potentiel via leurs
nouvelles comptences techniques en tant que membres hautement productifs du personnel.
Parce que cette base de connaissances provient directement de Microsoft, crateur des examens
Microsoft Certified Solutions Developer (MCSD) et Microsoft Technology Associate (MTA)
(www.microsoft.com/learning/certification), vous tes sr de recevoir les informations sur un sujet
les plus pertinentes pour la russite personnelle et professionnelle des stagiaires. La participation
directe de Microsoft vous assure non seulement que le contenu des manuels MOAC est exact et
jour, mais elle signifie galement que les stagiaires recevront un enseignement optimal qui leur
permettra de russir aux examens de certification et dans leur carrire professionnelle.

Programme Microsoft Official Academic Course

La srie Microsoft Official Academic Course est un programme complet dont l'objectif est
de permettre aux instructeurs et aux tablissements d'enseignement de prparer et de fournir
des cours de grande qualit sur les technologies logicielles Microsoft. Avec le programme
MOAC, nous reconnaissons qu'en raison de l'volution rapide des technologies et du
programme dvelopp par Microsoft, il existe un ensemble de besoins qui vont au-del
des outils d'enseignement en classe pour qu'un instructeur soit prt dispenser le cours.
Le programme MOAC s'efforce de fournir des solutions pour tous ces besoins de manire
systmatique afin de garantir une exprience fructueuse et enrichissante de cours pour
l'instructeur et le stagiaire, une formation technique et un programme pour la prparation de
l'instructeur aux nouvelles versions logicielles; le logiciel lui-mme, destin tre utilis
par le stagiaire la maison pour acqurir des comptences pratiques, valuer et valider
l'acquisition des comptences; et un ensemble d'outils trs utiles pour l'enseignement en
classe et en atelier pratique. Tous ces lments sont importants pour fournir sans problme
un cours intressant sur les logiciels Microsoft, et tous sont fournis avec le programme
MOAC. Nous considrons le modle ci-dessous comme le gage que nous vous soutenons
compltement dans votre objectif de dispenser un cours de grande qualit. Lorsque vous
valuez le matriel pdagogique votre disposition, vous pouvez utiliser ce modle pour
raliser des comparaisons avec les produits disponibles.

vi |

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Tour du livre illustr

Fonctionnalits pdagogiques

Le manuel MOAC sur les notions fondamentales sur le dveloppement


d'applicationsHTML5 est conu pour couvrir tous les objectifs d'apprentissage pour cet
examen MTA98-375, dsigns sous le nom de domaine d'objectifs de l'examen. Les
objectifs de l'examen Microsoft Technology Associate (MTA) sont mis en vidence tout
au long du manuel. De nombreuses fonctionnalits pdagogiques ont t dveloppes
spcifiquement pour les programmes Microsoft Official Academic Course.
La prsentation de procdures et de concepts techniques complets tout au long du manuel
reprsente un dfi tant pour les stagiaires que pour les instructeurs. Le tour du livre illustr
qui suit fournit un guide des riches fonctionnalits qui contribuent au plan pdagogique
du programme Microsoft Official Academic Course. Vous trouverez ci-dessous la liste des
principales fonctionnalits de chaque leon. Elles ont t conues pour aider les stagiaires
dans leur formation en informatique, dans la prparation des examens de certification ou
dans le cadre de leurs fonctions professionnelles.
Chaque leon commence par une Matrice d'objectifs d'examen. Plus qu'une liste
standard des objectifs d'apprentissage, cette matrice d'objectifs d'examen associe
chaque comptence logicielle aborde dans la leon au domaine d'objectifs de
l'examen spcifique.
Des instructions pas pas, concises et frquentes, prsentent de nouvelles fonctionnalits
aux stagiaires et leur donnent la possibilit de mettre en pratique leurs connaissances. Les
tapes numrotes donnent des instructions dtailles, pas pas, pour aider les stagiaires
acqurir des comptences logicielles.
Illustrations: des images d'cran offrent un aperu visuel aux tudiants tandis qu'ils
ralisent les exercices. Les images illustrent les concepts cls, fournissent des indices
visuels sur les tapes et permettent aux stagiaires de vrifier leurs progrs.
Termes cls: le vocabulaire technique important est rpertori avec les dfinitions
correspondantes au dbut de chaque leon. Quand ces termes sont utiliss plus tard
dans la leon, ils apparaissent en italique et en gras, et sont dfinis. Le glossaire
contient tous les termes cls et leurs dfinitions.
Des aides au lecteur intressantes sur un point d'utilisation, rparties dans les leons,
indiquent aux tudiants pourquoi un sujet est pertinent (L'essentiel) et leur donnent des
conseils utiles (Remarque). Les aides au lecteur fournissent galement des informations
supplmentaires pertinentes ou d'arrire-plan qui ajoutent de la valeur la leon.
Les fonctionnalits Prt pour la certification, rparties dans le texte, indiquent aux
stagiaires l'endroit o un objectif de certification spcifique est abord. Elles donnent
aux stagiaires la possibilit de vrifier leur comprhension de cet objectif particulier
de la certification MTA et, si ncessaire, de consulter la section de la leon o il est
abord. Un cours MOAC offre une prparation complte pour la certification MTA.
Questions de fin de leon: la section valuation des connaissances contient diffrents
types de questions: choix multiples, vrai-faux, correspondances et textes trous.
Exercices de fin de leon: les scnarios des sections valuation des connaissances
et valuation de la matrise sont des projets qui permettent de tester la capacit des
tudiants appliquer ce qu'ils ont appris dans la leon.

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

| vii

viii | Tour du livre illustr

Fonctionnalits de la leon

Cration de l'interface
utilisateur avec HTML5 :
Organisation, saisie et
validations

LEON

Matrice d'objectifs
d'examen

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA

Numro de l'objectif
de l'examen MTA

Slection et configuration
des balises HTML5 pour
organiser le contenu et
les formulaires

HTML5 pour organiser le


contenu et les formulaires

2.4

Slection et configuration
des balises HTML5 pour la
saisie et la validation

Choisir et configurer les balises


HTML5 pour les entres et la
validation

2.5

Aide au lecteur Plus


d'informations

Termes cls

TERMES CLS
attribut autofocus

lment nav

attribut email

lment section

attribut global

entre de formulaire

attribut pattern

formulaire Web

attribut required

liste non trie

balisage smantique

liste trie

lment article

tableau

lment aside

texte de lespace rserv

lment datalist

validation

lment footer

validation automatique

lment header

validation ct client

lment menu

validation ct serveur

Gestion du cycle de vie dune application | 5

PLUS DINFORMATIONS
Les adresses Web utilises dans les exercices prcdents sont reprises ici pour plus de commodit. Il
est recommand de crer des signets pour une utilisation ultrieure. Des informations sur la norme
HTML5 sont disponibles sur le site Web du W3C l'adresse http://www.w3.org/TR/html5/. Un site
Web qui propose des didacticiels sur HTML5 est disponible l'adresse http://www.w3schools.com/
html/default.asp. Microsoft fournit des informations utiles aux nouveaux dveloppeurs sur le site
Espace formations pour dveloppeurs dbutants (http://www.visualstudio.com/fr-fr/products/visualstudio-express-vs) et le site de MSDN l'adresse http://bit.ly/Hd9uzt.

Cration d'applications

L'une de vos nouvelles tches en tant que stagiaire chez Media Malted Milk consiste
crer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs
d'un formulaire et qui valide les entres. Pour vous prparer crer le formulaire Web,
vous devez tout d'abord apprendre la meilleure faon d'organiser ou de structurer le
balisage l'aide des nouveaux lments HTML5.

Les applications HTML5 sont beaucoup plus faciles dvelopper que les
applications similaires qui utilisent d'autres technologies comme Adobe Flash et
Microsoft Silverlight. HTML5, CSS et JavaScript sont des langages interprts, ce
qui signifie qu'ils ne ncessitent pas de compilation. Vous pouvez dboguer le code
dans un navigateur, effectuer des modifications rapides, puis actualiser la fentre du
navigateur pour voir le rsultat des changements.

Scnario
d'entreprise

Mme si vous pouvez crer beaucoup de code en utilisant un simple texte ou un diteur
HTML, si vous souhaitez empaqueter et dployer votre application, vous aurez besoin
d'utiliser un outil de dveloppement d'applications tel que Microsoft Visual Studio.
Figure 1-3

53

tapes gnrales de la
cration d'une application

2 | Leon 1

Vous tes le nouveau stagiaire chez Malted Milk Media, une agence de cration
qui dveloppe des applications Rich Media pour ses clients. La socit va bientt
commencer utiliser HTML5 dans ses projets. Votre responsable vous a demand
de faire des recherches sur HTML5 et les technologies connexes et de prsenter un
rapport sur les modifications importantes apportes pour passer de HTML 4.01
HTML5. Vous devez galement inclure des informations sur la faon dont HTML5
permet de crer des applications d'cran tactile, telles que celles des ordinateurs,
tablettes tactiles, tablettes et smartphones.

Prsentation des principes fondamentaux de la plateforme

L'ESSENTIEL

REMARQUE

W3C est une marque


commerciale (dpose
dans de nombreux
pays) du World Wide
Web Consortium ; les
marques du W3C sont
dposes et dtenues
par ses institutions
htes, le MIT, l'ERCIM
et l'universit de Keio.

HTML5 est la dernire norme HTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Mme si la norme HTML5 ne sera pas finalise avant
quelques annes, la plupart des navigateurs Web modernes prennent dj en charge
les lments HTML5 et le dveloppement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
Hypertext Markup Language (HTML) est le langage que vous utilisez pour dcrire des pages
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML
utilise des balises de marquage comme <body> et <h1> pour dcrire les parties d'une page Web.
Un fichier HTML ne s'excute pas comme un programme. Au lieu de cela, un fichier
HTML est interprt par un navigateur pour afficher une page Web base sur les balises.

L'essentiel

Dans cette section, vous dcouvrirez les tapes gnrales lies la cration d'une
application. La figure 1-3 illustre les tapes, qui sont expliques ci-dessous :
Planifier le projet : pensez au type d'application que vous souhaitez crer. Quoi
que vous choisissiez, il est prfrable de commencer votre apprentissage du
dveloppement d'applications HTML5 par une application simple. Une fois que vous
avez dfini l'action principale de votre application, crez un plan du flux gnral de
l'application de bout en bout. Dterminez aussi le type d'interactivit utilisateur que
vous souhaitez inclure, comme une interface tactile, si vous avez besoin d'enregistrer
des donnes en dehors de l'application, et si l'application doit se connecter d'autres
applications ou services (par exemple, un flux RSS).
Concevoir une interface utilisateur : lorsque vous concevez l'interface utilisateur,
dterminez comment vous voulez que l'application soit affiche pour les utilisateurs.
Groupez les contenus d'une manire logique. Commencez par crer une liste des
commandes dont vous aurez besoin pour que l'application s'excute comme prvu et
collectez des images et des clips multimdias si ncessaire. Au minimum, les applications
d'aujourd'hui exigent une icne de lancement, qui reprsente votre application.
Mise jour du manifeste de l'application : chaque application ncessite un fichier
manifeste. Le fichier manifeste dcrit les proprits de l'application et ce dont elle a
besoin pour fonctionner (voir la figure 1-4). Le fichier comprend de nombreux lments
d'informations diffrents, tels que le nom d'affichage que les utilisateurs voient, une
description de l'application, son orientation (portrait, paysage, etc.), le chemin d'accs
du fichier l'icne de l'application, les fonctionnalits de l'application (fonctionnalits
ou priphriques systme que votre application peut utiliser), et bien plus encore.

Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
chang depuis. Les utilisateurs Web veulent des applications Web plus riches qui intgrent
de l'audio, de la vido et beaucoup d'interactivit dans les sites Web qu'ils visitent. En outre,
avec la monte en popularit des appareils mobiles comme les tablettes tactiles, tablettes et
smartphones, les utilisateurs veulent faire l'exprience de la mme richesse et de la mme
interactivit avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
Tout cela a rendu ncessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui dveloppe des spcifications
pour HTML5, ce qui devrait tre achev en 2014. Le logo HTML5 est illustr la figure 1-1.
PRT POUR LA CERTIFICATION

Figure 1-1
Le logo HTML5
REMARQUE

Mme si HTML5
est encore en
dveloppement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent
en charge de nombreux
lments de HTML5.
PRT POUR LA CERTIFICATION

Quelles sont les trois


technologies principales
de la famille HTML5 ?
1.1

Un point important retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) dfinissent les styles pour HTML dans un fichier
spar, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont rpercutes dans l'ensemble
des fichiers HTML qui rfrencent le fichier CSS. La dernire version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne ncessite pas de compilateur) qui ajoute l'interactivit aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour crer des pages Web. Vous
avez aussi la possibilit d'employer la combinaison pour dvelopper des applications

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Tour du livre illustr | ix

Gestion du cycle de vie dune application | 9


Figure 1-5
Une partie de la page Web
Exemples de code pour
dveloppeurs de MSDN

2. Faites dfiler vers le bas et cliquez sur le lien HTML5 dans le volet gauche, actuellement
prs du bas de la liste.
3. Parcourez les chantillons jusqu' trouver une application dont la description est suivie
de HTML5 , comme lexample Show Ads using the AdControl in HTML5. Cliquez sur
le lien vers l'application.
4. La page qui s'affiche indique le programme requis pour ouvrir et modifier les fichiers
de l'application et les technologies incluses dans l'application. Lexample Show Ads
using the AdControl in HTML5 ncessite Visual Studio 12 et inclut JavaScript et HTML5,
comme illustr la figure 1-6.
Figure 1-6
Affichage d'une page Web
d'exemple d'application

5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le


volet gauche, sur html, puis sur default.html. Le balisage HTML affiche. Faites dfiler le
balisage pour dcouvrir le type de code que vous rencontrerez souvent dans ce livre.

Gestion du cycle de vie dune application | 11

Images
d'cran

Quelle est la diffrence


entre l'tat de session et
l'tat de l'application ?
1.2

En outre, AppCache permet un utilisateur de charger des donnes qui sont gnralement
stockes sur un serveur mme lorsque l'utilisateur est hors connexion. La gestion de l'tat
est le processus de maintenance des informations de la page Web au cours de plusieurs
demandes de la mme page Web ou d'une page diffrente. Lorsque l'utilisateur demande
pour la premire fois l'accs une application, l'tat de session est cr. L'tat se termine
lorsque l'utilisateur ferme la session.

PRT POUR LA CERTIFICATION

Une autre solution que l'tat de session est l'tat de l'application. L'tat de l'application est
cr lorsque le navigateur Web envoie la premire demande d'une page Web au serveur
Web, et se termine lorsque l'utilisateur referme le navigateur.

Quelle est l'importance


des informations d'tat
persistantes ?
1.2

Les informations d'tat persistantes sont les donnes dont une application a besoin aprs
la fin de la session. De nombreuses applications Web doivent stocker des donnes (et les
rendre persistantes) afin que les utilisateurs puissent reprendre l'endroit o ils se sont
arrts lorsqu'ils retournent sur le site.

PRT POUR LA CERTIFICATION

Stockage des donnes d'tat l'aide du stockage local et de session


Hypertext Transport Protocol (HTTP) est le protocole qui transfre des donnes
sur le World Wide Web. Il dfinit les actions effectues par les serveurs de Web et
les navigateurs en rponse aux commandes des utilisateurs. Par exemple, lorsque
vous entrez une URL (Uniform Resource Locator) dans le champ d'adresse d'un
navigateur, celui-ci envoie une commande HTTP au serveur Web pour demander la
page Web. HTTP est un protocole sans tat, ce qui signifie qu'il ne conserve pas les
donnes d'une session l'autre. Lorsque vous fermez un navigateur Web aprs avoir
visit un site Web, les donnes ne sont pas enregistres.

60 | Leon 3

Voici un exemple de balisage pour les liens Prcdent-Accueil-Suivant, avec des barres
verticales aprs chaque lment de navigation pour le sparer des autres visuellement :
<nav>
<a href="http://www.example.com/Services">Prcdent</a> |
<a href="http://www.example.com">Accueil</a> |
<a href="http://www.example.com/About">Suivant</a>
</nav>
<br />

Alerte Prt
pour la
certification

PRT POUR LA CERTIFICATION

Comment HTML5 gre-t-il


les donnes d'tat ?
1.2

Cependant, les cookies se sont avrs tre un risque pour la scurit. En outre, si de grandes
quantits de donnes sont impliques, toutes les donnes sont envoyes entre le navigateur et
le serveur chaque requte, ce qui risque d'entraner une baisse de performances notable pour
l'utilisateur. En HTML5, les dveloppeurs peuvent utiliser le stockage Web au lieu de cela, ce qui
offre plus de flexibilit, de plus grands ensembles de donnes et de meilleures performances.

Les liens s'afficheraient dans une page Web, comme illustr dans la figure 3-6.
La navigation est souvent affiche dans une liste verticale. Vous allez apprendre le faire
plus tard dans cette leon.
PRT POUR LA CERTIFICATION

Laquelle des deux


mthodes, HTML5/
JavaScript, permet une
application de stocker les
donnes persistantes ?
1.2

Figure 3-6
Navigation PrcdentAccueil-Suivant avec
des barres verticales qui
sparent chaque lien

Pour contourner les limitations du protocole HTTP, les dveloppeurs utilisent des cookies,
qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
visit et sont enregistrs sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
site visit, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
Web se souvenir d'un utilisateur et personnaliser son exprience sur ce site.

La mthode localStorage permet aux utilisateurs de conserver de plus grandes quantits de


donnes d'une session l'autre (donnes persistantes) et leur existence n'est pas limite
dans le temps. La mthode sessionStorage permet de conserver les donnes uniquement
pendant une session (jusqu' ce que la fentre du navigateur soit ferme). On parle
galement de stockage par onglet .
Ces mthodes permettent de transfrer des donnes spcifiques uniquement sur demande.
Il est donc possible de stocker une quantit relativement importante de donnes sans
ralentir la connexion ou le site.

APPCACHE POUR LES FICHIERS HORS CONNEXION


Une autre faon d'utiliser le stockage Web consiste stocker les donnes localement
lorsqu'un utilisateur est en mode hors connexion. Le cache d'application ou AppCache,
stocke des ressources telles que des images, pages HTML, fichiers CSS et JavaScript : les
donnes qui seraient normalement stockes sur un serveur. tant donn que les ressources
sont stockes sur le disque dur ou le priphrique du client, elles sont charges plus
rapidement lorsqu'elles sont demandes.

X
A JOUTER L'LMENT NAV UN DOCUMENT HTML
PRPAREZ-VOUS. Pour ajouter l'lment nav dans un document HTML, procdez comme suit :
1. Dans votre diteur HTML ou l'aide d'un outil de dveloppement d'application,
ouvrez le fichier L3-MyPage.html (s'il n'est pas dj ouvert) et enregistrez-le sous le
nom L3-MyPage-nav.html pour crer un nouveau fichier.
2. Placez les balisesnav suivantes et leur contenu dans la balise <header> :
<header>
<h1>Slection d'un style de concert</h1>
<nav>
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
</header>

REF

Vous en apprendrez
plus sur l'utilisation
de AppCache avec
JavaScript dans la
leon 8.

l'aide de l'AppCache, un dveloppeur utilise un fichier texte appel manifeste de cache


pour spcifier les fichiers qu'un navigateur Web doit mettre en cache en mode hors connexion.
Mme si un utilisateur clique sur le bouton Actualiser en mode hors connexion, l'application se
charge et fonctionne correctement. Un fichier manifeste de cache ressemble ce qui suit :
index.html
stylesheet.css
images/dot.png
scripts/main.js

Aide au lecteur
Rfrence croise

Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le


document HTML.
3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit :
<h1><a id="symphonies">Symphonies</a></h1>
<h1><a id="raves">Raves</a></h1>

Exercices tape par tape

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

x | Tour du livre illustr


22 | Leon 2

Les dveloppeurs trs occups de Malted Milk Media vous ont demand d'effectuer
des recherches sur les nouvelles balises disponibles dans HTML5. Ils sont
particulirement intresss par les balises se rapportant aux graphiques et au contenu
multimdia. Votre tche consiste obtenir le maximum d'informations sur les
nouvelles balises HTML5 et prparer de courtes prsentations de chacune des
balises, en fournissant des exemples.

Comprendre les principes fondamentaux du langage HTML

L'ESSENTIEL

Le langage HTML (Hypertext Markup Language) utilise des balises pour dcrire le
contenu qui s'affiche sur une page Web. Un lment est compos la fois de balises
et du contenu figurant entre celles-ci. L'utilisation de caractres spciaux dans une
page Web ncessite l'encodage de ces derniers. Enfin, chaque page Web requiert la
dclaration doctype en haut de la page.
Le langage HTML (Hypertext Markup Language) est appel langage de balisage, car il permet
de dcrire (baliser) les divers lments du contenu affich sur une page Web. Une page Web
comportant un balisage inclut des balises, qui sont des mots cls permettant de structurer une
page HTML. (Vous en apprendrez davantage sur les balises un peu plus loin.) Pour utiliser le
langage HTML de manire optimale, il convient de savoir comment et quand utiliser les
balises appropries. La combinaison de contenu, de balises et parfois de graphiques, de
contenu multimdia ou d'autres contenus constitue la cl de vote d'une page Web.
Un document HTML est facilement identifiable, car il est dot d'une extension de fichier
.htm ou .html. Lorsqu'un navigateur Web ou un priphrique mobile tel qu'un smartphone
ouvre un fichier HTML, il rend (interprte et reproduit) le contenu de la page.

Balisage et structure de page de base


Chaque page HTML comporte des balises. Une balise est un mot cl entour de
crochets. La plupart des balises sont utilises par paire ; une balise est appele balise
d'ouverture ou de dbut, tandis que l'autre est la balise de fermeture ou de fin. Une
paire de balises respecte la casse ; une balise de fin doit utiliser la mme casse que
la balise de dbut. La balise de fin est identique la balise de dbut, hormis le fait
que la balise de fin comporte une barre oblique avant le mot cl.

Aide au lecteur
Remarque

Les balises entourent le contenu et lui affectent une dfinition. Par exemple, les balises
suivantes crent un titre de premier niveau :
<h1>Soins des animaux domestiques 101</h1>

Le langage HTML utilise galement quelques balises uniques, comme <br /> pour un saut
de ligne et <hr /> pour une ligne horizontale. Dans HTML 4, ces balises sont appeles
balises vides parce qu'elles ne requirent pas de balise de fin. HTML5 est moins restrictif
que HTML 4. Ainsi, il n'est pas ncessaire d'inclure des balises de fin pour tous les
lments (mme si certains lments exigent toujours des balises de dbut et de fin),
et vous pouvez entrer les balises en majuscules ou en minuscules. Toutefois, le balisage
utilis dans ce guide comporte exclusivement des balises de dbut et de fin, entirement
en minuscules, par souci de cohrence.

Cration de linterface utilisateur avec HTML5 : Organisation, saisie et validations | 55


Figure 3-1
Comparaison des parties de
document balises en HTML
4.01 et HTML5

De nombreuses balises sont disponibles pour les pages HTML. Quelques-unes des balises
les plus couramment utilises sont rpertories dans le Tableau 2-1. Les quatre premires,
<html>, <head>, <title> et <body>, sont requises sur chaque page Web.

Notez que le balisage smantique de HTML5 donne un sens plus spcifique aux parties
d'un document HTML, en rendant la structure plus facile comprendre.

Utilisation des balises pour structurer un document HTML


PRT POUR LA CERTIFICATION

Quelles sont les balises


HTML5 utilises pour
structurer et organiser un
document ?
2.4

Parmi les nouveaux lments de HTML5 en termes de structuration et d'organisation du


contenu dans un document HTML, on trouve header, footer, section, nav, article et aside.
Maintenant que vous comprenez le balisage smantique, nous allons tudier plusieurs des
nouveaux lments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et
dcrit les nouvelles balises lies la structure HTML5.

Tableau 3-1
Nouvelles balises HTML5
pour l'organisation du
contenu et la cration de
structure

Gestion de l'interface graphique avec CSS | 163


<body>
<div>Exemple de bote</div>
</body>
</html>

2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un


navigateur Web, qui doit ressembler la figure 7-4.
Figure 7-4

Balise

Description

<address>

Dfinit une zone pour obtenir les coordonnes d'une page ou d'une
section

<article>

Dfinit un article, comme un article de magazine ou de journal, un


billet de blog ou un contenu similaire

<aside>

Dfinit le contenu qui est distinct mais quand mme associ au contenu
de la page. Semblable une barre latrale dans les chapitres de livres et
les articles de magazine

<details>

Contient des dtails supplmentaires relatifs au texte autour. Cre un


widget interactif qu'un utilisateur peut afficher ou masquer

<footer>

Dfinit un pied de page d'un document ou d'une section. Peut inclure


l'auteur du document, les coordonnes, les informations de copyright
et les liens renvoyant aux modalits dutilisation

Bote avec des coins arrondis

3. Pour ajouter une ombre porte, ajoutez la ligne suivante l'lment de style :
box-shadow: 5px 5px 5px #999;

4. Enregistrez le fichier et affichez les rsultats dans un navigateur Web. La bote doit
ressembler la figure 7-5.
Figure 7-5
Bote avec des coins arrondis
et une ombre porte

<header>

Dfinit un en-tte de document ou de section. Peut contenir des liens


de navigation ou des informations prliminaires

<hgroup>

Regroupe les titres et les sous-titres ( l'aide des balises <h1> <h6>)
pour des titres sur plusieurs niveaux

<nav>

Dfinit un bloc de liens de navigation

<section>

Dfinit une section d'un document, comme des chapitres, des parties
d'une thse ou d'une page Web dont le contenu est distinct

<summary>

Dfinit un titre visible pour un lment details. L'utilisateur peut


cliquer pour afficher ou masquer les informations

<wbr>

Dfinit un saut de ligne ventuel. Lorsqu'un mot est trs long ou


que vous craignez que le navigateur ne coupe une ligne au mauvais
endroit, vous pouvez utiliser l'lment <wbr> pour couper le mot ou
la ligne correctement

5. Laissez le fichier, l'outil d'dition et le navigateur Web ouverts si vous envisagez


d'effectuer l'exercice suivant au cours de cette session.

APPLICATION DE LA TRANSPARENCE
Un lment opaque ne laisse pas passer la lumire, tandis que vous pouvez voir travers
un lment transparent. Mme si les termes sont opposs, si vous rduisez l'opacit d'un
lment ou si vous augmentez sa transparence, vous finissez par obtenir la mme chose.

Tableaux faciles lire

La figure 7-6 montre l'effet de transparence (ou la rduction d' opacit) sur une image.
L'image originale se trouve sur la gauche. L'image avec une transparence de 50 % applique
se trouve sur la droite.
Figure 7-6
Transparence applique
une image

PRT POUR LA
CERTIFICATION
Quelle proprit CSS
vous permet d'appliquer
de la transparence
un lment ou une
image ?
3.4

Photos

La syntaxe permettant d'appliquer une transparence une image ou un autre lment est :
opacity: value

La valeur est une valeur virgule flottante comprise entre 0,0 (100 % transparent) et
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
utiliser la valeur 0,55 (1,0 0,45).

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Tour du livre illustr | xi

Prsentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133

Bien que cet exemple utilise le mot cl auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqu dans le tableau 5-2.
Les spcifications pour les dispositions de modle de grille sont semblables des bauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rdaction de ce
document. Cependant, vous pourriez rencontrer des modles de grille pour l'examen MTA
98-375. Vous devriez donc vrifier la dernire spcification du module des modles de
disposition en grille CSS du groupe W3C lors de la prparation de l'examen.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit :

Matrice Rsum des


comptences

L esinterfacesutilisateurpeuventtresimplesetdirectesoutrepluscomplexes
avec plusieurs sections, boutons et contrles.
L aconceptiond'uneinterfacequis'affichebiensurlesgrandscransdePCetsurlespetits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modle de bote flexible CSS et le modle de disposition en grille rduisent la quantit de
code ncessaire pour la compatibilit inter-priphriques. Comme les spcifications CSS
ne sont pas encore dfinitives, vous devrez utiliser des prfixes spcifiques au fournisseur
avant les noms de proprits CSS pour tout faire fonctionner.
Lesbotesflexiblessontconuespourlesbarresdoutils,lesmenus,lesformulaires
et dautres lments semblables dans des pages Web et applications. Les grilles sont
mieux adaptes aux conceptions labores.
Uneboteflexibleetsoncontenupeuventtreconfigurspourmodifierlataille,
horizontalement et verticalement, lorsque la taille de l'cran sur lequel ils sont
affichs change. Vous pouvez galement inverser le sens et l'ordre des botes
flexibles avec une ligne de code.
Uneboteflexiblepeutcontenirdesbotesenfantsflexiblesenhauteureten
largeur. Vous devez utiliser la proprit flex avec les botes enfants. La proprit
flex-flow dfinit les proprits flex-direction et flex-wrap d'une bote flexible (la bote
parent) en mme temps.
Lesdispositionsengrillesontsemblablesauxfeuillesdecalcul.Eneffet,ellescontiennent
des cellules, des lignes et des colonnes, mais vous pouvez crer diffrents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout une feuille de calcul.
VousdevezutiliserlespropritsCSSdisplay:grid (ou display:inline-grid), grid-columns
et grid-rows pour crer des structures de grille. La taille des colonnes et des lignes
peut tre fixe ou flexible.
Lesbotesflexiblesetlesgrillessontconuespourmettrel'chelleproportionnellement.
Lapropritflex-order vous permet de modifier l'ordre des lments enfants dans
une bote flexible, de les rorganiser dans un ordre quelconque sans avoir les
modifier dans le balisage HTML.
Unmodledegrilleutilisedescaractresalphabtiquespourreprsenterla
position des lments dans une grille. Vous devez utiliser les caractres alpha avec
les proprits grid-template, grid-rows et grid-columns pour crer une grille dans
laquelle les donnes peuvent tre organises.
86 | Leon 3

valuation des connaissances

10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ?
a. <input label="email" name="URL">
b. <form id="email">
c. <label for="email">Email</label>
d. <input type = "email" name = "email">

Complter lespace vide


Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. L'
est la partie dun site Web ou dune application avec laquelle
l'utilisateur peut interagir.
2. Dans le modle de bote CSS de W3C dorigine, la
entre la bordure et le contenu de la bote.

Vrai/Faux

dsigne lespace

Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.


V F 1. Dans un tableau, llment tfoot doit safficher avant llment tbody.
V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entre
dune liste trie.
V F 3. Vous pouvez spcifier la hauteur dun lment dentre laide de
lattribut size.
V F 4. L'lment label affiche la lgende, ou le titre d'un tableau.
V F 5. L'lment nav dfinit un bloc de liens de navigation.

valuation des comptences


Scnario 3-1 : Balisage dun article de journal

valuation des
connaissances
Questions

Sally Rowe, contrleur de documents chez Malted Milk Media, souhaite publier une
srie darticles sur lintranet de la socit portant sur la scurit et la gestion des versions
de documents. Elle doit crer les grandes lignes du balisage HTML5 pour un article
paratre dans le bulletin mensuel en ligne cr par lun des dveloppeurs Web. Chaque
article comportera un titre et un sous-titre, plusieurs paragraphes de texte, son nom et la
date de larticle dans le pied de page. quoi ressemblera le balisage de son article ?

Scnario 3-2 : Affichage de longs tableaux en HTML


Vince gnre des rapports financiers pour le Vice-prsident des oprations financires
chez Momentum Strategies, un cabinet de relations publiques spcialis dans les
campagnes politiques. Vince imprime rgulirement des tableaux de 2 ou 3 pages et
distribue des exemplaires aux membres de la direction. Il souhaite publier ces rapports
dans une zone scurise sur lintranet de la socit, et avec des lignes de donnes spares
des titres de colonne avec la ligne des totaux la fin. Il voudrait savoir comment prsenter
les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?

Prsentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133

Bien que cet exemple utilise le mot cl auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqu dans le tableau 5-2.
Les spcifications pour les dispositions de modle de grille sont semblables des bauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rdaction de ce
document. Cependant, vous pourriez rencontrer des modles de grille pour l'examen MTA
98-375. Vous devriez donc vrifier la dernire spcification du module des modles de
disposition en grille CSS du groupe W3C lors de la prparation de l'examen.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit :
L esinterfacesutilisateurpeuventtresimplesetdirectesoutrepluscomplexes
avec plusieurs sections, boutons et contrles.
L aconceptiond'uneinterfacequis'affichebiensurlesgrandscransdePCetsurlespetits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modle de bote flexible CSS et le modle de disposition en grille rduisent la quantit de
code ncessaire pour la compatibilit inter-priphriques. Comme les spcifications CSS
ne sont pas encore dfinitives, vous devrez utiliser des prfixes spcifiques au fournisseur
avant les noms de proprits CSS pour tout faire fonctionner.
Lesbotesflexiblessontconuespourlesbarresdoutils,lesmenus,lesformulaires
et dautres lments semblables dans des pages Web et applications. Les grilles sont
mieux adaptes aux conceptions labores.
Uneboteflexibleetsoncontenupeuventtreconfigurspourmodifierlataille,
horizontalement et verticalement, lorsque la taille de l'cran sur lequel ils sont
affichs change. Vous pouvez galement inverser le sens et l'ordre des botes
flexibles avec une ligne de code.
Uneboteflexiblepeutcontenirdesbotesenfantsflexiblesenhauteureten
largeur. Vous devez utiliser la proprit flex avec les botes enfants. La proprit
flex-flow dfinit les proprits flex-direction et flex-wrap d'une bote flexible (la bote
parent) en mme temps.
L esdispositionsengrillesontsemblablesauxfeuillesdecalcul.Eneffet,ellescontiennent
des cellules, des lignes et des colonnes, mais vous pouvez crer diffrents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout une feuille de calcul.
VousdevezutiliserlespropritsCSSdisplay:grid (ou display:inline-grid), grid-columns
et grid-rows pour crer des structures de grille. La taille des colonnes et des lignes
peut tre fixe ou flexible.
Lesbotesflexiblesetlesgrillessontconuespourmettrel'chelleproportionnellement.
Lapropritflex-order vous permet de modifier l'ordre des lments enfants dans
une bote flexible, de les rorganiser dans un ordre quelconque sans avoir les
modifier dans le balisage HTML.
Unmodledegrilleutilisedescaractresalphabtiquespourreprsenterla
position des lments dans une grille. Vous devez utiliser les caractres alpha avec
les proprits grid-template, grid-rows et grid-columns pour crer une grille dans
laquelle les donnes peuvent tre organises.

valuation

de la matrise des concepts


Scnario 3-3 : Cration dun glossaire
Waylon est un stagiaire qui travaille sur une dissertation. Son formateur demande
chaque tudiant dappliquer la dissertation une mise en forme compatible avec un
affichage sur le Web. Waylon souhaite inclure un glossaire la fin de la dissertation,
mais il a du mal produire un rsultat satisfaisant avec une liste non trie. Quel balisage
serait mieux adapt au glossaire de Waylon ?

Scnario 3-4 : Utilisation des types dentre appropris dans un formulaire Web
Margie est en train de crer et de tester un formulaire Web qui comporte entre autres un
champ pour ladresse e-mail, un champ pour ladresse Web et un champ pour le code
postal. Lorsque certains de ses collgues testent le formulaire, elle remarque que trs
souvent ils entrent par erreur ladresse e-mail dans le champ rserv ladresse Web,
et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
rserv au code postal. Elle ne veut pas utiliser de syntaxe avec la proprit pattern
parce qu ses yeux cest trop compliqu. Quel autre type dentre peut-elle utiliser ?

valuation des connaissances


Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. L'
est la partie dun site Web ou dune application avec laquelle
l'utilisateur peut interagir.
2. Dans le modle de bote CSS de W3C dorigine, la
entre la bordure et le contenu de la bote.

valuation des
comptences

dsigne lespace

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

valuation de
la matrise des
concepts

Conventions et fonctionnalits
utilises dans cet ouvrage
Cet ouvrage utilise des polices, des symboles et des conventions d'en-tte particuliers
pour mettre en vidence des informations importantes ou attirer l'attention sur des tapes
spciales. Pour plus d'informations sur les fonctionnalits de chaque leon, reportez-vous
la section Tour du livre illustr.

Convention

Signification


Cette fonctionnalit fournit un bref rsum des sujets qui

L'ESSENTIEL

seront traits dans la section qui suit.

FERMER 
Les mots en majuscules font rfrence des instructions

destines ouvrir, enregistrer ou fermer des fichiers ou des


programmes. Ils indiquent galement des lments vrifier
ou des actions entreprendre.

PRT POUR LA CERTIFICATION 


Cette fonctionnalit signale le point dans le texte o un

objectif de certification spcifique est couvert. Elle vous


donne une occasion de vrifier votre comprhension de cet
objectif particulier de la certification MTA et, si ncessaire, de
consulter la section de la leon o il est abord.

REMARQUE*

REF

Des aides au lecteur figurent dans le texte, dans des cases


grises. Remarque fournit des conseils utiles lis des tches
ou sujets particuliers.

Ces remarques fournissent des pointeurs vers des informations


fournies ailleurs dans le manuel ou dcrivent des fonctionnalits
intressantes du langageHTML5 qui ne sont pas directement
abordes dans la rubrique ou le sujet en cours.

Alt + Alt Un signe plus (+) entre deux noms de touches signifie que

vous devez appuyer sur les deux touches en mme temps.


Les touches sur lesquelles vous tes invit appuyer dans un
exercice s'affichent dans la police indique ici.

xii |

Exemple

Les termes cls apparaissent en italique et en gras.

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Programme de soutien de
l'instructeur
Les programmes Microsoft Official Academic Course s'accompagnent d'un riche ventail
de ressources, dont notamment de nombreuses illustrations, pour former un ensemble
cohrent d'un point de vue pdagogique. Ces ressources offrent tous les documents
dont les instructeurs ont besoin pour organiser et dispenser leurs cours. Les ressources
tlchargeables en ligne sont les suivantes:
DreamSpark Premium est conu pour fournir les outils de dveloppement, produits
et technologies disponibles les plus conviviaux et les moins coteux aux professeurs
et aux stagiaires dans les laboratoires, salles de classe et sur les PC des stagiaires. Un
abonnement gratuit de 3ans est offert aux utilisateurs qualifis de MOAC.
Remarque: MicrosoftVisualStudio et MicrosoftExpression peuvent tre tlchargs
partir de DreamSpark Premium pour utilisation par les stagiaires dans ce cours.
Le Guide de l'instructeur contient les solutions tous les exercices du manuel et des
plans de cours de longueurs diffrentes. Le Guide de l'instructeur contient galement
les rsums des chapitres et des notes de lecture. Le Guide de l'instructeur est
disponible sur le site compagnon du livre (http://www.wiley.com/college/microsoft).
La banque de tests contient des centaines de questions choix multiple, vrai-faux,
rponses courtes et formats d'essais et est disponible au tlchargement sur le site
compagnon du livre de l'instructeur (www.wiley.com/college/microsoft). Un corrig
complet est fourni.
Un ensemble complet de prsentations PowerPoint et d'images est disponible sur
le site compagnon du livre de l'instructeur (http://www.wiley.com/college/microsoft)
pour complter les prsentations en classe. Environ 50diapositives PowerPoint
sont fournies pour chaque leon. Ces prsentations sont adaptes au sujet trait
dans le texte et la matrice de comptences, et elles sont conues pour transmettre
les principaux concepts abords dans le texte. Toutes les images du texte sont
disponibles sur le site compagnon du livre de l'instructeur (http://www.wiley.com/
college/microsoft). Vous pouvez les intgrer vos prsentations PowerPoint ou les
utiliser pour crer vos propres transparents et polycopis. En utilisant ces illustrations
dans les discussions en classe, vous pouvez aider les stagiaires se concentrer sur les
lments cls des technologies abordes et leur permettre de comprendre comment
utiliser ces technologies efficacement dans leurs fonctions professionnelles.
Quand il s'agit d'amliorer l'exprience en classe, il n'y a pas de meilleure source
d'ides et d'inspiration que vos collgues. Le rseau Wiley Faculty Network relie
les enseignants avec la technologie, facilite l'change des meilleures pratiques
et contribue renforcer l'efficacit pdagogique. Les activits du rseau Faculty
Network incluent des formations aux technologies et des didacticiels, des
sminaires virtuels, des changes entre pairs d'expriences et d'ides, des conseils
personnels et le partage de ressources. Pour plus d'informations, visitez le site www.
WhereFacultyConnect.com.

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

| xiii

xiv | Programme de soutien de l'instructeur

DREAMSPARK PREMIUM ABONNEMENT DE 3ANS


OFFERT AUX UTILISATEURS QUALIFIS!
DreamSpark Premium est conu pour fournir le moyen le plus simple et le plus
conomique pour les universits de rendre les derniers outils de dveloppement,
produits et technologies de Microsoft disponibles dans les laboratoires, salles
de classe et sur les PC des tudiants. DreamSpark Premium est un programme
d'abonnement annuel destin aux dpartements d'enseignement des cours de sciences,
technologie, ingnierie et mathmatiques (STEM). L'abonnement offre une solution
complte destine permettre aux laboratoires universitaires, professeurs et tudiants
de rester la pointe de la technologie.
Les logiciels disponibles dans le programme DreamSpark Premium sont offerts
auxdpartements qui s'abonnent dans le cadre du partenariat d'dition entre
WileyetMicrosoft.
Des outils qui aident les professeurs motiver et impliquer les lves dans les
technologies d'aujourd'hui.
Contactez votre reprsentant Wiley pour plus de dtails.
Pour plus d'informations sur le programme DreamSpark Premium, visitez le site Web:
https://www.dreamspark.com/
Remarque: MicrosoftVisualStudio et MicrosoftExpression peuvent tre tlchargs
partir de DreamSpark Premium pour utilisation par les stagiaires dans ce cours.

Adresses Web et numros de tlphone importants

Pour localiser le reprsentant de l'enseignement suprieur Wiley dans votre rgion,


rendez-vous sur http://www.wiley.com/college et cliquez sur le lien Whos My Rep?
(Qui est mon reprsentant?) situ en haut de la page, ou appelez le numro gratuit du
programme MOAC: 1 + (888) 764-7001 (tats-Unis et Canada uniquement).
Pour savoir comment obtenir la certification et connatre la disponibilit de l'examen,
visitez le site www.microsoft.com/learning/mcp/mcp.

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Programme de soutien
au stagiaire

Ressources complmentaires

Site web compagnon de ce livre (www.wiley.com/college/microsoft)


Le site compagnon du manuel du stagiaire pour la srie MOAC comprend tous les fichiers
d'exercices, les liens web et les ressources qui seront utiliss conjointement ce cours.

Wiley Desktop Editions


Les ditions Wiley MOAC Desktop Editions sont des versions lectroniques novatrices
des manuels imprims. Les stagiaires acquirent la version de bureau jusqu' 40% moins
cher que le prix amricain du texte imprim, et peuvent bnficier de la valeur ajoute
de la permanence et de la portabilit. Les ditions Wiley Desktop Editions fournissent
galement aux tudiants de nombreux avantages supplmentaires qui ne sont pas
disponibles avec d'autres solutions de texte lectronique.
Les ditions Wiley Desktop Editions NE sont PAS des abonnements. Les stagiaires
tlchargent l'dition Wiley Desktop Edition sur le bureau de leurs ordinateurs. Les
stagiaires sont propritaires du contenu qu'ils achtent et peuvent le conserver aussi
longtemps qu'ils le souhaitent. Une fois une dition Wiley Desktop Edition tlcharge sur
le bureau de l'ordinateur, les stagiaires ont un accs instantan tout le contenu sans tre en
ligne. Les stagiaires peuvent galement imprimer les sections qu'ils prfrent lire sur support
papier. Les stagiaires ont aussi accs des ressources entirement intgres au sein de leur
dition Wiley Desktop Edition. De la mise en surbrillance du texte lectronique la prise
et au partage de notes, les stagiaires peuvent facilement personnaliser leur dition Wiley
Desktop Edition au fur et mesure de leurs lectures ou en classe.

propos de la certification Microsoft Technology


Associate (MTA)

Prparer la main-d'uvre technologique de demain


La technologie joue un rle dans pratiquement toutes les entreprises du monde entier.
Possder des connaissances fondamentales du fonctionnement d'une technologie et
comprendre son impact sur l'environnement acadmique et professionnel d'aujourd'hui
est de plus en plus important, en particulier pour les stagiaires qui souhaitent explorer
des professions qui impliquent des technologies. C'est pourquoi Microsoft a cr la
certification Microsoft Technology Associate (MTA), un nouveau programme de crdit de
niveau dbutant qui valide les connaissances technologiques fondamentales des stagiaires
qui cherchent faire carrire dans les technologies.
La certification Microsoft Technology Associate (MTA) est le moyen idal et privilgi
d'accder des programmes de certification technologiques de renomme mondiale de
Microsoft, tels que Microsoft Certified Solutions Developer (MCSD). MTA est en passe
de devenir le premier programme de certification destin aux personnes qui cherchent
explorer et poursuivre une carrire dans les technologies, ou renforcer leurs
connaissances dans des activits connexes telles que l'entreprise ou tout autre domaine o
la technologie est omniprsente.
www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

| xv

xvi | Programme de soutien au stagiaire

Profil des candidats la certification MTA


Le programme de certification MTA est conu spcifiquement pour les tudiants de
niveau secondaire et post-secondaire qui souhaitent explorer des options acadmiques
et professionnelles dans un domaine technologique. Il offre aux stagiaires une
certification en informatique de base et en dveloppement. En tant que nouveau point
d'entre recommand pour les certifications technologiques Microsoft, MTA est destin
tout spcialement aux stagiaires qui dcouvrent l'informatique et le dveloppement
de logiciels. Il est disponible exclusivement dans les contextes ducatifs et s'intgre
facilement dans les programmes des cours d'informatique existants.

La certification MTA donne des moyens aux ducateurs et motive les stagiaires
MTA offre une nouvelle norme pour mesurer et valider les connaissances technologiques
fondamentales dans la salle de classe sans porter atteinte votre budget ni vos ressources
pdagogiques. La certification MTA aide les tablissements d'enseignement se dmarquer en
tant que fournisseurs innovants de programmes de certification professionnelle trs demands.
Elle est facilement dploye l'aide d'une suite simple, pratique et abordable d'examens de
certification technologique de niveau dbutant. La certification MTA permet aux stagiaires
d'explorer des filires technologiques professionnelles sans effectuer un investissement
important en temps ni ressources, tout en leur fournissant une base pour leur carrire et la
confiance ncessaire pour russir des tudes suprieures, puis poursuivre leur vocation.
En plus de donner aux stagiaires une certification Microsoft de niveau dbutant, la certification
MTA est conue pour tre un tremplin vers d'autres certifications technologiques Microsoft
plus avances, telles que la certification Microsoft Certified Solutions Developer (MCSD).

Fourniture des examens MTA: la licence Campus MTA


Avec la licence Campus MTA, mettre en uvre un nouveau programme de certification
dans votre salle de classe n'a jamais t aussi facile. L'achat d'une licence Campus MTA
annuelle rend inutile les demandes de budget ad hoc et les achats rcurrents de bons
d'examens. Dsormais, vous pouvez prvoir un budget petit prix sur l'anne entire et
donner accs aux examens MTA vos stagiaires et autres professeurs dans l'ensemble de
votre campus o et quand vous le voulez.
La licence Campus MTA fournit une suite pratique et abordable de certifications
technologiques de niveau dbutant, conue pour donner des moyens aux ducateurs et
motiver les stagiaires au fur et mesure qu'ils construisent les fondations de leur carrire.
La licence Campus MTA est administre par Certiport, fournisseur exclusif d'examen
MTA de Microsoft.
Pour en savoir plus sur la faon d'obtenir la certification Microsoft Technology Associate,
ainsi que sur la disponibilit de l'examen, visitez le site www.microsoft.com/learning/mta.

REMARQUE

Certains liens prsents dans ce cours renvoient des pages en anglais.

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Programme de soutien au stagiaire | xvii

Activez votre test pratique GRATUIT pour la


certification MTA!

L'acquisition de ce livre vous donne droit un test pratique gratuit pour la certification
MTA de GMetrix (d'une valeur de 30$). Rendez-vous sur www.gmetrix.com/mtatests
et utilisez le code de validation suivant pour activer votre test gratuit: MTA98-3753324376A6A85.
Le systme de gestion des comptences GMetrix fournit tout ce dont vous avez besoin
pour vous entraner pour la certification Microsoft Technology Associate (MTA).
Prsentation des fonctionnalits de test:
Carte des tests pratiques en fonction des objectifs de l'examen Microsoft Technology
Associate (MTA)
Les tests pratiques de la certification MTA de GMetrix simulent l'environnement de
test MTA rel
Plus de 50questions par test, qui couvrent tous les objectifs
Progressez votre propre rythme, enregistrez le test pour le reprendre plus tard et
revenez aux questions laisses en suspens
Rapports dtaills et imprimables sur les notes, qui soulignent les domaines qui
requirent une tude plus approfondie
Pour tirer le meilleur parti de votre prparation MTA, profitez ds aujourd'hui de votre test
pratique gratuit pour la certification MTA GMetrix.
Pour des questions de support technique sur l'installation ou l'activation du code, envoyez
un message lectronique support@gmetrix.com.

Numro gratuit de MOAC: 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Remerciements

MOAC MTA - Rviseurs des notions technologiques fondamentales

Nous aimerions remercier les nombreux rviseurs qui ont relu le manuscrit et fourni de prcieux commentaires
destins amliorer la qualit du matriel pdagogique:
Yuke Wang, Universit du Texas Dallas
Palaniappan Vairavan, Bellevue College
Harold Buz Lamson, ITT Technical Institute
Colin Archibald, Valencia Community College
Catherine Bradfield, DeVry University en ligne
Robert Nelson, Blinn College
Kalpana Viswanathan, Bellevue College
Bob Becker, Vatterott College
Carol Torkko, Bellevue College
Bharat Kandel, Missouri Tech
Linda Cohen, Forsyth Technical Community College
Candice Lambert, Metro Technology Centers
Susan Mahon, Collin College
Mark Aruda, Hillsborough Community College
Claude Russo, Brevard Community College
Heith Hennel, Valencia College
Adrian Genesir, Western Governors University
Zeshan Sattar, Zenos

xviii |

Douglas Tabbutt, Blackhawk Technical College


David Koppy, Baker College
Sharon Moran, Hillsborough Community College
Keith Hoell, Briarcliffe College et Queens College,
CUNY
Mark Hufnagel, Lee County School District
Rachelle Hall, Glendale Community College
Scott Elliott, Christie Digital Systems, Inc.
Gralan Gilliam, Kaplan
Steve Strom, Butler Community College
John Crowley, Bucks County Community College
Margaret Leary, Northern Virginia Community College
Sue Miner, Lehigh Carbon Community College
Gary Rollinson, Cabrillo College
Al Kelly, University of Advancing Technology
Katherine James, Seneca College
David Kidd, Western Governors University

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Brve table des matires


Leon1: Gestion du cycle de vie d'une application 1
Leon2: C
 ration de l'interface utilisateur avec HTML5: Texte,
graphiques et multimdia 21
Leon3:

 ration de l'interface utilisateur avec HTML5:


C
Organisation, saisie et validations 53

Leon4:

 rsentation des notions essentielles sur les feuilles de style


P
en cascade CSS: Flux de contenu, positionnement et style 87

Leon5: Prsentation des notions essentielles sur les feuilles de style


en cascade CSS: Dispositions 110
Leon6: Gestion de l'enchanement du texte avecCSS 137
Leon7: Gestion de l'interface graphique avecCSS 159
Leon8: Prsentation des principes de base de JavaScript et du
codage189
Leon9: Cration d'animations, utilisation de graphiques et accs
aux donnes 215
Leon10: Codage JavaScript pour l'interface tactile, les ressources des
priphriques et du systme d'exploitation, etc. 243
Annexe268
Index269

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

| xix

Contenu
Leon1: G
 estion du cycle de vie d'une
application1
Matrice d'objectifs d'examen 1
Termes cls 1
Prsentation des principes fondamentaux de la
plateforme 2

Quelles sont les nouveauts de HTML5? 3


Cration d'applications 5
Exploration de l'empaquetage et de l'environnement
d'excution7
Prsentation du processus hte 7
Prsentation du package d'application et du conteneur
d'applications8

Prsentation des jeux d'informations d'identification et


d'autorisations10

Prsentation et gestion des tats de l'application 10

Stockage des donnes d'tat l'aide du stockage local et


de session 11
AppCache pour les fichiers hors connexion 11

Prsentation des interfaces tactiles et des


mouvements 12

Utilisation des comptences et du contenuHTML5


existants pour les applications de tablettes tactiles/
tablettes13

Imbrication d'lments 24
Comprendre les entits 24
Comprendre le doctype 25
Exploration du balisage d'une page Web simple 26

Slection et configuration de balises HTML5 pour


l'affichage du texte 29
lments de texte HTML4 avec une nouvelle
signification ou fonction 29
Nouveaux lments de texte dans HTML5 31
lments de texte inutiliss dans HTML5 32

Slection et configuration de balises HTML5 pour


l'affichage des graphiques 34
Utilisation des lments figure et figcaption 35
Cration de graphiques l'aide de canvas 38

Notions de base de l'lment canvas 39


Cration d'un contour de forme 40
Spcification d'une image ou d'un texte de remplacement
pour les anciens navigateurs 41

Cration de graphiques l'aide de SVG 42


Quand utiliser canvas au lieu de SVG 44

Slection et configuration de balises HTML5 pour la


lecture de contenu multimdia 45

Comprendre et utiliser les balises de contenu vido 45


Comprendre et utiliser les balises audio 47

Dbogage et test des applications HTML5 13

Rsum des comptences 49


valuation des connaissances 49
valuation des comptences 51
valuation de la matrise des concepts 52

Publication d'une application dans un magasin en


ligne 16
Rsum des comptences 17
valuation des connaissances 18
valuation des comptences 20
valuation de la matrise des concepts 20

Leon3: Cration de l'interface


utilisateur avec HTML5:
Organisation, saisie et
validations 53

Validation du code HTML5 14


Validation d'un package 14

Leon2: C
 ration de l'interface
utilisateur avec HTML5: Texte,
graphiques et multimdia 21
Matrice d'objectifs d'examen 21
Termes cls 21
Comprendre les principes fondamentaux du langage
HTML 22
Balisage et structure de page de base 22
Utilisation d'attributs 23

xx |

Matrice d'objectifs d'examen 53


Termes cls 53
Slection et configuration des balises HTML5 pour
organiser le contenu et les formulaires 54
Prsentation de la smantiqueHTML 54
Utilisation des balises pour structurer un
documentHTML 55
lments header et footer 56
L'lment section 57
L'lment nav 59
L'lment article 61
L'lment aside 61

Utilisation de balises pour crer des tableaux et des

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Contents | xxi
listes64
Cration de tableaux 64
Cration de listes 69

Slection et configuration des balises HTML5 pour la


saisie et la validation 72
Prsentation des entres et des formulaires 73

Dcouverte de la cration de formulaire, des attributs Input


et des valeurs 77

Prsentation de la validation 81

Rsum des comptences 83


valuation des connaissances 84
valuation des comptences 86
valuation de la matrise des concepts 86

Leon4: P
 rsentation des notions
essentielles sur les feuilles de style
en cascade CSS: Flux de contenu,
positionnement et style 87
Matrice d'objectifs d'examen 87
Termes cls 87
Prsentation des notions essentielles sur les feuilles
de style en cascade CSS 87
Utilisation des outils appropris 88
Exploration du lien entre HTML et CSS 89
Sparation du contenu et du style 91
Prsentation des slecteurs et des dclarations 92
Prsentation des polices et des familles de polices 94
Gestion du flux de contenu 96
Positionnement des lments individuels 99
Application du positionnement flottant 99
Application du positionnement absolu 100

Gestion du dbordement de contenu 102


Prsentation du dbordement de dfilement 102
Prsentation du dbordement visible et du dbordement
masqu104

Rsum des comptences 105


valuation des connaissances 106
valuation des comptences 108
valuation de la matrise des concepts 109

Leon5: P
 rsentation des notions
essentielles sur les feuilles
de style en cascade CSS:
Dispositions 110
Matrice d'objectifs d'examen 110
Termes cls 110
Organisation du contenu dune interface utilisateur

avecCSS 111

Utilisation de la bote flexible pour des dispositions


simples et utilisation de la grille pour les dispositions
complexes112

Utilisation de la bote flexible (Flexbox) pour


appliquer au contenu un alignement, une direction
et une orientation 114
Utiliser les lments Flexboxes et Flexbox 116

Mise l'chelle proportionnelle dans une bote flexible 116


Modification de l'orientation des lments enfants dans une
bote flexible 122
Tri et rorganisation du contenu 126

Utilisation des dispositions en grille pour appliquer


au contenu un alignement, une direction et une
orientation 128

Cration d'une grille l'aide de propritsCSS pour les


lignes et colonnes 130
Prsentation des modles de grille 132

Rsum des comptences 133


valuation des connaissances 133
valuation des comptences 135
valuation de la matrise des concepts 136

Leon6: Gestion de l'enchanement du


texte avecCSS 137
Matrice d'objectifs d'examen 137
Termes cls 137
Gestion de lenchanement du texte avecCSS 137
Prsentation et utilisation des rgions pour contrler
l'enchanement du texte entre plusieurs sections 139

Enchanement dynamique du contenu travers les


conteneurs140
Dbordement du texte 142
Implmentation Microsoft des rgionsCSS 142
Utilisation des colonnes et de la csure pour optimiser la
lisibilit du texte 145
Cration de colonnes 146
Utilisation de la csure 150

Utilisation d'exclusionsCSS pour crer un enchanement


autour d'un objet flottant 152

Rsum des comptences 155


valuation des connaissances 155
valuation des comptences 157
valuation de la matrise des concepts 158

Leon7: Gestion de l'interface graphique


avecCSS 159
Matrice d'objectifs d'examen 159
Termes cls 159

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

xxii | Contents

Gestion de l'interface graphique avecCSS 159


Cration d'effets graphiques 160

Cration d'angles arrondis 160


Cration d'ombres 161
Application de la transparence 163
Application de dgrads l'arrire-plan 164

Prsentation de la typographie et du format WOFF (Web


Open Font Format) 166
Application des transformations2D et 3D 167
Traduction2D 168
Mise l'chelle2D 169
Rotation 2D et 3D 171
Inclinaison2D et3D 172
Prsentation de la perspective3D, des transitions et des
animations173

Application d'effets de filtreSVG 179


Utilisation de la zone de dessin pour amliorer l'interface
graphique182

Rsum des comptences 185


valuation des connaissances 186
valuation des comptences 188
valuation de la matrise des concepts 188

Codage des animations avec JavaScript 216


Cration d'animations 216

Utilisation d'images, de formes et d'autres


graphiques 219

Manipulation de l'lment canvas avec JavaScript 220

Envoi et rception de donnes 224

Transmission d'objets complexes et analyse 227

Chargement et enregistrement de fichiers 229

Utilisation du cache de l'application (AppCache) 231


Prsentation et utilisation des types de donnes 233

Utilisation de JavaScript pour valider les entres


d'utilisateur dans les formulaires 233
Prsentation et utilisation des cookies 235
Prsentation et utilisation de la fonction de stockage
local 237
Rsum des comptences 239
valuation des connaissances 240
valuation des comptences 242
valuation de la matrise des concepts 242

Leon8: Prsentation des principes


de base de JavaScript et du
codage189

Leon10: Codage JavaScript pour


l'interface tactile, les ressources
des priphriques et du systme
d'exploitation, etc. 243

Matrice d'objectifs d'examen 189


Termes cls 189
Gestion et maintenance du langage JavaScript 189

Matrice d'objectifs d'examen 243


Termes cls 243
Rponse l'interface tactile 244

Cration et utilisation des fonctions 193


Utilisation de jQuery et d'autres bibliothques
tierces197

Mise jour de l'interface utilisateur avec JavaScript 199


Localisation et accs aux lments 201
coute et rponse aux vnements 203
Affichage et masquage des lments 206
Mise jour du contenu des lments 208
Ajout d'lments 209

Rsum des comptences 211


valuation des connaissances 212
valuation des comptences 214
valuation de la matrise des concepts 214

Leon9: C
 ration d'animations,
utilisation de graphiques et
accs aux donnes 215
Matrice d'objectifs d'examen 215
Termes cls 215

Capture et rponse aux mouvements 246

Codage des API HTML5 supplmentaires 249

Codage pour capturer la golocalisation 249


Prsentation des traitements Web 252
Prsentation des WebSockets 255
Utilisation de l'API de fichier pour les tlchargements
de fichiers 258

Accs aux ressources des priphriques et du systme


d'exploitation 260
Accs aux ressources en mmoire 260
Accs aux capacits matrielles 262

Prsentation du GPS (Global Positioning System) 263


Prsentation de l'acclromtre 263
Accs une camra 263

Rsum des comptences 264


valuation des connaissances 265
valuation des comptences 267
valuation de la matrise des concepts 267
Annexe268
Index269

www.wiley.com/college/microsoft ou
appelez le numro gratuit du programme MOAC : 1 + (888) 764-7001 (tats-Unis et Canada uniquement).

Gestion du cycle
de vie d'une
application

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA


Numro de l'objectif
de l'examen MTA

Prsentation des principes


fondamentaux de la plateforme

Connaissance des principes


fondamentaux de la plateforme

1.1

Prsentation et gestion des


tats de l'application

Gestion de ltat dune


application

1.2

Prsentation des interfaces


tactiles et des mouvements


Connaissance des principes


fondamentaux de la plateforme
Dbogage et test d'une
applicationHTML5
interactions tactiles

1.1

Dbogage et test des


applications HTML5

Dbogage et test dune


1.3
applicationHTML5
interactions tactiles

Publication d'une application


dans un magasin en ligne

Publication dune application


dans un magasin en ligne

1.3

1.4

TERMES CLS
AppCache

interface de programmation dapplication (API)

autorisations didentit

interface utilisateur Windows

conteneur dapplications

JavaScript

cookies

jeux dautorisations

dbogage

langage de balisage

espace de noms

langage de script

tat de lapplication

localStorage

tat de session

mouvement

vnement tactile

package dapplication

feuilles de style en cascade (CSS)

requtes multimdias

HTML5

sessionStorage

Hypertext Markup Language (HTML)

simulateur ou mulateur dcran tactile

Hypertext Transport Protocol (HTTP)

validateur

icne de lancement

Windows Runtime (WinRT)

indpendant de la plateforme

Windows Store

informations dtat persistantes

World Wide Web Consortium (W3C)

2 | Leon 1

Vous tes le nouveau stagiaire chez Malted Milk Media, une agence de cration
qui dveloppe des applications Rich Media pour ses clients. La socit va bientt
commencer utiliser HTML5 dans ses projets. Votre responsable vous a demand
de faire des recherches sur HTML5 et les technologies connexes et de prsenter un
rapport sur les modifications importantes apportes pour passer de HTML4.01
HTML5. Vous devez galement inclure des informations sur la faon dont HTML5
permet de crer des applications d'cran tactile, telles que celles des ordinateurs,
tablettes tactiles, tablettes et smartphones.
Prsentation

L'ESSENTIEL

REMARQUE

W3C est une marque


commerciale (dpose
dans de nombreux
pays) du World Wide
Web Consortium; les
marques du W3C sont
dposes et dtenues
par ses institutions
htes, le MIT, l'ERCIM
et l'universit de Keio.

des principes fondamentaux de la plateforme


HTML5 est la dernire normeHTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Mme si la norme HTML5 ne sera pas finalise avant
quelques annes, la plupart des navigateurs Web modernes prennent dj en charge
les lments HTML5 et le dveloppement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
Hypertext Markup Language (HTML) est le langage que vous utilisez pour dcrire des pages
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML
utilise des balises de marquage comme <body> et <h1> pour dcrire les parties d'une page Web.
Un fichier HTML ne s'excute pas comme un programme. Au lieu de cela, un fichier
HTML est interprt par un navigateur pour afficher une page Web base sur les balises.
Depuis1999, HTML4.01 est la norme pour les pages Web, mais le monde a un peu
chang depuis. Les utilisateurs Web veulent des applications Web plus riches qui intgrent
de l'audio, de la vido et beaucoup d'interactivit dans les sites Web qu'ils visitent. En outre,
avec la monte en popularit des appareils mobiles comme les tablettes tactiles, tablettes et
smartphones, les utilisateurs veulent faire l'exprience de la mme richesse et de la mme
interactivit avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
Tout cela a rendu ncessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui dveloppe des spcifications
pour HTML5, ce qui devrait tre achev en2014. Le logo HTML5 est illustr la figure1-1.
PRT POUR LA CERTIFICATION

Figure1-1
Le logo HTML5
REMARQUE

Mme si HTML5
est encore en
dveloppement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent
en charge de nombreux
lments de HTML5.
PRT POUR LA CERTIFICATION

Quelles sont les trois


technologies principales
de la famille HTML5?
1.1

Un point important retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) dfinissent les styles pour HTML dans un fichier
spar, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont rpercutes dans l'ensemble
des fichiers HTML qui rfrencent le fichier CSS. La dernire version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne ncessite pas de compilateur) qui ajoute l'interactivit aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour crer des pages Web. Vous
avez aussi la possibilit d'employer la combinaison pour dvelopper des applications

Gestion du cycle de vie dune application|3


REMARQUE

clientes (applications) qui s'excutent sur des appareils tactiles tels que des ordinateurs,
tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilises par
les dveloppeurs pour crer des pages Web commencent tre employes pour crer des
applications qui s'excutent sur diffrents appareils.

Vous en apprendrez
plus sur CSS3 et
JavaScript dans les
leons ultrieures.

HTML5 est galement indpendant de la plateforme. Cela signifie que la famille de


technologies HTML5 vous permet de crer des applications qui s'excutent sur diffrents
systmes d'exploitation de priphriques mobiles et de bureau, tels que Microsoft
Windows, Internet Explorer et Windows Phone. Vous pouvez galement les excuter
sous Mac OS X, Android, iOS et Blackberry OS. Parce que HTML5 est construit sur un
standard ouvert, les utilisateurs d'applications HTML5 n'ont pas tlcharger un plug-in
ou utiliser des dispositifs dots de la prise en charge des plug-in. Au lieu de cela, vous
pouvez utiliser n'importe quel navigateur Web, que ce soit sur votre PC ou votre appareil
mobile et obtenir une exprience Web aussi riche.
Enfin, un lment important du dveloppement d'applications dans l'environnement Windows
est l'interface utilisateur Windows, qui est l'interface utilisateur de la dernire version de
Microsoft Windows: Windows8. L'interface utilisateur Windows inclut des fonctionnalits telles
qu'un aspect propre et sans encombrement, le mode plein cran, des concentrateurs de grande
taille (boutons graphiques) et l'accent sur le dfilement latral, pour n'en citer que quelques-unes.
Pour consulter un exemple, reportez-vous la figure1-2.

Figure1-2
L'cran d'accueil de
Windows8 est une interface
utilisateur Windows

REMARQUE

Parce que ce manuel vous aide vous prparer pour l'examen de certification Microsoft
Technology Associate (MTA) 98-375, Notions fondamentales sur le dveloppement
d'applicationsHTML5, les exemples des leons utilisent autant que possible les outils Microsoft.
Toutefois, l'examen ne se concentre pas sur un ensemble spcifique d'outils. Vous pouvez utiliser
la famille HTML5 avec de nombreux outils de beaucoup d'entreprises diffrentes. Mme un
simple diteur de texte tel que Bloc-notes ou Bloc-notes++ convient lorsque vous utilisez le
balisage HTML, CSS et JavaScript. Vous avez besoin d'outils plus complets, comme Visual
Studio, pour dboguer beaucoup de code, empaqueter des applications distribuer et excuter
d'autres tches du mme type. Des outils de dveloppement gratuits pour crer des applications
Windows Store sont disponibles l'adresse http://bit.ly/K8nkk1.

Quelles sont les nouveauts de HTML5?


La famille de HTML5 comprend de nombreuses nouvelles balises de marquage
et technologies telles que les requtes multimdias, la golocalisation, Modernizr
et bien plus encore. Ces technologies ajoutent de nombreuses fonctionnalits aux
applications bases sur HTML et contribuent rendre le produit fini plus lgant.

4|Leon 1

Voici une courte liste de ces nouvelles fonctionnalits et de brves descriptions:


Balises audio et vido: intgrent du contenu multimdia audio et vido l'aide des
balises de marquage HTML5 <audio> et <video>.
Zone de dessin: lmentHTML5 qui cre un conteneur pour graphiques et utilise
JavaScript pour dessiner les graphiques en fonction des besoins.
Requtes multimdias : fonctionCSS3 qui dtecte le type d'cran de l'utilisateur et
adapte la taille d'affichage en consquence.
Nouvelles interfaces de programmation d'application (API): fournissent aux
applications un accs de nombreuses ressources, comme les fichiers, les webcams et
les animations acclres au niveau matriel.
Golocalisation: utilise JavaScript pour dtecter l'emplacement (positionnement
gographique) d'un priphrique client, qu'il s'agisse d'un appareil Windows Phone,
d'un tlphone Android ou d'un PC.
Modernizr: bibliothque JavaScript qui permet de fournir les nouvelles fonctions
HTML5 et CSS3 dans des navigateurs plus anciens.
Il s'agit d'un petit chantillon des fonctionnalits et technologies disponibles. Vous apprendrez
comment utiliser plusieurs d'entre elles dans les leons qui composent ce cours.
EXPLOREZ LA NORME HTML5
PRPAREZ-VOUS. Pour en savoir plus sur la norme HTML5, procdez comme suit:
1. Accdez au site Web du W3C l'adresse http://www.w3.org/TR/html5/.
2. Lisez le contenu des premires pages, jusqu' la table des matires, puis rpondez aux
questions suivantes:
Quelle est la dernire version publie de la norme?
Quel groupe de travail est responsable de la spcification?
Quel est le nom de la page Web qui permet le suivi des bogues, et quels sont les
trois bogues qui n'ont pas encore t traits?
Quel est le nom de la page Web qui permet le suivi des problmes en suspens, et
quels sont les trois problmes qui n'ont pas encore t traits?
3. Passez environ 15minutes naviguer sur le reste de la page Web HTML5 principale
afin de vous familiariser avec les sujets.
EXPLOREZ LES RESSOURCES DE DVELOPPEMENT D'APPLICATIONS
PRPAREZ-VOUS. Pour en savoir plus sur les ressources de dveloppement d'applications
fournies par Microsoft, procdez comme suit:
1. Accdez au site Web Visual Studio 2012 ladresse http://msdn.microsoft.com/fr-fr/
library/vstudio/dd831853(v=vs.110).aspx.
2. Dans la page qui s'affiche, consultez les informations. Quels sont les outils de
dveloppement ou technologies qui vous permettent de crer des applications
Windows Store?
3. Accdez la page Web HTML/CSS pour les applications Windows Store l'adresse
http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576.
4. Cliquez sur le lien Informations de rfrence HTML et DOM, puis rpondez
laquestion suivante:
Qu'est-ce que le DOM (Document Object Model) et quelle est son importance
pourles applications Windows Store?
5. Retournez la page HTML/CSS pour les applications Windows Store l'adresse
http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576. Cliquez sur le lien
Rfrence des feuilles de style en cascade, puis effectuez l'action suivante:
Nommez trois lments de pages Web qui sont contrls l'aide de CSS.
6. Allez sur le site MSDN l'adresse http://bit.ly/Hd9uzt. Parcourez les informations afin
de vous familiariser avec le site.

Gestion du cycle de vie dune application | 5

PLUS DINFORMATIONS
Les adresses Web utilises dans les exercices prcdents sont reprises ici pour plus de commodit. Il
est recommand de crer des signets pour une utilisation ultrieure. Des informations sur la norme
HTML5 sont disponibles sur le site Web du W3C l'adresse http://www.w3.org/TR/html5/. Un site
Web qui propose des didacticiels sur HTML5 est disponible l'adresse http://www.w3schools.com/
html/default.asp. Microsoft fournit des informations utiles aux nouveaux dveloppeurs sur le site
Espace formations pour dveloppeurs dbutants (http://www.visualstudio.com/fr-fr/products/visualstudio-express-vs) et le site de MSDN l'adresse http://bit.ly/Hd9uzt.

Cration d'applications
Les applications HTML5 sont beaucoup plus faciles dvelopper que les
applications similaires qui utilisent d'autres technologies comme AdobeFlash et
MicrosoftSilverlight. HTML5, CSS et JavaScript sont des langages interprts, ce
qui signifie qu'ils ne ncessitent pas de compilation. Vous pouvez dboguer le code
dans un navigateur, effectuer des modifications rapides, puis actualiser la fentre du
navigateur pour voir le rsultat des changements.
Mme si vous pouvez crer beaucoup de code en utilisant un simple texte ou un diteur
HTML, si vous souhaitez empaqueter et dployer votre application, vous aurez besoin
d'utiliser un outil de dveloppement d'applications tel que Microsoft Visual Studio.
Figure1-3
tapes gnrales de la
cration d'une application

Dans cette section, vous dcouvrirez les tapes gnrales lies la cration d'une
application. La figure1-3 illustre les tapes, qui sont expliques ci-dessous:
Planifier le projet: pensez au type d'application que vous souhaitez crer. Quoi
que vous choisissiez, il est prfrable de commencer votre apprentissage du
dveloppement d'applications HTML5 par une application simple. Une fois que vous
avez dfini l'action principale de votre application, crez un plan du flux gnral de
l'application de bout en bout. Dterminez aussi le type d'interactivit utilisateur que
vous souhaitez inclure, comme une interface tactile, si vous avez besoin d'enregistrer
des donnes en dehors de l'application, et si l'application doit se connecter d'autres
applications ou services (par exemple, un flux RSS).
Concevoir une interface utilisateur: lorsque vous concevez l'interface utilisateur,
dterminez comment vous voulez que l'application soit affiche pour les utilisateurs.
Groupez les contenus d'une manire logique. Commencez par crer une liste des
commandes dont vous aurez besoin pour que l'application s'excute comme prvu et
collectez des images et des clips multimdias si ncessaire. Au minimum, les applications
d'aujourd'hui exigent une icne de lancement, qui reprsente votre application.
Mise jour du manifeste de l'application: chaque application ncessite un fichier
manifeste. Le fichier manifeste dcrit les proprits de l'application et ce dont elle a
besoin pour fonctionner (voir la figure1-4). Le fichier comprend de nombreux lments
d'informations diffrents, tels que le nom d'affichage que les utilisateurs voient, une
description de l'application, son orientation (portrait, paysage, etc.), le chemin d'accs
du fichier l'icne de l'application, les fonctionnalits de l'application (fonctionnalits
ou priphriques systme que votre application peut utiliser), et bien plus encore.

6 | Leon 1
Figure1-4
Un exemple d'un fichier
manifeste

crire le code: au cours de cette phase, vous composez le code de votre application,
qui peut inclure une combinaison de HTML, CSS et JavaScript.
Dvelopper l'application: l'aide d'un outil de dveloppement d'applications tel que
Visual Studio, convertissez le code et les autres ressources en une application relle.
Dboguer et tester: vous devez tester votre application soigneusement et rsoudre les
ventuels problmes qui apparaissent. Si l'application utilise une interface tactile, il est
trs important de la tester sur un appareil tactile ou d'utiliser un mulateur tactile.
Crer le package: l'empaquetage d'une application cre un conteneur qui contient
tous les diffrents fichiers requis par l'application, tels que JavaScript, des images et
ainsi de suite.
Valider: valider votre application implique d'excuter un programme de validation
sur cette application pour s'assurer que rien ne manque.
Dployer: tlcharger une application sur une place de march comme le Windows Store.
Les applications que vous prvoyez de dployer pour de nombreux utilisateurs,
notamment via un march comme un magasin d'applications, doivent tre fiables
et sres. De nombreuses applications sont galement conues pour fonctionner sur
plusieurs systmes d'exploitation. Assurez-vous que vous avez test soigneusement votre
application et que vous l'avez valide avec les outils appropris. Vous devez galement
envisager de fournir un support technique pour des applications plus complexes.
PRPARATION POUR LE DVELOPPEMENT D'APPLICATIONS
PRPAREZ-VOUS. Pour vous prparer utiliser HTML5 et dvelopper des applications,
procdez comme suit:
1. Cherchez des sources d'images gratuites, non protges par copyright sur le Web.
Mme si vous tes capable de crer beaucoup de vos graphiques, disposer de
ressources dans lesquelles puiser vous sera utile.
2. Pour utiliser des fichiers HTML5, CSS et JavaScript, tlchargez et installez un diteur
de texte ou HTML, tel que Bloc-notes++. (Il suffit de chercher Bloc-notes++ l'aide d'un
navigateur Web.) Un outil plus complet est Visual Studio Express pour le Web, disponible
sur le site Web de Visual Studio l'adresse http://bit.ly/eBUygk. Visual Studio Express
pour le Web vous permet d'ouvrir vos fichiers dans un navigateur Web avec un seul clic
et fournit beaucoup de modles destins vous aider crer rapidement des fichiers.

Gestion du cycle de vie dune application|7

3. Assurez-vous que la dernire version du navigateur est installe.

4. Pour crer des applications pour le Windows Store, tlchargez MicrosoftVisualStudio


2012Express pour Windows8 partir de l'adresse http://dev.windows.com/fr-fr/
develop/downloads et installez-le. Le programme requiert que Windows8 soit install.

Exploration de l'empaquetage et de l'environnement d'excution


L'environnement d'excution de Windows sert de base au systme d'exploitation
Windows8 et fournit des fonctionnalits pour les applications Windows Store.
Lorsqu'une application est lance, on considre qu'elle se trouve dans un environnement
d'excution (RTE). Il s'agit de l'environnement dans lequel les dveloppeurs testent
leurs applications et o les utilisateurs excutent celles-ci. Windows a son propre
environnement d'excution, appel Windows Runtime (WinRT).
WinRT est la base du systme d'exploitation Windows8 et se compose de couches qui
fournissent les fonctionnalits aux applications Windows Store et WindowsShell. WinRT
prend en charge les applications crites dans des langages diffrents qui utilisent l'interface
utilisateur Windows.
La couche systme de Windows est la base. Cette couche inclut le noyau, les services et
le mode utilisateur Windows. Un niveau plus haut, le noyau Windows Runtime inclut des
services supplmentaires comme la gestion de la mmoire et la globalisation. Au-dessus
du noyau Windows Runtime se trouvent les couches lies aux priphriques, aux supports,
la mise en rseau, au stockage local et distant et plus encore. La couche d'interface
utilisateur prend en charge notamment les applications HTML5.
WinRT utilise C#, C++, Visual Basic et JavaScript. Vous pouvez dvelopper des
applications Windows Store avec la bibliothque WinRT et Windows pour les API
JavaScript. Une interface de programmation dapplication (API) est tout simplement
une liste d'instructions qui permettent un programme de communiquer avec un autre
programme. Dans une application Web, une API permet un navigateur Web ou un
serveur Web de communiquer avec d'autres programmes. Des centaines d'API sont
disponibles pour de nombreux usages diffrents.

REMARQUE

PRT POUR LA CERTIFICATION

Quel environnement
donne aux dveloppeurs
l'accs un appareil de
l'utilisateur?
1.1

Le Document Object Model (DOM) est une API importante garder l'esprit. Le
DOM est conu pour HTML et XML (Extensible Markup Language) et permet aux
programmes et scripts de mettre jour le contenu, la structure et les styles la vole.
En gros, l'intgralit du contenu d'un fichier HTML ou XML peut tre modifie. Le
DOM n'est ni en HTML ni en JavaScript, mais il les lie.
La bibliothque Windows pour JavaScript comprend des fichiers JavaScript et CSS que les
dveloppeurs peuvent utiliser pour crer des applications Windows Runtime plus facilement et
rapidement. La bibliothque, HTML, CSS et WinRT vous permettent de crer des applications.
L'environnement d'excution est responsable de l'accs aux appareils, supports, la mise
en rseau, au stockage local et distant, ainsi qu' d'autres lments. Un dveloppeur peut
utiliser des API et l'environnement d'excution pour demander l'accs aux priphriques
utilisateur dans une application. Dans une application Windows8, par exemple, l'appareil
peut tre un clavier, une souris, un pav tactile, une imprimante, une webcam ou un micro.

PLUS DINFORMATIONS
Pour plus d'informations sur Windows Runtime, visitez la page Web Fonctionnalits et diffrences HTML,
CSS et JavaScript (HTML) l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465380.aspx.

PRSENTATION DU PROCESSUS HTE


Qu'une application soit une application Web ou qu'elle ait t cre pour Windows, elle
requiert un hte du runtime pour dmarrer. Par exemple, lorsque vous dmarrez Internet
Explorer, un processus hte dans le systme d'exploitation contrle l'excution globale du

8|Leon 1

navigateur. (Un processus est simplement un programme qui est excut.) Dans ce cas,
chaque onglet de navigateur a son propre processus, donc si trois onglets sont ouverts, le
systme a trois processus qui s'excutent pour chacun de ces onglets.
Lorsque vous excutez une application Windows Store qui a t cre avec JavaScript,
Internet Explorer affiche le contenu HTML un peu comme lorsque vous naviguez vers une
page Web, mais le navigateur est hberg par un processus diffrent, appel WWAHost.
exe. Ce processus excute l'application l'intrieur d'un conteneur d'applications. (Vous
dcouvrirez les conteneurs d'applications dans la section suivante.) WWAHost fait passer le
HTML, CSS et JavaScript dans la page default.html qui est le dbut de votre application.
PRT POUR LA CERTIFICATION

Quel est le rle du


processus hte dans la
gestion des applications?
1.1

Pour que tout fonctionne bien, le code qui s'excute dans un conteneur d'applications Windows
Store est restreint certaines actions, par dfaut. Si vous voulez que votre application accde
un priphrique, une autre application, Internet ou quoi que ce soit en dehors d'elle-mme,
vous devez dclarer (spcifier) l'interaction dans le manifeste de l'application. Ces dclarations
sont trouvent dans la section Fonctionnalits du manifeste. Lorsque l'utilisateur final installe
l'application, il doit accorder l'autorisation pour l'accs demand.
Les applications Windows Store utilisent des contrats, qui sont pour l'essentiel des
accords, et des lments appels extensions lors de la cration d'interactions entre les
applications. Les API WinRT grent la communication entre les applications.

PRSENTATION DU PACKAGE D'APPLICATION ET DU CONTENEUR D'APPLICATIONS


L'objectif d'un package d'application est de faciliter la distribution et le dploiement.
L'empaquetage d'application regroupe les fichiers et dossiers d'une application dans un
package distribuable. Un conteneur d'applications garantit que l'application s'excute dans
sa propre zone mmoire et n'endommage pas le systme d'exploitation.

PRT POUR LA CERTIFICATION

Quel est le but de


l'empaquetage d'une
application?
1.1

L'empaquetage d'applications dsigne le processus d'assemblage d'une application et de


ses diffrents fichiers dans un fichier distribuable, ce qui facilite son dploiement. Le
package de l'application est le rsultat du processus d'empaquetage. L'empaquetage est
similaire l'archivage d'un dossier qui contient des fichiers et des sous-dossiers. Il serait
difficile d'envoyer tous les fichiers et les sous-dossiers quelqu'un en l'tat, mais le
travail est beaucoup plus facile si on compresse le tout dans un fichier d'archives unique.
Les packages de dveloppement d'applications tels que Visual Studio fournissent les
fonctionnalits pour crer des packages d'applications. Un utilisateur acquiert un package
d'application, gnralement partir d'un magasin d'application en ligne et l'installe sur
un PC ou un priphrique. L'application est excute dans un conteneur d'applications
d'excution, qui correspond une zone mmoire spare. Il empche l'endommagement
du systme d'exploitation si l'application choue pour une raison quelconque et permet
l'utilisateur de dsinstaller proprement l'application.
Voici quelques lments que vous devez savoir sur les packages:
Un package peut contenir des pages Web, du code, des tables de base de donnes et des
procdures. Quand un package est dot d'une interface utilisateur, on parle d'application.
Un package peut contenir d'autres packages.
Vous pouvez dplacer un ou plusieurs lments dans un package ou les en retirer.
Parce qu'un package se trouve dans son propre conteneur, si vous dplacez un
package, tout son contenu se dplace comme une unit.
Un utilisateur peut installer, mettre jour ou supprimer un package.
Un seul package peut offrir de nombreuses fonctionnalits. Afin de s'assurer que tous les composants
sont spars pour viter les conflits, un package dfinit un espace de noms. Envisagez un espace
de noms comme un espace de travail pour les objets associs (pages, code, etc.).
EXPLORATION DEXEMPLES D'APPLICATIONS
PRPAREZ-VOUS. Pour explorer les types d'exemples d'applications qui sont disponibles
en tlchargement, procdez comme suit:
1. Accdez la page Web Exemples de code pour dveloppeurs de MSDN (voir la
figure1-5) l'adresse http://bit.ly/H57ZVh. Microsoft fournit un large ventail
d'exemples d'applications et de code, que vous pouvez tlcharger et ouvrir dans un
outil de dveloppement d'applications tel que Visual Studio. Vous pouvez galement
afficher le code pour les nombreux exemples d'applications en ligne.

Gestion du cycle de vie dune application | 9


Figure1-5
Une partie de la page Web
Exemples de code pour
dveloppeurs de MSDN

2. Faites dfiler vers le bas et cliquez sur le lien HTML5 dans le volet gauche, actuellement
prs du bas de la liste.
3. Parcourez les chantillons jusqu' trouver une application dont la description est suivie
de HTML5, comme lexample Show Ads using the AdControl in HTML5. Cliquez sur
le lien vers l'application.
4. La page qui s'affiche indique le programme requis pour ouvrir et modifier les fichiers
de l'application et les technologies incluses dans l'application. Lexample Show Ads
using the AdControl in HTML5 ncessite VisualStudio12 et inclut JavaScript et HTML5,
comme illustr la figure1-6.

Figure1-6
Affichage d'une page Web
d'exemple d'application

5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le


volet gauche, sur html, puis sur default.html. Le balisage HTML affiche. Faites dfiler le
balisage pour dcouvrir le type de code que vous rencontrerez souvent dans ce livre.

10|Leon 1

6. Cliquez sur css dans le volet gauche, puis sur default.css. Le code CSS s'affiche.
7. Cliquez sur js dans le volet gauche, puis sur default.js. Le code JavaScript s'affiche.
8. Si vous disposez d'un outil de dveloppement d'applications (tel que Visual Studio)
dj install, n'hsitez pas tlcharger et ouvrir l'exemple d'application pour
parcourir tous les fichiers du package.
9. Vous pouvez aussi accder au site Web HTML5Rocks.com, cliquer sur le menu
Publications et didacticiels situ en haut de l'cran, cocher la case Exemples, puis
dcouvrir comment chaque exemple fonctionne et son code.
10. Fermez toutes les fentres ouvertes.

PLUS DINFORMATIONS
Pour plus d'informations sur le package d'application, visitez la page Web Packages et dploiement
dapplications l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh464929.aspx.

Prsentation des jeux d'informations d'identification et d'autorisations


Le .NET Framework fournit un environnement sr dans lequel les applications
HTML5/JavaScript peuvent s'excuter. L'infrastructure utilise la transparence de la
scurit pour sparer les diffrents types de code en cours d'excution et des jeux
d'autorisations et des autorisations d'identit pour contrler l'environnement.

PRT POUR LA CERTIFICATION

Comment les jeux


d'informations
d'identification et
d'autorisations protgent-ils
les applications?
1.1

La scurit du code est une priorit pour les dveloppeurs d'applications. La perte
pcuniaire cause par les virus, chevaux de Troie, attaques de scripts entre sites et autres
logiciels malveillants distribus sur Internet augmente chaque anne. Aujourd'hui, la
cration d'un environnement sr et scuris pour les applications excuter est d'une
importance vitale pour la plupart des individus et des organisations.
La bonne nouvelle est que le .NET Framework 4.0 prend en charge la cration et l'excution
des applications Windows Store, entre autres technologies. Le .NET Framework est un
composant de Windows qui s'excute en arrire-plan, fournissant l'environnement d'excution
de code pour code script ou interprt (comme JavaScript), afin de les aider s'excuter avec
relativement peu de problmes. Il fournit galement un environnement de programmation
orient objet pour le code objet.
Le .NET Framework s'appuie maintenant plus fortement sur la transparence de scurit que
dans les versions prcdentes. La transparence empche l'excution du code d'application dans
le code d'infrastructure. Le .NET Framework utilise des jeux d'autorisations et l'autorisation
d'identit. Les jeux d'autorisations sont des groupes d'autorisations. Le code transparent
excute les commandes qui ne dpassent pas les limites d'un jeu d'autorisations et le code
transparent est encore plus limit quand il s'agit de code critique.
Le .NET Framework dfinit plusieurs niveaux de jeux d'autorisations, qui vont de Aucun
(aucune autorisation n'existe et le code ne peut pas s'excuter) Confiance totale (le code
peut accder pleinement toutes les ressources).
Les autorisations d'identit protgent les assemblies (bibliothques de code compil)
sur la base de la preuve, c'est--dire des informations sur l'assembly. Chaque autorisation
d'identit reprsente un type particulier de preuve ou d'informations d'identification qu'un
assembly doit avoir pour s'excuter.

Prsentation et gestion des tats de l'application

L'ESSENTIEL

Un tat de session est cr la premire fois qu'un utilisateur demande l'accs une
application et il se termine lors de la fermeture de la session, par exemple quand
un utilisateur se dconnecte. Un tat de l'application existe partir du moment o
un navigateur demande une page Web jusqu' ce que le navigateur se ferme. Les
informations d'tat persistantes sont des donnes qui existent aprs la fin d'une session.
En HTML5, les dveloppeurs peuvent utiliser les mthodes JavaScript localStorage et
sessionStorage pour traiter efficacement les donnes d'tat.

Gestion du cycle de vie dune application | 11

Quelle est la diffrence


entre l'tat de session et
l'tat de l'application?
1.2

En outre, AppCache permet un utilisateur de charger des donnes qui sont gnralement
stockes sur un serveur mme lorsque l'utilisateur est hors connexion. La gestion de l'tat
est le processus de maintenance des informations de la page Web au cours de plusieurs
demandes de la mme page Web ou d'une page diffrente. Lorsque l'utilisateur demande
pour la premire fois l'accs une application, l'tat de session est cr. L'tat se termine
lorsque l'utilisateur ferme la session.

PRT POUR LA CERTIFICATION

Une autre solution que l'tat de session est l'tat de l'application. L'tat de l'application est
cr lorsque le navigateur Web envoie la premire demande d'une page Web au serveur
Web, et se termine lorsque l'utilisateur referme le navigateur.

Quelle est l'importance


des informations d'tat
persistantes?
1.2

Les informations d'tat persistantes sont les donnes dont une application a besoin aprs
la fin de la session. De nombreuses applications Web doivent stocker des donnes (et les
rendre persistantes) afin que les utilisateurs puissent reprendre l'endroit o ils se sont
arrts lorsqu'ils retournent sur le site.

PRT POUR LA CERTIFICATION

Stockage des donnes d'tat l'aide du stockage local et de session


Hypertext Transport Protocol (HTTP) est le protocole qui transfre des donnes
sur le World Wide Web. Il dfinit les actions effectues par les serveurs de Web et
les navigateurs en rponse aux commandes des utilisateurs. Par exemple, lorsque
vous entrez une URL (Uniform Resource Locator) dans le champ d'adresse d'un
navigateur, celui-ci envoie une commande HTTP au serveur Web pour demander la
page Web. HTTP est un protocole sans tat, ce qui signifie qu'il ne conserve pas les
donnes d'une session l'autre. Lorsque vous fermez un navigateur Web aprs avoir
visit un site Web, les donnes ne sont pas enregistres.
PRT POUR LA CERTIFICATION

Comment HTML5 gre-t-il


les donnes d'tat?
1.2

Pour contourner les limitations du protocole HTTP, les dveloppeurs utilisent des cookies,
qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
visit et sont enregistrs sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
site visit, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
Web se souvenir d'un utilisateur et personnaliser son exprience sur ce site.
Cependant, les cookies se sont avrs tre un risque pour la scurit. En outre, si de grandes
quantits de donnes sont impliques, toutes les donnes sont envoyes entre le navigateur et
le serveur chaque requte, ce qui risque d'entraner une baisse de performances notable pour
l'utilisateur. En HTML5, les dveloppeurs peuvent utiliser le stockage Web au lieu de cela, ce qui
offre plus de flexibilit, de plus grands ensembles de donnes et de meilleures performances.

PRT POUR LA CERTIFICATION

Laquelle des deux


mthodes, HTML5/
JavaScript, permet une
application de stocker les
donnes persistantes?
1.2

La mthode localStorage permet aux utilisateurs de conserver de plus grandes quantits de


donnes d'une session l'autre (donnes persistantes) et leur existence n'est pas limite
dans le temps. La mthode sessionStorage permet de conserver les donnes uniquement
pendant une session (jusqu' ce que la fentre du navigateur soit ferme). On parle
galement de stockage par onglet.
Ces mthodes permettent de transfrer des donnes spcifiques uniquement sur demande.
Il est donc possible de stocker une quantit relativement importante de donnes sans
ralentir la connexion ou le site.

APPCACHE POUR LES FICHIERS HORS CONNEXION


Une autre faon d'utiliser le stockage Web consiste stocker les donnes localement
lorsqu'un utilisateur est en mode hors connexion. Le cache d'application ou AppCache,
stocke des ressources telles que des images, pages HTML, fichiers CSS et JavaScript: les
donnes qui seraient normalement stockes sur un serveur. tant donn que les ressources
sont stockes sur le disque dur ou le priphrique du client, elles sont charges plus
rapidement lorsqu'elles sont demandes.

REF

Vous en apprendrez
plus sur l'utilisation
de AppCache avec
JavaScript dans la
leon8.

l'aide de l'AppCache, un dveloppeur utilise un fichier texte appel manifeste de cache


pour spcifier les fichiers qu'un navigateur Web doit mettre en cache en mode hors connexion.
Mme si un utilisateur clique sur le bouton Actualiser en mode hors connexion, l'application se
charge et fonctionne correctement. Un fichier manifeste de cache ressemble ce qui suit:
index.html
stylesheet.css
images/dot.png
scripts/main.js

12 | Leon 1

PLUS DINFORMATIONS
Pour plus d'informations sur la gestion d'tat et le stockage local et de session, consultez la page Web
Stockage et rcupration efficaces des tats (HTML) l'adresse http://msdn.microsoft.com/fr-fr/
library/windows/apps/Hh781225.asp.

Prsentation

L'ESSENTIEL

PRT POUR LA CERTIFICATION

Qu'est-ce qu'un
mouvement et quelle est
son importance avec les
appareils tactiles?
1.3

REF

Vous apprendrez
crer du code
JavaScript pour les
interfaces tactiles dans
la leon9.

des interfaces tactiles et des mouvements


Sur un priphrique cran tactile, un balayage du doigt s'appelle un mouvement et la
rponse de l'application ce mouvement s'appelle un vnement. Le dveloppement
d'applications interactions tactiles ncessite une connaissance approfondie de
l'interaction des doigts avec l'cran et de la prise en compte des diffrentes tailles des
doigts. Vous pouvez utiliser JavaScript pour crer des applications interactions tactiles,
principalement en ayant recours aux vnements touchstart, touchend et touchmove.
Les appareils mobiles d'aujourd'hui et un grand nombre d'crans PC intgrent la technologie
d'cran tactile, qui permet de nombreux utilisateurs d'interagir plus facilement avec les
priphriques et leurs programmes. Un simple toucher du doigt slectionne un objet ou
appuie sur un bouton, un balayage du doigt fait dfiler une liste de photos sur l'cran, et un
pincement effectue un zoom arrire sur une image.
Un balayage du doigt s'appelle un mouvement, ce qui peut impliquer un seul doigt (un
toucher, comme un appui, un appui prolong, glisser pour effectuer un mouvement
panoramique, etc.) ou un doigt et le pouce (deux touchers, par exemple pincer et tirer
ou tourner pour appliquer un mouvement en arc de cercle). L'action de l'application en
rponse un mouvement s'appelle un vnement tactile. Vous pouvez utiliser JavaScript
pour crer des vnements tactiles dans les applications tactiles. En JavaScript, les trois
vnements tactiles principaux sont touchend, touchstart et touchmove.
Lorsque vous crez des applications pour un environnement interactions tactiles, la
ractivit aux mouvements est un lment cl. La lenteur des ractions peut frustrer la
plupart des utilisateurs. Intgrez des effets physiques, comme l'acclration et l'inertie afin
d'amliorer la fluidit de l'interaction entre l'utilisateur et l'cran.
Un retour visuel pour des interactions performantes et d'autres notifications sont trs
importants. Cela permet l'utilisateur de savoir s'il utilise correctement le mode paysage
tactile. Les points d'ancrage permettent aux utilisateurs de s'arrter un emplacement
prvu de l'interface, mme si un mouvement se situe lgrement en dehors de la cible.
N'oubliez pas galement que les utilisateurs ont des doigts de tailles diffrentes, et il est
recommand de crer des applications pour des doigts plus larges, plutt que plus fins. Et
bien sr, comme les utilisateurs sont droitiers ou gauchers, une application bien conue
utilise une navigation verticalement symtrique et offre une rotation de l'cran 90degrs
pour passer du mode portrait au mode paysage, ou vice-versa.

PRT POUR LA CERTIFICATION

Quelles meilleures
pratiques en matire
d'applications tactiles
devriez-vous tester?
1.3

Une interaction tactile multipoint se produit lorsqu'un utilisateur appuie sur plusieurs
boutons ou endroits la fois. Cela se produit frquemment avec les jeux sur un appareil
cran tactile, o l'utilisateur utilise souvent plusieurs doigts et les pouces simultanment
ou en succession trs rapide. Dans cette situation, les balayages et mouvements ne
fonctionnent pas bien, ce qui entrane un zoom et un dfilement involontaires la place.
La solution consiste dsactiver le zoom et le dfilement en JavaScript.
Un autre lment tester dans une application multipoint est la raction aux vnements
tactiles. Beaucoup d'vnements se produiront en mme temps, ce qui exige un bon suivi
des doigts et un rendu en boucle pour obtenir des performances optimales.
Lorsque vous dployez une application interactions tactiles, assurez-vous de tester les
points suivants:
Ractivit et fluidit gnrales
Appuis, pincements, rotations et autres mouvements courants
Dfilement contrl
Panoramique contrl

Gestion du cycle de vie dune application|13

Possibilit de dsactiver le dfilement et le mouvement panoramique


Prcision des points d'ancrage
Zoom ou dfilement inattendu, notamment dans un environnement tactile multipoint
Raction approprie un vnement tactile, notamment dans un environnement tactile
multipoint
Concevoir et dvelopper des applications tactiles bien formes ncessite de la pratique
et de nombreux tests. Si vous ne disposez pas d'un appareil cran tactile, vous pouvez
utiliser les vnements MouseTouch et un mulateur ou simulateur d'cran tactile. Essayez
le Kit de dveloppement logiciel (SDK) Microsoft Surface et Runtime pour Windows7 ou
l'outil simulateur Windows dans Visual Studio11. Un simulateur ou mulateur d'cran
tactile imite un systme qui possde uniquement des fonctionnalits tactiles. Plusieurs
mulateurs gratuits sont disponibles en ligne.
EN SAVOIR PLUS SUR LES MOUVEMENTS ET LES APPLICATIONS TACTILES
PRPAREZ-VOUS. Pour en savoir plus sur les diffrents types de mouvements, procdez
comme suit:
1. Accdez la page Web Interactions tactiles pour Windows l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465415.
2. Lisez le contenu de la page Web.
3. Crez un signet de la page pour un usage ultrieur ou localisez et cliquez sur le lien qui
permet de tlcharger une version PDF de la page Web sur votre ordinateur.

4. Fermez la fentre du navigateur.

PLUS DINFORMATIONS
Les spcifications tactiles du WC3 sont disponibles l'adresse http://bit.ly/gBZUjo. Pour plus d'informations
sur les interactions tactiles et les mouvements, visitez la page Web Rponse linteraction utilisateur
(HTML) l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700412.aspx.

Utilisation des comptences et du contenu HTML5 existants pour les


applications de tablettes tactiles/tablettes
Un avantage pour les dveloppeurs chevronns qui veulent crer des applications
Windows Store est que leurs connaissances de HTML5 et le code existant se prtent
bien au dveloppement d'applications Windows Store.
PRT POUR LA CERTIFICATION

Est-ce qu'un dveloppeur


Web doit acqurir de
nouvelles comptences
pour pouvoir crer des
applications Windows
Store pour appareils
tactiles?
1.1

Dbogage
L'ESSENTIEL

Le dveloppement d'applications tactiles Windows Store est trs flexible, car il ne


ncessite pas une grande courbe d'apprentissage pour les dveloppeurs qui utilisent dj
HTML5 et d'autres mthodes de dveloppement d'applications. Ils peuvent appliquer
leurs comptences et le code existant la cration d'applications Windows Store presque
immdiatement. L'exprience d'un dveloppeur Web avec HTML, CSS, JavaScript et
les bibliothques JavaScript est un avantage lors de la transition vers le dveloppement
d'applications tactiles Windows Store.
En outre, les dveloppeurs Microsoft.NET Framework et Silverlight peuvent appliquer
leur exprience de XAML, C# et Visual Basic aux projets interface utilisateur Windows.
Les programmeurs de jeux qui connaissent bien MicrosoftDirectX11 peuvent galement
appliquer leurs comptences la cration d'applications Windows Store.

et test des applications HTML5


Toutes les applications doivent tre soigneusement testes et dbogues pour s'assurer
qu'elles s'excutent de faon fiable et avec le moins d'erreurs possible avant leur
distribution et leur dploiement.
Le dbogage d'une application implique la dtection, la recherche et la correction des
erreurs logiques ou syntaxiques. Une erreur de syntaxe est une faute de frappe dans le
code ou une erreur similaire qui se matrialise au moment de l'excution d'applications
interprtes. Une erreur logique modifie le comportement attendu de l'application.

14|Leon 1
PRT POUR LA CERTIFICATION

Que peut faire un


dveloppeur pour
s'assurer qu'une nouvelle
application est fiable et
aussi exempte d'erreur
que possible?
1.3

Les tests et le dbogage de code sont un composant standard du dveloppement d'applications


et la plupart des outils tels que Visual Studio sont dots de fonctionnalits intgres de dbogage
dans le logiciel. Certaines erreurs sont faciles dtecter et corriger, tandis que la rsolution de
certaines autres peut prendre des heures voire des jours, selon la complexit de l'application.
Quoi qu'il en soit, la phase de test et de dbogage est trs importante pour plusieurs raisons:
Votre but est de fournir une application fiable, sre et utile aux clients. Le dbogage
et les tests garantissent que ces trois objectifs sont atteints.
Des applications de haute qualit obtiennent des notes leves, qui peuvent stimuler
vos profits et les ventes des applications futures.
Si vous prvoyez de publier votre application via le Windows Store ou un march
d'applications en ligne de bonne rputation, le magasin exigera la validation ou la
certification que votre application a t teste.

Validation du code HTML5


Une des premires tapes dans la phase de dbogage et de test consiste valider le
code HTML5. La validation implique de vrifier la validit du code. Un validateur
recherche les lments susceptibles d'entraner une interprtation errone du code,
comme des balises manquantes ou non fermes, une dclaration DOCTYPE
incorrecte, une barre oblique de fin, du code obsolte, etc. (Ne vous proccupez pas
de ces dtails pour l'instant. Vous les dcouvrirez dans la leon2.)
Le W3C fournit un service de validation du code pour toutes les versions actives de
HTML sur sa page Web Service de validation du balisage l'adresse http://validator.
w3.org/. Tout le monde peut utiliser ce service gratuitement. Il vous suffit de cliquer sur
un lien pour tlcharger votre fichier sur le service, ou de copier et coller le contenu de
votre fichier dans une zone de texte sur le site Web. Aprs cela, cliquez sur le bouton
Check. Le service de validation vrifie le code et signale les erreurs ou problmes que
vous devez corriger.
Un validateur n'est pas identique un mulateur ou un simulateur. En fait, un validateur
teste le code et signale les inexactitudes, ce qui vous donne l'occasion d'apporter des
modifications. Les mulateurs et simulateurs fournissent simplement un environnement
dans lequel excuter le code.

REMARQUE

Le W3C fournit galement un outil de vrification des liens l'adresse http://validator.


w3.org/checklink. Ce service vrifie que tous les liens de votre fichier HTML sont valides.
Le service de validation du CSS disponible l'adresse http://jigsaw.w3.org/css-validator/
vrifie vos fichiers CSS.

Validation d'un package


Microsoft fournit un outil gratuit appel Kit de certification des applications Windows pour
tester les applications locales. Ce kit est un type de validateur qui teste votre application sur
votre ordinateur avant de l'empaqueter et de la publier dans le Windows Store.
Le Kit de certification des applications Windows est inclus dans le Kit de dveloppement
logiciel (SDK) Windows pour les applications Windows Store, disponible sur le site Web
de Microsoft. Pour utiliser le kit, vous devez d'abord empaqueter et installer l'application
localement l'aide d'un outil de dveloppement d'applications. Ensuite, ouvrez le
kit, slectionnez l'application que vous souhaitez valider et excutez le validateur. Le
rapport qui s'affiche indique tout problme de l'application. Le Kit de certification des
applications Windows peut tre aussi disponible en tant qu'option de menu dans votre
outil de dveloppement d'applications.
Corrigez les problmes dans un outil de dveloppement d'applications et testez nouveau
l'application. Rptez ce processus jusqu' la validation de votre application.

Gestion du cycle de vie dune application | 15

UTILISATION DU SERVICE DE VALIDATION DU BALISAGE DU W3C


PRPAREZ-VOUS. Pour vous familiariser avec le service de validation du balisage du
W3C, procdez comme suit:
1. Accdez la page Web du service de validation du balisage du W3C l'adresse
http://validator.w3.org/.
2. Cliquez sur l'onglet Validate by File Upload.
3. Cliquez sur Parcourir.
4. Accdez un fichier HTML dans un de vos exemples d'applications et slectionnez-le.
Cliquez sur Ouvrir, puis sur Check.
5. Faites dfiler la page vers le bas et consultez les erreurs et les avertissements, le cas
chant. La figure1-7 montre un exemple.
Figure1-7
Erreurs et avertissements
dcoulant d'une tentative de
validation d'une page Web
HTML

6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les avertissements, cliquez sur au moins deux d'entre eux et lisez les informations.
7. Lorsque vous avez termin, laissez le navigateur Web ouvert.

UTILISATION DU SERVICE DE VALIDATION DU CSS DU W3C


PRPAREZ-VOUS. Pour vous familiariser avec le service de validation du CSS du W3C,
procdez comme suit:
1. Accdez la page Web Service de validation du CSS du W3C l'adresse http://jigsaw.
w3.org/css-validator/ (voir figure1-8).
2. Cliquez sur l'onglet par chargement de Fichier.
3. Cliquez sur Parcourir.
4. Accdez un fichier CSS dans un de vos exemples d'applications et slectionnez-le.
Cliquez sur Ouvrir, puis sur Vrifier.

16|Leon 1
Figure1-8
La page Web Service de
validation du CSS du W3C

Publication

5. Faites dfiler la page vers le bas et consultez les erreurs et les avertissements, le cas
chant.
6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les
avertissements, cliquez sur au moins deux d'entre eux et lisez les informations.
7. Lorsque vous avez termin, laissez le navigateur Web ouvert.

d'une application dans un magasin en ligne

L'ESSENTIEL

Une fois que votre application a t teste, dbogue et le code valid ou certifi,
vous devez effectuer quelques tapes de plus pour prparer son chargement sur une
place de march telle que le Windows Store. Vous pouvez utiliser VisualStudio12 ou
VisualStudio12Express pour raliser le projet.
La publication d'une application sur une place de march publique comme le Windows
Store marque l'apoge de la planification, de la conception, du codage et des tests. Le
Windows Store est une place de march globale en ligne pour les applications Windows
Store. La distribution de votre application via le magasin en ligne peut transformer une
bonne ide en une opration lucrative.
Un autre bonus li la vente via le Windows Store est que vous avez accs plusieurs outils
pratiques, tels que Microsoft Visual Studio Express et Microsoft Expression Blend. Vous
pouvez galement tlcharger les donnes de tlmtrie d'applications personnalises, qui
peuvent grandement acclrer la cration et le dploiement d'applications.

PRT POUR LA CERTIFICATION

Comment publier une


application dans le
Windows Store?
1.4

Avant de publier votre application dans le Windows Store, vous devez procder comme suit:
Inscrivez-vous et payez pour un compte de dveloppeur Windows Store et rservez un
nom pour votre application. Vous devrez galement modifier le fichier manifeste de
votre application.
Passez en revue la liste de vrification relative la soumission dune application
l'adresse http://bit.ly/HAPmbk. La liste de comprend une srie de tches, notamment
l'attribution d'un nom votre application, le choix de dtails commerciaux, comme
la slection d'un prix appropri et d'une date de publication, l'attribution d'une
classification par ge, la description de l'application, etc.

Gestion du cycle de vie dune application|17

REMARQUE

Vous devez vous


inscrire et payer
pour un compte de
dveloppeur Windows
Store pour ajouter votre
application dans le
menu du magasin.

Utilisez le Kit de certification des applications Windows pour tester votre application,
si vous ne l'avez pas dj fait.
Effectuez quelques captures d'cran des fonctions principales ou uniques de
l'application pour la prsenter dans le magasin en ligne. Vous pouvez utiliser l'outil
Capture d'cran, qui est intgr Windows7 et Windows8, pour raliser des captures
d'cran, ou employer un autre outil de votre choix.
Demandez d'autres testeurs ou dveloppeurs de tester l'application sur autant de
plateformes et priphriques diffrents que possible, notamment si vous avez test
l'application uniquement dans un simulateur ou un mulateur.
Incluez une dclaration de confidentialit si votre application collecte des informations
caractre personnel ou est excute via un logiciel protg par copyright.
Lorsque vous tes prt, utilisez votre outil de dveloppement d'applications (tels que
Visual Studio12 ou Visual Studio12 Express pour Windows8) pour crer un package
d'application finale, puis tlchargez-le sur le Windows Store.
Il est de coutume d'attendre l'approbation du magasin. Si elle est approuve, votre application est
certifie et rpertorie. Cependant, mme aprs tout votre travail prparatoire, votre application
peut tre rejete, ce qui signifie que vous devez corriger tout problme signal par le personnel
demagasin d'applications si vous voulez tester de nouveau l'application et la republier.
SE FAMILIARISER AVEC LA PLACE DE MARCH WINDOWS STORE
PRPAREZ-VOUS. Pour en savoir plus sur les conditions requises par le Windows Store,
procdez comme suit:
1. Ouvrez Internet Explorer, puis utilisez l'adresse www.bing.com.
2. Faites une recherche sur Place de march Windows Store et accdez au site.
3. Parcourez les catgories d'applications. Prenez note des trois applications les mieux
notes et de trois applications qui vous intressent.
4. Lisez la description de chaque application et prenez des notes qui pourraient vous
aider crire une description attrayante pour votre application.
5. Notez le nombre et la qualit des captures d'cran fournies pour ces applications.
6. Notez la qualit de l'icne de lancement et tout autre dtail graphique.
7. Notez la cote de prix et la classification par ge de chaque application.
8. Notez tous les autres dtails qui pourraient vous aider vendre votre application
quand elle sera prte.
9. Lorsque vous avez termin, fermez toutes les fentres ouvertes.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
HTML5 est la dernire normeHTML et une famille de technologies qui rassemblent HTML, CSS et
JavaScript. Mme si la norme HTML5 ne sera pas finalise avant quelques annes, la plupart des
navigateurs Web modernes prennent dj en charge les lments HTML5 et le dveloppement
d'applications HTML5 pour le Web et les navigateurs d'appareils mobiles est en bonne voie.
La famille de HTML5 comprend de nombreuses nouvelles balises de marquage et technologies
telles que les requtes multimdias, la golocalisation, Modernizr et bien plus encore.
Les principales tapes de la cration d'une application sont les suivantes: planifier le projet,
crer une interface utilisateur, mettre jour le manifeste d'application, crire le code, dvelopper
l'application, dboguer et tester l'application, crer le package de l'application et la dployer.
L'environnement d'excution de Windows (WinRT) sert de base au systme d'exploitation
Windows8 et fournit des fonctionnalits pour les applications Windows Store.
Les applications Windows Store cres avec JavaScript et ouvertes dans Internet Explorer sont
excutes par le processus WWAHost.exe. Il s'agit d'un processus diffrent du processus hte qui
s'excute habituellement sur Internet Explorer.
L'objectif d'un package d'application est de faciliter la distribution et le dploiement. L'empaquetage
d'application consiste regrouper les fichiers et dossiers d'une application dans un package.

18|Leon 1

Le .NET Framework fournit un environnement sr dans lequel les applications HTML5/


JavaScript peuvent s'excuter. L'infrastructure utilise la transparence de la scurit pour
sparer les diffrents types de code en cours d'excution et des jeux d'autorisations et des
autorisations d'identit pour contrler l'environnement.
Un tat de session est cr la premire fois qu'un utilisateur demande accder une
application, et il se termine lors de la fermeture de la session.
Un tat de l'application existe partir du moment o un navigateur demande une page Web
jusqu' ce que le navigateur se ferme.
Les informations d'tat persistantes sont des donnes qui existent aprs la fin d'une session.
En HTML5, les dveloppeurs peuvent utiliser les mthodes JavaScript localStorage et
sessionStorage pour traiter efficacement les donnes d'tat.
AppCache est un type de stockage Web qui permet l'utilisateur de charger des donnes qui sont
normalement stockes sur un serveur, mme lorsque l'utilisateur est en mode hors connexion.
Sur un priphrique cran tactile, un balayage du doigt s'appelle un mouvement et la
rponse de l'application ce mouvement s'appelle un vnement.
Le dveloppement d'applications interactions tactiles ncessite une connaissance approfondie
de l'interaction des doigts avec l'cran et de la prise en compte des diffrentes tailles des doigts.
Vous pouvez utiliser JavaScript pour crer des applications interactions tactiles,
principalement en ayant recours aux vnements touchstart, touchend et touchmove.
Un avantage pour les dveloppeurs chevronns qui veulent crer des applications
Windows Store est que leurs connaissances de HTML5 et le code existant se prtent bien
audveloppement d'applications Windows Store.
Toutes les applications doivent tre soigneusement testes et dbogues pour s'assurer
qu'elles s'excutent de faon fiable et avec le moins d'erreurs possible avant leur distribution
et leur dploiement.
Une fois que votre application a t teste, dbogue et le code valid ou certifi, vous devez
effectuer quelques tapes de plus pour prparer son chargement sur une place de march
telle que le Windows Store. Vous pouvez utiliser VisualStudio11 ou VisualStudio11Express
pour raliser le projet.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
balisage
1. HTML est un langage de __________,
pas un langage de programmation, ce qui signifie que HTML utilise des balises telles que <body> and <h1> pour dcrire les parties
d'une page Web.
2. Les ___
dfinissent
styles pour HTML dans un fichier spar, de sorte que vous
feuilles
de stylesles
CSS
pouvez facilement modifier les polices, les tailles de polices et d'autres attributs.
windows
3. Windows8 utilise l'interface utilisateur de __________.
WinRT
4. __________
est la base du systme d'exploitation Windows8 et se compose
decouches qui fournissent les fonctionnalits aux applications Windows Store
etWindowsShell.
mise en packagedsigne
des applications
5. La _____________
le processus d'assemblage d'une application et de ses diffrents
fichiers dans un conteneur d'application, ce qui en facilite sa distribution et son dploiement.
Le package d'application est le rsultat de ce processus.
6. L'tat ____________
d'application est cr lorsque le navigateur Web envoie la premire demande
d'une page Web au serveur Web, et se termine lorsque l'utilisateur referme le navigateur.
sessionStoragepermet de conserver les donnes uniquement pendant une
7. La mthode ___________
session (jusqu' ce que la fentre du navigateur soit ferme). On parle galement de
stockage par onglet.
8. Un balayage du doigt s'appelle un ________,
mouvementce qui peut impliquer un seul doigt
(un toucher) ou un doigt et le pouce (deux touchers).

Gestion du cycle de vie dune application|19

validateur recherche les lments susceptibles d'entraner une interprtation


9. Un ________
errone du code, comme des balises manquantes ou non fermes, une dclaration
DOCTYPE incorrecte, une barre oblique de fin, du code obsolte, etc.

windows
Store
10. Le ___
est un
march mondial en ligne pour les applications Windows Store.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Quels sont les trois composants principaux de la familleHTML5?
a. XML
b. HTML
c. CSS
d. JavaScript
2. JavaScript est un type de:
a. Compilateur de programme
b. Langage de balisage
c. Langage de script
d. Validateur
3. Toutes les affirmations suivantes sur HTML5 sont vraies, sauf:
a. Il ncessite Windows8.
b. Il peut tre utilis pour crer des applications Web et des applications de bureau
ou de priphriques.
c. Il est indpendant de la plateforme.
d. Il est conu partir d'une norme ouverte.
4. Quel environnement de systme d'exploitation permet un dveloppeur d'accder
un appareil-photo ou une webcam?
a. localStorage
b. WinRT
c. L'tat de la session
d. Microsoft design
5. Vous dveloppez une application Windows Store et vous souhaitez qu'elle accde
une autre application. O dclarez-vous l'interaction?
a. Manifeste de l'application
b. CSS
c. Au dbut du fichier HTML
d. Nulle part. Il n'est pas utile de dclarer l'interaction.
6. Parmi les composants suivants, lequel permet de crer un package d'application?
a. JavaScript
b. CSS
c. DOM
d. Un outil de dveloppement d'applications (KIT)
7. Quelle API permet aux programmes et aux scripts de mettre jour dynamiquement
lecontenu, la structure et les styles?
a. JavaScript
b. WinRT
c. DOM
d. RTE
8. AppCache, localStorage et sessionStorage dsignent:
a. Stockage Web
b. Commandes HTML
c. Normes
d. Espaces de noms

20 | Leon 1

9. Parmi les fonctions suivantes, lesquelles ne fonctionnent gnralement pas


bien avec les environnements tactiles multipoint et doivent tre dsactives?
(Choisissez2rponses).
a. Suivi
b. Zoom
c. Dfilement
d. Mouvement
10. Quel outil est un type de validateur qui teste votre application sur votre ordinateur
avant de l'empaqueter et de la publier dans le Windows Store?
a. WinRT
b. Windows8
c. Service de validation du balisage du W3C (World Wide Web Consortium)
d. Kit de certification des applications Windows

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettreF si elle est fausse.
VF1.
Une interface de programmation dapplication (API) est une liste d'instructions
qui permet un programme de communiquer avec un autre programme.
Il est recommand de publier votre application sans la valider pour la tester
VF2.
directement en production.
Un mulateur passe en revue les documents HTML et CSS la recherche
VF3.
d'erreurs.
Il est conseill de crer des applications tactiles pour des doigts plus larges,
VF4.
plutt que fins.
Une application indpendante de la plateforme peut s'excuter sur diffrents
VF5.
systmes d'exploitation de priphriques mobiles et de bureau.
valuation

des comptences
Scnario1-1: Prsentation des nouvelles fonctionnalits dans la famille HTML5
Votre responsable Marylyne souhaite en savoir plus sur la famille HTML5 pour dcider
si la socit doit commencer l'utiliser pour de nouveaux projets. Elle vous demande de
lui dresser une liste decinq ousix nouvelles fonctionnalits. Quelles fonctions choisissezvous d'inclure dans la liste?

Scnario1-2: Cration d'une application


Marylyne s'adresse de nouveau vous, et cette fois elle veut savoir ce qu'implique
lacration d'une application HTML5. Elle vous demande de lui soumettre un plan.
Quelles tapes choisissez-vous d'inclure dans le plan?
valuation

de la matrise des concepts


Scnario1-3: Partage de conseils sur le dveloppement d'applications
interactions tactiles
Antoine travaille sur une application interactions tactiles et vous demande des conseils
de dveloppement. Il souhaite connatre les composants tester imprativement sur sa
tablette. Que pouvez-vous lui dire?

Scnario1-4: Publication d'une application dans le Windows Store


Sammy vient de crer sa premire application et souhaite la publier dans le Windows
Store. Quelles sont les trois tapes prliminaires qu'il doit suivre?

Cration de l'interface
utilisateur avec HTML5:
Texte, graphiques et
multimdia

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA


Numro de l'objectif
de l'examen MTA

Slection et configuration de
balises HTML5 pour
l'affichage du texte

Choisir et configurer les balises


HTML5 pour l'affichage du texte

2.1

Slection et configuration de
balises HTML5 pour l'affichage
des graphiques

Choisir et configurer les balises


HTML5 pour afficher
les graphiques

2.2

Slection et configuration de
balises HTML5 pour la lecture
de contenu multimdia

Choisir et configurer les balises


2.3
HTML5 pour lire les
fichiers multimdias

Comprendre les principes


fondamentaux du langage HTML

TERMES CLS
attribut

lment figure

attribut global

lment vido

balise vide

entit

balises

image raster

codec

image vectorielle

compression

imbrication

doctype

obsolescence

lment

rendu

lment audio

Scalable Vector Graphics (SVG)

lment canvas

valide

lment figcaption

video compression

21

22 | Leon 2

Les dveloppeurs trs occups de Malted Milk Media vous ont demand d'effectuer
des recherches sur les nouvelles balises disponibles dans HTML5. Ils sont
particulirement intresss par les balises se rapportant aux graphiques et au contenu
multimdia. Votre tche consiste obtenir le maximum d'informations sur les
nouvelles balises HTML5 et prparer de courtes prsentations de chacune des
balises, en fournissant des exemples.
Comprendre

L'ESSENTIEL

les principes fondamentaux du langage HTML


Le langage HTML (Hypertext Markup Language) utilise des balises pour dcrire le
contenu qui s'affiche sur une page Web. Un lment est compos la fois de balises
et du contenu figurant entre celles-ci. L'utilisation de caractres spciaux dans une
page Web ncessite l'encodage de ces derniers. Enfin, chaque page Web requiert la
dclaration doctype en haut de la page.
Le langage HTML (Hypertext Markup Language) est appel langage de balisage, car il permet
de dcrire (baliser) les divers lments du contenu affich sur une page Web. Une page Web
comportant un balisage inclut des balises, qui sont des mots cls permettant de structurer une
page HTML. (Vous en apprendrez davantage sur les balises un peu plus loin.) Pour utiliser le
langage HTML de manire optimale, il convient de savoir comment et quand utiliser les
balises appropries. La combinaison de contenu, de balises et parfois de graphiques, de
contenu multimdia ou d'autres contenus constitue la cl de vote d'une page Web.
Un document HTML est facilement identifiable, car il est dot d'une extension de fichier
.htm ou .html. Lorsqu'un navigateur Web ou un priphrique mobile tel qu'un smartphone
ouvre un fichier HTML, il rend (interprte et reproduit) le contenu de la page.

Balisage et structure de page de base


Chaque page HTML comporte des balises. Une balise est un mot cl entour de
crochets. La plupart des balises sont utilises par paire; une balise est appele balise
d'ouverture ou de dbut, tandis que l'autre est la balise de fermeture ou de fin. Une
paire de balises respecte la casse; une balise de fin doit utiliser la mme casse que
la balise de dbut. La balise de fin est identique la balise de dbut, hormis le fait
que la balise de fin comporte une barre oblique avant le mot cl.
Les balises entourent le contenu et lui affectent une dfinition. Par exemple, les balises
suivantes crent un titre de premier niveau:
<h1>Soins des animaux domestiques 101</h1>

Le langage HTML utilise galement quelques balises uniques, comme <br /> pour un saut
de ligne et <hr /> pour une ligne horizontale. Dans HTML 4, ces balises sont appeles
balises vides parce qu'elles ne requirent pas de balise de fin. HTML5 est moins restrictif
que HTML4. Ainsi, il n'est pas ncessaire d'inclure des balises de fin pour tous les
lments (mme si certains lments exigent toujours des balises de dbut et de fin),
etvous pouvez entrer les balises en majuscules ou en minuscules. Toutefois, le balisage
utilis dans ce guide comporte exclusivement des balises de dbut et de fin, entirement
en minuscules, par souci de cohrence.
De nombreuses balises sont disponibles pour les pages HTML. Quelques-unes des balises
les plus couramment utilises sont rpertories dans le Tableau2-1. Les quatre premires,
<html>, <head>, <title> et <body>, sont requises sur chaque page Web.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 23


Tableau2-1

Balise

Balises HTML courantes

Description

<html> Identifie la page en tant que document HTML. La balise <html>


englobe tout ce qui se trouve sur la page, l'exception de la
dclaration doctype au sommet de la page.
<head> Contient le balisage et le code utilis par le navigateur, par
exemple les scripts ajoutant de l'interactivit et les mots cls
permettant aux moteurs de recherche de localiser la page.
Le contenu de la balise <head> peut galement inclure les styles
de mise en forme pour la page.
balises (lments) obligatoires

<title> Affiche le titre de la page Web qui apparat en haut du navigateur


Web, gnralement sur l'onglet de la page dans un navigateur
onglets.
<body> Entoure le contenu visible sur la page Web affiche dans un
navigateur Web.
<a href=URL> Balise gnralement utilise pour ancrer une URL du texte ou
une image; elle peut galement crer un ancrage nomm dans
un document pour permettre la liaison aux sections du document.
<b> Applique des caractres gras au texte.
<hx> 
Cre un en-tte pouvant aller du premier niveau (h1) au sixime

niveau (h6).

<img> 
Insre une image depuis un fichier ou un autre site Web.
<p> 
Dfinit le texte en tant que paragraphe.

Une paire de balises ou une balise vide est galement appele lment. Un lment peut
dcrire le contenu, insrer des graphiques et crer des liens hypertexte.

UTILISATION D'ATTRIBUTS
Toutes les balises n'incluent pas une description des donnes, ou cette description
n'est pas toujours suffisamment dtaille pour le rendu. Dans ce cas, certains lments
doivent comporter des attributs qui sont des modificateurs d'lments HTML permettant
defournir des informations supplmentaires.
Les attributs sont faciles utiliser et sont simplement des extensions d'lments.
Vousajoutez des attributs aux lments l'aide de la syntaxe de base suivante:
<tag attribute="value">

Notez que l'attribut et sa valeur se trouvent tous les deux l'intrieur d'une balise.
Vousdevez inclure un attribut dans une balise afin que le navigateur Web soit en mesure
de le grer. Voici un exemple d'attribut utilis lors de la cration d'un lien hypertexte :
<a href="http://www.example.com">Ceci est un lien.</a>

Le navigateur Web utilise la combinaison de l'lment d'ancrage et de l'attribut href pour


afficher un lien hypertexte. La figure2-1 illustre comment un navigateur Web interprte
cebalisage.

REMARQUE

Un bon diteur de page Web ou outil de dveloppement d'applications doit vous


indiquer les attributs pouvant tre utiliss avec un lment, ce qui vous permet de
gagner du temps. Il doit galement faciliter le dbogage du balisage en cas d'utilisation
incorrecte d'un attribut.

24 | Leon 2
Figure2-1
Un lien hypertexte est
obtenu lorsque l'lment
d'ancrage est dot de
l'attribut href

La cration de liens hypertexte et l'insertion de graphiques simples sont les deux cas
d'utilisation d'attributs les plus courants. Vous apprendrez comment manipuler les
graphiques plus loin dans cette leon. HTML5 inclut plusieurs attributs globaux qui
peuvent tre utiliss avec n'importe quel lment HTML5. Parmi les attributs globaux
disponibles figurent par exemple id, lang et class.

LMENTS IMBRIQUS
L'affichage de votre code HTML dans un navigateur Web varie en fonction de la faon
dont vous combinez les lments, leurs attributs (le cas chant) et le contenu de la page.
Lorsque deux ou plusieurs lments s'appliquent au mme bloc de texte, vous devez
imbriquer correctement les paires de balises afin qu'elles fonctionnent comme escompt.
L'imbrication est l'insertion d'un lment dans un autre. Voici un exemple d'imbrication
qui fonctionne correctement:
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau frache</b></i> par
temps chaud.</p>

Dans cet exemple, nous voulons que les mots eau frache soient mis en vidence dans le
texte. Pour ce faire, ils sont mis en italique et en gras l'aide des balises <i> et <b>. Si vous
placez la balise de fin </b> aprs la balise de fin </p> (comme illustr ci-dessous), les mots
eau frache par temps chaud s'affichent en gras, mais seuls les mots eau frache sont
en italique. Cet affichage semble incorrect, comme le montre la figure2-2.
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau frache</i> par temps
chaud.</p></b>
Figure2-2
Balises incorrectement
imbriques

La rgle applicable l'imbrication requiert que les balises imbriques soient fermes avant
leurs balises parentes. En reprenant l'exemple correct, vous remarquez que l'lment
paragraphe s'ouvre en premier, suivi par l'lment italique, puis l'lment police. Ensuite,
l'lment gras (bold) se ferme, suivi par l'lment italique et enfin l'lment paragraphe.
Les lments italique et gras sont entirement imbriqus dans l'lment paragraphe.

COMPRENDRE LES ENTITS


Une entit est un caractre spcial, comme le symbole dollar, le symbole de marque dpose
(R majuscule dans un cercle) et les caractres accentus. Le processus d'incorporation d'entits
dans une page Web est appel encodage de caractres. Les diteurs et les navigateurs Web actuels

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 25


grent plutt bien les caractres spciaux de votre clavier, tels que ceux qui se trouvent au-dessus
des touches numriques. Dans la majorit des cas, ces caractres sont correctement rendus.
Toutefois, dans certains navigateurs, le caractre attendu ne s'affiche pas et est remplac par
un caractre ou un symbole incomprhensible. Ces anomalies sont faciles rsoudre. Chaque
caractre spcial pouvant tre reproduit dans une page Web est dot d'un nom d'entit et d'un code
numrique. Vous pouvez utiliser l'un ou l'autre de ces lments dans une page Web. Toutefois, il est
gnralement plus sr de reprsenter les symboles tels que la marque commerciale l'aide de l'entit
numrique correspondante pour garantir un rendu adquat dans un grand nombre de navigateurs.
Une entit commence par une esperluette (&) et se termine par un point-virgule (;). Par
exemple, l'entit &reg; reprsente le symbole de marque dpose et son code numrique est
&#174;. Lorsqu'un navigateur rencontre une esperluette, il essaie de faire correspondre les
caractres qui suivent une entit. S'il trouve une correspondance, il affiche le caractre spcial
la place de l'entit. Le Tableau2-2 rpertorie quelques-unes des entits les plus utilises.
Tableau2-2
Exemples d'entits HTML5

Symbole

Description

Nom de l'entit

Copyright &copy;

Degr &deg; &#176;

Dollar &dollar; &#36;

Pourcentage &percnt;

&#37;

Marque dpose

&#174;

&reg;

Code
&#169;

Il est galement important de savoir que, dans l'encodage de caractres HTML5, il est
recommand d'utiliser l'encodage UTF-8 chaque fois que cela est possible, car la plupart
des navigateurs utilisent ce type d'encodage. Cela signifie que vous devez ajouter la
dclaration suivante l'lment head:
<meta charset="UTF-8">

La spcification HTML5 requiert que la totalit de l'lment meta se trouve dans les
premiers 1024 octets du document; vous devez donc l'inclure tout en haut de la page,
dans l'lment head.

PLUS DINFORMATIONS
Pour obtenir la liste des entits prises en charge par HTML5, accdez http://dev.w3.org/html5/htmlauthor/charref.

COMPRENDRE LE DOCTYPE
Le doctype est une dclaration place au tout dbut de la grande majorit des documents
HTML. Lorsqu'un navigateur Web lit une dclaration doctype, il suppose que tout le
contenu de la page Web utilise le langage ou les rgles spcifis dans la dclaration.
Dans HTML 4, toutes les dclarations <!DOCTYPE> exigent une rfrence une dfinition
dutype de document (DTD). La DTD est simplement un ensemble de rgles permettant
un navigateur Web de convertir les balises et le contenu afin d'obtenir les pages que vous
consultez sur le Web. Une page Web HTML4 peut utiliser diffrentes DTD. En raison de
la faon dont le langage HTML5 a t conu, il ne ncessite pas de rfrence une DTD.
Dans HTML4, la dclaration doctype spcifie le langage et la DTD de la page HTML
et semble assez complexe. Voici un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/DTD/
xhtml11.dtd">

26 | Leon 2

l'inverse, le nouveau doctype HTML5 est trs simple:


<!doctype html>

Le doctype HTML5 ne respecte pas la casse et le mot cl doctype peut donc tre
en majuscules ou en minuscules. Ce doctype simplifi est en partie la raison pour laquelle
les pages HTML5 s'affichent facilement dans un navigateur Web, sur un ordinateur ou un
priphrique mobile. HTML5 est conu pour tre compatible avec la grande majorit
des nouveaux et anciens navigateurs Web, ainsi qu'avec l'environnement des
priphriques mobiles.

EXPLORATION DU BALISAGE D'UNE PAGE WEB SIMPLE


titre d'exemple, le balisage et le contenu d'une page Web HTML5 simple peuvent se
prsenter comme suit:
<!doctype html>
<html>
<head>
<title>78704 Tout pour vos animaux de compagnie</title>
</head>
<body>
<p>Votre chien est un ami pour la vie. Pourquoi
ne pas lui offrir les meilleurs soins?</p>
</body>
</html>

Les lignes vierges entre les diffrentes parties de la page, par exemple entre la dclaration doctype
et la balise <html>, ne s'affichent pas dans une page Web. Il en est de mme pour les retraits,
comme ceux des paragraphes. (Notez que les lments paragraphe sont lgrement dcals par
rapport aux balises <body>. Les lignes vierges et les retraits aident simplement rendre le balisage
plus lisible dans un outil d'dition.

La figure2-3 illustre le rendu de la page Web pour le balisage HTML prcdent.


Figure2-3
Page Web simple rendue par
un navigateur

Comme indiqu dans la leon1, vous pouvez utiliser le service de validation du W3C (World
Wide Web Consortium) l'adresse http://validator.w3.org pour vrifier et valider le code
HTML. Si une page Web respecte les spcifications la lettre, elle est considre valide.
CRER UNE PAGE WEB SIMPLE
PRPAREZ-VOUS. Pour crer une page Web simple et voir les effets de balises,
d'imbrication ou d'entits manquantes, procdez comme suit:
1. Sur votre ordinateur ou un lecteur flash, crez un sous-dossier dans le dossier Mes
documents. Ce dossier contiendra les fichiers sur lesquels vous allez travailler tout au
long des leons de ce guide. Il s'agit de votre dossier de travail. Vous pouvez le
nommer HTML5 ou lui donner un nom similaire.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia|27


2. Ouvrez un diteur de page Web, un outil de dveloppement d'applications ou mme


un simple diteur de texte tel que le Bloc-notes, puis entrez la commande suivante:
<!doctype html>
<html>
<head>
<title>78704 Tout pour vos animaux de compagnie</title>
</head>
<body>
<h1>Soins et alimentation</h1>
<p>Votre chien est un ami pour la vie. Pourquoi ne pas lui offrir les
meilleurs soins possibles?</p>
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau frache</b></i>
par temps chaud. Lorsque vous faites de longues promenades avec votre chien,
pensez prendre un bol pliable et une bouteille d'eau.
Vous trouverez diffrents modles de bol dans de nombreux magasins animaliers
moins de 10 dollar.</p>
</body>
</html>

REMARQUE

Vous disposez d'un vaste choix en matire d'diteurs et d'outils de dveloppement.


Le Bloc-notes est l'diteur de texte intgr Windows, mais vous pouvez tlcharger
gratuitement Notepad++ depuis le Web. Notepad+++ comporte des fonctionnalits
facilitant la cration et la modification de documents HTML. TextWrangler, conu pour
les systmes Macintosh, inclut un ensemble de fonctionnalits similaires. Des diteurs
HTML gratuits tels que HTML-Kit et KompoZer sont galement disponibles. Parmi les
outils de dveloppement figurent notamment MicrosoftVisualStudio, VisualStudio for
Web, MicrosoftWebMatrix et MicrosoftExpressionWeb. Toutes ces applications vous
permettent de crer et modifier des fichiers HTML.

3. Enregistrez le fichier sous L2-animal-orig.html dans le dossier de travail que vous avez
cr dans Mes documents.
4. Accdez votre dossier de travail et ouvrez la page HTML dans un navigateur Web.
Elle doit ressembler la figure2-4.

Figure2-4
Page Web Soins et
alimentation du site 78704
Tout pour vos animaux de
compagnie

REMARQUE

5. Pour voir l'effet d'une balise manquante dans une paire de balises, supprimez la balise
de fin </b> aprs frache . Crez un nouveau fichier pour tester les modifications en
l'enregistrant sous le nom L2-animal-test.html, puis ouvrez-le dans le navigateur. Tout
le contenu, depuis les mots eau frache jusqu' la fin du document, est dsormais
en caractres gras.

Dans InternetExplorer9, vous pouvez appuyer sur F12 pour ouvrir le mode navigateur.
Ce mode permet de modifier les pages sans quitter le navigateur. Il est galement
possible de cliquer sur Mode document dans la barre de menus, puis de slectionner
une ancienne version du navigateur pour vrifier comment la page s'affiche.

28|Leon 2

6. Pour voir l'effet d'une imbrication incorrecte, dplacez la balise de fin </i> aprs la
dernire balise </p>. Renregistrez le fichier L2-animal-test.html et affichez-le dans un
navigateur. Tout le contenu, depuis les mots eau frache jusqu' la fin du document,
est dsormais en caractres gras et en italique, comme illustr la figure2-5.

7. Fermez le fichier L2-animal-test.html dans l'diteur et ouvrez L2-animal-orig.html.


8. Ajoutez une mention de copyright au bas de la page en appuyant plusieurs fois sur la
touche Entre aprs la balise de fermeture </p> et en entrant <p>&copy; 2012</p>.
Remplacez 2012 par l'anne en cours, le cas chant. Appuyez sur Entre pour
ajouter une ligne vierge. Assurez-vous que la mention de copyright se trouve
au-dessus des balises de fin </body> et </html>.
9. Crez un nouveau fichier en enregistrant le fichier L2-animal-test.html sous L2-animalcopyright.html, puis affichez-le dans le navigateur. Le symbole du copyright (C entour
d'un cercle) est-il visible, comme illustr la figure2-6? Si ce n'est pas le cas,
remplacez &copy; par &#169;, enregistrez le fichier, puis raffichez-le.

Figure2-5
Effets d'une imbrication
errone des balises

Figure2-6
Un symbole de copyright
apparat dans le coin
infrieur gauche

REMARQUE

Lors de l'affichage des pages Web que vous tes en train de modifier, il est prfrable
d'utiliser plusieurs navigateurs Web pour vrifier que votre balisage s'affiche comme
prvu pour le plus grand nombre d'utilisateurs possible. Certains outils d'dition
comportent une liste vous permettant de slectionner un navigateur pour la
prvisualisation des pages Web. Si votre outil n'inclut pas cette option, vous devrez
installer trois ou quatre navigateurs diffrents et ouvrir vos pages Web dans chacun d'eux.
10. Accdez la page Web du service de validation du balisage du W3C l'adresse
http://validator.w3.org/. Tlchargez le fichier L2-animal-copyright.html et cliquez
sur Check afin que le service vrifie le fichier. Corrigez les erreurs signales par le
vrificateur en cas de balises manquantes ou de fautes de frappe, le cas chant.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 29


11. Vous avez probablement reu un message d'erreur se rapportant l'encodage des
caractres. Pour rsoudre ce problme, ouvrez le fichier L2-animal-copyright.html
dans votre outil d'dition, insrez <meta charset="UTF-8"> dans l'lment head, dans
sa propre ligne, juste avant le titre.
<head>
<meta charset="UTF-8">
<title>78704 Tout pour vos animaux de compagnie</title>
</head>

12. Enregistrez le fichier, tlchargez-le une nouvelle fois dans l'outil de validation afin
de le vrifier. Le vrificateur devrait confirmer que votre fichier est valide.
13. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez immdiatement
la section suivante.

PLUS DINFORMATIONS
Si vous trouvez les rubriques de cette section difficiles assimiler, il peut tre utile de raliser
quelques didacticiels tels que ceux disponibles sur le site Web W3Schools.com.

Slection

et configuration de balisesHTML5 pour l'affichage du texte

L'ESSENTIEL

HTML5 utilise la plupart des lments et attributs dj spcifis dans HTML4, avec
quelques nouvelles balises. En outre, l'utilisation par dfaut d'autres balises a t
modifie et certains lments ne sont plus pris en charge. Parmi les nouveaux lments
textuels figurent notamment command, mark, time, meter et progress. Les lments
basefont, center, font et strike sont dsormais obsoltes.
Tous les lments abords dans la premire section de cette leon fonctionnent
correctement dans HTML5, bien qu'ils soient utiliss depuis dj plusieurs annes dans
les versions antrieures du langage HTML. Dans l'ensemble, HTML5 modifie trs peu
la syntaxe HTML. Cela signifie que les dveloppeurs peuvent continuer utiliser la plupart
des lments comme ils le faisaient jusqu'ici. Certains lments conservent la mme balise
mais leur fonctionnalit a t lgrement modifie, comme expliqu un peu plus loin.

REF

Le balisage de mise
en page, de cration
de sections et de
formulaires HTML5 est
couvert dans la leon 3.

HTML5 inclut galement un grand nombre de nouveaux lments qui permettent


d'optimiser les fonctionnalits des pages Web ou de simplifier le balisage. Il s'agit d'lments
lis au contenu multimdia (par exemple, audio et video) et d'autres lments qui rendent la
structure d'une page Web plus intuitive. Les balises lies la structure incluent des lments
pour les sections de page, les en-ttes, les pieds de page, la navigation et mme les barres
latrales. Lors de la cration de formulaires Web, les nouvelles fonctionnalits de formulaire
facilitent considrablement la cration et la validation. Toutefois, cette section porte
essentiellement sur le balisage HTML5 associ au texte.

lments de texte HTML4 avec une nouvelle signification ou fonction


Certains lments textuels HTML4 ont prsent une signification ou une fonction
lgrement diffrente dans HTML5. Parmi ces lments figurent <b>, <i>, <strong>,
<em> et <small>. L'lment <b> doit maintenant tre utilis pour mettre en vidence
le texte, sans indication d'importance, par exemple les mots cls ou les noms de
produits. L'lment <i> dfinit dsormais le contenu dans un ton ou une humeur
diffrente, comme un texte oral. L'lment <strong> souligne l'importance, tandis que
l'lment <em> indique un accent d'insistance. L'lment <small> doit tre utilis pour
le texte en petits caractres, comme la mention de copyright.

30 | Leon 2

Examinons de plus prs certains des lments de texte HTML4 dont la signification ou la
fonction a lgrement chang dans HTML5:
<b>: cet lment d'utilisation courante a toujours reprsent les caractres gras; il
tait souvent utilis pour mettre en vidence le texte ou en souligner l'importance.
LeW3C suggre qu'il soit dsormais utilis pour indiquer un texte stylistiquement
dcal, sans indication d'importance. Utilisez <b> pour les mots cls, les noms de
produits et les lments interactifs (tels que les lments sur lesquels vous cliquez ou
appuyez dans une liste de procdures). Par exemple:
<p>Cliquez sur le bouton <b>Vrifier</b>, puis sur
<b>OK.</b> </p>

<i>: l'lment italique est maintenant utilis pour du texte dans un ton ou une
humeur diffrente. Il peut s'agir d'un texte oral, de penses ou d'un contenu
similaire, sans indication d'importance ni d'insistance. Il peut galement s'agir de
termes techniques et de mots trangers traduits. Par exemple:
<p><i>Il a vraiment bon cur,</i> pensait-elle.

<strong>: l'lment strong indique un contenu d'extrme importance, plus important


que les mots voisins. Par exemple:
<p>Chantal portait la <strong>mme</strong> robe depuis trois jours.</p>

<em>: l'lment em (emphasis) indique un degr d'insistance. Par exemple:


<p>Vous devez <em>toujours</em> valider votre balisage HTML
avant de le partager avec d'autres utilisateurs.</p>

<small>: l'lment small doit tre utilis pour les petits caractres ou des remarques.
Il est utile pour les mentions de copyright ou pour ajouter la source d'une image. Par
exemple:
<p><small>Copyright 2012 XYZ
Corporation</small></p>

La fonction recherche de certains de ces lments dans HTML5 peut prter confusion,
par exemple le cas d'emploi de l'lment italique. La meilleure mthode consiste garantir
la cohrence sur une page ou un site Web, et observer comment les autres dveloppeurs
utilisent les mmes lments.
MODIFIER LES BALISES DE TEXTE D'UNE PAGE WEB
PRPAREZ-VOUS. Pour modifier les balises d'une page Web, procdez comme suit:
1. Dans votre outil d'dition, ouvrez le fichier L2-animal-copyright.html s'il n'est pas dj
ouvert.
2. Dans le paragraphe suivant, remplacez les balises italique et gras par l'lment strong.
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau
frache</b></i> par temps chaud.</p>

Le nouveau balisage produit le rsultat suivant:


<p>Assurez-vous que votre animal dispose de suffisamment d'<strong>eau
frache</strong> par temps chaud.</p>

Vous remarquez que l'effet de l'lment strong est semblable celui de l'lment
gras. Le W3C recommande l'utilisation de <strong> la place de <b>, mme si les deux
balises semblent produire des rsultats quasiment identiques.

3. Ajoutez des balises de dbut et de fin <small> la mention de copyright, de manire


les imbriquer correctement dans les balises du paragraphe.

4. Enregistrez le fichier sous L2-animal-modification.html, puis affichez-le dans un


navigateur Web. Voir la figure2-7.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 31


Figure2-7
Utilisation des balises
<strong> et <small>

5. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez immdiatement


la section suivante.

Nouveaux lments de texte dans HTML5


Parmi les nouveaux lments HTML5 associs au texte figurent <command>, <mark>
et <time>. L'lment <command> cre un bouton de commande. Lorsque l'utilisateur
clique sur un bouton de commande, une commande s'excute. L'lment <mark> met
en vidence du texte sur une page, l'instar de la fonctionnalit de mise en
surbrillance de Microsoft Word. L'lment <time> affiche une heure et une date
lisibles par une machine, par exemple 10: 10 AM., CST, 19 juillet 2012. Il est
particulirement utile pour les blogs et les calendriers et il peut galement aider les
moteurs de recherche gnrer de meilleurs rsultats lorsque l'heure et la date font
partie des critres de recherche.
PRT POUR LA
CERTIFICATION
Quels sont les nouveaux
lments textuels HTML
de HTML5?
2.1

Examinons quelques-uns des nouveaux lments de texte HTML5, en nous aidant de


quelques exemples:
<command>: l'lment command est utilis pour dfinir un bouton de commande sur
lequel les utilisateurs cliquent pour excuter une commande. Cet lment est dot de
nombreux attributs tels que type, label, title, icon, disabled, checked et radiogroup.
Par exemple:
<menu label="Genre de musique">
<command type="radio" radiogroup="musicgenre" label="Art">
<command type="radio" radiogroup="musicgenre" label="Populaire">
<command type="radio" radiogroup="musicgenre" label="Traditionnel">
</menu>

<mark>: l'lment mark est trs pratique pour mettre en vidence du texte sur une
page. Par exemple, vous pouvez l'utiliser sur une page de rsultats de recherche ou
pour mettre en vidence un bloc de texte sur lequel vous souhaitez attirer l'attention
du lecteur. Par exemple:
<p>Depuis que j'ai commenc faire du jogging l'automne dernier, j'ai <mark
style="background-color:yellow;">perdu 15kilos</mark>.</p>

<time>: l'lment time indique du contenu qui est une heure ou une date. Pour le
rendre lisible par une machine, il convient de lui ajouter l'attribut datetime. L'lment
time dfinit l'heure et la date l'aide du format 24 heures et du calendrier grgorien,
respectivement. L'utilisation de dates et d'heures lisibles par une machine sur votre

32 | Leon 2

page Web permet d'optimiser les rsultats gnrs par les moteurs de recherche.
Parexemple:
<time datetime="2013"> correspond l'anne 2013
<time datetime="2013-04"> correspond avril2013
<time datetime="04-15"> correspond au 15avril (de n'importe quelle anne)
Parmi les nouveaux lments, il galement possible de citer meter et progress. L'lment
meter indique le contenu sous forme de fraction d'une plage connue, comme l'utilisation
du disque. L'lment progress indique l'tat d'avancement d'une tche par rapport
l'achvement de celle-ci.
UTILISER L'LMENT MARK
PRPAREZ-VOUS. Pour utiliser l'lment mark pour mettre en vidence du texte,
procdez comme suit:
1. Dans votre outil d'dition, ouvrez le fichier L2-animal-modification.html s'il n'est pas
dj ouvert.
2. Modifiez le paragraphe suivant en insrant l'lment mark autour du texte ami pour
la vie.
<p>Votre chien est un <mark style="background-color:orange;">
ami pour la vie</mark>.

3. Crez un nouveau fichier en l'enregistrant sous le nom L2-animal-mark.html, puis


affichez-le dans un navigateur Web. La figure2-8 affiche le texte en surbrillance.

4. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez immdiatement


la section suivante.

Figure2-8
L'lment mark met en
surbrillance un texte
spcifique

lments de texte inutiliss dans HTML5

Si de nouveaux lments sont disponibles, le W3C a prslectionn d'autres lments


en vue d'une suppression ventuelle, car leur fonctionnalit est dsormais inutile. Le
motif de suppression d'lments de la liste d'lments HTML disponibles est appele
obsolescence. (La mme chose s'applique aux attributs.)
REF

La leon4 explore les


notions essentielles des
feuilles de styleCSS
et la sparation de la
prsentation (style) du
contenu.

L'obsolescence peut rsulter du remplacement de la fonctionnalit d'un ancien lment


parun nouvel lment, ou l'utilisation d'une nouvelle mthode de mise en forme en
remplacement d'un lment plus ancien. La mise en forme l'aide de feuilles de style en
cascade (CSS) correspond ce second cas de figure. L'utilisation de CSS pour modifier
l'apparence du texte, des images et de tout autre contenu Web permet de sparer le style
du contenu. Depuis dj un certain temps, le W3C encourage les dveloppeurs prfrer
CSS la mise en forme locale pour mieux contrler la mise en forme des pages Web et il
s'agit clairement de la mthode utiliser dans HTML5.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 33

Ceci est logique, car il est trs facile de modifier les styles de CSS s'appliquant
l'ensemble d'une page Web ou mme un site Web. Lors de l'insertion de styles
individuels, mme dans une seule page Web, les modifications s'avrent fastidieuses
lorsqu'un changement est ncessaire.
Les lments HTML suivants sont considrs comme obsoltes et ne sont pas pris
en charge dans les pages HTML5:
<acronym>: dfinit des acronymes qui, dans HTML4, peuvent tre cits comme s'il
s'agissait d'un mot, par exemple GUI pour l'interface utilisateur graphique. Utilisez la
balise <abbr> la place.
<applet>: dfinit une applet incorpore. Utilisez la balise <object> la place.
<basefont>: dfinit une couleur, une taille ou une famille de police par dfaut pour
l'ensemble du texte d'un document. Utilisez CSS pour l'application de toutes les polices.
<big>: agrandit le texte par rapport la taille de police actuelle. Utilisez CSS la place.
<center>: centre le texte et le contenu. Utilisez CSS la place.
<dir>: dfinit une liste de rpertoires. Utilisez la balise <ul> la place.
<font>: spcifie le type, la taille et la couleur de police du texte. Utilisez CSS la place.
<frame>: dfinit un cadre spcifique (une fentre) dans un jeu de cadres (voir lment suivant).
<frameset>: dfinit un jeu de cadres pour le positionnement de plusieurs cadres (fentre).
<noframes> : affiche le texte pour les navigateurs ne prenant pas en charge les cadres.
<strike>: dfinit le texte barr. Utilisez la balise <del> la place pour les petits blocs de
texte, ou utilisez CSS pour des blocs de texte plus importants.
<tt>: dfinit le texte tltype ou espacement fixe. Utilisez la balise <code> ou CSS la place.
Mme si un lment n'est pas pris en charge, cela ne signifie pas qu'il ne fonctionnera pas
dans certains navigateurs. Beaucoup d'utilisateurs disposent encore d'anciennes versions
de navigateurs et de nombreux lments obsoltes s'affichent correctement dans ces
navigateurs. Toutefois, lors de la cration de pages Web, il est recommand de partir
du principe que les visiteurs qui les consultent utilisent un navigateur relativement rcent,
ce qui sous-entend l'utilisation des derniers lments HTML. S'il est tabli que toutes les
personnes consultant votre page Web utilisent l'ancienne version d'un navigateur, il est
possible d'utiliser des lments obsoltes. Malgr cela, si une page Web requiert une mise
en forme importante, il est prfrable d'utiliser CSS pour plus d'efficacit.
Les attributs suivants ne sont pas utiliss dans HTML5, bien qu'ils ne fassent pas
rellement partie d'une spcification HTML:
bgcolor: applique une couleur d'arrire-plan spcifie au contenu dcrit par l'lment
associ, gnralement un tableau ou une page. Utilisez la proprit CSS backgroundcolor la place.
bordercolor: applique une couleur spcifie la cellule d'un tableau. Utilisez la
proprit CSS border-color la place.
bordercolorlight: applique une couleur spcifie aux coins suprieurs et gauche d'une
cellule de tableau. Utilisez la proprit CSS border-color la place.
bordercolordark: applique une couleur spcifie aux coins infrieurs et droit d'une
cellule de tableau. Utilisez la proprit CSS border-color la place.
l'instar des lments obsoltes, vous pouvez utiliser ces attributs si vous savez que les
personnes qui consultent votre page Web utilisent d'anciens navigateurs. Sachez que vous
obtiendrez des erreurs lorsque vous tentez de valider votre page Web; vous pouvez les ignorer
si vous tes certain que les navigateurs de vos visiteurs prennent ces attributs en charge.

PLUS DINFORMATIONS
Pour connatre les nouveauts de HTML5, reportez-vous la page Web Learn HTML5 in 5 Minutes!
(Apprenez HTML5 en 5 minutes) l'adresse http://msdn.microsoft.com/en-us/hh549253 et la page
Web HTML elements (lments HTML) de W3C l'adresse http://dev.w3.org/html5/markup/
elements.html#elements.

34 | Leon 2

AFFICHER LES EFFETS DES LMENTS OBSOLTES


PRPAREZ-VOUS. Pour afficher les effets des lments obsoltes dans une page Web
HTML5, procdez comme suit:
1. Dans votre outil d'dition, ouvrez le fichier L2-animal-mark.html s'il n'est pas dj ouvert.
2. Modifiez le titre h1 de manire incorporer l'lment center, comme illustr:
<h1><center>Soins et alimentation</center></h1>

3. Crez un nouveau fichier en l'enregistrant sous le nom L2-animal-temp.html, puis affichezle dans un navigateur Web. L'lment center a t-il centr le titre dans votre navigateur?
4. Ajoutez l'lment big au contenu suivant, comme illustr:
<p>Votre chien est un <mark style="background-color:orange;">
<big>ami pour la vie</big></mark>.

5. Enregistrez le fichier et affichez-le dans un navigateur Web. L'effet de l'lment big


est-il visible? Pour consulter un exemple, reportez-vous la figure2-9.

6. Accdez la page Web du service de validation du balisage du W3C l'adresse http://


validator.w3.org/. Tlchargez le fichier L2-animal-temp.html et cliquez sur Check afin
que le service vrifie le fichier.
7. Notez que le service de validation affiche les erreurs se rapportant l'utilisation
d'lments obsoltes. Quelles conclusions pouvez-vous tirer sur l'utilisation d'lments
obsoltes dans HTML5? (Les lments obsoltes ne sont pas valids mais un grand
nombre d'entre eux s'affichent toujours correctement dans un navigateur Web.)

Figure2-9
Effets des lments center
et big

Slection

8. Fermez L2-animal-temp.html et laissez l'outil d'dition et le navigateur Web ouverts si


vous passez immdiatement la section suivante.

et configuration de balises HTML5 pour l'affichage des graphiques

L'ESSENTIEL

Utilisez l'lment img pour afficher les images lies dans une page Web. Les images
peuvent se trouver dans les fichiers HTML des pages Web, gnralement dans un
sous-dossier d'images, ou sur un autre serveur ou site Web. Les lments figure et
figure caption sont nouveaux dans HTML5. Ils vous donnent plus de contrle sur le
type d'images affiches et permettent d'inclure des lgendes, respectivement. L'lment
canvas est utilis pour des oprations dynamiques de dessin, de rendu et de manipulation
d'images et de graphiques dans HTML5. L'lment SVG (Scalable Vector Graphics) vous
permet de crer des objets volutifs et redimensionnables qui s'adaptent parfaitement
l'cran sur lequel ils s'affichent, qu'il s'agisse d'un moniteur ou d'un smartphone.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia|35

PRT POUR LA
CERTIFICATION
Quel balisage
utilisez-vous pour
afficher une image
externe sur une page
Web?
2.2

Il est possible d'afficher diffrents types d'images sur une page Web et la majorit
appartiennent deux catgories principales: trame (ou bitmap) et vectorielle. Une image
trame est compose de pixels, tandis qu'une image vectorielle est forme de lignes
et de courbes bases sur des expressions mathmatiques. Une photographie est une image
trame, gnralement au format JPG. D'autres formats de fichiers trams fonctionnent
bien sur les pages Web, notamment PNG, GIF et BMP. Une image vectorielle est une
illustration, telle un dessin au trait. Souvent, les dveloppeurs convertissent des fichiers
vectoriels provenant de programmes tels qu'Adobe Illustrator ou CorelDRAW, non pris
en charge par les navigateurs Web, au format PNG ou GIF pour un affichage Web. Il
existe une diffrence majeure entre les deux types de fichiers, savoir les images trames
perdent en qualit (elles se pixellisent) mesure que vous les agrandissez, tandis que
la qualit des images vectorielles reste constante, mme lorsqu'elles sont agrandies.
La principale mthode pour ajouter des images un document HTML est l'utilisation de
l'lment img. l'instar de la balise d'ancrage, la balise img n'a aucun effet elle seule; elle
doit tre dote d'attributs et de valeurs spcifiant l'image que le navigateur Web doit afficher.
Par exemple, pour insrer une image nomme redball.jpg qui se trouve dans un
sous-dossier appel images, entrez l'lment suivant:
<img src="images/redball.jpg" alt="graphique de boule rouge" />

Si le sous-dossier images est accessible, l'image s'affiche. Les attributs src et alt sont tous
deux ncessaires pour que le code soit pleinement valide. La valeur de l'attribut alt
(abrviation de alternate text ou texte de remplacement) s'affiche lorsque l'utilisateur
positionne le pointeur de la souris sur l'image; dans ce cas prcis, le texte Red ball
graphic s'affiche. Le W3C exige l'attribut alt pour faciliter l'accessibilit des personnes
prsentant un handicap. Les personnes ayant une acuit visuelle rduite utilisent un lecteur
d'cran qui lit voix haute le texte de remplacement de chaque image. Les moteurs de
recherche utilisent galement l'attribut alt pour identifier le type des images et leur
contenu, dans la mesure o ils ne voient pas proprement parler les pixels des images.
En guise d'autre exemple, pour insrer une image nomme logobleu.png, accessible
depuis un autre site Web, entrez l'lment suivant:
<img src="http://www.exemple.com/mrkt/images/logobleu.png"
alt="Logo bleu Socit XYZ" />

L'lment img utilise plusieurs attributs, dcrits dans le Tableau2-3.


Tableau2-3
Attributs de l'lment img

Attribut

Valeur

Description

src

URL Spcifie l'emplacement de l'image, par ex. un chemin


d'accs ou une URL

alt

Text Spcifie le texte de remplacement qui s'affiche lorsque


l'utilisateur place le pointeur de la souris ou un autre
dispositif de pointage sur l'image

height

pixels Spcifie la hauteur d'une image

width

pixels Spcifie la largeur d'une image

ismap

ismap Spcifie une image en tant qu'image interactive sur le serveur

usemap

#mapname Spcifie une image en tant qu'image interactive sur le


client (il s'agit d'une image avec des zones dfinies qui
sont des liens interactifs)

Utilisation des lments figure et figcaption


Deux nouveaux lments lis aux graphiques ont t ajouts dans HTML5. Il s'agit
de figure et figcaption. L'lment figure spcifie le type de figure que vous souhaitez
utiliser dans un document HTML, par exemple une illustration ou une photographie.
L'lment figcaption fournit une lgende pour la figure.

36 | Leon 2

L'lment figure spcifie le type de figure ajouter, par exemple une image, un diagramme, une photographie, etc. Cet lment offre un atout majeur: la possibilit d'ajouter
facilement plusieurs images cte cte. Avec HTML4, cela exigeait un balisage assez
important. L'lment figcaption est facultatif. Il ajoute une lgende une image sur une
page Web; cette lgende peut s'afficher avant ou aprs l'image.
Le balisage suivant utilise l'lment figure, spcifie la largeur et la hauteur de l'image et
ajoute une lgende. Le rsultat est illustr la figure2-10:
<figure>
<img src="doghappy.jpg" alt="Chien heureux"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
Figure2-10
Illustration: MightyIsland/iStockphoto

Utilisation des lments


figure et figcaption pour
afficher une image avec une
lgende

Le balisage suivant est destin une figure avec plusieurs images partageant la mme
lgende. Le rsultat obtenu est illustr la figure2-11:
<figure>type="" id="" class="">
<img src="doghappy.jpg" alt="Chien heureux"
width="100" height="125" />
<img src="dogpaws.jpg" alt="Pattes de chien"
width="100" height="125" />
<img src="dogwalk.jpg" alt="Promener son chien"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
Utilisation des lments
figure et figcaption pour
afficher plusieurs images
cte cte avec une lgende
unique

Illustration: MightyIsland/iStockphoto

Figure2-11

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 37

PLUS DINFORMATIONS
Pour en savoir plus sur l'affichage des images sur les pages Web, consultez la page http://bit.ly/
Kgg1ab. Vous trouverez galement d'autres informations sur les images interactives l'adresse
http://bit.ly/hincW5.

AFFICHER UNE IMAGE SUR UNE PAGE WEB


PRPAREZ-VOUS. Pour afficher une image sur une page Web, procdez comme suit:
1. Recherchez un fichier JPG, PNG, GIF ou BMP sur votre ordinateur afin de l'utiliser dans
cet exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec
les animaux de compagnie est tout fait appropri.
2. Dans votre outil d'dition, ouvrez L2-animal-mark.html.
3. Supprimez les balises <mark> du premier paragraphe.
4. Insrez le balisage suivant aprs l'lment h1, en laissant une ligne vierge avant et
aprs celui-ci et en remplaant dogwalk.jpg par votre propre fichier image:

<figure>
<img src="dogwalk.jpg" alt="Promener son chien"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>

5. Crez un nouveau fichier en l'enregistrant sous le nom L2-animal-image.html, puis


affichez-le dans un navigateur Web. La page doit ressembler la figure2-12.

6. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez immdiatement


l'exercice suivant.

Figure2-12

Illustration: MightyIsland/iStockphoto

Page Web avec une image

UTILISER LES LMENTS FIGURE ET FIGCAPTION


PRPAREZ-VOUS. Pour afficher une image sur une page Web, procdez comme suit:
1. Recherchez deux autres fichiers JPG, PNG, GIF ou BMP afin de les utiliser dans cet
exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec les
animaux de compagnie est tout fait appropri. Trois images sont ncessaires pour
excuter les tapes suivantes.
2. Dans votre outil d'dition, ouvrez le fichier L2-animal-image.html s'il n'est pas dj ouvert.

38 | Leon 2

3. Remplacez le balisage de la figure qui suit l'lment h1 par ce qui suit, en remplaant
les noms des fichiers image (doghappy.jpg, dogpaws.jpg et dogwalk.jpg) par les noms
de vos propres fichiers image:
<figure>
<img src="doghappy.jpg" alt="Chien heureux"
width="100" height="125" />
<img src="dogpaws.jpg" alt="Pattes de chien"
width="100" height="125" />
<img src="dogwalk.jpg" alt="Promener son chien"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>

4. Enregistrez le fichier sous L2-animal-imagesmultiples, puis affichez-le dans un navigateur Web. La page doit ressembler la figure2-13.

5. Fermez le fichier L2-animal-imagesmultiples. Laissez l'outil d'dition et le navigateur


Web ouverts si vous passez immdiatement l'exercice suivant.

Figure2-13

Illustration: MightyIsland/iStockphoto

Page Web avec plusieurs


images et une lgende

Cration de graphiques l'aide de canvas


L'lment canvas est nouveau dans HTML5. Il cre un conteneur pour les graphiques
et utilise JavaScript pour dessiner de manire dynamique les graphiques.
Avec l'lment canvas, la page Web devient un bloc de dessin, tandis que les commandes
JavaScript vous permettent de tracer des formes composes de pixels dans la zone de
dessin, avec notamment des couleurs, des dgrads et des motifs de remplissage. Canvas
permet galement de rendre le texte avec diffrents effets et d'animer les objets en les
faisant se dplacer, en modifiant l'chelle, etc.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 39

REMARQUE

Les dveloppeurs utilisent l'lment canvas pour crer des jeux en ligne, des galeries
dephotos dynamiques, des codes de titre et bien plus encore. Les fonctions de l'lment
canvas destines aux graphiques et aux animations visent offrir une qualit similaire
celle des animations Flash.

NOTIONS DE BASE DE L'LMENT CANVAS


Pour utiliser l'lment canvas, vous commencez par dfinir une zone de dessin au format
HTML. La syntaxe de base de l'lment canvas est la suivante:
<canvas id="smlRectangle" height="100"
width="200"></canvas>

PRT POUR LA
CERTIFICATION
Quelle est la syntaxe
de base de l'lment
canvas dans un
document HTML?
2.2

Cet lment cre votre bloc de dessin. L'lment canvas requiert l'attribut id pour rfrencer
la zone de dessin dans JavaScript et l'ajouter au modle DOM (Document Object Model).
Vous devez galement spcifier les dimensions de la zone de dessin (hauteur et largeur)
enpixels. JavaScript fonctionne de concert avec l'interface de programmation d'applications
(API) 2D pour tracer rellement les lments dans la zone de dessin.
UTILISER L'LMENT CANVAS POUR CRER UNE FORME
PRPAREZ-VOUS. Pour crer une forme l'aide de l'lment canvas, procdez comme suit:
1. Dans votre outil d'dition, entrez le balisage suivant:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test canvas</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 ">
</canvas>
</body>
</html>

REMARQUE

Vous pouvez inclure des JavaScripts dans l'lment head de votre document HTML,
oudans un fichier externe.
L'attribut onload lance l'excution de la fonction JavaScript incluse dans le script.
Cescript commence par rechercher l'lment dot de l'id smlRectangle:
var canvas = document.getElementById("smlRectangle");

40 | Leon 2

REF

Vous apprendrez
comment utiliser
JavaScript dans les
leons, 8, 9 et 10.

La mthode context.fillStyle remplit un rectangle de bleu en utilisant les valeurs RVB 0, 0,


255. La mthode context.fillRect cre un rectangle d'une largeur de 200pixels et d'une
hauteur de 100pixels, positionn 10pixels vers le bas et 20 pixels partir de l'angle
suprieur gauche de la zone de dessin et le remplit de la couleur spcifie par fillStyle.
2. Enregistrez le fichier sous L2-canvas.html, puis affichez-le dans un navigateur. La forme
doit ressembler celle de la figure2-14.

Figure2-14
Page Web avec l'apparence
d'une zone de dessin

3. Si aucun rectangle bleu n'est visible, accdez la page Web du service de validation
du W3C l'adresse http://validator.w3.org. Tlchargez le fichier L2-canvas.html et
cliquez sur Check afin que le service vrifie le fichier. Corrigez les erreurs signales par
le vrificateur, si ncessaire. Renregistrez le fichier et affichez-le dans un navigateur.

4. Gardez le fichier, l'outil d'dition et le navigateur Web ouverts si vous passez


immdiatement l'exercice suivant.

CRATION D'UN CONTOUR DE FORME


Pour crer le contour d'un rectangle sans couleur de remplissage, utilisez la mthode
context.strokeRect. Elle utilise les mmes valeurs que context.fillRect. Pour modifier la couleur
du contour (la couleur du trait), utilisez context.strokeStyle Par exemple, pour crer un
contour rectangulaire rouge de 200x100 pixels, utilisez les mthodes suivantes dans
votre JavaScript:
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);

UTILISER CANVAS POUR CRER LE CONTOUR D'UNE FORME


PRPAREZ-VOUS. Pour crer le contour d'une forme l'aide de l'lment canvas,
procdez comme suit:
1. Dans votre outil d'dition, enregistrez L2-canvas.html sous le nom L2-canvas-stroke.html.
2. Remplacez les lignes de code fillStyle et fillRect par le code suivant:
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);

3. Supprimez les attributs width et height de l'lment canvas dans le corps (aprs id
="smlRectangle").
4. Enregistrez le fichier et affichez-le dans un navigateur Web. La forme doit ressembler
celle de la figure2-15.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 41


Figure2-15
Page Web avec le contour
d'une zone de dessin

5. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez immdiatement l'exercice suivant.

SPCIFICATION D'UNE IMAGE OU D'UN TEXTE DE REMPLACEMENT POUR LES


ANCIENS NAVIGATEURS
Certains navigateurs plus anciens ne peuvent pas rendre les dessins ou les animations
crs l'aide de l'lment canvas. Par consquent, vous devez ajouter une image, un
texte ou un autre contenu HTML dans l'lment canvas afin que celui-ci s'affiche si
le navigateur ne peut pas afficher le dessin. Le contenu de secours, appel galement
solution de rechange, ne s'affichera pas si l'lment canvas est pris en charge. L'exemple
suivant affiche une image (smlRectangle.jpg) semblable au rectangle rempli qui serait cr
l'aide de l'lment canvas:
<canvas id="smlRectangle" height="100" width="200">
<img
src="http://www.exemple.com/images/smlRectangle.jpg"
alt="Rectangle bleu" />
</canvas>

Pour afficher du texte plutt qu'une image, vous devez insrer le texte la place de la
balise <img>.
A JOUTER UN TEXTE DE SECOURS VOTRE DOCUMENT HTML
PRPAREZ-VOUS. Pour ajouter un texte de secours votre document HTML, procdez
comme suit:
1. Dans votre outil d'dition, ouvrez L2-canvas.html et enregistrez-le sous L2-canvassecours.html.
2. Remplacez l'lment canvas par la mention suivante:
<canvas id="smlRectangle" height="100" width="200">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>

3. Enregistrez le fichier et affichez-le dans le navigateur Web Internet Explorer9.


Le dessin cr l'aide de l'lment canvas devrait s'afficher.
4. Appuyez sur F12 pour passer en mode navigateur, cliquez sur Mode document dans
la barre de menus, puis slectionnez Normes d'InternetExplorer7.

42 | Leon 2

5. Appuyez de nouveau sur F12. Un message d'erreur s'affiche, indiquant que le navigateur
ne reconnat pas une proprit ou une mthode. Fermez le message d'erreur. La fentre
du navigateur affiche le texte de secours, comme illustr la figure2-16.

6. Gardez le fichier, l'outil d'dition et le navigateur Web ouverts si vous passez


immdiatement l'exercice suivant.

Figure2-16
Le texte s'affiche si le
navigateur ne prend pas en
charge canvas

PLUS DINFORMATIONS
Pour plus d'informations sur l'lment canvas, consultez la page Web Microsoft HTML5 Graphics
(Graphiques HTML5 Microsoft) l'adresse http://msdn.microsoft.com/fr-fr/library/gg589511(v=VS.85).
aspx. Le site Web HTMLCenter l'adresse http://www.htmlcenter.com/blog/rgb-color-chart/
rpertorie les codes de couleur RVB.

Cration de graphiques l'aide de SVG

adapte les graphiques la taille de l'cran

SVG (Scalable Vector Graphics) est un langage permettant de dcrire les graphiques2D
en langage XML (Extensible Markup Language). XML s'apparente au format HTML et
il a jou un rle important dans les pages Web HTML4.01. La technologie SVG n'est
pas nouvelle, mais HTML5 permet dsormais aux objets SVG d'tre incorpors dans les
pages Web sans l'utilisation des balises <object> ou <embed>. (Tous les types de
graphiques SVG sont appels objets et SVG est charg dans le DOM.)
PRT POUR LA
CERTIFICATION
Quels types d'objets
pouvez-vous crer avec
SVG?
2.2

Comme son nom l'indique, SVG (Scalable Vector Graphics) sert essentiellement crer des
formes graphiques vectorielles volutives, mais vous pouvez galement crer des images et
du texte. l'image de l'lment canvas, vous pouvez appliquer des couleurs unies, des
dgrads et des motifs de remplissage aux objets SVG, ou encore copier et cloner des
objets. Vous pouvez galement utiliser SVG lors de l'insertion d'un fichier PNG, JPG ou
GIF. SVG vous permet de fournir des instructions de dessin plutt qu'un fichier image.
L'un des principaux atouts de SVG est sa flexibilit. La taille du graphique vectoriel change
de manire s'adapter l'cran sur lequel il est affich, qu'il s'agisse d'un cran d'ordinateur
de 32pouces ou d'un priphrique mobile comme un smartphone. Seul le code XML dcrivant
le graphique est transmis et par consquent, mme les images de grande taille ne ncessitent
pas beaucoup de bande passante. Pour cette raison, vous pouvez utiliser SVG en arrire-plan
d'une page Web, sans avoir utiliser la proprit repeat. (La plupart des arrires-plans de page
Web unis sont en fait une ligne fine rpte l'aide d'un style CSS.) En outre, SVG peut tre
index par les moteurs de recherche car il est cr l'aide du langage XML.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 43

Vous pouvez inclure des attributs tels que color, rotation, stroke color et size, et ainsi de
suite chaque objet SVG. Le balisage suivant peut tre inclus dans un fichier HTML pour
crer un ballon violet:
<svg id="svgpurpball" height="200"
xmlns="http://www.w3.org/2000/svg">
<circle id="purpball" cx="40" cy="40"
r="40" fill="purple" />
</svg>

Les attributs cs, cy et r permettent de dfinir le cercle en spcifiant les points x et y et


le rayon par rapport au centre. SVG est dot d'une plthore d'attributs qui permettent de
crer diffrents types de formes. Les attributs sont disponibles sur le site Web de W3C
l'adresse http://www.w3.org/TR/SVG/attindex.html.

PLUS DINFORMATIONS
Pour plus d'informations sur SVG, consultez la page Web Microsoft SVG l'adresse http://msdn.
microsoft.com/fr-fr/library/gg589525(v=vs.85).aspx.

CRER UN GRAPHIQUE VECTORIEL SVG


PRPAREZ-VOUS. Pour crer un graphique vectoriel SVG simple, procdez comme suit:
1. Dans votre outil d'dition, entrez le balisage suivant:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>toile SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:aqua;stroke:orange;stroke-width:5;
fill-rule:evenodd;"/>
</svg>
</body>
</html>

L'attribut points dfinit les coordonnes x et y pour chaque coin, ou point du


polygone. L'attribut fill-rule dtermine le style de remplissage de l'intrieur du polygone.
2. Enregistrez le fichier sous L2-SVG.html, puis affichez-le dans un navigateur Web. La page
doit ressembler la figure2-17. Si la page ne s'affiche pas, vrifiez-la l'aide du Service de
validation du W3C l'adresse http://validator.w3.org et corrigez les erreurs, si ncessaire.
Figure2-17
Page Web avec une forme
SVG

44 | Leon 2

3. Modifiez les valeurs de paramtres de quelques points de polygone. Enregistrez le


fichier sous L2-SVG-test.html, puis affichez-le dans un navigateur Web. Par exemple,
en changeant la valeur du premier paramtre de 100 50, vous obtenez le polygone
illustr la figure2-18.

4. Supprimez fill-rule:evenodd;, enregistrez le fichier, puis affichez-le dans un navigateur


Web. Comparez le polygone la figure2-17.

5. Fermez tous les fichiers de donnes ouverts. Laissez l'outil d'dition et le navigateur
Web ouverts si vous passez immdiatement l'exercice suivant.

Figure2-18
La modification d'une seule
valeur de paramtre modifie
la forme de l'objet

Quand utiliser canvas au lieu de SVG


PRT POUR LA
CERTIFICATION
Quand faut-il utiliser
l'lment canvas plutt
que SVG?
2.2

Il n'y a aucune rgle prtablie pour la slection de canvas ou de SVG. Votre choix
dpend principalement de la nature de votre projet et de votre niveau de comptence
dans l'utilisation de l'un ou l'autre de ces lments.
Voici quelques considrations qui vous aideront prendre la bonne dcision:
Si le dessin est relativement petit, utilisez canvas.
Si le dessin contient un nombre important d'objets, utilisez canvas. SVG commence
se dgrader, au fur et mesure que des objets sont ajouts au modle DOM.
En rgle gnrale, utilisez canvas pour les petits crans, tels que ceux des priphriques
mobiles. mesure que la taille de l'cran augmente et que davantage de pixels sont
ncessaires, la zone de dessin se pixellise et il est donc prfrable d'utiliser SVG.
Si vous devez crer des documents vectoriels particulirement dtaills dont la mise
l'chelle est importante, optez pour SVG.
Si vous affichez des donnes en sortie en temps rel, par exemple des cartes, des cartes
superposables, des donnes mtorologiques et ainsi de suite, utilisez l'lment canvas.
Astuce de Microsoft: reprsentez-vous l'lment canvas comme tant similaire
Microsoft Paint. Vous pouvez dessiner des images l'aide de formes et d'autres outils
et le rsultat est bas sur des pixels. Imaginez SVG comme tant semblable une
diapositive PowerPoint Office, avec des objets redimensionnables.

PLUS DINFORMATIONS
Pour plus d'informations sur la faon de choisir la meilleure mthode de dessin, savoir canvas ou
SVG, reportez-vous la page http://msdn.microsoft.com/fr-fr/library/ie/gg193983(v=vs.85).aspx.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 45


Slection

et configuration de balises HTML5 pour la lecture de contenu multimdia

L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Quelles balises HTML5
permettent d'incorporer
du contenu multimdia
dans une page Web?
2.3

HTML5 introduit les lments audio et video qui rendent dsormais superflue
l'utilisation de plug-ins ou de lecteurs multimdias pour couter de la musique ou
regarder des vidos via un navigateur Web.
Les lments audio et video sont deux des principales nouveauts de HTML5. Ils vous
permettent de proposer du contenu multimdia dans un navigateur Web sans avoir besoin
de plug-ins comme le lecteur multimdia Microsoft Windows, Microsoft Silverlight,
Adobe Flash ou Apple QuickTime. Cela signifie que les utilisateurs peuvent simplement
ouvrir un navigateur prenant en charge HTML5 pour couter de la musique ou des livres
audio, profiter d'effets sonores enrichis et regarder des clips vido ou des films.
La spcification HTML5 inclut les balises <video> et <audio> afin d'incorporer le
multimdia. Les sections suivantes dcrivent chacune de ces balises en dtail.

Comprendre et utiliser les balises de contenu vido


Vous utilisez l'lment video avec l'attribut src pour dsigner un fichier vido devant
tre lu dans un document HTML. Par ailleurs, l'ajout des attributs height et width vous
permettent de contrler la taille de la fentre dans laquelle s'affiche la vido.
PRT POUR LA
CERTIFICATION
Quel est le balisage
utilis pour l'lment
video HTML5?
2.3

L'lment video vous permet d'incorporer des vidos dans des documents HTML en
utilisant un minimum de code. La structure utilise pour l'incorporation d'une vido est
simple. Voici un exemple de balisage pour l'ajout d'un fichierMP4 une page Web:
<video src="intro.mp4" width="400" height="300">
</video>

L'attribut src pointe vers le nom du fichier vido lire (dans ce cas, video.mp4). Les
attributs height et width spcifient la taille de la fentre dans laquelle s'affiche la vido.
Vous pouvez ajouter d'autres attributs permettant de contrler la vido:
poster: affiche un fichier image statique avant le chargement de la vido
autoplay: dmarre automatiquement la lecture de la vido aprs le chargement de la
page
controls: affiche un ensemble de contrles utiliss pour lire, mettre en pause ou arrter
la vido et rgler le volume
loop: rpte la vido
Lorsque tous les contrles ci-dessus sont utiliss, le balisage doit se prsenter comme suit:
<video src="/videos/intro.mp4"
width="400" height="300
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
</video>

Notez que ce balisage fait rfrence un fichier vidoMP4. Parmi les autres formats
vido souvent utiliss sur le Web figurent galement H.264, OGG et WebM, bien que
WebM soit utilis moins de 10% du temps. Outre le format vido, vous devez galement
spcifier le codec, une technologie utilise pour compresser les donnes. La compression

46 | Leon 2

rduit la quantit d'espace ncessaire pour stocker un fichier ainsi que la bande passante
ncessaire pour la transmission du fichier. La compression vido rduit la taille des
images vido en conservant la qualit vido la plus leve avec une vitesse de
transmission minimum. Tout ceci a pour effet d'amliorer les performances.
En rsum, les principaux formats vido et codecs (pour les deux derniers) sont:
MP4 ou H.264
OGG + Theora avec audio Vorbis
WebM + VP8
Il est recommand d'utiliser l'attribut type pour spcifier le format vido. Il convient
galement d'utiliser l'attribut codecs pour spcifier le(s) codec(s), le cas chant.
Voiciunexemple de balisage:
<video
width="400" height="300"
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="intro.mp4" type="video/mp4" />
</video>

La balise <source> est utilise comme contenu de l'lment video afin que l'attribut type
puisse tre dfini et que l'option de formats multiples soit disponible.
Tous les navigateurs ne prennent pas en charge la totalit des formats vido; le format
MP4/H.264 est le plus largement utilis par les navigateurs Web et les priphriques
mobiles. (La page Web HTML5 Video, l'adresse http://www.w3schools.com/html/
html5_video.asp, comporte un tableau rpertoriant les formats vido pris en charge par les
diffrents navigateurs. Ce tableau est mis jour rgulirement.) Pour que votre vido
puisse s'afficher dans la plupart des navigateurs et priphriques, vous pouvez utiliser
l'attribut source afin d'inclure plusieurs formats dans votre balisage. L'exemple suivant
montre la mme vido disponible en deux formats, et le format OGG spcifie les codecs:
<video
width="400" height="300" poster="image.png"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type=video/ogg;
codecs="theora, vorbis">
</video>

UTILISER L'LMENT VIDEO


PRPAREZ-VOUS. Pour utiliser l'lment video HTML5, procdez comme suit:
1. Recherchez un clip vido et un fichier image utiliser en tant qu'affiche. Si vous ne disposez
pas de clip vido, recherchez un fichierMP4 disponible dans le domaine public sur le Web
et tlchargez-le. Enregistrez la vido et le fichier image dans votre dossier HTML5.
2. Dans votre outil d'dition, crez un fichier HTML avec le balisage suivant. Remplacez
les noms des fichiers par ceux de votre fichier image et clip vido. Modifiez l'attribut
type, si ncessaire et remplacez sample.mp4 par le nom de votre fichier vido.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 47


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test vido</title>
</head>
<body>
<video
width="400" height="300"
poster="sample.jpg"
autoplay="autoplay"
controls="controls">
<source src="sample.mp4" type="video/mp4" />
</video>
</body>
</html>

3. Enregistrez votre fichier sous L2-video.html.


4. Accdez la page Web du service de validation du balisage du W3C l'adresse
http://validator.w3.org/. Tlchargez le fichier L2-video.html et cliquez sur Check
afinque le service vrifie le fichier. Corrigez les erreurs signales par le vrificateur
encas de balises manquantes ou de fautes de frappe, le cas chant.
5. Ouvrez le fichier HTML dans un navigateur Web. La vido dmarre t-elle
automatiquement? Les contrles sont-ils affichs? Ouvrez le fichier L2-video.html
dans plusieurs navigateurs Web afin de le tester.
6. Dans votre outil d'dition, supprimez la ligne autoplay et remplacez controls="controls"
par controls simplement.
7. Renregistrez le fichier et validez-le. La validation ne doit gnrer aucune erreur. Ceci
signifie que HTML5 permet d'utiliser une mthode plus courte pour spcifier l'attribut
controls. Le mme principe s'applique aux attributs autoplay et loop.
8. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez immdiatement
l'exercice suivant.

Comprendre et utiliser les balises audio


L'lment audio HTML5 fonctionne de la mme faon que l'lment video, mais il
s'applique uniquement au son. Pour utiliser l'lment audio, incluez la balise <audio> et le
chemin d'accs au fichier sur votre disque dur, ou une URL pointant vers le fichier audio.
L'lment audio vous permet d'incorporer un son audio, tel que de la musique ou d'autres
sons, dans les documents HTML. Vous pouvez inclure les mmes attributs se rapportant
aux contrles que pour l'lment video, savoir: autoplay, controls et loop. L'exemple
suivant inclut uniquement l'attribut controls:

PRT POUR LA
CERTIFICATION
Quel est le balisage
utilis pour l'lment
audio HTML5?
2,3

REMARQUE

<audio src="sample.mp3" controls="controls">


</audio>

Si vous utilisez l'attribut autoplay pour que la lecture audio commence automatiquement
lors du chargement de la page Web, utilisez un clip de courte dure comme un effet
sonore. Un grand nombre d'internautes n'aiment pas entendre un son automatique et
prfrent avoir davantage de contrle.

48 | Leon 2

Les trois principaux types de fichiers audio pris en charge par les navigateurs sont OGG,
MP3 et WAV. Toutefois, tous les navigateurs ne prennent pas en charge tous les formats
defichier audio, du moins pas pour le moment. Dans la plupart des cas, MP3 reprsente
lemeilleur choix en raison de sa compatibilit avec de nombreux navigateurs.
Pour vous assurer que votre fichier audio fonctionne avec la plupart des navigateurs et des
priphriques, utilisez l'attribut source afin d'inclure plusieurs formats dans votre balisage.
L'exemple suivant illustre le mme fichier audio disponible dans deux formats:
<audio controls="controls">
<source src="sample.ogg" type="audio/ogg" />
<source src="sample.mp3" type="audio/mp3" />
</audio>

Un grand nombre de fichiers audio gratuits, libres de redevances et de droits d'auteur, sont
disponibles sur le site http://flashkit.com. Ce site est une bonne ressource pour les
apprenants et les dveloppeurs qui recherchent un effet sonore pour un projet. D'autres
ressources sont galement disponibles sur le site Public Sherpa Domain l'adresse http://
www.publicdomainsherpa.com/public-domain-recordings.html. Vous pouvez aussi crer vos
propres enregistrements l'aide de votre ordinateur et d'un logiciel d'enregistrement. Ainsi,
l'Enregistreur Windows7 vous permet d'enregistrer des fichiers audio au formatWAV.
UTILISER L'LMENT AUDIO
PRPAREZ-VOUS. Pour utiliser l'lment audio HTML5, procdez comme suit:
1. Recherchez un clip audio.
2. Dans votre outil d'dition, crez un fichier HTML avec le balisage suivant. Remplacez le
nom de fichier par celui de votre clip audio.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test audio</title>
</head>
<body>
<audio src="sample.mp3" controls="controls">
</audio>
</body>
</html>

Figure2-19
Contrles audio HTML5 par
dfaut dans un navigateur
Web

3. Enregistrez votre fichier sous L2-audio.html, puis affichez-le dans un navigateur. Vous
devez obtenir quelque chose similaire la figure2-19. Dans la mesure o l'attribut
autoplay n'a pas t inclus dans cet exemple, vous devez cliquer sur le bouton Lecture
pour lancer le clip audio.

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 49


4. Si les contrles audio ne s'affichent pas, accdez la page Web du service de validation
du W3C l'adresse http://validator.w3.org. Tlchargez le fichier L2-audio.html et
cliquez sur Check afin que le service vrifie le fichier. Corrigez les erreurs signales par
le vrificateur en cas de balises manquantes ou de fautes de frappe, le cas chant.
5. Renregistrez le fichier et ouvrez-le dans un navigateur Web. Lisez le clip audio.
6. Fermez tous les fichiers ouverts, ainsi que l'outil d'dition et le navigateur Web.

PLUS DINFORMATIONS
Pour plus d'informations sur l'incorporation de contenu multimdia dans les pages Web HTML5, et
plus particulirement les lments audio et video, reportez-vous la page http://msdn.microsoft.com/
fr-fr/library/ie/hh771805.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
Le langage HTML (Hypertext Markup Language) utilise des balises pour dcrire le
contenu qui s'affiche sur une page Web.
Un lment se compose la fois de balises et du contenu figurant entre celles-ci.
L'utilisation de caractres spciaux dans une page Web ncessite l'encodage de ces derniers.
Chaque page Web requiert l'insertion de la dclaration doctype en haut de la page.
HTML5 utilise la plupart des lments et attributs dj spcifis dans HTML4, mais
il inclut quelques nouvelles balises. En outre, l'utilisation par dfaut d'autres balises
a t modifie et certains lments ne sont plus pris en charge. Parmi les nouveaux
lments textuels figurent notamment command, mark, time, meter et progress.
Leslments basefont, center, font et strike sont dsormais obsoltes.
L'lment img permet d'afficher les images lies dans une page Web. Les images
peuvent se trouver dans les fichiers HTML des pages Web, gnralement dans un
sous-dossier d'images, ou sur un autre serveur ou site Web.
Les lments figure et figure caption sont nouveaux dans HTML5. Ils vous donnent plus
de contrle sur le type d'images affiches et permettent d'inclure des lgendes,
respectivement.
L'lment canvas est utilis pour des oprations dynamiques de dessin, de rendu
etde manipulation d'images et de graphiques dans HTML5.
SVG (Scalable Vector Graphics) permet de crer des objets volutifs et
redimensionnables qui s'adaptent parfaitement l'cran sur lequel ils s'affichent,
qu'il s'agisse d'un moniteur ou d'un smartphone.
HTML5 introduit les lments audio et video qui rendent dsormais superflue
l'utilisation de plug-ins ou de lecteurs multimdias pour couter de la musique
ouregarder des vidos via un navigateur Web.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. Une balise HTML qui ne ncessite pas de balise de fin est appele une balise
vide
.
2. Un attribbut
est utilis conjointement avec un lment pour dcrire les
donnes dans le dtail pour effectuer le rendu.
3. Doctype

est une dclaration place au tout dbut de chaque page Web.

4. Un lment ou un attribut obsolte


a t supprim de la liste d'lments
HTML disponibles selon l'organismeW3C.

50 | Leon 2

5. Une image raster


est compose de pixels, tandis qu'une image
vectorielle
est forme de lignes et de courbes bases sur des expressions
mathmatiques.
6. Nouveau dans HTML5, l'lment figure
spcifie le type de figure ajouter
tel qu'une image, un diagramme, une photographie, etc.
7. L'lment figcaption
permet d'ajouter une lgende une image sur une page
Web, avec la possibilit de placer la lgende avant ou aprs l'image.
8. Avec l'lment canvas
, la page Web devient un bloc de dessin, tandis que
lescommandes JavaScript permettent de tracer des formes composes de pixels dans la
zone de dessin, avec notamment des couleurs, des dgrads et des motifs de remplissage.
9. SVG
est un langage permettant de dcrire des graphiques2D en XML
(eXtensible Markup Language).
video
10. Les lments HTML5 audio
et
permettent de proposer
ducontenu multimdia dans un navigateur Web sans qu'aucun plug-in ne soit ncessaire.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les balises suivantes, lesquelles sont obligatoires sur chaque page Web?
(Choisissez toutes les rponses applicables.)
a. <html>
b. <head>
c. <title>
d. <body>
2. Parmi les syntaxes suivantes, laquelle permet de crer un lien hypertexte en HTML?
a. <link href="http://www.example.com">link</a>
b. <a href="http://www.example.com"> link text</a>
c. <link>http://www.exemple.com</link >
d. <http://www.example.com>
3. Quel lment HTML5 dfinit un bouton de commande sur lequel les utilisateurs
peuvent cliquer pour appeler une commande?
a. <objectbut>
b. <combutton>
c. <command>
d. <cbutton>
4. Quel lment HTML5 permet de surligner des blocs de texte dans un
documentHTML?
a. <mark>
b. <highlight>
c. <emphasis>
d. <yellow>
5. Parmi les balises suivantes, lesquelles sont obsoltes dans HTML5? (Choisissez
toutes les rponses applicables.)
a. <big>
b. <center>
c. <font>
d. <time>
6. Quelle balise est utilise avec la balise <figure> pour afficher une image?
a. <img>
b. <src>
c. <fig>
d. <a>

Cration de l'interface utilisateur avec HTML5 : Texte, graphiques et multimdia | 51

7. Parmi les propositions suivantes, laquelle est ncessaire pour canvas et SVG?
a. Microsoft Silverlight
b. Un programme de dessin externe, tel que Microsoft Paint
c. Un important espace de stockage ou bande passante
d. JavaScript
8. Pour savoir si vous devez utiliser l'lment canvas ou SVG, parmi les affirmations
suivantes, laquelle est vraie?
a. Si le dessin est assez petit, utilisez SVG.
b. En rgle gnrale, utilisez canvas pour les petits crans et SVG pour les crans
plus grands.
c. Si le dessin contient un nombre important d'objets, utilisez SVG.
d. Si vous devez crer des documents vectoriels trs dtaills dont la mise l'chelle
est importante, optez pour canvas.
9. Parmi les formats suivants, lequel est le format gnral de l'lment video?
a. <movie src="file.mp4" width="X" height="Y">
b. <movie href="file.mp4" width="X" height="Y">
c. <video src="file.mp4" width="X" height="Y">
d. <video href="file.mp4" width="X" height="Y">
10. Parmi les formats suivants, lequel est le format gnral de l'lment audio?
a. <audio src="sample.mp3" controls="controls">
b. <audio href="sample.mp3" controls>
c. <sound src="sample.mp3" controls>
d. <sound href="sample.mp3" controls="controls">

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettreF si elle est fausse.
VF1.
L'lment canvas ncessite JavaScript pour crer des formes.
La cration d'un objet SVG dans HTML5 ne ncessite pas JavaScript.
VF2.
VF3.
L'lment audio peut fournir des contrles de lecture avec un seul attribut.
VF4.
Les lments obsoltes ne peuvent pas tre restitus dans un navigateur prenant
en charge la norme HTML5.
Le format de fichier audio le plus rpandu estMP4.
VF5.
valuation

des comptences
Scnario2-1: Correction d'erreurs de balisage simples
Graldine, l'assistante de direction, apprend le langage HTML. Son balisage, illustr
ci-dessous, ne produit pas le rendu attendu. Le caractre gras ne s'arrte pas aprs
jeudi. Le logo de la socit ne s'affiche pas, mme si le fichier est enregistr dans le
sous-dossier d'images avec toutes les autres images. Le texte de remplacement ne s'affiche
pas non plus lorsqu'elle passe le pointeur de la souris au-dessus de l'emplacement rserv
l'image. Que pouvez-vous lui dire?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interne</title>
</head>

52 | Leon 2
<body>
<h1>Runion du personnel</h1>
<img src="cologo.jpg" olt="Logo d'entreprise" />
<p>Se runir dans la <strong>Salle de confrence bleue</strong> a <strong>10h</strong> ce
<strong>jeudi<strong> pour une runion urgente du personnel.</p>
</body>
</html>

Scnario2-2: Utilisation de symboles


Petra met en forme certains documents comptables qui seront hbergs sur le site intranet
de la socit. Elle explique que le signe dollar et le symbole du pourcentage s'affichent
correctement dans un navigateur, mais que des caractres incomprhensibles s'affichent
lorsqu'elle utilise un autre navigateur. Que doit-elle faire?

valuation

de la matrise des concepts


Scnario2-3: Canvas ou SVG?
M.A. est une artiste graphique chez ClickTick Watches, un fabricant de montres-bracelets
de luxe. On lui demande de revisiter le logo de la socit et d'en crer un l'aide d'un
outil qui permet d'utiliser une taille adapte selon que le support est un ordinateur portable
ou un smartphone. Elle doit galement crer des graphiques interactifs pour les
commerciaux qui les utiliseront sur leurs tablettes. Elle souhaite mettre jour ses
comptences en approfondissant ses connaissances sur les technologies HTML5, mais ne
sait pas si elle doit se concentrer sur l'lment canvas ou SVG pour ses projets. Que lui
suggrez-vous?

Scnario2-4: Slection de formats vido et de codecs appropris pour le Web


Sammy est charg d'organiser des runions pour les employs de la socit Clear Blue
Resorts. Il souhaite poster une vido du prsident-directeur gnral, qui se trouve
actuellement en dplacement l'tranger pour valuer des sites potentiels pour accueillir
de nouveaux centres de villgiature, sur le site intranet l'occasion de la fte venir en
l'honneur des employs. Il sait que Clear Blue utilise Internet Explorer9, et il a entendu
dire qu'il pourra facilement afficher la vido dans HTML5, mais il ne sait pas par o
commencer. Que conseillez-vous Sammy?

Cration de l'interface
utilisateur avec HTML5:
Organisation, saisie et
validations

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts
Objectif de l'examen MTA
Numro de l'objectif
de l'examen MTA

Slection et configuration
HTML5 pour organiser le
des balisesHTML5 pour
contenu et les formulaires
organiser le contenu et
les formulaires

2.4

Slection et configuration
des balises HTML5 pour la
saisie et la validation

2.5

Choisir et configurer les balises


HTML5 pour les entres et la
validation

TERMES CLS
attribut autofocus

lment nav

attribut email

lment section

attribut global

entre de formulaire

attribut pattern

formulaire Web

attribut required

liste non trie

balisage smantique

liste trie

lment article

tableau

lment aside

texte de lespace rserv

lment datalist

validation

lment footer

validation automatique

lment header

validation ct client

lment menu

validation ct serveur

L'une de vos nouvelles tches en tant que stagiaire chez Media Malted Milk consiste
crer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs
d'un formulaire et qui valide les entres. Pour vous prparer crer le formulaire Web,
vous devez tout d'abord apprendre la meilleure faon d'organiser ou de structurer le
balisage l'aide des nouveaux lments HTML5.

53

54 | Leon 3

Slection et configuration des balisesHTML5 pour organiser le contenu et les formulaires

HTML5 introduit plusieurs nouveaux lments pour organiser le contenu et les formes.
Ils reprsentent le nouveau balisage smantique qui est une partie importante du HTML5.

L'ESSENTIEL

Le balisage HTML5 introduit plusieurs nouvelles balises pour organiser la structure des
documents HTML, ce qui facilite la cration et la modification des documents. Les nouvelles
balises ont des noms plus intuitifs que des constructions similaires dans les spcifications
HTML prcdentes. Les balises sont nommes de manire plus approprie la partie de la
page laquelle elles s'appliquent, comme <header>, <section> et <footer>.
HTML5 a galement rationalis la cration de tableaux, en dplaant de nombreux attributs
qui ont une influence sur la largeur de marge intrieure et l'alignement vertical et horizontal
dans le fichier CSS.

Prsentation de la smantique HTML


Le balisage smantique utilise des noms de balises intuitifs, ce qui facilite la
gnration et la modification des documents HTML et l'interprtation par les
navigateurs Web et les autres programmes.
PRT POUR LA CERTIFICATION

Qu'est-ce que le balisage


smantique?
2.4

Une des nouveauts trs pratiques du HTML5 est l'utilisation du balisage smantique,
qui donne une meilleure signification ou dfinition plusieurs balises afin qu'elles aient
plus de sens pour les utilisateurs, les programmes et les navigateurs Web. Comme indiqu
dans la leon 2, toutes les balises HTML n'ont pas t remplaces ou mises jour pour
HTML5, mais parmi les nouvelles qui ont t introduites, certaines rendent le travail de
cration de pages Web beaucoup plus facile.
Dans HTML4.01 et les versions prcdentes, un dveloppeur qui cre la structure d'un
document HTML utilise frquemment la balise <div> partout. La balise <div> comprend
souvent une classe ou un attribut d'ID, qui peut galement inclure des styles CSS tels
quebackground-color, height et width. Voici un exemple simple d'une balise <div>:
<div id="header" > Il s'agit d'un en-tte </div>
Les attributs class et id sont des attributs globaux, ce qui signifie qu'ils peuvent tre

REMARQUE

utiliss avec n'importe quel lmentHTML. Vous pouvez voir la liste complte des
attributs HTML globaux sur http://dev.w3.org/html5/markup/global-attributes.html.
L'lment div seul n'a pas beaucoup de sens sans l'attribut id ou class. Il est aussi possible
d'attribuer la valeur de votre choix l'ID, comme "header", "header_inner", "slogan",
"content", "style", etc. Voici un exemple d'un document HTML4.01:
<div id="header">
<div id="header_inner">
<img src="images/doghappy.jpg"
alt="Attaboy Pet Services" />
<div id="slogan">Un chien heureux est un bon chien</div>
</div>
</div>

HTML5 utilise des balises simples pour remplacer un grand nombre de balises div, dont
certaines sont indiques dans la figure3-1.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 55


Figure3-1
Comparaison des parties de
document balises en HTML
4.01 et HTML5

Notez que le balisage smantique de HTML5 donne un sens plus spcifique aux parties
d'un document HTML, en rendant la structure plus facile comprendre.

Utilisation des balises pour structurer un document HTML


PRT POUR LA CERTIFICATION

Quelles sont les balises


HTML5 utilises pour
structurer et organiser un
document?
2.4

Parmi les nouveaux lments de HTML5 en termes de structuration et d'organisation du


contenu dans un document HTML, on trouve header, footer, section, nav, article et aside.
Maintenant que vous comprenez le balisage smantique, nous allons tudier plusieurs des
nouveaux lments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et
dcrit les nouvelles balises lies la structure HTML5.

Tableau3-1
Nouvelles balises HTML5
pour l'organisation du
contenu et la cration de
structure

Balise

Description

Dfinit une zone pour obtenir les coordonnes d'une page ou d'une
section
<address>

<article> 
Dfinit un article, comme un article de magazine ou de journal, un

billet de blog ou un contenu similaire

<aside> 
Dfinit le contenu qui est distinct mais quand mme associ au contenu

de la page. Semblable une barre latrale dans les chapitres de livres et


les articles de magazine

<details> 
Contient des dtails supplmentaires relatifs au texte autour. Cre un

widget interactif qu'un utilisateur peut afficher ou masquer

<footer> 
Dfinit un pied de page d'un document ou d'une section. Peut inclure

l'auteur du document, les coordonnes, les informations de copyright


et les liens renvoyant aux modalits dutilisation

<header> 
Dfinit un en-tte de document ou de section. Peut contenir des liens

de navigation ou des informations prliminaires

<hgroup> 
Regroupe les titres et les sous-titres ( l'aide des balises <h1> <h6>)

pour des titres sur plusieurs niveaux

<nav>

Dfinit un bloc de liens de navigation

<section> 
Dfinit une section d'un document, comme des chapitres, des parties

d'une thse ou d'une pageWeb dont le contenu est distinct

<summary> 
Dfinit un titre visible pour un lment details. L'utilisateur peut

cliquer pour afficher ou masquer les informations

<wbr>

 finit un saut de ligne ventuel. Lorsqu'un mot est trs long ou


D
que vous craignez que le navigateur ne coupe une ligne au mauvais
endroit, vous pouvez utiliser l'lment <wbr> pour couper le mot ou
la ligne correctement

56 | Leon 3

REMARQUE

Comme vous avez l'appris dans la leon 1, la norme HTML5 ne sera pas finalise avant
plusieurs annes, ce qui signifie que des modifications seront toujours apportes aux
spcifications. Les principaux navigateurs Web, comme Microsoft Internet Explorer et
Mozilla Firefox, prennent en charge de nombreux lments HTML5, mais pas tous. Le
site Web Can I use http://caniuse.com/ est une excellente source pour dterminer quels
navigateurs prennent en charge des fonctionnalits HTML5 spcifiques. Ce site Web est mis
jour rgulirement, il devrait donc faire une partie de vos ressources HTML5 essentielles.
En outre, vous pouvez tester la prise en charge du HTML5 par n'importe quel navigateur en
accdant au site Web de test HTML5 sur http://html5test.com.
Nous allons examiner plus attentivement les balises HTML5 de la figure 3-1. Il s'agit des
balises les plus courantes lies la structure HTML5.

LMENTS HEADER ET FOOTER


L'lment header dfinit l'en-tte d'un document, d'une section ou d'un article. Dans
HTML4.01, vous devez utiliser l'en-tte div, tel que mentionn dans la section prcdente
(<div id="header">). L'lment footer dfinit un pied de page dans un document ou
une section, et contient gnralement des informations sur le document ou la section,
par exemple le nom de l'auteur, les donnes de Copyright, des liens renvoyant des
documents connexes, etc. L'lment footer ne s'affiche pas automatiquement en bas du
document; vous devez utiliserCSS pour indiquer au navigateur l'emplacement o doit
s'afficher le pied de page. Les pieds de page qui apparaissent au bas de chaque page Web
ou document sont connus sous le nom de sticky footers.
Voici un exemple d'un article avec une balise header tag et une balise footer:
<article>
<header>
<h1>Apprentissage d'HTML5</h1>
<h2>Les nouveaux lments</h2>
</header>
<p>Les nouvelles balises HTML5 rendent le dveloppement de page Web et d'application
plus facile que jamais.</p>
<footer>
<p>Publi le: <time datetime="2012-0903"3 septembre 2012</time></p>
</footer>
</article>

Comme avec l'lment div, vous pouvez utiliser les lments header et footer plusieurs
reprises dans un document HTML document, comme illustr dans la figure 3-2.
Figure3-2
Plusieurs instances de
l'lment header

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 57

L'LMENT SECTION
L'lment section dfinit une section d'un document, tel qu'un chapitre, des parties d'une
thse ou d'une pageWeb dont le contenu est distinct. WC3 spcifie l'utilisation de
l'lment section pour le diffrencier des autres lments de structure. Il doit notamment
contenir au moins un titre et dfinir quelque chose qui doit normalement apparatre dans
le plan du document. Par exemple, vous devez utiliser l'lment section pour rpartir les
diffrentes parties d'un site Web d'une page ou pour crer un portefeuille d'images. Voici
un exemple d'une section simple:

PRT POUR LA CERTIFICATION

Quand dois-je utiliser


la balise <section> par
rapport un autre type
d'lment?
2.4

<section>
<h1>Huit temps</h1>
<p>Les professeurs de Hip-hop enseignent souvent des mouvements
en huit temps.</p>
</section>

Le tableau3-2 numre les situations dans lesquelles vous devez viter d'utiliser l'lment
section et fournit la meilleure technique.

Tableau3-2
Situations dans lesquelles
vous ne devez pas utiliser
l'lment section

REMARQUE

Les nouvelles balises


lies la structure
HTML5 ne remplacent
pas compltement
les balises <div>,
mais les balises
HTML5 rduisent
considrablement le
nombre de balises <div>
ncessaires dans un
document HTML.

Situation

Utilisation

Contenu distinct qui est indpendant du reste du contenu de


la page Web ou d'un document

article

Prvoit de syndiquer un bloc de contenu

article

Cre une barre latrale

aside

Enveloppe et positionne plusieurs sections qui ne sont pas


lies entre elles

div

Ajoute une ombre porte un lment ou une bordure autour

div

Il peut parfois tre difficile de savoir quand utiliser la balise <section> plutt qu'un autre
lment. Lorsque vous travaillez sur un document HTML et que vous ne savez pas quel
lment utiliser, parcourez la spcification W3C HTML5 ou le Web pour voir comment
les autres dveloppeurs ont gr une situation similaire.
Lors de la dfinition d'un en-tte de section, qui peut contenir des titres de h1 h6,
vous pouvez utiliser l'lment hgroup pour regrouper les titres. L'lment hgroup affecte
l'organisation, mais pas la prsentation. Pensez utiliser hgroup lorsque vous avez un titre
et un sous-titre l'un aprs l'autre, comme suit.
<section>
<hgroup>
<h1>Pas de danse Hip-Hop</h1>
<h3>La mthode en huit temps</h3>
</hgroup>
<article>
<p>Les professeurs de Hip-hop enseignent souvent
des mouvements en huit temps.</p>
</article>
</section>

Ce balisage apparat dans une page Web, comme illustr dans la figure3-3.

58 | Leon 3
Figure3-3
Utilisation de hgroup pour
regrouper des titres dans un
document HTML

CRER UN DOCUMENT HTML AVEC EN-TTE, DES SECTIONS ET UN PIED DE PAGE


PRPAREZ-VOUS. Pour crer un document HTML l'aide des lments HTML5 header,
section et footer, procdez comme suit:
REMARQUE

N'oubliez pas, vous


pouvez utiliser
plusieurs outils pour
crer des documents
HTML. Pour le PC,
pensez aux diteurs
de texte Notepad
ou Notepad ++, aux
diteurs HTMLKit ou KompoZer
HTML ou aux outils
de dveloppement
Microsoft Visual
Studio, Visual Studio
for Web ou Microsoft
Expression Web.

1. l'aide d'un diteur HTML ou d'un outil de dveloppement d'application et d'un


navigateur Web, crez un document HTML simple qui incorpore les balises <header>,
<section> et <footer>. Intgrez deux sections et n'oubliez pas d'inclure au moins un
lment h1 au sein des sections. Vous pouvez inclure des images si vous le souhaitez.
Le balisage peut ressembler ce qui suit:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page</title>
</head>
<body>
<header>
<h1>Slection d'un style de concert</h1>
</header>
<section>
<h1>Symphonies</h1>
<p>Une symphonie est un type de composition musicale gnralement
joue par un orchestre complet.</p>
</section>
<section>
<h1>Raves</h1>
<p>Une rave est un rassemblement de personnes qui dansent en coutant
de la musique, surtout de la musique lectronique, gnralement interprte par
un groupe ou des DJ en direct.</p>
</section>
<footer>
<p>Auteur:Nathaniel Becker</p>
</footer>
</body>
</html>

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations|59


Ce balisage s'affiche dans une page Web, comme illustr dans la figure3-4.
Figure3-4
Document HTML avec un entte, un pied de page et une
section

En-tte

Secons

Pied de
page

2. Enregistrez le fichier sous le nom L3-mapage.html.


3. Validez le document en utilisant le service de validation du balisage W3C l'adresse
http://validator.w3.org. Si vous avez besoin d'aide, reportez-vous la leon 2.
4. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez l'exercice suivant
au cours de cette session.

L'LMENT NAV
L'lment nav dfinit un bloc de liens de navigation. L'lment nav est utile pour crer
un ensemble de liens de navigation pour la navigation principale de votre document, une
table des matires, un fil d'Ariane dans un pied de page ou des liens Prcdent-AccueilSuivant.
Le W3C mentionne qu'il ne faut pas utiliser les balises <nav> pour tous les liens de navigation, simplement pour les principaux blocs de liens. Comme les balises <nav> sont interprtes par le logiciel de lecteur d'cran pour dficients visuels, ce logiciel peut dterminer
s'il doit autoriser ou non les liens de navigation l'utilisateur selon leur importance.
L'exemple suivant montre l'utilisation de la balise <nav>:
<nav>
<a href="/hiphop/">Hip-Hop</a>
<a href="/modern/">Danse moderne</a>
<a href="/swing/">Swing</a>
<a href="/tap/">Claquettes</a>
</nav>

Les liens seraient affichs dans une page Web, comme illustr dans la figure3-5.
Figure3-5
Liens simples utilisant
l'lment nav

60 | Leon 3

Voici un exemple de balisage pour les liens Prcdent-Accueil-Suivant, avec des barres
verticales aprs chaque lment de navigation pour le sparer des autres visuellement:
<nav>
<a href="http://www.example.com/Services">Prcdent</a> |
<a href="http://www.example.com">Accueil</a> |
<a href="http://www.example.com/About">Suivant</a>
</nav>
<br />

Les liens s'afficheraient dans une page Web, comme illustr dans la figure3-6.
La navigation est souvent affiche dans une liste verticale. Vous allez apprendre le faire
plus tard dans cette leon.

Figure3-6
Navigation PrcdentAccueil-Suivant avec
des barres verticales qui
sparent chaque lien

A JOUTER L'LMENT NAV UN DOCUMENT HTML


PRPAREZ-VOUS. Pour ajouter l'lment nav dans un document HTML, procdez comme suit:
1. Dans votre diteur HTML ou l'aide d'un outil de dveloppement d'application,
ouvrez le fichier L3-MyPage.html (s'il n'est pas dj ouvert) et enregistrez-le sous le
nom L3-MyPage-nav.html pour crer un nouveau fichier.
2. Placez les balisesnav suivantes et leur contenu dans la balise <header>:
<header>
<h1>Slection d'un style de concert</h1>
<nav>
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
</header>

Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le


document HTML.
3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit:
<h1><a id="symphonies">Symphonies</a></h1>
<h1><a id="raves">Raves</a></h1>

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations|61


4. R-enregistrez le fichier sous le nom L3-MyPage-nav.html, puis ouvrez-le dans un


navigateur Web. Les liens de navigation s'afficheraient dans une page Web, comme
illustr dans la figure3-7.

Figure3-7
Page avec des liens de navigation nouvellement ajouts
Liens de
navigaon

5. Laissez l'outil d'dition et le navigateur Web ouverts si vous passez l'exercice suivant
au cours de cette session.

L'LMENT ARTICLE
L'lment article dfinit une partie d'un documentHTML reprsentant une composition
autonome indpendante du reste du contenu dans un document. Le contenu dclench
par les balises <article> peut tre distribu par flux de syndication. Cela quivaut un
contenu qui se suffit lui-mme. (La syndication Web consiste rendre le contenu d'un
site Web disponible de nombreux sites Web.).

REMARQUE

W3C encourage l'utilisation de l'lment article plutt que l'lment section pour tout
contenu qui pourrait tre syndiqu
Parmi les exemples de contenu qui conviennent pour le marquage avec <article> on peut
trouver un article de magazine, une entre de blog ou le contenu d'un flux RSS. Vous
pouvez galement utiliser l'lment article pour le contenu des sections propos de et
Contact, qui sont indpendantes du reste de la page sur laquelle elles se trouvent mais ne
vont pas ncessairement tre syndiques.

L'LMENT ASIDE
L'lment aside sert afficher le contenu li au sujet actuel, mais qui est susceptible
d'interrompre le flux du document s'il demeure au sein du texte. L'lment aside est
essentiellement utilis pour les informations qui se trouvent dans les barres latrales et les
notes. Ce type de contenu peut donner un aperu plus dtaill d'un sujet, proposer des liens
de lecture connexes ou afficher des dfinitions de mots cls dans le paragraphe. L'lment
aside ne change pas la position du contenu, ni la manire dont il s'affiche. Il indique
simplement au navigateur et aux moteurs de recherche qu'il s'agit d'un contenu associ.

62 | Leon 3
<article>
<header>
<h1>Apprentissage d'HTML5</h1>
<h2>Les nouveaux lments</h2>
</header>
<p>Les nouvelles balises HTML5 rendent le dveloppement de page Web et d'application
plus facile que jamais. Parmi les
nouvelles fonctionnalits trs pratiques de HTML5 on trouve l'utilisation du
balisage smantique.</p>
<aside>
<h4><b>Le balisage smantique</b></h4>
<p> permet de mieux dfinir
les balises afin de leur donner plus de sens pour les utilisateurs,
les programmes et les navigateurs Web</p>
</aside>
<p>Toutes les balises HTML n'ont pas t remplaces ou mises jour
pour HTML5, mais certaines nouvelles balises introduites dans HTML5
rendent le travail de cration de pages Web beaucoup
plus facile.</p>
<footer>
<p>Publi le: <time datetime="2012-0903">3septembre2012</time></p>
</footer>
</article>

Le balisage apparat dans une page Web, comme illustr dans la figure3-8.

Figure3-8
Exemple d'un lment aside

De ct

Comme vous pouvez le voir dans la figure 3-8, le contenu situ sur le ct ne se dmarque
pas vraiment du reste du contenu. Vous pouvez ajouter la balise de la rgle horizontale
<hr /> avant et aprs le contenu de la parenthse, qui apparatrait dans un navigateur Web,
comme illustr dans la figure3-9.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 63


Figure3-9
Utilisation de la balise <hr
/> pour ajouter des rgles
horizontales pour afficher le
contenu situ sur le ct

Vous pouvez galement utiliser CSS pour ajuster les marges du contenu situ sur le
ct, afin qu'elles soient en retrait gauche et droite. Dans les prochaines leons, vous
apprendrez les techniques de mise en page CSS pour afficher un contenu similaire dans
une zone le long du ct gauche ou droit du corps de texte correspondant.
A JOUTER L'LMENT ASIDE UN DOCUMENT HTML
PRPAREZ-VOUS. Pour ajouter l'lment aside un document HTML, procdez comme
suit:
1. Dans votre diteur HTML ou l'aide d'un outil de dveloppement d'application,
ouvrez le fichier L3-MyPage-nav.html (s'il n'est pas dj ouvert) et enregistrez-le sous
le nom L3-MyPage-art-aside.html pour crer un nouveau fichier.
2. Placez un lment aside juste avant le pied de page, comme suit:
<aside>
<hr />
<p>Remarque: La Drug Enforcement Administration des tats-Unis s'intresse galement
aux raves. Allez sur http://www.justice.gov/dea/
ongoing/raves.html pour en savoir plus.</p>
</aside>

3. R-enregistrez le fichier sous le nom L3-MyPage-art-aside.html et affichez-le dans un


navigateur Web. La page doit ressembler la figure3-10.
4. Validez le document en utilisant le service de validation du balisage W3C l'adresse
http://validator.w3.org.
5. Fermez le fichier et laissez ensuite l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour connatre les nouveauts de HTML5, reportez-vous la page Web Learn HTML5 in 5 Minutes!
(Apprenez HTML5 en 5 minutes) l'adresse http://msdn.microsoft.com/en-us/hh549253 et la page
Web HTML elements (lments HTML) de W3C l'adresse http://dev.w3.org/html5/markup/
elements.html#elements.

64 | Leon 3
Figure3-10
Document HTML qui inclut
des lments article et aside

De ct

Utilisation de balises pour crer des tableaux et des listes


Les tableaux et les listes permettent de structurer des informations spcifiques dans
les documents HTML. Un tableau contient des lignes et des colonnes et affiche les
donnes dans une grille. En HTML, vous pouvez crer des listes tries et non tries.
Chaque lment d'une liste trie est marqu par un nombre ou une lettre. Une liste
non trie est une liste puces.
Cette section explique en dtail comment crer des tableaux et des listes l'aide
d'lments HTML. HTML5 introduit quelques nouveaux lments pour les tableaux et
les listes, mais la plupart des balises et des concepts sont les mmes que les spcifications
antrieures. Si vous avez dj cr un tableau ou une liste HTML, vous devriez tre
capable de survoler cette section sans problme.

PRT POUR LA CERTIFICATION

Comment crer un
tableau?
2.4

CRATION DE TABLEAUX
Un tableau HTML contient des lignes et des colonnes et sert organiser et afficher les
informations sous forme de grille. Certains dveloppeurs utilisent des tableaux des fins
de mise en page, pour positionner ou aligner le contenu avec des images par exemple,
mais ce n'est pas la meilleure utilisation des tables.
Au sujet du balisage, chaque tableau HTML commence par la balise <table>. Les lignes
sont marques par la balise <tr>, les en-ttes de colonne utilisent la balise <th> et les
cellules sont dfinies par la balise <td>.
Le balisage pour un tableau trs basique de deux colonnes et cinq lignes est la suivante.
La figure 3-11 montre des commentaires qui ont t ajouts pour indiquer des colonnes et
des lignes qui sont titre d'informations uniquement et qui n'apparaissent pas lorsque le
document est affich dans un navigateur:
<table border="1">
<tr> <!--first row-->
<th>Trimestre</th> <!--first column in first row-->
<th>Ventes totales</th> <!--first row, second column-->
</tr>

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 65


<tr> <!--second row-->
<td>T1</td>
<td>4349$</td>
</tr>
<tr> <!--third row-->
<td>T2</td>
<td>2984$</td>
</tr>
<tr> <!--fourth row-->
<td>T3</td>
<td>3570$</td>
</tr>
<tr> <!--fifth row-->
<td>T4</td>
<td>7215$</td>
</tr>
</table>
Figure3-11
Une tableau simple

REMARQUE

Vous devez inclure les


lments thead et tfoot
avant l'lment tbody
afin que le navigateur
puisse afficher l'en-tte
et le pied du tableau
avant de recevoir toutes
les lignes de donnes.

Si vous crez un tableau simple, vous pouvez utiliser la balise <caption> pour ajouter
une lgende au-dessus ou au-dessous de ce tableau. Pour appliquer des styles intralignes
avecHTML, plutt queCSS, les dveloppeurs utilisent la balise <col> pour appliquer
lesstyles une colonne entire. (Vous dcouvrirez bientt la mise en forme en ligne.)
Labalise <colgroup> regroupe les colonnes dans un tableau pour vous permettre d'appliquer
une mise en forme au groupe, plutt qu' une colonne seulement.
Lorsque vous crez un long tableau qui ncessite un dfilement dans un navigateur,
utilisez les balises <thead>, <tfoot> et <tbody>. Le contenu lintrieur de l'en-tte et le pied
de page reste sur la page tandis que le contenu balis avec <tbody> dfilera entre les deux.
La balise <thead> cre des en-ttes de colonnes (en caractres gras par dfaut) et la balise
<tfoot> est utilise pour afficher la dernire ligne, par exemple une ligne des totaux. La
balise <tbody> dfinit tout le contenu entre l'en-tte et le pied de page.
Voici un exemple de balise pour un tableau avec trois colonnes et cinq lignes, la premire
ligne tant l'en-tte de colonne et la dernire ligne, le pied du tableau. Le balisage inclut
galement une lgende au-dessus du tableau. Le rendu du balisage est illustr par un
navigateur dans la figure3-12:
<table>
<caption>Ventes pour l'ID d'employ 2387</caption>
<colgroup
span="2"
style="background-color:#EEE8AA;">
</colgroup>

66 | Leon 3
Figure3-12
Version plus avance d'un
tableau simple

<colgroup
style="background-color:#00FA9A;">
</colgroup>
<thead>
<tr>
<th scope="col">Trimestre</th>
<th scope="col">Ventes totales</th>
<th scope="col">Objectif atteint?</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Total</th>
<th scope="col">18118$</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>T1</td>
<td>4349$</td>
<td>Oui</td>
</tr>
<tr>
<td>T2</td>
<td>2984$</td>
<td>Non</td>
</tr>
<tr>
<td>T3</td>
<td>3570$</td>
<td>Oui</td>

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 67


</tr>
<tr>
<td>T4</td>
<td>7215$</td>
<td>Oui</td>
</tr>
</tbody>

Notez l'utilisation de la couleur d'arrire-plan pour les colonnes groupes dans l'exemple
prcdent. Il s'agit d'un exemple de mise en forme en ligne. L'attribut style utilise une ou
plusieurs des proprits et des valeurs CSS, spares par des points-virgules. Pour la couleur HTML, vous pouvez utiliser le nom de la couleur ou le code hexadcimal. Le code
hexadcimal #EEE8AA correspond un jaune dor clair. Le code hexadcimal #00FA9A
produit la couleur vert printanier. Un nuancier de couleurs standard HTML est disponible
sur http://www.w3schools.com/html/html_colornames.asp.
Vous pouvez aussi centrer le contenu dans une cellule, une colonne ou un groupe de colonnes
l'aide de style="text-align:center". Pour enchaner plusieurs proprits et valeurs dans le mme
attribut de style, utilisez une syntaxe similaire style="color:blue;text-align:center". Les leons
46 de cet ouvrage prsentent CSS et ses nombreuses proprits.
Le tableau 3-3 rsume les lments communs utiliss pour gnrer des tableaux en HTML5.

Tableau3-3
lments courants utiliss
pour construire des tableaux

lment

Description

col

Dfinit une colonne de tableau

colgroup

Dfinit un groupe de colonnes dans un tableau

caption

Marque le texte comme une lgende de tableau

table

Dfinit un tableau

tbody 
Dfinit un groupe de lignes dans un tableau des fins de

mise en forme et de dfilement


td

Dfinit une cellule de tableau

tfoot 
Dfinit un groupe de lignes de pied de page dans un

tableau des fins de mise en forme et de dfilement


th

Dfinit une cellule d'en-tte de tableau

thead 
Dfinit un groupe de lignes d'en-tte dans un tableau

des fins de mise en forme et de dfilement


tr 
Dfinit une ligne de tableau

REMARQUE

Si vous avez cr des tableaux l'aide de HTML 4 ou d'une version prcdente, vous
devez connatre les lments cellpadding, cellspacing, frame, rules, summary et/ou width.
Ilssont dconseills et non pris en charge dans HTML5.

68 | Leon 3

CRER UN TABLEAU
PRPAREZ-VOUS. Pour crer un tableau, effectuez les oprations suivantes:
1. l'aide d'un diteur HTML ou d'un outil de dveloppement d'application et d'un
navigateur Web, crez un fichier nomm L3-PracTable.html avec le balisage suivant:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Films en haut du box-office</title>
</head>
<body>
<table border="1">
<tr>
<th>Film</th>
<th>Produit total brut</th>
</tr>
<tr>
<td>Avatar</td>
<td>2,7 milliards de dollars</td>
</tr>
<tr>
<td>Titanic</td>
<td>2,1 milliards de dollars</td>
</tr>
<tr>
<td>The Dark Knight</td>
<td>1 milliard de dollars</td>
</tr>
</table>
</body>
</html>

2. Mettez en italique le titre de chaque film l'aide des balises <i>.


3. Modifiez le tableau et ajoutez une lgende au-dessus disant Films en haut du boxoffice et un pied de page contenant les mots Total et 5,8 milliards de dollars.
4. Remplacez l'arrire-plan du tableau, des en-ttes de colonne au pied de page, par
du kaki, en utilisant le code hexadcimal #F0E68C. Pour ce faire, ajoutez le balisage
suivant colgroup entre <table border="1"> et <thead>, comme suit:
<table border="1">
<colgroup
span="2"
style="background-color:#F0E68C;">
</colgroup>
<thead>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Une fois termin, le tableau
doit ressembler celui de la figure 3-13. Rvisez votre balisage si ncessaire et
renregistrez le fichier.
6. Fermez le fichier et laissez ensuite l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations|69


Figure3-13
Tableau final des films en
haut du box-office

PRT POUR LA CERTIFICATION

Comment crer une liste


trie et une liste puces?
2.4

CRATION DE LISTES
La cration de listes en HTML5 est simple, surtout si vous en avez cres dans des spcifications
HTML prcdentes. Les rgles sont presque identiques, bien que dans HTML5, l'utilisation d'un
lment de liste a t modifie et quelques nouveaux attributs ont t introduits.
Il existe deux principaux types de listes HTML:
Liste trie: une liste classe par dfaut les entres de la liste l'aide de nombres. La
balise <ol> est utilise. Vous pouvez utiliser les attributs suivants avec une liste trie:
a. reversed : utilise la valeur reversed qui inverse l'ordre de la liste, dans l'ordre
dcroissant. Cet attribut n'est pas pris en charge dans la plupart des navigateurs
ce jour
b. start number : spcifie la valeur de dbut de la liste trie
c. type : spcifie le type de marqueur utiliser au dbut de chaque lment de la
liste. La valeur 1 est la valeur par dfaut et affiche les nombres dcimaux,
la valeur A utilise des majuscules, la valeur a utilise des minuscules, la
valeur I utilise des chiffres romains majuscules et la valeur i utilise des
chiffres romains en minuscules
Liste non trie: une liste affiche les entres sous forme de liste puces. Utilise une balise <ul>.
Les lments d'une liste sont marqus par <li>, ce qui indique un lment de liste
ordinaire. Voyons quelques exemples.
Voici une liste trie, indique dans un navigateur dans la figure 3-14:
<p>Gteaux prfrs:</p>
<ol>
<li>Crme italienne</li>
<li>Dlice aux fraises</li>
<li>Gteau au chocolat</li>
</ol>

Voici une liste non trie et affiche dans un navigateur Web dans la figure 3-15:
<p>Types de gteaux:</p>
<ul>
<li>Dlice aux fraises</li>
<li>Gteau au chocolat</li>
<li>Crme italienne</li>
</ul>

70|Leon 3
Figure3-14
Exemple de liste trie

Figure3-15
Exemple de liste non trie

Vous pouvez changer les symboles de balle ronde dans une liste non trie en ajoutant
simplement un attribut pour modifier la nature des balles. Pour les symboles carrs,
ajoutez type="square" la balise <ul> et pour les cercles vides ajoutez type="circle". Vous
pouvez galement ajouter des attributs des lments de liste individuels (marqus par
<li>) pour affecter des points individuels. Par exemple, pour afficher tous les symboles
deballe comme des carrs remplis:
<p>Types de gteaux:</p>
<ul type="square">
<li>Dlice aux fraises</li>
<li>Gteau au chocolat</li>
<li>Crme italienne</li>
</ul>

La balise apparat comme illustr dans la figure3-16.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 71


Figure3-16
lments de la liste puces
avec des carrs remplis
comme symboles

Un autre type de liste est la liste de dfinitions. Elle affiche les entres avec leurs dfinitions sous les entres de la liste comme prvu. La balise <dl> dfinit la liste, la balise
<dt> marque chaque terme de la liste et la balise <dd> dfinit chaque description. Voici un
exemple de balisage, la liste est ensuite affiche dans la figure 3-17.
<dl>
<dt>Dlice aux fraises</dt>
<dd>Meringue aux fraises avec
de petites fraises des bois</dd>
<dt>Gteau au chocolat</dt>
<dd>Mini ppites de chocolat mlanges avec un
brownie au chocolat
recouvert d'un glaage la crme</dd>
<dt>Crme italienne</dt>
<dd>Gteau italien garni de crme
et de noix de coco grilles</dd>
</dl>

Figure3-17
Exemple d'une liste de
dfinitions

72 | Leon 3
REMARQUE

L'lment menu
tait obsolte en
HTML4.01, mais il a
t redfini en HTML5.

HTML5 utilise galement l'lment menu, qui prsente une liste (ou menu) de commandes,
habituellement avec des boutons. L'organisme de normalisationW3C recommande l'utilisation de
l'lment menu uniquement pour les menus contextuels, les listes de contrles et de commandes
des formulaires, les barres d'outils et autres contrles semblables. L'lment menu HTML5 n'est
pas largement pris en charge par les navigateurs ce jour.
CRER UNE LISTE TRIE
PRPAREZ-VOUS. Pour crer une liste trie, effectuez les oprations suivantes:
1. l'aide d'un diteur HTML ou d'un outil de dveloppement d'application et d'un
navigateur Web, entrez la commande suivante:
<!doctype html>
<html>
<body>
<ol>
<li>Ordinateurs de bureau</li>
<li>Ordinateurs portables</li>
<li>Tablettes</li>
<li>Smartphones</li>

</ol>

</body>
</html>

Slection

2. Enregistrez le fichier sous le nom L3-OrderedList.html, puis affichez-le dans un


navigateur Web.
3. Pour remplacer les marqueurs initiaux par des lettres capitales, insrez type="A" dans
la balise <ol>, comme ceci: <ol type="A">
4. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les lments de
la liste commencent maintenant par A, B, C et D?
5. Pour commencer la numrotation de la liste 5, insrez start="5" dans la balise <ol>.
Remplacez la balise actuelle <ol> par: <ol start="5">
6. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les lments de
la liste commencent maintenant par 5 et se terminent par 8?
7. Fermez le fichier et laissez ensuite l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

et configuration des balises HTML5 pour la saisie et la validation

L'ESSENTIEL

Les dveloppeurs utilisent des formulairesWeb comme interface pour collecter


des informations partir du site Web et des utilisateurs de l'application client. Les
lments d'entre HTML servent crer l'interface d'un formulaire et s'assurer que
les renseignements sont recueillis auprs des utilisateurs de manire cohrente. La
validation vrifie que les informations saisies sont dans le format correct et utilisables
avant d'envoyer les donnes au serveur.
En HTML, les entres et la validation s'appliquent aux formulaires. Un formulaire Web
est une pageWeb qui contient des champs d'entre renseigner par l'utilisateur et qui est
transmise un serveur pour traitement. Ensuite, ces informations sont stockes dans une
base de donnes ou transfres un destinataire.
Les formulaires Web sont utiliss comme interface pour de nombreuses tches diffrentes:
Se connecter un site Web, un serveur ou un rseau
Recueillir des coordonnes, telles que le nom, l'adresse, le numro de tlphone et
l'adresse postale
S'inscrire aux courriels ou aux lettres d'information d'une organisation

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 73

Recueillir les commentaires des utilisateurs aprs la publication dun article sur un site Web
Slectionner des prfrences sur une page Web
Saisir des informations de rservation
De nombreuses applications clientes utilisent une sorte de formulaire Web pour interagir
avec l'utilisateur.
Vous pouvez utiliser les lments d'entre HTML pour crer l'interface d'un formulaire
et vous assurer que les renseignements sont recueillis auprs des utilisateurs de manire
cohrente. La validation vrifie que les informations saisies sont dans le format correct et
utilisables avant d'envoyer les donnes au serveur. Par exemple, si vous entrez 637 Park
Street dans un champ d'adresse Web, alors que ce champ attend quelque chose comme
http://www.example.com, la validation chouera et l'utilisateur sera invit corriger
l'entre. La validation rduit galement la quantit de spam et de contenu malveillant
susceptibles d'arriver sur le serveur ou le destinataire des donnes du formulaire.

Prsentation des entres et des formulaires

REMARQUE

Vrifiez la
fonctionnalit de
n'importe quel
formulaire que
vous crez dans de
nombreux navigateurs
diffrents au cours
du dveloppement.
Cela garantit que les
lments et les attributs
que vous slectionnez
fonctionnent comme
prvu ou que la
mthode fall-back reoit
des entres acceptables.
Tableau3-4
Attributs d'lment de
formulaire utiliss en HTML5

La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart des
formulaires, requirent des entres spcifiquement mises en forme. Les nouveaux attributs
d'entre et de formulaire HTML5 sont intuitifs, faciles utiliser et remplacent un grand
nombre de scripts qui taient obligatoires en HTML 4.01 et dans les versions antrieures.
L'entre de formulaire correspond aux informations qu'un utilisateur saisit dans les
champs d'un formulaireWeb ou d'une application cliente. (Pour faire simple, nous
utilisons le terme formulaire Web la plupart du temps, mais ce terme s'applique
galement l'application cliente.) HTML5introduit plusieurs attributs d'lments d'entre
et de formulaire, tels que url pour entrer une adresse Web unique, email pour une adresse
email unique ou une liste d'adresses e-mail et search pour inviter les utilisateurs entrer
le texte rechercher. Les nouveaux attributs rendent le dveloppement de formulaire
beaucoup plus facile que par le pass. Ce qui ncessitait auparavant beaucoup de scripts
peut dsormais tre accompli par les balises HTML5.
En revanche, beaucoup des nouveaux attributs ne sont pas encore pris en charge par tous
les principaux navigateurs. Toutefois, si vous utilisez un nouvel lment ou un attribut
qui n'est pas encore pris en charge, le navigateur revient un autre affichage ou une
autre forme d'entre en fonction de ce que vous avez.
HTML5 introduit deux nouveaux attributs pour l'lment de formulaire: autocomplete et
novalidate. Tous les attributs de l'lment de formulaire sont rpertoris dans le tableau 3-4
(les nouveaux attributs sont marqus d'un double astrisque).
Attribut

Valeur

Description

accept-charset

character_set

Spcifie un ensemble de codages de


caractres accepts par le serveur

action

URL

Spcifie l'adresse de Web laquelle les


donnes de formulaire sont envoyes

autocomplete**

on
off

Spcifie si la saisie semi-automatique est


active ou dsactive dans un formulaire
ou un champ de saisie. Peut tre on
pour des champs de saisie spcifiques et
off pour le formulaire, ou vice versa

enctype

application/x-www-formurlencoded multipart/
form-data text/plain

Spcifie le type d'encodage des donnes


de formulaire lorsque vous soumettez des
donnes un serveur. Utilis uniquement
pour method=post
(suite)

74 | Leon 3
Tableau3-4
suite

Attribut

Valeur

Description

method

get
post

Spcifie la mthode HTTP (transmission)


utilise lors de l'envoi des donnes de
formulaire. Utilisez get pour extraire
des donnes et post pour stocker ou
mettre jour les donnes ou envoyer du
courrier lectronique

name

text

Spcifie le nom d'un formulaire, qui est

novalidate**

novalidate

Attribut boolen qui spcifie que les

target

_blank

Spcifie l'endroit o afficher la rponse


reue aprs soumission du formulaire
La valeur _blank charge la rponse dans
une nouvelle fentre du navigateur sans
nom.
_self charge la rponse dans la fentre
courante. C'est la valeur par dfaut, donc
son utilisation n'est pas ncessaire
_parent charge la rponse dans la fentre
parent (la fentre du navigateur qui ouvre
la fentre de formulaire)
_top charge la rponse dans la fentre de
navigateur complet

_self
_parent
_top

PRT POUR LA CERTIFICATION

Quels attributs HTML5


devez-vous utiliser pour
limiter les entre de
formulaire?
2.5

utilis pour rfrencer les donnes de


formulaire une fois qu'un formulaire est
envoy
donnes du formulaire (entre utilisateur)
ne doivent pas tre valides une fois
envoyes. HTML5 permet galement
aux attributs boolens d'tre dfinis en
mentionnant l'attribut sans signe gal ou
de valeur assigne

**Nouveauts de HTML5

HTML5 introduit de nombreux attributs d'lment d'entre. Les attributs d'lment


d'entre sont rpertoris dans le tableau 3-5 (les nouveaux attributs HTML5 sont indiqus
par un double astrisque).
Tableau3-5
Attributs d'lment d'entre
utiliss en HTML5

Attribut

Valeur

Description

accept

audio/*
video/*
image/*
MIME_type

Spcifie les types de fichiers accepts


par le serveur. Utilis uniquement pour

text

Spcifie le texte de remplacement pour

on

Spcifie si la saisie semi-automatique est

alt

autocomplete**

off

type=file

les images. Utilis uniquement pour


type=image. Couramment utilis lorsque
vous crez un bouton d'envoi personnalis partir de votre propre fichier image
active ou dsactive dans un formulaire
ou un champ de saisie. Peut tre on
pour des champs de saisie spcifiques et
off pour le formulaire, ou vice versa
(suite)

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 75


Tableau3-5
suite

Attribut

Valeur

Description

autofocus**

autofocus

Attribut boolen qui indique quun


contrle doit tre activ ou slectionn
ds que la page saffiche

checked

checked

Spcifie qu'un lment d'entre doit

tre prslectionn lors du chargement


de la page. Utilis uniquement pour
type=checkbox ou type=radio
disabled

disabled

Dsactive l'lment d'entre

form**

form_id

Spcifie le ou les formulaires auxquels


appartient un lment d'entre

formaction**

URL

Spcifie l'adresse Web du fichier qui


traitera le contrle d'entre lorsque le
formulaire sera envoy

formenctype**

application/x- www-formurlencoded multipart/


form-data text/plain

Spcifie le type d'encodage des donnes


de formulaire lorsque vous soumettez des
donnes un serveur. Utilis uniquement
pour method=post

formmethod**

get post

Spcifie la mthode HTTP (transmission)


utilise pour l'envoi des donnes de
formulaire une adresse Web

formnovalidate**

formnovalidate

Attribut boolen qui empche la


validation lors de la soumission d'entre

formtarget**

_blank
_self
_parent
_top

Spcifie un mot cl qui indique o


afficher la rponse reue aprs avoir
soumis le formulaire framename

height

pixels

Spcifie la hauteur d'un lment


d'entre. Utilis uniquement avec l'entre
type=image

list**

datalist_id

Fait rfrence un lment datalist ayant


un contenu prdfini pour la saisie semiautomatique, comme la slection d'un
lment partir d'une liste droulante

max**

number date

Spcifie la valeur maximale pour un


lment d'entre

min**

number date

Spcifie la valeur minimale pour un


lment d'entre

multiple**

multiple

Attribut boolen qui spcifie que


l'utilisateur peut entrer plusieurs valeurs

pattern**

regexp

Fournit un format (une expression


rgulire) pour le champ de saisie.
La valeur de l'lment d'entre est
compare l'expression
(suite)

76 | Leon 3
Tableau3-5
(suite)

Attribut

Valeur

Description

placeholder**

text

Affiche un mot cl ou une phrase courte


qui dcrit la valeur attendue dans un
champ de saisie, tels que E-mail pour un
champ de saisie de courrier lectronique.
L'espace rserv disparat lorsque
l'utilisateur entre des donnes

readonly

readonly

Limite un champ de saisie en lecture


seule

required**

required

Attribut boolen qui ncessite qu'un


champ soit renseign avant d'envoyer le
formulaire

size

number

Spcifie la largeur d'un lment d'entre,


en nombre de caractres

src

URL

Spcifie l'adresse Web de l'image


utilise comme bouton d'envoi. Utilis
uniquement pour type=image

step**

number

Spcifie le nombre d'intervalles accept


pour un lment d'entre. Peut tre
utilis avec les attributs max et le min
pour crer une plage de valeurs
Par exemple, si vous crez une barre
de dfilement pour l'entre. Si vous
dfinissez step=3, chaque fois que
l'utilisateur dplace le curseur, la valeur
d'entre augmente ou diminue de 3

type

button, checkbox, color,


date, datetime, datetimelocal, email, file, hidden,
image, month, number,
password, radio, range,
reset, search, submit, tel,
text, time, url, week

Spcifie le type d'lment d'entre


afficher

value

text

Spcifie la valeur d'un lment d'entre

width

pixels

Spcifie la largeur d'un lment d'entre.


Utilis uniquement avec l'entre
type=image

**Nouveaut de HTML5

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 77

DCOUVERTE DE LA CRATION DE FORMULAIRE, DES ATTRIBUTS INPUT ET DES


VALEURS
Pour crer un formulaire, utilisez les balises de dbut et de fin <form>. L'intgralit du
contenu et des champs du formulaire sont placs entre les deux balises <form>. La plupart
des formulaires incluent galement l'attribut id dans la balise de dbut, comme suit:
<form id="keyword">
<contenu et champs>
</form>

L'lment fieldset est utilis avec de nombreux formulaires pour regrouper les lments
connexes. La balise <fieldset> dessine une zone autour des lments individuels et/ou
autour de l'ensemble du formulaire, comme illustr dans la figure3-18.
Figure3-18
L'lment fieldset regroupe
des lments associs dans
un formulaire et ajoute une
bordure

Si le formulaire est inclus dans un document HTML avec d'autres lments, vous
pouvez utiliser la balise <div> au dbut et la fin du formulaire pour le sparer des autres
contenus. La balise <div> vous permet galement d'inclure la mise en forme en ligne, si
le formulaire utilise des balises pour aligner les champs verticalement courts et simples,
et que vous ne voulez pas crer de feuille de style CSS intraligne. La balise <div> utilise
l'attribut id et apparat avant la premire balise <form>. L'lment label affiche l'tiquette
pour chaque champ. Voici un exemple de balise pour un formulaire trs simple:
<div id="contact-form"
style="font-family:'Arial Narrow','Nimbus Sans
L',sans-serif;">
<form id="contact" method="post" action="">
<fieldset>
<label for="name">Nom</label>
<input type="text" name="name" />
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email" />
</fieldset>
</form>
</div> <!-- end of contact-form -->

Le formulaire est illustr dans la figure3-19.

78 | Leon 3
Figure3-19
Formulaire trs simple

Observons prsent certains des nouveaux attributs et certaines des nouvelles valeurs de
HTML5. Bien que cette section ne traite pas de tout ce qui rpertori dans les tableaux 3-4
et 3-5, elle dcrit et montre des exemples de certains des attributs et des valeurs les plus
couramment utiliss.
L'attribut required oblige renseigner un champ pour soumettre le formulaire. L'attribut
email (illustr dans l'exemple prcdent) oblige l'utilisateur entrer une adresse e-mail. Le
navigateur alertera l'utilisateur avec un message d'erreur afin de rsoudre ces problmes.
Voici un exemple d'lment d'entre avec les attributs required et email:
<input type="email" required />

Pour rendre un formulaire plus convivial, ajoutez du texte d'espace rserv. Le texte de
l'espace rserv correspond au texte qui s'affiche l'intrieur d'un champ d'entre lorsque
le champ est vide. Il permet aux utilisateurs de comprendre le type d'informations entrer
ou slectionner. Lorsque vous cliquez sur un champ d'entre ou que vous y accdez
l'aide la touche de tabulation et que vous commencez taper, le texte entr remplace le
texte de l'emplacement rserv. Voici un exemple d'attribut placeholder:
<input name="fName" placeholder="Prnom" />

L'attribut pattern offre un format (expression rgulire) pour un champ d'entre qui est utilis
pour valider le contenu du champ. Supposons par exemple que vous ayez un champ d'entre
obligatoire pour ID d'employ. Chaque ID d'employ commence par deux lettres majuscules
suivies de quatre chiffres. Vous devez utiliser un champ de saisie de texte avec les attributs
required et pattern pour vous assurer que (1) le champ est renseign lorsque l'utilisateur
clique sur le bouton d'envoi et (2) qu'il contient une valeur qui correspond au format correct
pour un ID d'employ. Si l'utilisateur survole le champ, le message de l'attribut title (que vous
avez ajout sparment) s'affiche. Voici un exemple d'attribut pattern:
<input type="text" id="empID" name="EmployeeID"
required pattern="[A-Z]{2}[0-9]{4}"
title="ID d'employ commenant par deux lettres majuscules suivies
de quatre chiffres">

Vous pouvez utiliser l'attribut pattern avec ces types <input>: text, search, url, telephone,
email, et password.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 79

L'lment datalist vous permet de prsenter l'utilisateur une liste droulante contenant
des options slectionner. Seules les options de la liste peuvent tre slectionnes.
Alternativement, vous pouvez insrer type="text" dans l'lment input pour crer une zone
de texte dans laquelle l'utilisateur entre du texte. L'exemple suivant permet l'utilisateur
de choisir parmi l'un des trois pays:
<input id="country" name="country" type = "Text"
size="30" list="countries" />
<datalist id="countries">
<option value="tats-Unis">
<option value="Canada">
<option value="Royaume-Uni">
</datalist>

La valeur search de l'attribut type vous permet de crer une fonction de recherche pour une
page Web. Voici un exemple de la balise:
<form>
<input name="search" required>
<input type="submit" value="Search">
</form>

Enfin, l'attribut autofocus dplace le focus vers un champ d'entre particulier lorsque la
page Web est charge. Comme exemple autofocus, donnez celui d'une pageWeb d'un
moteur de recherche lorsque le point d'insertion se positionne automatiquement dans le
champ d'entre pour vous permettre d'entrer des termes de recherche sans devoir cliquer
d'abord dans le champ. Voici un exemple de balise pour placer le focus sur un champ
nomm fname quand une page se charge:
<input type="text" name="fname"
autofocus="autofocus" />
autofocus a historiquement t gre par JavaScript, et si un utilisateur dsactive JavaScript
dans un navigateur Web, la fonction autofocus ne fonctionne pas. Pour contourner ce
problme, l'attribut autofocus HTML5 est pris en charge par tous les principaux navigateurs
et se comporte de faon constante sur tous les sites Web.

CRER UN FORMULAIRE WEB SIMPLE


PRPAREZ-VOUS. Pour crer un formulaire Web simple, effectuez les oprations suivantes:
1. l'aide d'un diteur HTML ou d'un outil de dveloppement d'application et d'un
navigateur Web, crez un simple formulaire Web avec la balise suivante:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contactez-nous</title>
</head>
<body>
<div id="contact-form">
<form id="contact" method="post" action="">
<fieldset>
<label for="custname">Nom</label>
<input type="text" id="custname" />

80 | Leon 3
<label for="email">Email</label>
<input type="email" id="email" />
<label for="phone">Numro de tlphone</label>
<input type="text" id="phone" />
<label for="message">Questions ou
commentaires</label>
<textarea name="message"></textarea>
<input type="submit" name="submit" id="submit"
value="Soumettre" />
</fieldset>
</form>
</div><!-- End of contact-form -->
</body>
</html>

2. Enregistrez le fichier sous le nom L3-WebForm-orig.html. La version rendue est indique dans la figure 3-20.

3. Le formulaire Web n'est pas structur. Idalement, vous devez utiliser CSS pour appliquer l'alignement, mais comme vous ne connaissez pas encore CSS, vous pouvez
appliquer une solution de contournement pour aligner les champs verticalement. Une
mthode consiste ajouter des balises de dbut et de fin <fieldset> autour de chaque
paire tiquette/entre. Cela permet d'aligner les champs verticalement et d'ajouter
des zones autour. Si vous utilisez les balises <p> d'ouverture et de fermeture au lieu
des balises <fieldset> cela permet d'obtenir la mme chose mais sans ajouter de zones.
Pour cet exercice, utilisez les balises <p>. La figure 3-21 montre le mme formulaire
Web avec des balises <p> autour des paires tiquette/entre, y compris le champ de
commentaires.

Figure3-20
Dbut d'un formulaire Web

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 81


Figure3-21
Formulaire Web utilisant
des balises <p> pour aligner
verticalement les champs

4. Ajoutez du texte d'espace rserv tous les champs. Le rsultat doit ressembler la
figure 3-22 s'il s'affiche dans le navigateur Web Mozilla Firefox.

5. Enregistrez le fichier sous le nom L3-WebForm-placeholders.html.


6. Laissez l'outil d'dition et le fichier ouverts si vous passez l'exercice suivant au cours
de cette session.

Figure3-22
Formulaire Web avec des
espaces rservs ajouts
pour chaque champ

PLUS DINFORMATIONS
Pour en savoir plus sur les attributs d'lment d'entre de HTML5, visitez le site W3C.org Web sur
http://bit.ly/I1PW3P.

Prsentation de la validation
HTML5 fournit de nouveaux attributs qui valident les champs de formulaire Web
lorsque les utilisateurs entrent des donnes ou lorsqu'ils cliquent sur le bouton
d'envoi. Parmi les attributs on trouve, entre autres, include required, email et pattern.

82 | Leon 3

La validation dsigne le processus qui permet de s'assurer que les informations saisies
dans un formulaire Web sont dans un format correct et sont utilisables avant de transmettre les donnes au serveur. Parmi les lments vrifis lors de la validation on trouve:
Les champs obligatoires sont vides
Les adresses e-mail sont valides
Les dates sont valides
Le texte n'apparat pas dans un champ numrique ou vice versa
Avec HTML4.01 et les spcifications prcdentes, vous aviez souvent besoin de
beaucoup de JavaScript ou de script dans un autre langage pour crer des rgles
personnalises de validit et des messages de rponse, ou pour dterminer si un lment
n'est pas valide.

PRT POUR LA CERTIFICATION

Comment HTML5 valide


les donnes entres dans
un formulaire par un
utilisateur?
2.5

En HTML5, plusieurs des types d'lment d'entre prsents dans la dernire section
offrent une validation automatique des entres, ce qui signifie que le navigateur vrifie
les donnes saisies par l'utilisateur. C'est ce que l'on appelle la validation ct client, car
les donnes d'entre sont valides avant d'tre soumises au serveur. (Dans le cas o le
serveur valide les donnes reues d'un formulaire de saisie, on parle de validation ct
serveur.) Si lutilisateur entre un type de donnes incorrect dans un champ, par exemple
une adresse e-mail dans un champ rserv lattribut url, le navigateur invite lutilisateur
entrer uneURL valide. Regardons des exemples des messages d'erreur par dfaut qui
sont gnrs lors de la validation automatique.
L'attribut required vite le problme de champs vides alors qu'ils devraient tre renseigns.
Lorsqu'un utilisateur ignore un champ obligatoire et clique sur le bouton d'envoi, un
message d'erreur s'affiche comme illustr dans la figure3-23. Cet exemple utilise le
navigateur Web Mozilla Firefox.

Figure3-23
Message d'erreur dans le
navigateur Firefox pour un
champ obligatoire

HTML5 propose galement la validation des adresses Web entres dans des champs
avec la construction <input type="url"> et des numros entrs dans des champs avec la
construction <input type="number">. Si vous utilisez les attributs min et max avec type =
"number", vous recevrez un message d'erreur partir du navigateur si vous entrez un
nombre qui est trop petit ou trop grand.
Enfin, l'attribut pattern empche l'utilisateur d'entrer des donnes qui ne respectent pas
l'expression pattern. Dans cet exemple, l'attribut pattern valide un code postal cinq
chiffres:
<input type= "text" name= "zipcode"
pattern= "[0-9] {5}"
title= "Code postal cinq chiffres" />

Si les donnes du champ Code postal sont errones dans les rsultats de navigateur
Firefox, un message d'erreur s'affiche comme indiqu dans la figure 3-24.

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 83


Figure3-24
Message d'erreur dans le
navigateur de Firefox lorsque
vous entrez un modle
incorrect

Comme indiqu prcdemment, aucune balise n'est requise pour activer la validation
des formulaires HTML5: elle est active par dfaut. Pour la dsactiver, utilisez l'attribut
novalidate pour les champs de saisie spcifiques.
A JOUTER DES CHAMPS DE VALIDATION UN FORMULAIRE WEB

REMARQUE

Vous devez galement


valider les formulaires
Web comme vous
le faites dans un
document HTML
ordinaire en utilisant le
service W3C Markup
Validation http://
validator.w3.org.

PRPAREZ-VOUS. Pour ajouter des champs de validation un formulaire Web, effectuez


les oprations suivantes:
1. l'aide d'un diteur HTML ou d'un outil de dveloppement d'application, ouvrez
L3-WebForm-placeholders.html.
2. Enregistrez le fichier sous le nom L3-WebForm-valid.html.
3. Ajoutez l'attribut required pour le champ email, comme suit:
<p>
<label for="email">Email</label>
<input type="email" name="email" required
placeholder="Adresse e-mail">
</p>

4. Ajoutez l'attribut pattern au champ Tlphone. L'expression doit restreindre l'entre


l'indicatif rgional et au numro de tlphone, sous la forme XXX-XXX-XXXX,
commesuit:
<p>
<label for="phone">Numro de tlphone</label>
<input type="text" name="phone" pattern="[0-9]{3}[0-9]{3}-[0-9]{4}" placeholder="Numro de tlphone">
</p>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Tapez le texte dans chaque
champ d'entre sauf le champ e-mail et cliquez sur le bouton Envoyer. Avez-vous reu
un message d'erreur qui vous invite entrer une adresse e-mail?
6. Tapez le texte dans chaque champ nouveau, y compris le champ e-mail, mais cette
fois entrez un numro de tlphone sans l'indicatif rgional, puis cliquez sur Envoyer.
Avez-vous reu une erreur concernant le champ numro de tlphone?
7. Fermez le fichier, l'outil d'dition ou l'outil de dveloppement d'application et le
navigateur Web.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
HTML5 introduit plusieurs nouveaux lments pour organiser le contenu et les formes.
Ils reprsentent le nouveau balisage smantique qui est une partie importante du
HTML5.
Le balisage smantique utilise des noms de balises intuitifs, ce qui facilite la gnration
et la modification des documents HTML, et l'interprtation par les navigateurs Web et
les autres programmes.
Parmi les nouveaux lments de HTML5 en termes de structuration et d'organisation
du contenu dans un document HTML, on trouve header, footer, section, nav, article et
aside. Ces lments rduisent le nombre de balises div requises dans un document.
(suite)

84 | Leon 3

Les tableaux et les listes permettent de structurer des informations spcifiques dans
les documents HTML. Un tableau contient des lignes et des colonnes et affiche les
donnes dans une grille. En HTML, vous pouvez crer des listes tries et non tries.
Chaque lment d'une liste trie est marqu par un nombre ou une lettre. Une liste
non trie est une liste puces.
Les dveloppeurs utilisent des formulairesWeb comme interface pour collecter
des informations sur le site Web et sur les utilisateurs de l'application cliente. Les
lments d'entre HTML servent crer l'interface d'un formulaire et s'assurer
que les renseignements sont recueillis auprs des utilisateurs de manire cohrente.
La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart
des formulaires, requirent des entres spcifiquement mises en forme. Les nouveaux
attributs d'entre et de formulaire HTML5 sont intuitifs, faciles utiliser et remplacent
un grand nombre de scripts qui taient obligatoires en HTML 4.01 et dans les versions
antrieures.
La validation vrifie que les informations entres dans un champ de saisie d'un formulaire
Web sont dans un format correct et utilisables avant d'envoyer les donnes au serveur.
HTML5 fournit de nouveaux attributs qui valident les champs de formulaire Web
lorsque les utilisateurs entrent des donnes ou lorsqu'ils cliquent sur le bouton
d'envoi. Parmi les attributs on trouve, entre autres, required, email et pattern.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. Une table
HTML contient des lignes et des colonnes et sert organiser et
afficher les informations sous forme de grille.
2. Class et ID sont des attributs globaux
, ce qui signifie qu'ils peuvent tre
utiliss avec n'importe quel lmentHTML.
3. Une liste

trie

classe par dfaut les entres de la liste l'aide de nombres.

4. Une liste

non trie

affiche les entres sous forme de liste puces.

5. L'lmentHTML5 nav
gnralement des boutons.

prsente une liste (ou menu) de commandes,

6. L' entre (input)


de formulaire correspond aux informations qu'un utilisateur saisit
dans les champs d'un formulaireWeb ou d'une application client.
7. L'attribut required
rend obligatoire la saisie dinformations dans un champ
avant de soumettre le formulaire.
8. L' emplacement reserve(placeHolder)
au texte s'affiche l'intrieur d'un champ d'entre lorsque le
champ est vide. Il permet aux utilisateurs de comprendre le type d'informations
entrer ou slectionner.
9. La validation
dsigne le processus qui permet de s'assurer que les informations
saisies dans un formulaire Web sont dans un format correct et sont utilisables avant
de transmettre les donnes au serveur.
10. L'attribut autofocus
dplace le focus vers un champ d'entre particulier
lorsque la page Web est charge.

Questions choix multiples

Entourez la lettre correspondant la meilleure rponse.


1. Quel lmentHTML5 dfinit les sous-sections dun document, tels que les chapitres,
les parties dune thse ou parties dune page Web dont le contenu est distinct?
a. aside
b. section
c. header
d. article

Cration de linterface utilisateur avec HTML5: Organisation, saisie et validations | 85

2. Quel lment HTML5 dfinit une partie d'un document HTML reprsentant une
composition autonome indpendante du reste du contenu dans le document et qui
peut tre syndiqu?
a. aside
b. section
c. header
d. article
3. Quel lmentHTML5 sert afficher le contenu li au sujet actuel, mais qui est
susceptible d'interrompre le flux du document s'il demeure au sein du texte?
a. aside
b. section
c. header
d. article
4. Quel attributHTML5 offre un format (expression rgulire) pour un champ d'entre
qui est utilis pour valider le contenu du champ?
a. pattern
b. autofocus
c. required
d. placeholder
5. Parmi les propositions suivantes, laquelle nest pas prise en compte par la validation
et ne gnre pas de message derreur, par dfaut, en cas derreur?
a. Les champs obligatoires sont vides.
b. Les adresses e-mail sont valides.
c. Le destinataire de ladresse e-mail est incorrect.
d. Un champ numrique contient du texte ou vice-versa.
6. Parmi les propositions suivantes, laquelle est une utilisation pratique dun formulaire
Web?
a. Recueillir les coordonnes dun utilisateur
b. Recueillir les commentaires des utilisateurs aprs la publication dun article sur un
site Web
c. a et b
d. Ni a ni b
7. Parmi les attributs form suivants, lesquels sont nouveaux dansHTML5? (Choisissez
toutes les rponses applicables.)
a. autocomplete poursuit la saisie automatiquqement
b. target
c. method
d. novalidate
8. Quelle syntaxe avec lattribut pattern devez-vous utiliser pour entrer un code produit
compos de trois chiffres, spars par un tiret et suivis dune seule lettre en minuscule?
a. [a-z]{1}-[0-9]{3}
b. [0-9]{3}-[a-z]{1}
c. [A-Z]{3}-[0-9]{1}
d. [0-9]{1}-[a-z]{3}
9. Parmi les propositions suivantes, laquelle dsigne laffichage dun mot cl ou dun
groupe de mots qui dcrit la valeur attendue dun champ dentre, et qui disparat
lorsque lutilisateur renseigne le champ?
a. label
b. placeholder
c. title
d. email

86 | Leon 3

10. Quel est le format de la baliseHTML5 qui valide une adresse e-mail?
a. <input label="email" name="URL">
b. <form id="email">
c. <label for="email">Email</label>
d. <input type = "email" name = "email">

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettreF si elle est fausse.
VF1.
Dans un tableau, llment tfoot doit safficher avant llment tbody.
Vous pouvez utiliser des chiffres et des lettres pour chaque entre
VF2.
dunelistetrie.
VF3.
Vous pouvez spcifier la hauteur dun lment dentre laide de
lattributsize.
L'lment label affiche la lgende, ou le titre d'un tableau. capcha
VF4.
VF5.
L'lment nav dfinit un bloc de liens de navigation.
valuation

des comptences
Scnario3-1: Balisage dun article de journal
Sally Rowe, contrleur de documents chez Malted Milk Media, souhaite publier une
srie darticles sur lintranet de la socit portant sur la scurit et la gestion des versions
de documents. Elle doit crer les grandes lignes du balisageHTML5 pour un article
paratre dans le bulletin mensuel en ligne cr par lun des dveloppeurs Web. Chaque
article comportera un titre et un sous-titre, plusieurs paragraphes de texte, son nom et la
date de larticle dans le pied de page. quoi ressemblera le balisage de son article?

Scnario3-2: Affichage de longs tableaux enHTML


Vince gnre des rapports financiers pour le Vice-prsident des oprations financires
chez Momentum Strategies, un cabinet de relations publiques spcialis dans les
campagnes politiques. Vince imprime rgulirement des tableaux de 2ou 3pages et
distribue des exemplaires aux membres de la direction. Il souhaite publier ces rapports
dans une zone scurise sur lintranet de la socit, et avec des lignes de donnes spares
des titres de colonne avec la ligne des totaux la fin. Il voudrait savoir comment prsenter
les tableaux correctement dansHTML5. Que pouvez-vous lui dire?
valuation

de la matrise des concepts


Scnario3-3: Cration dun glossaire
Waylon est un stagiaire qui travaille sur une dissertation. Son formateur demande
chaque tudiant dappliquer la dissertation une mise en forme compatible avec un
affichage sur le Web. Waylon souhaite inclure un glossaire la fin de la dissertation,
maisil a du mal produire un rsultat satisfaisant avec une liste non trie. Quel balisage
serait mieux adapt au glossaire de Waylon?

Scnario3-4: Utilisation des types dentre appropris dans un formulaireWeb


Margie est en train de crer et de tester un formulaireWeb qui comporte entre autres un
champ pour ladresse e-mail, un champ pour ladresse Web et un champ pour le code
postal. Lorsque certains de ses collgues testent le formulaire, elle remarque que trs
souvent ils entrent par erreur ladresse e-mail dans le champ rserv ladresse Web,
etparfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
rserv au code postal. Elle ne veut pas utiliser de syntaxe avec la proprit pattern
parcequ ses yeux cest trop compliqu. Quel autre type dentre peut-elle utiliser?

Prsentation des notions


essentielles sur les feuilles
de style en cascade
CSS: Flux de contenu,
positionnement et style

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

MTAObjectif de l'examen

Prsentation des notions


Comprendre les principes de
essentielles sur les feuilles
base des feuilles de styleCSS
de style en cascade CSS

MTA Numro de l'objectif


de l'examen
3.1

TERMES CLS
espacement fixe

flux de bloc

cadre englobant

flux inclus

classe

police

CSS3

positionnement absolu

dbordement de dfilement

positionnement flottant

dbordement masqu

proprit de la famille de polices

dbordement visible

rgles

dclaration

sans serif

feuilles de style en cascade (CSS)

slecteur

Un concepteur de votre socit, Malted Milk Media, a ralis une simulation de la


conception d'une application en ligne pour un nouveau client, Trusty Lawn Care, Inc.
Vous avez t invit travailler sur le projet et vous avez besoin de comprendre ce
que CSS peut faire pour vous et comment en tirer le meilleur parti.
Prsentation

L'ESSENTIEL

des notions essentielles sur les feuilles de style en cascade CSS


CSS est un outil essentiel pour la ralisation d'une grande partie de l'apparence et
mme du comportement des applications mobiles modernes ainsi que des sites Web.
Pour crer la partie frontale d'une application ou d'un site Web et surtout conserver
son aspect correct et frais au fur et mesure que des modifications fonctionnelles
sont apportes l'application ou au site Web pendant sa dure de vie, vous devez bien
comprendre CSS et comment il fonctionne conjointement avec d'autres outils dont
HTML et JavaScript. Vous serez galement beaucoup plus laise pour estimer leffort
requis pour certains projets lorsque vous aurez assimil les concepts de style de
l'interface utilisateur comme CSS les utilise.
87

88 | Leon 4

Prenons l'exemple du site Web de Trusty Lawn Care. Les mots Trusty Lawn Care
setrouvent dans la partie suprieure: il sagit d'un titre ou d'un en-tte. L'aspect dtaill
de cet en-tte peut faire apparatre diffrentes lettres en italique, en gras ou mme en
couleur; les lettres auront une taille particulire et seront choisies partir d'une police
spcifique. Les dveloppeurs Web expriments disposent galement de nombreux effets
spciaux plus subtils. Tous ces lments de prsentation, par opposition au contenu, font
partie du style du site Web. Les feuilles de style en cascade (CSS) sont un langage qui
dfinit le style des lments HTML.

PRT POUR LA CERTIFICATION

Quel est l'objectif de CSS?


3.1

REMARQUE

Que signifie en cascade ici? Un des principes originaux de HTML est que l'apparence
d'un lment est contrle non seulement par CSS, mais aussi par la faon dont l'utilisateur
configure son navigateur ou ordinateur de bureau. Par exemple, un utilisateur final
malvoyant peut demander que le contenu soit affich dans une taille de police
particulirement grande. Dans la thorie HTML, la dfinition de l'apparence se rpartit
entre ces diffrentes feuilles de styles.
Il est courant pour les concepteurs Web d'appeler feuille de style ou CSS le fichier
qui contient des rgles CSS. Certains codeurs de style et de nombreux programmeurs
disent source CSS ou fichier CSS pour dsigner la mme chose.
Comme vous l'avez appris dans les leons prcdentes, HTML structure le contenu et CSS
le formate. CSS3 est la version de CSS qui correspond HTML5 et les navigateurs Web les
plus modernes prennent en charge CSS3. La base trs intressante de ce manuel est que les
outils modernes s'appuient sur les mmes normes pour construire des applications mobiles:
HTML, CSS et JavaScript vous permettent galement de crer des applications.
Le bon point propos de CSS3 est qu'il est rtro-compatible avec les versions prcdentes
de CSS, donc vous pouvez commencer utiliser CSS3 avec vos pages Web existantes sans
avoir changer quoi que ce soit. CSS3 ajoute gnralement des caractristiques et des
fonctionnalits au lieu de modifier la faon dont CSS a toujours t utilis.
Certains des ajouts importants CSS3 sont les slecteurs, le modle de bote, les
transformations 2D et 3D, les animations et la disposition sur plusieurs colonnes. CSS3 vous
permet galement de crer des bordures arrondies, d'ajouter des ombres aux botes et au
texte, d'utiliser plusieurs images dans un arrire-plan et d'employer la police de votre choix,
qu'elle se trouve sur l'ordinateur de l'utilisateur ou non.
Ces sujets sont abords dans cette leon ou les leons5 et6 de ce manuel. Tout comme
HTML5, CSS3 est encore en cours d'laboration au moment de la rdaction de ce document.
Cependant, parce que la plupart des navigateurs prennent dj en charge de CSS3, de
nombreux dveloppeurs intgrent dj CSS3 dans leurs sites Web et applications.

Utilisation des outils appropris


Vous pouvez crer des fichiers CSS entirement partir d'un simple diteur de texte tel
que le Bloc-notes. Cependant, de nombreux diteurs HTML et outils de dveloppement
d'applications fournissent une fonctionnalit de dbogage qui vous permet de dtecter
rapidement des erreurs dans le code et le balisage. Ces outils comprennent gnralement
aussi un bouton pour ouvrir un navigateur Web, plutt que d'avoir le faire manuellement.
Lorsque vous commencez utiliser CSS, dcidez de quels outils d'dition vous avez
besoin: vous pouvez utiliser le balisage et le code source l'aide de n'importe quel
programme, du Bloc-notes intgr Windows un environnement de dveloppement
intgr (IDE) spcifique un environnement mobile particulier.
Tout comme lorsque vous utilisez HTML, vous aurez au moins deux applications ouvertes
en mme temps:
Un diteur (ouvert avec une source CSS et un document HTML), qui pourrait tre le
Bloc-notes Microsoft Visual Studio, Microsoft Expression Blend, Expression Studio,
Bloc-notes ++ pour Windows ou textwrangler pour Mac OS, Microsoft Web Matrix
ou un certain nombre d'autres outils.
Un navigateur Web, comme Internet Explorer9, Firefox, etc.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 89

REF

Dans la leon2, vous


avez appris les bases
de la modification de
code source HTML et
l'affichage du rsultat.
Utilisez les mmes
comptences pour
travailler avec CSS.

Vous pouvez utiliser tous les outils avec lesquels vous tes l'aise, mais le Bloc-notes a ses
limites et n'a pas t conu comme un diteur complet. De nombreux diteurs HTML et les
outils de dveloppement d'applications incluent des fonctionnalits qui font gagner du temps
comme le dbogage, les numros de ligne et un bouton pour ouvrir un navigateur Web.

Exploration du lien entre HTML et CSS


L'lment <link> lie un fichier HTML un fichier CSS. Cette section explique brivement
les concepts fondamentaux de l'application de style avec CSS et comment les fichiers
HTML et CSS sont lis.
Lorsque vous crez une page HTML et que vous souhaitez extraire des styles partir d'un
fichier CSS, vous devez inclure un lment <link> dans le fichier CSS dans la page HTML.
(Vous pouvez rfrencer plusieurs fichiers CSS dans une page HTML.) Voici un exemple
de syntaxe correcte pour un <link>:
<link href = "nomdefichier.css" rel = "stylesheet"
type = "text/css">

Un fichier HTML peut avoir un nom comme monprojet.html ou fichier1.htm; un nom de


fichier CSS typique est monprojet.css. L'aspect de leur contenu est aussi trs diffrent:
la source HTML est organise autour de balises, tandis que, comme vous le verrez
ci-dessous, le CSS est une squence de rgles.

PRT POUR LA CERTIFICATION

Comment crer du
contenu l'aide de HTML
et lui appliquer un style
avec CSS?
3.1

Les organisations commerciales utilisent souvent des systmes de fichiers spcifiques.


Par exemple, vous pourriez dvelopper une source CSS qui rpond des exigences
spcifiques. Au cours du dveloppement, vous faites rfrence votre travail en tant que
... href = "mytheme.css" ... Toutefois, l'quipe plus large peut ne pas indiquer clairement
qu'elle part du principe qu'elle attend une rfrence comme ... href = "styles/mytheme.css" ...
Il est important de reconnatre que si vous orthographiez mal le nom du fichier CSS,
ou stylesheet" ou text/css dans le balisage HTML de la page, la page Web rsultante
n'applique aucun style du fichier CSS. La page HTML traite le lien CSS comme tant
simplement manquant. Le comportement par dfaut de tous les principaux navigateurs
Web consiste ne pas signaler ou avertir des fautes d'orthographe.
UNE UTILISATION SIMPLE DE CSS AVEC HTML
PRPAREZ-VOUS. Il existe plusieurs faons d'appliquer un style une page HTML avec
les styles CSS. Voici une mthode de base pour commencer:
1. Utilisez un diteur de texte ou un outil de dveloppement d'applications pour crer un
fichier dans votre rpertoire appel e1.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Trusty Lawn Care, Inc.</title>
<link href = "e1.css" rel = "stylesheet"
type = "text/css">
</head>
<body>
<h1>Trusty Lawn Care, Inc.</h1>
<p id = "slogan">Nous vous permettons de rester vert.</p>
< p>Trusty Lawn Care peut permettre votre pelouse de conserver un aspect luxuriant et
vigoureux toute l'anne. Nous utilisons uniquement des engrais, paillis et terreaux naturels
pour amliorer la sant de votre pelouse.</p>
</body>
</html>

90 | Leon 4

2. Crez un second fichier dans le mme dossier que la source .html; nommez-le e1.css
et utilisez le contenu suivant:
#slogan {
font-size: 20px;
color: green;
font-style: italic;
}

3. Ouvrez le fichier e1.html dans un navigateur Web. La page doit se prsenter comme
dans la figure4-1.

Figure4-1
Page d'accueil la plus simple
possible pour Trusty Lawn
Care

Dans cet exemple, le fichier HTML (e1.html) dfinit le contenu et la structure: il contient
contient les mots Trusty Lawn Care, Inc., il identifiecinq mots comme faisant partie
d'un slogan et ainsi de suite. Le fichier CSS (e1.css) fournit le style de ce contenu. Pour
que certains caractres s'affichent en vert, le fichier CSS n'utilise pas de peinture verte ou
de lumire verte, mais plutt le mot green pour indiquer au navigateur quelle couleur
utiliser pour le slogan. Les fichiers sont lis l'aide de l'lment <link> du fichier HTML.

REMARQUE

PRT POUR LA CERTIFICATION

Quels sont les principes


essentiels de l'application
de style CSS?
3.1

Vous pouvez spcifier la couleur l'aide d'un nom ou d'une valeur hexadcimale. Par
exemple, pour utiliser la couleur bleue standard, le nom de la couleur est blue et la
valeur hexadcimale est #0000FF. Vous pouvez consulter une liste des noms de couleur
et de leurs valeurs l'adresse http://www.w3schools.com/cssref/css_colornames.asp.
Nous allons essayer de crer une page Web et un fichier CSS, puis de modifier le fichier
CSS pour voir comment les modifications affectent la page Web. Vous serez en mesure de
comprendre par vous-mme comment HTML et CSS travaillent ensemble pour produire
des crans dans votre navigateur Web ou une application mobile.
CRATION D'UNE PAGE WEB ET D'UN FICHIER CSS DE BASE
PRPAREZ-VOUS. Pour explorer le style CSS de base, procdez comme suit:
1. Crez une page Web nomme e1.html et un fichier CSS nomm e1.css l'aide de la
balise indique prcdemment.
2. Pointez votre navigateur Web sur e1.html pour afficher la page rendue.
3. Modifiez e1.css pour que le slogan s'affiche dans une police plus grande, telle que
25px. Modifiez la couleur en remplaant green par #00CC00. Modifiez le style en
remplaant italic par bold. Aprs avoir apport chaque modification, confirmez que
l'affichage correspondant est mis jour comme vous le souhaitez. Votre page Web
finale doit ressembler la figure4-2.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 91
Figure4-2
La page Web de Trusty Lawn
Care modifie

4. Fermez les fichiers HTML et CSS. Laissez l'outil d'dition et le navigateur Web ouverts
si vous passez immdiatement la section suivante.

Il est essentiel que vous soyez l'aise avec les notions de base de CSS. Si vous avez du
mal comprendre les principes de base lorsque vous parcourez les leons et les exercices,
nous vous conseillons de consulter quelques didacticiels CSS en ligne, tels que ceux
proposs sur le site Web W3Schools.com.

Sparation du contenu et du style


Dans des documents HTML, il est courant de conserver les fichiers HTML qui incluent
le contenu et de faire simplement rfrence un fichier CSS distinct qui contient le code
pour affecter un style au contenu dans les fichiers HTML. Cela vous permet de modifier
les styles dans un seul fichier (le fichier CSS) et de voir ces modifications de style
apportes dans tous les fichiers HTML automatiquement. Lorsque vous travaillez sur un
petit fichier HTML autonome dans lequel les styles ne vont probablement pas changer,
ilest acceptable d'ajouter le code de style CSS dans le fichier HTML lui-mme.
Vous pouvez crer des pages HTML pures, c'est--dire avec un seul fichier source
HTML et aucun fichier CSS. HTML a la possibilit de spcifier la mise en italique, la
couleur, etc. Parfois, les sites Web simples n'emploient pas CSS ou ils l'utilisent dans une
syntaxe inline.

REMARQUE

PRT POUR LA CERTIFICATION

Comment les sites Web


grent-ils le contenu et
le style?
3.1

Mme quelque chose d'aussi simple qu'un bloc de texte de couleur verte peut s'obtenir
de plusieurs manires diffrentes. Les manuels et rfrences basculent souvent entre ces
diffrents styles avec peu d'explications. Vous pouvez voir <div style = color:green
en HTML, ou div {color:green en CSS, ou <style > div {color:green </
style> en HTML, ou mme des combinaisons plus inhabituelles. Le premier s'appelle
souvent inclus, pour souligner que la spcification CSS apparat dans les mmes
expressions HTML qui dfinissent la structure et le contenu.
Cependant, la sparation des contenus HTML et CSS dans des fichiers diffrents est ellemme un concept fondamental, que vous devez comprendre. La sparation du contenu
et du style est une phrase souvent rpte par ceux qui travaillent sur les sites Web
et applications mobiles. Le contenu est gr en tant que HTML et le style en tant que
CSS. Cette division du travail reflte souvent l'organisation des quipes de projet: des
personnes diffrentes sont responsables du contenu et du style. La sparation du HTML et
CSS permet deux personnes de travailler simultanment sans interfrer l'une avec l'autre.
En outre, la sparation du contenu et de la prsentation vous aide mieux respecter
HTML5, qui devient la nouvelle norme pour les pages et les applications Web.

92 | Leon 4

REMARQUE

Cette leon prsente les correspondances entre CSS et une page Web. N'oubliez pas que
la page Web dpend d'une configuration plus grande, qui inclut en gnral au moins
un fichier HTML et un navigateur. Ne pensez pas que vous pouvez apprendre CSS
dans un isolement complet par rapport aux autres parties. Une seconde correspondance
concerne CSS et l'affichage d'une application mobile particulire dveloppe avec ce
CSS. Mme si votre but lorsque vous dcouvrez et utilisez CSS peut tre de dvelopper
des applications, toutes les instructions de ce chapitre parlent de pages Web. Les
outils pour applications mobiles voluent rapidement et ne sont pas aussi normaliss
que le navigateur Web Internet Explorer (IE). Par consquent, tous les exemples
seront affichs avec la version9 d'IE. Tout ce que vous apprenez sur CSS s'applique
galement la programmation des applications.

Prsentation des slecteurs et des dclarations


Une fois que vous tes l'aise avec ces bases, vous tes en mesure d'tudier les
fichiers source CSS de faon plus approfondie. En gnral, un fichier CSS contient
une squence de spcifications de style ou rgles et peut inclure une rgle @import
initiale. L'ordre des rgles sera important dans les leons ultrieures.
Chaque rgle individuelle comprenddeux parties principales: un slecteur et une ou plusieurs
dclarations. Le slecteur est habituellement l'lment HTML auquel vous voulez appliquer
un style. La dclaration est le style dun slecteur spcifique. Une dclaration possde une
proprit, c'est--dire un attribut de style et une valeur. La syntaxe gnrale d'une dclaration se
compose d'un mot-cl de proprit suivi d'un signe deux-points et un espace, puis une valeur
suivie d'un point-virgule terminateur. Une dclaration est entre des accolades. Ces concepts
sont illustrs la figure4-3.
Figure4-3
Description d'un slecteur et
d'une dclaration

Prenons l'exemple suivant:


/* Voici le contenu du fichier e1.css. */
p {color: brown;}
#slogan {
font-size:20px;
color: green;
font-style: italic;
}

REMARQUE

Le contenu entre / * et * / dans un fichier CSS s'appelle un commentaire. C'est une note
insre par le dveloppeur titre informatif seulement et elle n'affecte pas le CSS ou la
page Web. Les commentaires peuvent figurer n'importe o dans une feuille de style.
Cet exemple contient deux rgles, une pour p et une pour #slogan. La premire rgle
qui s'applique tout le contenu au sein de toutes les balises de paragraphe (ou type) <p>
sur la page Web. La seconde rgle s'applique uniquement l'lment HTML unique avec
l'ID slogan. La partie slecteur d'une rgle peut tre assez complique; pour l'instant,
considrez les slecteurs comme l'un des trois lments suivants:
Balises HTML, comme <p> ci-dessus. Les rgles CSS slectionnent galement
souvent des balises telles que <h...>, <table>, <a>, etc.
Slecteurs d'ID, tels que #slogan ci-dessus. Pour ces derniers, le symbole # est un
prfixe qui dtermine que la slection se fait par ID.
Slecteurs de classe, comme l'exemple qui suit.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 93

Notez que l'ID doit tre unique dans une instance particulire de HTML. Toutefois, plusieurs
lments peuvent partager une classe. Une classe est un attribut utilis par un auteur de sites
Web pour structurer un document au-del du cadre HTML avec des lments, tels que le
paragraphe, len-tte, etc. Nous pourrions choisir d'affecter l'tiquette opinion certains
contenus d'une page et fait d'autres. Ces sortes de catgories sont idalement mises en
uvre en tant que classes, parce que CSS peut grer le contenu en termes de ses dfinitions
de classes. Le balisage suivant illustre l'utilisation d'une classe.
Voici le contenu d'un fichier HTML, nomm e2.html:
<!doctype html>
<html>
<head>
<title>Un exemple de classe</title>
<link href = "e2.css" rel = "stylesheet"
type = "text/css">
</head>
<body>
<h1> propos des tats</h1>
< p class = "fact">L'Alaska est le plus grand tat des tats-Unis
dans la rgion.</p>
< p class = "opinion">Le New Jersey mrite son
surnom tat-jardin.</p>
< p class = "fact">Un seul membre du Congrs reprsente le
Wyoming la Chambre nationale des
reprsentants.</p>
</body>
</html>

Voici le contenu du fichier CSS associ, nomm e2.css:


p {color: black;}
/* Le prfixe pour un slecteur de classe est un point : '.' */
.opinion {color: gray;}

Avec ces deux fichiers en place, l'ouverture d'e2.html produit un affichage qui ressemble
la figure4-4.
Figure4-4
Utilisation d'un slecteur
de classe pour spcifier la
couleur d'un paragraphe

REMARQUE

Comment se souvenir de la syntaxe de diffrents slecteurs? Voici un moyen mnmotechnique


qui fonctionne pour certains: le prfixe pour une classe est un point parce qu' l'cole on
donne des bons points en classe. Le prfixe d'un ID est un #, parfois appel le signe
dise. Un ID courant est votre numro de scurit sociale, numro, ID.s

94 | Leon 4

REMARQUE

Soyez prudent avec les ID. Vous comprenez sans doute qu'ils doivent tre uniques
dans votre code HTML. Ils peuvent galement apparatre dans JavaScript et CSS. De
nombreuses quipes constatent qu'elles doivent veiller conserver des ID uniques dans
l'ensemble de toutes ces diffrentes formes de source. S'il y a une erreur, si quelqu'un
introduit un ID qui est un doublon d'un autre dj en cours d'utilisation par une seule
page, il peut tre difficile de dboguer les erreurs suivantes.

Prsentation des polices et des familles de polices


La typographie concerne l'apparence des lettres, chiffres et autres caractres. La
typographie est un sujet vaste et complexe, bien au-del de la porte de cette leon.
Toutefois, il est important de connatre certains termes de ce domaine.
Une police est un ensemble de caractres dune taille et dun style particuliers. Les
graphistes ont souvent de fortes convictions sur la lisibilit et l'attrait visuel des diffrentes
polices de caractres, et vous pouvez tre invit organiser un affichage ou des parties
d'un affichage dans des polices spcifiques ou qui ont des caractristiques particulires.
Les polices espacement fixe sont souvent utilises pour la documentation technique,
comme les formules, les nombres, les codes, etc. Les empattements sont les dtails situs
lextrmit de certaines lettres. Examinez de prs les lettres d, p et t dans cette
phrase qui illustre les caractres serif. Les polices Sans serif sont simplement des styles de
type dessins sans empattement, comme la police Arial. Voir les exemples dans la figure4-5.
Figure4-5
Exemples d'une police serif
et d'une police sans serif

Le principal moyen pour spcifier les polices dans un fichier CSS est d'utiliser la proprit
font-family. La proprit font-family peut dclarer une police spcifique, telle que Garamond
ou Arial ou une famille plus large qui inclut de nombreuses polices diffrentes, telles que
serif. En particulier, lors du dveloppement pour des combins tlphoniques mobiles, il
est plus sr de spcifier une famille largie, telle que espacement fixe ou sans serif, parce
qu'il est difficile de prdire quelles polices particulires seront disponibles sur un combin
particulier.
Par exemple, quand vous incluez font-family: monospace dans un fichier CSS, vous indiquez
au navigateur de choisir des caractres dans lesquels chaque lettre occupe la mme largeur
sur une ligne, que la lettre elle-mme soit aussi large que m ou aussi troite que i.
Vous ne spcifiez pas une police espacement fixe spcifique; vous spcifiez seulement
la famille de polices espacement fixe.
EXPRIENCES AVEC LES FAMILLES DE POLICES
PRPAREZ-VOUS. Pour comprendre les bases du contrle des polices, procdez comme suit:


1. Ouvrez les fichiers e1.html et e1.css partir de l'exercice prcdent dans votre outil
d'dition. Enregistrez-les sous e3.html et e3.css, respectivement.
2. Remplacez e1.css par e3.css dans l'lment de lien du fichier e3.html, puis enregistrez
le fichier.
3. Dans e3.css, ajoutez une nouvelle rgle pour #slogan qui indique font-family: monospace.
p {color: brown;}
#slogan {
font-family: monospace;
font-size:20px;
color: green;
font-style: italic;
}

4. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web.
Lesrsultats sont prsents dans la figure4-6.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 95
Figure4-6
Application de la famille de
polices espacement fixe

5. Dans le fichier CSS, remplacez la rgle par font-family: sans-serif;.


6. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web.
Lesrsultats sont prsents dans la figure4-7.

7. Remplacez la rgle par font-family: Garamond; enregistrez le fichier CSS, puis affichez
le fichier HTML dans votre navigateur Web. Les rsultats sont prsents dans la
figure4-8.

8. Fermez les fichiers e3.html et e3.css. Laissez l'outil d'dition et le navigateur Web
ouverts si vous passez immdiatement la section suivante.

Figure4-7
Application de la famille
depolices sans serif

Figure4-8
Application d'une police
spcifique l'lment de
slogan

96 | Leon 4

Avant CSS3, les dveloppeurs devaient utiliser des polices Web-safe et/ou les polices
dont le dveloppeur savait qu'elles avaient t installes sur le systme du visiteur d'une
page Web. La liste des polices Web-safe est relativement courte et n'offre pas beaucoup
de varit. Utiliser autre chose que les polices Web-safe revient gnralement crer des
images pour les titres et en-ttes et utiliser d'autres solutions de contournement.
CSS3 fournit la rgle @font-face, qui permet aux dveloppeurs d'utiliser n'importe quelle
police de leur choix. Pour ce faire, vous crez tout d'abord une rgle font-face en affectant
un nom la police. La police doit se trouver sur votre serveur Web, ou vous pouvez
inclure une URL vers son emplacement, s'il se trouve sur un autre serveur Web. Voici un
exemple d'une rgle pour une police nomme Euphemia qui se trouve sur votre propre
serveur Web:
@font-face
{
font-family: TrustyHomePage;
src: url('Euphemia.ttf'),
}

Tout comme avec des images, vous (ou un client pour lequel vous travaillez) devez
possder une copie lgale de la police utiliser dans les pages Web cres.

PLUS DINFORMATIONS
Pour en savoir plus sur les notions essentielles du style CSS, visitez la page Web Microsoft sur les feuilles
de style en cascade l'adresse http://bit.ly/IKmcZd. Vous pouvez aussi consulter les didacticiels gratuits
sur CSS sur le site Web W3schools.com l'adresse http://www.w3schools.com/css/default.asp.

Gestion du flux de contenu

en bloc ou inclus

Vous pouvez grer le flux de contenu dans un document HTML l'aide des proprits
de flux inclus et de flux de bloc de CSS.

PRT POUR LA CERTIFICATION

Comment les sites Web


grent-ils le flux de
contenu?
3.1

Le flux ou style d'affichage est un concept fondamental de HTML. Cela concerne le


remplissage des lignes horizontales de gauche droite travers l'affichage et la sparation
des lignes de haut en bas au fur et mesure que l'on fait dfiler l'affichage vers le bas.
Ces deux solutions permettent l'affichage d'un lment visuel:
Flux inclus: remplit seulement la largeur ncessaire
Flux de bloc: remplit toute la largeur disponible
Le contrle de la gomtrie de votre interface utilisateur et en particulier de l'tendue
horizontale de l'cran, est important. Il est tout aussi important de comprendre le flux.
Quelques exemples seront utiles.
Le flux inclus tient. Il ne cre pas de ligne avant ou aprs l'lment inline, mais place
simplement l'lment entre le contenu avant et aprs l'lment inline.
Observez ce paragraphe:
Il s'agit d'un paragraphe dans lequel un mot apparat en gras et un autre en italique.

PRT POUR LA CERTIFICATION

Quelle est la diffrence


entre flux inclus et flux de
bloc?
3 .1

Dans un codage HTML classique, les mots en gras et en italique apparaissent


respectivement comme des lments <b> et <i>. Ces lments sont inclus: ils occupent
seulement autant d'espace que ncessaire dans les lignes de texte et ils ne sont pas
dplacs de force vers de nouvelles lignes.
Avec le flux de bloc, contrairement au flux inclus, un lment est spar des autres
lments par de nouvelles lignes au-dessus et au-dessous, et remplit de gauche droite
ltendue horizontale o il apparat.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 97

Le paragraphe que vous lisez maintenant est lui-mme un lment de flux de bloc:
au-dessus et en dessous se trouvent de nouvelles lignes et le paragraphe remplit son
tendue de gauche droite.
Vous contrlez le flux d'affichage. Par exemple, par dfaut les lments de liste sont
dans un flux de bloc. Avec CSS, cependant, vous pouvez les inclure pour obtenir
une apparence diffrente et distinctive. Alors qu'ils restent des lments de liste, avec les
autres attributs habituels et le comportement de l'lment de liste, un changement dans le
style d'affichage leur permet de s'afficher l'un aprs l'autre dans une squence horizontale,
de gauche droite.
Dmarrez votre diteur. Il est temps d'essayer quelques petits segments de CSS pour vous-mme.

REMARQUE

Le dbut de cette leon expliquait en dtails comment les fichiers HTML et CSS
fonctionnent ensemble pour obtenir des effets de conception. Pour le prochain exemple
et les exemples suivants, cependant, le style CSS est rduit dans le fichier source HTML.
HTML reconnat l'lment <style>, ce qui rend cela possible. Lorsque l'on dcouvre les
attributs CSS, il est gnralement beaucoup, beaucoup plus commode de travailler dans
un fichier source unique, donc toutes les sections de la leon sauf les plus simples sont
mises en uvre dans une seule source HTML. N'oubliez pas que la plupart des travaux
commerciaux seront structurs en termes de sources HTML et CSS distinctes.
EXPLORATION DU FLUX INCLUS ET DU FLUX DE BLOC
PRPAREZ-VOUS. Pour explorer le flux inclus et le flux de bloc, procdez comme suit:

1. Crez le fichier e4.html avec le contenu suivant:


<!doctype html>
<!-- Voici le contenu du fichier e4.html.-->
<html>
<head>
<title>Flux de bloc et inclus</title>
<link href = "e4.css" rel = "stylesheet"
type = "text/css">
<style type = 'text/css'>
.toolbar li {
}
</style>
</head>
<body>
<h1>Flux de bloc et inclus</h1>
<p>Voici les lments que vous pouvez choisir:</p>
<ul class = "toolbar">
<li>Automobile</li>
<li>Vlo</li>
<li>Scooter</li>
<li>Taxi</li>
<li> pied</li>
</ul>
</body>
</html>

98 | Leon 4

2. Lorsque vous affichez cette source dans votre navigateur, l'affichage ressemble
l'illustration de la figure4-9.

3. Mettez jour la source de e4.html pour que le segment <style> ressemble

Figure4-9
Apparence par dfaut des
lments de liste

<style type = "text/css">


.toolbar li {
display:inline;
background-color: #EEE;
border: 1px solid;
border-color: #F3F3F3 #BBB #BBB #F3F3F3;
margin: 2px;
padding: .5em;
}
</style>

4. Enregistrez le fichier et actualisez votre navigateur. La liste affiche les mises jour,
tel qu'illustr dans la figure4-10. Remarquez comment cet exemple montre que le
contrle de flux est utile pour les effets visuels.

5. Fermez le fichier e4.html. Laissez l'outil d'dition et le navigateur Web ouverts si vous
passez immdiatement la section suivante.

Figure4-10
Apparence des lments de
liste auxquels un nouveau
style a t appliqu l'aide
du flux inclus

PLUS DINFORMATIONS
Pour en savoir plus sur la proprit CSS display et la gestion du flux de contenu, visitez la page Web
sur la proprit CSS display de W3schools.com, l'adresse http://www.w3schools.com/cssref/pr_
class_display.asp.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 99

PRT POUR LA CERTIFICATION

Comment les lments


individuels sont-ils placs
sur une page HTML
enutilisant CSS?
3 .1

PRT POUR LA CERTIFICATION

Comment utilise-t-on le
positionnement flottant?
3 .1

REF

La gestion du flux de
contenu et l'utilisation
des colonnes pour une
meilleure lisibilit sont
abordes en dtail dans
la leon6.

Positionnement des lments individuels


HTML et CSS prennent un charge un certain nombre de faons de spcifier o les
diffrents lments HTML apparaissent dans un affichage. Les deux plus importantes
pour notre but sont le positionnement flottant et le positionnement absolu.
La mthode de positionnement par dfaut pour tous les lments est statique, c'est-dire immdiatement aprs l'lment prcdent du document. Pour placer un lment dans
une autre position, utilisez CSS pour remplacer la valeur par dfaut par float ou absolute.

APPLICATION DU POSITIONNEMENT FLOTTANT


Le positionnement flottant est souvent utile pour une disposition en colonnes, au moins
en partie. Appliquer un lment un positionnement flottant revient le laisser se
dplacer aussi loin que possible vers la droite ou vers la gauche; le texte enveloppe
alors llment.
Les colonnes simples sont construites en faisant flotter plusieurs lments diffrents tour
tour. Supposons que vous avez besoin de produire quatre colonnes de contenu textuel.
Affectez un style chacun des lments de contenu devant apparatre dans les colonnes
successives comme lment flottant positionn. Chaque lment flotte vers le ct
mais est spar de celui qui le prcde ou le suit. Notez que dans ce type de colonne,
letexte qui dborde du bas d'une colonne ne s'tend pas jusqu'en haut de la suivante.
UTILISATION DU POSITIONNEMENT FLOT TANT AVEC PLUSIEURS COLONNES
PRPAREZ-VOUS. Pour appliquer un positionnement flottant plusieurs colonnes, procdez
comme suit:
1. Crez le fichier e5.html avec le contenu suivant:
<!doctype html>
<!-- This is e5.html. -->
<html>
<head>
<title>Positionnement flottant</title>
<style type = 'text/css'>
#col1 {
float: left;
width: 150px;
background-color: lightskyblue;
}
#col2 {
float: left;
width: 120px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Positionnement flottant</h1>
<p id = "col1">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
ultricesviverra velit.
<p id = "col2">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
ultrices viverra velit.

100 | Leon 4
<p id = "col3">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
ultrices viverra velit.
</body>
</html>

REMARQUE

REMARQUE

Cette section et la suivante ne prsentent pas toujours l'intgralit du balisage HTML


et CSS, mais seulement les lignes essentielles. Ce genre d'abrviation est commun dans
les documents de rfrence et la communication quotidienne entre dveloppeurs. Vous
devrez incorporer une telle ligne dans le fichier source plus grand dans la position correcte. Cette leon quivaut une leon de nettoyage des bougies d'une automobile, qui
suppose que vous savez dj comment dmarrer le moteur, ouvrir le capot, tenir une
cl, et ainsi de suite.

Le texte Lorem ipsum est appel remplissage ou texte factice, couramment utilis
dans le milieu de la conception. Mme s'il ressemble du latin, il n'a en fait aucun
sens. Il s'agit juste de texte standard qui ressemble du contenu dans sa squence et la
frquence des caractres. Il est facile de gnrer du texte factice dans Word, par exemple,
en tapant =lorem() dans un document vierge et en appuyant sur la touche Entre.

2. Affichez e5.html, comme illustr dans la figure4-11. Notez comment le contenu


s'affiche dans les colonnes, indiqu par les couleurs de l'arrire-plan qui apparaissent
derrire le texte.

3. Dans le navigateur, col1 et col2 saffichent sous forme de deux colonnes de largeur fixe
et col3 remplit tout l'espace restant. Si vous modifiez les deux attributs CSS float de
gauche droite, quelle est l'apparence de l'affichage?
4. Apportez la modification.
5. Est-ce correct? L'affichage de la source HTML mise jour a-t-il l'aspect attendu?
6. Fermez le fichier e5.html. Laissez l'outil d'dition et le navigateur Web ouverts si vous
passez immdiatement la section suivante.

Figure4-11
Plusieurs colonnes avec
l'attribut float appliqu

APPLICATION DU POSITIONNEMENT ABSOLU


Avec le positionnement absolu, un lment est supprim de sa position dans le corps
d'un document et plac dans une position gomtrique dans l'afficheur. Ici, position
gomtrique signifie un emplacement une distance dfinie des deux cts de l'cran,
lehaut et les cts droits, par exemple.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 101

UTILISATION DU POSITIONNEMENT ABSOLU AVEC PLUSIEURS COLONNES


PRPAREZ-VOUS. Pour appliquer un positionnement absolu plusieurs colonnes, procdez
comme suit:

1. Crez un fichier e6.html en ouvrant e5.html et en enregistrant une copie sous e6.html.
2. Remplacez le commentaire du dbut par:
<!-- This is e6.html. -->

Remplacez le contenu dans les balises <head> par ce qui suit:


<title>Positionnement absolu</title>
<style type = 'text/css'>
#col1 {
position: absolute;
bottom: 100px;
right: 100px;
background-color: lightskyblue;
}
#col2 {
background-color: yellow;
}
</style>

3. Dans l'lment body, remplacez l'en-tte <h1> par:


<h1>Positionnement absolu</h1>

4. Affichez e6.html, comme illustr dans la figure4-12. Dans cet exemple, les
paragraphes col2 (arrire-plan jaune) et col3 (sans arrire-plan en couleur) s'affichent
de faon normale prs du haut de l'affichage. Toutefois, Col1, se termine une
position verrouille en bas gauche de la fentre affiche.

5. Redimensionnez la fentre et observez comment les trois diffrents paragraphes


s'ajustent.
6. Fermez le fichier e6.html. Laissez l'outil d'dition et le navigateur Web ouverts si vous
passez immdiatement la section suivante.

Figure4-12
Plusieurs colonnes avec
l'attribut absolute appliqu

En gnral, le positionnement absolu n'a pas t utilis autant que le positionnement


flottant dans travail Web. Toutefois, les applications mobiles ont souvent une fentre
d'affichage de taille connue, dfinie et relativement petite. Pour les applications mobiles,
contrairement la majorit des applications Web, il est relativement courant d'utiliser le
positionnement absolu.

102 | Leon 4

PLUS DINFORMATIONS

Pour en savoir plus sur le positionnement flottant CSS, allez l'adresse http://www.
w3schools.com/css/css_float.asp. Vous pouvez obtenir plus d'informations sur la proprit
CSS position aux adresses http://www.w3schools.com/css/css_positioning.asp et
http://www.w3schools.com/cssref/pr_class_position.asp.

Gestion du dbordement de contenu

Les cares englobants

Un autre concept essentiel dans la conception HTML est le cadre englobant. Cette
section explique le dbordement par rapport aux cadres englobants.
Lorsque vous affichez des lettres et des caractres sur une page, considrez-les comme
des marques plutt que des lettres. Chaque lment HTML occupe un rectangle. Le
mot rectangle, par exemple, n'est pas particulirement rectangulaire: le t et le
l dpassent au-dessus et le g pend au-dessous. Cependant, pour les besoins de la
disposition HTML, le mot rectangle tient dans un petit rectangle (ou cadre englobant)
qui comprend toutes les lettres du mot ainsi que leur arrire-plan, comme illustr la
figure4-13. Le style CSS est exprim dans les termes de ce cadre.
Figure4-13
Exemple de cadre englobant
PRT POUR LA CERTIFICATION

Quelle proprit CSS


contrle le dbordement
de contenu?
3 .1

PRT POUR LA CERTIFICATION

Quelle valeur de proprit


CSS overflow empche
le dbordement de
dfilement?
3 .1

En particulier, CSS permet de limiter la largeur d'un lment. Que se passe-t-il si l'lment
ne tient pas dans l'espace que CSS dfinit pour lui? La rgle overflow de CSS contrle cela.

PRSENTATION DU DBORDEMENT DE DFILEMENT avec attribut SCROLL


Lorsqu'un lment dborde de son cadre et que sa proprit overflow est dfinie avec
l'attribut scroll, tout le contenu de l'lment reste l'intrieur de la bote. Rien n'en
dpasse. On parle de dbordement de dfilement.
Le contenu doit rester l'intrieur de la bote, mais il ne tient pas. Comment rsoudre
un tel conflit? Prtendez que la bote se dirige vers le bas dans une zone plus vaste, et
que l'observateur peut se dplacer dans cette zone plus vaste en dplaant les barres de
dfilement. Cela permet l'observateur d'atteindre tout le contenu. Vous pouvez le faire
enutilisant la valeur scroll avec la proprit overflow.
Dcouvrez cela par vous-mme avec l'exprience suivante. Utilisez votre diteur pour
dcouvrir le puissant mcanisme de dfilement.
UTILISATION DU DBORDEMENT DE DFILEMENT
PRPAREZ-VOUS. Pour vous entraner utiliser le dbordement de dfilement, procdez
comme suit:

1. Crez un fichier e7.html avec le contenu suivant:


<!-- This is the content of e7.html. -->
<!doctype html>
<html>
<head>
<title>Dbordement de dfilement</title>
<style type = "text/css">
#col1 {
width: 200px;
height: 200px;
background-color: lightskyblue;
overflow: scroll;
}

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 103
#col3 {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Dbordement de dfilement</h1>
<p id = 'col1'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper.
</p>
<p id = 'col2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</p>
<p id = 'col3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</p>
</body>
</html>

2. Cette source est rendue sous forme d'un affichage semblable la figure4-14.

3. Faites des expriences avec la source pour voir comment HTML est rendu dans diffrentes
circonstances. Par exemple, que se passe-t-il avec une largeur de400px?

Figure4-14
Affichage des barres de
dfilement cres en
tant que contrles de
dbordement.

104 | Leon 4

4. Quel est l'aspect de l'affichage lorsque vous supprimez la moiti du texte de col1
dee7.html?
5. N'enregistrez pas les modifications que vous avez apportes e7.html. Ne fermez
pas le navigateur Web et laissez le fichier e7.html ouvert dans l'outil d'dition si vous
passez immdiatement la section suivante.

PRSENTATION DU DBORDEMENT VISIBLE ET DU DBORDEMENT MASQU


Le dbordement visible recouvre le contenu qui le suit. Le dbordement masqu rend le
dbordement invisible. overflow:visible
overflow:hidden
PRT POUR LA CERTIFICATION

Quelles valeurs de
proprit CSS overflow
montrent le dbordement
visible et masquent le
dbordement visible?
3 .1

Pensez nouveau au cas que la section prcdente prsentait: votre affichage affecte une
zone fixe un lment de contenu particulier, mais le contenu est si long qu'il ne tient
pas dans l'espace qui lui est affect. La dernire section dmontrait comment les barres
de dfilement permettent l'utilisateur de voir tout le contenu sans occuper d'espace
d'affichage supplmentaire. Deux autres tactiques adaptes cette situation consistent
utiliser la proprit overflow avec les valeurs visible et hidden, respectivement. Vous
comprendrez mieux ces deux solutions lorsque vous ferez vous-mme l'exprience de ces
mthodes et des crans qu'elles produisent.
UTILISATION DU DBORDEMENT VISIBLE ET DU DBORDEMENT MASQU
PRPAREZ-VOUS. Pour vous entraner utiliser le dbordement visible et le dbordement
masqu, procdez comme suit:
1. Ouvrez le fichier e7.html de l'exercice prcdent (s'il n'est pas dj ouvert).
2. Modifiez le dbordement de e7.html en remplaant scroll par visible.
3. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustr la figure4-15.

Figure4-15
Le dbordement visible
recouvre le contenu qui le
suit

4. tudiez les dtails de cet affichage. visible est la valeur par dfaut de overflow. Avec
la valeur visible dfinie, les lments de l'affichage HTML sont disposs en ordre, un
dbordement recouvre donc simplement les autres lments.
5. Notez que background-color ne s'applique pas au dbordement de contenu: col1 a un
arrire-plan bleu ciel, mais le texte de dbordement revient un arrire-plan par dfaut.
6. Maintenant modifiez le dbordement de e7.html en remplaant scroll par hidden.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 105

7. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustr la figure4-16.
Avec le dbordement masqu, le dbordement devient tout simplement invisible.

8. Fermez l'outil d'dition et le navigateur Web.

Figure4-16
Le dbordement masqu est
simplement invisible

Le dbordement masqu permet de contrler une conception: il garantit garantit que


dbordement ne pollue pas une conception agrable avec des lments inappropris.
En revanche, le dbordement masqu peut entraner des surprises. Par exemple, si
un utilisateur final malvoyant spcifie une police plus grande que prvu, l'utilisation
du dbordement masqu risque de rendre des lments cruciaux de votre conception
compltement invisibles et inaccessibles. Dans le pire des cas, l'utilisateur final pourrait
tre face un cran sans contrle visible ou moyen de revenir la page d'accueil.

PLUS DINFORMATIONS

Pour plus d'informations sur CSS overflow, visitez la page Web sur la proprit CSS
overflow de W3schools.com, l'adresse http://www.w3schools.com/cssref/pr_pos_
overflow.asp. Vous pouvez galement effectuer une recherche sur flux de contenu css
de msdn, positionnement css de msdn et dbordement css de msdn l'aide de votre
moteur de recherche favori.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
C
 SS est un outil essentiel pour la ralisation d'une grande partie de l'apparence et
mme du comportement des applications mobiles modernes ainsi que des sites
Web. Pour crer la partie frontale d'une application ou d'un site Web et surtout
conserver son aspect correct et frais au fur et mesure que des modifications
fonctionnelles sont apportes l'application ou au site Web pendant sa dure de
vie, vous devez bien comprendre CSS et comment il fonctionne conjointement avec
d'autres outils dont HTML et JavaScript. Vous serez galement beaucoup plus laise
pour estimer l'effort requis pour certains projets lorsque vous aurez assimil les
concepts de style de l'interface utilisateur comme CSS les utilise.
(suite)

106 | Leon 4

V
 ous pouvez crer des fichiers CSS entirement partir d'un simple diteur de
texte tel que le Bloc-notes. Cependant, de nombreux diteurs HTML et outils de
dveloppement d'applications fournissent une fonctionnalit de dbogage qui vous
permet de dtecter rapidement des erreurs dans le code et le balisage. Ces outils
comprennent gnralement aussi un bouton pour ouvrir un navigateur Web, plutt
que d'avoir le faire manuellement.
L'lment <link> lie un fichier HTML un fichier CSS.
Dans des documents HTML, il est courant de conserver les fichiers HTML qui
incluent le contenu et de faire simplement rfrence un fichier CSS distinct qui
contient le code pour affecter un style au contenu dans les fichiers HTML. Cela
vous permet de modifier les styles dans un seul fichier (le fichier CSS) et de voir ces
modifications de style apportes dans tous les fichiers HTML automatiquement.
Lorsque vous travaillez sur un petit fichier HTML autonome dans lequel les styles ne
vont probablement pas changer, il est acceptable d'ajouter le code de style CSS dans
le fichier HTML lui-mme.
En gnral, un fichier CSS contient une squence de spcifications de style ou rgles
et peut inclure une rgle @import initiale.
La typographie concerne l'apparence des lettres, chiffres et autres caractres.
Vous pouvez grer le flux de contenu dans un document HTML l'aide des
proprits de flux inclus et de flux de bloc de CSS.
HTML et CSS prennent un charge un certain nombre de faons de spcifier o les
diffrents lments HTML apparaissent dans un affichage. Les deux plus importantes
pour notre but sont le positionnement flottant et le positionnement absolu.
Le cadre englobant HTML est un rectangle qui inclut toutes les lettres d'un bloc de
texte et son arrire-plan. Le style CSS est exprim dans les termes de ce cadre. Par
dfaut, le cadre englobant n'est pas visible sur les pages Web.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces prvus
cet effet.
1. HTML est responsable du contenu, CSS du _____________.
style
2. Un fichier source HTML fait rfrence un fichier source CSS externe grce
llment _________.
link
3. Un fichier source CSS contient zro, une ou plusieurs _________
individuelles.
rgles
slecteur et une
4. Chaque rgle individuelle comprenddeux parties principales: un _________
ou plusieurs dclarations.

proprit suivie
5. Une dclaration individuelle dans une rgle CSS comporte une _________,
dedeux-points, puis dune valeur et pour terminer dun point-virgule.
classe
6. Les slecteurs CSS les plus courants sont: lment ou type, ID et _________.

7. Les deux flux de contenu HTML visibles sont _________et


inclu (inline) de bloc.
8. Pour afficher des lments HTML en colonnes, il est courant dappliquer un
positionnement _________.
flottante
9. Supposez quun lment fasse lobjet dun dbordement: il peut peut stendre
au-del de la taille qui lui est affecte lcran. Pour afficher des barres de
dfilement qui permettent lutilisateur de voir lobjet entier, dclarez la proprit
overflow avec la valeur _________.
scroll
10. Les valeurs les plus courantes pour la proprit float sont _________
et _________.
right
left

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 107

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les affirmations suivantes, laquelle rsume le mieux un modle utile pour le
dveloppement commercial?
a. Les pages Web sont cres en langage HTML.
b. Les concepteurs de sites Web doivent apprendre Java ou Ruby pour raliser la
mise en page de laffichage.
c. CSS traite principalement le style visuel.
d. CSS dfinit la structure et HTML affecte les couleurs et les polices.
2. Parmi les syntaxes suivantes, laquelle permet de coder un commentaire dans CSS?
a. <!-- -->
b. /* */
c. # d.
d. // ...
3. Combien de rgles diffrentes dans un seul fichier source CSS valide peuvent dclarer
le style dun lment de paragraphe <p>?
a. 0
b. 1
c. 1ou2, selon quHTML5 est utilis ou non
d. 0ou plus
4. Parfois, les couleurs sont exprimes avec des mots et parfois avec des nombres
symboliques. Parmi les codes suivants, lequel correspond bleu?
a. 009
b. #0000FF
c. !008000
d. (128, 128, 128)
5. Un paragraphe apparat sur un affichage important cod comme <p id =
'introduction'>Trusty Lawn Care prend. . .. On vous a demand dappliquer ce
paragraphe la police Tahoma. Parmi les syntaxes suivantes, laquelle est la mieux
adapte pour dfinir une rgle correspondante?
a. p {font: Tahoma;}
b. #introduction {font-family: Tahoma;}
c. .introduction {font: Tahoma;}
d. .p {font-family: Tahoma;}
6. Une personne a cr une page Web en HTML qui est lie trois fichiers source CSS
diffrents. Le nom dun des fichiers est mal orthographi dans le code HTML. Parmi
les affirmations suivantes dcrivant laffichage correspondant dans un navigateur
Web, laquelle semble la plus plausible?
a. La page saffiche mme si le lien renvoyant au fichier CSS avec un nom mal
orthographi est manquant.
b. La page affiche le nom mal orthographi du fichier source CSS avec un message
derreur.
c. La page saffiche en grande partie, en utilisant le dernier fichier CSS li
correctement la place du fichier CSS avec le nom mal orthographi.
d. Un message davertissement saffiche indiquant que le fichier CSS est introuvable
et vous invite continuer.
7. La balise dancrage <a > est llment HTML dfini pour la configuration des liens
hypertexte, entre autres. Quel est le flux de contenu par dfaut dun ancrage?
a. Inclus
b. Bloc
c. Masqu
d. Visible

108 | Leon 4

8. Votre quipe dveloppe une application dans laquelle est insr un long accord
de licence que lutilisateur doit pouvoir lire et approuver. Vous souhaitez limiter
lcran lespace dans lequel laccord de licence doit safficher, mais vous voulez
donner en mme temps la possibilit lutilisateur qui le souhaite de lire laccord
dans son intgralit. Quelle est la syntaxe la mieux adapte la situation?
a. {position: scrolling;}
b. {fixed: scrolling;}
c. {overflow: scrolling;}
d. {overflow: scroll;}
9. La dernire norme CSS en cours de dveloppement, mais dj trs rpandue, est:
a. CSS8
b. CSS5
c. CSS3
d. CSS2
10. Lorsque la page HTML est lie un fichier CSS que vous avez cr, quelle partie
dulien est la plus utile?
a. type = text/css
b. CSS = UN_NOM.css
c. type = "style/CSS"
d. Web = "style/css"

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettreF si elle est fausse.
VF1.
Un fichier source CSS comporte deux rgles diffrentes pour la police dun
lment h1. Le navigateur Web applique la rgle numro1 vers le dbut du
fichier source et ignore celle qui se situe vers le bas.
VF2.
Le dbordement dun lment particulier est dfini via CSS pour activer
le dfilement. Aucun dbordement nest constat parce que le contenu
de llment est assez court pour linstant. Mme dans ce cas, la barre
dedfilement est visible.
VF3.
On vous a demand de concevoir une mise en page avec des colonnes.
Lepositionnement flottant sera plus utile que le positionnement absolu
dansvotre situation.
VF4. Si vous utilisez la dernire norme CSS dans votre codage, les utilisateurs qui ont
recours des navigateurs Web non jour recevront un message davertissement
les informant que vos pages prsentent des risques pour la scurit.
VF5.
Avant de tester le style CSS que vous crez, vous devez vous assurer que
lecompilateur Python est install sur votre ordinateur.
valuation

des comptences
Scnario4-1: Flux de travail de base
Votre quipe dveloppe une application. Vous tes charg du style de la mise en page.
Quels fichiers tes-vous susceptible de mettre jour?

Scnario4-2: Consultation client


Un client a dfini une mise en page plutt rigide dans laquelle, une section des nouveauts
occupe un emplacement fixe laffichage. Le contenu de la section des nouveauts risque
de dborder de la zone qui lui est affecte. Crez rapidement un exemple daffichage qui
montre au client comment fonctionne la mise en page avec des barres de dfilement pour
la section des nouveauts, ou avec le texte des nouveauts simplement tronqu en cas de
dpassement de la zone qui lui est affecte.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Flux de contenu, positionnement et style | 109
valuation

de la matrise des concepts


Scnario4-3: Dialogue dune pice de thtre
Une application en cours dutilisation affiche le dialogue de diffrents acteurs.
Lcran dun acteur particulier prsente son texte dans une police normale, tandis
quele texte des autres acteurs est en italique. lorigine, la mise en uvre consistait
placer le texte de chaque acteur dans son propre paragraphe, avec des paragraphes
successifs nomms paragraphe1, paragraphe2, etc. Ensuite, le styleCSS
at appliqu aux paragraphes en fonction de lacteur. Montrez votre quipe une
mthodeCSSplusefficace et plus facile grer pour parvenir au mme rsultat.

Scnario4-4: Coopration internationale


Vous tes membre dune quipe de dveloppement disperse gographiquement. Une
entreprise de relations publiques en Virginie est charge de la version qui doit safficher
sur un site Web. Paralllement, un consultant belge fournit la typographie trs tendance,
tandis que les dveloppeurs en gypte soccupent de laspect de la mise en page et du
modle de couleurs. Comment pourriez-vous dcrire la structure des fichiers de ce projet?

LEON

Prsentation des
notions essentielles
sur les feuilles de
style en cascade CSS:
Dispositions

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA


Numro de l'objectif
de l'examen MTA

Organisation du contenu dune


interface utilisateur avecCSS

Organiser le contenu dune


3.2
interface utilisateur avecCSS

Utilisation de la bote flexible


(Flexbox) pour appliquer au
contenu un alignement, une
direction et une orientation

Organiser le contenu dune


interface utilisateur avecCSS

3.2

Utilisation des dispositions en


grille pour appliquer au contenu
un alignement, une direction et
une orientation

Organiser le contenu dune


interface utilisateur avecCSS

3.2

TERMES CLS
bote flexible

marge

bordure

marge intrieure

contenu

modle de bote flexible (Flexbox)

disposition en grille

modle de disposition en grille

lment block-level

modle de grille

lment de grille

prfixe du fournisseur

lment flexbox

relation parent/enfant

lment inclus

requtes multimdias

interface utilisateur (UI)

Stacey est gestionnaire de site Web chez Media Malted Milk. Elle a appris que vous
travaillez avec l'quipe de dveloppement d'application cliente et que vous tudiez
HTML5 et CSS3. Stacey dveloppe galement ses comptences en HTML5 et
aimerait tout d'abord commencer par incorporer la bote flexible et les dispositions en
grille dans le site Web Malted Milk, une fois que les spcifications seront plus
largement utilises. Elle aimerait rassembler des informations sur les dispositions en
grille et en bote flexible, y compris leur compatibilit avec les navigateurs actuels et
crer un petit aide-mmoire propos de leurs proprits CSS.
110

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 111
Organisation

L'ESSENTIEL

du contenu dune interface utilisateur avecCSS


Les interfaces utilisateur peuvent tre simples et directes ou tre plus complexes avec
plusieurs sections, boutons et contrles. La conception d'une interface qui s'affiche bien
sur les grands crans de PC et sur les petits appareils mobiles exigeait auparavant
beaucoup de balises et de code. Aujourd'hui, le modle de bote flexible et le modle de
disposition en grille en CSS rduisent la quantit de code ncessaire pour la
compatibilit inter-priphriques. Les botes flexibles contiennent du texte, des images
et d'autres contenus, et le navigateur ajuste automatiquement la taille de la zone selon
la taille de l'cran utilis pour afficher le document HTML. Le mme principe
s'applique aux dispositions en grille, qui sont tout simplement des colonnes et des
lignes qui contrlent la mise en page du contenu dans un document HTML. Comme les
spcifications CSS ne sont pas encore dfinitives, vous devrez utiliser des prfixes
spcifiques au fournisseur avant les noms de proprits CSS pour tout faire fonctionner.
L'interface utilisateur ou IU est la partie dun siteWeb ou dune application avec laquelle
l'utilisateur peut interagir. La disposition de l'interface utilisateur peut tre ultra simple
avec juste un bouton ou deux ou trs complexe avec beaucoup de parties et chaque partie
peut contenir un ou plusieurs boutons, menus, barres d'outils, formulaires etc.
Avec un tel ventail de dispositions, il est difficile de crer des interfaces utilisateur qui
fonctionnent bien pour des applications et des sites Web affichs sur des appareils
mobiles. Le positionnement et le redimensionnement automatique des lments d'une
interface utilisateur sont essentiels une conception de qualit. Par exemple, le
positionnement relatif des lments d'interface utilisateur convient de nombreuses pages
Web et les dveloppeurs Web ont utilis la proprit float pendant des annes pour avoir
de la souplesse dans leurs conceptions. (Vous avez dcouvert la proprit float dans la
leon 4.) Toutefois, le positionnement relatif ne fonctionne pas pour la plupart des
applications Web mobiles car il produit un chevauchement inappropri des lments ou
des lments apparaissent au mauvais endroit.

PRT POUR LA CERTIFICATION

Comment CSS est


utilis pour contrler la
disposition d'une interface
utilisateur?
3.2

Une combinaison de positionnement absolu et de botes flexibles (conteneurs) fonctionne


beaucoup mieux pour les applications Web mobiles et les parties de pages Web en gnral.
Par exemple, un lment d'interface utilisateur qui doit toujours figurer au mme endroit
sur l'cran, par exemple un en-tte ou un pied de page, devrait utiliser le positionnement
absolu. Pour plus de flexibilit, le modle de bote flexible CSS3 convient parfaitement
aux lments qui sont redimensionns ou repositionns automatiquement (horizontalement
ou verticalement) en fonction de la taille de lcran. Le modle de disposition en
grilleCSS3 est un autre modle d'interface utilisateur. Il vous donne une plus grande
matrise des dispositions complexes que le modle de bote flexible. Cette leon porte sur
les modle de bote flexible et les modles de disposition en grille.
Avant de nous plonger dans les sujets de cette leon, vous devez comprendre quelques
petites choses sur la compatibilit entre CSS3 et un navigateur. Comme pourHTML5, la
spcificationCSS3 est en cours de dveloppement et fait l'objet de modifications
constantes. Le nom de certaines proprits peut changer dune version lautre dans le
projet de spcificationCSS3, et de nouvelles valeurs de proprit peuvent tre cres et
dautres supprimes.
Pour sassurer que les stylesCSS3 fonctionnent correctement pendant cette phase de
transition, la plupart des principaux navigateursWeb offrent des noms de proprit de
remplacement. Ces solutions permettent simplement dajouter un prfixe de fournisseur,
mot cl plac entre tirets, devant un nom de propritCSS3. Gardez ce qui suit l'esprit
quand vous utilisez les proprits CSS3:
InternetExplorer utilise le prfixe -ms-.
Firefox prend en charge le prfixe -moz-.
Opera utilise le prfixe -o-.
Chrome et Safari prennent en charge le prfixe -webkit-.
Par exemple, la proprit flexbox est une proprit CSS3 que vous apprendrez dans cette
leon. Pour appliquer le style flexbox aux lments et les afficher dans Firefox, vous
devez actuellement utiliser la proprit -moz-flexbox.

112 | Leon 5

Il est recommand d'inclure les prfixes des quatre fournisseurs de fonctionnalits CSS3
qui sont encore mergents. De cette faon, votre page Web a les meilleures chances d'tre
affiche correctement, quels que soient les principaux navigateurs utiliss. Cependant, le
fait d'inclure les prfixes des quatre fournisseurs dans votre code le rend plus long, et cela
ne garantit pas que la fonction CSS3 fonctionne dans tous les navigateurs. Si un
navigateur ne prend pas en charge la fonctionnalit ou la proprit prefix du fournisseur,
la fonctionnalit ne s'affiche pas correctement. Le site Web Can I use l'adresse
caniuse.com vous aide dterminer quels navigateurs prennent en charge des
fonctionnalits CSS3 et HTML5 spcifiques.

REMARQUE

Une autre pratique suivre, surtout pendant la transition CSS3, consiste utiliser des
familles de polices gnriques pour viter les ventuels problmes d'affichage entre
diffrents navigateurs. Une famille de polices espacement fixe, soit serif ou sans
serif,est la meilleure faon d'viter des rsultats inattendus. Cependant, CSS3 offre
galement la possibilit d'utiliser n'importe quelle police. Il faut cependant savoir
quand utiliser une police espacement fixe et quand il est possible d'utiliser une police
fantaisiste. Vous en apprendrez plus sur la typographie et polices Web dans la leon7.

Utilisation de la bote flexible pour des dispositions simples et utilisation de


la grille pour les dispositions complexes
Les botes flexibles sont conues pour les barres doutils, les menus, les formulaires
et dautres lments semblables dans des pagesWeb et applications. Les grilles sont
mieux adaptes aux conceptions labores.
PRT POUR LA CERTIFICATION

Quel est le but du modle


de bote CSS?
3.2

Le groupeW3C a cr, il y plusieurs annes, des spcifications pour le modle de bote


simple, appel modle de boteCSS. Ce modle dcrit les zones qui entourent le contenu
dans un document HTML, que le document devienne une page Web ou une application
Web. Pensez toutes les parties d'un document HTML comme si elles taient dans une
bote. Chaque bote doit tre conforme aux rgles dfinies par le modle de bote.
Le modle de bote CSS est illustr dans la figure5-1. Le modle de boteCSS est
compos de marges, de cadres, de marges intrieures et de contenu.

Figure5-1
Modle de boteCSS
traditionnel

La marge est transparente et se situe sur le bord extrieur dune bote, formant lespace
qui spare les botes du document. La bordure entoure la bote. Une bordure peut tre
transparente, en couleurs ou avec un motif, par exemple des pointills. La marge
intrieure reprsente lespace compris entre la bordure de la bote et son contenu. En
rgle gnrale, la marge intrieure adopte la mme couleur que la couleur darrire-plan
de la bote. Le contenu correspond tout ce qui figure lintrieur de la bote, par
exemple du texte et des images. Vous pouvez utiliser les propritsCSS border, margin,
padding, height et width pour modifier les diverses parties du modle de bote.
Un problme majeur avec le modle de bote CSS, c'est que les diffrents navigateurs
Web appliquent les proprits CSS diffremment. Par exemple, bien que le W3C indique
que les proprits height et width dfinissent la hauteur et la largeur du contenu d'une
bote, les anciennes versions d'Internet Explorer appliquent les mmes proprits la
hauteur et la largeur de la bordure, ce qui comprend les marges intrieures et le contenu.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 113

REMARQUE

Les concepteurs d'applications Web et de page Web utilisent souvent des hacks (valeurs
de proprits CSS personnalises) pour forcer Internet Explorer utiliser des balises
CSS que les autres navigateurs vont ignorer. Ce concept est similaire aux prfixes
fournisseurs pour les proprits CSS mentionnes dans la section prcdente.
Il faut comprendre deux autres concepts sur le modle de bote CSS: les lments de
niveau bloc et inclus. Un lment de niveau bloc permet de crer des botes qui facilitent
la mise en page du document. Les sections, les articles, les paragraphes, les listes et les
images sont des exemples dlments de niveau bloc. Les lments inclus sont conus
pour agencer le texte sans nuire la structure du document. Lapplication de caractres
gras et le nouvel lmentHTML5 mark sont des exemples dlments inclus.
Enfin, il est important de comprendre la relation parent/enfant lorsque vous travaillez
avec le CSS. Globalement, une bote parent peut contenir une ou plusieurs botes enfants.
Les botes contenues dans une bote parent sont galement appeles botes enfants. La
figure5-2 montre un exemple simple d'une bote parent avec une bote enfant imbrique.
Un enfant peut hriter des styles CSS d'un parent, ce qui signifie que les styles appliqus
un parent s'appliquent galement un enfant. Les proprits CSS ne peuvent pas toutes
tre hrites. Lorsque vous appliquez des styles, vous devez vrifier les spcifications
CSS pour dterminer l'hritage de proprit.

Figure5-2
Botes parents et enfants

PRT POUR LA CERTIFICATION

Qu'est-ce que le modle


de bote flexible?
3.2

Ce qu'il manquait CSS depuis sa cration c'tait un moyen facile pour organiser les
lments horizontalement et verticalement dans un document HTML: afin que CSS soit
utilis pour vrifier que la disposition est correcte dans les diffrents navigateurs et dans
les diffrentes tailles d'cran. Les modles de bote flexible et de disposition en grille en
CSS3 ont permis de rgler ce problme.
Le modle de bote flexible CSS est un mode de disposition qui permet dutiliser des botes
flexibles dans les interfaces utilisateur. Ce modle fait partie du projet de spcificationCSS3.
Une bote flexible offre des dispositions flexibles pour crer une interface utilisateur. Vous
pouvez crer des pages Web et des applications mobiles partir d'lments, de contrles, de
barres doutils, de menus et de formulaires qui sont automatiquement redimensionns et
repositionns lorsque lutilisateur change la taille de la fentre du navigateur. Le navigateur
prend en compte lespace libre disponible et calcule automatiquement les dimensions, ce qui
active les tailles relatives et le positionnement.
Par exemple, la figure5-3 montre une barre d'outils horizontale avec des icnes dans une
bote flexible. La bote flexible parent est indique par l'arrire-plan ombr et les icnes sont
les botes enfants. Lorsque l'utilisateur largit horizontalement la taille de l'cran, la bote
flexible s'tend galement et rpartit l'espace de manire uniforme entre les botes enfants.

Figure5-3
Barre d'outils flexible

114 | Leon 5

Vous pouvez prsenter le contenu d'une bote flexible dynamiquement dans n'importe
quelle direction, gauche, droite, en haut ou en bas. Vous pouvez aussi changer l'ordre
des botes et modifier leurs tailles et leurs positions pour remplir l'espace disponible. Une
bote flexible multiligne renvoie le contenu automatiquement sur plusieurs lignes, comme
un traitement de texte qui gre du texte dans un paragraphe.

REMARQUE

PRT POUR LA CERTIFICATION

Qu'est-ce que la
disposition en grille?
3.2

La disposition en bote flexible est similaire la disposition en bloc, mais la bote flexible
n'utilise pas de colonnes ou d'lments flottants. En outre, une disposition en bloc dispose
gnralement le contenu verticalement (et une disposition en ligne dispose gnralement le
contenu horizontalement), une bote flexible quant elle redimensionne dans les deux sens.
Alors que le modle de bote flexible convient parfaitement des lments simples,
comme les boutons, les barres doutils et de nombreux formulaires, vous pouvez utiliser le
modle de disposition en grille CSS pour les dispositions plus complexes. Le modle de
disposition en grille permet de contrler la cration de sections de documentsHTML ou
de documents entiers avecCSS3. Comme son nom lindique, un modle de grille utilise
des lignes et des colonnes pour donner un aspect plus clair et structur (voir la figure5-4).

Figure5-4
Illustration d'une disposition
en grille

La disposition en grille offre aussi de la modularit. Vous pouvez donc facilement dposer
des lments dans une grille ou dplacer des sections vers une autre zone d'un document.
Les grilles sont beaucoup plus souples et plus faciles manipuler que des tableaux HTML
ou mme des colonnes ou des lments flottants pour structurer la disposition.

REMARQUE

Le site Web du New York Times (www.nytimes.com) constitue un exemple de prsentation


en grille (comme la plupart des sites de journaux en ligne).

Utilisation

de la bote flexible (Flexbox) pour appliquer au contenu un


alignement, une direction et une orientation
L'ESSENTIEL

PRT POUR LA CERTIFICATION

Comment une bote


flexible est-elle utilise
pour tablir l'orientation,
la direction et l'alignement
du contenu?
3.2

Une bote flexible et son contenu peuvent tre configurs pour modifier la taille, horizontalement
et verticalement, lorsque la taille de l'cran sur lequel ils sont affichs change. Vous pouvez
galement inverser le sens et l'ordre des botes flexibles avec une ligne de code.
Vous devez dfinir un lment en tant que bote flexible l'aide des proprits CSS
display:flexbox ou display:inline-flexbox, qui sont dcrites comme suit:
flexbox: dfinit la bote flexible comme un lment de niveau bloc
inline-flexbox: dfinit la bote flexible comme un lment inclus
Une bote lintrieur dune autre bote est une bote enfant et peut tre flexible ou non.
Une bote enfant est galement appele lment flexbox.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 115

La bote flexible introduit galement neuf autres proprits, indiques dans le tableau5-1. Vous
apprendrez utiliser la plupart de ces proprits et les valeurs dans les sections suivantes.
Tableau5-1
Valeurs et proprits d'une
bote flexible

Proprit

Valeur

Description

flex

pos-flex
neg-flex
preferred-size
none

Rend les botes enfants flexibles en


hauteur et en largeur

flex-align

start
end
center
baseline
stretch

Dfinit l'alignement par dfaut pour les


botes enfants. Si l'orientation de la bote
parent est horizontale, flex-aligne dtermine
l'alignement vertical des botes enfants et
vice versa

flex-direction

row
row-reverse
column
column-reverse

Contrle l'orientation des botes enfants


dans la bote parent, ce qui affecte
galement la proprit flex-pack

flex-flow

flex-direction
flex-wrap

Dfinit simultanment les proprits


flex-direction et flex-wrap

flex-item-align

auto
start
end
center
baselinebstretch

Remplace l'alignement par dfaut des


botes enfants auxquelles la proprit
flex-align a t applique

flex-line-pack

start
end
center
justify
distribute
stretch

Dfinit l'alignement de la bote enfant


dans la bote parent lorsqu'il existe un
espace supplmentaire

flex-order

number

Affecte les botes enfants aux groupes et


contrle l'ordre dans lequel elles apparaissent
dans une mise en page, en commenant
par le groupe ayant le plus petit numro.

flex-pack

start
end
center

Justifie l'alignement des botes enfants


dans une bote flexible et rduit l'espace
disponible dans la bote parent.

flex-wrap

nowrap
wrap
wrap-reverse

Indique si les botes enfants sagencent


automatiquement sur plusieurs lignes ou
dpassent de la bote flexible.

Utilisez le tableau prcdent comme rfrence pour apprendre crer les lments
flexboxes et flexbox.

PLUS DINFORMATIONS
Pour plus d'informations sur les botes flexibles, visitez le Module Disposition de bote flexible CSS
W3C sur http://www.w3.org/TR/css3-flexbox/.

116 | Leon 5

Utiliser les lments Flexboxes et Flexbox


Une bote flexible peut contenir des botes enfants flexibles en hauteur et en largeur.
La proprit flex permet de rendre les botes enfants flexibles. La proprit flex-flow
dfinit les proprits flex-direction et flex-wrap d'une bote flexible (la bote parent) en
mme temps.
Observons une bote flexible en action. Supposons qu'une entreprise fournisse trois
principaux types de services, qui sont indiqus et dcrits brivement en trois paragraphes
sur une page Web. Les trois paragraphes forment trois conteneurs d'informations, comme
illustr dans la figure5-5.
Figure5-5
Une bote flexible parent
avec trois botes enfants
(lments flexbox)

Notez l'espace supplmentaire droite de la dernire bote enfant, nomme Enfant3. Vous
pouvez modifier le CSS qui contrle les botes afin que les trois botes enfants tendent
automatiquement leur taille uniformment pour remplir l'espace disponible dans la bote
flexible. Vous pouvez galement modifier une bote enfant, telle que Enfant3, pour qu'elle
puisse remplir l'espace, comme illustr dans la figure5-6.
Figure5-6
Modification de la troisime
bote enfant pour remplir
l'espace vide disponible

MISE L'CHELLE PROPORTIONNELLE DANS UNE BOTE FLEXIBLE


Le W3C spcifie la proprit flex qui contrle la hauteur et la largeur des lments
flexbox. display: flexbox permet de crer une bote flexible parent, la proprit flex permet de
donner aux botes enfants leur flexibilit.
element parent La proprit display: flexbox est utilise sans valeurs supplmentaires.

element enfantLa proprit flex peut prendre une valeur flex positive et/ou ngative, une taille souhaite
et le mot cl none comme indiqu:
flex : pos-flex neg-flex preferred-size none

Les valeurs positives et ngatives flex indiquent la flexibilit. Contrairement l'usage du


mot ngatif, les deux valeurs sont en fait des nombres positifs, comme 1, 2, 3 et ainsi
de suite. (Vous pouvez galement utiliser 1.0, 2.0, 3.0, etc.)
S'il reste de la place dans la bote flexible lorsque la taille de l'cran augmente, les
lments flexbox se dveloppent pour remplir l'espace en fonction de la valeur flex
positive. Une valeur de 1 signifie que chaque lment flexbox occupera une part gale de
l'espace disponible, une valeur de 2 signifie que chaque lment occupera deux parts
gales et ainsi de suite. Si les lments flexbox dbordent de la bote parent parce qu'ils
sont collectivement plus larges que le parent, le navigateur utilise la valeur flex ngative
pour mesurer la hauteur ou la largeur de chaque lment.
Si vous ne spcifiez pas de valeur flex positive, elle est de 1 par dfaut. L'omission d'une
valeur flex ngative aboutit 0 par dfaut.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 117

La valeur de taille prfre peut tre une valeur valide pour la proprit height et width
CSS, comme 100px. Si vous ne spcifiez pas de valeur de taille prfre, la valeur par
dfaut est 0px. Vous pouvez galement dfinir la valeur size souhaite sur auto, qui utilise
la valeur de la proprit width ou height en tant que la taille par dfaut.
Le mot cl none quivaut 0 0 auto.

REMARQUE

PRT POUR LA CERTIFICATION

Comment une bote


flexible fournit-elle la mise
l'chelle proportionnelle
des lments?
3.2

Quelques explications supplmentaires peuvent tre ncessaires pour la valeur de la


proprit flex. Imaginons que vous ayez une bote flexible avec trois botes enfants. La
valeur flex pour enfant1 et enfant2 est de 1 et la valeur pour enfant3 est de 2. Un enfant
avec un flex de 2 est deux fois plus flexible qu'un enfant avec un flex de 1. Cela ne signifie
pas ncessairement qu'enfant3 sera deux fois plus large qu'enfant1 et enfant2. En fait, la
valeur flex calcule lespace libre disponible par extension ou contraction. Le changement
est appliqu en fonction de la partie flexible en comparaison avec les autres botes enfants.

La puissance des lments flexbox rside dans le fait qu'ils peuvent voluer librement ou
ajuster de faon dynamique leurs principales dimensions. La taille de ces lments
augmente ou diminue selon l'espace disponible dans la bote flexible dans laquelle ils
rsident.
Dans le code CSS et le balisage HTML suivants, la bote flexible contient quatre lments
flexbox. Chaque enfant a une valeur flex de 1 et est dfini sur auto. Lorsque l'utilisateur
modifie la taille de la fentre du navigateur, les botes enfants doivent se dvelopper et se
rduire en mme temps que la bote parent.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de bote flexible enfant</title>
<style>
div { display: flexbox;
outline: 2px solid silver
}
p { flex: 1 auto; margin: 1em;
font-family: sans-serif;
color: white;
background: tomato;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Il sagit de la bote enfant1.</p>
<p>Il sagit de la bote enfant2.</p>
<p>Il sagit de lenfant3.</p>
<p>Il sagit de lenfant4.</p>
</div>
</body>
</html>

La figure 5-7 montre le rsultat avant et aprs le redimensionnement de la fentre du navigateur.

118 | Leon 5
Figure5-7
Botes enfants flexibles dans
une bote parent

CRER UNE BOTE FLEXIBLE AVEC DES LMENTS FLEXBOX


PRPAREZ-VOUS. Pour savoir comment crer une bote flexible avec des lments flexbox
qui ont une hauteur fixe mais une largeur flexible, effectuez les oprations suivantes:

1. Dans un outil d'dition ou un outil de dveloppement d'application, crez un fichier


HTML qui inclut le code CSS et le balisage suivants:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de bote flexible enfant</title>
<style>
div { display: flexbox;
outline: 2px solid silver }
p { flex: 1 auto; margin: 1em;
font-family: sans-serif;
color: white;
background: limegreen;
height: 25px;
padding: 1em;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
</style>
</head>

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 119
<body>
<div>
<p>Il sagit de la bote enfant1.</p>
<p>Il sagit de la bote enfant2.</p>
<p>Il sagit de lenfant3.</p>
</div>
</body>
</html>

La proprit display: La proprit flexbox CSS permet de crer la bote parent: la bote
flexible. Un contour argent est cr pour la bote flexible, cela vous permet simplement
de la voir dans la fentre du navigateur pour les besoins de cet exercice. Les styles de
paragraphe (p) s'appliquent aux lments flexbox (les botes enfants). La proprit flex
applique la flexibilit chaque bote enfant. Les lments ont une largeur de 75pixels
par dfaut. S'il reste de l'espace dans la bote flexible lorsque la taille de l'cran
augmente, les lments flexbox s'tendent horizontalement pour remplir l'espace.

REMARQUE

L'utilisation d'un contour autour de la bote flexible (bote parent) consiste rendre
l'identification des frontires de la bote flexible plus facile. Vous n'avez pas inclure
de contour autour des botes flexibles dans vos applications ou pages Web.

2. Enregistrez le fichier sous le nom L5-flexbox-exercise.html et ouvrez-le dans un


navigateur Web. L'affichage doit ressembler au contenu de la figure5-8.

3. Redimensionnez la fentre du navigateur, rtrcissez-la et largissez-la, en faisant


glisser le bord droit de la fentre vers le centre de l'cran, puis de nouveau vers la
droite. Regardez comment les lments flexbox s'largissent et se rtrcissent avec la
bote flexible.
4. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Figure5-8
Cration d'une bote flexible
avec des lments flexbox,

120 | Leon 5

Vous pouvez aussi utiliser la fonctionCSS flex avec la propritCSS height ou width pour
contrler la hauteur et la largeur des lments flexbox. La proprit flex et la fonction flex
ont le mme comportement, mais utilisent une syntaxe lgrement diffrente (une fonction
utilise des valeurs entre parenthses).
L'exercice suivant vous montre comment utiliser la fonction flex et introduit la proprit
flex-wrap. La proprit flex-wrap indique si les botes enfants sagencent automatiquement
sur plusieurs lignes (comme illustr dans la figure5-9). La proprit flex-wrap utilise les
valeurs nowrap, wrap et wrap-reverse.

Figure5-9

Illustration: MightyIsland/iStockphoto

Exemple d'habillage en
utilisant le flex-wrap:
proprit wrap

Comme vous allez le voir, le code CSS utilise les prfixes fournisseurs (-ms-, -moz-, -o- et
-webkit-), qui sont obligatoires pour que la proprit flex-wrap fonctionne. N'oubliez pas, les
prfixes fournisseurs sont frquemment utiliss pendant la transition CSS3 pour rendre
le code compatible avec le plus de navigateurs possible.
CRER DES LMENTS FLEXBOX AVEC LA FONCTION FLEX
PRPAREZ-VOUS. Pour crer des lments flexbox avec la fonction flex et utiliser la
proprit flex-wrap, procdez comme suit:

1. Dans un outil d'dition ou un outil de dveloppement d'application, crez un


document HTML avec le balisage suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de fonction Flex</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 121
display: -o-flexbox;
display: -webkit-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
height: 200px;
padding: 1em;
color: white;
outline: 2px solid silver;
}
div>div {
width: 75px;
width: -ms-flex(1 75px);
width: -moz-flex(1 75px);
width: -o-flex(1 75px);
width: -webkit-flex(1 75px);
margin: 1em;
height: 100px;
background-color: #b200ff;
font-family: sans-serif;
text-align: center;
line-height: 100px;
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>Service 1</div>
<div>Service 2</div>
<div>Service 3</div>
</div>
</body>
</html>

Comme dans le dernier exercice, la proprit display: La proprit flexbox CSS permet de
crer la bote parent: la bote flexible. Le deuxime ensemble de styles div (div>div, qui
est simplement une faon abrge d'appliquer des styles un groupe d'lments HTML
sans attribuer de classes) s'applique aux lments flexbox: dans le code, la proprit
width et la fonction flex contrlent la largeur des lments flexbox qui possdent une
largeur prfre de 75pixels, mais qui occupent tout lespace libre disponible lorsque la
taille dcran augmente. La proprit flex-wrap avec la valeur wrap force les lments
flexbox sagencer automatiquement sur plusieurs lignes dans la bote flexible.
2. Enregistrez le fichier sous le nom L5-flexfunction-exercise.html et ouvrez-le dans le
navigateur Web. N'oubliez pas de maximiser la fentre. Le fichier doit ressembler la
figure5-10.

Figure5-10
lments flexbox dans une
bote flexible parent

122 | Leon 5

3. Rduisez la largeur de la fentre du navigateur en faisant glisser le bord droit de la


fentre vers le centre de l'cran. Notez qu'au fur et mesure que la bote flexible
(reprsente par le contour argent) se rtrcit, la taille des lments flexbox diminue
uniformment. La figure5-11 montre la bote flexible avec des lments flexbox une
fois la taille de la fentre du navigateur rduite.

4. Rduisez la taille de la fentre jusqu' ce que les lments flexbox sagencent


automatiquement.
5. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se
restitue correctement.
6. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Figure5-11
La bote flexible et les
lments flexbox rtrcissent
lorsque la taille de la fentre
du navigateur est rduite

Voici quelques autres proprits que vous pourriez utiliser assez souvent avec les botes flexibles:
flex-pack : justifie l'alignement des botes enfants dans une bote flexible et rduit
l'espace disponible dans la bote parent. Cette proprit adopte lune des quatre
valeurs suivantes: start, end, justify ou center.
flex-align : dfinit l'alignement par dfaut pour les botes enfants, mais avec une
torsion. Si lorientation de la bote parent est horizontale, la proprit flex-align
dtermine lalignement vertical des botes enfants, et vice-versa.
Une fois que les enfants d'une bote flexible ont termin la flexion et si l'espace est
toujours disponible dans la bote flexible, les enfants peuvent tre aligns avec les
proprits flex-pack et flex-align (ou flex-item-align). La chose la plus importante retenir est
que vous devez appliquer la proprit flex-pack la bote flexible parent dans votre code
CSS et appliquer flex-align aux lments enfants.

MODIFICATION DE L'ORIENTATION DES LMENTS ENFANTS DANS UNE BOTE


FLEXIBLE
La proprit flex-direction modifie la direction des botes enfants lintrieur de la bote
parent. Elle adopte les valeurs row, row-reverse, column et column-reverse.
La proprit flex-flow dfinit les proprits flex-direction et flex-wrap simultanment.
L'exemple suivant utilise la proprit flex-flow avec la valeur de la colonne.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de fonction Flex</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 123
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
outline: 2px solid silver;
color: white;
font-family: sans-serif;
font-weight:bold;
}
p{
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Enfant1</p>
<p>Enfant2</p>
<p>Enfant3</p>
</div>
</body>
</html>

Le rsultat du rendu de ce code et le balisage dans le navigateur Web sont illustrs dans la
figure5-12.
Figure5-12
Trois botes enfants dans
l'ordre numrique

124 | Leon 5

Pour inverser l'ordre des botes enfants, remplacez chacune des valeurs de la colonne
flex-flow par colonne-reverse, comme suit:
flex-flow : column-reverse;
ms-flex-flow : column-reverse;
-moz-flex-flow : column-reverse;
-o-flex-flow : column-reverse;
webkit-flex-flow : column-reverse;

Comparez la figure 5-13 la figure 5-12 pour voir les effets de la valeur reverse.
Figure5-13
Les mmes botes enfants
dans l'ordre inverse

INVERSER L'ORDRE DES LMENTS FLEXBOX


PRPAREZ-VOUS. Pour crer une bote flexible qui inverse l'ordre des lments flexbox,
effectuez les oprations suivantes:

1. Dans un outil d'dition ou un outil de dveloppement d'application, crez un document


HTML avec le balisage suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple d'lments flexbox en ordre invers</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 125
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
outline: 2px solid silver;
color: white;
font-family: sans-serif;
font-weight: bold;
}
p{
width: 300px;
margin: 1em;
height: 100px;
background-color: olive;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Pierre</p>
<p>Papier</p>
<p>Ciseaux</p>
</div>
</body>
</html>

2. Enregistrez le fichier sous le nom L5-reverseorder-exercise.html et ouvrez-le dans le


navigateur Web. Ajustez la taille de la fentre du navigateur afin que l'affichage ressemble
celui de la figure5-14.

3. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se
restitue correctement.

Figure5-14
Bote flexible avec des
lments flexbox oriente
verticalement

126 | Leon 5

4. Dans le fichier HTML, inversez l'ordre des colonnes l'aide de la valeur flex-flow:
column-reverse, comme suit:
flex-flow : column-reverse;
ms-flex-flow : column-reverse;
-moz-flex-flow : column-reverse;
-o-flex-flow : column-reverse;
-webkit-flex-flow: column-reverse;

5. Renregistrez le fichier et ouvrez-le dans le navigateur Web. L'affichage doit ressembler


au contenu de la figure5-15.

6. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se
restitue correctement.
7. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous passez
l'exercice suivant au cours de cette session.

Figure5-15
Les lments flexbox sont
dans l'ordre inverse

PRT POUR LA CERTIFICATION

Comment les botes


flexibles servent-elles
trier et organiser du
contenu?
3.2

TRI ET RORGANISATION DU CONTENU


Vous pouvez contrler l'ordre et la disposition du contenu d'une bote flexible l'aide de la
proprit flex-order. Cette proprit rorganise les lments enfants dans une bote flexible.
Pour ce faire, la proprit assigne des botes enfants aux groupes et contrle ensuite l'ordre
dans lequel elles apparaissent dans une mise en page, en commenant par le groupe ayant le
plus petit numro.
Nous allons voir comment la proprit flex-order fonctionne. Le code CSS suivant et le
balisage crent trois botes enfants dans une bote flexible:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de tri flexible</title>
<style media="screen">
div {
display: flexbox;
display: -ms-flexbox;

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 127
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-flow: row;
-ms-flex-flow: row;
-moz-flex-flow: row;
-o-flex-flow: row;
-webkit-flex-flow: row;
height: 200px;
padding: 1em;
background-color: palegoldenrod;
font: bold 100%/1 sans-serif;
}
div>div {
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
color: white;
font-size: x-large;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>Cls</div>
<div>Tlphone</div>
<div>Portefeuille</div>
</div>
</body>
</html>

L'ouverture du fichier dans le navigateur affiche les rsultats indiqus la figure 5-16.

Figure5-16
Trois botes enfants dans
une bote flexible avec une
orientation horizontale

REMARQUE

L'lment de style HTML prcdent comprend l'attribut media=screen, qui est une
requte de mdia. Les requtes de mdia vous permettent d'adapter un document
HTML aux priphriques des utilisateurs Parmi les types d'lment multimdia HTML
on trouve aural, braille, handheld, print, projection, screen, tty et tv. La mme syntaxe
peut galement tre utilise avec les rgles CSS @media et @import. La rgle @media all
indique que le CSS doit tre appliqu tous les mdias de sortie.
La proprit flex-order place les botes enfants dans des groupes ordonns. Le groupe par
dfaut est 0. Vous devez dclarer des groupes et leur assigner un numro en CSS en
utilisant la proprit flex-order et tous les lments enfants qui ne sont pas explicitement
affects un groupe restent dans le groupe 0. Les groupes dclars apparaissent avant le

128 | Leon 5

groupe 0. Donc, pour rorganiser les botes enfants afin que les botes Cls et Portefeuille
apparaissent avant la bote Tlphone, ajoutez ce code au bas de la section de style:
div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}

L'ouverture du fichier dans le navigateur Web donne les rsultats indiqus dans la
figure5-17.
Figure5-17
Rorganisation des botes
enfants dans une bote
parent

EXPLORER LA PROPRITFLEX-ORDER
PRPAREZ-VOUS. Pour explorer la proprit flex-order, procdez comme suit:
1. Dans un outil d'dition ou un outil de dveloppement d'application, crez un
document HTML bas sur le code prcdemment illustr dans la figure5-16.
2. Enregistrez le fichier sous le nom L5-flexorder-exercise.html.
3. Ajoutez le code suivant la fin de la section de style:

div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}

4. Enregistrez le fichier et affichez-le dans un navigateur Web. Il devrait ressembler


celui de la figure 5-17.
5. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se
restitue correctement. Notez les navigateurs qui prennent en charge les proprits
flex-flow et flex-order.
6. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Utilisation

des dispositions en grille pour appliquer au contenu un alignement,


une direction et une orientation
L'ESSENTIEL

Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez crer diffrents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout une feuille de calcul.
Les dispositions en grille sont plus adaptes des dispositions plus complexes qu'une bote
flexible peut facilement grer. Les interfaces de jeu sont de bonnes candidates pour les grilles,

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 129

tout comme les mises en page de journal (voir la figure5-18). Une disposition en grille permet
de positionner des lignes et des colonnes pour un contrle prcis de la mise en page et
ncessite une fraction du code CSS comme avec les anciennes techniques. La modularit est
un autre avantage des grilles. Pour dplacer des blocs de contenu d'un ct d'une page ou d'une
application un autre, il vous suffit de dplacer certaines lignes de code dans CSS.
Figure5-18
Mise en page de journal
l'aide d'une grille

Vous devez dfinir un lment grid (layout) en utilisant la propritCSS grid display:grid
ou display:inline-. Cela cre le conteneur pour la disposition.
PRT POUR LA CERTIFICATION

Comment une disposition


en grille est-elle utilise
pour tablir l'orientation,
la direction et l'alignement
du contenu?
3.2

Les lments enfants d'une grille sont appels lments de grille, vous pouvez les
positionner et dimensionner en fonction de ce qui suit:
Tracs de la grille: les colonnes et les lignes de la grille; vous devez dfinir les
tracs de la grille l'aide des proprits grid-rows et grid-columns
Lignes de la grille: lignes horizontales et verticales qui divisent les colonnes ou les lignes
Cellules de la grille: espace logique utilis pour organiser les lments de grille,
semblable une cellule dans une feuille de calcul
Les proprits grid et leurs valeurs sont rpertories dans le tableau5-2.

Tableau5-2
Valeurs et proprits
d'unegrille

Propert

Proprit

Valeur

Description

grid-columns

length
percentage
fraction
max-content
min-content
minmax
(min, max)
auto

Spcifie les paramtres pour


une ou plusieurs colonnes ou
lignes dans une grille

grid-template

string+
none

Offre une visualisation de la


structure de l'lment grid et
dfinit les cellules de la grille

grid-cell

string
none

Positionne un lment enfant


l'intrieur d'une cellule de grille
nomme

grid-column
ou
grid-row

[integer or
string start]
[integer or

Place des lments enfants dans


une grille

ou

grid-rows

string end]
auto
grid-column-span
ou
grid-row-span

integer

Dfinit les dimensions d'une


cellule de grille en spcifiant la
distance (en lignes) entre la
ligne de dbut la ligne de fin
(suite)

130 | Leon 5
Tableau5-2
(suite)

Proprit

Valeur

Description

grid-column-sizing

track-minmax

Modifie la taille des colonnes ou des


lignes implicites, qui sont dimensionns
automatiquement par dfaut

grid-flow

none
rows
columns

Cre des colonnes ou des lignes


supplmentaires pour recevoir du
contenu

grid-column-align

start
end
center
stretch

Contrle l'alignement de l'lment


enfant dans une cellule

ou
grid-row-sizing

ou
grid-row-align

Avec toutes les proprits disponibles il est donc vident que vous pouvez spcifier la
structure de l'lment grid, positionner et dimensionner des lments de grille de plusieurs
faons.

Cration d'une grille l'aide de proprits CSS pour les lignes et colonnes
Les proprits CSS display:grid (ou display:inline-grid), grid-columns et grid-rows sont
utilises pour crer des structures de grille. La taille des colonnes et des lignes peut
tre fixe ou flexible.
Les principales proprits qui crent une grille sont display:grid (ou display:inline-grid), grid-

columns et grid-rows.

Vous pouvez dfinir une taille fixe pour les colonnes et les lignes, ainsi elles ne sont pas
redimensionnes lorsque la taille de l'cran change, ou dfinir une taille fractionnaire par
rapport la grille. Les tailles fractionnaires sont dfinies avec fr, ainsi, une ligne dfinie
avec2fr prsentera une taille deux fois suprieure la taille dune ligne dfinie avec 1fr.
La valeur 1fr est l'abrviation de une fraction. Vous pouvez galement utiliser la valeur auto
PRT POUR LA CERTIFICATION

Quelles sont les proprits


CSS pour les colonnes et
les lignes de la grille?
3.2

Figure5-19
Disposition en grille simple

pour que des colonnes ou des lignes s'adaptent leur contenu.

Le code CSS suivant et le balisage HTML fournissent un exemple de prsentation de la


grille. Le prfixe fournisseur - ms- est inclus au dbut de toutes les constructions lies la
grille parce que, ce jour, seul Microsoft Internet Explorer10 prend en charge les dispositions en grille. Ceci est illustr dans la figure5-19.

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 131
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de grille</title>
<style type="text/css">
#grid {
background: palegoldenrod;
border: silver;
display: -ms-grid;
color: white;
font-family: sans-serif;
font-weight: bold;
-ms-grid-columns: 150px auto 2fr; fraction: 2 * 150 = 300 px
-ms-grid-rows: 50px 6em auto; em: unit de mesure suite au font de caractre
font=12, 6em => 6*12 pixels
}
#logo {
background: dodgerblue;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#item {
background: olive;
-ms-grid-row: 2;
-ms-grid-column: 2;
}
</style>
</head>
<body>
<div>
<div id="grid">
<div id="logo">Logo</div>
<div id="item">Article</div>
</div>
</div>
</body>
</html>

Dans cet exemple, la structure de la grille a trois colonnes et trois lignes. La premire
colonne a une largeur fixe de 150pixels. La largeur de la deuxime colonne s'ajuste en
fonction du contenu, comme indiqu par le mot cl auto. La troisime colonne correspond
deux units de fraction de lespace restant dans la grille.
La premire ligne est de 50pixels de haut, la deuxime ligne est de 6ems de haut, et la
troisime ligne s'ajuste en fonction du contenu.
CRER UNE DISPOSITION EN GRILLE SIMPLE
PRPAREZ-VOUS. Pour crer une disposition en grille simple, effectuez les oprations
suivantes:
1. Dans un outil d'dition ou un outil de dveloppement d'application, crez un
document HTML bas sur le code prcdemment illustr dans la figure5-19.
2. Enregistrez le fichier sous le nom L5-grid-exercise.html.
3. Ouvrez le fichier L5-grille-exercise.html dans Internet Explorer10. Si vous affichez le
fichier HTML dans un autre navigateur, cela va produire des rsultats inattendus. La
disposition doit se prsenter comme dans la figure5-19.

132 | Leon 5

4. Ajoutez un autre lment la grille afin qu'une cellule s'affiche dans la troisime ligne
et la troisime colonne. Pour ce faire, insrez le texte suivant la fin de la section de
style:
#item2 {
background: orange;
-ms-grid-row: 3;
-ms-grid-column: 3;
}

5. Insrez le texte suivant aprs l'lment div dans la section body:


<div id="item2">Article2</div>

6. Renregistrez le fichier et affichez-le dans un navigateur Web. La disposition doit se


prsenter comme dans la figure5-20.

7. Fermez l'outil d'dition et le navigateur Web.

Figure5-20
Troisime lment ajout
la grille

PLUS DINFORMATIONS
Pour plus d'informations sur les dispositions en grille, visitez la page Disposition en grille CSS sur
http://www.w3.org/TR/css3-grid-layout/.

Prsentation des modles de grille


Un modle de grille utilise des caractres alphabtiques pour reprsenter la position
des lments dans une grille. Vous devez utiliser les caractres alpha avec les
proprits grid-template, grid-rows et grid-columns pour crer une grille dans
laquelle les donnes peuvent tre organises.
PRT POUR LA CERTIFICATION

Qu'est-ce qu'un modle de


grille?
3.2

Le module des modles de disposition en grilleCSS du groupeW3C prsente une autre


approche des dispositions en grille en crant un modle de grille, qui ressemble un
tableau vide dans lequel les donnes peuvent tre organises. Un modle de grille utilise
des caractres alphabtiques pour reprsenter la position des lments dans une grille.
Utilisez la proprit grid-position et attribuez un caractre alphabtique comme valeur de position.
Les exemples suivants illustrent la proprit grid-position dfinie pour les quatre lments:
news { grid-position: a; }
weather { grid-position: b; }
sports { grid-position: c; }
events { grid-position: d; }

une chaine = 1e ligne


un caractre = 1e colonne

Aprs l'attribution des positions, crez une disposition avec des chanes de caractres.
Unechane est gale une ligne, et chaque caractre de la chane est une colonne. Par
exemple, pour crer une grille avec une seule ligne et quatre colonnes qui s'ajustent au
contenu, vous devez utiliser la syntaxe suivante:
div { grid-template: "abcd"; grid-rows: auto;
grid-columns: auto;}

Prsentation des notions essentielles sur les feuilles de style en cascade CSS: Dispositions | 133

Bien que cet exemple utilise le mot cl auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqu dans le tableau5-2.
Les spcifications pour les dispositions de modle de grille sont semblables des bauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rdaction de ce
document. Cependant, vous pourriez rencontrer des modles de grille pour l'examen MTA
98-375. Vous devriez donc vrifier la dernire spcification du module des modles de
disposition en grilleCSS du groupeW3C lors de la prparation de l'examen.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
L es interfaces utilisateur peuvent tre simples et directes ou tre plus complexes
avec plusieurs sections, boutons et contrles.
La conception d'une interface qui s'affiche bien sur les grands crans de PC et sur les petits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modle de bote flexibleCSS et le modle de disposition en grille rduisent la quantit de
code ncessaire pour la compatibilit inter-priphriques. Comme les spcifications CSS
ne sont pas encore dfinitives, vous devrez utiliser des prfixes spcifiques au fournisseur
avant les noms de proprits CSS pour tout faire fonctionner.
Les botes flexibles sont conues pour les barres doutils, les menus, les formulaires
et dautres lments semblables dans des pagesWeb et applications. Les grilles sont
mieux adaptes aux conceptions labores.
Une bote flexible et son contenu peuvent tre configurs pour modifier la taille,
horizontalement et verticalement, lorsque la taille de l'cran sur lequel ils sont
affichs change. Vous pouvez galement inverser le sens et l'ordre des botes
flexibles avec une ligne de code.
Une bote flexible peut contenir des botes enfants flexibles en hauteur et en
largeur. Vous devez utiliser la proprit flex avec les botes enfants. La proprit
flex-flow dfinit les proprits flex-direction et flex-wrap d'une bote flexible (la bote
parent) en mme temps.
Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez crer diffrents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout une feuille de calcul.
Vous devez utiliser les proprits CSS display:grid (ou display:inline-grid), grid-columns
et grid-rows pour crer des structures de grille. La taille des colonnes et des lignes
peut tre fixe ou flexible.
Les botes flexibles et les grilles sont conues pour mettre l'chelle proportionnellement.
La proprit flex-order vous permet de modifier l'ordre des lments enfants dans
une bote flexible, de les rorganiser dans un ordre quelconque sans avoir les
modifier dans le balisage HTML.
Un modle de grille utilise des caractres alphabtiques pour reprsenter la
position des lments dans une grille. Vous devez utiliser les caractres alpha avec
les proprits grid-template, grid-rows et grid-columns pour crer une grille dans
laquelle les donnes peuvent tre organises.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. L' User Interface est la partie dun siteWeb ou dune application avec laquelle
l'utilisateur peut interagir.
2. Dans le modle de boteCSS de W3C dorigine, la marge interieur
(padding)
entre la bordure et le contenu de la bote.

dsigne lespace

134 | Leon 5
block
3. Dans le modle de boteCSS de W3C, un lment de niveau
permet de crer des botes qui assistent la mise en page du document.

4. Les botes flexibles enfants sont appeles elements flexBox et sont agences selon le
(flex)
modle de bote flexible.
5. Les lments enfants d'une grille sont appels

elements de grille

6. FlexBox
offre une mthodologie de disposition flexible pour la cration dune
interface utilisateur, notamment pour crer des contrles, des barres doutils, des
menus et des formulaires qui sont redimensionns et repositionns automatiquement
lorsque lutilisateur change la taille de la fentre du navigateur.
7. La relation parent-enfant dcrit la manire dont une bote parent peut contenir une
ou plusieurs botes enfants.
8. Un modele de grille ressemble un tableau vide dans lequel les donnes peuvent
tre organises.
9. Un lment include
est conu pour agencer le texte sans nuire la structure
du document. Citons comme exemples les caractres gras et le nouvel
lmentHTML5 mark.
10. Alors que le modle de bote flexible convient parfaitement des lments simples,
comme les boutons, les barres doutils et de nombreux formulaires, vous pouvez
utiliser le modle en grille
pour les dispositions plus complexes.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les lments suivants, lequel ne figure pas dans le modle de boteCSS de
W3C dorigine?
a. margin
b. bordure
c. toolbar
d. remplissage padding
2. Parmi les modles suivants, lequel convient le mieux aux boutons et barres doutils?
a. Modle de bote flexible (Flexbox)
b. Modle de boteCSS
c. Modle de disposition en grille
d. Aucune des rponses cidessus
3. Vous utilisezCSS pour crer une bote flexible dans un documentHTML dans le
cadre de votre travail. Tout le monde au bureau utilise le navigateur Web Internet
Explorer. Quel prfixe devez-vous utiliser avec le nom des propritsCSS pour
garantir la compatibilit de laffichage du documentHTML?
a. -mozb. -msc. -webkitd. -o 4. Quelle proprit flexbox permet de rendre les botes enfants flexibles au niveau de la
hauteur et de la largeur?
a. flex
b. flex-child
c. flex-wrap
d. flex-align
5. Vous souhaitez rpartir lespace vide dans une fentre de navigateur de manire
uniforme en fonction de la taille de toutes les botes enfants lintrieur dune bote
flexible. Quelle propritCSS devez-vous utiliser?
a. flex-align
b. flex-wrap
c. flex-order
d. flex-pack

Understanding CSS Essentials: Layouts | 135

6. Quelle proprit flexbox permet daffecter des lments enfants des groupes pour
contrler la disposition lintrieur dune bote flexible?
a. flex
b. flex-group
c. flex-direction
d. flex-order
7. Parmi les proprits suivantes, laquelle permet de placer des lments enfants dans
une grille?
a. grid-columns
b. grid-column
c. grid-flow
d. grid-pack
8. Parmi les propositions suivantes, laquelle permet dadapter un documentHTML aux
priphriques des utilisateurs?
a. Requtes multimdias <div media="screen">
b. Modle de boteCSS
c. Proprit grid-template
d. @import
9. Parmi les propositions suivantes, laquelle correspond la meilleure utilisation dune
disposition en grille?
a. Menu
b. Barre doutils
c. Pied de page
d. Interface de jeu la plus complexe
10. Quelle est la fonction principale dun modle de grille?
a. Appliquer un style une grille
b. Crer une table pour recueillir des donnes
c. Sassurer que la grille possde un nombre gal de colonnes et de lignes
d. Aucune des rponses cidessus

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettreF si elle est fausse.
VF1.
Une bote flexible est dfinie par un lment avec les propritsCSS
display:boxflex ou display:inline-boxflex.
VF2.
Une bote parent peut contenir une ou plusieurs botes enfants.
VF3.
Vous ne pouvez pas inverser lordre des botes enfants lintrieur dune bote
flexible.
Une bote flexible ncessite un contour ou une couleur darrire-plan.
VF4.
VF5.
Une disposition en grille convient davantage un journal en ligne ou un jeu vido.

valuation

des comptences
Scnario5-1: Faire la distinction entre le modle de bote flexible (Flexbox)
et le modle de disposition en grille
Une collgue, Cynthia, confond le modle de bote flexibleCSS de W3C avec le modle
de disposition en grille. Comment lui expliquez-vous la diffrence?

Scnario5-2: Prsentation des botes flexibles et des lments flexbox


Mlle Takeet est enseignante dans une cole maternelle prive Barely Tall Academy. Elle
souhaite dvelopper un jeu de mmoire pour aider les lves connatre les animaux
dAfrique. Le jeu doit comporter un grand nombre de botes contenant des images et des

136 | Lesson 5

questions. Elle dcide dutiliser une disposition flexible, mais na aucune exprience
avecHTML5 ouCSS. Elle est assez frustre de ne pas comprendre les dtails des botes
flexibles et des lments flexbox. Que pouvez-vous dire Mlle Takeet?

valuation de la matrise des concepts


Scnario5-3: Solution lincompatibilit des navigateurs
Ed raconte que mme en vrifiant de prs son codeCSS et le balisageHTML et en validant
son document sur la page Web Service de validation du W3C (World Wide Web Consortium),
le document ne saffiche pas comme prvu dans son navigateur Web. Certaines proprits
flexbox ne fonctionnent tout simplement pas. Que pouvez-vous dire Ed?

Scnario5-4: Prsentation de la proprit Flex


Revoil Ed avec un autre problme. Il teste la proprit flex pour crer des sections dune
page Web. Il voudrait que la taille dune bote enfant corresponde au double de la taille de
lautre bote enfant sur la mme ligne. Il utilise une valeur de2 pour la seconde bote,
mais elle ne saffiche pas dans les proportions doubles par rapport la premire bote
enfant. Que pouvez-vous lui dire pour laider mieux comprendre la proprit flex?

Gestion de
lenchanement du
texte avecCSS

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA


Numro de l'objectif
de l'examen MTA

Gestion de l'enchanement du
texte avecCSS

Grer lenchanement du texte


avecCSS

3.3

Prsentation et utilisation des


rgions pour contrler
l'enchanement du texte entre
plusieurs sections

Grer lenchanement du texte


avecCSS

3.3

TERMES CLS
csure

flow-into

conteneur de contenu

flux nomm

disposition multicolonne

iframe

lment flottant positionn

rgions CSS

exclusions CSS

source de contenu

flow-from

Stacey, gestionnaire du site Web de Media Malted Milk, a pu se familiariser avecHTML5


etCSS3 avec votre aide. Elle aimerait en savoir plus sur les techniques de gestion de flux
de contenu l'aide deCSS3. Elle souhaite prparer une prsentation lectronique sur les
rgionsCSS, la disposition multicolonne, la csure et les exclusionsCSS, puis prsenter
ces informations au personnel au cours d'un djeuner-colloque la semaine prochaine.

Gestion

de l'enchanement du texte avecCSS

L'ESSENTIEL

Historiquement, la gestion du flux de contenu tait une procdure effectue manuellement


dans les documents HTML. Dsormais, les rgions et les exclusionsCSS ainsi que les
dispositions plusieurs colonnes permettent d'enchaner le contenu de manire dynamique.

137

138|Leon 6

Les diteurs de logiciels comme Adobe et Microsoft ont su paramtrer avec une grande
prcision la mise en page complexe de publications imprimes telles que les magazines, les
journaux et les livres. AdobeInDesign, MicrosoftPublisher et mme MicrosoftWord2010
grent de manire efficace l'enchanement du contenu dans les colonnes. InDesign et
Publisher sont particulirement efficaces lorsqu'il s'agit de rpartir le contenu dans les zones
non contigus (adjacentes) d'un document, parfois spares par des images, des botes de
contenu voire des pages. Les logiciels de publication assiste par ordinateur permettent
d'enchaner facilement le contenu entre les diffrentes zones. Ainsi, lorsqu'une zone est
modifie, le contenu est correctement redistribu dans les autres zones connectes.
Depuis des annes, l'enchanement du contenu de documents HTML reprsentait un
vritable dfi pour les concepteurs Web et les concepteurs d'applications. Dans un document
HTML, l'affichage d'une disposition complexe requiert le mme positionnement flexible de
botes que celui offert par les logiciels de publication assiste par ordinateur, mais les outils
ncessaires pour ce type d'enchanement ne sont disponibles que depuis trs peu de temps.
PRT POUR LA CERTIFICATION

Comment faut-il
utiliserCSS pour grer le
flux de contenu de texte
dans un document HTML?
3.3

Microsoft et Adobe ont collabor avec le groupeW3C pour crer le concept de rgionsCSS
pour l'enchanement de contenu Web. Les rgionsCSS permettent aux dveloppeurs d'organiser
de manire dynamique le contenu de plusieurs botes, ou conteneurs, dans les documentsHTML
avec des dispositions fluides. Le contenu s'adapte et s'affiche correctement, que l'utilisateur
consulte le document sur un moniteur d'ordinateur de grand format ou sur l'cran d'une tablette.
Si CSS3 permet d'utiliser la disposition multicolonne pour rpartir le contenu dans
plusieurs colonnes (voir la figure6-1), les rgionsCSS permettent de mieux contrler
l'enchanement du contenu dans le cas de dispositions plus complexes. Pour combiner
les rgionsCSS, vous devez utiliser des techniques de dispositionCSS, notamment les
colonnes, les botes flexibles et les dispositions en grille.

Figure6-1

REMARQUE

Illustration: Megan Tamaccio/iStockphoto

DispositionWeb avec des


colonnes

Microsoft recommande
d'utiliser les rgionsCSS
pour la mise en page
et JavaScript lors
du dveloppement
d'applications Windows
Store dans Windows8 et
InternetExplorer10.

La csure, qui coupe les mots entre les syllabes en fin de ligne, est galement importante
pour des mises en page fluides, car elle permet de justifier l'ensemble des paragraphes
indpendants ainsi que ceux contenus dans les colonnes. Les lments flottants positionns,
dsormais appels exclusionsCSS, vous permettent d'entourer compltement de texte des
images, des formes ou des conteneurs de texte.
Cette leon aborde les rgionsCSS, la disposition multicolonneCSS3, la csureCSS3 et les
lments flottants positionns. Vous apprendrez comment enchaner et prsenter le contenu
dans des dispositions HTML capables de s'ajuster de manire dynamique.

PLUS DINFORMATIONS
Pour plus d'informations sur les rgionsCSS, la csure et la disposition plusieurs colonnes, Microsoft
et Adobe proposent des ressources qu'il est utile de consulter. Rich page layout with HTML et CSS3
(RgionsCSS3: Mise en page enrichie avec HTML et CSS3) l'adresse http://adobe.ly/kN7MUy. Pour
accder aux informations fournies par Microsoft, consultez la page Web CSS l'adresse http://
msdn.microsoft.com/fr-fr/library/hh673536(v=VS.85).aspx.

Gestion de lenchanement du texte avecCSS | 139


Prsentation

et utilisation des rgions pour contrler l'enchanement du


texte entre plusieurs sections

L'ESSENTIEL

Les rgionsCSS vous permettent d'enchaner le contenu entre les diffrentes zones, adjacentes
ou non, d'un document HTML. Les rgionsCSS reprsentent des zones (rgions) dfinies
d'un documentHTML dans lesquelles le contenu peut tre rparti. Lorsqu'une rgion ne peut
pas recevoir la totalit du contenu, le reste du contenu est automatiquement insr dans la
rgion suivante. Ceci est similaire au fonctionnement des programmes de mise en page.
Dans un documentHTML standard, vous pouvez afficher le contenu dans diffrentes sections
ou zones, mais chaque zone est indpendante. Pour faire passer le texte de dbordement
d'une zone l'autre, l'opration est gnralement manuelle. Cette mthode ne convient pas
vraiment une situation dans laquelle un utilisateur redimensionne l'cran ou utilise des outils
d'accessibilit, par exemple une loupe. Cette mthode ne permet pas non plus de basculer
automatiquement entre le mode portrait et le mode paysage sur les tablettes et les smartphones.
Les rgionsCSS reprsentent une solution ce problme.

PRT POUR LA CERTIFICATION

Que sont les rgionsCSS?


3.3

Les rgionsCSS reprsentent des zones (rgions) dfinies d'un documentHTML dans
lesquelles le contenu peut tre rparti. Comme pour les programmes de mise en page, lorsque
le contenu est trop volumineux pour sinsrer dans une rgion, le reste du contenu passe
automatiquement dans la rgion suivante. (Voir la figure6-2.) Si un utilisateur redimensionne
l'cran sur lequel le document est affich, ou s'il affiche le document sur un cran plus petit ou
plus grand, le contenu est redimensionn et se redroule automatiquement dans les diverses
rgions.

Figure6-2
Flux de contenu avec les
rgionsCSS

Il n'est pas ncessaire que les rgions soient adjacentes dans le document, et vous
pouvez contrler l'ordre dans lequel le contenu insr s'affiche. La figure6-3 illustre
l'enchanement d'un contenu dans des rgions non contigus. Ce type d'enchanement
est semblable l'enchanement d'un article; il permet d'ajouter des citations et des
encadrs un document sans affecter l'enchanement du contenu.
Figure6-3
Flux de contenu non contigu
entre les rgions

140 | Leon 6

Enchanement dynamique du contenu travers les conteneurs


Pour implmenter des rgionsCSS, vous devez spcifier une source de contenu et
des conteneurs de contenu. Ces deux tches sont effectues l'aide des propritsCSS
flow-into et flow-from .

PRT POUR LA CERTIFICATION

Que reprsentent une


source de contenu et un
conteneur de contenu par
rapport aux rgionsCSS?
3.3

PRT POUR LA CERTIFICATION

Comment contrler
l'enchanement du texte
entre plusieurs rgions?
3.3

Une source de contenu reprsente un ou plusieurs blocs de texte dans un


documentHTML identique ou distinct contenant les donnes organiser laide dune
disposition. Le contenu est galement appel flux de contenu.
Vous avez galement besoin de conteneurs de contenu, c'est--dire les zones dans
lesquelles le contenu est organis. Un documentHTML comportant des conteneurs de
contenu sert de page matre, comme un modle. Chaque conteneur est dimensionn et
positionn l'emplacement o vous souhaitez afficher le contenu; mais au dpart chaque
conteneur est vide.
Dans la source de contenu, la propritCSS flow-into est attribue l'lment qui contient
le contenu organiser. La valeur de cette proprit est appele un flux nomm.
L'exemple suivant commence par du codeCSS pour une source de contenu. La valeur de
flow-into est main, qui est le flux nomm. Dans la mesure o le contenu sera affich
un autre emplacement (dans les conteneurs de contenu), cet lment source proprement dit
ne sera pas visible sur la pageHTML.
<style>
#source {
flow-into: main;
}
.region {
flow-from: main;
background: #9ACD32;
}
</style>
<body>
<div id="source">
<p>Lorem ipsum dolor ...</p>
</div>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>
</body>

REMARQUE

Le W3C dfinit les rgionsCSS dans la spcification relative aux rgionsCSS, encore
en cours de rdaction ce jour. Ainsi, l'instar des botes flexibles et des grilles dcrites
dans la leon5, il convient d'utiliser le prfixe du fournisseur avec les noms de proprits.
L'utilisation du prfixe de fournisseur est aborde dans l'exercice tape par tape suivant.

Dans ce mme exemple, la propritCSS flow-from cre le conteneur de contenu, qui


est une rgionCSS. La valeur de la proprit flow-from doit correspondre la valeur du
flux nomm de la proprit flow-into C'est ainsi que sont associs la source de contenu
et le conteneur de contenu. (Dans l'exemple de cette section, la source de contenu et

Gestion de lenchanement du texte avecCSS | 141

les conteneurs de contenu se trouvent dans le mme document HTML pour plus de
commodit. Dans une application relle, vous utiliserez probablement un document
HTML distinct pour la source et les conteneurs.)
Lorsqu'un navigateur affiche la page avec les conteneurs de contenu, le contenu est
rparti dans les conteneurs et s'affiche l'cran, comme illustr la figure6-4. Si vous
redimensionnez l'cran, le contenu se redroule tel qu'illustr la figure6-5.
Figure6-4
Flux de contenu dans des
conteneurs

Figure6-5
Le redimensionnement de
l'cran redroule le contenu

Vous pouvez galement utiliser plusieurs sources et affecter la proprit flow-into plusieurs
lments. Le contenu est extrait de la source dans l'ordre dans lequel il apparat dans le
modle DOM (Document Object Model). C'est ce que l'on appelle l'ordre des documents.

REMARQUE

Le modle DOM a t prsent dans la leon1, mais il est utile d'y revenir ici. Le
modle DOM est une spcification du W3C qui dcrit la structure des documents
HTML et XML (Extensible Markup Language) de manire permettre un navigateur
Web de les manipuler. Le modle DOM permet aux programmes et aux scripts de
mettre jour le contenu, la structure et les styles la vole; n'importe quel lment
d'un fichier HTML ou XML peut ainsi tre modifi.

142 | Leon 6

DBORDEMENT DU TEXTE

Afin que les rgionsCSS fonctionnent, l'enchanement du contenu ne doit pas affecter la
hauteur d'une rgion; vous devez dfinir la hauteur des rgions dansCSS de manire ce
qu'elles ne soient pas flexibles. Une rgion reoit autant de contenu que possible, puis le
reste du contenu est insr dans la rgion suivante.
S'il reste du contenu une fois toutes les rgions remplies, l'un des trois scnarios suivants
peut se produire. L'excs de contenu de la dernire rgion peut:
tre tronqu
Continuer dborder et tre visible
Continuer dborder, mais tre masqu
Vous pouvez contrler la faon dont la dernire rgion gre le dbordement du contenu
l'aide des proprits region-overflow et overflow.
region-overflow a la valeur auto ou break. l'aide de la valeur auto, vous dfinissez la
proprit overflow du contenu selon que celui-ci doit tre visible ou masqu. Par exemple,
si vous souhaitez que le contenu continue dborder et qu'il soit visible, utilisez la
syntaxe suivante:
.region {
region-overflow:auto;
Dbordement visible overflow:visible;
}

La figure6-6 montre le contenu visible qui dborde au-del de la dernire rgion.


Figure6-6
Dbordement de contenu
visible

L'affectation de la valeur break la proprit region-overflow empche le contenu de


dborder au-del de la dernire rgion, tronquant le contenu cet emplacement. La
syntaxe est la suivante:
.region {
region-overflow:break;
}

IMPLMENTATION MICROSOFT DES RGIONSCSS


La mthode utilise par Microsoft pour l'implmentation des rgionsCSS diffre
lgrement de la version de W3C dcrite prcdemment. Microsoft utilise des iframes,
qui dsignent des mini-botes sur une pageWeb dont le contenu externe est intgr dans
un documentHTML, telle que la source de contenu. Vous devez galement utiliser le
prfixe du fournisseur -ms- avec les proprits flow-into et flow-from.

Gestion de lenchanement du texte avecCSS | 143

L'exemple suivant illustre un lment iframe avec un ID unique, que vous ajoutez une
page matre:
<iframe id="main-data-source" src="source.html" />

Ensuite, vous crez le flux nomm l'aide d'un slecteurCSS qui spcifie la source de
donnes:
#main-data-source { -ms-flow-into: main; }

Pour crer des conteneurs de contenu, assignez un nom de classe aux lments que vous
souhaitez utiliser en tant que conteneurs:
<div class="region"></div>
<div class="region"></div>

REMARQUE

L'utilisation de region dans les deux cas n'est pas une erreur! Tout comme pour
l'application d'une rgleCSS, vous pouvez identifier les rgions l'aide d'un nom de
classe partag (comme dans cet exemple) ou les rpertorier l'aide d'ID individuels
(comme dans le premier exemple).
Crez ensuite un slecteurCSS qui spcifie la source de donnes permettant d'accepter le
flux de contenu:
.region { -ms-flow-from: main; }

Si vous comparez ces code et balisage spcifiques Microsoft l'exemple gnral illustr
prcdemment, il est possible d'identifier assez aisment les similitudes.
Il convient de noter plusieurs autres lments se rapportant la version de Microsoft des
rgionsCSS, certains pouvant figurer dans l'examen 98-375:
msRegionUpdate : permet de manipuler de manire dynamique les rgions
msRegionOverflow : gre le dbordement de contenu, l'instar de la proprit region-overflow
msGetRegionContent : mthode de script dfinie par Microsoft comme renvoyant
unematrice d'instances Range correspondant au contenu du flux de rgion qui
setrouve dans la rgion
Vous rencontrerez peut-tre ces lments lorsque vous recherchez ou dveloppez des
rgionsCSS pour Windows8 ou InternetExplorer10.
CRER DES RGIONSCSS
PRPAREZ-VOUS. Pour crer des rgionsCSS fixes, procdez comme suit:

1. Dans un outil d'dition ou un outil de dveloppement d'applications, crez un


document HTML incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de rgionsCSS</title>
<style type="text/css">

144 | Leon 6
body, html { height:100%; width:100%; }
body{
famille de polices sans serif;
color: black;
font-size: large;
}
#source{
-webkit-flow-into: main;
}
.region{
-webkit-flow-from: main;
margin: 0 25px 0 0;

background: #EEE8AA;
padding: 20px;
}
#region1{
width: 20%;
height: 50%;
float: left;
}
#region2{
width: 20%;
height: 50%;
float: left;
}
#workarea{

position: absolute;
padding: 25px;
}
</style>
</head>
<body>
<div id="source">
<p>Lorem ipsum dolor . . . mollis a ipsum.</p>
</div>
<div id="workarea">
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
</div>
</body>
</html>

Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du


contenu a t omise des fins de prsentation. Dans votre document HTML, incluez
un paragraphe de texte factice comportant entre 8 et 10lignes.

2. Enregistrez le fichier sous L6-regions-exercise.html.
3. Appliquez le style gras quelques mots, au milieu du paragraphe environ.
4. Renregistrez le fichier.

Gestion de lenchanement du texte avecCSS | 145


5. Notez que le codeCSS utilise le prfixe de fournisseur -webkit- . Vous devez utiliser un
indicateur de ligne de commande pour activer les rgionsCSS dans le navigateur. Pour ce
faire, slectionnez Dmarrer, tapez le nom du navigateur dans la zone Rechercher, cliquez
avec le bouton droit de la souris sur le nom du navigateur dans la liste de rsultats, puis
slectionnez Proprits. La bote de dialogue Proprits s'affiche. Dans le champ Cible,
positionnez le curseur la fin du champ, entrez un espace et tapez --enable-css-regions.

6. Cliquez sur OK.


7. Ouvrez le fichier L6-regions-exercise.html dans le navigateur Web. Redimensionnez la
fentre du navigateur de faon ce que le contenu s'affiche dans les conteneurs et
que le contenu en gras soit positionn dans le conteneur de gauche. Les rsultats
doivent ressembler ceux de la figure6-7.

Figure6-7
Enchanement de contenu
dans des conteneurs de
rgionsCSS

8. Rduisez la taille de la fentre du navigateur pour voir l'effet du dbordement du contenu.


9. Comment empcher le dbordement du contenu dans le deuxime conteneur?
Apportez les modifications ncessaires au codeCSS, renregistrez le fichier et affichez
les rsultats dans le navigateur.
10. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Reportez-vous la page Web CSS Regions Module Level 3 du W3C l'adresse http://www.w3.org/
TR/2012/WD-css3-regions-20120823// pour obtenir les dernires informations sur l'implmentation
des rgionsCSS. Vous pouvez raliser un exercice pratique l'aide des rgionsCSS sur le site Web de
Microsoft l'adresse http://bit.ly/veOZX2. Cette page peut ncessiter l'utilisation d'Internet Explorer10
pour un rendu correct).

Utilisation des colonnes et de la csure pour optimiser la lisibilit du texte


CSS3 vous permet de crer des dispositions plusieurs colonnes dont le fonctionnement est
similaire celui de la fonctionnalit de colonnes de Microsoft Word. Vous pouvez galement
activer la csure afin de couper correctement les mots la fin des lignes. Ceci vite que les
longs mots sautent la ligne suivante, laissant un espace la fin de la ligne prcdente.
Parmi les nouvelles fonctionnalits de CSS3 figurent la csure et les dispositions plusieurs
colonnes. l'instar des journaux, vous pouvez maintenant crer des documents HTML
comportant plusieurs colonnes qui sont redimensionnes en fonction de la taille de l'cran de
l'utilisateur. La csure permet de couper les mots entre les syllabes en fin de ligne, de faon
crer une marge droite plus uniforme et liminer les espaces vides dans les paragraphes.

146 | Leon 6

CRATION DE COLONNES
Les propritsCSS3 dune disposition multicolonne permettent de crer des colonnes
en rpartissant le texte sur plusieurs colonnes, de spcifier lespace entre les colonnes
(espacement), d'afficher des lignes verticales (rgles) entre les colonnes et de dfinir la
position des sauts de colonne.
Les principales propritsCSS utilises pour crer et manipuler plusieurs colonnes d'un
document HTML sont les suivantes:
column-count : dfinit le nombre de colonnes que doit comporter un lment; peut
galement utiliser la proprit columns avec les valeurs de proprits set columncount et column-width simultanment
column-gap : spcifie l'espacement entre les colonnes, galement appele reliure
column-rule : cre une ligne verticale dans l'espace qui spare les colonnes et dfinit la largeur,
le style (ligne simple ou double, trait, pointills, 3D, etc.) et la couleur de la rgle
La disposition multicolonneCSS3 utilise le concept de la zone de colonnes pour
dsigner le conteneur qui renferme le contenu et l'affiche dans des colonnes. La zone de
colonnes se trouve entre la zone de contenu et le contenu dans le modle de boteCSS
original. (Reportez-vous la leon5 si vous souhaitez passer en revue les informations se
rapportant au modle de bote.)
Le tableau6-1 rpertorie toutes les proprits de colonne qui fonctionnent dansCSS3.

Tableau6-1
Proprits multicolonnes
utilises dans CSS3

Proprit

Valeur

Description

break-after

auto
always
avoid
left
right
page
column
region
avoid-page
avoid-column
avoid-region

Insre un saut de ligne aprs la zone de


colonnes gnre

break-before

(identique
break-after)

Insre un saut de ligne avant la zone de


colonnes gnre

break-inside

auto
avoid
avoid-page
avoid-column
avoid-region

Insre un saut de ligne l'intrieur de la


zone de colonnes gnre

column-count

integer
auto

Dfinit le nombre de colonnes utilises


par un lment

column-fill

auto
balance

Dfinit comment les colonnes sont


remplies; rpartit le contenu de manire
uniforme entre les colonnes, si possible,
ou les remplit de manire squentielle
(suite)

Gestion de lenchanement du texte avecCSS | 147


Tableau6-1
Suite

PRT POUR LA CERTIFICATION

Comment crer plusieurs


colonnes dans un
document HTML l'aide
de CSS?
3.3

Proprit

Valeur

Description

column-gap

length
normal

Spcifie l'espacement entre les colonnes

column-rule

column-rule-width
column-rule-style
column-rule-color
transparent

Proprit abrge qui dfinit les proprits column-rule-width, column-rule-style


et column-rule-color au mme emplacement dans une feuille de style

column-rule-color

color

Spcifie la couleur de la rgle entre les


colonnes

column-rule-style

border-style

Spcifie le style de la rgle entre les


colonnes, par exemple ligne unie, ligne
double, pointills et ainsi de suite

column-rule-width

border-width

Spcifie la largeur de la rgle entre les


colonnes

column-span

none
all

Spcifie si un lment doit s'tendre sur


aucune colonne ou toutes les colonnes

column-width

length
auto

Spcifie la largeur d'une ou de plusieurs


colonnes

columns

column-width
column-count

Dfinit la fois les proprits columnwidth et column-count

Voyons maintenant comment fonctionne le codeCSS. Le code suivant utilise la proprit


column-count pour crer trois colonnes en utilisant le texte du balisage HTML suivant:
<head>
<style>
.tricolumn { column-count: 3; }
</style>
</head>
<body>
<h2>Trois colonnes</h2>
<div class="tricolumn">
Lorem ipsum . . . orci.
</div>
</body>

Dans la mesure o les colonnesCSS3 sont encore en cours de cration, il conviendra


peut-tre d'ajouter des prfixes de fournisseur aux noms de proprits associs aux
colonnes. Dans le cas de cet exemple, nous avons modifi le code comme suit pour
les quatre principaux navigateurs:
<style>
.tricolumn {
-ms-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-webkit-column-count: 3;
}
</style>

148 | Leon 6

Les rsultats doivent ressembler ceux de la figure6-8 dans le navigateur Web de Mozilla
Firefox.
Figure6-8
Trois colonnes

Vous pouvez crer plusieurs colonnes l'aide de la proprit columns Cette proprit
permet de dfinir rapidement le nombre de colonnes et leur largeur dans une mme
dclaration. Le code suivant utilise la valeur auto pour la largeur des colonnes:
.tricolumn { columns: 3 auto; }

Une autre faon d'utiliser la proprit columns consiste affecter une valeur numrique
column-width et laisser la valeur column-count auto. L'exemple suivant dfinit columnwidth sur 15em, ce qui signifie que l'lment plusieurs colonnes aura une largeur de
colonne de 15ems (ou 15fois la largeur de la taille de police du contenu de la colonne):
columns: auto 15em;

Ajoutons maintenant une rgle aux colonnes. Cette proprit dfinit la largeur, le style et
la couleur de la rgle entre toutes les colonnes. La syntaxe utilise pour une ligne bleue
pointille de 3pixels de large est la suivante:
column-rule: 3px dashed blue;

Pour contrler la taille de l'espacement entre les colonnes, utilisez la proprit column-gap .
Cette proprit utilise une valeur entire, comme illustr ci-dessous, ou le mot cl normal.
column-gap: 3em;

L'effet combin de trois colonnes avec une rgle de colonne et un espacement de3em est
illustr la figure6-9 (avec les prfixes de fournisseur appliqus). Le redimensionnement
de la fentre du navigateur entrane galement le redimensionnement des colonnes et la
redistribution du contenu dans celles-ci, comme illustr dans la figure6-10.
Figure6-9
Trois colonnes avec un
espacement et une rgle
de taille suprieure

Figure6-10
Le redimensionnement de
la fentre du navigateur
modifie les colonnes

Pour spcifier si un lment tel qu'un titre doit couvrir plusieurs colonnes, utilisez la
proprit column-span. Cette proprit est dfinie sur le nombre de colonnes sur lequel

Gestion de lenchanement du texte avecCSS | 149

l'lment doit s'tendre ou utilise les mots cls all ou none , selon que l'lment s'tend sur
toutes les colonnes ou ne s'tend sur aucune colonne, respectivement.
column-span: all;

Comme vous le voyez, les proprits lies aux colonnes permettent un affichage souple du
contenu, avec un nombre minimum de dclarationsCSS.
CRER UNE DISPOSITION MULTICOLONNE
PRPAREZ-VOUS. Pour crer une disposition multicolonne, procdez comme suit:

1. Dans un outil d'dition ou un outil de dveloppement d'applications, crez un document


HTML appropri incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Trois colonnes</title>
<style>
.tricolumn {
-moz-column-count: 3;
}
</style>
</head>
<body>
<h2>Mes trois colonnes</h2>
<div class="tricolumn">
Lorem ipsum . . . orci.
</div>
</body>
</html>

Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du


contenu a t omise des fins de prsentation. Dans votre document HTML, incluez
un paragraphe de texte factice comportant au moins 10 lignes. Notez galement
l'utilisation du prfixe de fournisseur Mozilla (-moz-). Il est possible d'inclure tous les
prfixes de fournisseur, mais nous n'en avons utilis qu'un par souci de simplicit.

2. Enregistrez le fichier sous L6-columns-exercise.html.
3. Dfinissez un espacement de2em entre les colonnes et une rgle de colonne verte de
2px de largeur. La syntaxe utilise pour les proprits column-gap et column-rule est la
suivante:
.tricolumn {
-moz-column-count: 3;
-moz-column-gap: 2em;
-moz-column-rule: 2px solid green;
}

Figure6-11
Rsultats de l'exercice
comportant trois colonnes

4. Renregistrez le fichier et affichez-le dans le navigateur Web Firefox. Les rsultats


doivent ressembler ceux de la figure6-11.

150|Leon 6

5. Redimensionnez la fentre du navigateur pour voir l'effet sur les colonnes.


6. (Facultatif) Remplacez Mes trois colonnes par un titre plus long. Essayez d'tendre
le titre sur les trois colonnes.
7. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour en savoir plus sur les dispositions plusieurs colonnes, consultez la section Multi-column regions
de la page Web CSS Regions Module Level 3 l'adresse http://bit.ly/IA03vV, ainsi que la page Web du
site W3schools.com se rapportant la disposition multicolonneCSS3 l'adresse http://bit.ly/KpY0Gz.

PRT POUR LA CERTIFICATION

Comment activer la csure


dans un document HTML
l'aide de CSS?
3.3

REMARQUE

Une liste des codes de


langue est disponible
sur la page Web
HTML Language
Code Reference du
site W3schools.com
l'adresse http://www.
w3schools.com/tags/
ref_language_codes.asp

UTILISATION DE LA CSURE (coupure de mot)


La csure dsigne le processus permettant de connecter deux mots laide dun tiret (-)
ou de couper les mots entre les syllabes en fin de ligne. La csure est particulirement
utile pour les dispositions utilisant plusieurs colonnes, car elle permet d'liminer les
espaces vides dans les colonnes lorsque les longs mots sautent automatiquement la ligne
suivante, ce qui produit un texte d'apparence plus professionnelle. En gnral, la csure
automatique tente de justifier le texte sur la marge de droite.
CSS3 inclut dsormais la proprit hyphens qui contrle la csure. La proprit utilise les
valeurs none, manual, et auto:
auto : active la csure automatique des mots, en fonction des possibilits de saut de
ligne dans les mots ou l'aide d'une ressource de csure spcifique la langue
manual : active la csure uniquement en fonction des possibilits de saut de ligne dans les mots
none : empche la csure
Le W3C souligne l'obligation de dclarer une langue l'aide des attributsHTML lang
ou XML xml:lang pour garantir une csure automatique correcte. Ceci signifie que si la
totalit de votre documentHTML utilise la mme langue (franais, par exemple) et que
vous souhaitez activer la csure automatique, vous devez ajouter l'attribut votre lment
HTML ou dclaration doctype, par exemple:
<!doctype html>
<html lang="fr-fr">

ou
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">

Vous devez inclure le prfixe du fournisseur avec la proprit hyphens, par exemple -mshyphens pour InternetExplorer10, -moz-hyphens pour Firefox et ainsi de suite.
Microsoft fournit d'autres proprits de csure spcifiques aux environnements Microsoft,
comme suit:
-ms-hyphenate-limit-zone: spcifie la largeur de l'espace blanc de fin (appel zone de
csure, illustr la figure6-12) pouvant figurer dans une ligne avant l'application
de la csure; la valeur de la proprit est une longueur exprime en pixels ou en
pourcentage
-ms-hyphenate-limit-chars : spcifie le nombre minimum de caractres pouvant tre coups
dans un mot; si le nombre de caractres est infrieur au nombre minimum, le mot n'est
pas coup
-ms-hyphenate-limit-lines : spcifie le nombre maximum de lignes coupes conscutives
pouvant contenir des mots coups

Gestion de lenchanement du texte avecCSS | 151


Figure6-12
Zone de csure

-ms-hyphens-limit-zone

Le balisage suivant avec CSS inline utilise la proprit -ms-hyphens dont la valeur est
dfinie sur auto :
<!doctype html>
<html lang="fr-fr">
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-ms-hyphens: auto;
text-align: justify;
font-size: 14pt;">
Hyphenation is the process of connecting . . .
plus professionnelle.</p>
</div>
</body>
</html>

Ce balisage s'affiche dans InternetExplorer10, comme illustr dans la figure6-13.

Figure6-13
Proprit -ms-hyphens rendue
dans InternetExplorer10

152 | Leon 6

REMARQUE

Bien que Microsoft propose plusieurs proprits se rapportant la csure dans les
applications InternetExplorer10 et Windows8, la spcification du W3C relative la
csure continue d'voluer. Actuellement, les travaux du W3C portent sur les proprits
hyphenate-character, hyphenate-limit-zone, hyphenate-limit-word, hyphenate-limit-lines, et
hyphenate-limit-last.
ACTIVER LA CSURE AUTOMATIQUE
PRPAREZ-VOUS. Pour activer la csure automatique, procdez comme suit:

1. Dans un outil d'dition ou un outil de dveloppement d'applications, crez un document


HTML incluant le contenu suivant. Notez que nous utilisons le prfixe de fournisseur Mozilla
titre d'exemple dans cet exercice. Remplacez le texte du paragraphe commenant par La
csure est par une biographie de quatre lignes sur vous-mme, votre instructeur, un autre
stagiaire ou une clbrit:
<!doctype html>
<html lang="fr-fr">
<head>
<meta charset="utf-8" />
<title>Exemple de csure</title>
</head>
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-moz-hyphens: auto;
text-align: justify;
font-size: 14pt;">
Hyphenation is . . . professionnelle.</p>
</body>
</html>

2. Enregistrez le fichier sous L6-hyphen-exercise.html et affichez-le dans le navigateur


Web Firefox.
3. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour plus d'informations sur la csure, reportez-vous la section Hyphenation (Csure) de la
page CSS Text Level 3 du W3C l'adressehttp://www.w3.org/TR/css-text-3/#hyphens. Microsoft
fournit des informations sur les proprits de csure spcifiques InternetExplorer l'adresse
http://bit.ly/IQpgj4.

Utilisation d'exclusionsCSS pour crer un enchanement autour d'un objet


flottant
Un lment flottant positionn dsigne une constructionCSS qui permet de positionner
des images, du texte et des botes nimporte o dans un documentHTML, avec le texte
qui sagence ensuite autour de ces lments. Les lments flottants positionns sont
appels exclusions CSS dans la spcification du W3C.

Gestion de lenchanement du texte avecCSS | 153

PRT POUR LA CERTIFICATION

Qu'est-ce qu'un lment


flottant positionn ou une
exclusionCSS?
3.3

Vous avez peut-tre remarqu que des lments flottants ont t utiliss dans l'exercice sur
les rgions prcdemment dans la leon. La valeur left a t affecte aux deux lments
flottants, ce qui les fait apparatre cte cte lors de l'affichage. Le positionnement tait
effectu par rapport au reste du document. En outre, si vous ne spcifiez pas la hauteur ou
la largeur d'un lment flottant, celui-ci est automatiquement redimensionn pour s'adapter
son contenu.
Les exclusionsCSS vous permettent de contrler avec une grande prcision la position d'un
lment flottant, une distance spcifie partir du haut, du bas, du ct gauche ou droit
d'un conteneur. Vous pouvez galement crer un lment flottant de n'importe quelle forme:
rectangulaire, circulaire, triangulaire et n'importe quelle forme intermdiaire. Les autres
lments du document s'agencent simplement autour de l'exclusion.
L'exemple d'exclusionsCSS illustr dans la figure6-14 utilise une disposition plusieurs
colonnes avec une exclusion (rfrence en tant qu'lment flottant positionn sur le site
Web) au milieu. Vous pouvez dplacer la bote n'importe o dans la disposition de l'exemple
et voir comment le texte s'enroule automatiquement autour de la bote bleue.

Figure6-14
lment flottant positionn
dans une disposition
multicolonne dans
InternetExplorer10

La figure6-15 est un autre exemple d'exclusions dans lequel le texte entoure un cercle
au milieu d'un paragraphe. Cette image inclut une marge autour du cercle, mais le texte
pourrait pouser directement le contour du cercle.
Figure6-15
Conteneur personnalis sous
la forme d'un cercle

154 | Leon 6

Le tableau6-2 rpertorie les proprits W3C se rapportant aux exclusionsCSS.


Tableau6-2
Proprits des exclusionsCSS

Proprit

Valeur

Description

shape-outside

auto
shape
url

Cre la forme gnrale d'une exclusion

shape-inside

outside-shape
auto
shape
uri

Modifie le contenu d'une forme

wrap

wrap-flow
wrap-margin
wrap-padding

Mthode abrge permettant de dfinir


les proprits wrap-flow, wrap-margin, et
wrap-padding dans une mme dclaration

wrap-flow

auto
both
start
end
maximum
clear

Spcifie comment les exclusions affectent


le contenu inclus dans les lments de
niveau bloc

wrap-margin

length

Spcifie un dcalage pour le contenu en


dehors de l'lment

wrap-padding

length

Fournit une marge intrieure (dcalage)


pour le contenu l'intrieur d'un lment

wrap-through

wrap
none

Spcifie comment le contenu doit habiller


un lment d'exclusion

Pour crer une exclusion CSS simple, utilisez la proprit wrap-flow: both pour afficher le
contenu sur tous les cts de l'exclusion. Une autre option consiste utiliser wrap-flow:
clear pour afficher le contenu au-dessus et au-dessous de l'exclusion, mais en laissant les
zones sur les cts vides.
Pour dclarer une forme dexclusion, utilisez les proprits shape-inside et shape-outside qui
dfinissent le contenu et la forme gnrale dune exclusion, respectivement.
Pour le moment, les exclusionsCSS ne fonctionnent pas de manire fiable dans
l'ensemble des principaux navigateurs. Si vous voulez tester les exclusionsCSS, utilisez
InternetExplorer10. Pour utiliser les proprits des exclusionsCSS pour l'affichage dans
InternetExplorer10, ajoutez le prfixe du fournisseur -ms- . Microsoft utilise galement les
proprits -ms-wrap-side et -ms-flow-wrap qui ne font pas partie de la spcification du W3C.
EXPLORER LES PROPRITS D'EXCLUSIONSCSS
PRPAREZ-VOUS. Pour explorer les proprits des exclusionsCSS, procdez comme
suit:


1. partir d'un navigateur Web, accdez la page Web CSS Exclusions and Shapes
Module Level 3 du W3C, l'adresse http://dev.w3.org/csswg/css3-exclusions/.
2. Parcourez les exemples d'exclusionsCSS.
3. Dans InternetExplorer10, copiez le code d'un exemple qui vous intresse, crez un
document HTML appropri et testez le fichier dans InternetExplorer10.

Gestion de lenchanement du texte avecCSS | 155



4. Consultez la page Positioned Floats du site Microsoft Internet Explorer Drive


l'adresse http://bit.ly/lQulDB. Accdez la page l'aide de chacun des principaux
navigateurs. Slectionnez chaque paramtre, un la fois, pour vrifier les effets obtenus.
5. Fermez tous les programmes et fichiers ouverts.

PLUS DINFORMATIONS
Pour en savoir plus sur les exclusionsCSS, reportez-vous la page Web CSS Exclusions and
Shapes Module Level 3 du W3C l'adresse http://www.w3.org/TR/css3-exclusions/. La page Web
intitule Exclusions de Microsoft l'adresse http://bit.ly/ImadRV fournit des informations sur
les exclusionsCSS et sur les proprits spcifiques Microsoft pour les applications Windows8 et
InternetExplorer10.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
H
 istoriquement, la gestion du flux de contenu tait une procdure manuelle dans les
documents HTML. Dsormais, les rgions et les exclusionsCSS ainsi que les dispositions
plusieurs colonnes permettent d'enchaner le contenu de manire dynamique.
Les rgionsCSS vous permettent d'enchaner le contenu entre les diffrentes zones,
adjacentes ou non, d'un document HTML.
Pour crer et manipuler des rgionsCSS, vous devez identifier une source de
contenu et crer des conteneurs de contenu. Ces deux tches sont effectues
l'aide des propritsCSS flow-into et flow-from.
CSS3 vous permet de crer des documents HTML comportant plusieurs colonnes, tel
un journal, qui sont redimensionnes en fonction de la taille de l'cran de l'utilisateur.
La csure permet de couper les mots entre les syllabes en fin de ligne, de faon crer
une marge droite plus uniforme et liminer les espaces vides dans les paragraphes.
Un lment flottant positionn dsigne une constructionCSS qui permet de
positionner des images, du texte et des botes nimporte o dans un documentHTML,
avec le texte qui sagence ensuite autour de ces lments. Les lments flottants
positionns sont appels exclusions CSS dans la spcification du W3C.
valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. Les regions
reprsentent des zones dfinies dun documentHTML dans
lequel le contenu est organis. Elles sont utilises la place de plusieurs colonnes
dans les dispositions complexes.
2. Les propritsCSS3 dunedisposition multicolonne
permettent de crer des colonnes en
rpartissant le texte sur plusieurs colonnes, de spcifier lespace entre les colonnes
(espacement), d'afficher des lignes verticales (rgles) entre les colonnes et de dfinir
la position des sauts de colonne.
source de contenu

3. Une (flow-into)
peut reprsenter un ou plusieurs blocs de texte, dans un
documentHTML identique ou distinct, contenant les donnes organiser laide
dune disposition de rgionsCSS.
4. Les conteneurs

font partie des rgionsCSS dans lesquelles le contenu est organis.

5. La csure
dsigne le processus permettant de connecter deux mots laide
dun tiret (-) ou de couper des mots entre les syllabes en fin de ligne.
6. Une exclusion CSS est un lment flottant positionn qui permet de positionner des
images, du texte et des botes nimporte o dans un documentHTML, avec le texte qui
sagence ensuite autour de ces lments.

156 | Leon 6

7. La propritCSS

flow-from

8. La propritCSS flow-into
9. Un

iframe

cre un conteneur de contenu pour les rgionsCSS.


identifie la source de contenu pour les rgionsCSS.

dsigne un mini-documentHTML intgr dans un documentHTML.

10. La valeur de la proprit flow-into est appele un

flux nomm

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Vous crez une source de contenu de rgionsCSS nomme main. Parmi les
syntaxes suivantes, laquelle est correcte?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
2. Vous crez un conteneur de contenu de rgionsCSS associer une source de
contenu nomme main. Parmi les syntaxes suivantes, laquelle est correcte?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
3. Quelles sont les options permettant de traiter le texte de dbordement dans le dernier
conteneur dune rgionCSS? (Choisissez toutes les rponses applicables.)
a. Troncation breack
b. Continuer dborder et tre visible visible
c. Continuer dborder, mais tre masqu hidden
d. Duplication
4. Quelle est la diffrence entre limplmentation des rgionsCSS de Microsoft et la
spcificationW3C?
a. Microsoft utilise la proprit flow-into.
b. Microsoft utilise la proprit flow-from.
c. Microsoft n'utilise pas d'iframes.
d. Microsoft utilise des iframes.
5. Quelle propritCSS3 cre des colonnes volutives?
a. column-count
b. add-columns
c. wrap-columns
d. Aucune des rponses cidessus
6. Quelle propritCSS3 cre une ligne entre les colonnes dans une disposition
plusieurs colonnes?
a. break-inside
b. column-fill
c. column-gap
d. column-rule
7. Parmi les propositions suivantes, laquelle n'est pas une valeur admise pour la
propritCSS3 hyphens?
a. none
b. lines
c. manual
d. auto

Gestion de lenchanement du texte avecCSS | 157

8. Parmi les propositions suivantes, laquelle permet de spcifier la largeur de l'espace


que vous pouvez laisser en fin de ligne avant la csure?
a. -ms-hyphenate-limit-chars
b. -ms-hyphenate-limit-lines
c. -ms-hyphenate-limit-zone
d. Aucune des rponses cidessus
9. Parmi les propositions suivantes, laquelle reprsente le terme prcdemment utilis
pour les exclusionsCSS?
a. lments flottants gauche/droite
b. lments flottants positionns
c. changeur de forme
d. DOM
10. Quelle propritCSS3 cre une exclusionCSS?
a. wrap-flow
b. flow-wrapper
c. shape-wrapper
d. wrapper-shape

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettre F si elle est fausse.
VF 1.Une exclusionCSS doit tre de forme rectangulaire ou circulaire.
VF 2.Vous devez dclarer une langue l'aide des attributsHTML lang ou XML
xml:lang pour garantir une csure automatique correcte.
VF 3.Vous pouvez centrer un titre sur plusieurs colonnes l'aide de la proprit
column-span: all.
VF4. Pour combiner les rgionsCSS, vous devez utiliser des techniques de dispositionCSS,
notamment les colonnes, les botes flexibles et les dispositions en grille.
VF 5.Dans les rgionsCSS, la valeur de la proprit flow-from doit correspondre la
valeur de la proprit flow-into.

valuation

des comptences
Scnario 6-1 : Enchanement du contenu dans un bulletin d'informations
Changpu est stagiaire chez Media Malted Milk. Son responsable lui demande de crer
la mise en page d'un bulletin d'informations en utilisantHTML5 et CSS3. Le bulletin
d'informations sera consult par les employs sur des ordinateurs, des tablettes et peuttre des smartphones. Changpu a cr un modle avec des sections, des articles, un titre et
un pied de page, et des encadrs. Il voudrait dplacer automatiquement certains lments
en cas de dbordement vers d'autres zones de la disposition, mais il ne sait pas comment
faire. Quel conseil lui donnez-vous?

Scnario 6-2 : Distinction entre la source de contenu et les conteneurs


decontenu
Changpu a dcid d'opter pour les rgionsCSS afin de crer un flux de contenu
dynamique dans son bulletin d'informations, mais il ne comprend pas bien la diffrence
entre les sources de contenu et les conteneurs de contenu. Comment pouvez-vous
expliquer les deux fonctionnalits Changpu?

158 | Leon 6
valuation

de la matrise des concepts


Scnario 6-3 : Prsentation des rgles de csure
Salih est un de vos amis d'universit. Il cre un documentHTML dont le contenu est en
arabe pour son groupe linguistique, et il voudrait appliquer la csure au document. Il a
utilis la proprit hyphens et affiche le document dans un navigateurWeb pris en charge,
mais la csure n'est pas applique. Y a-t-il autre chose que Salih doit effectuer dans le
document?

Scnario 6-4 : Prsentation des principes fondamentaux des exclusions CSS


Gladys, jusqu'ici membre de l'quipe de maintenance des sites Web, vient d'intgrer
l'quipe de dveloppement d'applications et du Web. Elle commence tudier les
exclusionsCSS et vous voit passer devant son bureau. Elle s'arrte et vous demande de
l'aider comprendre les notions de base des proprits des exclusionsCSS.

Gestion de
l'interface graphique
avecCSS

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA

Numro de l'objectif de l'examen MTA

Gestion de l'interface graphique


avecCSS

Grer l'interface graphique


3.4
avecCSS

TERMES CLS
adapt au Web

opacit

animation

perspective

dgrad

proprit border-radius

dgrad linaire

rotation

dgrad radial

traduction

chelle

transformation

filtre SVG

transition

image cl

transparence

inclinaison

WOFF (Web Open Font Format)

ombre porte

L'quipe de dveloppement de Malted Milk Media veut actualiser son site Web pour
lui donner un look plus contemporain. Ils vous ont demand de revoir les principales
zones du site et de proposer des amliorations graphiques bases sur CSS3 qui aideront
Malted Milk se dmarquer de la concurrence.

Gestion de l'interface graphique avecCSS


L'ESSENTIEL

Les nouvelles proprits CSS3 permettent d'offrir facilement une interface utilisateur
plus graphique et plus attrayante pour les applications et les sites Web.
CSS3 vous permet de crer de superbes lments graphiques pour les sites Web et les
applications et ainsi augmenter la satisfaction de l'exprience utilisateur. Vous pouvez
crer des effets graphiques comme des coins arrondis et des ombres portes et appliquer
des transformations 2D et 3D, comme les rotations et les mises l'chelle. Des transitions
159

160 | leon 7
PRT POUR LA
CERTIFICATION
De quelle manire
pouvez-vous grer
l'interface utilisateur
graphique avec CSS?
3.4

et des animations, ralises entirement avec HTML et CSS3, donnent vie du texte, des
botes et des images statiques.
En outre, bon nombre de proprits CSS3 s'appliquent des lments de zones de dessin,
et SVG est livr avec un ensemble complet de filtres qui produisent des effets similaires
aux proprits CSS3.

Cration d'effets graphiques


CSS3 fournit la proprit border-radius pour crer des coins arrondis, la proprit box-shadow
pour crer des ombres, la proprit opacity pour crer des effets de transparence, et les
proprits linear-gradient et radial-gradient pour crer des dgrads d'arrire-plan.
PRT POUR LA
CERTIFICATION
Quels nouveaux effets
graphiques pouvez-vous
crer avec CSS3?
3.4

PRT POUR LA
CERTIFICATION
Quelle proprit CSS
cre des coins arrondis
autour des lments de
mise en page?
3.4

CSS3 vous permet d'appliquer facilement plusieurs nouveaux effets graphiques aux lments
HTML et ainsi rendre l'interface utilisateur plus attrayante. Parmi les nouveaux effets
graphiques on trouve: les coins arrondis, les ombres portes, la transparence et les
dgrads d'arrire-plan. Vous pouvez mme appliquer certaines de ces proprits (comme
les ombres) au texte.

CRATION D'ANGLES ARRONDIS


La proprit CSS3 border-radius vous permet de crer des coins arrondis autour des
lments de mise en page, tels que les titres, les pieds de page, les barres latrales, les
botes graphiques et les contours autour des images. border-radius dfinit une longueur
qui est gnralement exprime en pixels ou en ems, mais qui peut galement tre en
pourcentage. La longueur reprsente le rayon du cercle qui dfinit l'arrondi de
chaque angle de la bote. Plus le nombre est petit et moins le coin est arrondi. Certains
navigateurs ont des difficults rendre le pourcentage correctement, vous devez donc
utiliser une longueur en pixel ou en em lorsque cela est possible.
Pour crer une bote avec une bordure arrondie, le code et le balisage CSS doivent ressembler
ceci:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Angles arrondis</title>
<style type="text/css">
div {
padding: 40px 40px;
background: dodgerblue;
width: 400px;
color: #fff;
font-family: sans-serif;
font-size: xx-large;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div>Bote avec des coins arrondis</div>
</body>
</html>

Gestion de l'interface graphique avecCSS | 161


La bote avec des coins arrondis s'affiche dans un navigateur Web, comme illustr dans la
figure7-1.
Figure7-1
Bote avec quatre angles
arrondis

Vous pouvez galement arrondir un seul angle d'une bote en utilisant les proprits suivantes:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
La figure 7-2 montre un exemple de chaque bote.
Figure7-2
Botes avec un coin arrondi
chacune

Si vous envisagez d'arrondir un seul angle sur plusieurs lments dans un document
HTML, vous pouvez gagner du temps en crant une classe distincte pour chacun (coin
suprieur gauche, coin suprieur droit, coin infrieur gauche et coin infrieur droit). La
syntaxe devrait ressembler ce qui suit:
.top-left-corner { border-top-left-radius:25px; }

REMARQUE

La page Web de Microsoft Exercices pratiques : Border-radius l'adresse


http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_border-radius.htm
vous permet de voir comment les modifications apportes la longueur de la proprit
border-radius affectent les coins d'une bote.

CRATION D'OMBRES
CSS3 prsente la proprit box-shadow pour crer des ombres portes autour des lments
de mise en page. Une ombre porte dsigne un effet visuel dans lequel un objet est rpt
en arrire-plan et dplac lgrement au-dessous de lui-mme pour crer l'illusion qu'il
flotte au-dessus de son arrire-plan.

162 | leon 7

PRT POUR LA
CERTIFICATION
Quelle proprit CSS
cre des ombres portes
autour des lments de
mise en page?
3.4

La syntaxe CSS pour crer une ombre est la suivante:


box-shadow: h-shadow v-shadow blur spread color inset;

Les attributs h-shadow et v-shadow indiquent la position horizontale et verticale de l'ombre par
rapport la bote. Ces deux attributs sont ncessaires. La valeur h-shadow dfinit le dcalage
horizontal de l'ombre. Une valeur positive dcale l'ombre droite de l'lment et une valeur
ngative gauche. La valeur v-shadow dfinit le dcalage vertical de l'ombre. Une valeur
positive dcale l'ombre partir du bas de l'lment et une valeur ngative partir du haut.
Les autres attributs sont facultatifs. L'attribut blur, en pixels, indique le degr de flou
appliqu l'ombre. L'attribut spread indique la taille de l'ombre, color spcifie la couleur de
l'ombre, et inset dplace l'ombre de l'extrieur vers l'intrieur de la bote.
La figure 7-3 montre un exemple de la bote aux coins arrondis avec une ombre porte.
L'ombre a t cre partir de ces valeurs qui spcifient sa position horizontale et verticale,
son degr de flou et sa couleur:
box-shadow: 10px 10px 5px #808080;

Figure7-3
Ombre porte applique
une bote

CSS3 fournit galement la proprit text-shadow pour appliquer un ombrage au texte. Les
attributs sont les mmes que la proprit box-shadow, sauf que spread et inset ne sont pas inclus.
CRER UNE BOTE AVEC DES COINS ARRONDIS ET UNE OMBRE
PRPAREZ-VOUS. Pour crer une bote avec des coins arrondis et une ombre, effectuez
les oprations suivantes:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML
incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Angles arrondis</title>
<style type="text/css">
div {
border: 3px solid #000;
background-color: #000;
padding: 1em;
width: 300px;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
famille de polices sans serif;
font-size: large;
text-align: center;
}
</style>
</head>

Gestion de l'interface graphique avecCSS | 163


<body>
<div>Exemple de bote</div>
</body>
</html>

2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un


navigateur Web, qui doit ressembler la figure 7-4.

3. Pour ajouter une ombre porte, ajoutez la ligne suivante l'lment de style:

Figure7-4
Bote avec des coins arrondis

box-shadow: 5px 5px 5px #999;

4. Enregistrez le fichier et affichez les rsultats dans un navigateur Web. La bote doit
ressembler la figure 7-5.

5. Laissez le fichier, l'outil d'dition et le navigateur Web ouverts si vous envisagez


d'effectuer l'exercice suivant au cours de cette session.

Figure7-5
Bote avec des coins arrondis
et une ombre porte

APPLICATION DE LA TRANSPARENCE
Un lment opaque ne laisse pas passer la lumire, tandis que vous pouvez voir travers
un lment transparent. Mme si les termes sont opposs, si vous rduisez l'opacit d'un
lment ou si vous augmentez sa transparence, vous finissez par obtenir la mme chose.
La figure 7-6 montre l'effet de transparence (ou la rduction d' opacit) sur une image.
L'image originale se trouve sur la gauche. L'image avec une transparence de 50% applique
se trouve sur la droite.
Figure7-6
Transparence applique
une image

PRT POUR LA
CERTIFICATION
Quelle propritCSS
vous permet d'appliquer
de la transparence
un lment ou une
image?
3.4

La syntaxe permettant d'appliquer une transparence une image ou un autre lment est:
opacity: value

La valeur est une valeur virgule flottante comprise entre 0,0 (100% transparent) et
1,0 (100% opaque). Pour appliquer une transparence de 45%, par exemple, vous devez
utiliser la valeur 0,55 (1,0 0,45).

164 | leon 7

A JOUTER DE LA TRANSPARENCE UNE BOTE


PRPAREZ-VOUS. Pour ajouter de la transparence une bote, effectuez les oprations
suivantes:
1. Ouvrez le fichier L7-box-exercise.html dans un outil de dveloppement d'application
ou d'dition, s'il n'est pas dj ouvert.
2. Ajoutez la ligne suivante l'lment de style:
opacit: 0.6;

3. Enregistrez le fichier sous le nom L7-tranparency-exercise.html et affichez les rsultats


dans un navigateur Web. La bote doit ressembler la figure 7-7.

4. Laissez le fichier, l'outil d'dition et le navigateur Web ouverts si vous envisagez


d'effectuer l'exercice suivant au cours de cette session.

Figure7-7
Bote avec des coins arrondis,
avec une ombre porte et
40 % de transparence

APPLICATION DE DGRADS L'ARRIRE-PLAN


Un dgrad est un changement progressif de couleurs, soit dans le mme ton (par exemple,
du vert fonc au vert clair), soit d'une couleur au dbut et d'une autre couleur la fin (par
exemple, un fondu du bleu vers le jaune). Les dveloppeurs utilisent couramment des dgrads
pour apporter un lger fondu dans les arrire-plans, les boutons, etc.
Les diffrents types (ou mthodes) de dgrads CSS3 sont les suivants:
linear-gradient : cre un dgrad de haut en bas (ou vice-versa) ou en diagonale
radial-gradient : un dgrad radial commence partir d'un point central et rayonne la
couleur vers les bords d'un conteneur
repeating-linear-gradient : cre un dgrad linaire rptitif, qui se traduit par des bandes
droites d'un dgrad de couleurs
repeating-radial-gradient : cre un dgrad radial rptitif qui se traduit par des bandes
circulaires d'un dgrad de couleurs
PRT POUR LA
CERTIFICATION
Quelle proprit CSS
vous permet d'ajouter un
dgrad d'arrire-plan
un conteneur HTML?
3.4

Pour appliquer un dgrad une image HTML, utilisez la proprit background avec l'une
des mthodes de dgradsindiques ci-dessus, avec des paramtres spcifiques chaque
mthode. Les valeurs possibles pour les mthodes sont rpertories sur la page Web de
W3C Valeurs d'imagesCSS et contenu remplac, niveau de module3 l'adresse:
http://dev.w3.org/csswg/css-images-3/#repeating-gradients.
Un dgrad linaire est un dgrad horizontal, vertical ou diagonal. Pour crer un dgrad
linaire du noir au blanc, utilisez le code CSS suivant:
background: linear-gradient(black, white);

Le dgrad par dfaut va de haut en bas. Vous pouvez insrer les valeurs top, bottom,
right ou left comme premire valeur pour contrler la direction du dgrad. La
figure 7-8 montre le dgrad noir et blanc qui s'tend de haut en bas.

Figure7-8
Dgrad linaire du noir (en
haut) vers le blanc (en bas)

Gestion de l'interface graphique avecCSS | 165

Un dgrad diagonal est un type de dgrad linaire qui s'tend d'un angle d'un conteneur en
diagonale jusqu' un autre angle. Le code pour un dgrad diagonal qui commence dans le
coin infrieur gauche et se prolonge jusqu'au coin suprieur droit d'un conteneur est le suivant:
background: linear-gradient(45deg, white, black);

Les dgradsCSS3 prennent galement en charge l'interpolation chromatique dans l'espace


de couleur alpha, qui fait partie du modle colorimtrique RVBA (rouge, vert, bleu et canal
alpha), pour produire des transitions colorimtriques plus lisses en dgrads. (Vous avez
probablement dj vu des dgrads o il est facile de voir la transition d'une nuance une
autre: elles ressemblent de fines bandes de couleur. L'interpolation chromatique dans
l'espace de couleur alpha limine cet aspect de bande.) Vous pouvez spcifier plusieurs
dlimitations de couleurs, avec une couleur RVBA et une position pour chacune.
Voici un exemple d'utilisation des couleurs RVBA:
linear-gradient(to right, rgba(255,255,255,0)

Un dgrad radial commence partir d'un point central et rayonne la couleur vers les
bords d'un conteneur. Les valeurs des dgrads radiaux diffrent lgrement des dgrads
linaires. La syntaxe gnrale des dgrads radiaux est:
radial-gradient(position,size and shape,color stops);

Examinons un exemple de dgrad radial qui commence par du bleu clair (indiqu par le
code hexadcimal #99CCFF) au centre et passe du bleu plus fonc (indiqu par #3D5266)
sur les bords. Le code pourrait ressembler celui qui suit (qui s'affiche dans un navigateur),
tel qu'illustr dans la figure7-9.
radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);
Figure7-9
Dgrad radial

La premire srie de pourcentages (50% 50%) dfinit les valeurs centrales horizontales
et verticales. Dans ce cas, le dgrad commence dans le centre de l'lment. La deuxime
srie de pourcentages (70% 70%) spcifie la taille et la forme du dgrad. Un dgrad
radial ressemble une ellipse, les pourcentages font donc rfrence aux rayons. Les codes
hexadcimaux dans l'exemple sont les dlimitations de couleurs. La premire dlimitation de
couleur est le point de dpart et la deuxime dlimitation de couleur est le point d'arrive.

REMARQUE

Vous pouvez voir la proprit background-image dans certaines sources. Elle fonctionne
comme la proprit background abrge.
APPLIQUER UN DGRAD D'ARRIRE-PLAN UNE BOTE
PRPAREZ-VOUS. Pour appliquer un dgrad d'arrire-plan une bote, effectuez les
oprations suivantes:
1. Ouvrez le fichier L7-tranparency-exercise.html dans un outil de dveloppement
d'application ou d'dition, s'il n'est pas dj ouvert.
2. Ajoutez les lignes suivantes l'lment de style:
background: linear-gradient(black, white);
background: -ms-linear-gradient(black,white);
background: -moz-linear-gradient(black,white);
background: -o-linear-gradient(black,white);
background: -webkit-linear-gradient(black,white);

166 | leon 7

REMARQUE

Notez l'utilisation de prfixes fournisseurs dans le code. Si vous incluez tous les principaux
prfixes fournisseurs, il y a plus de chance qu'un plus grand nombre d'utilisateurs puissent
afficher correctement votre document HTML. Comme indiqu dans la leon 5, le fait
d'inclure les quatre prfixes fournisseurs dans votre code ne garantit pas pour autant que la
fonctionnalit CSS3 va fonctionner dans tous les navigateurs. Un navigateur qui ne prend
pas une fonctionnalit en charge, ne l'affiche pas correctement, mme avec un prfixe
fournisseur. Certains navigateurs offrent une prise en charge partielle d'une fonctionnalit, ce
qui peut produire des rsultats mitigs. Pendant la phase de transition CSS3, vous devez
tester votre code dans tous les principaux navigateurs avant d'utiliser une fonctionnalit
dans les documents HTML/CSS qui seront diffuss un large public.

4. Supprimez la bordure (pas le rayon de la bordure), l'opacit et les lignes des ombres
portes de CSS.
5. Enregistrez le fichier sous le nom L7-gradient-exercise.html et affichez-le dans diffrents
navigateurs Web. Tous les navigateurs affichent-ils le dgrad? La bote doit ressembler
la figure7-10 dans n'importe quel navigateur qui prend en charge les dgrads linaires.

Figure7-10
Bote avec un fond dgrad
appliqu

6. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
La page Web Microsoft Explorer de nouvelles ides de conception et de mise en forme de sites
Web l'adresse http://bit.ly/KtYr1W fournit des liens vers des informations sur la cration de
coins arrondis, d'ombres portes et bien plus encore. La page Web W3C CouleursCSS, niveau de
module3 (en anglais) l'adresse http://www.w3.org/TR/css3-color/ fournit des spcifications pour
les proprits de couleur et d'opacit. Vous pouvez galement visiter le site Web W3schools.com et
rechercher CSS3 et la rubrique de votre choix.

Prsentation de la typographie et du format WOFF (Web Open Font Format)


Les dveloppeurs Web commencent utiliser le Web Open Font Format (WOFF)
pour amliorer les interfaces utilisateur avec peu prs toutes les polices disponibles
ou des polices personnalises. La possibilit d'utiliser n'importe quelle police est un
grand changement par rapport aux restrictions pr-WOFF quant l'utilisation des
polices dans les documents HTML.

REF

La leon 4 aborde
les aspects de la
typographie associs
CSS, comme les
polices, les familles de
polices, le monospace
et la rgle @font-face.

La typographie est l'art d'assembler diffrents types de caractres, historiquement des fins
d'impression, et les polices jouent un rle trs important pour cela. Vous pouvez utiliser
les proprits lies aux polices CSS telles que font-family, font-size, font-style, font-variant,
et font-weight pour appliquer un style aux documents HTML. Pendant des annes, les
dveloppeurs Web et les dveloppeurs d'applications se sont limits un ensemble de
polices standard, considres comme adaptes au Web, ce qui signifie qu'elles sont
gnralement installes sur l'ordinateur d'un utilisateur et donc qu'elles s'affichent de
manire uniforme dans la majorit des navigateursWeb.
Les polices adaptes au Web ne fonctionnent pas dans toutes les situations. Par exemple,
beaucoup d'entreprises utilisent des polices particulires pour identifier leur marque, et ces
polices ne font pas souvent partie du jeu de polices Web scuris. Les concepteurs et les
dveloppeurs s'efforcent de rendre les sites intressants, plus attrayants et uniques, ce qui
ne peut pas toujours tre fait avec les polices adaptes au Web.

Gestion de l'interface graphique avecCSS | 167

PRT POUR LA
CERTIFICATION
Quel est le but de
WOFF (Web Open Font
Format)?
3.4

Pour utiliser une police non standard dans un en-tte, un titre ou un bloc de texte, les
dveloppeurs ont d crer du contenu dans un programme de mise en page ou de graphiques,
l'enregistrer-sous forme d'image, puis utiliser la balise <img> dans un document HTML. Cette
mthode a plusieurs inconvnients:
Elle prend beaucoup de temps.
Elle interfre avec l'accessibilit des lecteurs de page, les images du texte ne pouvant
pas tre lues haute voix.
Elle rduit l'efficacit d'optimisation du rfrencement d'un site auprs d'un moteur de
recherche (SEO), car les moteurs de recherche recherchent du texte, pas des images du texte.
Les dveloppeurs ont galement utilis des polices incorpores, qui sont des ensembles
de polices charges sur leurs serveurs. Le concepteur insre un lien vers le jeu de polices
dans un document HTML ou un fichier CSS, ce qui aide le navigateur afficher les polices
correctement. Bien que les polices incorpores soient encore largement utilises, WOFF
constitue une nouvelle technique qui est meilleure pour grer les polices non standard.
Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie
au Web. Il permet aux dveloppeurs Web d'utiliser des polices personnalises ( peu prs
n'importe laquelle), sans se limiter aux polices Web standard. Les fichiersWOFF sont
des polices True Type, OpenType ou Open Font Format compresses qui contiennent des
mtadonnes supplmentaires.
Pour utiliser le WOFF, vous pouvez hberger des polices sur votre serveur ou utiliser
un service de police du Web. Des polices gratuites sont disponibles partir de plusieurs
sources, comme fontsquirrel et Open Font Library. Parmi les services de police, on trouve
FontFont et FontShop, entre autres. Ils ncessitent un abonnement payant, qui vous donne
le droit d'utiliser les polices sur votre site Web pendant toute la dure de l'abonnement.
Pour utiliser une police WOFF partir du site d'un fournisseur de polices, par exemple,
ajoutez la rgle @font-face dans le fichier CSS, qui doit ressembler ce qui suit:
<style>
@font-face {
font-family: "font-family-name";
src: url("http://website/fonts/fontfile")

</style>

Certaines polices WOFF fonctionnent mieux que d'autres selon le navigateur dans lequel elles
sont affiches. Par exemple, l o un navigateur Web peut parfaitement rendre une police,
un autre navigateur va afficher des polices bitmap ou avec des caractres gras inappropris.
Avant d'acheter une police WOFF ou un package de polices, veillez rechercher la police
sur le Web pour savoir si les autres dveloppeurs ont rencontr des problmes lors de son
utilisation. Certains fournisseurs de polices permettent d'obtenir un aperu des polices
dans tous les principaux navigateurs avant de l'acheter.

PLUS DINFORMATIONS
La spcification WOFF se trouve sur le site Web W3C l'adresse http://www.w3.org/TR/WOFF/. Pour
mieux comprendre WOFF, consultez la page Polices sur le Web (en anglais) l'adresse http://www.
w3.org/Fonts/ et la page Forum aux questions WOFF (en anglais) l'adresse http://www.w3.org/
Fonts/WOFF-FAQ.html.

Application des transformations2D et 3D


REMARQUE

JavaScript ou une autre


forme de script est
requis pour afficher
le droulement d'une
transformation 2D ou
3D. Sans scripts, vous
pouvez uniquement
afficher le rsultat final
d'une transformation.

La proprit transform de CSS3 traduit, met l'chelle, fait pivoter, incline et fait
mme tourner des lments 2D et 3D.
En HTML5/CSS3, une proprit transform est un effet qui permet de modifier la taille, la
forme et la position d'un lment. Les transformations sont soit en 2D ou en 3D. Il s'agit
notamment de traduire (dplacer), de mettre l'chelle, de faire pivoter, d'incliner (tirer)
et de faire tourner des lments.
La proprit transform de CSS permet de spcifier les diffrents types de transformations
apportes aux lments HTML. La proprit transform utilise plusieurs mthodes pour les
transformations en 2D et 3D, comme indiqu dans le tableau 7-1.

168 | leon 7
Tableau7-1
Mthodes pour la proprit
transform :

Valeur

Description

matrix (n,n,n,n,n,n) Spcifie une transformation 2D l'aide d'une

matrice six valeurs

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Spcifie une transformation 3D en utilisant une

matrice 4 x 4 16 valeurs

perspective(n) 
Spcifie une vue en perspective d'un lment

3D qui a t transform

rotation (angle)

rotate

Fait pivoter un lment en 2D

rotate3d (x,y,z,angle)

Fait pivoter un lment en 3D

rotateX (angle)

Fait pivoter un lment en 3D sur l'axe des abscisses

Fait pivoter un lment en 3D sur l'axe des


ordonnes
rotateY (angle)
rotateZ (angle)

Fait pivoter un lment en 3D sur l'axe z

scale (x,y)

Met l'chelle un lment en 2D (largeur et hauteur)

scale3d (x,y,z) Met l'chelle un lment en 3D (hauteur,

largeur et un vecteur arbitraire dans l'espace 3D)

Met l'chelle un lment en 3D sur l'axe des


abscisses
scaleX (x)

Met l'chelle un lment en 3D sur l'axe des


ordonnes
scaleY (y)

scaleZ (z) Met chelle d'un lment en 3D le long de

l'axe z (un vecteur dans un espace 3D)

skew (x-angle,y-angle) Incline un lment en 2D, le long de l'axe des

abscisses et de l'axe des ordonnes

skewX (angle)

Incline un lment en 3D sur l'axe des abscisses

skewY (angle)

Incline un lment en 3D sur l'axe des ordonnes

translate (x,y)

Traduit (dplace) un lment en 2D

translate3d (x,y,z)

Traduit (dplace) un lment en 3D

translateX (x)

Se traduit par un lment en 3D l'aide de l'axe


des abscisses

Traduit un lment en 3D l'aide de l'axe des


ordonnes
translateY (y)
translateZ (z)


PRT POUR LA
CERTIFICATION
Quelle proprit
CSS transforme les
lments?
3.4
PRT POUR LA
CERTIFICATION
Que signifie la traduction
d'un lment?
3.4

Se traduit par un lment en 3D l'aide de l'axe


des abscisses

Maintenant que vous comprenez l'essence des transformations en 2D et 3D, regardons


quelques exemples prcis.

TRANSLATION 2D
Appliquer une translation un lment revient le dplacer, sans le faire pivoter, l'incliner,
ni faire tourner l'image. Pour dplacer un lment, utilisez la mthode translate() de CSS et
indiquez les valeurs de l'axe des abscisses et de l'axe des ordonnes pour positionner l'lment
par rapport sa position d'origine ou par dfaut. La valeur de l'axe des abscisses dfinit
la position gauche de l'lment et l'axe des ordonnes spcifie la position suprieure. Par
exemple, le code suivant dplace l'lment de 100 pixels de la gauche et de 50 pixels du haut:
transform: translate(100px,50px);

Gestion de l'interface graphique avecCSS | 169

Un exemple d'un lment traduit est illustr dans la figure 7-11.


Figure7-11
La bote (dplace) traduite
apparat dans le coin
infrieur droit

PRT POUR LA
CERTIFICATION
Que signifie la mise
l'chelle d'un lment?
3.4

MISE L'CHELLE2D
Mettre l'chelle un lment consiste augmenter ou rduire sa taille. Pour augmenter
ou rduire un lment dynamiquement, utilisez la mthode scale() dans CSS et spcifiez les
valeurs de l'axe des abscisses (largeur) et de l'axe des ordonnes (hauteur). Le code suivant, par
exemple, permet d'obtenir un accroissement double de la largeur de l'lment par rapport sa
taille d'origine et une augmentation quadruple de la hauteur par rapport sa taille d'origine:
transform: scale(2,4);

La figure 7-12 contient un exemple d'un lment mis l'chelle.


Figure7-12
La bote mise l'chelle est
deux fois plus large et quatre
fois plus grande que la bote
d'origine

TRADUIRE ET MET TRE L'CHELLE UNE FORME 2D


PRPAREZ-VOUS. Pour traduire et mettre l'chelle une forme 2D, effectuez les oprations
suivantes:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML
incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
padding: 20px 20px;
background: tomato;
width: 150px;
height: 75px;
color: #fff;
font-family: sans-serif;
font-size: x-large;
}
</style>
</head>

170 | leon 7
<body>
<div>Cet lment peut se dplacer</div>
</body>

2. Enregistrez le fichier sous le nom L7-translate-exercise.html et affichez-le dans au


moins deux navigateurs Web diffrents. La bote devrait apparatre dans le coin
suprieur gauche des fentres du navigateur.
3. Ajoutez les lignes suivantes l'lment de style:
transform: translate(200px,100px);
-ms-transform: translate(200px,100px);
-moz-transform: translate(200px,100px);
-o-transform: translate(200px,100px);
-webkit-transform: translate(200px,100px);

4. Enregistrez le fichier et affichez-le dans les mmes navigateurs Web. La bote doit
avoir t dplace du bas vers la droite.
5. Pour redimensionner la bote afin qu'elle soit deux fois plus large et deux fois aussi
grande que celle d'origine, ajoutez scale(2,2) aux lignes de transformation, comme suit:
transform: translate(200px,100px) scale(2,2);
-ms-transform: translate(200px,100px) scale(2,2);
-moz-transform: translate(200px,100px) scale(2,2);
-o-transform: translate(200px,100px) scale(2,2);
-webkit-transform: translate(200px,100px) scale(2,2);

6. Remplacez le texte div par Cet lment peut tre mis l'chelle.
7. Enregistrez le fichier sous le nom L7-scale-exercise.html et affichez-le dans les navigateurs
Web. L'affichage doit ressembler la figure7-13.

8. Fermez le fichier, mais laissez l'outil d'dition et les navigateurs Web ouverts si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure7-13
La bote a t dplace et
est deux fois plus grande que
celle d'origine

Gestion de l'interface graphique avecCSS | 171

ROTATION 2D ET 3D
La rotation d'un lment consiste lui appliquer un certain nombre de degrs dans le
sens des aiguilles d'une montre. Pour faire pivoter un lment, utilisez la mthode rotate()
dansCSS et spcifiez les degrs de rotation.
Par exemple, le code suivant fait pivoter un lment de 30degrs dans le plan 2D:
transform: rotate(30deg);

La figure 7-14 contient un exemple d'un lment 2D pivot.


Figure7-14
Image originale et image
2D pivote

PRT POUR LA
CERTIFICATION
Quelle mthode de
transformation fait
pivoter un lment en
3D autour de l'axe des
abscisses?
3.4

La rotation3D utilise les mthodes rotateX() et rotateY() . Avec rotateX(), l'lment pivote
autour de l'axe des abscisses et avec rotateY() l'lment pivote autour de l'axe des ordonnes.
Le code suivant fait pivoter un lment 180degrs. Si l'lment contient du texte, le
texte semble l'envers aprs la rotation, comme illustr dans la figure7-15. N'oubliez pas,
pour voir l'effet 3D, JavaScript ou une autre forme de script est requis. Le contenu de la
figure 7-15 est le rsultat final de la rotation.
transform: rotateX(180deg);

Figure7-15
Image originale et image
3D pivote sur l'axe des
abscisses

L'utilisation de la mthode rotateY(180deg) avec un lment qui affiche du texte fait


apparatre ce texte l'envers, comme illustr dans la figure 7-16.
Figure7-16
Image originale et image
3D pivote sur l'axe des
ordonnes

172 | leon 7

INCLINAISON2D ET3D
Incliner un lment consiste l'tirer dans une ou plusieurs directions. Pour incliner un
lment avecCSS, utilisez la mthode skew() et spcifiez les valeurs de l'axe des abscisses
et de l'axe des ordonnes, en degrs, pour crer une forme angulaire. Par exemple, le code
suivant fait pivoter un lment de 20degrs autour de l'axe des abscisses et de 30degrs
autour de l'axe des ordonnes:
transform: skew(20deg,30deg);

La figure 7-17 contient un exemple d'un lment inclin.


Figure7-17
lment inclin

PRT POUR LA
CERTIFICATION
Quelle mthode de
transformation permet
d'incliner un lment
en 3D autour de l'axe
des ordonnes?

L'inclinaison3D utilise les mthodes skewX() et skewY() pour incliner un lment le long de
l'axe des abscisses et de l'axe des ordonnes, respectivement. titre d'exemple, le code
suivant incline un lment de 45degrs, comme illustr dans la figure 7-18.
transform: skewX(45deg);

3.4
Figure7-18
Inclinaison en 3D autour de
l'axe des abscisses

FAIRE PIVOTER ET INCLINER UNE FORME 2D


PRPAREZ-VOUS. Pour faire pivoter et incliner une forme 2D, effectuez les oprations
suivantes:
1. Ouvrez le fichier L7-scale-exercise.html dans un outil de dveloppement d'application
ou d'dition, s'il n'est pas dj ouvert.
2. Modifiez les lignes de transformation afin de remplacer l'chelle par une rotation de
30degrs, comme suit:
transform: translate(200px,100px) rotate(30deg);
-ms-transform: translate(200px,100px) rotate(30deg);
-moz-transform: translate(200px,100px) rotate(30deg);
-o-transform: translate(200px,100px) rotate(30deg);
-webkit-transform: translate(200px,100px) rotate(30deg);

3. Remplacez le texte div par Cet lment est pivot.

Gestion de l'interface graphique avecCSS | 173


4. Enregistrez le fichier sous le nom L7-rotate-exercise.html et affichez-le dans les


navigateurs Web. La bote et le texte ont-ils pivot comme illustr dans la figure 7-19?

5. Pour incliner la bote de 45degrs, remplacez rotate par skew dans les lignes de
transformation, comme suit:

Figure7-19
Bote pivote un angle de
30degrs

transform: translate(200px,100px) skew(45deg);


-ms-transform: translate(200px,100px) skew(45deg);
-moz-transform: translate(200px,100px) skew(45deg);
-o-transform: translate(200px,100px) skew(45deg);
-webkit-transform: translate(200px,100px) skew(45deg);

6. Remplacez le texte div par Cet lment est inclin.


7. Enregistrez le fichier sous le nom L7-skew-exercise.html et affichez-le dans les navigateurs
Web. L'affichage doit ressembler la figure7-20.

8. Fermez le fichier, mais laissez l'outil d'dition et les navigateurs Web ouverts si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure7-20
Bote incline un angle de
45degrs

PRT POUR LA
CERTIFICATION
Quel est le but de la
proprit perspective
3D de CSS3?
3.4

PRSENTATION DE LA PERSPECTIVE3D, DES TRANSITIONS ET DES ANIMATIONS


La perspective, en termes de dessins et d'illustrations, est la convergence de lignes qui
donne l'illusion de la profondeur. La propritperspective 3D de CSS3 dfinit le rendu de
la profondeur d'un lment3D transform dans un navigateur. des valeurs infrieures (entre
1et1000) crent un effet plus prononc qu'avec des valeurs plus leves. Il est important de
se rappeler que la perspective s'applique uniquement aux lments3D transforms.
La syntaxe gnrale pour la perspective est:
perspective: number;

Voici un exemple de perspective avec une rotation 3D applique:


perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);

Voici un exemple de balisage complet, il est illustr dans la figure 7-21 l'aide d'un navigateur
pris en charge par webkit.
<!doctype html>
<html>
<head>
<style type="text/css">
div
{
padding: 40px 40px;
background: #B8860B;
width: 150px;

174 | leon 7
color: #fff;
font-family: sans-serif;
font-size: xx-large;
}
div#div2
{
margin: 100px;
perspective: 600; margin: 100px 0 0 50px;
-ms-perspective: 600; margin: 100px 0 0 50px;
-moz-perspective: 600; margin: 100px 0 0 50px;
-o-perspective: 600; margin: 100px 0 0 50px;
-webkit-perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);
-ms-transform: rotate3d(0, 1, 1, 45deg);
-moz-transform: rotate3d(0, 1, 1, 45deg);
-o-transform: rotate3d(0, 1, 1, 45deg);
-webkit-transform: rotate3d(0, 1, 1, 45deg);
}
</style>
</head>
<body>
<div>lment d'origine</div>
<div id="div2">lment transform</div>
</body>
</html>
Figure7-21
Perspective applique avec
une rotation de 45degrs

Maintenant, concentrons-nous sur les transitions et les animations. Une transition est le
passage d'un tat un autre. AvecCSS, une transition est le changement de style d'un lment.
Un dgrad est comparable un type de transition, en effet la couleur d'arrire-plan d'un
conteneur passe d'une couleur une autre. Toutefois, un dgrad est proprement parler
un lment statique: il est prsent ou non. En CSS3, l'action d'une transition est visible.
Les changements s'affichent l'cran de faon anime comme s'ils taient aliments par
un script, mais aucun script n'est impliqu.
PRT POUR LA
CERTIFICATION
Qu'est-ce qu'une
transition?
3.4

La proprit transition vous permet de crer une transition CSS3. Vous devez au minimum
spcifier que la proprit CSS soit prise en compte pendant la priode de transition.
Il peut s'agir de la position, de la taille, de la couleur, de la couleur d'arrire-plan, de
l'interlettrage, de la rotation, etc. d'un lment. La plupart des transitions spcifient
galement la longueur (dure) de la transition. Si la valeur de dure n'est pas dfinie,
la valeur par dfaut est de 0. Vous devez spcifier des transitions CSS3 en utilisant les
proprits dcrites dans le tableau 7-2.

Gestion de l'interface graphique avecCSS | 175


Tableau7-2
Proprits de transition CSS3

Proprit

Description

transition 
Est la faon abrge de spcifier des paramtres pour
transition-property, transition-delay, transition-duration et
transition-timing-function la fois
transition-property 
Spcifie les proprits CSS qui devront faire l'objet d'une

transition

transition-delay 
Spcifie la dure qui s'coule aprs les changements de

valeur et avant le dbut de la transition (en secondes ou


millisecondes)

transition-duration 
Spcifie la dure de la transition en secondes ou en
millisecondes. Commence aprs la proprit transition-delay

Spcifie la courbe de vitesse de l'effet de transition. Permet



une transition de modifier la vitesse par rapport la dure
Valeur par dfaut = ease, elle augmente la vitesse de
l'animation, puis la ralentit vers la fin
transition-timing-function

Voici un exemple d'une transition simple qui affiche du texte dans une bote. Lorsqu'un
utilisateur passe le pointeur de la souris sur la bote, le texte est modifi. La figure 7-22
montre la bote avant et aprs l'opration.
<style type="text/css">
#wrapper { transition-property: opacity;
transition-duration: 3s;
transition-delay: 1s;
transition-timing-function: linear; }
#wrapper #before, #wrapper:hover #after {
opacit: 1; }
#wrapper:hover #before, #wrapper #after {
opacit: 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="before">Maintenant tu me vois</div>
<div id="after">Maintenant tu ne me vois plus</div>
</div>
</body>

Figure7-22
Cette transition simple
masque le texte et affiche
le nouveau texte lorsque le
pointeur de la souris passe
dessus

176 | leon 7

CRER UNE TRANSITION L'AIDE DE CSS


PRPAREZ-VOUS. Pour crer une transition l'aide de CSS, effectuez les oprations suivantes:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML
incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de transition et d'opacit</title>
<style type="text/css">
#wrapper {
padding: 40px 40px;
background: dodgerblue;
width: 200px;
font-family: sans-serif;
font-size: xx-large;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
}
#wrapper #front, #wrapper:hover #back {
opacit:1;
-ms-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
-webkit-opacity: 1;
transition-property: opacity;
-ms-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-duration: 1s;
-ms-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-ms-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
#wrapper:hover #front, #wrapper #back {
opacit: 0;
-ms-opacity: 0;
-moz-opacity: 0;
-o-opacity: 0;

Gestion de l'interface graphique avecCSS | 177


-webkit-opacity: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="front">Knock knock</div>
<div id="back">Qui est l?</div>
</div>
</body>
</html>

2. Enregistrez le fichier sous le nom L7-transition-exercise.html. Ouvrez le fichier dans


chacun des principaux navigateurs Web. Passez le pointeur de votre souris sur la bote
dans chaque navigateur. L'affichage doit ressembler la figure7-23.

3. Pour ajouter un dlai supplmentaire, entrez ce qui suit aprs les lignes de la proprit
transition-duration:

Figure7-23
Transition simple

transition-delay: 1s;
-ms-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;

4. Enregistrez le fichier sous le nom L7-transition-delay-exercise.html. Ouvrez le fichier


dans chaque navigateur Web et passez le pointeur de votre souris sur la bote. Avez-vous
remarqu le dcalage?
5. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Une animation reprsente l'affichage d'une squence d'images statiques un rythme


assez rapide pour crer l'illusion d'un mouvement. Comme les transitions, les animations
affectent les transformations et les proprits CSS, et vous pouvez galement spcifier les
minutages. La diffrence rside dans le fait que les animations utilisent des images cls,
une construction qui vous permet de modifier les valeurs n'importe o dans l'animation.
Vous pouvez galement mettre en pause, reprendre et inverser les animations.
PRT POUR LA
CERTIFICATION
Qu'est-ce qu'une
image-cl?
3.4

Pour crer une animation, commencez par spcifier un style CSS dans la rgle @keyframes.
Par exemple, une rgle pour une disparition en fondu pourrait ressembler ce qui suit:
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

Spcifiez ensuite les proprits de l'animation. Plusieurs des proprits utilises dans les
animations sont semblables aux transitions. Les proprits de l'animation sont dcrites
dans le tableau 7-3.

178 | leon 7
Tableau7-3
Proprits d'animation
de CSS3

Proprit

Valeur par dfaut

Description

@keyframes Cre l'animation


animation 
Est une faon abrge de spcifier

toutes les proprits de l'animation


la fois (diffre de la proprit
animation-play-state)

animation-name 
Spcifie le nom de l'animation
@keyframes
animation-duration 0 
Spcifie la dure d'une animation;

en secondes ou en millisecondes

animation-timing-function ease

Spcifie la manire dont l'animation


progresse au cours d'un cycle

animation-delay 0

Spcifie le dmarrage de l'animation

Spcifie le nombre de cycles d'une


animation
animation-iteration-count 1

animation-fill-mode none 
Spcifie les valeurs appliques par

l'animation en dehors du moment de


son excution

animation-direction normal 
Spcifie si l'animation repart en arrire

sur d'autres cycles

animation-play-state

en cours d'excution 
Spcifie l'tat de l'animation. Les valeurs

sont en cours d'excution ou suspendu

Ce qui suit est un extrait de code qui configure les proprits d'animation pour une
disparition en fondu:

REF

La leon9 vous montre


comment crer une
animation l'aide de
JavaScript.

div { animation-duration: 3s;


animation-delay: 0s;
animation-timing-function: ease; }
div:hover { animation-name: fadeout; }

Cette disparition en fondu commence ds que l'utilisateur place le pointeur de la souris


sur un lment div, elle dure pendant trois secondes et utilise et facilite la fonction de
chronomtrage.
CRER UNE ANIMATION EN UTILISANT CSS
PRPAREZ-VOUS. Pour crer une animation l'aide de CSS, effectuez les oprations
suivantes:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML
incluant le contenu suivant:
<style type="text/css">
div { width: 200px;
height: 200px;
background: limegreen;
animation: a1 3s; }
@keyframes a1 { from {background: limegreen;}
to {background: dodgerblue;} }
</style>
</head>

Gestion de l'interface graphique avecCSS | 179


<body>
<div></div>
</body>

2. Enregistrez le fichier sous le nom L7-animation-exercise.html. Ouvrez le fichier dans


chacun des principaux navigateurs Web. L'animation se compose d'une bote
rectangulaire qui passe du vert au bleu, puis du bleu au vert. L'animation s'est-elle
produite dans l'ensemble des navigateurs Web? Notez quels navigateurs Web prennent
en charge l'animation.
3. Remplacez la ligne d'animation de la section div de CSS par ce qui suit:
animation-name: a1;
animation-duration: 4s;
animation-delay: 2s;

4. Enregistrez le fichier sous le nom L7-animation-mod-exercise.html. Ouvrez le fichier


dans les navigateurs Web dans lesquels l'animation se trouvait l'origine. Avez-vous
remarqu le dcalage?
5. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Application d'effets de filtreSVG


Les filtres SVG sont un moyen d'appliquer un style aux graphiques SVG. La longue
liste de filtres va du filtre feBlend, qui combine des images, au filtre feOffset, qui
dplace une image par rapport sa position actuelle, plusieurs filtres qui affectent
la faon dont l'clairage est calcul sur une figure.

PRT POUR LA
CERTIFICATION
Quel est le but d'un
filtre SVG?
3.4

La leon 2 prsente le langage SVG (Scalable Vector Graphics) qui permet de dcrire des
graphiques 2D en langage XML (Extensible Markup Language). Vous avez vu quelques
exemples de cration d'images vectorielles simples l'aide de SVG et appris qu'elles
s'affichent bien, qu'elles soient visionnes sur de petits ou de grands crans.
Cette section examine les effets des filtres que vous pouvez appliquer aux graphiques
SVG. Un filtre SVG est une srie d'oprations qui utilisentCSS pour appliquer un style
un graphiqueSVG ou le modifier. Le graphique amlior s'affiche dans un navigateur,
tandis que le graphique original se retrouve isol. Les filtres disponibles dans SVG sont:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset

180 | leon 7

feTile
feTurbulence
feDistantLight
fePointLight
feSpecularLighting
feSpotLight
Beaucoup de noms de filtre sont assez intuitifs. Par exemple, le filtre feBlend combine
des images, les filtres feColorMatrix transforment les couleurs, le filtre feOffset dplace une
image par rapport sa position actuelle, et le dernier filtre de la liste concerne l'clairage.
Vous devez utiliser l'lment filter pour dfinir les filtres SVG. Vous devez inclure
l'attribut id pour nommer le filtre. Par exemple, le code suivant est un exemple de filtre
feGaussianBlur, dont les rsultats sont prsents dans la figure7-24:

Figure7-24
Effet de flou gaussien appliqu
un graphique SVG

<body>
<svg>
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>
<rect width="150" height="150" stroke="plum"
stroke-width="3" fill="plum" filter="url(#a1)" />
</svg>
</body>

L'attribut id dans l'lment filter spcifie le nom du filtre. L'lment feGaussianBlur spcifie
l'effet de flou. L'attribut in="SourceGraphic "figure dans cet lment, il indique qu'un effet de
flou sera appliqu l'lment entier et l'attribut stdDeviation spcifie le degr de flou. Le
rectangle qui est cr est li au filtre via l'attribut filter="url(#a1)" de l'lment rect.
Dans un autre exemple, le filtre suivant feOffset cre une ombre porte sous un rectangle.
Une ombre s'ajuste l'action du filtre dcalage car une ombre est simplement une
bote qui a t dplace vers le bas, droite de l'image source. Les attributs dx et dy
spcifient la quantit d'espace pour dplacer l'image le long de l'axe des abscisses et de
l'axe des ordonnes, respectivement. L'image rendue est indique dans la figure 7-25.

Gestion de l'interface graphique avecCSS | 181


Figure7-25
Filtre de dcalage appliqu
un graphique SVG

<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="plum" />
</svg>
</body>

APPLIQUER UN DCALAGE ET FLOU GAUSSIEN UN DESSIN SVG


PRPAREZ-VOUS. Pour appliquer un dcalage et flou gaussien un dessin SVG, effectuez
les oprations suivantes:

1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML


avec le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de dcalage et de flou gaussien dans SVG</title>
</head>
</style>
<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="springgreen"
/>
</svg>
</body>
</html>

182 | leon 7

2. Enregistrez le fichier sous le nom L7-SVGoffset-exercise.html. Ouvrez le fichier dans


tous les principaux navigateurs Web. Les rsultats doivent ressembler ceux de la
figure7-26. L'image s'affiche-t-elle avec un dcalage dans tous les navigateurs Web?
Notez les navigateurs Web qui ne prennent pas en charge le dcalage.

3. Ajoutez la ligne suivante dans l'lment filter pour appliquer l'effet de flou gaussien:

Figure7-26
Graphique SVG avec une
ombre porte

<feGaussianBlur stdDeviation="5" />

4. Enregistrez le fichier sous le nom L7-SVGgblur-exercise.html et affichez-le dans les


navigateurs Web qui prennent en charge la fonctionnalit de dcalage SVG. Les rsultats
doivent se prsenter comme ceux de la figure7-27.

5. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure7-27
Graphique SVG avec une
ombre porte et un flou
gaussien appliqus au
dcalage

Utilisation de la zone de dessin pour amliorer l'interface graphique


Vous pouvez utiliser les proprits CSS pour ajouter de la couleur et des dgrads, pour
appliquer des transformations et des animations et apporter d'autres amliorations
l'objet canvas.
PRT POUR LA
CERTIFICATION
Comment pouvez-vous
utiliser l'lment canvas
pour amliorer l'interface
utilisateur graphique?
3.4

Dans la leon 2 vous avez non seulement dcouvert SVG, mais galement l'lment
canvas. Vous pouvez utiliser cet lment pour tracer des formes composes de pixels. Bien
que l'lment canvas accepte uniquement deux attributs: height et width, vous pouvez
utiliser la plupart des propritsCSS pour appliquer un style l'lment canvas, ajouter
de la couleur, des dgrads, des motifs de remplissage, une transformation, une animation,
etc. Cette section vous prsente certains des effets stylistiques que vous pouvez appliquer
des dessins crs l'aide de l'lment canvas afin d'amliorer l'interface utilisateur
graphique (GUI).

Gestion de l'interface graphique avecCSS | 183

Le code suivant permet de crer une zone de dessin basique:


<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10, 20, 200, 100);
}
</script>
<body onload = "f1();">
<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>

Cet exemple utilise dj l'attribut fillStyle pour l'objet getContext("2d"). Nous allons changer
la couleur et appliquer un dgrad avec du corail comme couleur de dpart et du kaki
comme couleur de fin. Remplacez la ligne fillStyle par ce qui suit et vous obtiendrez un
contenu semblable celui de la figure7-28:
var grd=context.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"corail");
grd.addColorStop(0.7,"kaki");
context.fillStyle=grd ;
Figure7-28
Objet canvas avec un
dgrad appliqu

Pour faire pivoter la zone de dessin, utilisez la formule degrees*Math.PI/180. Vous devez
galement ajouter la rotation avant que le rectangle soit gnr. Donc, pour faire pivoter
notre zone de dessin de 20degrs, ajoutez la ligne suivante avant la ligne context-fillRect :
context.rotate(20*Math. PI/180);

Le rsultat est illustr dans la figure7-29. Vous pouvez galement traduire (dplacer), mettre
l'chelle et incliner un objet de la mme faon que vous apportez des transformations
des lments HTML.
Figure7-29
Objet canvas pivot
20degrs

Enfin, nous allons voir comment gnrer du texte l'aide de la zone de dessin (voir la
figure 7-30). Utilisez les mthodes fillText et font:
<body>
<canvas id="myText" width="400" height="250" style="border:3px solid #0000FF;">
</canvas>

184|leon 7
<script type = "text/javascript">
var canvas = document.getElementById("myText");
context = canvas.getContext("2d");
context.font = "30px Arial";
context.fillText("Texte gnr par la zone de dessin", 40, 120);
</script>
</body>
Figure7-30
Texte gnr par l'lment
canvas entour par une
bordure

La mthode fillText cre un texte de couleur unie (noir par dfaut), vous pouvez remplacer
fillText par strokeText pour crer des lettres avec une bordure (lettres sans remplissage).
AMLIORER UN OBJET DE ZONE DE DESSIN
PRPAREZ-VOUS. Pour amliorer un objet de zone de dessin, effectuez les oprations
suivantes:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un document HTML
incluant le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercice de zone de dessin</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "coral";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>
</html>

2. Enregistrez le fichier sous le nom L7-canvas-exercise.html. Ouvrez le fichier dans un


navigateur Web et vrifiez qu'il y a bien un rectangle de couleur corail.
3. Remplacez la couleur unie par un dgrad qui dbute par du bleu clair et se termine
par du bleu fonc. Pour ce faire, remplacez la ligne fillStyle par ce qui suit:
var grd = context.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0.3, "lightblue");
grd.addColorStop(0.7, "darkblue");
context.fillStyle = grd;

Gestion de l'interface graphique avecCSS | 185


4. Mettez le rectangle l'chelle afin qu'il soit cinq fois plus large et cinq fois plus grand que
le rectangle original. Pour ce faire, ajoutez le code suivant aprs la nouvelle ligne fillStyle :
context.scale(5,5);

5. Renregistrez le fichier et affichez-le dans un navigateur Web. Les rsultats doivent


ressembler ceux de la figure7-31.

6. Fermez tous les fichiers et toutes les applications.

Figure7-31
Rectangle trac l'aide de
l'lment canvas avec un
dgrad et redimensionn
pour tre cinq fois plus grand
que l'original

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:

Parmi les nouveaux effets graphiques que vous pouvez facilement raliser avec
CSS3, il y a notamment les coins arrondis, les ombres portes, la transparence et les
dgrads d'arrire-plan.
La proprit border-radius cre des coins arrondis, la proprit box-shadow cre des
ombres portes, la proprit opacity cre des effets de transparence, et la proprit
background (avec l'un des quatre attributs de dgrads) cre des dgrads linaires
et radiaux.
Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie
au Web. Le WOFF permet aux dveloppeurs Web d'utiliser des polices personnalises
( peu prs n'importe quelle police), sans se limiter aux polices Web standard.
Les fichiersWOFF sont des polices True Type, OpenType ou Open Font Format
compresses qui contiennent des mtadonnes supplmentaires.
La proprit transform de CSS3 traduit, met l'chelle, fait pivoter, incline et fait
mme tourner des lments 2D et 3D.
La perspective, en termes de dessins et d'illustrations, est la convergence de lignes
qui donne l'illusion de la profondeur.

186 | leon 7

Une transition est le passage d'un tat un autre. AvecCSS, une transition est le
changement de style d'un lment.
Une animation reprsente l'affichage d'une squence d'images statiques un
rythme assez rapide pour crer l'illusion d'un mouvement.
Un filtre SVG est une srie d'oprations qui utilisentCSS pour appliquer un style un
graphiqueSVG ou le modifier. Le graphique amlior s'affiche dans un navigateur,
tandis que le graphique original se retrouve isol.
Bien que l'lment canvas accepte uniquement deux attributs: height et width,
vous pouvez utiliser la plupart des propritsCSS pour appliquer un style l'lment
canvas, ajouter de la couleur, des dgrads, des motifs de remplissage, une
transformation, une animation, etc.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. Un dgrad
est un changement de couleurs en douceur, dans le mme ton ou
qui commence par une couleur et se termine par une autre couleur.
2. mettre l'chelle un lment consiste augmenter ou rduire sa taille.
3. Une shadow
dsigne un effet visuel dans lequel un objet est rpt en
arrire-plan et dplac lgrement au-dessous de lui-mme pour crer l'illusion que
l'objet flotte au-dessus de son arrire-plan.
4. Une transition
dsigne le passage d'un tat un autre; avecCSS, une
transition est le changement de style d'un lment.
5. Le WOFF
permet aux dveloppeurs Web d'utiliser des polices
personnalises ( peu prs n'importe quelle police), sans se limiter aux polices Web standard.
6. La proprit CSS3 boder-radus
permet de crer des coins arrondis autour des
lments de mise en page, tels que les titres, les pieds de page, les encadrs, les botes
graphiques et les contours autour des images.
7. La transparence

est l'opacit rduite.

8. Appliquer une traslation


un lment revient le dplacer, sans le faire pivoter,
l'incliner, ni faire tourner l'image.
9. En HTML5/CSS3, une transformation
la forme et la position d'un lment.

est un effet qui permet de modifier la taille,

10. Un filtre
SVG est une srie d'oprations qui utilisentCSS pour appliquer
un style un graphiqueSVG ou le modifier.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les proprits suivantes, laquelle permet de crer un dgrad de haut en bas, de
gauche droite ou en diagonale, sans rpter les couleurs?
a. linear-gradient
b. dgrad radial
c. repeating-linear-gradient
d. repeating-radial-gradient

Gestion de l'interface graphique avecCSS | 187

2. Parmi les propositions suivantes, laquelle n'est pas correcte au sujet de la proprit
border-radius ?
a. Elle cre des angles arrondis autour des lments de mise en page.
b. Elle peut tre exprime en pixels.
c. Elle peut tre exprime en pourcentage.
d. Elle peut animer un objet.
3. Pour appliquer une transparence de 60% un lment ou une image, quelle proprit
devez-vous utiliser?
a. opacit: 40
b. opacit: 0.4
c. transparence: 40
d. transparence: 0.4
4. Parmi les propositions suivantes, laquelle prsente des inconvnients pour les polices
Web? (Choisissez toutes les rponses applicables.)
a. Elles doivent tre charges sur un serveur Web.
b. Elles sont limites en nombre et en varit.
c. Elles rendent plus difficile la reconnaissance de la marque sur le Web.
d. Elles sont chres.
5. Parmi les propositions suivantes, laquelle est associe aux images cls?
a. Angles arrondis
b. Transitions
c. Animations
d. Aucune des rponses cidessus
6. Que devez-vous spcifier pour crer une transition?
a. Un dpart diffr
b. La propritCSS appliquer au cours de la transition
c. La fonction de minutage de la transition
d. L'image cl
7. Quel est l'avantage principal li l'utilisation de l'interpolation chromatique dans
l'espace de couleur alpha?
a. Elle produit des transitions colorimtriques plus lisses en dgrads.
b. Elle permet d'ajouter de la couleur aux dessinsSVG.
c. a et b
d. Ni a ni b
8. Parmi les proprits suivantes, laquelle devez-vous utiliser pour ajouter de la couleur
au texte de l'lment canvas?
a. fillStyle
b. strokeStyle
c. textColor
d. strokeColor couleur bordure
9. Quels sont les deux tats de lecture d'une animation?
a. dmarr
b. en cours d'excution
c. suspendu
d. reprise
10. Parmi les lignes de code suivantes, laquelle contrle le degr de flou?
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>

a. FeGaussianBlur
b. SourceGraphic
c. StdDeviation
d. Aucune des rponses cidessus

188 | leon 7

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1. Un lment opaque ne laisse pas passer la lumire, tandis que vous pouvez voir
travers un lment transparent.
V F 2. AvecCSS, pour faire pivoter un lment, appliquez-lui un certain nombre de
degrs dans le sens contraire des aiguilles d'une montre.
V F 3. Une animation reprsente l'affichage d'une squence d'images statiques un
rythme assez rapide pour crer l'illusion d'un mouvement.
V F 4. Un dgrad radial commence partir d'un point central et rayonne la couleur
vers les bords d'un conteneur.
V F 5. La perspective, en termes de dessins et d'illustrations, est la convergence de
lignes qui donne l'illusion de la profondeur.
valuation

des comptences
Scnario 7-1 : Dpannage du codeCSS3
Ali est passionn par les voitures anciennes et restaure de vieilles voitures pour les
revendre et raliser un profit. Il publie des photos et des descriptions sur son site Web
qu'il gre lui-mme. Ali a recours autant que possible HTML5 et CSS3. Il a essay
d'appliquer les transformations de translation et de mise l'chelle une image2D sur son
site, mais aucune transformation ne fonctionne. Voici le code qu'il utilise:
<style>
img { transform: translate(100px,50px);
transform: scale(2,4); }
</style>

Quel conseil pouvez-vous donner Ali?

Scnario 7-2 : Affichage d'images avant et aprs traitement


Linda, l'pouse d'Ali, trouve que son site Web prsentant sa voiture ancienne pourrait tre
amlior pour attirer davantage de visiteurs. Elle suggre entre autres de montrer les photos des
voitures avant et aprs la restauration. Ils vous demandent quelles options sont leur disposition
avecCSS3 pour faciliter l'affichage des photos pour les utilisateurs. Que leur dites-vous?
valuation

de la matrise des concepts


Scnario 7-3 : Cration de boutons avec des amliorations
Edward cre un ensemble de boutons pour une applicationWeb et souhaite arrondir les
angles des boutons et leur appliquer une ombre porte lgrement floue. Il vous demande
quelles propritsCSS3 il doit utiliser. Que pouvez-vous lui dire?

Scnario7-4: Prsentation de la proprit Flex


Meghan est une tudiante aux beaux-arts. Elle a un cours sur les images numriques et
un camarade lui dit que la perspective3D de CSS3 l'intresse. Elle n'en a jamais entendu
parler auparavant et vous demande de lui expliquer brivement ce dont il s'agit. Que
pouvez-vous lui dire?

Prsentation des
principes de base de
JavaScript et du codage

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA

Numro de l'objectif de l'examen MTA

Gestion et maintenance du langage JavaScript

Grer et assurer la mise jour de JavaScript

4.1

Mise jour de l'interface utilisateur avec JavaScript

Mettre jour l'interface utilisateur avec JavaScript

4.2

TERMES CLS
application dynamique

jQuery

bibliothque

logiciel

bibliothque JavaScript

mthodes

vnements

rappel

fonction

sous-routines fonction sans retour (return)

gestionnaire dvnements

validation

identificateurs

variable

interactivit

Malted Milk Media dispose d'une application mobile fonctionnelle qui donne de bons
rsultats. Mais elle n'est pas pratique. En effet, les utilisateurs doivent appuyer sur
plus de touches et attendre plus longtemps que ce qui est gnralement acceptable.
L'quipe de dveloppement a dcid que JavaScript contribuera grandement rendre
l'application plus ractive et sans problme.
Gestion

et maintenance du langage JavaScript

L'ESSENTIEL

HTML5 et CSS3 offrent une excellente base votre site Web ou application mobile.
Toutefois, effectuer des oprations plus structures que la prsentation du contenu, par
exemple rpondre avec des donnes individualises sur un utilisateur final spcifique,
effectuer une transaction de commerce en ligne ou driver des rsultats sur la base des
donnes dj saisies, demande une vritable programmation. JavaScript est un langage
de programmation capable avec grande capacit d'exprimer les interactions que vous
voulez que vos utilisateurs finaux aient avec votre application.
189

190 | leon 8
Prenons l'exemple d'une application mobile lie un service qui affiche l'heure de la prochaine
visite de service un client. Elle propose un lien hypertexte pour appeler un rpartiteur s'il est
ncessaire de reprogrammer. Mais ce n'est pas trs intelligent de proposer ce lien en dehors des
heures ouvrables quand personne n'est l pour rpondre. Comment faire en sorte que le lien
hypertexte change selon l'heure de la journe?
Tous les travaux de ce type, qui pour un travailleur humain exigent une dcision, un calcul ou
une recherche, sont du domaine de la programmation. Pour nous, un logiciel est une recette que
l'ordinateur excute avec comme rsultat une action ou un affichage particulier. Mme si de
nombreuses pages Web sont conues pour tre statiques en ceci qu'elles ont la mme apparence
pour tous les lecteurs, en toutes circonstances, la programmation JavaScript rend les applications
dynamiques et interactives. Elles s'ajustent et rpondent aux actions d'utilisateurs finaux
particuliers. Linteractivit permet un utilisateur d'effectuer une action dans une application,
gnralement en cliquant sur un bouton ou en appuyant sur une touche. Une application
dynamique s'adapte et rpond des utilisateurs ou leurs actions particulires. JavaScript
augmente galement les possibilits d'animer des affichages, autrement dit, de faire en sorte que
des parties de l'affichage bougent et soient mises jour sous les yeux d'un utilisateur final.

PRT POUR LA
CERTIFICATION
Comment JavaScript
rend-il une application
interactive et
dynamique?
4.1

Dans les programmes JavaScript, plusieurs lments diffrents doivent tre associs pour
obtenir le rsultat que vous recherchez. JavaScript diffre de CSS et HTML sur quelques
aspects essentiels et vous apprendrez de nouveaux concepts pour tirer le meilleur parti de
JavaScript. HTML et CSS, par exemple, sont en grande partie axs sur le fait de donner un
aspect particulier des lments. JavaScript accorde plus d'attention la faon dont les
lments agissent. Pour tester un programme JavaScript, vous avez souvent besoin de regarder
l'cran plusieurs moments dans le temps et peut-tre d'interagir avec lui.
Encore plus qu'avec HTML et CSS, votre travail dans JavaScript dpend d'un environnement de
dveloppement que vous comprenez et dans lequel vous tes l'aise. Un environnement de
dveloppement utile peut tre aussi simple qu'une copie du Bloc-notes et Internet Explorer, ou
aussi complexe qu'un environnement de dveloppement intgr (IDE) dot d'un diteur, d'un
dbogueur et d'un gnrateur d'application intgrs, et ainsi de suite. Les exercices de cette leon
utilisent les outils les plus simples possibles, ils sont faciles adapter des outils plus sophistiqus.

REMARQUE

Les termes programme et script sont presque synonymes. Certaines personnes disent
script pour souligner le fait que la source est petite ou pas en C ou Java ou pour des
raisons plus vagues. Ne vous proccupez pas des diffrences. Dans cette leon, les termes
programme, script, fichier source et code ont presque le mme sens.
Cette leon porte sur la cration de programmes JavaScript et l'utilisation des fonctions. Vous
apprendrez crer des programmes simples partir de zro et utiliser le code des bibliothques
JavaScript, jQuery et autres bibliothques tierces. Vous apprendrez galement localiser et
accder aux lments, couter et rpondre aux vnements, afficher et masquer des lments,
mettre jour le contenu des lments et ajouter des lments la vole.

CRATION D'UN PROGRAMME JAVASCRIPT SIMPLE


PRPAREZ-VOUS. Pour crer un programme JavaScript simple, procdez comme suit:

1. l'aide d'un outil d'dition ou de dveloppement d'applications, crez un fichier avec


le contenu suivant:
<!doctype html>
<html>
<head>
<title>Mon premier programme JavaScript</title>
</head>
<body>
<h1>Mon premier programme JavaScript</h1>
<p>Il sagit de texte.
<button type = 'button' onclick = "alert('Vous avez cliqu sur le bouton');">Je suis un bouton;
cliquez sur moi</button>
</body>
</html>

2. Enregistrez le fichier sous le nom L8-js1.html.

Prsentation des principes de base de JavaScript et du codage | 191


3. Pour excuter le programme JavaScript, ouvrez L8-js1.html dans un navigateur Web. Les rsultats
doivent ressembler ceux de la figure8-1.

Figure8-1
Votre premier programme
JavaScript

Figure8-2
Vrification des paramtres
JavaScript dans Internet
Explorer

Si le programme JavaScript ne s'affiche pas, vous devez activer JavaScript dans les prfrences
de votre navigateur Web. Dans Internet Explorer9, par exemple, slectionnez Outils > options
Internet. Dans la bote de dialogue Options Internet, cliquez sur l'onglet Scurit . Cliquez sur le bouton
Personnaliser le niveau ou Niveau par dfaut, selon celui qui est disponible. Dans la bote de
dialogue Paramtres de scurit, faites dfiler vers le bas pour accder la section Script (voir la
figure8-2). Cliquez sur la case d'option Activer sous Active scripting, puis cliquez deux fois sur OK
pour fermer les botes de dialogue. Essayez d'ouvrir nouveau L8-js1.html dans votre
navigateur Web afin d'excuter le programme JavaScript.

192 | leon 8

4. Cliquez sur le bouton que vous avez cr en JavaScript qui s'affiche sur l'cran. Un
message d'alerte s'affiche, comme illustr dans la figure8-3. Cela indique que votre
programme JavaScript fonctionne correctement.

5. Cliquez sur OK pour fermer le message d'alerte.


6. Laissez le fichier HTML, l'outil d'dition et le navigateur Web ouverts si vous envisagez
d'effectuer l'exercice suivant au cours de cette session.

Figure8-3
Un message d'alerte est un
moyen pratique pour tester
le fonctionnement d'un
programme JavaScript

REF

Dans les leons


prcdentes, vous avez
appris les bases de
l'dition de balisage
HTML et de code CSS
et l'affichage du rsultat.
Utilisez les mmes
comptences pour
travailler avec JavaScript.

Il s'agit de votre premier programme JavaScript. Non seulement il a une apparence


particulire sur l'cran, mais cette apparence change. Cest typique avec les programmes :
ils rpondent aux actions de lutilisateur.
Toutefois, c'est un programme inhabituel, en ceci que sa partie JavaScript est presque
invisible. Vous voyez le programme JavaScript? C'est le seul fragment entre guillemets,
comme suit:
alert('Vous avez cliqu sur le bouton');

L'alerte alert() elle-mme est trop intrusive pour apparatre dans le code de production
fourni pour une utilisation par les consommateurs. Elle n'apparat donc presque jamais
dans la documentation de rfrence. En mme temps, c'est le moyen le plus simple de
commencer utiliser JavaScript et il peut tre extrmement utile lors du dveloppement
ou du dbogage.
Un programme JavaScript ordinaire se compose d'une squence d'instructions. Les instructions
sont spares par des points-virgules, comme vous le verrez dans le prochain exercice.
CRATION D'UN PROGRAMME JAVASCRIPT INSTRUCTIONS MULTIPLES
PRPAREZ-VOUS. Pour crer un programme JavaScript instructions multiples, procdez
comme suit:
1. Dans un outil d'dition ou de dveloppement d'applications, mettez jour L8-js1.html
en remplaant alert() par le texte suivant:
alert('Ceci est la premire alerte'); alert('Ceci est la seconde alerte');

2. Enregistrez le fichier.

Prsentation des principes de base de JavaScript et du codage | 193



3. Excutez le programme JavaScript mis jour en ouvrant le fichier HTML dans un


navigateur Web.
4. Lorsque le premier message d'alerte s'affiche, fermez-le en cliquant sur OK. Le programme
JavaScript passe son instruction suivante, c'est--dire le second message d'alerte. Le
second message d'alerte est illustr dans la figure8-4.

Figure8-4
Le second message d'alerte
devient visible seulement
aprs le rejet du premier

5. Fermez le second message d'alerte en cliquant sur OK.


6. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour plus d'informations sur JavaScript, visitez la page Web W3schools.com sur JavaScript l'adresse
http://www.w3schools.com/js/default.asp. Pour plus d'informations sur Microsoft et JavaScript,
recherchez msdn javascript l'aide de votre moteur de recherche favori.

Cration et utilisation des fonctions


Une fonction correspond un segment d'un programme dfini et excut indpendamment
des autres parties. L'action d'une fonction est la squence des actions des instructions
qu'elle contient.
En principe, un programme JavaScript entier pourrait tre crit avec une instruction aprs
l'autre dans l'ordre exact dans lequel elles doivent s'excuter. Cependant, les programmeurs
ont constat qu'il est utile d'introduire des symboles ou des noms pour des parties spciales
d'un programme.
PRT POUR LA
CERTIFICATION
Qu'est-ce qu'une
fonction de
programmation?
4.1

La premire partie est une fonction. En programmation, une fonction est un segment d'un
programme dfini et interprt indpendamment des autres parties. Prenons l'exemple
d'une recette de cuisine. Il est inutile d'expliquer dans chaque recette crite toutes les
tapes qu'implique l'extraction du blanc d'un uf. Une recette classique indique
simplement, ajouter un blanc d'uf et suppose que le lecteur sait qu'il doit chercher
ailleurs pour obtenir des dtails ou des indications sur la meilleure faon de choisir un
uf, de le casser, de sparer ses parties, etc. Dans la cuisine, un assistant peut mme tre

194 | leon 8

charg de prparer les blancs d'ufs sans participation directe de la personne qui suit la
recette. La programmation fonctionne de faon analogue: il est courant d'utiliser les
fonctions crites par d'autres personnes, parfois sans inspection minutieuse de la faon
exacte dont elles fonctionnent.
L'criture d'une fonction de programmation a deux objectifs principaux:
Une tche effectue dans diffrentes situations peut tre dfinie une seule fois et utilise
dans plusieurs cas avec la certitude que son comportement sera identique. Ce genre
d'abrviation est plus concis et moins sujet aux erreurs que la rptition d'une
squence entire d'tapes dans chaque contexte o la squence peut tre ncessaire.
Pour faciliter le travail de la personne qui crit, gre ou lit le programme, il est utile et
instructif d'identifier les segments importants du fonctionnement avec les noms de
fonction. Tout comme les livres comportent des chapitres, avec des noms qui signalent
les actions ou les thmes, les programmes informatiques sont dots de fonctions.
Il est important de comprendre que l'action d'une fonction correspond la squence des
actions des instructions qu'elle inclut. Lorsque vous excutez un programme qui contient
une fonction, le programme excute simplement les instructions au sein de la fonction.
Il est galement important de distinguer la dfinition et l'excution d'une fonction. L'expression
d'une fonction, la section function example1() {. . .} , n'excute pas de code au sein de la
fonction. Ce que vous pouvez observer dans le code est uniquement la dfinition d'une
fonction. Une action utile se produit uniquement lorsque la fonction est appele, excute ou
lance, ce sont des synonymes pour les besoins de ce document.
UTILISATION D'UNE FONCTION JAVASCRIPT
PRPAREZ-VOUS. Pour apprendre utiliser une fonction JavaScript, procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js2.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Premire utilisation d'une fonction</title>
<script type = "text/javascript">
function example1() {
alert("Ceci est la premire alerte.");
alert("Ceci est la seconde alerte.");
}
</script>
</head>
<body>
<h1>Premire utilisation d'une fonction</h1>
<p>Il s'agit de texte.
<button type = 'button' onclick = "example1();">Je suis un bouton;
cliquez sur moi</button>
</p>
</body>
</html>

2. Ouvrez L8-js2.html dans un navigateur. Le programme s'affiche, comme illustr dans la


figure8-5. Observez le texte et le bouton. ce stade, il n'y a aucun signe de JavaScript.

Prsentation des principes de base de JavaScript et du codage | 195


Figure8-5
Ce programme ressemble
L8-js1.html

3. Cliquez sur le bouton. Comparez l'action de cette page avec le comportement du


fichier L8-js1.html qui contient deux alertes. Voyez-vous comment ils agissent de la
mme faon mme s'ils sont rdigs un peu diffremment? Le message d'alerte a la
mme apparence qu'il soit appel partir d'une dfinition de fonction ou non.
4. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Cet exemple prsente au moins deux autres nouveaux concepts, en plus de l'utilisation
d'une fonction. Tout d'abord, il prsente le code JavaScript intgr dans des balises
<script> en HTML. Il y a plusieurs faons de connecter un programme JavaScript au
balisage HTML auquel il s'applique. Cette utilisation de <script> dans <head> est courante,
en particulier pour les projets JavaScript de taille moyenne.
En outre, le nom example1 de la fonction mrite attention. Nous pouvons contrler
cenom. Quand nous crivons href dans le cadre d'un lien hypertexte, ou alert() pour
afficher une alerte, nous nous appuyons sur des mots cls dfinis dans les normes pour
HTML et JavaScript, respectivement. Le nom de fonction example1, cependant, ne
respecte pas ces normes. C'est notre choix. Nous devons simplement tre cohrents. Si
nous crivons "mon_exemple" au lieu de example1 dans la dfinition de la fonction,
alors nous devons aussi utiliser "mon_exemple".
Mme si lattribution du nom de la fonction est assez libre, il existe quelques limitations
sur le choix du nom : le nom doit contenir des lettres, des chiffres, des tirets et le symbole
dollar, mais doit imprativement commencer par une lettre, un tiret ou le symbole dollar.
"example$1" est un nom de fonction JavaScript possible, mais pas "not.with.periods", "1wrong"et
"first name/last name".
Les programmes JavaScript ont une autre forme d'abrviation symbolique, ou nom, ce
quiest courant. Cet lment s'appelle une variable. Alors qu'une fonction dsigne une
squence d'actions, une variable reprsente un lment de donnes. Utilisez la syntaxe
varpour dfinir une nouvelle variable dans JavaScript.

REMARQUE

En fait, les rgles pour les identificateursJavaScript, en gros les noms de variables et
fonctions, sont un peu plus compliques qu'indiqu ci-dessus. Les identificateurs ne
peuvent pas tre identiques aux mots dj utiliss dans le langage. Par exemple, if
recouvre une signification spciale dans les instructions JavaScript et n'est pas disponible
comme nom de variable. Toutefois, dans certaines circonstances, les caractres autoriss
dans un nom peuvent provenir d'alphabets autres que l'anglais. Une dfinition complte
des rgles d'affectation des noms de JavaScript dpasse le cadre de cette leon.

196 | leon 8

UTILISATION D'UNE VARIABLE DANS UN PROGRAMME JAVASCRIPT


PRPAREZ-VOUS. Pour utiliser une variable dans un programme JavaScript, procdez
comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js3.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Premire utilisation d'une variable</title>
<script type = "text/javascript">
function example1() {
var version_name = "numro de srie X358-AA-3T601-22"
alert("Ceci est la premire alerte de " + version_name);
alert("Ceci est la seconde alerte de " + version_name);
}
</script>
</head>
<body>
<h1>Premire utilisation d'une variable</h1>
<p>Il s'agit de texte.
<button type = 'button' onclick = "example1();">Je suis un bouton;
cliquez sur moi</button>
</body>
</html>

2. Ouvrez L8-js3.html dans un navigateur et cliquez sur le bouton. La premire alerte


s'affiche l'cran, comme illustr dans la figure8-6.

3. Cliquez sur OK afin de rejeter la premire alerte et passer la seconde. Vous voyez en
quoi une variable peut tre utile? Un numro de srie ou autre quantit importante peut
figurer dans plusieurs endroits diffrents dans un programme. Il n'est pas ncessaire de
copier la valeur dans chaque emplacement. Au lieu de cela, JavaScript vous permet
d'utiliser le nom de la variable qui contient la valeur.
4. Cliquez sur OK pour fermer le second message d'alerte.
5. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-6
La valeur d'une variable
s'affiche dans un message
d'alerte

Prsentation des principes de base de JavaScript et du codage | 197

Utilisation de jQuery et d'autres bibliothques tierces

jQuery.com

Les programmeurs les plus efficaces savent faire bon usage de ce qu'crivent les autres.
Une bibliothque de programmation contient des extraits de code, sous-routines, classes
et autres ressources que vous pouvez r-utiliser pour crer des logiciels. Il existe de
nombreuses bibliothques JavaScript et jQuery est l'une des plus populaires.
D'autres programmeurs ont dj pens bon nombre des tches auxquelles vous serez
confront, que votre travail implique la confirmation que les numros de carte de crdit ne
sont pas valides, l'affichage d'images mdicales ou la cration d'une infrastructure de
discussion pour une quipe rpartie sur quatre continents. Vous pouvez rutiliser le code crit
par d'autres en utilisant les bibliothques JavaScript. Une bibliothque est un ensemble de
ressources, comme le code de fonction et les sous-routines prexistants, que les dveloppeurs
utilisent pour crer des programmes. (Pour les dveloppeurs JavaScript, les fonctions qui
ne retournent aucune valeur sont parfois considres comme des sous-routines.) Une
bibliothque JavaScript dsigne le code JavaScript prexistant.

PRT POUR LA
CERTIFICATION
Qu'est-ce que jQuery?
4.1

Dans la plupart des entreprises, des politiques ont t adoptes avant votre arrive au sujet
des bibliothques utiliser et de la faon de les appeler. Le Web regorge de conseils sur
les bibliothques et leur applicabilit et prend en charge un riche march de celles qui sont
disponibles. Beaucoup, mais pas toutes, sont disponibles gratuitement. Certaines ont des
politiques de prise en charge plus ou moins formelles, c'est--dire un engagement
rpondre lorsque des dfauts sont signals. Certaines de ces bibliothques sont destines
seulement un petit nombre de programmeurs, par exemple une bibliothque qui facilite
le dveloppement d'applications qui contrlent des boulangeries industrielles, alors que
d'autres s'adressent tous ceux qui dveloppent des applications en JavaScript.
jQuery est la principale bibliothque JavaScript de ce genre. Plus de la moiti des
10000sites Web les plus visits dans le monde utilisent jQuery. Cette bibliothque est
disponible gratuitement et sans restriction excessive. Vous devrez consulter un avocat,
bien sr, pour savoir comment ses licences s'appliquent votre situation. Notez aussi que
Microsoft et d'autres acteurs importants du secteur mettent la bibliothque jQuery la
disposition de tout le monde en tlchargement.
UTILISATION DE JQUERY
PRPAREZ-VOUS. Pour utiliser jQuery, procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js4.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Premire utilisation de jQuery</title>
<script type = "text/javascript"
src =
"http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type = "text/javascript">
// Une fois le document HTML charg, excutez
// a fonction dans ready().
$(document).ready(function() {
// Chaque paragraphe reoit une action clic:
.
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>

198 | leon 8
<body>
<p>Il s'agit du premier paragraphe. Cliquez sur moi pour me faire disparatre.
<p>Il s'agit du deuxime paragraphe.
<p>Il s'agit du troisime paragraphe.
</body>
</html>

2. Ouvrez L8-js4.html dans un navigateur. La page s'affiche, comme illustr dans la


figure8-7. Notez que trois phrases s'affichent.

3. Cliquez n'importe o dans le premier paragraphe. Le paragraphe disparat, comme


illustr dans la figure8-8.

4. Cliquez n'importe o dans le second paragraphe pour le faire disparatre.


5. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-7
Un simple affichage HTML,
avant l'excution de
JavaScript

Figure8-8
JavaScript a agi pour
masquer un paragraphe

PRT POUR LA
CERTIFICATION
Quels sont les exemples
de bibliothques tierces
autres que jQuery?
4.1

Vous voyez en quoi c'est un modle de comportement utile dans votre application Web,
mobile ou de console de jeu? Supposons que vous voulez que les informations qui
s'affichent pour les utilisateurs finaux changent selon les circonstances. Bien qu'il soit
possible d'crire en JavaScript pur, sans jQuery, qui se comporte comme L8-js4.html,
il faut beaucoup plus de codage. jQuery rend de nombreuses oprations courantes plus
courtes, plus comprhensibles et plus faciles exprimer correctement.
Vous pourriez tre invit utiliser plusieurs bibliothques tierces autres que jQuery. Le plus
souvent, vous recevrez des instructions explicites sur quelle bibliothque utiliser. Lorsque vous
avez le choix entre plusieurs bibliothques, vous pouvez trouver de nombreuses informations
sur le World Wide Web en recherchant le nom de la bibliothque. En dehors de jQuery, les

Prsentation des principes de base de JavaScript et du codage | 199

autres bibliothques rpandues incluent Dojo, MooTools et YUI. Lorsque vous utilisez
une bibliothque tierce, vous devez gnralement inclure un lment tel que le suivant:
<script type = "text/javascript"
src = "adresse Web ou locale de la source de la bibliothque JavaScript"></script>

Pourquoi est-il ncessaire d'inclure cette balise? Lorsque vous voulez utiliser wonderful_
function() partir d'une bibliothque tierce dans l'une des pages que vous crivez, la seule
faon pour le navigateur de savoir ce que vous entendez par wonderful_function() est d'utiliser
une rfrence son apparition dans la bibliothque. Le <script ...> fournit cette rfrence.
Vous devez galement lire la documentation de la bibliothque que vous voulez utiliser et
peut-tre acqurir une licence.
Mise

jour de l'interface utilisateur avec JavaScript


L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Comment utiliser JavaScript
pour mettre jour
l'interface utilisateur?
4.2

JavaScript est indispensable pour presque tous les effets d'applications HTML modernes
et ractives.
Vous connaissez les concepts de base de HTML : navigation laide de liens hypertexte et
du bouton Prcdent, donnes rcupres dans des formulaires soumis et tout le style
visuel du balisage HTML traditionnel. Trusty Lawn Care veut une application qui en fait
plus. Elle doit afficher les mises jour en temps rel des horaires du personnel, ragir
rapidement et en dtail aux informations de compte, personnaliser les conseils en fonction
des personnes, de la mto et bien plus encore. Seul JavaScript permet ce dynamisme et
cette interactivit.
Pour obtenir un exemple de ce que JavaScript rend possible, crez une petite calculatrice
intgre au navigateur.
CRATION D'UNE CALCULATRICE INTGRE AU NAVIGATEUR L'AIDE DE JAVASCRIPT
PRPAREZ-VOUS. Pour crer une calculatrice intgre au navigateur l'aide de JavaScript,
procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js5.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Calculatrice intgre au navigateur</title>
</head>
</body>
<h1>In-browser calculator</h1>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="Input" Size="20">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 "
OnClick="calculator.Input.value

200 | leon 8
+= '1'">
<input type="button" name="two" value=" 2 "
OnCLick="calculator.Input.value
+= '2'">
<input type="button" name="three" value=" 3 "
OnClick="calculator.Input.value
+= '3'">
<input type="button" name="plus" value=" + "
OnClick="calculator.Input.value
+= ' + '">
<br>
<input type="button" name="four" value=" 4 "
OnClick="calculator.Input.value
+= '4'">
<input type="button" name="five" value=" 5 "
OnCLick="calculator.Input.value
+= '5'">
<input type="button" name="six" value=" 6 "
OnClick="calculator.Input.value
+= '6'">
<input type="button" name="minus" value=" - "
OnClick="calculator.Input.value
+= ' - '">
<br>
<input type="button" name="seven" value=" 7 "
OnClick="calculator.Input.value
+= '7'">
<input type="button" name="eight" value=" 8 "
OnCLick="calculator.Input.value
+= '8'">
<input type="button" name="nine" value=" 9 "
OnClick="calculator.Input.value
+= '9'">
<input type="button" name="times" value=" x "
OnClick="calculator.Input.value
+= ' * '">
<br>
<input type="button" name="clear" value=" c "
OnClick="calculator.Input.value
= ''">
<input type="button" name="zero" value=" 0 "
OnClick="calculator.Input.value
+= '0'">
<input type="button" name="DoIt" value=" = "
OnClick="calculator.Input.value
= eval(calculator.Input.value)">
<input type="button" name="div" value=" / "
OnClick="calculator.Input.value
+= ' / '">
</td>
</tr>
</table>
</form>
</body>
</html>

Prsentation des principes de base de JavaScript et du codage | 201


2. Ouvrez L8-js5.html dans un navigateur. La calculatrice s'affiche, comme illustr dans la


figure8-9.

3. Essayez votre calculatrice. Cliquez sur les boutons 7 14 + 2 = et observez le rsultat.


La calculatrice a-t-elle affich100, comme illustr dans la figure8-10?

4. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-9
Une calculatrice cre
l'aide de JavaScript

Figure8-10
Lorsque vous cliquez ou
tapez le signe gal dans
votre calculatrice JavaScript,
elle calcule immdiatement
un rsultat, comme une
calculatrice de poche classique

Ce petit exemple montre que pour l'essentiel, un programme JavaScript peut faire dans le
navigateur tout ce que n'importe quelle autre application fait, et parfois en seulement quelques
lignes de code source. Les fonctionnalits JavaScript incluent la saisie de donnes, la rponse
des frappes de touches et des mouvements de souris, l'affichage des rsultats, des calculs
complexes et plus encore, comme l'illustrent les exercices suivants. Les applications mobiles,
construites sur une base de HTML5 offrent toutes les mmes fonctionnalits.

Localisation et accs aux lments


Tout ce que vous voyez dans votre navigateur, JavaScript peut y accder et le
contrler par programmation. Vous pouvez utiliser la mthode getElementById() pour
accder aux lments d'affichage.

202 | leon 8

Au cours de votre carrire de programmeur, vous serez souvent en mesure de donner une
description de ce que vous voulez, quelque chose comme, alors nous devons vrifier que ce
que l'utilisateur a entr est, mais vous ne saurez pas comment traduire l'ide en JavaScript.
Le dfi consiste souvent identifier et isoler ce qui se passe avec un lment particulier
que vous voyez l'cran. Ici, lment peut dsigner un bouton, un champ de saisie,
une figure, du texte, etc.

PRT POUR LA
CERTIFICATION
Quelle mthode
JavaScript retourne
une rfrence au
premier lment avec
un attribut ID ou NAME
spcifique?
4.2

REMARQUE

L'un des principaux moyens pour accder aux lments d'affichage est la mthode
getElementById(). Cette mthode retourne une rfrence au premier objet associ l'attribut
id ou NAME spcifi.

Un objet dsigne une chose ou un lment en jargon informatique. Il s'agit


de la catgorie la plus gnrale des lments tudis. Techniquement, le JavaScript est un
langage bas sur les objets, c'est--dire, qu'il met l'accent sur le fait que ces instances
de programmation en tant que premier paragraphe ont des proprits et des mthodes
qui fournissent des informations sur le paragraphe et des possibilits d'agir sur celui-ci.
UTILISATION DE LA MTHODE GETELEMENTBYID() POUR L'ENTRE UTILISATEUR
PRPAREZ-VOUS. Pour apprendre utiliser la mthode getElementByID() afin de recueillir
des entres utilisateur, procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js6.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Validation d'une entre utilisateur</title>
<script type = "text/javascript">
function validate() {
var value = document.getElementById("input1").value;
if (isNaN(value)) {
modifier = "non ";
} else {
modifier = "";
}
var report = "Vous avez saisi '" + value + "'; il s'agit " +
modifier + "d'un nombre valide.";
alert(report);
}
</script>
</head>
<body>
<h1>Validation d'une entre utilisateur</h1>
<form name="calculator">
<input type = "text" id = "input1"></input>
<button type = "button" onclick = "validate();">Cliquez sur moi pour voir ce que je pense de
votre entre</button>
</form>
</body>
</html>

2. Ouvrez L8-js6.html dans un navigateur.


3. Tapez un mot court dans la zone de saisie, puis cliquez sur le bouton. Les rsultats
sont prsents dans la figure8-11. Cliquez sur OK pour apporter vos modifications et
fermer la bote de dialogue.

Prsentation des principes de base de JavaScript et du codage | 203


Figure8-11
Un modle pour la validation
d'entre utilisateur par
JavaScript

4. Tapez un nombre dans la zone de saisie et cliquez sur le bouton. Comment un message
contextuel a-t-il t modifi par rapport l'tape prcdente? Cliquez sur OK pour
apporter vos modifications et fermer la bote de dialogue.
5. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

La validation est une responsabilit importante pour JavaScript : lutilisateur a-t-il saisi
un chiffre qui respecte une contrainte budgtaire ? Est-ce un numro de carte de crdit
lgal? Une adresse e-mail est-elle autorise et nest pas en conflit avec une adresse existante?
Le fichier L8-js6.html est un petit modle pour le thme gnral de la validation. Nous avons
souvent besoin de confirmer qu'une entre d'utilisateur est, en fait, numrique, dans le
sens o 0 et 3,141 sont des nombres appropris, mais abc et 3,141. ne le sont pas. Alors
qu'il serait judicieux pour JavaScript d'avoir une fonction is_a_number(), pour des raisons
historiques, il utilise seulement isNaN.
Pourquoi getElementById est-il appel une mthode? JavaScript ne cre-t-il pas une
bibliothque de fonctions pour effectuer des tches utiles?
Oui et non. Mme si JavaScript cre une bibliothque de fonctions utiles pour nombreuses
oprations courantes, certaines fonctionnalits JavaScript sont fortement lies des objets
particuliers que HTML dfinit. Ces fonctionnalits sont appeles mthodes. Les mthodes
se distinguent des fonctions uniquement par le fait qu'elles sont toujours associes et
utilises avec un objet particulier. isNaN() est un exemple d'une fonction JavaScript qui
permet de tester la condition n'est pas un nombre. Si isNaN() retourne la valeur 0 (false),
la valeur est un nombre. document.getElementById() est un exemple de mthode JavaScript.
Vous ne pouvez utiliser efficacement getElementById qu'avec l'objet de document spcial.

coute et rponse aux vnements


Un vnement est un concept crucial en programmation interactive. Une grande partie
de la programmation JavaScript concerne les rponses un vnement. L'vnement Load
est utilis couramment et il se dclenche lorsque son propritaire a termin son action.
Beaucoup de conditions requises par les applications impliquent des vnements qui sont
des actions qui dclenchent d'autres actions. Les descriptions en termes de quand ou
si sont gnralement codes en JavaScript en termes d'vnements. Cela peut surprendre
les programmeurs habitus utiliser d'autres langages dans lesquels l'accent est mis sur la
squence:
1. Effectuez la premire opration.
2. Ensuite, effectuez la deuxime opration.

204 | leon 8

3. Ensuite, effectuez la troisime opration.


4. Terminez la squence.
La programmation base sur les vnements, en revanche, ressemble plus un dialogue : un
utilisateur effectue une action, puis le programme JavaScript rpond, et ainsi de suite.
Tous les programmes d'exemple JavaScript prsents jusqu' prsent impliquaient des
vnements. Le fait daffecter une valeur au gestionnaire dvnements onClick pour
lvnement Click a leffet suivant : lorsque l'utilisateur final clique sur l'lment en
question, excutez le script donn par la valeur onClick. Dans ce cas l'action de clic est
l'vnement et le script est la rponse ou le rappel.
Les rfrences JavaScript compilent tous les vnements reconnus. Les vnements qui sont
souvent programms, au-del d'un clic sur un lment, sont les suivants:

PRT POUR LA
CERTIFICATION
Quelle est l'action
du gestionnaire
d'vnements de onLoad ?
4.2

soumission d'un formulaire


frappes de touches
autres manipulations de souris, dont les doubles-clics et les dplacements de la souris
slection d'un lment d'une zone de liste
heure de fin de chargement d'une image
Le gestionnaire d'vnements de onLoad est plus important que de nombreux dbutants ne
le reconnaissent. OnLoad appartient aux lments HTML; il se dclenche lorsque son
propritaire a termin son action. L'vnement onLoad pour une image <img> se produit
lorsque l'image est entirement restitue et visible. L'vnement onLoad pour une table
<table> se dclenche une fois que toutes les cellules de cette table ont t traces.
UTILISATION DU GESTIONNAIRE D'VNEMENTS DE ONLOAD
PRPAREZ-VOUS. Pour utiliser le gestionnaire d'vnements de OnLoad, procdez comme suit:

1. Dans un diteur de texte ou un outil de dveloppement d'applications, crez L8-js7.


html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Validation dune entre utilisateur</title>
<script type = text/javascript>
function validate() {
var value = document.getElementById(input1).value;
if (isNaN(value)) {
modifier = non ;
} else {
modifier = ;
}
var report = Vous avez saisi + value + ; il sagit +
modifier + dun nombre valide.;
alert(report);
}
</script>
</head>
<body>

Prsentation des principes de base de JavaScript et du codage | 205


<h1>Validation dune entre utilisateur</h1>
<form name=calculator>
<input type = text id = input1></input>
<button type = button onclick = validate();>Cliquez sur moi pour voir ce que je pense de
votre entre</button>
</form>
</body>
</html>

2. Ouvrez L8-js7.html dans un navigateur. Un formulaire s'affiche, comme illustr dans la


figure8-12. L'alerte qui s'affiche indique que le chargement de <body> est termin.
C'est le sens de onload = "init();".

3. Cliquez sur OK pour fermer la bote de dialogue.


4. Entrez une valeur dans le champ de saisie et cliquez sur le bouton. Observez comment
ce programme interprte cette valeur, dont un exemple est illustr dans la figure8-13.

Figure8-12
Une fois que tout le code
HTML est compltement
charg, l'vnement OnLoad
est dclench

Figure8-13
Le code JavaScript de cet
exemple ragit la valeur
entre

206 | leon 8

5. Faites des expriences avec d'autres valeurs.


6. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Un symptme typique des programmes JavaScript errons est qu'ils sont irrguliers: ils
donnent des rsultats diffrents des moments diffrents. Dans certains cas, cela est d au
fait que le programme est crit de telle manire qu'il dpend de l'existence d'un lment
d'cran particulier, mais ne garantit pas que cet lment existe. Le lancement du programme
des moments diffrents peut modifier lgrement l'ordre de chargement et les rsultats
peuvent donc sembler imprvisibles. Une mthode pour rsoudre de tels problmes consiste
commencer les calculs seulement aprs le dclenchement de l'vnement onLoad ,
comme dans in L8-js7.html.

Affichage et masquage des lments


Vous pouvez afficher ou masquer des lments l'aide de l'attribut HTML display
pour rendre vos affichages intelligents et montrer l'utilisateur des informations
pertinentes et les masquer lorsqu'elles ne sont plus utiles.

PRT POUR LA
CERTIFICATION
Quel attribut HTML
pouvez-vous utiliser pour
afficher des lments
l'aide de JavaScript?
4.2

Un affichage particulier peut montrer diffrents types dinformations selon les circonstances :
un numro de tlphone en dehors des heures de bureau et en dehors des jours ouvrables, un
avertissement sur l'utilisation affich seulement les mois o le trafic est excessif, ou des avis
sur l'activit des autres utilisateurs affichs seulement quand ceux-ci sont connects. Une
mthode pratique permettant d'organiser ces variations consiste disposer tous les messages
possibles dans l'cran, puis n'afficher que les plus pertinents. Les lments HTML ont un
attribut display utile pour cette approche.
L'exercice suivant consiste crer une petite application qui affiche et masque un paragraphe
selon la valeur entre par un utilisateur final. Le programme affiche un message si l'utilisateur
entre la valeur80 ou plus.
MASQUAGE DE PARTIES DE L'AFFICHAGE EN FONCTION DE L'ACTION DE L'UTILISATEUR
PRPAREZ-VOUS. Pour crer une application qui affiche et masque un paragraphe en
fonction de la valeur entre par un utilisateur final, procdez comme suit:

1. Dans un diteur de texte ou un outil de dveloppement d'applications, crez


L8-js8.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Afficher/masquer en rponse</title>
<script type = "text/javascript">
function check_range() {
var value = document.getElementById("price1").value;
var paragraph_list = document.getElementsByTagName("p");
var first_paragraph = paragraph_list[0];
if (value >= 80) {
display = "block";
} else {
display = "none";
}
first_paragraph.style.display = display;la variable display
l'attribut
}
display
</script>
de style
</head>
<body>

Prsentation des principes de base de JavaScript et du codage | 207


<h1>Le prix total, taxes comprises</h1>
<form>
Est: <input type = "number" id = "price1"
min = "1" max = "100"
oninput = "check_range();"
></input>
</form>
CSS
<p style = "display:none;">INDETERMIN
Avertissement:</p>
</body>
</html>

2. Ouvrez L8-js8.html dans un navigateur. Les rsultats sont prsents dans la figure8-14.

3. En utilisant le clavier, entrez chacun de ces prix en appuyant sur la touche Entre
aprs chacun d'eux: 1, 50, 79, 80, 90, et 60. Un avertissement s'affiche lorsque vous
entrez80 et90, comme illustr dans la figure8-15.

4. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-14
L'interface du programme

Figure8-15
Votre programme JavaScript
vous avertit lorsque la valeur
que vous entrez s'approche
d'une plage particulire

Les dbutants font souvent l'erreur d'oublier show et hide. L8-js8.html commence par
le paragraphe d'avertissement masqu, puis utilise JavaScript pour l'afficher dans certaines
circonstances. Souvenez-vous lorsque vous testez la fonctionnalit afficher/masquer que

208 | leon 8

JavaScript masque nouveau un lment, au moyen de l'attribut display affect, une fois
que les conditions pour show ne sont plus remplies. Dans le cas contraire, une fois
qu'un lment s'affiche, il n'est plus masqu.

Mise jour du contenu des lments


Est-ce qu'une partie d'un affichage dpend d'une autre partie? Utilisez JavaScript et
la proprit innerHTML pour synchroniser instantanment les deux parties.
PRT POUR LA
CERTIFICATION
Quelle proprit
JavaScript utilise-t-il pour
mettre jour le contenu
des lments HTML?
4.2

Le dernier exercice a ragi l'entre d'un prix en affichant ou en masquant un paragraphe


d'avertissement. JavaScript peut faire des calculs beaucoup plus complexes que juste un
afficher/masquer. Il peut calculer une distance, une recommandation ou, comme le montre
L8-js9.html, un prix total.
JavaScript utilise la proprit innerHTML pour modifier le contenu actuel des lments
HTML (appel galement contenu interne) ou pour insrer un nouveau contenu.
MISE JOUR DU CONTENU VISIBLE SUR L'CRAN
PRPAREZ-VOUS. Pour crer une application qui met jour le contenu visible sur l'cran,
procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js9.html avec le


contenu suivant:
<!doctype html>
<html>
<head>
<title>Calcul d'un lment</title>
<script type = "text/javascript">
//check_range affecte le style d'affichage
// du premier paragraphe en tant que fonction du
// prix affich, s'il est de80 et
// plus ou 79 et moins.
function check_range() {
var value = document.getElementById("price1").value;
var paragraph_list = document.getElementsByTagName("p");
var first_paragraph = paragraph_list[0];
if (value >= 80) {
display = "block";
} else {
display = "none";
}
first_paragraph.style.display = display;
}
// compute_total() est charg de
// mettre jour avec le total du
// prix et des taxes.
function compute_total() {
var value = document.getElementById("price1").value;
if (isNaN(value)) {
total = "INDETERMIN";
} else {
// Prenons l'exemple d'une taxe de 8%.
total = 1.08 * value;
total = total.toFixed(2);
}

Prsentation des principes de base de JavaScript et du codage | 209


var total_slot = document.getElementById("total");
total_slot.innerHTML = total;
}
</script>
</head>
<body><h1>Compute element</h1>
<form>
Calcul d'un lment: <input type = "number" id = "price1" min = "1" max = "100"
oninput = "check_range(); compute_total();"
></input> Entrez un prix:
is <span id = "total">INDETERMINATE</span>.
</form>
<p style = "display:none;">Warning: you are within 20% of your limit.</p>
</body>
</html>

2. Ouvrez L8-js9.html dans un navigateur Web.


3. l'aide du clavier, tapez le nombre 1 dans la zone de texte. Un message s'affiche, comme
illustr dans la figure8-16. Il indique le prix major de la taxe de 8% sur un lment de
1$. Remarquez comme l'affichage est mis jour rapidement et sans problme.

4. Appuyez sur Entre.


5. Tapez 50 dans la zone de texte et observez comment le message affich change.
6. Rptez les tapes3 et4 en utilisant les valeurs 79, 80, 90, et 60 chaque fois.
7. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-16
JavaScript peut calculer
immdiatement un total qui
inclut la taxe de vente sur la
base d'une entre utilisateur

Ajout d'lments

PRT POUR LA
CERTIFICATION
Quelle est l'action de la
commande createElement ?
4.2

Vous pouvez utiliser la commande createElement et la mthode appendChild avec


JavaScript pour ajouter des lments aprs le chargement du code HTML.
JavaScript permet des modifications encore plus radicales d'un affichage. Lorsque cela est
ncessaire, il est possible de crer de nouveaux lments et de les inclure dans un affichage
existant. La commande createElement et la mthode appendChild permettent de le faire.

210 | leon 8

AJOUT D'UN LMENT L'AFFICHAGE


PRPAREZ-VOUS. Pour crer une application qui ajoute des lments l'affichage, procdez
comme suit:
1. Dans un outil d'dition ou de dveloppement d'applications, crez L8-js10.html avec
le contenu suivant:
<!doctype html>
<html>
<head>
<title>Crer un lment</title>
<script type = "text/javascript">
function add_paragraph() {
var original = document.getElementById("original");
var new_paragraph = document.createElement("p");
var current_time = new Date()
var this_text = "Ce nouveau paragraphe est apparu " + current_time + ".";
// Mme une fois que le navigateur a rendu
// tout le HTML, il est possible d'ajouter de *nouveaux*
// lments HTML. createTextNode()// appendChild()-insertBefore() est un
// modle typique pour ajouter un nouveau contenu
// textuel.
var new_content = document.createTextNode(this_text);
new_paragraph.appendChild(new_content);
document.body.insertBefore(new_paragraph, original);
}
</script>
</head>
<body>
<h1>Crer un lment</h1>
<p id = "original">C'est le texte qui s'affiche lors du
premier chargement de l'affichage.</p>
<button type = "button" onclick =
"add_paragraph();">Cliquez sur moi pour
ajouter un nouveau contenu</button>
<p style = "display:none;">Avertissement:</p>
</body>
</html>

Figure8-17
L'interface de
programmation initiale

2. Ouvrez L8-js10.html dans un navigateur Web. Le programme s'affiche, comme illustr


dans la figure8-17.

Prsentation des principes de base de JavaScript et du codage | 211


3. Cliquez sur le bouton. L'cran change, comme illustr dans la figure8-18.

4. Cliquez sur le bouton encore plusieurs fois pour voir les rsultats.
5. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure8-18
Un cran constitu
d'lments HTML simples
ainsi que d'autres crs par
JavaScript en rponse
l'action de l'utilisateur

La cration d'un lment est une opration un peu plus dlicate que la mise jour d'un
lment existant. Vous devez utiliser JavaScript pour crer des relations que HTML tablit
automatiquement pour votre compte.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
H
 TML5 et CSS3 offrent une excellente base votre site Web ou application mobile.
Toutefois, effectuer des oprations plus structures que la prsentation du contenu, par
exemple rpondre avec des donnes individualises sur un utilisateur final spcifique,
effectuer une transaction de commerce en ligne ou driver des rsultats sur la base des
donnes dj saisies, demande une vritable programmation. JavaScript est un langage
de programmation capable avec grande capacit d'exprimer les interactions que vous
voulez que vos utilisateurs finaux aient avec votre application.
Une fonction reprsente un segment d'un programme dfini et excut indpendamment
des autres parties. L'action d'une fonction est la squence des actions des instructions
qu'elle contient.
Les programmeurs les plus efficaces savent faire bon usage de ce qu'crivent les autres.
Une bibliothque de programmation contient des extraits de code, sous-routines, classes
et autres ressources que vous pouvez r-utiliser pour crer des logiciels. Il existe de
nombreuses bibliothques JavaScript et jQuery est l'une des plus populaires.
JavaScript est indispensable pour presque tous les effets d'applications HTML modernes
et ractives.
JavaScript peut accder tout ce que vous voyez dans votre navigateur et le
contrler par programmation. Vous pouvez utiliser la mthode getElementById() pour
accder aux lments d'affichage.
Un vnement est un concept crucial en programmation interactive. Une grande
partie de la programmation JavaScript concerne les rponses un vnement.
L'vnement onLoad est utilis couramment et il se dclenche lorsque son
propritaire a termin son action.
Vous pouvez afficher ou masquer des lments l'aide de l'attribut HTML display
pour rendre vos affichages intelligents et montrer l'utilisateur des informations
pertinentes et les masquer lorsqu'elles ne sont plus utiles.
Vous pouvez utiliser la commande createElement et la mthode appendChild avec JavaScript
pour ajouter des lments aprs que le chargement du code HTML.

212 | leon 8
valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces prvus
cet effet.
1. Un programme
est une recette que l'ordinateur excute avec comme rsultat une
action ou un affichage particulier.
2. Utilisez la syntaxe var pour dfinir une nouvelle variable

dans JavaScript.

evenement ,
3. Beaucoup de conditions requises par les applications impliquent des
qui reprsentent des actions, par exemple le clic d'une souris, qui dclenchent d'autres
actions.

4. Vous remarquez qu'une partie de votre programme JavaScript reprsente une squence
d'actions dont la logique est distincte des autres parties du programme. Il serait
probablement utile de dfinir une fonction
pour excuter cette squence
spcifique.
5. L'vnement onLoad
HTML a t affich.

associ <body> constitue une garantie que tout le

6. Un modle de codage courant consiste associer un ID un lment HTML spcifique,


puis accder cet lment via JavaScript avec getElementByID .
7. Les

identificateur

JavaScript sont les noms de variables et de fonctions.

8. Une bibliothque
est un ensemble de ressources, comme le code des fonctions et
les sous-routines prexistants, que les dveloppeurs utilisent pour crer des programmes.
9. Une

mthode/BIB

se compose de code JavaScript pr-crit.

10. Plus de la moiti des principaux sites Web utilisent la bibliothque JavaScript
JQuery
.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les types d'applications suivantes, lequel est cr par la programmation
JavaScript? (Choisissez toutes les rponses applicables.)
a. statique
b. dynamique
c. syntaxiquement correcte
d. interactive
2. Parmi les bibliothques suivantes, lesquelles sont des bibliothques JavaScript?
(Choisissez toutes les rponses applicables.)
a. Dojo
b. MooTools
c. YUI
d. jQuery
3. Parmi les variables suivantes, laquelle est une variable JavaScript valide?
a. my.variable
b. 1st-variable
c. ord['a']
d. [TBC]var1_$
4. Dans quel cas JavaScript ne peut-il pas tre utilis?
a. Avec HTML4.01 et versions antrieures
b. Lorsque l'utilisateur a dsactiv JavaScript dans les prfrences du navigateur
c. Lorsque l'utilisateur n'a pas install JavaScript sur son bureau
d. Aucune des rponses cidessus

Prsentation des principes de base de JavaScript et du codage | 213

5. Parmi les proprits suivantes, laquelle JavaScript utilise-t-il pour modifier le contenu
actuel d'lments HTML?
a. changeHTML
b. modInnerHTML
c. innerHTML
d. HTMLinner
6. Une page Web particulire a un seul <form>. Comment JavaScript accde-t-il cet
lment?
a. document. getElementsByTagName("form")[0]
b. document. getElementsByTagName("form")[1]
c. document. getElementsByTagName("form")
d. [document. getElementsByTagName("form")]
7. L'utilisateur a coch une case dans un formulaire prcisant qu'il n'a pas voyag
rcemment dans un pays prsentant un accroissement des cas d'hpatite. Comment
pourriez-vous utiliser JavaScript pour masquer un paragraphe de mise en garde?
a. warning.style.display = "aucun" "none"
b. warning.style.display = 0
c. hide(warning)
d. warning.style.hide()
8. Une instruction individuelle en JavaScript se termine par un(e) ___.
a. marque de hachage
b. parenthse fermante
c. point
d. point-virgule
9. Parmi les proprits suivantes, laquelle JavaScript utilise-t-il pour ajouter de
nouveaux lments l'affichage d'un programme? (Choisissez toutes les rponses
applicables.)
a. createElement
b. appendChild
c. getElement
d. addChild
10. Parmi les propositions suivantes, laquelle peut tre utilise pour afficher et masquer
des lments dans un programme JavaScript?
a. display attribute
b. show-hide attribute
c. show command
d. innerHTML

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettre F si elle est fausse.
VF1.
Les noms des fonctions sont rpertoris dans la norme JavaScript.
VF2. Dans la source HTML, le code JavaScript apparat gnralement dans un lment
<script> .
VF3.
Il est possible d'crire du code JavaScript qui sera excut avant le chargement
de toutes les images.
VF4.
Si la fonction f2() utilise la fonction f1(), et que les dfinitions des deux fonctions
figurent dans le mme lment <script>, alors la dfinition de f1() doit figurer en
premier.
VF5.
La mthode getElementByElement() retourne une rfrence au premier objet
associ l'attribut id ou NAME spcifi.

214 | leon 8
valuation

des comptences
Scnario 8-1 : Validation des entres
Il vous a t demand de coder une fonction JavaScript pour valider ou non le format
d'une entre utilisateur dans un champ rserv au numro de scurit sociale. Comment
procdez-vous? Que devez-vous fournir votre quipe?

Scnario8-2: Prsentation des noms de fonctions


Raymond cre un programme qui comporte plusieurs fonctions. Il a rpertori les noms
des fonctions et leurs descriptions dans un tableau pour s'y rfrer facilement pendant le
dveloppement de son application. Certaines applications ne fonctionnent pas et il vous
demande des conseils. Vous remarquez que les fonctions en question commencent par des
marques de hachage ou des barres obliques. Que dites-vous Raymond sur l'affectation
de noms aux fonctions?

valuation

de la matrise des concepts


Scnario 8-3 : Slection d'une bibliothque JavaScript
CiCi voudrait commencer utiliser les bibliothques JavaScript pour rduire le temps de
cration de ses programmes, mais elle ne sait pas par o commencer. Le nombre de
bibliothques disponibles est tellement lev qu'il est difficile de faire un choix. Que
pouvez-vous lui dire?

Scnario 8-4 : Distinction entre les fonctions et les mthodes


Andr dcouvre la programmation JavaScript et a du mal comprendre la diffrence entre
les mthodes et les fonctions. Que pouvez-vous lui dire?

Cration d'animations,
utilisation de graphiques
et accs aux donnes

LEON

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA

Numro de l'objectif de l'examen MTA

Codage des animations avec


Coder les animations avec
4.3
JavaScript JavaScript
Utilisation d'images, de formes et Coder les animations avec
4.3
d'autres graphiques
JavaScript
Envoi et rception de donnes
Accder aux donnes avec
JavaScript
Chargement et enregistrement
de fichiers

4.4

Accder aux donnes avec


4.4
JavaScript

Utilisation de JavaScript pour valider Accder aux donnes avec


4.4
les entres d'utilisateur dans les
JavaScript
formulaires
Prsentation et utilisation de
cookies

Accder aux donnes avec


4.4
JavaScript

Prsentation et utilisation de la
fonction Local Storage

Accder aux donnes avec


4.4
JavaScript

TERMES CLS
analyse

encapsuler

animation

JSON

API XMLHttpRequest

LocalStorage

AppCache

rcursivit

cookies

type de donnes

lment canvas

L'quipe de dveloppement de Malted Milk Media a deux nouveaux projets terminer


cette semaine. Attaboy Pet Services veut que son logo s'anime quand les utilisateurs
ouvrent la page d'accueil de la socit, et Attaboy veut que son logo soit cr par l'lment
canvas. Pour le projet d'application mobile Trusty Lawn Care, il est ncessaire
que du code soit ajout pour changer des donnes avec un serveur. L'quipe de
dveloppement veut que vous essayez d'en savoir plus sur ces aspects de l'utilisation
de JavaScript.
215

216 | leon 9
Codage

des animations avec JavaScript

L'ESSENTIEL

HTML et CSS offrent plusieurs faons d'appliquer des animations rapides aux effets courants.
Toutefois, JavaScript est beaucoup plus souple et peut produire des rsultats remarquables.
Une animation reprsente l'affichage d'une squence d'images statiques un rythme assez
rapide pour crer l'illusion d'un mouvement. Concernant l'interface utilisateur, une animation
modifie l'affichage pour le rendre dynamique, pas seulement une modification ponctuelle,
mais un changement transparent. JavaScript est suffisamment souple pour produire des
effets d'animation spectaculaires, adapts au public.

PRT POUR LA
CERTIFICATION
Qu'est-ce qu'une
animation?
4.3

La rcursivit est un lment cl d'une animation. La rcursivit est une technique de


programmation dans laquelle une fonction s'appelle. Une technique courante dans l'animation
JavaScript consiste utiliser setTimeout de manire rcursive, c'est--dire appeler une nouvelle
excution de la mme fonction qui a appel setTimeout() . Il s'agit gnralement du moyen le
plus efficace d'introduire un lment de minutage dans JavaScript.

REMARQUE

En dehors de la programmation, le comportement de la rcursivit n'est pas toujours bien


considr. Si vous crivez un dictionnaire ou un lexique, par exemple, il est conseill de
dfinir un terme sans utiliser les mots qui apparaissent dans l'expression. Supposons que
vous dfinissiez le mot politique. Une dfinition telle que le domaine de la politique
pourrait tre dsapprouve par de nombreux diteurs en raison de l'utilisation du terme
politique. En l'informatique, la rcursivit s'avre tre non seulement autorise,
mais surtout puissante.

Cration d'animations
N'oubliez pas que le JavaScript est un langage de programmation gnraliste puissant.
Si vous pouvez imaginer une animation particulire, il y a probablement une faon de
le crer en JavaScript.
PRT POUR LA
CERTIFICATION
Quelle fonction JavaScript
pouvez-vous utiliser pour
crer une animation?
4.3

Une animation (comme les autres effets JavaScript) est sous contrle informatique. Cela signifie
que via un codage suffisamment intelligent, vous pouvez choisir ce que peut faire animation.
La fonction move_paragraph() dans le code source de l'exercice suivant est considre
comme rcursive car la fonction move_paragraph apparat dans la dernire instruction qui
dfinit la fonction. Cet exercice permet de crer une animation constamment mise jour,
dans le style d'un tlscripteur.
CRER UNE ANIMATION SIMPLE
PRPAREZ-VOUS. Pour crer une application simple, effectuez les oprations suivantes:
1. Crez le fichier L9-js1.html avec le contenu suivant:

<!doctype html>
<html>
<head>
<title>Animer avec JavaScript</title>
<script type = "text/javascript">
// Crer un effet bande de tlscripteur en faisant glisser
// le paragraphe du texte d'un pixel
// vers la droite, encore et encore, jusqu' ce que la limite
// de 300pixels soit atteinte. Puis
// redmarrer l'animation dans le
// sens inverse vers la gauche.

Cration d'animations, utilisation de graphiques et accs aux donnes | 217


function move_paragraph() {
next = current + "px";
current += 1;
if (current > 300) {
current = 0;
}
paragraph.style.left = next;
// Pause de 18 millisecondes avant
// la prochaine tape.
var rate = 18;
setTimeout(move_paragraph, rate);
}
function init() {
paragraph = document.getElementById("original");
paragraph.style.position = "absolu";
current = 0;
move_paragraph();
}
</script>
</head>
<body onload = "init();">
<h1>Animer avec JavaScript</h1>
<p id = "original">Vous me voyez faire dfiler
'cran?</p>
</body>
</html>

2. Ouvrez le fichier L9-js1.html dans votre navigateur Web. Le paragraphe se dplace-t-il


travers l'cran, comme illustr dans la figure 9-1?
3. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts.

Figure9-1
Deux instantans d'un
affichage de tlscripteur
pris diffrents moments

Quelques secondes
plus tard, le texte
est cet
emplacement
dans le navigateur

218 | leon 9

CRER UNE ANIMATION INTERACTIVE


PRPAREZ-VOUS. Pour crer une animation sensible l'action d'un utilisateur, effectuez
les oprations suivantes:
1. Crez le fichier L9-js2.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Animer avec JavaScript</title>
<script type = "text/javascript">
// Cette page a pratiquement le mme effet que le fichier L9-js1.html
// sauf que la frquence
// de dplacement du paragraphe dpend de la valeur
// numrique que l'utilisateur final a entr dans le
// champ de saisie.
function move_paragraph() {
next = current + "px";
current += 1;
if (current > 300) {
current = 0;
}
paragraph.style.left = next;
var rate = document.getElementById("rate").value;
setTimeout(move_paragraph, rate);
}
function init() {
paragraph = document.getElementById("original");
paragraph.style.position = "absolu";
current = 0;
move_paragraph();
}
</script>
</head>
<body onload = "init();">
<h1>Animer avec JavaScript</h1>
<!-- The number <input> est une nouveaut d'HTML5.
Cela fournit un moyen pratique pour s'assurer
que l'utilisateur final entre un chiffre valide dans une
plage spcifie. -->
<form>
<input id = "rate" type = "number" value = "18" min =
"5" max = "100"></input>
</form>
<p id = "original">Vous me voyez faire dfiler l'cran?</p>
</body>
</html>

2. Ouvrez le fichier L9-js2.html dans un navigateur Web. L'interface s'affiche, comme


illustr dans la figure9-2.

Cration d'animations, utilisation de graphiques et accs aux donnes|219


Figure9-2
Presque tout le contenu de
l'cran est sous le contrle
de JavaScript, notamment la
vitesse d'animation

3. Remplacez la valeur du taux (qui est initialement de 18) par un nombre suprieur ou
infrieur et notez l'effet sur l'animation. Est-ce que la vitesse de l'animation augmente
ou diminue lorsque vous modifiez l'entre?
4. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour obtenir des informations de base et connatre les bonnes pratiques en matire de conception
d'animation pour l'interface utilisateur, visitez la page Web de Microsoft Animations et Transitions
l'adresse http://bit.ly/ziqs0G. La bibliothque d'animations qui se trouve l'adresse http://msdn.
microsoft.com/en-us/library/windows/desktop/dn742481.aspx fournit une suite d'animations
dveloppe par Microsoft qui peut tre utilise pour crer des applications Windows Store.

Utilisation

d'images, de formes et d'autres graphiques

L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Comment pouvez-vous
afficher un fichier
image l'aide de
JavaScript?
4.3

Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique sur
un bouton ou qu'un autre vnement se produit. La mthode createElement convient bien
cette utilisation.
JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais aussi
des formes comme des botes et des cercles. Une mthode consiste utiliser la mthode
createElement(). Cette mthode cre une fonction rutilisable pour afficher une image:
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;

// Ajoute la balise <body>


document.body.appendChild(img);

Pour afficher l'image, incluez ce code:


<button onclick="show_image
('chemin/nom_fichier', 276,110, 'Logo');">
Afficher le logo</button>

L'affichage d'une image lorsque l'on clique sur un bouton est une tche relativement simple.
Le fait de crer des graphiques la vole requiert l'lment canvas ou SVG. Cette leon
couvre la cration de graphiques l'aide de l'lment canvas.

220|leon 9

Manipulation de l'lment canvas avec JavaScript


Avec HTML5, JavaScript peut facilement contrler non seulement les textes, les
formes et les images statiques, mais aussi tracer des graphiques complexes.
L'lment canvas en HTLM5 dsigne une zone de dessin contrle par programmation.
Les seuls lments graphiques communs aux versions HTML antrieures sont les lments
statiques, comme PNG ou JPG. Les effets dynamiques et les effets interactifs en particulier
taient complexes. L'lment canvas permet de changer tout cela.
Comme vous l'avez appris dans la leon2, l'lment canvas cre un conteneur pour les
graphiques et utilise JavaScript pour tracer les graphiques dynamiquement. Avec JavaScript,
vous pouvez galement animer des objets en les faisant se dplacer, changer d'chelle et
ainsi de suite.
PRT POUR LA
CERTIFICATION
Comment devez-vous
utiliser JavaScript pour
manipuler des lments
canvas?
4.3

Pour dessiner un objet l'aide de l'lment canvas, les constructions principales que vous
devez utiliser sont la fonction getElementById() pour rechercher l'lment canvas et la fonction
canvas.getContext (parfois abrge c.getContext) pour crer l'objet canvas. Vous pouvez ensuite
utiliser une multitude de mthodes pour tracer des formes, ajouter des images, etc.
Des applications entires (y compris des jeux et des simulateurs impressionnants) ont t
construites avec l'lment canvas HTML5.
UTILISER L'LMENT CANVAS POUR CRER UN CADRAN D'HORLOGE AVEC DES
AIGUILLES QUI BOUGENT
PRPAREZ-VOUS. Pour illustrer l'utilisation de l'lment HTML5 canvas, effectuez les
oprations suivantes:
1. Crez le fichier L9-js3.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Cadran d'horloge analogique illustrant
le contrle de l'lment canvas en JavaScript</title>
<script type = "text/javascript">
function draw_leg(fraction) {
dctx.lineTo(center_x + length * Math.sin(2 *
Math.PI * fraction),
center_y - length * Math.cos(2 *
Math.PI * fraction));
}
function init() {
var canvas =
document.getElementById("clockface");
// Les variables suivantes sont cres en tant qu'
// lments globaux, d'autres fonctions
// peuvent donc facilement y accder.
dctx = canvas.getContext('2d');
dctx.fillStyle = "noir";
center_x = 100;
center_y = 100;
length = 100;
show_hands();
}
// Une aiguille est dessine comme un triangle isocle
// partir du centre du cadran de l'horloge jusqu'au bord de celui-ci.

Cration d'animations, utilisation de graphiques et accs aux donnes | 221


function show_hand(fraction, width) {
dctx.beginPath();
dctx.moveTo(center_x, center_y);
draw_leg(fraction - width);
draw_leg(fraction + width);
dctx.fill();
}
function show_hands() {
// Effacer tout ce qui est dj prsent dans la zone
// qui reprsente le cadran de l'horloge.
dctx.clearRect(0, 0, 200, 200);
// Quelle heure est-il *maintenant*?
var now = new Date();
seconds = now.getSeconds();
minutes = now.getMinutes() + seconds / 60;
hours = now.getHours() + minutes / 60;
// La deuxime aiguille est la plus petite des trois.
show_hand(seconds / 60, 0.002);
show_hand(minutes / 60, 0.005);
// L'aiguille des heures est deux fois plus large que celle des
// hand.
show_hand(hours / 12, 0.01);
var rate = 1000;
setTimeout(show_hands, rate);
}
</script>
</head>
<body onload = "init();">
<h1>Cadran d'horloge analogique illustrant
le contrle de l'lment canvas en JavaScript</h1>
<canvas id = "clockface" width = "200" height =
"200"></canvas>
</body>
</html>


Figure9-3
Instantan des aiguilles de
l'horloge code en JavaScript
indiquant 11:47:28

2. Ouvrez le fichier L9-js3.html dans un navigateur Web. L'cran s'affiche, comme illustr
dans la figure 9-3.

222|leon 9

3. Fermez le fichier et le navigateur Web, mais laissez l'outil d'dition ouvert si vous
effectuez l'exercice suivant au cours de cette session.

Dans un autre exemple, l'exercice suivant cre un dessin abstrait ralis en plaant des
blocs sur un lment canvas HTML5. L'exercice illustre qu'il faut relativement peu de
lignes en JavaScript pour produire des effets assez compliqus.
CRER DES BOTES ANIMES L'AIDE DE L'LMENT CANVAS
PRPAREZ-VOUS. Pour crer des formes animes l'aide de l'lment canvas, effectuez
les oprations suivantes:
1. Crez le fichier L9-js4.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Blocs</title>
<script type = "text/javascript">
// Cette page est juste un essai, l'opration consiste placer des blocs de
// couleur sur l'cran de faon alatoire ,
// pour obtenir des effets visuels intressants.
// La rcursivit est utilise de deux faons distinctes
// ci-dessous : place_blcks() calls draw_spiral() et
// draw_spiral() appelle soit place_blocks() ou
// draw_spiral(), en fonction de la partie de la spirale
// qui a t dessine rcemment.
function init() {
var canvas =
document.getElementById("drawing_area");
dctx = canvas.getContext('2d');
place_blocks();
}
function draw_spiral() {
// Une fois qu'un bloc est dplac l'extrieur du dessin
// la spirale actuelle est arrte et une nouvelle
// est cre.
if (x > 500 || y > 500 || x < 0 || y < 0) {
place_blocks();
}
ratio = 1.6;
newx = x;
newy = y;
dx = size;
dy = size;
// Chaque bloc est pivot de 90degrs
// partir du dernier.
switch (direction) {
case "up":
dy = -size;
newy += dy;
direction = "left";
break;

Cration d'animations, utilisation de graphiques et accs aux donnes | 223


case "left":
dx = -size;
dy = -size;
newx += dx;
direction = "down";
break;
case "down":
dx = -size;
newy += dy;
direction = "right";
break;
case "right":
newx += dx;
direction = "up";
break;
}
dctx.fillRect(x, y, dx, dy);
// Chaque bloc dessin successivement est plus grand
// que le prcdent.
size *= ratio;
x = newx;
y = newy;
setTimeout(draw_spiral, delay);
}
function place_blocks() {
<?ACE 7?>dctx.fillStyle =
'#'+Math.floor(Math.random()*16777215).toString(16
);
x = 100 + 300 * Math.random();
y = 100 + 300 * Math.random();
delay = 100 + 2000 * Math.random();
size = 3 + 7 * Math.random();
direction = "up";
draw_spiral();
}
</script>
</head>
<body onload = "init();">
<h1>Blocs</h1>
<canvas id = "drawing_area" width = "500" height =
"500"></canvas
</body>
</html>

2. Ouvrez le fichier L9-js4.html dans un navigateur Web. L'cran se remplit de blocs de


couleur, comme illustr dans la figure9-4.
3. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

224 | leon 9
Figure9-4
Instantan d'un dessin
abstrait ralis en plaant
des blocs sur un lment
canvas HTML5.

Envoi

et rception de donnes

L'ESSENTIEL

Si une application accessible depuis l'ordinateur expose des donnes l'utilisateur final,
il y a probablement un moyen pour que JavaScript puisse atteindre ces donnes. L'un
des rles les plus importants de JavaScript est de communiquer en temps rel avec les
sources de donnes distantes.
Une partie de la puissance des applications informatiques modernes rside dans leur
capacit coordonner les informations provenant de plusieurs sources en un affichage utile
: JavaScript peut rassembler les bases de donnes ct serveur de l'historique du client, la
mmoire locale de l'ordinateur de bureau ou de l'ordinateur de poche avec des slections
d'achat actuelles, le contenu de la page en cours, et les mises jour distance des tarifs ou
des conditions mtorologiques des fins de comparaison et de calcul.
Il est difficile de crer des programmes JavaScript qui envoient et reoivent des donnes, non
pas parce que les concepts sont difficiles, mais parce que l'application JavaScript possde
une structure diffrente de toutes les autres. Presque tous les exemples de JavaScript de
la leon8 ont t construits comme de petites pages HTML autonomes. Chaque page
individuelle peut tre charge et pleinement utilise dans un navigateur.
Toutefois, un programme JavaScript qui envoie et reoit des donnes doit avoir plus
d'informations : il doit y avoir un rcepteur ou un expditeur quelque part avec qui votre
programme JavaScript peut changer des donnes. Le plus souvent, des pages HTML ou
des applications mobiles communiquent avec un serveur en rseau dans une application
centrale quelconque.

Cration d'animations, utilisation de graphiques et accs aux donnes | 225

PRT POUR LA
CERTIFICATION
Quelle API vous permet
d'changer des chanes
de donnes entre un
client et un serveur?
4.4

Des transactions de donnes JavaScript sont souvent prsentes comme difficiles


conceptuellement et accessibles seulement aux personnes qui matrisent AJAX, XML,
JSON et un mlange compliqu d'autres acronymes. Ce n'est pas vrai. Vous comprenez
dj les fonctions : il s'agit de petites botes spciales auxquelles vous fournissez zro ou
plusieurs arguments, puis une bote fait une opration et vous retourne ventuellement
un rsultat. La communication rseau JavaScript est semblable : elle transmet zro ou
plusieurs lments de donnes et reoit un rsultat en retour. La grande difficult rside
dans la mise en place initiale votre propre laboratoire avec les pices ncessaires pour
que ce dialogue fonctionne. Une fois que le premier lment fonctionne correctement, vous
verrez que vous apprendrez rapidement la scurit, le flux de contrle et les rgles de
codage propres la communication de donnes JavaScript.
L'une des techniques de transfert de donnes les plus importantes implique l'API
XMLHttpRequest (parfois abrge sous la forme XHR). XMLHttpRequest permet d'utiliser
JavaScript pour transmettre des donnes sous la forme de chanes de texte entre un client
et un serveur. La syntaxe gnrale pourrait ressembler ce qui suit:
function load(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
format de connection entre JS et serveur
xhr.onload = function() {
callback(xhr.responseText);
}
xhr.send(data);
la variable envoyer au serveur
}

L'objet XMLHttpRequest cre un appel vers le serveur. La mthode open spcifie la


mthodeHTTP pour contacter le serveur et fournit l'adresseWeb du serveur. La fonction
callback permet d'obtenir une rponse du serveur. Enfin, xhr.send(data) envoie les donnes.
Pour quelques exercices ultrieurs, comme vous le verrez bientt, il faut un serveur Web,
le cache de l'application, par exemple, n'existe que pour des sites accessible via une
connexion rseau. Avec la bonne approche, cependant, presque n'importe quel serveur
Web peut faire l'affaire. Votre instructeur mettra en place un accs un serveur Web afin
que vous puissiez essayer le cache d'application sans trop de difficult. Pour envoyer et
recevoir des donnes explicitement en JavaScript c'est diffrent. Pour que cela fonctionne,
il faut un serveur Web dynamique et une programmation ct serveur. Veillez ce que ces
distinctions soient claires:
La plupart des fonctionnalits de JavaScript : peuvent tre illustres avec un
navigateur partir du systme de fichiers du bureau local.
La cache d'application et quelques autres quipements HTML5 en JavaScript:
ncessitent un serveur Web. N'importe quel serveur Web peut convenir.
XmlHttpRequest et les installations de transmission de donnes JavaScript comparables,
y compris certains introduites par HTML5: ncessitent un serveur Web dynamique
En l'absence de serveur Web dynamique, l'exercice suivant montre un exemple trs simple
d'accs aux donnes. Lorsque vous choisissez de travailler avec des serveurs Web, vous
avez plusieurs solutions alternatives qui sont relativement faciles pour un novice en
service Web. wamp pour Windows, mamp pour Mac, et lamp pour Linux sont parmi les plus
simples pour dbuter.
ACCS AUX DONNES
PRPAREZ-VOUS. Procdez comme suit pour obtenir un exemple de la capacit de
JavaScript accder aux donnes:
1. Crez le fichier L9-js5.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>JavaScript accde aux donnes</title>

226 | leon 9
<script type = "text/javascript">
function init() {
var paragraph_object =
document.getElementById('paragraph');
m
 essage = "Notez que le titre de cette page est
'" + document.title + "'.";
paragraph_object.innerHTML = message;
}
</script>
</head>
<body onload = "init();">

PRT POUR LA
CERTIFICATION
Comment la fonction

<h1>JavaScript accde aux donnes</h1>


<p id = "paragraph"></p>

getElementById()

permet-elle d'accder
aux donnes?
4.4

</body>
</html>

2. Ouvrez le fichier L9-js5.html dans un navigateur Web. L'cran s'affiche, comme illustr
dans la figure 9-5.

3. Notez que JavaScript peut accder au contenu HTML.


4. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Figure9-5
Page HTML simple avec un
paragraphe calcule par
JavaScript

Quel est l'intrt de cet exemple? Si un programmeur a besoin du titre d'une page Web,
pourquoi ne pourrait-il pas simplement copier et coller du code HTML?
Voici une rponse frquente : le JavaScript de ce genre est destin une bibliothque
l'chelle du site. Il pourrait y avoir une stratgie ou un style cens s'appliquer toutes
les pages. Dans ce cas, il est beaucoup plus pratique et plus simple d'encapsuler la
stratgie dans une bibliothque JavaScript qui sait comment rcuprer le titre, plutt
que de copier et coller le titre de toutes les pages pour l'ensemble du site. Chaque page
comprend ensuite une copie identique de la bibliothque JavaScript.

REMARQUE

Une stratgie est un terme utilis par les programmeurs qui signifie, en gros, un
style d'action. Un style visuel peut tre quelque chose que nous, les humains,
dfinissons comme chaque page doit apparatre avec cette image subtile d'arrire
particulire. Une stratgie peut, par exemple, tre chaque page devrait rendre
son texte visible presque instantanment, et doit toujours tre lisible mme si elle est
redimensionne horizontalement. Les fonctions d'assistance de JavaScript et les normes
l'chelle du site pour le codage peuvent aider raliser des stratgies de ce type.

Cration d'animations, utilisation de graphiques et accs aux donnes | 227

REMARQUE

Le terme encapsuler c'est un peu du jargon, souvent employ par les programmeurs.
Dans l'application JavaScript qui a trac un cadran d'horloge analogique sur un lment
canvas, la fonction show_hand() encapsule toute la trigonomtrie implique dans l'laboration
d'une seule aiguille, que ce soit pour les heures, les minutes ou les secondes. Le programmeur
utilise le code show_hand() sans se soucier des dtails de ce qui est dedans (la capsule).
Pour la plupart des gens, il est beaucoup plus facile de tracer une bote ou d'encapsuler
une partie de la fonctionnalit, de donner un nom la capsule et de la considrer dans son
ensemble, plutt que de rechercher toutes ses parties chaque fois qu'elle est utilise.

Transmission d'objets complexes et analyse


JavaScript est un langage de programmation gnraliste et peut donc communiquer
des informations structures beaucoup plus riches que les simples valeurs utilises
dans la majeure partie de cette leon.
PRT POUR LA
CERTIFICATION
Qu'est-ce que l'analyse?
4.4

Concrtement, JavaScript peut grer des oprations trs complexes en programmation. Il


est, par exemple, possible de recevoir un rapport sur le prix de l'essence dans plusieurs
points de vente et d'tre en mesure d'isoler un seul de ces chiffres. L'analyse est un terme
utilis pour dcrire la vrification d'informations complexes en lments constitutifs.
ANALYSER DES DONNES COMPLEXES
PRPAREZ-VOUS. Pour dmontrer la capacit de JavaScript analyser des donnes
complexes, effectuez les oprations suivantes:
1. Crez le fichier L9-js6.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Analyse de donnes complexes</title>
<script type = "text/javascript">
// L'instruction suivante doit apparatre
// sur une seule ligne.
sample_data = "Mobil-17: 3.49; Kroger-03: 3.36;
E xxon-01: 3.59; Kroger-04: 3.49;
Valero-A: 3.41; Chevron-01: 3.52";
of_interest = "Kroger-04";
// sample_data est un exemple d'un morceau typique de
// une chane avec des parties spares
// par des points-virgules, o chacune des parties a deux
// sous-parties spares par le signe deux-points. Beaucoup d'autres formats
// sont possibles. Pour analyser ce format particulier,
// init() se spare sur deux sparateurs distincts.
function init() {
var paragraph_object =
document.getElementById("paragraph");
var data_list = sample_data.split(';');
for (j = 0; j < data_list.length; j++) {
parts = data_list[j].split(':');
var site = parts[0].trim()
if (site == of_interest) {

228|leon 9

var message = "Compte tenu des donnes de l'chantillon '" +


sample_data + "', ce programme a analys le
prix $"+ parts[1].trim() +" pour le "+ site +
" site.";
paragraph_object.innerHTML = message;
}
}

</script>
</head>
<body onload = "init();">
<h1>Analyse de donnes complexes</h1>
<p id = "paragraph">Bienvenue.</p>
</body>
</html>

2. Ouvrez le fichier L9-js6.html dans un navigateur Web. L'affichage devrait tre


semblable la figure9-6.

Figure9-6
JavaScript peut extraire des
donnes intgres dans un
format complexe

3. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

JavaScript et les bibliothques JavaScript librement disponibles fournissent de nombreux


quipements d'analyse. L'extraction de donnes partir d'une page Web externe lisible par
l'homme est juste un exemple parmi tant d'autres de la faon dont JavaScript peut analyser
les donnes.
Par exemple, vous pouvez galement utiliser un sous-ensemble de JavaScript appel JSON
(JavaScript Object Notation) pour changer des objets JavaScript avec un serveur. Si vous
utilisez les API JSON.parse et JSON.stringify, le code pourrait ressembler ce qui suit:
function loadJSON(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
callback( JSON.parse(xhr.responseText) );
}
xhr.send( JSON.stringify(data) );
}
loadJSON("my.json", { id : 1 }, function(response) {
setTitle(response.title);
});

Cration d'animations, utilisation de graphiques et accs aux donnes|229

Ce code est presque identique l'exemple de code XMLHttpRequest indiqu prcdemment dans
la leon. L'objet XMLHttpRequest cre un appel vers le serveur, et la mthode open spcifie la
mthode HTTP pour communiquer avec le serveur et fournit l'adresse du serveur Web. La
mthode callback utilise l'analyseJSON pour obtenir une rponse du serveur. Lorsque le
serveur rpond, l'API JSON.parse est appele, ce qui cre l'objet JavaScript. L'objet est
renvoy au serveur. Toutefois, les donnes sont enchanes d'abord.

Chargement et enregistrement de fichiers


L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Comment est-ce que je
peux limiter le type de
fichier charger?
4.4

JavaScript peut accder aux fichiers sur votre ordinateur local et, avec HTML5, il est
possible de valider le type de fichier avant de le charger. JavaScript fait du chargement
de fichiers un processus sans erreur plus interactif.
Beaucoup d'applications mobiles ou Web disposent d'une fonction pour tlcharger un
fichier. Le fait qu'il n'y ait aucun moyen efficace de spcifier, par exemple, d'autoriser
seulement le tlchargement d'images et non de documents, et uniquement si les images
occupent moins de 1,1Mo a longtemps t un point faible du HTML. Sans cette
fonctionnalit, il arrive trop souvent que les utilisateurs tentent accidentellement de
tlcharger des documents non souhaits ou non pris en charge par l'application et les
dlais rseau rendent la correction de l'erreur trs long.
Le HTML5 pouvant accder aux fichiers locaux, cela signifie qu'une image destine au
tlchargement peut tre prsente comme une miniature et valide avant le chargement.
Les actions immdiates du JavaScript permettent de faire du tlchargement un processus
interactif et sans erreur.
ACCDER UN FICHIER LOCAL
PRPAREZ-VOUS. Pour montrer la capacit de JavaScript accder un fichier local,
procdez comme suit:
1. Crez le fichier L9-js7.html avec le contenu suivant:
<!doctype html>
verification de type de fichier avant de l'envoy
<html>
<head>
<title>JavaScript accde des fichiers locaux</title>
<script type = "text/javascript">
function acknowledge(file_handle) {
var size = file_handle.size;
var fname = file_handle.name;
var message = "Vous avez slectionn le fichier '" +
fname + "'. Il semble tre reconnaissable
image, total " + size + " taille en octets.";
alert(message);
}
function complain(fname) {
v ar message = "Le fichier nomm '" + fname + "'
ne semble pas avoir une extension acceptable.";
alert(message);
}

230 | leon 9
function handle_file_selection(item) {
var f = item.files[0];
var fname = f.name;
var last_index = fname.lastIndexOf('.');
if (last_index == -1) {
complain(fname);
return;
}
var ext = fname.substr(last_index + 1);
if (ext.toLowerCase() in {'gif': '',
'jpg' : '',
'png': '',
'tif': ''
}) {
acknowledge(f);
} else {
complain(fname);
}
}
</script>
</head>
<body>
<h1>JavaScript accde des fichiers locaux</h1>
<input type = 'file'
onchange = 'handle_file_selection(this);' />
</body>
</html>

Figure9-7
JavaScript peut analyser
des fichiers avant de les
charger et rejeter ceux qui
ne sont pas conformes aux
restrictions

2. Ouvrez le fichier L9-js7.html dans un navigateur Web.


3. Cliquez sur Parcourir, puis recherchez et slectionnez un fichier sur votre ordinateur
local qui n'est pas une image. Cliquez sur Ouvrir. L'affichage devrait tre semblable
la figure9-7. La bote de message vous informe que vous avez slectionn le type de
fichier incorrect. Cliquez sur OK pour fermer la bote de message.

Cration d'animations, utilisation de graphiques et accs aux donnes | 231


Remarque

4. Rptez l'tape 3 et cette fois ouvrez un fichier image. La bote de message qui en
rsulte doit ressembler la figure 9-8 et vous informer que vous avez slectionn un
type de fichier acceptable. Cliquez sur OK pour fermer la bote de message.

5. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Le navigateur Mozilla
Firefox a t utilis
pour cet exercice.
Figure9-8
Ce fichier rpond aux exigences
de chargement de fichier

Notez qu'en fait ce programme ne tlcharge pas le fichier slectionn. Le but de cet exercice
est de montrer comment JavaScript peut accder au fichier et en grer le contenu, mme
avant le tlchargement.

Utilisation du cache de l'application (AppCache)


Les utilisateurs veulent tre en mesure de parcourir votre site, mme en mode hors
connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache diffre
du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes les pages
Web visites, tandis qu' AppCache enregistre uniquement les fichiers rpertoris dans le
manifeste de cache.
PRT POUR LA
CERTIFICATION
Quel est le but de
AppCache?
4.4

AppCache permet d'enregistrer une copie des fichiers de votre site Web en local sous

une forme structure. Les fichiers comprennent le HTML, CSS et JavaScript, ainsi que
d'autres ressources, que le site doit excuter. Aprs une premire visite, lors des visites
suivantes les ressources sont rapidement charges partir de la copie locale au lieu d'avoir
attendre sur une connexion rseau.

Comme indiqu dans la leon1, AppCache utilise un fichier texte appel manifeste de
cache pour spcifier que les fichiers d'un navigateur Web doivent se mettre en cache
en mode hors connexion. Mme si un utilisateur actualise le navigateur en mode hors
connexion, la page se charge et fonctionne correctement.
AppCache diffre d'un cache de navigateur. Alors que le cache d'un navigateur enregistre
toutes les pages Web visites, AppCache enregistre uniquement les fichiers rpertoris dans le
manifeste de cache. Vous pouvez appliquer AppCache une seule page Web ou un site entier.

232 | leon 9

Pour qu' AppCache fonctionne, le serveur Web doit tre configur avec le type MIME appropri
( savoir: text/cache-manifest). En outre, l'extension de fichier prfre pour les fichiers
manifeste est .appcache.
UTILISER APPCACHE
PRPAREZ-VOUS. Pour illustrer AppCache, procdez comme suit:
1. Vous devez obtenir les privilges d'utilisation d'un serveur Web de la part de votre
instructeur. Le serveur doit avoir le type MIME dfini sur text/cache-manifest.
AppCache n'est efficace que pour les accs rseau. Il ne peut pas agir lorsqu'une
ressource Web est locale.
2. Crez le fichier L9-appcache.html avec le contenu suivant:
<!doctype html>
<html manifest = "test.appcache">
<head>
<title>Exemple AppCache minimum</title>
</head>
<body>
<h1>Exemple AppCache minimum</h1>
<p>Cette page doit se recharger aprs avoir t dconnecte d'
Internet et avoir t actualise.
</body>
</html>

3. Fermez le fichier L9-appcache.html et tlchargez le fichier sur le serveur Web.


L'instructeur vous donnera l'adresse Web du fichier.
4. Dans un navigateur Web, accdez l'adresse Web. Le fichier L9-appcache.html s'ouvre.
5. Observez l'affichage, comme illustr dans la figure 9-9. Est-ce que la page se recharge
comme prvu?

Figure9-9
Page Web extraite de
AppCache

6. Dconnectez votre ordinateur local d'Internet.


7. Confirmez que vous ne pouvez pas accder aux pages Web (la page d'accueil MSDN,
par exemple).
8. Actualisez l'image du fichier L9-appcache.html dans votre navigateur.
9. Notez qu'elle s'affiche rapidement, mme si le fichier L9-appcache.html n'est pas
disponible actuellement.
10. Fermez le fichier HTML, mais laissez l'outil d'dition et le navigateur Web ouverts si
vous passez l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour obtenir un bon tutoriel sur AppCache, visitez la page Web Guide l'intention des dbutants
sur l'utilisation du cache de l'application (en anglais) l'adresse http://www.html5rocks.com/en/
tutorials/appcache/beginner/.

Cration d'animations, utilisation de graphiques et accs aux donnes | 233

Prsentation et utilisation des types de donnes


En JavaScript, les donnes se prsentent de diffrentes faons. Les plus courantes
sont les chanes et les nombres. Parmi les autres types de donnes on trouve: un
tableau, une valeur boolenne, une valeur Null, un objet et une valeur indfinie.

PRT POUR LA
CERTIFICATION
Quels types de donnes
sont disponibles en
JavaScript?
4.4

Les valeurs en JavaScript prennent un aspect spcial et sont appeles types de donnes.
Il s'agit le plus souvent de chanes et de nombres. ABCD et 1234 sont deux
exemples de chanes. Le deuxime exemple inclut uniquement des chiffres. Le chiffre
3 est un nombre, mais 3dollars est une chane.
D'autres types de donnes sont plus spcialiss, par exemple: un tableau, une valeur
boolenne, une valeur Null, un objet et une valeur indfinie. Leur utilisation est
relativement rare et n'est pas aborde dans ce cours.
La signification fondamentale des types de donnes ce niveau, c'est que leur dfinition
nous rserve quelques surprises. En JavaScript, l'exemple suivant a la valeur 123:
"'1' + 2 + 3"

Mais l'exemple suivant a la valeur 6 ou 33, selon l'interprteur JavaScript utilis:


"1 + 2 + '3'"

Il existe des rgles qui dfinissent entirement ce comportement, et chacun des types de
donnes a son utilit. Dans cette leon, vous devez faire la distinction entre un nombre et les
caractres qu'il reprsente. Si vous avez par erreur excut un calcul et que JavaScript gre
les types de donnes de faon surprenante, consultez les documents de rfrence MSDN sur
les types de donnes. En attendant, programmez JavaScript simplement et avec soin.
Utilisation de JavaScript pour valider les entres d'utilisateur dans les formulaires

L'ESSENTIEL

Au fur et mesure que les utilisateurs renseignent un formulaire, JavaScript valide


instantanment les entres et propose d'autres solutions.
Dans la leon3, vous avez appris la saisie et la validation d'un formulaire HTML. Avec
JavaScript, vous et vos utilisateurs finaux pouvez exploiter encore plus les formulaires.

PRT POUR LA
CERTIFICATION
Comment JavaScript
est-il utilis pour
effectuer la validation
d'entre ct client?
4.4

Supposons, par exemple, qu'un utilisateur final ait besoin d'entrer un numro de srie sous
la forme XXX-XXX-XX-X, o chaque X est un chiffre. Au tout dbut de l'application
Web, les utilisateurs finaux devaient taper cela comme ils le pouvaient, puis soumettre
un formulaire complet. Le serveur recherchait les ventuelles erreurs et les signalait
comme il pouvait.
Avec JavaScript, la validation d'entre ct client sous la forme de rtroaction et de correction
est instantane.
GRER UN FORMULAIRE AVEC JAVASCRIPT
PRPAREZ-VOUS. Pour dmontrer la capacit de JavaScript pour grer un formulaire,
procdez comme suit:
1. Crez le fichier L9-js8.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Gestion de formulaire</title>

234 | leon 9
<script type = "text/javascript">
// L'action de la fonction correcte()
consiste
// tester les caractres que l'utilisateur a
entrs
// par rapport au modle "XXX-XXX-XX X'. Si l'entre
// de l'utilisateur ne correspond pas ce
pattern,
// supprimez le dernier caractre. Cela
donne
// l'utilisateur l'impression qu'il
peut seulement
// entrer des caractres valides.
function correct() {
var input_object =
document.getElementById("serial");
var value = input_object.value;
var current_length = value.length;
if (current_length) {
var last_character =
value.substring(current_length - 1);
switch (current_length) {
case 4:
case 8:
case 11:
if (last_character != '-') {
value = value.substring(0,
current_length - 1);
}
break;
default:
if (!/\d/.test(last_character)) {
value = value.substring(0,
current_length - 1);
}
}
if (current_length > 12) {
value = value.substring(0, current_length
- 1);
}
current_length = value.length;
switch (current_length) {
case 3:
case 7:
case 10:
value += "-";
}
input_object.value = value;
}
}
</script>
</head>
<body>

Cration d'animations, utilisation de graphiques et accs aux donnes | 235


<h1>Gestion de formulaire</h1>
<form>
Entrez ici un numro de srie dans le modle XXX-XXX-XX X, o chaque X est un chiffre: <input id = "serial"
type = 'text' size = '12'
onkeyup =
"correct();">.
</form>
</body>
</html>

2. Ouvrez le fichier L9-js8.html dans un navigateur Web. L'cran s'affiche, comme illustr
dans la figure 9-10.

3. Commencez taper les caractres. Notez que le champ d'entre accepte uniquement
des caractres qui correspondent au modle XXX-XXX-XX-X et ignore ceux qui ne
correspondent pas.
4. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Figure9-10
La validation d'entre
ct client est une bonne
responsabilit pour JavaScript

Pour une vritable application, il faudrait plus de validation : il ne suffit pas qu'une entre ait
l'air d'un numro de srie, l'application doit aussi confirmer qu'il s'agit bien d'un numro de
srie. Mme si un utilisateur final peut toujours entrer une valeur de faon incorrecte, une
simple validation du formulaire par JavaScript facilite normment la garantie de la russite.
En outre, mme avec cette validation, un utilisateur final suffisamment dtermin peut utiliser
la souris pour entrer des valeurs qui ne correspondent pas au modle du numro de srie. Un
validateur plus sophistiqu risquerait de coincer les suppressions et les mouvements de la souris.

Prsentation et utilisation des cookies


L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Qu'est-ce qu'un cookie?
4.4

Les cookies contiennent traditionnellement des informations des fins de


personnalisation et des fins pratiques. JavaScript peut crer et rcuprer des cookies.
Les cookies reprsentent des petits fichiers texte que les sites Web enregistrent sur le
disque dur d'un ordinateur et qui contiennent des informations sur l'utilisateur et ses
prfrences de navigation. Le contenu des cookies change lorsque l'utilisateur se rend
de nouveau sur le site et slectionne diffrents articles ou modifie ses prfrences. Pour
JavaScript, un cookie est une variable. Vous devez utiliser JavaScript pour crer et
rcuprer des cookies.
Supposons que vous tes responsable d'un jeu vido cod en HTML et en JavaScript.
Il fonctionne assez bien, mais ncessite que l'utilisateur choisisse un niveau chaque
fois qu'il commence une nouvelle partie. Ne serait-il pas prfrable que le jeu devine que
l'utilisateur souhaite commencer un niveau suprieur celui de son dernier match, avec
une option pour rgler cela? Non seulement c'est mieux, mais les capacits de JavaScript
en matire de cookie rendent cela facile programmer.

236|leon 9

UTILISER DES COOKIES


PRPAREZ-VOUS. Pour dmontrer la capacit de JavaScript conserver des informations
sur l'ordinateur de bureau mme avec le navigateur ferm, effectuez les oprations suivantes:
1. Crez le fichier L9-js9.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Utilisation des cookies</title>
<script type = "text/javascript">
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function init() {
var message;
level_object = document.getElementById("level");
var welcome = document.getElementById("welcome");
var level = getCookie("level");
if (level == null || level == '') {
message = "C'est visiblement la premire fois
que vous jouez. Vous commencerez au niveau 1.";
level = 1;
} else {
message = ""La dernire fois que vous avez jou, vous avez atteint
le niveau " + level +". Vous allez commencer l maintenant.";
}
welcome.innerHTML = message;
level_object.value = level;
}
function save_level() {
setCookie("level", level_object.value, 10);
}
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? ""
: "; expires="+exdate.toUTC
String());
document.cookie=c_name + "=" + c_value;
}

Cration d'animations, utilisation de graphiques et accs aux donnes | 237


</script>
</head>
<body onload = "init();">
<h1>Utilisation des cookies</h1>
<p id = "welcome">Bienvenue.</p>
<form>
Vous pouvez mettre jour votre niveau tout moment. Il est
actuellement dfini sur
<input id = "level" type = "number" min = "1" max =
"100"
oninput = "save_level();" />.
</form>
</body>
</html>

2. Vous devez obtenir les privilges d'utilisation d'un serveur Web de la part de votre
instructeur. Les cookies ne peuvent tre activs que pour les pages Web visites en
rseau, pas en local.
3. Tlchargez le fichier L9-js9.html sur le serveur Web l'aide d'un programme de
transfert de fichier, tel que dcrit par votre instructeur. Votre instructeur doit aussi
vous donner l'adresse Web du fichier.
4. Dans un navigateur Web, utilisez l'adresse Web pour accder au fichier L9-js9.html.
5. Notez le niveau auquel vous commencez, comme illustr dans la figure 9-11.

Figure9-11
Les cookies ont souvent t
utiliss pour conserver les
petits morceaux de donnes
sur l'ordinateur client

6. Faites comme si vous aviez jou pendant un certain temps et atteint un niveau
diffrent. Entrez ce niveau dans la zone d'entre.
7. Fermez la fentre de l'application.
8. Ouvrez nouveau le fichier L9-js9.html. Voyez-vous comment l'application se
souvient de votre position d'une session de navigateur l'autre?
9. l'aide des paramtres de prfrences de votre navigateur, supprimez le cookie cr
dans cet exercice ou, si c'est plus pratique, supprimez tous les cookies.
10. Ouvrez nouveau le fichier L9-js9.html. Notez que votre niveau est revenu la valeur
par dfaut de 1.
11. Fermez le fichier, mais laissez l'outil d'dition et le navigateur Web ouverts si vous
passez l'exercice suivant au cours de cette session.

Prsentation et utilisation de la fonction de stockage local

L'ESSENTIEL

La quantit d'informations pouvant tre stocke dans les cookies est limite et par
consquent les effets de programmation qui peuvent tre atteints sont galement
limits. Les cookies prsentent aussi une menace pour la confidentialit des donnes.
HTML5 propose la fonction de stockage local pour personnaliser la programmation
plus facilement et la rendre plus performante.

238|leon 9
PRT POUR LA
CERTIFICATION
Qu'est-ce que le
stockage local?
4.4

Les cookies ont des limites. Ils ont parfois la mauvaise rputation de contribuer la
propagation d'informations personnelles sans votre autorisation, et ils sont peu appropris
pour le stockage des donnes mme les plus simples. La fonction LocalStorage de HTML5
offre une meilleure scurit et rend la programmation plus facile qu'avec les cookies.
ENREGISTRER DANS LE STOCKAGE LOCAL
PRPAREZ-VOUS. Pour dmontrer la capacit de JavaScript enregistrer des informations
sans cookies, procdez comme suit:
1. Crez le fichier L9-js10.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Utiliser un systme de stockage local</title>
<script type = "text/javascript">
/// Cette page montre un modle simple pour
/// enregistrer le niveau d'un joueur dans le stockage local.
function init() {
var message;
level_object = document.getElementById("level");
var welcome = document.getElementById("welcome");
// "localStorage" est un mot cl pour un navigateur prenant en charge
// HTML5. "localStorage.level" est
// un nom de variable choisi pour tre utilis par
// cette page spcifique.
var level = localStorage.level;
if (level == null || level == '') {
message = "C'est visiblement la premire fois
que vous jouez. Vous commencerez au niveau 1.";
level = 1;
} else {
message = "La dernire fois que vous avez jou, vous avez atteint
le niveau " + level +". Vous allez commencer l maintenant.";
}
welcome.innerHTML = message;
level_object.value = level;
}
function save_level() {
localStorage.level = level_object.value;
}
</script>
</head>
<body onload = "init();">
<h1>Utiliser un systme de stockage local</h1>
<p id = "welcome">Bienvenue.</p>
<form>
Vous pouvez mettre jour votre niveau tout moment. Il est
actuellement dfini sur
<input id = "level" type = "number" min = "1" max =
"100"
oninput = "save_level();" />.
</form>
</body>
</html>

Cration d'animations, utilisation de graphiques et accs aux donnes | 239





2. Vous devez obtenir les privilges d'utilisation d'un serveur Web de la part de votre
instructeur. Le stockage local ne peut tre activ que pour les pages Web accessibles
via le rseau, pas localement.
3. Tlchargez le fichier L9-js10.html sur le serveur Web l'aide d'un programme de
transfert de fichier, tel que dcrit par votre instructeur. Votre instructeur doit aussi
vous donner l'adresse Web du fichier.
4. Dans un navigateur Web, utilisez l'adresse Web pour accder au fichier L9-js10.html.
5. Notez le niveau auquel vous commencez, comme illustr dans la figure 9-12.

Figure9-12
L'interface initiale du
programme

6. Faites comme si vous aviez jou pendant un certain temps et atteint un niveau
diffrent. Entrez ce niveau dans la zone d'entre.
7. Fermez la fentre de l'application.
8. Ouvrez nouveau le fichier L9-js10.html. Voyez-vous comment l'application se
souvient de votre position d'une session de navigateur l'autre?
9. Fermez le fichier et tous les programmes ouverts ou toutes les fentres ouvertes.

Remarquez que la programmation du stockage local est bien plus succincte que les oprations
correspondantes avec les cookies.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:
H
 TML et CSS offrent plusieurs faons d'appliquer des animations rapides aux effets
courants. Toutefois, JavaScript est beaucoup plus souple et peut produire des
rsultats remarquables.
JavaScript est un langage de programmation puissant polyvalent. Si vous pouvez imaginer
une animation particulire, il y a probablement une faon de le crer en JavaScript.
Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique
sur un bouton ou qu'un autre vnement se produit. La mthode createElement
convient bien cette utilisation.
Si une application accessible depuis l'ordinateur expose des donnes l'utilisateur
final, il y a probablement un moyen pour que JavaScript puisse atteindre ces
donnes. L'un des rles les plus importants de JavaScript est de communiquer en
temps rel avec les sources de donnes distantes.
JavaScript est un langage de programmation gnraliste et peut donc communiquer
des informations structures beaucoup plus riches que les simples valeurs utilises
dans la majeure partie de cette leon.
JavaScript peut accder aux fichiers sur votre ordinateur local et, avec HTML5,
il est possible de valider le type de fichier avant de le charger. JavaScript fait du
chargement de fichiers un processus sans erreur plus interactif.
(suite)

240 | leon 9

L es utilisateurs veulent tre en mesure de parcourir votre site, mme en mode hors
connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache
diffre du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes
les pages Web visites, tandis qu'AppCache enregistre uniquement les fichiers
rpertoris dans le manifeste de cache.
En JavaScript, les donnes se prsentent de diffrentes faons. Les plus courantes
sont les chanes et les nombres. Parmi les autres types de donnes on trouve: un
tableau, une valeur boolenne, une valeur Null, un objet et une valeur indfinie.
Au fur et mesure que les utilisateurs renseignent un formulaire, JavaScript valide
instantanment les entres et propose d'autres solutions.
Les cookies contiennent traditionnellement des informations des fins de personnalisation
et pour des raisons pratiques. JavaScript peut crer et rcuprer des cookies.
La quantit d'informations pouvant tre stockes dans les cookies est limite et par
consquent les effets de programmation qui peuvent tre atteints sont galement
limits. Les cookies prsentent aussi une menace pour la confidentialit des
donnes. HTML5 propose la fonction de stockage local pour personnaliser la
programmation plus facilement et la rendre plus performante.

valuation

des connaissances
Complter lespace vide
Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. Une animation
reprsente l'affichage d'une squence d'images statiques un
rythme assez rapide pour crer l'illusion d'un mouvement.
2. Vous devez tracer un diagramme complexe dans le cadre d'un affichage enHTML5.
canvas
L'lment
est l'une de ces mthodes.
3. AvantHTML5, le moyen le plus courant de conserver des informations d'une
applicationWeb ct client, c'est--dire sur l'ordinateur de l'utilisateur, passait par
l'utilisation de cookies (variable. de formulaire cach hidden)
4. XmlHttpRequest permet d'utiliser JavaScript pour transmettre des donnes sous
forme de chanes de texte, mais pas d'objets, entre un client et un serveur.
5. La recursivit
s'appelle.

est une technique de programmation dans laquelle une fonction

6. L' analyse
est le terme gnralement utilis pour dcrire la vrification
d'informations complexes en lments constitutifs.
7. L'API upCache
permet d'enregistrer une copie des fichiers de votre site Web en
local sous une forme structure.
8. Les valeurs JavaScript prennent un aspect diffrent, appel types de donnes
,
reprsentant le plus souvent des chanes et des nombres.
9.

JSON
est un sous-ensemble de JavaScript qui permet d'changer des
objets JavaScript avec un serveur.

10. localStorage

est l'alternative aux cookies.

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Parmi les propositions suivantes, laquelle est la plus couramment utilise pour coder
en JavaScript un effet diffr?
a. sleep()
b. delay()
c. wait()
d. setTimeout()

Cration d'animations, utilisation de graphiques et accs aux donnes | 241

2. JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais
aussi des formes comme des botes et des cercles. La mthode que vous pouvez
utiliser pour afficher des graphiques avec JavaScript est:
a. createElement
b. move_paragraph
c. JSON
d. display
3. Quelles sont les deux constructions principales utilises pour tracer un objet l'aide
de l'lment canvas?
a. getElementById()
b. getCanvasContext
c. getElementByCanvas()
d. canvas.getContext
4. L'envoi et la rception de donnes dans JavaScript ncessitent un serveur Web
dynamique et:
a. une validation ct client
b. une programmation ct serveur
c. CSS
d. Aucune des rponses cidessus
5. Dans quel ensemble de mthodes l'lment canvas est-il gnr?
a. drawRect(), outlineRect(), eraseRect()
b. fillRect(), strokeRect(), clearRect()
c. beginPath(), fillPath(), endPath()
d. beginPath(), fillPath(), closePath()
6. Quelle API JSON permet de convertir un objet JavaScript en chanes de donnes pour
un change avec un serveur?
a. JSON.parsify
b. XMLHttpRequest
c. JSON.stringify
d. getObjectString
7. Quelle est la diffrence entre AppCache et le cache d'un navigateur?
a. AppCache enregistre des copies de pages Web.
b. Vous devez d'abord visiter une pageWeb pour qu'elle soit ajoute dans le cache.
c. AppCache n'enregistre que les fichiers rpertoris dans le manifeste du cache.
d. AppCache et le cache du navigateur sont la mme chose.
8. Parmi les propositions suivantes, laquelle n'est pas un type de donnes utilis par
JavaScript?
a. composite
b. chane
c. nombre
d. boolen
9. Parmi les propositions suivantes, laquelle prsente un risque li la confidentialit
des donnes?
a. AppCache
b. LocalStorage
c. cookies
d. animation
10. Quelle API permet d'utiliser des fichiers distants en mode dconnect?
a. XMLHttpRequest
b. AppCache
c. JSON.parse
d. JSON.stringify

242 | leon 9

Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettre F si elle est fausse.
VF 1.
JavaScript ne prend pas en charge la rcursivit.
VF 2.
Vous devez utiliser XMLHttpRequest pour crer des animations. pour se connecter un serveur
VF 3.
Il est possible d'crire du code JavaScript qui sera excut avant le chargement
de toutes les images.
VF 4.
Vous pouvez utiliser LocalStorage pour stocker les donnes personnelles d'un
utilisateur.
VF 5.
Une technique courante dans l'animation JavaScript consiste utiliser setTimeout
de manire rcursive.
valuation

des comptences
Scnario9-1: Prsentation des notions de base sur l'animation
Roan est assistant administratif pour un organisme but non lucratif qui publie une
encyclopdie sur les plantes sauvages. La personne charge du programme des bnvoles
a demand Roan s'il pouvait crer une animation graphique sur la page d'accueil pour
montrer en 5ou 6secondes la croissance d'une graine jusqu' ce qu'elle devienne une longue
herbe des prairies. Roan ne connat rien l'animation et vous demande un rsum succinct.

Scnario 9-2 : Cration d'une application pour dessiner un plan d'tage


d'entrept
Trudy est responsable d'entrept. Elle voudrait crer une application Web qui permet de
dessiner le croquis du plan d'tage de l'intrieur d'un entrept. Elle doit rapidement soumettre
une demande l'quipe de dveloppement, mais elle ne sait pas quelle technologie approprie
inclure dans sa description. Trudy vous demande votre avis. Que pouvez-vous lui dire?
valuation

de la matrise des concepts


Scnario 9-3 : Amlioration de l'application de dessin de l'entrept
Trudy a dcid de modifier sa demande pour l'quipe de dveloppement et souhaite
maintenant inclure un formulaire qui accepte les codes SKU des produits. Le serveur de
l'entrept comporte des photographies de marchandises, rfrences par code SKU, mais
aussi des informations sur l'emplacement dans l'entrept o se trouvent actuellement
ces articles. Trudy voudrait que le programme place une photo de l'article sur l'alle et
l'tagre o il se trouve actuellement. Brivement, comment le raliser? Elle a besoin
d'ajouter la description sa demande.

Scnario 9-4 : Rvision des documents en mode dconnect


Une application en ligne existante recueille et note les commentaires des valuateurs
sur diffrents postes budgtaires dans un processus extrmement structur: chaque poste
renvoie vers les dtails de la proposition, le personnel responsable, etc. L'application est une
russite. Les valuateurs se plaignent, cependant, du fait qu'elle ne peut tre utilise qu'en
ligne. Ils ne peuvent pas, par exemple, remplir les fiches d'valuation dans un avion et sans
connexion Internet. Ils proposent la possibilit de pouvoir tlcharger tous les documents
lis et remplir les feuilles de calcul avec leurs observations. Quelle est votre rponse?

Codage JavaScript pour


l'interface tactile, les
ressources des
priphriques et du
systme d'exploitation, etc.

LEON

10

M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Comptences/Concepts

Objectif de l'examen MTA

Numro de l'objectif de l'examen MTA

Rponse l'interface tactile

Rpondre l'interface tactile

4.5

Codage des API HTML5 supplmentaires

Coder des APIHTML5 supplmentaires

4.6

Accs aux ressources des priphriques


et du systme d'exploitation

Accder aux ressources des priphriques


et du systme d'exploitation

4.7

TERMES CLS
acclromtre

vnement tactile

API de fichier

indpendant de la plateforme

API de golocalisation

indpendant du priphrique

API Web Worker

interrogation

API WebSocket

liste tactile

blob

objet tactile

donnes civiques

stockage de session

donnes godsiques

stockage local

cran tactile capacitif

Web Hypertext Application Technology Working


Group (WHATWG)

cran tactile rsistif


vnement de mouvement

L'quipe de dveloppement de Malted Milk Media vous a demand de l'aider raliser le


projet d'application mobile Trusty Lawn Care. L'application doit inclure une interface
tactile, donc votre responsabilit consiste apprendre comment capturer les mouvements
et y rpondre. Vous devez galement acqurir de solides notions en matire de
golocalisation et de capacits matrielles telles que le GPS et l'acclromtre.
243

244 | Leon 10
Rponse

l'interface tactile

L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Comment les crans
tactiles rpondent-ils
l'entre utilisateur?
4.5
PRT POUR LA
CERTIFICATION
Quels mouvements
fournissent des donnes
sur les crans tactiles?
4.5

Un dispositif tactile interprte les mouvements des doigts sur un cran tactile, appels
mouvements et les convertit en instructions pour une application. De nombreux
mouvements ont des quivalents souris.
Les crans tactiles sont devenus la forme la plus populaire d'interface de smartphone et les
ordinateurs de bureau dots d'crans tactiles sont assez frquents. Un appareil tactile dispose d'un
cran spcialement dvelopp qui dtecte les donnes d'interaction tactile (appeles points), qui
commencent sous la forme de pression ou de signaux lectriques.
Il existe deux principaux types d'crans tactiles:
Un cran tactile rsistif est compos de plusieurs couches; la couche suprieure flchit
lorsque vous appuyez dessus et touche la couche situe dessous. Des capteurs dtectent la
pression, ce qui permet d'identifier la partie de l'cran sur laquelle l'utilisateur a appuy. Les
crans tactiles utiliss dans les hpitaux et les restaurants sont souvent de type rsistif.
Les crans tactiles capacitifs utilisent des lectrodes pour dtecter les objets qui touchent
l'cran. Comme l'objet doit possder des proprits conductrices, un doigt fonctionne, mais pas
un objet comme le stylet. La plupart des smartphones cran tactile et moniteurs d'ordinateurs
sont de type capacitif.
Un processeur d'cran tactile rassemble les donnes d'interaction tactile et les interprte comme des
mouvements. Selon le matriel impliqu, les donnes sont envoyes partir du processeur
directement l'application de l'utilisateur ou du processeur du systme d'exploitation l'application,
o l'application utilise les donnes pour effectuer des tches.
Un mouvement est une technique qui utilise un ou plusieurs doigts ou un dispositif de pointage comme
un stylet au-dessus d'un contrle ou d'un objet l'cran pour fournir des donnes une application
tactile. Un appui permet de slectionner un objet ou d'appuyer sur un bouton. Un balayage du doigt
permet de faire dfiler une srie de photos ou une liste de contacts l'cran. Une action pinchopen
permet d'augmenter la taille de l'affichage l'cran (effectuer un zoom avant). Microsoft dfinit les
mouvements comme indiqu dans le Tableau 10-1.

Tableau10-1
Prsentation des
mouvements tactiles

Mouvement

quivalent souris

Description

Appuyer

Clic gauche

Appuyer sur l'cran avec un doigt

Appuyer deux fois


Double-clic avec le bouton
Appuyer rapidement deux fois sur l'cran avec un
gauche doigt
Toucher effectu
N/A Not allowed
l'aide de deux doigts

Appuyer avec deux doigts sur l'cran simultanment

Appuyer et toucher

Clic droit

Maintenir un doigt appuy et taper avec un autre

Appuyer et maintenir

Clic droit Maintenir un doigt appuy sur l'cran, puis relcher

Slection/faire glisser

Faire glisser la souris (slection)

Panoramique inertiel

Dfilement Maintenir un doigt appuy sur l'cran, puis faire glisser


le doigt

Faire glisser

Dplacer vers l'arrire ou vers


l'avant, faire dfiler vers le
haut ou vers le bas

Faire glisser un doigt vers la gauche ou vers la droite

Appuyer sur l'cran avec un doigt, le dplacer dans


une direction quelconque, puis soulever le doigt pour
laisser dfiler

Rotation
N/A

Placer deux doigts sur un objet l'cran et les


dplacer dans un mouvement circulaire

Zoom

Pincer un objet vers l'intrieur ou l'extrieur

CTRL+molette de la souris
vers l'avant ou vers l'arrire

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 245

Vous utilisez la mthode addEventListener pour attacher un gestionnaire d'vnements un


lment HTML, qui peut tre un div, un lien ou tout ce que vous voulez. L'utilisation de la
mthode addEventListener vous permet de faire quelque chose d'utile quand un vnement
est dclench. Voici la syntaxe gnrale de la mthode addEventListener :
object.addEventListener(event, eventListenerFunction);

Par exemple, dans le code suivant pour un programme de zone de dessin, la fonction startup
est appele lors du chargement de la page Web. Le programme coute un utilisateur qui touche
l'cran (l'vnement touchstart), dplace un doigt (touchmove), et ainsi de suite:
function startup() {
var el = document.getElementsByTagName("cdraw")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
}

Examinons de plus prs la fonction handleStart. Elle est dclare dans le code suivant,
comme les autres fonctions sont dclares en JavaScript, ceci prs que la fonction
listener doit avoir un argument pour reprsenter l'vnement. Vous pouvez utiliser
n'importe quel identificateur comme argument d'vnement, mais les dveloppeurs
utilisent souvent la lettre e ou un identificateur commenant par la lettre e.
function handleStart(evt) {
evt.preventDefault();
var el = document.getElementsByTagName("cdraw")[0];
var context = el.getContext("2d");
var touches = evt.changedTouches;
for (var i=0; i<touches.length; i++) {
ongoingTouches.push(touches[i]);
var color = colorForTouch(touches[i]);
context.fillStyle = color;
context.fillRect(touches[i].pageX,
touches[i].pageY, 4, 4);
}
}

La mthode evt.preventDefault empche le navigateur de continuer traiter l'vnement tactile,


ce qui l'empche de dfiler dans cet exemple. Une fois le contexte obtenu (e1.getContext), la
liste des points de contact modifis est extraite de la proprit changedTouches de
l'vnement. Ensuite, le programme traite les lments de la liste tactile. PageX et pageY
fournissent les coordonnes X et Y du doigt.
Les vnements de mouvement sont dclenchs pour des mouvements plusieurs doigts.
Les vnements de mouvement principaux sont:
gesturestart : tout nouveau mouvement avec deux doigts dclenche l'vnement gesturestart.
gesturechange : lorsque deux doigts se dplacent sur l'cran, un vnement gesturechange
se produit.
gestureend : lorsque vous soulevez les deux doigts de l'cran, l'vnement gestureend
est dclench.
Les vnements de mouvement sont des types d'vnements tactiles, ils reoivent donc
des objets d'vnement qui contiennent des proprits tactiles. En outre, les vnements de
mouvement peuvent inclure les proprits suivantes:
scale : indique le degr de zoom d'un pincement deux doigts qui s'est produit. La valeur
dcimale de la proprit commence 1,0; elle est infrieure 1,0 lorsque les doigts se
rapprochent l'un de l'autre et elle est suprieure 1,0 quand les doigts s'cartent.
pinch / sprad

246 | Leon 10

Maintenant que vous comprenez les diffrents types d'entres tactiles, nous allons voir
comment elles sont captures et utilises dans des applications.

Capture et rponse aux mouvements


Les principaux vnements tactiles sont touchstart, touchmove, touchend et touchcancel. Les
principaux vnements de mouvements sont gesturestart, gesturechange et gesturechange.
L'action d'une application en rponse un mouvement s'appelle un vnement tactile.
Vous pouvez utiliser JavaScript pour crer des vnements tactiles dans les applications
tactiles. Les dveloppeurs peuvent avoir recours un grand nombre d'interfaces de
programmation d'application (API) qui utilisent des donnes d'cran tactile.
Les principaux vnements tactiles JavaScript sont:
touchstart : chaque fois qu'un doigt touche l'cran, un vnement touchstart est dclench.
touchmove : lorsqu'un doigt se dplace sur la surface de l'cran, un vnement touchmove
est dclench pour suivre le mouvement des doigts.
touchend : lorsque vous soulevez le doigt de l'cran, l'vnement touchend est dclench.
touchcancel : l'vnement touchcancel est dclench lorsque le priphrique lance une
autre application.

REMARQUE

PRT POUR LA
CERTIFICATION
Quels sont les quatre
principaux vnements
tactiles JavaScript?
4.5

L'vnement touchcancel permet au navigateur d'assurer le suivi des objets tactiles actifs
dans la liste tactile. Il peut galement rinitialiser les variables utilises au cours des
vnements touchstart et touchmove. Toutefois, les dveloppeurs utilisent rarement
l'vnement touchcancel. Vous ne le rencontrerez pas trs souvent dans les scripts.
En JavaScript, l'objet tactile dtecte les entres sur des priphriques interaction tactile.
Les objets tactiles sont rfrencs dans la liste tactile, qui inclut tous les points de contact
sur un cran tactile. Un appui simple correspond une entre dans la liste tactile, alors
qu'un mouvement trois doigts correspond un total de trois entres. Les objets tactiles
sont en lecture seule et ont les proprits suivantes:
identifier : un identificateur unique pour l'interaction tactile
target : l'lment HTML affect par l'interaction tactile
clientx : position horizontale, par rapport la fentre du navigateur
clienty : position verticale, par rapport la fentre du navigateur
pagex : position horizontale, par rapport au document HTML
pagey : position verticale, par rapport au document HTML
screenx : position horizontale, par rapport l'cran
screeny : position verticale, par rapport l'cran
Chaque interaction tactile comprend trois listes tactiles diffrentes:
touches : liste de tous les points de contact actuellement activs sur l'cran
targetTouches : liste des points de contact actuellement activs l'cran et dont
l'vnement touchstart a t dclench sur le mme nud ( l'intrieur du mme
lment cible comme lment cible actuel)
changedTouches : liste des points de contact qui ont dclench l'vnement actuel; par
exemple, dans un vnement touchend, le doigt a t retir

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 247

rotation : indique le degr de rotation avec deux doigts qui s'est produit. La valeur de la
rotation est mesure en degrs; les valeurs positives suivent le sens des aiguilles d'une
montre et les valeurs ngatives suivent le sens inverse des aiguilles d'une montre.
Vous pouvez combiner des vnements de mouvement avec les effets visuels CSS pour
permettre la mise l'chelle et la rotation. Par exemple, le code suivant implmente le
gestionnaire d'vnements gesturechange avec la mise l'chelle et la rotation:
document.addEventListener('gesturechange',
function(event) {
event.preventDefault();
console.log("Scale: " + event.scale + ",
Rotation: " + event.rotation);
}, false);

Une fonction listener implicite est cre dans cet exemple. Le gestionnaire d'vnements
passe l'objet d'vnement comme argument implicite appel vnement pour obtenir
des informations spcifiques sur l'vnement.
Les crans qui peuvent afficher en mode portrait ou paysage dclenchent un vnement
orientationchanged lorsque l'utilisateur modifie l'orientation de l'cran. Vous pouvez utiliser
orientationchanged pour tester la rotation de l'appareil. Chaque vnement possde une
valeur numrique qui reprsente les valeurs d'chelle et de rotation.

DTECTION DE LA FONCTIONNALIT D'CRAN TACTILE


PRPAREZ-VOUS. Pour vrifier si l'appareil de l'utilisateur est tactile, procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier nomm


L10-touch.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Dtecter l'cran tactile</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: dodgerblue;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var canvas = document.getElementById("canvas");
if ("ontouchstart" in document.documentElement) {
canvas.addEventListener("touchstart", detect, false);
}

248 | Leon 10
else {
canvas.addEventListener("mousedown", detect, false);
}
}
function detect() {
if ("ontouchstart" in document.documentElement) {
alert("Appareil cran tactile dtect!");
}
else {
alert("Aucun appareil cran tactile dtect!");
}
}
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<br />
<p>Cliquez sur la zone pour commencer la dtection d'cran tactile.</p>
</body>
</html>

Le code suivant dessine une zone de toile sur l'cran, suivie d'une ligne de texte indiquant
de cliquer sur la zone pour commencer la dtection d'cran tactile. La fonction initial affecte
l'lment canvas, puis le dtecteur d'vnements coute un vnement tactile ou un
clicde souris. Si l'utilisateur dispose d'un cran tactile et touche la case, le programme
affiche un message qui indique qu' indique q'un appareil tactile a t dtect. Si un clic de
souris est dtect, un message indiquant qu'aucun cran tactile n'a t dtect s'affiche.

2. Ouvrez L10-touch.html dans un navigateur Web. L'affichage devrait tre semblable


l'illustration de la figure10-1.

3. Cliquez sur la bote bleue. Si vous travaillez sur un ordinateur avec un cran ordinaire,
le message d'alerte illustr dans la figure10-2 s'affiche. Dans le cas contraire, un
message d'alerte indique qu'un appareil cran tactile a t dtect.

Figure10-1
L'interface du programme de
dtection d'cran tactile

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 249
Figure10-2
Le message d'alerte indique
qu'aucun cran tactile n'est
prsent

4. Cliquez sur OK pour fermer le message d'alerte.


5. Fermez le fichier et le navigateur Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Le spcifications du W3C sur la version 2 des vnements tactiles sont disponibles sur la page
Version1 des vnements tactiles l'adresse http://www.w3.org/TR/touch-events/.

Codage

des API HTML5 supplmentaires

L'ESSENTIEL

La collaboration WHATWG (Web Hypertext Application Technology Working Group)


gre une spcification HTML en cours de dveloppement intgrant les API qui ne
faisaient pas partie l'origine de la spcification HTML5. Il s'agit notamment des API de
golocalisation, Web Worker, WebSockets et de fichier.
Comme vous avez appris tout au long de ce manuel, de nombreuses API HTML5 sont
disponibles et fournissent des fonctionnalits nouvelles et amliores tout en facilitant le
dveloppement de documents HTML. Ce qui n'a pas t spcifiquement soulign est qu'il
existe en fait deux versions de la spcification HTML5: une publie par le W3C et l'autre
par le WHATWG.

PRT POUR LA
CERTIFICATION
Qu'est-ce que
WHATWG?
4.6

La collaboration WHATWG (Web Hypertext Application Technology Working Group)


a t forme par Apple, Mozilla Foundation et Opera Software pour dfinir et documenter
la spcification HTML5. Le site Web du WHATWG l'adresse http://developers.whatwg.
org/ est une bonne ressource pour en savoir plus sur les nouveaux lments de HTML5 et
comment les utiliser.
La spcification HTML en cours de dveloppement gre par la collaboration WHATWG
contient des API supplmentaires diffrentes de celles dcrites dans la spcification
HTML5 du W3C originale. Les API applicables abordes dans les sections suivantes sont
les API de golocalisation, de fichier, de traitements Web et WebSockets.

Codage pour capturer la localisation


L'API de golocalisation obtient les coordonnes gographiques de l'utilisateur
(latitude et longitude). Elle peut galement afficher une carte avec un marqueur
indiquant l'emplacement de l'utilisateur selon ses coordonnes.

250 | Leon 10

L'API de golocalisation dfinit une interface qui fournit la localisation d'un priphrique,
gnralement l'aide des coordonnes de latitude et de longitude. L'API soumet la latitude
et la longitude JavaScript dans une pageWeb l'aide de l'objet de golocalisation.
Les deux fonctions principales de golocalisation sont les suivantes:
PRT POUR LA
CERTIFICATION
Quelle fonction
JavaScript obtient la
position gographique
actuelle d'un appareil?
4.6

getCurrentPosition : obtient la position gographique actuelle de l'appareil en utilisant la


mthode getCurrentPosition.
watchPosition : observe les modifications de la position de l'appareil dans le temps en
utilisant la mthode watchPosition et gnre un vnement si un changement se produit.
L'appel de clearWatch arrte la surveillance.
Voici un exemple simple d'un appel de getCurrentPosition. La fonction de rappel showmap
reoit les coordonnes de latitude et de longitude:
navigator.geolocation.getCurrentPosition(showmap);
function showmap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Code pour afficher une carte
}

Vous pouvez prsenter aux utilisateurs les donnes d'emplacement de deux manires:
godsique et civile. Les donnes godsiques fournissent des donnes d'emplacement
brutes, telles que la longitude et latitude ou en mtres. Les donnes civiles reprsentent les
donnes d'emplacement qui sont plus intelligibles pour l'homme, comme une carte ou une
adresse, par exemple637Park Street.
L'API de golocalisation retourne des donnes godsiques partir des fonctions, que
vous pouvez prsenter dans sa forme brute ou combiner avec un service de cartographie
en ligne, comme Bing Maps pour afficher une carte avec un pointeur indiquant les
coordonnes de l'utilisateur.
Sachez que la confidentialit est une proccupation majeure pour de nombreux utilisateurs.
Par consquent, l'API de golocalisation permet aux utilisateurs de masquer leur emplacement
et de nombreuses implmentations demandent l'utilisateur la permission de retourner ses
coordonnes d'emplacement.
La golocalisation est conue principalement pour les smartphones et autres appareils
mobiles et ne fonctionne pas toujours pour les ordinateurs de bureau. Lorsqu'un appareil
n'a aucun moyen de se localiser, l'API gnre une erreur de position non disponible.
CRATION D'UNE APPLICATION DE GOLOCALISATION
PRPAREZ-VOUS. Pour crer une application de golocalisation qui affiche la latitude et
la longitude actuelles de l'utilisateur, procdez comme suit:

1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier nomm


L10-geolocation.html avec le contenu suivant:
<!doctype html>
<html>
<head>
<title>Exemple de golocalisation</title>
<meta charset="utf-8" />
<script>
var messageDiv = document.getElementById('message');
function initLocation() {

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 251

var geolocation = navigator.geolocation;


if (geolocation) {
try {
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback
);
} catch (err) {
messageDiv.innerHTML = 'Error';
}
} else {
messageDiv.innerHTML = 'Votre navigateur ne prend pas en charge
la golocalisation.';
}
}
function successCallback(location) {
message.innerHTML = "<p>Latitude: " +
location.coords.latitude + "</p>";
message.innerHTML += "<p>Longitude: " +
location.coords.longitude + "</p>";
}
function errorCallback() {
messageDiv.innerHTML = 'Une erreur s'est produite
lors de la recherche de votre position';
}
</script>
</head>
<body onload="initLocation()">
<div id="message">Recherche de l'emplacement</div>
</body>
</html>

Ce code est un bon test de l'API de golocalisation HTML5. Voici comment le code
fonctionne: navigator.geolocation.getCurrentPosition demande une position, qui interroge la
fonction GPS de l'appareil matriel ou un routeur de l'ordinateur pour les informations
de localisation. En cas de succs, la fonction successCallback affiche les coordonnes de
latitude et de longitude l'cran. Si l'information n'est pas disponible, un message
indique qu'une erreur s'est produite lors de la recherche de votre position.
2. Ouvrez L10-geolocation.html dans un navigateur Web. Si le navigateur prend en
charge la golocalisation, vous devriez tre invit autoriser le navigateur suivre
votre emplacement physique, tel qu'illustr la figure10-3. Cliquez sur Autoriser une
fois ou une commande similaire, selon le navigateur que vous utilisez.

252 | Leon 10
Figure10-3
Le navigateur vous demande
la permission de suivre votre
emplacement physique

3. Vos coordonnes s'affichent, comme illustr dans la figure10-4.

4. Fermez le fichier et le navigateur Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure10-4
L'affichage des coordonnes
l'aide de l'application de
golocalisation

PLUS DINFORMATIONS
La page Web de Microsoft Golocalisation l'adresse http://msdn.microsoft.com/fr-fr/library/
gg589499(v=vs.85).aspx fournit des liens sur la cration d'une page Web prenant en charge la localisation
et des didacticiels Internet Explorer. Vous devriez galement consulter l'article 12ides de golocalisation
HTML5 dans MSDN Magazine l'adresse http://msdn.microsoft.com/en-us/magazine/hh563893.aspx.

Prsentation des traitements Web

PRT POUR LA
CERTIFICATION
Quels types
d'applications utilisent
des traitements Web?
4.6

Les traitements Web sont des scripts qui s'excutent en arrire-plan, qui effectuent
des calculs ou d'autres actions rendant l'interface utilisateur plus ractive.
Les traitements Web dsignent une API qui permet d'excuter des scripts en arrire-plan
comme threads parallles. Ces threads d'arrire-plan peuvent se connecter plusieurs
pagesWeb, rcuprer des donnes en temps rel, comme les mises jour d'actions
boursires, effectuer des demandes de rseau ou accder l'espace de stockage local,

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 253

pendant que le documentHTML principal rpond la demande de l'utilisateur


matrialise par un appui, un dfilement et une saisie. Les traitements Web aident
maintenir la ractivit de l'interface utilisateur.
Les objets Web Workers sont excuts dans un seul et mme thread. Ils n'agissent pas
directement sur le documentHTML principal ou le modleDOM. Cela signifie que vous
n'utilisez pas le document ou getElementById dans votre script. (Vous pouvez utiliser
setTimeout, setIntervalet XMLHttpRequest.) En revanche, les traitements Web transmettent les
informations au moyen de messages, en excutant le code d'un fichier JavaScript distinct
du documentHTML principal.
Pour utiliser un traitement Web, vous devez d'abord crer un objet Worker dans votre
document HTML principal, comme suit:
var worker = new Worker('worker.js');

Lorsque le navigateur interprte cette ligne, il cre un thread de travail, puis il commence
par la mthode suivante:
worker.postMessage();

La mthode postMessage() accepte une chane ou un objet JSON comme argument. Tous les
navigateurs prennent en charge la transmission de messages de type chane, mais seules les
dernires versions des principaux navigateurs prennent en charge la transmission d'objets JSON.
En guise de simple exemple de transmission de message par un traitement Web, voici un
script dans le document HTML principal:
var worker = new Worker("doWork.js");
// Consultez les messages du traitement
worker.onmessage = function(e){
// Le message du traitement
e.data
};
worker.postMessage("start");

Le code suivant peut apparatre dans le fichier doWork.js:


onmessage = function(e){
if ( e.data === "start" ) {
// Effectuer une action ou un calcul
done()
}
};
function done(){
// Envoyer les rsultats au document principal
postMessage(Bonjour, j'ai fini);
}

Au lieu d'utiliser le gestionnaire d'vnements onmessage, vous pouvez utiliser


addEventListener() dans le document HTML principal, comme ceci:
worker.addEventListener('message', function(e) {

254 | Leon 10

CRER ET EXCUTER UN TRAITEMENT WEB


PRPAREZ-VOUS. Pour crer et excuter un traitement Web, procdez comme suit:
1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier nomm
L10-worker.html avec le contenu suivant:
<!doctype html>
<html lang="fr">
<head>
<script>
var worker = new Worker('doWork.js');
// Envoyer un message pour commencer le travail et lui transmettre une
variable
var info = 'Web Workers';
worker.postMessage(info);
// Recevoir un message du traitement
worker.onmessage = function (event) {
// Effectuer une action
alert(event.data);
};
</script>
<title>Exemples de traitements Web</title>
</head>
<body>
</body>
</html>

2. Crez un fichier JavaScript nomm doWork.js dans le mme dossier que worker.html,
avec le contenu suivant:
onmessage = function(event) {
var info = event.data;
var result = 'Hello ' + info + ' everywhere';
postMessage(result);
};

Figure10-5
Le rsultat de l'excution
d'un traitement Web

3. Ouvrez L10-worker.html dans un navigateur Web. Le message d'alerte doit afficher,


comme illustr dans la figure10-5.

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc.|255

4. Cliquez sur OK pour accepter les paramtres et fermer le message d'alerte.


5. Fermez les fichiers et le navigateur Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

Prsentation des WebSockets


L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un
serveur Web et d'changer du texte et des fichiers binaires. Les WebSockets permettent
de rduire le volume de traitement ncessaire pour les communications en temps rel.
WebSocket est une API qui offre un mode de communication en duplex intgral
(communication simultane dans les deux sens), l'aide d'un seul socket sur Internet. Les
dveloppeurs utilisent les WebSockets principalement pour des applications Web en temps
rel, comme la messagerie instantane, les jeux en ligne multijoueur et les cotations boursires.
Pour comprendre la puissance des WebSockets, vous avez besoin d'un petit historique de
ce qui les a prcds. l'origine, lorsqu'un utilisateur entrait une URL dans un navigateur
Web ou cliquait sur un lien sur une page Web, le navigateur contactait le serveur Web
appropri pour la page. Chaque fois que l'utilisateur souhaitait mettre jour ou actualiser
quelque chose sur la page, le navigateur rcuprait une toute nouvelle page du serveur
Web. Vous pourriez voir encore cela lorsque vous cliquez dans une galerie de photos.
Chaque fois que vous cliquez sur pour une nouvelle photo, la page s'actualise et vous
devez parfois revenir la galerie.
Des technologies telles qu'AJAX ont permis d'actualiser seulement une partie d'une page Web.
Comet et d'autres technologies apparentes de type push ont adopt l'interrogation,
processus dans lequel un navigateur contacte un serveur Web rgulirement (parfois en
permanence) pour vrifier si de nouvelles informations sont disponibles pour tre prsentes
l'utilisateur. Le problme de l'interrogation est que beaucoup de demandes sont soumises au
serveur pour rcuprer les nouvelles donnes, ce qui peut avoir un impact ngatif sur les
performances.
PRT POUR LA
CERTIFICATION
Comment les
WebSockets rduisentils les problmes de
performances associs
aux applications en
temps rel?
4.6

La technologie WebSocket cre une connexion permanente entre un client et un serveur


Web, de sorte que l'un ou l'autre peut envoyer des donnes l'autre tout moment. La
connexion permanente rduit considrablement le volume de traitement ncessaire pour le
canal de communication.
Pour tablir une connexion WebSocket, le client et le serveur remplacent le protocole
HTTP par le protocole WebSocket (WS) au cours de leur connexion initiale. Une fois
qu'une connexion a t tablie, le client et le serveur peuvent changer des fichiers texte et
binaires en mode duplex intgral.
Voici les trois vnements principaux associs aux communicationsWebSocket:
onopen: quand un socket s'ouvre
onmessage: quand un message est reu du serveur Web
onclose: quand un socket ferme
Vous verrez chacun de ces vnements dans les extraits de code dans cette section. Tout
d'abord, tudions le code JavaScript qui ouvre une connexion WebSocket:
var host = 'ws://example.com';
le serveur
Notez l'utilisation de ws au lieu de http dans l'URL. Vous pouvez galement utiliser wss pour

les connexions WebSocket scurises, comme https pour les connexions HTTP scurises.

Une fois la connexion Internet initialise, vous devez la tester afin de vous assurer qu'elle
a russi. Pour ce faire, vous pouvez utiliser le gestionnaire d'vnements onopen afin de
savoir quand la connexion est ouverte. Voici un exemple qui affiche un message d'alerte
lorsque le socket s'ouvre:
socket.onopen = function(){
alert("Socket ouver");
}

256|Leon 10

Voici un autre exemple de onopen qui affiche un message :


socket.onopen = function (openEvent) {
document.getElementById("serverStatus").innerHTML =
'Socket ouver';
};

Maintenant, vous tes prt envoyer et recevoir des donnes. Pour envoyer des messages
textuels au serveur, utilisez la mthodesend ('message') sur l'objet de connexion. Code pour
envoyer un message textuel:
socket.send('message');

Un moyen simple d'envoyer des donnes binaires est d'utiliser un objet Blob (binary large
object). Un blob est tout simplement un type de donnes qui peut stocker des donnes
binaires, comme les images ou les fichiers multimdias. Pour envoyer un fichier comme
un objet Blob, vous pouvez utiliser ce code:
var file =
document.querySelector('input[type="file"]').files[0];
socket.send(file);

Pour recevoir des messages du serveur, vous pouvez utiliser le rappel onmessage :
socket.onmessage = function(msg){
alert(msg); //Reu!
}

Enfin, pour fermer une connexion, utilisez le gestionnaire d'vnements onclose , comme ceci :
socket.onclose = function() {
alert("Connexion ferme.");
};

La spcification de l'API WebSockets est toujours l'tat d'bauche au moment de la


rdaction de ce document et WebSockets n'est pas pris en charge par tous les navigateurs
Web. Pour avoir une ide de l'utilisation de WebSockets, effectuez l'exercice suivant.
CRATION D'UN WEBSOCKET POUR TESTER LA COMPATIBILIT DU NAVIGATEUR
PRPAREZ-VOUS. Pour crer un WebSocket qui vrifie si votre navigateur prend en charge
les WebSockets, procdez comme suit :

1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier nomm


L10-WebSocket.html avec le contenu suivant :
<!doctype html>
<html>
<head>
<script type="text/javascript">
fonction WebSocketTest() {
if ("WebSocket" dans la fentre) {
alert("Votre navigateur prend en charge
WebSockets.");
// Ouvrir un WebSocket
var socket = new
WebSocket("ws://localhost:9998/echo");
socket.onopen = function () {
// Connect, envoyer des donnes
socket.send("Connect");
alert("Connect.");
};

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 257
socket.onmessage = function (e) {
var received_msg = e.data;
alert("Message reu.");
};
socket.onclose = function () {
// WebSocket ferm
alert("Connexion ferme.");
};
}
else {
// Navigateur ne prend pas en charge les WebSockets
alert("Votre navigateur ne supporte pas les WebSockets.");
}
}
</script>
</head>
<body>
<div>
<a href="javascript:WebSocketTest()">Cliquez pour excuter la
dmo WebSocket</a>
</div>
</body>
</html>

2. Ouvrez L10-WebSocket.html dans un navigateur Web.


3. Suivez les invites affiches par le programme. Si votre navigateur prend en charge les
WebSockets, le premier message d'alerte qui s'affiche est illustr dans la figure10-6.

4. Cliquez sur OK pour accepter les paramtres et fermer la bote.


5. Un second message d'alerte devrait apparatre, indiquant que la connexion est ferme,
comme illustr dans la figure10-7. Cliquez sur OK.

Figure10-6
Un message d'alerte
confirme que votre
navigateur excute
WebSockets

258|Leon 10
Figure10-7
Un message d'alerte
confirme que la connexion
est ferme

6. Fermez le fichier et le navigateur Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

PLUS DINFORMATIONS
Pour en savoir plus sur les WebSockets, visitez la page Web WebSockets de Microsoft l'adresse
http://msdn.microsoft.com/fr-fr/library/ie/hh673567(v=vs.85).aspx.

Utilisation de l'API de fichier pour les tlchargements de fichiers


Vous pouvez utiliser l'API de fichier pour tlcharger un ou plusieurs fichiers partir d'un
disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez
galement la possibilit d'afficher des fichiers image tlchargs dans une application Web.
L'API de fichier permet un navigateur ou une application de tlcharger des fichiers
dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in. Par exemple,
l'aide de l'API de fichier, vous pouvez faire en sorte qu'une bote de dialogue Ouvrir
s'affiche et permette l'utilisateur de slectionner un fichier image. Lorsque l'utilisateur
clique sur OK, une miniature du fichier image s'affiche dans l'application Web. Les
dveloppeurs emploient l'API de fichier dans les jeux et les applications qui utilisent des
fichiers de multimdias, dans les clients de messagerie lectronique hors ligne, diteurs de
photos et lecteurs vido.

PRT POUR LA
CERTIFICATION
Quel lment utilisez-vous
pour charger un fichier
l'aide de l'API de
fichier?
4.6

L'API de fichier utilise plusieurs interfaces pour accder des fichiers de stockage local.
Ces interfaces incluent notamment:
File: inclut des attributs d'informations en lecture seule au sujet d'un fichier individuel,
par exemple son nom et type de support, et l'associe au fichier comme uneURL
FileList: une squence d'objets File de type tableau; comprend le glisser-dposer d'un
dossier de fichiers depuis l'espace de stockage local
Blob: fournit un accs aux donnes binaires brutes
FileReader: fournit des mthodes pour lire et afficher un fichier
Un moyen facile de charger un fichier consiste utiliser l'lment d'entre type="file" .
L'utilisation de l'lment d'entre type="file" retourne la liste des objets File slectionns en
tant que FileList. Le code pourrait ressembler ceci:
<input type="file" id="input" onchange="handleFiles(this.files)">

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 259

Pour permettre l'utilisateur de charger plusieurs fichiers en mme temps, ajoutez


multiple avant onchange, comme suit :
<input type="file" id="input" multiple onchange="handleFiles(this.files)">

VRIFICATION DE LA COMPATIBILIT DES NAVIGATEURS AVEC L'API DE FICHIER


PRPAREZ-VOUS. Pour vrifier si les principaux navigateurs sont compatibles avec l'API
de fichier, procdez comme suit :
1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier HTML
avec le contenu suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Vrification de la prise en charge de l'API de fichier par le navigateur</title>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert('Hourra! Ce navigateur prend en charge les API de fichier.');
} else {
alert('Ce navigateur ne prend pas entirement en charge les API de fichier.');
}
</script>
</head>
<body>
</body>
</html>

L'instruction if vrifie si les API de fichier, FileReader, FileList et Blob sont prises en
charge. Si les API sont prises en charge, le message Hourra s'affiche. Sinon le second
message s'affiche.
2. Enregistrer les fichiers sous L10-FileAPI-checkBrowser.html et ouvrez-les dans chacun
des principaux navigateurs Web. L'cran illustr dans la figure10-8 s'affiche lorsque
les API de fichier ne sont pas prises en charge.

Figure10-8
Message indiquant que les
API de fichier ne sont pas
prises en charge

3. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'dition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.

260 | Leon 10
Accs

aux ressources des priphriques et du systme d'exploitation


L'ESSENTIEL

PRT POUR LA
CERTIFICATION
Quel environnement de
systme d'exploitation
est responsable
de l'accs aux
priphriques, stockage
local, etc.?
4.7

L'environnement d'excution de Windows permet aux dveloppeurs d'accder aux


ressources en mmoire, mais aussi au matriel l'aide des API.
Comme vous l'avez appris dans la leon1, Windows Runtime (WinRT) est l'environnement
de systme d'exploitation responsable de l'accs aux priphriques, multimdia, rseau,
stockage local et distant et d'autres lments. Il s'agit de l'environnement dans lequel les
dveloppeurs testent leurs applications et o les utilisateurs excutent celles-ci. Un
dveloppeur peut utiliser des API et l'environnement d'excution pour demander l'accs aux
priphriques utilisateur et la mmoire dans une application.
Les sections suivantes vous guident dans l'accs aux ressources en mmoire et l'accs
l'appareil et au systme d'exploitation, qui sont des fonctions de WinRT.

PLUS DINFORMATIONS
Une liste de bibliothques Windows Runtime et Windows pour les API JavaScript est disponible
l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/br211377.aspx.

Accs aux ressources en mmoire


L'API Web Storage inclut le stockage local (pour les donnes persistantes) et le
stockage de session (pour les donnes temporaires).
Cette API offre une mthode ct client permettant d'enregistrer les donnes de session en
local dans le navigateur ou dans la mmoire du priphrique. La mthode localStorage
permet aux utilisateurs d'enregistrer des volumes de donnes plus importants entre deux
sessions (donnes persistantes), tandis que la mthode sessionStorage conserve les donnes
d'une seule session uniquement (jusqu' la fermeture du navigateur). Les donnes sont
stockes sous forme de paires cl/valeur pour les deux types de stockage Web.
localStorage

Le stockage local concerne les donnes persistantes et s'avre utile pour les listes de tches
en ligne, les listes de contacts, les calendriers et les articles de panier enregistrs. Il est
important que ces informations soient disponibles pour l'utilisateur aprs la fermeture du
navigateur et ultrieurement lorsqu'il ouvrira de nouveau le navigateur. Les informations
sont conserves dans une mmoire persistante des applications Web et des priphriques
mobiles. Le stockage de session concerne les donnes temporaires qui sont conserves
pour une seule session, jusqu' la fermeture du navigateur. Toutes les donnes d'une
session sont enregistres dans le stockage de session, puis effaces lorsque vous fermez
l'onglet ou la fentre du navigateur. Un programme de recherche des codes postaux illustre
parfaitement l'utilisation du stockage de session.
En JavaScript, vous utilisez les objets localStorage et sessionStorage avec les mthodes suivantes
pour grer les paires cl/valeur :
setItem(key,value): ajoute une paire cl/valeur l'objet de stockage
getItem(key): rcupre la valeur d'une cl spcifique
removeItem(key): supprime la paire cl/valeur de l'objet de stockage
clear(): supprime toutes les paires cl/valeur de l'objet de stockage
Voici le code gnrique permettant d'ajouter une paire cl/valeur un objet sessionStorage :
sessionStorage.setItem('key', 'value');
var myVar = sessionStorage.getItem('key');

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 261
PRT POUR LA
CERTIFICATION
Quelle mthode
JavaScript utilisez-vous
pour ajouter une paire
cl/valeur un objet
sessionStorage ou
localStorage object?
4.7

Voici le code gnrique pour le stockage local:


localStorage.setItem('key', 'value');
var myVar = localStorage.getItem('key');

Les mthodes getItem() et removeItem() utilisent la mme syntaxe. L'utilisation de


sessionStorage.clear() permet de tout supprimer de la liste.

UTILISATION DE L'OBJET LOCALSTORAGE


PRPAREZ-VOUS. Pour enregistrer une valeur dans le stockage local, procdez comme suit :
1. Dans un outil d'dition ou de dveloppement d'applications, crez un fichier nomm
L10-localStorage.html avec le contenu suivant :
<!doctype>
<html>
<head>
<title>Exemple de localStorage</title>
<script type="text/javascript">
function load() {
var value = localStorage.getItem("myKey");
if (!value) {
alert("lment introuvable, ajout localStorage");
localStorage.setItem("myKey", "myValue");
}
else {
alert(value + " trouve!");
}
}
</script>
</head>
<body onload="load()">
</body>
</html>

Figure10-9
Le premier message d'alerte
indique que la valeur est
ajoute localStorage

2. Ouvrez L10-localStorage.html dans un navigateur Web. Parce que la valeur "myValue"


vient d'tre transmise et que la session est en cours, vous devriez recevoir un message
d'alerte semblable dans la figure10-9. Cliquez sur OK pour accepter les paramtres et
fermer le message d'alerte.

262 | Leon 10

3. Fermez le navigateur Web, puis rouvrez L10-localStorage.html. Maintenant vous devriez


voir le message d'alerte illustr dans la figure10-10. La valeur a t enregistre dans le
stockage local et a persist entre les sessions du navigateur.

4. Fermez le navigateur Web.


5. Dans le document HTML, remplacez chaque instance de localStorage par sessionStorage.
6. Enregistrez le fichier sous L10-sessionStorage.html et ouvrez-le dans un navigateur
Web. Notez ce qui s'affiche dans le message d'alerte.
7. Fermez le navigateur Web, puis rouvrez L10-sessionStorage.html.
8. Le message d'alerte devrait tre identique et indiquer que la valeur n'a pas t
trouve. C'est parce que vous avez ferm le navigateur Web, ce qui a supprim la
valeur de la mmoire de session.
9. Appuyez sur Ctrl+R ou cliquez sur le bouton Actualiser de votre navigateur. Un message
d'alerte s'affiche, confirmant que la valeur a t trouve.
10. Fermez le fichier et le navigateur Web, mais laissez l'outil d'dition ouvert si vous envisagez
d'effectuer l'exercice suivant au cours de cette session.

Figure10-10
Le deuxime message
d'alerte confirme que la
valeur a t enregistre

PLUS DINFORMATIONS
La page Web de Microsoft Web Storage HTML5 l'adresse http://bit.ly/JeXlJU fournit l'API pour le
stockage persistant des donnes de la paire cl/valeur.

Accs aux capacits matrielles


Les applications indpendantes de la plate-forme s'excutent sur diffrents systmes
d'exploitation de bureau et mobiles et les applications indpendantes du priphrique
sont indpendantes de l'appareil. JavaScript vous permet d'accder aux API Windows
Runtime pour les priphriques matriels.
HTML5 est considr comme indpendant de la plateforme. Cela signifie que la famille
de technologies HTML5 vous permet de crer des pages Web et des applications qui
s'excutent sur diffrents systmes d'exploitation de priphriques mobiles et de bureau, tels
que Microsoft Windows, Internet Explorer et Windows Phone. Vous pouvez galement les
excuter sous Mac OS X, Android, iOS et Blackberry OS. Parce que HTML5 est construit
sur un standard ouvert, les utilisateurs d'applications HTML5 n'ont pas tlcharger un
plug-in ou utiliser des dispositifs dots de la prise en charge des plug-in. Au lieu de cela,

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc.|263

vous pouvez utiliser n'importe quel navigateur Web, que ce soit sur votre PC ou votre
appareil mobile et obtenir la mme exprience Web riche.
En outre, un programme ou une interface qui excute un logiciel produisant des rsultats
semblables sur diffrents priphriques est indpendant du priphrique. Avec HTML5,
CSS et JavaScript, vous pouvez facilement crer des applications indpendantes du
priphrique. Les applications indpendantes du priphrique vous permettent d'accder
des capacits matrielles telles que le GPS, l'acclromtre et l'appareil photo.

PRT POUR LA
CERTIFICATION
Que signifie indpendant
du priphrique?
4.7

En rsum, JavaScript vous permet d'accder aux API Windows Runtime pour les
priphriques matriels.

PRSENTATION DU GPS (GLOBAL POSITIONING SYSTEM)


Le matriel de GPS (Global positioning system), gnralement une puce ou une carte
de circuit imprim, de rception qui communique avec les satellites pour fournir
l'emplacement prcis d'un priphrique partir des coordonnes de longitude et de latitude.
Les tlphones les plus modernes sont maintenant dots de GPS, tout comme les ordinateurs
portables disposent du WiFi et/ou d'une connexion cellulaire haut dbit.
L'API de golocalisation que vous avez dcouverte prcdemment dans la leon utilise la
puce GPS pour recueillir des donnes de golocalisation brutes.

PRSENTATION DE L'ACCLROMTRE
De nombreux appareils mobiles incluent des capteurs d'orientation et de mouvement, qui
dtectent l'orientation et le mouvement de l'appareil et utilisent ces informations comme
des entres. Par exemple, lorsqu'un utilisateur tient l'appareil et balance son bras en
arrire et au-dessus de sa tte, puis balance le bras en avant, comme pour jouer au tennis,
l'appareil reconnat et enregistre le mouvement.
Un acclromtre est un priphrique qui mesure l'acclration, qui dsigne un changement
de vitesse ou de direction au cours d'une priode. Le capteur de l'acclromtre dtecte les
forces exerces sur le priphrique, par exemple un mouvement (haut, bas, latral) et la
gravit. Dans les systmes lis Windows, des API spcifiques rcuprent les donnes de
mouvement brutes partir des capteurs de l'acclromtre, puis l'API Motion combine les
donnes de ces capteurs et effectue des calculs pour gnrer des valeurs intelligibles.
L'vnement devicemotion fournit l'acclration du priphrique, en coordonnes
cartsiennes, et la vitesse de rotation. Voici un extrait de code JavaScript qui reoit des
vnements devicemotion :
window.addEventListener("devicemotion",
function(event) {
// Processus event.acceleration,
event.accelerationIncludingGravity,
// event.rotationRate et event.interval
}, true);

REMARQUE

Deux capteurs lis sont la boussole et le gyroscope. Le capteur de boussole dtermine


l'orientation du priphrique par rapport au ple nord magntique de la terre. Vous pouvez utiliser le capteur de boussole avec les API appropries pour crer des applications
comme le gocaching et la navigation par exemple. Le capteur de gyroscope utilise le
mouvement (forces de rotation) pour dtecter la vitesse de rotation du priphrique
selon les trois axes principaux.

ACCS UNE CAMRA


La spcification HTML Media Capture du groupeW3C utilise un attribut de capture
avec l'lment input pour capturer les donnes des appareils photo, camscopes, webcams,
microphones, etc. Par exemple, le code gnrique suivant tlcharge une image de l'appareil
photo du priphrique:
<input type="file" accept="image/*" capture="camera">

264 | Leon 10

Cependant, cette construction offre une prise en charge limite et ne fonctionne qu'avec
certains navigateurs mobiles. La tendance est au passage la mthode getUserMedia() et
l'objet de navigateur comme autre solution, qui accde au flux de donnes de la camra et du
microphone d'un appareil. getUserMedia fonctionne bien avec les nouveaux lments audio et
vido de HTML5. Voici un extrait de code qui fournit un accs au matriel d'un appareil:
navigator.GetUserMedia('audio, video',
function(localMediaStream) {
var video = document.querySelector('video');
video.src =
window.createObjectURL(localMediaStream);
}, onFailSoHard);

Les spcifications sont dans le flux, donc vous devriez vous attendre des changements au
fur et mesure que les spcifications sont modifies et que les fournisseurs de navigateur
adoptent la technologie.
EXPLORATION DES CAPACITS MATRIELLES
PRPAREZ-VOUS. Pour explorer les capacits matrielles, procdez comme suit :
1. Visitez a page Web MSDN Dmarrage rapide : dtection d'emplacement
demplacement avec HTML5 (HTML) l'adresse http://msdn.microsoft.com/fr-fr/
library/windows/apps/hh452746.aspx.
2. Copiez et collez l'exemple de code JavaScript dans un outil d'dition ou de
dveloppement d'applications et enregistrez-le sous L10-geo-ms.html.
3. Ouvrez L10-geo-ms.html dans un navigateur Web et testez l'application.
4. Comparez les coordonnes de longitude et de latitude avec L10-geolocation.html, que
vous avez cr dans une leon antrieure.
5. Rponse un mouvement de lutilisateur avec lacclromtre (HTML) l'adresse
http://bit.ly/J7OA58.
6. Lisez l'exemple de code JavaScript et l'exemple de balisage HTML.
7. Rpondez aux questions suivantes, en recherchant des parties du code et du balisage
si ncessaire:
a. Quelle fonction tablit une connexion avec l'acclromtre par dfaut?
b. Quelle fonction capture les donnes du nouvel acclromtre?
c. Quels lments crivent les nouvelles valeurs l'cran?
8. Fermez tous les programmes et fichiers ouverts.

PLUS DINFORMATIONS
Pour en savoir plus sur les API lies une camra, consultez la page Web MSDN l'adresse suivante: http://msdn.
microsoft.com/fr-fr/library/windows/apps/hh465152.aspx. Pour explorer les composants Windows Runtime,
accdez cette page Web MSDN : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh441572.aspx.

RSUM DES COMPTENCES


Dans cette leon, vous avez appris ce qui suit:

Un dispositif tactile interprte les mouvements des doigts sur un cran tactile, appels
mouvements et les convertit en instructions pour une application. De nombreux
mouvements ont des quivalents souris.
Les principaux vnements tactiles sont touchstart, touchmove, touchend et touchcancel. Les
principaux vnements de mouvements sont gesturestart, gesturechange et gestureend.

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 265

La collaboration WHATWG (Web Hypertext Application Technology Working Group)


gre une spcification HTML en cours de dveloppement intgrant les API qui ne
faisaient pas partie l'origine de la spcification HTML5. Il s'agit notamment des API
de golocalisation, Web Worker, WebSockets et de fichier.
L'API de golocalisation obtient les coordonnes gographiques de l'utilisateur
(latitude et longitude). Elle peut galement afficher une carte avec un marqueur
indiquant l'emplacement de l'utilisateur selon ses coordonnes.
Les traitements Web sont des scripts qui s'excutent en arrire-plan, qui effectuent
des calculs ou d'autres actions rendant l'interface utilisateur plus ractive.
L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un
serveur Web et d'changer du texte et des fichiers binaires. Les WebSockets permettent
de rduire le volume de traitement ncessaire pour les communications en temps rel.
Vous pouvez utiliser l'API de fichier pour tlcharger un ou plusieurs fichiers partir
d'un disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez
galement la possibilit d'afficher des fichiers image tlchargs dans une application Web.
L'environnement d'excution de Windows permet aux dveloppeurs d'accder aux
ressources en mmoire, mais aussi au matriel l'aide des API.
Web Storage HTML5 inclut le stockage local (pour les donnes persistantes) et le
stockage de session (pour les donnes temporaires).
Les applications indpendantes de la plate-forme s'excutent sur diffrents systmes
d'exploitation de bureau et mobiles et les applications indpendantes du priphrique
sont indpendantes de l'appareil. JavaScript vous permet d'accder aux API Windows
Runtime pour les priphriques matriels.

valuation

des connaissances
Complter lespace vide

important: webWorkers & WebSockets

Compltez les phrases suivantes en crivant le ou les mots corrects dans les espaces
prvus cet effet.
1. L'action d'une application en rponse un mouvement s'appelle un vnement
__________.
tactile
geolocation

2. Les donnes __________


golisiques fournissent des donnes d'emplacement brutes, telles que la
longitude et la latitude ou les mtres.
webWorkers dsignent une API qui permet d'excuter des scripts en arrire-plan
3. Les __________
comme threads parallles.

webSocket offre une communication en duplex intgral (dans les deux sens)
4. L'API __________
via un seul socket sur Internet.
file
5. L'API _______permet
un navigateur ou une application de tlcharger des fichiers
dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in.

6. Un programme ou une interface qui excute un logiciel produisant des rsultats


semblables sur diffrents priphriques est aussi appel ____________________.
indpendant du plateforme
acclemtreest un priphrique qui mesure l'acclration, dsignant un
7. Un __________
changement de vitesse au cours d'une priode.
resistif
8. Un cran tactile de type __________
est compos de plusieurs couches; la couche
suprieure flchit lorsque vous appuyez dessus et touche la couche situe dessous.
Des capteurs dtectent la pression, ce qui permet d'identifier la partie de l'cran sur
laquelle l'utilisateur a appuy.
blob
9. Un _______
est un type de donnes qui peut stocker des donnes binaires, comme les
images ou les fichiers multimdias.

10. Comet et d'autres technologies apparentes de type push ont adopt __________,
l'interrogation
processus dans lequel un navigateur contacte un serveur Web rgulirement (parfois
en permanence) pour vrifier si de nouvelles informations sont disponibles pour tre
prsentes l'utilisateur.

266 | Leon 10

Questions choix multiples


Entourez la lettre correspondant la meilleure rponse.
1. Quel type d'cran tactile ncessite des proprits conductrices?
a. Capacitif
b. Rsistif
c. lectronique
d. Aucune des rponses cidessus
2. En JavaScript, parmi les propositions suivantes, laquelle contient une rfrence tous
les points de contact avec un cran tactile?
a. Objet tactile
b. Identificateur
c. TactileListe touchList
d. Manifeste
3. Quelle API dfinit une interface qui fournit la localisation d'un priphrique, gnralement
l'aide des coordonnes de latitude et de longitude?
a. WebSocket
b. Golocalisation
c. Traitements Web
d. File
4. Parmi les proprits suivantes, laquelle n'est pas utilise par les traitements Web?
webWorkers
a. setTimeout
b. setInterval
c. XMLHttpRequest
d. getElementById
5. Parmi les propositions suivantes, lesquelles illustrent bien les applicationsWeb qui
profitent des WebSockets? (Choisissez toutes les rponses applicables.)
a. Conversation instantane
b. Carnet d'adresses
c. Jeu en ligne multijoueur
d. Cotations boursires
6. Quelle API permet de tlcharger des images et d'afficher immdiatement les vignettes
dans les documents HTML?
a. WebSocket
b. Golocalisation
c. Traitements Web
d. File
7. Quelle API utilise ws au lieu de http pour rfrencer les URL?
a. WebSocket
b. Golocalisation
c. Traitements Web
d. File
8. Quelle mthode permet aux utilisateurs de conserver des volumes de donnes relativement
importants entre deux sessions du navigateur?
a. localStorage
b. sessionStorage
c. postMessage
d. addEventListener

Codage JavaScript pour l'interface tactile, les ressources des priphriques et du systme d'exploitation, etc. | 267

9. Quelle mthode permet d'accder au flux de donnes de la camra et du microphone


du priphrique?
a. getUserMedia
b. sessionStorage
c. addEventListener
d. getCameraSound
10. Quel capteur d'un priphrique mobile permet de dtecter la force de gravit et d'autres
forces rsultant du mouvement de l'appareil?
a. GPS
b. Boussole
c. Acclromtre
d. Gyroscope
Vrai/Faux
Entourez la lettreV si l'affirmation est vraie ou la lettre F si elle est fausse.
VF1.
Le groupeW3C a t fond par Apple, Mozilla Foundation et Opera Software
pour dfinir et documenter la spcificationHTML5.
VF2.
En JavaScript, l'objet tactile dtecte les entres sur des priphriques interaction
tactile.
Les donnes civiles reprsentent les donnes d'emplacement qui sont plus intelligibles
VF3.
pour l'homme, comme une carte ou une adresse, par exemple 637Park Street.
VF4.
Les dveloppeurs testent leurs applications et les utilisateurs excutent les
applications dans l'environnementWinRT.
VF5.
Le mouvement d'appui simple ou prolong est l'quivalent d'un clic gauche de
la souris.
valuation

des comptences
Scnario10-1: Prsentation des mouvements
Jrme est un collgue de travail et dveloppeur en herbe qui bidouille une application
interaction tactile. Il voudrait connatre le mouvement qui simule un clic de souris. Que
pouvez-vous lui dire?

Scnario 10-2 : Collecte des donnes d'emplacement des clients


La socit Austin Energy and Light voudrait que ses clients se connectent sur leur site Web et
utilisent une application qui indique avec prcision le lieu o ils se trouvent. L'application doit
tre trs ractive l'interaction avec l'utilisateur et doit laisser aux utilisateurs le soin de continuer
remplir le formulaire. Les donnes d'emplacement seront envoyes aux priphriques de
poche qui seront utiliss par des techniciens sur le terrain pour reprer rapidement le domicile et
le lieu de travail des clients. Quelles technologies proposez-vous la socit?
valuation

de la matrise des concepts


Scnario10-3: Prsentation du mouvement priphrique
Vong est dveloppeur pour un grand fabricant de smartphones. Elle a rcemment t affecte
un projet sur le mouvement des priphriques au sein d'une quipe de dveloppement. Elle
voudrait comprendre rapidement la diffrence entre les capteurs de l'acclromtre, de la
boussole et du gyroscope. Que pouvez-vous lui dire?

Scenario 10-4 : Exploration de l'API Web Storage


Vong revient avec une nouvelle question sur le stockage Web. Elle pense que le stockage
Web dsigne l'enregistrement des fichiers avec un service de cloud sur le Web, mais elle
ne voit pas trs bien le lien avec son projet smartphone. Comment pouvez-vous lui
expliquer clairement le concept de stockage Web?

AnnexeA

Examen 98-375 Notions


fondamentales sur le dveloppement
d'applicationsHTML5
Objectif de l'examen

Numro de la comptence

Numro de la leon

Connaissance des principes fondamentaux de la plateforme

1.1

Gestion de l'tat d'une application

1.2

Dbogage et test d'une applicationHTML5 interactions tactiles

1.3

Publication d'une application dans un magasin en ligne

1.4

Choisir et configurer les balisesHTML5 pour afficher le texte

2.1

Choisir et configurer les balisesHTML5 pour afficher les graphiques

2.2

Choisir et configurer les balisesHTML5 pour lire les fichiers multimdias

2.3

Choisir et configurer les balises HTML5 pour organiser le contenu et les


formulaires

2.4

Choisir et configurer les balises HTML5 pour les entres et la validation

2.5

Comprendre les principes de base des feuilles de styleCSS

3.1

Organiser le contenu dune interface utilisateur avecCSS

3.2

Grer lenchanement du texte avecCSS

3.3

Grer l'interface graphique avecCSS

3.4

Grer et assurer la mise jour de JavaScript

4.1

Mettre jour l'interface utilisateur avec JavaScript

4.2

Coder les animations avec JavaScript

4.3

Accder aux donnes avec JavaScript

4.4

Rpondre l'interface tactile

4.5

10

Coder des API HTML5 supplmentaires

4.6

10

Accder aux ressources des priphriques et du systme d'exploitation

4.7

10

Gestion du cycle de vie d'une application

Cration d'une interface utilisateur avec HTML5

Mise en forme de l'interface utilisateur l'aide de CSS

Coder l'aide de JavaScript

268

Index

A
espacement fixe, 9495
Acclromtre, 263
Accs aux donnes, 225227
Adapt au Web, 166
Affichage
ajouter un lment , 210
masquer des parties de, en fonction de laction de
lutilisateur, 206208
Affichage, 22
Ajout dlments, 209211
pour afficher, 210
Analyse, 227229
Angles arrondis, cration, 160161
bote avec, cration, 162163
Animation interactive, 218219
Animations, 173179, Voir aussi Zone de dessin
3D, 173179
laide de CSS, 178179
codage laide de JavaScript, 216219
cration, 216219
animation interactive, 218219
animations simple, 216219
API de fichier pour les tlchargements de fichiers, 258259
interfaces pour accder , 258
API Web Worker, 252255
cration, 254255
excution, 254255
API WebSockets, 255258
vnements principaux associs , 255
interrogation, 255
test de compatibilit de navigateur, 256258
API XMLHttpRequest, 225
Application dynamique, 190
Applications de tablette tactile/tablette, comptences et contenus
HTML5 pour, 13
Attribut autofocus, 79
Attribut email, 78
Attribut pattern, 78
Attribut required, 78
Attributs dentre, 7781
attribut autofocus, 79
attribut email, 78
attribut pattern, 78
attribut required, 78
texte de lespace rserv, 78
Attributs globaux, 24, 54
Attributs, 2324, 33, Voir aussi Attributs dentre
attributs globaux, 24
Autorisations didentit, 10

Balisage de base, HTML, 2229


Balisage smantique, 54
Balises audio, 4, 4749
lment audio, 47
utilisation, 4849
Balises pour afficher des graphiques, 3444, Voir aussi Support :
balises HTML5 pour la lecture
Balises HTML5 pour afficher, choisir et configurer, 3444
lments figcaption, 3538
lments figure, 3538
image de remplacement pour les navigateurs plus anciens, 4142
image raster, 35
image vectorielle, 35
page Web, affichage des images dans, 37
SVG, cration de graphiques laide de, 4244
utilisation, 215242
zone de dessin, cration de graphiques avec, 3842
Balises vido, 4, 4547
attributs disponibles, 45
compression vido, 46
compression, 46
lment vido, utilisation, 4647
Balises vides, 22
Balises, 22
utiliser pour ajouter une structure au document HTML, 5564
Bibliothque, 197199
Blob, 256
Bote flexible/Modle de bote Bote flexible, 113
bote flexible avec lment flexbox, cration, 119
direction des lments enfants dans une bote flexible,
modification, 122126
lments flexbox, 114, 116128
avec la fonction flex, cration, 120122
mise lchelle proportionnelle dans, 116122
ordre de bote flexible, inversion, 124126
pour lalignement, la direction et lorientation du
contenu, 114128
pour les dispositions simples, 112114
proprit flex-order, 127
utilisation, 116128
Bordure, 112

Cache dapplication (AppCache), 231232


pour les fichiers hors connexion, 1112
Cache, 231, Voir aussi Cache de lapplication (AppCache)
manifeste de cache, 11
Cadran dhorloge avec aiguilles qui bougent, cration, 220222

269

270|Index
Cadre englobant, 102
Calculatrice dans le navigateur en utilisant JavaScript, 199201
Camra, 263264
Capacits matrielles, 264
accs, 262264
indpendant de la plateforme, 262
indpendant du priphrique, 263
Classe, 93
Codec, 4546
Colonnes
cration, 146150
column-count, 146
column-gap, 146
column-rule, 146
disposition multicolonne, 146, 149
trois colonnes, 148
pour optimiser la lisibilit du texte, 145152
<Command> lment dans HTML5, 31
Compatibilit avec les navigateurs, WebSocket pour tester, 256258
Compatibilit de lAPI de fichier, 259
Compression vido, 46
Compression, 46
Conteneur dapplications, 8
Conteneurs, enchanement du contenu via, 140145
Contenu, 112
balises HTML5 pour organiser, 5472
conteneurs, 140
dbordement, gestion, 102105
des lments, 208209
contenu visible lcran, 208209
mise jour, 208209
et style, sparation, 9192
flux, gestion, 9698
dbordement de contenu, gestion, 102105
dbordement masqu, 104105
dbordement visible, 104105
flux de bloc, 96
flux inclus, 96
source, 140
Cookies, 11, 235237
Coupure de mots automatique, 152
Coupure de mots, 150152
coupure de mots automatique, 152
pour optimiser la lisibilit du texte, 145152
ms-hyphenate-limit-chars, 150
ms-hyphenate-limit-lines, 151
ms-hyphenate-limit-zone, 150
Cration de formes, laide de la zone de dessin, 3940
contour dune forme, 4041
Cration de formulaire, 7781
formulaire Web simple, 7981
Cration dlments anims laide de la zone de dessin, 222224
Cycle de vie de lapplication, gestion, 120, Voir aussi HTML5
AppCache pour les fichiers hors connexion, 1112
tats de lapplication, prsentation et gestion, 1012
tat de lapplication, 11
tat de session, 11
informations dtat persistantes, 11
localStorage, 10

sessionStorage, 10
stockage des donnes dtat laide du stockage local et de
session, 1112
interfaces tactiles et mouvements, 1213
Place de march Windows Store, 1617
Principes fondamentaux de la plateforme, 210
autorisations didentit, 10
conteneur dapplications, 8
empaquetage, exploration, 710
environnement dexcution, exploration, 710
exemples dapplications, exploration, 810
informations didentification, 10
interface de programmation dapplication (API), 7
interface utilisateur Windows, 3
jeux dautorisations, 10
package dapplication, 8
processus hte, 78
Windows Runtime (WinRT), 7
Publication dune application dans un magasin en ligne, 1617

Dbogage, 1316
Dbordement de dfilement, 102104
Dbordement masqu, 104105
Dbordement visible, 104105
Dclarations, 9294
Dgrad linaire, 164
Dgrad radial, 165
Dgrads darrire-plan, 164166
Dgrads, 164166
dgrad linaire, 164
dgrad radial, 165
dgrads darrire-plan, 164166
application un cadre, 165166
Dsapprobation, lments HTML5, 3233
<acronym>, 33
<applet>, 33
<basefont>, 33
<big>, 33
<center>, 33
<dir>, 33
<font>, 33
<frame>, 33
<frameset>, 33
<noframes>, 33
<strike>, 33
<tt>, 33
effets des lments dsapprouvs, 34
Direction des lments enfants dans une bote flexible,
modification, 122126
Disposition en grille simple, 130
Disposition multicolonne, 146
Dispositions en grille, 114, 128133
cration, laide de proprits CSS pour les lignes et
colonnes, 130132
disposition en grille simple, 130131
modles de grille, 132133
pour lalignement, la direction et lorientation du contenu, 128133

Index | 271
cellules de la grille, 129
lments de la grille, 129
lignes de la grille, 129
suivis de la grille, 129
Doctype, 2526
Document Object Model (DOM), 7, 141
Donnes civiques, 250
Donnes godsiques, 250
Donnes, 224229
accs, 215242
analyse, transmission, 227229
envoi et rception, 224229
objets complexes, transmission, 227229
types, 233

cran tactile rsistif, 244


crans tactiles capacitifs, 244
Effet de flou gaussien, 180182
lment article, 61
lment aside, 6164
ajout au document HTML, 6364
lment audio, 47
lment block-level, 113
lment datalist, 79
lment flottant positionn, 152
lment footer, cration de documents HTML avec, 56
lment footer, cration de documents HTML avec, 6
lment menu, 72
lment nav, 5961
ajout au document HTML, 6061
lment section, document HTML cration avec, 5759
lment vido, 45
lments figcaption, 3538
lments figure, 3538
lments individuels, positionnement, 99102
lments inline, 113
lments, 23, Voir aussi Contenu : des lments
accs, 201203
affichage, 206208
ajout dlments, 209211
audio, 47
localisation, 201203
masquer, 206-208
mise jour du contenu de, 208209
vido, 45
Encapsulation, 226
Entits, 2425
Entre de formulaire, 73
Entre, balises HTML5 pour, 7283
Environnement de dveloppement intgr (IDE), 88, 190
Environnement dexcution (RTE), 7
Espace de noms, 8
tat de lapplication, 11
tat de session, 11
vnement devicemotion, 263
vnement tactile, 245249
vnements, coute et rponse , 203206

Exemples dapplications, exploration, 810


Extensible Markup Language (XML), 42

Famille de polices sans serif, 9495


Feuilles de style en cascade (CSS), 2, 32, 87109, 137158,
Voir aussi Notions essentielles sur les feuilles de style en
cascade CSS ; Gestion de linterface graphique
contenu et style, sparation, 9192
cration de page Web de base, 9091
CSS3, 88
dclarations, 9294
flux de contenu, 87109
gestion, 9698
outils appropris, 8889
polices et familles de polices, 9496
Feuilles de style en cascade (suite)
dbordement de dfilement, 102104
gestion du flux de texte laide de, 137158
dynamiquement via des conteneurs, 140145
entre plusieurs sections, laide de rgions dans, 139155
flux autour dun objet flottant, exclusions CSS dans, 152155
optimisation de la lisibilit du texte, colonnes et coupure de
mots dans, 145152, Voir aussi Colonnes ; coupure de mots
Rgions CSS, implmentation Microsoft, 142145
texte qui dborde, 142
HTML et, lien entre, 8991
utilisation simple de CSS avec HTML, 8990
positionnement, 87109
positionnement absolu, application, 100102
positionnement dlments individuels, 99102
positionnement flottant, application, 99100
slecteurs, 9294
style, 87109
Fichier local, accs , 229231
Fichiers, 229233
chargement et enregistrement, 229233
fichier local, accs , 229231
Flux de contenu bloc, 9698
Flux de contenu inclus, 9698
Flux de contenu non contigu entre les rgions, 139
Flux nomm, 140
Fonctionnalit matrielle indpendante du priphrique, 263
Fonctions, 193
cration et utilisation, 193196
fonction JavaScript, 194195
Formes, 219224
Formulaire Web simple, cration, 7981
laide de balises <p>, 81
Formulaire Web, 72
cration, 7981
laide de balises <p>, 81
ajout de champs de validation , 83
Formulaires, 7381
balises HTML5 pour organiser, 5472
entre de formulaire, 73

272|Index
G

Golocalisation, codage pour capturer, 249252


API de golocalisation, 250
Gestion de linterface graphique laide de CSS, 159188
angles arrondis, cration, 160161
proprit border-radius, 160
dgrads, 164166
effets de filtre SVG, application, 179182
effet de flou gaussien, 180
effets graphiques, cration, 160166
ombres, 161163
inclinaison 2D, 172173
inclinaison 3D 172173
mise lchelle 2D, 169170
rotation 2D, 171172
rotation 3D 171172
traduction 2D, 168172
transformation 2D, 167169
transformation 3D 167169
zone de dessin pour amliorer linterface utilisateur, 182185
Gestionnaire dvnements, 204
Gestionnaire dvnements de OnLoad, 204206
Global positioning system (GPS), 263
Grille pour les dispositions complexes, 112114

HTML smantique, 5455


HTML5, 210
API, codage, 249259
pour capturer la golocalisation, 249252
applications de tablette tactile/tablette, comptences et contenus
pour, 13
applications, 57
conception dinterface utilisateur, 5
dbogage, 6, 1316
dployer, 6
dveloppement dapplication, 6
criture de code, 6
empaquetage, 6
manifeste dapplication, mise jour, 5
planification de projet, 5
ressources du dveloppeur, 4, 67
test, 6, 1316
validation, 6
cration dinterface utilisateur par, 2152, Voir aussi Support :
balises HTML5 pour la lecture
balises pour afficher des graphiques, 3444, Voir aussi
Graphiques
balises pour afficher le contenu du texte, 2934, Voir
aussi Texte
page Web simple, balisage de, 2629
valide, 26
indpendant de la plateforme, 3
norme HTML5, exploration, 4
nouveauts, 35
nouvelles fonctionnalits, 4
balises audio et vido, 4
golocalisation, 4

Interfaces de programmation dapplication (API), 4


Modernizr, 4
requtes multimdias, 4
zone de dessin, 4
validation du code HTML5, 14
validation dun package, 1416
Hypertext Markup Language (HTML), 2, 22, Voir aussi HTML5
affichage, 22
attributs, 2324
balisage de base, 2229
balises vides, 22
balises, 2223
doctype, 2526
lment, 23
entits, 2425
imbrication dlments, 24
notions essentielles de, 2229
structure de page, 2229
Hypertext Transport Protocol (HTTP), 11

Icne de lancement, 5
Identificateurs, 195
Iframes, 142
Image raster, 35
Image vectorielle, 35
Images cls, 177
Images, 219224
Imbrication dlments, 24
Implmentation Microsoft des rgions CSS, 142145
Inclinaison 2D, 172175
Inclinaison 3D 172173
Inclinaison, 172173
2D, 172175
3D, 172173
Indpendant de la plateforme, 3, 262
Informations dtat persistantes, 11
Informations didentification, 10
Interactivit, 190
Interface de programmation dapplication (API), 4, 7
Interface utilisateur Windows, 3
Interface utilisateur graphique (GUI)
zone de dessin pour amliorer, 182185
Interface utilisateur, 3
cration, laide de HTML5, 5386, Voir aussi Formulaires ;
Validation
laide de balises, 5564
attributs dentre, 7781
contenu, 54-72
cration de formulaire, 7781
lment article, 61
lment aside, 6164
lment footer, 6
lment header, 56
lment menu, 72
lment nav, 5961
lment section, 5759
entre, 5386

Index | 273
formulaire Web simple, cration, 7981
formulaires, 5472
HTML smantique, 5455
listes, cration laide de balises, 6472
organisation, 5386
tables, cration laide de balises, 6472
valeurs, 7781
validation, 5386
mise jour en utilisant JavaScript, 199211
calculatrice intgre au navigateur, 199201
contenu des lments, 208209
lments, affichage et masquage, 206208
lments, localisation et accs, 201203
vnements, coute et rponse , 203206
gestionnaire dvnements de OnLoad, 204206
masquage de parties de laffichage, en fonction de laction de
lutilisateur, 206208
mthode getelementbyid() pour lentre utilisateur, 202203
organisation du contenu laide de CSS, 111114, Voir aussi
Notions essentielles sur les feuilles de style en cascade CSS
Interfaces tactiles, 1213
codage JavaScript, 243267
dtection de la fonctionnalit dcran tactile, 247249
cran tactile rsistif, 244
crans tactiles capacitifs, 244
rponse , 244249
vnements de mouvement, 245
liste tactile, 246
objet tactile, 246
principaux vnements tactiles JavaScript, 246
simulateur ou mulateur dcran tactile, 13
Interrogation, 255
Inversion de lordre des botes flexibles, 124126

JavaScript Object Notation (JSON), 228


JavaScript, 189214, 216219
codage danimations laide de, 216219
codage, 243267, Voir aussi Interfaces tactiles
acclromtre, 263
camra, 263264
donnes civiques, 250
donnes godsiques, 250
global positioning system (GPS), 263
interrogation, 255
ressources en mmoire, accs, 260262
gestion dun formulaire avec, 233235
jQuery, 197199
manipulation de zone de dessin avec, 220224, Voir aussi Zone
de dessin
mise jour de linterface utilisateur en utilisant, 199211, Voir
aussi Interface utilisateur
programme JavaScript instructions multiples, 192193
programme JavaScript simple, cration, 190192
utilisation dans la validation dentres de formulaire utilisateur,
233235
utilisation de variables dans, 196
Jeux dautorisations, 10

autorisations didentit, 10
jQuery, 197199

Kit de dveloppement logiciel (SDK), 14

Langage de balisage, 2
Langage de script, 2
Liste de dfinitions, 71
Liste non trie, 6970
Liste tactile, 245246
Liste trie, 6970
cration, 72
Listes
cration de listes, 6972
balises dans, 6472
lment datalist, 79
liste de dfinitions, 71
liste non trie, 6970
liste trie, 6970
Logiciel, 190

Marge, 112
<Mark> lment dans HTML5, 31
Mthode getelementbyid() pour lentre utilisateur, 202203
Mthodes, 189214
Mise lchelle proportionnelle dans une bote flexible, 116122
Mise lchelle 2D, 169170
Modles de grille, 132133
Mouvements, 1213, 245
capture, 246-249
rponse , 246249
Multicolonne dans CSS3, 146147

.NET framework, 10
Notions essentielles du codage, 189214
Notions essentielles sur les feuilles de style en cascade CSS,
110136
contenu, tri et rorganisation, 126128
organisation du contenu de linterface utilisateur, 111114
bote flexible pour les dispositions simples, 112114
bordure, 112
contenu, 112
lment block-level, 113
lments inline, 113
grille pour les dispositions complexes, 112114
marge, 112
modle de bote Bote flexible, 113, Voir aussi entre
individuelle
modle de disposition en grille, 114, Voir aussi Dispositions
en grille

274 | Index
prfixe du fournisseur, 111
relation parent/enfant, 113
remplissage, 112

Objet flottant, cration de flux de texte autour, CSS dans, 152155


lment flottant positionn, 152
exclusions CSS, 152154
Objet tactile, 245246
Objets complexes, transmission, 227229
Ombre porte, 161
Ombres, cration, 161163
bote avec, cration, 162163
h-shadow, 162
ombre porte, 161
v-shadow, 162
Opacit, 163164

Package dapplication, 8
Page Web simple, 2629
balisage de, 2629
cration, 2629
Page Web valide, 26
Page Web, affichage des images dans, 37
Perspective, 173179
3D, 173179
Place de march Windows Store, 1617
Polices et familles de polices, 9496
famille de polices espacement fixe, 9495
famille de polices sans serif, 95
Positionnement absolu, 100102
avec plusieurs colonnes, 101
Positionnement flottant, 99100
avec plusieurs colonnes, 99100
Prfixe du fournisseur, 111
Processus hte, 78
Processus, 8
Programme JavaScript instructions multiples, 192193
Proprit border-radius, 160
Proprit flex-order, 127128

Rappel, 204
Rcursivit, 216
Rgions CSS, Voir Rgions, CSS
Rgions, CSS, 139
cration, 143145
implmentation de Microsoft, 142145
Rgles, 89
Relation parent/enfant, 113
Remplissage, 112
Ressources de priphrique et de systme dexploitation, codage
en JavaScript pour, 243267
Ressources du priphrique, accs , 260264
Ressources du systme dexploitation, 260264

Ressources en mmoire, accs, 260262


Rotation 2D, 171172
Rotation 3D 171172
Rotation, 171172
rotation 2D, 171172
rotation 3D 171172

Scalable vector graphics (SVG), 34, 42


cration de graphiques laide de, 4244
Image vectorielle SVG, 4344
effets de filtre, application, 179182
flou gaussien, 181182
dcalage, 181182
utilisation de la zone de dessin au lieu de SVG, 44
Slecteurs, 9294
Sparation du contenu et du style, 9192
Service de validation du balisage, W3C, 15
Sous-routines, 197
Stockage de session, 10, 260
stockage des donnes dtat laide de, 1112
Stockage des donnes dtat laide du stockage local et de
session, 1112
Stockage local, 10, 237239, 260262
enregistrer dans, 238
stockage des donnes dtat laide de, 1112
Structure de page, HTML, 2229
Support, 2152
balises HTML5 pour la lecture, 4549, Voir aussi Balises audio ;
balises vido requtes, 4, 127

Tables
cration de tables, 6469
balises dans, 6472
Test des applications HTML5, 1316
Texte de lespace rserv, 78
Texte qui dborde, 142
Texte, 2152
balises HTML5 pour afficher, choisir et configurer, 2934
<b>, 30
<em>, 30
<i>, 30
<small>, 30
<strong>, 30
balises de texte dune page Web, modification, 3031
lments textuels HTML 4 avec un nouveau sens ou une
nouvelle fonctionnalit, 2931
texte de remplacement pour les navigateurs plus anciens,
4142
lments de texte non utiliss en HTML5, 3234, Voir aussi
dsapprobation, lments HTML5
gestion des flux laide de CSS, 137158, Voir aussi Feuilles de
style en cascade (CSS)
nouveaux lments de texte dans HTML5, 3132
<command>, 31
<mark>, 31

Index | 275
<time>, 31
utilisation de llment mark, 32
<Time> lment dans HTML5, 31
Traduction, 168172
2D, 168169
Transformation 2D, 167169
Transformation 3D 167169
Transformations, 167169
2D, 167169
3D, 167169
Transitions, 173179
3D, 173179
cration laide de CSS, 176178
Transparence, 163164
Typographie, 166167

balises HTML5 pour, 7283


validation automatique, 82
validation ct client, 82
validation ct serveur, 82
Variable, 195
dans le programme JavaScript, 196

Web Hypertext Application Technology Working Group


(WHATWG), 249
Web Open Font Format (WOFF), 166167
Windows Runtime (WinRT), 7, 260
World Wide Web Consortium (W3C), 2
service de validation du balisage, 15
service de validation du CSS, 1516
WWAHost.exe, 8

Uniform resource locator (URL), 47

Z
V

Valeurs, 7781
Validation automatique, 82
Validation ct client, 82
Validation ct serveur, 82
Validation dentres de formulaire utilisateur, utilisation de
JavaScript dans, 233235
Validation du code HTML5, 14
Validation dun package, 1416
Validation, 8183, 203
ajout de champs au formulaire Web, 83

Zone de dessin
au lieu de SVG, 44
cration de graphiques avec, 3842
contour dune forme, 4041
cration de formes, 3940
notions de base de la zone de dessin, 3940
manipulation avec JavaScript, 220224
cration de cadran dhorloge, 220222
cration dlments anims, 222224
lment canvas, 220
objet de zone de dessin, amlioration, 184185