SlideShare une entreprise Scribd logo
1  sur  299
Télécharger pour lire hors ligne
MTA Examen 98-375
Notions
fondamentales sur
le développement
d’applications
HTML5
Official Academic Course
|  i
Microsoft®
Official Academic Course
Notions fondamentales sur
le développement
d'applications HTML5,
examen 98-375
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
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
Imprimé aux États-Unis d'Amérique
10 9 8 7 6 5 4 3 2 1
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.
CONTRAT DE LICENCE UTILISATEUR FINAL
WILEY POUR LE LIVRE ÉLECTRONIQUE
MOAC ET LE CONTENU DU FORMATEUR
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.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  v
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).vi  | 
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 TechnologyAssociate (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.
■ Programme Microsoft Official Academic Course
La série Microsoft Official Academic Course est un programme complet dont l'objectif est
de permettre aux instructeurs et aux établissements d'enseignement de préparer et de fournir
des cours de grande qualité sur les technologies logicielles Microsoft. Avec le programme
MOAC, nous reconnaissons qu'en raison de l'évolution rapide des technologies et du
programme développé par Microsoft, il existe un ensemble de besoins qui vont au-delà
des outils d'enseignement en classe pour qu'un instructeur soit prêt à dispenser le cours.
Le programme MOAC s'efforce de fournir des solutions pour tous ces besoins de manière
systématique afin de garantir une expérience fructueuse et enrichissante de cours pour
l'instructeur et le stagiaire, une formation technique et un programme pour la préparation de
l'instructeur aux nouvelles versions logicielles ; le logiciel lui-même, destiné à être utilisé
par le stagiaire à la maison pour acquérir des compétences pratiques, évaluer et valider
l'acquisition des compétences ; et un ensemble d'outils très utiles pour l'enseignement en
classe et en atelier pratique. Tous ces éléments sont importants pour fournir sans problème
un cours intéressant sur les logiciels Microsoft, et tous sont fournis avec le programme
MOAC. Nous considérons le modèle ci-dessous comme le gage que nous vous soutenons
complètement dans votre objectif de dispenser un cours de grande qualité. Lorsque vous
évaluez le matériel pédagogique à votre disposition, vous pouvez utiliser ce modèle pour
réaliser des comparaisons avec les produits disponibles.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  vii
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.
viii  |  Tour du livre illustré
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
■ Fonctionnalités de la leçon
53
LEÇONCréation de l'interface
utilisateur avec HTML5 :
Organisation, saisie et
validations
T E R M E S C L É S
attribut autofocus
attribut email
attribut global
attribut pattern
attribut required
balisage sémantique
élément article
élément aside
élément datalist
élément footer
élément header
élément menu
élément nav
élément section
entrée de formulaire
formulaire Web
liste non triée
liste triée
tableau
texte de l’espace réservé
validation
validation automatique
validation côté client
validation côté serveur
MATRICE D'OBJECTIFS D'EXAMEN
Compétences/Concepts	 Objectif	de	l'examen	MTA	 Numéro	de	l'objectif	
de	l'examen	MTA
Sélection et configuration HTML5 pour organiser le 2.4
des “balises HTML5 pour contenu et les formulaires
organiser le contenu et
les formulaires
Sélection et configuration Choisir et configurer les balises 2.5
des balises HTML5 pour la HTML5 pour les entrées et la
saisie et la validation validation
L'une de vos nouvelles tâches en tant que stagiaire chez Media Malted Milk consiste
à créer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs
d'un formulaire et qui valide les entrées. Pour vous préparer à créer le formulaire Web,
vous devez tout d'abord apprendre la meilleure façon d'organiser ou de structurer le
balisage à l'aide des nouveaux éléments HTML5.
3
Matrice d'objectifs
d'examen
Termes clés
Scénario
d'entreprise
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.
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.
Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
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
smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
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
pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
PRÊT POUR LA CERTIFICATION
■ Présentation des principes fondamentaux de la plateforme
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
L'ESSENTIEL
Figure 1-1
Le logo HTML5
Un point important à retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) 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
des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
avez aussi la possibilité d'employer la combinaison pour développer des applications
PRÊT POUR LA CERTIFICATION
Quelles sont les trois
technologies principales
de la famille HTML5 ?
1.1
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
en charge de nombreux
éléments de HTML5.
REMARQUE
*
W3C®
est une marque
commerciale (déposée
dans de nombreux
pays) du World Wide
Web Consortium ; les
marques du W3C sont
déposées et détenues
par ses institutions
hôtes, le MIT, l'ERCIM
et l'université de Keio.
REMARQUE
*
L'essentiel
Gestion du cycle de vie d’une application | 5
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.
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.
✚ 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.
Figure 1-3
Étapes générales de la
création d'une application
Aide au lecteur « Plus
d'informations »
Tour du livre illustré  |  ix
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
60 | Leçon 3
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 :
<nav>
<a href="http://www.example.com/Services">Précédent</a> |
<a href="http://www.example.com">Accueil</a> |
<a href="http://www.example.com/About">Suivant</a>
</nav>
<br />
Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6.
La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire
plus tard dans cette leçon.
AJOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML
PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit :
1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application,
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>
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
</header>
Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le
document HTML.
3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit :
<h1><a id="symphonies">Symphonies</a></h1>
<h1><a id="raves">Raves</a></h1>
Figure 3-6
Navigation Précédent-
Accueil-Suivant avec
des barres verticales qui
séparent chaque lien
Exercices étape par étape
Gestion du cycle de vie d’une application | 9
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
Figure 1-6
Affichage d'une page Web
d'exemple d'application
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.
5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le
volet gauche, sur html, puis sur default.html. Le balisage HTML affiche. Faites défiler le
balisage pour découvrir le type de code que vous rencontrerez souvent dans ce livre.
Images
d'écran
Gestion du cycle de vie d’une application | 11
En outre, AppCache permet à un utilisateur de charger des données qui sont généralement
stockées sur un serveur même lorsque l'utilisateur est hors connexion. La gestion de l'état
est le processus de maintenance des informations de la page Web au cours de plusieurs
demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
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
Web, et se termine lorsque l'utilisateur referme le navigateur.
Les informations d'état persistantes sont les données dont une application a besoin après
la fin de la session. De nombreuses applications Web doivent stocker des données (et les
rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
arrêtés lorsqu'ils retournent sur le site.
PRÊT POUR LA CERTIFICATION
Quelle est la différence
entre l'état de session et
l'état de l'application ?
1.2
PRÊT POUR LA CERTIFICATION
Quelle est l'importance
des informations d'état
persistantes ?
1.2
PRÊT POUR LA CERTIFICATION
Comment HTML5 gère-t-il
les données d'état ?
1.2
PRÊT POUR LA CERTIFICATION
Laquelle des deux
méthodes, HTML5/
JavaScript, permet à une
application de stocker les
données persistantes ?
1.2
Stockage des données d'état à l'aide du stockage local et de session
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,
qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
Web à « se souvenir » d'un utilisateur et à personnaliser son 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
données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
dans le temps. La méthode sessionStorage permet de conserver les données uniquement
pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
également de « stockage par onglet ».
Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
Il est donc possible de stocker une quantité relativement importante de données sans
ralentir la connexion ou le site.
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
charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit :
index.html
stylesheet.css
images/dot.png
scripts/main.js
XREF
Vous en apprendrez
plus sur l'utilisation
de AppCache avec
JavaScript dans la
leçon 8.
Alerte Prêt
pour la
certification
Aide au lecteur
« Référence croisée »
x  |  Tour du livre illustré
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Gestion de l'interface graphique avec CSS | 163
<body>
<div>Exemple de boîte</div>
</body>
</html>
2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un
navigateur Web, qui doit ressembler à la figure 7-4.
Figure 7-4
Boîte avec des coins arrondis
3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style :
box-shadow: 5px 5px 5px #999;
4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit
ressembler à la figure 7-5.
Figure 7-5
Boîte avec des coins arrondis
et une ombre portée
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
se trouve sur la droite.
Figure 7-6
Transparence appliquée
à une image
La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est :
opacity: value
La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
utiliser la valeur 0,55 (1,0 – 0,45).
PRÊT POUR LA
CERTIFICATION
Quelle propriété CSS
vous permet d'appliquer
de la transparence à
un élément ou à une
image ?
3.4
Photos
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) 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.
■ Comprendre les principes fondamentaux du langage HTML
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
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.
L'ESSENTIEL
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é.
Balisage et structure de page de base
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.
Aide au lecteur
« Remarque »
Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55
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.
PRÊT POUR LA CERTIFICATION
Quelles sont les balises
HTML5 utilisées pour
structurer et organiser un
document ?
2.4
Tableau 3-1
Nouvelles balises HTML5
pour l'organisation du
contenu et la création de
structure
Balise	 Description
<address> Définit une zone pour obtenir les coordonnées d'une page ou d'une
section
<article> Définit un article, comme un article de magazine ou de journal, un
billet de blog ou un contenu similaire
<aside> Définit le contenu qui est distinct mais quand même associé au contenu
de la page. Semblable à une barre latérale dans les chapitres de livres et
les articles de magazine
<details> Contient des détails supplémentaires relatifs au texte autour. Crée un
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
l'auteur du document, les coordonnées, les informations de copyright
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
<hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>)
pour des titres sur plusieurs niveaux
<nav> Définit un bloc de liens de navigation
<section> Définit une section d'un document, comme des chapitres, des parties
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
cliquer pour afficher ou masquer les informations
<wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou
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
Figure 3-1
Comparaison des parties de
document balisées en HTML
4.01 et HTML5
Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du
contenu dans un document HTML, on trouve header, footer, section, nav, article et aside.
Utilisation des balises pour structurer un document HTML
Maintenant que vous comprenez le balisage sémantique, nous allons étudier plusieurs des
nouveaux éléments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et
décrit les nouvelles balises liées à la structure HTML5.
Tableaux faciles à lire
Tour du livre illustré  |  xi
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133
RÉSUMÉ DES COMPÉTENCES
Dans	cette	leçon,	vous	avez	appris	ce	qui	suit	:
•   Les interfaces utilisateur peuvent être simples et directes ou être plus complexes 
avec plusieurs sections, boutons et contrôles.
•   La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits 
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
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.
•   Les 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.
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.
Compléter l’espace vide
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
prévus à cet effet.
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir.
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace
entre la bordure et le contenu de la boîte.
■ Évaluation des connaissances
Évaluation des
connaissances
Questions
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133
RÉSUMÉ DES COMPÉTENCES
Dans	cette	leçon,	vous	avez	appris	ce	qui	suit	:
•   Les interfaces utilisateur peuvent être simples et directes ou être plus complexes 
avec plusieurs sections, boutons et contrôles.
•   La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits 
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
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.
•   Les 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.
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.
Compléter l’espace vide
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
prévus à cet effet.
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir.
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace
entre la bordure et le contenu de la boîte.
■ Évaluation des connaissances
Matrice Résumé des
compétences
86 | Leçon 3
10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ?
a. <input label="email" name="URL">
b. <form id="email">
c. <label for="email">Email</label>
d. <input type = "email" name = "email">
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1. Dans un tableau, l’élément tfoot	doit	s’afficher	avant	l’élément	tbody.
V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entrée
d’une liste triée.
V F 3. 	Vous	pouvez	spécifier	la	hauteur	d’un	élément	d’entrée	à	l’aide	de	
l’attribut size.
V F 4. 	L'élément	label	affiche	la	légende,	ou	le	titre	d'un	tableau.
V F 5. L'élément nav	définit	un	bloc	de	liens	de	navigation.
■ Évaluation des compétences
Scénario 3-1 : Balisage d’un article de journal
Sally Rowe, contrôleur de documents chez Malted Milk Media, souhaite publier une
série d’articles sur l’intranet de la société portant sur la sécurité et la gestion des versions
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 ?
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
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
les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?
■ Évaluation de la maîtrise des concepts
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
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 ?
Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire Web
Margie est en train de créer et de tester un formulaire Web qui comporte entre autres un
champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code
postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très
souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web,
et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
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 ?
Évaluation des
compétences
Évaluation de
la maîtrise des
concepts
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xii  | 
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
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é.
	 REMARQUE*
