Академический Документы
Профессиональный Документы
Культура Документы
fondamentales sur
le développement
d’applications
HTML5
| i
VP & ÉDITEUR Don Fowley
ÉDITEUR Bryan Gambrel
DIRECTEUR DES VENTES Mitchell Beaton
DIRECTEUR DU MARKETING Chris Ruel
CHEF DE PRODUIT MICROSOFT Rob Linsky de Microsoft Learning
ASSISTANT ÉDITORIAL Jennifer Lartz
RESPONSABLE ADJOINTE DU MARKETING Debbie Martin
DIRECTRICE DE PRODUCTION SENIOR Janis Soo
DIRECTEUR DE PRODUCTION ASSOCIÉ Joel Balbin
DIRECTEUR DE LA CRÉATION Harry Nolan
CONCEPTRICE DE LA COUVERTURE Georgina Smith
TECHNOLOGIE ET MÉDIAS Tom Kulesa/Wendy Ashenberg
Cet ouvrage a été réalisé en Garamond par Aptara, Inc. et imprimé et relié par Bind-Rite Robbinsville.
La couverture a été imprimée par Bind-Rite Robbinsville.
Copyright © 2013 par John Wiley & Sons, Inc. Tous droits réservés.
Aucune partie de cette publication ne peut être reproduite, stockée dans un système de récupération ou transmise sous
quelque forme ou par quelque moyen que ce soit (électronique, mécanique, photocopie, enregistrement, numérisation
ou autre), à l'exception des cas permis par les articles 107 ou 108 de la loi américaine sur les droits d'auteur de 1976
(United States Copyright Act), sans l'autorisation écrite préalable de l'éditeur, ou l'autorisation obtenue moyennant
le paiement des frais par copie appropriés au Copyright Clearance Center, Inc. 222 Rosewood Drive, Danvers, MA
01923, site web www.copyright.com. Les demandes d'autorisation à l'éditeur doivent être adressées par courrier
à Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, (201)748-6011,
télécopie (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, Windows 7, Windows Mobile,
Windows Server et Windows Vista sont des marques déposées ou des marques commerciales de Microsoft Corporation
aux États-Unis et/ou dans d'autres pays. Les autres noms de produits et de sociétés mentionnés dans ce document sont
des marques de leurs propriétaires respectifs.
Les noms de sociétés, d'organisations, de produits, de domaines, d'adresses de messagerie, de logos, de personnes,
de lieux et d'événements mentionnés dans les exemples sont fictifs. Toute ressemblance avec des noms ou des
événements réels 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, légale 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 présumé avoir
été causé directement ou indirectement par cet ouvrage.
ISBN 978-1-118-35993-8
10 9 8 7 6 5 4 3 2 1
www.wiley.com/college/microsoft ou
appelez le numéro 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 présent document est le Contrat de Licence Utilisateur Final limité de John Wiley and Sons Inc. (« Wiley ») et régit
votre utilisation du livre électronique Microsoft Official Academic Course de Wiley (le « Livre Électronique MOAC ») et du
contenu s’y 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 présentes, Wiley concède au membre du Programme Microsoft IT Academy, au formateur ou à l’étudiant
exerçant ses droits en vertu du présent contrat (« vous »), et vous acceptez, une licence non exclusive et non
transférable pour utiliser le Livre Électronique MOAC et le Contenu du Formateur sous réserve du respect des
conditions générales suivantes uniquement :
a. Vous reconnaissez que le Livre Électronique MOAC et le Contenu du Formateur vous sont concédés sous
licence pour une durée limitée et que votre utilisation est soumise aux conditions générales du présent contrat.
a. Vous trouverez ci-dessous deux sections distinctes relatives aux droits d’utilisation. Une seule vous est
applicable.
i. Si vous êtes un membre actif du Programme Microsoft IT Academy :
1. Les Livres Électroniques MOAC sont uniquement destinés à être utilisés par vos formateurs
et étudiants.
2. Vous pouvez télécharger uniquement le nombre de copies du titre du Livre Électronique
MOAC nécessaires pour permettre à vos formateurs et étudiants d’enseigner ou d’assister
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 :
o e-mail ;
o un dispositif USB sécurisé directement connecté aux dispositifs personnels de vos étudiants ;
o un site Web protégé par un mot de passe, auquel seuls vos formateurs et étudiants ont
accès.
4. Vous êtes autorisé à distribuer le Contenu du Formateur uniquement à vos formateurs afin
de leur permettre de préparer et de dispenser l’un de vos cours portant sur le titre de Livre
Électronique MOAC associé.
5. Avant de permettre l’accès à un Livre Électronique MOAC, vous notifierez à chaque individu
qu’il peut utiliser un Livre Électronique MOAC ou y accéder uniquement à condition
d’accepter 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
propriété ou qui est sous son contrôle.
o Il ne saurait copier, modifier, imprimer, transmettre, transférer, 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 période la plus longue
entre la durée du cours portant sur le Livre Électronique MOAC en question et une
période de cent quatre-vingt (180) jours, après quoi il devra supprimer de manière
sécurisée toutes les copies du Livre Électronique MOAC en sa possession ou sous son
contrôle.
o o Son utilisation du Livre Électronique MOAC devra également être conforme
aux termes, conditions ou licences supplémentaires 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 l’accès à tout Contenu du Formateur, vous notifierez à chaque formateur
qu’il peut utiliser le Contenu du Formateur ou y accéder uniquement à condition d’accepter de se
conformer aux exigences suivantes :
o Il utilisera le Contenu du Formateur uniquement pour préparer et dispenser votre session de
formation.
o Il installera le Contenu du Formateur uniquement sur un dispositif dont il a la propriété ou qui
est sous son contrôle.
o Il ne saurait copier, modifier, imprimer, transmettre, transférer, 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 période la plus longue entre la
durée du cours portant sur le Livre Électronique MOAC associé et une période de cent quatre-
vingt (180) jours, après quoi il devra supprimer de manière sécurisée toutes les copies du
Contenu du Formateur en sa possession ou sous son contrôle.
o Son utilisation du Contenu du Formateur devra également être conforme aux termes, conditions
ou licences supplémentaires 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 propriété
ou qui est sous votre contrôle.
4. Vous ne sauriez copier, modifier, imprimer, transmettre, transférer, 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 supplémentaires applicables, inclus dans ou accompagnant le Livre Électronique MOAC
en question.
a. Sauf autorisation expresse dans le paragraphe b ci-dessus, vous n’êtes pas autorisé à télécharger, copier, modifier,
transmettre, transférer, diffuser, distribuer ou créer des œuvres dérivées de tout Livre Électronique MOAC ou Contenu
du Formateur, en totalité ou en partie, ni à créer par décompilation ou toute autre méthode le code source de tout
Livre Électronique MOAC ou Contenu du Formateur. Vous n’êtes pas autorisé à imprimer des copies de tout Livre
Électronique MOAC ou Contenu du Formateur dans son intégralité, mais vous pouvez imprimer des pages individuelles
ou des passages de chapitres du Livre Électronique MOAC afin de les utiliser en cours. Vous n’êtes pas autorisé à
utiliser tout ou partie du Livre Électronique MOAC ou du Contenu du Formateur à des fins mercantiles au moyen
d’une vente, d’une revente, d’un prêt, d’un transfert, d’une location ou de toute autre forme d’exploitation du Livre
Électronique MOAC ou du Contenu du Formateur. Si vous transférez la possession d’un Livre Électronique MOAC ou
Contenu du Formateur à un tiers, votre licence sera automatiquement résiliée. Une telle résiliation viendra s’ajouter 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
période la plus longue entre la durée du cours portant sur le Livre Électronique MOAC en question et une période
de cent quatre-vingt (180) jours, après quoi vous devrez supprimer de manière sécurisée toutes les copies du Livre
Électronique MOAC et du Contenu du Formateur en votre possession ou sous votre contrôle.
c. LE LIVRE ÉLECTRONIQUE MOAC ET LE CONTENU DU FORMATEUR SONT CONCÉDÉS SOUS LICENCE « EN L’ÉTAT » ET
« TELS QUE DISPONIBLES », SANS GARANTIE D’AUCUNE SORTE.
d. Vous reconnaissez que tous les droits (y compris, de manière non exhaustive, les droits d’auteur, brevets et secrets de
fabrication) sur les Livres Électroniques MOAC et le Contenu du Formateur sont la propriété exclusive de Wiley et de
ses concédants de licence. En acceptant le présent contrat, vous ne devenez pas le propriétaire du Livre Électronique
MOAC ni du Contenu du Formateur, mais vous disposez d’une licence limitée pour utiliser le Livre Électronique MOAC
et le Contenu du Formateur conformément aux dispositions du présent contrat. Vous acceptez de protéger le Livre
Électronique MOAC et le Contenu du Formateur contre tout chargement, utilisation, téléchargement, reproduction
ou distribution non autorisé. Vous convenez également de ne pas traduire, décompiler, désassembler ou autrement
reconstituer la logique de tout Livre Électronique MOAC ou Contenu du Formateur. Wiley se réserve tous les droits qui
ne vous sont pas expressément concédés dans le présent contrat.
Avant-propos de l'éditeur
Pour la maison d'édition Wiley, la série Microsoft Official Academic Course est destinée à
fournir aux instructeurs et aux étudiants les compétences et les connaissances nécessaires
pour utiliser efficacement les technologies Microsoft dans tous les aspects de leur vie
personnelle et professionnelle. Un enseignement de qualité est nécessaire 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 pédagogiques de confiance pour la vie.
Pour accomplir cette mission, Wiley et Microsoft se sont associés pour développer les
programmes éducatifs de la plus haute qualité pour les travailleurs de l'information, les
professionnels de l'informatique et les développeurs. 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 entièrement 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 agréés officiellement pour les membres de
Microsoft IT Academy.
La série Microsoft Official Academic Course se concentre sur le développement de la main-
d'œuvre. Ces programmes s'adressent aux étudiants qui cherchent à entrer sur le marché
du travail, changer d'emploi ou se lancer dans une nouvelle carrière comme travailleurs de
l'information, professionnels de l'informatique et développeurs. Les programmes Microsoft
Official Academic Course répondent à leurs besoins en mettant l'accent sur des scénarios de
lieu de travail authentiques avec de nombreux projets, exercices, cas et évaluations.
Les cours de la série Microsoft Official Academic Course sont mappés sur les recherches et
analyses de tâches par poste approfondies de Microsoft, les mêmes recherches et analyses
utilisées pour créer les examens Microsoft Technology Associate (MTA) et Microsoft
Certified Solutions Developer (MCSD). Les manuels développent des compétences réelles
pour de vrais emplois. Les projets et les exercices proposés dans les manuels permettent aux
stagiaires de renforcer leur niveau de connaissances et leur capacité à appliquer les dernières
technologies Microsoft dans leurs tâches quotidiennes. Les stagiaires acquièrent é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 nécessité absolue. Les rôles
professionnels et même des catégories professionnelles entières, évoluent si rapidement
qu'aucun d'entre nous ne peut rester compétitif et productif sans continuellement mettre
à jour ses compétences et capacités. Les offres de la série Microsoft Official Academic
Course, et l'accent qu'ils mettent sur la préparation de l'examen de la certification Microsoft,
permettent aux étudiants d'acquérir et de mettre à jour de façon efficace leurs compétences
et leurs connaissances. Les éditions Wiley soutiennent les étudiants dans cet effort en
développant et en distribuant ces cours en tant qu'éditeur universitaire officiel de Microsoft.
Aujourd'hui, la publication de documents pédagogiques exige de mettre l'accent sur la qualité des
documents imprimés et la fiabilité des contenus électroniques. L'intégration des produits de la
série 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 général et vice-président directeur
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | v
Préface
Bienvenue dans le programme Microsoft Official Academic Course (MOAC) sur les
notions fondamentales du développement d'applications HTML5. MOAC est le fruit
de la collaboration entre Microsoft Learning et la maison d'édition John Wiley & Sons,
Inc. Microsoft et Wiley se sont associés pour produire une série de manuels qui offrent
des solutions d'enseignement efficaces et innovantes aux instructeurs et une expérience
d'apprentissage de qualité aux stagiaires. Imprégnés et enrichis des connaissances approfondies
des créateurs de produits Microsoft et conçus par un éditeur reconnu dans le monde entier pour
la qualité pédagogique de ses produits, ces manuels maximisent le transfert de compétences
en un minimum de temps. Les stagiaires sont encouragés à exprimer leur potentiel via leurs
nouvelles compétences techniques en tant que membres hautement productifs du personnel.
Parce que cette base de connaissances provient directement de Microsoft, créateur des examens
Microsoft Certified Solutions Developer (MCSD) et Microsoft Technology Associate (MTA)
(www.microsoft.com/learning/certification), vous êtes sûr de recevoir les informations sur un sujet
les plus pertinentes pour la réussite 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 réussir aux examens de certification et dans leur carrière professionnelle.
www.wiley.com/college/microsoft ou
vi | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Tour du livre illustré
■ Fonctionnalités pédagogiques
Le manuel MOAC sur les notions fondamentales sur le développement
d'applications HTML5 est conçu pour couvrir tous les objectifs d'apprentissage pour cet
examen MTA 98-375, désignés 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 fonctionnalités pédagogiques ont été développées
spécifiquement pour les programmes Microsoft Official Academic Course.
La présentation de procédures et de concepts techniques complets tout au long du manuel
représente un défi tant pour les stagiaires que pour les instructeurs. Le tour du livre illustré
qui suit fournit un guide des riches fonctionnalités qui contribuent au plan pédagogique
du programme Microsoft Official Academic Course. Vous trouverez ci-dessous la liste des
principales fonctionnalités de chaque leçon. Elles ont été conçues pour aider les stagiaires
dans leur formation en informatique, dans la préparation des examens de certification ou
dans le cadre de leurs fonctions professionnelles.
• Chaque leçon 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 compétence logicielle abordée dans la leçon au domaine d'objectifs de
l'examen spécifique.
• Des instructions pas à pas, concises et fréquentes, présentent de nouvelles fonctionnalités
aux stagiaires et leur donnent la possibilité de mettre en pratique leurs connaissances. Les
étapes numérotées donnent des instructions détaillées, pas à pas, pour aider les stagiaires
à acquérir des compétences logicielles.
• Illustrations : des images d'écran offrent un aperçu visuel aux étudiants tandis qu'ils
réalisent les exercices. Les images illustrent les concepts clés, fournissent des indices
visuels sur les étapes et permettent aux stagiaires de vérifier leurs progrès.
• Termes clés : le vocabulaire technique important est répertorié avec les définitions
correspondantes au début de chaque leçon. Quand ces termes sont utilisés plus tard
dans la leçon, ils apparaissent en italique et en gras, et sont définis. Le glossaire
contient tous les termes clés et leurs définitions.
• Des aides au lecteur intéressantes sur un point d'utilisation, réparties dans les leçons,
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
supplémentaires pertinentes ou d'arrière-plan qui ajoutent de la valeur à la leçon.
• Les fonctionnalités Prêt pour la certification, réparties dans le texte, indiquent aux
stagiaires l'endroit où un objectif de certification spécifique est abordé. Elles donnent
aux stagiaires la possibilité de vérifier leur compréhension de cet objectif particulier
de la certification MTA et, si nécessaire, de consulter la section de la leçon où il est
abordé. Un cours MOAC offre une préparation complète pour la certification MTA.
• Questions de fin de leçon : la section Évaluation des connaissances contient différents
types de questions : choix multiples, vrai-faux, correspondances et textes à trous.
• Exercices de fin de leçon : les scénarios des sections Évaluation des connaissances
et Évaluation de la maîtrise sont des projets qui permettent de tester la capacité des
étudiants à appliquer ce qu'ils ont appris dans la leçon.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | vii
viii | Tour du livre illustré
■ Fonctionnalités de la leçon
Figure 1-3
53 Étapes générales de la
création d'une application
2 | Leçon 1
Vous êtes le nouveau stagiaire chez Malted Milk Media, une agence de création Dans cette section, vous découvrirez les étapes générales liées à la création d'une
qui développe des applications Rich Media pour ses clients. La société va bientôt application. La figure 1-3 illustre les étapes, qui sont expliquées ci-dessous :
commencer à utiliser HTML5 dans ses projets. Votre responsable vous a demandé • Planifier le projet : pensez au type d'application que vous souhaitez créer. Quoi
de faire des recherches sur HTML5 et les technologies connexes et de présenter un que vous choisissiez, il est préférable de commencer votre apprentissage du
rapport sur les modifications importantes apportées pour passer de HTML 4.01 à développement d'applications HTML5 par une application simple. Une fois que vous
HTML5. Vous devez également inclure des informations sur la façon dont HTML5 avez défini l'action principale de votre application, créez un plan du flux général de
permet de créer des applications d'écran tactile, telles que celles des ordinateurs, l'application de bout en bout. Déterminez aussi le type d'interactivité utilisateur que
tablettes tactiles, tablettes et smartphones. vous souhaitez inclure, comme une interface tactile, si vous avez besoin d'enregistrer
des données 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,
■ Présentation des principes fondamentaux de la plateforme déterminez comment vous voulez que l'application soit affichée pour les utilisateurs.
Groupez les contenus d'une manière logique. Commencez par créer une liste des
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent commandes dont vous aurez besoin pour que l'application s'exécute comme prévu et
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant collectez des images et des clips multimédias si nécessaire. Au minimum, les applications
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge d'aujourd'hui exigent une icône de lancement, qui représente votre application.
L'ESSENTIEL
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les • Mise à jour du manifeste de l'application : chaque application nécessite un fichier
navigateurs d'appareils mobiles est en bonne voie. manifeste. Le fichier manifeste décrit les propriétés de l'application et ce dont elle a
Hypertext Markup Language (HTML) est le langage que vous utilisez pour décrire des pages
L'essentiel besoin pour fonctionner (voir la figure 1-4). Le fichier comprend de nombreux éléments
d'informations différents, tels que le nom d'affichage que les utilisateurs voient, une
description de l'application, son orientation (portrait, paysage, etc.), le chemin d'accès
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML du fichier à l'icône de l'application, les fonctionnalités de l'application (fonctionnalités
utilise des balises de marquage comme <body> et <h1> pour décrire les parties d'une page Web. ou périphériques système que votre application peut utiliser), et bien plus encore.
REMARQUE
* Un fichier HTML ne « s'exécute » pas comme un programme. Au lieu de cela, un fichier
HTML est interprété par un navigateur pour afficher une page Web basée sur les balises.
W3C® est une marque
commerciale (déposée Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
dans de nombreux changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
pays) du World Wide de l'audio, de la vidéo et beaucoup d'interactivité dans les sites Web qu'ils visitent. En outre,
avec la montée en popularité des appareils mobiles comme les tablettes tactiles, tablettes et
Web Consortium ; les smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
marques du W3C sont interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
déposées et détenues
par ses institutions Tout cela a rendu nécessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui développe des spécifications
hôtes, le MIT, l'ERCIM pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
et l'université de Keio. PRÊT POUR LA CERTIFICATION
Figure 1-1
Le logo HTML5
REMARQUE
*
Même si HTML5
est encore en
développement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent Un point important à retenir est que HTML5 est une norme et une combinaison ou
en charge de nombreux famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
éléments de HTML5. Les feuilles de style en cascade (CSS) définissent les styles pour HTML dans un fichier
séparé, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont répercutées dans l'ensemble
PRÊT POUR LA CERTIFICATION des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
Quelles sont les trois JavaScript est un langage de script (un langage de programmation qui utilise des scripts
technologies principales et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
de la famille HTML5 ? Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
1.1 avez aussi la possibilité d'employer la combinaison pour développer des applications
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Tour du livre illustré | ix
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
2. Faites défiler vers le bas et cliquez sur le lien HTML5 dans le volet gauche, actuellement
près du bas de la liste.
3. Parcourez les échantillons jusqu'à trouver une application dont la description est suivie
de « HTML5 », comme l’example 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. L’example Show Ads
using the AdControl in HTML5 nécessite 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
d'écran demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
entre l'état de session et
l'état de l'application ? pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
1.2 lorsque l'utilisateur ferme la session.
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 première demande d'une page Web au serveur
PRÊT POUR LA CERTIFICATION Web, et se termine lorsque l'utilisateur referme le navigateur.
Quelle est l'importance Les informations d'état persistantes sont les données dont une application a besoin après
des informations d'état la fin de la session. De nombreuses applications Web doivent stocker des données (et les
persistantes ? rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
1.2 arrêtés lorsqu'ils retournent sur le site.
Hypertext Transport Protocol (HTTP) est le protocole qui transfère des données
sur le World Wide Web. Il définit les actions effectuées par les serveurs de Web et
60 | Leçon 3 les navigateurs en réponse aux commandes des utilisateurs. Par exemple, lorsque
vous entrez une URL (Uniform Resource Locator) dans le champ d'adresse d'un
Voici un exemple de balisage pour les liens Précédent-Accueil-Suivant, avec des barres
verticales après chaque élément de navigation pour le séparer des autres visuellement :
Alerte Prêt 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
données d'une session à l'autre. Lorsque vous fermez un navigateur Web après avoir
<nav>
<a href="http://www.example.com/Services">Précédent</a> |
pour la visité un site Web, les données ne sont pas enregistrées.
Pour contourner les limitations du protocole HTTP, les développeurs utilisent des cookies,
certification
PRÊT POUR LA CERTIFICATION
<a href="http://www.example.com">Accueil</a> | qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
Comment HTML5 gère-t-il visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
<a href="http://www.example.com/About">Suivant</a> les données d'état ? site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
</nav> 1.2 Web à « se souvenir » d'un utilisateur et à personnaliser son expérience sur ce site.
<br />
Cependant, les cookies se sont avérés être un risque pour la sécurité. En outre, si de grandes
quantités de données sont impliquées, toutes les données sont envoyées entre le navigateur et
Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6. le serveur à chaque requête, ce qui risque d'entraîner une baisse de performances notable pour
l'utilisateur. En HTML5, les développeurs peuvent utiliser le stockage Web au lieu de cela, ce qui
La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire offre plus de flexibilité, de plus grands ensembles de données et de meilleures performances.
plus tard dans cette leçon.
La méthode localStorage permet aux utilisateurs de conserver de plus grandes quantités de
PRÊT POUR LA CERTIFICATION données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
Laquelle des deux dans le temps. La méthode sessionStorage permet de conserver les données uniquement
méthodes, HTML5/ pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
Figure 3-6 JavaScript, permet à une également de « stockage par onglet ».
application de stocker les
Navigation Précédent- Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
données persistantes ? Il est donc possible de stocker une quantité relativement importante de données sans
Accueil-Suivant avec 1.2 ralentir la connexion ou le site.
des barres verticales qui
séparent chaque lien APPCACHE POUR LES FICHIERS HORS CONNEXION
Une autre façon d'utiliser le stockage Web consiste à stocker les données 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
données qui seraient normalement stockées sur un serveur. Étant donné que les ressources
sont stockées sur le disque dur ou le périphérique du client, elles sont chargées plus
rapidement lorsqu'elles sont demandées.
À l'aide de l'AppCache, un développeur utilise un fichier texte appelé « manifeste de cache »
pour spécifier les fichiers qu'un navigateur Web doit mettre en cache en mode hors connexion.
Même si un utilisateur clique sur le bouton Actualiser en mode hors connexion, l'application se
X REF
charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit :
Vous en apprendrez index.html
A JOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML plus sur l'utilisation
stylesheet.css
PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit : de AppCache avec
images/dot.png
JavaScript dans la
1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application, leçon 8. scripts/main.js
ouvrez le fichier L3-MyPage.html (s'il n'est pas déjà ouvert) et enregistrez-le sous le
nom L3-MyPage-nav.html pour créer un nouveau fichier.
2. Placez les balisesnav suivantes et leur contenu dans la balise <header> :
<header>
<h1>Sélection d'un style de concert</h1>
<nav> Aide au lecteur
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
« Référence croisée »
</header>
<h1><a id="symphonies">Symphonies</a></h1>
<h1><a id="raves">Raves</a></h1>
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
x | Tour du livre illustré
22 | Leçon 2
Les développeurs très occupés de Malted Milk Media vous ont demandé d'effectuer
des recherches sur les nouvelles balises disponibles dans HTML5. Ils sont
particulièrement intéressés par les balises se rapportant aux graphiques et au contenu
multimédia. Votre tâche consiste à obtenir le maximum d'informations sur les
nouvelles balises HTML5 et à préparer de courtes présentations de chacune des
balises, en fournissant des exemples.
Le langage HTML (Hypertext Markup Language) utilise des balises pour décrire le
contenu qui s'affiche sur une page Web. Un élément est composé à la fois de balises
L'ESSENTIEL et du contenu figurant entre celles-ci. L'utilisation de caractères spéciaux dans une
page Web nécessite l'encodage de ces derniers. Enfin, chaque page Web requiert la
déclaration doctype en haut de la page.
Le langage HTML (Hypertext Markup Language) est appelé langage de balisage, car il permet
de décrire (baliser) les divers éléments du contenu affiché sur une page Web. Une page Web
comportant un balisage inclut des balises, qui sont des mots clés permettant de structurer une
page HTML. (Vous en apprendrez davantage sur les balises un peu plus loin.) Pour utiliser le
langage HTML de manière optimale, il convient de savoir comment et quand utiliser les
balises appropriées. La combinaison de contenu, de balises et parfois de graphiques, de
contenu multimédia ou d'autres contenus constitue la clé de voûte 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 périphérique mobile tel qu'un smartphone
ouvre un fichier HTML, il rend (interprète et reproduit) le contenu de la page.
Chaque page HTML comporte des balises. Une balise est un mot clé entouré de
crochets. La plupart des balises sont utilisées par paire ; une balise est appelée balise
d'ouverture ou de début, tandis que l'autre est la balise de fermeture ou de fin. Une Aide au lecteur
paire de balises respecte la casse ; une balise de fin doit utiliser la même casse que
la balise de début. La balise de fin est identique à la balise de début, hormis le fait
que la balise de fin comporte une barre oblique avant le mot clé.
« Remarque »
Les balises entourent le contenu et lui affectent une définition. Par exemple, les balises
suivantes créent 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 appelées Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55
balises vides parce qu'elles ne requièrent pas de balise de fin. HTML5 est moins restrictif
que HTML 4. Ainsi, il n'est pas nécessaire d'inclure des balises de fin pour tous les
éléments (même si certains éléments exigent toujours des balises de début et de fin), Figure 3-1
et vous pouvez entrer les balises en majuscules ou en minuscules. Toutefois, le balisage Comparaison des parties de
utilisé dans ce guide comporte exclusivement des balises de début et de fin, entièrement document balisées en HTML
en minuscules, par souci de cohérence. 4.01 et HTML5
De nombreuses balises sont disponibles pour les pages HTML. Quelques-unes des balises
les plus couramment utilisées sont répertoriées dans le Tableau 2-1. Les quatre premières,
<html>, <head>, <title> et <body>, sont requises sur chaque page Web.
Notez que le balisage sémantique de HTML5 donne un sens plus spécifique aux parties
d'un document HTML, en rendant la structure plus facile à comprendre.
Tableau 3-1
Nouvelles balises HTML5 Balise Description
pour l'organisation du
contenu et la création de
<address> Définit une zone pour obtenir les coordonnées d'une page ou d'une
Gestion de l'interface graphique avec CSS | 163 structure
section
<article> Définit un article, comme un article de magazine ou de journal, un
<body> billet de blog ou un contenu similaire
<div>Exemple de boîte</div> <aside> Définit le contenu qui est distinct mais quand même associé au contenu
</body> de la page. Semblable à une barre latérale dans les chapitres de livres et
</html> les articles de magazine
2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un <details> Contient des détails supplémentaires relatifs au texte autour. Crée un
navigateur Web, qui doit ressembler à la figure 7-4. widget interactif qu'un utilisateur peut afficher ou masquer
<footer> Définit un pied de page d'un document ou d'une section. Peut inclure
Figure 7-4 l'auteur du document, les coordonnées, les informations de copyright
Boîte avec des coins arrondis et les liens renvoyant aux modalités d’utilisation
<header> Définit un en-tête de document ou de section. Peut contenir des liens
de navigation ou des informations préliminaires
3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style : <hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>)
pour des titres sur plusieurs niveaux
box-shadow: 5px 5px 5px #999;
<nav> Définit un bloc de liens de navigation
4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit <section> Définit une section d'un document, comme des chapitres, des parties
ressembler à la figure 7-5. d'une thèse ou d'une page Web dont le contenu est distinct
<summary> Définit un titre visible pour un élément details. L'utilisateur peut
Figure 7-5 cliquer pour afficher ou masquer les informations
Boîte avec des coins arrondis
<wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou
et une ombre portée
que vous craignez que le navigateur ne coupe une ligne au mauvais
endroit, vous pouvez utiliser l'élément <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 élément opaque ne laisse pas passer la lumière, tandis que vous pouvez voir à travers
un élément transparent. Même si les termes sont opposés, si vous réduisez l'opacité d'un
élément ou si vous augmentez sa transparence, vous finissez par obtenir la même chose.
La figure 7-6 montre l'effet de transparence (ou la réduction d' opacité) sur une image.
L'image originale se trouve sur la gauche. L'image avec une transparence de 50 % appliquée
Tableaux faciles à lire
se trouve sur la droite.
Figure 7-6
Transparence appliquée
à une image
Photos
PRÊT POUR LA
CERTIFICATION La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est :
Quelle propriété CSS
vous permet d'appliquer opacity: value
de la transparence à
un élément ou à une La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et
image ?
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
3.4 utiliser la valeur 0,55 (1,0 – 0,45).
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Tour du livre illustré | xi
Présentation 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 spécifications pour les dispositions de modèle de grille sont semblables à des ébauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rédaction de ce
document. Cependant, vous pourriez rencontrer des modèles de grille pour l'examen MTA
98-375. Vous devriez donc vérifier la dernière spécification du module des modèles de
disposition en grille CSS du groupe W3C lors de la préparation de l'examen.
86 | Leçon 3
connaissances de documents. Elle doit créer les grandes lignes du balisage HTML5 pour un article à
paraître dans le bulletin mensuel en ligne créé par l’un des développeurs Web. Chaque
article comportera un titre et un sous-titre, plusieurs paragraphes de texte, son nom et la
date de l’article dans le pied de page. À quoi ressemblera le balisage de son article ?
Questions Scénario 3-2 : Affichage de longs tableaux en HTML
Vince génère des rapports financiers pour le Vice-président des opérations financières
chez Momentum Strategies, un cabinet de relations publiques spécialisé dans les
campagnes politiques. Vince imprime régulièrement des tableaux de 2 ou 3 pages et
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133 distribue des exemplaires aux membres de la direction. Il souhaite publier ces rapports
dans une zone sécurisée sur l’intranet de la société, et avec des lignes de données séparées
des titres de colonne avec la ligne des totaux à la fin. Il voudrait savoir comment présenter
Bien que cet exemple utilise le mot clé auto, vous pouvez utiliser les valeurs grid-rows et les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?
grid-colums comme indiqué dans le tableau 5-2.
Les spécifications pour les dispositions de modèle de grille sont semblables à des ébauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rédaction de ce
document. Cependant, vous pourriez rencontrer des modèles de grille pour l'examen MTA
■ Évaluation de la maîtrise des concepts Évaluation de
98-375. Vous devriez donc vérifier la dernière spécification du module des modèles de
disposition en grille CSS du groupe W3C lors de la préparation de l'examen.
Scénario 3-3 : Création d’un glossaire
Waylon est un stagiaire qui travaille sur une dissertation. Son formateur demande
à chaque étudiant d’appliquer à la dissertation une mise en forme compatible avec un
la maîtrise des
RÉSUMÉ DES COMPÉTENCES
affichage sur le Web. Waylon souhaite inclure un glossaire à la fin de la dissertation,
mais il a du mal à produire un résultat satisfaisant avec une liste non triée. Quel balisage
serait mieux adapté au glossaire de Waylon ?
concepts
Dans cette leçon, vous avez appris ce qui suit :
Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire Web
• L es interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles. Margie est en train de créer et de tester un formulaire Web qui comporte entre autres un
• L a conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web,
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
réservé au code postal. Elle ne veut pas utiliser de syntaxe avec la propriété pattern
parce qu’à ses yeux c’est trop compliqué. Quel autre type d’entrée peut-elle utiliser ?
avant les noms de propriétés CSS pour tout faire fonctionner.
• Les boîtes flexibles sont conçues pour les barres d’outils, les menus, les formulaires
et d’autres éléments semblables dans des pages Web et applications. Les grilles sont
mieux adaptées aux conceptions élaborées.
• Une boîte flexible et son contenu peuvent être configurés pour modifier la taille,
horizontalement et verticalement, lorsque la taille de l'écran sur lequel ils sont
affichés change. Vous pouvez également inverser le sens et l'ordre des boîtes
flexibles avec une ligne de code.
• Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en
largeur. Vous devez utiliser la propriété flex avec les boîtes enfants. La propriété
flex-flow définit les propriétés flex-direction et flex-wrap d'une boîte flexible (la boîte
parent) en même temps.
• L es dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez créer différents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout à une feuille de calcul.
• Vous devez utiliser les propriétés CSS display:grid (ou display:inline-grid), grid-columns
et grid-rows pour créer des structures de grille. La taille des colonnes et des lignes
peut être fixe ou flexible.
• Les boîtes flexibles et les grilles sont conçues pour mettre à l'échelle proportionnellement.
• La propriété flex-order vous permet de modifier l'ordre des éléments enfants dans
une boîte flexible, de les réorganiser dans un ordre quelconque sans avoir à les
modifier dans le balisage HTML.
• Un modèle de grille utilise des caractères alphabétiques pour représenter la
position des éléments dans une grille. Vous devez utiliser les caractères alpha avec
les propriétés grid-template, grid-rows et grid-columns pour créer une grille dans
laquelle les données peuvent être organisées.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Conventions et fonctionnalités
utilisées dans cet ouvrage
Cet ouvrage utilise des polices, des symboles et des conventions d'en-tête particuliers
pour mettre en évidence des informations importantes ou attirer l'attention sur des étapes
spéciales. Pour plus d'informations sur les fonctionnalités de chaque leçon, reportez-vous
à la section Tour du livre illustré.
Convention Signification
Cette fonctionnalité fournit un bref résumé des sujets qui
L'ESSENTIEL seront traités dans la section qui suit.
FERMER
Les mots en majuscules font référence à des instructions
destinées à ouvrir, enregistrer ou fermer des fichiers ou des
programmes. Ils indiquent également des éléments à vérifier
ou des actions à entreprendre.
PRÊT POUR LA CERTIFICATION
Cette fonctionnalité signale le point dans le texte où un
objectif de certification spécifique est couvert. Elle vous
donne une occasion de vérifier votre compréhension de cet
objectif particulier de la certification MTA et, si nécessaire, de
consulter la section de la leçon où il est abordé.
Des aides au lecteur figurent dans le texte, dans des cases
REMARQUE*
* grisées. Remarque fournit des conseils utiles liés à des tâches
ou sujets particuliers.
Ces remarques fournissent des pointeurs vers des informations
X REF
fournies ailleurs dans le manuel ou décrivent des fonctionnalités
intéressantes du langage HTML5 qui ne sont pas directement
abordées 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 même temps.
Les touches sur lesquelles vous êtes invité à appuyer dans un
exercice s'affichent dans la police indiquée ici.
Exemple Les termes clés apparaissent en italique et en gras.
www.wiley.com/college/microsoft ou
xii | appelez le numéro 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
cohérent d'un point de vue pédagogique. Ces ressources offrent tous les documents
dont les instructeurs ont besoin pour organiser et dispenser leurs cours. Les ressources
téléchargeables en ligne sont les suivantes :
• DreamSpark Premium est conçu pour fournir les outils de développement, produits
et technologies disponibles les plus conviviaux et les moins coûteux aux professeurs
et aux stagiaires dans les laboratoires, salles de classe et sur les PC des stagiaires. Un
abonnement gratuit de 3 ans est offert aux utilisateurs qualifiés de MOAC.
Remarque : Microsoft Visual Studio et Microsoft Expression peuvent être téléchargés
à 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 différentes. Le Guide de l'instructeur contient également
les résumés 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,
réponses courtes et formats d'essais et est disponible au téléchargement sur le site
compagnon du livre de l'instructeur (www.wiley.com/college/microsoft). Un corrigé
complet est fourni.
• Un ensemble complet de présentations PowerPoint et d'images est disponible sur
le site compagnon du livre de l'instructeur (http://www.wiley.com/college/microsoft)
pour compléter les présentations en classe. Environ 50 diapositives PowerPoint
sont fournies pour chaque leçon. Ces présentations sont adaptées au sujet traité
dans le texte et à la matrice de compétences, et elles sont conçues pour transmettre
les principaux concepts abordés 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 intégrer à vos présentations PowerPoint ou les
utiliser pour créer vos propres transparents et polycopiés. En utilisant ces illustrations
dans les discussions en classe, vous pouvez aider les stagiaires à se concentrer sur les
éléments clés des technologies abordées et leur permettre de comprendre comment
utiliser ces technologies efficacement dans leurs fonctions professionnelles.
• Quand il s'agit d'améliorer l'expérience en classe, il n'y a pas de meilleure source
d'idées et d'inspiration que vos collègues. Le réseau Wiley Faculty Network relie
les enseignants avec la technologie, facilite l'échange des meilleures pratiques
et contribue à renforcer l'efficacité pédagogique. Les activités du réseau Faculty
Network incluent des formations aux technologies et des didacticiels, des
séminaires virtuels, des échanges entre pairs d'expériences et d'idées, 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 numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xiii
xiv | Programme de soutien de l'instructeur
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Programme de soutien
au stagiaire
■ Ressources complémentaires
Site web compagnon de ce livre (www.wiley.com/college/microsoft)
Le site compagnon du manuel du stagiaire pour la série MOAC comprend tous les fichiers
d'exercices, les liens web et les ressources qui seront utilisés conjointement à ce cours.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xv
xvi | Programme de soutien au stagiaire
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
pédagogiques. La certification MTA aide les établissements d'enseignement à se démarquer en
tant que fournisseurs innovants de programmes de certification professionnelle très demandés.
Elle est facilement déployée à l'aide d'une suite simple, pratique et abordable d'examens de
certification technologique de niveau débutant. La certification MTA permet aux stagiaires
d'explorer des filières technologiques professionnelles sans effectuer un investissement
important en temps ni ressources, tout en leur fournissant une base pour leur carrière et la
confiance nécessaire pour réussir des études supérieures, puis poursuivre leur vocation.
En plus de donner aux stagiaires une certification Microsoft de niveau débutant, la certification
MTA est conçue pour être un tremplin vers d'autres certifications technologiques Microsoft
plus avancées, telles que la certification Microsoft Certified Solutions Developer (MCSD).
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Programme de soutien au stagiaire | xvii
Yuke Wang, Université du Texas à Dallas Douglas Tabbutt, Blackhawk Technical College
Palaniappan Vairavan, Bellevue College David Koppy, Baker College
Harold « Buz » Lamson, ITT Technical Institute Sharon Moran, Hillsborough Community College
Colin Archibald, Valencia Community College Keith Hoell, Briarcliffe College et Queens College,
Catherine Bradfield, DeVry University en ligne CUNY
Robert Nelson, Blinn College Mark Hufnagel, Lee County School District
Kalpana Viswanathan, Bellevue College Rachelle Hall, Glendale Community College
Bob Becker, Vatterott College Scott Elliott, Christie Digital Systems, Inc.
Carol Torkko, Bellevue College Gralan Gilliam, Kaplan
Bharat Kandel, Missouri Tech Steve Strom, Butler Community College
Linda Cohen, Forsyth Technical Community College John Crowley, Bucks County Community College
Candice Lambert, Metro Technology Centers Margaret Leary, Northern Virginia Community College
Susan Mahon, Collin College Sue Miner, Lehigh Carbon Community College
Mark Aruda, Hillsborough Community College Gary Rollinson, Cabrillo College
Claude Russo, Brevard Community College Al Kelly, University of Advancing Technology
Heith Hennel, Valencia College Katherine James, Seneca College
Adrian Genesir, Western Governors University David Kidd, Western Governors University
Zeshan Sattar, Zenos
www.wiley.com/college/microsoft ou
xviii | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Brève table des matières
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xix
Contenu
Leçon 1 : G
estion du cycle de vie d'une Imbrication d'éléments 24
Comprendre les entités 24
application 1 Comprendre le doctype 25
Exploration du balisage d'une page Web simple 26
Matrice d'objectifs d'examen 1 Sélection et configuration de balises HTML5 pour
Termes clés 1 l'affichage du texte 29
Présentation des principes fondamentaux de la Éléments de texte HTML 4 avec une nouvelle
plateforme 2 signification ou fonction 29
Quelles sont les nouveautés de HTML5 ? 3 Nouveaux éléments de texte dans HTML5 31
Création d'applications 5 Éléments de texte inutilisés dans HTML5 32
Exploration de l'empaquetage et de l'environnement Sélection et configuration de balises HTML5 pour
d'exécution 7 l'affichage des graphiques 34
Présentation du processus hôte 7 Utilisation des éléments figure et figcaption 35
Présentation du package d'application et du conteneur Création de graphiques à l'aide de canvas 38
d'applications 8 Notions de base de l'élément canvas 39
Présentation des jeux d'informations d'identification et Création d'un contour de forme 40
d'autorisations 10 Spécification d'une image ou d'un texte de remplacement
Présentation et gestion des états de l'application 10 pour les anciens navigateurs 41
Stockage des données d'état à l'aide du stockage local et Création de graphiques à l'aide de SVG 42
de session 11 Quand utiliser canvas au lieu de SVG 44
AppCache pour les fichiers hors connexion 11 Sélection et configuration de balises HTML5 pour la
Présentation des interfaces tactiles et des lecture de contenu multimédia 45
mouvements 12 Comprendre et utiliser les balises de contenu vidéo 45
Utilisation des compétences et du contenu HTML5 Comprendre et utiliser les balises audio 47
existants pour les applications de tablettes tactiles/ Résumé des compétences 49
tablettes 13 Évaluation des connaissances 49
Débogage et test des applications HTML5 13 Évaluation des compétences 51
Validation du code HTML5 14
Validation d'un package 14 Évaluation de la maîtrise des concepts 52
Publication d'une application dans un magasin en
ligne 16 Leçon 3 : Création de l'interface
Résumé des compétences 17 utilisateur avec HTML5 :
Évaluation des connaissances 18 Organisation, saisie et
Évaluation des compétences 20 validations 53
Évaluation de la maîtrise des concepts 20
Matrice d'objectifs d'examen 53
Leçon 2 : C
réation de l'interface Termes clés 53
utilisateur avec HTML5 : Texte, Sélection et configuration des balises HTML5 pour
organiser le contenu et les formulaires 54
graphiques et multimédia 21 Présentation de la sémantique HTML 54
Utilisation des balises pour structurer un
Matrice d'objectifs d'examen 21 document HTML 55
Termes clés 21 Éléments header et footer 56
L'élément section 57
Comprendre les principes fondamentaux du langage
L'élément nav 59
HTML 22
L'élément article 61
Balisage et structure de page de base 22
L'élément aside 61
Utilisation d'attributs 23
Utilisation de balises pour créer des tableaux et des
www.wiley.com/college/microsoft ou
xx | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Contents | xxi
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
xxii | Contents
Gestion de l'interface graphique avec CSS 159 Codage des animations avec JavaScript 216
Création d'effets graphiques 160 Création d'animations 216
Création d'angles arrondis 160 Utilisation d'images, de formes et d'autres
Création d'ombres 161 graphiques 219
Application de la transparence 163 Manipulation de l'élément canvas avec JavaScript 220
Application de dégradés à l'arrière-plan 164
Présentation de la typographie et du format WOFF (Web Envoi et réception de données 224
Transmission d'objets complexes et analyse 227
Open Font Format) 166
Application des transformations 2D et 3D 167 Chargement et enregistrement de fichiers 229
Traduction 2D 168 Utilisation du cache de l'application (AppCache) 231
Mise à l'échelle 2D 169 Présentation et utilisation des types de données 233
Rotation 2D et 3D 171 Utilisation de JavaScript pour valider les entrées
Inclinaison 2D et 3D 172 d'utilisateur dans les formulaires 233
Présentation de la perspective 3D, des transitions et des Présentation et utilisation des cookies 235
animations 173
Application d'effets de filtre SVG 179 Présentation et utilisation de la fonction de stockage
Utilisation de la zone de dessin pour améliorer l'interface local 237
graphique 182 Résumé des compétences 239
Résumé des compétences 185 Évaluation des connaissances 240
Évaluation des connaissances 186 Évaluation des compétences 242
Évaluation des compétences 188 Évaluation de la maîtrise des concepts 242
Évaluation de la maîtrise des concepts 188
Leçon 10 : Codage JavaScript pour
Leçon 8 : Présentation des principes l'interface tactile, les ressources
de base de JavaScript et du des périphériques et du système
codage 189 d'exploitation, etc. 243
Matrice d'objectifs d'examen 189 Matrice d'objectifs d'examen 243
Termes clés 189 Termes clés 243
Gestion et maintenance du langage JavaScript 189 Réponse à l'interface tactile 244
Création et utilisation des fonctions 193 Capture et réponse aux mouvements 246
Utilisation de jQuery et d'autres bibliothèques Codage des API HTML5 supplémentaires 249
tierces 197 Codage pour capturer la géolocalisation 249
Mise à jour de l'interface utilisateur avec JavaScript 199 Présentation des traitements Web 252
Localisation et accès aux éléments 201 Présentation des WebSockets 255
Écoute et réponse aux événements 203 Utilisation de l'API de fichier pour les téléchargements
Affichage et masquage des éléments 206 de fichiers 258
Mise à jour du contenu des éléments 208 Accès aux ressources des périphériques et du système
Ajout d'éléments 209 d'exploitation 260
Résumé des compétences 211 Accès aux ressources en mémoire 260
Évaluation des connaissances 212 Accès aux capacités matérielles 262
Présentation du GPS (Global Positioning System) 263
Évaluation des compétences 214 Présentation de l'accéléromètre 263
Évaluation de la maîtrise des concepts 214 Accès à une caméra 263
Résumé des compétences 264
Leçon 9 : C
réation d'animations, Évaluation des connaissances 265
utilisation de graphiques et Évaluation des compétences 267
accès aux données 215 Évaluation de la maîtrise des concepts 267
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Gestion du cycle LEÇON 1
de vie d'une
application
M AT R I C E D ' O B J E C T I F S D ' E X A M E N
TERMES CLÉS
AppCache interface de programmation d’application (API)
autorisations d’identité interface utilisateur Windows
conteneur d’applications JavaScript
cookies jeux d’autorisations
débogage langage de balisage
espace de noms langage de script
état de l’application localStorage
état de session mouvement
événement tactile package d’application
feuilles de style en cascade (CSS) requêtes multimédias
HTML5 sessionStorage
Hypertext Markup Language (HTML) simulateur ou émulateur d’écran tactile
Hypertext Transport Protocol (HTTP) validateur
icône de lancement Windows Runtime (WinRT)
indépendant de la plateforme Windows Store
informations d’état persistantes World Wide Web Consortium (W3C)
1
2 | Leçon 1
Vous êtes le nouveau stagiaire chez Malted Milk Media, une agence de création
qui développe des applications Rich Media pour ses clients. La société va bientôt
commencer à utiliser HTML5 dans ses projets. Votre responsable vous a demandé
de faire des recherches sur HTML5 et les technologies connexes et de présenter un
rapport sur les modifications importantes apportées pour passer de HTML 4.01 à
HTML5. Vous devez également inclure des informations sur la façon dont HTML5
permet de créer des applications d'écran tactile, telles que celles des ordinateurs,
tablettes tactiles, tablettes et smartphones.
Hypertext Markup Language (HTML) est le langage que vous utilisez pour décrire 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 décrire les parties d'une page Web.
REMARQUE
* Un fichier HTML ne « s'exécute » pas comme un programme. Au lieu de cela, un fichier
HTML est interprété par un navigateur pour afficher une page Web basée sur les balises.
W3C® est une marque
commerciale (déposée Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
dans de nombreux changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
pays) du World Wide de l'audio, de la vidéo et beaucoup d'interactivité dans les sites Web qu'ils visitent. En outre,
avec la montée en popularité des appareils mobiles comme les tablettes tactiles, tablettes et
Web Consortium ; les smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
marques du W3C sont interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
déposées et détenues
par ses institutions Tout cela a rendu nécessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui développe des spécifications
hôtes, le MIT, l'ERCIM pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
et l'université de Keio. PRÊT POUR LA CERTIFICATION
Figure 1-1
Le logo HTML5
REMARQUE
*
Même si HTML5
est encore en
développement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent Un point important à retenir est que HTML5 est une norme et une combinaison ou
en charge de nombreux famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
éléments de HTML5. Les feuilles de style en cascade (CSS) définissent les styles pour HTML dans un fichier
séparé, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont répercutées dans l'ensemble
PRÊT POUR LA CERTIFICATION des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
Quelles sont les trois JavaScript est un langage de script (un langage de programmation qui utilise des scripts
technologies principales et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
de la famille HTML5 ? Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
1.1 avez aussi la possibilité d'employer la combinaison pour développer des applications
Gestion du cycle de vie d’une application | 3
clientes (applications) qui s'exécutent sur des appareils tactiles tels que des ordinateurs,
REMARQUE
* tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilisées par
Vous en apprendrez les développeurs pour créer des pages Web commencent à être employées pour créer des
plus sur CSS3 et applications qui s'exécutent sur différents appareils.
JavaScript dans les
HTML5 est également indépendant de la plateforme. Cela signifie que la famille de
leçons ultérieures. technologies HTML5 vous permet de créer des applications qui s'exécutent sur différents
systèmes d'exploitation de périphériques mobiles et de bureau, tels que Microsoft
Windows, Internet Explorer et Windows Phone. Vous pouvez également les exécuter
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 à télécharger un plug-in
ou utiliser des dispositifs dotés 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 expérience Web aussi riche.
Enfin, un élément important du développement d'applications dans l'environnement Windows
est l'interface utilisateur Windows, qui est l'interface utilisateur de la dernière version de
Microsoft Windows : Windows 8. L'interface utilisateur Windows inclut des fonctionnalités telles
qu'un aspect propre et sans encombrement, le mode plein écran, des concentrateurs de grande
taille (boutons graphiques) et l'accent sur le défilement latéral, pour n'en citer que quelques-unes.
Pour consulter un exemple, reportez-vous à la figure 1-2.
Figure 1-2
L'écran d'accueil de
Windows 8 est une interface
utilisateur Windows
Parce que ce manuel vous aide à vous préparer pour l'examen de certification Microsoft
Technology Associate (MTA) 98-375, Notions fondamentales sur le développement
d'applications HTML5, les exemples des leçons utilisent autant que possible les outils Microsoft.
Toutefois, l'examen ne se concentre pas sur un ensemble spécifique d'outils. Vous pouvez utiliser
la famille HTML5 avec de nombreux outils de beaucoup d'entreprises différentes. Même un
*
REMARQUE
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 déboguer beaucoup de code, empaqueter des applications à distribuer et exécuter
d'autres tâches du même type. Des outils de développement gratuits pour créer des applications
Windows Store sont disponibles à l'adresse http://bit.ly/K8nkk1.
✚ PLUS D’INFORMATIONS
Les adresses Web utilisées dans les exercices précédents sont reprises ici pour plus de commodité. Il
est recommandé de créer des signets pour une utilisation ultérieure. 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 développeurs sur le site
Espace formations pour développeurs débutants (http://www.visualstudio.com/fr-fr/products/visual-
studio-express-vs) et le site de MSDN à l'adresse http://bit.ly/Hd9uzt.
Création d'applications
Les applications HTML5 sont beaucoup plus faciles à développer que les
applications similaires qui utilisent d'autres technologies comme Adobe Flash et
Microsoft Silverlight. HTML5, CSS et JavaScript sont des langages interprétés, ce
qui signifie qu'ils ne nécessitent pas de compilation. Vous pouvez déboguer le code
dans un navigateur, effectuer des modifications rapides, puis actualiser la fenêtre du
navigateur pour voir le résultat des changements.
Même si vous pouvez créer beaucoup de code en utilisant un simple texte ou un éditeur
HTML, si vous souhaitez empaqueter et déployer votre application, vous aurez besoin
d'utiliser un outil de développement d'applications tel que Microsoft Visual Studio.
Figure 1-3
Étapes générales de la
création d'une application
Dans cette section, vous découvrirez les étapes générales liées à la création d'une
application. La figure 1-3 illustre les étapes, qui sont expliquées ci-dessous :
• Planifier le projet : pensez au type d'application que vous souhaitez créer. Quoi
que vous choisissiez, il est préférable de commencer votre apprentissage du
développement d'applications HTML5 par une application simple. Une fois que vous
avez défini l'action principale de votre application, créez un plan du flux général de
l'application de bout en bout. Déterminez aussi le type d'interactivité utilisateur que
vous souhaitez inclure, comme une interface tactile, si vous avez besoin d'enregistrer
des données 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,
déterminez comment vous voulez que l'application soit affichée pour les utilisateurs.
Groupez les contenus d'une manière logique. Commencez par créer une liste des
commandes dont vous aurez besoin pour que l'application s'exécute comme prévu et
collectez des images et des clips multimédias si nécessaire. Au minimum, les applications
d'aujourd'hui exigent une icône de lancement, qui représente votre application.
• Mise à jour du manifeste de l'application : chaque application nécessite un fichier
manifeste. Le fichier manifeste décrit les propriétés de l'application et ce dont elle a
besoin pour fonctionner (voir la figure 1-4). Le fichier comprend de nombreux éléments
d'informations différents, tels que le nom d'affichage que les utilisateurs voient, une
description de l'application, son orientation (portrait, paysage, etc.), le chemin d'accès
du fichier à l'icône de l'application, les fonctionnalités de l'application (fonctionnalités
ou périphériques système que votre application peut utiliser), et bien plus encore.
6 | Leçon 1
Figure 1-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.
• Développer l'application : à l'aide d'un outil de développement d'applications tel que
Visual Studio, convertissez le code et les autres ressources en une application réelle.
• Déboguer et tester : vous devez tester votre application soigneusement et résoudre les
éventuels problèmes qui apparaissent. Si l'application utilise une interface tactile, il est
très important de la tester sur un appareil tactile ou d'utiliser un émulateur tactile.
• Créer le package : l'empaquetage d'une application crée un conteneur qui contient
tous les différents fichiers requis par l'application, tels que JavaScript, des images et
ainsi de suite.
• Valider : valider votre application implique d'exécuter un programme de validation
sur cette application pour s'assurer que rien ne manque.
• Déployer : télécharger une application sur une place de marché comme le Windows Store.
Les applications que vous prévoyez de déployer pour de nombreux utilisateurs,
notamment via un marché comme un magasin d'applications, doivent être fiables
et sûres. De nombreuses applications sont également conçues pour fonctionner sur
plusieurs systèmes d'exploitation. Assurez-vous que vous avez testé soigneusement votre
application et que vous l'avez validée avec les outils appropriés. Vous devez également
envisager de fournir un support technique pour des applications plus complexes.
Le Document Object Model (DOM) est une API importante à garder à l'esprit. Le
DOM est conçu pour HTML et XML (Extensible Markup Language) et permet aux
REMARQUE
* programmes et scripts de mettre à jour le contenu, la structure et les styles à la volée.
En gros, l'intégralité du contenu d'un fichier HTML ou XML peut être modifiée. Le
DOM n'est ni en HTML ni en JavaScript, mais il les lie.
PRÊT POUR LA CERTIFICATION La bibliothèque Windows pour JavaScript comprend des fichiers JavaScript et CSS que les
Quel environnement développeurs peuvent utiliser pour créer des applications Windows Runtime plus facilement et
donne aux développeurs rapidement. La bibliothèque, HTML, CSS et WinRT vous permettent de créer des applications.
l'accès à un appareil de L'environnement d'exécution est responsable de l'accès aux appareils, supports, à la mise
l'utilisateur ? en réseau, au stockage local et distant, ainsi qu'à d'autres éléments. Un développeur peut
1.1 utiliser des API et l'environnement d'exécution pour demander l'accès aux périphériques
utilisateur dans une application. Dans une application Windows 8, par exemple, l'appareil
peut être un clavier, une souris, un pavé tactile, une imprimante, une webcam ou un micro.
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur Windows Runtime, visitez la page Web « Fonctionnalités et différences HTML,
CSS et JavaScript (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465380.aspx.
navigateur. (Un « processus » est simplement un programme qui est exécuté.) Dans ce cas,
chaque onglet de navigateur a son propre processus, donc si trois onglets sont ouverts, le
système a trois processus qui s'exécutent pour chacun de ces onglets.
Lorsque vous exécutez une application Windows Store qui a été créée avec JavaScript,
Internet Explorer affiche le contenu HTML un peu comme lorsque vous naviguez vers une
page Web, mais le navigateur est hébergé par un processus différent, appelé WWAHost.
exe. Ce processus exécute l'application à l'intérieur d'un conteneur d'applications. (Vous
découvrirez les conteneurs d'applications dans la section suivante.) WWAHost fait passer le
HTML, CSS et JavaScript dans la page default.html qui est le début de votre application.
PRÊT POUR LA CERTIFICATION
Pour que tout fonctionne bien, le code qui s'exécute dans un conteneur d'applications Windows
Store est restreint à certaines actions, par défaut. Si vous voulez que votre application accède
Quel est le rôle du à un périphérique, une autre application, Internet ou quoi que ce soit en dehors d'elle-même,
processus hôte dans la vous devez déclarer (spécifier) l'interaction dans le manifeste de l'application. Ces déclarations
gestion des applications ? sont trouvent dans la section Fonctionnalités du manifeste. Lorsque l'utilisateur final installe
1.1 l'application, il doit accorder l'autorisation pour l'accès demandé.
Les applications Windows Store utilisent des contrats, qui sont pour l'essentiel des
accords, et des éléments appelés extensions lors de la création d'interactions entre les
applications. Les API WinRT gèrent la communication entre les applications.
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
2. Faites défiler vers le bas et cliquez sur le lien HTML5 dans le volet gauche, actuellement
près du bas de la liste.
3. Parcourez les échantillons jusqu'à trouver une application dont la description est suivie
de « HTML5 », comme l’example 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. L’example Show Ads
using the AdControl in HTML5 nécessite 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
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 développement d'applications (tel que Visual Studio)
déjà installé, n'hésitez pas à télécharger et ouvrir l'exemple d'application pour
parcourir tous les fichiers du package.
9. Vous pouvez aussi accéder au site Web HTML5Rocks.com, cliquer sur le menu
Publications et didacticiels situé en haut de l'écran, cocher la case Exemples, puis
découvrir comment chaque exemple fonctionne et son code.
10. Fermez toutes les fenêtres ouvertes.
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur le package d'application, visitez la page Web « Packages et déploiement
d’applications » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh464929.aspx.
La sécurité du code est une priorité pour les développeurs d'applications. La perte
pécuniaire causée par les virus, chevaux de Troie, attaques de scripts entre sites et autres
logiciels malveillants distribués sur Internet augmente chaque année. Aujourd'hui, la
création d'un environnement sûr et sécurisé pour les applications à exécuter est d'une
importance vitale pour la plupart des individus et des organisations.
PRÊT POUR LA CERTIFICATION La bonne nouvelle est que le .NET Framework 4.0 prend en charge la création et l'exécution
Comment les jeux des applications Windows Store, entre autres technologies. Le .NET Framework est un
d'informations composant de Windows qui s'exécute en arrière-plan, fournissant l'environnement d'exécution
d'identification et
de code pour code scripté ou interprété (comme JavaScript), afin de les aider à s'exécuter avec
d'autorisations protègent-ils
relativement peu de problèmes. Il fournit également un environnement de programmation
orienté objet pour le code objet.
les applications ?
1.1 Le .NET Framework s'appuie maintenant plus fortement sur la « transparence » de sécurité que
dans les versions précédentes. La transparence empêche l'exécution 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
exécute les commandes qui ne dépassent 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 définit plusieurs niveaux de jeux d'autorisations, qui vont de Aucun
(aucune autorisation n'existe et le code ne peut pas s'exécuter) à Confiance totale (le code
peut accéder pleinement à toutes les ressources).
Les autorisations d'identité protègent les assemblies (bibliothèques de code compilé)
sur la base de la preuve, c'est-à-dire des informations sur l'assembly. Chaque autorisation
d'identité représente un type particulier de preuve ou d'informations d'identification qu'un
assembly doit avoir pour s'exécuter.
En outre, AppCache permet à un utilisateur de charger des données qui sont généralement
PRÊT POUR LA CERTIFICATION stockées sur un serveur même lorsque l'utilisateur est hors connexion.
La gestion de l'état
Quelle est la différence est le processus de maintenance des informations de la page Web au cours de plusieurs
entre l'état de session et demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
l'état de l'application ? pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
1.2 lorsque l'utilisateur ferme la session.
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 première demande d'une page Web au serveur
PRÊT POUR LA CERTIFICATION Web, et se termine lorsque l'utilisateur referme le navigateur.
Quelle est l'importance Les informations d'état persistantes sont les données dont une application a besoin après
des informations d'état la fin de la session. De nombreuses applications Web doivent stocker des données (et les
persistantes ? rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
1.2 arrêtés lorsqu'ils retournent sur le site.
Hypertext Transport Protocol (HTTP) est le protocole qui transfère des données
sur le World Wide Web. Il définit les actions effectuées par les serveurs de Web et
les navigateurs en réponse 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
données d'une session à l'autre. Lorsque vous fermez un navigateur Web après avoir
visité un site Web, les données ne sont pas enregistrées.
Pour contourner les limitations du protocole HTTP, les développeurs utilisent des cookies,
PRÊT POUR LA CERTIFICATION
qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
Comment HTML5 gère-t-il visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
les données d'état ? site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
1.2 Web à « se souvenir » d'un utilisateur et à personnaliser son expérience sur ce site.
Cependant, les cookies se sont avérés être un risque pour la sécurité. En outre, si de grandes
quantités de données sont impliquées, toutes les données sont envoyées entre le navigateur et
le serveur à chaque requête, ce qui risque d'entraîner une baisse de performances notable pour
l'utilisateur. En HTML5, les développeurs peuvent utiliser le stockage Web au lieu de cela, ce qui
offre plus de flexibilité, de plus grands ensembles de données et de meilleures performances.
La méthode localStorage permet aux utilisateurs de conserver de plus grandes quantités de
PRÊT POUR LA CERTIFICATION données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
Laquelle des deux dans le temps. La méthode sessionStorage permet de conserver les données uniquement
méthodes, HTML5/ pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
JavaScript, permet à une également de « stockage par onglet ».
application de stocker les
Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
données persistantes ? Il est donc possible de stocker une quantité relativement importante de données sans
1.2 ralentir la connexion ou le site.
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur la gestion d'état et le stockage local et de session, consultez la page Web
« Stockage et récupération efficaces des états (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/
library/windows/apps/Hh781225.asp.
PRÊT POUR LA CERTIFICATION Les appareils mobiles d'aujourd'hui et un grand nombre d'écrans PC intègrent la technologie
Qu'est-ce qu'un d'écran tactile, qui permet à de nombreux utilisateurs d'interagir plus facilement avec les
mouvement et quelle est périphériques et leurs programmes. Un simple toucher du doigt sélectionne un objet ou
son importance avec les appuie sur un bouton, un balayage du doigt fait défiler une liste de photos sur l'écran, et un
appareils tactiles ? pincement effectue un zoom arrière sur une image.
1.3 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
réponse à un mouvement s'appelle un événement tactile. Vous pouvez utiliser JavaScript
pour créer des événements tactiles dans les applications tactiles. En JavaScript, les trois
événements tactiles principaux sont touchend, touchstart et touchmove.
Lorsque vous créez des applications pour un environnement à interactions tactiles, la
X REF
réactivité aux mouvements est un élément clé. La lenteur des réactions peut frustrer la
Vous apprendrez plupart des utilisateurs. Intégrez des effets physiques, comme l'accélération et l'inertie afin
à créer du code d'améliorer la fluidité de l'interaction entre l'utilisateur et l'écran.
JavaScript pour les Un retour visuel pour des interactions performantes et d'autres notifications sont très
interfaces tactiles dans importants. Cela permet à l'utilisateur de savoir s'il utilise correctement le mode paysage
la leçon 9. tactile. Les points d'ancrage permettent aux utilisateurs de s'arrêter à un emplacement
prévu de l'interface, même si un mouvement se situe légèrement en dehors de la cible.
N'oubliez pas également que les utilisateurs ont des doigts de tailles différentes, et il est
recommandé de créer des applications pour des doigts plus larges, plutôt que plus fins. Et
bien sûr, comme les utilisateurs sont droitiers ou gauchers, une application bien conçue
utilise une navigation verticalement symétrique et offre une rotation de l'écran à 90 degrés
pour passer du mode portrait au mode paysage, ou vice-versa.
PRÊT POUR LA CERTIFICATION
Une interaction tactile multipoint se produit lorsqu'un utilisateur appuie sur plusieurs
Quelles meilleures
boutons ou endroits à la fois. Cela se produit fréquemment avec les jeux sur un appareil
pratiques en matière
à écran tactile, où l'utilisateur utilise souvent plusieurs doigts et les pouces simultanément
ou en succession très rapide. Dans cette situation, les balayages et mouvements ne
d'applications tactiles
fonctionnent pas bien, ce qui entraîne un zoom et un défilement involontaires à la place.
devriez-vous tester ?
La solution consiste à désactiver le zoom et le défilement en JavaScript.
1.3
Un autre élément à tester dans une application multipoint est la réaction aux événements
tactiles. Beaucoup d'événements se produiront en même temps, ce qui exige un bon suivi
des doigts et un rendu en boucle pour obtenir des performances optimales.
Lorsque vous déployez une application à interactions tactiles, assurez-vous de tester les
points suivants :
• Réactivité et fluidité générales
• Appuis, pincements, rotations et autres mouvements courants
• Défilement contrôlé
• Panoramique contrôlé
Gestion du cycle de vie d’une application | 13
✚ PLUS D’INFORMATIONS
Les spécifications 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 « Réponse à l’interaction utilisateur
(HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700412.aspx.
Une des premières étapes dans la phase de débogage et de test consiste à valider le
code HTML5. La validation implique de vérifier la validité du code. Un validateur
recherche les éléments susceptibles d'entraîner une interprétation erronée du code,
comme des balises manquantes ou non fermées, une déclaration DOCTYPE
incorrecte, une barre oblique de fin, du code obsolète, etc. (Ne vous préoccupez pas
de ces détails pour l'instant. Vous les découvrirez dans la leçon 2.)
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 télécharger votre fichier sur le service, ou de copier et coller le contenu de
votre fichier dans une zone de texte sur le site Web. Après cela, cliquez sur le bouton
Check. Le service de validation vérifie le code et signale les erreurs ou problèmes 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 exécuter le code.
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 développement
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 développement d'applications. Ensuite, ouvrez le
kit, sélectionnez l'application que vous souhaitez valider et exécutez le validateur. Le
rapport qui s'affiche indique tout problème de l'application. Le Kit de certification des
applications Windows peut être aussi disponible en tant qu'option de menu dans votre
outil de développement d'applications.
Corrigez les problèmes dans un outil de développement d'applications et testez à nouveau
l'application. Répétez ce processus jusqu'à la validation de votre application.
Gestion du cycle de vie d’une application | 15
Figure 1-7
Erreurs et avertissements
découlant 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 aver-
tissements, cliquez sur au moins deux d'entre eux et lisez les informations.
7. Lorsque vous avez terminé, laissez le navigateur Web ouvert.
Figure 1-8
La page Web Service de
validation du CSS du W3C
5. Faites défiler la page vers le bas et consultez les erreurs et les avertissements, le cas
échéant.
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.
La publication d'une application sur une place de marché publique comme le Windows
Store marque l'apogée 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 idée en une opération lucrative.
Un autre bonus lié à la vente via le Windows Store est que vous avez accès à plusieurs outils
pratiques, tels que Microsoft Visual Studio Express et Microsoft Expression Blend. Vous
pouvez également télécharger les données de télémétrie d'applications personnalisées, qui
peuvent grandement accélérer la création et le déploiement d'applications.
Avant de publier votre application dans le Windows Store, vous devez procéder comme suit :
• Inscrivez-vous et payez pour un compte de développeur Windows Store et réservez un
PRÊT POUR LA CERTIFICATION nom pour votre application. Vous devrez également modifier le fichier manifeste de
Comment publier une votre application.
application dans le
• Passez en revue la liste de vérification relative à la soumission d’une application à
Windows Store ?
l'adresse http://bit.ly/HAPmbk. La liste de comprend une série de tâches, notamment
1.4 l'attribution d'un nom à votre application, le choix de détails commerciaux, comme
la sélection 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 d’une application | 17
• Utilisez le Kit de certification des applications Windows pour tester votre application,
si vous ne l'avez pas déjà fait.
• Effectuez quelques captures d'écran des fonctions principales ou uniques de
l'application pour la présenter dans le magasin en ligne. Vous pouvez utiliser l'outil
Capture d'écran, qui est intégré à Windows 7 et Windows 8, pour réaliser des captures
d'écran, ou employer un autre outil de votre choix.
• Demandez à d'autres testeurs ou développeurs de tester l'application sur autant de
plateformes et périphériques différents que possible, notamment si vous avez testé
l'application uniquement dans un simulateur ou un émulateur.
• Incluez une déclaration de confidentialité si votre application collecte des informations
REMARQUE
* à caractère personnel ou est exécutée via un logiciel protégé par copyright.
Vous devez vous Lorsque vous êtes prêt, utilisez votre outil de développement d'applications (tels que
inscrire et payer Visual Studio 12 ou Visual Studio 12 Express pour Windows 8) pour créer un package
pour un compte de d'application finale, puis téléchargez-le sur le Windows Store.
développeur Windows Il est de coutume d'attendre l'approbation du magasin. Si elle est approuvée, votre application est
Store pour ajouter votre certifiée et répertoriée. Cependant, même après tout votre travail préparatoire, votre application
application dans le peut être rejetée, ce qui signifie que vous devez corriger tout problème signalé par le personnel
menu du magasin. de magasin d'applications si vous voulez tester de nouveau l'application et la republier.
• Le .NET Framework fournit un environnement sûr dans lequel les applications HTML5/
JavaScript peuvent s'exécuter. L'infrastructure utilise la transparence de la sécurité pour
séparer les différents types de code en cours d'exécution et des jeux d'autorisations et des
autorisations d'identité pour contrôler l'environnement.
• Un état de session est créé la première fois qu'un utilisateur demande à accéder à 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 données qui existent après la fin d'une session.
• En HTML5, les développeurs peuvent utiliser les méthodes JavaScript localStorage et
sessionStorage pour traiter efficacement les données d'état.
• AppCache est un type de stockage Web qui permet à l'utilisateur de charger des données qui sont
normalement stockées sur un serveur, même lorsque l'utilisateur est en mode hors connexion.
• Sur un périphérique à écran tactile, un balayage du doigt s'appelle un mouvement et la
réponse de l'application à ce mouvement s'appelle un événement.
• Le développement d'applications à interactions tactiles nécessite une connaissance approfondie
de l'interaction des doigts avec l'écran et de la prise en compte des différentes tailles des doigts.
• Vous pouvez utiliser JavaScript pour créer des applications à interactions tactiles,
principalement en ayant recours aux événements touchstart, touchend et touchmove.
• Un avantage pour les développeurs chevronnés qui veulent créer des applications
Windows Store est que leurs connaissances de HTML5 et le code existant se prêtent bien
au développement d'applications Windows Store.
• Toutes les applications doivent être soigneusement testées et déboguées pour s'assurer
qu'elles s'exécutent de façon fiable et avec le moins d'erreurs possible avant leur distribution
et leur déploiement.
• Une fois que votre application a été testée, déboguée et le code validé ou certifié, vous devez
effectuer quelques étapes de plus pour préparer son chargement sur une place de marché
telle que le Windows Store. Vous pouvez utiliser Visual Studio 11 ou Visual Studio 11 Express
pour réaliser le projet.
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1.
Une interface de programmation d’application (API) est une liste d'instructions
qui permet à un programme de communiquer avec un autre programme.
V F 2.
Il est recommandé de publier votre application sans la valider pour la tester
directement en production.
V F 3.
Un émulateur passe en revue les documents HTML et CSS à la recherche
d'erreurs.
V F 4.
Il est conseillé de créer des applications tactiles pour des doigts plus larges,
plutôt que fins.
V F 5.
Une application indépendante de la plateforme peut s'exécuter sur différents
systèmes d'exploitation de périphériques mobiles et de bureau.
TERMES CLÉS
attribut élément figure
attribut global élément vidéo
balise vide entité
balises image raster
codec image vectorielle
compression imbrication
doctype obsolescence
élément rendu
élément audio Scalable Vector Graphics (SVG)
élément canvas valide
élément figcaption video compression
21
22 | Leçon 2
Les développeurs très occupés de Malted Milk Media vous ont demandé d'effectuer
des recherches sur les nouvelles balises disponibles dans HTML5. Ils sont
particulièrement intéressés par les balises se rapportant aux graphiques et au contenu
multimédia. Votre tâche consiste à obtenir le maximum d'informations sur les
nouvelles balises HTML5 et à préparer de courtes présentations de chacune des
balises, en fournissant des exemples.
Le langage HTML (Hypertext Markup Language) utilise des balises pour décrire le
contenu qui s'affiche sur une page Web. Un élément est composé à la fois de balises
L'ESSENTIEL et du contenu figurant entre celles-ci. L'utilisation de caractères spéciaux dans une
page Web nécessite l'encodage de ces derniers. Enfin, chaque page Web requiert la
déclaration doctype en haut de la page.
Le langage HTML (Hypertext Markup Language) est appelé langage de balisage, car il permet
de décrire (baliser) les divers éléments du contenu affiché sur une page Web. Une page Web
comportant un balisage inclut des balises, qui sont des mots clés permettant de structurer une
page HTML. (Vous en apprendrez davantage sur les balises un peu plus loin.) Pour utiliser le
langage HTML de manière optimale, il convient de savoir comment et quand utiliser les
balises appropriées. La combinaison de contenu, de balises et parfois de graphiques, de
contenu multimédia ou d'autres contenus constitue la clé de voûte 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 périphérique mobile tel qu'un smartphone
ouvre un fichier HTML, il rend (interprète et reproduit) le contenu de la page.
Chaque page HTML comporte des balises. Une balise est un mot clé entouré de
crochets. La plupart des balises sont utilisées par paire ; une balise est appelée balise
d'ouverture ou de début, 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 même casse que
la balise de début. La balise de fin est identique à la balise de début, 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 définition. Par exemple, les balises
suivantes créent 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 appelées
balises vides parce qu'elles ne requièrent pas de balise de fin. HTML5 est moins restrictif
que HTML 4. Ainsi, il n'est pas nécessaire d'inclure des balises de fin pour tous les
éléments (même si certains éléments exigent toujours des balises de début 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 début et de fin, entièrement
en minuscules, par souci de cohérence.
De nombreuses balises sont disponibles pour les pages HTML. Quelques-unes des balises
les plus couramment utilisées sont répertoriées dans le Tableau 2-1. Les quatre premières,
<html>, <head>, <title> et <body>, sont requises sur chaque page Web.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 23
Tableau 2-1
Balises HTML courantes Balise 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
déclaration 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 clés
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.
<title> Affiche le titre de la page Web qui apparaît en haut du navigateur
Web, généralement sur l'onglet de la page dans un navigateur
à onglets.
<body> Entoure le contenu visible sur la page Web affichée dans un
navigateur Web.
<a href=URL> Balise généralement utilisée pour ancrer une URL à du texte ou
une image ; elle peut également créer un ancrage nommé dans
un document pour permettre la liaison aux sections du document.
<b> Applique des caractères gras au texte.
Crée un en-tête pouvant aller du premier niveau (h1) au sixième
<hx>
niveau (h6).
Insère une image depuis un fichier ou un autre site Web.
<img>
Définit le texte en tant que paragraphe.
<p>
Une paire de balises ou une balise vide est également appelée élément. Un élément peut
décrire le contenu, insérer des graphiques et créer des liens hypertexte.
UTILISATION D'ATTRIBUTS
Toutes les balises n'incluent pas une description des données, ou cette description
n'est pas toujours suffisamment détaillée pour le rendu. Dans ce cas, certains éléments
doivent comporter des attributs qui sont des modificateurs d'éléments HTML permettant
de fournir des informations supplémentaires.
Les attributs sont faciles à utiliser et sont simplement des extensions d'éléments.
Vous ajoutez des attributs aux éléments à l'aide de la syntaxe de base suivante :
<tag attribute="value">
Notez que l'attribut et sa valeur se trouvent tous les deux à l'intérieur d'une balise.
Vous devez inclure un attribut dans une balise afin que le navigateur Web soit en mesure
de le gérer. Voici un exemple d'attribut utilisé lors de la création d'un lien hypertexte :
<a href="http://www.example.com">Ceci est un lien.</a>
Figure 2-1
Un lien hypertexte est
obtenu lorsque l'élément
d'ancrage est doté de
l'attribut href
La création 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 leçon. HTML5 inclut plusieurs attributs globaux qui
peuvent être utilisés avec n'importe quel élément HTML5. Parmi les attributs globaux
disponibles figurent par exemple id, lang et class.
ÉLÉMENTS IMBRIQUÉS
L'affichage de votre code HTML dans un navigateur Web varie en fonction de la façon
dont vous combinez les éléments, leurs attributs (le cas échéant) et le contenu de la page.
Lorsque deux ou plusieurs éléments s'appliquent au même bloc de texte, vous devez
imbriquer correctement les paires de balises afin qu'elles fonctionnent comme escompté.
L'imbrication est l'insertion d'un élément dans un autre. Voici un exemple d'imbrication
qui fonctionne correctement :
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i> par
temps chaud.</p>
Dans cet exemple, nous voulons que les mots « eau fraîche » 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> après la balise de fin </p> (comme illustré ci-dessous), les mots
« eau fraîche par temps chaud » s'affichent en gras, mais seuls les mots « eau fraîche » sont
en italique. Cet affichage semble incorrect, comme le montre la figure 2-2.
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</i> par temps
chaud.</p></b>
Figure 2-2
Balises incorrectement
imbriquées
La règle applicable à l'imbrication requiert que les balises imbriquées soient fermées avant
leurs balises parentes. En reprenant l'exemple correct, vous remarquez que l'élément
paragraphe s'ouvre en premier, suivi par l'élément italique, puis l'élément police. Ensuite,
l'élément gras (bold) se ferme, suivi par l'élément italique et enfin l'élément paragraphe.
Les éléments italique et gras sont entièrement imbriqués dans l'élément paragraphe.
gèrent plutôt bien les caractères spéciaux de votre clavier, tels que ceux qui se trouvent au-dessus
des touches numériques. Dans la majorité des cas, ces caractères sont correctement rendus.
Toutefois, dans certains navigateurs, le caractère attendu ne s'affiche pas et est remplacé par
un caractère ou un symbole incompréhensible. Ces anomalies sont faciles à résoudre. Chaque
caractère spécial pouvant être reproduit dans une page Web est doté d'un nom d'entité et d'un code
numérique. Vous pouvez utiliser l'un ou l'autre de ces éléments dans une page Web. Toutefois, il est
généralement plus sûr de représenter les symboles tels que la marque commerciale à l'aide de l'entité
numérique correspondante pour garantir un rendu adéquat dans un grand nombre de navigateurs.
Une entité commence par une esperluette (&) et se termine par un point-virgule (;). Par
exemple, l'entité ® représente le symbole de marque déposée et son code numérique est
®. Lorsqu'un navigateur rencontre une esperluette, il essaie de faire correspondre les
caractères qui suivent à une entité. S'il trouve une correspondance, il affiche le caractère spécial
à la place de l'entité. Le Tableau 2-2 répertorie quelques-unes des entités les plus utilisées.
Tableau 2-2
Exemples d'entités HTML5 Symbole Description Nom de l'entité Code
© Copyright © ©
° Degré ° °
$ Dollar $ $
% Pourcentage % %
® Marque déposée ® ®
Il est également important de savoir que, dans l'encodage de caractères 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
déclaration suivante à l'élément head :
<meta charset="UTF-8">
La spécification HTML5 requiert que la totalité de l'élément meta se trouve dans les
premiers 1 024 octets du document ; vous devez donc l'inclure tout en haut de la page,
dans l'élément head.
✚ PLUS D’INFORMATIONS
Pour obtenir la liste des entités prises en charge par HTML5, accédez à http://dev.w3.org/html5/html-
author/charref.
COMPRENDRE LE DOCTYPE
Le doctype est une déclaration placée au tout début de la grande majorité des documents
HTML. Lorsqu'un navigateur Web lit une déclaration doctype, il suppose que tout le
contenu de la page Web utilise le langage ou les règles spécifiés dans la déclaration.
Dans HTML 4, toutes les déclarations <!DOCTYPE> exigent une référence à une définition
du type de document (DTD). La DTD est simplement un ensemble de règles 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 HTML 4 peut utiliser différentes DTD. En raison de
la façon dont le langage HTML5 a été conçu, il ne nécessite pas de référence à une DTD.
Dans HTML 4, la déclaration doctype spécifie 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 | Leçon 2
<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 différentes parties de la page, par exemple entre la déclaration doctype
et la balise <html>, ne s'affichent pas dans une page Web. Il en est de même pour les retraits,
comme ceux des paragraphes. (Notez que les éléments paragraphe sont légèrement décalés par
rapport aux balises <body>. Les lignes vierges et les retraits aident simplement à rendre le balisage
plus lisible dans un outil d'édition.
La figure 2-3 illustre le rendu de la page Web pour le balisage HTML précédent.
Figure 2-3
Page Web simple rendue par
un navigateur
Comme indiqué dans la leçon 1, vous pouvez utiliser le service de validation du W3C (World
Wide Web Consortium) à l'adresse http://validator.w3.org pour vérifier et valider le code
HTML. Si une page Web respecte les spécifications à la lettre, elle est considérée valide.
5. Pour voir l'effet d'une balise manquante dans une paire de balises, supprimez la balise
de fin </b> après « fraîche ». Créez 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 fraîche » jusqu'à la fin du document, est désormais
en caractères gras.
Dans Internet Explorer 9, vous pouvez appuyer sur F12 pour ouvrir le mode navigateur.
Ce mode permet de modifier les pages sans quitter le navigateur. Il est également
REMARQUE
* possible de cliquer sur Mode document dans la barre de menus, puis de sélectionner
une ancienne version du navigateur pour vérifier comment la page s'affiche.
28 | Leçon 2
6. Pour voir l'effet d'une imbrication incorrecte, déplacez la balise de fin </i> après la
dernière balise </p>. Réenregistrez le fichier L2-animal-test.html et affichez-le dans un
navigateur. Tout le contenu, depuis les mots « eau fraîche » jusqu'à la fin du document,
est désormais en caractères gras et en italique, comme illustré à la figure 2-5.
Figure 2-5
Effets d'une imbrication
erronée des balises
Lors de l'affichage des pages Web que vous êtes en train de modifier, il est préférable
d'utiliser plusieurs navigateurs Web pour vérifier que votre balisage s'affiche comme
prévu pour le plus grand nombre d'utilisateurs possible. Certains outils d'édition
REMARQUE
* comportent une liste vous permettant de sélectionner un navigateur pour la
prévisualisation des pages Web. Si votre outil n'inclut pas cette option, vous devrez
installer trois ou quatre navigateurs différents et ouvrir vos pages Web dans chacun d'eux.
11. Vous avez probablement reçu un message d'erreur se rapportant à l'encodage des
caractères. Pour résoudre ce problème, ouvrez le fichier L2-animal-copyright.html
dans votre outil d'édition, insérez <meta charset="UTF-8"> dans l'élément 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, téléchargez-le une nouvelle fois dans l'outil de validation afin
de le vérifier. Le vérificateur devrait confirmer que votre fichier est valide.
13. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement
à la section suivante.
✚ PLUS D’INFORMATIONS
Si vous trouvez les rubriques de cette section difficiles à assimiler, il peut être utile de réaliser
quelques didacticiels tels que ceux disponibles sur le site Web W3Schools.com.
HTML5 utilise la plupart des éléments et attributs déjà spécifiés dans HTML 4, avec
quelques nouvelles balises. En outre, l'utilisation par défaut d'autres balises a été
L'ESSENTIEL modifiée et certains éléments ne sont plus pris en charge. Parmi les nouveaux éléments
textuels figurent notamment command, mark, time, meter et progress. Les éléments
basefont, center, font et strike sont désormais obsolètes.
Tous les éléments abordés dans la première section de cette leçon fonctionnent
correctement dans HTML5, bien qu'ils soient utilisés depuis déjà plusieurs années dans
les versions antérieures du langage HTML. Dans l'ensemble, HTML5 modifie très peu
la syntaxe HTML. Cela signifie que les développeurs peuvent continuer à utiliser la plupart
des éléments comme ils le faisaient jusqu'ici. Certains éléments conservent la même balise
mais leur fonctionnalité a été légèrement modifiée, comme expliqué un peu plus loin.
HTML5 inclut également un grand nombre de nouveaux éléments qui permettent
X REF d'optimiser les fonctionnalités des pages Web ou de simplifier le balisage. Il s'agit d'éléments
Le balisage de mise liés au contenu multimédia (par exemple, audio et video) et d'autres éléments qui rendent la
en page, de création structure d'une page Web plus intuitive. Les balises liées à la structure incluent des éléments
de sections et de pour les sections de page, les en-têtes, les pieds de page, la navigation et même les barres
formulaires HTML5 est latérales. Lors de la création de formulaires Web, les nouvelles fonctionnalités de formulaire
couvert dans la leçon 3. facilitent considérablement la création et la validation. Toutefois, cette section porte
essentiellement sur le balisage HTML5 associé au texte.
Certains éléments textuels HTML 4 ont à présent une signification ou une fonction
légèrement différente dans HTML5. Parmi ces éléments figurent <b>, <i>, <strong>,
<em> et <small>. L'élément <b> doit maintenant être utilisé pour mettre en évidence
le texte, sans indication d'importance, par exemple les mots clés ou les noms de
produits. L'élément <i> définit désormais le contenu dans un ton ou une humeur
différente, comme un texte oral. L'élément <strong> souligne l'importance, tandis que
l'élément <em> indique un accent d'insistance. L'élément <small> doit être utilisé pour
le texte en petits caractères, comme la mention de copyright.
30 | Leçon 2
Examinons de plus près certains des éléments de texte HTML 4 dont la signification ou la
fonction a légèrement changé dans HTML5 :
• <b> : cet élément d'utilisation courante a toujours représenté les caractères gras ; il
était souvent utilisé pour mettre en évidence le texte ou en souligner l'importance.
Le W3C suggère qu'il soit désormais utilisé pour indiquer un texte « stylistiquement
décalé », sans indication d'importance. Utilisez <b> pour les mots clés, les noms de
produits et les éléments interactifs (tels que les éléments sur lesquels vous cliquez ou
appuyez dans une liste de procédures). Par exemple :
<p>Cliquez sur le bouton <b>Vérifier</b>, puis sur
<b>OK.</b> </p>
• <i> : l'élément italique est maintenant utilisé pour du texte dans un « ton ou une
humeur différente ». Il peut s'agir d'un texte oral, de pensées 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 cœur,</i> pensait-elle.
• <strong> : l'élément strong indique un contenu d'extrême importance, plus important
que les mots voisins. Par exemple :
<p>Chantal portait la <strong>même</strong> robe depuis trois jours.</p>
• <em> : l'élément 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'élément small doit être utilisé pour les petits caractères 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 recherchée de certains de ces éléments dans HTML5 peut prêter à confusion,
par exemple le cas d'emploi de l'élément italique. La meilleure méthode consiste à garantir
la cohérence sur une page ou un site Web, et à observer comment les autres développeurs
utilisent les mêmes éléments.
Figure 2-7
Utilisation des balises
<strong> et <small>
Parmi les nouveaux éléments HTML5 associés au texte figurent <command>, <mark>
et <time>. L'élément <command> crée un bouton de commande. Lorsque l'utilisateur
clique sur un bouton de commande, une commande s'exécute. L'élément <mark> met
en évidence du texte sur une page, à l'instar de la fonctionnalité de mise en
surbrillance de Microsoft Word. L'élément <time> affiche une heure et une date
lisibles par une machine, par exemple 10 : 10 AM., CST, 19 juillet 2012. Il est
particulièrement utile pour les blogs et les calendriers et il peut également aider les
moteurs de recherche à générer de meilleurs résultats lorsque l'heure et la date font
partie des critères de recherche.
</menu>
• <mark> : l'élément mark est très pratique pour mettre en évidence du texte sur une
page. Par exemple, vous pouvez l'utiliser sur une page de résultats 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 15 kilos</mark>.</p>
• <time> : l'élément 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'élément
time définit l'heure et la date à l'aide du format 24 heures et du calendrier grégorien,
respectivement. L'utilisation de dates et d'heures lisibles par une machine sur votre
32 | Leçon 2
page Web permet d'optimiser les résultats générés par les moteurs de recherche.
Par exemple :
<time datetime="2013"> correspond à l'année 2013
<time datetime="2013-04"> correspond à avril 2013
<time datetime="04-15"> correspond au 15 avril (de n'importe quelle année)
Parmi les nouveaux éléments, il également possible de citer meter et progress. L'élément
meter indique le contenu sous forme de fraction d'une plage connue, comme l'utilisation
du disque. L'élément progress indique l'état d'avancement d'une tâche par rapport à
l'achèvement de celle-ci.
Figure 2-8
L'élément mark met en
surbrillance un texte
spécifique
Ceci est logique, car il est très facile de modifier les styles de CSS s'appliquant
à l'ensemble d'une page Web ou même à un site Web. Lors de l'insertion de styles
individuels, même dans une seule page Web, les modifications s'avèrent fastidieuses
lorsqu'un changement est nécessaire.
Les éléments HTML suivants sont considérés comme obsolètes et ne sont pas pris
en charge dans les pages HTML5 :
• <acronym> : définit des acronymes qui, dans HTML 4, peuvent être cités comme s'il
s'agissait d'un mot, par exemple GUI pour l'interface utilisateur graphique. Utilisez la
balise <abbr> à la place.
• <applet> : définit une applet incorporée. Utilisez la balise <object> à la place.
• <basefont> : définit une couleur, une taille ou une famille de police par défaut 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> : définit une liste de répertoires. Utilisez la balise <ul> à la place.
• <font> : spécifie le type, la taille et la couleur de police du texte. Utilisez CSS à la place.
• <frame> : définit un cadre spécifique (une fenêtre) dans un jeu de cadres (voir élément suivant).
• <frameset> : définit un jeu de cadres pour le positionnement de plusieurs cadres (fenêtre).
• <noframes> : affiche le texte pour les navigateurs ne prenant pas en charge les cadres.
• <strike> : définit 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> : définit le texte télétype ou à espacement fixe. Utilisez la balise <code> ou CSS à la place.
Même si un élément 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 éléments obsolètes s'affichent correctement dans ces
navigateurs. Toutefois, lors de la création de pages Web, il est recommandé de partir
du principe que les visiteurs qui les consultent utilisent un navigateur relativement récent,
ce qui sous-entend l'utilisation des derniers éléments 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 éléments obsolètes. Malgré cela, si une page Web requiert une mise
en forme importante, il est préférable d'utiliser CSS pour plus d'efficacité.
Les attributs suivants ne sont pas utilisés dans HTML5, bien qu'ils ne fassent pas
réellement partie d'une spécification HTML :
• bgcolor : applique une couleur d'arrière-plan spécifiée au contenu décrit par l'élément
associé, généralement un tableau ou une page. Utilisez la propriété CSS background-
color à la place.
• bordercolor : applique une couleur spécifiée à la cellule d'un tableau. Utilisez la
propriété CSS border-color à la place.
• bordercolorlight : applique une couleur spécifiée aux coins supérieurs et gauche d'une
cellule de tableau. Utilisez la propriété CSS border-color à la place.
• bordercolordark : applique une couleur spécifiée aux coins inférieurs et droit d'une
cellule de tableau. Utilisez la propriété CSS border-color à la place.
À l'instar des éléments obsolètes, 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 D’INFORMATIONS
Pour connaître les nouveautés 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 » (Éléments HTML) de W3C à l'adresse http://dev.w3.org/html5/markup/
elements.html#elements.
34 | Leçon 2
Figure 2-9
Effets des éléments center
et big
Utilisez l'élément img pour afficher les images liées dans une page Web. Les images
peuvent se trouver dans les fichiers HTML des pages Web, généralement dans un
sous-dossier d'images, ou sur un autre serveur ou site Web. Les éléments figure et
figure caption sont nouveaux dans HTML5. Ils vous donnent plus de contrôle sur le
L'ESSENTIEL type d'images affichées et permettent d'inclure des légendes, respectivement. L'élément
canvas est utilisé pour des opérations dynamiques de dessin, de rendu et de manipulation
d'images et de graphiques dans HTML5. L'élément SVG (Scalable Vector Graphics) vous
permet de créer 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.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 35
Il est possible d'afficher différents types d'images sur une page Web et la majorité
appartiennent à deux catégories principales : tramée (ou bitmap) et vectorielle. Une image
tramée est composée de pixels, tandis qu'une image vectorielle est formée de lignes
et de courbes basées sur des expressions mathématiques. Une photographie est une image
tramée, généralement au format JPG. D'autres formats de fichiers tramés fonctionnent
bien sur les pages Web, notamment PNG, GIF et BMP. Une image vectorielle est une
illustration, telle un dessin au trait. Souvent, les développeurs 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
PRÊT POUR LA existe une différence majeure entre les deux types de fichiers, à savoir les images tramées
CERTIFICATION perdent en qualité (elles se pixellisent) à mesure que vous les agrandissez, tandis que
Quel balisage la qualité des images vectorielles reste constante, même lorsqu'elles sont agrandies.
utilisez-vous pour La principale méthode pour ajouter des images à un document HTML est l'utilisation de
afficher une image l'élément img. À l'instar de la balise d'ancrage, la balise img n'a aucun effet à elle seule ; elle
externe sur une page doit être dotée d'attributs et de valeurs spécifiant l'image que le navigateur Web doit afficher.
Web ?
2.2
Par exemple, pour insérer une image nommée redball.jpg qui se trouve dans un
sous-dossier appelé images, entrez l'élément 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 nécessaires pour que le code soit pleinement valide. La valeur de l'attribut alt
(abréviation de « alternate text » ou texte de remplacement) s'affiche lorsque l'utilisateur
positionne le pointeur de la souris sur l'image ; dans ce cas précis, le texte « Red ball
graphic » s'affiche. Le W3C exige l'attribut alt pour faciliter l'accessibilité des personnes
présentant un handicap. Les personnes ayant une acuité visuelle réduite 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 insérer une image nommée logobleu.png, accessible
depuis un autre site Web, entrez l'élément suivant :
<img src="http://www.exemple.com/mrkt/images/logobleu.png"
alt="Logo bleu Société XYZ" />
L'élément img utilise plusieurs attributs, décrits dans le Tableau 2-3.
Tableau 2-3
Attributs de l'élément img Attribut Valeur Description
src URL Spécifie l'emplacement de l'image, par ex. un chemin
d'accès ou une URL
alt Text Spécifie 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 Spécifie la hauteur d'une image
width pixels Spécifie la largeur d'une image
ismap ismap Spécifie une image en tant qu'image interactive sur le serveur
usemap #mapname Spécifie une image en tant qu'image interactive sur le
client (il s'agit d'une image avec des zones définies qui
sont des liens interactifs)
Deux nouveaux éléments liés aux graphiques ont été ajoutés dans HTML5. Il s'agit
de figure et figcaption. L'élément figure spécifie le type de figure que vous souhaitez
utiliser dans un document HTML, par exemple une illustration ou une photographie.
L'élément figcaption fournit une légende pour la figure.
36 | Leçon 2
L'élément figure spécifie le type de figure à ajouter, par exemple une image, un dia-
gramme, une photographie, etc. Cet élément offre un atout majeur : la possibilité d'ajouter
facilement plusieurs images côte à côte. Avec HTML 4, cela exigeait un balisage assez
important. L'élément figcaption est facultatif. Il ajoute une légende à une image sur une
page Web ; cette légende peut s'afficher avant ou après l'image.
Le balisage suivant utilise l'élément figure, spécifie la largeur et la hauteur de l'image et
ajoute une légende. Le résultat est illustré à la figure 2-10 :
<figure>
<img src="doghappy.jpg" alt="Chien heureux"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
Figure 2-10
Utilisation des éléments
Illustration: © MightyIsland/iStockphoto
figure et figcaption pour
afficher une image avec une
légende
Le balisage suivant est destiné à une figure avec plusieurs images partageant la même
légende. Le résultat obtenu est illustré à la figure 2-11 :
<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>
Figure 2-11
Utilisation des éléments
Illustration: © MightyIsland/iStockphoto
✚ PLUS D’INFORMATIONS
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.
Illustration: © MightyIsland/iStockphoto
3. Remplacez le balisage de la figure qui suit l'élément h1 par ce qui suit, en remplaçant
les noms des fichiers image (doghappy.jpg, dogpaws.jpg et dogwalk.jpg) par les noms
de vos propres fichiers image :
<figure>
</figure>
Figure 2-13
Page Web avec plusieurs
images et une légende
Illustration: © MightyIsland/iStockphoto
5. Fermez le fichier L2-animal-imagesmultiples. Laissez l'outil d'édition et le navigateur
Web ouverts si vous passez immédiatement à l'exercice suivant.
L'élément canvas est nouveau dans HTML5. Il crée un conteneur pour les graphiques
et utilise JavaScript pour dessiner de manière dynamique les graphiques.
Avec l'élément canvas, la page Web devient un bloc de dessin, tandis que les commandes
JavaScript vous permettent de tracer des formes composées de pixels dans la zone de
dessin, avec notamment des couleurs, des dégradés et des motifs de remplissage. Canvas
permet également de rendre le texte avec différents effets et d'animer les objets en les
faisant se déplacer, en modifiant l'échelle, etc.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 39
Les développeurs utilisent l'élément canvas pour créer des jeux en ligne, des galeries
de photos dynamiques, des codes de titre et bien plus encore. Les fonctions de l'élément
REMARQUE
* canvas destinées aux graphiques et aux animations visent à offrir une qualité similaire
à celle des animations Flash.
</html>
Vous pouvez inclure des JavaScripts dans l'élément head de votre document HTML,
REMARQUE
* ou dans un fichier externe.
3. Si aucun rectangle bleu n'est visible, accédez à la page Web du service de validation
du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-canvas.html et
cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par
le vérificateur, si nécessaire. Réenregistrez le fichier et affichez-le dans un navigateur.
4. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez
immédiatement à l'exercice suivant.
context.strokeRect(10,20,200,100);
context.strokeRect(10,20,200,100);
3. Supprimez les attributs width et height de l'élément canvas dans le corps (après id
="smlRectangle").
4. Enregistrez le fichier et affichez-le dans un navigateur Web. La forme doit ressembler
à celle de la figure 2-15.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 41
Figure 2-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 immédiatement à l'exercice suivant.
5. Appuyez de nouveau sur F12. Un message d'erreur s'affiche, indiquant que le navigateur
ne reconnaît pas une propriété ou une méthode. Fermez le message d'erreur. La fenêtre
du navigateur affiche le texte de secours, comme illustré à la figure 2-16.
Figure 2-16
Le texte s'affiche si le
navigateur ne prend pas en
charge canvas
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur l'élément 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/
répertorie les codes de couleur RVB.
SVG (Scalable Vector Graphics) est un langage permettant de décrire les graphiques 2D
en langage XML (Extensible Markup Language). XML s'apparente au format HTML et
il a joué un rôle important dans les pages Web HTML 4.01. La technologie SVG n'est
pas nouvelle, mais HTML5 permet désormais aux objets SVG d'être incorporés dans les
pages Web sans l'utilisation des balises <object> ou <embed>. (Tous les types de
graphiques SVG sont appelés objets et SVG est chargé dans le DOM.)
Comme son nom l'indique, SVG (Scalable Vector Graphics) sert essentiellement à créer des
PRÊT POUR LA formes graphiques vectorielles évolutives, mais vous pouvez également créer des images et
CERTIFICATION
du texte. À l'image de l'élément canvas, vous pouvez appliquer des couleurs unies, des
Quels types d'objets
pouvez-vous créer avec dégradés et des motifs de remplissage aux objets SVG, ou encore copier et cloner des
SVG ? objets. Vous pouvez également utiliser SVG lors de l'insertion d'un fichier PNG, JPG ou
2.2 GIF. SVG vous permet de fournir des instructions de dessin plutôt qu'un fichier image.
L'un des principaux atouts de SVG est sa flexibilité. La taille du graphique vectoriel change
de manière à s'adapter à l'écran sur lequel il est affiché, qu'il s'agisse d'un écran d'ordinateur
de 32 pouces ou d'un périphérique mobile comme un smartphone. Seul le code XML décrivant
le graphique est transmis et par conséquent, même les images de grande taille ne nécessitent
pas beaucoup de bande passante. Pour cette raison, vous pouvez utiliser SVG en arrière-plan
d'une page Web, sans avoir à utiliser la propriété repeat. (La plupart des arrières-plans de page
Web unis sont en fait une ligne fine répétée à 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.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 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
créer 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 définir le cercle en spécifiant les points x et y et
le rayon par rapport au centre. SVG est doté d'une pléthore d'attributs qui permettent de
créer différents types de formes. Les attributs sont disponibles sur le site Web de W3C
à l'adresse http://www.w3.org/TR/SVG/attindex.html.
✚ PLUS D’INFORMATIONS
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.
Figure 2-18
La modification d'une seule
valeur de paramètre modifie
la forme de l'objet
PRÊT POUR LA Il n'y a aucune règle préétablie pour la sélection de canvas ou de SVG. Votre choix
CERTIFICATION
dépend principalement de la nature de votre projet et de votre niveau de compétence
Quand faut-il utiliser
l'élément canvas plutôt dans l'utilisation de l'un ou l'autre de ces éléments.
que SVG ?
2.2 Voici quelques considérations qui vous aideront à prendre la bonne décision :
• Si le dessin est relativement petit, utilisez canvas.
• Si le dessin contient un nombre important d'objets, utilisez canvas. SVG commence
à se dégrader, au fur et à mesure que des objets sont ajoutés au modèle DOM.
• En règle générale, utilisez canvas pour les petits écrans, tels que ceux des périphériques
mobiles. À mesure que la taille de l'écran augmente et que davantage de pixels sont
nécessaires, la zone de dessin se pixellise et il est donc préférable d'utiliser SVG.
• Si vous devez créer des documents vectoriels particulièrement détaillés dont la mise
à l'échelle est importante, optez pour SVG.
• Si vous affichez des données en sortie en temps réel, par exemple des cartes, des cartes
superposables, des données météorologiques et ainsi de suite, utilisez l'élément canvas.
Astuce de Microsoft : représentez-vous l'élément canvas comme étant similaire
à Microsoft Paint. Vous pouvez dessiner des images à l'aide de formes et d'autres outils
et le résultat est basé sur des pixels. Imaginez SVG comme étant semblable à une
diapositive PowerPoint Office, avec des objets redimensionnables.
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur la façon de choisir la meilleure méthode de dessin, à savoir canvas ou
SVG, reportez-vous à la page http://msdn.microsoft.com/fr-fr/library/ie/gg193983(v=vs.85).aspx.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 45
HTML5 introduit les éléments audio et video qui rendent désormais superflue
L'ESSENTIEL l'utilisation de plug-ins ou de lecteurs multimédias pour écouter de la musique ou
regarder des vidéos via un navigateur Web.
Les éléments audio et video sont deux des principales nouveautés de HTML5. Ils vous
permettent de proposer du contenu multimédia dans un navigateur Web sans avoir besoin
PRÊT POUR LA de plug-ins comme le lecteur multimédia Microsoft Windows, Microsoft Silverlight,
CERTIFICATION
Adobe Flash ou Apple QuickTime. Cela signifie que les utilisateurs peuvent simplement
Quelles balises HTML5
ouvrir un navigateur prenant en charge HTML5 pour écouter de la musique ou des livres
permettent d'incorporer
du contenu multimédia
audio, profiter d'effets sonores enrichis et regarder des clips vidéo ou des films.
dans une page Web ? La spécification HTML5 inclut les balises <video> et <audio> afin d'incorporer le
2.3 multimédia. Les sections suivantes décrivent chacune de ces balises en détail.
Vous utilisez l'élément video avec l'attribut src pour désigner un fichier vidéo devant
être lu dans un document HTML. Par ailleurs, l'ajout des attributs height et width vous
permettent de contrôler la taille de la fenêtre dans laquelle s'affiche la vidéo.
L'élément video vous permet d'incorporer des vidéos dans des documents HTML en
PRÊT POUR LA utilisant un minimum de code. La structure utilisée pour l'incorporation d'une vidéo est
CERTIFICATION simple. Voici un exemple de balisage pour l'ajout d'un fichier MP4 à une page Web :
Quel est le balisage
utilisé pour l'élément <video src="intro.mp4" width="400" height="300">
video HTML5 ? </video>
2.3
L'attribut src pointe vers le nom du fichier vidéo à lire (dans ce cas, video.mp4). Les
attributs height et width spécifient la taille de la fenêtre dans laquelle s'affiche la vidéo.
Vous pouvez ajouter d'autres attributs permettant de contrôler la vidéo :
• poster : affiche un fichier image statique avant le chargement de la vidéo
• autoplay : démarre automatiquement la lecture de la vidéo après le chargement de la
page
• controls : affiche un ensemble de contrôles utilisés pour lire, mettre en pause ou arrêter
la vidéo et régler le volume
• loop : répète la vidéo
Lorsque tous les contrôles ci-dessus sont utilisés, le balisage doit se présenter 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 référence à un fichier vidéo MP4. Parmi les autres formats
vidéo souvent utilisés sur le Web figurent également H.264, OGG et WebM, bien que
WebM soit utilisé moins de 10 % du temps. Outre le format vidéo, vous devez également
spécifier le codec, une technologie utilisée pour compresser les données. La compression
46 | Leçon 2
réduit la quantité d'espace nécessaire pour stocker un fichier ainsi que la bande passante
nécessaire pour la transmission du fichier. La compression vidéo réduit la taille des
images vidéo en conservant la qualité vidéo la plus élevée avec une vitesse de
transmission minimum. Tout ceci a pour effet d'améliorer les performances.
En résumé, les principaux formats vidéo 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 spécifier le format vidéo. Il convient
également d'utiliser l'attribut codecs pour spécifier le(s) codec(s), le cas échéant.
Voici un exemple de balisage :
<video
width="400" height="300"
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
</video>
La balise <source> est utilisée comme contenu de l'élément video afin que l'attribut type
puisse être défini et que l'option de formats multiples soit disponible.
Tous les navigateurs ne prennent pas en charge la totalité des formats vidéo ; le format
MP4/H.264 est le plus largement utilisé par les navigateurs Web et les périphériques
mobiles. (La page Web HTML5 Video, à l'adresse http://www.w3schools.com/html/
html5_video.asp, comporte un tableau répertoriant les formats vidéo pris en charge par les
différents navigateurs. Ce tableau est mis à jour régulièrement.) Pour que votre vidéo
puisse s'afficher dans la plupart des navigateurs et périphériques, vous pouvez utiliser
l'attribut source afin d'inclure plusieurs formats dans votre balisage. L'exemple suivant
montre la même vidéo disponible en deux formats, et le format OGG spécifie les codecs :
<video
width="400" height="300" poster="image.png"
autoplay="autoplay"
controls="controls"
loop="loop">
</video>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test vidéo</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. Accédez à la page Web du service de validation du balisage du W3C à l'adresse
http://validator.w3.org/. Téléchargez le fichier L2-video.html et cliquez sur Check
afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur
en cas de balises manquantes ou de fautes de frappe, le cas échéant.
5. Ouvrez le fichier HTML dans un navigateur Web. La vidéo démarre t-elle
automatiquement ? Les contrôles sont-ils affichés ? 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. Réenregistrez le fichier et validez-le. La validation ne doit générer aucune erreur. Ceci
signifie que HTML5 permet d'utiliser une méthode plus courte pour spécifier l'attribut
controls. Le même principe s'applique aux attributs autoplay et loop.
8. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement
à l'exercice suivant.
Comprendre et utiliser les balises audio
L'élément audio HTML5 fonctionne de la même façon que l'élément video, mais il
s'applique uniquement au son. Pour utiliser l'élément audio, incluez la balise <audio> et le
chemin d'accès au fichier sur votre disque dur, ou une URL pointant vers le fichier audio.
L'élément audio vous permet d'incorporer un son audio, tel que de la musique ou d'autres
PRÊT POUR LA sons, dans les documents HTML. Vous pouvez inclure les mêmes attributs se rapportant
CERTIFICATION aux contrôles que pour l'élément video, à savoir : autoplay, controls et loop. L'exemple
Quel est le balisage suivant inclut uniquement l'attribut controls :
utilisé pour l'élément
audio HTML5 ? <audio src="sample.mp3" controls="controls">
2,3 </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 durée comme un effet
REMARQUE
* sonore. Un grand nombre d'internautes n'aiment pas entendre un son automatique et
préfèrent avoir davantage de contrôle.
48 | Leçon 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
de fichier audio, du moins pas pour le moment. Dans la plupart des cas, MP3 représente
le meilleur 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
périphériques, utilisez l'attribut source afin d'inclure plusieurs formats dans votre balisage.
L'exemple suivant illustre le même 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 développeurs 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 créer vos
propres enregistrements à l'aide de votre ordinateur et d'un logiciel d'enregistrement. Ainsi,
l'Enregistreur Windows 7 vous permet d'enregistrer des fichiers audio au format WAV.
Figure 2-19
Contrôles audio HTML5 par
défaut dans un navigateur
Web
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 49
4. Si les contrôles audio ne s'affichent pas, accédez à la page Web du service de validation
du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-audio.html et
cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par
le vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.
5. Réenregistrez 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 D’INFORMATIONS
Pour plus d'informations sur l'incorporation de contenu multimédia dans les pages Web HTML5, et
plus particulièrement les éléments audio et video, reportez-vous à la page http://msdn.microsoft.com/
fr-fr/library/ie/hh771805.
7. Parmi les propositions suivantes, laquelle est nécessaire 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'élément canvas ou SVG, parmi les affirmations
suivantes, laquelle est vraie ?
a. Si le dessin est assez petit, utilisez SVG.
b. En règle générale, 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 créer des documents vectoriels très détaillés dont la mise à l'échelle
est importante, optez pour canvas.
9. Parmi les formats suivants, lequel est le format général de l'élément 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 général de l'élément 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 lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1.
L'élément canvas nécessite JavaScript pour créer des formes.
V F 2. La création d'un objet SVG dans HTML5 ne nécessite pas JavaScript.
V F 3. L'élément audio peut fournir des contrôles de lecture avec un seul attribut.
V F 4. Les éléments obsolètes ne peuvent pas être restitués dans un navigateur prenant
en charge la norme HTML5.
V F 5. Le format de fichier audio le plus répandu est MP4.
<body>
<h1>Réunion du personnel</h1>
<img src="cologo.jpg" olt="Logo d'entreprise" />
<p>Se réunir dans la <strong>Salle de conférence bleue</strong> a <strong>10 h</strong> ce
<strong>jeudi<strong> pour une réunion urgente du personnel.</p>
</body>
</html>