• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal & Mobilité
 

Drupal & Mobilité

on

  • 3,697 views

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

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

Statistics

Views

Total Views
3,697
Views on SlideShare
2,990
Embed Views
707

Actions

Likes
4
Downloads
55
Comments
1

10 Embeds 707

http://www.adyax.com 600
http://adyax.com 61
http://corp-v2.adyax.com 18
http://a0.twimg.com 17
http://twitter.com 5
http://www.google.fr 2
http://adyax 1
http://corp-v2.adyax.art 1
http://www.twylah.com 1
http://adyax.dev 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  • D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.

Drupal & Mobilité Drupal & Mobilité Presentation Transcript

  • 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 ! 2007 2011 +62% en 4 ans +37% en 4 ans > Source « Médiamétrie » FRANCE
  • M-Commerce, de belles perspectives ! 2010 2015 FRANCE 500 Millions d’€ 13 Milliards d’€ > Sources « Le marché des contenus mobiles à l ’ horizon 2015 – Xerfi »
  • Usage : plus, mais surtout, plus vite ! 2011 FRANCE > Sources « Xiti Monitor »
  • Connexion : un débit 3 fois plus lent ! 2010 FRANCE > Sources « Baromètre des connexions fixes et mobiles - DegroupTest » Et instable …
  • Constructeurs & parts de marché 2011 FRANCE > Sources « Etude IDC »
  • La diversité des résolutions … 2011 > Sources « Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spécifications constructeurs » 240 x 240 FRANCE 800 x 480 (Galaxy) 320 x 240 400 x 240 640 X 360 480 x 320 960 x 640 (Iphone) 800 x 480 (Dell Streak) 1024 X 600 1024 x 768 (Ipad) 1280 x 800 (Galaxy Tab) 1366 x 768 Tablettes Mobiles 160 x 128 BB Curve Nokia C2
  • Autant d ’ OS que de différences ! 2011 > Sources « Smartphones dans l ’ Europe des 5 - Comscore » EUROPE
  • Plus de navigateurs que d ’ OS … 2011 FRANCE > Sources « Statcounter Global Stats (Janvier à Septembre) » 2010
  • 3 groupes de navigateurs, que choisir ? 2011 > Sources « Mobile market overview - QuirksMode » MONDE
    • 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
    • Futur
    • Très bon support CSS (3) & JS
    • Support HTML 5 avançé (Cache, DB, …)
    • Moteurs de rendu performants
  • Comment diffuser large ? 2011 > Sources « Google ;) » FRANCE
  • Market places, où en sommes-nous ? 2011 > Sources « ABI research – Business Wire » MONDE
  • Usage : App ou Web (-app) ? 2011 > Sources « Flurry – Comscore » USA
  • 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-Agent
      • Cache-Control : private
      • Expires : 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 !
  • 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 C t ools » + « 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 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 » ?
    • b rowser.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 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, J Q uery Mobile
  • Les formulaires & HTML5
    • Formulaires
      • Pas de plugin J Q uery / custom JS-CSS
        • HTML5 Forms (email, url, tel, couleur, range, search, nombres, dates)
  • Fonctionnalités HTML5 ?
    • Audio
      • <audio src= ” drupagora.mp3&quot; controls> </video>
    • Vidéo
      • <video src= ” drupagora.mp4&quot; 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&quot; onclick=&quot;this.play();&quot;> </video>
  • Fonctionnalités HTML5 ?
    • Géolocalisation
      • Permet de localiser l ’ utilisateur
      • navigator.geolocation.getCurrentPosition(Success_callback,Error_callback,Parameters);
        • S uccess_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ée
      • sessionStorage.setItem( ’ Drupagora', ‘ Drupal pour les DSI et chefs de projets ’ );
      • // Lecture de la donnée sauvegardée
      • alert(&quot;Drupagora, c ’ est : &quot; + 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éga-octets
      • // Sauvegarde de la donnée
      • localStorage.setItem( ’ Drupagora', ‘ Drupal pour les DSI et chefs de projets ’ );
      • // Lecture de la donnée sauvegardée
      • alert(&quot;Drupagora, c ’ est : &quot; + localStorage.getItem( ’ Drupagora'));
      • // Suppression de la donnée
      • localStorage.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=&quot;site.manifest”>
        • Structure du fichier manifest :
          • CACHE MANIFEST
          • # v0.1
          • CACHE:
          • index.html
          • css/style.css
          • img/logo.png
          • FALLBACK:
          • / /offline.html
          • NETWORK:
          • *
    Version Sa mise à jour entraine une mise à jour du cache par le navigateur CACHE Le liste des fichiers a placer en cache FALLBACK Liste des fichiers a remplacer par d’autre si “offline” NETWORK Liste des fichiers disponibles uniquement si “online” 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 I P ad : 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