You are previewing Solutions HTML5: Techniques essentielles pour les développeurs.
O'Reilly logo
Solutions HTML5: Techniques essentielles pour les développeurs

Book Description

Faites l'économie d'heures de programmation en assimilant les techniques essentielles pour tout développeur HTML5 !

L'apparition du HTML5 révolutionne le HTML et les technologies environnantes. Ce sont autant de nouvelles balises, de possibilités inédites, mais également de sources d'erreurs.

Solutions HTML5 offre un panel de solutions aux problèmes courants du HTML5. Chaque solution est illustrée par un code d'exemple prêt à être utilisé en production et applicable à n'importe quel type de projet.

Dans cet ouvrage complet et pragmatique, vous découvrirez :

  • des techniques adaptées aux développements quotidiens en HTML5;

  • l'écosystème HTML5 dont les balises média, l'élément Canvas, et l'API WebSocket;

  • les meilleures pratiques, ainsi que des astuces pour employer au mieux la sémantique du HTML5 et ses éléments structurels;

  • des solutions courantes pour l'utilisation et la sécurisation des formulaires HTML5.

Table of Contents

  1. Coverpage
  2. Titlepage
  3. Copyright
  4. Table des matières
  5. Dédicace
  6. Biographie des auteurs
  7. Introduction
  8. 1. Les structures de page en HTML5
    1. Solution 1.1 – Créer un DOCTYPE en HTML5
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    2. Solution 1.2 – Créer une déclaration d’encodage de caractères en HTML5
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 1.3 – Diviser un document en sections
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 1.4 – Rendre les parties d’un document distribuables
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 1.5 – Créer un élément aside
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    6. Solution 1.6 – Créer un en-tête
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    7. Solution 1.7 – Grouper les éléments <h1> à <h6>
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    8. Solution 1.8 – Créer un pied de page
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    9. Solution 1.9 – Créer la navigation dans un document HTML5
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    10. Solution 1.10 – Insérer des illustrations
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    11. Solution 1.11 – Tester la compatibilité des navigateurs
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    12. Résumé
  9. 2. Le marquage HTML5
    1. Solutions 2.1 – Utiliser la balise <hr> en HTML5
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    2. Solution 2.2 – Utiliser la balise <iframe>
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 2.3 – Intégrer un média dans une page
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 2.4 – Utiliser la balise <area>
      1. Tour d’horizon
      2. Mise en œuvre
      3. Résumé
  10. 3. Les éléments sémantiques et de structure du HTML5
    1. Comprendre les microdonnées
    2. Solution 3.1 – Utiliser les attributs itemprop et itemscope
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 3.2 – Créer un vocabulaire personnalisé
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 3.3 – Comprendre les types de liens et leurs relations
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 3.4 – Les éléments header et hgroup
      1. Tour d’horizon
      2. Mise en œuvre
    6. Solution 3.5 – Connecter les images avec leur légende
      1. Tour d’horizon
      2. Mise en œuvre
    7. Solution 3.6 – Ajouter un contenu relatif
      1. Tour d’horizon
      2. Mise en œuvre
    8. Résumé
  11. 4. Les formulaires en HTML5
    1. Comprendre les nouveaux types de saisie
    2. Solution 4.1 – Utiliser le type de saisie e-mail
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 4.2 – Utiliser le type URL de l’élément input
      1. Tour d’horizon
      2. Mise en œuvre
    4. Solution 4.3 – Utiliser un élément de contrôle spinner pour les nombres
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 4.4 – Ajouter un slider au formulaire avec l’élément input de type range
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    6. Solution 4.5 – Envoyer des fichiers multiples
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    7. Solution 4.6 – Créer une autocomplétion avec le composant datalist
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    8. Solution 4.7 – Éléments de validation de formulaire
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    9. Solution 4.8 – Créer des éléments de type input personnalisés à partir des expressions régulières
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    10. Solution 4.9 – Définir un champ de texte input comme prérempli
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil expert
    11. Solution 4.10 – Créer des éléments de contrôle pour la date et l’heure
      1. Tour d’horizon
      2. Mise en œuvre
    12. Résumé
  12. 5. Les médias en HTML5 : l’audio et la vidéo
    1. Solution 5.1 – Intégrer de la vidéo dans une page web
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    2. Solution 5.2 – Détecter la prise en charge de la vidéo dans les différents navigateurs
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 5.3 – Créer un contrôleur vidéo personnalisé
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 5.4 – Précharger une vidéo
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 5.5 – Créer une barre de recherche personnalisée pour une vidéo
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    6. Solution 5.6 – Utiliser plusieurs éléments de sources vidéo
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    7. Solution 5.7 – Ouvrir une vidéo en plein écran
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    8. Solution 5.8 – Appliquer un masque à une vidéo
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    9. Solution 5.9 – Utiliser l’élément audio
      1. Tour d’horizon
      2. Mise en œuvre
    10. Résumé
  13. 6. Les API de dessin HTML5
    1. Solution 6.1 – Dessiner en HTML5 avec l’API de dessin de l’élément canvas
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    2. Solution 6.2 – Utiliser des tracés et des coordonnées
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 6.3 – Dessiner des formes rectangulaires et circulaires
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 6.4 – Remplir les formes avec des couleurs
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 6.5 – Remplir des formes avec des dégradés de couleurs
      1. Tour d’horizon
      2. Mise en œuvre
    6. Solution 6.6 – Dessiner du texte dans le canvas
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    7. Solution 6.7 – Dessiner du texte sur le canvas avec des tailles relatives
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    8. Solution 6.8 – Sauvegarder un dessin dans un fichier PNG
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    9. Résumé
  14. 7. Le canvas HTML5
    1. Solution 7.1 – Comprendre les API du canvas
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    2. Solution 7.2 – Détecter la prise en charge du canvas et du texte dans le canvas
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    3. Solution 7.3 – Comprendre le système de coordonnées de l'écran et les transformations du canvas
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    4. Solution 7.4 – Manipuler les pixels
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    5. Solution 7.5 – Appliquer des effets d'ombre portée et de flou
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    6. Solution 7.6 – Animer le canvas
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
      4. Résumé
  15. 8. Les API de communication du HTML5
    1. Comprendre l’API postMessage
    2. Sécuriser la communication postMessage
    3. Solution 8.1 – Vérifier la prise en charge de l’API postMessage par le navigateur
      1. Tour d’horizon
      2. Mise en œuvre
      3. Cross-documents messaging et CORS
    4. Solution 8.2 – Envoyer des messages entre des fenêtres et des iframes
      1. Tour d’horizon
      2. Mise en œuvre
    5. Solution 8.3 – Utiliser les technologies Server-Event pour écrire des applications web en temps réel
      1. Tour d’horizon
      2. Envoi Connectionless et autres fonctionnalités
      3. Mise en œuvre
      4. Conseil d’expert
    6. Solution 8.4 – Exécuter du code dans différents contextes de navigation utilisant des canaux de message
      1. Tour d’horizon
      2. Mise en œuvre
    7. Solution 8.5 – Uploader des fichiers avec le XMLHttpRequest Level 2
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    8. Solution 8.6 – Vérifier la prise en charge de XMLHttpRequest Level 2 par le navigateur
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    9. Résumé
  16. 9. WebSocket HTML5
    1. Solution 9.1 – Vérifier la prise en charge de WebSocket par les navigateurs
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    2. Solution 9.2 – Établir une connexion WebSocket
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    3. Solution 9.3 – Gérer les événements WebSocket
      1. Tour d’horizon
      2. Mise en œuvre
    4. Solution 9.4 – Utiliser un serveur WebSocket avec l'API WebSocket
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
      4. Résumé
  17. 10. L’API de géolocalisation HTML5
    1. Comprendre l’API de géolocalisation
    2. Solution 10.1 – Utiliser l’objet navigator
      1. Tour d’horizon
      2. Mise en œuvre
    3. Solution 10.2 – Obtenir la position actuelle
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    4. Solution 10.3 – Utiliser l’objet Position
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    5. Solution 10.4 – Gérer des erreurs de position
      1. Tour d’horizon
      2. Mise en œuvre
    6. Solution 10.5 – Suivre la position de l’utilisateur
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    7. Solution 10.6 – Utiliser la bibliothèque open-source geo.js
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
      4. Résumé
  18. 11. Le stockage local en HTML5
    1. Solution 11.1 – Comprendre les applications occasionnellement connectées
      1. Tour d’horizon
      2. Mise en œuvre
    2. Solution 11.2 – Vérifier la prise en charge du stockage HTML5
      1. Tour d’horizon
      2. Mise en œuvre
    3. Solution 11.3 – Déclarer le fichier manifest de votre page
      1. Tour d’horizon
      2. Mise en œuvre
    4. Solution 11.4 – Utiliser l’objet ApplicationCache
      1. Tour d’horizon
      2. Mise en œuvre
    5. Solution 11.5 – Les événements ApplicationCache
      1. Tour d’horizon
      2. Mise en œuvre
      3. Conseil d’expert
    6. Solution 11.6 – Vider le cache local
      1. Tour d’horizon
      2. Mise en œuvre
  19. 12. L'accessibilité en HTML5
    1. Les quatre principes de l'accessibilité
      1. Le but du WCAG
    2. Solution 12.1 – Créer des skip links avec l'élément nav
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    3. Solution 12.2 – Créer des données tabulaires accessibles
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    4. Solution 12.3 – Créer des formulaires accessibles
      1. Tour d'horizon
      2. Mise en œuvre
    5. Solution 12.4 – Légender et annoter les éléments vidéo
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    6. Solution 12.5 – Utiliser le projet ARIA
      1. Tour d'horizon
      2. Mise en œuvre
      3. Conseil d'expert
    7. Résumé
  20. Index