Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal. - Responsive Design - Contextes mobiles (themes mobiles) - Applications Natives et intégrations en Web Services ou HTML5

1. QUE FAIRE POUR CEUX QUI ONT DES
FONDS SOMBRES POUR LEUR SLIDES ?

2. Mobilité & Multi-device avec
par @mtopolov CTO de @adyax & @padcms

3. 100 Experts Drupal, 45 gros projets Drupal en 2011

4. Mobilité ?

5. Web mobile c’est quoi ?
Multiplicité des terminaux
Interfaces tactiles
Utilisation dans un contexte de vie courante
Réseaux à qualité aléatoire / mode offline

6. Multi-device ?

7. Multiplicité des terminaux
+ Nombreux ratios (4:3, 16:9, 16:10, 3:4, 1:1...)
+ Diverses résolutions (240x240 -> 2048x1536)
= Importance à adapter le contenu au contenant

8. Tactile ?

9. Interfaces tactiles
Les doigts sont plus gros et gauches que la souris
Le scroll est simple et naturel (mais fatiguant en vertical)
Contenus plus gros et disposés verticalement
Nécessité de feedback visuel (pas de click-click)

10. Usage en conditions
de vie courante

11. Théorie

12. La pratique c’est ça

13. ça

14. ça

15. ou même ça !

16. Contexte de vie courante
Vitesse & Pertinence (couper le superflu)
Le plus important d’abord (reograniser le contenu)
Profiter, de la localisation (si pertinent)

17. EDGE ou Offline

18. Réseau aléatoire et offline
Votre contenu devrait être disponible en cas de perte
de la connexion internet
Le contenu doit être le plus léger possible
Le temps de réponse de votre serveur réduit au
minimum.

19. Pourquoi est-ce important ?
6 000 000 000 000 000 000 octets / mois

20. Explosion du trafic mobile
en 2016 le trafic mobile sera multiplié par 30
Internet mobile c’est déjà 50% du trafic en Afrique et
Asie
200 millions de tablettes dans le monde
Aujourd’hui le trafic mobile c’est 50 fois le trafic
broadband.

21. Je ne le vois pas...
Poule/oeuf : les gens ne (re)viennent pas car votre site
n’est pas adapté aux terminaux
Référencement mobile n’est pas que du SEO
(présence en App Store, Raccourcis Safari, TV
connectés, portails mobiles, google mobile)
Votre contenu n’est pas utilisé en mobilité (mais ce
n’est pas une fatalité)

22. Solutions

23. Solutions Drupal Mobile
Responsive Design
Thème mobile (contexte mobile)
Apps Natives (PhoneGap, Titanium, ou DYI)
Un mot sur le web local

24. Que faire pour qui ?
Responsive Thème Mobile App native
eCommerce OUI
Media NON OUI OUI
Réseaux Sociaux NON OUI
Marques OUI NON
Bases de données OUI NON
ONG/Gov OUI NON

25. Responsive Design
(ou comment briller en soirée geek)

26. Super trendy

27. Responsive design
Très sympa en démo client (l’effet «Waouuu»)
Une réelle difficulté lors de l’intégration HTML = 2 fois
plus long à faire
Nécessite un vrai travail fonctionnel en amont
Avantage : peu d’impact sur le développement pur

28. Coté Drupal ?
Omega, un starter thème responsive & grid (D7
uniquement)
Globalement le responsive ne concerne que très peu
Drupal (Panels?)
Penser à gérer les presets différents pour ImageCache

29. Concrètement
<link href="/css/screen.css" type="text/css" rel="stylesheet"
media="all" />
<link rel="stylesheet" media="only screen and (max-width:
1020px)" href="/css/screen_800.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width:
600px)" href="/css/screen_320.css" type="text/css" />