*
	Des aides au lecteur figurent dans le texte, dans des cases
grisées. Remarque fournit des conseils utiles liés à des tâches
ou sujets particuliers.
	
XREF
	Ces remarques fournissent des pointeurs vers des informations
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.
L'ESSENTIEL
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xiii
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).
xiv | Programme de soutien de l'instructeur
DREAMSPARK PREMIUM – ABONNEMENT DE 3 ANS
OFFERT AUX UTILISATEURS QUALIFIÉS !
DreamSpark Premium est conçu pour fournir le moyen le plus simple et le plus
économique pour les universités de rendre les derniers outils de développement,
produits et technologies de Microsoft disponibles dans les laboratoires, salles
de classe et sur les PC des étudiants. DreamSpark Premium est un programme
d'abonnement annuel destiné aux départements d'enseignement des cours de sciences,
technologie, ingénierie et mathématiques (STEM). L'abonnement offre une solution
complète destinée à permettre aux laboratoires universitaires, professeurs et étudiants
de rester à la pointe de la technologie.
Les logiciels disponibles dans le programme DreamSpark Premium sont offerts
aux départements qui s'abonnent dans le cadre du partenariat d'édition entre
Wiley et Microsoft.
Des outils qui aident les professeurs à motiver et impliquer les élèves dans les
technologies d'aujourd'hui.
Contactez votre représentant Wiley pour plus de détails.
Pour plus d'informations sur le programme DreamSpark Premium, visitez le site Web :
https://www.dreamspark.com/
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.
■ Adresses Web et numéros de téléphone importants
Pour localiser le représentant de l'enseignement supérieur Wiley dans votre région,
rendez-vous sur http://www.wiley.com/college et cliquez sur le lien « Who’s My Rep? »
(Qui est mon représentant ?) situé en haut de la page, ou appelez le numéro gratuit du
programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Pour savoir comment obtenir la certification et connaître la disponibilité de l'examen,
visitez le site www.microsoft.com/learning/mcp/mcp.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xv
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.
Wiley Desktop Editions
Les éditions Wiley MOAC Desktop Editions sont des versions électroniques novatrices
des manuels imprimés. Les stagiaires acquièrent la version de bureau jusqu'à 40 % moins
cher que le prix américain du texte imprimé, et peuvent bénéficier de la valeur ajoutée
de la permanence et de la portabilité. Les éditions Wiley Desktop Editions fournissent
également aux étudiants de nombreux avantages supplémentaires qui ne sont pas
disponibles avec d'autres solutions de texte électronique.
Les éditions Wiley Desktop Editions NE sont PAS des abonnements. Les stagiaires
téléchargent l'édition Wiley Desktop Edition sur le bureau de leurs ordinateurs. Les
stagiaires sont propriétaires du contenu qu'ils achètent et peuvent le conserver aussi
longtemps qu'ils le souhaitent. Une fois une édition Wiley Desktop Edition téléchargée sur
le bureau de l'ordinateur, les stagiaires ont un accès instantané à tout le contenu sans être en
ligne. Les stagiaires peuvent également imprimer les sections qu'ils préfèrent lire sur support
papier. Les stagiaires ont aussi accès à des ressources entièrement intégrées au sein de leur
édition Wiley Desktop Edition. De la mise en surbrillance du texte électronique à la prise
et au partage de notes, les stagiaires peuvent facilement personnaliser leur édition Wiley
Desktop Edition au fur et à mesure de leurs lectures ou en classe.
■ À propos de la certification Microsoft Technology
Associate (MTA)
Préparer la main-d'œuvre technologique de demain
La technologie joue un rôle dans pratiquement toutes les entreprises du monde entier.
Posséder des connaissances fondamentales du fonctionnement d'une technologie et
comprendre son impact sur l'environnement académique et professionnel d'aujourd'hui
est de plus en plus important, en particulier pour les stagiaires qui souhaitent explorer
des professions qui impliquent des technologies. C'est pourquoi Microsoft a créé la
certification Microsoft Technology Associate (MTA), un nouveau programme de crédit de
niveau débutant qui valide les connaissances technologiques fondamentales des stagiaires
qui cherchent à faire carrière dans les technologies.
La certification Microsoft Technology Associate (MTA) est le moyen idéal et privilégié
d'accéder à des programmes de certification technologiques de renommée mondiale de
Microsoft, tels que Microsoft Certified Solutions Developer (MCSD). MTA est en passe
de devenir le premier programme de certification destiné aux personnes qui cherchent
à explorer et à poursuivre une carrière dans les technologies, ou à renforcer leurs
connaissances dans des activités connexes telles que l'entreprise ou tout autre domaine où
la technologie est omniprésente.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
xvi | Programme de soutien au stagiaire
Profil des candidats à la certification MTA
Le programme de certification MTA est conçu spécifiquement pour les étudiants de
niveau secondaire et post-secondaire qui souhaitent explorer des options académiques
et professionnelles dans un domaine technologique. Il offre aux stagiaires une
certification en informatique de base et en développement. En tant que nouveau point
d'entrée recommandé pour les certifications technologiques Microsoft, MTA est destiné
tout spécialement aux stagiaires qui découvrent l'informatique et le développement
de logiciels. Il est disponible exclusivement dans les contextes éducatifs et s'intègre
facilement dans les programmes des cours d'informatique existants.
La certification MTA donne des moyens aux éducateurs et motive les stagiaires
MTA offre une nouvelle norme pour mesurer et valider les connaissances technologiques
fondamentales dans la salle de classe sans porter atteinte à votre budget ni à vos ressources
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).
Fourniture des examens MTA : la licence Campus MTA
Avec la licence Campus MTA, mettre en œuvre un nouveau programme de certification
dans votre salle de classe n'a jamais été aussi facile. L'achat d'une licence Campus MTA
annuelle rend inutile les demandes de budget ad hoc et les achats récurrents de bons
d'examens. Désormais, vous pouvez prévoir un budget à petit prix sur l'année entière et
donner accès aux examens MTA à vos stagiaires et autres professeurs dans l'ensemble de
votre campus où et quand vous le voulez.
La licence Campus MTA fournit une suite pratique et abordable de certifications
technologiques de niveau débutant, conçue pour donner des moyens aux éducateurs et
motiver les stagiaires au fur et à mesure qu'ils construisent les fondations de leur carrière.
La licence Campus MTA est administrée par Certiport, fournisseur exclusif d'examen
MTA de Microsoft.
Pour en savoir plus sur la façon d'obtenir la certification Microsoft Technology Associate,
ainsi que sur la disponibilité de l'examen, visitez le site www.microsoft.com/learning/mta.
Certains liens présents dans ce cours renvoient à des pages en anglais.REMARQUE
*
Numéro gratuit de MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Programme de soutien au stagiaire  |  xvii
■ Activez votre test pratique GRATUIT pour la
certification MTA !
L'acquisition de ce livre vous donne droit à un test pratique gratuit pour la certification
MTA de GMetrix (d'une valeur de 30 $). Rendez-vous sur www.gmetrix.com/mtatests
et utilisez le code de validation suivant pour activer votre test gratuit : MTA98-375-
3324376A6A85.
Le système de gestion des compétences GMetrix fournit tout ce dont vous avez besoin
pour vous entraîner pour la certification Microsoft Technology Associate (MTA).
Présentation des fonctionnalités de test :
•	 Carte des tests pratiques en fonction des objectifs de l'examen Microsoft Technology
Associate (MTA)
•	 Les tests pratiques de la certification MTA de GMetrix simulent l'environnement de
test MTA réel
•	 Plus de 50 questions par test, qui couvrent tous les objectifs
•	 Progressez à votre propre rythme, enregistrez le test pour le reprendre plus tard et
revenez aux questions laissées en suspens
•	 Rapports détaillés et imprimables sur les notes, qui soulignent les domaines qui
requièrent une étude plus approfondie
Pour tirer le meilleur parti de votre préparation MTA, profitez dès aujourd'hui de votre test
pratique gratuit pour la certification MTA GMetrix.
Pour des questions de support technique sur l'installation ou l'activation du code, envoyez
un message électronique à support@gmetrix.com.
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xviii  | 
Remerciements
■ MOAC MTA - Réviseurs des notions technologiques fondamentales
Nous aimerions remercier les nombreux réviseurs qui ont relu le manuscrit et fourni de précieux commentaires
destinés à améliorer la qualité du matériel pédagogique :
Yuke Wang, Université du Texas à Dallas
Palaniappan Vairavan, Bellevue College
Harold « Buz » Lamson, ITT Technical Institute
Colin Archibald, Valencia Community College
Catherine Bradfield, DeVry University en ligne
Robert Nelson, Blinn College
Kalpana Viswanathan, Bellevue College
Bob Becker, Vatterott College
Carol Torkko, Bellevue College
Bharat Kandel, Missouri Tech
Linda Cohen, Forsyth Technical Community College
Candice Lambert, Metro Technology Centers
Susan Mahon, Collin College
Mark Aruda, Hillsborough Community College
Claude Russo, Brevard Community College
Heith Hennel, Valencia College
Adrian Genesir, Western Governors University
Zeshan Sattar, Zenos
Douglas Tabbutt, Blackhawk Technical College
David Koppy, Baker College
Sharon Moran, Hillsborough Community College
Keith Hoell, Briarcliffe College et Queens College,
CUNY
Mark Hufnagel, Lee County School District
Rachelle Hall, Glendale Community College
Scott Elliott, Christie Digital Systems, Inc.
Gralan Gilliam, Kaplan
Steve Strom, Butler Community College
John Crowley, Bucks County Community College
Margaret Leary, Northern Virginia Community College
Sue Miner, Lehigh Carbon Community College
Gary Rollinson, Cabrillo College
Al Kelly, University of Advancing Technology
Katherine James, Seneca College
David Kidd, Western Governors University
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xix
Brève table des matières
Leçon 1 :	Gestion du cycle de vie d'une application  1
Leçon 2 :	 Création de l'interface utilisateur avec HTML5 : Texte,
graphiques et multimédia 21
Leçon 3 :	 Création de l'interface utilisateur avec HTML5 :
Organisation, saisie et validations 53
Leçon 4 :	 Présentation des notions essentielles sur les feuilles de style
en cascade CSS : Flux de contenu, positionnement et style 87
Leçon 5 :	Présentation des notions essentielles sur les feuilles de style
en cascade CSS : Dispositions 110
Leçon 6 :	Gestion de l'enchaînement du texte avec CSS  137
Leçon 7 :	 Gestion de l'interface graphique avec CSS  159
Leçon 8 :	Présentation des principes de base de JavaScript et du
codage 189
Leçon 9 :	Création d'animations, utilisation de graphiques et accès
aux données  215
Leçon 10 :	Codage JavaScript pour l'interface tactile, les ressources des
périphériques et du système d'exploitation, etc.  243
Annexe 268
Index 269
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xx  | 
Contenu
Leçon 1 : Gestion du cycle de vie d'une
application 1
Matrice d'objectifs d'examen  1
Termes clés  1
Présentation des principes fondamentaux de la
plateforme  2
Quelles sont les nouveautés de HTML5 ?  3
Création d'applications  5
Exploration de l'empaquetage et de l'environnement
d'exécution 7
Présentation du processus hôte  7
Présentation du package d'application et du conteneur
d'applications 8
Présentation des jeux d'informations d'identification et
d'autorisations 10
Présentation et gestion des états de l'application 10
Stockage des données d'état à l'aide du stockage local et
de session 11
AppCache pour les fichiers hors connexion 11
Présentation des interfaces tactiles et des
mouvements 12
Utilisation des compétences et du contenu HTML5
existants pour les applications de tablettes tactiles/
tablettes 13
Débogage et test des applications HTML5 13
Validation du code HTML5 14
Validation d'un package 14
Publication d'une application dans un magasin en
ligne 16
Résumé des compétences 17
Évaluation des connaissances 18
Évaluation des compétences 20
Évaluation de la maîtrise des concepts 20
Leçon 2 : Création de l'interface
utilisateur avec HTML5 : Texte,
graphiques et multimédia 21
Matrice d'objectifs d'examen  21
Termes clés  21
Comprendre les principes fondamentaux du langage
HTML 22
Balisage et structure de page de base  22
Utilisation d'attributs  23
Imbrication d'éléments 24
Comprendre les entités  24
Comprendre le doctype  25
Exploration du balisage d'une page Web simple  26
Sélection et configuration de balises HTML5 pour
l'affichage du texte 29
Éléments de texte HTML 4 avec une nouvelle
signification ou fonction  29
Nouveaux éléments de texte dans HTML5 31
Éléments de texte inutilisés dans HTML5  32
Sélection et configuration de balises HTML5 pour
l'affichage des graphiques 34
Utilisation des éléments figure et figcaption 35
Création de graphiques à l'aide de canvas  38
Notions de base de l'élément canvas 39
Création d'un contour de forme  40
Spécification d'une image ou d'un texte de remplacement
pour les anciens navigateurs  41
Création de graphiques à l'aide de SVG  42
Quand utiliser canvas au lieu de SVG  44
Sélection et configuration de balises HTML5 pour la
lecture de contenu multimédia 45
Comprendre et utiliser les balises de contenu vidéo  45
Comprendre et utiliser les balises audio  47
Résumé des compétences 49
Évaluation des connaissances 49
Évaluation des compétences 51
Évaluation de la maîtrise des concepts 52
Leçon 3 : Création de l'interface
utilisateur avec HTML5 :
Organisation, saisie et
validations 53
Matrice d'objectifs d'examen  53
Termes clés  53
Sélection et configuration des balises HTML5 pour
organiser le contenu et les formulaires 54
Présentation de la sémantique HTML  54
Utilisation des balises pour structurer un
document HTML  55
Éléments header et footer  56
L'élément section  57
L'élément nav  59
L'élément article  61
L'élément aside  61
Utilisation de balises pour créer des tableaux et des
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).
avec CSS 111
Utilisation de la boîte flexible pour des dispositions
simples et utilisation de la grille pour les dispositions
complexes 112
Utilisation de la boîte flexible (Flexbox) pour
appliquer au contenu un alignement, une direction
et une orientation 114
Utiliser les éléments Flexboxes et Flexbox  116
Mise à l'échelle proportionnelle dans une boîte flexible  116
Modification de l'orientation des éléments enfants dans une
boîte flexible  122
Tri et réorganisation du contenu  126
Utilisation des dispositions en grille pour appliquer
au contenu un alignement, une direction et une
orientation 128
Création d'une grille à l'aide de propriétés CSS pour les
lignes et colonnes  130
Présentation des modèles de grille  132
Résumé des compétences 133
Évaluation des connaissances 133
Évaluation des compétences 135
Évaluation de la maîtrise des concepts 136
Leçon 6 : Gestion de l'enchaînement du
texte avec CSS  137
Matrice d'objectifs d'examen  137
Termes clés  137
Gestion de l’enchaînement du texte avec CSS 137
Présentation et utilisation des régions pour contrôler
l'enchaînement du texte entre plusieurs sections 139
Enchaînement dynamique du contenu à travers les
conteneurs 140
Débordement du texte  142
Implémentation Microsoft des régions CSS  142
Utilisation des colonnes et de la césure pour optimiser la
lisibilité du texte  145
Création de colonnes  146
Utilisation de la césure  150
Utilisation d'exclusions CSS pour créer un enchaînement
autour d'un objet flottant  152
Résumé des compétences 155
Évaluation des connaissances 155
Évaluation des compétences 157
Évaluation de la maîtrise des concepts 158
Leçon 7 : Gestion de l'interface graphique
avec CSS  159
Matrice d'objectifs d'examen  159
Termes clés  159
listes 64
Création de tableaux 64
Création de listes 69
Sélection et configuration des balises HTML5 pour la
saisie et la validation 72
Présentation des entrées et des formulaires  73
Découverte de la création de formulaire, des attributs Input
et des valeurs  77
Présentation de la validation  81
Résumé des compétences 83
Évaluation des connaissances 84
Évaluation des compétences 86
Évaluation de la maîtrise des concepts 86
Leçon 4 : Présentation des notions
essentielles sur les feuilles de style
en cascade CSS : Flux de contenu,
positionnement et style 87
Matrice d'objectifs d'examen  87
Termes clés  87
Présentation des notions essentielles sur les feuilles
de style en cascade CSS 87
Utilisation des outils appropriés  88
Exploration du lien entre HTML et CSS  89
Séparation du contenu et du style  91
Présentation des sélecteurs et des déclarations  92
Présentation des polices et des familles de polices  94
Gestion du flux de contenu  96
Positionnement des éléments individuels 99
Application du positionnement flottant  99
Application du positionnement absolu  100
Gestion du débordement de contenu  102
Présentation du débordement de défilement  102
Présentation du débordement visible et du débordement
masqué 104
Résumé des compétences 105
Évaluation des connaissances 106
Évaluation des compétences 108
Évaluation de la maîtrise des concepts 109
Leçon 5 : Présentation des notions
essentielles sur les feuilles
de style en cascade CSS :
Dispositions 110
Matrice d'objectifs d'examen  110
Termes clés  110
Organisation du contenu d’une interface utilisateur
xxii  |  Contents
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Gestion de l'interface graphique avec CSS  159
Création d'effets graphiques  160
Création d'angles arrondis  160
Création d'ombres  161
Application de la transparence  163
Application de dégradés à l'arrière-plan  164
Présentation de la typographie et du format WOFF (Web
Open Font Format)  166
Application des transformations 2D et 3D  167
Traduction 2D 168
Mise à l'échelle 2D 169
Rotation 2D et 3D  171
Inclinaison 2D et 3D  172
Présentation de la perspective 3D, des transitions et des
animations 173
Application d'effets de filtre SVG  179
Utilisation de la zone de dessin pour améliorer l'interface
graphique 182
Résumé des compétences 185
Évaluation des connaissances 186
Évaluation des compétences 188
Évaluation de la maîtrise des concepts 188
Leçon 8 : Présentation des principes
de base de JavaScript et du
codage 189
Matrice d'objectifs d'examen  189
Termes clés  189
Gestion et maintenance du langage JavaScript 189
Création et utilisation des fonctions  193
Utilisation de jQuery et d'autres bibliothèques
tierces 197
Mise à jour de l'interface utilisateur avec JavaScript 199
Localisation et accès aux éléments  201
Écoute et réponse aux événements  203
Affichage et masquage des éléments  206
Mise à jour du contenu des éléments  208
Ajout d'éléments 209
Résumé des compétences 211
Évaluation des connaissances 212
Évaluation des compétences 214
Évaluation de la maîtrise des concepts 214
Leçon 9 : Création d'animations,
utilisation de graphiques et
accès aux données  215
Matrice d'objectifs d'examen  215
Termes clés  215
Codage des animations avec JavaScript 216
Création d'animations  216
Utilisation d'images, de formes et d'autres
graphiques 219
Manipulation de l'élément canvas avec JavaScript  220
Envoi et réception de données 224
Transmission d'objets complexes et analyse  227
Chargement et enregistrement de fichiers 229
Utilisation du cache de l'application (AppCache)  231
Présentation et utilisation des types de données  233
Utilisation de JavaScript pour valider les entrées
d'utilisateur dans les formulaires 233
Présentation et utilisation des cookies 235
Présentation et utilisation de la fonction de stockage
local  237
Résumé des compétences 239
Évaluation des connaissances 240
Évaluation des compétences 242
Évaluation de la maîtrise des concepts 242
Leçon 10 : Codage JavaScript pour
l'interface tactile, les ressources
des périphériques et du système
d'exploitation, etc.  243
Matrice d'objectifs d'examen  243
Termes clés  243
Réponse à l'interface tactile 244
Capture et réponse aux mouvements  246
Codage des API HTML5 supplémentaires 249
Codage pour capturer la géolocalisation  249
Présentation des traitements Web  252
Présentation des WebSockets  255
Utilisation de l'API de fichier pour les téléchargements
de fichiers  258
Accès aux ressources des périphériques et du système
d'exploitation 260
Accès aux ressources en mémoire  260
Accès aux capacités matérielles  262
Présentation du GPS (Global Positioning System)  263
Présentation de l'accéléromètre  263
Accès à une caméra  263
Résumé des compétences 264
Évaluation des connaissances 265
Évaluation des compétences 267
Évaluation de la maîtrise des concepts 267
Annexe 268
Index 269
Gestion du cycle
de vie d'une
application
LEÇON 1
1
T E R M E S C L É S
AppCache
autorisations d’identité
conteneur d’applications
cookies
débogage
espace de noms
état de l’application
état de session
événement tactile
feuilles de style en cascade (CSS)
HTML5
Hypertext Markup Language (HTML)
Hypertext Transport Protocol (HTTP)
icône de lancement
indépendant de la plateforme
informations d’état persistantes
interface de programmation d’application (API)
interface utilisateur Windows
JavaScript
jeux d’autorisations
langage de balisage
langage de script
localStorage
mouvement
package d’application
requêtes multimédias
sessionStorage
simulateur ou émulateur d’écran tactile
validateur
Windows Runtime (WinRT)
Windows Store
World Wide Web Consortium (W3C)
MATRICE D'OBJECTIFS D'EXAMEN
Compétences/Concepts	 Objectif de l'examen MTA	 Numéro de l'objectif
	 	 de l'examen MTA
