Option Web 2.0 Master 1 Info/Miage/MBDS 2011-2012

Introduction

Ce cours a servi de base pour le tutorial HTML5 que Michel Buffa donné à la conférence WWW 2012. Vous êtes invités à le consulter car il contient de nombreux exemples interactifs + une correction complète et mise à jour du logiciel de dessin multi-participants qui fait l'objet de TP ici.

Dans ce cours nous allons aborder HTML5 et approfondir certaines des APIs javascript qui vont avec, notamment l'API WebSockets ou l'API de persistence. Ce cours aborde également une approche assez à la mode depuis peu : l'utilisation de micro-serveurs web, ultra-légers et très performants pour des tâches ou des applications spécialisées. Nous allons utiliser en fil rouge (dès le TP2) le serveur NodeJS, très performant, qui fait aussi bien serveur HTTP que serveur de WebSockets. Originalité de ce serveur : il est écrit en Python, il embarque l'interpréteur JavaScript V8 de Google, et les applications que vous écrirez côté serveur sont 100% en JavaScript. Nous joeurons également avec des applications multi-terminaux (smartphone + tablette + desktop) et examinerons les points à aborder pour faire des interfaces web qui s'adaptent au terminaux, à l'aide notamment des "Media Queries" de HTML5.

Oui, vous l'avez compris, JavaScript est le langage de HTML5 (qui vient accompagné d'un grand nombres d'APIs JavaScript), mais pas que côté client/navigateur.

Après le TP2 nous vous orienterons vers l'écriture d'applications multi-participants exploitant la notion d'objets JavaScript distribués. Le domaine d'application le plus évident est le jeu vidéo mais cela peut aussi concerner des applications plus "sérieuses" comme de l'édition de document synchrone par plusieurs participants en simultané, le développement de code à plusieurs, etc. Un des sujets de TER concerne un wiki synchrone permettant d'éditer des documents mais aussi du code, il s'agit d'une application directe de ces concepts.

Il n'y aura pas d'examen dans cette matière mais un mini projet à faire en binôme. Nous proposerons plusieurs sujets afin que tout le monde ait l'occasion de prendre un projet à la mesure de ses compétences ou de son ambition.

Ressources

• Pendant le cours, des extraits d'autres présentations ainsi que des démonstrations ont été tirées de la page sur les ressources HTML5 que je vous ai préparée. Si vous trouvez des sites intéressants qui mériteraient de figurer dans cette page, prévenez votre enseignant principal.

Supports de cours

• Supports de cours HTML5 utilisés en cours : http://slides.html5rocks.com/ , http://www.w3.org/2010/Talks/0430-www2010-plh/,  http://www.htmlfivewow.com, et peut être que

Travaux pratiques

• TP 1 sur HTML5 : écriture d'un programme de dessin en HTML5/JavaScript.
• TP 2 sur HTML 5 : ajout de l'aspect multi-participants à l'aide des WebSockets et utilisation du serveur nodeJS + de librairies pour les web sockets.