Notions fondamentales sur le développement d’applications HTML5 · 2019-08-23 · a. Vous trouverez ci-dessous deux sections distinctes relatives aux droits d’utilisation. Une

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 BeatonDIRECTEUR DU MARKETING Chris RuelCHEF DE PRODUIT MICROSOFT Rob Linsky de Microsoft LearningASSISTANT ÉDITORIAL Jennifer LartzRESPONSABLE ADJOINTE DU MARKETING Debbie MartinDIRECTRICE DE PRODUCTION SENIOR Janis SooDIRECTEUR DE PRODUCTION ASSOCIÉ Joel BalbinDIRECTEUR DE LA CRÉATION Harry NolanCONCEPTRICE DE LA COUVERTURE Georgina SmithTECHNOLOGIE 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 Technology Associate (MTA) (www.microsoft.com/learning/certification), vous êtes sûr de recevoir les informations sur un sujet les plus pertinentes pour la réussite personnelle et professionnelle des stagiaires. La participation directe de Microsoft vous assure non seulement que le contenu des manuels MOAC est exact et à jour, mais elle signifie également que les stagiaires recevront un enseignement optimal qui leur permettra de réussir aux examens de certification et dans leur carrière professionnelle.

■ Programme Microsoft Official Academic CourseLa 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.

• ChaqueleçoncommenceparuneMatrice 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.

• Desinstructionspas à 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.

• Desaides 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.

• LesfonctionnalitésPrê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é


■ 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

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

Compétences/Concepts Objectifdel'examenMTA Numérodel'objectif del'examenMTA

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 CERTIFICATIONQuelles 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


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


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


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 CERTIFICATIONQuelle est la différence entre l'état de session et l'état de l'application ?1.2

PRÊT POUR LA CERTIFICATIONQuelle est l'importance des informations d'état persistantes ?1.2

PRÊT POUR LA CERTIFICATIONComment HTML5 gère-t-il les données d'état ?1.2

PRÊT POUR LA CERTIFICATIONLaquelle 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 CONNEXIONUne 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é


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 TRANSPARENCEUn é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 CERTIFICATIONQuelle 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 CERTIFICATIONQuelles 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


Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133

R É S U M É D E S C O M P É T E N C E S

Danscetteleçon,vousavezappriscequisuit:

• 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 connaissancesQuestions

Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133



• 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.


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 tfootdoits’afficheravantl’élémenttbody.V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entrée

d’une liste triée.V F 3. Vouspouvezspécifierlahauteurd’unélémentd’entréeàl’aidede

l’attribut size. V F 4. L'élémentlabelaffichelalégende,ouletitred'untableau.V F 5. L'élément navdéfinitunblocdeliensdenavigation.

■ Évaluation des compétences

Scénario 3-1 : Balisage d’un article de journalSally 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 HTMLVince 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 glossaireWaylon 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 WebMargie 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.

• LeGuide 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).

• Labanque 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.

• Unensemblecompletdepré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.

• Quandils'agitd'améliorerl'expérienceenclasse,iln'yapasdemeilleuresourced'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.


xiv | Programme de soutien de l'instructeur

DREAMSPARKPREMIUM–ABONNEMENTDE3ANSOFFERT 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 importantsPour 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émentairesSite 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.


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 :

• Cartedestestspratiquesenfonctiondesobjectifsdel'examenMicrosoftTechnologyAssociate (MTA)

• LestestspratiquesdelacertificationMTAdeGMetrixsimulentl'environnementdetest MTA réel

• Plusde50questionspartest,quicouvrenttouslesobjectifs• Progressezàvotreproprerythme,enregistrezletestpourlereprendreplustardet

revenez aux questions laissées en suspens• Rapportsdétaillésetimprimablessurlesnotes,quisoulignentlesdomainesqui

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 à [email protected].

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 à DallasPalaniappan Vairavan, Bellevue CollegeHarold « Buz » Lamson, ITT Technical InstituteColin Archibald, Valencia Community CollegeCatherine Bradfield, DeVry University en ligneRobert Nelson, Blinn CollegeKalpana Viswanathan, Bellevue CollegeBob Becker, Vatterott CollegeCarol Torkko, Bellevue CollegeBharat Kandel, Missouri TechLinda Cohen, Forsyth Technical Community CollegeCandice Lambert, Metro Technology CentersSusan Mahon, Collin CollegeMark Aruda, Hillsborough Community CollegeClaude Russo, Brevard Community CollegeHeith Hennel, Valencia CollegeAdrian Genesir, Western Governors UniversityZeshan Sattar, Zenos

Douglas Tabbutt, Blackhawk Technical CollegeDavid Koppy, Baker CollegeSharon Moran, Hillsborough Community CollegeKeith Hoell, Briarcliffe College et Queens College, CUNYMark Hufnagel, Lee County School DistrictRachelle Hall, Glendale Community CollegeScott Elliott, Christie Digital Systems, Inc.Gralan Gilliam, KaplanSteve Strom, Butler Community CollegeJohn Crowley, Bucks County Community CollegeMargaret Leary, Northern Virginia Community CollegeSue Miner, Lehigh Carbon Community CollegeGary Rollinson, Cabrillo CollegeAl Kelly, University of Advancing TechnologyKatherine James, Seneca CollegeDavid 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çon3: 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 1Termes clés 1Présentation des principes fondamentaux de la

plateforme 2Quelles sont les nouveautés de HTML5 ? 3Création d'applications 5Exploration de l'empaquetage et de l'environnement

d'exécution 7Présentation du processus hôte 7Présentation du package d'application et du conteneur

d'applications 8Présentation des jeux d'informations d'identification et

d'autorisations 10Présentation et gestion des états de l'application 10

Stockage des données d'état à l'aide du stockage local et de session 11AppCache pour les fichiers hors connexion 11

Présentation des interfaces tactiles et des mouvements 12Utilisation des compétences et du contenu HTML5

existants pour les applications de tablettes tactiles/tablettes 13

Débogage et test des applications HTML5 13Validation du code HTML5 14Validation 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 21Termes clés 21Comprendre les principes fondamentaux du langage

HTML 22Balisage et structure de page de base 22

Utilisation d'attributs 23

Imbrication d'éléments 24Comprendre les entités 24Comprendre le doctype 25Exploration 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 29Nouveaux é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 34Utilisation des éléments figure et figcaption 35Création de graphiques à l'aide de canvas 38

Notions de base de l'élément canvas 39Création d'un contour de forme 40Spécification d'une image ou d'un texte de remplacement

pour les anciens navigateurs 41Création de graphiques à l'aide de SVG 42Quand utiliser canvas au lieu de SVG 44

Sélection et configuration de balises HTML5 pour la lecture de contenu multimédia 45Comprendre et utiliser les balises de contenu vidéo 45Comprendre et utiliser les balises audio 47


Leçon3: Création de l'interface utilisateur avec HTML5 : Organisation, saisie et validations 53

Matrice d'objectifs d'examen 53Termes clés 53Sélection et configuration des balises HTML5 pour

organiser le contenu et les formulaires 54Présentation de la sémantique HTML 54Utilisation des balises pour structurer un

document HTML 55Éléments header et footer 56L'élément section 57L'élément nav 59L'élément article 61L'élément aside 61

Utilisation de balises pour créer des tableaux et des

Contents | xxi


avec CSS 111Utilisation 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 114Utiliser les éléments Flexboxes et Flexbox 116

Mise à l'échelle proportionnelle dans une boîte flexible 116Modification de l'orientation des éléments enfants dans une

boîte flexible 122Tri et réorganisation du contenu 126

Utilisation des dispositions en grille pour appliquer au contenu un alignement, une direction et une orientation 128Création d'une grille à l'aide de propriétés CSS pour les

lignes et colonnes 130Présentation des modèles de grille 132


Leçon 6 : Gestion de l'enchaînement du texte avec CSS 137

Matrice d'objectifs d'examen 137Termes clés 137Gestion de l’enchaînement du texte avec CSS 137Présentation et utilisation des régions pour contrôler

l'enchaînement du texte entre plusieurs sections 139Enchaînement dynamique du contenu à travers les

conteneurs 140Débordement du texte 142Implémentation Microsoft des régions CSS 142

Utilisation des colonnes et de la césure pour optimiser la lisibilité du texte 145Création de colonnes 146Utilisation de la césure 150

Utilisation d'exclusions CSS pour créer un enchaînement autour d'un objet flottant 152


Leçon 7 : Gestion de l'interface graphique avec CSS 159

Matrice d'objectifs d'examen 159Termes clés 159

listes 64Création de tableaux 64Création de listes 69

Sélection et configuration des balises HTML5 pour la saisie et la validation 72Pré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 81Ré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 87Termes clés 87Présentation des notions essentielles sur les feuilles

de style en cascade CSS 87Utilisation des outils appropriés 88Exploration du lien entre HTML et CSS 89Séparation du contenu et du style 91Présentation des sélecteurs et des déclarations 92Présentation des polices et des familles de polices 94Gestion du flux de contenu 96Positionnement des éléments individuels 99

Application du positionnement flottant 99Application du positionnement absolu 100

Gestion du débordement de contenu 102Présentation du débordement de défilement 102Présentation du débordement visible et du débordement

masqué 104


Leçon 5 : Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions 110

Matrice d'objectifs d'examen 110Termes clés 110Organisation du contenu d’une interface utilisateur

xxii | Contents


Gestion de l'interface graphique avec CSS 159Création d'effets graphiques 160

Création d'angles arrondis 160Création d'ombres 161Application de la transparence 163Application 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 167Traduction 2D 168Mise à l'échelle 2D 169Rotation 2D et 3D 171Inclinaison 2D et 3D 172Présentation de la perspective 3D, des transitions et des

animations 173Application d'effets de filtre SVG 179Utilisation de la zone de dessin pour améliorer l'interface

graphique 182Ré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 189Termes clés 189Gestion et maintenance du langage JavaScript 189

Création et utilisation des fonctions 193Utilisation de jQuery et d'autres bibliothèques

tierces 197Mise à jour de l'interface utilisateur avec JavaScript 199

Localisation et accès aux éléments 201Écoute et réponse aux événements 203Affichage et masquage des éléments 206Mise à jour du contenu des éléments 208Ajout d'éléments 209


Leçon 9 : Création d'animations, utilisation de graphiques et accès aux données 215

Matrice d'objectifs d'examen 215Termes clés 215

Codage des animations avec JavaScript 216Création d'animations 216

Utilisation d'images, de formes et d'autres graphiques 219Manipulation de l'élément canvas avec JavaScript 220

Envoi et réception de données 224Transmission d'objets complexes et analyse 227

Chargement et enregistrement de fichiers 229Utilisation du cache de l'application (AppCache) 231Pré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 235Présentation et utilisation de la fonction de stockage

local 237Ré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 243Termes clés 243Réponse à l'interface tactile 244

Capture et réponse aux mouvements 246Codage des API HTML5 supplémentaires 249

Codage pour capturer la géolocalisation 249Présentation des traitements Web 252Présentation des WebSockets 255Utilisation de l'API de fichier pour les téléchargements

de fichiers 258Accès aux ressources des périphériques et du système

d'exploitation 260Accès aux ressources en mémoire 260Accès aux capacités matérielles 262

Présentation du GPS (Global Positioning System) 263Présentation de l'accéléromètre 263Accès à une caméra 263


Annexe 268

Index 269

Gestion du cycle de vie d'une application

L E Ç O N 1

1


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 WindowsJavaScript

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)



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 CERTIFICATIONQuelles 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*


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*

4 | Leçon 1

Voici une courte liste de ces nouvelles fonctionnalités et de brèves descriptions : • Balises audio et vidéo : intègrent du contenu multimédia audio et vidéo à l'aide des

balises de marquage HTML5 <audio> et <video>.• Zone de dessin : élément HTML5 qui crée un conteneur pour graphiques et utilise

JavaScript pour dessiner les graphiques en fonction des besoins.• Requêtes multimédias : fonction CSS3 qui détecte le type d'écran de l'utilisateur et

adapte la taille d'affichage en conséquence.• Nouvelles interfaces de programmation d'application (API) : fournissent aux

applications un accès à de nombreuses ressources, comme les fichiers, les webcams et les animations accélérées au niveau matériel.

• Géolocalisation : utilise JavaScript pour détecter l'emplacement (positionnement géographique) d'un périphérique client, qu'il s'agisse d'un appareil Windows Phone, d'un téléphone Android ou d'un PC.

• Modernizr : bibliothèque JavaScript qui permet de fournir les nouvelles fonctions HTML5 et CSS3 dans des navigateurs plus anciens.

Il s'agit d'un petit échantillon des fonctionnalités et technologies disponibles. Vous apprendrez comment utiliser plusieurs d'entre elles dans les leçons qui composent ce cours.

EXPLOREZ LA NORME HTML5PRÉPAREZ-VOUS. Pour en savoir plus sur la norme HTML5, procédez comme suit : 1. Accédez au site Web du W3C à l'adresse http://www.w3.org/TR/html5/. 2. Lisez le contenu des premières pages, jusqu'à la table des matières, puis répondez aux

questions suivantes :• Quelle est la dernière version publiée de la norme ?• Quel groupe de travail est responsable de la spécification ?• Quel est le nom de la page Web qui permet le suivi des bogues, et quels sont les

trois bogues qui n'ont pas encore été traités ?• Quel est le nom de la page Web qui permet le suivi des problèmes en suspens, et

quels sont les trois problèmes qui n'ont pas encore été traités ? 3. Passez environ 15 minutes à naviguer sur le reste de la page Web HTML5 principale

afin de vous familiariser avec les sujets.

EXPLOREZ LES RESSOURCES DE DÉVELOPPEMENT D'APPLICATIONS

PRÉPAREZ-VOUS. Pour en savoir plus sur les ressources de développement d'applications fournies par Microsoft, procédez comme suit : 1. Accédez au site Web Visual Studio 2012 à l’adresse http://msdn.microsoft.com/fr-fr/

library/vstudio/dd831853(v=vs.110).aspx. 2. Dans la page qui s'affiche, consultez les informations. Quels sont les outils de

développement ou technologies qui vous permettent de créer des applications Windows Store ?

3. Accédez à la page Web HTML/CSS pour les applications Windows Store à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576.

4. Cliquez sur le lien Informations de référence HTML et DOM, puis répondez à la question suivante :• Qu'est-ce que le DOM (Document Object Model) et quelle est son importance

pour les applications Windows Store ? 5. Retournez à la page HTML/CSS pour les applications Windows Store à l'adresse

http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576. Cliquez sur le lien Référence des feuilles de style en cascade, puis effectuez l'action suivante :• Nommez trois éléments de pages Web qui sont contrôlés à l'aide de CSS.

6. Allez sur le site MSDN à l'adresse http://bit.ly/Hd9uzt. Parcourez les informations afin de vous familiariser avec le site.


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.


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

6 | Leçon 1

Figure 1-4

Un exemple d'un fichier manifeste

• Écrire le code : au cours de cette phase, vous composez le code de votre application, qui peut inclure une combinaison de HTML, CSS et JavaScript.

• Développer l'application : à l'aide d'un outil de développement d'applications tel que Visual Studio, convertissez le code et les autres ressources en une application réelle.

• Déboguer et tester : vous devez tester votre application soigneusement et résoudre les éventuels problèmes qui apparaissent. Si l'application utilise une interface tactile, il est très important de la tester sur un appareil tactile ou d'utiliser un émulateur tactile.

• Créer le package : l'empaquetage d'une application crée un conteneur qui contient tous les différents fichiers requis par l'application, tels que JavaScript, des images et ainsi de suite.