Présentation des principes 	 Connaissance des principes 	 1.1
fondamentaux de la plateforme	 fondamentaux de la plateforme	
Présentation et gestion des 	 Gestion de l’état d’une 	 1.2
états de l'application	 application	
Présentation des interfaces 	 Connaissance des principes 	 1.1
tactiles et des mouvements	 fondamentaux de la plateforme	
	 Débogage et test d'une 	 1.3
	 application HTML5 à
	 interactions tactiles	
Débogage et test des 	 Débogage et test d’une 	 1.3
applications HTML5	 application HTML5 à
	 interactions tactiles		
Publication d'une application 	 Publication d’une application 	 1.4
dans un magasin en ligne	 dans un magasin en ligne
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.
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.
Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
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
smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
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
pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
PRÊT POUR LA CERTIFICATION
■  Présentation des principes fondamentaux de la plateforme
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
L'ESSENTIEL
Figure 1-1
Le logo HTML5
Un point important à retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) 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
des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
avez aussi la possibilité d'employer la combinaison pour développer des applications
PRÊT POUR LA CERTIFICATION
Quelles sont les trois
technologies principales
de la famille HTML5 ?
1.1
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
en charge de nombreux
éléments de HTML5.
REMARQUE
*
W3C®
est une marque
commerciale (déposée
dans de nombreux
pays) du World Wide
Web Consortium ; les
marques du W3C sont
déposées et détenues
par ses institutions
hôtes, le MIT, l'ERCIM
et l'université de Keio.
REMARQUE
*
Gestion du cycle de vie d’une application | 3
clientes (applications) qui s'exécutent sur des appareils tactiles tels que des ordinateurs,
tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilisées par
les développeurs pour créer des pages Web commencent à être employées pour créer des
applications qui s'exécutent sur différents appareils.
HTML5 est également indépendant de la plateforme. Cela signifie que la famille de
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
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.
REMARQUE
*
Quelles sont les nouveautés de HTML5 ?
La famille de HTML5 comprend de nombreuses nouvelles balises de marquage
et technologies telles que les requêtes multimédias, la géolocalisation, Modernizr
et bien plus encore. Ces technologies ajoutent de nombreuses fonctionnalités aux
applications basées sur HTML et contribuent à rendre le produit fini plus élégant.
Vous en apprendrez
plus sur CSS3 et
JavaScript dans les
leçons ultérieures.
REMARQUE
*
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5
Notions fondamentales sur le développement d’applications HTML5

