Cours HTML5 CityWay

HTML5 / CSS3

Supports de cours :

• Support Powerpoint / PDF utilisé en cours
• Présentation HTML5 de Michel Buffa utilisé en cours (transparents HTML5 présentés à WWW 2012), contiennent des démonstrations supplémentaires.
• Présentation HTML5 du site html5rocks.com

Exemples interactifs utilisé en cours :

• Page du "discovery path" présenté à WWW 2012, à laquelle ont été rajoutés de nombreux exemples au fil de l'eau.

Exercices à faire pendant le cours

• Ici une page regroupe un ensemble d'exercices sur les formulaires, la géolocalisation, le dessin, etc.
• Ici une page d'exercices mettant en jeu l'API d'orientation et de géolocalisation + diffusion par web sockets entre tablettes et pc.
• Ici une page d'exercice sur les gestures et problèmes liés à l'écriture d'application pouvant fonctionner à la fois sur tablette/smartphone et desktop. Comment gérer dans une même application des entrées tactiles et à la souris ? Comment adapter la GUI ?
  • Exemple interactif qui montre comment gérer à la fois des evenements souris et touch avec une meme application -> en émulant la souris à partir de touch events. Exemple ici : http://jsbin.com/ividad/5/edit 

Concernant les WebSockets

• Paint multiparticipant qu'on a utilisé : 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)
• Sites webs: nowjs.org, socket.io, http://web.archive.org/web/201107142...p://nowjs.com/, meteor.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)