Drupal Day 2011 - MobileD!
31
MobileD! Carlo Frinolli
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 of Drupal Day 2011 - MobileD!
MobileD!Carlo Frinolli
Mobile OS marketshare
2
iOSJava MEAndroidSymbianBlackBerryWindows PhoneSamsungWindows Mobile
Mobile Browser market share
3
SafariOpera MiniAndroid BrowserSymbianBlackBerryProprietary or UndetectableMicrosoft Internet ExplorerOpera Mobile
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!
Touch devices
5
Il dito è il puntatore!
•Lo scrolling è più naturale
•C’è landscape e portrait
•Le pagine possono zoomare
•non esiste più l’ HOVER!
Quindi?
6
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
Responsive design
8
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
Basta il responsive design?
10
No, non basta. Ma aiuta.
Mobile first!Diventiamo pragmatici.
11
Disegnamo per il Mobile first
12
Immaginiamo di avere un stack
di dispositivi dalle caratteristiche
progressive.
Old smartphones
13
old “smart”phones
30% delmercato!e il 25% degli utenti internet.
Modern smartphones
14
Usando il principio di
progressive enhancement
aggiungiamo effetti e funzionalità
iOS e Android (forse WP7... ma forse eh!)
old “smart”phones
Ma le app?
15
come son fatte?
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?
Views datasource
17
Estrarre dati da Drupal in formati maneggevoli
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.
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
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
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.
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
Il caso Facebook
23
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
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
BBox
26
come Proof of Concept, e sviluppi futuri.
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
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
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.