Contenu connexe

Tendances

Rapport de projet_de_fin_d__tudes__pfe__safwen (8)
Rapport de projet_de_fin_d__tudes__pfe__safwen (8)Rapport de projet_de_fin_d__tudes__pfe__safwen (8)
Rapport de projet_de_fin_d__tudes__pfe__safwen (8)safwenbenfredj
 
Mémoire fin d'étude gestion des interventions
Mémoire fin d'étude gestion des interventionsMémoire fin d'étude gestion des interventions
Mémoire fin d'étude gestion des interventionsMohamed Arar
 
Pfe conception et développement d'une application web GMAO JEE
Pfe conception et développement d'une application web GMAO JEEPfe conception et développement d'une application web GMAO JEE
Pfe conception et développement d'une application web GMAO JEEOussama Djerba
 
Rapport de Mémoire Master Recherche
Rapport de Mémoire Master RechercheRapport de Mémoire Master Recherche
Rapport de Mémoire Master RechercheRouâa Ben Hammouda
 
Rapport stage pfe
Rapport stage  pfe Rapport stage  pfe
Rapport stage pfe rimeh moussi
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaIlef Ben Slima
 
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...Khadidja BOUKREDIMI
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALLaribi Aicha
 
Modélisation uml avec le diagramme de classe
Modélisation uml avec le diagramme de classeModélisation uml avec le diagramme de classe
Modélisation uml avec le diagramme de classeamat samiâ boualil
 
Architecture microservices avec docker
Architecture microservices avec dockerArchitecture microservices avec docker
Architecture microservices avec dockergcatt
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile Raoua Bennasr
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiqueOussama Yoshiki
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITLina Meddeb
 
Réalisation d'une application de gestion budgétaire
Réalisation d'une application de gestion budgétaireRéalisation d'une application de gestion budgétaire
Réalisation d'une application de gestion budgétaireLamiae Demraoui
 
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...Dicutons santé : Un site web pour aider les patients atteints de maladies chr...
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...ComSanté
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Abdelmadjid Djebbari
 

