Drupal Day 2011 - MobileD!
description
Transcript of Drupal Day 2011 - MobileD!
![Page 1: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/1.jpg)
MobileD!Carlo Frinolli
![Page 2: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/6.jpg)
Quindi?
6
![Page 7: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/8.jpg)
Responsive design
8
![Page 9: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/11.jpg)
Mobile first!Diventiamo pragmatici.
11
![Page 12: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/15.jpg)
Ma le app?
15
come son fatte?
![Page 16: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/23.jpg)
Il caso Facebook
23
![Page 24: Drupal Day 2011 - MobileD!](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022051411/546fc139b4af9ff5638b45f3/html5/thumbnails/31.jpg)