HTML5
Adresses derrière les liens

Références générales
Écran 2
  1. Dive into HTML5 http://diveintohtml5.info/index.html
  2. W3C : la norme en évolution http://www.w3.org/TR/html5/
  3. WhatWG : la norme en évolution http://www.whatwg.org/specs/web-apps/current-work/
  4. HTML5 tutorial sur Tutorials point http://www.tutorialspoint.com/html5/index.htm
  5. HTML5 tutorial sur w3schools http://www.w3schools.com/html5/default.asp
  6. http://espacecourbeformation.com/ http://espacecourbeformation.com/
Articles intéressants
Écran 3
  1. Using HTML5 Today http://www.facebook.com/note.php?note_id=438532093919
  2. 12 common problems with HTML5 http://oli.jp/2009/html5-faq/
  3. A preview of HTML5 http://www.alistapart.com/articles/previewofhtml5
Doit-on attendre l'adoption du standard?
Écran 7
  1. Ian Hickson avait prédit l'atteinte de la recommandation en 2022 http://www.techrepublic.com/blog/programming-and-development/html-5-editor-ian-hickson-discusses-features-pain-points-adoption-rate-and-more/718
  2. adoption en 2014 http://ishtml5readyyet.com/
  3. The Beauty of the Web http://www.beautyoftheweb.com/
Règles de syntaxe du HTML5
Écran 8
  1. écritures à la XHTML http://www.w3.org/TR/html5/the-xhtml-syntax.html
  2. attribut booléen http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute
  3. HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
Comparaison d'un squelette XHTML 1.0 et HTML5
Écran 9
  1. HTML5 Boiler Plate (h5bp) http://html5boilerplate.com/
  2. Initializr 2 http://www.initializr.com/