Tendances (20)

Rapport de projet_de_fin_d__tudes__pfe__safwen (8)
Rapport de projet_de_fin_d__tudes__pfe__safwen (8)Rapport de projet_de_fin_d__tudes__pfe__safwen (8)
Rapport de projet_de_fin_d__tudes__pfe__safwen (8)
 
Mémoire fin d'étude gestion des interventions
Mémoire fin d'étude gestion des interventionsMémoire fin d'étude gestion des interventions
Mémoire fin d'étude gestion des interventions
 
Pfe conception et développement d'une application web GMAO JEE
Pfe conception et développement d'une application web GMAO JEEPfe conception et développement d'une application web GMAO JEE
Pfe conception et développement d'une application web GMAO JEE
 
Rapport de Mémoire Master Recherche
Rapport de Mémoire Master RechercheRapport de Mémoire Master Recherche
Rapport de Mémoire Master Recherche
 
Rapport stage pfe
Rapport stage  pfe Rapport stage  pfe
Rapport stage pfe
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben Slima
 
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...
AUTOMATISATION DU DEPLOIEMENT ET DE LA GESTION DES RESEAUX VIRTUELS DANS LE C...
 
Rapport de stage
Rapport de stageRapport de stage
Rapport de stage
 
Mini Projet
Mini Projet Mini Projet
Mini Projet
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Modélisation uml avec le diagramme de classe
Modélisation uml avec le diagramme de classeModélisation uml avec le diagramme de classe
Modélisation uml avec le diagramme de classe
 
Architecture microservices avec docker
Architecture microservices avec dockerArchitecture microservices avec docker
Architecture microservices avec docker
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
pfe book 2023 2024.pdf
pfe book 2023 2024.pdfpfe book 2023 2024.pdf
pfe book 2023 2024.pdf
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatique
 
GEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technologyGEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technology
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
 
Réalisation d'une application de gestion budgétaire
Réalisation d'une application de gestion budgétaireRéalisation d'une application de gestion budgétaire
Réalisation d'une application de gestion budgétaire
 
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...Dicutons santé : Un site web pour aider les patients atteints de maladies chr...
Dicutons santé : Un site web pour aider les patients atteints de maladies chr...
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
 

Dernier

Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilfrizzole
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursStagiaireLearningmat
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Gabriel Gay-Para
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfAtelier Canopé 37 - Tours
 
Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Majida Antonios, M.Ed.
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfSylvianeBachy
 
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...Unidad de Espiritualidad Eudista
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxMartin M Flynn
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfbdp12
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Atelier Canopé 37 - Tours
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneTxaruka
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfAtelier Canopé 37 - Tours
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24BenotGeorges3
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAmar LAKEL, PhD
 

Dernier (17)

Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avril
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceurs
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
 
Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
 
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024
 
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienne
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècle
 

