HTML 5 : une référence pour le développeur web

Auteur(s) :

Rimelé, Rodolphe Découvrir l'auteur

Résumé

Didactique et pratique, cet ouvrage explique aux développeurs les spécifications les plus importantes et les astuces utiles pour les appliquer dans toutes sortes de projets web. En parallèle, il expose les nouveautés de CSS3. ©Electre 2017

Contributeur(s)
- Goetter, Raphaël. Préfacier, etc.
Éditeur(s)
- Eyrolles
Date
- DL 2017
Langues
- Français
Description matérielle
- 1 vol. (XXII-809 p.) : ill. en coul. ; 23 cm
Sujet(s)
- HTML (langage de balisage)
- Sites Web -- Conception
ISBN
- 978-2-212-14365-2
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- Une référence pour le développeur web
  HTML 5 intègre dans sa conception l'architecture à trois piliers qu'est HTML pour la structure, CSS 3 pour l'apparence et JavaScript pour l'interactivité, avec de nombreuses nouvelles API pour concevoir des applications web. L'intégrateur ou le développeur web pourra ainsi découvrir et exploiter les standards du Web, pour proposer au sein de sites performants et accessibles des contenus multimédias (animations, audio et vidéo), mais également interactifs (nouveaux formulaires, glisser-déposer, etc.).
  Concevoir des sites riches, performants et accessibles avec HTML 5
  Ce livre fait la lumière sur les spécifications ardues d'HTML 5, dont il explore l'ensemble des nouveautés et des balises, y compris celles ayant existé et évolué depuis les précédentes versions. Après avoir rappelé l'histoire mouvementée de sa conception au W3C et au WhatWG, l'auteur explique au fil des chapitres comment concevoir des sites et applications web performants et accessibles, en y incorporant des éléments médias (audio, vidéo), en créant des zones de dessin interactives et des animations avec Canvas et en exploitant les microformats pour un balisage sémantique qui améliorera l'échange de données et le référencement.
  Il détaille pas à pas les interfaces de programmation pour la gestion des fichiers (File API), la géolocalisation, la prise en charge du glisser-déposer (Drag et Drop), et explique comment stocker des données locales dans le navigateur (Web Storage), communiquer en temps réel ou procéder à des échanges interdocuments (Web Sockets, Server-Sent Events et Web Messaging). Il aborde enfin les techniques permettant d'exécuter du JavaScript en multithread (Web Workers) et la réalisation d'applications hors ligne, les bases de données côté navigateur (Indexed Database et Web SQL Database), ainsi que la manipulation avancée de l'historique (HistoryAPI).
  Très illustrée, riche en conseils et bonnes pratiques, la troisième édition de cet ouvrage intègre toutes les dernières évolutions d'HTML 5 - depuis que sa première version a vu le jour - et les nouveautés concrètement implémentées par les navigateurs web. L'approche pragmatique permet de l'utiliser comme référence pour élaborer et modifier des pages web, mais aussi comme guide pour concevoir une application web.
  À qui cet ouvrage s'adresse-t-il ?
  
  Aux développeurs web, intégrateurs qui souhaitent mettre en oeuvre les nouvelles API d'HTML 5 et moderniser leurs bonnes pratiques de développement web.
  
  Aux designers web qui souhaitent découvrir toutes les possibilités que leur offre HTML 5.
  
  À tous ceux qui souhaitent acquérir une méthodologie cohérente du développement web, combinant qualité et accessibilité.
Tables des matières
- - HTML 5
  - Une référence pour le développeur web
  - Rodolphe Rimelé
  - Eyrolles
  - Chapitre 1
    Une brève histoire du Web et de ses standards1
  - Un successeur pour HTML4 et XHTML 2
  - Le rôle du W3C 15
  - Une maturation rigoureuse16
  - ... mais peu véloce16
  - Le rôle du WhatWG 19
  - Les fondements de l'évolution 20
  - Tout le monde sur la brèche21
  - En quoi HTML 5 consiste-t-il réellement ?21
  - Différences depuis HTML 4.01 et XHTML 1.x23
  - HTML 5 = HTML + JavaScript + CSS ? 23
  - Page web ou application web ?24
  - Pourquoi des standards pour le Web ?25
  - Chapitre 2
    HTML en seconde langue27
  - La syntaxe HTML 5 29
  - Rappel sur les balises29
  - Imbrications et types de contenu30
  - Structure générale d'un document HTML32
  - Attributs33
  - Les commentaires34
  - L'encodage des caractères 35
  - Les entités36
  - Le type MIME 36
  - Comment le navigateur détermine-t-il l'encodage des caractères et le type MIME ? 38
  - HTML 5 ou XHTML 5 ? 39
  - Forme HTML39
  - Forme XHTML40
  - Ce que vous savez sur XHTML est probablement faux40
  - Du vrai XHTML 541
  - La validation 43
  - Rappels sur les styles CSS 44
  - Rappels sur JavaScript 47
  - Frameworks JavaScript48
  - Où placer <script> ?49
  - Publier un site en ligne 50
  - Choisir un hébergeur web50
  - « I believe I can touch the sky » : le cloud 50
  - Utiliser un client FTP51
  - Choisir un langage serveur et un système de gestion de contenu51
  - Le protocole HTTP 52
  - Requêtes et en-têtes53
  - Bonnes pratiques 56
  - Organisation du code57
  - Organisation des fichiers57
  - Optimisations en vue des performances57
  - Les sites de référence 58
  - Chapitre 3
    Navigateurs et outils de conception63
  - Panorama des navigateurs web et moteurs de rendu 64
  - Mobiles et tablettes66
  - Prise en charge de HTML 566
  - Bibliothèques et frameworks web 68
  - Bibliothèques JavaScript68
  - Modernizr 68
  - html5shiv (ou html5shim) 70
  - Polyfills 71
  - Frameworks HTML72
  - HTML5 Boilerplate 72
  - Bootstrap 72
  - Initializr 73
  - Les bons outils pour développer 74
  - Pour éditer du code74
  - Pour tester et déboguer77
  - Virtualisez ! 78
  - Mozilla Firefox 78
  - Google Chrome 79
  - Safari 79
  - Opera 80
  - Internet Explorer et Edge 80
  - Outils de développement et consoles JavaScript80
  - Les pages about : 81
  - Performance front-end 82
  - Créer des applications web et mobiles 84
  - Web apps86
  - Applications web progressives 87
  - Applications interceptant protocoles et contenus88
  - Chapitre 4
    Éléments et attributs HTML 591
  - Modèles de contenu 94
  - Le doctype avant tout 95
  - Rappel des précédents doctypes96
  - Éléments racines et méta-informations 97
  - <html>97
  - manifest 98
  - <head>98
  - <title>101
  - <meta>102
  - <meta name> 102
  - <meta charset> 103
  - <meta http-equiv> 104
  - <link>105
  - <style>106
  - scoped 108
  - media 109
  - <base>109
  - bref 110
  - target 110
  - <body>110
  - Groupement 111
  - <div>112
  - <span>113
  - Liens 114
  - <a>114
  - bref et breflang 115
  - rel 117
  - id et ancres 117
  - target 118
  - download 118
  - ping 119
  - Liens et blocs 119
  - Sections et titres 120
  - Le cas Internet Explorer 125
  - Le cas d'Internet Explorer sans JavaScript 128
  - Le cas Internet Explorer sans JavaScript, bis 129
  - <section>130
  - <main>132
  - <article>133
  - <header>134
  - <footer>136
  - <nav>137
  - <aside>138
  - <address>140
  - <h1> à <h6>141
  - Hiérarchie des éléments de sections et outline 143
  - <hgroup>148
  - Listes 149
  - <ol>149
  - <ul>151
  - <li>152
  - <dl>153
  - <dt>154
  - <dd>155
  - Texte et sémantique 155
  - <p>155
  - <blockquote>156
  - <q>158
  - cite 159
  - <cite>159
  - <strong>160
  - <em>161
  - <b>161
  - <i>163
  - <u>163
  - <small>164
  - <dfn>165
  - <abbr>165
  - <code>166
  - <var>167
  - <kbd>168
  - <samp>169
  - <sub>169
  - <sup>170
  - <time>170
  - datetime 171
  - pubdate 173
  - <data>174
  - <hr>175
  - <br>176
  - <wbr>177
  - <ins>178
  - <del>179
  - <s>181
  - <pre>182
  - <mark>183
  - <ruby>184
  - <rt>185
  - <rp>186
  - <rb>187
  - <rtc>187
  - <bdo>187
  - <bdi>188
  - Contenu embarqué 188
  - <img>188
  - Formats de compression d'images 189
  - Bref comparatif visuel 191
  - Usage des images en HTML 192
  - src 194
  - alt 194
  - width, height 196
  - usemap 197
  - ismap 197
  - Liens sur images 199
  - Positionnement des images 200
  - Images à résolution adaptative (responsive images) 200
  - <map>202
  - <area>204
  - <figure>206
  - <figcaption>210
  - <iframe>210
  - src 211
  - width, height 211
  - sandbox 213
  - srcdoc 214
  - seamless 214
  - <embed>215
  - Imbrications avec object et éléments médias 217
  - <object>218
  - typemustmatch 219
  - Le cas de Flash 220
  - <param>221
  - <video>222
  - <audio>222
  - <source>223
  - <track>223
  - <canvas>223
  - Données tabulaires 224
  - <table>224
  - <thead>227
  - <tfoot>227
  - <tbody>228
  - <tr>230
  - <td>231
  - <th>233
  - <caption>234
  - <colgroup>235
  - <col>237
  - Éléments interactifs 239
  - <dialog>239
  - <menu>243
  - type 243
  - label 244
  - <menuitem>245
  - <details>247
  - <summary>250
  - Scripting 251
  - <script>251
  - Script externe à la page HTML 253
  - Exécution asynchrone 253
  - Exécution différée 254
  - crossorigin 254
  - nonce 254
  - integrity 255
  - Type module 255
  - <noscript>256
  - <template>257
  - Shadow DOM, Custom Elements 259
  - Attributs HTML globaux 261
  - accesskey262
  - class263
  - contextmenu265
  - contenteditable266
  - data-267
  - dir269
  - draggable269
  - dropzone270
  - hidden270
  - id271
  - itemid, itemref, itemscope, itemtype, itemprop272
  - lang272
  - tabindex273
  - translate275
  - title276
  - spellcheck277
  - style277
  - Relations des liens 278
  - Quelques relations notables280
  - nofollow 280
  - noreferrer 281
  - prefetch, dns-prefetch, prerender, preload 282
  - prev, next 284
  - Attributs événements 284
  - Chapitre 5
    Les formulaires (Web Forms)289
  - <input> et ses variantes 291
  - text294
  - password294
  - tel295
  - url296
  - email297
  - search299
  - hidden300
  - radio300
  - checkbox301
  - button303
  - reset303
  - submit304
  - image304
  - file305
  - Camera API et périphériques mobiles 308
  - date308
  - time311
  - datetime-local312
  - month314
  - week315
  - number317
  - range318
  - color319
  - Autres éléments de formulaires 320
  - <textarea>320
  - <select>322
  - <option>323
  - <optgroup>324
  - <datalist>325
  - <button>327
  - <output>327
  - <progress>329
  - <meter>332
  - Construction de formulaires 334
  - <form>334
  - Validation des données 335
  - <fieldset>337
  - <legend>338
  - <label>339
  - Attributs communs pour les éléments de formulaire 341
  - Quelques nouveaux attributs HTML 5343
  - placeholder 343
  - autofocus 344
  - autocomplete 344
  - required 347
  - multiple 347
  - dirname 347
  - pattern 348
  - min, max, step 348
  - minlength 349
  - inputmode 349
  - Une touche de style 350
  - Un zeste de script 352
  - Prise en charge 354
  - Chapitre 6
    Les microformats (Microdata)355
  - Les microformats et le Web sémantique 356
  - Les prémices358
  - Microdata à la rescousse 360
  - Attributs globaux361
  - itemscope 361
  - itemtype 362
  - Vocabulaires 362
  - itemprop 364
  - itemid 366
  - itemref 367
  - API DOM Microdata367
  - document.getItem() 369
  - itemType, itemRef, itemId 370
  - properties 370
  - properties.namedItem() 370
  - itemValue 371
  - JSON-LD 372
  - Données structurées et indexées 374
  - Chapitre 7
    Audio et vidéo377
  - Conteneurs, codecs, licences et support 380
  - Vidéo382
  - Theora 382
  - WebM 382
  - H.264 383
  - Audio384
  - MP3 (Mpeg-1 Audio Layer 3) 384
  - AAC (Advanced Audio Coding) 385
  - FLAC (Free Lossless Audio Codec) 385
  - Vorbis 385
  - Opus 385
  - Les balises médias 387
  - <audio>389
  - <video>389
  - <source>390
  - <track>391
  - Attributs pour <track>393
  - Attributs pour <audio> et <video> 395
  - src395
  - width et height395
  - controls396
  - poster396
  - autoplay396
  - preload396
  - loop397
  - mediagroup397
  - Interface de contrôle et événements 397
  - Contrôler la lecture 399
  - Surveiller les événements 400
  - Créer une interface graphique personnalisée402
  - Détecter les erreurs de lecture 408
  - Détection du support avec canPlayType()409
  - Solution de repli avec Flash 410
  - Media Fragments412
  - Plein écran (fullscreen) 412
  - Web Audio API 415
  - Encrypted Media Extensions 416
  - Media Source Extensions 417
  - MediaCapture et WebRTC 418
  - Presentation et Speech API 418
  - Librairies et lecteurs 419
  - Chapitre 8
    Dessin avec Canvas421
  - L'élément <canvas> 423
  - Base de départ et contexte graphique424
  - Coordonnées424
  - Formes géométriques 426
  - Chemins 428
  - beginPath() et closePath()429
  - moveTo() et lineTo()430
  - fill() et stroke()431
  - rect()432
  - arcTo()432
  - arc()433
  - bezierCurveTo()434
  - quadraticCurveTo()435
  - Path2D436
  - Styles de traits, remplissages et couleurs 437
  - Dégradés 439
  - Transformations et états du contexte 441
  - save() et restore()443
  - Images 445
  - Pixels 447
  - Créer des pixels449
  - Lire des pixels450
  - Modifier des pixels452
  - Motifs et sprites 455
  - Texte 460
  - Ombrages 462
  - Transparence, compositions et masques 464
  - Transparence générale464
  - Compositions465
  - Masques467
  - Contrôle clavier et souris 471
  - Souris471
  - Clavier474
  - Animation et jeux 477
  - requestAnimationFrame478
  - Jeux480
  - Gamepad API481
  - Pointer Lock487
  - Performance 492
  - L'API Page Visibility 493
  - Plein écran 496
  - Adapter la taille du canevas à la fenêtre496
  - Vidéo et audio 497
  - Prise en charge 499
  - Bibliothèques 500
  - Et la 3D ? WebGL ! 501
  - Et le graphisme vectoriel ? SVG ! 504
  - Syntaxe504
  - Création au format SVG507
  - Inclusion HTML508
  - Accessibilité 509
  - Utiliser SVG dans une page web509
  - Avec <object> 509
  - Avec <embed> 509
  - Avec <iframe> 510
  - Avec <img> 510
  - SVG inline 511
  - Viewbox et étirement 513
  - Implémentation514
  - Frameworks SVG514
  - Chapitre 9
    Géolocalisation517
  - Principe 519
  - Les mains dans le code 521
  - Déclencher la localisation521
  - Travailler avec la position et les coordonnées522
  - Gestion des erreurs524
  - Options supplémentaires525
  - Utiliser une carte527
  - Chapitre 10
    Interactions avec les fichiers (File API)531
  - Principe 532
  - Fonctionnement 533
  - Événement onchange535
  - Recueillir les informations des fichiers sélectionnés536
  - Lire des fichiers avec FileReader 537
  - Utiliser Canvas541
  - CreateObjectURL543
  - Upload simple avec PHP 543
  - Upload avec XMLHttpRequest 2 546
  - FormData547
  - Drag'n Drop 551
  - Chapitre 11
    Gestion du glisser-déposer (Drag'n Drop)553
  - Principe 555
  - Événements et attributs mis en oeuvre 555
  - Glisser 557
  - L'attribut draggable557
  - Un zeste de CSS557
  - Déposer ! 560
  - L'attribut dropzone560
  - Les événements dragenter et dragleave562
  - L'événement dragover562
  - L'interface Data Transfer 564
  - L'événement dragstart565
  - effectAllowed et dropEffect 565
  - Données transportées par setData()566
  - L'événement drop et getData()567
  - L'événement dragend569
  - Aller plus loin570
  - Script complet570
  - Glisser-déposer de fichiers 571
  - Dépôt depuis le système (drag-in)572
  - En symbiose avec FileReader et Data URI573
  - Déposer des éléments hors du navigateur (drag-out)577
  - Bibliothèques JavaScript 579
  - Chapitre 12
    Événements envoyés par le serveur (Server-Sent Events)581
  - Push-toi, j'arrive 582
  - Principe général583
  - Sous le capot 584
  - Côté client (navigateur)584
  - Propriétés et méthodes 585
  - Côté serveur585
  - Mise en place d'un flux continu 586
  - Syntaxe des messages source591
  - id 594
  - event 596
  - retry 597
  - Utiliser JSON 598
  - Prise en charge 599
  - Chapitre 13
    Échange d'informations entre documents (Web Messaging)601
  - Fonctionnement de postMessage 603
  - Surveiller les événements607
  - Sécurité 608
  - Vérification de l'origine608
  - Vérification du destinataire608
  - Vérification du contenu609
  - Données transférées et JSON 609
  - Source et réponse 611
  - Chapitre 14
    Communication en temps réel (Web Sockets)615
  - Un protocole commun 619
  - Pour démarrer, une poignée de mains (handshake)620
  - Côté serveur 621
  - Node.js et WebSocket621
  - Installation 621
  - Configuration 622
  - Côté navigateur 624
  - Usage en console navigateur625
  - Usage en application HTML626
  - Se connecter629
  - Envoyer des données630
  - Recevoir des messages630
  - Gérer les erreurs631
  - Fermer la connexion631
  - Aller plus loin 633
  - Écrire dans un fichier633
  - Prise en charge 635
  - Chapitre 15
    Stockage des données locales (Web Storage)637
  - Deux espaces de stockage 639
  - Stockage de session640
  - Local Storage640
  - L'interface Storage 640
  - Stockage, lecture, suppression641
  - Sécurité et accès aux données643
  - Un compteur de visites avec localStorage644
  - Surveiller le dépassement de quota645
  - Un soupçon de JSON 646
  - Autres types de données648
  - Stocker sur un événement 649
  - Stockage à intervalles réguliers649
  - Événements650
  - Prise en charge 651
  - Chapitre 16
    Bases de données (Indexed Database et Web SQL Database)653
  - L'aube d'IndexedDB 655
  - Philosophie d'une base NoSQL656
  - Ouvrir une base et créer un catalogue659
  - Gestion des versions661
  - Insérer des données dans une transaction662
  - Afficher le contenu664
  - Utiliser un index666
  - Effacer un catalogue ou une base668
  - Perspectives668
  - Prise en charge669
  - Le crépuscule de l'API Web SQL Database 670
  - Philosophie670
  - Ouvrir une base671
  - Initier une transaction671
  - Créer une table672
  - Insérer des données672
  - Exploiter les résultats673
  - Perspectives674
  - Chapitre 17
    Historique de navigation675
  - Navigation dans l'historique 677
  - History677
  - Location678
  - Modification dynamique de l'historique 679
  - pushState()681
  - replaceState()682
  - The king of popstate682
  - Simulation 683
  - Cas pratique684
  - Réécriture d'adresse690
  - Les ancres et l'événement hashchange 690
  - Détection 691
  - Prise en charge 692
  - Chapitre 18
    JavaScript en (multi)tâche de fond : les Web Workers et Service Workers693
  - Principe des Web Workers 695
  - Outils de développement697
  - Fonctionnement des Web Workers 698
  - Initialisation698
  - Communication701
  - Terminaison703
  - Gestion des erreurs703
  - Contexte et limitations704
  - Fonctions complémentaires704
  - Blob à la rescousse705
  - Service Workers et navigation hors ligne 706
  - Fonctionnement707
  - Cycle de vie 708
  - Enregistrement et installation 709
  - Requêtes et réponses 713
  - Fetch717
  - Headers, Request, Response 719
  - Chaînage des promesses 722
  - Applications web723
  - Prise en charge 724
  - Chapitre 19
    JavaScript, le DOM et l'API Selectors725
  - Les bases de JavaScript 728
  - Insertion de script729
  - Variables729
  - Types simples730
  - Objets 731
  - Opérateurs 733
  - Fonctions 733
  - Structures de contrôle 734
  - Boucles 734
  - Méthodes de sélection DOM 735
  - getElementById()738
  - getElementByTagName()738
  - getElementByName()738
  - getElementByClassName()738
  - querySelector()739
  - querySelectorAll()739
  - Propriétés et méthodes DOM 739
  - Manipulation DOM 740
  - createElement()740
  - appendChild()741
  - removeChild()741
  - insertBefore()741
  - createTextNode()741
  - classList741
  - insertAdjacentHTML()742
  - Méthodes pour formulaires 742
  - Gestionnaires d'événements 743
  - Autres fonctions utiles 745
  - matchMedia() et Media Queries745
  - Prise en charge 746
  - Conclusion et perspectives747
  - Quid des frameworks JavaScript et de Flash ? 747
  - Perspectives d'avenir 748
  - Annexe A
    Fonctionnalités modifiées et obsolètes751
  - Différences au cours des évolutions de HTML 5 751
  - Différences HTML 5 par rapport à HTML 4 752
  - Fonctionnalités obsolètes 752
  - Fonctionnalités obsolètes non conformes 752
  - Éléments752
  - Attributs753
  - Annexe B
    Feuilles de styles CSS755
  - Principe général 757
  - Sélecteurs 758
  - Propriétés 759
  - Pseudo-classes et pseudo-éléments 765
  - Règles@ 766
  - Media queries 767
  - Positionnement 768
  - Annexe C
    Accessibilité et ARIA771
  - Qu'est-ce que l'accessibilité du Web ? 772
  - HTML sémantique775
  - WAI, WCAG et ARIA 778
  - Les rôles et propriétés de WAI-ARIA 780
  - Rôles avec l'attribut role782
  - Points de repère (landmark roles) 782
  - Structure de document 785
  - Composants (widgets) 786
  - Propriétés et états avec les attributs aria-*789
  - Globaux 790
  - Contrôles d'interface 791
  - Cas pratiques796
  - aria-hidden 796
  - role=presentation 797
  - aria-live 797
  - Drag'n drop (glisser-déposer) 799
  - Relations 799
  - Valider et tester802
  - Index805
Origine de la notice:
- FR-751131015 ;
- Electre