Mobilité Comment Drupal peut-il nous aider? Jean-Baptiste Guerraz - jbguerraz@gmail.com

Mobilité Comment Drupal peut-il nous aider? Jean-Baptiste Guerraz - jbguerraz@gmail.com

Jean-Baptiste Guerraz Directeur de projet / Adyax Je gère des projets Drupal majeurs pour des comptes tels que Société Générale, Le musée du Louvres, Slate, Orange, Le Quotidien du médecin, Groupe Moniteur... Dans le domaine de la mobilité, j ai eu entre autres la charge du site mobile institutionnel de la Société Générale, de l application IPad "Société Générale - Review", de la version mobile du site Slate.fr... Jean-Baptiste Guerraz - jbguerraz@gmail.com

C est 40 gros sites Drupal en 2011

1 internaute sur 3 est un mobinaute! > Source «Médiamétrie 2ème trimestre 2011» FRANCE 2011

Les Français, connectés & mobiles! +62 % en 4 ans +37 % en 4 ans > Source «Médiamétrie» FRANCE 2007 2011

M-Commerce, de belles perspectives! 500 Millions d 13 Milliards d > Sources «Le marché des contenus mobiles à l horizon 2015 Xerfi» FRANCE 2010 2015

Usage : plus, mais surtout, plus vite! > Sources «Xiti Monitor» FRANCE 2011

Connexion : un débit 3 fois plus lent! Et instable > Sources «Baromètre des connexions fixes et mobiles - DegroupTest» FRANCE 2010

Constructeurs & parts de marché > Sources «Etude IDC» FRANCE 2011

La diversité des résolutions 960 x 640 (Iphone) 40 0x 24 0 48 0x 32 0 800 x 480 800 x 480 (Dell Streak) (Galaxy ) 640 X 360 160 x 128 32 0x 24 0 240 x 240 1024 x 768 (Ipad) 1366 x 768 1024 X 600 1280 x 800 (Galaxy Tab) Mobiles Tablettes BB Curve Nokia C2 > Sources «Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spécifications constructeurs» FRANCE 2011

Autant d OS que de différences! > Sources «Smartphones dans l Europe des 5 Comscore» EUROPE 2011

Plus de navigateurs que d OS > Sources «Statcounter Global Stats (Janvier à Septembre)» FRANCE 2010 2011

3 groupes de navigateur, que choisir? Passé --Support Support CSS & JS passable ou inéxistant --Support Support HTML3 -Moteurs de rendu peu rapides Présent -Bon support CSS & JS --Support Support HTML 5 partiel (vidéo & audio) --Moteurs Moteurs de rendu rapides -Très bon support CSS (3) & JS -Support HTML 5 avançé (Cache, DB, ) -Moteurs de rendu performants > Sources «Mobile market overview QuirksMode» Futur MONDE 2011

Comment diffuser large? > Sources «Google ;)» FRANCE 2011

Market places, où en sommes-nous? > Sources «ABI research Business Wire» MONDE 2011

Usage : App ou Web (-app)? > Sources «Flurry Comscore» USA 2011

On conclut? Le mobile, faut y aller! (et même pensez m-commerce) Le mobinaute est un boulimique hyperactif! : Droit au but et vite! Une connexion lente (et pas permanente) pour un hyperactif : 3 groupes de résolutions : pensez adaptif, flexible! Responsive! 2 versions c est assez! : un thème «futur» et probablement un Pourquoi choisir?! Une App et une Web-App = Hybride

Quel socle architectural pour Drupal? Module «MobileTools» Module «Domain» («Domain Access» & «Domain Theme»)

Plan de redirection : Drupal or Not? Qui peut implémenter le plan de redirection? Le serveur «load-balancer» Le serveur «proxy-cache» Le serveur «HTTP» L applicatif «Drupal», via le module «MobileTools» «Device detection» (CF «WURFL») et «Browser detection» (CF «BrowserCap») peuvent vous aider. N oubliez pas de cacher la redirection! Vary : User-Agent Cache-Control : private Expires : Sat, 21 Aug 1982 06:00:00 GMT