• Valider : valider votre application implique d'exécuter un programme de validation sur cette application pour s'assurer que rien ne manque.

• Déployer : télécharger une application sur une place de marché comme le Windows Store.Les applications que vous prévoyez de déployer pour de nombreux utilisateurs, notamment via un marché comme un magasin d'applications, doivent être fiables et sûres. De nombreuses applications sont également conçues pour fonctionner sur plusieurs systèmes d'exploitation. Assurez-vous que vous avez testé soigneusement votre application et que vous l'avez validée avec les outils appropriés. Vous devez également envisager de fournir un support technique pour des applications plus complexes.

PRÉPARATIONPOURLEDÉVELOPPEMENTD'APPLICATIONS

PRÉPAREZ-VOUS. Pour vous préparer à utiliser HTML5 et à développer des applications, procédez comme suit : 1. Cherchez des sources d'images gratuites, non protégées par copyright sur le Web.

Même si vous êtes capable de créer beaucoup de vos graphiques, disposer de ressources dans lesquelles puiser vous sera utile.

2. Pour utiliser des fichiers HTML5, CSS et JavaScript, téléchargez et installez un éditeur de texte ou HTML, tel que Bloc-notes++. (Il suffit de chercher Bloc-notes++ à l'aide d'un navigateur Web.) Un outil plus complet est Visual Studio Express pour le Web, disponible sur le site Web de Visual Studio à l'adresse http://bit.ly/eBUygk. Visual Studio Express pour le Web vous permet d'ouvrir vos fichiers dans un navigateur Web avec un seul clic et fournit beaucoup de modèles destinés à vous aider à créer rapidement des fichiers.


3. Assurez-vous que la dernière version du navigateur est installée.

4. Pour créer des applications pour le Windows Store, téléchargez Microsoft Visual Studio 2012 Express pour Windows 8 à partir de l'adresse http://dev.windows.com/fr-fr/develop/downloads et installez-le. Le programme requiert que Windows 8 soit installé.

Exploration de l'empaquetage et de l'environnement d'exécution

L'environnement d'exécution de Windows sert de base au système d'exploitation Windows 8 et fournit des fonctionnalités pour les applications Windows Store.

Lorsqu'une application est lancée, on considère qu'elle se trouve dans un environnement d'exécution (RTE). Il s'agit de l'environnement dans lequel les développeurs testent leurs applications et où les utilisateurs exécutent celles-ci. Windows a son propre environnement d'exécution, appelé Windows Runtime (WinRT). WinRT est la base du système d'exploitation Windows 8 et se compose de couches qui fournissent les fonctionnalités aux applications Windows Store et à Windows Shell. WinRT prend en charge les applications écrites dans des langages différents qui utilisent l'interface utilisateur Windows.La couche système de Windows est à la base. Cette couche inclut le noyau, les services et le mode utilisateur Windows. Un niveau plus haut, le noyau Windows Runtime inclut des services supplémentaires comme la gestion de la mémoire et la globalisation. Au-dessus du noyau Windows Runtime se trouvent les couches liées aux périphériques, aux supports, à la mise en réseau, au stockage local et distant et plus encore. La couche d'interface utilisateur prend en charge notamment les applications HTML5.WinRT utilise C#, C++, Visual Basic et JavaScript. Vous pouvez développer des applications Windows Store avec la bibliothèque WinRT et Windows pour les API JavaScript. Une interface de programmation d’application (API) est tout simplement une liste d'instructions qui permettent à un programme de communiquer avec un autre programme. Dans une application Web, une API permet à un navigateur Web ou un serveur Web de communiquer avec d'autres programmes. Des centaines d'API sont disponibles pour de nombreux usages différents.

Le Document Object Model (DOM) est une API importante à garder à l'esprit. Le DOM est conçu pour HTML et XML (Extensible Markup Language) et permet aux programmes et scripts de mettre à jour le contenu, la structure et les styles à la volée. En gros, l'intégralité du contenu d'un fichier HTML ou XML peut être modifiée. Le DOM n'est ni en HTML ni en JavaScript, mais il les lie.

REMARQUE*

La bibliothèque Windows pour JavaScript comprend des fichiers JavaScript et CSS que les développeurs peuvent utiliser pour créer des applications Windows Runtime plus facilement et rapidement. La bibliothèque, HTML, CSS et WinRT vous permettent de créer des applications.L'environnement d'exécution est responsable de l'accès aux appareils, supports, à la mise en réseau, au stockage local et distant, ainsi qu'à d'autres éléments. Un développeur peut utiliser des API et l'environnement d'exécution pour demander l'accès aux périphériques utilisateur dans une application. Dans une application Windows 8, par exemple, l'appareil peut être un clavier, une souris, un pavé tactile, une imprimante, une webcam ou un micro.

PLUS D’INFORMATIONSPour plus d'informations sur Windows Runtime, visitez la page Web « Fonctionnalités et différences HTML, CSS et JavaScript (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465380.aspx.

PRÊT POUR LA CERTIFICATIONQuel environnement donne aux développeurs l'accès à un appareil de l'utilisateur ?1.1

PRÉSENTATION DU PROCESSUS HÔTEQu'une application soit une application Web ou qu'elle ait été créée pour Windows, elle requiert un hôte du runtime pour démarrer. Par exemple, lorsque vous démarrez Internet Explorer, un processus hôte dans le système d'exploitation contrôle l'exécution globale du

✚

8 | Leçon 1

navigateur. (Un « processus » est simplement un programme qui est exécuté.) Dans ce cas, chaque onglet de navigateur a son propre processus, donc si trois onglets sont ouverts, le système a trois processus qui s'exécutent pour chacun de ces onglets.Lorsque vous exécutez une application Windows Store qui a été créée avec JavaScript, Internet Explorer affiche le contenu HTML un peu comme lorsque vous naviguez vers une page Web, mais le navigateur est hébergé par un processus différent, appelé WWAHost.exe. Ce processus exécute l'application à l'intérieur d'un conteneur d'applications. (Vous découvrirez les conteneurs d'applications dans la section suivante.) WWAHost fait passer le HTML, CSS et JavaScript dans la page default.html qui est le début de votre application.Pour que tout fonctionne bien, le code qui s'exécute dans un conteneur d'applications Windows Store est restreint à certaines actions, par défaut. Si vous voulez que votre application accède à un périphérique, une autre application, Internet ou quoi que ce soit en dehors d'elle-même, vous devez déclarer (spécifier) l'interaction dans le manifeste de l'application. Ces déclarations sont trouvent dans la section Fonctionnalités du manifeste. Lorsque l'utilisateur final installe l'application, il doit accorder l'autorisation pour l'accès demandé.Les applications Windows Store utilisent des contrats, qui sont pour l'essentiel des accords, et des éléments appelés extensions lors de la création d'interactions entre les applications. Les API WinRT gèrent la communication entre les applications.

PRÉSENTATION DU PACKAGE D'APPLICATION ET DU CONTENEUR D'APPLICATIONSL'objectif d'un package d'application est de faciliter la distribution et le déploiement. L'empaquetage d'application regroupe les fichiers et dossiers d'une application dans un package distribuable. Un conteneur d'applications garantit que l'application s'exécute dans sa propre zone mémoire et n'endommage pas le système d'exploitation.L'empaquetage d'applications désigne le processus d'assemblage d'une application et de ses différents fichiers dans un fichier distribuable, ce qui facilite son déploiement. Le package de l'application est le résultat du processus d'empaquetage. L'empaquetage est similaire à l'archivage d'un dossier qui contient des fichiers et des sous-dossiers. Il serait difficile d'envoyer tous les fichiers et les sous-dossiers à quelqu'un en l'état, mais le travail est beaucoup plus facile si on compresse le tout dans un fichier d'archives unique. Les packages de développement d'applications tels que Visual Studio fournissent les fonctionnalités pour créer des packages d'applications. Un utilisateur acquiert un package d'application, généralement à partir d'un magasin d'application en ligne et l'installe sur un PC ou un périphérique. L'application est exécutée dans un conteneur d'applications d'exécution, qui correspond à une zone mémoire séparée. Il empêche l'endommagement du système d'exploitation si l'application échoue pour une raison quelconque et permet à l'utilisateur de désinstaller proprement l'application.Voici quelques éléments que vous devez savoir sur les packages :

• Un package peut contenir des pages Web, du code, des tables de base de données et des procédures. Quand un package est doté d'une interface utilisateur, on parle d'application.

• Un package peut contenir d'autres packages. • Vous pouvez déplacer un ou plusieurs éléments dans un package ou les en retirer.

Parce qu'un package se trouve dans son propre conteneur, si vous déplacez un package, tout son contenu se déplace comme une unité.

• Un utilisateur peut installer, mettre à jour ou supprimer un package.Un seul package peut offrir de nombreuses fonctionnalités. Afin de s'assurer que tous les composants sont séparés pour éviter les conflits, un package définit un espace de noms. Envisagez un espace de noms comme un espace de travail pour les objets associés (pages, code, etc.).

EXPLORATION D’EXEMPLES D'APPLICATIONS

PRÉPAREZ-VOUS. Pour explorer les types d'exemples d'applications qui sont disponibles en téléchargement, procédez comme suit : 1. Accédez à la page Web Exemples de code pour développeurs de MSDN (voir la

figure 1-5) à l'adresse http://bit.ly/H57ZVh. Microsoft fournit un large éventail d'exemples d'applications et de code, que vous pouvez télécharger et ouvrir dans un outil de développement d'applications tel que Visual Studio. Vous pouvez également afficher le code pour les nombreux exemples d'applications en ligne.

PRÊT POUR LA CERTIFICATIONQuel est le rôle du processus hôte dans la gestion des applications ?1.1

PRÊT POUR LA CERTIFICATIONQuel est le but de l'empaquetage d'une application ?1.1


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.

10 | Leçon 1

6. Cliquez sur css dans le volet gauche, puis sur default.css. Le code CSS s'affiche. 7. Cliquez sur js dans le volet gauche, puis sur default.js. Le code JavaScript s'affiche. 8. Si vous disposez d'un outil de développement d'applications (tel que Visual Studio)

déjà installé, n'hésitez pas à télécharger et ouvrir l'exemple d'application pour parcourir tous les fichiers du package.

9. Vous pouvez aussi accéder au site Web HTML5Rocks.com, cliquer sur le menu Publications et didacticiels situé en haut de l'écran, cocher la case Exemples, puis découvrir comment chaque exemple fonctionne et son code.

10. Fermez toutes les fenêtres ouvertes.

PLUS D’INFORMATIONSPour plus d'informations sur le package d'application, visitez la page Web « Packages et déploiement d’applications » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh464929.aspx.

Présentation des jeux d'informations d'identification et d'autorisations

Le .NET Framework fournit un environnement sûr dans lequel les applications HTML5/JavaScript peuvent s'exécuter. L'infrastructure utilise la transparence de la sécurité pour séparer les différents types de code en cours d'exécution et des jeux d'autorisations et des autorisations d'identité pour contrôler l'environnement.

La sécurité du code est une priorité pour les développeurs d'applications. La perte pécuniaire causée par les virus, chevaux de Troie, attaques de scripts entre sites et autres logiciels malveillants distribués sur Internet augmente chaque année. Aujourd'hui, la création d'un environnement sûr et sécurisé pour les applications à exécuter est d'une importance vitale pour la plupart des individus et des organisations.La bonne nouvelle est que le .NET Framework 4.0 prend en charge la création et l'exécution des applications Windows Store, entre autres technologies. Le .NET Framework est un composant de Windows qui s'exécute en arrière-plan, fournissant l'environnement d'exécution de code pour code scripté ou interprété (comme JavaScript), afin de les aider à s'exécuter avec relativement peu de problèmes. Il fournit également un environnement de programmation orienté objet pour le code objet. Le .NET Framework s'appuie maintenant plus fortement sur la « transparence » de sécurité que dans les versions précédentes. La transparence empêche l'exécution du code d'application dans le code d'infrastructure. Le .NET Framework utilise des jeux d'autorisations et l'autorisation d'identité. Les jeux d'autorisations sont des groupes d'autorisations. Le code transparent exécute les commandes qui ne dépassent pas les limites d'un jeu d'autorisations et le code transparent est encore plus limité quand il s'agit de code critique. Le .NET Framework définit plusieurs niveaux de jeux d'autorisations, qui vont de Aucun (aucune autorisation n'existe et le code ne peut pas s'exécuter) à Confiance totale (le code peut accéder pleinement à toutes les ressources).Les autorisations d'identité protègent les assemblies (bibliothèques de code compilé) sur la base de la preuve, c'est-à-dire des informations sur l'assembly. Chaque autorisation d'identité représente un type particulier de preuve ou d'informations d'identification qu'un assembly doit avoir pour s'exécuter.

PRÊT POUR LA CERTIFICATIONComment les jeux d'informations d'identification et d'autorisations protègent-ils les applications ?1.1

Un état de session est créé la première fois qu'un utilisateur demande l'accès à une application et il se termine lors de la fermeture de la session, par exemple quand un utilisateur se déconnecte. Un état de l'application existe à partir du moment où un navigateur demande une page Web jusqu'à ce que le navigateur se ferme. Les informations d'état persistantes sont des données qui existent après la fin d'une session. En HTML5, les développeurs peuvent utiliser les méthodes JavaScript localStorage et sessionStorage pour traiter efficacement les données d'état.

L'ESSENTIEL

✚

■ Présentation et gestion des états de l'application


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 CERTIFICATIONQuelle est la différence entre l'état de session et l'état de l'application ?1.2

PRÊT POUR LA CERTIFICATIONQuelle est l'importance des informations d'état persistantes ?1.2

PRÊT POUR LA CERTIFICATIONComment HTML5 gère-t-il les données d'état ?1.2

PRÊT POUR LA CERTIFICATIONLaquelle 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 CONNEXIONUne 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.

12 | Leçon 1

