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:  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 :Ressources 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 
• Le cours HTML5 de w3schools.com 
• 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 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  WWW2012 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 lees 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.

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

Mais là encore, pas de compatibilité souris/touch, juste utile pour des applications 100% tactiles.

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.

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

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

Ajout d'une couche de compatibilité sur le paint du tutorial WWW2012

Maitenant 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 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"       />
<meta name="apple-mobile-web-app-capable" content="yes"       />

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) :

console.log("load ipadtouch.js");
$(function () {
    $.extend($.support, {
        touch: "ontouchend" in document
    });
    if ($.support.touch) {
        document.addEventListener("touchstart", iPadTouchHandler, false);
        document.addEventListener("touchmove", iPadTouchHandler, false);
        document.addEventListener("touchend", iPadTouchHandler, false);
        document.addEventListener("touchcancel", iPadTouchHandler, false);
        
        // Michel Buffa : pour traitement zoom/pinch/rotate ----------
        MBangle = 0;
        MBnewAngle;
        MBscale = 1;
        MBnewScale;
        
        document.addEventListener("gesturechange", getAngleAndScale, false);
        document.addEventListener("gestureend", saveChanges, false);
        // ------------------------------------------------------------

    }
});

//--------- Michel Buffa zoom/pinch/rotate -----------
function saveChanges() {
    MBangle = MBnewAngle;
    MBscale = MBnewScale;
}
function getAngleAndScale(e) {
    // Don't zoom or rotate the whole screen
    e.preventDefault();
    // Rotation and scale are event properties
    MBnewAngle = MBangle + e.rotation;
    MBnewScale = MBscale * e.scale;
    // Combine scale and rotation into a single transform
    var tString = "rotate(" + MBnewAngle + "deg) scale(" + MBnewScale + ")";
    //document.getElementById("theDiv").style.webkitTransform = tString;
    console.log("Gesture 2 doigts detectee : " + tString);
}
//----------------------------------------------------
var lastTap = null,
    tapValid = false,
    tapTimeout = null;

function cancelTap() {
    tapValid = false
}
var rightClickPending = false,
    rightClickEvent = null,
    holdTimeout = null,
    cancelMouseUp = false;

function cancelHold() {
    if (rightClickPending) {
        window.clearTimeout(holdTimeout);
        rightClickPending = false;
        rightClickEvent = null
    }
}
function startHold(a) {
    if (!rightClickPending) {
        rightClickPending = true;
        rightClickEvent = a.changedTouches[0];
        holdTimeout = window.setTimeout("doRightClick();", 800)
    }
}

function doRightClick() {
    rightClickPending = false;
    var a = rightClickEvent,
        b = document.createEvent("MouseEvent");
    b.initMouseEvent("mouseup", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("mousedown", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("contextmenu", true, true, window, 1, a.screenX + 50, a.screenY + 5, a.clientX + 50, a.clientY + 5, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    cancelMouseUp = true;
    rightClickEvent = null
}

function iPadTouchStart(a) {
    console.log("iPadTouchStart");
    var b = a.changedTouches[0],
        g = "mouseover",
        c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    g = "mousedown";
    c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    if (tapValid) {
        window.clearTimeout(tapTimeout);
        if (b.target == lastTap) {
            lastTap = null;
            tapValid = false;
            g = "click";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c);
            g = "dblclick";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c)
        } else {
            lastTap = b.target;
            tapValid = true;
            tapTimeout = window.setTimeout("cancelTap();", 600);
            startHold(a)
        }
    } else {
        lastTap = b.target;
        tapValid = true;
        tapTimeout = window.setTimeout("cancelTap();", 600);
        startHold(a)
    }
}

function iPadTouchHandler(a) {
    var b = "";
    if (!(a.touches.length > 1)) {
        switch (a.type) {
        case "touchstart":
            console.log("touchstart");
            if ($(a.changedTouches[0].target).is("select")) return;
            iPadTouchStart(a);
            a.preventDefault();
            return false;
        case "touchmove":
            console.log("touchmove");
            cancelHold();
            b = "mousemove";
            a.preventDefault();
            break;
        case "touchend":
            console.log("touchend");
            if (cancelMouseUp) {
                cancelMouseUp = false;
                a.preventDefault();
                return false
            }
            cancelHold();
            b = "mouseup";
            break;
        default:
            return
        }
        a = a.changedTouches[0];
        var g = document.createEvent("MouseEvent");
        g.initMouseEvent(b, true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
        a.target.dispatchEvent(g);
        if (b == "mouseup" && tapValid && a.target == lastTap) {
            g = document.createEvent("MouseEvent");
            g.initMouseEvent("click", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
            a.target.dispatchEvent(g)
        }
    }
};

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>

Travail pour vous occuper pendant la fin du TP

Augmenter l'interface du paint version WWW2012, essayer d'ajouter des éléments d'interface qui fonctionnent sur tablette.