HTML5 pour la L3 Pro (2013)

Pages récentes

Séance 1: présentation de HTML5 en 3h. Etude d'exemples interactifs.

Pendant cette séance nous avons survolé HTML5 et présenté rapidement à l'aide de démonstrations et d'exemples ses principales caractéristiques.

Ressources utilisées en cours:

Transparents: http://slides.html5rocks.com/ et aussi ceux du tutorial que M.Buffa a présenté à la conférence WWW 2012.
Exemples interactifs: http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial

Autres cours intéressants pour vous:

JavaScript/jQuery

Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery : http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie.
La page officielle avec la doc de jQuery (exemples interactifs) : http://api.jquery.com/

CSS

Cours de Philippe Renevier donné en Licence 3 à l'université de Nice :
- CSS2 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-2.pdf et les exemples ici : http://deptinfo.unice.fr/~renevier/L1/css/exemple
- CSS3 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-3.pdf
- Aussi, les principales nouveautés de CSS3 sont présentées dans le powerpoint HTML5 de Michel Buffa, voir avec lui. Contient de très nombreux exemples.
Exemples interactifs très utiles pour comprendre : Exemples interactifs CSS
Cours CSS de w3schools.com : http://www.w3schools.com/css/default.asp
Présentations des nouveautés de CSS3 : http://slides.html5rocks.com et pour les choses à venir mais encore très émergentes, présentation CSS3 à la conférence WWW2012 : http://www.w3.org/Talks/2012/0416-CSS-WWW2012/

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

Ici l'exemple interactif : http://jsbin.com/ixowoc/5/edit#html,live

Ressources externes diverses

Dernière version de la spécification HTML5.1 : http://www.w3.org/TR/html51/ (si une version plus récente apparait, il y aura un lien en haut de la page)
http://www.html5rocks.com/en/ : un des principaux sites de référence sur HTML
http://caniuse.com/ : pour savoir quelles features de html5 sont implémentées sur les divers navigateurs
http://w3schools.com/ : un site pour apprendre les technos web, pas toujours conformes aux bonnes pratiques mais intéressant.
Page de ressources HTML5 compilée par Michel Buffa (pas forcément à jour)

Démos montrées en cours:

Paint multiparticipants : http://paint.gexsoft.com/ et tutorial complet sur http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/Tutorial_WWW_2012
Jeu de foot avec web sockets : http://dl.madjawa.net:8081/ (sources dispos sur la page)

Séance 2: étude des WebSockets et du canvas HTML5

Nous préparons le terrain pour un jeu multi-participants utilisant les Web Sockets.

Le cours détaille le canvas de HTML5 et l'utilisation des web sockets. Le support de cours PDF est à venir.

Ressources externes

Sites webs pour les web sockets et NodeJS: nowjs.org, socket.io, http://web.archive.org/web/201107142...p://nowjs.com/, meteor.com

http://www.html5canvastutorials.com/

Exemples utilisant le canvas sur : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial

TP: ecriture d'un logiciel de chat, étude d'un paint multi-participants

TP WebSockets: écriture d'un programme de chat en HTML5

Séance 3: On commence à écrire un petit jeu en mono participant

Le jeu est très simple: dans un canvas on dirige à la souris (ou avec les flèches du clavier) un joueur représenté pour le moment par un carré noir. Dans le canvas il y a des obstacles rectangulaires qu'il faut éviter et une cible circulaire qu'il faut atteindre. C'est un jeu de course. Lorsque le jeu sera multi-participants, c'est le premier qui atteint la cible qui gagne et on passe au niveau suivant, avec une configuration et des obstacles différents. Peut-être aussi avec des ennemis à éviter qui peuvent vous tuer avant d'atteindre la cible.

On fournit ici un squelette JavaScript (en mode mono joueur) très incomplet, mais qui possède les fonctionalités de base: http://jsbin.com/acohiv/8/edit

Regardez ce code. Il contient des fonctions de detection de collision entre rectangles, et entre un rectangle et un cercle, qui sont utilisées pour tester si un joueur a buté sur un obstacle ou s'il a atteint la cible. Bougez le joueur a la souris et regardez les couleurs qui changent en fonction des collisions.

Il y a encore beaucoup de travail sur ce petit squelette. On aimerait ne pas avoir les obstacles codés en dur, mais une liste d'obstacles. On voudrait tester les collisions non pas avec un mais avec plusieurs obstacles, et aussi tester pour tous plusieurs joueurs (donc, gérer les joueurs dans un tableau ou une liste). On voudrait avoir plusieurs niveaux, soit aléatoires (plus dur) soit prédéfinis. On voudrait un score, un timer 1-2-3 partez, etc.

Il faut probablement une boucle d'animation (voir la partie HTML5 sur requestAnimationFrame pour faire une véritable animation), de la musique, etc.

Travail à faire:

Pendant deux heures: vous approprier ce petit squelette, commencez à en faire un jeu.
Dernière heure: branchez le chat dessus et essayez de transmettre la position du joueur aux autres joueurs.
On a opté pour un design "minimal côté serveur" cette fois ci...