✚ PLUS D’INFORMATIONSPour plus d'informations sur la gestion d'état et le stockage local et de session, consultez la page Web « Stockage et récupération efficaces des états (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/Hh781225.asp.

■ Présentation des interfaces tactiles et des mouvements

Sur un périphérique à écran tactile, un balayage du doigt s'appelle un mouvement et la réponse de l'application à ce mouvement s'appelle un événement. Le développement d'applications à interactions tactiles nécessite une connaissance approfondie de l'interaction des doigts avec l'écran et de la prise en compte des différentes tailles des doigts. Vous pouvez utiliser JavaScript pour créer des applications à interactions tactiles, principalement en ayant recours aux événements touchstart, touchend et touchmove.

L'ESSENTIEL

Les appareils mobiles d'aujourd'hui et un grand nombre d'écrans PC intègrent la technologie d'écran tactile, qui permet à de nombreux utilisateurs d'interagir plus facilement avec les périphériques et leurs programmes. Un simple toucher du doigt sélectionne un objet ou appuie sur un bouton, un balayage du doigt fait défiler une liste de photos sur l'écran, et un pincement effectue un zoom arrière sur une image.Un balayage du doigt s'appelle un mouvement, ce qui peut impliquer un seul doigt (un toucher, comme un appui, un appui prolongé, glisser pour effectuer un mouvement panoramique, etc.) ou un doigt et le pouce (deux touchers, par exemple pincer et étirer ou tourner pour appliquer un mouvement en arc de cercle). L'action de l'application en réponse à un mouvement s'appelle un événement tactile. Vous pouvez utiliser JavaScript pour créer des événements tactiles dans les applications tactiles. En JavaScript, les trois événements tactiles principaux sont touchend, touchstart et touchmove.Lorsque vous créez des applications pour un environnement à interactions tactiles, la réactivité aux mouvements est un élément clé. La lenteur des réactions peut frustrer la plupart des utilisateurs. Intégrez des effets physiques, comme l'accélération et l'inertie afin d'améliorer la fluidité de l'interaction entre l'utilisateur et l'écran.Un retour visuel pour des interactions performantes et d'autres notifications sont très importants. Cela permet à l'utilisateur de savoir s'il utilise correctement le mode paysage tactile. Les points d'ancrage permettent aux utilisateurs de s'arrêter à un emplacement prévu de l'interface, même si un mouvement se situe légèrement en dehors de la cible.N'oubliez pas également que les utilisateurs ont des doigts de tailles différentes, et il est recommandé de créer des applications pour des doigts plus larges, plutôt que plus fins. Et bien sûr, comme les utilisateurs sont droitiers ou gauchers, une application bien conçue utilise une navigation verticalement symétrique et offre une rotation de l'écran à 90 degrés pour passer du mode portrait au mode paysage, ou vice-versa.Une interaction tactile multipoint se produit lorsqu'un utilisateur appuie sur plusieurs boutons ou endroits à la fois. Cela se produit fréquemment avec les jeux sur un appareil à écran tactile, où l'utilisateur utilise souvent plusieurs doigts et les pouces simultanément ou en succession très rapide. Dans cette situation, les balayages et mouvements ne fonctionnent pas bien, ce qui entraîne un zoom et un défilement involontaires à la place. La solution consiste à désactiver le zoom et le défilement en JavaScript.Un autre élément à tester dans une application multipoint est la réaction aux événements tactiles. Beaucoup d'événements se produiront en même temps, ce qui exige un bon suivi des doigts et un rendu en boucle pour obtenir des performances optimales.Lorsque vous déployez une application à interactions tactiles, assurez-vous de tester les points suivants :• Réactivitéetfluiditégénérales• Appuis,pincements,rotationsetautresmouvementscourants• Défilementcontrôlé• Panoramiquecontrôlé

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'un mouvement et quelle est son importance avec les appareils tactiles ?1.3

PRÊT POUR LA CERTIFICATIONQuelles meilleures pratiques en matière d'applications tactiles devriez-vous tester ?1.3

XREF

Vous apprendrez à créer du code JavaScript pour les interfaces tactiles dans la leçon 9.


• Possibilité de désactiver le défilement et le mouvement panoramique• Précision des points d'ancrage• Zoom ou défilement inattendu, notamment dans un environnement tactile multipoint• Réaction appropriée à un événement tactile, notamment dans un environnement tactile

multipointConcevoir et développer des applications tactiles bien formées nécessite de la pratique et de nombreux tests. Si vous ne disposez pas d'un appareil à écran tactile, vous pouvez utiliser les événements MouseTouch et un émulateur ou simulateur d'écran tactile. Essayez le Kit de développement logiciel (SDK) Microsoft Surface et Runtime pour Windows 7 ou l'outil simulateur Windows dans Visual Studio 11. Un simulateur ou émulateur d'écran tactile imite un système qui possède uniquement des fonctionnalités tactiles. Plusieurs émulateurs gratuits sont disponibles en ligne.

EN SAVOIR PLUS SUR LES MOUVEMENTS ET LES APPLICATIONS TACTILES

PRÉPAREZ-VOUS. Pour en savoir plus sur les différents types de mouvements, procédez comme suit : 1. Accédez à la page Web Interactions tactiles pour Windows à l'adresse http://msdn.micro-

soft.com/fr-fr/library/windows/apps/hh465415. 2. Lisez le contenu de la page Web. 3. Créez un signet de la page pour un usage ultérieur ou localisez et cliquez sur le lien qui

permet de télécharger une version PDF de la page Web sur votre ordinateur.

4. Fermez la fenêtre du navigateur.

PLUS D’INFORMATIONSLes spécifications tactiles du WC3 sont disponibles à l'adresse http://bit.ly/gBZUjo. Pour plus d'informations sur les interactions tactiles et les mouvements, visitez la page Web « Réponse à l’interaction utilisateur (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700412.aspx.

Utilisation des compétences et du contenu HTML5 existants pour les applications de tablettes tactiles/tablettes

Un avantage pour les développeurs chevronnés qui veulent créer des applications Windows Store est que leurs connaissances de HTML5 et le code existant se prêtent bien au développement d'applications Windows Store.

Le développement d'applications tactiles Windows Store est très flexible, car il ne nécessite pas une grande courbe d'apprentissage pour les développeurs qui utilisent déjà HTML5 et d'autres méthodes de développement d'applications. Ils peuvent appliquer leurs compétences et le code existant à la création d'applications Windows Store presque immédiatement. L'expérience d'un développeur Web avec HTML, CSS, JavaScript et les bibliothèques JavaScript est un avantage lors de la transition vers le développement d'applications tactiles Windows Store. En outre, les développeurs Microsoft.NET Framework et Silverlight peuvent appliquer leur expérience de XAML, C# et Visual Basic aux projets interface utilisateur Windows. Les programmeurs de jeux qui connaissent bien Microsoft DirectX 11 peuvent également appliquer leurs compétences à la création d'applications Windows Store.

PRÊT POUR LA CERTIFICATIONEst-ce qu'un développeur Web doit acquérir de nouvelles compétences pour pouvoir créer des applications Windows Store pour appareils tactiles ?1.1

Toutes les applications doivent être soigneusement testées et déboguées pour s'assurer qu'elles s'exécutent de façon fiable et avec le moins d'erreurs possible avant leur distribution et leur déploiement.

L'ESSENTIEL

Le débogage d'une application implique la détection, la recherche et la correction des erreurs logiques ou syntaxiques. Une erreur de syntaxe est une faute de frappe dans le code ou une erreur similaire qui se matérialise au moment de l'exécution d'applications interprétées. Une erreur logique modifie le comportement attendu de l'application.

■ Débogage et test des applications HTML5

✚

14 | Leçon 1

Les tests et le débogage de code sont un composant standard du développement d'applications et la plupart des outils tels que Visual Studio sont dotés de fonctionnalités intégrées de débogage dans le logiciel. Certaines erreurs sont faciles à détecter et à corriger, tandis que la résolution de certaines autres peut prendre des heures voire des jours, selon la complexité de l'application.Quoi qu'il en soit, la phase de test et de débogage est très importante pour plusieurs raisons :

• Votre but est de fournir une application fiable, sûre et utile aux clients. Le débogage et les tests garantissent que ces trois objectifs sont atteints.

• Des applications de haute qualité obtiennent des notes élevées, qui peuvent stimuler vos profits et les ventes des applications futures.

• Si vous prévoyez de publier votre application via le Windows Store ou un marché d'applications en ligne de bonne réputation, le magasin exigera la validation ou la certification que votre application a été testée.

PRÊT POUR LA CERTIFICATIONQue peut faire un développeur pour s'assurer qu'une nouvelle application est fiable et aussi exempte d'erreur que possible ?1.3

Validation du code HTML5

Une des premières étapes dans la phase de débogage et de test consiste à valider le code HTML5. La validation implique de vérifier la validité du code. Un validateur recherche les éléments susceptibles d'entraîner une interprétation erronée du code, comme des balises manquantes ou non fermées, une déclaration DOCTYPE incorrecte, une barre oblique de fin, du code obsolète, etc. (Ne vous préoccupez pas de ces détails pour l'instant. Vous les découvrirez dans la leçon 2.)

Validation d'un package

Microsoft fournit un outil gratuit appelé Kit de certification des applications Windows pour tester les applications locales. Ce kit est un type de validateur qui teste votre application sur votre ordinateur avant de l'empaqueter et de la publier dans le Windows Store.

Le W3C fournit un service de validation du code pour toutes les versions actives de HTML sur sa page Web Service de validation du balisage à l'adresse http://validator.w3.org/. Tout le monde peut utiliser ce service gratuitement. Il vous suffit de cliquer sur un lien pour télécharger votre fichier sur le service, ou de copier et coller le contenu de votre fichier dans une zone de texte sur le site Web. Après cela, cliquez sur le bouton Check. Le service de validation vérifie le code et signale les erreurs ou problèmes que vous devez corriger. Un validateur n'est pas identique à un émulateur ou un simulateur. En fait, un validateur teste le code et signale les inexactitudes, ce qui vous donne l'occasion d'apporter des modifications. Les émulateurs et simulateurs fournissent simplement un environnement dans lequel exécuter le code.

Le W3C fournit également un outil de vérification des liens à l'adresse http://validator.w3.org/checklink. Ce service vérifie que tous les liens de votre fichier HTML sont valides. Le service de validation du CSS disponible à l'adresse http://jigsaw.w3.org/css-validator/ vérifie vos fichiers CSS.

REMARQUE*

Le Kit de certification des applications Windows est inclus dans le Kit de développement logiciel (SDK) Windows pour les applications Windows Store, disponible sur le site Web de Microsoft. Pour utiliser le kit, vous devez d'abord empaqueter et installer l'application localement à l'aide d'un outil de développement d'applications. Ensuite, ouvrez le kit, sélectionnez l'application que vous souhaitez valider et exécutez le validateur. Le rapport qui s'affiche indique tout problème de l'application. Le Kit de certification des applications Windows peut être aussi disponible en tant qu'option de menu dans votre outil de développement d'applications.Corrigez les problèmes dans un outil de développement d'applications et testez à nouveau l'application. Répétez ce processus jusqu'à la validation de votre application.


UTILISATIONDUSERVICEDEVALIDATIONDUBALISAGEDUW3C

PRÉPAREZ-VOUS. Pour vous familiariser avec le service de validation du balisage du W3C, procédez comme suit : 1. Accédez à la page Web du service de validation du balisage du W3C à l'adresse

http://validator.w3.org/. 2. Cliquez sur l'onglet ValidatebyFileUpload. 3. Cliquez sur Parcourir. 4. Accédez à un fichier HTML dans un de vos exemples d'applications et sélectionnez-le.

Cliquez sur Ouvrir, puis sur Check. 5. Faites défiler la page vers le bas et consultez les erreurs et les avertissements, le cas

échéant. La figure 1-7 montre un exemple.

Figure 1-7

Erreurs et avertissements découlant d'une tentative de validation d'une page Web HTML

6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les aver-tissements, cliquez sur au moins deux d'entre eux et lisez les informations.

7. Lorsque vous avez terminé, laissez le navigateur Web ouvert.

UTILISATIONDUSERVICEDEVALIDATIONDUCSSDUW3C

PRÉPAREZ-VOUS. Pour vous familiariser avec le service de validation du CSS du W3C, procédez comme suit : 1. Accédez à la page Web Service de validation du CSS du W3C à l'adresse http://jigsaw.

w3.org/css-validator/ (voir figure 1-8). 2. Cliquez sur l'onglet par chargement de Fichier. 3. Cliquez sur Parcourir. 4. Accédez à un fichier CSS dans un de vos exemples d'applications et sélectionnez-le.

Cliquez sur Ouvrir, puis sur Vérifier.

16 | Leçon 1

5. Faites défiler la page vers le bas et consultez les erreurs et les avertissements, le cas échéant.

6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les avertissements, cliquez sur au moins deux d'entre eux et lisez les informations.

7. Lorsque vous avez terminé, laissez le navigateur Web ouvert.

Figure 1-8

La page Web Service de validation du CSS du W3C

Une fois que votre application a été testée, déboguée et le code validé ou certifié, vous devez effectuer quelques étapes de plus pour préparer son chargement sur une place de marché telle que le Windows Store. Vous pouvez utiliser Visual Studio 12 ou Visual Studio 12 Express pour réaliser le projet.

L'ESSENTIEL

La publication d'une application sur une place de marché publique comme le Windows Store marque l'apogée de la planification, de la conception, du codage et des tests. Le Windows Store est une place de marché globale en ligne pour les applications Windows Store. La distribution de votre application via le magasin en ligne peut transformer une bonne idée en une opération lucrative.Un autre bonus lié à la vente via le Windows Store est que vous avez accès à plusieurs outils pratiques, tels que Microsoft Visual Studio Express et Microsoft Expression Blend. Vous pouvez également télécharger les données de télémétrie d'applications personnalisées, qui peuvent grandement accélérer la création et le déploiement d'applications. Avant de publier votre application dans le Windows Store, vous devez procéder comme suit :

• Inscrivez-vous et payez pour un compte de développeur Windows Store et réservez un nom pour votre application. Vous devrez également modifier le fichier manifeste de votre application.

• Passez en revue la liste de vérification relative à la soumission d’une application à l'adresse http://bit.ly/HAPmbk. La liste de comprend une série de tâches, notamment l'attribution d'un nom à votre application, le choix de détails commerciaux, comme la sélection d'un prix approprié et d'une date de publication, l'attribution d'une classification par âge, la description de l'application, etc.

PRÊT POUR LA CERTIFICATIONComment publier une application dans le Windows Store ?1.4

■ Publication d'une application dans un magasin en ligne


• Utilisez le Kit de certification des applications Windows pour tester votre application, si vous ne l'avez pas déjà fait.

• Effectuez quelques captures d'écran des fonctions principales ou uniques de l'application pour la présenter dans le magasin en ligne. Vous pouvez utiliser l'outil Capture d'écran, qui est intégré à Windows 7 et Windows 8, pour réaliser des captures d'écran, ou employer un autre outil de votre choix.

• Demandez à d'autres testeurs ou développeurs de tester l'application sur autant de plateformes et périphériques différents que possible, notamment si vous avez testé l'application uniquement dans un simulateur ou un émulateur.

• Incluez une déclaration de confidentialité si votre application collecte des informations à caractère personnel ou est exécutée via un logiciel protégé par copyright.

Lorsque vous êtes prêt, utilisez votre outil de développement d'applications (tels que Visual Studio 12 ou Visual Studio 12 Express pour Windows 8) pour créer un package d'application finale, puis téléchargez-le sur le Windows Store. Il est de coutume d'attendre l'approbation du magasin. Si elle est approuvée, votre application est certifiée et répertoriée. Cependant, même après tout votre travail préparatoire, votre application peut être rejetée, ce qui signifie que vous devez corriger tout problème signalé par le personnel de magasin d'applications si vous voulez tester de nouveau l'application et la republier.

SE FAMILIARISER AVEC LA PLACE DE MARCHÉ WINDOWS STORE

PRÉPAREZ-VOUS. Pour en savoir plus sur les conditions requises par le Windows Store, procédez comme suit : 1. Ouvrez Internet Explorer, puis utilisez l'adresse www.bing.com. 2. Faites une recherche sur « Place de marché Windows Store » et accédez au site. 3. Parcourez les catégories d'applications. Prenez note des trois applications les mieux

notées et de trois applications qui vous intéressent. 4. Lisez la description de chaque application et prenez des notes qui pourraient vous

aider à écrire une description attrayante pour votre application. 5. Notez le nombre et la qualité des captures d'écran fournies pour ces applications. 6. Notez la qualité de l'icône de lancement et tout autre détail graphique. 7. Notez la cote de prix et la classification par âge de chaque application. 8. Notez tous les autres détails qui pourraient vous aider à vendre votre application

quand elle sera prête. 9. Lorsque vous avez terminé, fermez toutes les fenêtres ouvertes.

Vous devez vous inscrire et payer pour un compte de développeur Windows Store pour ajouter votre application dans le menu du magasin.

REMARQUE*


Dans cette leçon, vous avez appris ce qui suit :• 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.

• 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.

• Les principales étapes de la création d'une application sont les suivantes : planifier le projet, créer une interface utilisateur, mettre à jour le manifeste d'application, écrire le code, développer l'application, déboguer et tester l'application, créer le package de l'application et la déployer.

• L'environnement d'exécution de Windows (WinRT) sert de base au système d'exploitation Windows 8 et fournit des fonctionnalités pour les applications Windows Store.

• Les applications Windows Store créées avec JavaScript et ouvertes dans Internet Explorer sont exécutées par le processus WWAHost.exe. Il s'agit d'un processus différent du processus hôte qui s'exécute habituellement sur Internet Explorer.

• L'objectif d'un package d'application est de faciliter la distribution et le déploiement. L'empaquetage d'application consiste à regrouper les fichiers et dossiers d'une application dans un package.

18 | Leçon 1

• Le .NET Framework fournit un environnement sûr dans lequel les applications HTML5/JavaScript peuvent s'exécuter. L'infrastructure utilise la transparence de la sécurité pour séparer les différents types de code en cours d'exécution et des jeux d'autorisations et des autorisations d'identité pour contrôler l'environnement.

• Un état de session est créé la première fois qu'un utilisateur demande à accéder à une application, et il se termine lors de la fermeture de la session.

• Un état de l'application existe à partir du moment où un navigateur demande une page Web jusqu'à ce que le navigateur se ferme.

• Les informations d'état persistantes sont des données qui existent après la fin d'une session.• En HTML5, les développeurs peuvent utiliser les méthodes JavaScript localStorage et

sessionStorage pour traiter efficacement les données d'état.• AppCache est un type de stockage Web qui permet à l'utilisateur de charger des données qui sont

normalement stockées sur un serveur, même lorsque l'utilisateur est en mode hors connexion. • Sur un périphérique à écran tactile, un balayage du doigt s'appelle un mouvement et la

réponse de l'application à ce mouvement s'appelle un événement.• Le développement d'applications à interactions tactiles nécessite une connaissance approfondie

de l'interaction des doigts avec l'écran et de la prise en compte des différentes tailles des doigts.• Vous pouvez utiliser JavaScript pour créer des applications à interactions tactiles,

principalement en ayant recours aux événements touchstart, touchend et touchmove.• Un avantage pour les développeurs chevronnés qui veulent créer des applications

Windows Store est que leurs connaissances de HTML5 et le code existant se prêtent bien au développement d'applications Windows Store.

• Toutes les applications doivent être soigneusement testées et déboguées pour s'assurer qu'elles s'exécutent de façon fiable et avec le moins d'erreurs possible avant leur distribution et leur déploiement.

• Une fois que votre application a été testée, déboguée et le code validé ou certifié, vous devez effectuer quelques étapes de plus pour préparer son chargement sur une place de marché telle que le Windows Store. Vous pouvez utiliser Visual Studio 11 ou Visual Studio 11 Express pour réaliser le projet.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. HTML est un langage de __________, pas un langage de programmation, ce qui sig-

nifie que HTML utilise des balises telles que <body> and <h1> pour décrire les parties d'une page Web.

2. Les ___ 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 d'autres attributs.

3. Windows 8 utilise l'interface utilisateur de __________. 4. __________ est la base du système d'exploitation Windows 8 et se compose

de couches qui fournissent les fonctionnalités aux applications Windows Store et à Windows Shell.

5. La _____________ désigne le processus d'assemblage d'une application et de ses différents fichiers dans un conteneur d'application, ce qui en facilite sa distribution et son déploiement. Le package d'application est le résultat de ce processus.

6. L'état ____________ 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.

7. La méthode ___________ 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 ».

8. Un balayage du doigt s'appelle un ________, ce qui peut impliquer un seul doigt (un toucher) ou un doigt et le pouce (deux touchers).

Évaluation des connaissances■


9. Un ________ recherche les éléments susceptibles d'entraîner une interprétation erronée du code, comme des balises manquantes ou non fermées, une déclaration DOCTYPE incorrecte, une barre oblique de fin, du code obsolète, etc.

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

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Quels sont les trois composants principaux de la famille HTML5 ?

a. XMLb. HTMLc. CSSd. JavaScript

2. JavaScript est un type de :a. Compilateur de programmeb. Langage de balisagec. Langage de scriptd. Validateur

3. Toutes les affirmations suivantes sur HTML5 sont vraies, sauf :a. Il nécessite Windows 8.b. Il peut être utilisé pour créer des applications Web et des applications de bureau

ou de périphériques.c. Il est indépendant de la plateforme.d. Il est conçu à partir d'une norme ouverte.

4. Quel environnement de système d'exploitation permet à un développeur d'accéder à un appareil-photo ou une webcam ?a. localStorageb. WinRTc. L'état de la sessiond. Microsoft design

5. Vous développez une application Windows Store et vous souhaitez qu'elle accède à une autre application. Où déclarez-vous l'interaction ?a. Manifeste de l'applicationb. CSSc. Au début du fichier HTMLd. Nulle part. Il n'est pas utile de déclarer l'interaction.

6. Parmi les composants suivants, lequel permet de créer un package d'application ?a. JavaScriptb. CSSc. DOMd. Un outil de développement d'applications

7. Quelle API permet aux programmes et aux scripts de mettre à jour dynamiquement le contenu, la structure et les styles ?a. JavaScriptb. WinRTc. DOMd. RTE

8. AppCache, localStorage et sessionStorage désignent :a. Stockage Webb. Commandes HTMLc. Normesd. Espaces de noms

20 | Leçon 1

9. Parmi les fonctions suivantes, lesquelles ne fonctionnent généralement pas bien avec les environnements tactiles multipoint et doivent être désactivées ? (Choisissez 2 réponses).a. Suivib. Zoomc. Défilementd. Mouvement

10. Quel outil est un type de validateur qui teste votre application sur votre ordinateur avant de l'empaqueter et de la publier dans le Windows Store ?a. WinRTb. Windows 8c. Service de validation du balisage du W3C (World Wide Web Consortium)d. Kit de certification des applications Windows

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Uneinterfacedeprogrammationd’application(API)estunelisted'instructions

qui permet à un programme de communiquer avec un autre programme.V F 2. Il est recommandé de publier votre application sans la valider pour la tester

directement en production.V F 3. Un émulateur passe en revue les documents HTML et CSS à la recherche

d'erreurs.V F 4. Il est conseillé de créer des applications tactiles pour des doigts plus larges,

plutôt que fins.V F 5. Une application indépendante de la plateforme peut s'exécuter sur différents

systèmes d'exploitation de périphériques mobiles et de bureau.


Scénario1-1:PrésentationdesnouvellesfonctionnalitésdanslafamilleHTML5Votre responsable Marylyne souhaite en savoir plus sur la famille HTML5 pour décider si la société doit commencer à l'utiliser pour de nouveaux projets. Elle vous demande de lui dresser une liste de cinq ou six nouvelles fonctionnalités. Quelles fonctions choisissez-vous d'inclure dans la liste ?

Scénario1-2:Créationd'uneapplicationMarylyne s'adresse de nouveau à vous, et cette fois elle veut savoir ce qu'implique la création d'une application HTML5. Elle vous demande de lui soumettre un plan. Quelles étapes choisissez-vous d'inclure dans le plan ?


Scénario1-3:Partagedeconseilssurledéveloppementd'applicationsà interactions tactilesAntoine travaille sur une application à interactions tactiles et vous demande des conseils de développement. Il souhaite connaître les composants à tester impérativement sur sa tablette. Que pouvez-vous lui dire ?

Scénario1-4:Publicationd'uneapplicationdansleWindowsStoreSammy vient de créer sa première application et souhaite la publier dans le Windows Store. Quelles sont les trois étapes préliminaires qu'il doit suivre ?

21


attribut

attribut global

balise vide

balises

codec

compression

doctype

élément

élément audio

élément canvas

élément figcaption

élément figure

élément vidéo

entité

image raster

image vectorielle

imbrication

obsolescence

rendu

Scalable Vector Graphics (SVG)

valide

video compression

Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia

2L E Ç O N



Comprendre les principes fondamentaux du langage HTML

Sélection et configuration de Choisir et configurer les balises 2.1 balises HTML5 pour HTML5 pour l'affichage du texte l'affichage du texte

Sélection et configuration de Choisir et configurer les balises 2.2 balises HTML5 pour l'affichage HTML5 pour afficher des graphiques les graphiques

Sélection et configuration de Choisir et configurer les balises 2.3 balises HTML5 pour la lecture HTML5 pour lire les de contenu multimédia fichiers multimédias

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.

Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 23

Une paire de balises ou une balise vide est également appelée élément. Un élément peut décrire le contenu, insérer des graphiques et créer des liens hypertexte.

UTILISATION D'ATTRIBUTSToutes les balises n'incluent pas une description des données, ou cette description n'est pas toujours suffisamment détaillée pour le rendu. Dans ce cas, certains éléments doivent comporter des attributs qui sont des modificateurs d'éléments HTML permettant de fournir des informations supplémentaires.

Les attributs sont faciles à utiliser et sont simplement des extensions d'éléments. Vous ajoutez des attributs aux éléments à l'aide de la syntaxe de base suivante :

<tag attribute="value">

Notez que l'attribut et sa valeur se trouvent tous les deux à l'intérieur d'une balise. Vous devez inclure un attribut dans une balise afin que le navigateur Web soit en mesure de le gérer. Voici un exemple d'attribut utilisé lors de la création d'un lien hypertexte :

<a href="http://www.example.com">Ceci est un lien.</a>

Le navigateur Web utilise la combinaison de l'élément d'ancrage et de l'attribut href pour afficher un lien hypertexte. La figure 2-1 illustre comment un navigateur Web interprète ce balisage.

Tableau 2-1

Balises HTML courantes Balise Description

<html> Identifie la page en tant que document HTML. La balise <html> englobe tout ce qui se trouve sur la page, à l'exception de la déclaration doctype au sommet de la page.

<head> Contient le balisage et le code utilisé par le navigateur, par exemple les scripts ajoutant de l'interactivité et les mots clés permettant aux moteurs de recherche de localiser la page. Le contenu de la balise <head> peut également inclure les styles de mise en forme pour la page.

<title> Affiche le titre de la page Web qui apparaît en haut du navigateur Web, généralement sur l'onglet de la page dans un navigateur à onglets.

<body> Entoure le contenu visible sur la page Web affichée dans un navigateur Web.

<a href=URL> Balise généralement utilisée pour ancrer une URL à du texte ou une image ; elle peut également créer un ancrage nommé dans un document pour permettre la liaison aux sections du document.

<b> Applique des caractères gras au texte.

<hx> Crée un en-tête pouvant aller du premier niveau (h1) au sixième niveau (h6).

<img> Insère une image depuis un fichier ou un autre site Web.

<p> Définit le texte en tant que paragraphe.

Un bon éditeur de page Web ou outil de développement d'applications doit vous indiquer les attributs pouvant être utilisés avec un élément, ce qui vous permet de gagner du temps. Il doit également faciliter le débogage du balisage en cas d'utilisation incorrecte d'un attribut.

REMARQUE*

24 | Leçon 2

La création de liens hypertexte et l'insertion de graphiques simples sont les deux cas d'utilisation d'attributs les plus courants. Vous apprendrez comment manipuler les graphiques plus loin dans cette leçon. HTML5 inclut plusieurs attributs globaux qui peuvent être utilisés avec n'importe quel élément HTML5. Parmi les attributs globaux disponibles figurent par exemple id, lang et class.

ÉLÉMENTS IMBRIQUÉSL'affichage de votre code HTML dans un navigateur Web varie en fonction de la façon dont vous combinez les éléments, leurs attributs (le cas échéant) et le contenu de la page. Lorsque deux ou plusieurs éléments s'appliquent au même bloc de texte, vous devez imbriquer correctement les paires de balises afin qu'elles fonctionnent comme escompté. L'imbrication est l'insertion d'un élément dans un autre. Voici un exemple d'imbrication qui fonctionne correctement :

<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i> par temps chaud.</p>

Dans cet exemple, nous voulons que les mots « eau fraîche » soient mis en évidence dans le texte. Pour ce faire, ils sont mis en italique et en gras à l'aide des balises <i> et <b>. Si vous placez la balise de fin </b> après la balise de fin </p> (comme illustré ci-dessous), les mots « eau fraîche par temps chaud » s'affichent en gras, mais seuls les mots « eau fraîche » sont en italique. Cet affichage semble incorrect, comme le montre la figure 2-2.

<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</i> par temps chaud.</p></b>

La règle applicable à l'imbrication requiert que les balises imbriquées soient fermées avant leurs balises parentes. En reprenant l'exemple correct, vous remarquez que l'élément paragraphe s'ouvre en premier, suivi par l'élément italique, puis l'élément police. Ensuite, l'élément gras (bold) se ferme, suivi par l'élément italique et enfin l'élément paragraphe. Les éléments italique et gras sont entièrement imbriqués dans l'élément paragraphe.

COMPRENDRE LES ENTITÉSUne entité est un caractère spécial, comme le symbole dollar, le symbole de marque déposée (R majuscule dans un cercle) et les caractères accentués. Le processus d'incorporation d'entités dans une page Web est appelé encodage de caractères. Les éditeurs et les navigateurs Web actuels

Figure 2-1

Un lien hypertexte est obtenu lorsque l'élément d'ancrage est doté de l'attribut href

Figure 2-2

Balises incorrectement imbriquées


gèrent plutôt bien les caractères spéciaux de votre clavier, tels que ceux qui se trouvent au-dessus des touches numériques. Dans la majorité des cas, ces caractères sont correctement rendus.

Toutefois, dans certains navigateurs, le caractère attendu ne s'affiche pas et est remplacé par un caractère ou un symbole incompréhensible. Ces anomalies sont faciles à résoudre. Chaque caractère spécial pouvant être reproduit dans une page Web est doté d'un nom d'entité et d'un code numérique. Vous pouvez utiliser l'un ou l'autre de ces éléments dans une page Web. Toutefois, il est généralement plus sûr de représenter les symboles tels que la marque commerciale à l'aide de l'entité numérique correspondante pour garantir un rendu adéquat dans un grand nombre de navigateurs.

Une entité commence par une esperluette (&) et se termine par un point-virgule (;). Par exemple, l'entité ® représente le symbole de marque déposée et son code numérique est ®. Lorsqu'un navigateur rencontre une esperluette, il essaie de faire correspondre les caractères qui suivent à une entité. S'il trouve une correspondance, il affiche le caractère spécial à la place de l'entité. Le Tableau 2-2 répertorie quelques-unes des entités les plus utilisées.

Tableau 2-2

Exemples d'entités HTML5 Symbole Description Nomdel'entité Code

© Copyright © ©

° Degré ° °

$ Dollar &dollar; $

% Pourcentage &percnt; %

® Marque déposée ® ®

Il est également important de savoir que, dans l'encodage de caractères HTML5, il est recommandé d'utiliser l'encodage UTF-8 chaque fois que cela est possible, car la plupart des navigateurs utilisent ce type d'encodage. Cela signifie que vous devez ajouter la déclaration suivante à l'élément head :

<meta charset="UTF-8">

La spécification HTML5 requiert que la totalité de l'élément meta se trouve dans les premiers 1 024 octets du document ; vous devez donc l'inclure tout en haut de la page, dans l'élément head.


Pour obtenir la liste des entités prises en charge par HTML5, accédez à http://dev.w3.org/html5/html-author/charref.

COMPRENDRE LE DOCTYPELe doctype est une déclaration placée au tout début de la grande majorité des documents HTML. Lorsqu'un navigateur Web lit une déclaration doctype, il suppose que tout le contenu de la page Web utilise le langage ou les règles spécifiés dans la déclaration.Dans HTML 4, toutes les déclarations <!DOCTYPE> exigent une référence à une définition du type de document (DTD). La DTD est simplement un ensemble de règles permettant à un navigateur Web de convertir les balises et le contenu afin d'obtenir les pages que vous consultez sur le Web. Une page Web HTML 4 peut utiliser différentes DTD. En raison de la façon dont le langage HTML5 a été conçu, il ne nécessite pas de référence à une DTD.Dans HTML 4, la déclaration doctype spécifie le langage et la DTD de la page HTML et semble assez complexe. Voici un exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.example.com/TR/xhtml11/DTD/ xhtml11.dtd">

http://dev.w3.org/html5/html-author/charref.

http://dev.w3.org/html5/html-author/charref.

26 | Leçon 2

À l'inverse, le nouveau doctype HTML5 est très simple :<!doctype html>

Le doctype HTML5 ne respecte pas la casse et le mot clé « doctype » peut donc être en majuscules ou en minuscules. Ce doctype simplifié est en partie la raison pour laquelle les pages HTML5 s'affichent facilement dans un navigateur Web, sur un ordinateur ou un périphérique mobile. HTML5 est conçu pour être compatible avec la grande majorité des nouveaux et anciens navigateurs Web, ainsi qu'avec l'environnement des périphériques mobiles.

EXPLORATION DU BALISAGE D'UNE PAGE WEB SIMPLEÀ titre d'exemple, le balisage et le contenu d'une page Web HTML5 simple peuvent se présenter comme suit :

<!doctype html>

<html> <head> <title>78704 Tout pour vos animaux de compagnie</title> </head> <body> <p>Votre chien est un ami pour la vie. Pourquoi ne pas lui offrir les meilleurs soins ?</p> </body> </html>

Les lignes vierges entre les différentes parties de la page, par exemple entre la déclaration doctype et la balise <html>, ne s'affichent pas dans une page Web. Il en est de même pour les retraits, comme ceux des paragraphes. (Notez que les éléments paragraphe sont légèrement décalés par rapport aux balises <body>. Les lignes vierges et les retraits aident simplement à rendre le balisage plus lisible dans un outil d'édition. La figure 2-3 illustre le rendu de la page Web pour le balisage HTML précédent.

Comme indiqué dans la leçon 1, vous pouvez utiliser le service de validation du W3C (World Wide Web Consortium) à l'adresse http://validator.w3.org pour vérifier et valider le code HTML. Si une page Web respecte les spécifications à la lettre, elle est considérée valide.

CRÉER UNE PAGE WEB SIMPLE

PRÉPAREZ-VOUS. Pour créer une page Web simple et voir les effets de balises, d'imbrication ou d'entités manquantes, procédez comme suit : 1. Sur votre ordinateur ou un lecteur flash, créez un sous-dossier dans le dossier Mes

documents. Ce dossier contiendra les fichiers sur lesquels vous allez travailler tout au long des leçons de ce guide. Il s'agit de votre dossier de travail. Vous pouvez le nommer HTML5 ou lui donner un nom similaire.

Figure 2-3

Page Web simple rendue par un navigateur


2. Ouvrez un éditeur de page Web, un outil de développement d'applications ou même un simple éditeur de texte tel que le Bloc-notes, puis entrez la commande suivante :

<!doctype html> <html> <head> <title>78704 Tout pour vos animaux de compagnie</title> </head> <body> <h1>Soins et alimentation</h1> <p> Votre chien est un ami pour la vie. Pourquoi ne pas lui offrir les

meilleurs soins possibles ?</p> <p> Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i>

par temps chaud. Lorsque vous faites de longues promenades avec votre chien, pensez à prendre un bol pliable et une bouteille d'eau. Vous trouverez différents modèles de bol dans de nombreux magasins animaliers à moins de 10 dollar.</p>

</body></html>

3. Enregistrez le fichier sous L2-animal-orig.html dans le dossier de travail que vous avez créé dans Mes documents.

4. Accédez à votre dossier de travail et ouvrez la page HTML dans un navigateur Web. Elle doit ressembler à la figure 2-4.

5. Pour voir l'effet d'une balise manquante dans une paire de balises, supprimez la balise de fin </b> après « fraîche ». Créez un nouveau fichier pour tester les modifications en l'enregistrant sous le nom L2-animal-test.html, puis ouvrez-le dans le navigateur. Tout le contenu, depuis les mots « eau fraîche » jusqu'à la fin du document, est désormais en caractères gras.

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

REMARQUE*

Figure 2-4

Page Web « Soins et alimentation » du site 78704 Tout pour vos animaux de compagnie

Vous disposez d'un vaste choix en matière d'éditeurs et d'outils de développement. Le Bloc-notes est l'éditeur de texte intégré à Windows, mais vous pouvez télécharger gratuitement Notepad++ depuis le Web. Notepad+++ comporte des fonctionnalités facilitant la création et la modification de documents HTML. TextWrangler, conçu pour les systèmes Macintosh, inclut un ensemble de fonctionnalités similaires. Des éditeurs HTML gratuits tels que HTML-Kit et KompoZer sont également disponibles. Parmi les outils de développement figurent notamment Microsoft Visual Studio, Visual Studio for Web, Microsoft Web Matrix et Microsoft Expression Web. Toutes ces applications vous permettent de créer et modifier des fichiers HTML.

REMARQUE*

28 | Leçon 2

6. Pour voir l'effet d'une imbrication incorrecte, déplacez la balise de fin </i> après la dernière balise </p>. Réenregistrez le fichier L2-animal-test.html et affichez-le dans un navigateur. Tout le contenu, depuis les mots « eau fraîche » jusqu'à la fin du document, est désormais en caractères gras et en italique, comme illustré à la figure 2-5.

7. Fermez le fichier L2-animal-test.html dans l'éditeur et ouvrez L2-animal-orig.html. 8. Ajoutez une mention de copyright au bas de la page en appuyant plusieurs fois sur la

touche Entrée après la balise de fermeture </p> et en entrant <p>© 2012</p>. Remplacez « 2012 » par l'année en cours, le cas échéant. Appuyez sur Entrée pour ajouter une ligne vierge. Assurez-vous que la mention de copyright se trouve au-dessus des balises de fin </body> et </html>.

9. Créez un nouveau fichier en enregistrant le fichier L2-animal-test.html sous L2-animal-copyright.html, puis affichez-le dans le navigateur. Le symbole du copyright (C entouré d'un cercle) est-il visible, comme illustré à la figure 2-6 ? Si ce n'est pas le cas, remplacez &copy ; par ©, enregistrez le fichier, puis réaffichez-le.

10. Accédez à la page Web du service de validation du balisage du W3C à l'adresse http://validator.w3.org/. Téléchargez le fichier L2-animal-copyright.html et cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.

Lors de l'affichage des pages Web que vous êtes en train de modifier, il est préférable d'utiliser plusieurs navigateurs Web pour vérifier que votre balisage s'affiche comme prévu pour le plus grand nombre d'utilisateurs possible. Certains outils d'édition comportent une liste vous permettant de sélectionner un navigateur pour la prévisualisation des pages Web. Si votre outil n'inclut pas cette option, vous devrez installer trois ou quatre navigateurs différents et ouvrir vos pages Web dans chacun d'eux.

REMARQUE*

Figure 2-5

Effets d'une imbrication erronée des balises

Figure 2-6

Un symbole de copyright apparaît dans le coin inférieur gauche


11. Vous avez probablement reçu un message d'erreur se rapportant à l'encodage des caractères. Pour résoudre ce problème, ouvrez le fichier L2-animal-copyright.html dans votre outil d'édition, insérez <meta charset="UTF-8"> dans l'élément head, dans sa propre ligne, juste avant le titre.

<head> <meta charset="UTF-8"> <title>78704 Tout pour vos animaux de compagnie</title> </head>

12. Enregistrez le fichier, téléchargez-le une nouvelle fois dans l'outil de validation afin de le vérifier. Le vérificateur devrait confirmer que votre fichier est valide.

13. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

Tous les éléments abordés dans la première section de cette leçon fonctionnent correctement dans HTML5, bien qu'ils soient utilisés depuis déjà plusieurs années dans les versions antérieures du langage HTML. Dans l'ensemble, HTML5 modifie très peu la syntaxe HTML. Cela signifie que les développeurs peuvent continuer à utiliser la plupart des éléments comme ils le faisaient jusqu'ici. Certains éléments conservent la même balise mais leur fonctionnalité a été légèrement modifiée, comme expliqué un peu plus loin.

HTML5 inclut également un grand nombre de nouveaux éléments qui permettent d'optimiser les fonctionnalités des pages Web ou de simplifier le balisage. Il s'agit d'éléments liés au contenu multimédia (par exemple, audio et video) et d'autres éléments qui rendent la structure d'une page Web plus intuitive. Les balises liées à la structure incluent des éléments pour les sections de page, les en-têtes, les pieds de page, la navigation et même les barres latérales. Lors de la création de formulaires Web, les nouvelles fonctionnalités de formulaire facilitent considérablement la création et la validation. Toutefois, cette section porte essentiellement sur le balisage HTML5 associé au texte.

■ Sélection et configuration de balises HTML5 pour l'affichage du texte

HTML5 utilise la plupart des éléments et attributs déjà spécifiés dans HTML 4, avec quelques nouvelles balises. En outre, l'utilisation par défaut d'autres balises a été modifiée et certains éléments ne sont plus pris en charge. Parmi les nouveaux éléments textuels figurent notamment command, mark, time, meter et progress. Les éléments basefont, center, font et strike sont désormais obsolètes.

L'ESSENTIEL

Certains éléments textuels HTML 4 ont à présent une signification ou une fonction légèrement différente dans HTML5. Parmi ces éléments figurent <b>, <i>, <strong>, <em> et <small>. L'élément <b> doit maintenant être utilisé pour mettre en évidence le texte, sans indication d'importance, par exemple les mots clés ou les noms de produits. L'élément <i> définit désormais le contenu dans un ton ou une humeur différente, comme un texte oral. L'élément <strong> souligne l'importance, tandis que l'élément <em> indique un accent d'insistance. L'élément <small> doit être utilisé pour le texte en petits caractères, comme la mention de copyright.

Éléments de texte HTML 4 avec une nouvelle signification ou fonction


Si vous trouvez les rubriques de cette section difficiles à assimiler, il peut être utile de réaliser quelques didacticiels tels que ceux disponibles sur le site Web W3Schools.com.

XREF

Le balisage de mise en page, de création de sections et de formulaires HTML5 est couvert dans la leçon 3.

30 | Leçon 2

Examinons de plus près certains des éléments de texte HTML 4 dont la signification ou la fonction a légèrement changé dans HTML5 :• <b> : cet élément d'utilisation courante a toujours représenté les caractères gras ; il

était souvent utilisé pour mettre en évidence le texte ou en souligner l'importance. Le W3C suggère qu'il soit désormais utilisé pour indiquer un texte « stylistiquement décalé », sans indication d'importance. Utilisez <b> pour les mots clés, les noms de produits et les éléments interactifs (tels que les éléments sur lesquels vous cliquez ou appuyez dans une liste de procédures). Par exemple :

<p>Cliquez sur le bouton <b>Vérifier</b>, puis sur <b>OK.</b> </p>

• <i> : l'élément italique est maintenant utilisé pour du texte dans un « ton ou une humeur différente ». Il peut s'agir d'un texte oral, de pensées ou d'un contenu similaire, sans indication d'importance ni d'insistance. Il peut également s'agir de termes techniques et de mots étrangers traduits. Par exemple :

<p><i>Il a vraiment bon cœur,</i> pensait-elle.

• <strong> : l'élément strong indique un contenu d'extrême importance, plus important que les mots voisins. Par exemple :

<p>Chantal portait la <strong>même</strong> robe depuis trois jours.</p>

• <em> : l'élément em (emphasis) indique un degré d'insistance. Par exemple :<p>Vous devez <em>toujours</em> valider votre balisage HTML avant de le partager avec d'autres utilisateurs.</p>

• <small> : l'élément small doit être utilisé pour les petits caractères ou des remarques. Il est utile pour les mentions de copyright ou pour ajouter la source d'une image. Par exemple :

<p><small>Copyright 2012 XYZ Corporation</small></p>

La fonction recherchée de certains de ces éléments dans HTML5 peut prêter à confusion, par exemple le cas d'emploi de l'élément italique. La meilleure méthode consiste à garantir la cohérence sur une page ou un site Web, et à observer comment les autres développeurs utilisent les mêmes éléments.

MODIFIER LES BALISES DE TEXTE D'UNE PAGE WEB

PRÉPAREZ-VOUS. Pour modifier les balises d'une page Web, procédez comme suit : 1. Dans votre outil d'édition, ouvrez le fichier L2-animal-copyright.html s'il n'est pas déjà

ouvert.

2. Dans le paragraphe suivant, remplacez les balises italique et gras par l'élément strong.

<p> Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i> par temps chaud.</p>

Le nouveau balisage produit le résultat suivant :

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

Vous remarquez que l'effet de l'élément strong est semblable à celui de l'élément gras. Le W3C recommande l'utilisation de <strong> à la place de <b>, même si les deux balises semblent produire des résultats quasiment identiques.

3. Ajoutez des balises de début et de fin <small> à la mention de copyright, de manière à les imbriquer correctement dans les balises du paragraphe.

4. Enregistrez le fichier sous L2-animal-modification.html, puis affichez-le dans un navigateur Web. Voir la figure 2-7.



Parmi les nouveaux éléments HTML5 associés au texte figurent <command>, <mark> et <time>. L'élément <command> crée un bouton de commande. Lorsque l'utilisateur clique sur un bouton de commande, une commande s'exécute. L'élément <mark> met en évidence du texte sur une page, à l'instar de la fonctionnalité de mise en surbrillance de Microsoft Word. L'élément <time> affiche une heure et une date lisibles par une machine, par exemple 10 : 10 AM., CST, 19 juillet 2012. Il est particulièrement utile pour les blogs et les calendriers et il peut également aider les moteurs de recherche à générer de meilleurs résultats lorsque l'heure et la date font partie des critères de recherche.

Nouveaux éléments de texte dans HTML5

Examinons quelques-uns des nouveaux éléments de texte HTML5, en nous aidant de quelques exemples :• <command> : l'élément command est utilisé pour définir un bouton de commande sur

lequel les utilisateurs cliquent pour exécuter une commande. Cet élément est doté de nombreux attributs tels que type, label, title, icon, disabled, checked et radiogroup. Par exemple :

<menu label="Genre de musique">

<command type="radio" radiogroup="musicgenre" label="Art">

<command type="radio" radiogroup="musicgenre" label="Populaire">

<command type="radio" radiogroup="musicgenre" label="Traditionnel">

</menu>

• <mark> : l'élément mark est très pratique pour mettre en évidence du texte sur une page. Par exemple, vous pouvez l'utiliser sur une page de résultats de recherche ou pour mettre en évidence un bloc de texte sur lequel vous souhaitez attirer l'attention du lecteur. Par exemple :

<p>Depuis que j'ai commencé à faire du jogging l'automne dernier, j'ai <mark style="background-color:yellow;">perdu 15 kilos</mark>.</p>

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

PRÊT POUR LA CERTIFICATIONQuels sont les nouveaux éléments textuels HTML de HTML5 ?2.1

Figure 2-7

Utilisation des balises <strong> et <small>

32 | Leçon 2

page Web permet d'optimiser les résultats générés par les moteurs de recherche. Par exemple :

<time datetime="2013"> correspond à l'année 2013 <time datetime="2013-04"> correspond à avril 2013 <time datetime="04-15"> correspond au 15 avril (de n'importe quelle année)

Parmi les nouveaux éléments, il également possible de citer meter et progress. L'élément meter indique le contenu sous forme de fraction d'une plage connue, comme l'utilisation du disque. L'élément progress indique l'état d'avancement d'une tâche par rapport à l'achèvement de celle-ci.

UTILISER L'ÉLÉMENT MARK

PRÉPAREZ-VOUS. Pour utiliser l'élément mark pour mettre en évidence du texte, procédez comme suit : 1. Dans votre outil d'édition, ouvrez le fichier L2-animal-modification.html s'il n'est pas

déjà ouvert. 2. Modifiez le paragraphe suivant en insérant l'élément mark autour du texte « ami pour

la vie ».

<p>Votre chien est un <mark style="background-color:orange;"> ami pour la vie</mark>.

3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-mark.html, puis affichez-le dans un navigateur Web. La figure 2-8 affiche le texte en surbrillance.


Si de nouveaux éléments sont disponibles, le W3C a présélectionné d'autres éléments en vue d'une suppression éventuelle, car leur fonctionnalité est désormais inutile. Le motif de suppression d'éléments de la liste d'éléments HTML disponibles est appelée obsolescence. (La même chose s'applique aux attributs.)

Éléments de texte inutilisés dans HTML5

L'obsolescence peut résulter du remplacement de la fonctionnalité d'un ancien élément par un nouvel élément, ou l'utilisation d'une nouvelle méthode de mise en forme en remplacement d'un élément plus ancien. La mise en forme à l'aide de feuilles de style en cascade (CSS) correspond à ce second cas de figure. L'utilisation de CSS pour modifier l'apparence du texte, des images et de tout autre contenu Web permet de séparer le style du contenu. Depuis déjà un certain temps, le W3C encourage les développeurs à préférer CSS à la mise en forme locale pour mieux contrôler la mise en forme des pages Web et il s'agit clairement de la méthode à utiliser dans HTML5.

XREF

La leçon 4 explore les notions essentielles des feuilles de style CSS et la séparation de la présentation (style) du contenu.

Figure 2-8

L'élément mark met en surbrillance un texte spécifique


Ceci est logique, car il est très facile de modifier les styles de CSS s'appliquant à l'ensemble d'une page Web ou même à un site Web. Lors de l'insertion de styles individuels, même dans une seule page Web, les modifications s'avèrent fastidieuses lorsqu'un changement est nécessaire.Les éléments HTML suivants sont considérés comme obsolètes et ne sont pas pris en charge dans les pages HTML5 :• <acronym> : définit des acronymes qui, dans HTML 4, peuvent être cités comme s'il

s'agissait d'un mot, par exemple GUI pour l'interface utilisateur graphique. Utilisez la balise <abbr> à la place.

• <applet> : définit une applet incorporée. Utilisez la balise <object> à la place.• <basefont> : définit une couleur, une taille ou une famille de police par défaut pour

l'ensemble du texte d'un document. Utilisez CSS pour l'application de toutes les polices.• <big> : agrandit le texte par rapport à la taille de police actuelle. Utilisez CSS à la place.• <center> : centre le texte et le contenu. Utilisez CSS à la place.• <dir> : définit une liste de répertoires. Utilisez la balise <ul> à la place.• <font> : spécifie le type, la taille et la couleur de police du texte. Utilisez CSS à la place.• <frame> : définit un cadre spécifique (une fenêtre) dans un jeu de cadres (voir élément suivant).• <frameset> : définit un jeu de cadres pour le positionnement de plusieurs cadres (fenêtre).• <noframes> : affiche le texte pour les navigateurs ne prenant pas en charge les cadres.• <strike> : définit le texte barré. Utilisez la balise <del> à la place pour les petits blocs de

texte, ou utilisez CSS pour des blocs de texte plus importants.• <tt> : définit le texte télétype ou à espacement fixe. Utilisez la balise <code> ou CSS à la place.

Même si un élément n'est pas pris en charge, cela ne signifie pas qu'il ne fonctionnera pas dans certains navigateurs. Beaucoup d'utilisateurs disposent encore d'anciennes versions de navigateurs et de nombreux éléments obsolètes s'affichent correctement dans ces navigateurs. Toutefois, lors de la création de pages Web, il est recommandé de partir du principe que les visiteurs qui les consultent utilisent un navigateur relativement récent, ce qui sous-entend l'utilisation des derniers éléments HTML. S'il est établi que toutes les personnes consultant votre page Web utilisent l'ancienne version d'un navigateur, il est possible d'utiliser des éléments obsolètes. Malgré cela, si une page Web requiert une mise en forme importante, il est préférable d'utiliser CSS pour plus d'efficacité. Les attributs suivants ne sont pas utilisés dans HTML5, bien qu'ils ne fassent pas réellement partie d'une spécification HTML :• bgcolor : applique une couleur d'arrière-plan spécifiée au contenu décrit par l'élément

associé, généralement un tableau ou une page. Utilisez la propriété CSS background-color à la place.

• bordercolor : applique une couleur spécifiée à la cellule d'un tableau. Utilisez la propriété CSS border-color à la place.

• bordercolorlight : applique une couleur spécifiée aux coins supérieurs et gauche d'une cellule de tableau. Utilisez la propriété CSS border-color à la place.

• bordercolordark : applique une couleur spécifiée aux coins inférieurs et droit d'une cellule de tableau. Utilisez la propriété CSS border-color à la place.

À l'instar des éléments obsolètes, vous pouvez utiliser ces attributs si vous savez que les personnes qui consultent votre page Web utilisent d'anciens navigateurs. Sachez que vous obtiendrez des erreurs lorsque vous tentez de valider votre page Web ; vous pouvez les ignorer si vous êtes certain que les navigateurs de vos visiteurs prennent ces attributs en charge.


Pour connaître les nouveautés de HTML5, reportez-vous à la page Web « Learn HTML5 in 5 Minutes! » (Apprenez HTML5 en 5 minutes) à l'adresse http://msdn.microsoft.com/en-us/hh549253 et la page Web « HTML elements » (Éléments HTML) de W3C à l'adresse http://dev.w3.org/html5/markup/elements.html#elements.

34 | Leçon 2

AFFICHER LES EFFETS DES ÉLÉMENTS OBSOLÈTES

PRÉPAREZ-VOUS. Pour afficher les effets des éléments obsolètes dans une page Web HTML5, procédez comme suit : 1. Dans votre outil d'édition, ouvrez le fichier L2-animal-mark.html s'il n'est pas déjà ouvert.

2. Modifiez le titre h1 de manière à incorporer l'élément center, comme illustré :

<h1><center>Soins et alimentation</center></h1>

3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-temp.html, puis affichez-le dans un navigateur Web. L'élément center a t-il centré le titre dans votre navigateur ?

4. Ajoutez l'élément big au contenu suivant, comme illustré :

<p>Votre chien est un <mark style="background-color:orange;"> <big>ami pour la vie</big></mark>.

5. Enregistrez le fichier et affichez-le dans un navigateur Web. L'effet de l'élément big est-il visible ? Pour consulter un exemple, reportez-vous à la figure 2-9.

6. Accédez à la page Web du service de validation du balisage du W3C à l'adresse http://validator.w3.org/. Téléchargez le fichier L2-animal-temp.html et cliquez sur Check afin que le service vérifie le fichier.

7. Notez que le service de validation affiche les erreurs se rapportant à l'utilisation d'éléments obsolètes. Quelles conclusions pouvez-vous tirer sur l'utilisation d'éléments obsolètes dans HTML5 ? (Les éléments obsolètes ne sont pas validés mais un grand nombre d'entre eux s'affichent toujours correctement dans un navigateur Web.)

8. Fermez L2-animal-temp.html et laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

■ Sélection et configuration de balises HTML5 pour l'affichage des graphiques

Utilisez l'élément img pour afficher les images liées dans une page Web. Les images peuvent se trouver dans les fichiers HTML des pages Web, généralement dans un sous-dossier d'images, ou sur un autre serveur ou site Web. Les éléments figure et figure caption sont nouveaux dans HTML5. Ils vous donnent plus de contrôle sur le type d'images affichées et permettent d'inclure des légendes, respectivement. L'élément canvas est utilisé pour des opérations dynamiques de dessin, de rendu et de manipulation d'images et de graphiques dans HTML5. L'élément SVG (Scalable Vector Graphics) vous permet de créer des objets évolutifs et redimensionnables qui s'adaptent parfaitement à l'écran sur lequel ils s'affichent, qu'il s'agisse d'un moniteur ou d'un smartphone.

L'ESSENTIEL

Figure 2-9

Effets des éléments center et big


Il est possible d'afficher différents types d'images sur une page Web et la majorité appartiennent à deux catégories principales : tramée (ou bitmap) et vectorielle. Une image tramée est composée de pixels, tandis qu'une image vectorielle est formée de lignes et de courbes basées sur des expressions mathématiques. Une photographie est une image tramée, généralement au format JPG. D'autres formats de fichiers tramés fonctionnent bien sur les pages Web, notamment PNG, GIF et BMP. Une image vectorielle est une illustration, telle un dessin au trait. Souvent, les développeurs convertissent des fichiers vectoriels provenant de programmes tels qu'Adobe Illustrator ou CorelDRAW, non pris en charge par les navigateurs Web, au format PNG ou GIF pour un affichage Web. Il existe une différence majeure entre les deux types de fichiers, à savoir les images tramées perdent en qualité (elles se pixellisent) à mesure que vous les agrandissez, tandis que la qualité des images vectorielles reste constante, même lorsqu'elles sont agrandies.La principale méthode pour ajouter des images à un document HTML est l'utilisation de l'élément img. À l'instar de la balise d'ancrage, la balise img n'a aucun effet à elle seule ; elle doit être dotée d'attributs et de valeurs spécifiant l'image que le navigateur Web doit afficher.Par exemple, pour insérer une image nommée redball.jpg qui se trouve dans un sous-dossier appelé images, entrez l'élément suivant :

<img src="images/redball.jpg" alt="graphique de boule rouge" />Si le sous-dossier images est accessible, l'image s'affiche. Les attributs src et alt sont tous deux nécessaires pour que le code soit pleinement valide. La valeur de l'attribut alt (abréviation de « alternate text » ou texte de remplacement) s'affiche lorsque l'utilisateur positionne le pointeur de la souris sur l'image ; dans ce cas précis, le texte « Red ball graphic » s'affiche. Le W3C exige l'attribut alt pour faciliter l'accessibilité des personnes présentant un handicap. Les personnes ayant une acuité visuelle réduite utilisent un lecteur d'écran qui lit à voix haute le texte de remplacement de chaque image. Les moteurs de recherche utilisent également l'attribut alt pour identifier le type des images et leur contenu, dans la mesure où ils ne « voient » pas à proprement parler les pixels des images.En guise d'autre exemple, pour insérer une image nommée logobleu.png, accessible depuis un autre site Web, entrez l'élément suivant :

<img src="http://www.exemple.com/mrkt/images/logobleu.png" alt="Logo bleu Société XYZ" />

L'élément img utilise plusieurs attributs, décrits dans le Tableau 2-3.

PRÊT POUR LA CERTIFICATIONQuel balisage utilisez-vous pour afficher une image externe sur une page Web ?2.2

Tableau 2-3

Attributs de l'élément img Attribut Valeur Description

src URL Spécifie l'emplacement de l'image, par ex. un chemin d'accès ou une URL

alt Text Spécifie le texte de remplacement qui s'affiche lorsque l'utilisateur place le pointeur de la souris ou un autre dispositif de pointage sur l'image

height pixels Spécifie la hauteur d'une image

width pixels Spécifie la largeur d'une image

ismap ismap Spécifie une image en tant qu'image interactive sur le serveur

usemap #mapname Spécifie une image en tant qu'image interactive sur le client (il s'agit d'une image avec des zones définies qui sont des liens interactifs)

Deux nouveaux éléments liés aux graphiques ont été ajoutés dans HTML5. Il s'agit de figure et figcaption. L'élément figure spécifie le type de figure que vous souhaitez utiliser dans un document HTML, par exemple une illustration ou une photographie. L'élément figcaption fournit une légende pour la figure.

Utilisation des éléments figure et figcaption

36 | Leçon 2

L'élément figure spécifie le type de figure à ajouter, par exemple une image, un dia-gramme, une photographie, etc. Cet élément offre un atout majeur : la possibilité d'ajouter facilement plusieurs images côte à côte. Avec HTML 4, cela exigeait un balisage assez important. L'élément figcaption est facultatif. Il ajoute une légende à une image sur une page Web ; cette légende peut s'afficher avant ou après l'image.Le balisage suivant utilise l'élément figure, spécifie la largeur et la hauteur de l'image et ajoute une légende. Le résultat est illustré à la figure 2-10 :

<figure>

<img src="doghappy.jpg" alt="Chien heureux" width="100" height="125" />

<figcaption>Un chien heureux est un bon chien</figcaption>

</figure>

Le balisage suivant est destiné à une figure avec plusieurs images partageant la même légende. Le résultat obtenu est illustré à la figure 2-11 :

<figure>


<img src="dogpaws.jpg" alt="Pattes de chien" width="100" height="125" />

<img src="dogwalk.jpg" alt="Promener son chien" width="100" height="125" />


</figure>

Figure 2-10

Utilisation des éléments figure et figcaption pour afficher une image avec une légende

Figure 2-11

Utilisation des éléments figure et figcaption pour afficher plusieurs images côte à côte avec une légende unique

Illus

tratio

n: ©

Mig

htyI

slan

d/iS

tock

phot

oIll

ustra

tion:

© M

ight

yIsl

and/

iSto

ckph

oto


AFFICHER UNE IMAGE SUR UNE PAGE WEB

PRÉPAREZ-VOUS. Pour afficher une image sur une page Web, procédez comme suit : 1. Recherchez un fichier JPG, PNG, GIF ou BMP sur votre ordinateur afin de l'utiliser dans

cet exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec les animaux de compagnie est tout à fait approprié.

2. Dans votre outil d'édition, ouvrez L2-animal-mark.html. 3. Supprimez les balises <mark> du premier paragraphe. 4. Insérez le balisage suivant après l'élément h1, en laissant une ligne vierge avant et

après celui-ci et en remplaçant dogwalk.jpg par votre propre fichier image :

<figure>



</figure>

5. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-image.html, puis affichez-le dans un navigateur Web. La page doit ressembler à la figure 2-12.


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

6. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.

UTILISER LES ÉLÉMENTS FIGURE ET FIGCAPTION

PRÉPAREZ-VOUS. Pour afficher une image sur une page Web, procédez comme suit : 1. Recherchez deux autres fichiers JPG, PNG, GIF ou BMP afin de les utiliser dans cet

exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec les animaux de compagnie est tout à fait approprié. Trois images sont nécessaires pour exécuter les étapes suivantes.

2. Dans votre outil d'édition, ouvrez le fichier L2-animal-image.html s'il n'est pas déjà ouvert.

Figure 2-12

Page Web avec une image

Illus

tratio

n: ©

Mig

htyI

slan

d/iS

tock

phot

o

38 | Leçon 2

3. Remplacez le balisage de la figure qui suit l'élément h1 par ce qui suit, en remplaçant les noms des fichiers image (doghappy.jpg, dogpaws.jpg et dogwalk.jpg) par les noms de vos propres fichiers image :

<figure>


<img src="dogpaws.jpg" alt="Pattes de chien" width="100" height="125" />



</figure>

4. Enregistrez le fichier sous L2-animal-imagesmultiples, puis affichez-le dans un naviga-teur Web. La page doit ressembler à la figure 2-13.

5. Fermez le fichier L2-animal-imagesmultiples. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.

L'élément canvas est nouveau dans HTML5. Il crée un conteneur pour les graphiques et utilise JavaScript pour dessiner de manière dynamique les graphiques.

Création de graphiques à l'aide de canvas

Avec l'élément canvas, la page Web devient un bloc de dessin, tandis que les commandes JavaScript vous permettent de tracer des formes composées de pixels dans la zone de dessin, avec notamment des couleurs, des dégradés et des motifs de remplissage. Canvas permet également de rendre le texte avec différents effets et d'animer les objets en les faisant se déplacer, en modifiant l'échelle, etc.

Figure 2-13

Page Web avec plusieurs images et une légende

Illus

tratio

n: ©

Mig

htyI

slan

d/iS

tock

phot

o


NOTIONS DE BASE DE L'ÉLÉMENT CANVASPour utiliser l'élément canvas, vous commencez par définir une zone de dessin au format HTML. La syntaxe de base de l'élément canvas est la suivante :

<canvas id="smlRectangle" height="100" width="200"></canvas>

Cet élément crée votre bloc de dessin. L'élément canvas requiert l'attribut id pour référencer la zone de dessin dans JavaScript et l'ajouter au modèle DOM (Document Object Model). Vous devez également spécifier les dimensions de la zone de dessin (hauteur et largeur) en pixels. JavaScript fonctionne de concert avec l'interface de programmation d'applications (API) 2D pour tracer réellement les éléments dans la zone de dessin.

UTILISER L'ÉLÉMENT CANVAS POUR CRÉER UNE FORME

PRÉPAREZ-VOUS. Pour créer une forme à l'aide de l'élément canvas, procédez comme suit : 1. Dans votre outil d'édition, entrez le balisage suivant :

<!doctype html>

<html> <head> <meta charset="UTF-8"> <title>Test canvas</title>

<script> function f1() { var canvas = document.getElementById("smlRectangle"); context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,255)"; context.fillRect(10, 20, 200, 100); } </script> </head>

<body onload = "f1();">

<canvas id="smlRectangle" height="100" width="200 "> </canvas>

</body>

</html>

Les développeurs utilisent l'élément canvas pour créer des jeux en ligne, des galeries de photos dynamiques, des codes de titre et bien plus encore. Les fonctions de l'élément canvas destinées aux graphiques et aux animations visent à offrir une qualité similaire à celle des animations Flash.

REMARQUE*

PRÊT POUR LA CERTIFICATIONQuelle est la syntaxe de base de l'élément canvas dans un document HTML ?2.2

Vous pouvez inclure des JavaScripts dans l'élément head de votre document HTML, ou dans un fichier externe.REMARQUE*

L'attribut onload lance l'exécution de la fonction JavaScript incluse dans le script. Ce script commence par rechercher l'élément doté de l'id smlRectangle :

var canvas = document.getElementById("smlRectangle");

40 | Leçon 2

La méthode context.fillStyle remplit un rectangle de bleu en utilisant les valeurs RVB 0, 0, 255. La méthode context.fillRect crée un rectangle d'une largeur de 200 pixels et d'une hauteur de 100 pixels, positionné à 10 pixels vers le bas et à 20 pixels à partir de l'angle supérieur gauche de la zone de dessin et le remplit de la couleur spécifiée par fillStyle.

2. Enregistrez le fichier sous L2-canvas.html, puis affichez-le dans un navigateur. La forme doit ressembler à celle de la figure 2-14.

XREF

Vous apprendrez comment utiliser JavaScript dans les leçons, 8, 9 et 10.

3. Si aucun rectangle bleu n'est visible, accédez à la page Web du service de validation du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-canvas.html et cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur, si nécessaire. Réenregistrez le fichier et affichez-le dans un navigateur.

4. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.

CRÉATION D'UN CONTOUR DE FORMEPour créer le contour d'un rectangle sans couleur de remplissage, utilisez la méthode context.strokeRect. Elle utilise les mêmes valeurs que context.fillRect. Pour modifier la couleur du contour (la couleur du trait), utilisez context.strokeStyle Par exemple, pour créer un contour rectangulaire rouge de 200 x 100 pixels, utilisez les méthodes suivantes dans votre JavaScript :

context.strokeStyle = "red";

context.strokeRect(10,20,200,100);

UTILISER CANVAS POUR CRÉER LE CONTOUR D'UNE FORME

PRÉPAREZ-VOUS. Pour créer le contour d'une forme à l'aide de l'élément canvas, procédez comme suit : 1. Dans votre outil d'édition, enregistrez L2-canvas.html sous le nom L2-canvas-stroke.html.

2. Remplacez les lignes de code fillStyle et fillRect par le code suivant :

context.strokeStyle = "red";

context.strokeRect(10,20,200,100);

3. Supprimez les attributs width et height de l'élément canvas dans le corps (après id ="smlRectangle").

4. Enregistrez le fichier et affichez-le dans un navigateur Web. La forme doit ressembler à celle de la figure 2-15.

Figure 2-14

Page Web avec l'apparence d'une zone de dessin


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

SPÉCIFICATION D'UNE IMAGE OU D'UN TEXTE DE REMPLACEMENT POUR LES ANCIENS NAVIGATEURSCertains navigateurs plus anciens ne peuvent pas rendre les dessins ou les animations créés à l'aide de l'élément canvas. Par conséquent, vous devez ajouter une image, un texte ou un autre contenu HTML dans l'élément canvas afin que celui-ci s'affiche si le navigateur ne peut pas afficher le dessin. Le contenu de secours, appelé également solution de rechange, ne s'affichera pas si l'élément canvas est pris en charge. L'exemple suivant affiche une image (smlRectangle.jpg) semblable au rectangle rempli qui serait créé à l'aide de l'élément canvas :

<canvas id="smlRectangle" height="100" width="200">

<img src="http://www.exemple.com/images/smlRectangle.jpg" alt="Rectangle bleu" />

</canvas>

Pour afficher du texte plutôt qu'une image, vous devez insérer le texte à la place de la balise <img>.

AJOUTER UN TEXTE DE SECOURS À VOTRE DOCUMENT HTML

PRÉPAREZ-VOUS. Pour ajouter un texte de secours à votre document HTML, procédez comme suit : 1. Dans votre outil d'édition, ouvrez L2-canvas.html et enregistrez-le sous L2-canvas-

secours.html. 2. Remplacez l'élément canvas par la mention suivante :

<canvas id="smlRectangle" height="100" width="200"> Votre navigateur ne prend pas en charge la balise canvas.

</canvas>

3. Enregistrez le fichier et affichez-le dans le navigateur Web Internet Explorer 9. Le dessin créé à l'aide de l'élément canvas devrait s'afficher.

4. Appuyez sur F12 pour passer en mode navigateur, cliquez sur Mode document dans la barre de menus, puis sélectionnez Normes d'Internet Explorer 7.

Figure 2-15

Page Web avec le contour d'une zone de dessin

42 | Leçon 2

5. Appuyez de nouveau sur F12. Un message d'erreur s'affiche, indiquant que le navigateur ne reconnaît pas une propriété ou une méthode. Fermez le message d'erreur. La fenêtre du navigateur affiche le texte de secours, comme illustré à la figure 2-16.

6. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.


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

SVG (Scalable Vector Graphics) est un langage permettant de décrire les graphiques 2D en langage XML (Extensible Markup Language). XML s'apparente au format HTML et il a joué un rôle important dans les pages Web HTML 4.01. La technologie SVG n'est pas nouvelle, mais HTML5 permet désormais aux objets SVG d'être incorporés dans les pages Web sans l'utilisation des balises <object> ou <embed>. (Tous les types de graphiques SVG sont appelés objets et SVG est chargé dans le DOM.)

Création de graphiques à l'aide de SVG

Comme son nom l'indique, SVG (Scalable Vector Graphics) sert essentiellement à créer des formes graphiques vectorielles évolutives, mais vous pouvez également créer des images et du texte. À l'image de l'élément canvas, vous pouvez appliquer des couleurs unies, des dégradés et des motifs de remplissage aux objets SVG, ou encore copier et cloner des objets. Vous pouvez également utiliser SVG lors de l'insertion d'un fichier PNG, JPG ou GIF. SVG vous permet de fournir des instructions de dessin plutôt qu'un fichier image.

L'un des principaux atouts de SVG est sa flexibilité. La taille du graphique vectoriel change de manière à s'adapter à l'écran sur lequel il est affiché, qu'il s'agisse d'un écran d'ordinateur de 32 pouces ou d'un périphérique mobile comme un smartphone. Seul le code XML décrivant le graphique est transmis et par conséquent, même les images de grande taille ne nécessitent pas beaucoup de bande passante. Pour cette raison, vous pouvez utiliser SVG en arrière-plan d'une page Web, sans avoir à utiliser la propriété repeat. (La plupart des arrières-plans de page Web unis sont en fait une ligne fine répétée à l'aide d'un style CSS.) En outre, SVG peut être indexé par les moteurs de recherche car il est créé à l'aide du langage XML.

PRÊT POUR LA CERTIFICATIONQuels types d'objets pouvez-vous créer avec SVG ?2.2

Figure 2-16

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


Vous pouvez inclure des attributs tels que color, rotation, stroke color et size, et ainsi de suite à chaque objet SVG. Le balisage suivant peut être inclus dans un fichier HTML pour créer un ballon violet :

<svg id="svgpurpball" height="200" xmlns="http://www.w3.org/2000/svg">

<circle id="purpball" cx="40" cy="40" r="40" fill="purple" />

</svg>

Les attributs cs, cy et r permettent de définir le cercle en spécifiant les points x et y et le rayon par rapport au centre. SVG est doté d'une pléthore d'attributs qui permettent de créer différents types de formes. Les attributs sont disponibles sur le site Web de W3C à l'adresse http://www.w3.org/TR/SVG/attindex.html.


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

CRÉER UN GRAPHIQUE VECTORIEL SVG

PRÉPAREZ-VOUS. Pour créer un graphique vectoriel SVG simple, procédez comme suit : 1. Dans votre outil d'édition, entrez le balisage suivant :

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

L'attribut points définit les coordonnées x et y pour chaque coin, ou « point » du polygone. L'attribut fill-rule détermine le style de remplissage de l'intérieur du polygone.

2. Enregistrez le fichier sous L2-SVG.html, puis affichez-le dans un navigateur Web. La page doit ressembler à la figure 2-17. Si la page ne s'affiche pas, vérifiez-la à l'aide du Service de validation du W3C à l'adresse http://validator.w3.org et corrigez les erreurs, si nécessaire.

Figure 2-17

Page Web avec une forme SVG

44 | Leçon 2

3. Modifiez les valeurs de paramètres de quelques points de polygone. Enregistrez le fichier sous L2-SVG-test.html, puis affichez-le dans un navigateur Web. Par exemple, en changeant la valeur du premier paramètre de 100 à 50, vous obtenez le polygone illustré à la figure 2-18.

4. Supprimez fill-rule:evenodd ;, enregistrez le fichier, puis affichez-le dans un navigateur Web. Comparez le polygone à la figure 2-17.

5. Fermez tous les fichiers de données ouverts. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.

Il n'y a aucune règle préétablie pour la sélection de canvas ou de SVG. Votre choix dépend principalement de la nature de votre projet et de votre niveau de compétence dans l'utilisation de l'un ou l'autre de ces éléments.

Quand utiliser canvas au lieu de SVG

Voici quelques considérations qui vous aideront à prendre la bonne décision :

• Siledessinestrelativementpetit,utilisezcanvas.• Si le dessin contient un nombre important d'objets, utilisez canvas. SVG commence

à se dégrader, au fur et à mesure que des objets sont ajoutés au modèle DOM.• En règle générale, utilisez canvas pour les petits écrans, tels que ceux des périphériques

mobiles. À mesure que la taille de l'écran augmente et que davantage de pixels sont nécessaires, la zone de dessin se pixellise et il est donc préférable d'utiliser SVG.

• Si vous devez créer des documents vectoriels particulièrement détaillés dont la mise à l'échelle est importante, optez pour SVG.

• Si vous affichez des données en sortie en temps réel, par exemple des cartes, des cartes superposables, des données météorologiques et ainsi de suite, utilisez l'élément canvas.

Astuce de Microsoft : représentez-vous l'élément canvas comme étant similaire à Microsoft Paint. Vous pouvez dessiner des images à l'aide de formes et d'autres outils et le résultat est basé sur des pixels. Imaginez SVG comme étant semblable à une diapositive PowerPoint Office, avec des objets redimensionnables.

PRÊT POUR LA CERTIFICATIONQuand faut-il utiliser l'élément canvas plutôt que SVG ?2.2


Pour plus d'informations sur la façon de choisir la meilleure méthode de dessin, à savoir canvas ou SVG, reportez-vous à la page http://msdn.microsoft.com/fr-fr/library/ie/gg193983(v=vs.85).aspx.

Figure 2-18

La modification d'une seule valeur de paramètre modifie la forme de l'objet


Les éléments audio et video sont deux des principales nouveautés de HTML5. Ils vous permettent de proposer du contenu multimédia dans un navigateur Web sans avoir besoin de plug-ins comme le lecteur multimédia Microsoft Windows, Microsoft Silverlight, Adobe Flash ou Apple QuickTime. Cela signifie que les utilisateurs peuvent simplement ouvrir un navigateur prenant en charge HTML5 pour écouter de la musique ou des livres audio, profiter d'effets sonores enrichis et regarder des clips vidéo ou des films.

La spécification HTML5 inclut les balises <video> et <audio> afin d'incorporer le multimédia. Les sections suivantes décrivent chacune de ces balises en détail.

■ Sélection et configuration de balises HTML5 pour la lecture de contenu multimédia

HTML5 introduit les éléments audio et video qui rendent désormais superflue l'utilisation de plug-ins ou de lecteurs multimédias pour écouter de la musique ou regarder des vidéos via un navigateur Web.

L'ESSENTIEL

PRÊT POUR LA CERTIFICATIONQuelles balises HTML5 permettent d'incorporer du contenu multimédia dans une page Web ?2.3

PRÊT POUR LA CERTIFICATIONQuel est le balisage utilisé pour l'élément video HTML5 ?2.3

Vous utilisez l'élément video avec l'attribut src pour désigner un fichier vidéo devant être lu dans un document HTML. Par ailleurs, l'ajout des attributs height et width vous permettent de contrôler la taille de la fenêtre dans laquelle s'affiche la vidéo.

Comprendre et utiliser les balises de contenu vidéo

L'élément video vous permet d'incorporer des vidéos dans des documents HTML en utilisant un minimum de code. La structure utilisée pour l'incorporation d'une vidéo est simple. Voici un exemple de balisage pour l'ajout d'un fichier MP4 à une page Web :

<video src="intro.mp4" width="400" height="300">

</video>

L'attribut src pointe vers le nom du fichier vidéo à lire (dans ce cas, video.mp4). Les attributs height et width spécifient la taille de la fenêtre dans laquelle s'affiche la vidéo.

Vous pouvez ajouter d'autres attributs permettant de contrôler la vidéo :

• poster : affiche un fichier image statique avant le chargement de la vidéo• autoplay : démarre automatiquement la lecture de la vidéo après le chargement de la

page• controls : affiche un ensemble de contrôles utilisés pour lire, mettre en pause ou arrêter

la vidéo et régler le volume• loop : répète la vidéo

Lorsque tous les contrôles ci-dessus sont utilisés, le balisage doit se présenter comme suit :

<video src="/videos/intro.mp4" width="400" height="300 poster="78704-splash.jpg" autoplay="autoplay" controls="controls" loop="loop">

</video>

Notez que ce balisage fait référence à un fichier vidéo MP4. Parmi les autres formats vidéo souvent utilisés sur le Web figurent également H.264, OGG et WebM, bien que WebM soit utilisé moins de 10 % du temps. Outre le format vidéo, vous devez également spécifier le codec, une technologie utilisée pour compresser les données. La compression

46 | Leçon 2

réduit la quantité d'espace nécessaire pour stocker un fichier ainsi que la bande passante nécessaire pour la transmission du fichier. La compression vidéo réduit la taille des images vidéo en conservant la qualité vidéo la plus élevée avec une vitesse de transmission minimum. Tout ceci a pour effet d'améliorer les performances.

En résumé, les principaux formats vidéo et codecs (pour les deux derniers) sont :

• MP4ouH.264• OGG + Theora avec audio Vorbis • WebM + VP8

Il est recommandé d'utiliser l'attribut type pour spécifier le format vidéo. Il convient également d'utiliser l'attribut codecs pour spécifier le(s) codec(s), le cas échéant. Voici un exemple de balisage :

<video width="400" height="300" poster="78704-splash.jpg" autoplay="autoplay" controls="controls" loop="loop">

<source src="intro.mp4" type="video/mp4" />

</video>

La balise <source> est utilisée comme contenu de l'élément video afin que l'attribut type puisse être défini et que l'option de formats multiples soit disponible.

Tous les navigateurs ne prennent pas en charge la totalité des formats vidéo ; le format MP4/H.264 est le plus largement utilisé par les navigateurs Web et les périphériques mobiles. (La page Web HTML5 Video, à l'adresse http://www.w3schools.com/html/html5_video.asp, comporte un tableau répertoriant les formats vidéo pris en charge par les différents navigateurs. Ce tableau est mis à jour régulièrement.) Pour que votre vidéo puisse s'afficher dans la plupart des navigateurs et périphériques, vous pouvez utiliser l'attribut source afin d'inclure plusieurs formats dans votre balisage. L'exemple suivant montre la même vidéo disponible en deux formats, et le format OGG spécifie les codecs :

<video width="400" height="300" poster="image.png" autoplay="autoplay" controls="controls" loop="loop">

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type=’video/ogg; codecs="theora, vorbis"’>

</video>

UTILISER L'ÉLÉMENT VIDEO

PRÉPAREZ-VOUS. Pour utiliser l'élément video HTML5, procédez comme suit : 1. Recherchez un clip vidéo et un fichier image à utiliser en tant qu'affiche. Si vous ne disposez

pas de clip vidéo, recherchez un fichier MP4 disponible dans le domaine public sur le Web et téléchargez-le. Enregistrez la vidéo et le fichier image dans votre dossier HTML5.

2. Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez les noms des fichiers par ceux de votre fichier image et clip vidéo. Modifiez l'attribut type, si nécessaire et remplacez sample.mp4 par le nom de votre fichier vidéo.


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

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

4. Accédez à la page Web du service de validation du balisage du W3C à l'adresse http://validator.w3.org/. Téléchargez le fichier L2-video.html et cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.

5. Ouvrez le fichier HTML dans un navigateur Web. La vidéo démarre t-elle automatiquement ? Les contrôles sont-ils affichés ? Ouvrez le fichier L2-video.html dans plusieurs navigateurs Web afin de le tester.

6. Dans votre outil d'édition, supprimez la ligne autoplay et remplacez controls="controls" par controls simplement.

7. Réenregistrez le fichier et validez-le. La validation ne doit générer aucune erreur. Ceci signifie que HTML5 permet d'utiliser une méthode plus courte pour spécifier l'attribut controls. Le même principe s'applique aux attributs autoplay et loop.

8. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à l'exercice suivant.

L'élément audio HTML5 fonctionne de la même façon que l'élément video, mais il s'applique uniquement au son. Pour utiliser l'élément audio, incluez la balise <audio> et le chemin d'accès au fichier sur votre disque dur, ou une URL pointant vers le fichier audio.

Comprendre et utiliser les balises audio

L'élément audio vous permet d'incorporer un son audio, tel que de la musique ou d'autres sons, dans les documents HTML. Vous pouvez inclure les mêmes attributs se rapportant aux contrôles que pour l'élément video, à savoir : autoplay, controls et loop. L'exemple suivant inclut uniquement l'attribut controls :

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

</audio>

PRÊT POUR LA CERTIFICATIONQuel est le balisage utilisé pour l'élément audio HTML5 ?2,3

Si vous utilisez l'attribut autoplay pour que la lecture audio commence automatiquement lors du chargement de la page Web, utilisez un clip de courte durée comme un effet sonore. Un grand nombre d'internautes n'aiment pas entendre un son automatique et préfèrent avoir davantage de contrôle.

REMARQUE*

48 | Leçon 2

Les trois principaux types de fichiers audio pris en charge par les navigateurs sont OGG, MP3 et WAV. Toutefois, tous les navigateurs ne prennent pas en charge tous les formats de fichier audio, du moins pas pour le moment. Dans la plupart des cas, MP3 représente le meilleur choix en raison de sa compatibilité avec de nombreux navigateurs.Pour vous assurer que votre fichier audio fonctionne avec la plupart des navigateurs et des périphériques, utilisez l'attribut source afin d'inclure plusieurs formats dans votre balisage. L'exemple suivant illustre le même fichier audio disponible dans deux formats :

<audio controls="controls"> <source src="sample.ogg" type="audio/ogg" /> <source src="sample.mp3" type="audio/mp3" /> </audio>

Un grand nombre de fichiers audio gratuits, libres de redevances et de droits d'auteur, sont disponibles sur le site http://flashkit.com. Ce site est une bonne ressource pour les apprenants et les développeurs qui recherchent un effet sonore pour un projet. D'autres ressources sont également disponibles sur le site Public Sherpa Domain à l'adresse http://www.publicdomainsherpa.com/public-domain-recordings.html. Vous pouvez aussi créer vos propres enregistrements à l'aide de votre ordinateur et d'un logiciel d'enregistrement. Ainsi, l'Enregistreur Windows 7 vous permet d'enregistrer des fichiers audio au format WAV.

UTILISER L'ÉLÉMENT AUDIO

PRÉPAREZ-VOUS. Pour utiliser l'élément audio HTML5, procédez comme suit : 1. Recherchez un clip audio. 2. Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez le

nom de fichier par celui de votre clip audio.

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

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

Figure 2-19

Contrôles audio HTML5 par défaut dans un navigateur Web


4. Si les contrôles audio ne s'affichent pas, accédez à la page Web du service de validation du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-audio.html et cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.

5. Réenregistrez le fichier et ouvrez-le dans un navigateur Web. Lisez le clip audio.

6. Fermez tous les fichiers ouverts, ainsi que l'outil d'édition et le navigateur Web.


Pour plus d'informations sur l'incorporation de contenu multimédia dans les pages Web HTML5, et plus particulièrement les éléments audio et video, reportez-vous à la page http://msdn.microsoft.com/fr-fr/library/ie/hh771805.



• Le langage HTML (Hypertext Markup Language) utilise des balises pour décrire le contenu qui s'affiche sur une page Web.

• Un élément se compose à 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.

• Chaque page Web requiert l'insertion de la déclaration doctype en haut de la page.• HTML5 utilise la plupart des éléments et attributs déjà spécifiés dans HTML 4, mais

il inclut quelques nouvelles balises. En outre, l'utilisation par défaut d'autres balises a été modifiée et certains éléments ne sont plus pris en charge. Parmi les nouveaux éléments textuels figurent notamment command, mark, time, meter et progress. Les éléments basefont, center, font et strike sont désormais obsolètes.

• L'élément img permet d'afficher les images liées dans une page Web. Les images peuvent se trouver dans les fichiers HTML des pages Web, généralement dans un sous-dossier d'images, ou sur un autre serveur ou site Web.

• Les éléments figure et figure caption sont nouveaux dans HTML5. Ils vous donnent plus de contrôle sur le type d'images affichées et permettent d'inclure des légendes, respectivement.

• L'élément canvas est utilisé pour des opérations dynamiques de dessin, de rendu et de manipulation d'images et de graphiques dans HTML5.

• SVG (Scalable Vector Graphics) permet de créer des objets évolutifs et redimensionnables qui s'adaptent parfaitement à l'écran sur lequel ils s'affichent, qu'il s'agisse d'un moniteur ou d'un smartphone.

• HTML5 introduit les éléments audio et video qui rendent désormais superflue l'utilisation de plug-ins ou de lecteurs multimédias pour écouter de la musique ou regarder des vidéos via un navigateur Web.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Une balise HTML qui ne nécessite pas de balise de fin est appelée une balise

. 2. Un est utilisé conjointement avec un élément pour décrire les

données dans le détail pour effectuer le rendu. 3. est une déclaration placée au tout début de chaque page Web. 4. Un élément ou un attribut a été supprimé de la liste d'éléments

HTML disponibles selon l'organisme W3C.


50 | Leçon 2

5. Une image est composée de pixels, tandis qu'une imageest formée de lignes et de courbes basées sur des expressions

mathématiques. 6. Nouveau dans HTML5, l'élément spécifie le type de figure à ajouter

tel qu'une image, un diagramme, une photographie, etc. 7. L'élément permet d'ajouter une légende à une image sur une page

Web, avec la possibilité de placer la légende avant ou après l'image. 8. Avec l'élément , la page Web devient un bloc de dessin, tandis que

les commandes JavaScript permettent de tracer des formes composées de pixels dans la zone de dessin, avec notamment des couleurs, des dégradés et des motifs de remplissage.

9. est un langage permettant de décrire des graphiques 2D en XML (eXtensible Markup Language).

10. Les éléments HTML5 et permettent de proposer du contenu multimédia dans un navigateur Web sans qu'aucun plug-in ne soit nécessaire.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les balises suivantes, lesquelles sont obligatoires sur chaque page Web ?

(Choisissez toutes les réponses applicables.)a. <html>b. <head>c. <title>d. <body>

2. Parmi les syntaxes suivantes, laquelle permet de créer un lien hypertexte en HTML ?a. <link href="http://www.example.com">link</a>b. <a href="http://www.example.com"> link text</a>c. <link>http://www.exemple.com</link >d. <http://www.example.com>

3. Quel élément HTML5 définit un bouton de commande sur lequel les utilisateurs peuvent cliquer pour appeler une commande ?a. <objectbut>b. <combutton>c. <command>d. <cbutton>

4. Quel élément HTML5 permet de surligner des blocs de texte dans un document HTML ?a. <mark>b. <highlight>c. <emphasis>d. <yellow>

5. Parmi les balises suivantes, lesquelles sont obsolètes dans HTML5 ? (Choisissez toutes les réponses applicables.)a. <big>b. <center>c. <font>d. <time>

6. Quelle balise est utilisée avec la balise <figure> pour afficher une image ?a. <img>b. <src>c. <fig>d. <a>


7. Parmi les propositions suivantes, laquelle est nécessaire pour canvas et SVG ?a. Microsoft Silverlightb. Un programme de dessin externe, tel que Microsoft Paintc. Un important espace de stockage ou bande passanted. JavaScript

8. Pour savoir si vous devez utiliser l'élément canvas ou SVG, parmi les affirmations suivantes, laquelle est vraie ?a. Si le dessin est assez petit, utilisez SVG.b. En règle générale, utilisez canvas pour les petits écrans et SVG pour les écrans

plus grands.c. Si le dessin contient un nombre important d'objets, utilisez SVG.d. Si vous devez créer des documents vectoriels très détaillés dont la mise à l'échelle

est importante, optez pour canvas.

9. Parmi les formats suivants, lequel est le format général de l'élément video ?a. <movie src="file.mp4" width="X" height="Y">b. <movie href="file.mp4" width="X" height="Y">c. <video src="file.mp4" width="X" height="Y">d. <video href="file.mp4" width="X" height="Y">

10. Parmi les formats suivants, lequel est le format général de l'élément audio ?a. <audio src="sample.mp3" controls="controls">b. <audio href="sample.mp3" controls>c. <sound src="sample.mp3" controls>d. <sound href="sample.mp3" controls="controls">

Vrai/Faux

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

V F 1. L'élément canvas nécessite JavaScript pour créer des formes.V F 2. La création d'un objet SVG dans HTML5 ne nécessite pas JavaScript.V F 3. L'élément audio peut fournir des contrôles de lecture avec un seul attribut.V F 4. Les éléments obsolètes ne peuvent pas être restitués dans un navigateur prenant

en charge la norme HTML5.V F 5. LeformatdefichieraudioleplusrépanduestMP4.


Scénario 2-1 : Correction d'erreurs de balisage simples

Géraldine, l'assistante de direction, apprend le langage HTML. Son balisage, illustré ci-dessous, ne produit pas le rendu attendu. Le caractère gras ne s'arrête pas après « jeudi ». Le logo de la société ne s'affiche pas, même si le fichier est enregistré dans le sous-dossier d'images avec toutes les autres images. Le texte de remplacement ne s'affiche pas non plus lorsqu'elle passe le pointeur de la souris au-dessus de l'emplacement réservé à l'image. Que pouvez-vous lui dire ?

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Interne</title> </head>

52 | Leçon 2

<body> <h1>Réunion du personnel</h1> <img src="cologo.jpg" olt="Logo d'entreprise" /> <p>Se réunir dans la <strong>Salle de conférence bleue</strong> a <strong>10 h</strong> ce <strong>jeudi<strong> pour une réunion urgente du personnel.</p> </body> </html>

Scénario 2-2 : Utilisation de symboles

Petra met en forme certains documents comptables qui seront hébergés sur le site intranet de la société. Elle explique que le signe dollar et le symbole du pourcentage s'affichent correctement dans un navigateur, mais que des caractères incompréhensibles s'affichent lorsqu'elle utilise un autre navigateur. Que doit-elle faire ?


Scénario 2-3 : Canvas ou SVG ?

M.A. est une artiste graphique chez ClickTick Watches, un fabricant de montres-bracelets de luxe. On lui demande de revisiter le logo de la société et d'en créer un à l'aide d'un outil qui permet d'utiliser une taille adaptée selon que le support est un ordinateur portable ou un smartphone. Elle doit également créer des graphiques interactifs pour les commerciaux qui les utiliseront sur leurs tablettes. Elle souhaite mettre à jour ses compétences en approfondissant ses connaissances sur les technologies HTML5, mais ne sait pas si elle doit se concentrer sur l'élément canvas ou SVG pour ses projets. Que lui suggérez-vous ?

Scénario 2-4 : Sélection de formats vidéo et de codecs appropriés pour le Web

Sammy est chargé d'organiser des réunions pour les employés de la société Clear Blue Resorts. Il souhaite poster une vidéo du président-directeur général, qui se trouve actuellement en déplacement à l'étranger pour évaluer des sites potentiels pour accueillir de nouveaux centres de villégiature, sur le site intranet à l'occasion de la fête à venir en l'honneur des employés. Il sait que Clear Blue utilise Internet Explorer 9, et il a entendu dire qu'il pourra facilement afficher la vidéo dans HTML5, mais il ne sait pas par où commencer. Que conseillez-vous à Sammy ?

Documents

Notions fondamentales sur le développement d’applications HTML5 · 2019-08-23 · a. Vous trouverez ci-dessous deux sections distinctes relatives aux droits d’utilisation. Une