HTML 5

HTML 5

by Rodolphe Rimelé
Released October 2011
Publisher(s): Eyrolles
ISBN: 9782212129823

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Présentation

HTML5 intègre enfin dans sa conception l'architecture à trois piliers qu'est HTML pour la structure, CSS3 pour l'apparence et JavaScript pour l'interactivité. Le développeur web pourra ainsi consolider son savoir-faire sur une base normalisée, et proposer au sein de sites performants et accessibles des contenus tant multimédias (animations, audio et vidéo) qu'interactifs (formulaires, glisser-déposer, etc.).

Concevoir des sites riches, performants et accessibles avec HTML5

Ce livre fait la lumière sur les spécifications ardues de HTML5 dont il explore l'ensemble des nouveautés. Non sans avoir rappelé son histoire mouvementée au W3C et au WhatWG, l'auteur explique au fil des chapitres comment concevoir des sites et applications web performants et accessibles, et y incorporer des éléments médias (audio, vidéo), créer des zones de dessin interactives et des animations avec Canvas, exploiter les microformats pour un balisage sémantique.

Il détaille pas à pas les interfaces de programmation pour la gestion des fichiers, la géolocalisation, la prise en charge du glisser-déposer (drag&drop), et explique comment stocker des données locales, communiquer en temps réel ou procéder à des échanges interdocuments grâce aux API avancées Web Storage, Web Sockets et Web Messaging. Il aborde enfin les Web Workers, permettant d'exécuter du JavaScript en multithread, et les bases de données (Indexed Database et Web SQL Database) ainsi qu'un cache d'application pour une exécution hors-ligne.

Très illustré, riche en conseils et bonnes pratiques, l'ouvrage se complète d'une référence sur JavaScript et sur la gestion du DOM. Des annexes disponibles en ligne offrent un rappel sur les CSS et un chapitre exhaustif sur ARIA et l'accessibilité.

@ Compléments en ligne

Téléchargez sur le site des éditions Eyrolles (editions-eyrolles.com) et sur le site de l'auteur les annexes sur les feuilles de style CSS et l'accessibilité (ARIA). Retrouvez-y les tableaux de prise en charge par navigateur mis à jour.

A qui s'adresse cet ouvrage ?
  • Aux développeurs web, intégrateurs qui souhaitent mettre en oeuvre les nouvelles API de HTML5 et moderniser leurs bonnes pratiques de développement web ;
  • Aux designers web qui souhaitent découvrir toutes les possibilités que leur offre HTML5 ;
  • A tous ceux qui souhaitent acquérir une méthodologie cohérente de développement web, combinant qualité et accessibilité.

Avec une préface de Raphaël Goetter.

Au sommaire
  • HTML5 et les standards du Web
  • Prise en charge par les navigateurs
  • Eléments et attributs HTML 5
  • Audio et vidéo
  • Graphismes avec Canvas
  • API HTML 5
  • Annexes en ligne
  • Feuilles de styles CSS
  • Accessibilité et Aria

Table of contents

  1. Couverture
  2. Page de titre
  3. Copyright
  4. Chez le même éditeur
  5. Préface
  6. Avant-propos
  7. Table des matières
  8. Chapitre 1 Une brève histoire du Web et de ses standards
    1. Un successeur pour Html 4 et Xhtml
    2. Le rôle du W3C
      1. Une maturation rigoureuse
      2. … mais peu véloce
    3. Le rôle du WhatWg
    4. Les fondements de l’évolution
      1. En quoi consiste réellement Html 5 ?
      2. Différences depuis Html 4.01 et Xhtml 1.x
    5. Html 5 = Html + JavaScript + Css (3) ?
      1. Pourquoi des standards pour le Web ?
  9. Chapitre 2 Html en seconde langue
    1. La syntaxe Html 5
      1. Rappel sur les balises
      2. Imbrications et types de contenu
      3. Structure générale d’un document Html
      4. Attributs
      5. Les commentaires
    2. L’encodage des caractères
    3. Le type Mime
    4. Comment le navigateur détermine-t-il l’encodage des caractères et le type Mime ?
    5. Html 5 ou Xhtml 5 ?
      1. Forme Html
      2. Forme Xhtml
      3. Ce que vous savez sur Xhtml est probablement faux
      4. Du vrai Xhtml 5
    6. Les bons outils
      1. Pour éditer
      2. Pour tester et déboguer
        1. Virtualisez !
        2. Mozilla Firefox
        3. Google Chrome
        4. Safari
        5. Opera
        6. Internet Explorer
      3. Consoles JavaScript pour les Api Html 5
    7. La validation
    8. Rappels sur les styles Css
    9. Rappels sur JavaScript
      1. Frameworks JavaScript
      2. Où placer <script> ?
    10. Publier un site en ligne
      1. Choisir un hébergeur web
      2. Utiliser un client Ftp
      3. Choisir un langage serveur et un système de gestion de contenu
    11. Le protocole Http
      1. Requêtes et en-têtes
    12. Bonnes pratiques
      1. Organisation du code
      2. Organisation des fichiers
      3. Optimisations en vue des performances
  10. Chapitre 3 Navigateurs et support
    1. Panorama des navigateurs web et moteurs de rendu
    2. Prise en charge de Html 5
    3. Bibliothèques de détection et de modernisation
      1. Modernizr
      2. Html5shim (ou Html5shiv)
    4. Frameworks Html
  11. Chapitre 4 Éléments et attributs Html 5
    1. Modèles de contenu
    2. Le doctype avant tout
      1. Rappel des précédents doctypes
    3. Éléments racines et méta-informations
      1. <Html>
        1. manifest
      2. <head>
      3. <title>
      4. <meta>
        1. <meta name>
        2. <meta charset>
        3. <meta http-equiv>
      5. <link>
      6. <style>
        1. media
      7. <base>
        1. href
        2. target
      8. <body>
    4. Groupement
      1. <div>
      2. <span>
    5. Liens
      1. <a>
        1. href et hreflang
        2. rel
        3. id et ancres
        4. target
        5. download
        6. Liens et blocs
    6. Sections et titres
      1. Le cas Internet Explorer
      2. Le cas Internet Explorer sans JavaScript
      3. Le cas Internet Explorer sans JavaScript, bis
      4. <section>
      5. <article>
      6. <header>
      7. <footer>
      8. <nav>
      9. <aside>
      10. <address>
      11. <h1> à <h6>
        1. Hiérarchie des éléments de sections et outline
      12. <hgroup>
    7. Listes
      1. <ol>
      2. <ul>
      3. <li>
      4. <dl>
      5. <dt>
      6. <dd>
    8. Texte
      1. <p>
      2. <blockquote>
      3. <q>
        1. cite
      4. <cite>
      5. <strong>
      6. <em>
      7. <b>
      8. <i>
      9. <small>
      10. <dfn>
      11. <abbr>
      12. <code>
      13. <var>
      14. <kbd>
      15. <samp>
      16. <sub>
      17. <sup>
      18. <time>
        1. datetime
        2. pubdate
      19. <hr>
      20. <br>
      21. <wbr>
      22. <ins>
      23. <del>
      24. <s>
      25. <pre>
      26. <mark>
      27. <ruby>
      28. <rt>
      29. <rp>
      30. <bdo>
      31. <bdi>
    9. Contenu embarqué
      1. <img>
        1. Formats de compression d’images
        2. Bref comparatif visuel
        3. Usage des images en Html
        4. src
        5. alt
        6. width, height
        7. usemap
        8. ismap
        9. Liens sur images
        10. Positionnement des images
      2. <map>
      3. <area>
      4. <figure>
      5. <figcaption>
      6. <iframe>
        1. src
        2. width, height
        3. sandbox
        4. srcdoc
        5. seamless
      7. <embed>
        1. Imbrications avec <object> et éléments média
      8. <object>
        1. Le cas de Flash
      9. <param>
      10. <video>
      11. <audio>
      12. <source>
      13. <track>
      14. <canvas>
    10. Données tabulaires
      1. <table>
      2. <thead>
      3. <tfoot>
      4. <tbody>
      5. <tr>
      6. <td>
      7. <th>
      8. <caption>
      9. <colgroup>
      10. <col>
    11. Éléments interactifs
      1. <menu>
        1. type
        2. label
      2. <command>
      3. <details>
      4. <summary>
      5. <device>
    12. Scripting
      1. <script>
        1. Script externe à la page Html
        2. Exécution asynchrone
        3. Exécution différée
      2. <noscript>
    13. Attributs Html globaux
      1. accesskey
      2. class
      3. contextmenu
      4. contenteditable
      5. data-
      6. dir
      7. draggable
      8. dropzone
      9. hidden
      10. id
      11. itemid, itemref, itemscope, itemtype, itemprop
      12. lang
      13. tabindex
      14. title
      15. spellcheck
      16. style
    14. Relations des liens
      1. Quelques relations notables
        1. nofollow
        2. noreferrer
        3. prefetch
        4. first, last, prev, next, up
    15. Attributs événements
  12. Chapitre 5 Les formulaires (Web Forms)
    1. <input> et ses variantes
      1. text
      2. password
      3. tel
      4. url
      5. email
      6. search
      7. hidden
      8. radio
      9. checkbox
      10. button
      11. reset
      12. submit
      13. image
      14. file
      15. date
      16. time
      17. datetime
      18. datetime-local
      19. month
      20. week
      21. number
      22. range
      23. color
      24. <datalist>
    2. Autres éléments de formulaire
      1. <textarea>
      2. <select>
      3. <option>
      4. <optgroup>
      5. <button>
      6. <output>
      7. <keygen>
      8. <progress>
      9. <meter>
    3. Construction de formulaires
      1. <form>
      2. <fieldset>
      3. <legend>
      4. <label>
    4. Attributs communs pour les éléments de formulaire
      1. Quelques nouveaux attributs Html 5
        1. placeholder
        2. autofocus
        3. autocomplete
        4. required
        5. multiple
        6. dirname
        7. pattern
        8. min, max, step
    5. Une touche de style
    6. Prise en charge
  13. Chapitre 6 Les microformats (microdata)
    1. Principe des microformats : vers le Web sémantique
      1. Les prémices
    2. Microdata à la rescousse
      1. Attributs globaux et vocabulaires
        1. itemscope
        2. itemtype
        3. Vocabulaires
        4. itemprop
        5. itemid
        6. itemref
      2. Api Dom Microdata
        1. document.getItems()
        2. itemType, itemRef, itemId
        3. properties
        4. properties.namedItem()
        5. itemValue
    3. Rich Snippets
  14. Chapitre 7 Audio et Vidéo
    1. Conteneurs, codecs, licences et support
      1. Vidéo
        1. Theora
        2. WebM
        3. H.264
      2. Audio
        1. Mp3 (Mpeg-1 Audio Layer 3)
        2. Aac (Advanced Audio Coding)
        3. Vorbis
    2. Les balises media
    3. <audio>
    4. <video>
    5. <source>
    6. <track>
      1. Attributs pour <track>
    7. Attributs pour <audio> et <video>
      1. src
      2. width et height
      3. controls
      4. poster
      5. autoplay
      6. preload
      7. loop
    8. Interface de contrôle et événements
      1. Contrôler la lecture
      2. Surveiller les événements
      3. Créer une interface graphique personnalisée 325 Détecter les erreurs de lecture
        1. Détecter les erreurs de lecture
      4. Détection du support avec canPlayType()
        1. Solution de repli avec Flash et Java
      5. Plein écran
      6. Aller plus loin avec les Api
    9. Prise en charge de <audio> et <video> par les navigateurs : comment choisir ?
    10. Librairies et lecteurs
  15. Chapitre 8 Dessin avec Canvas
    1. L’élément <canvas>
      1. Base de départ et contexte graphique
      2. Coordonnées
    2. Formes géométriques
    3. Chemins
      1. beginPath() et closePath()
      2. moveTo() et lineTo()
      3. fill() et stroke()
      4. rect()
      5. arcTo()
      6. arc()
      7. bezierCurveTo()
      8. quadraticCurveTo()
    4. Styles de traits, remplissages et couleurs
    5. Dégradés
    6. Transformations et états du contexte
      1. save() et restore()
    7. Images
    8. Pixels
      1. Créer des pixels
      2. Lire des pixels
      3. Modifier des pixels
    9. Motifs et sprites
    10. Texte
    11. Ombrages
    12. Transparence, compositions et masques
      1. Transparence générale
      2. Compositions
      3. Masques
    13. Contrôle clavier et souris
      1. Souris
      2. Clavier
    14. Animation et jeux
      1. Jeux
    15. Vidéo et audio
    16. Prise en charge
    17. Librairies
    18. Et la 3D ?
    19. Et le graphisme vectoriel (Svg) ?
      1. Création au format Svg
      2. Inclusion Html
      3. Syntaxe
      4. Support
      5. Alternatives et librairies
  16. Chapitre 9 Géolocalisation
    1. Principe
    2. Les mains dans le code
      1. Déclencher la localisation
      2. Travailler avec la position et les coordonnées
      3. Gestion des erreurs
      4. Options supplémentaires
      5. Utiliser une carte
    3. Prise en charge de l’Api Geolocation par les navigateurs
      1. Alternative avec geo-location-javascript
  17. Chapitre 10 Interactions avec les fichiers (File Api)
    1. Principe
    2. Fonctionnement
      1. Événement onchange
      2. Recueillir les informations des fichiers sélectionnés
    3. Lire des fichiers avec FileReader
      1. Utiliser Canvas
      2. CreateObjectUrl
    4. Upload simple avec Php
    5. Upload avec XmlhttpRequest 2
      1. FormData
    6. Drag & Drop
    7. Et bientôt, écrire des fichiers, accéder au système
    8. Prise en charge
  18. Chapitre 11 Gestion du glisser-déposer (Drag & Drop)
    1. Principe
    2. Événements et attributs mis en œuvre
    3. Glisser…
      1. L’attribut draggable
      2. Un zeste de Css
    4. Déposer !
      1. L’attribut dropzone
      2. Les événements dragenter et dragleave
      3. L’événement dragover
    5. L’interface DataTransfer
      1. L’événement dragstart
        1. effectAllowed et dropEffect
      2. setData()
      3. L’événement drop et getData()
      4. L’événement dragend
      5. Aller plus loin
      6. Script complet
    6. Glisser-déposer de fichiers
      1. Dépôt depuis le système (drag-in)
      2. En symbiose avec FileReader et Data Uri
      3. Dépose d’éléments hors du navigateur (drag-out)
    7. Prise en charge du glisser-déposer
  19. Chapitre 12 Événements envoyés par le serveur (« push »)
    1. Push-toi, j’arrive
    2. Principe
    3. Sous le capot
      1. Côté client (navigateur)
        1. Propriétés et méthodes
      2. Côté serveur
        1. Mise en place d’un flux continu
      3. Syntaxe des messages source
        1. data
        2. id
        3. event
        4. retry
        5. Utiliser Json
    4. Prise en charge
  20. Chapitre 13 Échange d’informations entre documents (Web Messaging)
    1. Fonctionnement
    2. Sécurité
      1. Vérification de l’origine
      2. Vérification du contenu
    3. Données transférées et Json
    4. Source et réponse
    5. Prise en charge
  21. Chapitre 14 Communication en temps réel (Web Sockets)
    1. Côté serveur
      1. phpwebsocket
    2. Côté navigateur
      1. Application Html
      2. Se connecter
      3. Envoyer des données
      4. Recevoir des messages
      5. Gérer les erreurs
      6. Fermer la connexion
      7. Aller plus loin
    3. Prise en charge
  22. Chapitre 15 Stockage des données locales (Web Storage)
    1. Deux espaces de stockage
      1. Stockage de session
      2. Local Storage
    2. L’interface Storage
      1. Stockage, lecture, suppression
      2. Un compteur de visites avec localStorage
      3. Surveiller le dépassement de quota
    3. Un soupçon de Json
    4. Stocker sur un événement
      1. Stockage à intervalles réguliers
      2. Événements
    5. Prise en charge
      1. Alternatives à Web Storage
  23. Chapitre 16 Bases de données (Indexed Database & Web Sql Database)
    1. L’aube d’IndexedDb
      1. Philosophie
      2. Ouvrir une base et créer un catalogue
      3. Insérer des données dans une transaction
      4. Afficher le contenu
      5. Utiliser un index
      6. Effacer un catalogue
      7. Perspectives
      8. Prise en charge
    2. Le crépuscule de Web Sql Database ?
      1. Philosophie
      2. Ouvrir une base
      3. Initier une transaction
      4. Créer une table
      5. Insérer des données
      6. Exploiter les résultats
      7. Perspectives
      8. Prise en charge
  24. Chapitre 17 Applications web hors ligne
    1. Principe
    2. En ligne ou hors ligne ?
      1. Structure complète
    3. Liste des fichiers à mettre en cache (manifeste)
      1. Syntaxe pour le manifeste
        1. La section Cache
        2. La section Network
        3. La section Fallback
      2. Élaboration et test du cache sous Chrome et Firefox
      3. Mise à jour du cache
    4. L’Api Application cache
      1. Propriétés
      2. Événements
      3. Méthodes
    5. Une application hors ligne
    6. Prise en charge
  25. Chapitre 18 Historique de navigation
    1. Navigation dans l’historique
      1. History
      2. Location
    2. Modification dynamique de l’historique
      1. pushState()
      2. replaceState()
      3. The king of popstate
    3. Simulation
      1. Cas pratique
      2. Réécriture d’adresse
    4. Les ancres et l’événement hashchange
    5. Détection
    6. Prise en charge
  26. Chapitre 19 JavaScript en (multi)tâche de fond : les Web Workers
    1. Principe
    2. Fonctionnement
      1. Initialisation
      2. Communication
      3. Terminaison
      4. Gestion des erreurs
      5. Contexte
      6. Fonctions complémentaires
      7. Blob à la rescousse
    3. Prise en charge
  27. Chapitre 20 JavaScript, le Dom et l’Api Selectors
    1. Les bases de JavaScript
      1. Variables
      2. Types simples
        1. Objets
        2. Fonctions
        3. Boucles
    2. Méthodes de sélection Dom
      1. getElementById()
      2. getElementsByTagName()
      3. getElementsByClassName()
      4. querySelector()
      5. querySelectorAll()
    3. Propriétés et méthodes Dom
    4. Méthodes de manipulation Dom
      1. createElement()
      2. appendChild()
      3. removeChild()
      4. insertBefore()
      5. createTextNode()
    5. Méthodes pour formulaires
    6. Gestionnaires d’événements
    7. Autres fonctions
    8. Prise en charge
  28. Conclusion et perspectives
    1. Quid des frameworks JavaScript et de Flash ?
    2. Perspectives d’avenir
  29. Annexe A Fonctionnalités modifiées et obsolètes
    1. Différences Html 5 par rapport à Html 4
    2. Fonctionnalités obsolètes
    3. Fonctionnalités obsolètes non conformes
      1. Éléments
      2. Attributs
  30. Annexe B Feuilles de style Css
    1. Principe général
    2. Sélecteurs
    3. Propriétés
    4. Pseudo-classes et pseudo-éléments
    5. Règles @
    6. Media queries
  31. Annexe C Accessibilité et Aria
    1. Qu’est-ce que l’accessibilité du Web ?
      1. Html sémantique
    2. Wai, Wcag et Aria
    3. Les rôles et propriétés de Wai-Aria
      1. Rôles avec l’attribut role
        1. Points de repère (landmark roles)
        2. Structure de document
        3. Composants graphiques (widgets)
      2. Propriétés et états avec les attributs aria-
        1. Globaux
        2. Contrôles d’interface
      3. Il y a de la vie sur cette planète
        1. Drag & drop (glisser-déposer)
        2. Relations
      4. Valider et tester
      5. L’aide de JavaScript
  32. Index

Product information

  • Title: HTML 5
  • Author(s): Rodolphe Rimelé
  • Release date: October 2011
  • Publisher(s): Eyrolles
  • ISBN: 9782212129823