Plan de redirection : Drupal or Not? when HTTP_REQUEST { log local0. "[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header "User-Agent"]" if {[matchclass [HTTP::header "User-Agent"] contains $::MobileUserAgents] } { HTTP::redirect "http://m.holidayextras.co.uk[http::uri]" log local0. "[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header "User-Agent"], redirecting" } } Dès que possible! Minimiser le temps de connexion au serveur applicatif, redirigez dès que possible et cachez la redirection! Mais pas Drupal! Si vous ne disposez que d un serveur web, privilégié l usage du serveur HTTP (début de chaine) à Drupal.

Multi-site avec Drupal? Create a new domain record : easy!

Sélection du thème? Domain Theme = Click & Play!

Sélection du thème? Click & Play!

Sélection du thème? L alternative «Mobile Tools» Mobile Tools : Un seul thème mobile. Peux convenir à une implémentation minimale d un site mobile.

Publication multi-sites? «Domain Access» = Un contrôle fin sur la publication multi-device (node/add node/edit form alter)

Sélection du contenu? «Views» + «Domain Views» = Du contenu «sur mesure»

Sélection du gabarit? «Domain Ctools» + «Panels» = Une ergonomie dédiée & évolutive!

Sélection du gabarit? Click

Sélection du gabarit? Alternative «Mobile Tools» Click

Sélection du gabarit? & Play!

