Ressources HTML5

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

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'utilisation du Canvas

• 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,
• 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 
• Un tutorial interactif (on peut modifier le code dans la page et le tester) sur "comment écrire un casse-briques en 2mns" : http://billmill.org/static/canvastutorial/index.html 
• 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

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

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/

Vidéo

• 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/introducing-youtube-html5-supported.html, aussi pour vimeo :

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 tutorial : http://www.html5rocks.com/tutorials/indexeddb/todo/,
• Matrice qui montre les browsers qui supportent IndexedDB : http://caniuse.com/indexeddb
• 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

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-in-firefox-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-on-android-using-fennec/#more-790

Liste des navigateurs supportant l'API des Web Sockets :

• http://jwebsocket.org/index.htm?page=browsers.htm

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

• 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/
• 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://box2d-js.sourceforge.net/index2.html
• Tutorial : animation de sprites dans un cavas HTML5 avec la librairie easeJS : http://blogs.msdn.com/b/davrous/arch...4-easeljs.aspx

CSS3 et HTML5

• 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

SVG et HTML5

• RaphaelJS : une librairie JS pour faire du SVG

Tags sémantiques de HTML5

• 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/
• 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 En février 2011 aucun navigateur ne supportait encore cette API (mais ça va venir !)
• 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/