Support d'HTML5
Écran 10
  1. Comparison or layout engines (HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
  2. What's my IP? What's my browser? http://www.findmebyip.com/#target-selector
  3. grille de compatibilité CSS3 et support HTML5 http://www.findmebyip.com/litmus
  4. Support tables for HTML5, CSS3 http://caniuse.com/#
  5. HTML5test.com http://html5test.com/
  6. note entre 0 et 300 http://blogs.msdn.com/b/iefrance/archive/2011/02/28/html5-respect-des-standards-tests-et-marketing.aspx
  7. HTML5 Please http://html5please.com/
HTML5test.com
Écran 11
  1. test HTML5 http://html5test.com/
  2. HTML5 : respect des standards, tests et marketing http://blogs.msdn.com/b/iefrance/archive/2011/02/28/html5-respect-des-standards-tests-et-marketing.aspx
Tableau comparatif support HTML5 sur findmebyip.com
Écran 12
  1. Findmebyip.com http://www.findmebyip.com/litmus
Détection avec Modernizr
Écran 15
  1. librairie JavaScript Modernizr http://www.modernizr.com/
  2. yepnope.js http://yepnopejs.com/
  3. polyfills http://remysharp.com/2010/10/08/what-is-a-polyfill/
Validation du HTML5
Écran 17
  1. W3C validator http://validator.w3.org/
  2. Validator.nu (X)HTML5 Validator http://html5.validator.nu/
  3. Validating HTML5 in the browser http://www.456bereastreet.com/archive/201006/validating_html5_in_the_browser/
  4. Understanding HTML5 validation http://www.impressivewebs.com/understanding-html5-validation/
  5. About Validator.nu http://about.validator.nu/
HTML5 et accessibilité
Écran 19
  1. HTML5 and accessibility http://stanford.edu/group/accessibility/cgi-bin/presentations/html5_a11y/
Outils pour vérifier la structure d'une page
Écran 27
  1. algorithme pour générer le squelette du document http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections
  2. HTML 5 Outliner http://gsnedders.html5.org/outliner/
  3. Google Chrome's Outliner https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo
Ajouts sémantiques pour représenter les concepts temporels
Écran 35
  1. liste d'exemples de formats valides http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string
Refactorisation : ajouter un élément footer
Écran 38
  1. balisage structurel HTML5 pour un de pied de page épais http://html5doctor.com/html5-simplequiz-6-zeldmans-fat-footer/
Autres éléments ajoutés
Écran 41
  1. différence HTML 4.01 et HTML5 http://www.w3.org/TR/html5-diff/#new-elements
Attributs personnalisés : data-*
Écran 42
  1. Custom data attributes http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes
  2. HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Introduction aux formulaires bonifiés du HTML5
Écran 45
  1. Web Forms 2.0 http://www.whatwg.org/specs/web-forms/2005-09-01/
  2. XForms dans le monde XML http://www.w3.org/TR/2004/WD-xforms11-20041115/
Références et tutoriels
Écran 46
  1. chapitre des formulaires sur la norme HTML5 en développement http://dev.w3.org/html5/spec/Overview.html#forms
  2. The Current State of HTML5 Forms http://wufoo.com/html5/
Détection du support des fonctionnalités HTML5 des formulaires : support d'un attribut
Écran 50
  1. HTML5 inputs and attributes support http://miketaylr.com/code/input-type-attr.html
JavaScript et les formulaires HTML5
Écran 60
  1. The constraint validation API http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api
Contenu éditable
Écran 63
  1. Aperçu de l'attribut contenteditable en HTML5 http://www.valhalla.fr/2010/04/19/contenteditable-html5/
Ressources pour nous aider
Écran 66
  1. 5 Things You Need to Know to Start Using Video and Audio Today http://www.slideshare.net/npar007/5-things-you-need-to-know-to-start-using-ltvideo-and-ltaudio-today
  2. Video for everybody http://camendesign.com/code/video_for_everybody
  3. The State Of HTML5 Video http://www.longtailvideo.com/html5/
  4. VideoJS http://videojs.com
  5. MediaElementJS http://mediaelementjs.com/
Formats vidéo
Écran 71
  1. codec http://fr.wikipedia.org/wiki/Codec
  2. Webm Project http://www.webmproject.org/
Recette recommandée
Écran 74
  1. HTML5 video http://en.wikipedia.org/wiki/HTML5_video
Outils pour convertir les formats
Écran 75
  1. Firefogg http://firefogg.org/
  2. HandBrake http://handbrake.fr/
  3. Miro Video Converter http://www.mirovideoconverter.com/
  4. ffmpeg2theora http://v2v.cc/~j/ffmpeg2theora/
  5. HandBrakeCLI http://handbrake.fr/
  6. ffmpeg http://www.ffmpeg.org/
  7. services en ligne comme vid.ly http://vid.ly/
Rendre les vidéos accessibles
Écran 82
  1. spécification pour le sous-titrage des vidéos http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track
  2. HTML video descriptions: how to make <video> accessibile to vision impaired users http://blog.gingertech.net/wp-content/uploads/2010/12/HTML5AuDesc/#slide13
  3. Web Video Text Tracks http://dev.w3.org/html5/webvtt/
  4. HTML5 Video with SRT Subtitles http://www.storiesinflight.com/js_videosub/
API audio/vidéo pour faire nos propres contrôles
Écran 86
  1. section pour l'élément vidéo http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#playing-the-media-resource
Questionner le statut d'un clip
Écran 90
  1. readyState http://www.w3.org/TR/html5/video.html#the-ready-states
  2. networkState http://www.w3.org/TR/html5/video.html#network-states
  3. error http://www.w3.org/TR/html5/video.html#error-codes
Événements liés à la consommation de clips audio ou vidéo
Écran 91
  1. 22 événements pour l'audio et la vidéo http://www.w3.org/TR/html5/the-iframe-element.html#mediaevents
Problèmes avec l'audio
Écran 93
  1. jeu Galactic Plunder http://dougx.net/plunder/
Références, tutoriels et veille
Écran 96
  1. canvas de la norme HTML5 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
  2. HTML5 canvas cheat sheet http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
  3. HTML5 Canvas Tutorial 1 http://www.html5canvastutorials.com/
  4. HTML5 Canvas Tutorial 2 http://www.dbp-consulting.com/tutorials/canvas/index.html
  5. HTML5 canvas: the basics http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  6. HTML5 Tutorial: canvas http://www.tutorialspoint.com/html5/html5_canvas.htm
  7. Flashy HTML experiments point to Web's future http://www.webmonkey.com/2010/08/flashy-html5-experiments-point-to-webs-future/
  8. HTML5 experiments http://hakim.se/experiments
  9. Cut the rope! jeu HTML5 basé sur les canvas http://www.cuttherope.ie/
  10. blogue Cut the rope - Behind the scenes http://www.cuttherope.ie/dev/
Support de base des canvas
Écran 97
  1. explorercanvas http://code.google.com/p/explorercanvas/
  2. Grille de support des fonctionnalités http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5_Canvas%29
Tracer des chemins : arcs et courbes
Écran 112
  1. segment avec arc de cercle http://www.dbp-consulting.com/tutorials/canvas/CanvasArcTo.html
  2. Comprendre les courbes de Bézier sur Wikipedia http://en.wikipedia.org/wiki/B%C3%A9zier_curve
Changer le contexte canvas
Écran 116
  1. matrice de transformation http://en.wikipedia.org/wiki/Transformation_matrix
Insérer des images
Écran 124
  1. animation avec des sprites http://blogs.msdn.com/b/davrous/archive/2011/07/21/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx
  2. sprites http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29
Manipulation pixel par pixel
Écran 126
  1. toDataURL() http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
Comment bâtir des animations avec les canvas?
Écran 128
  1. display list http://en.wikipedia.org/wiki/Display_list
  2. sprites http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29
  3. Thought on HTML5 Canvas http://www.kontain.com/fi/entries/94636/
Exercice : le racquetball, version canvas
Écran 129
  1. Programmation de jeux simples avec canvas ou SVG http://msdn.microsoft.com/fr-fr/library/gg589521%28v=VS.85%29.aspx
Lire les coordonnées de la souris
Écran 131
  1. lire Interactivity in HTML5 Canvas Visualizations http://blog.carbonfive.com/2011/04/11/interactivity-in-html5-canvas-visualizations/
Librairies pour canvas
Écran 132
  1. Review of HTML5 Canvas Libraries http://www.suburban-glory.com/blog?page=141
  2. HTML5 Canvas Animation Libraries http://webification.com/tag/html5-canvas-animation-libraries
  3. Libraries and examples for working with canvas http://www.ajaxline.com/libraries-and-examples-for-working-with-canvas
  4. EaselJS http://easeljs.com/
  5. Sprite Sheets http://easeljs.com/examples/sparkles.html
  6. Drag and Drop http://www.createjs.com/#!/EaselJS/demos/dragdrop
  7. Image Filters http://www.createjs.com/#!/EaselJS/demos/filters
  8. tutoriel de création d'un jeu avec EaselJS http://blogs.msdn.com/b/davrous/archive/2011/09/09/html5-platformer-the-complete-port-of-the-xna-game-to-lt-canvas-gt-with-easeljs.aspx
  9. KineticJS adresse privée
Problèmes et limitations avec les cookies
Écran 136
  1. norme séparée au W3C http://dev.w3.org/html5/webstorage/
Persistance locale
Écran 140
  1. persistance locale dans Firefox http://stackoverflow.com/questions/4214759/html-5-local-storage-not-persistent-in-firefox
En ligne, hors ligne : comment savoir et réagir?
Écran 163
  1. Offline and online events https://developer.mozilla.org/en/Online_and_offline_events
  2. Detecting offline status in HTML5 http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html
Ajouter une icône d'application Web pour les usagers d'iOS
Écran 170
  1. Configuring a Web application https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
  2. Supported meta tags in Safari https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
  3. Everything you wanted to know about touch icons http://mathiasbynens.be/notes/touch-icons
Tutoriels pour glisser/déposer
Écran 173
  1. HTML5 drag and drop sur Tutorial Point http://www.tutorialspoint.com/html5/html5_drag_drop.htm
  2. Native Drag and Drop http://html5doctor.com/native-drag-and-drop/
  3. Drag and Drop HTML5 http://dmathieu.com/fr/developpement/drag-and-drop-html-5
  4. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
  5. Reading Local Files in JavaScript http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd
  6. Cross Browser HTML5 Drag and Drop http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
  7. Drag out files like gmail http://www.thecssninja.com/javascript/gmail-dragout
  8. The HTML5 drag and drop disaster http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
Support dans les navigateurs
Écran 174
  1. Can I use? Drag and Drop http://caniuse.com/dragndrop
Détection du support pour l'API du glisser/déposer
Écran 175
  1. Detecting Drag and Drop Support in JavaScript http://stackoverflow.com/questions/2856262/detecting-html5-drag-and-drop-support-in-javascript
Illustrer les événements drag* (1/2)
Écran 177
  1. exemple qui utilise le glisser/déposer http://www.html5rocks.com/en/tutorials/dnd/basics/
Objet dataTransfer (1/2)
Écran 181
  1. Drag and Drop HTML5 http://dmathieu.com/fr/developpement/drag-and-drop-html-5
Objet dataTransfer (2/2)
Écran 182
  1. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
API historique du HTML5
Écran 189
  1. API historique du HTML5 adresse privée
Support de l'API historique du HTML5
Écran 190
  1. The State of the HTML5 History API https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API
Problèmes avec API historique
Écran 196
  1. documentation Mozilla sur l'API historique https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
  2. problèmes de compatibilité de l'API historique avec les différents navigateurs https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API
  3. librairie qui aplanit les différences comme History.js https://github.com/balupton/history.js
Introduction à la géolocalisation dans les navigateurs
Écran 198
  1. Mobile First http://izibook.eyrolles.com/store/show/9782212134063
API géolocalisation
Écran 199
  1. géolocalisation du W3C http://www.w3.org/TR/geolocation-API/
API de géolocalisation du W3C et les autres
Écran 214
  1. il y avait le module externe Google Gears http://gearsblog.blogspot.ca/2011/03/stopping-gears.html
  2. librairie JavaScript geo.js http://code.google.com/p/geo-location-javascript/
Exercice : localiser la position et mettre sur carte Google
Écran 215
  1. http://trucshtml5.com/demos/geolocalisation/ou-suis-je.html http://trucshtml5.com/demos/geolocalisation/ou-suis-je.html
  2. Où suis-je? http://www.trucshtml5.com/apps/loc/
Introduction au SVG
Écran 217
  1. vocabulaire XML pour représenter des dessins vectoriels http://www.w3.org/TR/SVG/
  2. Scalable Vector Graphics sur Wikipedia http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics
Références et tutoriels pour le SVG
Écran 219
  1. norme SVG 1.1 au W3C http://www.w3.org/TR/SVG11/
  2. cheat-sheet visuelle http://www.cheat-sheets.org/own/svg/index.xhtml
  3. Introduction aux APIs graphiques d’HTML5: SVG & Canvas http://blogs.msdn.com/b/davrous/archive/2011/05/09/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-1-4.aspx
  4. HTML5 SVG sur Tutorials Point http://www.tutorialspoint.com/html5/html5_svg.htm
  5. SVG Tutorial sur W3schools http://www.w3schools.com/svg/default.asp
  6. Jenkov.com SVG Tutorial http://tutorials.jenkov.com/svg/
Méthodes pour insérer du SVG
Écran 220
  1. Mobile Safari SVG Problem http://stackoverflow.com/questions/4504942/mobile-safari-svg-problem
Outil Web pour créer du SVG
Écran 223
  1. SVG-edit http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
Les commandes pour un chemin
Écran 225
  1. Paths in SVG 1.1 standard http://www.w3.org/TR/SVG/paths.html#PathElement
Exemple d'un SVG complexe
Écran 227
  1. exemple du SVG complexe en ligne http://david.blob.core.windows.net/html5graphics/002_SVGBasics_RichScene.htm
Quelques éléments SVG en vrac : gradients
Écran 228
  1. paramètres pour les gradients http://tutorials.jenkov.com/svg/svg-gradients.html
Quelques éléments SVG en vrac : transformations
Écran 231
  1. Transform Attribute sur la norme SVG http://www.w3.org/TR/SVG/coords.html#TransformAttribute
SVG ou canvas 2d : lequel choisir?
Écran 236
  1. SVG or Canvas? Сhoosing between the two http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
  2. Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/4) http://blogs.msdn.com/b/davrous/archive/2011/05/20/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-2-4.aspx
