Drupal & Mobilité

52
Mobilité Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - [email protected]

description

Conférence Drupagora : Drupal & Mobilité (Multi-Devices).

Transcript of Drupal & Mobilité

Page 1: Drupal & Mobilité

MobilitéComment Drupal peut-il nous aider ?

Jean-Baptiste Guerraz - [email protected]

Page 2: Drupal & Mobilité

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]

Page 3: Drupal & Mobilité

C’est 40 gros sites Drupalen 2011

Page 4: Drupal & Mobilité

1 internaute sur 3 est un mobinaute !

> Source «Médiamétrie – 2ème trimestre 2011» FRANCEFRANCE 20112011

Page 5: Drupal & Mobilité

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

Page 6: Drupal & Mobilité

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 »

Page 7: Drupal & Mobilité

Usage : plus, mais surtout, plus vite !

20112011FRANCEFRANCE> Sources « Xiti Monitor »

Page 8: Drupal & Mobilité

Connexion : un débit 3 fois plus lent !

20102010FRANCEFRANCE> Sources « Baromètre des connexions fixes et mobiles - DegroupTest »

Et instable…

Page 9: Drupal & Mobilité

Constructeurs & parts de marché

20112011FRANCEFRANCE> Sources « Etude IDC »

Page 10: Drupal & Mobilité

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

Page 11: Drupal & Mobilité

Plus de navigateurs que d’OS…

20112011FRANCEFRANCE> Sources « Statcounter Global Stats (Janvier à Septembre) » 20102010

Page 12: Drupal & Mobilité

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

Page 13: Drupal & Mobilité

Comment diffuser large ?

20112011> Sources « Google ;) » FRANCEFRANCE

Page 14: Drupal & Mobilité

Market places, où en sommes-nous ?

20112011> Sources « ABI research – Business Wire »

MONDEMONDE

Page 15: Drupal & Mobilité

Usage : App ou Web (-app) ?

20112011> Sources « Flurry – Comscore » USAUSA

Page 16: Drupal & Mobilité

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

Page 17: Drupal & Mobilité

Quel socle architectural pour Drupal ?

Module « MobileTools » Module « Domain » (« Domain Access » & « Domain Theme »)

Page 18: Drupal & Mobilité

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

Page 19: Drupal & Mobilité

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.

Page 20: Drupal & Mobilité

Multi-site avec Drupal ?

Create a new domain record :

easy !

Create a new domain record :

easy !

Page 21: Drupal & Mobilité

Sélection du thème ?

“Domain Theme”=

Click & Play !

“Domain Theme”=

Click & Play !

Page 22: Drupal & Mobilité

Sélection du thème ?

Click…

Click…

…& Play !

…& Play !

Page 23: Drupal & Mobilité

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.

Page 24: Drupal & Mobilité

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)

Page 25: Drupal & Mobilité

Sélection du contenu ?

« Views » + « Domain Views »=

Du contenu « sur mesure »

« Views » + « Domain Views »=

Du contenu « sur mesure »

Page 26: Drupal & Mobilité

Sélection du gabarit ?

« Domain Ctools » + « Panels »=

Une ergonomie dédiée & évolutive !

« Domain Ctools » + « Panels »=

Une ergonomie dédiée & évolutive !

Page 27: Drupal & Mobilité

Sélection du gabarit ?

Click…

Click…

Page 28: Drupal & Mobilité

Sélection du gabarit ? Alternative « Mobile Tools »

Click…

Click…

Page 29: Drupal & Mobilité

Sélection du gabarit ?

…& Play !

…& Play !

Page 30: Drupal & Mobilité

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 !).

Page 31: Drupal & Mobilité

Un thème « Fluid » ?

m.slate.fr sur iPhone

Page 32: Drupal & Mobilité

Un thème « Fluid » ?

m.slate.fr sur iPad

Page 33: Drupal & Mobilité

Un thème « Responsive » ?

browser.nokia.com

Page 34: Drupal & Mobilité

« 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)”

Page 35: Drupal & Mobilité

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

Page 36: Drupal & Mobilité

Les formulaires & HTML5

Formulaires

Pas de plugin JQuery / custom JS-CSS HTML5 Forms (email, url, tel, couleur, range, search,

nombres, dates)

Page 37: Drupal & Mobilité

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>

Page 38: Drupal & Mobilité

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.

Page 39: Drupal & Mobilité

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');

Page 40: Drupal & Mobilité

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');

Page 41: Drupal & Mobilité

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.

Page 42: Drupal & Mobilité

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.

Page 43: Drupal & Mobilité

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”

Page 44: Drupal & Mobilité

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, …

Page 45: Drupal & Mobilité

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.

Page 46: Drupal & Mobilité

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)

Page 47: Drupal & Mobilité

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

Page 48: Drupal & Mobilité

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

Page 49: Drupal & Mobilité

To be continued…

Page 50: Drupal & Mobilité

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

Page 51: Drupal & Mobilité

Merci pour l’écoute !

A mon tour… Des questions ?

Jean-Baptiste Guerraz - [email protected]

Page 52: Drupal & Mobilité

Pour aller plus loin, retrouver cette présentation sur « SlideShare »

Cherchez « jbguerraz »

Jean-Baptiste Guerraz - [email protected]