Drupal Day 2011 - MobileD!

1,426 views
1,374 views

Published on

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.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,426
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Drupal Day 2011 - MobileD!

  1. 1. MobileD!Carlo Frinolli
  2. 2. Mobile OS marketshareiOSJava MEAndroidSymbianBlackBerryWindows PhoneSamsungWindows Mobile 2
  3. 3. Mobile Browser market shareSafariOpera MiniAndroid BrowserSymbianBlackBerryProprietary or UndetectableMicrosoft Internet ExplorerOpera Mobile 3
  4. 4. Cos’è cambiato nella UXGli 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! 4
  5. 5. Touch devicesIl dito è il puntatore!• Lo scrolling è più naturale• C’è landscape e portrait• Le pagine possono zoomare• non esiste più l’ HOVER! 5
  6. 6. Quindi? 6
  7. 7. Efficacia e contestoIl modo in cui l’informazione è consumataefficacemente dipende dal contesto e daldevice.Le soluzioni a questo problema sono di designin senso progettuale. 7
  8. 8. Responsive design 8
  9. 9. Disegnare per N dispositivi?Il responsive design vi aiuta a passare da unlayout all’altro attraverso media queries di CSS3o script js.I layout però vanno progettati tenendo contodei fattori di forma delle caratteristichetecniche e dei contesti d’uso. 9
  10. 10. Basta il responsive design? No, non basta. Ma aiuta. 10
  11. 11. Mobile first!Diventiamo pragmatici. 11
  12. 12. Disegnamo per il Mobile firstImmaginiamo di avere un stackdi dispositivi dalle caratteristicheprogressive. 12
  13. 13. Old smartphones30% delmercato!e il 25% degli utenti internet.old “smart”phones 13
  14. 14. Modern smartphonesUsando il principio diprogressive enhancementaggiungiamo effetti e funzionalità iOS e Android (forse WP7... ma forse eh!) old “smart”phones 14
  15. 15. Ma le app? come son fatte? 15
  16. 16. La struttura delle AppLe app mobili sono costruite come il resto.Dati e interfaccia.L’interfaccia responsiva può essere una soluzione.Ma cosa c’entra DRUPAL? 16
  17. 17. Views datasourceEstrarre dati da Drupal in formati maneggevoli 17
  18. 18. Views datasource“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 idati in formati maneggevoli come JSON oXML. 18
  19. 19. 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 linensaasnsocial media marketingnuinuxnwebappn"      }    }} 19
  20. 20. Quale flessibilitàviews_json o views_xml sono style plugin diviews.La flessibilità di views assieme all’uso degliargomenti possono permettere di fare dellechiamate alla web app Drupal molto pulite edeleganti.http://mydomain.com/works/bbox 20
  21. 21. JSON o XML? JSON XML1M objects 0 1250000.0 2500000.0 3750000.0 5000000.0Il case study mostra un tempo di trasmissione molto più bassoper JSON rispetto XML, pur essendo molto più CPU intensive.Un tempo di trasferimento molto basso è ottimale quando sitratta di fare integrazioni mobili. 21
  22. 22. Vantaggi e svantaggiVantaggi: linterfaccia dellapp può esserecompletamente disaccoppiata dai dati.Svantaggi: le politiche di approvazione dellapp.Vale soprattutto per AppStore di Apple. 22
  23. 23. Il caso Facebook 23
  24. 24. App wrapper e webviewsFacebook è noto per aggiornarecompulsivamente lesperienzautente.La strategia usata è quella diavere un’applicazione contenitoree contenuto web.Il resto è HTML5, CSS3. 24
  25. 25. Cosa c’entra DRUPAL?Con l’approccio usato in views_datasourcecioè parsando un oggetto JSON o utilizzandotemizzazione responsive possiamo simulareun’interfaccia mobile.Ignoriamo header, footer, e transizioni dipagina, e usando quest’approcio possiamoarrivare a ottimi risultati. 25
  26. 26. BBoxcome Proof of Concept, e sviluppi futuri. 26
  27. 27. Demohttp://vimeo.com/33594209 powered by 27
  28. 28. Sviluppi futuriBBox - la nostra alternativa open-source aDropbox è già integrato con Tikal (CRM basatosu Drupal - presentato nella sala accanto), equesta Proof of Concept rappresenta il primorisultato tangibile di OpenAttitude. 28
  29. 29. 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
  30. 30. Carlo Frinollifollow me on twitter @carl0s_follow my company @nois3labringraziamenti speciali a Baku (per aver scritto BBox),a Giuseppe Aiello di fleka design e ai nostri partnerBmeme, con cui condividiamo OpenAttitude.

×