Exemple d'application basée sur le SVG : HighCharts
Écran 237
  1. HighCharts http://www.highcharts.com/
Illustrer la problématique de la tâche unique
Écran 240
  1. script de simulation du trajet effectué par la lumière par pixel http://labs.flog.co.nz/raytracer/
Lectures sur les Web workers
Écran 242
  1. Introduction aux Web Workers d'HTML5 http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
  2. C. Gerard Gallant: An Introduction to HTML5 Web Workers http://cggallant.blogspot.com/2010/08/introduction-to-html-5-web-workers.html
  3. HTML5 Rocks - The Basics of Web Workers http://www.html5rocks.com/en/tutorials/workers/basics/
Support des Web workers
Écran 243
  1. Introduction aux Web Workers d'HTML5 http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
  2. Web workers, HTML5 http://www.slideshare.net/amiteshawa/web-workers-html-5
Communiquer avec la tâche principale
Écran 246
  1. Introduction aux Web Workers d'HTML5 http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
Illustrer la portée des Web workers
Écran 249
  1. Introduction aux Web Workers d'HTML5 http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
Usages potentiels des Web workers
Écran 253
  1. Introduction aux Web Workers d'HTML5 http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
Exemple : les fontaines avec effets de particules
Écran 254
  1. The Web Worker Fountains http://ie.microsoft.com/testdrive/Graphics/WorkerFountains/Default.html
