Initiation à la réalisation de site Web pour mobiles

TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de Bordeaux1. Nous aborderons différents points importants qui font la spécificité de la réalisation de site web pour mobiles 1. Voici les points importants qui seront abordés : Quelques conseils élémentaires pour réaliser un site web mobile Création de pages web avec IUI (bibliothèque CSS et javascript pour mobiles) Gestion élémentaire d une base de données sur mobiles Gestion du multi touch (uniquement pour IPhone) 5.1 Petite séance de présentation 5.1.1 Quelques conseils de base A priori, réaliser un site web sur mobile n est pas fondamentalement plus compliqué que de réaliser un site classique. On retrouve exactement les mêmes technologies : html, css, dom, ajax, java script... La difficulté principale est de tenir compte des spécificités des téléphones pour mettre en place un site web "utilisable". Nous verrons dans ce TP qu en suivant les recommandation du W3C et qu en utilisant des bibliothèques dédiées (IUI, XUI,...) le travail se trouve être grandement simplifié. Voici les trois conseils très simples à mettre en oeuvre lors de la réalisation de votre site web mobile. Ces conseils sont fournis par le W3C comme guide de bonne pratique pour la réalisation de sites web pour mobiles. Le téléphone lui-même. Comparé à un ordinateur (avec un grand écran, un processeur rapide, une souris, un clavier,...), un téléphone portable ne dispose pas des même caractéristiques physiques. La bande passante. Le transfert de données (même si il a tendance à s améliorer chaque année) est une contrainte importante à prendre ne compte. On conseille ainsi de limiter les échanges avec les serveurs lors d une navigation. Il faut également essayer de ne pas avoir à charger une page de plus de 20KO Prendre en compte le besoin utilisateur. Il faut réaliser un site sans fioritures, dans lequel l internaute doit trouver très rapidement l information. C est principalement la partie ergonomie qui doit refléter cette contrainte. Par exemple, les textes doivent être de taille reduite être 5.1.2 Quelques conseils à suivre Concrètement, pour réussir le développement d un site, voici quelques conseils. Le doctype des pages devra être " Xhtml Mobile Profile ", un type de document spécifiquement développé pour les mobiles et qui est supporté par beaucoup de navigateurs mobiles. Voici un exemple de DOCTYPE : 1 <! DOCTYPE html PUBLIC " -// WAPFORUM // DTD XHTML Mobile 1. 0// EN" " http :// www. wapforum. org / DTD / xhtml - mobile10. dtd "> Les recommandation du W3C se traduisent par quelques règles très simples à mettre en place : La taille des pages devra être la plus légère possible. Il est conseillé de ne pas dépasser 20 Ko par page. 1. L ensemble de ce TP a été testé sur un iphone 3GS 1

