Plan. Problématique développement mobile. Présentation web mobile. jquerymobile - présentation. Principes. Fonctionnement.

Transcription

1 Plan Problématique développement mobile Présentation web mobile jquerymobile - présentation Principes Fonctionnement Illustration Avantages / Inconvénients Futures versions 1

2 Problématique développement mobile (1/2) Développement d application native liée à un OS Téléchargement d application Champ d action limité Site web classique pas adapté à la navigation sur terminal mobile (tablettes, smartphones...) 2

3 Problématique développement mobile (2/2) Le développement web mobile, c est (idéalement) : Proposer une version épurée d un site Au design et format du contenu adapté Consultable à l aide du browser de l appareil Indépendamment de la plate-forme utilisée En impactant seulement la couche de présentation 3

4 jquerymobile - Présentation Pour se faire, des frameworks existent, notamment Add-on de jquery, librairie javascript (côté client) Actuellement en alpha 3 Exploite les nouveautés fournies par HTML 5 et CSS 3 4

5 jquerymobile - Principes Avoir un rendu d applications natives dans un navigateur Une expérience utilisateur unique indépendamment du device Librairie légère 30ko jquery 17ko jquerymobile + 7ko CSS Rétro compatible (Fonctionne sur un browser avec javascript desactivé) Utilisable sur l ensemble du panel des terminaux mobiles 5

6 jquerymobile - Fonctionnement (1/5) Découpage d un écran : Header - body - footer Améliore les composants HTML de la page 6

7 jquerymobile - Fonctionnement (2/5) Utilisation des balises data- de l HTML 5 et autres Lien téléphonique tel: (similaire mailto:) Nouveaux événements jquery adaptés orientationchange : rotation du device taphold : appui long Transitions animées entre les pages 7

8 jquerymobile - Fonctionnement (Navigation 3/5) Par ouverture de nouvelles pages Chargement asynchrone (GET ou POST) Ajout du contenu au DOM Dans une même page à l aide des ancres Plusieurs pages dans un même fichier Le framework propose de gérer l historique 8

9 jquerymobile - Fonctionnement (Navigation 4/5) #Ecran liste Le lien pointe sur une ancre dans le même fichier #Ecran détail 9

10 jquerymobile - Mise en place Refactoring à réaliser sur le site (navigation) Adaptation du design (Look & feel à conserver) Peut devenir complexe si l on souhaite tuner la navigation : Affichage du minimum d informations Evaluer les navigations types pour charger habillement les éléments fréquemment consultés 10

11 Illustration : Site client AXA Luxembourg 11

12 Illustration : Site client AXA Luxembourg 12

13 Illustration : Site client AXA Luxembourg 13

14 jquerymobile - Avantages Multi plateforme (smartphones, tablettes...) Economie en compétences (pas besoin de choisir java ou objective C) Peu répandu actuellement (novateur) Rapidement assimilé (HTML5) et implémenté Impact faible sur une application (couche présentation), indépendant de la technologie utilisée (HTML) Communauté à laquelle on doit jquery 14

15 jquerymobile - Inconvénients Formatage web avec les limites habituelles Pas d accès aux fonctions du téléphone (caméra...) Sécurité web classique (session, cookies...) Rendu fonction du navigateur client (navigateurs pas à jour, pas de standards mobiles ) Peut demander du temps si optimisé Helpers HTML du langage de présentation rarement à jour 15

16 jquerymobile - Conclusion Framework en alpha 3 mais déjà utilisable Très prometteur Beta pour mars - Release 1.0 en avril Des alternatives existent : jqtouch - également basé sur jquery Sencha Touch - payant, développement javascript iwebkit - Orienté webkit 16