Notions fondamentales sur le développement d’applications HTML5

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




















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


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 ?

53

LEÇONCréation de l'interface utilisateur avec HTML5 : Organisation, saisie et validations


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



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

54 | Leçon 3

PRÊT POUR LA CERTIFICATIONQu'est-ce que le balisage sémantique ?2.4

■ Sélection et configuration des balises HTML5 pour organiser le contenu et les formulaires

Le balisage HTML5 introduit plusieurs nouvelles balises pour organiser la structure des documents HTML, ce qui facilite la création et la modification des documents. Les nouvelles balises ont des noms plus intuitifs que des constructions similaires dans les spécifications HTML précédentes. Les balises sont nommées de manière plus appropriée à la partie de la page à laquelle elles s'appliquent, comme <header>, <section> et <footer>.HTML5 a également rationalisé la création de tableaux, en déplaçant de nombreux attributs qui ont une influence sur la largeur de marge intérieure et l'alignement vertical et horizontal dans le fichier CSS.

Le balisage sémantique utilise des noms de balises intuitifs, ce qui facilite la génération et la modification des documents HTML et l'interprétation par les navigateurs Web et les autres programmes.

Une des nouveautés très pratiques du HTML5 est l'utilisation du balisage sémantique, qui donne une meilleure signification ou définition à plusieurs balises afin qu'elles aient plus de sens pour les utilisateurs, les programmes et les navigateurs Web. Comme indiqué dans la leçon 2, toutes les balises HTML n'ont pas été remplacées ou mises à jour pour HTML5, mais parmi les nouvelles qui ont été introduites, certaines rendent le travail de création de pages Web beaucoup plus facile.Dans HTML 4.01 et les versions précédentes, un développeur qui crée la structure d'un document HTML utilise fréquemment la balise <div> partout. La balise <div> comprend souvent une classe ou un attribut d'ID, qui peut également inclure des styles CSS tels quebackground-color, height et width. Voici un exemple simple d'une balise <div> :

<div id="header" > Il s'agit d'un en-tête </div>

HTML5 introduit plusieurs nouveaux éléments pour organiser le contenu et les formes. Ils représentent le nouveau balisage sémantique qui est une partie importante du HTML5.L'ESSENTIEL

Les attributs class et id sont des attributs globaux, ce qui signifie qu'ils peuvent être utilisés avec n'importe quel élément HTML. Vous pouvez voir la liste complète des attributs HTML globaux sur http://dev.w3.org/html5/markup/global-attributes.html.

REMARQUE*

L'élément div seul n'a pas beaucoup de sens sans l'attribut id ou class. Il est aussi possible d'attribuer la valeur de votre choix à l'ID, comme "header", "header_inner", "slogan", "content", "style", etc. Voici un exemple d'un document HTML 4.01 :

<div id="header"> <div id="header_inner"> <img src="images/doghappy.jpg" alt="Attaboy Pet Services" /> <div id="slogan">Un chien heureux est un bon chien</div> </div></div>

HTML5 utilise des balises simples pour remplacer un grand nombre de balises div, dont certaines sont indiquées dans la figure 3-1.

Présentation de la sémantique HTML


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.

56 | Leçon 3

Nous allons examiner plus attentivement les balises HTML5 de la figure 3-1. Il s'agit des balises les plus courantes liées à la structure HTML5.

ÉLÉMENTS HEADER ET FOOTERL'élément header définit l'en-tête d'un document, d'une section ou d'un article. Dans HTML 4.01, vous devez utiliser l'en-tête div, tel que mentionné dans la section précédente (<div id="header">). L'élément footer définit un pied de page dans un document ou une section, et contient généralement des informations sur le document ou la section, par exemple le nom de l'auteur, les données de Copyright, des liens renvoyant à des documents connexes, etc. L'élément footer ne s'affiche pas automatiquement en bas du document ; vous devez utiliser CSS pour indiquer au navigateur l'emplacement où doit s'afficher le pied de page. Les pieds de page qui apparaissent au bas de chaque page Web ou document sont connus sous le nom de « sticky footers ».

Voici un exemple d'un article avec une balise header tag et une balise footer :

<article> <header> <h1>Apprentissage d'HTML5</h1> <h2>Les nouveaux éléments</h2> </header> <p>Les nouvelles balises HTML5 rendent le développement de page Web et d'application plus facile que jamais.</p> <footer> <p>Publié le : <time datetime="2012-09- 03"3 septembre 2012</time></p> </footer> </article>

Comme avec l'élément div, vous pouvez utiliser les éléments header et footer à plusieurs reprises dans un document HTML document, comme illustré dans la figure 3-2.

Figure 3-2

Plusieurs instances de l'élément header

Comme vous avez l'appris dans la leçon 1, la norme HTML5 ne sera pas finalisée avant plusieurs années, ce qui signifie que des modifications seront toujours apportées aux spécifications. Les principaux navigateurs Web, comme Microsoft Internet Explorer et Mozilla Firefox, prennent en charge de nombreux éléments HTML5, mais pas tous. Le site Web « Can I use » http://caniuse.com/ est une excellente source pour déterminer quels navigateurs prennent en charge des fonctionnalités HTML5 spécifiques. Ce site Web est mis à jour régulièrement, il devrait donc faire une partie de vos ressources HTML5 essentielles. En outre, vous pouvez tester la prise en charge du HTML5 par n'importe quel navigateur en accédant au site Web de test HTML5 sur http://html5test.com.

REMARQUE*


L'ÉLÉMENT SECTIONL'élément section définit une section d'un document, tel qu'un chapitre, des parties d'une thèse ou d'une page Web dont le contenu est distinct. WC3 spécifie l'utilisation de l'élément section pour le différencier des autres éléments de structure. Il doit notamment contenir au moins un titre et définir quelque chose qui doit normalement apparaître dans le plan du document. Par exemple, vous devez utiliser l'élément section pour répartir les différentes parties d'un site Web d'une page ou pour créer un portefeuille d'images. Voici un exemple d'une section simple :

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

Le tableau 3-2 énumère les situations dans lesquelles vous devez éviter d'utiliser l'élément section et fournit la meilleure technique.

PRÊT POUR LA CERTIFICATIONQuand dois-je utiliser la balise <section> par rapport à un autre type d'élément ?2.4

Tableau 3-2

Situations dans lesquelles vous ne devez pas utiliser l'élément section

Situation Utilisation

Contenu distinct qui est indépendant du reste du contenu de article la page Web ou d'un document

Prévoit de syndiquer un bloc de contenu article

Crée une barre latérale aside

Enveloppe et positionne plusieurs sections qui ne sont pas div liées entre elles

Ajoute une ombre portée à un élément ou une bordure autour div

Il peut parfois être difficile de savoir quand utiliser la balise <section> plutôt qu'un autre élément. Lorsque vous travaillez sur un document HTML et que vous ne savez pas quel élément utiliser, parcourez la spécification W3C HTML5 ou le Web pour voir comment les autres développeurs ont géré une situation similaire.Lors de la définition d'un en-tête de section, qui peut contenir des titres de h1 à h6, vous pouvez utiliser l'élément hgroup pour regrouper les titres. L'élément hgroup affecte l'organisation, mais pas la présentation. Pensez à utiliser hgroup lorsque vous avez un titre et un sous-titre l'un après l'autre, comme suit.

<section> <hgroup> <h1>Pas de danse Hip-Hop</h1> <h3>La méthode en huit temps</h3> </hgroup> <article> <p>Les professeurs de Hip-hop enseignent souvent des mouvements en huit temps.</p> </article></section>

Ce balisage apparaît dans une page Web, comme illustré dans la figure 3-3.

Les nouvelles balises liées à la structure HTML5 ne remplacent pas complètement les balises <div>, mais les balises HTML5 réduisent considérablement le nombre de balises <div> nécessaires dans un document HTML.

REMARQUE*

58 | Leçon 3

CRÉERUNDOCUMENTHTMLAVECEN-TÊTE,DESSECTIONSETUNPIEDDEPAGE

PRÉPAREZ-VOUS. Pour créer un document HTML à l'aide des éléments HTML5 header, section et footer, procédez comme suit :

1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un navigateur Web, créez un document HTML simple qui incorpore les balises <header>, <section> et <footer>. Intégrez deux sections et n'oubliez pas d'inclure au moins un élément h1 au sein des sections. Vous pouvez inclure des images si vous le souhaitez. Le balisage peut ressembler à ce qui suit :

<!doctype html><html><head> <meta charset="utf-8" /> <title>Ma page</title></head><body><header> <h1>Sélection d'un style de concert</h1></header><section> <h1>Symphonies</h1> <p>Une symphonie est un type de composition musicale généralement jouée par un orchestre complet.</p></section><section> <h1>Raves</h1> <p>Une rave est un rassemblement de personnes qui dansent en écoutant de la musique, surtout de la musique électronique, généralement interprétée par un groupe ou des DJ en direct.</p></section><footer> <p>Auteur :Nathaniel Becker</p></footer></body></html>

N'oubliez pas, vous pouvez utiliser plusieurs outils pour créer des documents HTML. Pour le PC, pensez aux éditeurs de texte Notepad ou Notepad ++, aux éditeurs HTML-Kit ou KompoZer HTML ou aux outils de développement Microsoft Visual Studio, Visual Studio for Web ou Microsoft Expression Web.

REMARQUE*

Figure 3-3

Utilisation de hgroup pour regrouper des titres dans un document HTML


Ce balisage s'affiche dans une page Web, comme illustré dans la figure 3-4.

2. Enregistrez le fichier sous le nom L3-mapage.html. 3. Validez le document en utilisant le service de validation du balisage W3C à l'adresse

http://validator.w3.org. Si vous avez besoin d'aide, reportez-vous à la leçon 2. 4. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant

au cours de cette session.

L'ÉLÉMENT NAVL'élément nav définit un bloc de liens de navigation. L'élément nav est utile pour créer un ensemble de liens de navigation pour la navigation principale de votre document, une table des matières, un fil d'Ariane dans un pied de page ou des liens Précédent-Accueil-Suivant.Le W3C mentionne qu'il ne faut pas utiliser les balises <nav> pour tous les liens de naviga-tion, simplement pour les principaux blocs de liens. Comme les balises <nav> sont inter-prétées par le logiciel de lecteur d'écran pour déficients visuels, ce logiciel peut déterminer s'il doit autoriser ou non les liens de navigation à l'utilisateur selon leur importance.L'exemple suivant montre l'utilisation de la balise <nav> :

<nav> <a href="/hiphop/">Hip-Hop</a> <a href="/modern/">Danse moderne</a> <a href="/swing/">Swing</a> <a href="/tap/">Claquettes</a></nav>

Les liens seraient affichés dans une page Web, comme illustré dans la figure 3-5.

Figure 3-4

Document HTML avec un en-tête, un pied de page et une section

En-tête

Sec�ons

Pied de page

Figure 3-5

Liens simples utilisant l'élément nav

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


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

L'ÉLÉMENT ARTICLEL'élément article définit une partie d'un document HTML représentant une « composition autonome » indépendante du reste du contenu dans un document. Le contenu déclenché par les balises <article> peut être distribué par flux de syndication. Cela équivaut à un contenu qui se suffit à lui-même. (La syndication Web consiste à rendre le contenu d'un site Web disponible à de nombreux sites Web.).

Figure 3-7

Page avec des liens de navi-gation nouvellement ajoutés

Liens de naviga�on

Parmi les exemples de contenu qui conviennent pour le marquage avec <article> on peut trouver un article de magazine, une entrée de blog ou le contenu d'un flux RSS. Vous pouvez également utiliser l'élément article pour le contenu des sections À propos de et Contact, qui sont indépendantes du reste de la page sur laquelle elles se trouvent mais ne vont pas nécessairement être syndiquées.

L'ÉLÉMENT ASIDEL'élément aside sert à afficher le contenu lié au sujet actuel, mais qui est susceptible d'interrompre le flux du document s'il demeure au sein du texte. L'élément aside est essentiellement utilisé pour les informations qui se trouvent dans les barres latérales et les notes. Ce type de contenu peut donner un aperçu plus détaillé d'un sujet, proposer des liens de lecture connexes ou afficher des définitions de mots clés dans le paragraphe. L'élément aside ne change pas la position du contenu, ni la manière dont il s'affiche. Il indique simplement au navigateur et aux moteurs de recherche qu'il s'agit d'un contenu associé.

W3C encourage l'utilisation de l'élément article plutôt que l'élément section pour tout contenu qui pourrait être syndiquéREMARQUE*

4. Ré-enregistrez le fichier sous le nom L3-MyPage-nav.html, puis ouvrez-le dans un navigateur Web. Les liens de navigation s'afficheraient dans une page Web, comme illustré dans la figure 3-7.

62 | Leçon 3

<article> <header> <h1>Apprentissage d'HTML5</h1> <h2>Les nouveaux éléments</h2> </header> <p>Les nouvelles balises HTML5 rendent le développement de page Web et d'application plus facile que jamais. Parmi les nouvelles fonctionnalités très pratiques de HTML5 on trouve l'utilisation du balisage sémantique.</p> <aside> <h4><b>Le balisage sémantique</b></h4> <p> permet de mieux définir les balises afin de leur donner plus de sens pour les utilisateurs, les programmes et les navigateurs Web</p> </aside> <p>Toutes les balises HTML n'ont pas été remplacées ou mises à jour pour HTML5, mais certaines nouvelles balises introduites dans HTML5 rendent le travail de création de pages Web beaucoup plus facile.</p><footer> <p>Publié le : <time datetime="2012-09- 03">3 septembre 2012</time></p> </footer></article>

Le balisage apparaît dans une page Web, comme illustré dans la figure 3-8.

Comme vous pouvez le voir dans la figure 3-8, le contenu situé sur le côté ne se démarque pas vraiment du reste du contenu. Vous pouvez ajouter la balise de la règle horizontale <hr /> avant et après le contenu de la parenthèse, qui apparaîtrait dans un navigateur Web, comme illustré dans la figure 3-9.

Figure 3-8

Exemple d'un élément aside

De côté


Vous pouvez également utiliser CSS pour ajuster les marges du contenu situé sur le côté, afin qu'elles soient en retrait à gauche et à droite. Dans les prochaines leçons, vous apprendrez les techniques de mise en page CSS pour afficher un contenu similaire dans une zone le long du côté gauche ou droit du corps de texte correspondant.

AJOUTER L'ÉLÉMENT ASIDE À UN DOCUMENT HTML

PRÉPAREZ-VOUS. Pour ajouter l'élément aside à 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-nav.html (s'il n'est pas déjà ouvert) et enregistrez-le sous le nom L3-MyPage-art-aside.html pour créer un nouveau fichier.

2. Placez un élément aside juste avant le pied de page, comme suit :

<aside> <hr /> <p>Remarque : La Drug Enforcement Administration des États-Unis s'intéresse également aux raves. Allez sur http://www.justice.gov/dea/ ongoing/raves.html pour en savoir plus.</p></aside>

3. Ré-enregistrez le fichier sous le nom L3-MyPage-art-aside.html et affichez-le dans un navigateur Web. La page doit ressembler à la figure 3-10.

4. Validez le document en utilisant le service de validation du balisage W3C à l'adresse http://validator.w3.org.

5. Fermez le fichier et laissez ensuite l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant au cours de cette session.


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.

Figure 3-9

Utilisation de la balise <hr /> pour ajouter des règles horizontales pour afficher le contenu situé sur le côté

64 | Leçon 3

Utilisation de balises pour créer des tableaux et des listes

Les tableaux et les listes permettent de structurer des informations spécifiques dans les documents HTML. Un tableau contient des lignes et des colonnes et affiche les données dans une grille. En HTML, vous pouvez créer des listes triées et non triées. Chaque élément d'une liste triée est marqué par un nombre ou une lettre. Une liste non triée est une liste à puces.

Cette section explique en détail comment créer des tableaux et des listes à l'aide d'éléments HTML. HTML5 introduit quelques nouveaux éléments pour les tableaux et les listes, mais la plupart des balises et des concepts sont les mêmes que les spécifications antérieures. Si vous avez déjà créé un tableau ou une liste HTML, vous devriez être capable de survoler cette section sans problème.

CRÉATION DE TABLEAUXUn tableau HTML contient des lignes et des colonnes et sert à organiser et à afficher les informations sous forme de grille. Certains développeurs utilisent des tableaux à des fins de mise en page, pour positionner ou aligner le contenu avec des images par exemple, mais ce n'est pas la meilleure utilisation des tables.Au sujet du balisage, chaque tableau HTML commence par la balise <table>. Les lignes sont marquées par la balise <tr>, les en-têtes de colonne utilisent la balise <th> et les cellules sont définies par la balise <td>.Le balisage pour un tableau très basique de deux colonnes et cinq lignes est la suivante. La figure 3-11 montre des commentaires qui ont été ajoutés pour indiquer des colonnes et des lignes qui sont à titre d'informations uniquement et qui n'apparaissent pas lorsque le document est affiché dans un navigateur :

<table border="1"> <tr>  <th>Trimestre</th>  <th>Ventes totales</th>  </tr>

PRÊT POUR LA CERTIFICATIONComment créer un tableau ?2.4

Figure 3-10

Document HTML qui inclut des éléments article et aside

De côté


Si vous créez un tableau simple, vous pouvez utiliser la balise <caption> pour ajouter une légende au-dessus ou au-dessous de ce tableau. Pour appliquer des styles intralignes avec HTML, plutôt que CSS, les développeurs utilisent la balise <col> pour appliquer les styles à une colonne entière. (Vous découvrirez bientôt la mise en forme en ligne.) La balise <colgroup> regroupe les colonnes dans un tableau pour vous permettre d'appliquer une mise en forme au groupe, plutôt qu'à une colonne seulement.Lorsque vous créez un long tableau qui nécessite un défilement dans un navigateur, utilisez les balises <thead>, <tfoot> et <tbody>. Le contenu à l’intérieur de l'en-tête et le pied de page reste sur la page tandis que le contenu balisé avec <tbody> défilera entre les deux. La balise <thead> crée des en-têtes de colonnes (en caractères gras par défaut) et la balise <tfoot> est utilisée pour afficher la dernière ligne, par exemple une ligne des totaux. La balise <tbody> définit tout le contenu entre l'en-tête et le pied de page.Voici un exemple de balise pour un tableau avec trois colonnes et cinq lignes, la première ligne étant l'en-tête de colonne et la dernière ligne, le pied du tableau. Le balisage inclut également une légende au-dessus du tableau. Le rendu du balisage est illustré par un navigateur dans la figure 3-12 :

<table> <caption>Ventes pour l'ID d'employé 2387</caption>

<colgroup span="2" style="background-color:#EEE8AA;"> </colgroup>

Vous devez inclure les éléments thead et tfoot avant l'élément tbody afin que le navigateur puisse afficher l'en-tête et le pied du tableau avant de recevoir toutes les lignes de données.

REMARQUE*

Figure 3-11

Une tableau simple

<tr>  <td>T1</td> <td>4 349 $</td> </tr> <tr>  <td>T2</td> <td>2 984 $</td> </tr> <tr>  <td>T3</td> <td>3 570 $</td> </tr> <tr>  <td>T4</td> <td>7 215 $</td> </tr></table>

66 | Leçon 3

<colgroup style="background-color:#00FA9A;"> </colgroup> <thead> <tr> <th scope="col">Trimestre</th> <th scope="col">Ventes totales</th> <th scope="col">Objectif atteint ?</th> </tr> </thead><tfoot> <tr> <th scope="col">Total</th> <th scope="col">18 118 $</th> </tr></tfoot> <tbody> <tr> <td>T1</td> <td>4 349 $</td> <td>Oui</td> </tr> <tr> <td>T2</td> <td>2 984 $</td> <td>Non</td> </tr> <tr> <td>T3</td> <td>3 570 $</td> <td>Oui</td>

Figure 3-12

Version plus avancée d'un tableau simple


</tr> <tr> <td>T4</td> <td>7 215 $</td> <td>Oui</td> </tr> </tbody>

Notez l'utilisation de la couleur d'arrière-plan pour les colonnes groupées dans l'exemple précédent. Il s'agit d'un exemple de mise en forme en ligne. L'attribut style utilise une ou plusieurs des propriétés et des valeurs CSS, séparées par des points-virgules. Pour la cou-leur HTML, vous pouvez utiliser le nom de la couleur ou le code hexadécimal. Le code hexadécimal #EEE8AA correspond à un jaune doré clair. Le code hexadécimal #00FA9A produit la couleur vert printanier. Un nuancier de couleurs standard HTML est disponible sur http://www.w3schools.com/html/html_colornames.asp.Vous pouvez aussi centrer le contenu dans une cellule, une colonne ou un groupe de colonnes à l'aide de style="text-align:center". Pour enchaîner plusieurs propriétés et valeurs dans le même attribut de style, utilisez une syntaxe similaire à style="color:blue;text-align:center". Les leçons 4 à 6 de cet ouvrage présentent CSS et ses nombreuses propriétés.Le tableau 3-3 résume les éléments communs utilisés pour générer des tableaux en HTML5.

Tableau 3-3

Éléments courants utilisés pour construire des tableaux

élément Description

col Définit une colonne de tableau

colgroup Définit un groupe de colonnes dans un tableau

caption Marque le texte comme une légende de tableau

table Définit un tableau

tbody Définit un groupe de lignes dans un tableau à des fins de mise en forme et de défilement

td Définit une cellule de tableau

tfoot Définit un groupe de lignes de pied de page dans un tableau à des fins de mise en forme et de défilement

th Définit une cellule d'en-tête de tableau

thead Définit un groupe de lignes d'en-tête dans un tableau à des fins de mise en forme et de défilement

tr Définit une ligne de tableau

Si vous avez créé des tableaux à l'aide de HTML 4 ou d'une version précédente, vous devez connaître les éléments cellpadding, cellspacing, frame, rules, summary et/ou width. Ils sont déconseillés et non pris en charge dans HTML5.

REMARQUE*

68 | Leçon 3

CRÉER UN TABLEAU

PRÉPAREZ-VOUS. Pour créer un tableau, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, créez un fichier nommé L3-PracTable.html avec le balisage suivant :

<!doctype html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Films en haut du box-office</title></head><body><table border="1"> <tr> <th>Film</th> <th>Produit total brut</th> </tr> <tr> <td>Avatar</td> <td>2,7 milliards de dollars</td> </tr> <tr> <td>Titanic</td> <td>2,1 milliards de dollars</td> </tr> <tr> <td>The Dark Knight</td> <td>1 milliard de dollars</td> </tr></table></body></html>

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

3. Modifiez le tableau et ajoutez une légende au-dessus disant « Films en haut du box-office » et un pied de page contenant les mots « Total » et « 5,8 milliards de dollars ».

4. Remplacez l'arrière-plan du tableau, des en-têtes de colonne au pied de page, par du kaki, en utilisant le code hexadécimal #F0E68C. Pour ce faire, ajoutez le balisage suivant colgroup entre <table border="1"> et <thead>, comme suit :

<table border="1"> <colgroup span="2" style="background-color:#F0E68C;"> </colgroup><thead>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Une fois terminé, le tableau doit ressembler à celui de la figure 3-13. Révisez votre balisage si nécessaire et réenregistrez le fichier.



CRÉATION DE LISTESLa création de listes en HTML5 est simple, surtout si vous en avez créées dans des spécifications HTML précédentes. Les règles sont presque identiques, bien que dans HTML5, l'utilisation d'un élément de liste a été modifiée et quelques nouveaux attributs ont été introduits.Il existe deux principaux types de listes HTML :

• Liste triée : une liste classe par défaut les entrées de la liste à l'aide de nombres. La balise <ol> est utilisée. Vous pouvez utiliser les attributs suivants avec une liste triée :

a. reversed : utilise la valeur « reversed » qui inverse l'ordre de la liste, dans l'ordre décroissant. Cet attribut n'est pas pris en charge dans la plupart des navigateurs à ce jour

b. start number : spécifie la valeur de début de la liste triée c. type : spécifie le type de marqueur à utiliser au début de chaque élément de la

liste. La valeur « 1 » est la valeur par défaut et affiche les nombres décimaux, la valeur « A » utilise des majuscules, la valeur « a » utilise des minuscules, la valeur « I » utilise des chiffres romains majuscules et la valeur « i » utilise des chiffres romains en minuscules

• Liste non triée : une liste affiche les entrées sous forme de liste à puces. Utilise une balise <ul>. Les éléments d'une liste sont marqués par <li>, ce qui indique un élément de liste

ordinaire. Voyons quelques exemples. Voici une liste triée, indiquée dans un navigateur dans la figure 3-14 :

<p>Gâteaux préférés :</p><ol> <li>Crème italienne</li> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li></ol>

Voici une liste non triée et affichée dans un navigateur Web dans la figure 3-15 :<p>Types de gâteaux :</p><ul> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li> <li>Crème italienne</li></ul>

PRÊT POUR LA CERTIFICATIONComment créer une liste triée et une liste à puces ?2.4

Figure 3-13

Tableau final des films en haut du box-office

70 | Leçon 3

Vous pouvez changer les symboles de balle ronde dans une liste non triée en ajoutant simplement un attribut pour modifier la nature des balles. Pour les symboles carrés, ajoutez type="square" à la balise <ul> et pour les cercles vides ajoutez type="circle". Vous pouvez également ajouter des attributs à des éléments de liste individuels (marqués par <li>) pour affecter des points individuels. Par exemple, pour afficher tous les symboles de balle comme des carrés remplis :

<p>Types de gâteaux :</p><ul type="square"> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li> <li>Crème italienne</li></ul>

La balise apparaît comme illustré dans la figure 3-16.

Figure 3-14

Exemple de liste triée

Figure 3-15

Exemple de liste non triée


Un autre type de liste est la liste de définitions. Elle affiche les entrées avec leurs défini-tions sous les entrées de la liste comme prévu. La balise <dl> définit la liste, la balise <dt> marque chaque terme de la liste et la balise <dd> définit chaque description. Voici un exemple de balisage, la liste est ensuite affichée dans la figure 3-17.

<dl> <dt>Délice aux fraises</dt> <dd>Meringue aux fraises avec de petites fraises des bois</dd> <dt>Gâteau au chocolat</dt> <dd>Mini pépites de chocolat mélangées avec un brownie au chocolat recouvert d'un glaçage à la crème</dd> <dt>Crème italienne</dt> <dd>Gâteau italien garni de crème et de noix de coco grillées</dd></dl>

Figure 3-16

Éléments de la liste à puces avec des carrés remplis comme symboles

Figure 3-17

Exemple d'une liste de définitions

72 | Leçon 3

HTML5 utilise également l'élément menu, qui présente une liste (ou menu) de commandes, habituellement avec des boutons. L'organisme de normalisation W3C recommande l'utilisation de l'élément menu uniquement pour les menus contextuels, les listes de contrôles et de commandes des formulaires, les barres d'outils et autres contrôles semblables. L'élément menu HTML5 n'est pas largement pris en charge par les navigateurs à ce jour.

CRÉER UNE LISTE TRIÉE

PRÉPAREZ-VOUS. Pour créer une liste triée, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, entrez la commande suivante :

<!doctype html><html><body>

<ol> <li>Ordinateurs de bureau</li> <li>Ordinateurs portables</li> <li>Tablettes</li> <li>Smartphones</li> </ol>

</body></html>

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

3. Pour remplacer les marqueurs initiaux par des lettres capitales, insérez type="A" dans la balise <ol>, comme ceci : <ol type="A">

4. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les éléments de la liste commencent maintenant par A, B, C et D ?

5. Pour commencer la numérotation de la liste à 5, insérez start="5" dans la balise <ol>. Remplacez la balise actuelle <ol> par : <ol start="5">

6. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les éléments de la liste commencent maintenant par 5 et se terminent par 8 ?


L'élément menu était obsolète en HTML 4.01, mais il a été redéfini en HTML5.

REMARQUE*

■ Sélection et configuration des balises HTML5 pour la saisie et la validation

Les développeurs utilisent des formulaires Web comme interface pour collecter des informations à partir du site Web et des utilisateurs de l'application client. Les éléments d'entrée HTML servent à créer l'interface d'un formulaire et à s'assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente. La validation vérifie que les informations saisies sont dans le format correct et utilisables avant d'envoyer les données au serveur.

L'ESSENTIEL

En HTML, les entrées et la validation s'appliquent aux formulaires. Un formulaire Web est une page Web qui contient des champs d'entrée à renseigner par l'utilisateur et qui est transmise à un serveur pour traitement. Ensuite, ces informations sont stockées dans une base de données ou transférées à un destinataire.Les formulaires Web sont utilisés comme interface pour de nombreuses tâches différentes :• SeconnecteràunsiteWeb,unserveurouunréseau• Recueillir des coordonnées, telles que le nom, l'adresse, le numéro de téléphone et

l'adresse postale• S'inscrire aux courriels ou aux lettres d'information d'une organisation


• Recueillir les commentaires des utilisateurs après la publication d’un article sur un site Web• Sélectionner des préférences sur une page Web• Saisir des informations de réservation

De nombreuses applications clientes utilisent une sorte de formulaire Web pour interagir avec l'utilisateur.Vous pouvez utiliser les éléments d'entrée HTML pour créer l'interface d'un formulaire et vous assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente. La validation vérifie que les informations saisies sont dans le format correct et utilisables avant d'envoyer les données au serveur. Par exemple, si vous entrez « 637 Park Street » dans un champ d'adresse Web, alors que ce champ attend quelque chose comme « http://www.example.com », la validation échouera et l'utilisateur sera invité à corriger l'entrée. La validation réduit également la quantité de spam et de contenu malveillant susceptibles d'arriver sur le serveur ou le destinataire des données du formulaire.

L'entrée de formulaire correspond aux informations qu'un utilisateur saisit dans les champs d'un formulaire Web ou d'une application cliente. (Pour faire simple, nous utilisons le terme « formulaire Web » la plupart du temps, mais ce terme s'applique également à l'application cliente.) HTML5 introduit plusieurs attributs d'éléments d'entrée et de formulaire, tels que url pour entrer une adresse Web unique, email pour une adresse email unique ou une liste d'adresses e-mail et search pour inviter les utilisateurs à entrer le texte à rechercher. Les nouveaux attributs rendent le développement de formulaire beaucoup plus facile que par le passé. Ce qui nécessitait auparavant beaucoup de scripts peut désormais être accompli par les balises HTML5.En revanche, beaucoup des nouveaux attributs ne sont pas encore pris en charge par tous les principaux navigateurs. Toutefois, si vous utilisez un nouvel élément ou un attribut qui n'est pas encore pris en charge, le navigateur « revient » à un autre affichage ou à une autre forme d'entrée en fonction de ce que vous avez.HTML5 introduit deux nouveaux attributs pour l'élément de formulaire : autocomplete et novalidate. Tous les attributs de l'élément de formulaire sont répertoriés dans le tableau 3-4 (les nouveaux attributs sont marqués d'un double astérisque).

Vérifiez la fonctionnalité de n'importe quel formulaire que vous créez dans de nombreux navigateurs différents au cours du développement. Cela garantit que les éléments et les attributs que vous sélectionnez fonctionnent comme prévu ou que la méthode fall-back reçoit des entrées acceptables.

REMARQUE*

Tableau 3-4

Attributs d'élément de formulaire utilisés en HTML5

(suite)

Attribut Valeur Description

accept-charset character_set Spécifie un ensemble de codages de caractères acceptés par le serveur

action URL Spécifie l'adresse de Web à laquelle les données de formulaire sont envoyées

autocomplete**

on off

Spécifie si la saisie semi-automatique est activée ou désactivée dans un formulaire ou un champ de saisie. Peut être « on » pour des champs de saisie spécifiques et « off » pour le formulaire, ou vice versa

enctype application/x-www-form-urlencoded multipart/ form-data text/plain

Spécifie le type d'encodage des données de formulaire lorsque vous soumettez des données à un serveur. Utilisé uniquement pour method=”post”

La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart des formulaires, requièrent des entrées spécifiquement mises en forme. Les nouveaux attributs d'entrée et de formulaire HTML5 sont intuitifs, faciles à utiliser et remplacent un grand nombre de scripts qui étaient obligatoires en HTML 4.01 et dans les versions antérieures.

Présentation des entrées et des formulaires

74 | Leçon 3

Tableau 3-4

suite

PRÊT POUR LA CERTIFICATIONQuels attributs HTML5 devez-vous utiliser pour limiter les entrée de formulaire ?2.5

HTML5 introduit de nombreux attributs d'élément d'entrée. Les attributs d'élément d'entrée sont répertoriés dans le tableau 3-5 (les nouveaux attributs HTML5 sont indiqués par un double astérisque).

Tableau 3-5

Attributs d'élément d'entrée utilisés en HTML5

(suite)


accept

audio/* video/* image/* MIME_type

Spécifie les types de fichiers acceptés par le serveur. Utilisé uniquement pour type=”file”

alt text Spécifie le texte de remplacement pour les images. Utilisé uniquement pour type=”image”. Couramment utilisé lorsque vous créez un bouton d'envoi personnali-sé à partir de votre propre fichier image

autocomplete**

on off

Spécifie si la saisie semi-automatique est activée ou désactivée dans un formulaire ou un champ de saisie. Peut être « on » pour des champs de saisie spécifiques et « off » pour le formulaire, ou vice versa


method

get post

Spécifie la méthode HTTP (transmission) utilisée lors de l'envoi des données de formulaire. Utilisez « get » pour extraire des données et « post » pour stocker ou mettre à jour les données ou envoyer du courrier électronique

name text Spécifie le nom d'un formulaire, qui est utilisé pour référencer les données de formulaire une fois qu'un formulaire est envoyé

novalidate**

novalidate

Attribut booléen qui spécifie que les données du formulaire (entrée utilisateur) ne doivent pas être validées une fois envoyées. HTML5 permet également aux attributs booléens d'être définis en mentionnant l'attribut sans signe égal ou de valeur assignée

target _blank _self _parent _top

Spécifie l'endroit où afficher la réponse reçue après soumission du formulaireLa valeur _blank charge la réponse dans une nouvelle fenêtre du navigateur sans nom._self charge la réponse dans la fenêtre courante. C'est la valeur par défaut, donc son utilisation n'est pas nécessaire _parent charge la réponse dans la fenêtre parent (la fenêtre du navigateur qui ouvre la fenêtre de formulaire) _top charge la réponse dans la fenêtre de navigateur complet

**Nouveautés de HTML5


Tableau 3-5

suite

(suite)


autofocus** autofocus Attribut booléen qui indique qu’un contrôle doit être activé ou sélectionné dès que la page s’affiche

checked checked Spécifie qu'un élément d'entrée doit être présélectionné lors du chargement de la page. Utilisé uniquement pour type=”checkbox” ou type=”radio”

disabled disabled Désactive l'élément d'entrée

form** form_id Spécifie le ou les formulaires auxquels appartient un élément d'entrée

formaction** URL Spécifie l'adresse Web du fichier qui traitera le contrôle d'entrée lorsque le formulaire sera envoyé

formenctype** application/x- www-form- urlencoded multipart/ form-data text/plain

Spécifie le type d'encodage des données de formulaire lorsque vous soumettez des données à un serveur. Utilisé uniquement pour method=”post”

formmethod** get post Spécifie la méthode HTTP (transmission) utilisée pour l'envoi des données de formulaire à une adresse Web

formnovalidate** formnovalidate Attribut booléen qui empêche la validation lors de la soumission d'entrée

formtarget** _blank _self _parent _top

Spécifie un mot clé qui indique où afficher la réponse reçue après avoir soumis le formulaire framename

height pixels Spécifie la hauteur d'un élément d'entrée. Utilisé uniquement avec l'entrée type=”image”

list** datalist_id Fait référence à un élément datalist ayant un contenu prédéfini pour la saisie semi-automatique, comme la sélection d'un élément à partir d'une liste déroulante

max** number date Spécifie la valeur maximale pour un élément d'entrée

min** number date Spécifie la valeur minimale pour un élément d'entrée

multiple** multiple Attribut booléen qui spécifie que l'utilisateur peut entrer plusieurs valeurs

pattern** regexp Fournit un format (une expression régulière) pour le champ de saisie. La valeur de l'élément d'entrée est comparée à l'expression

76 | Leçon 3

Tableau 3-5

(suite) Attribut Valeur Description

placeholder** text Affiche un mot clé ou une phrase courte qui décrit la valeur attendue dans un champ de saisie, tels que E-mail pour un champ de saisie de courrier électronique. L'espace réservé disparaît lorsque l'utilisateur entre des données

readonly readonly Limite un champ de saisie en lecture seule

required** required Attribut booléen qui nécessite qu'un champ soit renseigné avant d'envoyer le formulaire

size number Spécifie la largeur d'un élément d'entrée, en nombre de caractères

src URL Spécifie l'adresse Web de l'image utilisée comme bouton d'envoi. Utilisé uniquement pour type=”image”

step** number Spécifie le nombre d'intervalles accepté pour un élément d'entrée. Peut être utilisé avec les attributs max et le min pour créer une plage de valeurs

Par exemple, si vous créez une barre de défilement pour l'entrée. Si vous définissez step=”3”, chaque fois que l'utilisateur déplace le curseur, la valeur d'entrée augmente ou diminue de 3

type button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

Spécifie le type d'élément d'entrée à afficher

value text Spécifie la valeur d'un élément d'entrée

width pixels Spécifie la largeur d'un élément d'entrée. Utilisé uniquement avec l'entrée type=”image”

**Nouveauté de HTML5


DÉCOUVERTE DE LA CRÉATION DE FORMULAIRE, DES ATTRIBUTS INPUT ET DES VALEURSPour créer un formulaire, utilisez les balises de début et de fin <form>. L'intégralité du contenu et des champs du formulaire sont placés entre les deux balises <form>. La plupart des formulaires incluent également l'attribut id dans la balise de début, comme suit :

<form id="keyword"> <contenu et champs></form>

L'élément fieldset est utilisé avec de nombreux formulaires pour regrouper les éléments connexes. La balise <fieldset> dessine une zone autour des éléments individuels et/ou autour de l'ensemble du formulaire, comme illustré dans la figure 3-18.

Si le formulaire est inclus dans un document HTML avec d'autres éléments, vous pouvez utiliser la balise <div> au début et à la fin du formulaire pour le séparer des autres contenus. La balise <div> vous permet également d'inclure la mise en forme en ligne, si le formulaire utilise des balises pour aligner les champs verticalement courts et simples, et que vous ne voulez pas créer de feuille de style CSS intraligne. La balise <div> utilise l'attribut id et apparaît avant la première balise <form>. L'élément label affiche l'étiquette pour chaque champ. Voici un exemple de balise pour un formulaire très simple :

<div id="contact-form" style="font-family:'Arial Narrow','Nimbus Sans L',sans-serif;"> <form id="contact" method="post" action=""> <fieldset> <label for="name">Nom</label> <input type="text" name="name" /> </fieldset> <fieldset> <label for="email">Email</label> <input type="email" name="email" /> </fieldset> </form></div> 

Le formulaire est illustré dans la figure 3-19.

Figure 3-18

L'élément fieldset regroupe des éléments associés dans un formulaire et ajoute une bordure

78 | Leçon 3

Observons à présent certains des nouveaux attributs et certaines des nouvelles valeurs de HTML5. Bien que cette section ne traite pas de tout ce qui répertorié dans les tableaux 3-4 et 3-5, elle décrit et montre des exemples de certains des attributs et des valeurs les plus couramment utilisés.L'attribut required oblige à renseigner un champ pour soumettre le formulaire. L'attribut email (illustré dans l'exemple précédent) oblige l'utilisateur à entrer une adresse e-mail. Le navigateur alertera l'utilisateur avec un message d'erreur afin de résoudre ces problèmes.Voici un exemple d'élément d'entrée avec les attributs required et email :

<input type="email" required />

Pour rendre un formulaire plus convivial, ajoutez du texte d'espace réservé. Le texte de l'espace réservé correspond au texte qui s'affiche à l'intérieur d'un champ d'entrée lorsque le champ est vide. Il permet aux utilisateurs de comprendre le type d'informations à entrer ou à sélectionner. Lorsque vous cliquez sur un champ d'entrée ou que vous y accédez à l'aide la touche de tabulation et que vous commencez à taper, le texte entré remplace le texte de l'emplacement réservé. Voici un exemple d'attribut placeholder :

<input name="fName" placeholder="Prénom" />

L'attribut pattern offre un format (expression régulière) pour un champ d'entrée qui est utilisé pour valider le contenu du champ. Supposons par exemple que vous ayez un champ d'entrée obligatoire pour ID d'employé. Chaque ID d'employé commence par deux lettres majuscules suivies de quatre chiffres. Vous devez utiliser un champ de saisie de texte avec les attributs required et pattern pour vous assurer que (1) le champ est renseigné lorsque l'utilisateur clique sur le bouton d'envoi et (2) qu'il contient une valeur qui correspond au format correct pour un ID d'employé. Si l'utilisateur survole le champ, le message de l'attribut title (que vous avez ajouté séparément) s'affiche. Voici un exemple d'attribut pattern :

<input type="text" id="empID" name="EmployeeID" required pattern="[A-Z]{2}[0-9]{4}" title="ID d'employé commençant par deux lettres majuscules suivies de quatre chiffres">

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

Figure 3-19

Formulaire très simple


L'élément datalist vous permet de présenter à l'utilisateur une liste déroulante contenant des options à sélectionner. Seules les options de la liste peuvent être sélectionnées. Alternativement, vous pouvez insérer type="text" dans l'élément input pour créer une zone de texte dans laquelle l'utilisateur entre du texte. L'exemple suivant permet à l'utilisateur de choisir parmi l'un des trois pays :

<input id="country" name="country" size="30" list="countries" /> <datalist id="countries"> <option value="États-Unis"> <option value="Canada"> <option value="Royaume-Uni"> </datalist>

La valeur search de l'attribut type vous permet de créer une fonction de recherche pour une page Web. Voici un exemple de la balise :

<form> <input name="search" required> <input type="submit" value="Search"></form>

Enfin, l'attribut autofocus déplace le focus vers un champ d'entrée particulier lorsque la page Web est chargée. Comme exemple autofocus, donnez celui d'une page Web d'un moteur de recherche lorsque le point d'insertion se positionne automatiquement dans le champ d'entrée pour vous permettre d'entrer des termes de recherche sans devoir cliquer d'abord dans le champ. Voici un exemple de balise pour placer le focus sur un champ nommé fname quand une page se charge :

<input type="text" name="fname" autofocus="autofocus" />

autofocus a historiquement été gérée par JavaScript, et si un utilisateur désactive JavaScript dans un navigateur Web, la fonction autofocus ne fonctionne pas. Pour contourner ce problème, l'attribut autofocus HTML5 est pris en charge par tous les principaux navigateurs et se comporte de façon constante sur tous les sites Web.

CRÉER UN FORMULAIRE WEB SIMPLE

PRÉPAREZ-VOUS. Pour créer un formulaire Web simple, effectuez les opérations suiv-antes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, créez un simple formulaire Web avec la balise suivante :

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>Contactez-nous</title></head><body> <div id="contact-form">

<form id="contact" method="post" action=""> <fieldset>

<label for="custname">Nom</label> <input type="text" id="custname" />

80 | Leçon 3

<label for="email">Email</label> <input type="email" id="email" />

<label for="phone">Numéro de téléphone</label> <input type="text" id="phone" />

<label for="message">Questions ou commentaires</label> <textarea name="message"></textarea>

<input type="submit" name="submit" id="submit" value="Soumettre" />

</fieldset></form>

</div>

</body></html>

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

Figure 3-20

Début d'un formulaire Web

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


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

Figure 3-21

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

Figure 3-22

Formulaire Web avec des espaces réservés ajoutés pour chaque champ

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

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


Pour en savoir plus sur les attributs d'élément d'entrée de HTML5, visitez le site W3C.org Web sur http://bit.ly/I1PW3P.

Présentation de la validation

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

82 | Leçon 3

La validation désigne le processus qui permet de s'assurer que les informations saisies dans un formulaire Web sont dans un format correct et sont utilisables avant de trans-mettre les données au serveur. Parmi les éléments vérifiés lors de la validation on trouve :

• Leschampsobligatoiressontvides• Les adresses e-mail sont valides• Les dates sont valides• Le texte n'apparaît pas dans un champ numérique ou vice versa

Avec HTML 4.01 et les spécifications précédentes, vous aviez souvent besoin de beaucoup de JavaScript ou de script dans un autre langage pour créer des règles personnalisées de validité et des messages de réponse, ou pour déterminer si un élément n'est pas valide.En HTML5, plusieurs des types d'élément d'entrée présentés dans la dernière section offrent une validation automatique des entrées, ce qui signifie que le navigateur vérifie les données saisies par l'utilisateur. C'est ce que l'on appelle la validation côté client, car les données d'entrée sont validées avant d'être soumises au serveur. (Dans le cas où le serveur valide les données reçues d'un formulaire de saisie, on parle de validation côté serveur.) Si l’utilisateur entre un type de données incorrect dans un champ, par exemple une adresse e-mail dans un champ réservé à l’attribut url, le navigateur invite l’utilisateur à entrer une URL valide. Regardons des exemples des messages d'erreur par défaut qui sont générés lors de la validation automatique.L'attribut required évite le problème de champs vides alors qu'ils devraient être renseignés. Lorsqu'un utilisateur ignore un champ obligatoire et clique sur le bouton d'envoi, un message d'erreur s'affiche comme illustré dans la figure 3-23. Cet exemple utilise le navigateur Web Mozilla Firefox.

PRÊT POUR LA CERTIFICATIONComment HTML5 valide les données entrées dans un formulaire par un utilisateur ?2.5

Figure 3-23

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

HTML5 propose également la validation des adresses Web entrées dans des champs avec la construction <input type="url"> et des numéros entrés dans des champs avec la construction <input type="number">. Si vous utilisez les attributs min et max avec type = "number", vous recevrez un message d'erreur à partir du navigateur si vous entrez un nombre qui est trop petit ou trop grand.Enfin, l'attribut pattern empêche l'utilisateur d'entrer des données qui ne respectent pas l'expression pattern. Dans cet exemple, l'attribut pattern valide un code postal à cinq chiffres :

<input type= "text" name= "zipcode" pattern= "[0-9] {5}" title= "Code postal à cinq chiffres" />

Si les données du champ Code postal sont erronées dans les résultats de navigateur Firefox, un message d'erreur s'affiche comme indiqué dans la figure 3-24.


Comme indiqué précédemment, aucune balise n'est requise pour activer la validation des formulaires HTML5 : elle est activée par défaut. Pour la désactiver, utilisez l'attribut novalidate pour les champs de saisie spécifiques.

AJOUTER DES CHAMPS DE VALIDATION À UN FORMULAIRE WEB

PRÉPAREZ-VOUS. Pour ajouter des champs de validation à un formulaire Web, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application, ouvrez

L3-WebForm-placeholders.html. 2. Enregistrez le fichier sous le nom L3-WebForm-valid.html. 3. Ajoutez l'attribut required pour le champ email, comme suit :

<p> <label for="email">Email</label> < input type="email" name="email" required

placeholder="Adresse e-mail"> </p>

4. Ajoutez l'attribut pattern au champ Téléphone. L'expression doit restreindre l'entrée à l'indicatif régional et au numéro de téléphone, sous la forme XXX-XXX-XXXX, comme suit :

<p> <label for="phone">Numéro de téléphone</label> < input type="text" name="phone" pattern="[0-9]{3}-

[0-9]{3}-[0-9]{4}" placeholder="Numéro de téléphone"> </p>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Tapez le texte dans chaque champ d'entrée sauf le champ e-mail et cliquez sur le bouton Envoyer. Avez-vous reçu un message d'erreur qui vous invite à entrer une adresse e-mail ?

6. Tapez le texte dans chaque champ à nouveau, y compris le champ e-mail, mais cette fois entrez un numéro de téléphone sans l'indicatif régional, puis cliquez sur Envoyer. Avez-vous reçu une erreur concernant le champ numéro de téléphone ?

7. Fermez le fichier, l'outil d'édition ou l'outil de développement d'application et le navigateur Web.

Figure 3-24

Message d'erreur dans le navigateur de Firefox lorsque vous entrez un modèle incorrect

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

REMARQUE*



• HTML5 introduit plusieurs nouveaux éléments pour organiser le contenu et les formes. Ils représentent le nouveau balisage sémantique qui est une partie importante du HTML5.

• Le balisage sémantique utilise des noms de balises intuitifs, ce qui facilite la génération et la modification des documents HTML, et l'interprétation par les navigateurs Web et les autres programmes.

• 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. Ces éléments réduisent le nombre de balises div requises dans un document.

(suite)

84 | Leçon 3

• Les tableaux et les listes permettent de structurer des informations spécifiques dans les documents HTML. Un tableau contient des lignes et des colonnes et affiche les données dans une grille. En HTML, vous pouvez créer des listes triées et non triées. Chaque élément d'une liste triée est marqué par un nombre ou une lettre. Une liste non triée est une liste à puces.

• Les développeurs utilisent des formulaires Web comme interface pour collecter des informations sur le site Web et sur les utilisateurs de l'application cliente. Les éléments d'entrée HTML servent à créer l'interface d'un formulaire et à s'assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente.

• La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart des formulaires, requièrent des entrées spécifiquement mises en forme. Les nouveaux attributs d'entrée et de formulaire HTML5 sont intuitifs, faciles à utiliser et remplacent un grand nombre de scripts qui étaient obligatoires en HTML 4.01 et dans les versions antérieures.

• La validation vérifie que les informations entrées dans un champ de saisie d'un formulaire Web sont dans un format correct et utilisables avant d'envoyer les données au serveur.

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


Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Une HTML contient des lignes et des colonnes et sert à organiser et

afficher les informations sous forme de grille. 2. Class et ID sont des attributs , ce qui signifie qu'ils peuvent être

utilisés avec n'importe quel élément HTML. 3. Une liste classe par défaut les entrées de la liste à l'aide de nombres. 4. Une liste affiche les entrées sous forme de liste à puces. 5. L'élément HTML5 présente une liste (ou menu) de commandes,

généralement des boutons. 6. L' de formulaire correspond aux informations qu'un utilisateur saisit

dans les champs d'un formulaire Web ou d'une application client. 7. L'attribut rend obligatoire la saisie d’informations dans un champ

avant de soumettre le formulaire. 8. L' au texte s'affiche à l'intérieur d'un champ d'entrée lorsque le

champ est vide. Il permet aux utilisateurs de comprendre le type d'informations à entrer ou à sélectionner.

9. La désigne le processus qui permet de s'assurer que les informations saisies dans un formulaire Web sont dans un format correct et sont utilisables avant de transmettre les données au serveur.

10. L'attribut déplace le focus vers un champ d'entrée particulier lorsque la page Web est chargée.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Quel élément HTML5 définit les sous-sections d’un document, tels que les chapitres,

les parties d’une thèse ou parties d’une page Web dont le contenu est distinct ?a. asideb. sectionc. headerd. article



2. Quel élément HTML5 définit une partie d'un document HTML représentant une « composition autonome » indépendante du reste du contenu dans le document et qui peut être syndiqué ?a. asideb. sectionc. headerd. article

3. Quel élément HTML5 sert à afficher le contenu lié au sujet actuel, mais qui est susceptible d'interrompre le flux du document s'il demeure au sein du texte ?a. asideb. sectionc. headerd. article

4. Quel attribut HTML5 offre un format (expression régulière) pour un champ d'entrée qui est utilisé pour valider le contenu du champ ?a. patternb. autofocusc. requiredd. placeholder

5. Parmi les propositions suivantes, laquelle n’est pas prise en compte par la validation et ne génère pas de message d’erreur, par défaut, en cas d’erreur ?a. Les champs obligatoires sont vides.b. Les adresses e-mail sont valides.c. Le destinataire de l’adresse e-mail est incorrect.d. Un champ numérique contient du texte ou vice-versa.

6. Parmi les propositions suivantes, laquelle est une utilisation pratique d’un formulaire Web ?a. Recueillir les coordonnées d’un utilisateurb. Recueillir les commentaires des utilisateurs après la publication d’un article sur un

site Webc. a et bd. Ni a ni b

7. Parmi les attributs form suivants, lesquels sont nouveaux dans HTML5 ? (Choisissez toutes les réponses applicables.)a. autocompleteb. targetc. methodd. novalidate

8. Quelle syntaxe avec l’attribut pattern devez-vous utiliser pour entrer un code produit composé de trois chiffres, séparés par un tiret et suivis d’une seule lettre en minuscule ?a. [a-z]{1}-[0-9]{3}b. [0-9]{3}-[a-z]{1}c. [A-Z]{3}-[0-9]{1}d. [0-9]{1}-[a-z]{3}

9. Parmi les propositions suivantes, laquelle désigne l’affichage d’un mot clé ou d’un groupe de mots qui décrit la valeur attendue d’un champ d’entrée, et qui disparaît lorsque l’utilisateur renseigne le champ ?a. labelb. placeholderc. titled. email

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


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.


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 ?


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 ?

87

Présentation des notions essentielles sur les feuilles de style en cascade CSS : Flux de contenu, positionnement et style

L E Ç O N 4


à espacement fixe

cadre englobant

classe

CSS3

débordement de défilement

débordement masqué

débordement visible

déclaration

feuilles de style en cascade (CSS)

flux de bloc

flux inclus

police

positionnement absolu

positionnement flottant

propriété de la famille de polices

règles

sans serif

sélecteur


Compétences/Concepts MTAObjectifdel'examen MTANumérodel'objectif del'examen

Présentation des notions Comprendre les principes de 3.1 essentielles sur les feuilles base des feuilles de style CSS de style en cascade CSS

Un concepteur de votre société, Malted Milk Media, a réalisé une simulation de la conception d'une application en ligne pour un nouveau client, Trusty Lawn Care, Inc. Vous avez été invité à travailler sur le projet et vous avez besoin de comprendre ce que CSS peut faire pour vous et comment en tirer le meilleur parti.

■ Présentation des notions essentielles sur les feuilles de style en cascade CSS

CSS est un outil essentiel pour la réalisation d'une grande partie de l'apparence et même du comportement des applications mobiles modernes ainsi que des sites Web. Pour créer la partie « frontale » d'une application ou d'un site Web et surtout conserver son aspect correct et « frais » au fur et à mesure que des modifications fonctionnelles sont apportées à l'application ou au site Web pendant sa durée de vie, vous devez bien comprendre CSS et comment il fonctionne conjointement avec d'autres outils dont HTML et JavaScript. Vous serez également beaucoup plus à l’aise pour estimer l’effort requis pour certains projets lorsque vous aurez assimilé les concepts de « style » de l'interface utilisateur comme CSS les utilise.

L'ESSENTIEL

88 | Leçon 4

Prenons l'exemple du site Web de Trusty Lawn Care. Les mots « Trusty Lawn Care » se trouvent dans la partie supérieure : il s’agit d'un titre ou d'un en-tête. L'aspect détaillé de cet en-tête peut faire apparaître différentes lettres en italique, en gras ou même en couleur ; les lettres auront une taille particulière et seront choisies à partir d'une police spécifique. Les développeurs Web expérimentés disposent également de nombreux effets spéciaux plus subtils. Tous ces éléments de présentation, par opposition au contenu, font partie du style du site Web. Les feuilles de style en cascade (CSS) sont un langage qui définit le style des éléments HTML.Que signifie « en cascade » ici ? Un des principes originaux de HTML est que l'apparence d'un élément est contrôlée non seulement par CSS, mais aussi par la façon dont l'utilisateur configure son navigateur ou ordinateur de bureau. Par exemple, un utilisateur final malvoyant peut demander que le contenu soit affiché dans une taille de police particulièrement grande. Dans la théorie HTML, la définition de l'apparence se répartit entre ces différentes feuilles de styles.

PRÊT POUR LA CERTIFICATIONQuel est l'objectif de CSS ?3.1

Vous pouvez créer des fichiers CSS entièrement à partir d'un simple éditeur de texte tel que le Bloc-notes. Cependant, de nombreux éditeurs HTML et outils de développement d'applications fournissent une fonctionnalité de débogage qui vous permet de détecter rapidement des erreurs dans le code et le balisage. Ces outils comprennent généralement aussi un bouton pour ouvrir un navigateur Web, plutôt que d'avoir à le faire manuellement.

Utilisation des outils appropriés

Il est courant pour les concepteurs Web d'appeler feuille de style ou « CSS » le fichier qui contient des règles CSS. Certains codeurs de style et de nombreux programmeurs disent « source CSS » ou « fichier CSS » pour désigner la même chose.

REMARQUE*

Comme vous l'avez appris dans les leçons précédentes, HTML structure le contenu et CSS le formate. CSS3 est la version de CSS qui correspond à HTML5 et les navigateurs Web les plus modernes prennent en charge CSS3. La base très intéressante de ce manuel est que les outils modernes s'appuient sur les mêmes normes pour construire des applications mobiles : HTML, CSS et JavaScript vous permettent également de créer des applications.Le bon point à propos de CSS3 est qu'il est rétro-compatible avec les versions précédentes de CSS, donc vous pouvez commencer à utiliser CSS3 avec vos pages Web existantes sans avoir à changer quoi que ce soit. CSS3 ajoute généralement des caractéristiques et des fonctionnalités au lieu de modifier la façon dont CSS a toujours été utilisé.Certains des ajouts importants à CSS3 sont les sélecteurs, le modèle de boîte, les transformations 2D et 3D, les animations et la disposition sur plusieurs colonnes. CSS3 vous permet également de créer des bordures arrondies, d'ajouter des ombres aux boîtes et au texte, d'utiliser plusieurs images dans un arrière-plan et d'employer la police de votre choix, qu'elle se trouve sur l'ordinateur de l'utilisateur ou non.Ces sujets sont abordés dans cette leçon ou les leçons 5 et 6 de ce manuel. Tout comme HTML5, CSS3 est encore en cours d'élaboration au moment de la rédaction de ce document. Cependant, parce que la plupart des navigateurs prennent déjà en charge de CSS3, de nombreux développeurs intègrent déjà CSS3 dans leurs sites Web et applications.

Lorsque vous commencez à utiliser CSS, décidez de quels outils d'édition vous avez besoin : vous pouvez utiliser le balisage et le code source à l'aide de n'importe quel programme, du Bloc-notes intégré à Windows à un environnement de développement intégré (IDE) spécifique à un environnement mobile particulier. Tout comme lorsque vous utilisez HTML, vous aurez au moins deux applications ouvertes en même temps :• Unéditeur(ouvertavecunesourceCSSetundocumentHTML),quipourraitêtrele

Bloc-notes Microsoft Visual Studio, Microsoft Expression Blend, Expression Studio, Bloc-notes ++ pour Windows ou textwrangler pour Mac OS, Microsoft Web Matrix ou un certain nombre d'autres outils.

• UnnavigateurWeb,commeInternetExplorer9,Firefox, etc.

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

Vous pouvez utiliser tous les outils avec lesquels vous êtes à l'aise, mais le Bloc-notes a ses limites et n'a pas été conçu comme un éditeur complet. De nombreux éditeurs HTML et les outils de développement d'applications incluent des fonctionnalités qui font gagner du temps comme le débogage, les numéros de ligne et un bouton pour ouvrir un navigateur Web.

XREF

Dans la leçon 2, vous avez appris les bases de la modification de code source HTML et l'affichage du résultat. Utilisez les mêmes compétences pour travailler avec CSS.

L'élément <link> lie un fichier HTML à un fichier CSS. Cette section explique brièvement les concepts fondamentaux de l'application de style avec CSS et comment les fichiers HTML et CSS sont liés.

Exploration du lien entre HTML et CSS

Lorsque vous créez une page HTML et que vous souhaitez extraire des styles à partir d'un fichier CSS, vous devez inclure un élément <link> dans le fichier CSS dans la page HTML. (Vous pouvez référencer plusieurs fichiers CSS dans une page HTML.) Voici un exemple de syntaxe correcte pour un <link> :

<link href = "nomdefichier.css" rel = "stylesheet" type = "text/css">

Un fichier HTML peut avoir un nom comme monprojet.html ou fichier1.htm ; un nom de fichier CSS typique est monprojet.css. L'aspect de leur contenu est aussi très différent : la source HTML est organisée autour de balises, tandis que, comme vous le verrez ci-dessous, le CSS est une séquence de règles.Les organisations commerciales utilisent souvent des systèmes de fichiers spécifiques. Par exemple, vous pourriez développer une source CSS qui répond à des exigences spécifiques. Au cours du développement, vous faites référence à votre travail en tant que ... href = "mytheme.css" ... Toutefois, l'équipe plus large peut ne pas indiquer clairement qu'elle part du principe qu'elle attend une référence comme ... href = "styles/mytheme.css" ...

Il est important de reconnaître que si vous orthographiez mal le nom du fichier CSS, ou “stylesheet" ou “text/css” dans le balisage HTML de la page, la page Web résultante n'applique aucun style du fichier CSS. La page HTML traite le lien à CSS comme étant simplement manquant. Le comportement par défaut de tous les principaux navigateurs Web consiste à ne pas signaler ou avertir des fautes d'orthographe.

UNE UTILISATION SIMPLE DE CSS AVEC HTML

PRÉPAREZ-VOUS. Il existe plusieurs façons d'appliquer un style à une page HTML avec les styles CSS. Voici une méthode de base pour commencer : 1. Utilisez un éditeur de texte ou un outil de développement d'applications pour créer un

fichier dans votre répertoire appelé e1.html avec le contenu suivant :

<!doctype html><html> <head> <title>Trusty Lawn Care, Inc.</title> <link href = "e1.css" rel = "stylesheet" type = "text/css"> </head><body> <h1>Trusty Lawn Care, Inc.</h1> <p id = "slogan">Nous vous permettons de rester vert.</p> <p>Trusty Lawn Care peut permettre à votre pelouse de conserver un aspect luxuriant et

vigoureux toute l'année. Nous utilisons uniquement des engrais, paillis et terreaux naturels pour améliorer la santé de votre pelouse.</p>

</body></html>

PRÊT POUR LA CERTIFICATIONComment créer du contenu à l'aide de HTML et lui appliquer un style avec CSS ?3.1

90 | Leçon 4

2. Créez un second fichier dans le même dossier que la source .html ; nommez-le e1.css et utilisez le contenu suivant :

#slogan { font-size: 20px; color: green; font-style: italic;}

3. Ouvrez le fichier e1.html dans un navigateur Web. La page doit se présenter comme dans la figure 4-1.

Dans cet exemple, le fichier HTML (e1.html) définit le contenu et la structure : il contient contient les mots « Trusty Lawn Care, Inc. », il identifie cinq mots comme faisant partie d'un slogan et ainsi de suite. Le fichier CSS (e1.css) fournit le style de ce contenu. Pour que certains caractères s'affichent en vert, le fichier CSS n'utilise pas de peinture verte ou de lumière verte, mais plutôt le mot « green » pour indiquer au navigateur quelle couleur utiliser pour le slogan. Les fichiers sont liés à l'aide de l'élément <link> du fichier HTML.

Figure 4-1

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

Nous allons essayer de créer une page Web et un fichier CSS, puis de modifier le fichier CSS pour voir comment les modifications affectent la page Web. Vous serez en mesure de comprendre par vous-même comment HTML et CSS travaillent ensemble pour produire des écrans dans votre navigateur Web ou une application mobile.

CRÉATION D'UNE PAGE WEB ET D'UN FICHIER CSS DE BASE

PRÉPAREZ-VOUS. Pour explorer le style CSS de base, procédez comme suit : 1. Créez une page Web nommée e1.html et un fichier CSS nommé e1.css à l'aide de la

balise indiquée précédemment. 2. Pointez votre navigateur Web sur e1.html pour afficher la page rendue. 3. Modifiez e1.css pour que le slogan s'affiche dans une police plus grande, telle que

25px. Modifiez la couleur en remplaçant « green » par #00CC00. Modifiez le style en remplaçant italic par bold. Après avoir apporté chaque modification, confirmez que l'affichage correspondant est mis à jour comme vous le souhaitez. Votre page Web finale doit ressembler à la figure 4-2.

Vous pouvez spécifier la couleur à l'aide d'un nom ou d'une valeur hexadécimale. Par exemple, pour utiliser la couleur bleue standard, le nom de la couleur est « blue » et la valeurhexadécimaleest#0000FF.Vouspouvezconsulterunelistedesnomsdecouleuret de leurs valeurs à l'adresse http://www.w3schools.com/cssref/css_colornames.asp.

REMARQUE*

PRÊT POUR LA CERTIFICATIONQuels sont les principes essentiels de l'application de style CSS ?3.1


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

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

Dans des documents HTML, il est courant de conserver les fichiers HTML qui incluent le contenu et de faire simplement référence à un fichier CSS distinct qui contient le code pour affecter un style au contenu dans les fichiers HTML. Cela vous permet de modifier les styles dans un seul fichier (le fichier CSS) et de voir ces modifications de style apportées dans tous les fichiers HTML automatiquement. Lorsque vous travaillez sur un petit fichier HTML autonome dans lequel les styles ne vont probablement pas changer, il est acceptable d'ajouter le code de style CSS dans le fichier HTML lui-même.

Séparation du contenu et du style

Figure 4-2

La page Web de Trusty Lawn Care modifiée

Vous pouvez créer des pages HTML « pures », c'est-à-dire avec un seul fichier source HTML et aucun fichier CSS. HTML a la possibilité de spécifier la mise en italique, la couleur, etc. Parfois, les sites Web simples n'emploient pas CSS ou ils l'utilisent dans une syntaxe inline.

Même quelque chose d'aussi simple qu'un bloc de texte de couleur verte peut s'obtenir de plusieurs manières différentes. Les manuels et références basculent souvent entre ces différents styles avec peu d'explications. Vous pouvez voir “<div style = ‘color:green’ …” en HTML, ou “div {color:green …” en CSS, ou “<style …> div {color:green …</style>” en HTML, ou même des combinaisons plus inhabituelles. Le premier s'appelle souvent « inclus », pour souligner que la spécification CSS apparaît dans les mêmes expressions HTML qui définissent la structure et le contenu.

REMARQUE*

Cependant, la séparation des contenus HTML et CSS dans des fichiers différents est elle-même un concept fondamental, que vous devez comprendre. La « séparation du contenu et du style » est une phrase souvent répétée par ceux qui travaillent sur les sites Web et applications mobiles. Le contenu est géré en tant que HTML et le style en tant que CSS. Cette division du travail reflète souvent l'organisation des équipes de projet : des personnes différentes sont responsables du contenu et du style. La séparation du HTML et CSS permet à deux personnes de travailler simultanément sans interférer l'une avec l'autre.

En outre, la séparation du contenu et de la présentation vous aide à mieux respecter HTML5, qui devient la nouvelle norme pour les pages et les applications Web.

PRÊT POUR LA CERTIFICATIONComment les sites Web gèrent-ils le « contenu » et le « style » ?3.1

92 | Leçon 4

Cette leçon présente les correspondances entre CSS et une page Web. N'oubliez pas que la page Web dépend d'une configuration plus grande, qui inclut en général au moins un fichier HTML et un navigateur. Ne pensez pas que vous pouvez apprendre CSS dans un isolement complet par rapport aux autres parties. Une seconde correspondance concerne CSS et l'affichage d'une application mobile particulière développée avec ce CSS. Même si votre but lorsque vous découvrez et utilisez CSS peut être de développer des applications, toutes les instructions de ce chapitre parlent de pages Web. Les outils pour applications mobiles évoluent rapidement et ne sont pas aussi normalisés que le navigateur Web Internet Explorer (IE). Par conséquent, tous les exemples serontaffichésaveclaversion9d'IE.ToutcequevousapprenezsurCSSs'appliqueégalement à la programmation des applications.

REMARQUE*

Une fois que vous êtes à l'aise avec ces bases, vous êtes en mesure d'étudier les fichiers source CSS de façon plus approfondie. En général, un fichier CSS contient une séquence de spécifications de style ou règles et peut inclure une règle @import initiale. L'ordre des règles sera important dans les leçons ultérieures.

Présentation des sélecteurs et des déclarations

Chaque règle individuelle comprend deux parties principales : un sélecteur et une ou plusieurs déclarations. Le sélecteur est habituellement l'élément HTML auquel vous voulez appliquer un style. La déclaration est le style d’un sélecteur spécifique. Une déclaration possède une propriété, c'est-à-dire un attribut de style et une valeur. La syntaxe générale d'une déclaration se compose d'un mot-clé de propriété suivi d'un signe deux-points et un espace, puis une valeur suivie d'un point-virgule terminateur. Une déclaration est entre des accolades. Ces concepts sont illustrés à la figure 4-3.

Figure 4-3

Description d'un sélecteur et d'une déclaration

Prenons l'exemple suivant :

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

Le contenu entre / * et * / dans un fichier CSS s'appelle un commentaire. C'est une note insérée par le développeur à titre informatif seulement et elle n'affecte pas le CSS ou la page Web. Les commentaires peuvent figurer n'importe où dans une feuille de style.

REMARQUE*

Cet exemple contient deux règles, une pour « p » et une pour #slogan. La première règle qui s'applique à tout le contenu au sein de toutes les balises de paragraphe (ou type) <p> sur la page Web. La seconde règle s'applique uniquement à l'élément HTML unique avec l'ID « slogan ». La partie sélecteur d'une règle peut être assez compliquée ; pour l'instant, considérez les sélecteurs comme l'un des trois éléments suivants :• BalisesHTML,comme<p> ci-dessus. Les règles CSS sélectionnent également

souvent des balises telles que <h...>, <table>, <a>, etc.• Sélecteursd'ID,telsque#slogan ci-dessus. Pour ces derniers, le symbole # est un

préfixe qui détermine que la sélection se fait par ID.• Sélecteursdeclasse,comme l'exemple qui suit.


Notez que l'ID doit être unique dans une instance particulière de HTML. Toutefois, plusieurs éléments peuvent partager une classe. Une classe est un attribut utilisé par un auteur de sites Web pour structurer un document au-delà du cadre HTML avec des éléments, tels que le paragraphe, l’en-tête, etc. Nous pourrions choisir d'affecter l'étiquette « opinion » à certains contenus d'une page et « fait » à d'autres. Ces sortes de catégories sont idéalement mises en œuvre en tant que classes, parce que CSS peut gérer le contenu en termes de ses définitions de classes. Le balisage suivant illustre l'utilisation d'une classe.Voici le contenu d'un fichier HTML, nommé e2.html :

<!doctype html><html> <head> <title>Un exemple de classe</title> <link href = "e2.css" rel = "stylesheet" type = "text/css"> </head><body> <h1>À propos des États</h1> <p class = "fact">L'Alaska est le plus grand État des États-Unis

dans la région.</p> <p class = "opinion">Le New Jersey mérite son

surnom « État-jardin ».</p> <p class = "fact">Un seul membre du Congrès représente le

Wyoming à la Chambre nationale des représentants.</p>

</body></html>

Voici le contenu du fichier CSS associé, nommé e2.css :p {color: black;}/* Le préfixe pour un sélecteur de classe est un point : '.' */.opinion {color: gray;}

Avec ces deux fichiers en place, l'ouverture d'e2.html produit un affichage qui ressemble à la figure 4-4.

Figure 4-4

Utilisation d'un sélecteur de classe pour spécifier la couleur d'un paragraphe

Comment se souvenir de la syntaxe de différents sélecteurs ? Voici un moyen mnémotechnique qui fonctionne pour certains : le préfixe pour une classe est un point parce qu'à l'école on donne des bons points en classe. Le préfixe d'un ID est un « # », parfois appelé le « signe dièse ». Un ID courant est votre numéro de sécurité sociale, numéro, ID.s

REMARQUE*

94 | Leçon 4

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

REMARQUE*

La typographie concerne l'apparence des lettres, chiffres et autres caractères. La typographie est un sujet vaste et complexe, bien au-delà de la portée de cette leçon. Toutefois, il est important de connaître certains termes de ce domaine.

Présentation des polices et des familles de polices

Une police est un ensemble de caractères d’une taille et d’un style particuliers. Les graphistes ont souvent de fortes convictions sur la lisibilité et l'attrait visuel des différentes polices de caractères, et vous pouvez être invité à organiser un affichage ou des parties d'un affichage dans des polices spécifiques ou qui ont des caractéristiques particulières. Les polices à espacement fixe sont souvent utilisées pour la documentation technique, comme les formules, les nombres, les codes, etc. Les empattements sont les détails situés à l’extrémité de certaines lettres. Examinez de près les lettres « d », « p » et « t » dans cette phrase qui illustre les caractères serif. Les polices Sans serif sont simplement des styles de type dessinés sans empattement, comme la police Arial. Voir les exemples dans la figure 4-5.

Figure 4-5

Exemples d'une police serif et d'une police sans serif

Le principal moyen pour spécifier les polices dans un fichier CSS est d'utiliser la propriété font-family. La propriété font-family peut déclarer une police spécifique, telle que Garamond ou Arial ou une famille plus large qui inclut de nombreuses polices différentes, telles que « serif ». En particulier, lors du développement pour des combinés téléphoniques mobiles, il est plus sûr de spécifier une famille élargie, telle que à espacement fixe ou sans serif, parce qu'il est difficile de prédire quelles polices particulières seront disponibles sur un combiné particulier. Par exemple, quand vous incluez font-family: monospace dans un fichier CSS, vous indiquez au navigateur de choisir des caractères dans lesquels chaque lettre occupe la même largeur sur une ligne, que la lettre elle-même soit aussi large que « m » ou aussi étroite que « i ». Vous ne spécifiez pas une police à espacement fixe spécifique ; vous spécifiez seulement la famille de polices à espacement fixe.

EXPÉRIENCES AVEC LES FAMILLES DE POLICES

PRÉPAREZ-VOUS. Pour comprendre les bases du contrôle des polices, procédez comme suit : 1. Ouvrez les fichiers e1.html et e1.css à partir de l'exercice précédent dans votre outil

d'édition. Enregistrez-les sous e3.html ete3.css, respectivement. 2. Remplacez e1.css par e3.cssdans l'élément de lien du fichier e3.html, puis enregistrez

le fichier. 3. Dans e3.css, ajoutez une nouvelle règle pour #slogan qui indique font-family: monospace.

p {color: brown;}#slogan { font-family: monospace; font-size:20px; color: green; font-style: italic;}

4. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-6.


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

6. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-7.

Figure 4-6

Application de la famille de polices à espacement fixe

Figure 4-7

Application de la famille de polices sans serif

7. Remplacez la règle par font-family: Garamond; enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-8.

Figure 4-8

Application d'une police spécifique à l'élément de slogan

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

96 | Leçon 4

Avant CSS3, les développeurs devaient utiliser des polices Web-safe et/ou les polices dont le développeur savait qu'elles avaient été installées sur le système du visiteur d'une page Web. La liste des polices Web-safe est relativement courte et n'offre pas beaucoup de variété. Utiliser autre chose que les polices Web-safe revient généralement à créer des images pour les titres et en-têtes et à utiliser d'autres solutions de contournement.CSS3 fournit la règle @font-face, qui permet aux développeurs d'utiliser n'importe quelle police de leur choix. Pour ce faire, vous créez tout d'abord une règle font-face en affectant un nom à la police. La police doit se trouver sur votre serveur Web, ou vous pouvez inclure une URL vers son emplacement, s'il se trouve sur un autre serveur Web. Voici un exemple d'une règle pour une police nommée Euphemia qui se trouve sur votre propre serveur Web :

@font-face{font-family: TrustyHomePage;src: url('Euphemia.ttf'),}

Tout comme avec des images, vous (ou un client pour lequel vous travaillez) devez posséder une copie légale de la police à utiliser dans les pages Web créées.


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

Vous pouvez gérer le flux de contenu dans un document HTML à l'aide des propriétés de flux inclus et de flux de bloc de CSS.

Gestion du flux de contenu

Le « flux » ou style d'affichage est un concept fondamental de HTML. Cela concerne le remplissage des lignes horizontales de gauche à droite à travers l'affichage et la séparation des lignes de haut en bas au fur et à mesure que l'on fait défiler l'affichage vers le bas.

Ces deux solutions permettent l'affichage d'un élément visuel :

• Fluxinclus:remplitseulementlalargeurnécessaire• Fluxdebloc:remplittoutelalargeurdisponible

Le contrôle de la géométrie de votre interface utilisateur et en particulier de l'étendue horizontale de l'écran, est important. Il est tout aussi important de comprendre le flux. Quelques exemples seront utiles.

Le flux inclus « tient ». Il ne crée pas de ligne avant ou après l'élément inline, mais place simplement l'élément entre le contenu avant et après l'élément inline.

Observez ce paragraphe :

Il s'agit d'un paragraphe dans lequel un mot apparaît en gras et un autre en italique.

Dans un codage HTML classique, les mots « en gras » et « en italique » apparaissent respectivement comme des éléments <b> et <i>. Ces éléments sont inclus : ils occupent seulement autant d'espace que nécessaire dans les lignes de texte et ils ne sont pas déplacés de force vers de nouvelles lignes.

Avec le flux de bloc, contrairement au flux inclus, un élément est séparé des autres éléments par de nouvelles lignes au-dessus et au-dessous, et remplit de gauche à droite l’étendue horizontale où il apparaît.

PRÊT POUR LA CERTIFICATIONComment les sites Web gèrent-ils le flux de contenu ?3.1

PRÊT POUR LA CERTIFICATIONQuelle est la différence entre flux inclus et flux de bloc ?3 .1


Le paragraphe que vous lisez maintenant est lui-même un élément de flux de bloc : au-dessus et en dessous se trouvent de nouvelles lignes et le paragraphe remplit son étendue de gauche à droite.

Vous contrôlez le flux d'affichage. Par exemple, par défaut les éléments de liste sont dans un flux de bloc. Avec CSS, cependant, vous pouvez les « inclure » pour obtenir une apparence différente et distinctive. Alors qu'ils restent des éléments de liste, avec les autres attributs habituels et le comportement de l'élément de liste, un changement dans le style d'affichage leur permet de s'afficher l'un après l'autre dans une séquence horizontale, de gauche à droite.

Démarrez votre éditeur. Il est temps d'essayer quelques petits segments de CSS pour vous-même.

Le début de cette leçon expliquait en détails comment les fichiers HTML et CSS fonctionnent ensemble pour obtenir des effets de conception. Pour le prochain exemple et les exemples suivants, cependant, le style CSS est réduit dans le fichier source HTML. HTML reconnaît l'élément <style>, ce qui rend cela possible. Lorsque l'on découvre les attributs CSS, il est généralement beaucoup, beaucoup plus commode de travailler dans un fichier source unique, donc toutes les sections de la leçon sauf les plus simples sont mises en œuvre dans une seule source HTML. N'oubliez pas que la plupart des travaux commerciaux seront structurés en termes de sources HTML et CSS distinctes.

REMARQUE*

EXPLORATION DU FLUX INCLUS ET DU FLUX DE BLOC

PRÉPAREZ-VOUS. Pour explorer le flux inclus et le flux de bloc, procédez comme suit :

1. Créez le fichier e4.html avec le contenu suivant :

<!doctype html><html> <head> <title>Flux de bloc et inclus</title> <link href = "e4.css" rel = "stylesheet" type = "text/css"><style type = 'text/css'> .toolbar li { }</style> </head><body><h1>Flux de bloc et inclus</h1>

<p>Voici les éléments que vous pouvez choisir :</p><ul class = "toolbar"> <li>Automobile</li> <li>Vélo</li> <li>Scooter</li> <li>Taxi</li> <li>À pied</li></ul></body></html>

98 | Leçon 4

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

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

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

Figure 4-10

Apparence des éléments de liste auxquels un nouveau style a été appliqué à l'aide du flux inclus


Pour en savoir plus sur la propriété CSS display et la gestion du flux de contenu, visitez la page Web sur la propriété CSS display de W3schools.com, à l'adresse http://www.w3schools.com/cssref/pr_class_display.asp.

Figure 4-9

Apparence par défaut des éléments de liste

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

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


HTML et CSS prennent un charge un certain nombre de façons de spécifier où les différents éléments HTML apparaissent dans un affichage. Les deux plus importantes pour notre but sont le positionnement flottant et le positionnement absolu.

Positionnement des éléments individuels

La méthode de positionnement par défaut pour tous les éléments est « statique », c'est-à-dire immédiatement après l'élément précédent du document. Pour placer un élément dans une autre position, utilisez CSS pour remplacer la valeur par défaut par float ou absolute.

APPLICATION DU POSITIONNEMENT FLOTTANTLe positionnement flottant est souvent utile pour une disposition en colonnes, au moins en partie. Appliquer à un élément un positionnement flottant revient à le laisser se déplacer aussi loin que possible vers la droite ou vers la gauche ; le texte « enveloppe » alors l’élément.

Les colonnes simples sont construites en faisant flotter plusieurs éléments différents tour à tour. Supposons que vous avez besoin de produire quatre colonnes de contenu textuel. Affectez un style à chacun des éléments de contenu devant apparaître dans les colonnes successives comme élément flottant positionné. Chaque élément « flotte » vers le côté mais est séparé de celui qui le précède ou le suit. Notez que dans ce type de colonne, le texte qui déborde du bas d'une colonne ne s'étend pas jusqu'en haut de la suivante.

UTILISATION DU POSITIONNEMENT FLOTTANT AVEC PLUSIEURS COLONNES

PRÉPAREZ-VOUS. Pour appliquer un positionnement flottant à plusieurs colonnes, procédez comme suit : 1. Créez le fichier e5.html avec le contenu suivant :

<!doctype html><html><head><title>Positionnement flottant</title><style type = 'text/css'>#col1 { float: left; width: 150px; background-color: lightskyblue;}#col2 { float: left; width: 120px; background-color: yellow;}

</style></head><body><h1>Positionnement flottant</h1><p id = "col1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultricesviverra velit.

<p id = "col2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

PRÊT POUR LA CERTIFICATIONComment les éléments individuels sont-ils placés sur une page HTML en utilisant CSS ?3 .1

PRÊT POUR LA CERTIFICATIONComment utilise-t-on le positionnement flottant ?3 .1

XREF

La gestion du flux de contenu et l'utilisation des colonnes pour une meilleure lisibilité sont abordées en détail dans la leçon 6.

100 | Leçon 4

2. Affichez e5.html, comme illustré dans la figure 4-11. Notez comment le contenu s'affiche dans les colonnes, indiqué par les couleurs de l'arrière-plan qui apparaissent derrière le texte.

3. Dans le navigateur, col1 et col2 s’affichent sous forme de deux colonnes de largeur fixe et col3 remplit tout l'espace restant. Si vous modifiez les deux attributs CSS float de gauche à droite, quelle est l'apparence de l'affichage ?

4. Apportez la modification. 5. Est-ce correct ? L'affichage de la source HTML mise à jour a-t-il l'aspect attendu ? 6. Fermez le fichier e5.html. Laissez l'outil d'édition et le navigateur Web ouverts si vous

passez immédiatement à la section suivante.

APPLICATION DU POSITIONNEMENT ABSOLUAvec le positionnement absolu, un élément est supprimé de sa position dans le corps d'un document et placé dans une position géométrique dans l'afficheur. Ici, « position géométrique » signifie un emplacement à une distance définie des deux côtés de l'écran, le haut et les côtés droits, par exemple.

Figure 4-11

Plusieurs colonnes avec l'attribut float appliqué

Cette section et la suivante ne présentent pas toujours l'intégralité du balisage HTML et CSS, mais seulement les lignes essentielles. Ce genre d'abréviation est commun dans les documents de référence et la communication quotidienne entre développeurs. Vous devrez incorporer une telle ligne dans le fichier source plus grand dans la position cor-recte. Cette leçon équivaut à une leçon de nettoyage des bougies d'une automobile, qui suppose que vous savez déjà comment démarrer le moteur, ouvrir le capot, tenir une clé, et ainsi de suite.

REMARQUE*

Le texte « Lorem ipsum » est appelé remplissage ou texte factice, couramment utilisé dans le milieu de la conception. Même s'il ressemble à du latin, il n'a en fait aucun sens. Il s'agit juste de texte standard qui ressemble à du contenu dans sa séquence et la fréquence des caractères. Il est facile de générer du texte factice dans Word, par exemple, en tapant =lorem() dans un document vierge et en appuyant sur la touche Entrée.

REMARQUE*

<p id = "col3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

</body></html>


UTILISATION DU POSITIONNEMENT ABSOLU AVEC PLUSIEURS COLONNES

PRÉPAREZ-VOUS. Pour appliquer un positionnement absolu à plusieurs colonnes, procédez comme suit : 1. Créez un fichier e6.html en ouvrant e5.html et en enregistrant une copie sous e6.html. 2. Remplacez le commentaire du début par :



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

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

</style>

3. Dans l'élément body, remplacez l'en-tête <h1> par :

<h1>Positionnement absolu</h1>

4. Affichez e6.html, comme illustré dans la figure 4-12. Dans cet exemple, les paragraphes col2 (arrière-plan jaune) et col3 (sans arrière-plan en couleur) s'affichent de façon « normale » près du haut de l'affichage. Toutefois, Col1, se termine à une position verrouillée en bas à gauche de la fenêtre affichée.

5. Redimensionnez la fenêtre et observez comment les trois différents paragraphes s'ajustent.

6. Fermez le fichier e6.html. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

En général, le positionnement absolu n'a pas été utilisé autant que le positionnement flottant dans travail Web. Toutefois, les applications mobiles ont souvent une fenêtre d'affichage de taille connue, définie et relativement petite. Pour les applications mobiles, contrairement à la majorité des applications Web, il est relativement courant d'utiliser le positionnement absolu.

Figure 4-12

Plusieurs colonnes avec l'attribut absolute appliqué

102 | Leçon 4

Un autre concept essentiel dans la conception HTML est le cadre englobant. Cette section explique le débordement par rapport aux cadres englobants.

Gestion du débordement de contenu

Lorsque vous affichez des lettres et des caractères sur une page, considérez-les comme des marques plutôt que des lettres. Chaque élément HTML occupe un rectangle. Le mot « rectangle », par exemple, n'est pas particulièrement rectangulaire : le « t » et le « l » dépassent au-dessus et le « g » pend au-dessous. Cependant, pour les besoins de la disposition HTML, le mot « rectangle » tient dans un petit rectangle (ou cadre englobant) qui comprend toutes les lettres du mot ainsi que leur arrière-plan, comme illustré à la figure 4-13. Le style CSS est exprimé dans les termes de ce cadre.

PRÊT POUR LA CERTIFICATIONQuelle propriété CSS contrôle le débordement de contenu ?3 .1

PRÊT POUR LA CERTIFICATIONQuelle valeur de propriété CSS overflow empêche le débordement de défilement ?3 .1

Figure 4-13

Exemple de cadre englobant

En particulier, CSS permet de limiter la largeur d'un élément. Que se passe-t-il si l'élément ne tient pas dans l'espace que CSS définit pour lui ? La règle overflow de CSS contrôle cela.

PRÉSENTATION DU DÉBORDEMENT DE DÉFILEMENTLorsqu'un élément déborde de son cadre et que sa propriété overflow est définie avec l'attribut scroll, tout le contenu de l'élément reste à l'intérieur de la boîte. Rien n'en dépasse. On parle de débordement de défilement.

Le contenu doit rester à l'intérieur de la boîte, mais il ne tient pas. Comment résoudre un tel conflit ? Prétendez que la boîte se dirige vers le bas dans une zone plus vaste, et que l'observateur peut se déplacer dans cette zone plus vaste en déplaçant les barres de défilement. Cela permet à l'observateur d'atteindre tout le contenu. Vous pouvez le faire en utilisant la valeur scroll avec la propriété overflow.

Découvrez cela par vous-même avec l'expérience suivante. Utilisez votre éditeur pour découvrir le puissant mécanisme de défilement.

UTILISATION DU DÉBORDEMENT DE DÉFILEMENT

PRÉPAREZ-VOUS. Pour vous entraîner à utiliser le débordement de défilement, procédez comme suit : 1. Créez un fichier e7.html avec le contenu suivant :

<!doctype html><html><head><title>Débordement de défilement</title><style type = "text/css">#col1 {width: 200px;height: 200px;background-color: lightskyblue;overflow: scroll;}

✚ PLUS D’INFORMATIONSPour en savoir plus sur le positionnement flottant CSS, allez à l'adresse http://www.w3schools.com/css/css_float.asp. Vous pouvez obtenir plus d'informations sur la propriété CSS position aux adresses http://www.w3schools.com/css/css_positioning.asp et http://www.w3schools.com/cssref/pr_class_position.asp.


#col3 {background-color: yellow;}

</style></head><body><h1>Débordement de défilement</h1>

<p id = 'col1'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

</p><p id = 'col2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit

amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p><p id = 'col3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit

amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p></body></html>

2. Cette source est rendue sous forme d'un affichage semblable à la figure 4-14.

3. Faites des expériences avec la source pour voir comment HTML est rendu dans différentes circonstances. Par exemple, que se passe-t-il avec une largeur de 400 px ?

Figure 4-14

Affichage des barres de défilement créées en tant que contrôles de débordement.

104 | Leçon 4

4. Quel est l'aspect de l'affichage lorsque vous supprimez la moitié du texte de col1 de e7.html ?

5. N'enregistrez pas les modifications que vous avez apportées à e7.html. Ne fermez pas le navigateur Web et laissez le fichier e7.html ouvert dans l'outil d'édition si vous passez immédiatement à la section suivante.

PRÉSENTATION DU DÉBORDEMENT VISIBLE ET DU DÉBORDEMENT MASQUÉLe débordement visible recouvre le contenu qui le suit. Le débordement masqué rend le débordement invisible.

Pensez à nouveau au cas que la section précédente présentait : votre affichage affecte une zone fixe à un élément de contenu particulier, mais le contenu est si long qu'il ne tient pas dans l'espace qui lui est affecté. La dernière section démontrait comment les barres de défilement permettent à l'utilisateur de voir tout le contenu sans occuper d'espace d'affichage supplémentaire. Deux autres tactiques adaptées à cette situation consistent à utiliser la propriété overflow avec les valeurs visible et hidden, respectivement. Vous comprendrez mieux ces deux solutions lorsque vous ferez vous-même l'expérience de ces méthodes et des écrans qu'elles produisent.

UTILISATION DU DÉBORDEMENT VISIBLE ET DU DÉBORDEMENT MASQUÉ

PRÉPAREZ-VOUS. Pour vous entraîner à utiliser le débordement visible et le débordement masqué, procédez comme suit : 1. Ouvrez le fichier e7.html de l'exercice précédent (s'il n'est pas déjà ouvert).

2. Modifiez le débordement de e7.html en remplaçant scroll par visible.

3. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustré à la figure 4-15.

PRÊT POUR LA CERTIFICATIONQuelles valeurs de propriété CSS overflow montrent le débordement visible et masquent le débordement visible ?3 .1

4. Étudiez les détails de cet affichage. visible est la valeur par défaut de overflow. Avec la valeur visible définie, les éléments de l'affichage HTML sont disposés en ordre, un débordement recouvre donc simplement les autres éléments.

5. Notez que background-color ne s'applique pas au débordement de contenu : col1 a un arrière-plan bleu ciel, mais le texte de débordement revient à un arrière-plan par défaut.

6. Maintenant modifiez le débordement de e7.html en remplaçant scroll par hidden.

Figure 4-15

Le débordement visible recouvre le contenu qui le suit


8. Fermez l'outil d'édition et le navigateur Web.

Le débordement masqué permet de contrôler une conception : il garantit garantit que débordement ne « pollue » pas une conception agréable avec des éléments inappropriés. En revanche, le débordement masqué peut entraîner des surprises. Par exemple, si un utilisateur final malvoyant spécifie une police plus grande que prévu, l'utilisation du débordement masqué risque de rendre des éléments cruciaux de votre conception complètement invisibles et inaccessibles. Dans le pire des cas, l'utilisateur final pourrait être face à un écran sans contrôle visible ou moyen de revenir à la page d'accueil.

✚ PLUS D’INFORMATIONSPour plus d'informations sur CSS overflow, visitez la page Web sur la propriété CSS overflow de W3schools.com, à l'adresse http://www.w3schools.com/cssref/pr_pos_overflow.asp. Vous pouvez également effectuer une recherche sur flux de contenu css de msdn, positionnement css de msdn et débordement css de msdn à l'aide de votre moteur de recherche favori.

Figure 4-16

Le débordement masqué est simplement invisible



• CSS est un outil essentiel pour la réalisation d'une grande partie de l'apparence et même du comportement des applications mobiles modernes ainsi que des sites Web. Pour créer la partie « frontale » d'une application ou d'un site Web et surtout conserver son aspect correct et frais au fur et à mesure que des modifications fonctionnelles sont apportées à l'application ou au site Web pendant sa durée de vie, vous devez bien comprendre CSS et comment il fonctionne conjointement avec d'autres outils dont HTML et JavaScript. Vous serez également beaucoup plus à l’aise pour estimer l'effort requis pour certains projets lorsque vous aurez assimilé les concepts de « style » de l'interface utilisateur comme CSS les utilise.

(suite)

7. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustré à la figure 4-16. Avec le débordement masqué, le débordement devient tout simplement invisible.

106 | Leçon 4

• Vous pouvez créer des fichiers CSS entièrement à partir d'un simple éditeur de texte tel que le Bloc-notes. Cependant, de nombreux éditeurs HTML et outils de développement d'applications fournissent une fonctionnalité de débogage qui vous permet de détecter rapidement des erreurs dans le code et le balisage. Ces outils comprennent généralement aussi un bouton pour ouvrir un navigateur Web, plutôt que d'avoir à le faire manuellement.

• L'élément <link> lie un fichier HTML à un fichier CSS. • Dans des documents HTML, il est courant de conserver les fichiers HTML qui

incluent le contenu et de faire simplement référence à un fichier CSS distinct qui contient le code pour affecter un style au contenu dans les fichiers HTML. Cela vous permet de modifier les styles dans un seul fichier (le fichier CSS) et de voir ces modifications de style apportées dans tous les fichiers HTML automatiquement.

• Lorsque vous travaillez sur un petit fichier HTML autonome dans lequel les styles ne vont probablement pas changer, il est acceptable d'ajouter le code de style CSS dans le fichier HTML lui-même.

• En général, un fichier CSS contient une séquence de spécifications de style ou règles et peut inclure une règle @import initiale.

• La typographie concerne l'apparence des lettres, chiffres et autres caractères.• Vous pouvez gérer le flux de contenu dans un document HTML à l'aide des

propriétés de flux inclus et de flux de bloc de CSS.• HTML et CSS prennent un charge un certain nombre de façons de spécifier où les

différents éléments HTML apparaissent dans un affichage. Les deux plus importantes pour notre but sont le positionnement flottant et le positionnement absolu.

• Le cadre englobant HTML est un rectangle qui inclut toutes les lettres d'un bloc de texte et son arrière-plan. Le style CSS est exprimé dans les termes de ce cadre. Par défaut, le cadre englobant n'est pas visible sur les pages Web.


Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. HTML est responsable du contenu, CSS du _____________. 2. Un fichier source HTML fait référence à un fichier source CSS externe grâce

à l’élément _________. 3. Un fichier source CSS contient zéro, une ou plusieurs _________ individuelles. 4. Chaque règle individuelle comprend deux parties principales : un _________ et une

ou plusieurs déclarations. 5. Une déclaration individuelle dans une règle CSS comporte une _________, suivie

de deux-points, puis d’une valeur et pour terminer d’un point-virgule. 6. Les sélecteurs CSS les plus courants sont : élément ou type, ID et _________. 7. Les deux flux de contenu HTML visibles sont _________et de bloc. 8. Pour afficher des éléments HTML en colonnes, il est courant d’appliquer un

positionnement _________. 9. Supposez qu’un élément fasse l’objet d’un débordement : il peut peut s’étendre

au-delà de la taille qui lui est affectée à l’écran. Pour afficher des barres de défilement qui permettent à l’utilisateur de voir l’objet entier, déclarez la propriété overflow avec la valeur _________.

10. Les valeurs les plus courantes pour la propriété float sont _________ et _________.



Questionsàchoixmultiples

Entourez la lettre correspondant à la meilleure réponse. 1. Parmi les affirmations suivantes, laquelle résume le mieux un modèle utile pour le

développement commercial ?a. Les pages Web sont créées en langage HTML.b. Les concepteurs de sites Web doivent apprendre Java ou Ruby pour réaliser la

mise en page de l’affichage.c. CSS traite principalement le style visuel.d. CSS définit la structure et HTML affecte les couleurs et les polices.

2. Parmi les syntaxes suivantes, laquelle permet de coder un commentaire dans CSS ?a. b. /* … */c. # …d.d. // ...

3. Combien de règles différentes dans un seul fichier source CSS valide peuvent déclarer le style d’un élément de paragraphe <p> ?a. 0b. 1c. 1 ou 2, selon qu’HTML5 est utilisé ou nond. 0 ou plus

4. Parfois, les couleurs sont exprimées avec des mots et parfois avec des nombres symboliques. Parmi les codes suivants, lequel correspond à « bleu » ?a. 009b. #0000FFc. !008000d. (128, 128, 128)

5. Un paragraphe apparaît sur un affichage important codé comme « <p id = 'introduction'>Trusty Lawn Care prend. . .”. On vous a demandé d’appliquer à ce paragraphe la police Tahoma. Parmi les syntaxes suivantes, laquelle est la mieux adaptée pour définir une règle correspondante ? a. p {font: Tahoma;}b. #introduction {font-family: Tahoma;}c. .introduction {font: Tahoma;}d. .p {font-family: Tahoma;}

6. Une personne a créé une page Web en HTML qui est liée à trois fichiers source CSS différents. Le nom d’un des fichiers est mal orthographié dans le code HTML. Parmi les affirmations suivantes décrivant l’affichage correspondant dans un navigateur Web, laquelle semble la plus plausible ?a. La page s’affiche même si le lien renvoyant au fichier CSS avec un nom mal

orthographié est manquant.b. La page affiche le nom mal orthographié du fichier source CSS avec un message

d’erreur.c. La page s’affiche en grande partie, en utilisant le dernier fichier CSS lié

correctement à la place du fichier CSS avec le nom mal orthographié.d. Un message d’avertissement s’affiche indiquant que le fichier CSS est introuvable

et vous invite à continuer. 7. La balise d’ancrage <a > est l’élément HTML défini pour la configuration des liens

hypertexte, entre autres. Quel est le flux de contenu par défaut d’un ancrage ?a. Inclusb. Blocc. Masquéd. Visible

108 | Leçon 4

8. Votre équipe développe une application dans laquelle est inséré un long accord de licence que l’utilisateur doit pouvoir lire et approuver. Vous souhaitez limiter à l’écran l’espace dans lequel l’accord de licence doit s’afficher, mais vous voulez donner en même temps la possibilité à l’utilisateur qui le souhaite de lire l’accord dans son intégralité. Quelle est la syntaxe la mieux adaptée à la situation ?a. {position: scrolling;}b. {fixed: scrolling;}c. {overflow: scrolling;}d. {overflow: scroll;}

9. La dernière norme CSS en cours de développement, mais déjà très répandue, est :a. CSS8b. CSS5c. CSS3d. CSS2

10. Lorsque la page HTML est liée à un fichier CSS que vous avez créé, quelle partie du lien est la plus utile ?a. type = ‘text/css’b. CSS = “UN_NOM.css”c. type = "style/CSS"d. Web = "style/css"

Vrai/Faux

Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Un fichier source CSS comporte deux règles différentes pour la police d’un

élément h1. Le navigateur Web applique la règle numéro 1 vers le début du fichier source et ignore celle qui se situe vers le bas.

V F 2. Le débordement d’un élément particulier est défini via CSS pour activer le défilement. Aucun débordement n’est constaté parce que le contenu de l’élément est assez court pour l’instant. Même dans ce cas, la barre de défilement est visible.

V F 3. On vous a demandé de concevoir une mise en page avec des colonnes. Le positionnement flottant sera plus utile que le positionnement absolu dans votre situation.

V F 4. Si vous utilisez la dernière norme CSS dans votre codage, les utilisateurs qui ont recours à des navigateurs Web non à jour recevront un message d’avertissement les informant que vos pages présentent des risques pour la sécurité.

V F 5. Avant de tester le style CSS que vous créez, vous devez vous assurer que le compilateur Python est installé sur votre ordinateur.


Scénario 4-1 : Flux de travail de base

Votre équipe développe une application. Vous êtes chargé du style de la mise en page. Quels fichiers êtes-vous susceptible de mettre à jour ?

Scénario 4-2 : Consultation clientUn client a défini une mise en page plutôt rigide dans laquelle, une section des nouveautés occupe un emplacement fixe à l’affichage. Le contenu de la section des nouveautés risque de déborder de la zone qui lui est affectée. Créez rapidement un exemple d’affichage qui montre au client comment fonctionne la mise en page avec des barres de défilement pour la section des nouveautés, ou avec le texte des nouveautés simplement tronqué en cas de dépassement de la zone qui lui est affectée.



Scénario4-3:Dialogued’unepiècedethéâtre

Une application en cours d’utilisation affiche le dialogue de différents acteurs. L’écran d’un acteur particulier présente son texte dans une police normale, tandis que le texte des autres acteurs est en italique. À l’origine, la mise en œuvre consistait à placer le texte de chaque acteur dans son propre paragraphe, avec des paragraphes successifs nommés « paragraphe1 », « paragraphe2 », etc. Ensuite, le style CSS a été appliqué aux paragraphes en fonction de l’acteur. Montrez à votre équipe une méthode CSS plus efficace et plus facile à gérer pour parvenir au même résultat.

Scénario 4-4 : Coopération internationale

Vous êtes membre d’une équipe de développement dispersée géographiquement. Une entreprise de relations publiques en Virginie est chargée de la version qui doit s’afficher sur un site Web. Parallèlement, un consultant belge fournit la typographie très tendance, tandis que les développeurs en Égypte s’occupent de l’aspect de la mise en page et du modèle de couleurs. Comment pourriez-vous décrire la structure des fichiers de ce projet ?

110

Stacey est gestionnaire de site Web chez Media Malted Milk. Elle a appris que vous travaillez avec l'équipe de développement d'application cliente et que vous étudiez HTML5 et CSS3. Stacey développe également ses compétences en HTML5 et aimerait tout d'abord commencer par incorporer la boîte flexible et les dispositions en grille dans le site Web Malted Milk, une fois que les spécifications seront plus largement utilisées. Elle aimerait rassembler des informations sur les dispositions en grille et en boîte flexible, y compris leur compatibilité avec les navigateurs actuels et créer un petit aide-mémoire à propos de leurs propriétés CSS.



Organisation du contenu d’une Organiser le contenu d’une 3.2 interface utilisateur avec CSS interface utilisateur avec CSS

Utilisation de la boîte flexible Organiser le contenu d’une 3.2 (Flexbox) pour appliquer au interface utilisateur avec CSS contenu un alignement, une direction et une orientation

Utilisation des dispositions en Organiser le contenu d’une 3.2 grille pour appliquer au contenu interface utilisateur avec CSS un alignement, une direction et une orientation

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

5 L E Ç O N

marge

marge intérieure

modèle de boîte flexible (Flexbox)

modèle de disposition en grille

modèle de grille

préfixe du fournisseur

relationparent/enfant

requêtes multimédias


boîte flexible

bordure

contenu

disposition en grille

élément block-level

élément de grille

élément flexbox

élément inclus

interface utilisateur (UI)


L'interface utilisateur ou IU est la partie d’un site Web ou d’une application avec laquelle l'utilisateur peut interagir. La disposition de l'interface utilisateur peut être ultra simple avec juste un bouton ou deux ou très complexe avec beaucoup de parties et chaque partie peut contenir un ou plusieurs boutons, menus, barres d'outils, formulaires etc.Avec un tel éventail de dispositions, il est difficile de créer des interfaces utilisateur qui fonctionnent bien pour des applications et des sites Web affichés sur des appareils mobiles. Le positionnement et le redimensionnement automatique des éléments d'une interface utilisateur sont essentiels à une conception de qualité. Par exemple, le positionnement relatif des éléments d'interface utilisateur convient à de nombreuses pages Web et les développeurs Web ont utilisé la propriété float pendant des années pour avoir de la souplesse dans leurs conceptions. (Vous avez découvert la propriété float dans la leçon 4.) Toutefois, le positionnement relatif ne fonctionne pas pour la plupart des applications Web mobiles car il produit un chevauchement inapproprié des éléments ou des éléments apparaissent au mauvais endroit.Une combinaison de positionnement absolu et de boîtes flexibles (conteneurs) fonctionne beaucoup mieux pour les applications Web mobiles et les parties de pages Web en général. Par exemple, un élément d'interface utilisateur qui doit toujours figurer au même endroit sur l'écran, par exemple un en-tête ou un pied de page, devrait utiliser le positionnement absolu. Pour plus de flexibilité, le modèle de boîte flexible CSS3 convient parfaitement aux éléments qui sont redimensionnés ou repositionnés automatiquement (horizontalement ou verticalement) en fonction de la taille de l’écran. Le modèle de disposition en grille CSS3 est un autre modèle d'interface utilisateur. Il vous donne une plus grande maîtrise des dispositions complexes que le modèle de boîte flexible. Cette leçon porte sur les modèle de boîte flexible et les modèles de disposition en grille.Avant de nous plonger dans les sujets de cette leçon, vous devez comprendre quelques petites choses sur la compatibilité entre CSS3 et un navigateur. Comme pour HTML5, la spécification CSS3 est en cours de développement et fait l'objet de modifications constantes. Le nom de certaines propriétés peut changer d’une version à l’autre dans le projet de spécification CSS3, et de nouvelles valeurs de propriété peuvent être créées et d’autres supprimées.Pour s’assurer que les styles CSS3 fonctionnent correctement pendant cette phase de transition, la plupart des principaux navigateurs Web offrent des noms de propriété de remplacement. Ces solutions permettent simplement d’ajouter un préfixe de fournisseur, mot clé placé entre tirets, devant un nom de propriété CSS3. Gardez ce qui suit à l'esprit quand vous utilisez les propriétés CSS3 :• Internet Explorer utilise le préfixe -ms-.• Firefox prend en charge le préfixe -moz-.• Opera utilise le préfixe -o-.• Chrome et Safari prennent en charge le préfixe -webkit-.

Par exemple, la propriété flexbox est une propriété CSS3 que vous apprendrez dans cette leçon. Pour appliquer le style flexbox aux éléments et les afficher dans Firefox, vous devez actuellement utiliser la propriété -moz-flexbox.

■ Organisation du contenu d’une interface utilisateur avec CSS

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 et le modèle de disposition en grille en CSS réduisent la quantité de code nécessaire pour la compatibilité inter-périphériques. Les boîtes flexibles contiennent du texte, des images et d'autres contenus, et le navigateur ajuste automatiquement la taille de la zone selon la taille de l'écran utilisé pour afficher le document HTML. Le même principe s'applique aux dispositions en grille, qui sont tout simplement des colonnes et des lignes qui contrôlent la mise en page du contenu dans un document HTML. 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.

L'ESSENTIEL

PRÊT POUR LA CERTIFICATIONComment CSS est utilisé pour contrôler la disposition d'une interface utilisateur ?3.2

112 | Leçon 5

Il est recommandé d'inclure les préfixes des quatre fournisseurs de fonctionnalités CSS3 qui sont encore émergents. De cette façon, votre page Web a les meilleures chances d'être affichée correctement, quels que soient les principaux navigateurs utilisés. Cependant, le fait d'inclure les préfixes des quatre fournisseurs dans votre code le rend plus long, et cela ne garantit pas que la fonction CSS3 fonctionne dans tous les navigateurs. Si un navigateur ne prend pas en charge la fonctionnalité ou la propriété prefix du fournisseur, la fonctionnalité ne s'affiche pas correctement. Le site Web « Can I use » à l'adresse caniuse.com vous aide à déterminer quels navigateurs prennent en charge des fonctionnalités CSS3 et HTML5 spécifiques.

Une autre pratique à suivre, surtout pendant la transition à CSS3, consiste à utiliser des familles de polices génériques pour éviter les éventuels problèmes d'affichage entre différents navigateurs. Une famille de polices à espacement fixe, soit serif ou sans serif, est la meilleure façon d'éviter des résultats inattendus. Cependant, CSS3 offre également la possibilité d'utiliser n'importe quelle police. Il faut cependant savoir quand utiliser une police à espacement fixe et quand il est possible d'utiliser une police fantaisiste. Vous en apprendrez plus sur la typographie et polices Web dans la leçon 7.

REMARQUE*

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.

Utilisation de la boîte flexible pour des dispositions simples et utilisation de la grille pour les dispositions complexes

Le groupe W3C a créé, il y plusieurs années, des spécifications pour le modèle de boîte simple, appelé modèle de boîte CSS. Ce modèle décrit les zones qui entourent le contenu dans un document HTML, que le document devienne une page Web ou une application Web. Pensez à toutes les parties d'un document HTML comme si elles étaient dans une boîte. Chaque boîte doit être conforme aux règles définies par le modèle de boîte.

Le modèle de boîte CSS est illustré dans la figure 5-1. Le modèle de boîte CSS est composé de marges, de cadres, de marges intérieures et de contenu.

PRÊT POUR LA CERTIFICATIONQuel est le but du modèle de boîte CSS ?3.2

La marge est transparente et se situe sur le bord extérieur d’une boîte, formant l’espace qui sépare les boîtes du document. La bordure entoure la boîte. Une bordure peut être transparente, en couleurs ou avec un motif, par exemple des pointillés. La marge intérieure représente l’espace compris entre la bordure de la boîte et son contenu. En règle générale, la marge intérieure adopte la même couleur que la couleur d’arrière-plan de la boîte. Le contenu correspond à tout ce qui figure à l’intérieur de la boîte, par exemple du texte et des images. Vous pouvez utiliser les propriétés CSS border, margin, padding, height et width pour modifier les diverses parties du modèle de boîte.Un problème majeur avec le modèle de boîte CSS, c'est que les différents navigateurs Web appliquent les propriétés CSS différemment. Par exemple, bien que le W3C indique que les propriétés height et width définissent la hauteur et la largeur du contenu d'une boîte, les anciennes versions d'Internet Explorer appliquent les mêmes propriétés à la hauteur et la largeur de la bordure, ce qui comprend les marges intérieures et le contenu.

Figure 5-1

Modèle de boîte CSS traditionnel


Il faut comprendre deux autres concepts sur le modèle de boîte CSS : les éléments de niveau bloc et inclus. Un élément de niveau bloc permet de créer des boîtes qui facilitent la mise en page du document. Les sections, les articles, les paragraphes, les listes et les images sont des exemples d’éléments de niveau bloc. Les éléments inclus sont conçus pour agencer le texte sans nuire à la structure du document. L’application de caractères gras et le nouvel élément HTML5 mark sont des exemples d’éléments inclus.

Enfin, il est important de comprendre la relation parent/enfant lorsque vous travaillez avec le CSS. Globalement, une boîte parent peut contenir une ou plusieurs boîtes enfants. Les boîtes contenues dans une boîte parent sont également appelées boîtes enfants. La figure 5-2 montre un exemple simple d'une boîte parent avec une boîte enfant imbriquée. Un enfant peut hériter des styles CSS d'un parent, ce qui signifie que les styles appliqués à un parent s'appliquent également à un enfant. Les propriétés CSS ne peuvent pas toutes être héritées. Lorsque vous appliquez des styles, vous devez vérifier les spécifications CSS pour déterminer l'héritage de propriété.

Ce qu'il manquait à CSS depuis sa création c'était un moyen facile pour organiser les éléments horizontalement et verticalement dans un document HTML : afin que CSS soit utilisé pour vérifier que la disposition est correcte dans les différents navigateurs et dans les différentes tailles d'écran. Les modèles de boîte flexible et de disposition en grille en CSS3 ont permis de régler ce problème.Le modèle de boîte flexible CSS est un mode de disposition qui permet d’utiliser des boîtes flexibles dans les interfaces utilisateur. Ce modèle fait partie du projet de spécification CSS3. Une boîte flexible offre des dispositions flexibles pour créer une interface utilisateur. Vous pouvez créer des pages Web et des applications mobiles à partir d'éléments, de contrôles, de barres d’outils, de menus et de formulaires qui sont automatiquement redimensionnés et repositionnés lorsque l’utilisateur change la taille de la fenêtre du navigateur. Le navigateur prend en compte l’espace libre disponible et calcule automatiquement les dimensions, ce qui active les tailles relatives et le positionnement.Par exemple, la figure 5-3 montre une barre d'outils horizontale avec des icônes dans une boîte flexible. La boîte flexible parent est indiquée par l'arrière-plan ombré et les icônes sont les boîtes enfants. Lorsque l'utilisateur élargit horizontalement la taille de l'écran, la boîte flexible s'étend également et répartit l'espace de manière uniforme entre les boîtes enfants.

PRÊT POUR LA CERTIFICATIONQu'est-ce que le modèle de boîte flexible ?3.2

Figure 5-2

Boîtes parents et enfants

Figure 5-3

Barre d'outils flexible

REMARQUE*

Les concepteurs d'applications Web et de page Web utilisent souvent des hacks (valeurs de propriétés CSS personnalisées) pour forcer Internet Explorer à utiliser des balises CSS que les autres navigateurs vont ignorer. Ce concept est similaire aux préfixes fournisseurs pour les propriétés CSS mentionnées dans la section précédente.

114 | Leçon 5

Vous pouvez présenter le contenu d'une boîte flexible dynamiquement dans n'importe quelle direction, à gauche, à droite, en haut ou en bas. Vous pouvez aussi échanger l'ordre des boîtes et modifier leurs tailles et leurs positions pour remplir l'espace disponible. Une boîte flexible multiligne renvoie le contenu automatiquement sur plusieurs lignes, comme un traitement de texte qui gère du texte dans un paragraphe.

La disposition en grille offre aussi de la modularité. Vous pouvez donc facilement déposer des éléments dans une grille ou déplacer des sections vers une autre zone d'un document. Les grilles sont beaucoup plus souples et plus faciles à manipuler que des tableaux HTML ou même des colonnes ou des éléments flottants pour structurer la disposition.

Figure 5-4

Illustration d'une disposition en grille

La disposition en boîte flexible est similaire à la disposition en bloc, mais la boîte flexible n'utilise pas de colonnes ou d'éléments flottants. En outre, une disposition en bloc dispose généralement le contenu verticalement (et une disposition en ligne dispose généralement le contenu horizontalement), une boîte flexible quant à elle redimensionne dans les deux sens.

REMARQUE*

PRÊT POUR LA CERTIFICATIONQu'est-ce que la disposition en grille ?3.2

Alors que le modèle de boîte flexible convient parfaitement à des éléments simples, comme les boutons, les barres d’outils et de nombreux formulaires, vous pouvez utiliser le modèle de disposition en grille CSS pour les dispositions plus complexes. Le modèle de disposition en grille permet de contrôler la création de sections de documents HTML ou de documents entiers avec CSS3. Comme son nom l’indique, un modèle de grille utilise des lignes et des colonnes pour donner un aspect plus clair et structuré (voir la figure 5-4).

Le site Web du New York Times (www.nytimes.com) constitue un exemple de présentation en grille (comme la plupart des sites de journaux en ligne).REMARQUE*

■ Utilisation de la boîte flexible (Flexbox) pour appliquer au contenu un alignement, une direction et une orientation

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.

L'ESSENTIEL

Vous devez définir un élément en tant que boîte flexible à l'aide des propriétés CSS display:flexbox ou display:inline-flexbox, qui sont décrites comme suit :• flexbox: définit la boîte flexible comme un élément de niveau bloc• inline-flexbox: définit la boîte flexible comme un élément inclus

Une boîte à l’intérieur d’une autre boîte est une boîte enfant et peut être flexible ou non. Une boîte enfant est également appelée élément flexbox.

PRÊT POUR LA CERTIFICATIONComment une boîte flexible est-elle utilisée pour établir l'orientation, la direction et l'alignement du contenu ?3.2


La boîte flexible introduit également neuf autres propriétés, indiquées dans le tableau 5-1. Vous apprendrez à utiliser la plupart de ces propriétés et les valeurs dans les sections suivantes.

Utilisez le tableau précédent comme référence pour apprendre à créer les éléments flexboxes et flexbox.


Pour plus d'informations sur les boîtes flexibles, visitez le « Module Disposition de boîte flexible CSS » W3C sur http://www.w3.org/TR/css3-flexbox/.

Tableau 5-1

Valeurs et propriétés d'une boîte flexible

Propriété Valeur Description

flex

pos-flex neg-flex preferred-size none

Rend les boîtes enfants flexibles en hauteur et en largeur

flex-align start end center baseline stretch

Définit l'alignement par défaut pour les boîtes enfants. Si l'orientation de la boîte parent est horizontale, flex-aligne détermine l'alignement vertical des boîtes enfants et vice versa

flex-direction row row-reverse column column-reverse

Contrôle l'orientation des boîtes enfants dans la boîte parent, ce qui affecte également la propriété flex-pack

flex-flow flex-direction flex-wrap

Définit simultanément les propriétés flex-direction et flex-wrap

flex-item-align auto start end center baselinebstretch

Remplace l'alignement par défaut des boîtes enfants auxquelles la propriété flex-align a été appliquée

flex-line-pack start end center justify distribute stretch

Définit l'alignement de la boîte enfant dans la boîte parent lorsqu'il existe un espace supplémentaire

flex-order number Affecte les boîtes enfants aux groupes et contrôle l'ordre dans lequel elles apparaissent dans une mise en page, en commençant par le groupe ayant le plus petit numéro.

flex-pack start end center

Justifie l'alignement des boîtes enfants dans une boîte flexible et réduit l'espace disponible dans la boîte parent.

flex-wrap nowrap wrap wrap-reverse

Indique si les boîtes enfants s’agencent automatiquement sur plusieurs lignes ou dépassent de la boîte flexible.

116 | Leçon 5

Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en largeur. La propriété flex permet de rendre les boîtes enfants flexibles. 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.

Utiliser les éléments Flexboxes et Flexbox

Observons une boîte flexible en action. Supposons qu'une entreprise fournisse trois principaux types de services, qui sont indiqués et décrits brièvement en trois paragraphes sur une page Web. Les trois paragraphes forment trois conteneurs d'informations, comme illustré dans la figure 5-5.

Notez l'espace supplémentaire à droite de la dernière boîte enfant, nommée Enfant3. Vous pouvez modifier le CSS qui contrôle les boîtes afin que les trois boîtes enfants étendent automatiquement leur taille uniformément pour remplir l'espace disponible dans la boîte flexible. Vous pouvez également modifier une boîte enfant, telle que Enfant3, pour qu'elle puisse remplir l'espace, comme illustré dans la figure 5-6.

Figure 5-5

Une boîte flexible parent avec trois boîtes enfants (éléments flexbox)

Figure 5-6

Modification de la troisième boîte enfant pour remplir l'espace vide disponible

MISE À L'ÉCHELLE PROPORTIONNELLE DANS UNE BOÎTE FLEXIBLELe W3C spécifie la propriété flex qui contrôle la hauteur et la largeur des éléments flexbox. display: flexbox permet de créer une boîte flexible parent, la propriété flex permet de donner aux boîtes enfants leur flexibilité.

La propriété display: flexbox est utilisée sans valeurs supplémentaires.

La propriété flex peut prendre une valeur flex positive et/ou négative, une taille souhaitée et le mot clé none comme indiqué :

flex : pos-flex neg-flex preferred-size none

Les valeurs positives et négatives flex indiquent la flexibilité. Contrairement à l'usage du mot « négatif », les deux valeurs sont en fait des nombres positifs, comme 1, 2, 3 et ainsi de suite. (Vous pouvez également utiliser 1.0, 2.0, 3.0, etc.)

S'il reste de la place dans la boîte flexible lorsque la taille de l'écran augmente, les éléments flexbox se développent pour remplir l'espace en fonction de la valeur flex positive. Une valeur de 1 signifie que chaque élément flexbox occupera une part égale de l'espace disponible, une valeur de 2 signifie que chaque élément occupera deux parts égales et ainsi de suite. Si les éléments flexbox débordent de la boîte parent parce qu'ils sont collectivement plus larges que le parent, le navigateur utilise la valeur flex négative pour mesurer la hauteur ou la largeur de chaque élément.

Si vous ne spécifiez pas de valeur flex positive, elle est de 1 par défaut. L'omission d'une valeur flex négative aboutit à 0 par défaut.


La valeur de taille préférée peut être une valeur valide pour la propriété height et width CSS, comme 100px. Si vous ne spécifiez pas de valeur de taille préférée, la valeur par défaut est 0px. Vous pouvez également définir la valeur size souhaitée sur auto, qui utilise la valeur de la propriété width ou height en tant que la taille par défaut.

Le mot clé none équivaut à 0 0 auto.

Quelques explications supplémentaires peuvent être nécessaires pour la valeur de la propriété flex. Imaginons que vous ayez une boîte flexible avec trois boîtes enfants. La valeur flex pour enfant1 et enfant2 est de 1 et la valeur pour enfant3 est de 2. Un enfant avec un flex de 2 est deux fois plus flexible qu'un enfant avec un flex de 1. Cela ne signifie pas nécessairement qu'enfant3 sera deux fois plus large qu'enfant1 et enfant2. En fait, la valeur flex calcule l’espace libre disponible par extension ou contraction. Le changement est appliqué en fonction de la partie flexible en comparaison avec les autres boîtes enfants.

REMARQUE*

La puissance des éléments flexbox réside dans le fait qu'ils peuvent évoluer librement ou ajuster de façon dynamique leurs principales dimensions. La taille de ces éléments augmente ou diminue selon l'espace disponible dans la boîte flexible dans laquelle ils résident.

Dans le code CSS et le balisage HTML suivants, la boîte flexible contient quatre éléments flexbox. Chaque enfant a une valeur flex de 1 et est défini sur auto. Lorsque l'utilisateur modifie la taille de la fenêtre du navigateur, les boîtes enfants doivent se développer et se réduire en même temps que la boîte parent.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple de boîte flexible enfant</title> <style> div { display: flexbox; outline: 2px solid silver } p { flex: 1 auto; margin: 1em; font-family: sans-serif; color: white; background: tomato; font-weight: bold; text-align: center; } </style> </head>

<body> <div> <p>Il s’agit de la boîte enfant1.</p> <p>Il s’agit de la boîte enfant2.</p> <p>Il s’agit de l’enfant3.</p> <p>Il s’agit de l’enfant4.</p> </div> </body> </html>

La figure 5-7 montre le résultat avant et après le redimensionnement de la fenêtre du navigateur.

PRÊT POUR LA CERTIFICATIONComment une boîte flexible fournit-elle la mise à l'échelle proportionnelle des éléments ?3.2

118 | Leçon 5

Figure 5-7

Boîtes enfants flexibles dans une boîte parent

CRÉER UNE BOÎTE FLEXIBLE AVEC DES ÉLÉMENTS FLEXBOX

PRÉPAREZ-VOUS. Pour savoir comment créer une boîte flexible avec des éléments flexbox qui ont une hauteur fixe mais une largeur flexible, effectuez les opérations suivantes :

1. Dans un outil d'édition ou un outil de développement d'application, créez un fichier HTML qui inclut le code CSS et le balisage suivants :

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple de boîte flexible enfant</title> <style> div { display: flexbox; outline: 2px solid silver } p { flex: 1 auto; margin: 1em; font-family: sans-serif; color: white; background: limegreen; height: 25px; padding: 1em; font-weight: bold; font-size: xx-large; text-align: center; } </style> </head>


<body> <div> <p>Il s’agit de la boîte enfant1.</p> <p>Il s’agit de la boîte enfant2.</p> <p>Il s’agit de l’enfant3.</p> </div> </body> </html>

La propriété display: La propriété flexbox CSS permet de créer la boîte parent : la boîte flexible. Un contour argenté est créé pour la boîte flexible, cela vous permet simplement de la voir dans la fenêtre du navigateur pour les besoins de cet exercice. Les styles de paragraphe (p) s'appliquent aux éléments flexbox (les boîtes enfants). La propriété flex applique la flexibilité à chaque boîte enfant. Les éléments ont une largeur de 75 pixels par défaut. S'il reste de l'espace dans la boîte flexible lorsque la taille de l'écran augmente, les éléments flexbox s'étendent horizontalement pour remplir l'espace.

L'utilisation d'un contour autour de la boîte flexible (boîte parent) consiste à rendre l'identification des frontières de la boîte flexible plus facile. Vous n'avez pas à inclure de contour autour des boîtes flexibles dans vos applications ou pages Web.

REMARQUE*

2. Enregistrez le fichier sous le nom L5-flexbox-exercise.html et ouvrez-le dans un navigateur Web. L'affichage doit ressembler au contenu de la figure 5-8.

Figure 5-8

Création d'une boîte flexible avec des éléments flexbox,

3. Redimensionnez la fenêtre du navigateur, rétrécissez-la et élargissez-la, en faisant glisser le bord droit de la fenêtre vers le centre de l'écran, puis de nouveau vers la droite. Regardez comment les éléments flexbox s'élargissent et se rétrécissent avec la boîte flexible.

4. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant au cours de cette session.

120 | Leçon 5

Vous pouvez aussi utiliser la fonction CSS flex avec la propriété CSS height ou width pour contrôler la hauteur et la largeur des éléments flexbox. La propriété flex et la fonction flex ont le même comportement, mais utilisent une syntaxe légèrement différente (une fonction utilise des valeurs entre parenthèses).

L'exercice suivant vous montre comment utiliser la fonction flex et introduit la propriété flex-wrap. La propriété flex-wrap indique si les boîtes enfants s’agencent automatiquement sur plusieurs lignes (comme illustré dans la figure 5-9). La propriété flex-wrap utilise les valeurs nowrap, wrap et wrap-reverse.

Comme vous allez le voir, le code CSS utilise les préfixes fournisseurs (-ms-, -moz-, -o- et -webkit-), qui sont obligatoires pour que la propriété flex-wrap fonctionne. N'oubliez pas, les préfixes fournisseurs sont fréquemment utilisés pendant la transition à CSS3 pour rendre le code compatible avec le plus de navigateurs possible.

CRÉER DES ÉLÉMENTS FLEXBOX AVEC LA FONCTION FLEX

PRÉPAREZ-VOUS. Pour créer des éléments flexbox avec la fonction flex et utiliser la propriété flex-wrap, procédez comme suit :

1. Dans un outil d'édition ou un outil de développement d'application, créez un document HTML avec le balisage suivant :

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Exemple de fonction Flex</title> <style> div { display: flexbox; display: -ms-flexbox; display: -moz-flexbox;

Figure 5-9

Exemple d'habillage en utilisant le flex-wrap : propriété wrap

Illus

tratio

n: ©

Mig

htyI

slan

d/iS

tock

phot

o


display: -o-flexbox; display: -webkit-flexbox; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; height: 200px; padding: 1em; color: white; outline: 2px solid silver; }

div>div { width: 75px; width: -ms-flex(1 75px); width: -moz-flex(1 75px); width: -o-flex(1 75px); width: -webkit-flex(1 75px); margin: 1em; height: 100px; background-color: #b200ff; font-family: sans-serif; text-align: center; line-height: 100px; font-size: xx-large; } </style> </head>

<body> <div> <div>Service 1</div> <div>Service 2</div> <div>Service 3</div> </div> </body> </html>

Comme dans le dernier exercice, la propriété display: La propriété flexbox CSS permet de créer la boîte parent : la boîte flexible. Le deuxième ensemble de styles div (div>div, qui est simplement une façon abrégée d'appliquer des styles à un groupe d'éléments HTML sans attribuer de classes) s'applique aux éléments flexbox : dans le code, la propriété width et la fonction flex contrôlent la largeur des éléments flexbox qui possèdent une largeur préférée de 75 pixels, mais qui occupent tout l’espace libre disponible lorsque la taille d’écran augmente. La propriété flex-wrap avec la valeur wrap force les éléments flexbox à s’agencer automatiquement sur plusieurs lignes dans la boîte flexible.

2. Enregistrez le fichier sous le nom L5-flexfunction-exercise.html et ouvrez-le dans le navigateur Web. N'oubliez pas de maximiser la fenêtre. Le fichier doit ressembler à la figure 5-10.

Figure 5-10

Éléments flexbox dans une boîte flexible parent

122 | Leçon 5

3. Réduisez la largeur de la fenêtre du navigateur en faisant glisser le bord droit de la fenêtre vers le centre de l'écran. Notez qu'au fur et à mesure que la boîte flexible (représentée par le contour argenté) se rétrécit, la taille des éléments flexbox diminue uniformément. La figure 5-11 montre la boîte flexible avec des éléments flexbox une fois la taille de la fenêtre du navigateur réduite.

4. Réduisez la taille de la fenêtre jusqu'à ce que les éléments flexbox s’agencent automatiquement.

5. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se restitue correctement.


Voici quelques autres propriétés que vous pourriez utiliser assez souvent avec les boîtes flexibles :• flex-pack : justifie l'alignement des boîtes enfants dans une boîte flexible et réduit

l'espace disponible dans la boîte parent. Cette propriété adopte l’une des quatre valeurs suivantes : start, end, justify ou center.

• flex-align : définit l'alignement par défaut pour les boîtes enfants, mais avec une torsion. Si l’orientation de la boîte parent est horizontale, la propriété flex-align détermine l’alignement vertical des boîtes enfants, et vice-versa.

Une fois que les enfants d'une boîte flexible ont terminé la flexion et si l'espace est toujours disponible dans la boîte flexible, les enfants peuvent être alignés avec les propriétés flex-pack et flex-align (ou flex-item-align). La chose la plus importante à retenir est que vous devez appliquer la propriété flex-pack à la boîte flexible parent dans votre code CSS et appliquer flex-align aux éléments enfants.

MODIFICATION DE L'ORIENTATION DES ÉLÉMENTS ENFANTS DANS UNE BOÎTE FLEXIBLELa propriété flex-direction modifie la direction des boîtes enfants à l’intérieur de la boîte parent. Elle adopte les valeurs row, row-reverse, column et column-reverse. La propriété flex-flow définit les propriétés flex-direction et flex-wrap simultanément. L'exemple suivant utilise la propriété flex-flow avec la valeur de la colonne.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple de fonction Flex</title> <style> div { display: flexbox; display: -ms-flexbox;

Figure 5-11

La boîte flexible et les éléments flexbox rétrécissent lorsque la taille de la fenêtre du navigateur est réduite


display: -moz-flexbox; display: -o-flexbox; display: -webkit-flexbox; flex-flow: column; -ms-flex-flow: column; -moz-flex-flow: column; -o-flex-flow: column; -webkit-flex-flow: column; height: 400px; padding: 1em; outline: 2px solid silver; color: white; font-family: sans-serif; font-weight:bold; }

p { width: 100px; margin: 1em; height: 100px; background-color: dodgerblue; text-align: center; line-height: 100px; } </style> </head>

<body> <div> <p>Enfant1</p> <p>Enfant2</p> <p>Enfant3</p> </div> </body> </html>

Le résultat du rendu de ce code et le balisage dans le navigateur Web sont illustrés dans la figure 5-12.

Figure 5-12

Trois boîtes enfants dans l'ordre numérique

124 | Leçon 5

Pour inverser l'ordre des boîtes enfants, remplacez chacune des valeurs de la colonne flex-flow par colonne-reverse, comme suit :

flex-flow : column-reverse;

ms-flex-flow : column-reverse;

-moz-flex-flow : column-reverse;

-o-flex-flow : column-reverse;

webkit-flex-flow : column-reverse;

Comparez la figure 5-13 à la figure 5-12 pour voir les effets de la valeur reverse.

INVERSER L'ORDRE DES ÉLÉMENTS FLEXBOX

PRÉPAREZ-VOUS. Pour créer une boîte flexible qui inverse l'ordre des éléments flexbox, effectuez les opérations suivantes :

1. Dans un outil d'édition ou un outil de développement d'application, créez un document HTML avec le balisage suivant :

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple d'éléments flexbox en ordre inversé</title> <style> div { display: flexbox; display: -ms-flexbox; display: -moz-flexbox; display: -o-flexbox; display: -webkit-flexbox; flex-flow: column; -ms-flex-flow: column; -moz-flex-flow: column; -o-flex-flow: column;

Figure 5-13

Les mêmes boîtes enfants dans l'ordre inverse


-webkit-flex-flow: column; height: 400px; padding: 1em; outline: 2px solid silver; color: white; font-family: sans-serif; font-weight: bold; }

p { width: 300px; margin: 1em; height: 100px; background-color: olive; text-align: center; line-height: 100px; } </style> </head>

<body> <div> <p>Pierre</p> <p>Papier</p> <p>Ciseaux</p> </div> </body> </html>

2. Enregistrez le fichier sous le nom L5-reverseorder-exercise.html et ouvrez-le dans le navigateur Web. Ajustez la taille de la fenêtre du navigateur afin que l'affichage ressemble à celui de la figure 5-14.

Figure 5-14

Boîte flexible avec des éléments flexbox orientée verticalement


126 | Leçon 5

4. Dans le fichier HTML, inversez l'ordre des colonnes à l'aide de la valeur flex-flow: column-reverse, comme suit :

flex-flow : column-reverse;ms-flex-flow : column-reverse;-moz-flex-flow : column-reverse;-o-flex-flow : column-reverse;-webkit-flex-flow: column-reverse;

5. Réenregistrez le fichier et ouvrez-le dans le navigateur Web. L'affichage doit ressembler au contenu de la figure 5-15.



TRI ET RÉORGANISATION DU CONTENUVous pouvez contrôler l'ordre et la disposition du contenu d'une boîte flexible à l'aide de la propriété flex-order. Cette propriété réorganise les éléments enfants dans une boîte flexible. Pour ce faire, la propriété assigne des boîtes enfants aux groupes et contrôle ensuite l'ordre dans lequel elles apparaissent dans une mise en page, en commençant par le groupe ayant le plus petit numéro.

Nous allons voir comment la propriété flex-order fonctionne. Le code CSS suivant et le balisage créent trois boîtes enfants dans une boîte flexible :

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple de tri flexible</title> <style media="screen"> div { display: flexbox; display: -ms-flexbox;

Figure 5-15

Les éléments flexbox sont dans l'ordre inverse

PRÊT POUR LA CERTIFICATIONComment les boîtes flexibles servent-elles à trier et à organiser du contenu ?3.2


display: -moz-flexbox; display: -o-flexbox; display: -webkit-flexbox; flex-flow: row; -ms-flex-flow: row; -moz-flex-flow: row; -o-flex-flow: row; -webkit-flex-flow: row; height: 200px; padding: 1em; background-color: palegoldenrod; font: bold 100%/1 sans-serif; } div>div { width: 100px; margin: 1em; height: 100px; background-color: dodgerblue; text-align: center; color: white; font-size: x-large; line-height: 100px; } </style> </head>

<body> <div> <div>Clés</div> <div>Téléphone</div> <div>Portefeuille</div> </div> </body> </html>

L'ouverture du fichier dans le navigateur affiche les résultats indiqués la figure 5-16.

Figure 5-16

Trois boîtes enfants dans une boîte flexible avec une orientation horizontale

L'élément de style HTML précédent comprend l'attribut media=screen, qui est une requête de média. Les requêtes de média vous permettent d'adapter un document HTML aux périphériques des utilisateurs Parmi les types d'élément multimédia HTML on trouve aural, braille, handheld, print, projection, screen, tty et tv. La même syntaxe peut également être utilisée avec les règles CSS @media et @import. La règle @media all indique que le CSS doit être appliqué à tous les médias de sortie.

REMARQUE*

La propriété flex-order place les boîtes enfants dans des groupes ordonnés. Le groupe par défaut est 0. Vous devez déclarer des groupes et leur assigner un numéro en CSS en utilisant la propriété flex-order et tous les éléments enfants qui ne sont pas explicitement affectés à un groupe restent dans le groupe 0. Les groupes déclarés apparaissent avant le

128 | Leçon 5

groupe 0. Donc, pour réorganiser les boîtes enfants afin que les boîtes Clés et Portefeuille apparaissent avant la boîte Téléphone, ajoutez ce code au bas de la section de style :

div>div:first-child, div>div:last-child { flex-order: 1; -ms-flex-order: 1; -moz-flex-order: 1; -o-flex-order: 1; -webkit-flex-order: 1; }

L'ouverture du fichier dans le navigateur Web donne les résultats indiqués dans la figure 5-17.

EXPLORERLAPROPRIÉTÉFLEX-ORDER

PRÉPAREZ-VOUS. Pour explorer la propriété flex-order, procédez comme suit : 1. Dans un outil d'édition ou un outil de développement d'application, créez un

document HTML basé sur le code précédemment illustré dans la figure 5-16. 2. Enregistrez le fichier sous le nom L5-flexorder-exercise.html. 3. Ajoutez le code suivant à la fin de la section de style :

div>div:first-child, div>div:last-child { flex-order: 1; -ms-flex-order: 1; -moz-flex-order: 1; -o-flex-order: 1; -webkit-flex-order: 1; }

4. Enregistrez le fichier et affichez-le dans un navigateur Web. Il devrait ressembler à celui de la figure 5-17.

5. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se restitue correctement. Notez les navigateurs qui prennent en charge les propriétés flex-flow et flex-order.


Figure 5-17

Réorganisation des boîtes enfants dans une boîte parent

■ Utilisation des dispositions en grille pour appliquer au contenu un alignement, une direction et une orientation

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.

L'ESSENTIEL

Les dispositions en grille sont plus adaptées à des dispositions plus complexes qu'une boîte flexible peut facilement gérer. Les interfaces de jeu sont de bonnes candidates pour les grilles,


tout comme les mises en page de journal (voir la figure 5-18). Une disposition en grille permet de positionner des lignes et des colonnes pour un contrôle précis de la mise en page et nécessite une fraction du code CSS comme avec les anciennes techniques. La modularité est un autre avantage des grilles. Pour déplacer des blocs de contenu d'un côté d'une page ou d'une application à un autre, il vous suffit de déplacer certaines lignes de code dans CSS.

PRÊT POUR LA CERTIFICATIONComment une disposition en grille est-elle utilisée pour établir l'orientation, la direction et l'alignement du contenu ?3.2

Figure 5-18

Mise en page de journal à l'aide d'une grille

Vous devez définir un élément grid (layout) en utilisant la propriété CSS grid display:grid ou display:inline-. Cela crée le conteneur pour la disposition.

Les éléments enfants d'une grille sont appelés éléments de grille, vous pouvez les positionner et dimensionner en fonction de ce qui suit :

• Tracés de la grille : les colonnes et les lignes de la grille ; vous devez définir les tracés de la grille à l'aide des propriétés grid-rows et grid-columns

• Lignes de la grille : lignes horizontales et verticales qui divisent les colonnes ou les lignes• Cellules de la grille : espace logique utilisé pour organiser les éléments de grille,

semblable à une cellule dans une feuille de calcul

Les propriétés grid et leurs valeurs sont répertoriées dans le tableau 5-2.

Tableau 5-2

Valeurs et propriétés d'une grillePropert


grid-columns ou grid-rows

length percentage fraction max-content min-content minmax (min, max) auto

Spécifie les paramètres pour une ou plusieurs colonnes ou lignes dans une grille

grid-template string+ none

Offre une visualisation de la structure de l'élément grid et définit les cellules de la grille

grid-cell string none

Positionne un élément enfant à l'intérieur d'une cellule de grille nommée

grid-column ou grid-row

[integer or string start] [integer or string end] auto

Place des éléments enfants dans une grille

grid-column-span ou grid-row-span

integer Définit les dimensions d'une cellule de grille en spécifiant la distance (en lignes) entre la ligne de début à la ligne de fin

(suite)

130 | Leçon 5

Avec toutes les propriétés disponibles il est donc évident que vous pouvez spécifier la structure de l'élément grid, positionner et dimensionner des éléments de grille de plusieurs façons.

Les principales propriétés qui créent une grille sont display:grid (ou display:inline-grid), grid-columns et grid-rows.

Vous pouvez définir une taille fixe pour les colonnes et les lignes, ainsi elles ne sont pas redimensionnées lorsque la taille de l'écran change, ou définir une taille fractionnaire par rapport à la grille. Les tailles fractionnaires sont définies avec fr, ainsi, une ligne définie avec 2fr présentera une taille deux fois supérieure à la taille d’une ligne définie avec 1fr. La valeur 1fr est l'abréviation de « une fraction ». Vous pouvez également utiliser la valeur « auto » pour que des colonnes ou des lignes s'adaptent à leur contenu.

Le code CSS suivant et le balisage HTML fournissent un exemple de présentation de la grille. Le préfixe fournisseur - ms- est inclus au début de toutes les constructions liées à la grille parce que, à ce jour, seul Microsoft Internet Explorer 10 prend en charge les disposi-tions en grille. Ceci est illustré dans la figure 5-19.

Figure 5-19

Disposition en grille simple

PRÊT POUR LA CERTIFICATIONQuelles sont les propriétés CSS pour les colonnes et les lignes de la grille ?3.2

Tableau 5-2

(suite) Propriété Valeur Description

grid-column-sizing ou grid-row-sizing

track-minmax Modifie la taille des colonnes ou des lignes implicites, qui sont dimensionnés automatiquement par défaut

grid-flow none rows columns

Crée des colonnes ou des lignes supplémentaires pour recevoir du contenu

grid-column-align ou grid-row-align

start end center stretch

Contrôle l'alignement de l'élément enfant dans une cellule

Les propriétés CSS display:grid (ou display:inline-grid), grid-columns et grid-rows sont utilisées pour créer des structures de grille. La taille des colonnes et des lignes peut être fixe ou flexible.

Création d'une grille à l'aide de propriétés CSS pour les lignes et colonnes


<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple de grille</title> <style type="text/css"> #grid { background: palegoldenrod; border: silver; display: -ms-grid; color: white; font-family: sans-serif; font-weight: bold; -ms-grid-columns: 150px auto 2fr; -ms-grid-rows: 50px 6em auto; } #logo { background: dodgerblue; -ms-grid-row: 1; -ms-grid-column: 1; } #item { background: olive; -ms-grid-row: 2; -ms-grid-column: 2; } </style> </head>

<body> <div> <div id="grid"> <div id="logo">Logo</div> <div id="item">Article</div> </div> </div> </body>

</html>

Dans cet exemple, la structure de la grille a trois colonnes et trois lignes. La première colonne a une largeur fixe de 150 pixels. La largeur de la deuxième colonne s'ajuste en fonction du contenu, comme indiqué par le mot clé auto. La troisième colonne correspond à deux unités de fraction de l’espace restant dans la grille.La première ligne est de 50 pixels de haut, la deuxième ligne est de 6 ems de haut, et la troisième ligne s'ajuste en fonction du contenu.

CRÉER UNE DISPOSITION EN GRILLE SIMPLE

PRÉPAREZ-VOUS. Pour créer une disposition en grille simple, effectuez les opérations suivantes : 1. Dans un outil d'édition ou un outil de développement d'application, créez un

document HTML basé sur le code précédemment illustré dans la figure 5-19.

2. Enregistrez le fichier sous le nom L5-grid-exercise.html.

3. Ouvrez le fichier L5-grille-exercise.html dans Internet Explorer 10. Si vous affichez le fichier HTML dans un autre navigateur, cela va produire des résultats inattendus. La disposition doit se présenter comme dans la figure 5-19.

132 | Leçon 5

4. Ajoutez un autre élément à la grille afin qu'une cellule s'affiche dans la troisième ligne et la troisième colonne. Pour ce faire, insérez le texte suivant à la fin de la section de style :

#item2 { background: orange; -ms-grid-row: 3; -ms-grid-column: 3; }

5. Insérez le texte suivant après l'élément div dans la section body :

<div id="item2">Article2</div>

6. Réenregistrez le fichier et affichez-le dans un navigateur Web. La disposition doit se présenter comme dans la figure 5-20.

7. Fermez l'outil d'édition et le navigateur Web.

Figure 5-20

Troisième élément ajouté à la grille


Pour plus d'informations sur les dispositions en grille, visitez la page « Disposition en grille CSS » sur http://www.w3.org/TR/css3-grid-layout/.

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.

Présentation des modèles de grille

Le module des modèles de disposition en grille CSS du groupe W3C présente une autre approche des dispositions en grille en créant un modèle de grille, qui ressemble à un tableau vide dans lequel les données peuvent être organisées. Un modèle de grille utilise des caractères alphabétiques pour représenter la position des éléments dans une grille.Utilisez la propriété grid-position et attribuez un caractère alphabétique comme valeur de position. Les exemples suivants illustrent la propriété grid-position définie pour les quatre éléments :

news { grid-position: a; } weather { grid-position: b; } sports { grid-position: c; } events { grid-position: d; }

Après l'attribution des positions, créez une disposition avec des chaînes de caractères. Une chaîne est égale à une ligne, et chaque caractère de la chaîne est une colonne. Par exemple, pour créer une grille avec une seule ligne et quatre colonnes qui s'ajustent au contenu, vous devez utiliser la syntaxe suivante :

div { grid-template: "abcd"; grid-rows: auto; grid-columns: auto;}

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'un modèle de grille ?3.2




















134 | Leçon 5

3. Dans le modèle de boîte CSS de W3C, un élément de niveau permet de créer des boîtes qui assistent à la mise en page du document.

4. Les boîtes flexibles enfants sont appelées et sont agencées selon le modèle de boîte flexible.

5. Les éléments enfants d'une grille sont appelés 6. offre une méthodologie de disposition flexible pour la création d’une

interface utilisateur, notamment pour créer des contrôles, des barres d’outils, des menus et des formulaires qui sont redimensionnés et repositionnés automatiquement lorsque l’utilisateur change la taille de la fenêtre du navigateur.

7. La relation décrit la manière dont une boîte parent peut contenir une ou plusieurs boîtes enfants.

8. Un ressemble à un tableau vide dans lequel les données peuvent être organisées.

9. Un élément est conçu pour agencer le texte sans nuire à la structure du document. Citons comme exemples les caractères gras et le nouvel élément HTML5 mark.

10. Alors que le modèle de boîte flexible convient parfaitement à des éléments simples, comme les boutons, les barres d’outils et de nombreux formulaires, vous pouvez utiliser le modèle pour les dispositions plus complexes.

QuestionsàchoixmultiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les éléments suivants, lequel ne figure pas dans le modèle de boîte CSS de

W3C d’origine ?a. marginb. bordurec. toolbard. remplissage

2. Parmi les modèles suivants, lequel convient le mieux aux boutons et barres d’outils ?a. Modèle de boîte flexible (Flexbox)b. Modèle de boîte CSSc. Modèle de disposition en grilled. Aucune des réponses ci-dessus

3. Vous utilisez CSS pour créer une boîte flexible dans un document HTML dans le cadre de votre travail. Tout le monde au bureau utilise le navigateur Web Internet Explorer. Quel préfixe devez-vous utiliser avec le nom des propriétés CSS pour garantir la compatibilité de l’affichage du document HTML ?a. -moz-b. -ms-c. -webkit-d. -o-

4. Quelle propriété flexbox permet de rendre les boîtes enfants flexibles au niveau de la hauteur et de la largeur ?a. flexb. flex-childc. flex-wrapd. flex-align

5. Vous souhaitez répartir l’espace vide dans une fenêtre de navigateur de manière uniforme en fonction de la taille de toutes les boîtes enfants à l’intérieur d’une boîte flexible. Quelle propriété CSS devez-vous utiliser ?a. flex-alignb. flex-wrapc. flex-orderd. flex-pack

Understanding CSS Essentials: Layouts | 135

6. Quelle propriété flexbox permet d’affecter des éléments enfants à des groupes pour contrôler la disposition à l’intérieur d’une boîte flexible ?a. flexb. flex-groupc. flex-directiond. flex-order

7. Parmi les propriétés suivantes, laquelle permet de placer des éléments enfants dans une grille ?a. grid-columnsb. grid-columnc. grid-flowd. grid-pack

8. Parmi les propositions suivantes, laquelle permet d’adapter un document HTML aux périphériques des utilisateurs ?a. Requêtes multimédiasb. Modèle de boîte CSSc. Propriété grid-templated. @import

9. Parmi les propositions suivantes, laquelle correspond à la meilleure utilisation d’une disposition en grille ?a. Menub. Barre d’outilsc. Pied de paged. Interface de jeu

10. Quelle est la fonction principale d’un modèle de grille ?a. Appliquer un style à une grilleb. Créer une table pour recueillir des données c. S’assurer que la grille possède un nombre égal de colonnes et de lignesd. Aucune des réponses ci-dessus

Vrai/Faux

Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. UneboîteflexibleestdéfinieparunélémentaveclespropriétésCSS

display:boxflex ou display:inline-boxflex.V F 2. Une boîte parent peut contenir une ou plusieurs boîtes enfants.V F 3. Vous ne pouvez pas inverser l’ordre des boîtes enfants à l’intérieur d’une boîte

flexible.V F 4. Uneboîteflexiblenécessiteuncontourouunecouleurd’arrière-plan.V F 5. Une disposition en grille convient davantage à un journal en ligne ou un jeu vidéo.


Scénario 5-1 : Faire la distinction entre le modèle de boîte flexible (Flexbox) et le modèle de disposition en grilleUne collègue, Cynthia, confond le modèle de boîte flexible CSS de W3C avec le modèle de disposition en grille. Comment lui expliquez-vous la différence ?

Scénario 5-2 : Présentation des boîtes flexibles et des éléments flexbox Mlle Takeet est enseignante dans une école maternelle privée Barely Tall Academy. Elle souhaite développer un jeu de mémoire pour aider les élèves à connaître les animaux d’Afrique. Le jeu doit comporter un grand nombre de boîtes contenant des images et des

136 | Lesson 5


Scénario 5-3 : Solution à l’incompatibilité des navigateurs

Ed raconte que même en vérifiant de près son code CSS et le balisage HTML et en validant son document sur la page Web Service de validation du W3C (World Wide Web Consortium), le document ne s’affiche pas comme prévu dans son navigateur Web. Certaines propriétés flexbox ne fonctionnent tout simplement pas. Que pouvez-vous dire à Ed ?

Scénario 5-4 : Présentation de la propriété Flex

Revoilà Ed avec un autre problème. Il teste la propriété flex pour créer des sections d’une page Web. Il voudrait que la taille d’une boîte enfant corresponde au double de la taille de l’autre boîte enfant sur la même ligne. Il utilise une valeur de 2 pour la seconde boîte, mais elle ne s’affiche pas dans les proportions doubles par rapport à la première boîte enfant. Que pouvez-vous lui dire pour l’aider à mieux comprendre la propriété flex ?

questions. Elle décide d’utiliser une disposition flexible, mais n’a aucune expérience avec HTML5 ou CSS. Elle est assez frustrée de ne pas comprendre les détails des boîtes flexibles et des éléments flexbox. Que pouvez-vous dire à Mlle Takeet ?

137

Gestion de l’enchaînement du texte avec CSS

L E Ç O N 6

137


césure

conteneur de contenu

disposition multicolonne

élément flottant positionné

exclusions CSS

flow-from

flow-into

flux nommé

iframe

régions CSS

source de contenu



Gestion de l'enchaînement du Gérer l’enchaînement du texte 3.3 texte avec CSS avec CSS

Présentation et utilisation des Gérer l’enchaînement du texte 3.3 régions pour contrôler avec CSS l'enchaînement du texte entre plusieurs sections

Stacey, gestionnaire du site Web de Media Malted Milk, a pu se familiariser avec HTML5 et CSS3 avec votre aide. Elle aimerait en savoir plus sur les techniques de gestion de flux de contenu à l'aide de CSS3. Elle souhaite préparer une présentation électronique sur les régions CSS, la disposition multicolonne, la césure et les exclusions CSS, puis présenter ces informations au personnel au cours d'un déjeuner-colloque la semaine prochaine.

■ Gestion de l'enchaînement du texte avec CSS

Historiquement, la gestion du flux de contenu était une procédure effectuée manuellement dans les documents HTML. Désormais, les régions et les exclusions CSS ainsi que les dispositions à plusieurs colonnes permettent d'enchaîner le contenu de manière dynamique.

L'ESSENTIEL

138 | Leçon 6

Les éditeurs de logiciels comme Adobe et Microsoft ont su paramétrer avec une grande précision la mise en page complexe de publications imprimées telles que les magazines, les journaux et les livres. Adobe InDesign, Microsoft Publisher et même Microsoft Word 2010 gèrent de manière efficace l'enchaînement du contenu dans les colonnes. InDesign et Publisher sont particulièrement efficaces lorsqu'il s'agit de répartir le contenu dans les zones non contiguës (adjacentes) d'un document, parfois séparées par des images, des boîtes de contenu voire des pages. Les logiciels de publication assistée par ordinateur permettent d'enchaîner facilement le contenu entre les différentes zones. Ainsi, lorsqu'une zone est modifiée, le contenu est correctement redistribué dans les autres zones connectées.Depuis des années, l'enchaînement du contenu de documents HTML représentait un véritable défi pour les concepteurs Web et les concepteurs d'applications. Dans un document HTML, l'affichage d'une disposition complexe requiert le même positionnement flexible de boîtes que celui offert par les logiciels de publication assistée par ordinateur, mais les outils nécessaires pour ce type d'enchaînement ne sont disponibles que depuis très peu de temps.Microsoft et Adobe ont collaboré avec le groupe W3C pour créer le concept de régions CSS pour l'enchaînement de contenu Web. Les régions CSS permettent aux développeurs d'organiser de manière dynamique le contenu de plusieurs boîtes, ou conteneurs, dans les documents HTML avec des dispositions fluides. Le contenu s'adapte et s'affiche correctement, que l'utilisateur consulte le document sur un moniteur d'ordinateur de grand format ou sur l'écran d'une tablette.Si CSS3 permet d'utiliser la disposition multicolonne pour répartir le contenu dans plusieurs colonnes (voir la figure 6-1), les régions CSS permettent de mieux contrôler l'enchaînement du contenu dans le cas de dispositions plus complexes. Pour combiner les régions CSS, vous devez utiliser des techniques de disposition CSS, notamment les colonnes, les boîtes flexibles et les dispositions en grille.

PRÊT POUR LA CERTIFICATIONComment faut-il utiliser CSS pour gérer le flux de contenu de texte dans un document HTML ?3.3

La césure, qui coupe les mots entre les syllabes en fin de ligne, est également importante pour des mises en page fluides, car elle permet de justifier l'ensemble des paragraphes indépendants ainsi que ceux contenus dans les colonnes. Les éléments flottants positionnés, désormais appelés exclusions CSS, vous permettent d'entourer complètement de texte des images, des formes ou des conteneurs de texte.Cette leçon aborde les régions CSS, la disposition multicolonne CSS3, la césure CSS3 et les éléments flottants positionnés. Vous apprendrez comment enchaîner et présenter le contenu dans des dispositions HTML capables de s'ajuster de manière dynamique.

Microsoft recommande d'utiliser les régions CSS pour la mise en page et JavaScript lors du développement d'applications Windows Store dans Windows 8 et Internet Explorer 10.

REMARQUE*

PLUS D’INFORMATIONSPour plus d'informations sur les régions CSS, la césure et la disposition à plusieurs colonnes, Microsoft et Adobe proposent des ressources qu'il est utile de consulter. Rich page layout with HTML et CSS3 » (Régions CSS3 : Mise en page enrichie avec HTML et CSS3) à l'adresse http://adobe.ly/kN7MUy. Pour accéder aux informations fournies par Microsoft, consultez la page Web « CSS » à l'adresse http://msdn.microsoft.com/fr-fr/library/hh673536(v=VS.85).aspx.

Figure 6-1

Disposition Web avec des colonnes

Illus

tratio

n: ©

Meg

an T

amac

cio/

iSto

ckph

oto

✚

Gestion de l’enchaînement du texte avec CSS | 139

■ Présentation et utilisation des régions pour contrôler l'enchaînement du texte entre plusieurs sections

Les régions CSS vous permettent d'enchaîner le contenu entre les différentes zones, adjacentes ou non, d'un document HTML. Les régions CSS représentent des zones (régions) définies d'un document HTML dans lesquelles le contenu peut être réparti. Lorsqu'une région ne peut pas recevoir la totalité du contenu, le reste du contenu est automatiquement inséré dans la région suivante. Ceci est similaire au fonctionnement des programmes de mise en page.

L'ESSENTIEL

Dans un document HTML standard, vous pouvez afficher le contenu dans différentes sections ou zones, mais chaque zone est indépendante. Pour faire passer le texte de débordement d'une zone à l'autre, l'opération est généralement manuelle. Cette méthode ne convient pas vraiment à une situation dans laquelle un utilisateur redimensionne l'écran ou utilise des outils d'accessibilité, par exemple une loupe. Cette méthode ne permet pas non plus de basculer automatiquement entre le mode portrait et le mode paysage sur les tablettes et les smartphones. Les régions CSS représentent une solution à ce problème.Les régions CSS représentent des zones (régions) définies d'un document HTML dans lesquelles le contenu peut être réparti. Comme pour les programmes de mise en page, lorsque le contenu est trop volumineux pour s’insérer dans une région, le reste du contenu passe automatiquement dans la région suivante. (Voir la figure 6-2.) Si un utilisateur redimensionne l'écran sur lequel le document est affiché, ou s'il affiche le document sur un écran plus petit ou plus grand, le contenu est redimensionné et se redéroule automatiquement dans les diverses régions.

PRÊT POUR LA CERTIFICATIONQue sont les régions CSS ?3.3

Il n'est pas nécessaire que les régions soient adjacentes dans le document, et vous pouvez contrôler l'ordre dans lequel le contenu inséré s'affiche. La figure 6-3 illustre l'enchaînement d'un contenu dans des régions non contiguës. Ce type d'enchaînement est semblable à l'« enchaînement d'un article » ; il permet d'ajouter des citations et des encadrés à un document sans affecter l'enchaînement du contenu.

Figure 6-2

Flux de contenu avec les régions CSS

Figure 6-3

Flux de contenu non contigu entre les régions

140 | Leçon 6

Enchaînement dynamique du contenu à travers les conteneurs

Pour implémenter des régions CSS, vous devez spécifier une source de contenu et des conteneurs de contenu. Ces deux tâches sont effectuées à l'aide des propriétés CSS flow-into et flow-from .

Une source de contenu représente un ou plusieurs blocs de texte dans un document HTML identique ou distinct contenant les données à organiser à l’aide d’une disposition. Le contenu est également appelé « flux de contenu ».

Vous avez également besoin de conteneurs de contenu, c'est-à-dire les zones dans lesquelles le contenu est organisé. Un document HTML comportant des conteneurs de contenu sert de page maître, comme un modèle. Chaque conteneur est dimensionné et positionné à l'emplacement où vous souhaitez afficher le contenu ; mais au départ chaque conteneur est vide.

Dans la source de contenu, la propriété CSS flow-into est attribuée à l'élément qui contient le contenu à organiser. La valeur de cette propriété est appelée un flux nommé.

L'exemple suivant commence par du code CSS pour une source de contenu. La valeur de flow-into est « main », qui est le flux nommé. Dans la mesure où le contenu sera affiché à un autre emplacement (dans les conteneurs de contenu), cet élément source proprement dit ne sera pas visible sur la page HTML.

<style>#source { flow-into: main;}

.region { flow-from: main; background: #9ACD32;}</style>

<body><div id="source"> <p>Lorem ipsum dolor ...</p></div> <div id="region1" class="region"></div> <div id="region2" class="region"></div> <div id="region3" class="region"></div></body>

PRÊT POUR LA CERTIFICATIONQue représentent une source de contenu et un conteneur de contenu par rapport aux régions CSS ?3.3

PRÊT POUR LA CERTIFICATIONComment contrôler l'enchaînement du texte entre plusieurs régions ?3.3

Le W3C définit les régions CSS dans la spécification relative aux régions CSS, encore en cours de rédaction à ce jour. Ainsi, à l'instar des boîtes flexibles et des grilles décrites dans la leçon 5, il convient d'utiliser le préfixe du fournisseur avec les noms de propriétés. L'utilisation du préfixe de fournisseur est abordée dans l'exercice étape par étape suivant.

REMARQUE*

Dans ce même exemple, la propriété CSS flow-from crée le conteneur de contenu, qui est une région CSS. La valeur de la propriété flow-from doit correspondre à la valeur du flux nommé de la propriété flow-into C'est ainsi que sont associés la source de contenu et le conteneur de contenu. (Dans l'exemple de cette section, la source de contenu et


les conteneurs de contenu se trouvent dans le même document HTML pour plus de commodité. Dans une application réelle, vous utiliserez probablement un document HTML distinct pour la source et les conteneurs.)

Lorsqu'un navigateur affiche la page avec les conteneurs de contenu, le contenu est réparti dans les conteneurs et s'affiche à l'écran, comme illustré à la figure 6-4. Si vous redimensionnez l'écran, le contenu se redéroule tel qu'illustré à la figure 6-5.

Vous pouvez également utiliser plusieurs sources et affecter la propriété flow-into à plusieurs éléments. Le contenu est extrait de la source dans l'ordre dans lequel il apparaît dans le modèle DOM (Document Object Model). C'est ce que l'on appelle l'ordre des documents.

Le modèle DOM a été présenté dans la leçon 1, mais il est utile d'y revenir ici. Le modèle DOM est une spécification du W3C qui décrit la structure des documents HTML et XML (Extensible Markup Language) de manière à permettre à un navigateur Web de les manipuler. Le modèle DOM permet aux programmes et aux scripts de mettre à jour le contenu, la structure et les styles à la volée ; n'importe quel élément d'un fichier HTML ou XML peut ainsi être modifié.

REMARQUE*

Figure 6-4

Flux de contenu dans des conteneurs

Figure 6-5

Le redimensionnement de l'écran redéroule le contenu

142 | Leçon 6

DÉBORDEMENT DU TEXTEAfin que les régions CSS fonctionnent, l'enchaînement du contenu ne doit pas affecter la hauteur d'une région ; vous devez définir la hauteur des régions dans CSS de manière à ce qu'elles ne soient pas flexibles. Une région reçoit autant de contenu que possible, puis le reste du contenu est inséré dans la région suivante.S'il reste du contenu une fois toutes les régions remplies, l'un des trois scénarios suivants peut se produire. L'excès de contenu de la dernière région peut :• Êtretronqué• Continuer à déborder et être visible• Continuer à déborder, mais être masqué

Vous pouvez contrôler la façon dont la dernière région gère le débordement du contenu à l'aide des propriétés region-overflow et overflow.region-overflow a la valeur auto ou break. À l'aide de la valeur auto, vous définissez la propriété overflow du contenu selon que celui-ci doit être visible ou masqué. Par exemple, si vous souhaitez que le contenu continue à déborder et qu'il soit visible, utilisez la syntaxe suivante :

.region { region-overflow:auto; Débordement visible}

La figure 6-6 montre le contenu visible qui déborde au-delà de la dernière région.

L'affectation de la valeur break à la propriété region-overflow empêche le contenu de déborder au-delà de la dernière région, tronquant le contenu à cet emplacement. La syntaxe est la suivante :

.region { region-overflow:break;}

IMPLÉMENTATION MICROSOFT DES RÉGIONS CSSLa méthode utilisée par Microsoft pour l'implémentation des régions CSS diffère légèrement de la version de W3C décrite précédemment. Microsoft utilise des iframes, qui désignent des mini-boîtes sur une page Web dont le contenu externe est intégré dans un document HTML, telle que la source de contenu. Vous devez également utiliser le préfixe du fournisseur -ms- avec les propriétés flow-into et flow-from.

Figure 6-6

Débordement de contenu visible


L'exemple suivant illustre un élément iframe avec un ID unique, que vous ajoutez à une page maître :

<iframe id="main-data-source" src="source.html" />

Ensuite, vous créez le flux nommé à l'aide d'un sélecteur CSS qui spécifie la source de données :

#main-data-source { -ms-flow-into: main; }

Pour créer des conteneurs de contenu, assignez un nom de classe aux éléments que vous souhaitez utiliser en tant que conteneurs :

<div class="region"></div> <div class="region"></div>

L'utilisation de region dans les deux cas n'est pas une erreur ! Tout comme pour l'application d'une règle CSS, vous pouvez identifier les régions à l'aide d'un nom de classe partagé (comme dans cet exemple) ou les répertorier à l'aide d'ID individuels (comme dans le premier exemple).

REMARQUE*

Créez ensuite un sélecteur CSS qui spécifie la source de données permettant d'accepter le flux de contenu :

.region { -ms-flow-from: main; }

Si vous comparez ces code et balisage spécifiques à Microsoft à l'exemple général illustré précédemment, il est possible d'identifier assez aisément les similitudes.

Il convient de noter plusieurs autres éléments se rapportant à la version de Microsoft des régions CSS, certains pouvant figurer dans l'examen 98-375 :

• msRegionUpdate : permet de manipuler de manière dynamique les régions• msRegionOverflow : gère le débordement de contenu, à l'instar de la propriété region-overflow

• msGetRegionContent : méthode de script définie par Microsoft comme renvoyant « une matrice d'instances Range correspondant au contenu du flux de région qui se trouve dans la région »

Vous rencontrerez peut-être ces éléments lorsque vous recherchez ou développez des régions CSS pour Windows 8 ou Internet Explorer 10.

CRÉER DES RÉGIONS CSS

PRÉPAREZ-VOUS. Pour créer des régions CSS fixes, procédez comme suit :

1. Dans un outil d'édition ou un outil de développement d'applications, créez un document HTML incluant le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Exemple de régions CSS</title><style type="text/css">

144 | Leçon 6

body, html { height:100%; width:100%; }

body{ famille de polices sans serif; color: black; font-size: large;}

#source{ -webkit-flow-into: main; }

.region{ -webkit-flow-from: main; margin: 0 25px 0 0; background: #EEE8AA; padding: 20px; }

#region1{ width: 20%; height: 50%; float: left; }

#region2{ width: 20%; height: 50%; float: left; }

#workarea{ position: absolute; padding: 25px; }

</style></head>

<body>

<div id="source"> <p>Lorem ipsum dolor . . . mollis a ipsum.</p></div>

<div id="workarea"> <div id="region1" class="region"></div> <div id="region2" class="region"></div></div>

</body></html>

Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du contenu a été omise à des fins de présentation. Dans votre document HTML, incluez un paragraphe de texte factice comportant entre 8 et 10 lignes.

2. Enregistrez le fichier sous L6-regions-exercise.html.

3. Appliquez le style gras à quelques mots, au milieu du paragraphe environ.

4. Réenregistrez le fichier.


Figure 6-7

Enchaînement de contenu dans des conteneurs de régions CSS

5. Notez que le code CSS utilise le préfixe de fournisseur -webkit- . Vous devez utiliser un indicateur de ligne de commande pour activer les régions CSS dans le navigateur. Pour ce faire, sélectionnez Démarrer, tapez le nom du navigateur dans la zone Rechercher, cliquez avec le bouton droit de la souris sur le nom du navigateur dans la liste de résultats, puis sélectionnez Propriétés. La boîte de dialogue Propriétés s'affiche. Dans le champ Cible, positionnez le curseur à la fin du champ, entrez un espace et tapez --enable-css-regions.

6. Cliquez sur OK. 7. Ouvrez le fichier L6-regions-exercise.html dans le navigateur Web. Redimensionnez la

fenêtre du navigateur de façon à ce que le contenu s'affiche dans les conteneurs et que le contenu en gras soit positionné dans le conteneur de gauche. Les résultats doivent ressembler à ceux de la figure 6-7.

8. Réduisez la taille de la fenêtre du navigateur pour voir l'effet du débordement du contenu.

9. Comment empêcher le débordement du contenu dans le deuxième conteneur ? Apportez les modifications nécessaires au code CSS, réenregistrez le fichier et affichez les résultats dans le navigateur.


✚ PLUS D’INFORMATIONSReportez-vous à la page Web « CSS Regions Module Level 3 » du W3C à l'adresse http://www.w3.org/TR/2012/WD-css3-regions-20120823// pour obtenir les dernières informations sur l'implémentation des régions CSS. Vous pouvez réaliser un exercice pratique à l'aide des régions CSS sur le site Web de Microsoft à l'adresse http://bit.ly/veOZX2. Cette page peut nécessiter l'utilisation d'Internet Explorer 10 pour un rendu correct).

Utilisation des colonnes et de la césure pour optimiser la lisibilité du texte

CSS3 vous permet de créer des dispositions à plusieurs colonnes dont le fonctionnement est similaire à celui de la fonctionnalité de colonnes de Microsoft Word. Vous pouvez également activer la césure afin de couper correctement les mots à la fin des lignes. Ceci évite que les longs mots sautent à la ligne suivante, laissant un espace à la fin de la ligne précédente.

Parmi les nouvelles fonctionnalités de CSS3 figurent la césure et les dispositions à plusieurs colonnes. À l'instar des journaux, vous pouvez maintenant créer des documents HTML comportant plusieurs colonnes qui sont redimensionnées en fonction de la taille de l'écran de l'utilisateur. La césure permet de couper les mots entre les syllabes en fin de ligne, de façon à créer une marge droite plus uniforme et éliminer les espaces vides dans les paragraphes.

146 | Leçon 6

Tableau 6-1

Propriétés multicolonnes utilisées dans CSS3

CRÉATION DE COLONNESLes propriétés CSS3 d’une disposition multicolonne permettent de créer des colonnes en répartissant le texte sur plusieurs colonnes, de spécifier l’espace entre les colonnes (espacement), d'afficher des lignes verticales (règles) entre les colonnes et de définir la position des sauts de colonne.

Les principales propriétés CSS utilisées pour créer et manipuler plusieurs colonnes d'un document HTML sont les suivantes :

• column-count : définit le nombre de colonnes que doit comporter un élément ; peut également utiliser la propriété columns avec les valeurs de propriétés set column-count et column-width simultanément

• column-gap : spécifie l'espacement entre les colonnes, également appelée reliure• column-rule : crée une ligne verticale dans l'espace qui sépare les colonnes et définit la largeur,

le style (ligne simple ou double, trait, pointillés, 3D, etc.) et la couleur de la règle

La disposition multicolonne CSS3 utilise le concept de la « zone de colonnes » pour désigner le conteneur qui renferme le contenu et l'affiche dans des colonnes. La zone de colonnes se trouve entre la zone de contenu et le contenu dans le modèle de boîte CSS original. (Reportez-vous à la leçon 5 si vous souhaitez passer en revue les informations se rapportant au modèle de boîte.)

Le tableau 6-1 répertorie toutes les propriétés de colonne qui fonctionnent dans CSS3.

(suite)


break-after

auto always avoid left right page column region avoid-page avoid-column avoid-region

Insère un saut de ligne après la zone de colonnes générée

break-before (identique à break-after)

Insère un saut de ligne avant la zone de colonnes générée

break-inside auto avoid avoid-page avoid-column avoid-region

Insère un saut de ligne à l'intérieur de la zone de colonnes générée

column-count integer auto

Définit le nombre de colonnes utilisées par un élément

column-fill auto balance

Définit comment les colonnes sont remplies ; répartit le contenu de manière uniforme entre les colonnes, si possible, ou les remplit de manière séquentielle


Tableau 6-1

Suite

Voyons maintenant comment fonctionne le code CSS. Le code suivant utilise la propriété column-count pour créer trois colonnes en utilisant le texte du balisage HTML suivant :

<head> <style> .tricolumn { column-count: 3; } </style></head>

<body><h2>Trois colonnes</h2><div class="tricolumn">Lorem ipsum . . . orci.</div></body>

Dans la mesure où les colonnes CSS3 sont encore en cours de création, il conviendra peut-être d'ajouter des préfixes de fournisseur aux noms de propriétés associés aux colonnes. Dans le cas de cet exemple, nous avons modifié le code comme suit pour les quatre principaux navigateurs :

<style> .tricolumn { -ms-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -webkit-column-count: 3; } </style>

PRÊT POUR LA CERTIFICATIONComment créer plusieurs colonnes dans un document HTML à l'aide de CSS ?3.3


column-gap length normal

Spécifie l'espacement entre les colonnes

column-rule column-rule-width column-rule-style column-rule-color transparent

Propriété abrégée qui définit les proprié-tés column-rule-width, column-rule-style et column-rule-color au même emplace-ment dans une feuille de style

column-rule-color color Spécifie la couleur de la règle entre les colonnes

column-rule-style border-style Spécifie le style de la règle entre les colonnes, par exemple ligne unie, ligne double, pointillés et ainsi de suite

column-rule-width border-width Spécifie la largeur de la règle entre les colonnes

column-span none all

Spécifie si un élément doit s'étendre sur aucune colonne ou toutes les colonnes

column-width length auto

Spécifie la largeur d'une ou de plusieurs colonnes

columns column-width column-count

Définit à la fois les propriétés column-width et column-count

148 | Leçon 6

Les résultats doivent ressembler à ceux de la figure 6-8 dans le navigateur Web de Mozilla Firefox.

Vous pouvez créer plusieurs colonnes à l'aide de la propriété columns Cette propriété permet de définir rapidement le nombre de colonnes et leur largeur dans une même déclaration. Le code suivant utilise la valeur auto pour la largeur des colonnes :

.tricolumn { columns: 3 auto; }

Une autre façon d'utiliser la propriété columns consiste à affecter une valeur numérique à column-width et à laisser la valeur column-count à auto. L'exemple suivant définit column-width sur 15em, ce qui signifie que l'élément à plusieurs colonnes aura une largeur de colonne de 15 ems (ou 15 fois la largeur de la taille de police du contenu de la colonne) :

columns: auto 15em;

Ajoutons maintenant une règle aux colonnes. Cette propriété définit la largeur, le style et la couleur de la règle entre toutes les colonnes. La syntaxe utilisée pour une ligne bleue pointillée de 3 pixels de large est la suivante :

column-rule: 3px dashed blue;

Pour contrôler la taille de l'espacement entre les colonnes, utilisez la propriété column-gap . Cette propriété utilise une valeur entière, comme illustré ci-dessous, ou le mot clé normal.

column-gap: 3em;

L'effet combiné de trois colonnes avec une règle de colonne et un espacement de 3em est illustré à la figure 6-9 (avec les préfixes de fournisseur appliqués). Le redimensionnement de la fenêtre du navigateur entraîne également le redimensionnement des colonnes et la redistribution du contenu dans celles-ci, comme illustré dans la figure 6-10.

Figure 6-8

Trois colonnes

Figure 6-9

Trois colonnes avec un espacement et une règle de taille supérieure

Figure 6-10

Le redimensionnement de la fenêtre du navigateur modifie les colonnes

Pour spécifier si un élément tel qu'un titre doit couvrir plusieurs colonnes, utilisez la propriété column-span. Cette propriété est définie sur le nombre de colonnes sur lequel


l'élément doit s'étendre ou utilise les mots clés all ou none , selon que l'élément s'étend sur toutes les colonnes ou ne s'étend sur aucune colonne, respectivement.

column-span: all;

Comme vous le voyez, les propriétés liées aux colonnes permettent un affichage souple du contenu, avec un nombre minimum de déclarations CSS.

CRÉER UNE DISPOSITION MULTICOLONNE

PRÉPAREZ-VOUS.Pour créer une disposition multicolonne, procédez comme suit : 1. Dans un outil d'édition ou un outil de développement d'applications, créez un document

HTML approprié incluant le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Trois colonnes</title> <style> .tricolumn { -moz-column-count: 3; } </style></head>

<body><h2>Mes trois colonnes</h2><div class="tricolumn">Lorem ipsum . . . orci.</div></body></html>

Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du contenu a été omise à des fins de présentation. Dans votre document HTML, incluez un paragraphe de texte factice comportant au moins 10 lignes. Notez également l'utilisation du préfixe de fournisseur Mozilla (-moz-). Il est possible d'inclure tous les préfixes de fournisseur, mais nous n'en avons utilisé qu'un par souci de simplicité.

2. Enregistrez le fichier sous L6-columns-exercise.html.

3. Définissez un espacement de 2 em entre les colonnes et une règle de colonne verte de 2 px de largeur. La syntaxe utilisée pour les propriétés column-gap et column-rule est la suivante :

.tricolumn { -moz-column-count: 3; -moz-column-gap: 2em; -moz-column-rule: 2px solid green; }

4. Réenregistrez le fichier et affichez-le dans le navigateur Web Firefox. Les résultats doivent ressembler à ceux de la figure 6-11.

Figure 6-11

Résultats de l'exercice comportant trois colonnes

150 | Leçon 6

5. Redimensionnez la fenêtre du navigateur pour voir l'effet sur les colonnes. 6. (Facultatif) Remplacez « Mes trois colonnes » par un titre plus long. Essayez d'étendre

le titre sur les trois colonnes. 7. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous

passez à l'exercice suivant au cours de cette session.

PLUS D’INFORMATIONSPour en savoir plus sur les dispositions à plusieurs colonnes, consultez la section « Multi-column regions » de la page Web « CSS Regions Module Level 3 » à l'adresse http://bit.ly/IA03vV, ainsi que la page Web du site W3schools.com se rapportant à la disposition multicolonne CSS3 à l'adresse http://bit.ly/KpY0Gz.

UTILISATION DE LA CÉSURELa césure désigne le processus permettant de connecter deux mots à l’aide d’un tiret (-) ou de couper les mots entre les syllabes en fin de ligne. La césure est particulièrement utile pour les dispositions utilisant plusieurs colonnes, car elle permet d'éliminer les espaces vides dans les colonnes lorsque les longs mots sautent automatiquement à la ligne suivante, ce qui produit un texte d'apparence plus professionnelle. En général, la césure automatique tente de justifier le texte sur la marge de droite.

CSS3 inclut désormais la propriété hyphens qui contrôle la césure. La propriété utilise les valeurs none, manual, et auto:

• auto : active la césure automatique des mots, en fonction des possibilités de saut de ligne dans les mots ou à l'aide d'une « ressource de césure spécifique à la langue »

• manual : active la césure uniquement en fonction des possibilités de saut de ligne dans les mots• none : empêche la césure

Le W3C souligne l'obligation de déclarer une langue à l'aide des attributs HTML lang ou XML xml:lang pour garantir une césure automatique correcte. Ceci signifie que si la totalité de votre document HTML utilise la même langue (français, par exemple) et que vous souhaitez activer la césure automatique, vous devez ajouter l'attribut à votre élément HTML ou déclaration doctype, par exemple :

<!doctype html><html lang="fr-fr">

ou<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Vous devez inclure le préfixe du fournisseur avec la propriété hyphens, par exemple -ms-hyphens pour Internet Explorer 10, -moz-hyphens pour Firefox et ainsi de suite.

Microsoft fournit d'autres propriétés de césure spécifiques aux environnements Microsoft, comme suit :

• -ms-hyphenate-limit-zone: spécifie la largeur de l'espace blanc de fin (appelé zone de césure, illustré à la figure 6-12) pouvant figurer dans une ligne avant l'application de la césure ; la valeur de la propriété est une longueur exprimée en pixels ou en pourcentage

• -ms-hyphenate-limit-chars : spécifie le nombre minimum de caractères pouvant être coupés dans un mot ; si le nombre de caractères est inférieur au nombre minimum, le mot n'est pas coupé

• -ms-hyphenate-limit-lines : spécifie le nombre maximum de lignes coupées consécutives pouvant contenir des mots coupés

PRÊT POUR LA CERTIFICATIONComment activer la césure dans un document HTML à l'aide de CSS ?3.3

Une liste des codes de langue est disponible sur la page Web « HTML Language Code Reference » du site W3schools.com à l'adresse http://www.w3schools.com/tags/ref_language_codes.asp

REMARQUE*

✚


Le balisage suivant avec CSS inline utilise la propriété -ms-hyphens dont la valeur est définie sur auto :

<!doctype html><html lang="fr-fr"><body> <div style="width: 200px; border: 2px solid orange;">

<p style="-ms-hyphens: auto; text-align: justify; font-size: 14pt;"> Hyphenation is the process of connecting . . . plus professionnelle.</p> </div></body></html>

Ce balisage s'affiche dans Internet Explorer 10, comme illustré dans la figure 6-13.

Figure 6-12

Zone de césure

Figure 6-13

Propriété -ms-hyphens rendue dans Internet Explorer 10

152 | Leçon 6

ACTIVERLACÉSUREAUTOMATIQUE

PRÉPAREZ-VOUS. Pour activer la césure automatique, procédez comme suit :

1. Dans un outil d'édition ou un outil de développement d'applications, créez un document HTML incluant le contenu suivant. Notez que nous utilisons le préfixe de fournisseur Mozilla à titre d'exemple dans cet exercice. Remplacez le texte du paragraphe commençant par « La césure est » par une biographie de quatre lignes sur vous-même, votre instructeur, un autre stagiaire ou une célébrité :

<!doctype html><html lang="fr-fr"><head> <meta charset="utf-8" /> <title>Exemple de césure</title></head><body> <div style="width: 200px; border: 2px solid orange;">

<p style="-moz-hyphens: auto; text-align: justify; font-size: 14pt;"> Hyphenation is . . . professionnelle.</p></body></html>

2. Enregistrez le fichier sous L6-hyphen-exercise.html et affichez-le dans le navigateur Web Firefox.


Bien que Microsoft propose plusieurs propriétés se rapportant à la césure dans les applications Internet Explorer 10 et Windows 8, la spécification du W3C relative à la césure continue d'évoluer. Actuellement, les travaux du W3C portent sur les propriétés hyphenate-character, hyphenate-limit-zone, hyphenate-limit-word, hyphenate-limit-lines, et hyphenate-limit-last.

REMARQUE*


Pour plus d'informations sur la césure, reportez-vous à la section « Hyphenation » (Césure) de la page « CSS Text Level 3 » du W3C à l'adressehttp://www.w3.org/TR/css-text-3/#hyphens. Microsoft fournit des informations sur les propriétés de césure spécifiques à Internet Explorer à l'adresse http://bit.ly/IQpgj4.

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

Un élément flottant positionné désigne une construction CSS qui permet de positionner des images, du texte et des boîtes n’importe où dans un document HTML, avec le texte qui s’agence ensuite autour de ces éléments. Les éléments flottants positionnés sont appelés exclusions CSS dans la spécification du W3C.


Vous avez peut-être remarqué que des éléments flottants ont été utilisés dans l'exercice sur les régions précédemment dans la leçon. La valeur left a été affectée aux deux éléments flottants, ce qui les fait apparaître côte à côte lors de l'affichage. Le positionnement était effectué par rapport au reste du document. En outre, si vous ne spécifiez pas la hauteur ou la largeur d'un élément flottant, celui-ci est automatiquement redimensionné pour s'adapter à son contenu.

Les exclusions CSS vous permettent de contrôler avec une grande précision la position d'un élément flottant, à une distance spécifiée à partir du haut, du bas, du côté gauche ou droit d'un conteneur. Vous pouvez également créer un élément flottant de n'importe quelle forme : rectangulaire, circulaire, triangulaire et n'importe quelle forme intermédiaire. Les autres éléments du document s'agencent simplement autour de l'exclusion.

L'exemple d'exclusions CSS illustré dans la figure 6-14 utilise une disposition à plusieurs colonnes avec une exclusion (référencée en tant qu'élément flottant positionné sur le site Web) au milieu. Vous pouvez déplacer la boîte n'importe où dans la disposition de l'exemple et voir comment le texte s'enroule automatiquement autour de la boîte bleue.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'un élément flottant positionné ou une exclusion CSS ?3.3

Figure 6-14

Élément flottant positionné dans une disposition multicolonne dans Internet Explorer 10

La figure 6-15 est un autre exemple d'exclusions dans lequel le texte entoure un cercle au milieu d'un paragraphe. Cette image inclut une marge autour du cercle, mais le texte pourrait épouser directement le contour du cercle.

Figure 6-15

Conteneur personnalisé sous la forme d'un cercle

154 | Leçon 6

Le tableau 6-2 répertorie les propriétés W3C se rapportant aux exclusions CSS.

Pour créer une exclusion CSS simple, utilisez la propriété wrap-flow: both pour afficher le contenu sur tous les côtés de l'exclusion. Une autre option consiste à utiliser wrap-flow: clear pour afficher le contenu au-dessus et au-dessous de l'exclusion, mais en laissant les zones sur les côtés vides.

Pour déclarer une forme d’exclusion, utilisez les propriétés shape-inside et shape-outside qui définissent le contenu et la forme générale d’une exclusion, respectivement.

Pour le moment, les exclusions CSS ne fonctionnent pas de manière fiable dans l'ensemble des principaux navigateurs. Si vous voulez tester les exclusions CSS, utilisez Internet Explorer 10. Pour utiliser les propriétés des exclusions CSS pour l'affichage dans Internet Explorer 10, ajoutez le préfixe du fournisseur -ms- . Microsoft utilise également les propriétés -ms-wrap-side et -ms-flow-wrap qui ne font pas partie de la spécification du W3C.

EXPLORER LES PROPRIÉTÉS D'EXCLUSIONS CSS

PRÉPAREZ-VOUS. Pour explorer les propriétés des exclusions CSS, procédez comme suit :

1. À partir d'un navigateur Web, accédez à la page Web « CSS Exclusions and Shapes Module Level 3 » du W3C, à l'adresse http://dev.w3.org/csswg/css3-exclusions/.

2. Parcourez les exemples d'exclusions CSS.

3. Dans Internet Explorer 10, copiez le code d'un exemple qui vous intéresse, créez un document HTML approprié et testez le fichier dans Internet Explorer 10.

Tableau 6-2

Propriétés des exclusions CSS Propriété Valeur Description

shape-outside auto shape url

Crée la forme générale d'une exclusion

shape-inside outside-shape auto shape uri

Modifie le contenu d'une forme

wrap wrap-flow wrap-margin wrap-padding

Méthode abrégée permettant de définir les propriétés wrap-flow, wrap-margin, et wrap-padding dans une même déclaration

wrap-flow auto both start end maximum clear

Spécifie comment les exclusions affectent le contenu inclus dans les éléments de niveau bloc

wrap-margin length Spécifie un décalage pour le contenu en dehors de l'élément

wrap-padding length Fournit une marge intérieure (décalage) pour le contenu à l'intérieur d'un élément

wrap-through wrap none

Spécifie comment le contenu doit habiller un élément d'exclusion


4. Consultez la page « Positioned Floats » du site Microsoft Internet Explorer Drive à l'adresse http://bit.ly/lQulDB. Accédez à la page à l'aide de chacun des principaux navigateurs. Sélectionnez chaque paramètre, un à la fois, pour vérifier les effets obtenus.

5. Fermez tous les programmes et fichiers ouverts.

✚ PLUS D’INFORMATIONSPour en savoir plus sur les exclusions CSS, reportez-vous à la page Web « CSS Exclusions and Shapes Module Level 3 » du W3C à l'adresse http://www.w3.org/TR/css3-exclusions/. La page Web intitulée « Exclusions » de Microsoft à l'adresse http://bit.ly/ImadRV fournit des informations sur les exclusions CSS et sur les propriétés spécifiques à Microsoft pour les applications Windows 8 et Internet Explorer 10.



• Historiquement, la gestion du flux de contenu était une procédure manuelle dans les documents HTML. Désormais, les régions et les exclusions CSS ainsi que les dispositions à plusieurs colonnes permettent d'enchaîner le contenu de manière dynamique.

• Les régions CSS vous permettent d'enchaîner le contenu entre les différentes zones, adjacentes ou non, d'un document HTML.

• Pour créer et manipuler des régions CSS, vous devez identifier une source de contenu et créer des conteneurs de contenu. Ces deux tâches sont effectuées à l'aide des propriétés CSS flow-into et flow-from.

• CSS3 vous permet de créer des documents HTML comportant plusieurs colonnes, tel un journal, qui sont redimensionnées en fonction de la taille de l'écran de l'utilisateur.

• La césure permet de couper les mots entre les syllabes en fin de ligne, de façon à créer une marge droite plus uniforme et éliminer les espaces vides dans les paragraphes.

• Un élément flottant positionné désigne une construction CSS qui permet de positionner des images, du texte et des boîtes n’importe où dans un document HTML, avec le texte qui s’agence ensuite autour de ces éléments. Les éléments flottants positionnés sont appelés exclusions CSS dans la spécification du W3C.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Les représentent des zones définies d’un document HTML dans

lequel le contenu est organisé. Elles sont utilisées à la place de plusieurs colonnes dans les dispositions complexes.

2. Les propriétés CSS3 d’une permettent de créer des colonnes en répartissant le texte sur plusieurs colonnes, de spécifier l’espace entre les colonnes (espacement), d'afficher des lignes verticales (règles) entre les colonnes et de définir la position des sauts de colonne.

3. Une peut représenter un ou plusieurs blocs de texte, dans un document HTML identique ou distinct, contenant les données à organiser à l’aide d’une disposition de régions CSS.

4. Les font partie des régions CSS dans lesquelles le contenu est organisé. 5. La désigne le processus permettant de connecter deux mots à l’aide

d’un tiret (-) ou de couper des mots entre les syllabes en fin de ligne. 6. Une est un élément flottant positionné qui permet de positionner des

images, du texte et des boîtes n’importe où dans un document HTML, avec le texte qui s’agence ensuite autour de ces éléments.


156 | Leçon 6

7. La propriété CSS crée un conteneur de contenu pour les régions CSS.

8. La propriété CSS identifie la source de contenu pour les régions CSS.

9. Un désigne un mini-document HTML intégré dans un document HTML.

10. La valeur de la propriété flow-into est appelée un .

Questions à choix multiples

Entourez la lettre correspondant à la meilleure réponse.

1. Vous créez une source de contenu de régions CSS nommée « main ». Parmi les syntaxes suivantes, laquelle est correcte ?a. flow-from: mainb. flow-into: mainc. main: flow-intod. main: flow-from

2. Vous créez un conteneur de contenu de régions CSS à associer à une source de contenu nommée « main ». Parmi les syntaxes suivantes, laquelle est correcte ?a. flow-from: mainb. flow-into: mainc. main: flow-intod. main: flow-from

3. Quelles sont les options permettant de traiter le texte de débordement dans le dernier conteneur d’une région CSS ? (Choisissez toutes les réponses applicables.)a. Troncationb. Continuer à déborder et être visiblec. Continuer à déborder, mais être masquéd. Duplication

4. Quelle est la différence entre l’implémentation des régions CSS de Microsoft et la spécification W3C ?a. Microsoft utilise la propriété flow-into.b. Microsoft utilise la propriété flow-from.c. Microsoft n'utilise pas d'iframes.d. Microsoft utilise des iframes.

5. Quelle propriété CSS3 crée des colonnes évolutives ?a. column-countb. add-columnsc. wrap-columnsd. Aucune des réponses ci-dessus

6. Quelle propriété CSS3 crée une ligne entre les colonnes dans une disposition à plusieurs colonnes ?a. break-insideb. column-fillc. column-gapd. column-rule

7. Parmi les propositions suivantes, laquelle n'est pas une valeur admise pour la propriété CSS3 hyphens ?a. noneb. linesc. manuald. auto


8. Parmi les propositions suivantes, laquelle permet de spécifier la largeur de l'espace que vous pouvez laisser en fin de ligne avant la césure ?a. -ms-hyphenate-limit-charsb. -ms-hyphenate-limit-linesc. -ms-hyphenate-limit-zoned. Aucune des réponses ci-dessus

9. Parmi les propositions suivantes, laquelle représente le terme précédemment utilisé pour les exclusions CSS ?a. éléments flottants gauche/droiteb. éléments flottants positionnésc. changeur de formed. DOM

10. Quelle propriété CSS3 crée une exclusion CSS ?a. wrap-flowb. flow-wrapperc. shape-wrapperd. wrapper-shape

Vrai/Faux


V F 1. Une exclusion CSS doit être de forme rectangulaire ou circulaire.V F 2. Vous devez déclarer une langue à l'aide des attributs HTML lang ou XML

xml:lang pour garantir une césure automatique correcte.V F 3. Vous pouvez centrer un titre sur plusieurs colonnes à l'aide de la propriété

column-span : all.V F 4. Pour combiner les régions CSS, vous devez utiliser des techniques de disposition CSS,

notammentlescolonnes,lesboîtesflexiblesetlesdispositionsengrille.V F 5. Dans les régions CSS, la valeur de la propriété flow-from doit correspondre à la

valeur de la propriété flow-into.


Scénario6-1:Enchaînementducontenudansunbulletind'informations

Changpu est stagiaire chez Media Malted Milk. Son responsable lui demande de créer la mise en page d'un bulletin d'informations en utilisant HTML5 et CSS3. Le bulletin d'informations sera consulté par les employés sur des ordinateurs, des tablettes et peut-être des smartphones. Changpu a créé un modèle avec des sections, des articles, un titre et un pied de page, et des encadrés. Il voudrait déplacer automatiquement certains éléments en cas de débordement vers d'autres zones de la disposition, mais il ne sait pas comment faire. Quel conseil lui donnez-vous ?

Scénario6-2:Distinctionentrelasourcedecontenuetlesconteneursde contenu

Changpu a décidé d'opter pour les régions CSS afin de créer un flux de contenu dynamique dans son bulletin d'informations, mais il ne comprend pas bien la différence entre les sources de contenu et les conteneurs de contenu. Comment pouvez-vous expliquer les deux fonctionnalités à Changpu ?

158 | Leçon 6


Scénario6-3:Présentationdesrèglesdecésure

Salih est un de vos amis d'université. Il crée un document HTML dont le contenu est en arabe pour son groupe linguistique, et il voudrait appliquer la césure au document. Il a utilisé la propriété hyphens et affiche le document dans un navigateur Web pris en charge, mais la césure n'est pas appliquée. Y a-t-il autre chose que Salih doit effectuer dans le document ?

Scénario6-4:PrésentationdesprincipesfondamentauxdesexclusionsCSS

Gladys, jusqu'ici membre de l'équipe de maintenance des sites Web, vient d'intégrer l'équipe de développement d'applications et du Web. Elle commence à étudier les exclusions CSS et vous voit passer devant son bureau. Elle s'arrête et vous demande de l'aider à comprendre les notions de base des propriétés des exclusions CSS.

L'équipe de développement de Malted Milk Media veut actualiser son site Web pour lui donner un look plus contemporain. Ils vous ont demandé de revoir les principales zones du site et de proposer des améliorations graphiques basées sur CSS3 qui aideront Malted Milk à se démarquer de la concurrence.

Gestion de l'interface graphique avec CSS

Les nouvelles propriétés CSS3 permettent d'offrir facilement une interface utilisateur plus graphique et plus attrayante pour les applications et les sites Web.L'ESSENTIEL


adapté au Web

animation

dégradé

dégradé linéaire

dégradé radial

échelle

filtre SVG

image clé

inclinaison

ombre portée

opacité

perspective

propriété border-radius

rotation

traduction

transformation

transition

transparence

WOFF (Web Open Font Format)

M A T 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'objectifdel'examenMTA

Gestion de l'interface graphique Gérer l'interface graphique 3.4 avec CSS avec CSS

CSS3 vous permet de créer de superbes éléments graphiques pour les sites Web et les applications et ainsi augmenter la satisfaction de l'expérience utilisateur. Vous pouvez créer des effets graphiques comme des coins arrondis et des ombres portées et appliquer des transformations 2D et 3D, comme les rotations et les mises à l'échelle. Des transitions

Gestion de l'interface graphique avec CSS

7

159

L E Ç O N

160 | leçon 7

et des animations, réalisées entièrement avec HTML et CSS3, donnent vie à du texte, des boîtes et des images statiques.

En outre, bon nombre de propriétés CSS3 s'appliquent à des éléments de zones de dessin, et SVG est livré avec un ensemble complet de filtres qui produisent des effets similaires aux propriétés CSS3.

PRÊT POUR LA CERTIFICATIONDe quelle manière pouvez-vous gérer l'interface utilisateur graphique avec CSS ?

3.4

PRÊT POUR LA CERTIFICATIONQuels nouveaux effets graphiques pouvez-vous créer avec CSS3 ?

3.4

PRÊT POUR LA CERTIFICATIONQuelle propriété CSS crée des coins arrondis autour des éléments de mise en page ?

3.4

CSS3 fournit la propriété border-radius pour créer des coins arrondis, la propriété box-shadow pour créer des ombres, la propriété opacity pour créer des effets de transparence, et les propriétés linear-gradient et radial-gradient pour créer des dégradés d'arrière-plan.

Création d'effets graphiques

CSS3 vous permet d'appliquer facilement plusieurs nouveaux effets graphiques aux éléments HTML et ainsi rendre l'interface utilisateur plus attrayante. Parmi les nouveaux effets graphiques on trouve : les coins arrondis, les ombres portées, la transparence et les dégradés d'arrière-plan. Vous pouvez même appliquer certaines de ces propriétés (comme les ombres) au texte.

CRÉATION D'ANGLES ARRONDISLa propriété CSS3 border-radius vous permet de créer des coins arrondis autour des éléments de mise en page, tels que les titres, les pieds de page, les barres latérales, les boîtes graphiques et les contours autour des images. border-radius définit une longueur qui est généralement exprimée en pixels ou en ems, mais qui peut également être en pourcentage. La longueur représente le rayon du cercle qui définit l'« arrondi » de chaque angle de la boîte. Plus le nombre est petit et moins le coin est arrondi. Certains navigateurs ont des difficultés à rendre le pourcentage correctement, vous devez donc utiliser une longueur en pixel ou en em lorsque cela est possible.Pour créer une boîte avec une bordure arrondie, le code et le balisage CSS doivent ressembler à ceci :

<!doctype html> <html><head> <meta charset="utf-8" /><title>Angles arrondis</title><style type="text/css"> div { padding: 40px 40px; background: dodgerblue; width: 400px; color: #fff; font-family: sans-serif; font-size: xx-large; border-radius: 25px; margin-left: auto; margin-right: auto; margin-top: 100px;}</style></head>

<body> <div>Boîte avec des coins arrondis</div></body></html>


La boîte avec des coins arrondis s'affiche dans un navigateur Web, comme illustré dans la figure 7-1.

Figure 7-1

Boîte avec quatre angles arrondis

Vous pouvez également arrondir un seul angle d'une boîte en utilisant les propriétés suivantes :• border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius

La figure 7-2 montre un exemple de chaque boîte.

Figure 7-2

Boîtes avec un coin arrondi chacune

Si vous envisagez d'arrondir un seul angle sur plusieurs éléments dans un document HTML, vous pouvez gagner du temps en créant une classe distincte pour chacun (coin supérieur gauche, coin supérieur droit, coin inférieur gauche et coin inférieur droit). La syntaxe devrait ressembler à ce qui suit :

.top-left-corner { border-top-left-radius:25px; }

La page Web de Microsoft « Exercices pratiques : Border-radius » à l'adresse http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_border-radius.htm vous permet de voir comment les modifications apportées à la longueur de la propriété border-radius affectent les coins d'une boîte.

REMARQUE*

CRÉATION D'OMBRESCSS3 présente la propriété box-shadow pour créer des ombres portées autour des éléments de mise en page. Une ombre portée désigne un effet visuel dans lequel un objet est répété en arrière-plan et déplacé légèrement au-dessous de lui-même pour créer l'illusion qu'il flotte au-dessus de son arrière-plan.

162 | leçon 7

La syntaxe CSS pour créer une ombre est la suivante :

box-shadow: h-shadow v-shadow blur spread color inset;

Les attributs h-shadow et v-shadow indiquent la position horizontale et verticale de l'ombre par rapport à la boîte. Ces deux attributs sont nécessaires. La valeur h-shadow définit le décalage horizontal de l'ombre. Une valeur positive décale l'ombre à droite de l'élément et une valeur négative à gauche. La valeur v-shadow définit le décalage vertical de l'ombre. Une valeur positive décale l'ombre à partir du bas de l'élément et une valeur négative à partir du haut.

Les autres attributs sont facultatifs. L'attribut blur, en pixels, indique le degré de flou appliqué à l'ombre. L'attribut spread indique la taille de l'ombre, color spécifie la couleur de l'ombre, et inset déplace l'ombre de l'extérieur vers l'intérieur de la boîte.

La figure 7-3 montre un exemple de la boîte aux coins arrondis avec une ombre portée. L'ombre a été créée à partir de ces valeurs qui spécifient sa position horizontale et verticale, son degré de flou et sa couleur :


PRÊT POUR LA CERTIFICATIONQuelle propriété CSS crée des ombres portées autour des éléments de mise en page ?3.4

Figure 7-3

Ombre portée appliquée à une boîte

CSS3 fournit également la propriété text-shadow pour appliquer un ombrage au texte. Les attributs sont les mêmes que la propriété box-shadow, sauf que spread et inset ne sont pas inclus.

CRÉER UNE BOÎTE AVEC DES COINS ARRONDIS ET UNE OMBRE

PRÉPAREZ-VOUS. Pour créer une boîte avec des coins arrondis et une ombre, effectuez les opérations suivantes: 1. Dans un outil d'édition ou de développement d'applications, créez un document HTML

incluant le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Angles arrondis</title><style type="text/css"> div { border: 3px solid #000; background-color: #000; padding: 1em; width: 300px; border-radius: 8px; margin-left: auto; margin-right: auto; margin-top: 100px; color: #fff; famille de polices sans serif; font-size: large; text-align: center;}</style></head>


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


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


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

164 | leçon 7

AJOUTER DE LA TRANSPARENCE À UNE BOÎTE

PRÉPAREZ-VOUS. Pour ajouter de la transparence à une boîte, effectuez les opérations suivantes : 1. Ouvrez le fichier L7-box-exercise.html dans un outil de développement d'application

ou d'édition, s'il n'est pas déjà ouvert.

2. Ajoutez la ligne suivante à l'élément de style :

opacité: 0.6;

3. Enregistrez le fichier sous le nom L7-tranparency-exercise.html et affichez les résultats dans un navigateur Web. La boîte doit ressembler à la figure 7-7.

Figure 7-7

Boîte avec des coins arrondis, avec une ombre portée et 40 % de transparence

PRÊT POUR LA CERTIFICATIONQuelle propriété CSS vous permet d'ajouter un dégradé d'arrière-plan à un conteneur HTML ?3.4

Figure 7-8

Dégradé linéaire du noir (en haut) vers le blanc (en bas)


APPLICATIONDEDÉGRADÉSÀL'ARRIÈRE-PLANUn dégradé est un changement progressif de couleurs, soit dans le même ton (par exemple, du vert foncé au vert clair), soit d'une couleur au début et d'une autre couleur à la fin (par exemple, un fondu du bleu vers le jaune). Les développeurs utilisent couramment des dégradés pour apporter un léger fondu dans les arrière-plans, les boutons, etc.

Les différents types (ou méthodes) de dégradés CSS3 sont les suivants :

• linear-gradient : crée un dégradé de haut en bas (ou vice-versa) ou en diagonale• radial-gradient : un dégradé radial commence à partir d'un point central et rayonne la

couleur vers les bords d'un conteneur• repeating-linear-gradient : crée un dégradé linéaire répétitif, qui se traduit par des bandes

droites d'un dégradé de couleurs• repeating-radial-gradient : crée un dégradé radial répétitif qui se traduit par des bandes

circulaires d'un dégradé de couleurs

Pour appliquer un dégradé à une image HTML, utilisez la propriété background avec l'une des méthodes de dégradés indiquées ci-dessus, avec des paramètres spécifiques à chaque méthode. Les valeurs possibles pour les méthodes sont répertoriées sur la page Web de W3C « Valeurs d'images CSS et contenu remplacé, niveau de module 3 » à l'adresse : http://dev.w3.org/csswg/css-images-3/#repeating-gradients.

Un dégradé linéaire est un dégradé horizontal, vertical ou diagonal. Pour créer un dégradé linéaire du noir au blanc, utilisez le code CSS suivant :

background: linear-gradient(black, white);

Le dégradé par défaut va de haut en bas. Vous pouvez insérer les valeurs « top », « bottom », « right » ou « left » comme première valeur pour contrôler la direction du dégradé. La figure 7-8 montre le dégradé noir et blanc qui s'étend de haut en bas.


Un dégradé diagonal est un type de dégradé linéaire qui s'étend d'un angle d'un conteneur en diagonale jusqu'à un autre angle. Le code pour un dégradé diagonal qui commence dans le coin inférieur gauche et se prolonge jusqu'au coin supérieur droit d'un conteneur est le suivant :

background: linear-gradient(45deg, white, black);

Les dégradés CSS3 prennent également en charge l'interpolation chromatique dans l'espace de couleur alpha, qui fait partie du modèle colorimétrique RVBA (rouge, vert, bleu et canal alpha), pour produire des transitions colorimétriques plus lisses en dégradés. (Vous avez probablement déjà vu des dégradés où il est facile de voir la transition d'une nuance à une autre : elles ressemblent à de fines bandes de couleur. L'interpolation chromatique dans l'espace de couleur alpha élimine cet aspect de « bande ».) Vous pouvez spécifier plusieurs délimitations de couleurs, avec une couleur RVBA et une position pour chacune.Voici un exemple d'utilisation des couleurs RVBA :

linear-gradient(to right, rgba(255,255,255,0)

Un dégradé radial commence à partir d'un point central et rayonne la couleur vers les bords d'un conteneur. Les valeurs des dégradés radiaux diffèrent légèrement des dégradés linéaires. La syntaxe générale des dégradés radiaux est :

radial-gradient(position,size and shape,color stops);

Examinons un exemple de dégradé radial qui commence par du bleu clair (indiqué par le code hexadécimal #99CCFF) au centre et passe à du bleu plus foncé (indiqué par #3D5266) sur les bords. Le code pourrait ressembler à celui qui suit (qui s'affiche dans un navigateur), tel qu'illustré dans la figure 7-9.

radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);

Figure 7-9

Dégradé radial

La première série de pourcentages (50 % 50 %) définit les valeurs centrales horizontales et verticales. Dans ce cas, le dégradé commence dans le centre de l'élément. La deuxième série de pourcentages (70 % 70 %) spécifie la taille et la forme du dégradé. Un dégradé radial ressemble à une ellipse, les pourcentages font donc référence aux rayons. Les codes hexadécimaux dans l'exemple sont les délimitations de couleurs. La première délimitation de couleur est le point de départ et la deuxième délimitation de couleur est le point d'arrivée.

Vous pouvez voir la propriété background-image dans certaines sources. Elle fonctionne comme la propriété background abrégée.REMARQUE*

APPLIQUERUNDÉGRADÉD'ARRIÈRE-PLANÀUNEBOÎTE

PRÉPAREZ-VOUS. Pour appliquer un dégradé d'arrière-plan à une boîte, effectuez les opérations suivantes : 1. Ouvrez le fichier L7-tranparency-exercise.html dans un outil de développement

d'application ou d'édition, s'il n'est pas déjà ouvert.

2. Ajoutez les lignes suivantes à l'élément de style :

background: linear-gradient(black, white);background: -ms-linear-gradient(black,white);background: -moz-linear-gradient(black,white);background: -o-linear-gradient(black,white);background: -webkit-linear-gradient(black,white);

166 | leçon 7

6. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'édition ouvert si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Notez l'utilisation de préfixes fournisseurs dans le code. Si vous incluez tous les principaux préfixes fournisseurs, il y a plus de chance qu'un plus grand nombre d'utilisateurs puissent afficher correctement votre document HTML. Comme indiqué dans la leçon 5, le fait d'inclure les quatre préfixes fournisseurs dans votre code ne garantit pas pour autant que la fonctionnalité CSS3 va fonctionner dans tous les navigateurs. Un navigateur qui ne prend pas une fonctionnalité en charge, ne l'affiche pas correctement, même avec un préfixe fournisseur. Certains navigateurs offrent une prise en charge partielle d'une fonctionnalité, ce qui peut produire des résultats mitigés. Pendant la phase de transition à CSS3, vous devez tester votre code dans tous les principaux navigateurs avant d'utiliser une fonctionnalité dans les documents HTML/CSS qui seront diffusés à un large public.

REMARQUE*

Figure 7-10

Boîte avec un fond dégradé appliqué

✚ PLUS D’INFORMATIONSLa page Web Microsoft « Explorer de nouvelles idées de conception et de mise en forme de sites Web » à l'adresse http://bit.ly/KtYr1W fournit des liens vers des informations sur la création de coins arrondis, d'ombres portées et bien plus encore. La page Web W3C « Couleurs CSS, niveau de module 3 » (en anglais) à l'adresse http://www.w3.org/TR/css3-color/ fournit des spécifications pour les propriétés de couleur et d'opacité. Vous pouvez également visiter le site Web W3schools.com et rechercher « CSS3 » et la rubrique de votre choix.

Les développeurs Web commencent à utiliser le Web Open Font Format (WOFF) pour améliorer les interfaces utilisateur avec à peu près toutes les polices disponibles ou des polices personnalisées. La possibilité d'utiliser n'importe quelle police est un grand changement par rapport aux restrictions pré-WOFF quant à l'utilisation des polices dans les documents HTML.

Présentation de la typographie et du format WOFF (Web Open Font Format)

La typographie est l'art d'assembler différents types de caractères, historiquement à des fins d'impression, et les polices jouent un rôle très important pour cela. Vous pouvez utiliser les propriétés liées aux polices CSS telles que font-family, font-size, font-style, font-variant, et font-weight pour appliquer un style aux documents HTML. Pendant des années, les développeurs Web et les développeurs d'applications se sont limités à un ensemble de polices standard, considérées comme adaptées au Web, ce qui signifie qu'elles sont généralement installées sur l'ordinateur d'un utilisateur et donc qu'elles s'affichent de manière uniforme dans la majorité des navigateurs Web.Les polices adaptées au Web ne fonctionnent pas dans toutes les situations. Par exemple, beaucoup d'entreprises utilisent des polices particulières pour identifier leur marque, et ces polices ne font pas souvent partie du jeu de polices Web sécurisé. Les concepteurs et les développeurs s'efforcent de rendre les sites intéressants, plus attrayants et uniques, ce qui ne peut pas toujours être fait avec les polices adaptées au Web.

XREF

La leçon 4 aborde les aspects de la typographie associés à CSS, comme les polices, les familles de polices, le monospace et la règle @font-face.

4. Supprimez la bordure (pas le rayon de la bordure), l'opacité et les lignes des ombres portées de CSS.

5. Enregistrez le fichier sous le nom L7-gradient-exercise.html et affichez-le dans différents navigateurs Web. Tous les navigateurs affichent-ils le dégradé ? La boîte doit ressembler à la figure 7-10 dans n'importe quel navigateur qui prend en charge les dégradés linéaires.


Pour utiliser une police non standard dans un en-tête, un titre ou un bloc de texte, les développeurs ont dû créer du contenu dans un programme de mise en page ou de graphiques, l'enregistrer-sous forme d'image, puis utiliser la balise <img> dans un document HTML. Cette méthode a plusieurs inconvénients :• Elle prend beaucoup de temps.• Elle interfère avec l'accessibilité des lecteurs de page, les images du texte ne pouvant

pas être lues à haute voix.• Elle réduit l'efficacité d'optimisation du référencement d'un site auprès d'un moteur de

recherche (SEO), car les moteurs de recherche recherchent du texte, pas des images du texte.Les développeurs ont également utilisé des polices incorporées, qui sont des ensembles de polices chargées sur leurs serveurs. Le concepteur insère un lien vers le jeu de polices dans un document HTML ou un fichier CSS, ce qui aide le navigateur à afficher les polices correctement. Bien que les polices incorporées soient encore largement utilisées, WOFF constitue une nouvelle technique qui est meilleure pour gérer les polices non standard.Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie au Web. Il permet aux développeurs Web d'utiliser des polices personnalisées (à peu près n'importe laquelle), sans se limiter aux polices Web standard. Les fichiers WOFF sont des polices True Type, OpenType ou Open Font Format compressées qui contiennent des métadonnées supplémentaires. Pour utiliser le WOFF, vous pouvez héberger des polices sur votre serveur ou utiliser un service de police du Web. Des polices gratuites sont disponibles à partir de plusieurs sources, comme fontsquirrel et Open Font Library. Parmi les services de police, on trouve FontFont et FontShop, entre autres. Ils nécessitent un abonnement payant, qui vous donne le droit d'utiliser les polices sur votre site Web pendant toute la durée de l'abonnement. Pour utiliser une police WOFF à partir du site d'un fournisseur de polices, par exemple, ajoutez la règle @font-face dans le fichier CSS, qui doit ressembler à ce qui suit :

<style>@font-face { font-family: "font-family-name"; src: url("http://website/fonts/fontfile") }</style>

Certaines polices WOFF fonctionnent mieux que d'autres selon le navigateur dans lequel elles sont affichées. Par exemple, là où un navigateur Web peut parfaitement rendre une police, un autre navigateur va afficher des polices bitmap ou avec des caractères gras inappropriés. Avant d'acheter une police WOFF ou un package de polices, veillez à rechercher la police sur le Web pour savoir si les autres développeurs ont rencontré des problèmes lors de son utilisation. Certains fournisseurs de polices permettent d'obtenir un aperçu des polices dans tous les principaux navigateurs avant de l'acheter.

PRÊT POUR LA CERTIFICATIONQuel est le but de WOFF (Web Open Font Format) ?3.4

✚ PLUS D’INFORMATIONSLa spécification WOFF se trouve sur le site Web W3C à l'adresse http://www.w3.org/TR/WOFF/. Pour mieux comprendre WOFF, consultez la page « Polices sur le Web » (en anglais) à l'adresse http://www.w3.org/Fonts/ et la page « Forum aux questions WOFF » (en anglais) à l'adresse http://www.w3.org/Fonts/WOFF-FAQ.html.

La propriété transform de CSS3 traduit, met à l'échelle, fait pivoter, incline et fait même tourner des éléments 2D et 3D.

Application des transformations 2D et 3D

En HTML5/CSS3, une propriété transform est un effet qui permet de modifier la taille, la forme et la position d'un élément. Les transformations sont soit en 2D ou en 3D. Il s'agit notamment de traduire (déplacer), de mettre à l'échelle, de faire pivoter, d'incliner (étirer) et de faire tourner des éléments.La propriété transform de CSS permet de spécifier les différents types de transformations apportées aux éléments HTML. La propriété transform utilise plusieurs méthodes pour les transformations en 2D et 3D, comme indiqué dans le tableau 7-1.

JavaScript ou une autre forme de script est requis pour afficher le déroulement d'une transformation 2D ou 3D. Sans scripts, vous pouvez uniquement afficher le résultat final d'une transformation.

REMARQUE*

168 | leçon 7

PRÊT POUR LA CERTIFICATIONQuelle propriété CSS transforme les éléments ?3.4

PRÊT POUR LA CERTIFICATIONQue signifie la traduction d'un élément ?3.4

Tableau 7-1

Méthodes pour la propriété transform

Valeur Description

matrix (n,n,n,n,n,n) Spécifie une transformation 2D à l'aide d'une matrice à six valeurs

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Spécifie une transformation 3D en utilisant une matrice 4 x 4 à 16 valeurs

perspective(n) Spécifie une vue en perspective d'un élément 3D qui a été transformé

rotation (angle) Fait pivoter un élément en 2D

rotate3d (x,y,z,angle) Fait pivoter un élément en 3D

rotateX (angle) Fait pivoter un élément en 3D sur l'axe des abscisses

rotateY (angle) Fait pivoter un élément en 3D sur l'axe des ordonnées

rotateZ (angle) Fait pivoter un élément en 3D sur l'axe z

scale (x,y) Met à l'échelle un élément en 2D (largeur et hauteur)

scale3d (x,y,z) Met à l'échelle un élément en 3D (hauteur, largeur et un vecteur arbitraire dans l'espace 3D)

scaleX (x) Met à l'échelle un élément en 3D sur l'axe des abscisses

scaleY (y) Met à l'échelle un élément en 3D sur l'axe des ordonnées

scaleZ (z) Met à échelle d'un élément en 3D le long de l'axe z (un vecteur dans un espace 3D)

skew (x-angle,y-angle) Incline un élément en 2D, le long de l'axe des abscisses et de l'axe des ordonnées

skewX (angle) Incline un élément en 3D sur l'axe des abscisses

skewY (angle) Incline un élément en 3D sur l'axe des ordonnées

translate (x,y) Traduit (déplace) un élément en 2D

translate3d (x,y,z) Traduit (déplace) un élément en 3D

translateX (x) Se traduit par un élément en 3D à l'aide de l'axe des abscisses

translateY (y) Traduit un élément en 3D à l'aide de l'axe des ordonnées

translateZ (z) Se traduit par un élément en 3D à l'aide de l'axe des abscisses

Maintenant que vous comprenez l'essence des transformations en 2D et 3D, regardons quelques exemples précis.

TRANSLATION 2DAppliquer une translation à un élément revient à le déplacer, sans le faire pivoter, l'incliner, ni faire tourner l'image. Pour déplacer un élément, utilisez la méthode translate() de CSS et indiquez les valeurs de l'axe des abscisses et de l'axe des ordonnées pour positionner l'élément par rapport à sa position d'origine ou par défaut. La valeur de l'axe des abscisses définit la position gauche de l'élément et l'axe des ordonnées spécifie la position supérieure. Par exemple, le code suivant déplace l'élément de 100 pixels de la gauche et de 50 pixels du haut :

transform: translate(100px,50px);


Figure 7-11

La boîte (déplacée) traduite apparaît dans le coin inférieur droit

Figure 7-12

La boîte mise à l'échelle est deux fois plus large et quatre fois plus grande que la boîte d'origine

MISE À L'ÉCHELLE 2DMettre à l'échelle un élément consiste à augmenter ou à réduire sa taille. Pour augmenter ou réduire un élément dynamiquement, utilisez la méthode scale() dans CSS et spécifiez les valeurs de l'axe des abscisses (largeur) et de l'axe des ordonnées (hauteur). Le code suivant, par exemple, permet d'obtenir un accroissement double de la largeur de l'élément par rapport à sa taille d'origine et une augmentation quadruple de la hauteur par rapport à sa taille d'origine :

transform: scale(2,4);

La figure 7-12 contient un exemple d'un élément mis à l'échelle.

PRÊT POUR LA CERTIFICATIONQue signifie la mise à l'échelle d'un élément ?3.4

TRADUIRE ET METTRE À L'ÉCHELLE UNE FORME 2D

PRÉPAREZ-VOUS. Pour traduire et mettre à l'échelle une forme 2D, effectuez les opérations suivantes : 1. Dans un outil d'édition ou de développement d'applications, créez un document HTML


<!doctype html> <html><head> <meta charset="utf-8" /> <title></title><style type="text/css"> div{padding: 20px 20px; background: tomato;width: 150px;height: 75px;color: #fff;font-family: sans-serif;font-size: x-large;}</style></head>

Un exemple d'un élément traduit est illustré dans la figure 7-11.

170 | leçon 7

<body><div>Cet élément peut se déplacer</div></body>

2. Enregistrez le fichier sous le nom L7-translate-exercise.html et affichez-le dans au moins deux navigateurs Web différents. La boîte devrait apparaître dans le coin supérieur gauche des fenêtres du navigateur.

3. Ajoutez les lignes suivantes à l'élément de style :

transform: translate(200px,100px);-ms-transform: translate(200px,100px);-moz-transform: translate(200px,100px);-o-transform: translate(200px,100px);-webkit-transform: translate(200px,100px);

4. Enregistrez le fichier et affichez-le dans les mêmes navigateurs Web. La boîte doit avoir été déplacée du bas vers la droite.

5. Pour redimensionner la boîte afin qu'elle soit deux fois plus large et deux fois aussi grande que celle d'origine, ajoutez scale(2,2) aux lignes de transformation, comme suit :

transform: translate(200px,100px) scale(2,2);-ms-transform: translate(200px,100px) scale(2,2);-moz-transform: translate(200px,100px) scale(2,2);-o-transform: translate(200px,100px) scale(2,2);-webkit-transform: translate(200px,100px) scale(2,2);

6. Remplacez le texte div par Cet élément peut être mis à l'échelle. 7. Enregistrez le fichier sous le nom L7-scale-exercise.html et affichez-le dans les navigateurs

Web. L'affichage doit ressembler à la figure 7-13.

Figure 7-13

La boîte a été déplacée et est deux fois plus grande que celle d'origine

8. Fermez le fichier, mais laissez l'outil d'édition et les navigateurs Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.


ROTATION 2D ET 3DLa rotation d'un élément consiste à lui appliquer un certain nombre de degrés dans le sens des aiguilles d'une montre. Pour faire pivoter un élément, utilisez la méthode rotate() dans CSS et spécifiez les degrés de rotation.Par exemple, le code suivant fait pivoter un élément de 30 degrés dans le plan 2D :

transform: rotate(30deg);

La figure 7-14 contient un exemple d'un élément 2D pivoté.

Figure 7-14

Image originale et image 2D pivotée

La rotation 3D utilise les méthodes rotateX() et rotateY() . Avec rotateX(), l'élément pivote autour de l'axe des abscisses et avec rotateY() l'élément pivote autour de l'axe des ordonnées.Le code suivant fait pivoter un élément à 180 degrés. Si l'élément contient du texte, le texte semble à l'envers après la rotation, comme illustré dans la figure 7-15. N'oubliez pas, pour voir l'effet 3D, JavaScript ou une autre forme de script est requis. Le contenu de la figure 7-15 est le résultat final de la rotation.

transform: rotateX(180deg);

PRÊT POUR LA CERTIFICATIONQuelle méthode de transformation fait pivoter un élément en 3D autour de l'axe des abscisses ?3.4

Figure 7-15

Image originale et image 3D pivotée sur l'axe des abscisses

L'utilisation de la méthode rotateY(180deg) avec un élément qui affiche du texte fait apparaître ce texte à l'envers, comme illustré dans la figure 7-16.

Figure 7-16

Image originale et image 3D pivotée sur l'axe des ordonnées

172 | leçon 7

INCLINAISON 2D ET 3DIncliner un élément consiste à l'étirer dans une ou plusieurs directions. Pour incliner un élément avec CSS, utilisez la méthode skew() et spécifiez les valeurs de l'axe des abscisses et de l'axe des ordonnées, en degrés, pour créer une forme angulaire. Par exemple, le code suivant fait pivoter un élément de 20 degrés autour de l'axe des abscisses et de 30 degrés autour de l'axe des ordonnées :

transform: skew(20deg,30deg);

La figure 7-17 contient un exemple d'un élément incliné.

L'inclinaison 3D utilise les méthodes skewX() et skewY() pour incliner un élément le long de l'axe des abscisses et de l'axe des ordonnées, respectivement. À titre d'exemple, le code suivant incline un élément de 45 degrés, comme illustré dans la figure 7-18.

transform: skewX(45deg);

Figure 7-17

Élément incliné

PRÊT POUR LA CERTIFICATIONQuelle méthode de transformation permet d'incliner un élément en 3D autour de l'axe des ordonnées ?

3.4

Figure 7-18

Inclinaison en 3D autour de l'axe des abscisses

FAIRE PIVOTER ET INCLINER UNE FORME 2D

PRÉPAREZ-VOUS. Pour faire pivoter et incliner une forme 2D, effectuez les opérations suivantes : 1. Ouvrez le fichier L7-scale-exercise.html dans un outil de développement d'application

ou d'édition, s'il n'est pas déjà ouvert.

2. Modifiez les lignes de transformation afin de remplacer l'échelle par une rotation de 30 degrés, comme suit :

transform: translate(200px,100px) rotate(30deg);-ms-transform: translate(200px,100px) rotate(30deg);-moz-transform: translate(200px,100px) rotate(30deg);-o-transform: translate(200px,100px) rotate(30deg);-webkit-transform: translate(200px,100px) rotate(30deg);

3. Remplacez le texte div par Cet élément est pivoté.


5. Pour incliner la boîte de 45 degrés, remplacez rotate par skew dans les lignes de transformation, comme suit :

transform: translate(200px,100px) skew(45deg);-ms-transform: translate(200px,100px) skew(45deg);-moz-transform: translate(200px,100px) skew(45deg);-o-transform: translate(200px,100px) skew(45deg);-webkit-transform: translate(200px,100px) skew(45deg);

6. Remplacez le texte div par Cet élément est incliné.

7. Enregistrez le fichier sous le nom L7-skew-exercise.html et affichez-le dans les navigateurs Web. L'affichage doit ressembler à la figure 7-20.

Figure 7-19

Boîte pivotée à un angle de 30 degrés

Figure 7-20

Boîte inclinée à un angle de 45 degrés

8. Fermez le fichier, mais laissez l'outil d'édition et les navigateurs Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

PRÉSENTATION DE LA PERSPECTIVE 3D, DES TRANSITIONS ET DES ANIMATIONSLa perspective, en termes de dessins et d'illustrations, est la convergence de lignes qui donne l'illusion de la profondeur. La propriété perspective 3D de CSS3 définit le rendu de la profondeur d'un élément 3D transformé dans un navigateur. des valeurs inférieures (entre 1 et 1 000) créent un effet plus prononcé qu'avec des valeurs plus élevées. Il est important de se rappeler que la perspective s'applique uniquement aux éléments 3D transformés.

La syntaxe générale pour la perspective est :

perspective: number;

Voici un exemple de perspective avec une rotation 3D appliquée :

perspective: 600; margin: 100px 0 0 50px;transform: rotate3d(0, 1, 1, 45deg);

Voici un exemple de balisage complet, il est illustré dans la figure 7-21 à l'aide d'un navigateur pris en charge par webkit.

<!doctype html> <html><head><style type="text/css"> div{padding: 40px 40px; background: #B8860B;width: 150px;

PRÊT POUR LA CERTIFICATIONQuel est le but de la propriété perspective 3D de CSS3 ?3.4

4. Enregistrez le fichier sous le nom L7-rotate-exercise.html et affichez-le dans les navigateurs Web. La boîte et le texte ont-ils pivoté comme illustré dans la figure 7-19 ?

174 | leçon 7

Maintenant, concentrons-nous sur les transitions et les animations. Une transition est le passage d'un état à un autre. Avec CSS, une transition est le changement de style d'un élément.

Un dégradé est comparable à un type de transition, en effet la couleur d'arrière-plan d'un conteneur passe d'une couleur à une autre. Toutefois, un dégradé est à proprement parler un élément statique : il est présent ou non. En CSS3, l'action d'une transition est visible. Les changements s'affichent à l'écran de façon animée comme s'ils étaient alimentés par un script, mais aucun script n'est impliqué.

La propriété transition vous permet de créer une transition CSS3. Vous devez au minimum spécifier que la propriété CSS soit prise en compte pendant la période de transition. Il peut s'agir de la position, de la taille, de la couleur, de la couleur d'arrière-plan, de l'interlettrage, de la rotation, etc. d'un élément. La plupart des transitions spécifient également la longueur (durée) de la transition. Si la valeur de durée n'est pas définie, la valeur par défaut est de 0. Vous devez spécifier des transitions CSS3 en utilisant les propriétés décrites dans le tableau 7-2.

color: #fff;font-family: sans-serif;font-size: xx-large;}div#div2{margin: 100px;perspective: 600; margin: 100px 0 0 50px;-ms-perspective: 600; margin: 100px 0 0 50px;-moz-perspective: 600; margin: 100px 0 0 50px;-o-perspective: 600; margin: 100px 0 0 50px;-webkit-perspective: 600; margin: 100px 0 0 50px;

transform: rotate3d(0, 1, 1, 45deg); -ms-transform: rotate3d(0, 1, 1, 45deg); -moz-transform: rotate3d(0, 1, 1, 45deg); -o-transform: rotate3d(0, 1, 1, 45deg); -webkit-transform: rotate3d(0, 1, 1, 45deg); }</style></head>

<body> <div>Élément d'origine</div> <div id="div2">Élément transformé</div></body></html>

Figure 7-21

Perspective appliquée avec une rotation de 45 degrés

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une transition ?3.4


Voici un exemple d'une transition simple qui affiche du texte dans une boîte. Lorsqu'un utilisateur passe le pointeur de la souris sur la boîte, le texte est modifié. La figure 7-22 montre la boîte avant et après l'opération.

<style type="text/css">#wrapper { transition-property: opacity; transition-duration: 3s; transition-delay: 1s; transition-timing-function: linear; }#wrapper #before, #wrapper:hover #after { opacité: 1; }#wrapper:hover #before, #wrapper #after { opacité: 0; }</style></head>

<body><div id="wrapper"> <div id="before">Maintenant tu me vois</div> <div id="after">Maintenant tu ne me vois plus</div></div></body>

Tableau 7-2

Propriétés de transition CSS3 Propriété Description

transition Est la façon abrégée de spécifier des paramètres pour transition-property, transition-delay, transition-duration et transition-timing-function à la fois

transition-property Spécifie les propriétés CSS qui devront faire l'objet d'une transition

transition-delay Spécifie la durée qui s'écoule après les changements de valeur et avant le début de la transition (en secondes ou millisecondes)

transition-duration Spécifie la durée de la transition en secondes ou en millisecondes. Commence après la propriété transition-delay

transition-timing-function Spécifie la courbe de vitesse de l'effet de transition. Permet à une transition de modifier la vitesse par rapport à la durée Valeur par défaut = ease, elle augmente la vitesse de

l'animation, puis la ralentit vers la fin

Figure 7-22

Cette transition simple masque le texte et affiche le nouveau texte lorsque le pointeur de la souris passe dessus

176 | leçon 7

CRÉER UNE TRANSITION À L'AIDE DE CSS

PRÉPAREZ-VOUS. Pour créer une transition à l'aide de CSS, effectuez les opérations suivantes : 1. Dans un outil d'édition ou de développement d'applications, créez un document HTML


<!doctype html> <html><head> <meta charset="utf-8" /> <title>Exemple de transition et d'opacité</title><style type="text/css"> #wrapper {padding: 40px 40px; background: dodgerblue;width: 200px;font-family: sans-serif;font-size: xx-large;margin-left: auto;margin-right: auto;margin-top: 100px;color: #fff;}

#wrapper #front, #wrapper:hover #back {opacité:1;-ms-opacity: 1;-moz-opacity: 1;-o-opacity: 1;-webkit-opacity: 1;

transition-property: opacity;-ms-transition-property: opacity;-moz-transition-property: opacity;-o-transition-property: opacity;-webkit-transition-property: opacity;

transition-duration: 1s;-ms-transition-duration: 1s;-moz-transition-duration: 1s;-o-transition-duration: 1s;-webkit-transition-duration: 1s;

transition-timing-function: linear;-ms-transition-timing-function: linear;-moz-transition-timing-function: linear;-o-transition-timing-function: linear;-webkit-transition-timing-function: linear;}

#wrapper:hover #front, #wrapper #back {opacité: 0;-ms-opacity: 0;-moz-opacity: 0;-o-opacity: 0;


-webkit-opacity: 0;}</style></head>

<body><div id="wrapper"> <div id="front">Knock knock</div> <div id="back">Qui est là ?</div></div>

</body></html>

2. Enregistrez le fichier sous le nom L7-transition-exercise.html. Ouvrez le fichier dans chacun des principaux navigateurs Web. Passez le pointeur de votre souris sur la boîte dans chaque navigateur. L'affichage doit ressembler à la figure 7-23.

Figure 7-23

Transition simple

3. Pour ajouter un délai supplémentaire, entrez ce qui suit après les lignes de la propriété transition-duration :

transition-delay: 1s;-ms-transition-delay: 1s;-moz-transition-delay: 1s;-o-transition-delay: 1s;-webkit-transition-delay: 1s;

4. Enregistrez le fichier sous le nom L7-transition-delay-exercise.html. Ouvrez le fichier dans chaque navigateur Web et passez le pointeur de votre souris sur la boîte. Avez-vous remarqué le décalage ?

5. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Une animation représente l'affichage d'une séquence d'images statiques à un rythme assez rapide pour créer l'illusion d'un mouvement. Comme les transitions, les animations affectent les transformations et les propriétés CSS, et vous pouvez également spécifier les minutages. La différence réside dans le fait que les animations utilisent des images clés, une construction qui vous permet de modifier les valeurs n'importe où dans l'animation. Vous pouvez également mettre en pause, reprendre et inverser les animations.

Pour créer une animation, commencez par spécifier un style CSS dans la règle @keyframes. Par exemple, une règle pour une disparition en fondu pourrait ressembler à ce qui suit :

@keyframes fadeout {from { opacity: 1; }to { opacity: 0; }}

Spécifiez ensuite les propriétés de l'animation. Plusieurs des propriétés utilisées dans les animations sont semblables aux transitions. Les propriétés de l'animation sont décrites dans le tableau 7-3.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une image-clé ?

3.4

178 | leçon 7

Ce qui suit est un extrait de code qui configure les propriétés d'animation pour une disparition en fondu :

div { animation-duration: 3s; animation-delay: 0s; animation-timing-function: ease; }div:hover { animation-name: fadeout; }

Cette disparition en fondu commence dès que l'utilisateur place le pointeur de la souris sur un élément div, elle dure pendant trois secondes et utilise et facilite la fonction de chronométrage.

CRÉER UNE ANIMATION EN UTILISANT CSS

PRÉPAREZ-VOUS. Pour créer une animation à l'aide de CSS, effectuez les opérations suivantes : 1. Dans un outil d'édition ou de développement d'applications, créez un document HTML


<style type="text/css"> div { width: 200px; height: 200px; background: limegreen; animation: a1 3s; }

@keyframes a1 { from {background: limegreen;} to {background: dodgerblue;} } </style> </head>

Tableau 7-3

Propriétés d'animation de CSS3

Propriété Valeurpardéfaut Description

@keyframes Crée l'animation

animation Est une façon abrégée de spécifier toutes les propriétés de l'animation à la fois (diffère de la propriété animation-play-state)

animation-name Spécifie le nom de l'animation @keyframes

animation-duration 0 Spécifie la durée d'une animation ; en secondes ou en millisecondes

animation-timing-function ease Spécifie la manière dont l'animation progresse au cours d'un cycle

animation-delay 0 Spécifie le démarrage de l'animation

animation-iteration-count 1 Spécifie le nombre de cycles d'une animation

animation-fill-mode none Spécifie les valeurs appliquées par l'animation en dehors du moment de son exécution

animation-direction normal Spécifie si l'animation repart en arrière sur d'autres cycles

animation-play-state en cours d'exécution Spécifie l'état de l'animation. Les valeurs sont en cours d'exécution ou suspendu

XREF

La leçon 9 vous montre comment créer une animation à l'aide de JavaScript.


<body> <div></div> </body>

2. Enregistrez le fichier sous le nom L7-animation-exercise.html. Ouvrez le fichier dans chacun des principaux navigateurs Web. L'animation se compose d'une boîte rectangulaire qui passe du vert au bleu, puis du bleu au vert. L'animation s'est-elle produite dans l'ensemble des navigateurs Web ? Notez quels navigateurs Web prennent en charge l'animation.

3. Remplacez la ligne d'animation de la section div de CSS par ce qui suit :

animation-name: a1;animation-duration: 4s;animation-delay: 2s;

4. Enregistrez le fichier sous le nom L7-animation-mod-exercise.html. Ouvrez le fichier dans les navigateurs Web dans lesquels l'animation se trouvait à l'origine. Avez-vous remarqué le décalage ?


Les filtres SVG sont un moyen d'appliquer un style aux graphiques SVG. La longue liste de filtres va du filtre feBlend, qui combine des images, au filtre feOffset, qui déplace une image par rapport à sa position actuelle, à plusieurs filtres qui affectent la façon dont l'éclairage est calculé sur une figure.

Application d'effets de filtre SVG

La leçon 2 présente le langage SVG (Scalable Vector Graphics) qui permet de décrire des graphiques 2D en langage XML (Extensible Markup Language). Vous avez vu quelques exemples de création d'images vectorielles simples à l'aide de SVG et appris qu'elles s'affichent bien, qu'elles soient visionnées sur de petits ou de grands écrans.

Cette section examine les effets des filtres que vous pouvez appliquer aux graphiques SVG. Un filtre SVG est une série d'opérations qui utilisent CSS pour appliquer un style à un graphique SVG ou le modifier. Le graphique amélioré s'affiche dans un navigateur, tandis que le graphique original se retrouve isolé. Les filtres disponibles dans SVG sont :• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

PRÊT POUR LA CERTIFICATIONQuel est le but d'un filtre SVG ?3.4

180 | leçon 7

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpecularLighting

• feSpotLight

Beaucoup de noms de filtre sont assez intuitifs. Par exemple, le filtre feBlend combine des images, les filtres feColorMatrix transforment les couleurs, le filtre feOffset déplace une image par rapport à sa position actuelle, et le dernier filtre de la liste concerne l'éclairage.

Vous devez utiliser l'élément filter pour définir les filtres SVG. Vous devez inclure l'attribut id pour nommer le filtre. Par exemple, le code suivant est un exemple de filtre feGaussianBlur, dont les résultats sont présentés dans la figure 7-24 :

Figure 7-24

Effet de flou gaussien appliqué à un graphique SVG

<body><svg> <defs> <filter id="a1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="20" /> </filter> </defs> <rect width="150" height="150" stroke="plum" stroke-width="3" fill="plum" filter="url(#a1)" /></svg></body>

L'attribut id dans l'élément filter spécifie le nom du filtre. L'élément feGaussianBlur spécifie l'effet de flou. L'attribut in="SourceGraphic "figure dans cet élément, il indique qu'un effet de flou sera appliqué à l'élément entier et l'attribut stdDeviation spécifie le degré de flou. Le rectangle qui est créé est lié au filtre via l'attribut filter="url(#a1)" de l'élément rect.

Dans un autre exemple, le filtre suivant feOffset crée une ombre portée sous un rectangle. Une ombre s'ajuste à « l'action » du filtre décalage car une ombre est simplement une boîte qui a été déplacée vers le bas, à droite de l'image source. Les attributs dx et dy spécifient la quantité d'espace pour déplacer l'image le long de l'axe des abscisses et de l'axe des ordonnées, respectivement. L'image rendue est indiquée dans la figure 7-25.


<body><svg> <defs> <filter id="i1" x="0" y="0"> <feOffset dx="5" dy="5" /> </filter> </defs> <rect width="150" height="150" fill="grey" filter="url(#i1)" /> <rect width="150" height="150" fill="plum" /></svg></body>

APPLIQUER UN DÉCALAGE ET FLOU GAUSSIEN À UN DESSIN SVG

PRÉPAREZ-VOUS. Pour appliquer un décalage et flou gaussien à un dessin SVG, effectuez les opérations suivantes :

1. Dans un outil d'édition ou de développement d'applications, créez un document HTML avec le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Exemple de décalage et de flou gaussien dans SVG</title></head></style>

<body><svg> <defs> <filter id="i1" x="0" y="0"> <feOffset dx="5" dy="5" /> </filter> </defs> <rect width="150" height="150" fill="grey" filter="url(#i1)" /> <rect width="150" height="150" fill="springgreen" /></svg></body></html>

Figure 7-25

Filtre de décalage appliqué à un graphique SVG

182 | leçon 7

2. Enregistrez le fichier sous le nom L7-SVGoffset-exercise.html. Ouvrez le fichier dans tous les principaux navigateurs Web. Les résultats doivent ressembler à ceux de la figure 7-26. L'image s'affiche-t-elle avec un décalage dans tous les navigateurs Web ? Notez les navigateurs Web qui ne prennent pas en charge le décalage.

Figure 7-26

Graphique SVG avec une ombre portée

3. Ajoutez la ligne suivante dans l'élément filter pour appliquer l'effet de flou gaussien :

<feGaussianBlur stdDeviation="5" />

4. Enregistrez le fichier sous le nom L7-SVGgblur-exercise.html et affichez-le dans les navigateurs Web qui prennent en charge la fonctionnalité de décalage SVG. Les résultats doivent se présenter comme ceux de la figure 7-27.

Figure 7-27

Graphique SVG avec une ombre portée et un flou gaussien appliqués au décalage


Vous pouvez utiliser les propriétés CSS pour ajouter de la couleur et des dégradés, pour appliquer des transformations et des animations et apporter d'autres améliorations à l'objet canvas.

Utilisation de la zone de dessin pour améliorer l'interface graphique

Dans la leçon 2 vous avez non seulement découvert SVG, mais également l'élément canvas. Vous pouvez utiliser cet élément pour tracer des formes composées de pixels. Bien que l'élément canvas accepte uniquement deux attributs : height et width, vous pouvez utiliser la plupart des propriétés CSS pour appliquer un style à l'élément canvas, ajouter de la couleur, des dégradés, des motifs de remplissage, une transformation, une animation, etc. Cette section vous présente certains des effets stylistiques que vous pouvez appliquer à des dessins créés à l'aide de l'élément canvas afin d'améliorer l'interface utilisateur graphique (GUI).

PRÊT POUR LA CERTIFICATIONComment pouvez-vous utiliser l'élément canvas pour améliorer l'interface utilisateur graphique ?3.4


Le code suivant permet de créer une zone de dessin basique :

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

<body onload = "f1();"><canvas id="smlRectangle" height='300' width='500'></canvas></body>

Cet exemple utilise déjà l'attribut fillStyle pour l'objet getContext("2d"). Nous allons changer la couleur et appliquer un dégradé avec du corail comme couleur de départ et du kaki comme couleur de fin. Remplacez la ligne fillStyle par ce qui suit et vous obtiendrez un contenu semblable à celui de la figure 7-28 :

var grd=context.createLinearGradient(0,0,150,0);grd.addColorStop(0.3,"corail");grd.addColorStop(0.7,"kaki");context.fillStyle=grd ;

Figure 7-28

Objet canvas avec un dégradé appliqué

Pour faire pivoter la zone de dessin, utilisez la formule degrees*Math.PI/180. Vous devez également ajouter la rotation avant que le rectangle soit généré. Donc, pour faire pivoter notre zone de dessin de 20 degrés, ajoutez la ligne suivante avant la ligne context-fillRect :

context.rotate(20*Math. PI/180);

Le résultat est illustré dans la figure 7-29. Vous pouvez également traduire (déplacer), mettre à l'échelle et incliner un objet de la même façon que vous apportez des transformations à des éléments HTML.

Figure 7-29

Objet canvas pivoté à 20 degrés

Enfin, nous allons voir comment générer du texte à l'aide de la zone de dessin (voir la figure 7-30). Utilisez les méthodes fillText et font :

<body><canvas id="myText" width="400" height="250" style="border:3px solid #0000FF;"></canvas>

184 | leçon 7

<script type = "text/javascript"> var canvas = document.getElementById("myText"); context = canvas.getContext("2d"); context.font = "30px Arial"; context.fillText("Texte généré par la zone de dessin", 40, 120);</script></body>

Figure 7-30

Texte généré par l'élément canvas entouré par une bordure

La méthode fillText crée un texte de couleur unie (noir par défaut), vous pouvez remplacer fillText par strokeText pour créer des lettres avec une bordure (lettres sans remplissage).

AMÉLIORER UN OBJET DE ZONE DE DESSIN

PRÉPAREZ-VOUS. Pour améliorer un objet de zone de dessin, effectuez les opérations suivantes : 1. Dans un outil d'édition ou de développement d'applications, créez un document HTML


<!doctype html> <html><head> <meta charset="utf-8" /> <title>Exercice de zone de dessin</title> <script> function f1() { var canvas = document.getElementById("smlRectangle"); context = canvas.getContext("2d"); context.fillStyle = "coral"; context.fillRect(10, 20, 200, 100); } </script> </head><body onload = "f1();"><canvas id="smlRectangle" height='300' width='500'></canvas></body></html>

2. Enregistrez le fichier sous le nom L7-canvas-exercise.html. Ouvrez le fichier dans un navigateur Web et vérifiez qu'il y a bien un rectangle de couleur corail.

3. Remplacez la couleur unie par un dégradé qui débute par du bleu clair et se termine par du bleu foncé. Pour ce faire, remplacez la ligne fillStyle par ce qui suit :

var grd = context.createLinearGradient(0, 0, 150, 0); grd.addColorStop(0.3, "lightblue"); grd.addColorStop(0.7, "darkblue"); context.fillStyle = grd;


4. Mettez le rectangle à l'échelle afin qu'il soit cinq fois plus large et cinq fois plus grand que le rectangle original. Pour ce faire, ajoutez le code suivant après la nouvelle ligne fillStyle :

context.scale(5,5);

5. Réenregistrez le fichier et affichez-le dans un navigateur Web. Les résultats doivent ressembler à ceux de la figure 7-31.

Figure 7-31

Rectangle tracé à l'aide de l'élément canvas avec un dégradé et redimensionné pour être cinq fois plus grand que l'original

6. Fermez tous les fichiers et toutes les applications.



• Parmi les nouveaux effets graphiques que vous pouvez facilement réaliser avec CSS3, il y a notamment les coins arrondis, les ombres portées, la transparence et les dégradés d'arrière-plan.

• La propriété border-radius crée des coins arrondis, la propriété box-shadow crée des ombres portées, la propriété opacity crée des effets de transparence, et la propriété background (avec l'un des quatre attributs de dégradés) crée des dégradés linéaires et radiaux.

• Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie au Web. Le WOFF permet aux développeurs Web d'utiliser des polices personnalisées (à peu près n'importe quelle police), sans se limiter aux polices Web standard.

• Les fichiers WOFF sont des polices True Type, OpenType ou Open Font Format compressées qui contiennent des métadonnées supplémentaires.

• La propriété transform de CSS3 traduit, met à l'échelle, fait pivoter, incline et fait même tourner des éléments 2D et 3D.

• La perspective, en termes de dessins et d'illustrations, est la convergence de lignes qui donne l'illusion de la profondeur.

186 | leçon 7

• Une transition est le passage d'un état à un autre. Avec CSS, une transition est le changement de style d'un élément.

• Une animation représente l'affichage d'une séquence d'images statiques à un rythme assez rapide pour créer l'illusion d'un mouvement.

• Un filtre SVG est une série d'opérations qui utilisent CSS pour appliquer un style à un graphique SVG ou le modifier. Le graphique amélioré s'affiche dans un navigateur, tandis que le graphique original se retrouve isolé.

• Bien que l'élément canvas accepte uniquement deux attributs : height et width, vous pouvez utiliser la plupart des propriétés CSS pour appliquer un style à l'élément canvas, ajouter de la couleur, des dégradés, des motifs de remplissage, une transformation, une animation, etc.



1. Un est un changement de couleurs en douceur, dans le même ton ou qui commence par une couleur et se termine par une autre couleur.

2. un élément consiste à augmenter ou à réduire sa taille.

3. Une désigne un effet visuel dans lequel un objet est répété en arrière-plan et déplacé légèrement au-dessous de lui-même pour créer l'illusion que l'objet flotte au-dessus de son arrière-plan.

4. Une désigne le passage d'un état à un autre ; avec CSS, une transition est le changement de style d'un élément.

5. Le permet aux développeurs Web d'utiliser des polices personnalisées (à peu près n'importe quelle police), sans se limiter aux polices Web standard.

6. La propriété CSS3 permet de créer des coins arrondis autour des éléments de mise en page, tels que les titres, les pieds de page, les encadrés, les boîtes graphiques et les contours autour des images.

7. La est l'opacité réduite.

8. Appliquer une à un élément revient à le déplacer, sans le faire pivoter, l'incliner, ni faire tourner l'image.

9. En HTML5/CSS3, une est un effet qui permet de modifier la taille, la forme et la position d'un élément.

10. Un SVG est une série d'opérations qui utilisent CSS pour appliquer un style à un graphique SVG ou le modifier.



1. Parmi les propriétés suivantes, laquelle permet de créer un dégradé de haut en bas, de gauche à droite ou en diagonale, sans répéter les couleurs ?a. linear-gradientb. dégradé radialc. repeating-linear-gradientd. repeating-radial-gradient



2. Parmi les propositions suivantes, laquelle n'est pas correcte au sujet de la propriété border-radius ?a. Elle crée des angles arrondis autour des éléments de mise en page.b. Elle peut être exprimée en pixels.c. Elle peut être exprimée en pourcentage.d. Elle peut animer un objet.

3. Pour appliquer une transparence de 60 % à un élément ou à une image, quelle propriété devez-vous utiliser ?a. opacité: 40b. opacité: 0.4c. transparence: 40d. transparence: 0.4

4. Parmi les propositions suivantes, laquelle présente des inconvénients pour les polices Web ? (Choisissez toutes les réponses applicables.)a. Elles doivent être chargées sur un serveur Web.b. Elles sont limitées en nombre et en variété.c. Elles rendent plus difficile la reconnaissance de la marque sur le Web.d. Elles sont chères.

5. Parmi les propositions suivantes, laquelle est associée aux images clés ?a. Angles arrondisb. Transitionsc. Animationsd. Aucune des réponses ci-dessus

6. Que devez-vous spécifier pour créer une transition ?a. Un départ différéb. La propriété CSS à appliquer au cours de la transitionc. La fonction de minutage de la transitiond. L'image clé

7. Quel est l'avantage principal lié à l'utilisation de l'interpolation chromatique dans l'espace de couleur alpha ?a. Elle produit des transitions colorimétriques plus lisses en dégradés.b. Elle permet d'ajouter de la couleur aux dessins SVG.c. a et bd. Ni a ni b

8. Parmi les propriétés suivantes, laquelle devez-vous utiliser pour ajouter de la couleur au texte de l'élément canvas ?a. fillStyleb. strokeStylec. textColord. strokeColor

9. Quels sont les deux états de lecture d'une animation ?a. démarréb. en cours d'exécutionc. suspendud. reprise

10. Parmi les lignes de code suivantes, laquelle contrôle le degré de flou ?<defs> <filter id="a1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="20" /> </filter></defs>

a. FeGaussianBlurb. SourceGraphicc. StdDeviationd. Aucune des réponses ci-dessus

188 | leçon 7


Scénario7-1:DépannageducodeCSS3

Ali est passionné par les voitures anciennes et restaure de vieilles voitures pour les revendre et réaliser un profit. Il publie des photos et des descriptions sur son site Web qu'il gère lui-même. Ali a recours autant que possible à HTML5 et CSS3. Il a essayé d'appliquer les transformations de translation et de mise à l'échelle à une image 2D sur son site, mais aucune transformation ne fonctionne. Voici le code qu'il utilise :

<style>img { transform: translate(100px,50px); transform: scale(2,4); }</style>

Quel conseil pouvez-vous donner à Ali ?

Scénario7-2:Affichaged'imagesavantetaprèstraitement

Linda, l'épouse d'Ali, trouve que son site Web présentant sa voiture ancienne pourrait être amélioré pour attirer davantage de visiteurs. Elle suggère entre autres de montrer les photos des voitures avant et après la restauration. Ils vous demandent quelles options sont à leur disposition avec CSS3 pour faciliter l'affichage des photos pour les utilisateurs. Que leur dites-vous ?


Scénario7-3:Créationdeboutonsavecdesaméliorations

Edward crée un ensemble de boutons pour une application Web et souhaite arrondir les angles des boutons et leur appliquer une ombre portée légèrement floue. Il vous demande quelles propriétés CSS3 il doit utiliser. Que pouvez-vous lui dire ?

Scénario7-4:PrésentationdelapropriétéFlex

Meghan est une étudiante aux beaux-arts. Elle a un cours sur les images numériques et un camarade lui dit que la perspective 3D de CSS3 l'intéresse. Elle n'en a jamais entendu parler auparavant et vous demande de lui expliquer brièvement ce dont il s'agit. Que pouvez-vous lui dire ?

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Un élément opaque ne laisse pas passer la lumière, tandis que vous pouvez voir

à travers un élément transparent.V F 2. Avec CSS, pour faire pivoter un élément, appliquez-lui un certain nombre de

degrés dans le sens contraire des aiguilles d'une montre.V F 3. Une animation représente l'affichage d'une séquence d'images statiques à un

rythme assez rapide pour créer l'illusion d'un mouvement.V F 4. Un dégradé radial commence à partir d'un point central et rayonne la couleur

vers les bords d'un conteneur.V F 5. La perspective, en termes de dessins et d'illustrations, est la convergence de

lignes qui donne l'illusion de la profondeur.

189

Malted Milk Media dispose d'une application mobile fonctionnelle qui donne de bons résultats. Mais elle n'est pas pratique. En effet, les utilisateurs doivent appuyer sur plus de touches et attendre plus longtemps que ce qui est généralement acceptable. L'équipe de développement a décidé que JavaScript contribuera grandement à rendre l'application plus réactive et sans problème.

jQuery

logiciel

méthodes

rappel

sous-routines

validation

variable


application dynamique

bibliothèque

bibliothèque JavaScript

événements

fonction

gestionnaire d’événements

identificateurs

interactivité



Gestion et maintenance du langage JavaScript Gérer et assurer la mise à jour de JavaScript 4.1

Mise à jour de l'interface utilisateur avec JavaScript Mettre à jour l'interface utilisateur avec JavaScript 4.2

Présentation des principes de base de JavaScript et du codage

8L E Ç O N

■ Gestion et maintenance du langage JavaScript

HTML5 et CSS3 offrent une excellente base à votre site Web ou application mobile. Toutefois, effectuer des opérations plus structurées que la présentation du contenu, par exemple répondre avec des données individualisées sur un utilisateur final spécifique, effectuer une transaction de commerce en ligne ou dériver des résultats sur la base des données déjà saisies, demande une véritable programmation. JavaScript est un langage de programmation capable avec grande capacité d'exprimer les interactions que vous voulez que vos utilisateurs finaux aient avec votre application.

L'ESSENTIEL

190 | leçon 8

Prenons l'exemple d'une application mobile liée à un service qui affiche l'heure de la prochaine visite de service à un client. Elle propose un lien hypertexte pour appeler un répartiteur s'il est nécessaire de reprogrammer. Mais ce n'est pas très intelligent de proposer ce lien en dehors des heures ouvrables quand personne n'est là pour répondre. Comment faire en sorte que le lien hypertexte change selon l'heure de la journée ?Tous les travaux de ce type, qui pour un travailleur humain exigent une décision, un calcul ou une recherche, sont du domaine de la programmation. Pour nous, un logiciel est une recette que l'ordinateur exécute avec comme résultat une action ou un affichage particulier. Même si de nombreuses pages Web sont conçues pour être statiques en ceci qu'elles ont la même apparence pour tous les lecteurs, en toutes circonstances, la programmation JavaScript rend les applications dynamiques et interactives. Elles s'ajustent et répondent aux actions d'utilisateurs finaux particuliers. L’interactivité permet à un utilisateur d'effectuer une action dans une application, généralement en cliquant sur un bouton ou en appuyant sur une touche. Une application dynamique s'adapte et répond à des utilisateurs ou à leurs actions particulières. JavaScript augmente également les possibilités d'animer des affichages, autrement dit, de faire en sorte que des parties de l'affichage bougent et soient mises à jour sous les yeux d'un utilisateur final.Dans les programmes JavaScript, plusieurs éléments différents doivent être associés pour obtenir le résultat que vous recherchez. JavaScript diffère de CSS et HTML sur quelques aspects essentiels et vous apprendrez de nouveaux concepts pour tirer le meilleur parti de JavaScript. HTML et CSS, par exemple, sont en grande partie axés sur le fait de donner un aspect particulier à des éléments. JavaScript accorde plus d'attention à la façon dont les éléments agissent. Pour tester un programme JavaScript, vous avez souvent besoin de regarder l'écran à plusieurs moments dans le temps et peut-être d'interagir avec lui.Encore plus qu'avec HTML et CSS, votre travail dans JavaScript dépend d'un environnement de développement que vous comprenez et dans lequel vous êtes à l'aise. Un environnement de développement utile peut être aussi simple qu'une copie du Bloc-notes et Internet Explorer, ou aussi complexe qu'un environnement de développement intégré (IDE) doté d'un éditeur, d'un débogueur et d'un générateur d'application intégrés, et ainsi de suite. Les exercices de cette leçon utilisent les outils les plus simples possibles, ils sont faciles à adapter à des outils plus sophistiqués.

PRÊT POUR LA CERTIFICATIONComment JavaScript rend-il une application interactive et dynamique ?4.1

Les termes programme et script sont presque synonymes. Certaines personnes disent « script » pour souligner le fait que la source est petite ou pas en C ou Java ou pour des raisons plus vagues. Ne vous préoccupez pas des différences. Dans cette leçon, les termes programme, script, fichier source et code ont presque le même sens.

REMARQUE*

Cette leçon porte sur la création de programmes JavaScript et l'utilisation des fonctions. Vous apprendrez à créer des programmes simples à partir de zéro et à utiliser le code des bibliothèques JavaScript, jQuery et autres bibliothèques tierces. Vous apprendrez également à localiser et accéder aux éléments, écouter et répondre aux événements, afficher et masquer des éléments, mettre à jour le contenu des éléments et ajouter des éléments à la volée.

CRÉATION D'UN PROGRAMME JAVASCRIPT SIMPLE

PRÉPAREZ-VOUS. Pour créer un programme JavaScript simple, procédez comme suit : 1. À l'aide d'un outil d'édition ou de développement d'applications, créez un fichier avec

le contenu suivant :

<!doctype html> <html> <head> <title>Mon premier programme JavaScript</title> </head> <body> <h1>Mon premier programme JavaScript</h1> <p>Il s’agit de texte. <button type = 'button' onclick = "alert('Vous avez cliqué sur le bouton');">Je suis un bouton ; cliquez sur moi</button> </body> </html>

2. Enregistrez le fichier sous le nom L8-js1.html.

Présentation des principes de base de JavaScript et du codage | 191

3. Pour exécuter le programme JavaScript, ouvrez L8-js1.htmldans un navigateur Web. Les résultats doivent ressembler à ceux de la figure 8-1.

Figure 8-1

Votre premier programme JavaScript

Si le programme JavaScript ne s'affiche pas, vous devez activer JavaScript dans les préférences de votre navigateur Web. Dans Internet Explorer 9, par exemple, sélectionnez Outils > options Internet. Dans la boîte de dialogue Options Internet, cliquez sur l'onglet Sécurité . Cliquez sur le bouton Personnaliser le niveau ou Niveau par défaut, selon celui qui est disponible. Dans la boîte de dialogue Paramètres de sécurité, faites défiler vers le bas pour accéder à la section Script (voir la figure 8-2). Cliquez sur la case d'option Activer sous Active scripting, puis cliquez deux fois sur OK pour fermer les boîtes de dialogue. Essayez d'ouvrir à nouveau L8-js1.html dans votre navigateur Web afin d'exécuter le programme JavaScript.

Figure 8-2

Vérification des paramètres JavaScript dans Internet Explorer

192 | leçon 8

4. Cliquez sur le bouton que vous avez créé en JavaScript qui s'affiche sur l'écran. Un message d'alerte s'affiche, comme illustré dans la figure 8-3. Cela indique que votre programme JavaScript fonctionne correctement.

XREF

Dans les leçons précédentes, vous avez appris les bases de l'édition de balisage HTML et de code CSS et l'affichage du résultat. Utilisez les mêmes compétences pour travailler avec JavaScript.

Figure 8-3

Un message d'alerte est un moyen pratique pour tester le fonctionnement d'un programme JavaScript

5. Cliquez sur OK pour fermer le message d'alerte.

6. Laissez le fichier HTML, l'outil d'édition et le navigateur Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Il s'agit de votre premier programme JavaScript. Non seulement il a une apparence particulière sur l'écran, mais cette apparence change. C’est typique avec les programmes : ils répondent aux actions de l’utilisateur.

Toutefois, c'est un programme inhabituel, en ceci que sa partie JavaScript est presque invisible. Vous voyez le programme JavaScript ? C'est le seul fragment entre guillemets, comme suit :

alert('Vous avez cliqué sur le bouton');

L'alerte alert() elle-même est trop intrusive pour apparaître dans le code de production fourni pour une utilisation par les consommateurs. Elle n'apparaît donc presque jamais dans la documentation de référence. En même temps, c'est le moyen le plus simple de commencer à utiliser JavaScript et il peut être extrêmement utile lors du développement ou du débogage.

Un programme JavaScript ordinaire se compose d'une séquence d'instructions. Les instructions sont séparées par des points-virgules, comme vous le verrez dans le prochain exercice.

CRÉATION D'UN PROGRAMME JAVASCRIPT À INSTRUCTIONS MULTIPLES

PRÉPAREZ-VOUS. Pour créer un programme JavaScript à instructions multiples, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, mettez à jour L8-js1.html

en remplaçant alert() par le texte suivant :

alert('Ceci est la première alerte'); alert('Ceci est la seconde alerte');

2. Enregistrez le fichier.


3. Exécutez le programme JavaScript mis à jour en ouvrant le fichier HTML dans un navigateur Web.

4. Lorsque le premier message d'alerte s'affiche, fermez-le en cliquant sur OK. Le programme JavaScript passe à son instruction suivante, c'est-à-dire le second message d'alerte. Le second message d'alerte est illustré dans la figure 8-4.

5. Fermez le second message d'alerte en cliquant sur OK.

6. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure 8-4

Le second message d'alerte devient visible seulement après le rejet du premier


Pour plus d'informations sur JavaScript, visitez la page Web W3schools.com sur JavaScript à l'adresse http://www.w3schools.com/js/default.asp. Pour plus d'informations sur Microsoft et JavaScript, recherchez msdn javascript à l'aide de votre moteur de recherche favori.

Une fonction correspond à un segment d'un programme défini et exécuté indépendamment des autres parties. L'action d'une fonction est la séquence des actions des instructions qu'elle contient.

Création et utilisation des fonctions

En principe, un programme JavaScript entier pourrait être écrit avec une instruction après l'autre dans l'ordre exact dans lequel elles doivent s'exécuter. Cependant, les programmeurs ont constaté qu'il est utile d'introduire des symboles ou des noms pour des parties spéciales d'un programme.

La première partie est une fonction. En programmation, une fonction est un segment d'un programme défini et interprété indépendamment des autres parties. Prenons l'exemple d'une recette de cuisine. Il est inutile d'expliquer dans chaque recette écrite toutes les étapes qu'implique l'extraction du blanc d'un œuf. Une recette classique indique simplement, « ajouter un blanc d'œuf » et suppose que le lecteur sait qu'il doit chercher ailleurs pour obtenir des détails ou des indications sur la meilleure façon de choisir un œuf, de le casser, de séparer ses parties, etc. Dans la cuisine, un assistant peut même être

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une fonction de programmation ?4.1

194 | leçon 8

chargé de préparer les blancs d'œufs sans participation directe de la personne qui suit la recette. La programmation fonctionne de façon analogue : il est courant d'utiliser les fonctions écrites par d'autres personnes, parfois sans inspection minutieuse de la façon exacte dont elles fonctionnent.

L'écriture d'une fonction de programmation a deux objectifs principaux :

• Une tâche effectuée dans différentes situations peut être définie une seule fois et utilisée dans plusieurs cas avec la certitude que son comportement sera identique. Ce genre d'« abréviation » est plus concis et moins sujet aux erreurs que la répétition d'une séquence entière d'étapes dans chaque contexte où la séquence peut être nécessaire.

• Pour faciliter le travail de la personne qui écrit, gère ou lit le programme, il est utile et instructif d'identifier les segments importants du fonctionnement avec les noms de fonction. Tout comme les livres comportent des chapitres, avec des noms qui signalent les actions ou les thèmes, les programmes informatiques sont dotés de fonctions.

Il est important de comprendre que l'action d'une fonction correspond à la séquence des actions des instructions qu'elle inclut. Lorsque vous exécutez un programme qui contient une fonction, le programme exécute simplement les instructions au sein de la fonction.

Il est également important de distinguer la définition et l'exécution d'une fonction. L'expression d'une fonction, la section « function example1() {. . .} », n'exécute pas de code au sein de la fonction. Ce que vous pouvez observer dans le code est uniquement la définition d'une fonction. Une action utile se produit uniquement lorsque la fonction est appelée, exécutée ou lancée, ce sont des synonymes pour les besoins de ce document.

UTILISATION D'UNE FONCTION JAVASCRIPT

PRÉPAREZ-VOUS. Pour apprendre à utiliser une fonction JavaScript, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez L8-js2.htmlavec le contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation d'une fonction</title> <script type = "text/javascript"> function example1() { alert("Ceci est la première alerte."); alert("Ceci est la seconde alerte."); } </script> </head> <body> <h1>Première utilisation d'une fonction</h1> <p>Il s'agit de texte. <button type = 'button' onclick = "example1();">Je suis un bouton ; cliquez sur moi</button> </p> </body> </html>

2. Ouvrez L8-js2.htmldans un navigateur. Le programme s'affiche, comme illustré dans la figure 8-5. Observez le texte et le bouton. À ce stade, il n'y a aucun signe de JavaScript.


3. Cliquez sur le bouton. Comparez l'action de cette page avec le comportement du fichier L8-js1.html qui contient deux alertes. Voyez-vous comment ils agissent de la même façon même s'ils sont rédigés un peu différemment ? Le message d'alerte a la même apparence qu'il soit appelé à partir d'une définition de fonction ou non.


Cet exemple présente au moins deux autres nouveaux concepts, en plus de l'utilisation d'une fonction. Tout d'abord, il présente le code JavaScript intégré dans des balises <script> en HTML. Il y a plusieurs façons de « connecter » un programme JavaScript au balisage HTML auquel il s'applique. Cette utilisation de <script> dans <head> est courante, en particulier pour les projets JavaScript de taille moyenne.En outre, le nom « example1 » de la fonction mérite attention. Nous pouvons contrôler ce nom. Quand nous écrivons « href » dans le cadre d'un lien hypertexte, ou alert() pour afficher une alerte, nous nous appuyons sur des mots clés définis dans les normes pour HTML et JavaScript, respectivement. Le nom de fonction example1, cependant, ne respecte pas ces normes. C'est notre choix. Nous devons simplement être cohérents. Si nous écrivons "mon_exemple" au lieu de « example1 » dans la définition de la fonction, alors nous devons aussi utiliser "mon_exemple".Même si l’attribution du nom de la fonction est assez libre, il existe quelques limitations sur le choix du nom : le nom doit contenir des lettres, des chiffres, des tirets et le symbole dollar, mais doit impérativement commencer par une lettre, un tiret ou le symbole dollar. "example$1" est un nom de fonction JavaScript possible, mais pas "not.with.periods", "1wrong"et "first name/last name".Les programmes JavaScript ont une autre forme d'abréviation symbolique, ou nom, ce qui est courant. Cet élément s'appelle une variable. Alors qu'une fonction désigne une séquence d'actions, une variable représente un élément de données. Utilisez la syntaxe var pour définir une nouvelle variable dans JavaScript.

Figure 8-5

Ce programme ressemble à L8-js1.html

En fait, les règles pour les identificateurs—JavaScript, en gros les noms de variables et fonctions, sont un peu plus compliquées qu'indiqué ci-dessus. Les identificateurs ne peuvent pas être identiques aux mots déjà utilisés dans le langage. Par exemple, « if » recouvre une signification spéciale dans les instructions JavaScript et n'est pas disponible comme nom de variable. Toutefois, dans certaines circonstances, les caractères autorisés dans un nom peuvent provenir d'alphabets autres que l'anglais. Une définition complète des règles d'affectation des noms de JavaScript dépasse le cadre de cette leçon.

REMARQUE*

196 | leçon 8

UTILISATION D'UNE VARIABLE DANS UN PROGRAMME JAVASCRIPT

PRÉPAREZ-VOUS. Pour utiliser une variable dans un programme JavaScript, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js3.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation d'une variable</title> <script type = "text/javascript"> function example1() { var version_name = "numéro de série X358-AA-3T601-22" alert("Ceci est la première alerte de " + version_name); alert("Ceci est la seconde alerte de " + version_name); } </script> </head> <body> <h1>Première utilisation d'une variable</h1> <p>Il s'agit de texte. <button type = 'button' onclick = "example1();">Je suis un bouton ; cliquez sur moi</button> </body> </html>

2. Ouvrez L8-js3.html dans un navigateur et cliquez sur le bouton. La première alerte s'affiche à l'écran, comme illustré dans la figure 8-6.

Figure 8-6

La valeur d'une variable s'affiche dans un message d'alerte

3. Cliquez sur OK afin de rejeter la première alerte et passer à la seconde. Vous voyez en quoi une variable peut être utile ? Un numéro de série ou autre quantité importante peut figurer dans plusieurs endroits différents dans un programme. Il n'est pas nécessaire de copier la valeur dans chaque emplacement. Au lieu de cela, JavaScript vous permet d'utiliser le nom de la variable qui contient la valeur.

4. Cliquez sur OK pour fermer le second message d'alerte.



Les programmeurs les plus efficaces savent faire bon usage de ce qu'écrivent les autres. Une bibliothèque de programmation contient des extraits de code, sous-routines, classes et autres ressources que vous pouvez ré-utiliser pour créer des logiciels. Il existe de nombreuses bibliothèques JavaScript et jQuery est l'une des plus populaires.

Utilisation de jQuery et d'autres bibliothèques tierces

D'autres programmeurs ont déjà pensé à bon nombre des tâches auxquelles vous serez confronté, que votre travail implique la confirmation que les numéros de carte de crédit ne sont pas valides, l'affichage d'images médicales ou la création d'une infrastructure de discussion pour une équipe répartie sur quatre continents. Vous pouvez réutiliser le code écrit par d'autres en utilisant les bibliothèques JavaScript. Une bibliothèque est un ensemble de ressources, comme le code de fonction et les sous-routines préexistants, que les développeurs utilisent pour créer des programmes. (Pour les développeurs JavaScript, les fonctions qui ne retournent aucune valeur sont parfois considérées comme des sous-routines.) Une bibliothèque JavaScript désigne le code JavaScript préexistant. Dans la plupart des entreprises, des politiques ont été adoptées avant votre arrivée au sujet des bibliothèques à utiliser et de la façon de les appeler. Le Web regorge de conseils sur les bibliothèques et leur applicabilité et prend en charge un riche marché de celles qui sont disponibles. Beaucoup, mais pas toutes, sont disponibles gratuitement. Certaines ont des politiques de « prise en charge » plus ou moins formelles, c'est-à-dire un engagement à répondre lorsque des défauts sont signalés. Certaines de ces bibliothèques sont destinées à seulement un petit nombre de programmeurs, par exemple une bibliothèque qui facilite le développement d'applications qui contrôlent des boulangeries industrielles, alors que d'autres s'adressent à tous ceux qui développent des applications en JavaScript.jQuery est la principale bibliothèque JavaScript de ce genre. Plus de la moitié des 10 000 sites Web les plus visités dans le monde utilisent jQuery. Cette bibliothèque est disponible gratuitement et sans restriction excessive. Vous devrez consulter un avocat, bien sûr, pour savoir comment ses licences s'appliquent à votre situation. Notez aussi que Microsoft et d'autres acteurs importants du secteur mettent la bibliothèque jQuery à la disposition de tout le monde en téléchargement.

UTILISATION DE JQUERY

PRÉPAREZ-VOUS. Pour utiliser jQuery, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js4.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation de jQuery</title> <script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script> <script type = "text/javascript"> // Une fois le document HTML chargé, exécutez // a fonction dans ready(). $(document).ready(function() { // Chaque paragraphe reçoit une action « clic » : . $("p").click(function() { $(this).hide(); }); });

</script> </head>

PRÊT POUR LA CERTIFICATIONQu'est-ce que jQuery ?4.1

198 | leçon 8

<body> <p>Il s'agit du premier paragraphe. Cliquez sur moi pour me faire disparaître. <p>Il s'agit du deuxième paragraphe. <p>Il s'agit du troisième paragraphe. </body> </html>

2. Ouvrez L8-js4.htmldans un navigateur. La page s'affiche, comme illustré dans la figure 8-7. Notez que trois phrases s'affichent.

3. Cliquez n'importe où dans le premier paragraphe. Le paragraphe disparaît, comme illustré dans la figure 8-8.

Figure 8-7

Un simple affichage HTML, avant l'exécution de JavaScript

Figure 8-8

JavaScript a agi pour masquer un paragraphe

4. Cliquez n'importe où dans le second paragraphe pour le faire disparaître.


Vous voyez en quoi c'est un modèle de comportement utile dans votre application Web, mobile ou de console de jeu ? Supposons que vous voulez que les informations qui s'affichent pour les utilisateurs finaux changent selon les circonstances. Bien qu'il soit possible d'écrire en JavaScript « pur », sans jQuery, qui se comporte comme L8-js4.html, il faut beaucoup plus de codage. jQuery rend de nombreuses opérations courantes plus courtes, plus compréhensibles et plus faciles à exprimer correctement.

Vous pourriez être invité à utiliser plusieurs bibliothèques tierces autres que jQuery. Le plus souvent, vous recevrez des instructions explicites sur quelle bibliothèque utiliser. Lorsque vous avez le choix entre plusieurs bibliothèques, vous pouvez trouver de nombreuses informations sur le World Wide Web en recherchant le nom de la bibliothèque. En dehors de jQuery, les

PRÊT POUR LA CERTIFICATIONQuels sont les exemples de bibliothèques tierces autres que jQuery ?4.1


autres bibliothèques répandues incluent Dojo, MooTools et YUI. Lorsque vous utilisez une bibliothèque tierce, vous devez généralement inclure un élément tel que le suivant :

<script type = "text/javascript" src = "adresse Web ou locale de la source de la bibliothèque JavaScript"></script>

Pourquoi est-il nécessaire d'inclure cette balise ? Lorsque vous voulez utiliser wonderful_function() à partir d'une bibliothèque tierce dans l'une des pages que vous écrivez, la seule façon pour le navigateur de savoir ce que vous entendez par wonderful_function() est d'utiliser une référence à son apparition dans la bibliothèque. Le <script ...> fournit cette référence.

Vous devez également lire la documentation de la bibliothèque que vous voulez utiliser et peut-être acquérir une licence.

■ Mise à jour de l'interface utilisateur avec JavaScript

JavaScript est indispensable pour presque tous les effets d'applications HTML modernes et réactives.L'ESSENTIEL

Vous connaissez les concepts de base de HTML : navigation à l’aide de liens hypertexte et du bouton Précédent, données récupérées dans des formulaires soumis et tout le style visuel du balisage HTML traditionnel. Trusty Lawn Care veut une application qui en fait plus. Elle doit afficher les mises à jour en temps réel des horaires du personnel, réagir rapidement et en détail aux informations de compte, personnaliser les conseils en fonction des personnes, de la météo et bien plus encore. Seul JavaScript permet ce dynamisme et cette interactivité.Pour obtenir un exemple de ce que JavaScript rend possible, créez une petite calculatrice intégrée au navigateur.

CRÉATION D'UNE CALCULATRICE INTÉGRÉE AU NAVIGATEUR À L'AIDE DE JAVASCRIPT

PRÉPAREZ-VOUS. Pour créer une calculatrice intégrée au navigateur à l'aide de JavaScript, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js5.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Calculatrice intégrée au navigateur</title> </head> </body>

<h1>In-browser calculator</h1> <form name="calculator"> <table border=4> <tr> <td> <input type="text" name="Input" Size="20"> <br> </td> </tr> <tr> <td> <input type="button" name="one" value=" 1 " OnClick="calculator.Input.value

PRÊT POUR LA CERTIFICATIONComment utiliser JavaScript pour mettre à jour l'interface utilisateur ?4.2

200 | leçon 8

+= '1'"> <input type="button" name="two" value=" 2 " OnCLick="calculator.Input.value += '2'"> <input type="button" name="three" value=" 3 " OnClick="calculator.Input.value += '3'"> <input type="button" name="plus" value=" + " OnClick="calculator.Input.value += ' + '"> <br> <input type="button" name="four" value=" 4 " OnClick="calculator.Input.value += '4'"> <input type="button" name="five" value=" 5 " OnCLick="calculator.Input.value += '5'"> <input type="button" name="six" value=" 6 " OnClick="calculator.Input.value += '6'"> <input type="button" name="minus" value=" - " OnClick="calculator.Input.value += ' - '"> <br> <input type="button" name="seven" value=" 7 " OnClick="calculator.Input.value += '7'"> <input type="button" name="eight" value=" 8 " OnCLick="calculator.Input.value += '8'"> <input type="button" name="nine" value=" 9 " OnClick="calculator.Input.value += '9'"> <input type="button" name="times" value=" x " OnClick="calculator.Input.value += ' * '"> <br> <input type="button" name="clear" value=" c " OnClick="calculator.Input.value = ''"> <input type="button" name="zero" value=" 0 " OnClick="calculator.Input.value += '0'"> <input type="button" name="DoIt" value=" = " OnClick="calculator.Input.value = eval(calculator.Input.value)"> <input type="button" name="div" value=" / " OnClick="calculator.Input.value += ' / '"> </td> </tr> </table> </form>

</body> </html>


2. Ouvrez L8-js5.htmldans un navigateur. La calculatrice s'affiche, comme illustré dans la figure 8-9.

Figure 8-9

Une calculatrice créée à l'aide de JavaScript

Figure 8-10

Lorsque vous cliquez ou tapez le signe égal dans votre calculatrice JavaScript, elle calcule immédiatement un résultat, comme une calculatrice de poche classique

3. Essayez votre calculatrice. Cliquez sur les boutons 7 × 14 + 2 = et observez le résultat. La calculatrice a-t-elle affiché 100, comme illustré dans la figure 8-10 ?


Ce petit exemple montre que pour l'essentiel, un programme JavaScript peut faire dans le navigateur tout ce que n'importe quelle autre application fait, et parfois en seulement quelques lignes de code source. Les fonctionnalités JavaScript incluent la saisie de données, la réponse à des frappes de touches et des mouvements de souris, l'affichage des résultats, des calculs complexes et plus encore, comme l'illustrent les exercices suivants. Les applications mobiles, construites sur une base de HTML5 offrent toutes les mêmes fonctionnalités.

Tout ce que vous voyez dans votre navigateur, JavaScript peut « y accéder » et le contrôler par programmation. Vous pouvez utiliser la méthode getElementById() pour accéder aux éléments d'affichage.

Localisation et accès aux éléments

202 | leçon 8

Au cours de votre carrière de programmeur, vous serez souvent en mesure de donner une description de ce que vous voulez, quelque chose comme, « alors nous devons vérifier que ce que l'utilisateur a entré est », mais vous ne saurez pas comment traduire l'idée en JavaScript. Le défi consiste souvent à identifier et isoler ce qui se passe avec un élément particulier que vous voyez à l'écran. Ici, « élément » peut désigner un bouton, un champ de saisie, une figure, du texte, etc.

L'un des principaux moyens pour accéder aux éléments d'affichage est la méthode getElementById(). Cette méthode retourne une référence au premier objet associé à l'attribut id ou NAME spécifié.

PRÊT POUR LA CERTIFICATIONQuelle méthode JavaScript retourne une référence au premier élément avec un attribut ID ou NAME spécifique ?4.2

Un « objet » désigne une « chose » ou un « élément » en jargon informatique. Il s'agit de la catégorie la plus générale des éléments étudiés. Techniquement, le JavaScript est un langage « basé sur les objets », c'est-à-dire, qu'il met l'accent sur le fait que ces instances de programmation en tant que « premier paragraphe » ont des propriétés et des méthodes qui fournissent des informations sur le paragraphe et des possibilités d'agir sur celui-ci.

REMARQUE*

UTILISATIONDELAMÉTHODEGETELEMENTBYID()POURL'ENTRÉEUTILISATEUR

PRÉPAREZ-VOUS. Pour apprendre à utiliser la méthode getElementByID() afin de recueillir des entrées utilisateur, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js6.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Validation d'une entrée utilisateur</title>

<script type = "text/javascript"> function validate() { var value = document.getElementById("input1").value; if (isNaN(value)) { modifier = "non "; } else { modifier = ""; } var report = "Vous avez saisi '" + value + "'; il s'agit " + modifier + "d'un nombre valide."; alert(report); } </script> </head> <body>

<h1>Validation d'une entrée utilisateur</h1> <form name="calculator"> <input type = "text" id = "input1"></input> <button type = "button" onclick = "validate();">Cliquez sur moi pour voir ce que je pense de votre entrée</button> </form>

</body> </html>

2. Ouvrez L8-js6.htmldans un navigateur.

3. Tapez un mot court dans la zone de saisie, puis cliquez sur le bouton. Les résultats sont présentés dans la figure 8-11. Cliquez sur OK pour apporter vos modifications et fermer la boîte de dialogue.


4. Tapez un nombre dans la zone de saisie et cliquez sur le bouton. Comment un message contextuel a-t-il été modifié par rapport à l'étape précédente ? Cliquez sur OK pour apporter vos modifications et fermer la boîte de dialogue.


La validation est une responsabilité importante pour JavaScript : l’utilisateur a-t-il saisi un chiffre qui respecte une contrainte budgétaire ? Est-ce un numéro de carte de crédit légal ? Une adresse e-mail est-elle autorisée et n’est pas en conflit avec une adresse existante ? Le fichier L8-js6.html est un petit modèle pour le thème général de la validation. Nous avons souvent besoin de confirmer qu'une entrée d'utilisateur est, en fait, numérique, dans le sens où 0 et 3,141 sont des nombres appropriés, mais abc et 3,141. ne le sont pas. Alors qu'il serait judicieux pour JavaScript d'avoir une fonction is_a_number(), pour des raisons historiques, il utilise seulement isNaN.Pourquoi getElementById est-il appelé une « méthode » ? JavaScript ne crée-t-il pas une bibliothèque de fonctions pour effectuer des tâches utiles ?Oui et non. Même si JavaScript crée une bibliothèque de fonctions utiles pour nombreuses opérations courantes, certaines fonctionnalités JavaScript sont fortement liées à des objets particuliers que HTML définit. Ces fonctionnalités sont appelées méthodes. Les méthodes se distinguent des fonctions uniquement par le fait qu'elles sont toujours associées et utilisées avec un objet particulier. isNaN() est un exemple d'une fonction JavaScript qui permet de tester la condition « n'est pas un nombre ». Si isNaN() retourne la valeur 0 (false), la valeur est un nombre. document.getElementById() est un exemple de méthode JavaScript. Vous ne pouvez utiliser efficacement getElementById qu'avec l'objet de document spécial.

Figure 8-11

Un modèle pour la validation d'entrée utilisateur par JavaScript

Un « événement » est un concept crucial en programmation interactive. Une grande partie de la programmation JavaScript concerne les réponses à un événement. L'événement Load est utilisé couramment et il se déclenche lorsque son propriétaire a terminé son action.

Écoute et réponse aux événements

Beaucoup de conditions requises par les applications impliquent des événements qui sont des actions qui déclenchent d'autres actions. Les descriptions en termes de « quand » ou « si » sont généralement codées en JavaScript en termes d'événements. Cela peut surprendre les programmeurs habitués à utiliser d'autres langages dans lesquels l'accent est mis sur la séquence :

1. Effectuez la première opération.2. Ensuite, effectuez la deuxième opération.

204 | leçon 8

3. Ensuite, effectuez la troisième opération.4. Terminez la séquence.

La programmation basée sur les événements, en revanche, ressemble plus à un dialogue : un utilisateur effectue une action, puis le programme JavaScript répond, et ainsi de suite.

Tous les programmes d'exemple JavaScript présentés jusqu'à présent impliquaient des événements. Le fait d’affecter une valeur au gestionnaire d’événements onClick pour l’événement Click a l’effet suivant : « lorsque l'utilisateur final clique sur l'élément en question, exécutez le script donné par la valeur onClick. » Dans ce cas l'action de clic est l'événement et le script est la réponse ou le rappel.

Les références JavaScript compilent tous les événements reconnus. Les événements qui sont souvent programmés, au-delà d'un clic sur un élément, sont les suivants :

• soumission d'un formulaire • frappes de touches • autres manipulations de souris, dont les doubles-clics et les déplacements de la souris • sélection d'un élément d'une zone de liste • heure de fin de chargement d'une image

Le gestionnaire d'événements de onLoad est plus important que de nombreux débutants ne le reconnaissent. OnLoad « appartient » aux éléments HTML ; il se déclenche lorsque son propriétaire a terminé son action. L'événement onLoad pour une image <img> se produit lorsque l'image est entièrement restituée et visible. L'événement onLoad pour une table <table> se déclenche une fois que toutes les cellules de cette table ont été tracées.

UTILISATION DU GESTIONNAIRE D'ÉVÉNEMENTS DE ONLOAD

PRÉPAREZ-VOUS. Pour utiliser le gestionnaire d'événements de OnLoad, procédez comme suit : 1. Dans un éditeur de texte ou un outil de développement d'applications, créez L8-js7.

html avec le contenu suivant :

<!doctype html> <html> <head> <title>Validation d’une entrée utilisateur</title>

<script type = “text/javascript”> function validate() { var value = document.getElementById(“input1”).value; if (isNaN(value)) { modifier = “non “; } else { modifier = “”; } var report = “Vous avez saisi ‘” + value + “’; il s’agit “ + modifier + “d’un nombre valide.”; alert(report); } </script> </head> <body>

PRÊT POUR LA CERTIFICATIONQuelle est l'action du gestionnaire d'événements de onLoad ?4.2


<h1>Validation d’une entrée utilisateur</h1> <form name=”calculator”> <input type = “text” id = “input1”></input> <button type = “button” onclick = “validate();”>Cliquez sur moi pour voir ce que je pense de votre entrée</button> </form>

</body> </html>

2. Ouvrez L8-js7.htmldans un navigateur. Un formulaire s'affiche, comme illustré dans la figure 8-12. L'alerte qui s'affiche indique que le chargement de <body> est terminé. C'est le sens de onload = "init();".

Figure 8-12

Une fois que tout le code HTML est complètement chargé, l'événement OnLoad est déclenché

3. Cliquez sur OK pour fermer la boîte de dialogue.

4. Entrez une valeur dans le champ de saisie et cliquez sur le bouton. Observez comment ce programme interprète cette valeur, dont un exemple est illustré dans la figure 8-13.

Figure 8-13

Le code JavaScript de cet exemple réagit à la valeur entrée

206 | leçon 8

5. Faites des expériences avec d'autres valeurs.


Un symptôme typique des programmes JavaScript erronés est qu'ils sont irréguliers : ils donnent des résultats différents à des moments différents. Dans certains cas, cela est dû au fait que le programme est écrit de telle manière qu'il dépend de l'existence d'un élément d'écran particulier, mais ne garantit pas que cet élément existe. Le lancement du programme à des moments différents peut modifier légèrement l'ordre de chargement et les résultats peuvent donc sembler imprévisibles. Une méthode pour résoudre de tels problèmes consiste à commencer les calculs seulement après le « déclenchement » de l'événement onLoad , comme dans in L8-js7.html.

Vous pouvez afficher ou masquer des éléments à l'aide de l'attribut HTML display pour rendre vos affichages « intelligents » et montrer à l'utilisateur des informations pertinentes et les masquer lorsqu'elles ne sont plus utiles.

Affichage et masquage des éléments

Un affichage particulier peut montrer différents types d’informations selon les circonstances : un numéro de téléphone en dehors des heures de bureau et en dehors des jours ouvrables, un avertissement sur l'utilisation affiché seulement les mois où le trafic est excessif, ou des avis sur l'activité des autres utilisateurs affichés seulement quand ceux-ci sont connectés. Une méthode pratique permettant d'organiser ces variations consiste à disposer tous les messages possibles dans l'écran, puis à n'afficher que les plus pertinents. Les éléments HTML ont un attribut display utile pour cette approche.

L'exercice suivant consiste à créer une petite application qui affiche et masque un paragraphe selon la valeur entrée par un utilisateur final. Le programme affiche un message si l'utilisateur entre la valeur 80 ou plus.

MASQUAGE DE PARTIES DE L'AFFICHAGE EN FONCTION DE L'ACTION DE L'UTILISATEUR

PRÉPAREZ-VOUS. Pour créer une application qui affiche et masque un paragraphe en fonction de la valeur entrée par un utilisateur final, procédez comme suit :

1. Dans un éditeur de texte ou un outil de développement d'applications, créez L8-js8.htmlavec le contenu suivant :

<!doctype html> <html> <head> <title>Afficher/masquer en réponse</title>

<script type = "text/javascript"> function check_range() { var value = document.getElementById("price1").value; var paragraph_list = document.getElementsByTagName("p"); var first_paragraph = paragraph_list[0]; if (value >= 80) { display = "block"; } else { display = "none"; } first_paragraph.style.display = display; } </script> </head> <body>

PRÊT POUR LA CERTIFICATIONQuel attribut HTML pouvez-vous utiliser pour afficher des éléments à l'aide de JavaScript ?4.2


<h1>Le prix total, taxes comprises</h1> <form> Est: <input type = "number" id = "price1" min = "1" max = "100" oninput = "check_range();" ></input> </form> <p style = "display:none;">INDETERMINÉ Avertissement :</p>

</body> </html>

2. Ouvrez L8-js8.htmldans un navigateur. Les résultats sont présentés dans la figure 8-14.

3. En utilisant le clavier, entrez chacun de ces « prix » en appuyant sur la touche Entrée après chacun d'eux : 1, 50, 79, 80, 90, et 60. Un avertissement s'affiche lorsque vous entrez 80 et 90, comme illustré dans la figure 8-15.

Figure 8-14

L'interface du programme

Figure 8-15

Votre programme JavaScript vous avertit lorsque la valeur que vous entrez s'approche d'une plage particulière


Les débutants font souvent l'erreur d'oublier « show » et « hide ». L8-js8.html commence par le paragraphe d'avertissement masqué, puis utilise JavaScript pour l'afficher dans certaines circonstances. Souvenez-vous lorsque vous testez la fonctionnalité afficher/masquer que

208 | leçon 8

JavaScript masque à nouveau un élément, au moyen de l'attribut display affecté, une fois que les conditions pour « show » ne sont plus remplies. Dans le cas contraire, une fois qu'un élément s'affiche, il n'est plus masqué.

Est-ce qu'une partie d'un affichage dépend d'une autre partie ? Utilisez JavaScript et la propriété innerHTML pour synchroniser instantanément les deux parties.

Mise à jour du contenu des éléments

Le dernier exercice a réagi à l'entrée d'un prix en affichant ou en masquant un paragraphe d'avertissement. JavaScript peut faire des calculs beaucoup plus complexes que juste un afficher/masquer. Il peut calculer une distance, une recommandation ou, comme le montre L8-js9.html, un prix total.

JavaScript utilise la propriété innerHTML pour modifier le contenu actuel des éléments HTML (appelé également « contenu interne ») ou pour insérer un nouveau contenu.

MISE À JOUR DU CONTENU VISIBLE SUR L'ÉCRAN

PRÉPAREZ-VOUS. Pour créer une application qui met à jour le contenu visible sur l'écran, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez L8-js9.html avec le contenu suivant :

<!doctype html> <html> <head> <title>Calcul d'un élément</title>

<script type = "text/javascript"> //check_range affecte le style d'affichage // du premier paragraphe en tant que fonction du // prix affiché, s'il est de 80 et // plus ou 79 et moins. function check_range() { var value = document.getElementById("price1").value; var paragraph_list = document.getElementsByTagName("p"); var first_paragraph = paragraph_list[0]; if (value >= 80) { display = "block"; } else { display = "none"; } first_paragraph.style.display = display; } // compute_total() est chargé de // mettre à jour avec le total du // prix et des taxes. function compute_total() { var value = document.getElementById("price1").value; if (isNaN(value)) { total = "INDETERMINÉ"; } else { // Prenons l'exemple d'une taxe de 8 %. total = 1.08 * value; total = total.toFixed(2); }

PRÊT POUR LA CERTIFICATIONQuelle propriété JavaScript utilise-t-il pour mettre à jour le contenu des éléments HTML ?4.2


var total_slot = document.getElementById("total"); total_slot.innerHTML = total; } </script> </head> <body><h1>Compute element</h1> <form> Calcul d'un élément: <input type = "number" id = "price1" min = "1" max = "100" oninput = "check_range(); compute_total();" ></input> Entrez un prix : is <span id = "total">INDETERMINATE</span>. </form> <p style = "display:none;">Warning: you are within 20% of your limit.</p> </body> </html>

2. Ouvrez L8-js9.html dans un navigateur Web.

3. À l'aide du clavier, tapez le nombre 1 dans la zone de texte. Un message s'affiche, comme illustré dans la figure 8-16. Il indique le prix majoré de la taxe de 8 % sur un élément de 1 $. Remarquez comme l'affichage est mis à jour rapidement et sans problème.

Figure 8-16

JavaScript peut calculer immédiatement un total qui inclut la taxe de vente sur la base d'une entrée utilisateur

4. Appuyez sur Entrée.

5. Tapez 50 dans la zone de texte et observez comment le message affiché change.

6. Répétez les étapes 3 et 4 en utilisant les valeurs 79, 80, 90, et 60 chaque fois.


Vous pouvez utiliser la commande createElement et la méthode appendChild avec JavaScript pour ajouter des éléments après le chargement du code HTML.

Ajout d'éléments

JavaScript permet des modifications encore plus radicales d'un affichage. Lorsque cela est nécessaire, il est possible de créer de nouveaux éléments et de les inclure dans un affichage existant. La commande createElement et la méthode appendChild permettent de le faire.

PRÊT POUR LA CERTIFICATIONQuelle est l'action de la commande createElement ?4.2

210 | leçon 8

AJOUT D'UN ÉLÉMENT À L'AFFICHAGE

PRÉPAREZ-VOUS. Pour créer une application qui ajoute des éléments à l'affichage, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js10.html avec

le contenu suivant :<!doctype html> <html> <head> <title>Créer un élément</title>

<script type = "text/javascript"> function add_paragraph() { var original = document.getElementById("original"); var new_paragraph = document.createElement("p"); var current_time = new Date() var this_text = "Ce nouveau paragraphe est apparu à " + current_time + "."; // Même une fois que le navigateur a rendu // tout le HTML, il est possible d'ajouter de *nouveaux* // éléments HTML. createTextNode()- // appendChild()-insertBefore() est un // modèle typique pour ajouter un nouveau contenu // textuel. var new_content = document.createTextNode(this_text); new_paragraph.appendChild(new_content); document.body.insertBefore(new_paragraph, original); } </script> </head> <body>

<h1>Créer un élément</h1> <p id = "original">C'est le texte qui s'affiche lors du premier chargement de l'affichage.</p> <button type = "button" onclick = "add_paragraph();">Cliquez sur moi pour ajouter un nouveau contenu</button> <p style = "display:none;">Avertissement :</p>

</body> </html>

2. Ouvrez L8-js10.html dans un navigateur Web. Le programme s'affiche, comme illustré dans la figure 8-17.

Figure 8-17

L'interface de programmation initiale


3. Cliquez sur le bouton. L'écran change, comme illustré dans la figure 8-18.

Figure 8-18

Un écran constitué d'éléments HTML simples ainsi que d'autres créés par JavaScript en réponse à l'action de l'utilisateur

4. Cliquez sur le bouton encore plusieurs fois pour voir les résultats. 5. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si

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

La création d'un élément est une opération un peu plus délicate que la mise à jour d'un élément existant. Vous devez utiliser JavaScript pour créer des relations que HTML établit automatiquement pour votre compte.

RÉSUMÉ DES COMPÉTENCES


• HTML5 et CSS3 offrent une excellente base à votre site Web ou application mobile. Toutefois, effectuer des opérations plus structurées que la présentation du contenu, par exemple répondre avec des données individualisées sur un utilisateur final spécifique, effectuer une transaction de commerce en ligne ou dériver des résultats sur la base des données déjà saisies, demande une véritable programmation. JavaScript est un langage de programmation capable avec grande capacité d'exprimer les interactions que vous voulez que vos utilisateurs finaux aient avec votre application.

• Une fonction représente un segment d'un programme défini et exécuté indépendamment des autres parties. L'action d'une fonction est la séquence des actions des instructions qu'elle contient.

• Les programmeurs les plus efficaces savent faire bon usage de ce qu'écrivent les autres. Une bibliothèque de programmation contient des extraits de code, sous-routines, classes et autres ressources que vous pouvez ré-utiliser pour créer des logiciels. Il existe de nombreuses bibliothèques JavaScript et jQuery est l'une des plus populaires.

• JavaScript est indispensable pour presque tous les effets d'applications HTML modernes et réactives.

• JavaScript peut « accéder » à tout ce que vous voyez dans votre navigateur et le contrôler par programmation. Vous pouvez utiliser la méthode getElementById() pour accéder aux éléments d'affichage.

• Un « événement » est un concept crucial en programmation interactive. Une grande partie de la programmation JavaScript concerne les réponses à un événement. L'événement onLoad est utilisé couramment et il se déclenche lorsque son propriétaire a terminé son action.

• Vous pouvez afficher ou masquer des éléments à l'aide de l'attribut HTML display pour rendre vos affichages « intelligents » et montrer à l'utilisateur des informations pertinentes et les masquer lorsqu'elles ne sont plus utiles.

• Vous pouvez utiliser la commande createElement et la méthode appendChild avec JavaScript pour ajouter des éléments après que le chargement du code HTML.

212 | leçon 8

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Un est une recette que l'ordinateur exécute avec comme résultat une

action ou un affichage particulier. 2. Utilisez la syntaxe var pour définir une nouvelle dans JavaScript. 3. Beaucoup de conditions requises par les applications impliquent des ,

qui représentent des actions, par exemple le clic d'une souris, qui déclenchent d'autres actions.

4. Vous remarquez qu'une partie de votre programme JavaScript représente une séquence d'actions dont la logique est distincte des autres parties du programme. Il serait probablement utile de définir une pour exécuter cette séquence spécifique.

5. L'événement associé à <body> constitue une garantie que tout le HTML a été affiché.

6. Un modèle de codage courant consiste à associer un ID à un élément HTML spécifique, puis à accéder à cet élément via JavaScript avec .

7. Les JavaScript sont les noms de variables et de fonctions. 8. Une est un ensemble de ressources, comme le code des fonctions et

les sous-routines préexistants, que les développeurs utilisent pour créer des programmes. 9. Une se compose de code JavaScript pré-écrit. 10. Plus de la moitié des principaux sites Web utilisent la bibliothèque JavaScript

.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les types d'applications suivantes, lequel est créé par la programmation

JavaScript ? (Choisissez toutes les réponses applicables.)a. statiqueb. dynamiquec. syntaxiquement corrected. interactive

2. Parmi les bibliothèques suivantes, lesquelles sont des bibliothèques JavaScript ? (Choisissez toutes les réponses applicables.)a. Dojob. MooToolsc. YUId. jQuery

3. Parmi les variables suivantes, laquelle est une variable JavaScript valide ?a. my.variableb. 1st-variablec. ord['a']d. [TBC]var1_$

4. Dans quel cas JavaScript ne peut-il pas être utilisé ?a. Avec HTML 4.01 et versions antérieuresb. Lorsque l'utilisateur a désactivé JavaScript dans les préférences du navigateurc. Lorsque l'utilisateur n'a pas installé JavaScript sur son bureaud. Aucune des réponses ci-dessus



5. Parmi les propriétés suivantes, laquelle JavaScript utilise-t-il pour modifier le contenu actuel d'éléments HTML ?a. changeHTMLb. modInnerHTMLc. innerHTMLd. HTMLinner

6. Une page Web particulière a un seul <form>. Comment JavaScript accède-t-il à cet élément ?a. document. getElementsByTagName("form")[0]b. document. getElementsByTagName("form")[1]c. document. getElementsByTagName("form")d. [document. getElementsByTagName("form")]

7. L'utilisateur a coché une case dans un formulaire précisant qu'il n'a pas voyagé récemment dans un pays présentant un accroissement des cas d'hépatite. Comment pourriez-vous utiliser JavaScript pour masquer un paragraphe de mise en garde ?a. warning.style.display = "aucun" b. warning.style.display = 0c. hide(warning)d. warning.style.hide()

8. Une instruction individuelle en JavaScript se termine par un(e) ___.a. marque de hachageb. parenthèse fermantec. pointd. point-virgule

9. Parmi les propriétés suivantes, laquelle JavaScript utilise-t-il pour ajouter de nouveaux éléments à l'affichage d'un programme ? (Choisissez toutes les réponses applicables.)a. createElementb. appendChildc. getElementd. addChild

10. Parmi les propositions suivantes, laquelle peut être utilisée pour afficher et masquer des éléments dans un programme JavaScript ?a. display attributeb. show-hide attributec. show commandd. innerHTML

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Les noms des fonctions sont répertoriés dans la norme JavaScript.V F 2. Dans la source HTML, le code JavaScript apparaît généralement dans un élément

<script> .V F 3. Il est possible d'écrire du code JavaScript qui sera exécuté avant le chargement

de toutes les images.V F 4. Si la fonction f2() utilise la fonction f1(), et que les définitions des deux fonctions

figurent dans le même élément <script>, alors la définition de f1() doit figurer en premier.

V F 5. La méthode getElementByElement() retourne une référence au premier objet associé à l'attribut id ou NAME spécifié.

214 | leçon 8


Scénario8-1:Validationdesentrées

Il vous a été demandé de coder une fonction JavaScript pour valider ou non le format d'une entrée utilisateur dans un champ réservé au numéro de sécurité sociale. Comment procédez-vous ? Que devez-vous fournir à votre équipe ?

Scénario8-2:Présentationdesnomsdefonctions

Raymond crée un programme qui comporte plusieurs fonctions. Il a répertorié les noms des fonctions et leurs descriptions dans un tableau pour s'y référer facilement pendant le développement de son application. Certaines applications ne fonctionnent pas et il vous demande des conseils. Vous remarquez que les fonctions en question commencent par des marques de hachage ou des barres obliques. Que dites-vous à Raymond sur l'affectation de noms aux fonctions ?


Scénario8-3:Sélectiond'unebibliothèqueJavaScript

CiCi voudrait commencer à utiliser les bibliothèques JavaScript pour réduire le temps de création de ses programmes, mais elle ne sait pas par où commencer. Le nombre de bibliothèques disponibles est tellement élevé qu'il est difficile de faire un choix. Que pouvez-vous lui dire ?

Scénario8-4:Distinctionentrelesfonctionsetlesméthodes

André découvre la programmation JavaScript et a du mal à comprendre la différence entre les méthodes et les fonctions. Que pouvez-vous lui dire ?

215

Création d'animations, utilisation de graphiques et accès aux données

215


analyse

animation

API XMLHttpRequest

AppCache

cookies

élément canvas

encapsuler

JSON

LocalStorage

récursivité

type de données



Codage des animations avec Coder les animations avec 4.3 JavaScript JavaScript

Utilisation d'images, de formes et Coder les animations avec 4.3 d'autres graphiques JavaScript

Envoi et réception de données Accéder aux données avec 4.4 JavaScript

Chargement et enregistrement Accéder aux données avec 4.4 de fichiers JavaScript

Utilisation de JavaScript pour valider Accéder aux données avec 4.4 les entrées d'utilisateur dans les JavaScript formulaires

Présentation et utilisation de Accéder aux données avec 4.4 cookies JavaScript

Présentation et utilisation de la Accéder aux données avec 4.4 fonction Local Storage JavaScript

L'équipe de développement de Malted Milk Media a deux nouveaux projets à terminer cette semaine. Attaboy Pet Services veut que son logo s'anime quand les utilisateurs ouvrent la page d'accueil de la société, et Attaboy veut que son logo soit créé par l'élément canvas. Pour le projet d'application mobile Trusty Lawn Care, il est nécessaire que du code soit ajouté pour échanger des données avec un serveur. L'équipe de développement veut que vous essayez d'en savoir plus sur ces aspects de l'utilisation de JavaScript.

9L E Ç O N

216 | leçon 9

■ Codage des animations avec JavaScript

HTML et CSS offrent plusieurs façons d'appliquer des animations rapides aux effets courants. Toutefois, JavaScript est beaucoup plus souple et peut produire des résultats remarquables.L'ESSENTIEL

Une animation représente l'affichage d'une séquence d'images statiques à un rythme assez rapide pour créer l'illusion d'un mouvement. Concernant l'interface utilisateur, une animation modifie l'affichage pour le rendre dynamique, pas seulement une modification ponctuelle, mais un changement transparent. JavaScript est suffisamment souple pour produire des effets d'animation spectaculaires, adaptés au public.La récursivité est un élément clé d'une animation. La récursivité est une technique de programmation dans laquelle une fonction s'appelle. Une technique courante dans l'animation JavaScript consiste à utiliser setTimeout de manière récursive, c'est-à-dire appeler une nouvelle exécution de la même fonction qui a appelé setTimeout() . Il s'agit généralement du moyen le plus efficace d'introduire un « élément de minutage » dans JavaScript.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une animation ?4.3

En dehors de la programmation, le comportement de la récursivité n'est pas toujours bien considéré. Si vous écrivez un dictionnaire ou un lexique, par exemple, il est conseillé de définir un terme sans utiliser les mots qui apparaissent dans l'expression. Supposons que vous définissiez le mot « politique ». Une définition telle que « le domaine de la politique » pourrait être désapprouvée par de nombreux éditeurs en raison de l'utilisation du terme « politique ». En l'informatique, la récursivité s'avère être non seulement autorisée, mais surtout puissante.

REMARQUE*

Création d'animations

N'oubliez pas que le JavaScript est un langage de programmation généraliste puissant. Si vous pouvez imaginer une animation particulière, il y a probablement une façon de le créer en JavaScript.

Une animation (comme les autres effets JavaScript) est sous contrôle informatique. Cela signifie que via un codage suffisamment intelligent, vous pouvez choisir ce que peut faire animation.

La fonction move_paragraph() dans le code source de l'exercice suivant est considérée comme récursive car la fonction move_paragraph apparaît dans la dernière instruction qui définit la fonction. Cet exercice permet de créer une animation constamment mise à jour, dans le style d'un « téléscripteur ».

CRÉER UNE ANIMATION SIMPLE

PRÉPAREZ-VOUS. Pour créer une application simple, effectuez les opérations suivantes : 1. Créez le fichier L9-js1.html avec le contenu suivant :

<!doctype html> <html><head><title>Animer avec JavaScript</title>

<script type = "text/javascript"> // Créer un effet « bande de téléscripteur » en faisant glisser // le paragraphe du texte d'un pixel // vers la droite, encore et encore, jusqu'à ce que la limite // de 300 pixels soit atteinte. Puis // redémarrer l'animation dans le // sens inverse vers la gauche.

PRÊT POUR LA CERTIFICATIONQuelle fonction JavaScript pouvez-vous utiliser pour créer une animation ? 4.3

Création d'animations, utilisation de graphiques et accès aux données | 217

function move_paragraph() { next = current + "px"; current += 1; if (current > 300) { current = 0; } paragraph.style.left = next; // Pause de 18 millisecondes avant // la prochaine étape. var rate = 18; setTimeout(move_paragraph, rate);}function init() { paragraph = document.getElementById("original"); paragraph.style.position = "absolu"; current = 0; move_paragraph();}</script></head><body onload = "init();">

<h1>Animer avec JavaScript</h1><p id = "original">Vous me voyez faire défiler 'écran ?</p>

</body></html>

2. Ouvrez le fichier L9-js1.html dans votre navigateur Web. Le paragraphe se déplace-t-il à travers l'écran, comme illustré dans la figure 9-1 ?

3. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts.

Figure 9-1

Deux instantanés d'un affichage de « téléscripteur » pris à différents moments

Quelques secondes plus tard, le texte est à cet emplacement dans le navigateur

218 | leçon 9

CRÉERUNEANIMATIONINTERACTIVE

PRÉPAREZ-VOUS. Pour créer une animation sensible à l'action d'un utilisateur, effectuez les opérations suivantes : 1. Créez le fichier L9-js2.html avec le contenu suivant :

<!doctype html> <html><head><title>Animer avec JavaScript</title>

<script type = "text/javascript"> // Cette page a pratiquement le même effet que le fichier L9-js1.html // sauf que la fréquence // de déplacement du paragraphe dépend de la valeur // numérique que l'utilisateur final a entré dans le // champ de saisie.function move_paragraph() { next = current + "px"; current += 1; if (current > 300) { current = 0; } paragraph.style.left = next; var rate = document.getElementById("rate").value; setTimeout(move_paragraph, rate);}function init() { paragraph = document.getElementById("original"); paragraph.style.position = "absolu"; current = 0; move_paragraph();}</script></head><body onload = "init();">

<h1>Animer avec JavaScript</h1> <form><input id = "rate" type = "number" value = "18" min = "5" max = "100"></input></form><p id = "original">Vous me voyez faire défiler l'écran ?</p>

</body></html>

2. Ouvrez le fichier L9-js2.html dans un navigateur Web. L'interface s'affiche, comme illustré dans la figure 9-2.


3. Remplacez la valeur du taux (qui est initialement de 18) par un nombre supérieur ou inférieur et notez l'effet sur l'animation. Est-ce que la vitesse de l'animation augmente ou diminue lorsque vous modifiez l'entrée ?


PLUS D’INFORMATIONSPour obtenir des informations de base et connaître les bonnes pratiques en matière de conception d'animation pour l'interface utilisateur, visitez la page Web de Microsoft « Animations et Transitions » à l'adresse http://bit.ly/ziqs0G. La bibliothèque d'animations qui se trouve à l'adresse http://msdn.microsoft.com/en-us/library/windows/desktop/dn742481.aspx fournit une suite d'animations développée par Microsoft qui peut être utilisée pour créer des applications Windows Store.

Figure 9-2

Presque tout le contenu de l'écran est sous le contrôle de JavaScript, notamment la vitesse d'animation

Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique sur un bouton ou qu'un autre événement se produit. La méthode createElement convient bien à cette utilisation.

L'ESSENTIEL

JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais aussi des formes comme des boîtes et des cercles. Une méthode consiste à utiliser la méthode createElement(). Cette méthode crée une fonction réutilisable pour afficher une image :

function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt;

// Ajoute à la balise <body> document.body.appendChild(img);}

Pour afficher l'image, incluez ce code :

<button onclick="show_image ('chemin/nom_fichier', 276,110, 'Logo');"> Afficher le logo</button>

L'affichage d'une image lorsque l'on clique sur un bouton est une tâche relativement simple. Le fait de créer des graphiques à la volée requiert l'élément canvas ou SVG. Cette leçon couvre la création de graphiques à l'aide de l'élément canvas.

PRÊT POUR LA CERTIFICATIONComment pouvez-vous afficher un fichier image à l'aide de JavaScript ?4.3

■ Utilisation d'images, de formes et d'autres graphiques

✚

220 | leçon 9

Avec HTML5, JavaScript peut facilement contrôler non seulement les textes, les formes et les images statiques, mais aussi tracer des graphiques complexes.

L'élément canvas en HTLM5 désigne une zone de dessin contrôlée par programmation. Les seuls éléments graphiques communs aux versions HTML antérieures sont les éléments statiques, comme PNG ou JPG. Les effets dynamiques et les effets interactifs en particulier étaient complexes. L'élément canvas permet de changer tout cela.Comme vous l'avez appris dans la leçon 2, l'élément canvas crée un conteneur pour les graphiques et utilise JavaScript pour tracer les graphiques dynamiquement. Avec JavaScript, vous pouvez également animer des objets en les faisant se déplacer, changer d'échelle et ainsi de suite.Pour dessiner un objet à l'aide de l'élément canvas, les constructions principales que vous devez utiliser sont la fonction getElementById() pour rechercher l'élément canvas et la fonction canvas.getContext (parfois abrégée c.getContext) pour créer l'objet canvas. Vous pouvez ensuite utiliser une multitude de méthodes pour tracer des formes, ajouter des images, etc.Des applications entières (y compris des jeux et des simulateurs impressionnants) ont été construites avec l'élément canvas HTML5.

UTILISER L'ÉLÉMENT CANVAS POUR CRÉER UN CADRAN D'HORLOGE AVEC DES AIGUILLES QUI BOUGENT

PRÉPAREZ-VOUS. Pour illustrer l'utilisation de l'élément HTML5 canvas, effectuez les opérations suivantes : 1. Créez le fichier L9-js3.html avec le contenu suivant :

<!doctype html> <html><head><title>Cadran d'horloge analogique illustrant le contrôle de l'élément canvas en JavaScript</title>

<script type = "text/javascript">function draw_leg(fraction) { dctx.lineTo(center_x + length * Math.sin(2 * Math.PI * fraction), center_y - length * Math.cos(2 * Math.PI * fraction));}

function init() { var canvas = document.getElementById("clockface"); // Les variables suivantes sont créées en tant qu' // éléments globaux, d'autres fonctions // peuvent donc facilement y accéder. dctx = canvas.getContext('2d'); dctx.fillStyle = "noir"; center_x = 100; center_y = 100; length = 100; show_hands();}

// Une aiguille est dessinée comme un triangle isocèle // à partir du centre du cadran de l'horloge jusqu'au bord de celui-ci.

PRÊT POUR LA CERTIFICATIONComment devez-vous utiliser JavaScript pour manipuler des éléments canvas ?4.3

Manipulation de l'élément canvas avec JavaScript


function show_hand(fraction, width) { dctx.beginPath(); dctx.moveTo(center_x, center_y); draw_leg(fraction - width); draw_leg(fraction + width); dctx.fill();}

function show_hands() { // Effacer tout ce qui est déjà présent dans la zone // qui représente le cadran de l'horloge. dctx.clearRect(0, 0, 200, 200); // Quelle heure est-il *maintenant* ? var now = new Date(); seconds = now.getSeconds(); minutes = now.getMinutes() + seconds / 60; hours = now.getHours() + minutes / 60; // La deuxième aiguille est la plus « petite » des trois. show_hand(seconds / 60, 0.002); show_hand(minutes / 60, 0.005); // L'aiguille des heures est deux fois plus large que celle des // hand. show_hand(hours / 12, 0.01); var rate = 1000; setTimeout(show_hands, rate);}</script></head><body onload = "init();">

<h1>Cadran d'horloge analogique illustrant le contrôle de l'élément canvas en JavaScript</h1><canvas id = "clockface" width = "200" height = "200"></canvas>

</body></html>

2. Ouvrez le fichier L9-js3.html dans un navigateur Web. L'écran s'affiche, comme illustré dans la figure 9-3.

Figure 9-3

Instantané des aiguilles de l'horloge codée en JavaScript indiquant 11:47:28

222 | leçon 9

3. Fermez le fichier et le navigateur Web, mais laissez l'outil d'édition ouvert si vous effectuez l'exercice suivant au cours de cette session.

Dans un autre exemple, l'exercice suivant crée un dessin abstrait réalisé en plaçant des blocs sur un élément canvas HTML5. L'exercice illustre qu'il faut relativement peu de lignes en JavaScript pour produire des effets assez compliqués.

CRÉER DES BOÎTES ANIMÉES À L'AIDE DE L'ÉLÉMENT CANVAS

PRÉPAREZ-VOUS. Pour créer des formes animées à l'aide de l'élément canvas, effectuez les opérations suivantes : 1. Créez le fichier L9-js4.html avec le contenu suivant :

<!doctype html><html><head><title>Blocs</title>

<script type = "text/javascript">// Cette page est juste un essai, l'opération consiste à placer des blocs de// couleur sur l'écran de façon aléatoire ,// pour obtenir des effets visuels intéressants.// La récursivité est utilisée de deux façons distinctes// ci-dessous : place_blcks() calls draw_spiral() et// draw_spiral() appelle soit place_blocks() ou // draw_spiral(), en fonction de la partie de la spirale// qui a été dessinée récemment.function init() { var canvas = document.getElementById("drawing_area"); dctx = canvas.getContext('2d'); place_blocks();}

function draw_spiral() { // Une fois qu'un bloc est déplacé à l'extérieur du dessin // la spirale actuelle est arrêtée et une nouvelle // est créée. if (x > 500 || y > 500 || x < 0 || y < 0) { place_blocks(); } ratio = 1.6; newx = x; newy = y; dx = size; dy = size; // Chaque bloc est pivoté de 90 degrés // à partir du dernier. switch (direction) { case "up": dy = -size; newy += dy; direction = "left"; break;


case "left": dx = -size; dy = -size; newx += dx; direction = "down"; break; case "down": dx = -size; newy += dy; direction = "right"; break; case "right": newx += dx; direction = "up"; break; } dctx.fillRect(x, y, dx, dy); // Chaque bloc dessiné successivement est plus grand // que le précédent. size *= ratio; x = newx; y = newy; setTimeout(draw_spiral, delay);}

function place_blocks() { <?ACE 7?>dctx.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16 ); x = 100 + 300 * Math.random(); y = 100 + 300 * Math.random(); delay = 100 + 2000 * Math.random(); size = 3 + 7 * Math.random(); direction = "up"; draw_spiral();}</script></head><body onload = "init();">

<h1>Blocs</h1><canvas id = "drawing_area" width = "500" height = "500"></canvas

</body></html>

2. Ouvrez le fichier L9-js4.html dans un navigateur Web. L'écran se remplit de blocs de couleur, comme illustré dans la figure 9-4.


224 | leçon 9

Figure 9-4

Instantané d'un dessin abstrait réalisé en plaçant des blocs sur un élément canvas HTML5.

■ Envoi et réception de données

Si une application accessible depuis l'ordinateur expose des données à l'utilisateur final, il y a probablement un moyen pour que JavaScript puisse atteindre ces données. L'un des rôles les plus importants de JavaScript est de communiquer en temps réel avec les sources de données distantes.

L'ESSENTIEL

Une partie de la puissance des applications informatiques modernes réside dans leur capacité à coordonner les informations provenant de plusieurs sources en un affichage utile : JavaScript peut rassembler les bases de données côté serveur de l'historique du client, la mémoire locale de l'ordinateur de bureau ou de l'ordinateur de poche avec des sélections d'achat actuelles, le contenu de la page en cours, et les mises à jour à distance des tarifs ou des conditions météorologiques à des fins de comparaison et de calcul.Il est difficile de créer des programmes JavaScript qui envoient et reçoivent des données, non pas parce que les concepts sont difficiles, mais parce que l'application JavaScript possède une structure différente de toutes les autres. Presque tous les exemples de JavaScript de la leçon 8 ont été construits comme de petites pages HTML autonomes. Chaque page individuelle peut être chargée et pleinement utilisée dans un navigateur.Toutefois, un programme JavaScript qui envoie et reçoit des données doit avoir plus d'informations : il doit y avoir un récepteur ou un expéditeur quelque part avec qui votre programme JavaScript peut échanger des données. Le plus souvent, des pages HTML ou des applications mobiles communiquent avec un serveur en réseau dans une application centrale quelconque.


Des transactions de données JavaScript sont souvent présentées comme difficiles conceptuellement et accessibles seulement aux personnes qui maîtrisent AJAX, XML, JSON et un mélange compliqué d'autres acronymes. Ce n'est pas vrai. Vous comprenez déjà les fonctions : il s'agit de petites boîtes spéciales auxquelles vous fournissez zéro ou plusieurs arguments, puis une boîte fait une opération et vous retourne éventuellement un résultat. La communication réseau JavaScript est semblable : elle transmet zéro ou plusieurs éléments de données et reçoit un résultat en retour. La grande difficulté réside dans la mise en place initiale votre propre « laboratoire » avec les pièces nécessaires pour que ce dialogue fonctionne. Une fois que le premier élément fonctionne correctement, vous verrez que vous apprendrez rapidement la sécurité, le flux de contrôle et les règles de codage propres à la communication de données JavaScript. L'une des techniques de transfert de données les plus importantes implique l'API XMLHttpRequest (parfois abrégée sous la forme XHR). XMLHttpRequest permet d'utiliser JavaScript pour transmettre des données sous la forme de chaînes de texte entre un client et un serveur. La syntaxe générale pourrait ressembler à ce qui suit :

function load(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback(xhr.responseText); } xhr.send(data);}

L'objet XMLHttpRequest crée un appel vers le serveur. La méthode open spécifie la méthode HTTP pour contacter le serveur et fournit l'adresse Web du serveur. La fonction callback permet d'obtenir une réponse du serveur. Enfin, xhr.send(data) envoie les données.Pour quelques exercices ultérieurs, comme vous le verrez bientôt, il faut un serveur Web, le cache de l'application, par exemple, n'existe que pour des sites accessible via une connexion réseau. Avec la bonne approche, cependant, presque n'importe quel serveur Web peut faire l'affaire. Votre instructeur mettra en place un accès à un serveur Web afin que vous puissiez essayer le cache d'application sans trop de difficulté. Pour envoyer et recevoir des données explicitement en JavaScript c'est différent. Pour que cela fonctionne, il faut un serveur Web dynamique et une programmation côté serveur. Veillez à ce que ces distinctions soient claires :• La plupart des fonctionnalités de JavaScript : peuvent être illustrées avec un

navigateur à partir du système de fichiers du bureau local.• La cache d'application et quelques autres équipements HTML5 en JavaScript :

nécessitent un serveur Web. N'importe quel serveur Web peut convenir.• XmlHttpRequest et les installations de transmission de données JavaScript comparables,

y compris certains introduites par HTML5 : nécessitent un serveur Web dynamiqueEn l'absence de serveur Web dynamique, l'exercice suivant montre un exemple très simple d'accès aux données. Lorsque vous choisissez de travailler avec des serveurs Web, vous avez plusieurs solutions alternatives qui sont relativement faciles pour un novice en service Web. wamp pour Windows, mamp pour Mac, et lamp pour Linux sont parmi les plus simples pour débuter.

ACCÈS AUX DONNÉES

PRÉPAREZ-VOUS. Procédez comme suit pour obtenir un exemple de la capacité de JavaScript à accéder aux données : 1. Créez le fichier L9-js5.html avec le contenu suivant :

<!doctype html><html><head><title>JavaScript accède aux données</title>

PRÊT POUR LA CERTIFICATIONQuelle API vous permet d'échanger des chaînes de données entre un client et un serveur ?4.4

226 | leçon 9

<script type = "text/javascript">

function init() { var paragraph_object = document.getElementById('paragraph'); message = "Notez que le titre de cette page est '" + document.title + "'."; paragraph_object.innerHTML = message;}

</script></head><body onload = "init();">

<h1>JavaScript accède aux données</h1><p id = "paragraph"></p>

</body></html>


PRÊT POUR LA CERTIFICATIONComment la fonction getElementById() permet-elle d'accéder aux données ?4.4

3. Notez que JavaScript peut accéder au contenu HTML.


Quel est l'intérêt de cet exemple ? Si un programmeur a besoin du titre d'une page Web, pourquoi ne pourrait-il pas simplement copier et coller du code HTML ?

Voici une réponse fréquente : le JavaScript de ce genre est destiné à une bibliothèque à l'échelle du site. Il pourrait y avoir une stratégie ou un style censé s'appliquer à toutes les pages. Dans ce cas, il est beaucoup plus pratique et plus simple d'encapsuler la stratégie dans une bibliothèque JavaScript qui sait comment récupérer le titre, plutôt que de copier et coller le titre de toutes les pages pour l'ensemble du site. Chaque page comprend ensuite une copie identique de la bibliothèque JavaScript.

REMARQUE*

Une « stratégie » est un terme utilisé par les programmeurs qui signifie, en gros, un « style d'action ». Un style visuel peut être quelque chose que nous, les humains, définissons comme « chaque page doit apparaître avec cette image subtile d'arrière particulière ». Une stratégie peut, par exemple, être « chaque page devrait rendre son texte visible presque instantanément, et doit toujours être lisible même si elle est redimensionnée horizontalement ». Les fonctions d'assistance de JavaScript et les normes à l'échelle du site pour le codage peuvent aider à réaliser des stratégies de ce type.

Figure 9-5

Page HTML simple avec un paragraphe calculée par JavaScript


REMARQUE*

Le terme « encapsuler » c'est un peu du jargon, souvent employé par les programmeurs. Dans l'application JavaScript qui a tracé un cadran d'horloge analogique sur un élément canvas, la fonction show_hand() encapsule toute la trigonométrie impliquée dans l'élaboration d'une seule aiguille, que ce soit pour les heures, les minutes ou les secondes. Le programmeur utilise le code show_hand() sans se soucier des détails de ce qui est dedans (la capsule). Pour la plupart des gens, il est beaucoup plus facile de « tracer une boîte » ou d'encapsuler une partie de la fonctionnalité, de donner un nom à la capsule et de la considérer dans son ensemble, plutôt que de rechercher toutes ses parties chaque fois qu'elle est utilisée.

JavaScript est un langage de programmation généraliste et peut donc communiquer des informations structurées beaucoup plus riches que les simples valeurs utilisées dans la majeure partie de cette leçon.

Transmission d'objets complexes et analyse

Concrètement, JavaScript peut gérer des opérations très complexes en programmation. Il est, par exemple, possible de recevoir un rapport sur le prix de l'essence dans plusieurs points de vente et d'être en mesure d'isoler un seul de ces chiffres. L'analyse est un terme utilisé pour décrire la vérification d'informations complexes en éléments constitutifs.

ANALYSER DES DONNÉES COMPLEXES

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à analyser des données complexes, effectuez les opérations suivantes : 1. Créez le fichier L9-js6.html avec le contenu suivant :

<!doctype html> <html><head><title>Analyse de données complexes</title>


// L'instruction suivante doit apparaître // sur une seule ligne.sample_data = "Mobil-17: 3.49; Kroger-03: 3.36; Exxon-01: 3.59; Kroger-04: 3.49;

Valero-A: 3.41; Chevron-01: 3.52"; of_interest = "Kroger-04";

// sample_data est un exemple d'un morceau typique de// une chaîne avec des parties séparées// par des points-virgules, où chacune des parties a deux// sous-parties séparées par le signe deux-points. Beaucoup d'autres formats// sont possibles. Pour analyser ce format particulier,// init() se sépare sur deux séparateurs distincts.function init() { var paragraph_object = document.getElementById("paragraph"); var data_list = sample_data.split(';'); for (j = 0; j < data_list.length; j++) { parts = data_list[j].split(':'); var site = parts[0].trim() if (site == of_interest) {

PRÊT POUR LA CERTIFICATIONQu'est-ce que l'analyse ?4.4

228 | leçon 9

var message = "Compte tenu des données de l'échantillon '" + sample_data + "', ce programme a analysé le prix $"+ parts[1].trim() +" pour le "+ site + " site."; paragraph_object.innerHTML = message; } }}


<h1>Analyse de données complexes</h1><p id = "paragraph">Bienvenue.</p>

</body></html>

2. Ouvrez le fichier L9-js6.html dans un navigateur Web. L'affichage devrait être semblable à la figure 9-6.


JavaScript et les bibliothèques JavaScript librement disponibles fournissent de nombreux équipements d'analyse. L'extraction de données à partir d'une page Web externe lisible par l'homme est juste un exemple parmi tant d'autres de la façon dont JavaScript peut analyser les données.

Par exemple, vous pouvez également utiliser un sous-ensemble de JavaScript appelé JSON (JavaScript Object Notation) pour échanger des objets JavaScript avec un serveur. Si vous utilisez les API JSON.parse et JSON.stringify, le code pourrait ressembler à ce qui suit :

function loadJSON(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback( JSON.parse(xhr.responseText) ); } xhr.send( JSON.stringify(data) );}

loadJSON("my.json", { id : 1 }, function(response) { setTitle(response.title); });

Figure 9-6

JavaScript peut extraire des données intégrées dans un format complexe


Ce code est presque identique à l'exemple de code XMLHttpRequest indiqué précédemment dans la leçon. L'objet XMLHttpRequest crée un appel vers le serveur, et la méthode open spécifie la méthode HTTP pour communiquer avec le serveur et fournit l'adresse du serveur Web. La méthode callback utilise l'analyse JSON pour obtenir une réponse du serveur. Lorsque le serveur répond, l'API JSON.parse est appelée, ce qui crée l'objet JavaScript. L'objet est renvoyé au serveur. Toutefois, les données sont « enchaînées » d'abord.

JavaScript peut accéder aux fichiers sur votre ordinateur local et, avec HTML5, il est possible de valider le type de fichier avant de le charger. JavaScript fait du chargement de fichiers un processus sans erreur plus interactif.

L'ESSENTIEL

Beaucoup d'applications mobiles ou Web disposent d'une fonction pour télécharger un fichier. Le fait qu'il n'y ait aucun moyen efficace de spécifier, par exemple, « d'autoriser seulement le téléchargement d'images et non de documents, et uniquement si les images occupent moins de 1,1 Mo » a longtemps été un point faible du HTML. Sans cette fonctionnalité, il arrive trop souvent que les utilisateurs tentent accidentellement de télécharger des documents non souhaités ou non pris en charge par l'application et les délais réseau rendent la correction de l'erreur très long.

Le HTML5 pouvant accéder aux fichiers locaux, cela signifie qu'une image destinée au téléchargement peut être présentée comme une miniature et validée avant le chargement. Les actions immédiates du JavaScript permettent de faire du téléchargement un processus interactif et sans erreur.

ACCÉDER À UN FICHIER LOCAL

PRÉPAREZ-VOUS. Pour montrer la capacité de JavaScript à accéder à un fichier local, procédez comme suit : 1. Créez le fichier L9-js7.html avec le contenu suivant :

<!doctype html> <html><head><title>JavaScript accède à des fichiers locaux</title>

<script type = "text/javascript">function acknowledge(file_handle) { var size = file_handle.size; var fname = file_handle.name; var message = "Vous avez sélectionné le fichier '" + fname + "'. Il semble être reconnaissable image, total " + size + " taille en octets."; alert(message);

}

function complain(fname) { var message = "Le fichier nommé '" + fname + "' ne semble pas avoir une extension acceptable."; alert(message);

}

PRÊT POUR LA CERTIFICATIONComment est-ce que je peux limiter le type de fichier à charger ?4.4

■ Chargement et enregistrement de fichiers

230 | leçon 9

function handle_file_selection(item) { var f = item.files[0]; var fname = f.name; var last_index = fname.lastIndexOf('.'); if (last_index == -1) { complain(fname); return; } var ext = fname.substr(last_index + 1); if (ext.toLowerCase() in {'gif': '', 'jpg' : '', 'png': '', 'tif': '' }) { acknowledge(f); } else { complain(fname); }}

</script></head><body>

<h1>JavaScript accède à des fichiers locaux</h1><input type = 'file' onchange = 'handle_file_selection(this);' />

</body></html>

2. Ouvrez le fichier L9-js7.html dans un navigateur Web.

3. Cliquez sur Parcourir, puis recherchez et sélectionnez un fichier sur votre ordinateur local qui n'est pas une image. Cliquez sur Ouvrir. L'affichage devrait être semblable à la figure 9-7. La boîte de message vous informe que vous avez sélectionné le type de fichier incorrect. Cliquez sur OK pour fermer la boîte de message.

Figure 9-7

JavaScript peut analyser des fichiers avant de les charger et rejeter ceux qui ne sont pas conformes aux restrictions


4. Répétez l'étape 3 et cette fois ouvrez un fichier image. La boîte de message qui en résulte doit ressembler à la figure 9-8 et vous informer que vous avez sélectionné un type de fichier acceptable. Cliquez sur OK pour fermer la boîte de message.

Figure 9-8

Ce fichier répond aux exigences de chargement de fichier


Notez qu'en fait ce programme ne télécharge pas le fichier sélectionné. Le but de cet exercice est de montrer comment JavaScript peut accéder au fichier et en gérer le contenu, même avant le téléchargement.

Utilisation du cache de l'application (AppCache)

Les utilisateurs veulent être en mesure de parcourir votre site, même en mode hors connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache diffère du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes les pages Web visitées, tandis qu' AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache.

AppCache permet d'enregistrer une copie des fichiers de votre site Web en local sous une forme structurée. Les fichiers comprennent le HTML, CSS et JavaScript, ainsi que d'autres ressources, que le site doit exécuter. Après une première visite, lors des visites suivantes les ressources sont rapidement chargées à partir de la copie locale au lieu d'avoir à attendre sur une connexion réseau.

Comme indiqué dans la leçon 1, AppCache utilise un fichier texte appelé manifeste de cache pour spécifier que les fichiers d'un navigateur Web doivent se mettre en cache en mode hors connexion. Même si un utilisateur actualise le navigateur en mode hors connexion, la page se charge et fonctionne correctement.

AppCache diffère d'un cache de navigateur. Alors que le cache d'un navigateur enregistre toutes les pages Web visitées, AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache. Vous pouvez appliquer AppCache à une seule page Web ou à un site entier.

PRÊT POUR LA CERTIFICATIONQuel est le but de AppCache?4.4

Le navigateur Mozilla Firefox a été utilisé pour cet exercice.

Remarque*

232 | leçon 9

Pour qu' AppCache fonctionne, le serveur Web doit être configuré avec le type MIME approprié (à savoir : text/cache-manifest). En outre, l'extension de fichier préférée pour les fichiers manifeste est .appcache.

UTILISER APPCACHEPRÉPAREZ-VOUS. Pour illustrer AppCache, procédez comme suit : 1. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre

instructeur. Le serveur doit avoir le type MIME défini sur text/cache-manifest. AppCache n'est efficace que pour les accès réseau. Il ne peut pas agir lorsqu'une ressource Web est locale.

2. Créez le fichier L9-appcache.html avec le contenu suivant :

<!doctype html><html manifest = "test.appcache"><head><title>Exemple AppCache minimum</title>

</head><body><h1>Exemple AppCache minimum</h1><p> Cette page doit se recharger après avoir été déconnectée d'

Internet et avoir été actualisée.</body></html>

3. Fermez le fichier L9-appcache.html et téléchargez le fichier sur le serveur Web. L'instructeur vous donnera l'adresse Web du fichier.

4. Dans un navigateur Web, accédez à l'adresse Web. Le fichier L9-appcache.html s'ouvre. 5. Observez l'affichage, comme illustré dans la figure 9-9. Est-ce que la page se recharge

comme prévu ?

Figure 9-9

Page Web extraite de AppCache


Pour obtenir un bon tutoriel sur AppCache, visitez la page Web « Guide à l'intention des débutants sur l'utilisation du cache de l'application » (en anglais) à l'adresse http://www.html5rocks.com/en/tutorials/appcache/beginner/.

6. Déconnectez votre ordinateur local d'Internet. 7. Confirmez que vous ne pouvez pas accéder aux pages Web (la page d'accueil MSDN,

par exemple). 8. Actualisez l'image du fichier L9-appcache.html dans votre navigateur. 9. Notez qu'elle s'affiche rapidement, même si le fichier L9-appcache.html n'est pas

disponible actuellement. 10. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si

vous passez à l'exercice suivant au cours de cette session.


Présentation et utilisation des types de données

En JavaScript, les données se présentent de différentes façons. Les plus courantes sont les chaînes et les nombres. Parmi les autres types de données on trouve : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie.

Les valeurs en JavaScript prennent un aspect spécial et sont appelées types de données. Il s'agit le plus souvent de chaînes et de nombres. « ABCD » et « 1234 » sont deux exemples de chaînes. Le deuxième exemple inclut uniquement des chiffres. Le chiffre « 3 » est un nombre, mais « 3 dollars » est une chaîne.D'autres types de données sont plus spécialisés, par exemple : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie. Leur utilisation est relativement rare et n'est pas abordée dans ce cours.La signification fondamentale des types de données à ce niveau, c'est que leur définition nous réserve quelques surprises. En JavaScript, l'exemple suivant a la valeur 123 :

"'1' + 2 + 3"

Mais l'exemple suivant a la valeur 6 ou 33, selon l'interpréteur JavaScript utilisé :

"1 + 2 + '3'"

Il existe des règles qui définissent entièrement ce comportement, et chacun des types de données a son utilité. Dans cette leçon, vous devez faire la distinction entre un nombre et les caractères qu'il représente. Si vous avez par erreur exécuté un calcul et que JavaScript gère les types de données de façon surprenante, consultez les documents de référence MSDN sur les types de données. En attendant, programmez JavaScript simplement et avec soin.

PRÊT POUR LA CERTIFICATIONQuels types de données sont disponibles en JavaScript ?4.4

■ Utilisation de JavaScript pour valider les entrées d'utilisateur dans les formulaires

Au fur et à mesure que les utilisateurs renseignent un formulaire, JavaScript valide instantanément les entrées et propose d'autres solutions.L'ESSENTIEL

Dans la leçon 3, vous avez appris la saisie et la validation d'un formulaire HTML. Avec JavaScript, vous et vos utilisateurs finaux pouvez exploiter encore plus les formulaires.

Supposons, par exemple, qu'un utilisateur final ait besoin d'entrer un numéro de série sous la forme XXX-XXX-XX-X, où chaque X est un chiffre. Au tout début de l'application Web, les utilisateurs finaux devaient taper cela comme ils le pouvaient, puis « soumettre » un formulaire complet. Le serveur recherchait les éventuelles erreurs et les signalait comme il pouvait.

Avec JavaScript, la validation d'entrée côté client sous la forme de rétroaction et de correction est instantanée.

GÉRERUNFORMULAIREAVECJAVASCRIPT

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript pour gérer un formulaire, procédez comme suit : 1. Créez le fichier L9-js8.html avec le contenu suivant :

<!doctype html> <html><head><title>Gestion de formulaire</title>

PRÊT POUR LA CERTIFICATIONComment JavaScript est-il utilisé pour effectuer la validation d'entrée côté client ?4.4

234 | leçon 9


// L'action de la fonction correcte() consiste à // tester les caractères que l'utilisateur a entrés // par rapport au modèle "XXX-XXX-XX - X'. Si l'entrée // de l'utilisateur ne correspond pas à ce pattern, // supprimez le dernier caractère. Cela donne à // l'utilisateur l'impression qu'il peut seulement // entrer des caractères valides.function correct() { var input_object = document.getElementById("serial"); var value = input_object.value; var current_length = value.length; if (current_length) { var last_character = value.substring(current_length - 1); switch (current_length) { case 4: case 8: case 11: if (last_character != '-') { value = value.substring(0, current_length - 1); } break; default: if (!/\d/.test(last_character)) { value = value.substring(0, current_length - 1); } } if (current_length > 12) { value = value.substring(0, current_length - 1); } current_length = value.length; switch (current_length) { case 3: case 7: case 10: value += "-"; } input_object.value = value; }}

</script></head><body>


<h1>Gestion de formulaire</h1><form>Entrez ici un numéro de série dans le modèle XXX-XXX-XX - X, où chaque X est un chiffre : <input id = "serial" type = 'text' size = '12' onkeyup = "correct();">.</form>

</body></html>


Figure 9-10

La validation d'entrée côté client est une bonne responsabilité pour JavaScript

3. Commencez à taper les caractères. Notez que le champ d'entrée accepte uniquement des caractères qui correspondent au modèle XXX-XXX-XX-X et ignore ceux qui ne correspondent pas.


Pour une véritable application, il faudrait plus de validation : il ne suffit pas qu'une entrée ait l'air d'un numéro de série, l'application doit aussi confirmer qu'il s'agit bien d'un numéro de série. Même si un utilisateur final peut toujours entrer une valeur de façon incorrecte, une simple validation du formulaire par JavaScript facilite énormément la garantie de la réussite. En outre, même avec cette validation, un utilisateur final suffisamment déterminé peut utiliser la souris pour entrer des valeurs qui ne correspondent pas au modèle du numéro de série. Un validateur plus sophistiqué risquerait de coincer les suppressions et les mouvements de la souris.

■ Présentation et utilisation des cookies

Les cookies contiennent traditionnellement des informations à des fins de personnalisation et à des fins pratiques. JavaScript peut créer et récupérer des cookies.L'ESSENTIEL

Les cookies représentent des petits fichiers texte que les sites Web enregistrent sur le disque dur d'un ordinateur et qui contiennent des informations sur l'utilisateur et ses préférences de navigation. Le contenu des cookies change lorsque l'utilisateur se rend de nouveau sur le site et sélectionne différents articles ou modifie ses préférences. Pour JavaScript, un cookie est une variable. Vous devez utiliser JavaScript pour créer et récupérer des cookies.Supposons que vous êtes responsable d'un jeu vidéo codé en HTML et en JavaScript. Il fonctionne assez bien, mais nécessite que l'utilisateur choisisse un « niveau » chaque fois qu'il commence une nouvelle partie. Ne serait-il pas préférable que le jeu devine que l'utilisateur souhaite commencer à un niveau supérieur à celui de son dernier match, avec une option pour régler cela ? Non seulement c'est mieux, mais les capacités de JavaScript en matière de cookie rendent cela facile à programmer.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'un cookie ?4.4

236 | leçon 9

UTILISER DES COOKIES

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à conserver des informations sur l'ordinateur de bureau même avec le navigateur fermé, effectuez les opérations suivantes : 1. Créez le fichier L9-js9.html avec le contenu suivant :

<!doctype html> <html><head><title>Utilisation des cookies</title>


function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } }}

function init() { var message; level_object = document.getElementById("level"); var welcome = document.getElementById("welcome"); var level = getCookie("level"); if (level == null || level == '') { message = "C'est visiblement la première fois que vous jouez. Vous commencerez au niveau 1."; level = 1; } else { message = ""La dernière fois que vous avez joué, vous avez atteint le niveau " + level +". Vous allez commencer là maintenant."; } welcome.innerHTML = message; level_object.value = level;}

function save_level() { setCookie("level", level_object.value, 10);}

function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value;}



<h1>Utilisation des cookies</h1><p id = "welcome">Bienvenue.</p><form>Vous pouvez mettre à jour votre niveau à tout moment. Il est actuellement défini sur<input id = "level" type = "number" min = "1" max = "100" oninput = "save_level();" />.</form>

</body></html>

2. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre instructeur. Les cookies ne peuvent être activés que pour les pages Web visitées en réseau, pas en local.

3. Téléchargez le fichier L9-js9.html sur le serveur Web à l'aide d'un programme de transfert de fichier, tel que décrit par votre instructeur. Votre instructeur doit aussi vous donner l'adresse Web du fichier.

4. Dans un navigateur Web, utilisez l'adresse Web pour accéder au fichier L9-js9.html.

5. Notez le niveau auquel vous commencez, comme illustré dans la figure 9-11.

Figure 9-11

Les cookies ont souvent été utilisés pour conserver les petits morceaux de données sur l'ordinateur client

6. Faites comme si vous aviez joué pendant un certain temps et atteint un niveau différent. Entrez ce niveau dans la zone d'entrée.

7. Fermez la fenêtre de l'application. 8. Ouvrez à nouveau le fichier L9-js9.html. Voyez-vous comment l'application se

« souvient » de votre position d'une session de navigateur à l'autre ? 9. À l'aide des paramètres de préférences de votre navigateur, supprimez le cookie créé

dans cet exercice ou, si c'est plus pratique, supprimez tous les cookies. 10. Ouvrez à nouveau le fichier L9-js9.html. Notez que votre niveau est revenu à la valeur

par défaut de 1. 11. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous

passez à l'exercice suivant au cours de cette session.

■ Présentation et utilisation de la fonction de stockage local

La quantité d'informations pouvant être stockée dans les cookies est limitée et par conséquent les effets de programmation qui peuvent être atteints sont également limités. Les cookies présentent aussi une menace pour la confidentialité des données. HTML5 propose la fonction de stockage local pour personnaliser la programmation plus facilement et la rendre plus performante.

L'ESSENTIEL

238 | leçon 9

Les cookies ont des limites. Ils ont parfois la mauvaise réputation de contribuer à la propagation d'informations personnelles sans votre autorisation, et ils sont peu appropriés pour le stockage des données même les plus simples. La fonction LocalStorage de HTML5 offre une meilleure sécurité et rend la programmation plus facile qu'avec les cookies.

ENREGISTRER DANS LE STOCKAGE LOCAL

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à enregistrer des informations sans cookies, procédez comme suit : 1. Créez le fichier L9-js10.html avec le contenu suivant :

<!doctype html><html><head><title>Utiliser un système de stockage local</title>

<script type = "text/javascript">/// Cette page montre un modèle simple pour/// enregistrer le « niveau » d'un joueur dans le stockage local.function init() { var message; level_object = document.getElementById("level"); var welcome = document.getElementById("welcome"); // " localStorage " est un mot clé pour un navigateur prenant en charge // HTML5. " localStorage.level " est // un nom de variable choisi pour être utilisé par // cette page spécifique. var level = localStorage.level; if (level == null || level == '') { message = "C'est visiblement la première fois que vous jouez. Vous commencerez au niveau 1."; level = 1; } else { message = "La dernière fois que vous avez joué, vous avez atteint le niveau " + level +". Vous allez commencer là maintenant."; } welcome.innerHTML = message; level_object.value = level;}

function save_level() { localStorage.level = level_object.value;}


<h1>Utiliser un système de stockage local</h1><p id = "welcome">Bienvenue.</p><form>Vous pouvez mettre à jour votre niveau à tout moment. Il est actuellement défini sur<input id = "level" type = "number" min = "1" max = "100" oninput = "save_level();" />.</form>

</body></html>

PRÊT POUR LA CERTIFICATIONQu'est-ce que le stockage local ?4.4


2. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre instructeur. Le stockage local ne peut être activé que pour les pages Web accessibles via le réseau, pas localement.

3. Téléchargez le fichier L9-js10.html sur le serveur Web à l'aide d'un programme de transfert de fichier, tel que décrit par votre instructeur. Votre instructeur doit aussi vous donner l'adresse Web du fichier.

4. Dans un navigateur Web, utilisez l'adresse Web pour accéder au fichier L9-js10.html.

5. Notez le niveau auquel vous commencez, comme illustré dans la figure 9-12.

Figure 9-12

L'interface initiale du programme

6. Faites comme si vous aviez joué pendant un certain temps et atteint un niveau différent. Entrez ce niveau dans la zone d'entrée.

7. Fermez la fenêtre de l'application. 8. Ouvrez à nouveau le fichier L9-js10.html. Voyez-vous comment l'application se

« souvient » de votre position d'une session de navigateur à l'autre ? 9. Fermez le fichier et tous les programmes ouverts ou toutes les fenêtres ouvertes.

Remarquez que la programmation du stockage local est bien plus succincte que les opérations correspondantes avec les cookies.



• HTML et CSS offrent plusieurs façons d'appliquer des animations rapides aux effets courants. Toutefois, JavaScript est beaucoup plus souple et peut produire des résultats remarquables.

• JavaScript est un langage de programmation puissant polyvalent. Si vous pouvez imaginer une animation particulière, il y a probablement une façon de le créer en JavaScript.

• Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique sur un bouton ou qu'un autre événement se produit. La méthode createElement convient bien à cette utilisation.

• Si une application accessible depuis l'ordinateur expose des données à l'utilisateur final, il y a probablement un moyen pour que JavaScript puisse atteindre ces données. L'un des rôles les plus importants de JavaScript est de communiquer en temps réel avec les sources de données distantes.

• JavaScript est un langage de programmation généraliste et peut donc communiquer des informations structurées beaucoup plus riches que les simples valeurs utilisées dans la majeure partie de cette leçon.

• JavaScript peut accéder aux fichiers sur votre ordinateur local et, avec HTML5, il est possible de valider le type de fichier avant de le charger. JavaScript fait du chargement de fichiers un processus sans erreur plus interactif.

(suite)

240 | leçon 9

• Les utilisateurs veulent être en mesure de parcourir votre site, même en mode hors connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache diffère du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes les pages Web visitées, tandis qu'AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache.

• En JavaScript, les données se présentent de différentes façons. Les plus courantes sont les chaînes et les nombres. Parmi les autres types de données on trouve : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie.

• Au fur et à mesure que les utilisateurs renseignent un formulaire, JavaScript valide instantanément les entrées et propose d'autres solutions.

• Les cookies contiennent traditionnellement des informations à des fins de personnalisation et pour des raisons pratiques. JavaScript peut créer et récupérer des cookies.

• La quantité d'informations pouvant être stockées dans les cookies est limitée et par conséquent les effets de programmation qui peuvent être atteints sont également limités. Les cookies présentent aussi une menace pour la confidentialité des données. HTML5 propose la fonction de stockage local pour personnaliser la programmation plus facilement et la rendre plus performante.

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 représente l'affichage d'une séquence d'images statiques à un

rythme assez rapide pour créer l'illusion d'un mouvement. 2. Vous devez tracer un diagramme complexe dans le cadre d'un affichage en HTML5.

L'élément est l'une de ces méthodes. 3. Avant HTML5, le moyen le plus courant de conserver des informations d'une

application Web côté client, c'est-à-dire sur l'ordinateur de l'utilisateur, passait par l'utilisation de .

4. permet d'utiliser JavaScript pour transmettre des données sous forme de chaînes de texte, mais pas d'objets, entre un client et un serveur.

5. La est une technique de programmation dans laquelle une fonction s'appelle.

6. L' est le terme généralement utilisé pour décrire la vérification d'informations complexes en éléments constitutifs.

7. L'API permet d'enregistrer une copie des fichiers de votre site Web en local sous une forme structurée.

8. Les valeurs JavaScript prennent un aspect différent, appelé , représentant le plus souvent des chaînes et des nombres.

9. est un sous-ensemble de JavaScript qui permet d'échanger des objets JavaScript avec un serveur.

10. est l'alternative aux cookies.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les propositions suivantes, laquelle est la plus couramment utilisée pour coder

en JavaScript un effet différé ?a. sleep()b. delay()c. wait()d. setTimeout()



2. JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais aussi des formes comme des boîtes et des cercles. La méthode que vous pouvez utiliser pour afficher des graphiques avec JavaScript est :a. createElementb. move_paragraphc. JSONd. display

3. Quelles sont les deux constructions principales utilisées pour tracer un objet à l'aide de l'élément canvas ?a. getElementById()b. getCanvasContextc. getElementByCanvas()d. canvas.getContext

4. L'envoi et la réception de données dans JavaScript nécessitent un serveur Web dynamique et :a. une validation côté clientb. une programmation côté serveur c. CSSd. Aucune des réponses ci-dessus

5. Dans quel ensemble de méthodes l'élément canvas est-il généré ?a. drawRect(), outlineRect(), eraseRect()b. fillRect(), strokeRect(), clearRect()c. beginPath(), fillPath(), endPath()d. beginPath(), fillPath(), closePath()

6. Quelle API JSON permet de convertir un objet JavaScript en chaînes de données pour un échange avec un serveur ?a. JSON.parsifyb. XMLHttpRequestc. JSON.stringifyd. getObjectString

7. Quelle est la différence entre AppCache et le cache d'un navigateur ?a. AppCache enregistre des copies de pages Web.b. Vous devez d'abord visiter une page Web pour qu'elle soit ajoutée dans le cache.c. AppCache n'enregistre que les fichiers répertoriés dans le manifeste du cache.d. AppCache et le cache du navigateur sont la même chose.

8. Parmi les propositions suivantes, laquelle n'est pas un type de données utilisé par JavaScript ?a. compositeb. chaîne c. nombred. booléen

9. Parmi les propositions suivantes, laquelle présente un risque lié à la confidentialité des données ?a. AppCacheb. LocalStoragec. cookiesd. animation

10. Quelle API permet d'utiliser des fichiers distants en mode déconnecté ?a. XMLHttpRequest b. AppCachec. JSON.parsed. JSON.stringify

242 | leçon 9

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. JavaScript ne prend pas en charge la récursivité.V F 2. Vous devez utiliser XMLHttpRequest pour créer des animations.V F 3. Il est possible d'écrire du code JavaScript qui sera exécuté avant le chargement

de toutes les images.V F 4. Vous pouvez utiliser LocalStorage pour stocker les données personnelles d'un

utilisateur.V F 5. Une technique courante dans l'animation JavaScript consiste à utiliser setTimeout

de manière récursive.


Scénario9-1:Présentationdesnotionsdebasesurl'animation

Roan est assistant administratif pour un organisme à but non lucratif qui publie une encyclopédie sur les plantes sauvages. La personne chargée du programme des bénévoles a demandé à Roan s'il pouvait créer une animation graphique sur la page d'accueil pour montrer en 5 ou 6 secondes la croissance d'une graine jusqu'à ce qu'elle devienne une longue herbe des prairies. Roan ne connaît rien à l'animation et vous demande un résumé succinct.

Scénario9-2:Créationd'uneapplicationpourdessinerunpland'étaged'entrepôt

Trudy est responsable d'entrepôt. Elle voudrait créer une application Web qui permet de dessiner le croquis du plan d'étage de l'intérieur d'un entrepôt. Elle doit rapidement soumettre une demande à l'équipe de développement, mais elle ne sait pas quelle technologie appropriée inclure dans sa description. Trudy vous demande votre avis. Que pouvez-vous lui dire ?


Scénario9-3:Améliorationdel'applicationdedessindel'entrepôt

Trudy a décidé de modifier sa demande pour l'équipe de développement et souhaite maintenant inclure un formulaire qui accepte les codes SKU des produits. Le serveur de l'entrepôt comporte des photographies de marchandises, référencées par code SKU, mais aussi des informations sur l'emplacement dans l'entrepôt où se trouvent actuellement ces articles. Trudy voudrait que le programme place une photo de l'article sur l'allée et l'étagère où il se trouve actuellement. Brièvement, comment le réaliser ? Elle a besoin d'ajouter la description à sa demande.

Scénario9-4:Révisiondesdocumentsenmodedéconnecté

Une application en ligne existante recueille et note les commentaires des évaluateurs sur différents postes budgétaires dans un processus extrêmement structuré : chaque poste renvoie vers les détails de la proposition, le personnel responsable, etc. L'application est une réussite. Les évaluateurs se plaignent, cependant, du fait qu'elle ne peut être utilisée qu'en ligne. Ils ne peuvent pas, par exemple, remplir les fiches d'évaluation dans un avion et sans connexion Internet. Ils proposent la possibilité de pouvoir télécharger tous les documents liés et remplir les feuilles de calcul avec leurs observations. Quelle est votre réponse ?

Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc.

L E Ç O N

243


accéléromètre

API de fichier

API de géolocalisation

API Web Worker

API WebSocket

blob

données civiques

données géodésiques

écran tactile capacitif

écran tactile résistif

événement de mouvement

événement tactile

indépendant de la plateforme

indépendant du périphérique

interrogation

liste tactile

objet tactile

stockage de session

stockage local

Web Hypertext Application Technology Working Group (WHATWG)



Réponse à l'interface tactile Répondre à l'interface tactile 4.5

Codage des API HTML5 supplémentaires Coder des API HTML5 supplémentaires 4.6

Accès aux ressources des périphériques Accéder aux ressources des périphériques 4.7 et du système d'exploitation et du système d'exploitation

10

L'équipe de développement de Malted Milk Media vous a demandé de l'aider à réaliser le projet d'application mobile Trusty Lawn Care. L'application doit inclure une interface tactile, donc votre responsabilité consiste à apprendre comment capturer les mouvements et y répondre. Vous devez également acquérir de solides notions en matière de géolocalisation et de capacités matérielles telles que le GPS et l'accéléromètre.

244 | Leçon 10

Les écrans tactiles sont devenus la forme la plus populaire d'interface de smartphone et les ordinateurs de bureau dotés d'écrans tactiles sont assez fréquents. Un appareil tactile dispose d'un écran spécialement développé qui détecte les données d'interaction tactile (appelées points), qui commencent sous la forme de pression ou de signaux électriques. Il existe deux principaux types d'écrans tactiles : • Un écran tactile résistif est composé de plusieurs couches ; la couche supérieure fléchit

lorsque vous appuyez dessus et touche la couche située dessous. Des capteurs détectent la pression, ce qui permet d'identifier la partie de l'écran sur laquelle l'utilisateur a appuyé. Les écrans tactiles utilisés dans les hôpitaux et les restaurants sont souvent de type résistif.

• Lesécrans tactiles capacitifs utilisent des électrodes pour détecter les objets qui touchent l'écran. Comme l'objet doit posséder des propriétés conductrices, un doigt fonctionne, mais pas un objet comme le stylet. La plupart des smartphones à écran tactile et moniteurs d'ordinateurs sont de type capacitif.

Un processeur d'écran tactile rassemble les données d'interaction tactile et les interprète comme des mouvements. Selon le matériel impliqué, les données sont envoyées à partir du processeur directement à l'application de l'utilisateur ou du processeur du système d'exploitation à l'application, où l'application utilise les données pour effectuer des tâches.

Un mouvement est une technique qui utilise un ou plusieurs doigts ou un dispositif de pointage comme un stylet au-dessus d'un contrôle ou d'un objet à l'écran pour fournir des données à une application tactile. Un appui permet de sélectionner un objet ou d'appuyer sur un bouton. Un balayage du doigt permet de faire défiler une série de photos ou une liste de contacts à l'écran. Une action pinchopen permet d'augmenter la taille de l'affichage à l'écran (effectuer un zoom avant). Microsoft définit les mouvements comme indiqué dans le Tableau 10-1.

■ Réponse à l'interface tactile

Un dispositif tactile interprète les mouvements des doigts sur un écran tactile, appelés « mouvements » et les convertit en instructions pour une application. De nombreux mouvements ont des équivalents souris.

L'ESSENTIEL

PRÊT POUR LA CERTIFICATIONComment les écrans tactiles répondent-ils à l'entrée utilisateur ?4.5

PRÊT POUR LA CERTIFICATIONQuels mouvements fournissent des données sur les écrans tactiles ?4.5

Tableau 10-1

Présentation des mouvements tactiles

Mouvement Équivalentsouris Description

Appuyer Clic gauche Appuyer sur l'écran avec un doigt

Appuyer deux fois Double-clic avec le bouton Appuyer rapidement deux fois sur l'écran avec un

gauche doigt

Toucher effectué à N/A Appuyer avec deux doigts sur l'écran simultanément

l'aide de deux doigts

Appuyer et toucher Clic droit Maintenir un doigt appuyé et taper avec un autre

Appuyer et maintenir Clic droit Maintenir un doigt appuyé sur l'écran, puis relâcher

Sélection/faire glisser Faire glisser la souris (sélection) Faire glisser un doigt vers la gauche ou vers la droite

Panoramique inertiel Défilement Maintenir un doigt appuyé sur l'écran, puis faire glisser

le doigt

Faire glisser Déplacer vers l'arrière ou vers Appuyer sur l'écran avec un doigt, le déplacer dans

l'avant, faire défiler vers le une direction quelconque, puis soulever le doigt pour

haut ou vers le bas laisser défiler

Rotation N/A Placer deux doigts sur un objet à l'écran et les

déplacer dans un mouvement circulaire

Zoom CTRL + molette de la souris Pincer un objet vers l'intérieur ou l'extérieur

vers l'avant ou vers l'arrière

Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc. | 245

Vous utilisez la méthode addEventListener pour attacher un gestionnaire d'événements à un élément HTML, qui peut être un div, un lien ou tout ce que vous voulez. L'utilisation de la méthode addEventListener vous permet de faire quelque chose d'utile quand un événement est déclenché. Voici la syntaxe générale de la méthode addEventListener :

object.addEventListener(event, eventListenerFunction);

Par exemple, dans le code suivant pour un programme de zone de dessin, la fonction startup est appelée lors du chargement de la page Web. Le programme écoute un utilisateur qui touche l'écran (l'événement touchstart), déplace un doigt (touchmove), et ainsi de suite :

function startup() { var el = document.getElementsByTagName("cdraw")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchmove", handleMove, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); }

Examinons de plus près la fonction handleStart. Elle est déclarée dans le code suivant, comme les autres fonctions sont déclarées en JavaScript, à ceci près que la fonction listener doit avoir un argument pour représenter l'événement. Vous pouvez utiliser n'importe quel identificateur comme argument d'événement, mais les développeurs utilisent souvent la lettre « e » ou un identificateur commençant par la lettre « e ».

function handleStart(evt) { evt.preventDefault(); var el = document.getElementsByTagName("cdraw")[0]; var context = el.getContext("2d"); var touches = evt.changedTouches; for (var i=0; i<touches.length; i++) { ongoingTouches.push(touches[i]); var color = colorForTouch(touches[i]); context.fillStyle = color; context.fillRect(touches[i].pageX, touches[i].pageY, 4, 4); } }

La méthode evt.preventDefault empêche le navigateur de continuer à traiter l'événement tactile, ce qui l'empêche de défiler dans cet exemple. Une fois le contexte obtenu (e1.getContext), la liste des points de contact modifiés est extraite de la propriété changedTouches de l'événement. Ensuite, le programme traite les éléments de la liste tactile. PageX et pageY fournissent les coordonnées X et Y du doigt.Les événements de mouvement sont déclenchés pour des mouvements à plusieurs doigts. Les événements de mouvement principaux sont :• gesturestart : tout nouveau mouvement avec deux doigts déclenche l'événement gesturestart.• gesturechange : lorsque deux doigts se déplacent sur l'écran, un événement gesturechange

se produit.• gestureend : lorsque vous soulevez les deux doigts de l'écran, l'événement gestureend

est déclenché.Les événements de mouvement sont des types d'événements tactiles, ils reçoivent donc des objets d'événement qui contiennent des propriétés tactiles. En outre, les événements de mouvement peuvent inclure les propriétés suivantes :• scale : indique le degré de zoom d'un pincement à deux doigts qui s'est produit. La valeur

décimale de la propriété commence à 1,0 ; elle est inférieure à 1,0 lorsque les doigts se rapprochent l'un de l'autre et elle est supérieure à 1,0 quand les doigts s'écartent.

246 | Leçon 10

Maintenant que vous comprenez les différents types d'entrées tactiles, nous allons voir comment elles sont capturées et utilisées dans des applications.

Les principaux événements tactiles sont touchstart, touchmove, touchend et touchcancel. Les principaux événements de mouvements sont gesturestart, gesturechange et gesturechange.

Capture et réponse aux mouvements

L'action d'une 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. Les développeurs peuvent avoir recours à un grand nombre d'interfaces de programmation d'application (API) qui utilisent des données d'écran tactile.

Les principaux événements tactiles JavaScript sont :• touchstart : chaque fois qu'un doigt touche l'écran, un événement touchstart est déclenché.• touchmove : lorsqu'un doigt se déplace sur la surface de l'écran, un événement touchmove

est déclenché pour suivre le mouvement des doigts.• touchend : lorsque vous soulevez le doigt de l'écran, l'événement touchend est déclenché.• touchcancel : l'événement touchcancel est déclenché lorsque le périphérique lance une

autre application.

L'événement touchcancel permet au navigateur d'assurer le suivi des objets tactiles actifs dans la liste tactile. Il peut également réinitialiser les variables utilisées au cours des événements touchstart et touchmove. Toutefois, les développeurs utilisent rarement l'événement touchcancel. Vous ne le rencontrerez pas très souvent dans les scripts.

REMARQUE*

En JavaScript, l'objet tactile détecte les entrées sur des périphériques à interaction tactile. Les objets tactiles sont référencés dans la liste tactile, qui inclut tous les points de contact sur un écran tactile. Un appui simple correspond à une entrée dans la liste tactile, alors qu'un mouvement à trois doigts correspond à un total de trois entrées. Les objets tactiles sont en lecture seule et ont les propriétés suivantes :• identifier : un identificateur unique pour l'interaction tactile• target : l'élément HTML affecté par l'interaction tactile• clientx : position horizontale, par rapport à la fenêtre du navigateur• clienty : position verticale, par rapport à la fenêtre du navigateur• pagex : position horizontale, par rapport au document HTML• pagey : position verticale, par rapport au document HTML• screenx : position horizontale, par rapport à l'écran• screeny : position verticale, par rapport à l'écran

Chaque interaction tactile comprend trois listes tactiles différentes :• touches : liste de tous les points de contact actuellement activés sur l'écran• targetTouches : liste des points de contact actuellement activés à l'écran et dont

l'événement touchstart a été déclenché sur le même nœud (à l'intérieur du même élément cible comme élément cible actuel)

• changedTouches : liste des points de contact qui ont déclenché l'événement actuel ; par exemple, dans un événement touchend, le doigt a été retiré

PRÊT POUR LA CERTIFICATIONQuels sont les quatre principaux événements tactiles JavaScript ?4.5


• rotation : indique le degré de rotation avec deux doigts qui s'est produit. La valeur de la rotation est mesurée en degrés ; les valeurs positives suivent le sens des aiguilles d'une montre et les valeurs négatives suivent le sens inverse des aiguilles d'une montre.

Vous pouvez combiner des événements de mouvement avec les effets visuels CSS pour permettre la mise à l'échelle et la rotation. Par exemple, le code suivant implémente le gestionnaire d'événements gesturechange avec la mise à l'échelle et la rotation :

document.addEventListener('gesturechange',

function(event) {

event.preventDefault();

console.log("Scale: " + event.scale + ",

Rotation: " + event.rotation);

}, false);

Une fonction listener implicite est créée dans cet exemple. Le gestionnaire d'événements passe l'objet d'événement comme argument implicite appelé « événement » pour obtenir des informations spécifiques sur l'événement.

Les écrans qui peuvent afficher en mode portrait ou paysage déclenchent un événement orientationchanged lorsque l'utilisateur modifie l'orientation de l'écran. Vous pouvez utiliser orientationchanged pour tester la rotation de l'appareil. Chaque événement possède une valeur numérique qui représente les valeurs d'échelle et de rotation.

DÉTECTION DE LA FONCTIONNALITÉ D'ÉCRAN TACTILE

PRÉPAREZ-VOUS. Pour vérifier si l'appareil de l'utilisateur est tactile, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé L10-touch.html avec le contenu suivant :

<!doctype html>

<html>

<head>

<title>Détecter l'écran tactile</title>

<meta charset="utf-8" />

<style type="text/css">

#canvas{background-color: dodgerblue;}

</style>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", init, false);

function init() {

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

if ("ontouchstart" in document.documentElement) {

canvas.addEventListener("touchstart", detect, false);

}

248 | Leçon 10

else { canvas.addEventListener("mousedown", detect, false); } } function detect() { if ("ontouchstart" in document.documentElement) { alert("Appareil à écran tactile détecté !"); } else { alert("Aucun appareil à écran tactile détecté !"); } }

</script>

</head>

<body> <canvas id="canvas" width="100" height="100"></canvas> <br /> <p>Cliquez sur la zone pour commencer la détection d'écran tactile.</p> </body></html>

Le code suivant dessine une zone de toile sur l'écran, suivie d'une ligne de texte indiquant de cliquer sur la zone pour commencer la détection d'écran tactile. La fonction initial affecte l'élément canvas, puis le détecteur d'événements écoute un événement tactile ou un clic de souris. Si l'utilisateur dispose d'un écran tactile et touche la case, le programme affiche un message qui indique qu' indique q'un appareil tactile a été détecté. Si un clic de souris est détecté, un message indiquant qu'aucun écran tactile n'a été détecté s'affiche.

2. Ouvrez L10-touch.html dans un navigateur Web. L'affichage devrait être semblable à l'illustration de la figure 10-1.

3. Cliquez sur la boîte bleue. Si vous travaillez sur un ordinateur avec un écran ordinaire, le message d'alerte illustré dans la figure 10-2 s'affiche. Dans le cas contraire, un message d'alerte indique qu'un appareil à écran tactile a été détecté.

Figure 10-1

L'interface du programme de détection d'écran tactile


4. Cliquez sur OK pour fermer le message d'alerte.

5. Fermez le fichier et le navigateur Web, mais laissez l'outil d'édition ouvert si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

✚ PLUS D’INFORMATIONSLe spécifications du W3C sur la version 2 des événements tactiles sont disponibles sur la page Version 1 des événements tactiles à l'adresse http://www.w3.org/TR/touch-events/.

■ Codage des API HTML5 supplémentaires

La collaboration WHATWG (Web Hypertext Application Technology Working Group) gère une spécification HTML en cours de développement intégrant les API qui ne faisaient pas partie à l'origine de la spécification HTML5. Il s'agit notamment des API de géolocalisation, Web Worker, WebSockets et de fichier.

L'ESSENTIEL

Comme vous avez appris tout au long de ce manuel, de nombreuses API HTML5 sont disponibles et fournissent des fonctionnalités nouvelles et améliorées tout en facilitant le développement de documents HTML. Ce qui n'a pas été spécifiquement souligné est qu'il existe en fait deux versions de la spécification HTML5 : une publiée par le W3C et l'autre par le WHATWG.La collaboration WHATWG (Web Hypertext Application Technology Working Group) a été formée par Apple, Mozilla Foundation et Opera Software pour définir et documenter la spécification HTML5. Le site Web du WHATWG à l'adresse http://developers.whatwg.org/ est une bonne ressource pour en savoir plus sur les nouveaux éléments de HTML5 et comment les utiliser.La spécification HTML en cours de développement gérée par la collaboration WHATWG contient des API supplémentaires différentes de celles décrites dans la spécification HTML5 du W3C originale. Les API applicables abordées dans les sections suivantes sont les API de géolocalisation, de fichier, de traitements Web et WebSockets.

PRÊT POUR LA CERTIFICATIONQu'est-ce que WHATWG ?4.6

Figure 10-2

Le message d'alerte indique qu'aucun écran tactile n'est présent

L'API de géolocalisation obtient les coordonnées géographiques de l'utilisateur (latitude et longitude). Elle peut également afficher une carte avec un marqueur indiquant l'emplacement de l'utilisateur selon ses coordonnées.

Codage pour capturer la localisation

250 | Leçon 10

PRÊT POUR LA CERTIFICATIONQuelle fonction JavaScript obtient la position géographique actuelle d'un appareil ?4.6

L'API de géolocalisation définit une interface qui fournit la localisation d'un périphérique, généralement à l'aide des coordonnées de latitude et de longitude. L'API soumet la latitude et la longitude à JavaScript dans une page Web à l'aide de l'objet de géolocalisation.

Les deux fonctions principales de géolocalisation sont les suivantes :

• getCurrentPosition : obtient la position géographique actuelle de l'appareil en utilisant la méthode getCurrentPosition.

• watchPosition : observe les modifications de la position de l'appareil dans le temps en utilisant la méthode watchPosition et génère un événement si un changement se produit. L'appel de clearWatch arrête la surveillance.

Voici un exemple simple d'un appel de getCurrentPosition. La fonction de rappel showmap reçoit les coordonnées de latitude et de longitude :

navigator.geolocation.getCurrentPosition(showmap);function showmap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Code pour afficher une carte}

Vous pouvez présenter aux utilisateurs les données d'emplacement de deux manières : géodésique et civile. Les données géodésiques fournissent des données d'emplacement brutes, telles que la longitude et latitude ou en mètres. Les données civiles représentent les données d'emplacement qui sont plus intelligibles pour l'homme, comme une carte ou une adresse, par exemple 637 Park Street.

L'API de géolocalisation retourne des données géodésiques à partir des fonctions, que vous pouvez présenter dans sa forme brute ou combiner avec un service de cartographie en ligne, comme Bing Maps pour afficher une carte avec un pointeur indiquant les coordonnées de l'utilisateur.

Sachez que la confidentialité est une préoccupation majeure pour de nombreux utilisateurs. Par conséquent, l'API de géolocalisation permet aux utilisateurs de masquer leur emplacement et de nombreuses implémentations demandent à l'utilisateur la permission de retourner ses coordonnées d'emplacement.

La géolocalisation est conçue principalement pour les smartphones et autres appareils mobiles et ne fonctionne pas toujours pour les ordinateurs de bureau. Lorsqu'un appareil n'a aucun moyen de se localiser, l'API génère une erreur de position non disponible.

CRÉATION D'UNE APPLICATION DE GÉOLOCALISATION

PRÉPAREZ-VOUS. Pour créer une application de géolocalisation qui affiche la latitude et la longitude actuelles de l'utilisateur, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé L10-geolocation.html avec le contenu suivant :

<!doctype html> <html> <head> <title>Exemple de géolocalisation</title> <meta charset="utf-8" /> <script> var messageDiv = document.getElementById('message'); function initLocation() {


var geolocation = navigator.geolocation;

if (geolocation) { try { navigator.geolocation.getCurrentPosition( successCallback, errorCallback );

} catch (err) { messageDiv.innerHTML = 'Error'; } } else { messageDiv.innerHTML = 'Votre navigateur ne prend pas en charge la géolocalisation.'; }

}

function successCallback(location) { message.innerHTML = "<p>Latitude: " + location.coords.latitude + "</p>"; message.innerHTML += "<p>Longitude: " + location.coords.longitude + "</p>"; }

function errorCallback() { messageDiv.innerHTML = 'Une erreur s'est produite lors de la recherche de votre position'; } </script></head>

<body onload="initLocation()"> <div id="message">Recherche de l'emplacement</div> </body> </html>

Ce code est un bon test de l'API de géolocalisation HTML5. Voici comment le code fonctionne : navigator.geolocation.getCurrentPosition demande une position, qui interroge la fonction GPS de l'appareil matériel ou un routeur de l'ordinateur pour les informations de localisation. En cas de succès, la fonction successCallback affiche les coordonnées de latitude et de longitude à l'écran. Si l'information n'est pas disponible, un message indique qu'une erreur s'est produite lors de la recherche de votre position.

2. Ouvrez L10-geolocation.html dans un navigateur Web. Si le navigateur prend en charge la géolocalisation, vous devriez être invité à autoriser le navigateur à suivre votre emplacement physique, tel qu'illustré à la figure 10-3. Cliquez sur Autoriser une fois ou une commande similaire, selon le navigateur que vous utilisez.

252 | Leçon 10

3. Vos coordonnées s'affichent, comme illustré dans la figure 10-4.


✚ PLUS D’INFORMATIONSLa page Web de Microsoft « Géolocalisation » à l'adresse http://msdn.microsoft.com/fr-fr/library/gg589499(v=vs.85).aspx fournit des liens sur la création d'une page Web prenant en charge la localisation et des didacticiels Internet Explorer. Vous devriez également consulter l'article « 12 idées de géolocalisation HTML5 » dans MSDN Magazine à l'adresse http://msdn.microsoft.com/en-us/magazine/hh563893.aspx.

Les traitements Web sont des scripts qui s'exécutent en arrière-plan, qui effectuent des calculs ou d'autres actions rendant l'interface utilisateur plus réactive.

Présentation des traitements Web

PRÊT POUR LA CERTIFICATIONQuels types d'applications utilisent des traitements Web ?4.6

Figure 10-3

Le navigateur vous demande la permission de suivre votre emplacement physique

Figure 10-4

L'affichage des coordonnées à l'aide de l'application de géolocalisation

Les traitements Web désignent une API qui permet d'exécuter des scripts en arrière-plan comme threads parallèles. Ces threads d'arrière-plan peuvent se connecter à plusieurs pages Web, récupérer des données en temps réel, comme les mises à jour d'actions boursières, effectuer des demandes de réseau ou accéder à l'espace de stockage local,


pendant que le document HTML principal répond à la demande de l'utilisateur matérialisée par un appui, un défilement et une saisie. Les traitements Web aident à maintenir la réactivité de l'interface utilisateur.

Les objets Web Workers sont exécutés dans un seul et même thread. Ils n'agissent pas directement sur le document HTML principal ou le modèle DOM. Cela signifie que vous n'utilisez pas le document ou getElementById dans votre script. (Vous pouvez utiliser setTimeout, setIntervalet XMLHttpRequest.) En revanche, les traitements Web transmettent les informations au moyen de messages, en exécutant le code d'un fichier JavaScript distinct du document HTML principal.

Pour utiliser un traitement Web, vous devez d'abord créer un objet Worker dans votre document HTML principal, comme suit :

var worker = new Worker('worker.js');

Lorsque le navigateur interprète cette ligne, il crée un thread de travail, puis il commence par la méthode suivante :

worker.postMessage();

La méthode postMessage() accepte une chaîne ou un objet JSON comme argument. Tous les navigateurs prennent en charge la transmission de messages de type chaîne, mais seules les dernières versions des principaux navigateurs prennent en charge la transmission d'objets JSON.

En guise de simple exemple de transmission de message par un traitement Web, voici un script dans le document HTML principal :

var worker = new Worker("doWork.js"); // Consultez les messages du traitement worker.onmessage = function(e){ // Le message du traitement e.data }; worker.postMessage("start");

Le code suivant peut apparaître dans le fichier doWork.js :

onmessage = function(e){ if ( e.data === "start" ) { // Effectuer une action ou un calcul done() } }; function done(){ // Envoyer les résultats au document principal postMessage(« Bonjour, j'ai fini »); }

Au lieu d'utiliser le gestionnaire d'événements onmessage, vous pouvez utiliser addEventListener() dans le document HTML principal, comme ceci :

worker.addEventListener('message', function(e) {

254 | Leçon 10

CRÉER ET EXÉCUTER UN TRAITEMENT WEB

PRÉPAREZ-VOUS. Pour créer et exécuter un traitement Web, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-worker.html avec le contenu suivant :

<!doctype html> <html lang="fr"><head><script>var worker = new Worker('doWork.js');

// Envoyer un message pour commencer le travail et lui transmettre une variablevar info = 'Web Workers';worker.postMessage(info);

// Recevoir un message du traitementworker.onmessage = function (event) { // Effectuer une action alert(event.data);};</script><title>Exemples de traitements Web</title></head><body></body></html>

2. Créez un fichier JavaScript nommé doWork.js dans le même dossier que worker.html, avec le contenu suivant :

onmessage = function(event) { var info = event.data; var result = 'Hello ' + info + ' everywhere'; postMessage(result);};

3. Ouvrez L10-worker.html dans un navigateur Web. Le message d'alerte doit afficher, comme illustré dans la figure 10-5.

Figure 10-5

Le résultat de l'exécution d'un traitement Web


4. Cliquez sur OK pour accepter les paramètres et fermer le message d'alerte. 5. Fermez les fichiers et le navigateur Web, mais laissez l'outil d'édition ouvert si vous

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

L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un serveur Web et d'échanger du texte et des fichiers binaires. Les WebSockets permettent de réduire le volume de traitement nécessaire pour les communications en temps réel.

Présentation des WebSockets

WebSocket est une API qui offre un mode de communication en duplex intégral (communication simultanée dans les deux sens), à l'aide d'un seul socket sur Internet. Les développeurs utilisent les WebSockets principalement pour des applications Web en temps réel, comme la messagerie instantanée, les jeux en ligne multijoueur et les cotations boursières.Pour comprendre la puissance des WebSockets, vous avez besoin d'un petit historique de ce qui les a précédés. À l'origine, lorsqu'un utilisateur entrait une URL dans un navigateur Web ou cliquait sur un lien sur une page Web, le navigateur contactait le serveur Web approprié pour la page. Chaque fois que l'utilisateur souhaitait mettre à jour ou actualiser quelque chose sur la page, le navigateur récupérait une toute nouvelle page du serveur Web. Vous pourriez voir encore cela lorsque vous cliquez dans une galerie de photos. Chaque fois que vous cliquez sur pour une nouvelle photo, la page s'actualise et vous devez parfois revenir à la galerie.Des technologies telles qu'AJAX ont permis d'actualiser seulement une partie d'une page Web. Comet et d'autres technologies apparentées de type « push » ont adopté l'interrogation, processus dans lequel un navigateur contacte un serveur Web régulièrement (parfois en permanence) pour vérifier si de nouvelles informations sont disponibles pour être présentées à l'utilisateur. Le problème de l'interrogation est que beaucoup de demandes sont soumises au serveur pour récupérer les nouvelles données, ce qui peut avoir un impact négatif sur les performances.La technologie WebSocket crée une connexion permanente entre un client et un serveur Web, de sorte que l'un ou l'autre peut envoyer des données à l'autre à tout moment. La connexion permanente réduit considérablement le volume de traitement nécessaire pour le canal de communication.Pour établir une connexion WebSocket, le client et le serveur remplacent le protocole HTTP par le protocole WebSocket (WS) au cours de leur connexion initiale. Une fois qu'une connexion a été établie, le client et le serveur peuvent échanger des fichiers texte et binaires en mode duplex intégral.Voici les trois événements principaux associés aux communications WebSocket :

• onopen: quand un socket s'ouvre• onmessage: quand un message est reçu du serveur Web• onclose: quand un socket ferme

Vous verrez chacun de ces événements dans les extraits de code dans cette section. Tout d'abord, étudions le code JavaScript qui ouvre une connexion WebSocket :

var host = 'ws://example.com';

Notez l'utilisation de ws au lieu de http dans l'URL. Vous pouvez également utiliser wss pour les connexions WebSocket sécurisées, comme https pour les connexions HTTP sécurisées.Une fois la connexion Internet initialisée, vous devez la tester afin de vous assurer qu'elle a réussi. Pour ce faire, vous pouvez utiliser le gestionnaire d'événements onopen afin de savoir quand la connexion est ouverte. Voici un exemple qui affiche un message d'alerte lorsque le socket s'ouvre :

socket.onopen = function(){ alert("Socket ouver"); }

PRÊT POUR LA CERTIFICATIONComment les WebSockets réduisent-ils les problèmes de performances associés aux applications en temps réel ?4.6

256 | Leçon 10

Voici un autre exemple de onopen qui affiche un message :socket.onopen = function (openEvent) { document.getElementById("serverStatus").innerHTML = 'Socket ouver'; };

Maintenant, vous êtes prêt à envoyer et recevoir des données. Pour envoyer des messages textuels au serveur, utilisez la méthode send ('message') sur l'objet de connexion. Code pour envoyer un message textuel :

socket.send('message');

Un moyen simple d'envoyer des données binaires est d'utiliser un objet Blob (binary large object). Un blob est tout simplement un type de données qui peut stocker des données binaires, comme les images ou les fichiers multimédias. Pour envoyer un fichier comme un objet Blob, vous pouvez utiliser ce code :

var file = document.querySelector('input[type="file"]').files[0]; socket.send(file);

Pour recevoir des messages du serveur, vous pouvez utiliser le rappel onmessage :socket.onmessage = function(msg){ alert(msg); //Reçu !}

Enfin, pour fermer une connexion, utilisez le gestionnaire d'événements onclose , comme ceci :socket.onclose = function() { alert("Connexion fermée."); };

La spécification de l'API WebSockets est toujours à l'état d'ébauche au moment de la rédaction de ce document et WebSockets n'est pas pris en charge par tous les navigateurs Web. Pour avoir une idée de l'utilisation de WebSockets, effectuez l'exercice suivant.

CRÉATION D'UN WEBSOCKET POUR TESTER LA COMPATIBILITÉ DU NAVIGATEUR

PRÉPAREZ-VOUS. Pour créer un WebSocket qui vérifie si votre navigateur prend en charge les WebSockets, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-WebSocket.html avec le contenu suivant :

<!doctype html> <html><head><script type="text/javascript"> fonction WebSocketTest() { if ("WebSocket" dans la fenêtre) { alert("Votre navigateur prend en charge WebSockets."); // Ouvrir un WebSocket var socket = new WebSocket("ws://localhost:9998/echo"); socket.onopen = function () { // Connecté, envoyer des données socket.send("Connecté"); alert("Connecté."); };


socket.onmessage = function (e) { var received_msg = e.data; alert("Message reçu.");

}; socket.onclose = function () { // WebSocket fermé alert("Connexion fermée."); }; } else { // Navigateur ne prend pas en charge les WebSockets alert("Votre navigateur ne supporte pas les WebSockets."); } }</script></head><body><div> <a href="javascript:WebSocketTest()">Cliquez pour exécuter la démo WebSocket</a></div></body></html>

2. Ouvrez L10-WebSocket.html dans un navigateur Web.

3. Suivez les invites affichées par le programme. Si votre navigateur prend en charge les WebSockets, le premier message d'alerte qui s'affiche est illustré dans la figure 10-6.

4. Cliquez sur OK pour accepter les paramètres et fermer la boîte.

5. Un second message d'alerte devrait apparaître, indiquant que la connexion est fermée, comme illustré dans la figure 10-7. Cliquez sur OK.

Figure 10-6

Un message d'alerte confirme que votre navigateur exécute WebSockets

258 | Leçon 10


PLUS D’INFORMATIONSPour en savoir plus sur les WebSockets, visitez la page Web « WebSockets » de Microsoft à l'adresse http://msdn.microsoft.com/fr-fr/library/ie/hh673567(v=vs.85).aspx.

Vous pouvez utiliser l'API de fichier pour télécharger un ou plusieurs fichiers à partir d'un disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez également la possibilité d'afficher des fichiers image téléchargés dans une application Web.

Utilisation de l'API de fichier pour les téléchargements de fichiers

L'API de fichier permet à un navigateur ou à une application de télécharger des fichiers dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in. Par exemple, à l'aide de l'API de fichier, vous pouvez faire en sorte qu'une boîte de dialogue Ouvrir s'affiche et permette à l'utilisateur de sélectionner un fichier image. Lorsque l'utilisateur clique sur OK, une miniature du fichier image s'affiche dans l'application Web. Les développeurs emploient l'API de fichier dans les jeux et les applications qui utilisent des fichiers de multimédias, dans les clients de messagerie électronique hors ligne, éditeurs de photos et lecteurs vidéo.

L'API de fichier utilise plusieurs interfaces pour accéder à des fichiers de stockage local. Ces interfaces incluent notamment :

• File: inclut des attributs d'informations en lecture seule au sujet d'un fichier individuel, par exemple son nom et type de support, et l'associe au fichier comme une URL

• FileList: une séquence d'objets File de type tableau ; comprend le glisser-déposer d'un dossier de fichiers depuis l'espace de stockage local

• Blob: fournit un accès aux données binaires brutes• FileReader: fournit des méthodes pour lire et afficher un fichier

Un moyen facile de charger un fichier consiste à utiliser l'élément d'entrée type="file" . L'utilisation de l'élément d'entrée type="file" retourne la liste des objets File sélectionnés en tant que FileList. Le code pourrait ressembler à ceci :

<input type="file" id="input" onchange="handleFiles(this.files)">

PRÊT POUR LA CERTIFICATIONQuel élément utilisez-vous pour charger un fichier à l'aide de l'API de fichier ?4.6

Figure 10-7

Un message d'alerte confirme que la connexion est fermée

✚


Pour permettre à l'utilisateur de charger plusieurs fichiers en même temps, ajoutez « multiple » avant onchange, comme suit :

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

VÉRIFICATIONDELACOMPATIBILITÉDESNAVIGATEURSAVECL'APIDEFICHIER

PRÉPAREZ-VOUS. Pour vérifier si les principaux navigateurs sont compatibles avec l'API de fichier, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier HTML

avec le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Vérification de la prise en charge de l'API de fichier par le navigateur</title><script>if (window.File && window.FileReader && window.FileList && window.Blob) { alert('Hourra ! Ce navigateur prend en charge les API de fichier.');} else { alert('Ce navigateur ne prend pas entièrement en charge les API de fichier.');}</script></head>

<body></body></html>

L'instruction « if » vérifie si les API de fichier, FileReader, FileList et Blob sont prises en charge. Si les API sont prises en charge, le message « Hourra » s'affiche. Sinon le second message s'affiche.

2. Enregistrer les fichiers sous L10-FileAPI-checkBrowser.html et ouvrez-les dans chacun des principaux navigateurs Web. L'écran illustré dans la figure 10-8 s'affiche lorsque les API de fichier ne sont pas prises en charge.

Figure 10-8

Message indiquant que les API de fichier ne sont pas prises en charge

3. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'édition ouvert si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

260 | Leçon 10

Comme vous l'avez appris dans la leçon 1, Windows Runtime (WinRT) est l'environnement de système d'exploitation responsable de l'accès aux périphériques, multimédia, réseau, stockage local et distant et à d'autres éléments. Il s'agit de l'environnement dans lequel les développeurs testent leurs applications et où les utilisateurs exécutent celles-ci. Un développeur peut utiliser des API et l'environnement d'exécution pour demander l'accès aux périphériques utilisateur et à la mémoire dans une application.

Les sections suivantes vous guident dans l'accès aux ressources en mémoire et l'accès à l'appareil et au système d'exploitation, qui sont des fonctions de WinRT.

PRÊT POUR LA CERTIFICATIONQuel environnement de système d'exploitation est responsable de l'accès aux périphériques, stockage local, etc. ?4.7

✚ PLUS D’INFORMATIONSUne liste de bibliothèques Windows Runtime et Windows pour les API JavaScript est disponible à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/br211377.aspx.

L'API Web Storage inclut le stockage local (pour les données persistantes) et le stockage de session (pour les données temporaires).

Accès aux ressources en mémoire

■ Accès aux ressources des périphériques et du système d'exploitation

L'environnement d'exécution de Windows permet aux développeurs d'accéder aux ressources en mémoire, mais aussi au matériel à l'aide des API.L'ESSENTIEL

Cette API offre une méthode côté client permettant d'enregistrer les données de session en local dans le navigateur ou dans la mémoire du périphérique. La méthode localStorage permet aux utilisateurs d'enregistrer des volumes de données plus importants entre deux sessions (données persistantes), tandis que la méthode sessionStorage conserve les données d'une seule session uniquement (jusqu'à la fermeture du navigateur). Les données sont stockées sous forme de paires clé/valeur pour les deux types de stockage Web.

Le stockage local concerne les données persistantes et s'avère utile pour les listes de tâches en ligne, les listes de contacts, les calendriers et les articles de panier enregistrés. Il est important que ces informations soient disponibles pour l'utilisateur après la fermeture du navigateur et ultérieurement lorsqu'il ouvrira de nouveau le navigateur. Les informations sont conservées dans une mémoire persistante des applications Web et des périphériques mobiles. Le stockage de session concerne les données temporaires qui sont conservées pour une seule session, jusqu'à la fermeture du navigateur. Toutes les données d'une session sont enregistrées dans le stockage de session, puis effacées lorsque vous fermez l'onglet ou la fenêtre du navigateur. Un programme de recherche des codes postaux illustre parfaitement l'utilisation du stockage de session.

En JavaScript, vous utilisez les objets localStorage et sessionStorage avec les méthodes suivantes pour gérer les paires clé/valeur :• setItem(key,value): ajoute une paire clé/valeur à l'objet de stockage• getItem(key): récupère la valeur d'une clé spécifique• removeItem(key): supprime la paire clé/valeur de l'objet de stockage• clear(): supprime toutes les paires clé/valeur de l'objet de stockage

Voici le code générique permettant d'ajouter une paire clé/valeur à un objet sessionStorage :

sessionStorage.setItem('key', 'value'); var myVar = sessionStorage.getItem('key');


Voici le code générique pour le stockage local :

localStorage.setItem('key', 'value'); var myVar = localStorage.getItem('key');

Les méthodes getItem() et removeItem() utilisent la même syntaxe. L'utilisation de sessionStorage.clear() permet de tout supprimer de la liste.

UTILISATION DE L'OBJET LOCALSTORAGE

PRÉPAREZ-VOUS. Pour enregistrer une valeur dans le stockage local, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-localStorage.html avec le contenu suivant :

<!doctype> <html><head><title>Exemple de localStorage</title> <script type="text/javascript"> function load() { var value = localStorage.getItem("myKey");

if (!value) { alert("Élément introuvable, ajout à localStorage"); localStorage.setItem("myKey", "myValue"); } else { alert(value + " trouvée!"); } }</script></head><body onload="load()"></body></html>

2. Ouvrez L10-localStorage.html dans un navigateur Web. Parce que la valeur "myValue" vient d'être transmise et que la session est en cours, vous devriez recevoir un message d'alerte semblable dans la figure 10-9. Cliquez sur OK pour accepter les paramètres et fermer le message d'alerte.

PRÊT POUR LA CERTIFICATIONQuelle méthode JavaScript utilisez-vous pour ajouter une paire clé/valeur à un objet sessionStorage ou localStorage object?4.7

Figure 10-9

Le premier message d'alerte indique que la valeur est ajoutée à localStorage

262 | Leçon 10

4. Fermez le navigateur Web. 5. Dans le document HTML, remplacez chaque instance de localStorage par sessionStorage. 6. Enregistrez le fichier sous L10-sessionStorage.html et ouvrez-le dans un navigateur

Web. Notez ce qui s'affiche dans le message d'alerte. 7. Fermez le navigateur Web, puis rouvrez L10-sessionStorage.html. 8. Le message d'alerte devrait être identique et indiquer que la valeur n'a pas été

trouvée. C'est parce que vous avez fermé le navigateur Web, ce qui a supprimé la valeur de la mémoire de session.

9. Appuyez sur Ctrl+R ou cliquez sur le bouton Actualiser de votre navigateur. Un message d'alerte s'affiche, confirmant que la valeur a été trouvée.


3. Fermez le navigateur Web, puis rouvrez L10-localStorage.html. Maintenant vous devriez voir le message d'alerte illustré dans la figure 10-10. La valeur a été enregistrée dans le stockage local et a persisté entre les sessions du navigateur.

✚ PLUS D’INFORMATIONSLa page Web de Microsoft « Web Storage HTML5 » à l'adresse http://bit.ly/JeXlJU fournit l'API pour le stockage persistant des données de la paire clé/valeur.

Figure 10-10

Le deuxième message d'alerte confirme que la valeur a été enregistrée

Les applications indépendantes de la plate-forme s'exécutent sur différents systèmes d'exploitation de bureau et mobiles et les applications indépendantes du périphérique sont indépendantes de l'appareil. JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

Accès aux capacités matérielles

HTML5 est considéré comme indépendant de la plateforme. Cela signifie que la famille de technologies HTML5 vous permet de créer des pages Web et 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 la même expérience Web riche.En outre, un programme ou une interface qui exécute un logiciel produisant des résultats semblables sur différents périphériques est indépendant du périphérique. Avec HTML5, CSS et JavaScript, vous pouvez facilement créer des applications indépendantes du périphérique. Les applications indépendantes du périphérique vous permettent d'accéder à des capacités matérielles telles que le GPS, l'accéléromètre et l'appareil photo.En résumé, JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

PRÉSENTATION DU GPS (GLOBAL POSITIONING SYSTEM)Le matériel de GPS (Global positioning system), généralement une puce ou une carte de circuit imprimé, de réception qui communique avec les satellites pour fournir l'emplacement précis d'un périphérique à partir des coordonnées de longitude et de latitude. Les téléphones les plus modernes sont maintenant dotés de GPS, tout comme les ordinateurs portables disposent du WiFi et/ou d'une connexion cellulaire à haut débit.L'API de géolocalisation que vous avez découverte précédemment dans la leçon utilise la puce GPS pour recueillir des données de géolocalisation brutes.

PRÉSENTATION DE L'ACCÉLÉROMÈTREDe nombreux appareils mobiles incluent des capteurs d'orientation et de mouvement, qui détectent l'orientation et le mouvement de l'appareil et utilisent ces informations comme des entrées. Par exemple, lorsqu'un utilisateur tient l'appareil et balance son bras en arrière et au-dessus de sa tête, puis balance le bras en avant, comme pour jouer au tennis, l'appareil reconnaît et enregistre le mouvement.Un accéléromètre est un périphérique qui mesure l'accélération, qui désigne un changement de vitesse ou de direction au cours d'une période. Le capteur de l'accéléromètre détecte les forces exercées sur le périphérique, par exemple un mouvement (haut, bas, latéral) et la gravité. Dans les systèmes liés à Windows, des API spécifiques récupèrent les données de mouvement brutes à partir des capteurs de l'accéléromètre, puis l'API Motion combine les données de ces capteurs et effectue des calculs pour générer des valeurs intelligibles.L'événement devicemotion fournit l'accélération du périphérique, en coordonnées cartésiennes, et la vitesse de rotation. Voici un extrait de code JavaScript qui reçoit des événements devicemotion :

window.addEventListener("devicemotion", function(event) { // Processus event.acceleration, event.accelerationIncludingGravity, // event.rotationRate et event.interval }, true);

PRÊT POUR LA CERTIFICATIONQue signifie indépendant du périphérique ?4.7

Deux capteurs liés sont la boussole et le gyroscope. Le capteur de boussole détermine l'orientation du périphérique par rapport au pôle nord magnétique de la terre. Vous pou-vez utiliser le capteur de boussole avec les API appropriées pour créer des applications comme le géocaching et la navigation par exemple. Le capteur de gyroscope utilise le mouvement (forces de rotation) pour détecter la vitesse de rotation du périphérique selon les trois axes principaux.

REMARQUE*

ACCÈS À UNE CAMÉRALa spécification « HTML Media Capture » du groupe W3C utilise un attribut de capture avec l'élément input pour capturer les données des appareils photo, caméscopes, webcams, microphones, etc. Par exemple, le code générique suivant télécharge une image de l'appareil photo du périphérique :

<input type="file" accept="image/*" capture="camera">

264 | Leçon 10

Cependant, cette construction offre une prise en charge limitée et ne fonctionne qu'avec certains navigateurs mobiles. La tendance est au passage à la méthode getUserMedia() et à l'objet de navigateur comme autre solution, qui accède au flux de données de la caméra et du microphone d'un appareil. getUserMedia fonctionne bien avec les nouveaux éléments audio et vidéo de HTML5. Voici un extrait de code qui fournit un accès au matériel d'un appareil :

navigator.GetUserMedia('audio, video', function(localMediaStream) { var video = document.querySelector('video'); video.src = window.createObjectURL(localMediaStream);}, onFailSoHard);

Les spécifications sont dans le flux, donc vous devriez vous attendre à des changements au fur et à mesure que les spécifications sont modifiées et que les fournisseurs de navigateur adoptent la technologie.

EXPLORATION DES CAPACITÉS MATÉRIELLES

PRÉPAREZ-VOUS. Pour explorer les capacités matérielles, procédez comme suit : 1. Visitez a page Web MSDN « Démarrage rapide : détection d'emplacement

d’emplacement avec HTML5 (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh452746.aspx.

2. Copiez et collez l'exemple de code JavaScript dans un outil d'édition ou de développement d'applications et enregistrez-le sous L10-geo-ms.html.

3. Ouvrez L10-geo-ms.html dans un navigateur Web et testez l'application. 4. Comparez les coordonnées de longitude et de latitude avec L10-geolocation.html, que

vous avez créé dans une leçon antérieure. 5. Réponse à un mouvement de l’utilisateur avec l’accéléromètre (HTML) » à l'adresse

http://bit.ly/J7OA58. 6. Lisez l'exemple de code JavaScript et l'exemple de balisage HTML. 7. Répondez aux questions suivantes, en recherchant des parties du code et du balisage

si nécessaire :a. Quelle fonction établit une connexion avec l'accéléromètre par défaut ? b. Quelle fonction capture les données du nouvel accéléromètre ?c. Quels éléments écrivent les nouvelles valeurs à l'écran ?

8. Fermez tous les programmes et fichiers ouverts.

✚ PLUS D’INFORMATIONSPour en savoir plus sur les API liées à une caméra, consultez la page Web MSDN à l'adresse suivante : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465152.aspx. Pour explorer les composants Windows Runtime, accédez à cette page Web MSDN : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh441572.aspx.



• Un dispositif tactile interprète les mouvements des doigts sur un écran tactile, appelés « mouvements » et les convertit en instructions pour une application. De nombreux mouvements ont des équivalents souris.

• Les principaux événements tactiles sont touchstart, touchmove, touchend et touchcancel. Les principaux événements de mouvements sont gesturestart, gesturechange et gestureend.


• La collaboration WHATWG (Web Hypertext Application Technology Working Group) gère une spécification HTML en cours de développement intégrant les API qui ne faisaient pas partie à l'origine de la spécification HTML5. Il s'agit notamment des API de géolocalisation, Web Worker, WebSockets et de fichier.

• L'API de géolocalisation obtient les coordonnées géographiques de l'utilisateur (latitude et longitude). Elle peut également afficher une carte avec un marqueur indiquant l'emplacement de l'utilisateur selon ses coordonnées.

• Les traitements Web sont des scripts qui s'exécutent en arrière-plan, qui effectuent des calculs ou d'autres actions rendant l'interface utilisateur plus réactive.

• L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un serveur Web et d'échanger du texte et des fichiers binaires. Les WebSockets permettent de réduire le volume de traitement nécessaire pour les communications en temps réel.

• Vous pouvez utiliser l'API de fichier pour télécharger un ou plusieurs fichiers à partir d'un disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez également la possibilité d'afficher des fichiers image téléchargés dans une application Web.

• L'environnement d'exécution de Windows permet aux développeurs d'accéder aux ressources en mémoire, mais aussi au matériel à l'aide des API.

• Web Storage HTML5 inclut le stockage local (pour les données persistantes) et le stockage de session (pour les données temporaires).

• Les applications indépendantes de la plate-forme s'exécutent sur différents systèmes d'exploitation de bureau et mobiles et les applications indépendantes du périphérique sont indépendantes de l'appareil. JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. L'action d'une application en réponse à un mouvement s'appelle un événement

__________. 2. Les données __________ fournissent des données d'emplacement brutes, telles que la

longitude et la latitude ou les mètres. 3. Les __________ désignent une API qui permet d'exécuter des scripts en arrière-plan

comme threads parallèles. 4. L'API __________ offre une communication en duplex intégral (dans les deux sens)

via un seul socket sur Internet. 5. L'API _______permet à un navigateur ou à une application de télécharger des fichiers

dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in. 6. Un programme ou une interface qui exécute un logiciel produisant des résultats

semblables sur différents périphériques est aussi appelé ____________________. 7. Un __________ est un périphérique qui mesure l'accélération, désignant un

changement de vitesse au cours d'une période. 8. Un écran tactile de type __________ est composé de plusieurs couches ; la couche

supérieure fléchit lorsque vous appuyez dessus et touche la couche située dessous. Des capteurs détectent la pression, ce qui permet d'identifier la partie de l'écran sur laquelle l'utilisateur a appuyé.

9. Un _______ est un type de données qui peut stocker des données binaires, comme les images ou les fichiers multimédias.

10. Comet et d'autres technologies apparentées de type « push » ont adopté __________, processus dans lequel un navigateur contacte un serveur Web régulièrement (parfois en permanence) pour vérifier si de nouvelles informations sont disponibles pour être présentées à l'utilisateur.


266 | Leçon 10



1. Quel type d'écran tactile nécessite des propriétés conductrices ?a. Capacitifb. Résistifc. Électroniqued. Aucune des réponses ci-dessus

2. En JavaScript, parmi les propositions suivantes, laquelle contient une référence à tous les points de contact avec un écran tactile ?a. Objet tactileb. Identificateurc. TactileListed. Manifeste

3. Quelle API définit une interface qui fournit la localisation d'un périphérique, généralement à l'aide des coordonnées de latitude et de longitude ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

4. Parmi les propriétés suivantes, laquelle n'est pas utilisée par les traitements Web ?a. setTimeoutb. setIntervalc. XMLHttpRequestd. getElementById

5. Parmi les propositions suivantes, lesquelles illustrent bien les applications Web qui profitent des WebSockets ? (Choisissez toutes les réponses applicables.)a. Conversation instantanéeb. Carnet d'adressesc. Jeu en ligne multijoueurd. Cotations boursières

6. Quelle API permet de télécharger des images et d'afficher immédiatement les vignettes dans les documents HTML ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

7. Quelle API utilise ws au lieu de http pour référencer les URL ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

8. Quelle méthode permet aux utilisateurs de conserver des volumes de données relativement importants entre deux sessions du navigateur ?a. localStorageb. sessionStoragec. postMessaged. addEventListener


9. Quelle méthode permet d'accéder au flux de données de la caméra et du microphone du périphérique ?a. getUserMediab. sessionStoragec. addEventListenerd. getCameraSound

10. Quel capteur d'un périphérique mobile permet de détecter la force de gravité et d'autres forces résultant du mouvement de l'appareil ?a. GPSb. Boussolec. Accéléromètred. Gyroscope

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Le groupe W3C a été fondé par Apple, Mozilla Foundation et Opera Software

pour définir et documenter la spécification HTML5.V F 2. En JavaScript, l'objet tactile détecte les entrées sur des périphériques à interaction

tactile. V F 3. Les données civiles représentent les données d'emplacement qui sont plus intelligibles

pour l'homme, comme une carte ou une adresse, par exemple 637 Park Street.V F 4. Les développeurs testent leurs applications et les utilisateurs exécutent les

applications dans l'environnement WinRT.

V F 5. Le mouvement d'appui simple ou prolongé est l'équivalent d'un clic gauche de la souris.


Scénario 10-1 : Présentation des mouvementsJérôme est un collègue de travail et développeur en herbe qui « bidouille » une application à interaction tactile. Il voudrait connaître le mouvement qui simule un clic de souris. Que pouvez-vous lui dire ?

Scénario 10-2 : Collecte des données d'emplacement des clientsLa société Austin Energy and Light voudrait que ses clients se connectent sur leur site Web et utilisent une application qui indique avec précision le lieu où ils se trouvent. L'application doit être très réactive à l'interaction avec l'utilisateur et doit laisser aux utilisateurs le soin de continuer à remplir le formulaire. Les données d'emplacement seront envoyées aux périphériques de poche qui seront utilisés par des techniciens sur le terrain pour repérer rapidement le domicile et le lieu de travail des clients. Quelles technologies proposez-vous à la société ?


Scénario 10-3 : Présentation du mouvement périphériqueVong est développeur pour un grand fabricant de smartphones. Elle a récemment été affectée à un projet sur le mouvement des périphériques au sein d'une équipe de développement. Elle voudrait comprendre rapidement la différence entre les capteurs de l'accéléromètre, de la boussole et du gyroscope. Que pouvez-vous lui dire ?

Scenario 10-4 : Exploration de l'API Web StorageVong revient avec une nouvelle question sur le stockage Web. Elle pense que le stockage Web désigne l'enregistrement des fichiers avec un service de cloud sur le Web, mais elle ne voit pas très bien le lien avec son projet smartphone. Comment pouvez-vous lui expliquer clairement le concept de stockage Web ?

268

Annexe A

Examen 98-375 Notions fondamentales sur le développement d'applications HTML5

Objectif de l'examen Numéro de la compétence Numéro de la leçon

Gestion du cycle de vie d'une application

Connaissance des principes fondamentaux de la plateforme 1.1 1

Gestion de l'état d'une application 1.2 1

Débogage et test d'une application HTML5 à interactions tactiles 1.3 1

Publication d'une application dans un magasin en ligne 1.4 1

Création d'une interface utilisateur avec HTML5

Choisir et configurer les balises HTML5 pour afficher le texte 2.1 2

Choisir et configurer les balises HTML5 pour afficher les graphiques 2.2 2

Choisir et configurer les balises HTML5 pour lire les fichiers multimédias 2.3 2

Choisir et configurer les balises HTML5 pour organiser le contenu et les 2.4 3 formulaires

Choisir et configurer les balises HTML5 pour les entrées et la validation 2.5 3

Mise en forme de l'interface utilisateur à l'aide de CSS

Comprendre les principes de base des feuilles de style CSS 3.1 4

Organiser le contenu d’une interface utilisateur avec CSS 3.2 5

Gérer l’enchaînement du texte avec CSS 3.3 6

Gérer l'interface graphique avec CSS 3.4 7

Coder à l'aide de JavaScript

Gérer et assurer la mise à jour de JavaScript 4.1 8

Mettre à jour l'interface utilisateur avec JavaScript 4.2 8

Coder les animations avec JavaScript 4.3 9

Accéder aux données avec JavaScript 4.4 9

Répondre à l'interface tactile 4.5 10

Coder des API HTML5 supplémentaires 4.6 10

Accéder aux ressources des périphériques et du système d'exploitation 4.7 10

Index

269

AÀ espacement fixe, 94–95Accéléromètre, 263Accès aux données, 225–227Adapté au Web, 166Affichage

ajouter un élément à, 210masquer des parties de, en fonction de l’action de

l’utilisateur, 206–208Affichage, 22Ajout d’éléments, 209–211

pour afficher, 210Analyse, 227–229Angles arrondis, création, 160–161

boîte avec, création, 162–163Animation interactive, 218–219Animations, 173–179, Voir aussi Zone de dessin

3D, 173–179à l’aide de CSS, 178–179codage à l’aide de JavaScript, 216–219création, 216–219

animation interactive, 218–219animations simple, 216–219

API de fichier pour les téléchargements de fichiers, 258–259interfaces pour accéder à, 258

API Web Worker, 252–255création, 254–255exécution, 254–255

API WebSockets, 255–258événements principaux associés à, 255interrogation, 255test de compatibilité de navigateur, 256–258

API XMLHttpRequest, 225Application dynamique, 190Applications de tablette tactile/tablette, compétences et contenus

HTML5 pour, 13Attribut autofocus, 79Attribut email, 78Attribut pattern, 78Attribut required, 78Attributs d’entrée, 77–81

attribut autofocus, 79attribut email, 78attribut pattern, 78attribut required, 78texte de l’espace réservé, 78

Attributs globaux, 24, 54Attributs, 23–24, 33, Voir aussi Attributs d’entrée

attributs globaux, 24Autorisations d’identité, 10

BBalisage de base, HTML, 22–29Balisage sémantique, 54Balises audio, 4, 47–49

élément audio, 47utilisation, 48–49

Balises pour afficher des graphiques, 34–44, Voir aussi Support : balises HTML5 pour la lecture

Balises HTML5 pour afficher, choisir et configurer, 34–44éléments figcaption, 35–38éléments figure, 35–38image de remplacement pour les navigateurs plus anciens, 41–42image raster, 35image vectorielle, 35page Web, affichage des images dans, 37SVG, création de graphiques à l’aide de, 42–44utilisation, 215–242zone de dessin, création de graphiques avec, 38–42

Balises vidéo, 4, 45–47attributs disponibles, 45compression vidéo, 46compression, 46élément vidéo, utilisation, 46–47

Balises vides, 22Balises, 22

utiliser pour ajouter une structure au document HTML, 55–64Bibliothèque, 197–199Blob, 256Boîte flexible/Modèle de boîte Boîte flexible, 113

boîte flexible avec élément flexbox, création, 119direction des éléments enfants dans une boîte flexible,

modification, 122–126éléments flexbox, 114, 116–128

avec la fonction flex, création, 120–122mise à l’échelle proportionnelle dans, 116–122ordre de boîte flexible, inversion, 124–126pour l’alignement, la direction et l’orientation du

contenu, 114–128pour les dispositions simples, 112–114propriété flex-order, 127utilisation, 116–128

Bordure, 112

CCache d’application (AppCache), 231–232

pour les fichiers hors connexion, 11–12Cache, 231, Voir aussi Cache de l’application (AppCache)

manifeste de cache, 11Cadran d’horloge avec aiguilles qui bougent, création, 220–222

270 | Index

Cadre englobant, 102Calculatrice dans le navigateur en utilisant JavaScript, 199–201Caméra, 263–264Capacités matérielles, 264

accès, 262–264indépendant de la plateforme, 262indépendant du périphérique, 263

Classe, 93Codec, 45–46Colonnes

création, 146–150column-count, 146column-gap, 146column-rule, 146disposition multicolonne, 146, 149trois colonnes, 148

pour optimiser la lisibilité du texte, 145–152<Command> élément dans HTML5, 31Compatibilité avec les navigateurs, WebSocket pour tester, 256–258Compatibilité de l’API de fichier, 259Compression vidéo, 46Compression, 46Conteneur d’applications, 8Conteneurs, enchaînement du contenu via, 140–145Contenu, 112

balises HTML5 pour organiser, 54–72conteneurs, 140débordement, gestion, 102–105des éléments, 208–209

contenu visible à l’écran, 208–209mise à jour, 208–209

et style, séparation, 91–92flux, gestion, 96–98

débordement de contenu, gestion, 102–105débordement masqué, 104–105débordement visible, 104–105flux de bloc, 96flux inclus, 96

source, 140Cookies, 11, 235–237Coupure de mots automatique, 152Coupure de mots, 150–152

coupure de mots automatique, 152pour optimiser la lisibilité du texte, 145–152

ms-hyphenate-limit-chars, 150ms-hyphenate-limit-lines, 151ms-hyphenate-limit-zone, 150

Création de formes, à l’aide de la zone de dessin, 39–40contour d’une forme, 40–41

Création de formulaire, 77–81formulaire Web simple, 79–81

Création d’éléments animés à l’aide de la zone de dessin, 222–224Cycle de vie de l’application, gestion, 1–20, Voir aussi HTML5

AppCache pour les fichiers hors connexion, 11–12états de l’application, présentation et gestion, 10–12

état de l’application, 11état de session, 11informations d’état persistantes, 11localStorage, 10

sessionStorage, 10stockage des données d’état à l’aide du stockage local et de

session, 11–12interfaces tactiles et mouvements, 12–13Place de marché Windows Store, 16–17Principes fondamentaux de la plateforme, 2–10

autorisations d’identité, 10conteneur d’applications, 8empaquetage, exploration, 7–10environnement d’exécution, exploration, 7–10exemples d’applications, exploration, 8–10informations d’identification, 10interface de programmation d’application (API), 7interface utilisateur Windows, 3jeux d’autorisations, 10package d’application, 8processus hôte, 7–8Windows Runtime (WinRT), 7

Publication d’une application dans un magasin en ligne, 16–17

DDébogage, 13–16Débordement de défilement, 102–104Débordement masqué, 104–105Débordement visible, 104–105Déclarations, 92–94Dégradé linéaire, 164Dégradé radial, 165Dégradés d’arrière-plan, 164–166Dégradés, 164–166

dégradé linéaire, 164 dégradé radial, 165dégradés d’arrière-plan, 164–166

application à un cadre, 165–166Désapprobation, éléments HTML5, 32–33

<acronym>, 33<applet>, 33<basefont>, 33<big>, 33<center>, 33<dir>, 33<font>, 33<frame>, 33<frameset>, 33<noframes>, 33<strike>, 33<tt>, 33effets des éléments désapprouvés, 34

Direction des éléments enfants dans une boîte flexible, modification, 122–126

Disposition en grille simple, 130Disposition multicolonne, 146Dispositions en grille, 114, 128–133

création, à l’aide de propriétés CSS pour les lignes et colonnes, 130–132

disposition en grille simple, 130–131modèles de grille, 132–133pour l’alignement, la direction et l’orientation du contenu, 128–133

Index | 271

cellules de la grille, 129éléments de la grille, 129lignes de la grille, 129suivis de la grille, 129

Doctype, 25–26Document Object Model (DOM), 7, 141Données civiques, 250Données géodésiques, 250Données, 224–229

accès, 215–242analyse, transmission, 227–229envoi et réception, 224–229objets complexes, transmission, 227–229types, 233

EÉcran tactile résistif, 244Écrans tactiles capacitifs, 244Effet de flou gaussien, 180–182Élément article, 61Élément aside, 61–64

ajout au document HTML, 63–64Élément audio, 47Élément block-level, 113Élément datalist, 79Élément flottant positionné, 152Élément footer, création de documents HTML avec, 56Élément footer, création de documents HTML avec, 6Élément menu, 72Élément nav, 59–61

ajout au document HTML, 60–61Élément section, document HTML création avec, 57–59Élément vidéo, 45Éléments figcaption, 35–38Éléments figure, 35–38Éléments individuels, positionnement, 99–102Éléments inline, 113Éléments, 23, Voir aussi Contenu : des éléments

accès, 201–203affichage, 206–208ajout d’éléments, 209–211audio, 47localisation, 201–203masquer, 206-208mise à jour du contenu de, 208–209vidéo, 45

Encapsulation, 226Entités, 24–25Entrée de formulaire, 73Entrée, balises HTML5 pour, 72–83Environnement de développement intégré (IDE), 88, 190Environnement d’exécution (RTE), 7Espace de noms, 8État de l’application, 11État de session, 11Événement devicemotion, 263Événement tactile, 245–249Événements, écoute et réponse à, 203–206

Exemples d’applications, exploration, 8–10Extensible Markup Language (XML), 42

FFamille de polices sans serif, 94–95Feuilles de style en cascade (CSS), 2, 32, 87–109, 137–158,

Voir aussi Notions essentielles sur les feuilles de style en cascade CSS ; Gestion de l’interface graphique

contenu et style, séparation, 91–92création de page Web de base, 90–91CSS3, 88déclarations, 92–94flux de contenu, 87–109

gestion, 96–98outils appropriés, 88–89polices et familles de polices, 94–96

Feuilles de style en cascade (suite)débordement de défilement, 102–104gestion du flux de texte à l’aide de, 137–158

dynamiquement via des conteneurs, 140–145entre plusieurs sections, à l’aide de régions dans, 139–155flux autour d’un objet flottant, exclusions CSS dans, 152–155optimisation de la lisibilité du texte, colonnes et coupure de

mots dans, 145–152, Voir aussi Colonnes ; coupure de motsRégions CSS, implémentation Microsoft, 142–145texte qui déborde, 142

HTML et, lien entre, 89–91utilisation simple de CSS avec HTML, 89–90

positionnement, 87–109positionnement absolu, application, 100–102positionnement d’éléments individuels, 99–102positionnement flottant, application, 99–100

sélecteurs, 92–94style, 87–109

Fichier local, accès à, 229–231Fichiers, 229–233

chargement et enregistrement, 229–233fichier local, accès à, 229–231

Flux de contenu bloc, 96–98Flux de contenu inclus, 96–98Flux de contenu non contigu entre les régions, 139Flux nommé, 140Fonctionnalité matérielle indépendante du périphérique, 263Fonctions, 193

création et utilisation, 193–196fonction JavaScript, 194–195

Formes, 219–224Formulaire Web simple, création, 79–81

à l’aide de balises <p>, 81Formulaire Web, 72

création, 79–81à l’aide de balises <p>, 81ajout de champs de validation à, 83

Formulaires, 73–81balises HTML5 pour organiser, 54–72entrée de formulaire, 73

272 | Index

GGéolocalisation, codage pour capturer, 249–252

API de géolocalisation, 250Gestion de l’interface graphique à l’aide de CSS, 159–188

angles arrondis, création, 160–161propriété border-radius, 160

dégradés, 164–166effets de filtre SVG, application, 179–182

effet de flou gaussien, 180effets graphiques, création, 160–166

ombres, 161–163inclinaison 2D, 172–173inclinaison 3D 172–173mise à l’échelle 2D, 169–170rotation 2D, 171–172rotation 3D 171–172traduction 2D, 168–172transformation 2D, 167–169transformation 3D 167–169zone de dessin pour améliorer l’interface utilisateur, 182–185

Gestionnaire d’événements, 204Gestionnaire d’événements de OnLoad, 204–206Global positioning system (GPS), 263Grille pour les dispositions complexes, 112–114

HHTML sémantique, 54–55HTML5, 2–10

API, codage, 249–259pour capturer la géolocalisation, 249–252

applications de tablette tactile/tablette, compétences et contenus pour, 13

applications, 5–7conception d’interface utilisateur, 5débogage, 6, 13–16déployer, 6développement d’application, 6écriture de code, 6empaquetage, 6manifeste d’application, mise à jour, 5planification de projet, 5ressources du développeur, 4, 6–7test, 6, 13–16validation, 6

création d’interface utilisateur par, 21–52, Voir aussi Support : balises HTML5 pour la lecture

balises pour afficher des graphiques, 34–44, Voir aussi Graphiques

balises pour afficher le contenu du texte, 29–34, Voir aussi Texte

page Web simple, balisage de, 26–29valide, 26

indépendant de la plateforme, 3norme HTML5, exploration, 4nouveautés, 3–5nouvelles fonctionnalités, 4

balises audio et vidéo, 4géolocalisation, 4

Interfaces de programmation d’application (API), 4Modernizr, 4requêtes multimédias, 4zone de dessin, 4

validation du code HTML5, 14validation d’un package, 14–16

Hypertext Markup Language (HTML), 2, 22, Voir aussi HTML5affichage, 22attributs, 23–24balisage de base, 22–29balises vides, 22balises, 22–23doctype, 25–26élément, 23entités, 24–25imbrication d’éléments, 24notions essentielles de, 22–29structure de page, 22–29

Hypertext Transport Protocol (HTTP), 11

IIcône de lancement, 5Identificateurs, 195Iframes, 142Image raster, 35Image vectorielle, 35Images clés, 177Images, 219–224Imbrication d’éléments, 24Implémentation Microsoft des régions CSS, 142–145Inclinaison 2D, 172–175Inclinaison 3D 172–173Inclinaison, 172–173

2D, 172–1753D, 172–173

Indépendant de la plateforme, 3, 262Informations d’état persistantes, 11Informations d’identification, 10Interactivité, 190Interface de programmation d’application (API), 4, 7Interface utilisateur Windows, 3Interface utilisateur graphique (GUI)

zone de dessin pour améliorer, 182–185Interface utilisateur, 3

création, à l’aide de HTML5, 53–86, Voir aussi Formulaires ; Validation

à l’aide de balises, 55–64attributs d’entrée, 77–81contenu, 54-72création de formulaire, 77–81élément article, 61élément aside, 61–64élément footer, 6élément header, 56élément menu, 72élément nav, 59–61élément section, 57–59entrée, 53–86

Index | 273

formulaire Web simple, création, 79–81formulaires, 54–72HTML sémantique, 54–55listes, création à l’aide de balises, 64–72organisation, 53–86tables, création à l’aide de balises, 64–72valeurs, 77–81validation, 53–86

mise à jour en utilisant JavaScript, 199–211calculatrice intégrée au navigateur, 199–201contenu des éléments, 208–209éléments, affichage et masquage, 206–208éléments, localisation et accès, 201–203événements, écoute et réponse à, 203–206gestionnaire d’événements de OnLoad, 204–206masquage de parties de l’affichage, en fonction de l’action de

l’utilisateur, 206–208méthode getelementbyid() pour l’entrée utilisateur, 202–203

organisation du contenu à l’aide de CSS, 111–114, Voir aussi Notions essentielles sur les feuilles de style en cascade CSS

Interfaces tactiles, 12–13codage JavaScript, 243–267détection de la fonctionnalité d’écran tactile, 247–249écran tactile résistif, 244écrans tactiles capacitifs, 244réponse à, 244–249

événements de mouvement, 245liste tactile, 246objet tactile, 246principaux événements tactiles JavaScript, 246

simulateur ou émulateur d’écran tactile, 13Interrogation, 255Inversion de l’ordre des boîtes flexibles, 124–126

JJavaScript Object Notation (JSON), 228JavaScript, 189–214, 216–219

codage d’animations à l’aide de, 216–219codage, 243–267, Voir aussi Interfaces tactiles

accéléromètre, 263caméra, 263–264données civiques, 250données géodésiques, 250global positioning system (GPS), 263interrogation, 255ressources en mémoire, accès, 260–262

gestion d’un formulaire avec, 233–235jQuery, 197–199manipulation de zone de dessin avec, 220–224, Voir aussi Zone

de dessinmise à jour de l’interface utilisateur en utilisant, 199–211, Voir

aussi Interface utilisateurprogramme JavaScript à instructions multiples, 192–193programme JavaScript simple, création, 190–192utilisation dans la validation d’entrées de formulaire utilisateur,

233–235utilisation de variables dans, 196

Jeux d’autorisations, 10

autorisations d’identité, 10jQuery, 197–199

KKit de développement logiciel (SDK), 14

LLangage de balisage, 2Langage de script, 2Liste de définitions, 71Liste non triée, 69–70Liste tactile, 245–246Liste triée, 69–70

création, 72Listes

création de listes, 69–72balises dans, 64–72

élément datalist, 79liste de définitions, 71liste non triée, 69–70liste triée, 69–70

Logiciel, 190

MMarge, 112<Mark> élément dans HTML5, 31Méthode getelementbyid() pour l’entrée utilisateur, 202–203Méthodes, 189–214Mise à l’échelle proportionnelle dans une boîte flexible, 116–122Mise à l’échelle 2D, 169–170Modèles de grille, 132–133Mouvements, 12–13, 245

capture, 246-249réponse à, 246–249

Multicolonne dans CSS3, 146–147

N.NET framework, 10Notions essentielles du codage, 189–214Notions essentielles sur les feuilles de style en cascade CSS,

110–136contenu, tri et réorganisation, 126–128organisation du contenu de l’interface utilisateur, 111–114

boîte flexible pour les dispositions simples, 112–114bordure, 112contenu, 112élément block-level, 113éléments inline, 113grille pour les dispositions complexes, 112–114marge, 112modèle de boîte Boîte flexible, 113, Voir aussi entrée

individuellemodèle de disposition en grille, 114, Voir aussi Dispositions

en grille

274 | Index

préfixe du fournisseur, 111relation parent/enfant, 113remplissage, 112

OObjet flottant, création de flux de texte autour, CSS dans, 152–155

élément flottant positionné, 152exclusions CSS, 152–154

Objet tactile, 245–246Objets complexes, transmission, 227–229Ombre portée, 161Ombres, création, 161–163

boîte avec, création, 162–163h-shadow, 162ombre portée, 161v-shadow, 162

Opacité, 163–164

PPackage d’application, 8Page Web simple, 26–29

balisage de, 26–29création, 26–29

Page Web valide, 26Page Web, affichage des images dans, 37Perspective, 173–179

3D, 173–179Place de marché Windows Store, 16–17Polices et familles de polices, 94–96

famille de polices à espacement fixe, 94–95famille de polices sans serif, 95

Positionnement absolu, 100–102avec plusieurs colonnes, 101

Positionnement flottant, 99–100avec plusieurs colonnes, 99–100

Préfixe du fournisseur, 111Processus hôte, 7–8Processus, 8Programme JavaScript à instructions multiples, 192–193Propriété border-radius, 160Propriété flex-order, 127–128

RRappel, 204Récursivité, 216Régions CSS, Voir Régions, CSSRégions, CSS, 139

création, 143–145implémentation de Microsoft, 142–145

Règles, 89Relation parent/enfant, 113Remplissage, 112Ressources de périphérique et de système d’exploitation, codage

en JavaScript pour, 243–267Ressources du périphérique, accès à, 260–264Ressources du système d’exploitation, 260–264

Ressources en mémoire, accès, 260–262Rotation 2D, 171–172Rotation 3D 171–172Rotation, 171–172

rotation 2D, 171–172rotation 3D 171–172

SScalable vector graphics (SVG), 34, 42

création de graphiques à l’aide de, 42–44Image vectorielle SVG, 43–44

effets de filtre, application, 179–182flou gaussien, 181–182décalage, 181–182

utilisation de la zone de dessin au lieu de SVG, 44Sélecteurs, 92–94Séparation du contenu et du style, 91–92Service de validation du balisage, W3C, 15Sous-routines, 197Stockage de session, 10, 260

stockage des données d’état à l’aide de, 11–12Stockage des données d’état à l’aide du stockage local et de

session, 11–12Stockage local, 10, 237–239, 260–262

enregistrer dans, 238stockage des données d’état à l’aide de, 11–12

Structure de page, HTML, 22–29Support, 21–52

balises HTML5 pour la lecture, 45–49, Voir aussi Balises audio ; balises vidéo requêtes, 4, 127

TTables

création de tables, 64–69balises dans, 64–72

Test des applications HTML5, 13–16Texte de l’espace réservé, 78Texte qui déborde, 142Texte, 21–52

balises HTML5 pour afficher, choisir et configurer, 29–34<b>, 30<em>, 30<i>, 30<small>, 30<strong>, 30balises de texte d’une page Web, modification, 30–31éléments textuels HTML 4 avec un nouveau sens ou une

nouvelle fonctionnalité, 29–31texte de remplacement pour les navigateurs plus anciens,

41–42éléments de texte non utilisés en HTML5, 32–34, Voir aussi

désapprobation, éléments HTML5gestion des flux à l’aide de CSS, 137–158, Voir aussi Feuilles de

style en cascade (CSS)nouveaux éléments de texte dans HTML5, 31–32

<command>, 31<mark>, 31

Index | 275

<time>, 31utilisation de l’élément mark, 32

<Time> élément dans HTML5, 31Traduction, 168–172

2D, 168–169Transformation 2D, 167–169Transformation 3D 167–169Transformations, 167–169

2D, 167–1693D, 167–169

Transitions, 173–1793D, 173–179création à l’aide de CSS, 176–178

Transparence, 163–164Typographie, 166–167

UUniform resource locator (URL), 47

VValeurs, 77–81Validation automatique, 82Validation côté client, 82Validation côté serveur, 82Validation d’entrées de formulaire utilisateur, utilisation de

JavaScript dans, 233–235Validation du code HTML5, 14Validation d’un package, 14–16Validation, 81–83, 203

ajout de champs au formulaire Web, 83

balises HTML5 pour, 72–83validation automatique, 82validation côté client, 82validation côté serveur, 82

Variable, 195dans le programme JavaScript, 196

WWeb Hypertext Application Technology Working Group

(WHATWG), 249Web Open Font Format (WOFF), 166–167Windows Runtime (WinRT), 7, 260World Wide Web Consortium (W3C), 2

service de validation du balisage, 15service de validation du CSS, 15–16

WWAHost.exe, 8

ZZone de dessin

au lieu de SVG, 44création de graphiques avec, 38–42

contour d’une forme, 40–41création de formes, 39–40notions de base de la zone de dessin, 39–40

manipulation avec JavaScript, 220–224création de cadran d’horloge, 220–222création d’éléments animés, 222–224élément canvas, 220

objet de zone de dessin, amélioration, 184–185

Education

Notions fondamentales sur le développement d’applications HTML5