TP Plasticité des IHMs / HTML5

De $1

Introduction

Supports de cours utilisés :

Objectif  du cours : prise de contact avec HTML5, réalisation d'un programme de dessin "universel" (mobiles + desktop)

  • 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. 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 Ressources 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 le tutorial HTML5 qui a été présenté à la conférence  WWW2013 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.

Gestures à deux doigts portables android/IOS ?

Si vous testez l'exemple de pinch and rotate/gestures à deux doigts disponible dans les exemples que vous venez de tester, vous verrez qu'il ne fonctionne pas en dehors des devices IOS. En effet, ce sont les seuls à gérer les événements gesturestart, gestureend, etc. 

Il existe des solutions pour avoir une gestion des touch events compatibles à la fois android et IOS. Nous avons déjà vu jquery mobile, mais celle-ci ne prend pas en compte les gestures à deux doigts. Une minuscule librairie (4k) adresse ce problème : la librairie hammer.js : http://eightmedia.github.com/hammer.js/ téléchargez là et tester les exemples sur une tablette et aussi sur un desktop.

Testez donc la démo sur le site : http://svgeditor.cameleons-dev.com/s...uery.demo.html

Testez donc cette démo à la souris, essayes clic, drag, clic long, clic droit, roulette. Testez aussi sur ipad. Alors ?

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

Testez ce logiciel de dessin : http://paint.gexsoft.com/paint.html. Il s'agit d'un paint multiparticipant utilisant les HTML5 Web Sockets. Nous ne nous intéresserons pas à la partie multi cette fois-ci, juste à la partie dessin. Jouez avec et regardez un peu les fonctionalités.

Le tutorial:  http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_tutorial_for_WWW_2013/HTML5_tutorial_for_WWW_2013%3a_study_a_paint_program détaille ce logiciel et explique comment le refaire pas à pas. Ce n'est pas la peine pour le moment de faire le tutoriel en détails, juste avoir une idée de la manière dont il a été conçu.

Vous avez testé sur une tablette (ne parlons pas d'un smartphone) ? Pas terrible...

Test sur device mobile de programmes de paint "adaptés" à de tels devices

Premier exemple : un paint porté "à la main" sur tactile

Il s'agit d'un essai de portage d'un programme de paint très simple réalisé par des étudiants de l'année dernière. Ce paint est testable sur tablette/smartphone à cette adresse : http://sophie.buffa.free.fr/paintTedjani et l'archive du projet (contenant un readme avec des explications) est disponible ici : http://sophie.buffa.free.fr/paintTed...intTactile.zip

Regardez le source, testez le logiciel. Si on passe du mode portrait au mode paysage que se passe-t-il ? Oui, décidément, cette version est encore très incomplète !

Second exemple plus réactif

Paint testable (avec un téléphone ou une tablette) 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 fonctionsMobile.js, le tag <meta> dans index.html.

Alors, essayez de le modifier pour qu'il détecte la taille du device sur lequel on est et que la hauteur utilise mieux la hauteur de l'écran des tablettes.

Et que se passe-t-il lorsqu'on le teste depuis un Desktop ? Ah, ça ne marche pas !!! Nous n'avons pas affaire à une interface multi-modale !

Test/etude d'éléments d'une interface multi-modale en HTML/CSS/JavaScript

Testez donc ces boutons sur un desktop (click, drag, molette), et aussi sur un device tactile (touch touchdrag, double tap, appui long) : http://svgeditor.cameleons-dev.com/s.../testdrag.html

Vous pouvez récupérer l'archive sur : http://svgeditor.cameleons-dev.com/s.../draginput.zip

La gestion du drag aux doigts/souris vient d'un plugin jquery ad hoc intulé "draginput.js". Essayez d'en deviner le principe (une bonne connaissance de JavaScript/jQuery est préférable).

Regardez le source de index.html et aussi essayez de comprendre les interactions entre les différentes parties. Ces boutons ont été extraits/adaptés/repris d'une autre version "transformée" de l'open source svg-edit, celle disponible ici : http://editor.method.ac/ qui fonctionne à la fois sur Desktop et sur tactile. Le source code de cet éditeur est disponible sur github: https://github.com/duopixel/Method-Draw

Etude d'un logiciel de dessin "universel"

Testez ce logiciel : http://svgeditor.cameleons-dev.com/svg-edit-2.5.1/ sur PC puis sur tablette. Que remarquez vous ? Il fonctionne sur les deux, aux doigts, à la souris, etc.  Egalement, sur tablette le menu à gauche est par défaut caché et un bouton permet de le faire apparaitre/disparaitre. On a une interface "responsive"...

Travail à faire (continué lors du prochain TP)

Ecrire un logiciel de dessin universel qui fonctionne sur tablette, smartphone, desktop. Le minimum est un logiciel simple qui permette de choisir des formes simples (ligne, ellipse, rectangle, texte), des couleurs ou des motifs, et qui fonctionne bien aux doigts, à la souris, sur mobile et desktop.

Si vous êtes d'un bon niveau JavaScript, vous pouvez repartir du logiciel de paint présenté (celui du tutorial WWW 2013), si vous n'êtes pas trop à l'aise, créez en un vous mêmes, simple, à la manière de ceux présentés, fonctionnant uniquement sur mobiles (ou repartez de leur code). Vous utiliserez des média queries CSS et du code responsif en JavaScript pour que le logiciel s'adapte au mieux au device cible. Vous vous inspirerez des exemples fournis pour que votre code fonctionne aux doigts ou à la souris.