Notions fondamentales sur le développement d’applications HTML5

  • 1. MTA Examen 98-375 Notions fondamentales sur le développement d’applications HTML5 Official Academic Course
  • 2.
  • 3. |  i Microsoft® Official Academic Course Notions fondamentales sur le développement d'applications HTML5, examen 98-375
  • 4. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). 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 Imprimé aux États-Unis d'Amérique 10 9 8 7 6 5 4 3 2 1
  • 5. 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. CONTRAT DE LICENCE UTILISATEUR FINAL WILEY POUR LE LIVRE ÉLECTRONIQUE MOAC ET LE CONTENU DU FORMATEUR
  • 6. 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.
  • 7. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  v 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
  • 8. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).vi  |  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 TechnologyAssociate (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. ■ Programme Microsoft Official Academic Course La série Microsoft Official Academic Course est un programme complet dont l'objectif est de permettre aux instructeurs et aux établissements d'enseignement de préparer et de fournir des cours de grande qualité sur les technologies logicielles Microsoft. Avec le programme MOAC, nous reconnaissons qu'en raison de l'évolution rapide des technologies et du programme développé par Microsoft, il existe un ensemble de besoins qui vont au-delà des outils d'enseignement en classe pour qu'un instructeur soit prêt à dispenser le cours. Le programme MOAC s'efforce de fournir des solutions pour tous ces besoins de manière systématique afin de garantir une expérience fructueuse et enrichissante de cours pour l'instructeur et le stagiaire, une formation technique et un programme pour la préparation de l'instructeur aux nouvelles versions logicielles ; le logiciel lui-même, destiné à être utilisé par le stagiaire à la maison pour acquérir des compétences pratiques, évaluer et valider l'acquisition des compétences ; et un ensemble d'outils très utiles pour l'enseignement en classe et en atelier pratique. Tous ces éléments sont importants pour fournir sans problème un cours intéressant sur les logiciels Microsoft, et tous sont fournis avec le programme MOAC. Nous considérons le modèle ci-dessous comme le gage que nous vous soutenons complètement dans votre objectif de dispenser un cours de grande qualité. Lorsque vous évaluez le matériel pédagogique à votre disposition, vous pouvez utiliser ce modèle pour réaliser des comparaisons avec les produits disponibles.
  • 9. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  vii 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.
  • 10. viii  |  Tour du livre illustré www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). ■ Fonctionnalités de la leçon 53 LEÇONCréation de l'interface utilisateur avec HTML5 : Organisation, saisie et validations T E R M E S C L É S attribut autofocus attribut email attribut global attribut pattern attribut required balisage sémantique élément article élément aside élément datalist élément footer élément header élément menu élément nav élément section entrée de formulaire formulaire Web liste non triée liste triée tableau texte de l’espace réservé validation validation automatique validation côté client validation côté serveur MATRICE D'OBJECTIFS D'EXAMEN Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif de l'examen MTA Sélection et configuration HTML5 pour organiser le 2.4 des “balises HTML5 pour contenu et les formulaires organiser le contenu et les formulaires Sélection et configuration Choisir et configurer les balises 2.5 des balises HTML5 pour la HTML5 pour les entrées et la saisie et la validation validation L'une de vos nouvelles tâches en tant que stagiaire chez Media Malted Milk consiste à créer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs d'un formulaire et qui valide les entrées. Pour vous préparer à créer le formulaire Web, vous devez tout d'abord apprendre la meilleure façon d'organiser ou de structurer le balisage à l'aide des nouveaux éléments HTML5. 3 Matrice d'objectifs d'examen Termes clés Scénario d'entreprise 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. 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. Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent 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 smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent. 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 pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1. PRÊT POUR LA CERTIFICATION ■ Présentation des principes fondamentaux de la plateforme HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant quelques années, la plupart des navigateurs Web modernes prennent déjà en charge les éléments HTML5 et le développement d'applications HTML5 pour le Web et les navigateurs d'appareils mobiles est en bonne voie. L'ESSENTIEL Figure 1-1 Le logo HTML5 Un point important à retenir est que HTML5 est une norme et une combinaison ou famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes. Les feuilles de style en cascade (CSS) 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 des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3. JavaScript est un langage de script (un langage de programmation qui utilise des scripts et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web. Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous avez aussi la possibilité d'employer la combinaison pour développer des applications PRÊT POUR LA CERTIFICATION Quelles sont les trois technologies principales de la famille HTML5 ? 1.1 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 en charge de nombreux éléments de HTML5. REMARQUE * W3C® est une marque commerciale (déposée dans de nombreux pays) du World Wide Web Consortium ; les marques du W3C sont déposées et détenues par ses institutions hôtes, le MIT, l'ERCIM et l'université de Keio. REMARQUE * L'essentiel Gestion du cycle de vie d’une application | 5 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. 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. ✚ 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. Figure 1-3 Étapes générales de la création d'une application Aide au lecteur « Plus d'informations »
  • 11. Tour du livre illustré  |  ix www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). 60 | Leçon 3 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 : <nav> <a href="http://www.example.com/Services">Précédent</a> | <a href="http://www.example.com">Accueil</a> | <a href="http://www.example.com/About">Suivant</a> </nav> <br /> Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6. La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire plus tard dans cette leçon. AJOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit : 1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application, 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> <a href="#symphonies">Symphonies</a> | <a href="#raves">Raves</a> </nav> </header> Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le document HTML. 3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit : <h1><a id="symphonies">Symphonies</a></h1> <h1><a id="raves">Raves</a></h1> Figure 3-6 Navigation Précédent- Accueil-Suivant avec des barres verticales qui séparent chaque lien Exercices étape par étape Gestion du cycle de vie d’une application | 9 Figure 1-5 Une partie de la page Web Exemples de code pour développeurs de MSDN Figure 1-6 Affichage d'une page Web d'exemple d'application 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. 5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le volet gauche, sur html, puis sur default.html. Le balisage HTML affiche. Faites défiler le balisage pour découvrir le type de code que vous rencontrerez souvent dans ce livre. Images d'écran Gestion du cycle de vie d’une application | 11 En outre, AppCache permet à un utilisateur de charger des données qui sont généralement stockées sur un serveur même lorsque l'utilisateur est hors connexion. La gestion de l'état est le processus de maintenance des informations de la page Web au cours de plusieurs demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande pour la première fois l'accès à une application, l'état de session est créé. L'état se termine 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 Web, et se termine lorsque l'utilisateur referme le navigateur. Les informations d'état persistantes sont les données dont une application a besoin après la fin de la session. De nombreuses applications Web doivent stocker des données (et les rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont arrêtés lorsqu'ils retournent sur le site. PRÊT POUR LA CERTIFICATION Quelle est la différence entre l'état de session et l'état de l'application ? 1.2 PRÊT POUR LA CERTIFICATION Quelle est l'importance des informations d'état persistantes ? 1.2 PRÊT POUR LA CERTIFICATION Comment HTML5 gère-t-il les données d'état ? 1.2 PRÊT POUR LA CERTIFICATION Laquelle des deux méthodes, HTML5/ JavaScript, permet à une application de stocker les données persistantes ? 1.2 Stockage des données d'état à l'aide du stockage local et de session 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, qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur Web à « se souvenir » d'un utilisateur et à personnaliser son 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 données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée dans le temps. La méthode sessionStorage permet de conserver les données uniquement pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle également de « stockage par onglet ». Ces méthodes permettent de transférer des données spécifiques uniquement sur demande. Il est donc possible de stocker une quantité relativement importante de données sans ralentir la connexion ou le site. 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 charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit : index.html stylesheet.css images/dot.png scripts/main.js XREF Vous en apprendrez plus sur l'utilisation de AppCache avec JavaScript dans la leçon 8. Alerte Prêt pour la certification Aide au lecteur « Référence croisée »
  • 12. x  |  Tour du livre illustré www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). Gestion de l'interface graphique avec CSS | 163 <body> <div>Exemple de boîte</div> </body> </html> 2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un navigateur Web, qui doit ressembler à la figure 7-4. Figure 7-4 Boîte avec des coins arrondis 3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style : box-shadow: 5px 5px 5px #999; 4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit ressembler à la figure 7-5. Figure 7-5 Boîte avec des coins arrondis et une ombre portée 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 se trouve sur la droite. Figure 7-6 Transparence appliquée à une image La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est : opacity: value La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et 1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez utiliser la valeur 0,55 (1,0 – 0,45). PRÊT POUR LA CERTIFICATION Quelle propriété CSS vous permet d'appliquer de la transparence à un élément ou à une image ? 3.4 Photos 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) 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. ■ Comprendre les principes fondamentaux du langage HTML 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 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. L'ESSENTIEL 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é. Balisage et structure de page de base 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. Aide au lecteur « Remarque » Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55 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. PRÊT POUR LA CERTIFICATION Quelles sont les balises HTML5 utilisées pour structurer et organiser un document ? 2.4 Tableau 3-1 Nouvelles balises HTML5 pour l'organisation du contenu et la création de structure Balise Description <address> Définit une zone pour obtenir les coordonnées d'une page ou d'une section <article> Définit un article, comme un article de magazine ou de journal, un billet de blog ou un contenu similaire <aside> Définit le contenu qui est distinct mais quand même associé au contenu de la page. Semblable à une barre latérale dans les chapitres de livres et les articles de magazine <details> Contient des détails supplémentaires relatifs au texte autour. Crée un 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 l'auteur du document, les coordonnées, les informations de copyright 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 <hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>) pour des titres sur plusieurs niveaux <nav> Définit un bloc de liens de navigation <section> Définit une section d'un document, comme des chapitres, des parties 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 cliquer pour afficher ou masquer les informations <wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou 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 Figure 3-1 Comparaison des parties de document balisées en HTML 4.01 et HTML5 Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du contenu dans un document HTML, on trouve header, footer, section, nav, article et aside. Utilisation des balises pour structurer un document HTML Maintenant que vous comprenez le balisage sémantique, nous allons étudier plusieurs des nouveaux éléments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et décrit les nouvelles balises liées à la structure HTML5. Tableaux faciles à lire
  • 13. Tour du livre illustré  |  xi www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133 RÉSUMÉ DES COMPÉTENCES Dans cette leçon, vous avez appris ce qui suit : •   Les interfaces utilisateur peuvent être simples et directes ou être plus complexes  avec plusieurs sections, boutons et contrôles. •   La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits  appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur 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. •   Les 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. 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. Compléter l’espace vide Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. L' est la partie d’un site Web ou d’une application avec laquelle l'utilisateur peut interagir. 2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace entre la bordure et le contenu de la boîte. ■ Évaluation des connaissances Évaluation des connaissances Questions Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133 RÉSUMÉ DES COMPÉTENCES Dans cette leçon, vous avez appris ce qui suit : •   Les interfaces utilisateur peuvent être simples et directes ou être plus complexes  avec plusieurs sections, boutons et contrôles. •   La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits  appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur 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. •   Les 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. 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. Compléter l’espace vide Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. L' est la partie d’un site Web ou d’une application avec laquelle l'utilisateur peut interagir. 2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace entre la bordure et le contenu de la boîte. ■ Évaluation des connaissances Matrice Résumé des compétences 86 | Leçon 3 10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ? a. <input label="email" name="URL"> b. <form id="email"> c. <label for="email">Email</label> d. <input type = "email" name = "email"> Vrai/Faux Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse. V F 1. Dans un tableau, l’élément tfoot doit s’afficher avant l’élément tbody. V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entrée d’une liste triée. V F 3. Vous pouvez spécifier la hauteur d’un élément d’entrée à l’aide de l’attribut size. V F 4. L'élément label affiche la légende, ou le titre d'un tableau. V F 5. L'élément nav définit un bloc de liens de navigation. ■ Évaluation des compétences Scénario 3-1 : Balisage d’un article de journal Sally Rowe, contrôleur de documents chez Malted Milk Media, souhaite publier une série d’articles sur l’intranet de la société portant sur la sécurité et la gestion des versions 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 ? 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 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 les tableaux correctement dans HTML5. Que pouvez-vous lui dire ? ■ Évaluation de la maîtrise des concepts 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 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 ? Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire Web Margie est en train de créer et de tester un formulaire Web qui comporte entre autres un champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web, et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ 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 ? Évaluation des compétences Évaluation de la maîtrise des concepts
  • 14. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xii  |  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 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é. REMARQUE* * Des aides au lecteur figurent dans le texte, dans des cases grisées. Remarque fournit des conseils utiles liés à des tâches ou sujets particuliers. XREF Ces remarques fournissent des pointeurs vers des informations 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. L'ESSENTIEL
  • 15. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xiii 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.
  • 16. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). xiv | Programme de soutien de l'instructeur DREAMSPARK PREMIUM – ABONNEMENT DE 3 ANS OFFERT AUX UTILISATEURS QUALIFIÉS ! DreamSpark Premium est conçu pour fournir le moyen le plus simple et le plus économique pour les universités de rendre les derniers outils de développement, produits et technologies de Microsoft disponibles dans les laboratoires, salles de classe et sur les PC des étudiants. DreamSpark Premium est un programme d'abonnement annuel destiné aux départements d'enseignement des cours de sciences, technologie, ingénierie et mathématiques (STEM). L'abonnement offre une solution complète destinée à permettre aux laboratoires universitaires, professeurs et étudiants de rester à la pointe de la technologie. Les logiciels disponibles dans le programme DreamSpark Premium sont offerts aux départements qui s'abonnent dans le cadre du partenariat d'édition entre Wiley et Microsoft. Des outils qui aident les professeurs à motiver et impliquer les élèves dans les technologies d'aujourd'hui. Contactez votre représentant Wiley pour plus de détails. Pour plus d'informations sur le programme DreamSpark Premium, visitez le site Web : https://www.dreamspark.com/ 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. ■ Adresses Web et numéros de téléphone importants Pour localiser le représentant de l'enseignement supérieur Wiley dans votre région, rendez-vous sur http://www.wiley.com/college et cliquez sur le lien « Who’s My Rep? » (Qui est mon représentant ?) situé en haut de la page, ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). Pour savoir comment obtenir la certification et connaître la disponibilité de l'examen, visitez le site www.microsoft.com/learning/mcp/mcp.
  • 17. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xv 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. Wiley Desktop Editions Les éditions Wiley MOAC Desktop Editions sont des versions électroniques novatrices des manuels imprimés. Les stagiaires acquièrent la version de bureau jusqu'à 40 % moins cher que le prix américain du texte imprimé, et peuvent bénéficier de la valeur ajoutée de la permanence et de la portabilité. Les éditions Wiley Desktop Editions fournissent également aux étudiants de nombreux avantages supplémentaires qui ne sont pas disponibles avec d'autres solutions de texte électronique. Les éditions Wiley Desktop Editions NE sont PAS des abonnements. Les stagiaires téléchargent l'édition Wiley Desktop Edition sur le bureau de leurs ordinateurs. Les stagiaires sont propriétaires du contenu qu'ils achètent et peuvent le conserver aussi longtemps qu'ils le souhaitent. Une fois une édition Wiley Desktop Edition téléchargée sur le bureau de l'ordinateur, les stagiaires ont un accès instantané à tout le contenu sans être en ligne. Les stagiaires peuvent également imprimer les sections qu'ils préfèrent lire sur support papier. Les stagiaires ont aussi accès à des ressources entièrement intégrées au sein de leur édition Wiley Desktop Edition. De la mise en surbrillance du texte électronique à la prise et au partage de notes, les stagiaires peuvent facilement personnaliser leur édition Wiley Desktop Edition au fur et à mesure de leurs lectures ou en classe. ■ À propos de la certification Microsoft Technology Associate (MTA) Préparer la main-d'œuvre technologique de demain La technologie joue un rôle dans pratiquement toutes les entreprises du monde entier. Posséder des connaissances fondamentales du fonctionnement d'une technologie et comprendre son impact sur l'environnement académique et professionnel d'aujourd'hui est de plus en plus important, en particulier pour les stagiaires qui souhaitent explorer des professions qui impliquent des technologies. C'est pourquoi Microsoft a créé la certification Microsoft Technology Associate (MTA), un nouveau programme de crédit de niveau débutant qui valide les connaissances technologiques fondamentales des stagiaires qui cherchent à faire carrière dans les technologies. La certification Microsoft Technology Associate (MTA) est le moyen idéal et privilégié d'accéder à des programmes de certification technologiques de renommée mondiale de Microsoft, tels que Microsoft Certified Solutions Developer (MCSD). MTA est en passe de devenir le premier programme de certification destiné aux personnes qui cherchent à explorer et à poursuivre une carrière dans les technologies, ou à renforcer leurs connaissances dans des activités connexes telles que l'entreprise ou tout autre domaine où la technologie est omniprésente.
  • 18. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). xvi | Programme de soutien au stagiaire Profil des candidats à la certification MTA Le programme de certification MTA est conçu spécifiquement pour les étudiants de niveau secondaire et post-secondaire qui souhaitent explorer des options académiques et professionnelles dans un domaine technologique. Il offre aux stagiaires une certification en informatique de base et en développement. En tant que nouveau point d'entrée recommandé pour les certifications technologiques Microsoft, MTA est destiné tout spécialement aux stagiaires qui découvrent l'informatique et le développement de logiciels. Il est disponible exclusivement dans les contextes éducatifs et s'intègre facilement dans les programmes des cours d'informatique existants. La certification MTA donne des moyens aux éducateurs et motive les stagiaires MTA offre une nouvelle norme pour mesurer et valider les connaissances technologiques fondamentales dans la salle de classe sans porter atteinte à votre budget ni à vos ressources 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). Fourniture des examens MTA : la licence Campus MTA Avec la licence Campus MTA, mettre en œuvre un nouveau programme de certification dans votre salle de classe n'a jamais été aussi facile. L'achat d'une licence Campus MTA annuelle rend inutile les demandes de budget ad hoc et les achats récurrents de bons d'examens. Désormais, vous pouvez prévoir un budget à petit prix sur l'année entière et donner accès aux examens MTA à vos stagiaires et autres professeurs dans l'ensemble de votre campus où et quand vous le voulez. La licence Campus MTA fournit une suite pratique et abordable de certifications technologiques de niveau débutant, conçue pour donner des moyens aux éducateurs et motiver les stagiaires au fur et à mesure qu'ils construisent les fondations de leur carrière. La licence Campus MTA est administrée par Certiport, fournisseur exclusif d'examen MTA de Microsoft. Pour en savoir plus sur la façon d'obtenir la certification Microsoft Technology Associate, ainsi que sur la disponibilité de l'examen, visitez le site www.microsoft.com/learning/mta. Certains liens présents dans ce cours renvoient à des pages en anglais.REMARQUE *
  • 19. Numéro gratuit de MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). Programme de soutien au stagiaire  |  xvii ■ Activez votre test pratique GRATUIT pour la certification MTA ! L'acquisition de ce livre vous donne droit à un test pratique gratuit pour la certification MTA de GMetrix (d'une valeur de 30 $). Rendez-vous sur www.gmetrix.com/mtatests et utilisez le code de validation suivant pour activer votre test gratuit : MTA98-375- 3324376A6A85. Le système de gestion des compétences GMetrix fournit tout ce dont vous avez besoin pour vous entraîner pour la certification Microsoft Technology Associate (MTA). Présentation des fonctionnalités de test : • Carte des tests pratiques en fonction des objectifs de l'examen Microsoft Technology Associate (MTA) • Les tests pratiques de la certification MTA de GMetrix simulent l'environnement de test MTA réel • Plus de 50 questions par test, qui couvrent tous les objectifs • Progressez à votre propre rythme, enregistrez le test pour le reprendre plus tard et revenez aux questions laissées en suspens • Rapports détaillés et imprimables sur les notes, qui soulignent les domaines qui requièrent une étude plus approfondie Pour tirer le meilleur parti de votre préparation MTA, profitez dès aujourd'hui de votre test pratique gratuit pour la certification MTA GMetrix. Pour des questions de support technique sur l'installation ou l'activation du code, envoyez un message électronique à support@gmetrix.com.
  • 20. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xviii  |  Remerciements ■ MOAC MTA - Réviseurs des notions technologiques fondamentales Nous aimerions remercier les nombreux réviseurs qui ont relu le manuscrit et fourni de précieux commentaires destinés à améliorer la qualité du matériel pédagogique : Yuke Wang, Université du Texas à Dallas Palaniappan Vairavan, Bellevue College Harold « Buz » Lamson, ITT Technical Institute Colin Archibald, Valencia Community College Catherine Bradfield, DeVry University en ligne Robert Nelson, Blinn College Kalpana Viswanathan, Bellevue College Bob Becker, Vatterott College Carol Torkko, Bellevue College Bharat Kandel, Missouri Tech Linda Cohen, Forsyth Technical Community College Candice Lambert, Metro Technology Centers Susan Mahon, Collin College Mark Aruda, Hillsborough Community College Claude Russo, Brevard Community College Heith Hennel, Valencia College Adrian Genesir, Western Governors University Zeshan Sattar, Zenos Douglas Tabbutt, Blackhawk Technical College David Koppy, Baker College Sharon Moran, Hillsborough Community College Keith Hoell, Briarcliffe College et Queens College, CUNY Mark Hufnagel, Lee County School District Rachelle Hall, Glendale Community College Scott Elliott, Christie Digital Systems, Inc. Gralan Gilliam, Kaplan Steve Strom, Butler Community College John Crowley, Bucks County Community College Margaret Leary, Northern Virginia Community College Sue Miner, Lehigh Carbon Community College Gary Rollinson, Cabrillo College Al Kelly, University of Advancing Technology Katherine James, Seneca College David Kidd, Western Governors University
  • 21. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). |  xix Brève table des matières Leçon 1 : Gestion du cycle de vie d'une application  1 Leçon 2 : Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia 21 Leçon 3 : Création de l'interface utilisateur avec HTML5 : Organisation, saisie et validations 53 Leçon 4 : Présentation des notions essentielles sur les feuilles de style en cascade CSS : Flux de contenu, positionnement et style 87 Leçon 5 : Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions 110 Leçon 6 : Gestion de l'enchaînement du texte avec CSS  137 Leçon 7 : Gestion de l'interface graphique avec CSS  159 Leçon 8 : Présentation des principes de base de JavaScript et du codage 189 Leçon 9 : Création d'animations, utilisation de graphiques et accès aux données  215 Leçon 10 : Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc.  243 Annexe 268 Index 269
  • 22. www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xx  |  Contenu Leçon 1 : Gestion du cycle de vie d'une application 1 Matrice d'objectifs d'examen  1 Termes clés  1 Présentation des principes fondamentaux de la plateforme  2 Quelles sont les nouveautés de HTML5 ?  3 Création d'applications  5 Exploration de l'empaquetage et de l'environnement d'exécution 7 Présentation du processus hôte  7 Présentation du package d'application et du conteneur d'applications 8 Présentation des jeux d'informations d'identification et d'autorisations 10 Présentation et gestion des états de l'application 10 Stockage des données d'état à l'aide du stockage local et de session 11 AppCache pour les fichiers hors connexion 11 Présentation des interfaces tactiles et des mouvements 12 Utilisation des compétences et du contenu HTML5 existants pour les applications de tablettes tactiles/ tablettes 13 Débogage et test des applications HTML5 13 Validation du code HTML5 14 Validation d'un package 14 Publication d'une application dans un magasin en ligne 16 Résumé des compétences 17 Évaluation des connaissances 18 Évaluation des compétences 20 Évaluation de la maîtrise des concepts 20 Leçon 2 : Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia 21 Matrice d'objectifs d'examen  21 Termes clés  21 Comprendre les principes fondamentaux du langage HTML 22 Balisage et structure de page de base  22 Utilisation d'attributs  23 Imbrication d'éléments 24 Comprendre les entités  24 Comprendre le doctype  25 Exploration du balisage d'une page Web simple  26 Sélection et configuration de balises HTML5 pour l'affichage du texte 29 Éléments de texte HTML 4 avec une nouvelle signification ou fonction  29 Nouveaux éléments de texte dans HTML5 31 Éléments de texte inutilisés dans HTML5  32 Sélection et configuration de balises HTML5 pour l'affichage des graphiques 34 Utilisation des éléments figure et figcaption 35 Création de graphiques à l'aide de canvas  38 Notions de base de l'élément canvas 39 Création d'un contour de forme  40 Spécification d'une image ou d'un texte de remplacement pour les anciens navigateurs  41 Création de graphiques à l'aide de SVG  42 Quand utiliser canvas au lieu de SVG  44 Sélection et configuration de balises HTML5 pour la lecture de contenu multimédia 45 Comprendre et utiliser les balises de contenu vidéo  45 Comprendre et utiliser les balises audio  47 Résumé des compétences 49 Évaluation des connaissances 49 Évaluation des compétences 51 Évaluation de la maîtrise des concepts 52 Leçon 3 : Création de l'interface utilisateur avec HTML5 : Organisation, saisie et validations 53 Matrice d'objectifs d'examen  53 Termes clés  53 Sélection et configuration des balises HTML5 pour organiser le contenu et les formulaires 54 Présentation de la sémantique HTML  54 Utilisation des balises pour structurer un document HTML  55 Éléments header et footer  56 L'élément section  57 L'élément nav  59 L'élément article  61 L'élément aside  61 Utilisation de balises pour créer des tableaux et des
  • 23. 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). avec CSS 111 Utilisation de la boîte flexible pour des dispositions simples et utilisation de la grille pour les dispositions complexes 112 Utilisation de la boîte flexible (Flexbox) pour appliquer au contenu un alignement, une direction et une orientation 114 Utiliser les éléments Flexboxes et Flexbox  116 Mise à l'échelle proportionnelle dans une boîte flexible  116 Modification de l'orientation des éléments enfants dans une boîte flexible  122 Tri et réorganisation du contenu  126 Utilisation des dispositions en grille pour appliquer au contenu un alignement, une direction et une orientation 128 Création d'une grille à l'aide de propriétés CSS pour les lignes et colonnes  130 Présentation des modèles de grille  132 Résumé des compétences 133 Évaluation des connaissances 133 Évaluation des compétences 135 Évaluation de la maîtrise des concepts 136 Leçon 6 : Gestion de l'enchaînement du texte avec CSS  137 Matrice d'objectifs d'examen  137 Termes clés  137 Gestion de l’enchaînement du texte avec CSS 137 Présentation et utilisation des régions pour contrôler l'enchaînement du texte entre plusieurs sections 139 Enchaînement dynamique du contenu à travers les conteneurs 140 Débordement du texte  142 Implémentation Microsoft des régions CSS  142 Utilisation des colonnes et de la césure pour optimiser la lisibilité du texte  145 Création de colonnes  146 Utilisation de la césure  150 Utilisation d'exclusions CSS pour créer un enchaînement autour d'un objet flottant  152 Résumé des compétences 155 Évaluation des connaissances 155 Évaluation des compétences 157 Évaluation de la maîtrise des concepts 158 Leçon 7 : Gestion de l'interface graphique avec CSS  159 Matrice d'objectifs d'examen  159 Termes clés  159 listes 64 Création de tableaux 64 Création de listes 69 Sélection et configuration des balises HTML5 pour la saisie et la validation 72 Présentation des entrées et des formulaires  73 Découverte de la création de formulaire, des attributs Input et des valeurs  77 Présentation de la validation  81 Résumé des compétences 83 Évaluation des connaissances 84 Évaluation des compétences 86 Évaluation de la maîtrise des concepts 86 Leçon 4 : Présentation des notions essentielles sur les feuilles de style en cascade CSS : Flux de contenu, positionnement et style 87 Matrice d'objectifs d'examen  87 Termes clés  87 Présentation des notions essentielles sur les feuilles de style en cascade CSS 87 Utilisation des outils appropriés  88 Exploration du lien entre HTML et CSS  89 Séparation du contenu et du style  91 Présentation des sélecteurs et des déclarations  92 Présentation des polices et des familles de polices  94 Gestion du flux de contenu  96 Positionnement des éléments individuels 99 Application du positionnement flottant  99 Application du positionnement absolu  100 Gestion du débordement de contenu  102 Présentation du débordement de défilement  102 Présentation du débordement visible et du débordement masqué 104 Résumé des compétences 105 Évaluation des connaissances 106 Évaluation des compétences 108 Évaluation de la maîtrise des concepts 109 Leçon 5 : Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions 110 Matrice d'objectifs d'examen  110 Termes clés  110 Organisation du contenu d’une interface utilisateur
  • 24. xxii  |  Contents www.wiley.com/college/microsoft ou appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). Gestion de l'interface graphique avec CSS  159 Création d'effets graphiques  160 Création d'angles arrondis  160 Création d'ombres  161 Application de la transparence  163 Application de dégradés à l'arrière-plan  164 Présentation de la typographie et du format WOFF (Web Open Font Format)  166 Application des transformations 2D et 3D  167 Traduction 2D 168 Mise à l'échelle 2D 169 Rotation 2D et 3D  171 Inclinaison 2D et 3D  172 Présentation de la perspective 3D, des transitions et des animations 173 Application d'effets de filtre SVG  179 Utilisation de la zone de dessin pour améliorer l'interface graphique 182 Résumé des compétences 185 Évaluation des connaissances 186 Évaluation des compétences 188 Évaluation de la maîtrise des concepts 188 Leçon 8 : Présentation des principes de base de JavaScript et du codage 189 Matrice d'objectifs d'examen  189 Termes clés  189 Gestion et maintenance du langage JavaScript 189 Création et utilisation des fonctions  193 Utilisation de jQuery et d'autres bibliothèques tierces 197 Mise à jour de l'interface utilisateur avec JavaScript 199 Localisation et accès aux éléments  201 Écoute et réponse aux événements  203 Affichage et masquage des éléments  206 Mise à jour du contenu des éléments  208 Ajout d'éléments 209 Résumé des compétences 211 Évaluation des connaissances 212 Évaluation des compétences 214 Évaluation de la maîtrise des concepts 214 Leçon 9 : Création d'animations, utilisation de graphiques et accès aux données  215 Matrice d'objectifs d'examen  215 Termes clés  215 Codage des animations avec JavaScript 216 Création d'animations  216 Utilisation d'images, de formes et d'autres graphiques 219 Manipulation de l'élément canvas avec JavaScript  220 Envoi et réception de données 224 Transmission d'objets complexes et analyse  227 Chargement et enregistrement de fichiers 229 Utilisation du cache de l'application (AppCache)  231 Présentation et utilisation des types de données  233 Utilisation de JavaScript pour valider les entrées d'utilisateur dans les formulaires 233 Présentation et utilisation des cookies 235 Présentation et utilisation de la fonction de stockage local  237 Résumé des compétences 239 Évaluation des connaissances 240 Évaluation des compétences 242 Évaluation de la maîtrise des concepts 242 Leçon 10 : Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc.  243 Matrice d'objectifs d'examen  243 Termes clés  243 Réponse à l'interface tactile 244 Capture et réponse aux mouvements  246 Codage des API HTML5 supplémentaires 249 Codage pour capturer la géolocalisation  249 Présentation des traitements Web  252 Présentation des WebSockets  255 Utilisation de l'API de fichier pour les téléchargements de fichiers  258 Accès aux ressources des périphériques et du système d'exploitation 260 Accès aux ressources en mémoire  260 Accès aux capacités matérielles  262 Présentation du GPS (Global Positioning System)  263 Présentation de l'accéléromètre  263 Accès à une caméra  263 Résumé des compétences 264 Évaluation des connaissances 265 Évaluation des compétences 267 Évaluation de la maîtrise des concepts 267 Annexe 268 Index 269
  • 25. Gestion du cycle de vie d'une application LEÇON 1 1 T E R M E S C L É S AppCache autorisations d’identité conteneur d’applications cookies débogage espace de noms état de l’application état de session événement tactile feuilles de style en cascade (CSS) HTML5 Hypertext Markup Language (HTML) Hypertext Transport Protocol (HTTP) icône de lancement indépendant de la plateforme informations d’état persistantes interface de programmation d’application (API) interface utilisateur Windows JavaScript jeux d’autorisations langage de balisage langage de script localStorage mouvement package d’application requêtes multimédias sessionStorage simulateur ou émulateur d’écran tactile validateur Windows Runtime (WinRT) Windows Store World Wide Web Consortium (W3C) MATRICE D'OBJECTIFS D'EXAMEN Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif de l'examen MTA Présentation des principes Connaissance des principes 1.1 fondamentaux de la plateforme fondamentaux de la plateforme Présentation et gestion des Gestion de l’état d’une 1.2 états de l'application application Présentation des interfaces Connaissance des principes 1.1 tactiles et des mouvements fondamentaux de la plateforme Débogage et test d'une 1.3 application HTML5 à interactions tactiles Débogage et test des Débogage et test d’une 1.3 applications HTML5 application HTML5 à interactions tactiles Publication d'une application Publication d’une application 1.4 dans un magasin en ligne dans un magasin en ligne
  • 26. 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. 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. Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent 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 smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent. 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 pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1. PRÊT POUR LA CERTIFICATION ■  Présentation des principes fondamentaux de la plateforme HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant quelques années, la plupart des navigateurs Web modernes prennent déjà en charge les éléments HTML5 et le développement d'applications HTML5 pour le Web et les navigateurs d'appareils mobiles est en bonne voie. L'ESSENTIEL Figure 1-1 Le logo HTML5 Un point important à retenir est que HTML5 est une norme et une combinaison ou famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes. Les feuilles de style en cascade (CSS) 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 des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3. JavaScript est un langage de script (un langage de programmation qui utilise des scripts et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web. Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous avez aussi la possibilité d'employer la combinaison pour développer des applications PRÊT POUR LA CERTIFICATION Quelles sont les trois technologies principales de la famille HTML5 ? 1.1 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 en charge de nombreux éléments de HTML5. REMARQUE * W3C® est une marque commerciale (déposée dans de nombreux pays) du World Wide Web Consortium ; les marques du W3C sont déposées et détenues par ses institutions hôtes, le MIT, l'ERCIM et l'université de Keio. REMARQUE *
  • 27. Gestion du cycle de vie d’une application | 3 clientes (applications) qui s'exécutent sur des appareils tactiles tels que des ordinateurs, tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilisées par les développeurs pour créer des pages Web commencent à être employées pour créer des applications qui s'exécutent sur différents appareils. HTML5 est également indépendant de la plateforme. Cela signifie que la famille de 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 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. REMARQUE * Quelles sont les nouveautés de HTML5 ? La famille de HTML5 comprend de nombreuses nouvelles balises de marquage et technologies telles que les requêtes multimédias, la géolocalisation, Modernizr et bien plus encore. Ces technologies ajoutent de nombreuses fonctionnalités aux applications basées sur HTML et contribuent à rendre le produit fini plus élégant. Vous en apprendrez plus sur CSS3 et JavaScript dans les leçons ultérieures. REMARQUE *