drupal day 2011 - mobiled!
DESCRIPTION
In questo talk illustreremo le tecniche più semplici, efficaci e rapide per rendere il vostro sito/portale in Drupal mobile compliant. Applicando principi di responsive design e design su griglie analizzeremo gli elementi più utili da lasciare sulla vostra interfaccia mobile. Capiremo quale migliore strategia di implementazione intraprendere tra l'esportazione di dati in json, rss oppure realizzare direttamente web views per il sito mobile e per essere contenuti in un'app mobile che faccia da contenitore negli ecosistemi iOS e Android, principalmente.TRANSCRIPT
![Page 1: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/1.jpg)
MobileD!Carlo Frinolli
![Page 2: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/2.jpg)
Mobile OS marketshare
2
iOSJava MEAndroidSymbianBlackBerryWindows PhoneSamsungWindows Mobile
![Page 3: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/3.jpg)
Mobile Browser market share
3
SafariOpera MiniAndroid BrowserSymbianBlackBerryProprietary or UndetectableMicrosoft Internet ExplorerOpera Mobile
![Page 4: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/4.jpg)
Cos’è cambiato nella UX
4
Gli pseudo smartphone:
• Interfacce punta e clicca
• Scrolling con il cursore > Dolore
• Rendering di CSS e JS scadente o proprietario• Esistono gli stati di HOVER sui link!
![Page 5: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/5.jpg)
Touch devices
5
Il dito è il puntatore!
•Lo scrolling è più naturale
•C’è landscape e portrait
•Le pagine possono zoomare
•non esiste più l’ HOVER!
![Page 6: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/6.jpg)
Quindi?
6
![Page 7: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/7.jpg)
Efficacia e contesto
Il modo in cui l’informazione è consumata
efficacemente dipende dal contesto e dal
device.
Le soluzioni a questo problema sono di design
in senso progettuale.
7
![Page 8: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/8.jpg)
Responsive design
8
![Page 9: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/9.jpg)
Disegnare per N dispositivi?
Il responsive design vi aiuta a passare da un
layout all’altro attraverso media queries di CSS3
o script js.
I layout però vanno progettati tenendo conto
dei fattori di forma delle caratteristiche
tecniche e dei contesti d’uso.
9
![Page 10: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/10.jpg)
Basta il responsive design?
10
No, non basta. Ma aiuta.
![Page 11: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/11.jpg)
Mobile first!Diventiamo pragmatici.
11
![Page 12: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/12.jpg)
Disegnamo per il Mobile first
12
Immaginiamo di avere un stack
di dispositivi dalle caratteristiche
progressive.
![Page 13: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/13.jpg)
Old smartphones
13
old “smart”phones
30% delmercato!e il 25% degli utenti internet.
![Page 14: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/14.jpg)
Modern smartphones
14
Usando il principio di
progressive enhancement
aggiungiamo effetti e funzionalità
iOS e Android (forse WP7... ma forse eh!)
old “smart”phones
![Page 15: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/15.jpg)
Ma le app?
15
come son fatte?
![Page 16: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/16.jpg)
La struttura delle App
16
Le app mobili sono costruite come il resto.
Dati e interfaccia.
L’interfaccia responsiva può essere una soluzione.
Ma cosa c’entra DRUPAL?
![Page 17: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/17.jpg)
Views datasource
17
Estrarre dati da Drupal in formati maneggevoli
![Page 18: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/18.jpg)
Views datasource
18
“Views Datasource is a set of plugins for Drupal Views for rendering content in a number of shareable, reusable formats based on XML, JSON and XHTML.”
È uno style plugin di Views che esporta i
dati in formati maneggevoli come JSON o
XML.
![Page 19: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/19.jpg)
Il risultato della view in json
{
"nodes" : [
{
"node" : {
"title" : "BBox",
"field_project_main_img_fid" : "http://n3.local/sites/default/files/imagecache/homepage_queue/bbox_4.jpg",
"field_project_subtitle_value" : "the cloud under version control.",
"tags" : "below the line\nsaas\nsocial media marketing\nui\nux\nwebapp\n"
}
}
}
19
![Page 20: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/20.jpg)
Quale flessibilità
views_json o views_xml sono style plugin di
views.
La flessibilità di views assieme all’uso degli
argomenti possono permettere di fare delle
chiamate alla web app Drupal molto pulite ed
eleganti.
http://mydomain.com/works/bbox
20
![Page 21: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/21.jpg)
JSON o XML?
21
1M objects
0 1250000.0 2500000.0 3750000.0 5000000.0
JSON XML
Il case study mostra un tempo di trasmissione molto più basso per JSON rispetto XML, pur essendo molto più CPU intensive.
Un tempo di trasferimento molto basso è ottimale quando si tratta di fare integrazioni mobili.
![Page 22: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/22.jpg)
Vantaggi e svantaggi
Vantaggi: l'interfaccia dell'app può essere
completamente disaccoppiata dai dati.
Svantaggi: le politiche di approvazione dell'app.
Vale soprattutto per AppStore di Apple.
22
![Page 23: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/23.jpg)
Il caso Facebook
23
![Page 24: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/24.jpg)
App wrapper e webviews
Facebook è noto per aggiornare
compulsivamente l'esperienza
utente.
La strategia usata è quella di
avere un’applicazione contenitore
e contenuto web.
Il resto è HTML5, CSS3.
24
![Page 25: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/25.jpg)
Cosa c’entra DRUPAL?
Con l’approccio usato in views_datasource
cioè parsando un oggetto JSON o utilizzando
temizzazione responsive possiamo simulare
un’interfaccia mobile.
Ignoriamo header, footer, e transizioni di
pagina, e usando quest’approcio possiamo
arrivare a ottimi risultati.
25
![Page 26: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/26.jpg)
BBox
26
come Proof of Concept, e sviluppi futuri.
![Page 28: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/28.jpg)
Sviluppi futuri
BBox - la nostra alternativa open-source a
Dropbox è già integrato con Tikal (CRM basato
su Drupal - presentato nella sala accanto), e
questa Proof of Concept rappresenta il primo
risultato tangibile di OpenAttitude.
28
![Page 29: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/29.jpg)
Linkografia
(Responsive Design - SM) - http://j.mp/rwUImN
(Responsive Design - ALA) - http://j.mp/sGyJP9
(Mobile first! Pragmatic RD) - http://j.mp/t1Ea9S
(Responsive Design Pragmatico) - http://j.mp/s5vhkp
(JSON vs XML Benchmark) - http://j.mp/uScHyL
29
![Page 30: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/30.jpg)
Carlo Frinolli
follow me on twitter @carl0s_follow my company @nois3lab
ringraziamenti speciali a Baku (per aver scritto BBox),a Giuseppe Aiello di fleka design e ai nostri partnerBmeme, con cui condividiamo OpenAttitude.
![Page 31: Drupal Day 2011 - MobileD!](https://reader034.vdocument.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/31.jpg)