TP Plasticité des IHMs / HTML5

Introduction

Supports de cours utilisés :

• Transparents HTML5 de présentation de Michel Buffa pour la conférence WWW 2012: http://mainline.essi.fr/HTML5slides/index.html#1 contiennent des exemples interactifs.
• Cours HTML5 powerpoint au format PDF, contient des sections sur CSS3 et sur le support pour devices mobiles,
• Cours JavaScript de Michel Buffa: http://mainline.essi.fr/JavaScriptSlides/index.html

Références / tutoriaux disponibles :

• Nombreux liens sur la page des ressources HTML5 que je vous ai préparée : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Option_web_2.0_Master_1_informatique_2011/HTML5 cette page contient de nombreux liens vers des sites webs sur HTML5, classés par catégories.
• Le site HTML5rocks, une grosse référence, très orientée Google Chrome : http://www.html5rocks.com/en/ contient notamment des tutoriaux sur "mobifying your web site", voir http://www.html5rocks.com/en/mobile/mobifying/
• Le cours HTML5 de w3schools.com : http://www.html5rocks.com/en/mobile/mobifying/
• Il existe aussi de nombreux tutoriaux dédiés au HTML5 canvas, aux formulaires, etc, vous trouverez leurs références à côté des exemples étudiés pendant le TP.

Dans ce TP vous allez prendre contact avec HTML5 au travers de nombreux exemples interactifs, ce qui vous occupera une quarantaine de minutes. Prenez le temps de modifier le code source qui vous est proposé, de consulter les cours qui se réfèrent aux différentes parties, sur w3schools.com par exemple, etc. Certains exemples sont à tester sur téléphone ou tablettes. Par la suite, vous allez suivre un tutorial qui va vous emmener à construire petit à petit un logiciel de dessin interactif. Là aussi, l'exercice est sur le mode tutorial, donc il n'y a pas besoin d'être un spécialiste de JavaScript pour y arriver. Vous serez alors amené à tester ce logiciel sur une tablette et à le comparer avec un autre logiciel de ce type, mais qui a été adapté pour fonctionner sur téléphone/tablette. Enfin, vous jouerez avec du code permettant de gérer souris/molette/clavier/gestures de manière multimodale. 

Premier travail : perdez un peu de temps à découvrir les ressources web proposées

Allez, passez un peu de temps à parcourir les ressources proposées comme références dans l'introduction ci-dessus. Notammenent, la page http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Option_web_2.0_Master_1_informatique_2011/HTML5 contient des liens vers de nombreux sites de référence. 

Prise de contact HTML5 au travers d'exemples interactifs  

Vous allez suivre maintenant tutorial HTML5 qui a été présenté à la conférence WWW2012 en Avril dernier : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial mais vous vous cantonnerez à la partie "discovery path" qui se compose d'exemples interactifs thématiques. lorsqu'un exemple vous parle, n'hésitez pas à passer du temps dessus, à modifier le code, à regarder dans les chapitres des supports de cours proposés pour obtenir plus d'informations, etc.

Découverte pas à pas d'un programme de dessin interactif

Suivez les étapes 1 à 6 de la partie "geek path" du tutorial précédent. Voici un lien direct : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/Tutorial_WWW_2012

Vous vous arrêterez à la partie "intégrer un chat", etc. Vous ne ferez pas l'aspect multi-participants dans ce TP.

Test sur device mobile d'un paint "adapté" à de tels devices

Paint testable sur : http://sophie.buffa.free.fr/paintRol, archive disponible sur : http://sophie.buffa.free.fr/paintRol...tMobileRol.zip

Ce paint, réalisé par une étudiante de l'année dernière (Elsa Rol) ne fonctionne que pour smartphone/tablette (ipad, ipod, android...) et utilise le framework  jquery mobile qui est optimisé pour ce type de plateforme (cache automatiquement la barre d'url...). Il a permis également de régler un problème de listener sur les boutons qui ne marchait qu'une fois sur 2 avec les listeners de jquery (listener du canvas prenant le dessus). Le canvas est mono-touch. Le redimensionnement du canvas est effectué à chaque changement d'orientation, la largeur étant la même que celle de l'appareil, la hauteur est égal à la largeur en mode portrait et la moitié de la hauteur de l'appareil en mode paysage.

La taille de la zone couleur et bouton/listes déroulante est fixe, seul les marges dépendent de la taille de l'appareil.

Regardez tout d'abord le code source, notamment le fichier fonctionsMibile.js, le tag <meta> dans index.html.