Définition des microdonnées
Écran 256
  1. microformats http://microformats.org/
Tutoriels et références
Écran 257
  1. section sur les microdonnées dans la norme HTML5 http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html
  2. HTML5 Microdata: Welcome to the Machine http://net.tutsplus.com/tutorials/html-css-techniques/html5-microdata-welcome-to-the-machine/
Mais pourquoi donc les microdonnées?
Écran 264
  1. rich snippets de Google http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata-dom-api
  2. outil test de Google pour l'extraction des rich snippets http://www.google.com/webmasters/tools/richsnippets
  3. API DOM pour les microdonnées http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata-dom-api
Vocabulaire Person de http://data-vocabulary.org/Person
Écran 266
  1. Person http://www.data-vocabulary.org/Person/
  2. schemas.org http://www.schema.org/
Quelques vocabulaires de microdonnées
Écran 267
  1. schema.org http://www.schema.org/
  2. Event http://www.schema.org/Event
  3. Organization http://www.schema.org/Organization
  4. Person http://www.schema.org/Person
  5. PostalAddress http://www.schema.org/PostalAddress
  6. Review http://www.schema.org/Review
  7. GeoCoordinates http://www.schema.org/GeoCoordinates
Soyons critiques à propos des microdonnées
Écran 268
  1. microformats http://microformats.org/
  2. RDFa http://www.w3.org/TR/xhtml-rdfa-primer/