Pour l apparence du site, préférez une feuille de style intégrée à la page, car beaucoup de navigateurs ne semblent pas gérer les fichiers css externes. Il sera préférable que le site ne contienne pas de pop-ups, de frame ou iframe, de tableaux... Tous les téléphones n ont pas la même taille d écran. Le W3C conseille de ne pas dépasser une taille d affichage de 200X250 pixels. Cette taille d affichage minimale est en constante évolution (changement de génération des téléphones). Il suffit pour cela de regarder le tableau ci-dessous. Il permet d avoir une idée de la répartition des téléphone utilisés selon leur résolution. Des sites mobiles comme l équipe, amazon, igoogle, bébéconfort, etc, mettent parfaitement en oeuvre ces concepts... Comme pour les sites web "classiques", il existe des validator permettant de juger de la qualité de votre code HTML. Validateur W3G pour mobile (norme XHTML Mobile Profile) Ready.mobi (celui donne également le coût de téléchargement, des conseils et plus encore). 5.1.3 Tester son site web en phase de développement Dans le cadre de ce TP plusieurs solutions s offrent à vous. Uploadez vos fichiers sur Dormeur et testez en ligne avec votre appareil mobile. Utilisez un LAMP, MAMP, XAMP... et accédez aux pages en entrant l adresse IP de votre machine dans le navigateur de votre mobile (attention le port 80 n est pas toujours le port par défaut) Si votre voisin ne lache pas l un des ipad, iphone ou HTC/AndroÏd fournis pour ce TP. Utilisez un émulateur d iphone en ligne. Uploadez sur Dormeur et testez votre site avec un émulateur IPhone. Utilisez, par exemple, Opera-mini Demo (http://www.opera.com/mobile/demo/). 5.2 iui et CSS 5.2.1 Présentation d iui Nous allons commencer par créer la page d accueil de notre site. Pour cela, nous allons nous appuyer sur la bibliothèque iui. Cette bibliothèque compacte (10 Ko pour la version compressée du code JavaScript) sert à donner à une page HTML affichée le style iphone/android, à l aide de divers fichiers CSS livrés avec celle-ci. Le code JavaScript permet, quant à lui, d enchaîner entre elles le défilement des pages HTML, la plupart du temps sans faire appel au serveur (sauf pour les appels Ajax). Téléchargez la bibliothèque iui à l adresse http://code.google.com/p/iui/ downloads/list. La version utilisée ici est la 0.40 (la plus récente à l heure où ce TP est écrit). N. Journet, version du 13 août 2010 2 / 16

Les fichiers servant au développement pour iphone et Android sont les fichiers se trouvant dans le répertoire web-app/iui. Les fichiers iui.js et iui.css sont indispensables au développement pour iphone/android, tandis que le sous-répertoire t contient des thèmes d affichage en CSS. On peut enrichir ce répertoire en créant ses propres thèmes. Pour la suite de ce TP, je considère que vous avez créé un répertoire iui à la racine de votre site et que vous y avez copié l intégralité du répertoire iui. 5.2.2 La page d accueil Recopiez le code ci dessous. 1 <! DOCTYPE html PUBLIC " -// WAPFORUM // DTD XHTML Mobile 1. 0// EN" " http :// www. wapforum. org / DTD / xhtml - mobile10. dtd "> 2 <html > 3 <head > 4 <title > Exemple Test </ title > <meta name =" viewport " content ="user - scalable =no, 5 width = device - width " /> 6 <link rel = " stylesheet " type =" text / css " href = " iui / iui. css " /> 7 <link rel = " stylesheet " type =" text / css " href = " iui /t/ default / default - theme. css " /> 8 < script src =" iui / iui.js"></ script > 9 </ head > 10 <body > <div class =" toolbar "> 11 <h1 id=" pagetitle "></h1 > 12 <a id=" backbutton " class =" button " href ="#"></a> </ div > 13 <div id=" home " title =" IUT info " selected =" true "> 14 <div > <IMG alt =" banneriut. jpg " src =" banneriut. jpg " > </ div > 15 Contenu de la page 16 </ div > 17 </ body > 18 </ html > La directive <meta> permet de mettre la page HTML à la taille de l écran. La partie intéressante est située dans la balise <body>. Elle contient deux <body>, l un contenant la barre d outils (partie haute de toute application iphone/android, qui comporte en général les boutons d actions et de navigation), tandis que l autre <body> est celui du reste de la page HTML (donc situé en dessous de la barre d outils). Le titre de la page est venu se mettre dans la barre d outils, car c est le code JavaScript iui.js inclus qui prend l attribut title de chaque page que nous créons (ici dans un <div>) pour l insérer dans l élément d id pagetitle de la barre d outils. L élément <h1> (dont l id est obligatoirement pagetitle) contiendra le titre de la fenêtre actuellement affichée, tandis que l élément <a> (dont l id est obligatoirement backbutton) comportera un bouton permettant de revenir à la fenêtre précédente (si elle existe). La classe button associée à ce lien sert à lui donner, par l intermédiaire des CSS, l apparence d un bouton. L adresse du lien est indiquée par l attribut href, et celui-ci sera mis à jour automatiquement par le code JavaScript de iui. 5.2.3 La page de contacts La deuxième page de notre site est la page contenant des informations sur les personnes du département informatique que l on souhaite contacter. On y accèdera depuis la page d accueil que l on vient de créer. Chaque fenêtre affichée dans notre application sera en fait un <div> compris dans la page HTML principale de notre application. Donc iui permet de n avoir qu une seule page HTML, qui contiendra toutes les fenêtres de notre application, chacune de ces fenêtres étant insérée dans un <div>. Voici une page HTML comportant en fait trois fenêtres qui seront affichées dans notre application. 1 <html > 2 <head > 3 <title > Exemple Test </ title > 4 <meta name =" viewport " content ="user - scalable =no, width = device - width " /> 5 <meta http - equiv =" content - type " content =" text / html ; charset =utf -8" /> N. Journet, version du 13 août 2010 3 / 16

6 <link rel = " stylesheet " type =" text / css " href = " iui / iui. css " /> 7 <link rel = " stylesheet " type =" text / css " href = " iui /t/ default / default - theme. css " /> 8 < script src =" iui / iui.js"></ script > 9 </ head > 10 <body > 11 <div class =" toolbar "> 12 <h1 id=" pagetitle "></h1 > 13 <a id=" backbutton " class =" button " href ="#"></a> 14 </ div > 15 <div id=" accueil " title =" IUT info " selected =" true "> 16 <div > <IMG alt =" banneriut. jpg " src =" banneriut. jpg " > </ div > 17 <p > Voici une appli iphone - IUT! </ p > 18 </ div > 19 20 <div id=" fenetre2 " title =" Contacts "> 21 <p > Secretariat - ( 33) 5 56 84 57 85 </ p > 22 <p > Direction des etudes - ( 33) 5 56 84 57 85 </ p > 23 </ div > 24 </ body > 25 </ html > On indique une seule fois le <div> contenant la barre d outils (iui gère son affichage pour chacune des fenêtres présentes dans notre application), puis ensuite les trois <div> contenant chacune des fenêtres. Pour savoir quelle fenêtre afficher en premier, on utilise l attribut selected= true pour cette fenêtre. Chaque fenêtre possède un attribut title qui sera le titre en haut de la fenêtre (dans la barre d outils). Elle possède aussi un id qui permettra au code JavaScript de iui de procéder à son affichage (l id est dans ce cas ce qui la distingue des autres fenêtres). Pour passer d une fenêtre à l autre iui utilise l id de chaque fenêtre et une balise <a>. Ajoutez, dans la div correspondant à la page d accueil le code suivant. 1 <a href = "# fenetre2 "> 2 Contacts 3 </a> Votre site devrait normalement ressembler à l image ci-desous. N. Journet, version du 13 août 2010 4 / 16

5.2.4 Utilisation d iui - CSS A l aide de d iui, il est très simple de donner une apparence soignée (et standard) à votre site. Dans le cadre de ce TP, nous utilisons le template standard définit dans iui/t/default/default-theme.css. iui fournit par défaut 3 templates. Il en existe bien entendu un grand nombre sur le net. Tout d abord, nous allons donner une autre apparence aux liens de la page d accueil. Pour cela, nous utiliserons les listes qui sont personnalisées dans iui.css et qui sont définies pas le selecteur : 1 body > ul > li { 2 position : relative ; 3 margin : 0; 4 border - bottom : 1 px solid # E0E0E0 ; 5 padding : 8px 0 8px 10 px; 6 font - size : 20 px; 7 font - weight : bold ; list - style : none ; 8 } La directive border-bottom sert à ajouter une bordure sous chaque élément de liste, tandis que la directive padding permet d espacer harmonieusement le texte dans chaque élément de liste. Question 1 Modifiez la dernière version de votre site afin qu il ressemble à l image ci-dessous. Attention, il est possible que vous deviez insérer l image de l iut à un autre endroit du code pour qu il soit compatible avec le sélecteur utilisé pour afficher le menu stylisé "iphone". Question 2 Une autre possibilité offerte par les classes CSS de iui est celle de donner un titre à un groupe d éléments dans une liste. En insérant la ligne suivante à l endroit approprié, faites en sorte que votre site ressemble à l image ci-dessous. 1 < li class = group > DUT </ li > N. Journet, version du 13 août 2010 5 / 16

Pour finir cette première version du site du département de l iut, nous allons utiliser (encore une fois) iui pour styliser la page de contacts afin qu elle ressemble à l image ci-dessous. Question 3 Le but ici est donc de présenter les informations (ou des données) sous forme de liste, chaque ligne de la liste étant composée d un intitulé suivi d une valeur (par exemple, l intitulé "Contact" suivi du nom du contact luimême). Chaque information à grouper sera incluse dans un élément HTML <fieldset> qui permet d entourer par un cadre, tandis que chaque ligne d information sera un <div> ayant la classe CSS row. L intitulé sera un élément <label>, tandis que la valeur sera un <span>. Pour donner un style plus "classique" à cette page, il faut que la division correspondant à la fenêtre "Contacts" soit associée à la classe panel (class = panel). Enfin, pour que le numéro de téléphone/mail soit composé automatiquement après contact avec l écran, il faut simplement inclure les informations dans la balise a adéquate. 1 <a href = tel :(33) 5 56 84 57 85 > (33) 5 56 84 57 85 </a> 2 <a href = mailto : secretariat@iut.fr > secretariat@iut.fr </a> N. Journet, version du 13 août 2010 6 / 16

5.2.5 Paramétrage spécifique à l iphone Pour l instant, notre application peut s utiliser via le navigateur Safari, en donnant l URL du serveur dans la barre d adresse de celui-ci. Une application web peut aussi être accessible comme une autre application iphone en ayant sa propre icône sur le bureau de l iphone. Il faut d abord qu une icône (taille de 57X57) puisse être associée à cette application. Pour cela, il faut l indiquer dans le code HTML : 1 <link rel =" apple - touch - icon " href =" nom_fichier. png " /> Sur un serveur PHP, l emplacement du fichier sera relatif à celui de la page HTML qui contient l instruction HTML précédente. Ensuite, une fois la page d accueil de notre site affichée dans le navigateur Safari de l iphone, il suffit de cliquer sur le bouton + de la barre de boutons située dans la partie basse de l écran. Une fois l application accessible via l icône sur le bureau de l iphone, il subsiste un léger problème : le lancement de l application via l icône affiche tout d abord la barre d adresse du navigateur, qui disparaît ensuite pour laisser place à notre page HTML. En fait, cette barre n a pas complètement disparu, elle est simplement remontée vers le haut. Si l on descend la page, elle réapparaît. Pour la faire disparaître de façon définitive, il suffit d indiquer dans le code HTML que l application doit être utilisée en plein écran, grâce au tag <meta> suivant (ajouté dans la partie <head> de la page HTML) : 1 <meta name =" apple - mobile -web -app - capable " content =" yes " /> La balise <meta> doit être inscrite dans la page HTML avant que l icône ne soit créée sur le bureau de l iphone. Sinon, cette instruction n est pas prise en compte. Pensez donc à l insérer dès le début de la création de votre application, et surtout avant que les premiers utilisateurs y aient accédé. Vous remarquerez également que cette instruction fait disparaître la barre de boutons du bas de l écran affichée par Safari. Nous avons alors vraiment l impression d être dans une application native comme celles téléchargées sur l AppStore! Pour que l utilisateur ait encore plus l impression que l application utilisée est native, il peut être intéressant d afficher une page au démarrage de l application. Cette page sera en fait une image de 320 460 pixels, destinée à couvrir la zone d affichage de l iphone. On utilise pour cela le tag <link> de la façon suivante (dans la partie <head> de la page HTML). 1 <link rel =" apple - touch - startup - image " href =" nom_fichier. png " /> Comme précédemment, <link> doit être inscrit dans la page HTML avant que l icône ne soit créée sur le bureau de l iphone. Sinon, cette instruction n est pas prise en compte. Pensez donc à l insérer dès le début de la création de votre application, et surtout avant que les premiers utilisateurs y aient accédé. 5.3 iui et JavaScript 5.3.1 Saisie d informations et requêtes Ajax Dans cette partie, nous allons créer une page permettant à un étudiant de LP d obtenir sa moyenne générale en indiquant simplement quel est son prénom. Pour cela nous allons nous appuyer sur une partie des nombreuses méthodes javascript déjà intégrées dans iui (cf annexes du TP). Question 4 Créez une nouvelle entrée dans le menu d accueil permettant d aller à une nouvelle page. La figure ci dessous vous donne une idée de la page qu il vous faut créer : N. Journet, version du 13 août 2010 7 / 16

Question 5 Cette nouvelle page est composée d un formulaire (balise <form> de classe "panel") intégrant : Un premier fieldset composé d une seule div dans laquelle on retrouvera une balise <label> pour le texte "Nom" puis une balise input pour que l utilisateur puisse y saisir son nom. Un bouton que vous intégrerez de la manière suivante : <a id=idlien class =redbutton href="#" target="_self">. Les attributs href=# et target=_self permettent d indiquer à iui que le traitement du clic sur le bouton est effectué autrement que par sa gestion normale. En effet, nou utiliserons un code JavaScript permettant d intercepter l événement click sur le bouton (dont l id est idlien). la classe "redbutton" permet d avoir un bouton de look iphone. Un deuxième fieldset iui offre la possibilité de faire de l Ajax. Pour cela il faut utiliser la méthode ajax(url, args, method, cb). Cette méthode sert à appeler via Ajax la page HTML indiquée dans url, en lui transmettant les paramètres précisés dans l objet args (optionnel). Seul le paramètre url est obligatoire. Le paramètre cb correspond à une fonction de callback appelée dès que la réponse du serveur a été reçue (pas de délai d attente ici). Cette fonction reçoit en paramètre l objet XMLHttpRequest contenant la réponse du serveur. Le paramètre args permet de faire passer des arguments sur le modèle : var args={ "nom de la variable" : "valeur de la variable"} tandis que et method permet d indiquer si les arguments sont passés en POST" ou GET. Pour associer l exécution d une fonction à l événement click effectué sur le bouton, il faut simplement associer au bouton un listener avec la méthode addeventlistener ("click", function (event){"code de la fonction callback"}); Nous utilisons donc le formulaire que nous venons de créer et qui lors de la validation, appelle un programme sur le serveur qui retourne la note de la personne. Ce programme sur le serveur utilise en général une base de données associée. Ici, pour simplifier, nous la simulerons en utilisant le script actionnote.php. Ce script ne connait que les étudiants "Etu1" et "Etu2". N. Journet, version du 13 août 2010 8 / 16

Question 6 Complétez le code suivant permettant de réaliser ce qui est demandé : 1 <script > 2 function $( id) { return document. getelementbyid ( id); } 3 $(" idlien "). addeventlistener (" click ", function ( event ) 4 { 5 var nom = form1. nom. value ; 6 var args = { nom :nom }; 7 iui. ajax (" actionnote.php ", args, " POST ", function ( xhr ) 8 { 9 $(" idnote "). innerhtml = xhr.responsetext ; 10 }); 11 }); 12 </ script > Vous noterez qu exceptionnellement je m autorise à utiliser la méthode innerhtml pour mettre à jour le champ dans lequel doit être écrite la note. 5.3.2 Bases de données côté client Les navigateurs des mobiles iphone/android intègrent maintenant la possibilité de conserver des données dans des bases de données internes, via le langage SQL. Cette possibilité élargit les capacités de stockage des informations sur le poste client. En effet, les seules informations conservées auparavant étaient mises dans des cookies, qui étaient une forme rudimentaire de stockage. Cette nouvelle possibilité permet de rendre une application iphone ou Android moins dépendante des données sauvegardées sur un serveur (sauf bien sûr dans le cadre d une application client-serveur). Tout d abord, il faut réaliser un accès à la base de données, qui crée une base de données vide s il s agit du premier appel. 1 var db = opendatabase (" Test ", " 1.0 ", " Test ", 65535) ; Nous créons ici une base de données de nom Test, en version 1.0, qui est estimée à 65 535 octets maximum. Lorsque cette instruction JavaScript est exécutée, une base de données est créée, que l on peut retrouver sur l iphone dans l onglet Réglages>Safari>Base de données. Une fois créée, la base de données prend en charge les tâches suivantes : créer des tables, insérer des données dans les tables, rechercher des données dans les tables, supprimer des données, des tables,... Le principe de la gestion des données est simple : à partir de l objet db récupéré précédemment, on exécute dans une transaction la ou les commandes SQL désirées. 1 var db = opendatabase (" Test ", " 1.0 ", " Test ", 65535) ; 2 db. transaction ( function ( transaction ) { 3 var sql = " requete SQL sur la base "; 4 transaction. executesql ( sql, [ parametres ] / undefined, function () 5 { 6 // code JavaScript a executer si la requete a reussi //... 7 }, function () { 8 // code JavaScript a executer si la requete a echoue 9 //... 10 } ); 11 }); Nous allons utiliser une base de données afin de stocker la moyenne de l étudiant au fil du temps. Ainsi, à chaque fois que ce dernier appuie sur le bouton "obtenir votre note", la moyenne est affichée et enregistrée dans la base de données. L ensemble des notes est affiché dans une zone située en dessous de la zone "moyenne". Au final nous allons converger vers une page ressemblant à l image ci-dessous. N. Journet, version du 13 août 2010 9 / 16

Question 7 Ajoutez au bon endroit le code suivant définissant la zone où seront intégrées les notes de la base de données. 1 <ul id= idfen2 class =" panel " title =" Liste des notes "> 2 3 </ul > Question 8 Complétez le code ci-dessous permettant de créer une base de données très simplifiée (composée d une seule table, elle même composée d un seul champ : la note). 1 2 iui. ajax (" actionnote. php ", args, " POST ", function ( xhr ) { 3 4 if ( xhr. readystate == 4) { 5 var note = xhr. responsetext ; 6 var db = opendatabase (" NotesLP ", " 1.0 ", " Test ", 65535) ; 7 db. transaction ( function ( transaction ) { 8 var sql = " CREATE TABLE IF NOT EXISTS Notes " + " ( note INTEGER NOT NULL )"; 9 transaction. executesql ( sql, undefined, function () { 10 alert (" Table creee ");}, erreurbd ); 11 }); 12 }); Question 9 Complétez le code ci-dessous permettant d insérer la note envoyée par le script php dans la base de données que vous venez de créer. 1 2 db. transaction ( function ( transaction ) 3 { 4 5 var sql = " INSERT INTO Notes ( note ) VALUES (?) "; 6 transaction. executesql ( sql, [ note ], function () { 7 alert (" note inseree ");}, erreurbd ); 8 9 }); N. Journet, version du 13 août 2010 10 / 16

Question 10 Complétez le code ci-dessous permettant d afficher les notes de la base de données 1 db. transaction ( function ( transaction ) { 2 var sql = " SELECT * FROM Notes "; 3 transaction. executesql ( sql, 4 if undefined, function ( transaction, (! result. rows. length ) return ; result ){ 5 for ( var i =0; i < result. rows. length ; i ++) { 6 var row = result. rows. item (i); 7 var notebd = row. note ; 8 var html = " <li> " + notebd + " </li> "; 9 } 10 $(" idfen2 "). innerhtml += html;,erreurbd);); Je vous donne également le code de la fonction d erreur. 1 function erreurbd ( transaction, erreur ) { 2 alert (" Erreur BD : " + erreur. message ); 3 return false ; 4 } 5.3.3 Multi-touch Le multi-touch concerne l interface tactile de l écran de l iphone/android. En effet, les éléments affichés sur l écran peuvent non seulement recevoir un simple clic, mais également être cliqués par plusieurs doigts en même temps. Ainsi, dans certaines applications, il est possible de déplacer des objets sur l écran, mais aussi de les redimensionner ou de les faire pivoter. Deux types d événements sont mis en œuvre par le multi-touch : les événements touch, qui concernent l appui sur l écran avec un doigt. Ils sont utilisés pour sélectionner un élément ou le déplacer sur l écran ; les événements gesture, qui concernent les mouvements effectués avec plusieurs doigts en contact avec l écran. Ils sont utilisés pour agrandir/rétrécir des objets, ou les faire pivoter. En effet, les agrandissements, rétrécissements et rotations sont en général employés dans les applications iphone et Android avec au minimum deux doigts. Evénements touch Les évènements touch peuvent être interceptés par tous les éléments HTML sur lesquels l utilisateur peut cliquer avec son doigt. Ils correspondent aux trois événements suivants. touchstart : un doigt a touché l élément. Si un autre doigt le touche (que le premier doigt soit ou non toujours en contact avec l écran), un second événement touchstart se produit. touchmove : cet événement est déclenché après un touchstart. Un doigt est en train de bouger sur l écran : le doigt n est plus forcément sur l élément qui a initié le touchstart (il en est peut-être sorti, mais le touchstart a démarré sur cet élément). touchend : un doigt a été enlevé de l écran. D autres doigts peuvent encore toucher l écran. Pour comprendre le fonctionnement de ces événements, copiez/collez le programme suivant : 1 <html > 2 <head > 3 <meta name =" viewport " content ="user - scalable =no, width = device - width " /> 4 <meta name =" apple - mobile -web -app - capable " content =" yes " /> 5 <meta http - equiv =" content - type " content =" text / html ; charset =utf -8" /> 6 7 <link rel =" apple - touch - startup - image " href =" start. png " /> 8 </ head > 9 10 11 <body id= idbody > N. Journet, version du 13 août 2010 11 / 16

12 <div id= idglobal style =" border - style : solid "> 13 <h1 >Touch Zone </h1 > 14 touchstart : < span id = idtouchstart >0 </ span > < br / > 15 touchend : < span id = idtouchend >0 </ span > < br / > 16 touchmove : < span id = idtouchmove >0 </ span > < br / > 17 </ div > 18 </ body > 19 </ html > 20 21 < script > 22 function $( id) { return document. getelementbyid ( id); } 23 $(" idglobal "). addeventlistener (" touchstart ", function ( event ) { 24 var nb = parseint ($(" idtouchstart "). innerhtml ); 25 $(" idtouchstart "). innerhtml = nb + 1; 26 }); 27 $(" idglobal "). addeventlistener (" touchend ", function ( event ) { 28 var nb = parseint ($(" idtouchend "). innerhtml ); 29 $(" idtouchend "). innerhtml = nb + 1; 30 }); 31 32 $(" idglobal "). addeventlistener (" touchmove ", function ( event ) { 33 var nb = parseint ($(" idtouchmove "). innerhtml ); 34 $(" idtouchmove "). innerhtml = nb + 1; 35 event. preventdefault (); 36 37 }); 38 39 </ script > Question 11 Après avoir testé et analysé le code, répondez aux questions suivantes : L évènement touchstart est-il pris en compte si le contact est réalisé en dehors de la div? Que se passe-t-il si on démarre en dehors de la div et que l on déplace son doigt vers div? Que se passe-t-il si on laisse son doigt trop longtemps appuyé (outre le fait que ça peut finir par faire mal)? Que se passe-t-il si on ajoute la ligne suivante : 1 $(" idbody "). addeventlistener (" touchmove ", function ( event ) { 2 event. preventdefault (); 3 }); Vous remarquerez également que si le doigt reste appuyé quelques secondes au même endroit, la fonctionnalité standard de copier/coller de l iphone s active. Pour la désactiver, il suffit d écrire dans le code HTML les instructions CSS suivantes : Désactiver la fonctionnalité de copier/coller dans toute la page HTML 1 <body id= idbody style ="-webkit -user - select : none ;"> Pour réaliser une intéraction plus sophistiqquer, il est possible d utiliser les propriétés des objets event. En effet, es objets event passés en paramètres des listeners ont des propriétés qui aident à mieux connaître l événement qui s est produit : à quelles coordonnées de l écran, combien de doigts sont concernés, etc.? Voici quelques-unes des propriétés les plus importantes de ces événements. touches : représente un tableau de toutes les touches actuellement effectuées sur l élément. Une touche est associée à un doigt qui touche l élément sur l écran. Comme plusieurs doigts peuvent toucher simultanément l élément, il est nécessaire de les mémoriser. changedtouches : comme touches, mais ne contient que les touches concernées par l événement. Par exemple, si un doigt se retire (événement touchend), il est mémorisé dans changedtouches, mais supprimé de touches. Tandis que si un doigt s ajoute (événement touchstart), il est mémorisé dans touches mais aussi dans changedtouches. N. Journet, version du 13 août 2010 12 / 16

Evénements gesture Les événements gesture combinent des événements touch afin de réaliser des opérations particulières telles que les agrandissements/rétrécissements ou les rotations d objets sur l écran. Ils permettent de faire l économie de calculs compliqués à l aide des événements touch, car ils ne sont appelés que lorsque deux doigts au minimum sont présents sur l écran. Comme pour les événements touch, nous aurons trois types d événements gesture. gesturestart : cet événement se produit lorsque le deuxième doigt touche l écran, un des deux doigts (voire les deux) doit toucher l élément. Une fois que les deux doigts ont touché l écran, la distance entre les deux est mémorisée par le système et représentera l unité 1 pour l agrandissement/rétrécissement, ainsi que l angle 0 pour une rotation. gestureend : cet événement se produit après un gesturestart, lorsqu un des deux doigts quitte l écran. Si un doigt est de nouveau posé sur l écran, un autre événement gesturestart est pris en compte. gesturechange : cet événement se produit après un gesturestart, lorsqu un des doigts (voire les deux) bouge sur l écran. Le système connaît (et nous fournit) la distance entre les deux doigts, ainsi que l angle des deux doigts par rapport au gesturestart reçu précédemment. Le programme suivant permet de visualiser les événements touch et gesture reçus au fur et à mesure des positionnements ou déplacements des doigts sur l élément <div> qui les analyse. Les événements gesture servent à déterminer si les doigts s écartent ou effectuent une rotation. Il est donc normal que l on ait comme principales propriétés des événements gesturestart, gestureend et gesturechange les données suivantes. scale : valeur décimale supérieure ou égale à 0, indiquant l échelle d écartement des doigts qui sont impliqués dans le geste. La valeur 1 indique que les doigts ont le même écartement qu au départ du mouvement (au gesturestart). Au fur et à mesure des événements gesturechange, les doigts se rapprochent ou s écartent. S ils se rapprochent, scale se rapproche de 0, tandis que s ils s écartent, scale s éloigne de 1 en augmentant. On peut donc en déduire une échelle d agrandissement pour l élément auquel s applique le geste. rotation : valeur décimale correspondant à un angle en degrés (positif ou négatif ), indiquant la rotation que la droite formée par les deux doigts a subi lors des événements gesturechange par rapport au gesturestart initial (qui correspond à un angle de 0). Une rotation dans le sens des aiguilles d une montre amène des angles positifs, tandis qu une rotation dans le sens inverse entraîne des angles négatifs. On souhaite réaliser une page web avec un div qui soit à la fois modifiable en échelle et en orientation. L image ci-dessous vous donne une idée de ce que l on souhaite obtenir. N. Journet, version du 13 août 2010 13 / 16

La propriété -webkit-transform permet d effectuer des rotations, translations, zooms ou inclinaisons sur les éléments DOM sur lesquels elle s applique. Pour la rotation il suffit de jouer sur la propriété css d une division avec : 1 -webkit - transform : rotate ( -45 deg ); Question 12 Complétez le code ci-dessous pour permettre de transformer la division. 1 <html > 2 <head > 3 <meta name =" viewport " content ="user - scalable =no, width = device - width " /> 4 <meta name =" apple - mobile -web -app - capable " content =" yes " /> 5 <meta http - equiv =" content - type " content =" text / html ; charset =utf -8" /> 6 <link rel =" apple - touch - startup - image " href =" start. png " /> 7 </ head > 8 9 <body id= idbody style ="-webkit -user - select : none ;"> 10 <div id= idglobal style =" border - style : solid ; font - size :30 px; width :200 px; height : 200 px;"> 11 Un div a agrandir! </ div > 12 </ body > 13 </ html > 14 15 16 < script > function $( id) { return document. getelementbyid ( id); } 17 var width ; 18 var height ; 19 $(" idglobal "). addeventlistener (" gesturestart ", function ( event ) { 20 width = parseint ($(" idglobal "). style. width ); 21 height = parseint ($(" idglobal "). style. height ); 22 }); 23 $(" idglobal "). addeventlistener (" gestureend ", function ( event ) { 24 }); 25 $(" idglobal "). addeventlistener (" gesturechange ", function ( event ) { 26 $(" idglobal "). style. width = parseint ( width * event. scale ) + "px"; 27 $(" idglobal "). style. height = parseint ( height * event. scale ) + "px"; 28 var rotation = parseint ( event. rotation ); 29 $(" idglobal "). style. webkittransform =" rotate (" + rotation + " deg )"; N. Journet, version du 13 août 2010 14 / 16

30 event. preventdefault (); // permet d effectuer le raffraichissement de l affichage 31 }); 32 $(" idbody "). addeventlistener (" touchmove ", function ( event ) { 33 event. preventdefault (); // permet d effectuer le raffraichissement de l affichage 34 }); 35 </ script > 36 </ script > N. Journet, version du 13 août 2010 15 / 16

5.4 Annexe Voici les fonctions JavaScript principales proposées par iui : showpagebyid(pageid) : cette méthode sert à faire apparaître directement la page d id pageid. Si cette page a déjà été affichée, un retour dans l historique des pages visitées est effectué. Le bouton Back de la barre d outils est mis à jour (celui dont l id est backbutton). goback () : cette méthode permet de revenir à la fenêtre précédente. C est la méthode appelée lorsqu on clique sur le bouton Back dans la barre d outils. showpagebyhref (href, args, method, replace, cb) : cette méthode est utilisée pour appeler, via Ajax, la page HTML indiquée dans href, en lui transmettant les paramètres indiqués dans l objet args (optionnel). Seul le paramètre href est obligatoire. Le paramètre method est GET (par défaut) ou POST, permettant de préciser si les paramètres doivent être transmis dans l URL envoyée au serveur (GET) ou cachés dans l entête HTTP (POST). Le paramètre replace, s il est indiqué, correspond à un nœud DOM du code HTML. Il signifie dans ce cas que l élément de cette fenêtre (en fils direct de la fenêtre) contenant ce nœud sera remplacé par la réponse du serveur. Cette fonctionnalité est utilisée en général lorsqu une liste est affichée, avec le dernier élément de la liste contenant un lien servant à faire apparaître les éléments suivants de la liste (ce dernier élément est donc remplacé par la liste des éléments suivants). Dans le cas où le paramètre replace n est pas indiqué, la réponse du serveur est ajoutée en fin de <body>, puis une nouvelle fenêtre est affichée : la dernière (parmi celles reçues) ayant l attribut selected=true, ou la première de la réponse envoyée par le serveur (cette fonctionnalité correspond à la description de la méthode insertpages (frag)). Le paramètre cb correspond à une éventuelle fonction (dite de callback) appelée lorsque la réponse du serveur est arrivée (en ajoutant un délai de 1 seconde). ajax (url, args, method, cb) Cette méthode sert à appeler via Ajax la page HTML indiquée dans url, en lui transmettant les paramètres précisés dans l objet args (optionnel). Seul le paramètre url est obligatoire. A la différence de la méthode showpagebyhref(), celle-ci nous laisse libre de faire le traitement que l on veut avec la réponse du serveur (pas d insertion automatique de la réponse reçue dans la page HTML). Pour cela, le paramètre cb correspond à une fonction de callback appelée dès que la réponse du serveur a été reçue (pas de délai d attente ici). Cette fonction reçoit en paramètre l objet XMLHttpRequest contenant la réponse du serveur. LesparamètresargsetmethodsontsimilairesàceuxdelaméthodeshowPageByHref (). insertpages (frag) Cette méthode est utilisée pour insérer une ou plusieurs fenêtres en fin de page HTML, regroupées lors de l appel à la méthode dans un élément DOM <div> correspondant au paramètre frag. Une fois insérées, une nouvelle fenêtre s affiche : la dernière de frag ayant l attribut selected=true, ou la première de frag si aucune n a l attribut selected=true. getselectedpage () Cette méthode retourne l élément DOM associé à la fenêtre actuellement visible (celle qui a l attribut selected=true). hasclass (self, name) :Cette méthode retourne true si la classe CSS name fait partie des classes CSS de l élément DOM self, sinon retourne false. addclass (self, name) :Cette méthode ajoute la classe CSS name à l élément DOM self (si elle ne s y trouve pas déjà). removeclass (self, name) : Cette méthode supprime la classe CSS name de l élément DOM self (à condition qu elle y soit présente). Ce document est publié sous Licence Creative Commons «By- NonCommercial-ShareAlike». Cette licence vous autorise une utilisation libre de ce document pour un usage non commercial et à condition d en conserver la paternité. Toute version modifiée de ce document doit être placée sous la même licence pour pouvoir être diffusée. http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ N. Journet, version du 13 août 2010 16 / 16