book

HTML 5

by Rodolphe Rimelé

October 2011

Intermediate to advanced

680 pages

14h 44m

French

Eyrolles

Read now

Unlock full access

Le rôle du W3CUne maturation rigoureuse… mais peu véloceLe rôle du WhatWgLes fondements de l’évolutionEn quoi consiste réellement Html 5 ?Différences depuis Html 4.01 et Xhtml 1.xHtml 5 = Html + JavaScript + Css (3) ?Pourquoi des standards pour le Web ?

Rappel sur les balisesImbrications et types de contenuStructure générale d’un document HtmlAttributsLes commentairesL’encodage des caractèresLe type MimeComment le navigateur détermine-t-il l’encodage des caractères et le type Mime ?Html 5 ou Xhtml 5 ?Forme HtmlForme XhtmlCe que vous savez sur Xhtml est probablement fauxDu vrai Xhtml 5Les bons outilsPour éditerPour tester et déboguerVirtualisez !Mozilla FirefoxGoogle ChromeSafariOperaInternet ExplorerConsoles JavaScript pour les Api Html 5La validationRappels sur les styles CssRappels sur JavaScriptFrameworks JavaScriptOù placer <script> ?Publier un site en ligneChoisir un hébergeur webUtiliser un client FtpChoisir un langage serveur et un système de gestion de contenuLe protocole HttpRequêtes et en-têtesBonnes pratiquesOrganisation du codeOrganisation des fichiersOptimisations en vue des performances
Prise en charge de Html 5Bibliothèques de détection et de modernisationModernizrHtml5shim (ou Html5shiv)Frameworks Html
Le doctype avant toutRappel des précédents doctypesÉléments racines et méta-informations<Html>manifest<head><title><meta><meta name><meta charset><meta http-equiv><link><style>media<base>hreftarget<body>Groupement<div><span>Liens<a>href et hreflangrelid et ancrestargetdownloadLiens et blocsSections et titresLe cas Internet ExplorerLe cas Internet Explorer sans JavaScriptLe cas Internet Explorer sans JavaScript, bis<section><article><header><footer><nav><aside><address><h1> à <h6>Hiérarchie des éléments de sections et outline<hgroup>Listes<ol><ul><li>
<dt><dd>Texte<p><blockquote><q>cite<cite><strong><em><b><i><small><dfn><abbr><code><var><kbd><samp><sub><sup><time>datetimepubdate<hr><br><wbr><ins><del><s><pre><mark><ruby><rt><rp><bdo><bdi>Contenu embarqué<img>Formats de compression d’imagesBref comparatif visuelUsage des images en Htmlsrcaltwidth, heightusemapismapLiens sur imagesPositionnement des images<map><area><figure><figcaption><iframe>srcwidth, heightsandboxsrcdoc
<embed>Imbrications avec <object> et éléments média<object>Le cas de Flash<param><video><audio><source><track><canvas>Données tabulaires<table><thead><tfoot><tbody><tr><td><th><caption><colgroup><col>Éléments interactifs<menu>typelabel<command><details><summary><device>Scripting<script>Script externe à la page HtmlExécution asynchroneExécution différée<noscript>Attributs Html globauxaccesskeyclasscontextmenucontenteditabledata-dirdraggabledropzonehiddeniditemid, itemref, itemscope, itemtype, itemproplangtabindextitlespellcheckstyleRelations des liensQuelques relations notablesnofollownoreferrerprefetchfirst, last, prev, next, upAttributs événements
textpasswordtelurlemailsearchhiddenradiocheckboxbuttonresetsubmitimagefiledatetimedatetimedatetime-localmonthweeknumberrangecolor<datalist>Autres éléments de formulaire<textarea><select><option><optgroup><button><output><keygen><progress><meter>Construction de formulaires<form><fieldset><legend><label>Attributs communs pour les éléments de formulaireQuelques nouveaux attributs Html 5placeholderautofocusautocompleterequiredmultipledirnamepatternmin, max, stepUne touche de stylePrise en charge
Les prémicesMicrodata à la rescousseAttributs globaux et vocabulairesitemscopeitemtypeVocabulairesitempropitemiditemrefApi Dom Microdatadocument.getItems()itemType, itemRef, itemIdpropertiesproperties.namedItem()itemValueRich Snippets
VidéoTheoraWebMH.264AudioMp3 (Mpeg-1 Audio Layer 3)Aac (Advanced Audio Coding)VorbisLes balises media<audio><video><source><track>Attributs pour <track>Attributs pour <audio> et <video>srcwidth et heightcontrolsposterautoplaypreloadloopInterface de contrôle et événementsContrôler la lectureSurveiller les événementsCréer une interface graphique personnalisée 325 Détecter les erreurs de lectureDétecter les erreurs de lectureDétection du support avec canPlayType()Solution de repli avec Flash et JavaPlein écranAller plus loin avec les ApiPrise en charge de <audio> et <video> par les navigateurs : comment choisir ?Librairies et lecteurs
Base de départ et contexte graphiqueCoordonnéesFormes géométriquesCheminsbeginPath() et closePath()moveTo() et lineTo()fill() et stroke()rect()arcTo()arc()bezierCurveTo()quadraticCurveTo()Styles de traits, remplissages et couleursDégradésTransformations et états du contextesave() et restore()ImagesPixelsCréer des pixelsLire des pixelsModifier des pixelsMotifs et spritesTexteOmbragesTransparence, compositions et masquesTransparence généraleCompositionsMasquesContrôle clavier et sourisSourisClavierAnimation et jeuxJeuxVidéo et audioPrise en chargeLibrairiesEt la 3D ?Et le graphisme vectoriel (Svg) ?Création au format SvgInclusion HtmlSyntaxeSupportAlternatives et librairies
Les mains dans le codeDéclencher la localisationTravailler avec la position et les coordonnéesGestion des erreursOptions supplémentairesUtiliser une cartePrise en charge de l’Api Geolocation par les navigateursAlternative avec geo-location-javascript
FonctionnementÉvénement onchangeRecueillir les informations des fichiers sélectionnésLire des fichiers avec FileReaderUtiliser CanvasCreateObjectUrlUpload simple avec PhpUpload avec XmlhttpRequest 2FormDataDrag & DropEt bientôt, écrire des fichiers, accéder au systèmePrise en charge
Événements et attributs mis en œuvreGlisser…L’attribut draggableUn zeste de CssDéposer !L’attribut dropzoneLes événements dragenter et dragleaveL’événement dragoverL’interface DataTransferL’événement dragstarteffectAllowed et dropEffectsetData()L’événement drop et getData()L’événement dragendAller plus loinScript completGlisser-déposer de fichiersDépôt depuis le système (drag-in)En symbiose avec FileReader et Data UriDépose d’éléments hors du navigateur (drag-out)Prise en charge du glisser-déposer
PrincipeSous le capotCôté client (navigateur)Propriétés et méthodesCôté serveurMise en place d’un flux continuSyntaxe des messages sourcedataideventretryUtiliser JsonPrise en charge
SécuritéVérification de l’origineVérification du contenuDonnées transférées et JsonSource et réponsePrise en charge
phpwebsocketCôté navigateurApplication HtmlSe connecterEnvoyer des donnéesRecevoir des messagesGérer les erreursFermer la connexionAller plus loinPrise en charge
Stockage de sessionLocal StorageL’interface StorageStockage, lecture, suppressionUn compteur de visites avec localStorageSurveiller le dépassement de quotaUn soupçon de JsonStocker sur un événementStockage à intervalles réguliersÉvénementsPrise en chargeAlternatives à Web Storage
PhilosophieOuvrir une base et créer un catalogueInsérer des données dans une transactionAfficher le contenuUtiliser un indexEffacer un cataloguePerspectivesPrise en chargeLe crépuscule de Web Sql Database ?PhilosophieOuvrir une baseInitier une transactionCréer une tableInsérer des donnéesExploiter les résultatsPerspectivesPrise en charge
En ligne ou hors ligne ?Structure complèteListe des fichiers à mettre en cache (manifeste)Syntaxe pour le manifesteLa section CacheLa section NetworkLa section FallbackÉlaboration et test du cache sous Chrome et FirefoxMise à jour du cacheL’Api Application cachePropriétésÉvénementsMéthodesUne application hors lignePrise en charge
HistoryLocationModification dynamique de l’historiquepushState()replaceState()The king of popstateSimulationCas pratiqueRéécriture d’adresseLes ancres et l’événement hashchangeDétectionPrise en charge
FonctionnementInitialisationCommunicationTerminaisonGestion des erreursContexteFonctions complémentairesBlob à la rescoussePrise en charge
VariablesTypes simplesObjetsFonctionsBouclesMéthodes de sélection DomgetElementById()getElementsByTagName()getElementsByClassName()querySelector()querySelectorAll()Propriétés et méthodes DomMéthodes de manipulation DomcreateElement()appendChild()removeChild()insertBefore()createTextNode()Méthodes pour formulairesGestionnaires d’événementsAutres fonctionsPrise en charge
Quid des frameworks JavaScript et de Flash ?Perspectives d’avenir
Différences Html 5 par rapport à Html 4Fonctionnalités obsolètesFonctionnalités obsolètes non conformesÉlémentsAttributs
Principe généralSélecteursPropriétésPseudo-classes et pseudo-élémentsRègles @Media queries
Qu’est-ce que l’accessibilité du Web ?Html sémantiqueWai, Wcag et AriaLes rôles et propriétés de Wai-AriaRôles avec l’attribut rolePoints de repère (landmark roles)Structure de documentComposants graphiques (widgets)Propriétés et états avec les attributs aria-GlobauxContrôles d’interfaceIl y a de la vie sur cette planèteDrag & drop (glisser-déposer)RelationsValider et testerL’aide de JavaScript

Overview

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