Introduction au MathML
Écran 270
  1. problème du sac à dos sur Wikipédia http://fr.wikipedia.org/wiki/Probl%C3%A8me_du_sac_%C3%A0_dos
Références sur le MathML
Écran 271
  1. norme MathML version 2 adresse privée
  2. norme MathML version 3 http://www.w3.org/TR/MathML3/
  3. fiche MathML sur Wikipédia http://en.wikipedia.org/wiki/MathML
  4. MathML tutorial sur Tutorials Point http://www.tutorialspoint.com/html5/html5_mathml.htm
  5. MathML presenting and capturing mathematics for the Web http://www.w3.org/Math/Documents/mathml-tutorial.pdf
Ce qui n'a pas été couvert
Écran 276
  1. API web sockets http://dev.w3.org/html5/websockets/
  2. touch events http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
  3. What is a Polyfill http://remysharp.com/2010/10/08/what-is-a-polyfill/
  4. Phonegap http://www.phonegap.com/
Que faire à partir de maintenant?
Écran 277
  1. plugins HTML5 pour jQuery http://plugins.jquery.com/plugin-tags/html5
  2. jQuery mobile http://jquerymobile.com/
Frameworks HTML5
Écran 278
  1. Sencha http://www.sencha.com/products/touch/
  2. Jo http://joapp.com/
  3. Sproutcore http://www.sproutcore.com/
  4. Best HTML5 and CSS3 Frameworks http://www.webdesignish.com/best-html5-and-css3-frameworks.html
  5. Best 7 HTML5 Frameworks for Mobile Apps http://www.cssreflex.com/2012/02/7-html5-frameworks-mobile-apps.html/
Vidéo pour expliquer la problématique avec Jo
Écran 279
  1. Cross platform screen cast http://www.youtube.com/watch?v=wOjfKA23Of8&feature=player_embedded
Tous droits réservés 2012, Espace Courbe Formation inc. —28 avril 2012 — 07:05:39