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⁶⁰
• 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,
• 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⁸⁹

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/introducing-youtube-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¹⁰⁷
• 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-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

• 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-to-make-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/¹³⁶
• 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¹³⁸ 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/¹⁵⁸
• 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/¹⁶⁶