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

Content preview from HTML 5

Accessibilité et ARIA

C

Un sage d’Ikea disait : « Un bon design doit toujours rester accessible ». La future recommandation WAI-RAIA permettra, au sein de HTML 5, le respect des principes fondamentaux de l’accessibilité numérique.

Figure 3–1 Des vitamines pour tous !

L’accessibilité numérique fait l’objet de moult débats dans la communauté des web designers, intégrateurs, experts comme débutants. Sa vocation est de rendre accessibles la technologie et ses bienfaits, notamment Internet, à tous les humains. Cela suppose donc une prise en compte de certains handicaps, voire de caractéristiques purement sociales et matérielles, puisque nous ...