Drupal & Mobilité
-
Upload
jbguerraz -
Category
Technology
-
view
3.790 -
download
6
description
Transcript of Drupal & Mobilité
MobilitéComment Drupal peut-il nous aider ?
Jean-Baptiste Guerraz - [email protected]
Jean-Baptiste GuerrazDirecteur 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 - [email protected]
C’est 40 gros sites Drupalen 2011
1 internaute sur 3 est un mobinaute !
> Source «Médiamétrie – 2ème trimestre 2011» FRANCEFRANCE 20112011
Les Français, connectés & mobiles !
20072007 20112011
+62%en 4 ans+62%en 4 ans
+37%en 4 ans+37%en 4 ans
> Source «Médiamétrie» FRANCEFRANCE
M-Commerce, de belles perspectives !
20102010 20152015FRANCEFRANCE
500 Millions d’€500 Millions d’€
13 Milliards d’€13 Milliards d’€
> Sources « Le marché des contenus mobiles à l’horizon 2015 – Xerfi »
Usage : plus, mais surtout, plus vite !
20112011FRANCEFRANCE> Sources « Xiti Monitor »
Connexion : un débit 3 fois plus lent !
20102010FRANCEFRANCE> Sources « Baromètre des connexions fixes et mobiles - DegroupTest »
Et instable…
Constructeurs & parts de marché
20112011FRANCEFRANCE> Sources « Etude IDC »
La diversité des résolutions…
20112011> Sources « Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spécifications constructeurs »
800x
480(Galaxy)
800x
480(Galaxy)
320 x
240
320 x
240
400 x
240
400 x
240
640X
360
640X
360
480 x
320
480 x
320
960 x 640(Iphone)
960 x 640(Iphone)
800x
480(Dell
Streak)
800x
480(Dell
Streak)
1024X
600
1024X
600
1024 x 768(Ipad)
1024 x 768(Ipad) 1280 x 800
(Galaxy Tab)1280 x 800(Galaxy Tab)1366 x 7681366 x 768
TablettesMobiles
160 x 128160 x 128
BB Curve Nokia C2BB Curve Nokia C2
240x
240
240x
240
FRANCEFRANCE
Plus de navigateurs que d’OS…
20112011FRANCEFRANCE> Sources « Statcounter Global Stats (Janvier à Septembre) » 20102010
3 groupes de navigateurs, que choisir ?
20112011> Sources « Mobile market overview - QuirksMode » MONDEMONDE
Passé-Support CSS & JS passable ou inéxistant-Support HTML3-Moteurs de rendu peu rapides
Passé-Support CSS & JS passable ou inéxistant-Support HTML3-Moteurs de rendu peu rapides
Présent-Bon support CSS & JS-Support HTML 5 partiel (vidéo & audio)-Moteurs de rendu rapides
Présent-Bon support CSS & JS-Support HTML 5 partiel (vidéo & audio)-Moteurs de rendu rapides
Futur-Très bon support CSS (3) & JS-Support HTML 5 avançé (Cache, DB, …)-Moteurs de rendu performants
Futur-Très bon support CSS (3) & JS-Support HTML 5 avançé (Cache, DB, …)-Moteurs de rendu performants
Comment diffuser large ?
20112011> Sources « Google ;) » FRANCEFRANCE
Market places, où en sommes-nous ?
20112011> Sources « ABI research – Business Wire »
MONDEMONDE
Usage : App ou Web (-app) ?
20112011> Sources « Flurry – Comscore » USAUSA
On conclut ? Le mobile, faut y aller ! (et même penser m-commerce)
Le mobinaute est un boulimique hyperactif ! : Droit au but et vite ! Pensez aux caches, à l’ergonomie, aux contenus !
Une connexion lente (et pas permanente) pour un hyperactif : attention aux ressources et au DOM ! Et pensez aux caches client !
3 groupes de résolutions : pensez adaptif, flexible ! Responsive ! Vraiment, attention au DOM !
2 versions c’est assez ! : un thème « futur » et probablement un thème « passé » (le « présent » se contentera du « passé »).
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-AgentCache-Control : privateExpires : Sat, 21 Aug 1982 06:00:00 GMT
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" }}
Plan de redirection : Drupal or Not ? Dès que possible !
Minimisez 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 !
Create a new domain record :
easy !
Sélection du thème ?
“Domain Theme”=
Click & Play !
“Domain Theme”=
Click & Play !
Sélection du thème ?
Click…
Click…
…& Play !
…& 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.
“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)
« 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 »
« Views » + « Domain Views »=
Du contenu « sur mesure »
Sélection du gabarit ?
« Domain Ctools » + « Panels »=
Une ergonomie dédiée & évolutive !
« Domain Ctools » + « Panels »=
Une ergonomie dédiée & évolutive !
Sélection du gabarit ?
Click…
Click…
Sélection du gabarit ? Alternative « Mobile Tools »
Click…
Click…
Sélection du gabarit ?
…& Play !
…& 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 conditionner la sélection de la feuille de style a appliquer au HTML.
Minimiser l’arbre DOM = aussi peu de HTML que possible.
N’incluez que les fichiers JavaScript et CSS nécessaires (pensez au hook_preprocess_page pour « nettoyer » les inclusions CSS & JS)
Responsive Design = Parcimonie ! (Masquer 50% des éléments HTML… C’est trop !).
Un thème « Fluid » ?
m.slate.fr sur iPhone
Un thème « Fluid » ?
m.slate.fr sur iPad
Un thème « Responsive » ?
browser.nokia.com
« 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 » (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
Type d’appareil
Propriétés de l’appareil.
Nous pourrions ajouter :“and (orientation:
landscape)”
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,Parameters);
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 terminée, les données sont perdues)
La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques méga-octets
// Sauvegarde de la donnéesessionStorage.setItem(’Drupagora', ‘Drupal pour les DSI et chefs de projets’);// Lecture de la donnée sauvegardéealert("Drupagora, c’est : " + sessionStorage.getItem(’Drupagora')); // Suppression de la donnéesessionStorage.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éga-octets
// Sauvegarde de la donnéelocalStorage.setItem(’Drupagora', ‘Drupal pour les DSI et chefs de projets’);// Lecture de la donnée sauvegardéealert("Drupagora, c’est : " + localStorage.getItem(’Drupagora')); // Suppression de la donnéelocalStorage.removeItem(’Drupagora');
Fonctionnalités HTML5 ? DB 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éga-octets, cette limite peut être outrepassé si l’utilisateur le permet (un prompt lui demande l’autorisation).
Les requêtes SQL pour « DB storage » sont semblables a des requêtes SQL classiques.
Fonctionnalités HTML5 ?
Cache 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 :<html manifest="site.manifest”>
Structure du fichier manifest :CACHE MANIFEST# v0.1CACHE:index.htmlcss/style.cssimg/logo.pngFALLBACK:/ /offline.htmlNETWORK:*
VersionSa mise à jour
entraine une mise à jour du cache par le
navigateur
VersionSa mise à jour
entraine une mise à jour du cache par le
navigateurCACHE
Le liste des fichiers a placer
en cache
CACHELe liste des
fichiers a placer en cache
FALLBACKListe des fichiers a
remplacer par d’autre si “offline”
FALLBACKListe des fichiers a
remplacer par d’autre si “offline” NETWORK
Liste des fichiers disponibles
uniquement si “online”
NETWORKListe des fichiers
disponibles uniquement si
“online”
Le mime-type du fichier
manifest doit être
“text/cache-manifest”
Le mime-type du fichier
manifest doit être
“text/cache-manifest”
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…
Pour aller plus loin, retrouver cette présentation sur « SlideShare »
Cherchez « jbguerraz »
Jean-Baptiste Guerraz - [email protected]