30. Un peu de JS
$(document).ready(function(){
if(
screen.width < 750 ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
){
$('body').addClass('this-is-mobile');
};

31. Quelques exemples responsive

32. Quelques exemples responsive

33. Quelques exemples responsive

34. Quelques exemples responsive

35. Quelques exemples responsive

36. Quelques exemples responsive

37. Theme mobile
(ou plutôt le contexte mobile !)

38. Theme mobile
Quand switcher sur le contexte mobile ?
On switch pas de theme, mais bien de contexte,
les Views, Panels, Modules custom sont impactés...
Pour aller vite, utiliser jQuery Mobile, si le client est ok.

39. Quand switcher ?
Le plus tôt possible (LB, Proxy).
Ne surtout pas le faire dans Drupal (Browscap,
Wurfl...)
Load Cache /
HTTP Drupal
Balancer Proxy

40. Varnish (1/2)
Cookie ? UA Erreur Custom Redirect
if (!req.http.Cookie ~ "mdevice=desktop") {
set req.http.X-Device = "pc";
if (req.http.User-Agent ~ "iP(hone|od)" || req.http.User-Agent ~ "Android" ||
req.http.User-Agent ~ "Symbian" || req.http.User-Agent ~ "BlackBerry" || req.http.User-
Agent ~ "^SonyEricsson" || req.http.User-Agent ~ "^Nokia" || req.http.User-Agent ~
"^SAMSUNG" || req.http.User-Agent ~ "^LG" || req.http.User-Agent ~ " webOS") {
set req.http.X-Device = "mobile";
}

41. Varnish (2/2)
Cookie ? UA Erreur Custom Redirect
if(req.http.X-Device == "mobile") {
if(req.http.host !~ "m.erol.adyax.com:6081") {
error 751 "m.erol.adyax.com:6081"; } }
sub vcl_error {
if (obj.status == 751) {
if (obj.response ~ "m.erol.adyax.com:6081") {
set obj.http.Location = "http://m.erol.adyax.com:6081" req.url;
set obj.http.Vary = "Cookie";
set obj.http.Cache-Control = "private";
set obj.http.Expires = "Sat, 21 Aug 2022 06:00:00 GMT"; }
set obj.status = 302;
return(deliver); } }

42. Contexte mobile : principes
Theme Custom / JQuery Mobile (Theme)
ImageCache, Panels (Layout)
Mobile Tools / Domains (mobile.tonsite.com)
VARNISH (Redirection HTTP 302)

43. jQuery Mobile
jQuery Mobile: «Touch-Optimized Web Framework for
Smartphones & Tablets »
On peut customiser facilement
Ressemble à l’interface iPhone
http://jquerymobile.com/

44. j-Query pour & contre
Plus Moins
Rapide à mettre en place Votre client doit accepter
(2-3 jours) le design JQuery...
Navigation proche des Difficile à hacker si on
menus du terminal veut aller loin
Vous évite de réfléchir au Vous évite de réfléchir au
mobile mobile

45. Quelques exemples live

46. Quelques exemples live

47. Quelques exemples live

48. Quelques exemples live

49. Quelques exemples live

50. Applications Natives

51. Principes de base
Votre application doit récupérer le contenu depuis
Drupal
Une consultation en mode offline devrait être
possible (stockage interne des données)
Le contenu peut être mis à jour à tout moment

52. Services 3.X
Donne accès aux noeuds, files, taxonomies, users,
views
Gère la sécurité (API Key)
Server API permet de coder ses propres protocoles

53. Problèmes courants
Absence de structure dans les données (à cause de
CCK)
SOAP n’est pas standard et buggué
Pas de WSDL
Problèmes avec les NodeRefs, Medias, Champs
composés

54. <?xml version='1.0' ?>
<methodCall>
<methodName>node.create</methodName>
<params>
<param>
<value>
<struct>
<member>
<name>type</name>
<value>
<string>story</string>
</value>
node.create
</member>
<member>
<name>body</name>
<value>
<string>Create body input</string>
</value>
</member>
<member>
<name>title</name>
<value>
<string>Test title</string>
</value>
</member>
</struct>
</value>
</param>
</params>
</methodCall>

55. SOAP 399 octets
<?xml version='1.0' encoding='UTF-8'?>
<s:Envelope
xmlns:s="http://www.w3.org/2001/06/soap-envelope"
xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/1999/XMLSchema">
<s:Body>
<x:FlickrRequest xmlns:x="urn:flickr">
<method>flickr.echo</method>
<name>value</name>
</x:FlickrRequest>
</s:Body>
</s:Envelope>

56. XML-RPC 99 octets
<?xml version="1.0"?>
<methodCall>
<methodName>flickr.echo</methodName>
<params/>
</methodCall>

57. JSON 68 octets
{
"method" : "flickr.echo",
"params" : null,
"id" : 1
}

58. B-PLIST 52 octets
6270 6c69 7374 3030 d101 0256 6d65 7468
6f64 5b66 6c69 636b 722e 6563 686f 080b
1200 0000 0000 0001 0100 0000 0000 0000
0300 0000 0000 0000 0000 0000 0000 0000
1e

59. ...sinon, il y a le HTML
Toute l’application n’est qu’un loader de WebUI avec
un wrapper d'événements JS
Coté Drupal, on génére des pages HTML (avec Boost)
La synchro est basée sur SVN (http://pecl.php.net/
package/svn/1.0.0)

60. Attention les dangers HTML
Sur les terminaux WebUI sont lents => prégénration
en images + zones clicables
Réécriture des URL (navigation locale)
Intégration de vidéos (parsing des <object>)

61. SG : Drupal web site + Mobile theme + iPad App

62. SG : Drupal web site + Mobile theme + iPad App

63. SG : Drupal web site + Mobile theme + iPad App

64. SG : Drupal web site + Mobile theme + iPad App

65. Liste des modules Mobiles utiles
http://drupal.org/project/mobile_tools
http://drupal.org/project/domain
http://drupal.org/project/browscap
http://drupal.org/project/omega
http://drupal.org/project/views_jqm

66. Premier outil de publication de magazines
pour tablettes (iPad & Android)
OPEN SOURCE
Lancement : 15 Juin !!!
http://padcms.com
@PadCMS

67. Une question ? N'hésitez
pas à nous solliciter.
@adyax, @mtopolov