![]() |
![]() |
Accueil > Intranet Michel Buffa > Cours web 2.0 Miage de Nice 2012-2013 > TP4 HTML5 introduction, M2 Miage 2012-2013 > Exercices complémentaires pour ceux qui ont suivi le module option
Exercices complémentaires pour ceux qui ont suivi le module optionDe $1Pour vous occuper différemment, voici ce que je vous propose :
Test sur device mobile de programmes de paint "adaptés" à de tels devicesPremier exemple : un paint porté "à la main" sur tactileIl 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éactifPaint 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. Regardez tout d'abord le code source, notamment le fichier fonctionsMibile.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 Destop ? Ah, ça ne marche pas !!! Nous n'avons pas affaire à une interface multi-modale ! Ajout d'une couche de compatibilité sur le paint du tutorial WWW2012Maitenant nous allons regarder cet exemple présenté pendant le cours: l'éditeur HTML5 de "cadres" pour entreprises, sur le site http://www.renbyperadotto.com/ Testez ce logiciel en cliquant sur "créer votre ren" en bas à droite. Testez cette application depuis un ordinateur, puis depuis une tablette. Que remarquez-vous ? QUe ce soit à la souris ou en mode tactile, les fonctionnalités sont les mêmes. En effet, une couche d'émulation tactile -> souris a été intégrée, et des tags méta ont été ajoutés au début de la page HTML pour interdire un zoom à deux doigts (en revanche, on peut scroller le canvas central avec deux doigts). Note : cet éditeur a été adapté (6 mois de travail) et intégré à l'outil de vente en ligne prestashop. Le point de départ est le logiciel open source svg-edit, un éditeur svg disponible sur http://code.google.com/p/svg-edit/. Comparez les deux versions, vous verrez qu'un important travail d'adaptation/ergonomie/fiabilisation a été effectué. Tag meta : <!-- Michel Buffa : Interdiction du zoom a deux doigts --> Et la couche d'émulation de la souris (qui transforme en gros des événements "touch" en évenement "mouse") : IpadTouch.js (mais n'est pas spécifique à l'ipad à part pour les gestures à deux doigts) :
Si on inclus ce fichier dans une programme qui reconnait des évenements souris, il devait réagir au touch de manière transparente. Notez au passage l'ajoute de la détection de gestures pinch and rotate via des évenements pour le moment réservés à IOS : "gesturestart" et "gestureend". Et aussi l'émulation du clic droit via un appui long avec le doigt. Cela n'a pas été testé, mais normalement si vous incluez ce fichier, ainsi que la librairie jquery, dans le programme du paint de WWW2012 que vous avez fait tourner quelques section plus tot, vous devriez pouvoir faire fonctionner au moins le dessin à la fois à la souris et aux doigts. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> <script type="text/javascript" src="IpadTouch.js"></script> Test/etude d'éléments d'une interface multi-modale en HTML/CSS/JavaScriptTestez 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
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |