Ressources HTML5

Ressources HTML5
1. Introduction
2. Ressources HTML5
2.1. Les docs de référence et les quickrefs sur une page
2.2. Compatibilité HTML5 et navigateurs du marché
2.3. Site de news HTML5
2.4. Sites intéressants généraux sur HTML5
2.5. Tutoriaux spécialisés
2.5.1. Structure globale d'un document HTML5
2.5.2. Sur l'utilisation des tags de structure <section>, <article>, <nav>, <header>, <footer>, <aside>
2.5.3. Sur l'utilisation des éléments <details> et <summary>
2.5.4. Sur l'élément <datalist>
2.5.5. Sur l'élément <mark> pour attirer l'attention
2.5.6. Sur l'élément <time>
2.5.7. Sur l'utilisation du Canvas
2.5.8. SVG et HTML5
2.5.9. Orientation
2.5.10. Géolocalisation
2.5.11. Audio
2.5.12. Vidéo
2.5.13. File API
2.5.14. Web Storage
2.5.15. Indexed DB
2.5.16. Web SQL Database (pas officiellement partie de HTML5 mais quand même...)
2.5.17. WebWorkers
2.5.18. Web Sockets
2.5.19. Jeux
2.5.20. CSS3 et HTML5
2.5.21. SVG et HTML5
2.5.22. Tags sémantiques de HTML5
3. Pour démarrer html5, frameworks clés en main
3.1. Livres sur HTML5
3.2. Editeur HTML5/CSS3
3.3. Outils pour débugger du javascript, tester les APIs HTML5
3.4. HTML 5 pour les mobiles
1
Introduction
Ressources HTML5
Les docs de référence et les quickrefs sur une page
•
•
•
•
html 5 quickref : http://www.veign.com/reference/html5-guide.php
Canvas quickref : http://www.selfhtml5.org/wp-content/...heat_Sheet.png
Spécification officielle du W3C : http://dev.w3.org/html5/spec/Overview.html
Supers images à imprimer avec la spec HTML5 en dessin, tous les tags, events javascript, apis, etc :
http://www.fredzone.org/infographie-...pour-le-html-5
• Pocket reference des tags sémantiques HTML5 : http://adactio.com/extras/pocketbooks/html5/
Compatibilité HTML5 et navigateurs du marché
• http://html5demo.braincracking.org/ : en plus chaque feature est un lien vers des explications et
exemples en français !
• http://caniuse.com/ : tables de compatibilités mises à jour pour chaque élément html/api js/element
css3 par navigateur/version
• http://html5please.us/ : site recommandant ce qu'il est bon et pas bon d'utiliser dans HTML5/CSS3 si
on ne veut pas avoir de soucis, indique les solutions alternatives
• http://html5test.com/ :t est interactif de votre browser pour mesurer son support HTML5
Site de news HTML5
• New in HTML5 Media: http://kinlan-presentations.appspot....ate/index.html
• The Edge of HTML5: http://html5-demos.appspot.com/stati...ate/index.html
Sites intéressants généraux sur HTML5
• http://diveinto.html5doctor.coml, en particulier contient un très bon tutorial de base sur les
CANVAS. L'auteur est en train de préparer un livre sur HTML5
• Site HTML5Rocks, une des grosses références : http://www.html5rocks.com/, on trouve aussi des
transparents powerpoints (en html5) : http://slides.html5rocks.com/#slide1 et de nombreux
tutoriaux spécialisés comme celui-ci sur le support de la vidéo : http://www.html5rocks.com/
tutorials/video/basics/
• Bonne présentation de tous les tags et events HTML5, avec exemples interactifs :
http://www.w3schools.com/html5/default.asp
• Page regroupant des tutoriaux en français : http://www.xul.fr/html5/
• Petite introduction à HTML5 : http://blog.neovov.com/index.php?201...uction-a-html5
• Site officiel du W3C indiquant les différences entre HTML4 et HTML5 : http://dev.w3.org/html5/
html4-differences/
• Le livre de Mark Pilgrim sur HTML5.
• Le blog HTML5 doctor : http://html5doctor.com/, renferme des articles très intéressants sur les
différentes APIs, sur les server sent events, etc... A regarder régulièrement.
2
• Des démos Apple (malheureusement, et sans raisons : safari only : http://developer.apple.com/
<wbr/>safaridemos/)
• Le site http://mrdoob.com/ qui propose des démos impressionnante de canvas, webGL, etc.
• http://www.alsacreations.com/actu/li...tes-html5.html : les 5 mythes et vérités sur HTML5 (en
français)
Tutoriaux spécialisés
Structure globale d'un document HTML5
• http://www.alsacreations.com/article...-document.html
Sur l'utilisation des tags de structure <section>, <article>, <nav>, <header>, <footer>,
<aside>
• http://www.alsacreations.com/article...ter-aside.html
• A lire pour ceux qui se sentent coupables d'utiliser des <div> : http://coding.smashingmagazine.com/
2...emantic-value/
Sur l'utilisation des éléments <details> et <summary>
• http://www.alsacreations.com/article...s-summary.html, démo (chrome 12 au moins) :
http://www.alsacreations.com/xmedia/...ary/demo1.html
Sur l'élément <datalist>
• http://www.alsacreations.com/article...-datalist.html
Sur l'élément <mark> pour attirer l'attention
• http://www.alsacreations.com/astuce/...ment-mark.html
Sur l'élément <time>
• http://www.brucelawson.co.uk/2012/best-of-time/
Sur l'utilisation du Canvas
• Un tutorial interactif (on peut modifier le code dans la page et le tester) sur "comment écrire un
casse-briques en 2mns", montre comment débuter avec l'API de dessin, dessiner un cercle, etc. :
http://billmill.org/static/canvastutorial/index.html
• Trucs et astuces pour l'animation dans un Canvas, très impressionnant :
http://www.htmlfivewow.com
• http://diveinto.html5doctor.com/canvas.html : les principes de base du canvas, tutorial pour
commencer !
• http://dev.opera.com/articles/view/html5-canvas-painting/ : un tutorial pour écrire un petit
programme de type paint,
• http://mugtug.com/sketchpad/ : un très beau paint codé en html5,
• https://developer.mozilla.org/en/canvas_tutorial : tutorials canvas sur le site de mozilla,
3
• http://www.canvasdemos.com/ : plein de démos de ce que l'on peut faire avec le widget canvas,
• Une idée de GUI pour un HTML5 pictionary : http://www.allicarn.com/websites.php?page=6
• Un paint complet en html 5, qui enregistre les événements de dessin : http://www.w3.org/2010/
Talks/0430-www2010-plh/canvasdemo.xhtml
• Une présentation de HTML5 par Philippe Le Hegaret du W3C. Contient un exemple d'application
"paint" en HTML5/Canvas avec détection de tous les évènements
• http://www.w3.org/2010/Talks/0430-www2010-plh/
• Un joli exemple de dessin rapide avec du motion blur (20 lignes) :
http://html5demo.braincracking.org/news/canvas.php
• Plugin HTML5 pour adobe illustrator : http://visitmix.com/labs/ai2canvas/
• Joli exemple de "mindmaps" wikipedia à l'aide d'un canvas : http://en.inforapid.org/
• Un paint "procédural" qui fonctionne bien aussi sur mobile. Utilise processing.js :
http://mrdoob.com/projects/harmony/
Pour les plus curieux et pour ceux qui ont fait du processing en Licence, une version 100%
HTML5+Javascript existe : http://processingjs.org/ les démos sont assez impressionnantes. Utilise les
canvas HTML5. Plus haut niveau que travailler ejn JS + Canvas, autre avantage : le code processing
classique est facilement portable.
SVG et HTML5
• Talk sur SVG et HTML 5 : http://www.w3.org/2010/Talks/04-sche...010/index.html
• Tutorial sur comment personnaliser un lecteur vidéo en HTML5 + widgets en SVG
: http://www.w3.org/2010/04/VideoLiveC...gSession.xhtml
Orientation
• Démos qui utilisent les WebSockets pour montrer comment on peut interagir entre plusieurs clients
via des websockets + l'api d'orientation : video ici : http://www.youtube.com/watch?v=x2T4BJwPRnQ
et source code ici : https://github.com/trygve-lie/demos-html5-realtime Ces démos utilisent le
serveur NodeJS pour les WebSockets, le même que nous utilisons en TP.
Géolocalisation
• http://www.alsacreations.com/tuto/li...ion-html5.html
• http://debray-jerome.developpez.com/...tion-en-html5/
• Le vocabulaire microdata pour annoter la longitude et la latitude : http://www.data-vocabulary.org/
Geo/ voir exemples d'utilisation à la fin de : http://diveintohtml5.org/extensibility.html
4
Audio
•
•
•
•
•
http://www.html5trends.com/tutorials...-simple-steps/
Karaoke en HTML5 ! http://randallagordon.com/blog/2009/...udio-tag-demo/
Comment gérer des playlists : http://stackoverflow.com/questions/2...audio-playlist
Crossfading entre deux chansons : http://www.reddit.com/r/javascript/c...e_html5_audio/
Sound API : comment générer des sons, comment les analyser (avec un vumètre qui danse en
musique), etc http://www.htmlfivewow.com fonctionne dans le dernier Chrome pour le moment.
Vidéo
• Le tag video et l'ipad : http://blog.millermedeiros.com/html5...to-solve-them/
• Un blog dédié au tag vidéo de HTML5 : http://blog.gingertech.net/, on trouve de nombreux
tutoriaux, notamment : http://blog.gingertech.net/2010/02/1...r-html5-video/
• Webinar sur les tags vidéo et audio : http://people.opera.com/philipj/2010...video-webinar/
• A propos du support HTML5 de youtube et dailymotion : http://blog.mozilla.com/blog/2009/05/27/
dailymotion-supports-open-video/ et http://youtube-global.blogspot.com/2010/01/introducingyoutube-html5-supported.html, aussi pour vimeo :
• Le lecteur VideoJS qui permet de lire des vidéos via HTML5 mais qui a un mécanisme de fallback vers
flash dans le cas où HTML5 <video> n'est pas supporté : http://videojs.com/
File API
• Superbe présentation, propose une section sur la File API, notamment une démo avec une fenêtre de
commande en HTML5 proche d'un terminal unix. On peut exécuter les commandes ls, pwd, mkdir,
cat, wget, etc. sur le filesystem sandbow proposé par l'API HTML5. On peut même visualiser le
filesystem en 3D ! http://www.htmlfivewow.com
Web Storage
L'API web storage fonctionne à la manière des cookies mais avec plus de confort. On peut stocker de
manière durable ou pas des paires de clé/valeurs (soit dans la "session", soit de manière durable).
• http://debray-jerome.developpez.com/...rage-en-html5/
• http://marakana.com/forums/html5/general/203.html
Indexed DB
C'est l'API que pousse en avant le W3C à la place de Web SQL, pour le moment.
• Un blog qui contient d'excellents posts/tutoriaux sur IndexedDB : http://www.kristofdegrave.be/
• Un tutorial : http://www.html5rocks.com/tutorials/indexeddb/todo/,
• Matrice qui montre les browsers qui supportent IndexedDB : http://caniuse.com/indexeddb
5
• Comparaison du support dans IE, Chrome et Firefox : http://blog.nparashuram.com/2011/01/
comparing-indexeddb-on-firefox-chrome.html, pour le moment ce n'est pas supporté de manière
uniforme.
Web SQL Database (pas officiellement partie de HTML5 mais quand même...)
Note : le W3C ne maintient plus cette API et n'incite plus les browsers à la supporter. Néanmoins elle
est disponible dans tous les browsers basés sur WebKit (Opera, Chrome, Safari, etc). La raison est que
tous les browsers qui la supportaient utilisaient toujours la même BD (Sqlite), et qu'il en faut plusieurs
pour valider une spécification. Web SQL n'est pas abandonnée mais mise en standby tant que des
solutions de validation sérieuses ne sont pas proposées.
• Tutorial : http://html5doctor.com/introducing-web-sql-databases/ et ici :
http://www.tutorialspoint.com/html5/html5_web_sql.htm
• http://marakana.com/forums/html5/general/208.html
• Superbe exemple qui montre en quelques lignes comment récupérer les 100 derniers tweets parus
sur tweeter et les stocke dans la BD SQL du navigateur : http://rem.im/html5-tweet-time-range.html
WebWorkers
• Un article d'introduction : http://blogs.msdn.com/b/davrous/arch...avascript.aspx
• http://blog.sethladd.com/2011/09/box...avascript.html : Box2D la librairie physique utilisée par
Angry Birds + utilisation des WebWorkers
Web Sockets
Note : depuis décembre 2010 le support pour les web sockets a été momentanément retiré de Opera et
de Firefox, pour des raisons de sécurité : http://hacks.mozilla.org/2010/12/websockets-disabled-infirefox-4/, La raison vient d'un trou de sécurité dans les proxies, pas de l'api ou du protocole lui-même.
Pour le moment seul Chrome continue à les supporter. Plus d'infos ici : http://hacks.mozilla.org/2010/
12/web...-in-firefox-4/
• INFO au 18/02/2011 : Chrome supporte les websockets, et firefox 4 aussi, mais pour les activer, suivre
ces informations : http://techdows.com/2010/12/turn-on-websockets-in-firefox-4.html
• Pour tester sur Android, voici une version de Fennec (nom de firefox pour android), compilée avec le
support pour les webSockets : http://chemicaloliver.net/programming/websocket-support-onandroid-using-fennec/#more-790
Liste des navigateurs supportant l'API des Web Sockets :
• http://jwebsocket.org/index.htm?page=browsers.htm
6
Serveurs permettant d'implanter des web sockets :
• http://kaazing.com/download.html (commercial, mais ok pour développer, limite le nb de
connexions à 50)
• http://jwebsocket.org/ : serveur complet en java, supporte les websockets,
• http://www.jboss.org/netty : un nio server par jboss,
• http://xlightweb.sourceforge.net : encore un serveur lightweight qui supporte les web sockets
• Jetty 7.0 supporte les web sockets
• http://nodejs.org : node.js est un mini serveur écrit en python, qui intègre l'interpréteur javascript
V8 (celui qui est dans Chrome), il permet d'écrire des applications web côté serveur, en javascript (du
coup, lorsqu'on transfère des objets javascript entre client et serveur : c'est facile ! Il existe plusieurs
implémentations des WebSockets pour ce serveur. Notamment celle-ci que nous avons testée avec
succès : https://github.com/miksago/node-websocket-server. Voir le TP2 de ce cours pour la mise en
oeuvre.
Il existe aussi une librairie socketio qui supporte plusieurs modes de transport (dont les web sockets).
On trouve des implémentations pour le serveur node.js, on en trouve en java (ici avec un serveur Jetty
embarqué : http://code.google.com/p/socketio-java/)
Librairie javascript implémentant les webSockets si le navigateur ne le supporte pas :
Il s'agit de la librairie web-socket-js. Incluez ce fichier dans uneapplication et vous aurez un support
comme si l'API était supportée nativement par le navigateur. Il parait que cela fonctionne très bien.
Jeux
• Super présentation (en HTML5) sur l'écriture d'un jeu en HTML5 par Google :
http://io-2011-html5-games-hr.appspot.com/#1, contient de nombreux trucs et astuces + liens super
intéressants pour celui qui veut écrire un jeu en HTML5.
• Un article sur comment écrire des jeux en HTML5 : html5gamedev.blogspot.com/2011/07/how-tomake-html5-game.html
• Un petit jeux mario kart : http://thelab.thingsinjars.<wbr/>com/CSSKart/
• Command and Conquer en HTML5 : http://blog.nowjs.com/running-nowjs-natively-on-windows lire
aussi le blog de l'auteur : http://www.adityaravishankar.com/201...nd-javascript/
• Un jeux de labyrinthe en webGL : http://www.spacegoo.com/<wbr/>maze/ (pour les détail
: http://www.canvasdemos.com/<wbr/>2011/07/27/webgl-maze/)
• Angrybird officiel codé en pur HTML5 : http://chrome.angrybirds.<wbr/>com/
• http://www.kesiev.com/akihabara/ : une librairie pour écrire des jeux 100% HTML5. Nombreux jeux
en exemple (pacman, shoot em up etc), impressionnant !
• http://blog.templatemonster.com/2010...ultimate-list/
7
• Le blog HTML5 gamers contient de nombreux articles et liens intéressants : http://html5gamer.com/
• Box2DJS : portage de la très populaire librairie Box2D (moteur physique) en js/html5 : http://box2djs.sourceforge.net/index2.html et ici un excellent article sur Box2D JS + WebWorkers :
http://blog.sethladd.com/2011/09/box...avascript.html et ici un autre article qui montre quelques
bonnes pratiques avec Box2D JS : http://blog.sethladd.com/2011/09/box...-rate-for.html
• Tutorial : animation de sprites dans un cavas HTML5 avec la librairie easeJS : http://blogs.msdn.com/
b/davrous/arch...4-easeljs.aspx
• La librairie MelonJS pour faire des jeux 2D type plateforme : http://videojs.com/ (marche sous tous
les navigateurs récents)
• La librairie ImpactJS (payante) : http://impactjs.com/ et ce benchmark pour voir les performances de
votre setup ordinateur/carte graphique/navigateur sur un jeu 2D : http://html5-benchmark.com/
• Petit moteur 3D léger et téléchargeable pour faire des effets 3D dans un Canvas sans utiliser WebGL :
http://www.kevs3d.co.uk/dev/index.html (voir en bas de la page le moteur K3D), ici un article qui
montre comment mettre un logo animé en 3D avec ce moteur dans une page web :
http://blogs.msdn.com/b/davrous/arch...canvas-gt.aspx
• Un article qui recense les différentes libs JS pour faire des jeux :
http://www.rivellomultimediaconsulting.com/tag/html5/
CSS3 et HTML5
• Introduction aux transitions en CSS3 : http://blogs.msdn.com/b/eternalcodin...ansitions.aspx
• Introduction aux animations en CSS3 : http://blogs.msdn.com/b/davrous/arch...nimations.aspx
• Tutorial CSS3 animations sur le site des développeurs de Mozilla : https://developer.mozilla.org/en/
CSS/CSS_animations
• Une excellente série d'articles sur les animations, transitions et transformations CSS3
: http://css3.bradshawenterprises.com/transitions/
• Un magnifique générateur de dégradés, effets de textes etc. en CSS3, on touille l'interface et on
copie/colle les lignes pour le fichier CSS : http://westciv.com/tools/gradientsnustyle/
• http://www.alsacreations.com/astuce/...ment-mark.html : jQuery transit : animations avec jquery et
css3
• http://debray-jerome.developpez.com/ : nombreux articles en français sur des points de CSS3
• Un exemple de "menu en pétale de fleur" animé avec des transformations géométriques et des
transitions : http://deptinfo.unice.fr/~renevier/c...xoCss3-q7.html
SVG et HTML5
• RaphaelJS : une librairie JS pour faire du SVG
Tags sémantiques de HTML5
• http://coding.smashingmagazine.com/2...ml5-semantics/ : à propos de la sémantique en général
dans HTML5. Parle des tags de structuration mais aussi des microdata.
• Pocket référence des tags sémantiques : http://adactio.com/extras/pocketbooks/html5/
• HTML5 microdata overview : http://www.sencha.com/blog/the-html5...data-overview/
8
• Un exemple de page annotée avec des microdatas : celle de Mark Pilgrim
: http://diveinto.html5doctor.com/examples/person-plus-microdata.html, auteur d'un livre sur
HTML5.
• Le chapitre du livre de Mark Pilgrim sur l'extensibilité de HTML5 (entre autres sur les tags
sémantiques) : http://diveinto.html5doctor.com/extensibility.html
• Pointeur vers quelques vocabulaires standards pour les microdatas (couvrent personnes,
événements, reviews, organisations, etc) : http://www.data-vocabulary.org/
• The microdata DOM API de HTML5 : http://www.whatwg.org/specs/web-apps...rodata-dom-api.
L'API sémantique de HTML5 ne marche aujourd'hui que dans la dernière version d'Opera.
• Google supporte les microdatas, RDFa et les microformats dans son programme "Rich Snipplets" :
http://www.google.com/support/webmas...n&answer=99170 On peut même tester un site web
contenant du RDFa, des microformats ou des microdatas pour voir comment Google le "voit" :
http://www.google.com/webmasters/tools/richsnippets Essayez avec la page
: http://diveinto.html5doctor.com/examples/person-plus-microdata.html
• Un outil interactif, le "live microdata playground" permettant de coller du html annoté par des
microdatas et de les valider, les extraires en JSON, etc : http://foolip.org/microdatajs/live/
Pour démarrer html5, frameworks clés en main
Il existe des "packages" clé en main qui proposent des CSS, des scripts, des templates HTML5 prêts à
l'emploi, parfois assurant la compatibilité avec des navigateurs plus anciens, etc. Souvent ces packages
viennent avec des scripts jQuery, etc et n'utilisent pas encore toutes les possibilités de HTML5.
• http://www.presse-citron.net/leweb11...tion-en-html-5 : bons outils pour démarrer une application
html5.
• HTML5 quickstart : http://www.99lime.com/
• http://www.modernizr.com/ : permet de faire du code HTML5/JS qui marche même dans les vieux
browsers (qui ne supportent pas tout html5), ce framework détecte le non support de certains tags
html5 et il les remplace par une autre solution... Par exemple, si les websockets ne sont pas
supportés, il va implémenter la même chose en ajax... C'est un peu l'équivalent des frameworks ajax/
js comme JQuery/Dojo, mais pour la partie html5/css3. Permet de développer plus vite sans se
soucier autant des problèmes de compatibilité.
• http://www.initializr.com/ : générateur de templates HTML5.
• http://html5boilerplate.com/
Livres sur HTML5
• http://www.amazon.com/Introducing-HT...7147501&sr=8-1
Editeur HTML5/CSS3
• Netbeans supporte très bien la syntaxe html5 et la syntaxe javascript. Indentation automatique, autocomplétion, etc. Je suppose que Eclipse sait le faire aussi...
9
• http://bluegriffon.org/post/2011/01/...Griffon-0.9RC1 : Editeur WYSIWYG HTML5/CSS3 BlueGriffon,
utilise le moteur de rendu de firefox pour éditer/previewer en HTML5 et en CSS3. Support pour les
modes ARIA (accessibilité).
• Pour le support HTML5 dans emacs/xemacs : https://github.com/hober/html5-el, il faut un peu de
settings emacslisp...
• Ultraedit pour windows supporte html5 et javascript...
• http://www.aptana.com/downloads/start : cet éditeur, basé sur le framework Eclipse est parait-il
très bien pour faire du html/javascript. Sorte de MyEclipse boosté spécial web (debugger js intégré,
éditeur css3 etc)
• Les outils portables multi-plateformes WebStorm ou PhpStorm, les outils de la société JetBrains.com
(qui est célèbre pour faire le meilleur IDE Java loin devant Eclipse et Netbeans, le réputé IDEA)
Outils pour débugger du javascript, tester les APIs HTML5
• Trial Tool : ici avec un exemple de test de l'API IndexedDB : http://nparashuram.com/trialtool/
ind...xedDB/all.html, on peut créer ses propres exemples et les partager.
• Jsfiddle.net : un IDE pour tester des APIS javascript interactivement,
• jsbin.com : un IDE javascript collaboratif
HTML 5 pour les mobiles
• http://html5boilerplate.com/mobile : le html5boiler plate pour mobiles
• Comment faire une application qui marche sur portable, tablettes et ordinateur : utiliser les Media
Queries de CSS3/HTML5 : http://dev.opera.com/articles/view/l...port-and-more/
• Sencha Touch : librairie js pour HTML5/mobile : http://www.sencha.com/products/touch/
• Dojo Toolkit supporte les mobiles : http://dojotoolkit.com (fait par google)
• Standards for Web Applications on Mobile (page du W3C) : http://www.w3.org/2011/02/mobile-webapp-state.html
• Un tutorial qui montre comment coder un paint pour iphone/ipad (testé aussi sur android).
Intéressant, car met en oeuvre des events javascript propres aux mobiles comme ontouchstart,
ongesturestart, etc : http://htmlpad.wordpress.com/
• Il existe sur le web un cdrom plein de vidéos qui montre comment développer en html5 + css3 sur
iphone. Chercher "Lynda.com.iOS.4.Web.Applications.with.HTML5.and.CSS3" sur google.
Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/
Option_web_2.0_Master_1_informatique_2011/HTML5"
10