Création du thème? «Mobilize, Don t Miniaturize» (Bob Miller). Pensez «responsive», ou à minima «fluid». Utilisez l argument «media» de la balise «link» pour Minimiser l arbre DOM = aussi peu de HTML que possible. N incluez que les fichiers JavaScript et CSS nécessaires (pensez Responsive Design = Parcimonie! (Masquer 50% des éléments

Un thème «Fluid»? m.slate.fr sur iphone

Un thème «Fluid»? m.slate.fr sur ipad

Un thème «Responsive»? b r o

«Fluid»? «Responsive»? «Fluid» = Tout en pourcentage! «Responsive» = Media queries, une CSS par groupe d écran! (En cascade plutôt qu en remplacement). Le thème «AdaptiveTheme» (et compatible avec Panel Everywhere) est une bonne base! Ou encore le thème «OmegaTheme». Le module «tinysrc» est une bonne solution aux problèmes d images. Type d appareil Propriétés de l appareil. Nous pourrions ajouter : and (orientation: landscape)

Animations & CSS3 Animations Pas de manipulation DOM (element.top & element.left) CSS 3 : Pas de Translate, TranslateX, TranslateY CSS 3 : Translate3D (GPU ) Pas de Jquery DOM Selector API : document.queryselectorall() Ou bien, JQuery Mobile

Les formulaires & HTML5 Formulaires Pas de plugin JQuery / custom JS-CSS HTML5 Forms (email, url, tel, couleur, range, search, nombres, dates)

Fonctionnalités HTML5? Audio <audio src= drupagora.mp3" controls> </video> Vidéo <video src= drupagora.mp4" controls> </video> La lecture automatique n est pas supportée par IOS. L audio n est pas supporté par les premières versions d Android. Cela étant une solution de contournement existe : <video src= drupagora.mp3" onclick="this.play();"> </video>

Fonctionnalités HTML5? Géolocalisation Permet de localiser l utilisateur navigator.geolocation.getcurrentposition(success_callback,error_callback,p arameters); Success_callback : La fonction appelée en cas de géolocalisation réussie (la position sera alors passée en argument) Error_callback : La fonction appelée en cas d échec. Parameters : «{enablehighaccuracy : true}» pour activer le GPS par exemple.

Fonctionnalités HTML5? Session storage Permet de stocker des données localement pour la durée de la visite sur le site (une fois fermé, les données sont perdues) La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques mégaoctets // Sauvegarde de la donnée sessionstorage.setitem( Drupagora', Drupal pour les DSI et chefs de projets ); // Lecture de la donnée sauvegardée alert("drupagora, c est : " + sessionstorage.getitem( Drupagora')); // Suppression de la donnée sessionstorage.removeitem( Drupagora');

Fonctionnalités HTML5? Local storage Permet de stocker des données localement pour une durée indéterminée La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques mégaoctets // Sauvegarde de la donnée localstorage.setitem( Drupagora', Drupal pour les DSI et chefs de projets ); // Lecture de la donnée sauvegardée alert("drupagora, c est : " + localstorage.getitem( Drupagora')); // Suppression de la donnée localstorage.removeitem( Drupagora');

Fonctionnalités HTML5? Permet de stocker des données localement pour une durée indéterminée.

Fonctionnalités HTML5? Cac he Les applications «offline» utilisent «l application cache» du navigateur, qui permet : D utiliser une application web ou de naviguer sur un site sans connexion internet. D améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local. De réduire la charge du serveur, puisqu en effet, il n enverra que les fichiers qui auront changés depuis le dernier passage de l utilisateur. Attention : le cache d une application est limité à 5Mo.

Fonctionnalités HTML5? Cache Un petit exemple Déclaration de l usage du cache application : Version <html manifest="site.manifest > Le mime-type Sa mise à jour du fichier Structure du fichier manifest : entraine une mise manifest doit à jour du cache CACHE MANIFEST être par le navigateur CACHE text/cache# v0.1 manifest Le liste des CACHE: fichiers a placer en index.html cache css/style.css FALLBACK img/logo.png Liste des fichiers FALLBACK: a remplacer par / /offline.html d autre si offline NETWORK Liste des fichiers NETWORK: disponibles * uniquement si online

Optimisations de performances? Aussi peu d éléments HTML que possible Un design simple Du contenu adapté au mobile (pas de romans avec 15 photos) Aussi peu de Javascript que possible Des comportements simples Se décharger sur le navigateur HTML5 (form, cache,...) autant que possible CSS3 (Translate3D, Gradient, ) autant que possible Cache, cache, et encore cache Varnish, Redirections, HTML, JS, CSS, Images,

Drupal-App-ify? Une application native : une connexion à Drupal via le module Services! Une application hybride : un site web consulté via une application native qui embarque la version API du navigateur mobile (Safari Mobile, etc..) Attention, la version API ne réagit pas exactement comme la version navigateur. L usage du HTML5 et du CSS3 est indispensable pour une fluidité similaire à une applicaton native. Le support du mode offline est aussi indispensable.

Drupal-App-ify : Native, comment? Concept Créer une application native. Utiliser Drupal comme source de données via le module Services. Implémentation Titanium! Supporte 2 plateformes (IOS, Android) Rendu natif des éléments HTML/CSS (convertion)

Drupal-App-ify : Hybride, comment? Concept Embarquer un navigateur dans une application. Exposer en JavaScript les fonctions native (photo, vidéo, acceleromètre, contacts, stockages, notifications, ). Implémentation PhoneGap! Supporte 7 plateformes (IOS, Android, RIM, WebOS, Symbian, Bada, Windows Phone) Fondé sur un socle HTML5/CSS3/JS

SocieteGenerale.com Un bel exemple! Un site, un site mobile, une application IPad : L ensemble entièrement généré par (le même) Drupal, et publiant, en partie, les mêmes articles

To be continued

Le premier CMS Open Source pour les tablettes. Disponible en téléchargement Q1 2012. Beta privée en cours

Merci pour l écoute! A mon tour Des questions? Jean-Baptiste Guerraz - jbguerraz@gmail.com

Pour aller plus loin, retrouver cette présentation sur «SlideShare» Cherchez «jbguerraz» Jean-Baptiste Guerraz - jbguerraz@gmail.com