Ressources HTML5

De $1

Introduction

Ressources HTML5

Les docs de référence et les quickrefs sur une page

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

Sites intéressants généraux sur HTML5

Tutoriaux spécialisés

Structure globale d'un document HTML5

Sur l'utilisation des tags de structure <section>, <article>, <nav>, <header>, <footer>, <aside>

Sur l'utilisation des éléments <details> et <summary>

Sur l'élément <mark> pour attirer l'attention

Sur l'utilisation du Canvas

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

Orientation

Géolocalisation

Audio

Vidéo

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).

Indexed DB

C'est l'API que pousse en avant le W3C à la place de Web SQL, pour le moment.

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.

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/

Liste des navigateurs supportant l'API des Web Sockets :

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

CSS3 et HTML5

SVG et HTML5

  • RaphaelJS : une librairie JS pour faire du SVG

Tags sémantiques de HTML5

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/

Editeur HTML5/CSS3

  • Netbeans supporte très bien la syntaxe html5 et la syntaxe javascript. Indentation automatique, auto-complétion, etc. Je suppose que Eclipse sait le faire aussi...
  • 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