Sviluppare applicazioni Domino Web per dispositivi Mobili

851 views

Published on

l mondo stà cambiando e siamo sempre più "connessi". L'esigenza sempre più pressante di ottimizzare le procedure e ridurre i costi porta ad un sempre maggiore interesse verso soluzioni fruibili anche da dispositi mobili.

Vedremo cosa serve per sviluppare siti ed applicazioni web destinate a dispositivi mobili: le caratteristiche, le tecniche e gli strumenti necessari alla produzione di applicazioni sulle maggiori piattaforme mobili, con particolare attenzione ai dispositivi rim, apple e nokia.

La sessione si rivolge a sviluppatori web che desiderino ampliare il proprio skill set con la capacità di esporre le proprie soluzioni sulle reti mobili.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
851
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sviluppare applicazioni Domino Web per dispositivi Mobili

  1. 1. Going Mobile Sviluppare applicazioni web Domino per dispositivi mobili Autore: Giuseppe Grasso Professione: Sviluppatore
  2. 2. domino point day2009 Agenda • Le piattaforme mobili • Gli strumenti del mestiere • Le tecniche • Design ed Architettura • Il futuro 2
  3. 3. domino point day2009 Obbiettivo • Rendere uno sviluppatore web capace di migrare allo sviluppo web mobile 3
  4. 4. domino point day2009 Le piattaforme mobili • Nokia Symbian OS RIM Blackberry Apple iPhone • Android, palm webOS, palm garnet, windows mobile, linux
  5. 5. domino point day2009 Applicazioni native • Ogni vendor ha una o più piattaforme proprietarie ed sdk (c, c++, java, objective c….) • Java ME è la piattaforma più diffusa fra i device con 2 notevoli eccezioni: – Android (Dalvik non esattamente java) – iPhone (non se ne parla, espressamente proibito il codice interpretato) • Flashlite tenta di porsi come piattaforma (per android, palm webos, symbian e blackberry) ma Apple “fa resistenza”
  6. 6. domino point day2009 Applicazioni web • Decisamente limitate rispetto alle applicazioni native • È possibile realizzare applicazioni siti ed applicazioni fruibili dalla maggioranza dei dispositivi mobili • Ci sono tendenze diffuse fra i vari vendor per rendere più competitive le applicazioni web al confronto di quelle native.
  7. 7. domino point day2009 Con cosa abbiamo a che fare Dobbiamo considerando i diversi fattori che influenzano pesantemente l’utilizzo di dispositivi mobili: • Banda limitata • Latenza elevata • Batterie • Costo dei dati • Metodi di input • Memoria • Processore • Schermo • Interfaccia di rete
  8. 8. domino point day2009 display • Grande varietà di dimensioni • Portrait/landscape anche sullo stesso device
  9. 9. domino point day2009 banda • GPRS UMTS 3G 2.5G EDGE HSPA • Le torri radio sono una risorsa limitata – Per lo più con banda limitata • Non può che peggiorare – Sul medio/breve termine – Chiavette – Diffusione – Investimenti – redditività
  10. 10. domino point day2009 Inoltre: • Batteria: qualsiasi cosa facciamo, consuma cicli CPU, quindi costa carica residua • Costo dei dati: roaming, soglie di traffico, costi a “pacchetto” • Memoria: non è un desktop, idiosincrasie architetturali • Rete: diretta, proxy based, mista
  11. 11. domino point day2009 L’utente mobile Il peggior tipo di utente possibile: • Infedele • Vuole le sue informazioni subito • Mentre è distratto • È fortemente limitato nell’input • Ha difficoltà a recepire l’output • Soglie di attesa ridotte
  12. 12. domino point day2009 Case history: ieri sera • 17 speaker • Nella lobby di un hotel • Cercano tutti l’indirizzo del ristorante
  13. 13. domino point day2009 Case history: ieri sera • Grande esposizioni di dispositivi mobili • Top di gamma, ultima generazione • Tutti abbiamo fallito • Soluzione: il desktop della lobby • Il sito del ristorante? Bhe… non facciamo nomi. • Lieto fine: si è mangiato alla grande!!!
  14. 14. domino point day2009 Gli strumenti del mestiere
  15. 15. domino point day2009 Come procedere? • Sviluppo iniziale con i browser desktop: firefox, safari, chrome, opera (safari e chrome sono basati su webkit) ed i validatori mobili • Prima fase di controllo ed affinamento con emulatori e simulatori • Test di usabilità, verifiche finale e collaudo su dispositivi fisici. (obbligatoria ed inevitabile, emulatori e simulatori non sono in grado di restituire al pieno la “user-experience”)
  16. 16. domino point day2009 Mobile markup Da: http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg
  17. 17. domino point day2009 Validatori: W3C mobileOK Checker • Basato su W3C mobileOK Basic Tests 1.0 http://www.w3.org/TR/ mobileOK-basic10- tests/ • molto preciso ed affidabile • http://validator.w3.org/ mobile/
  18. 18. domino point day2009 Validatori: mobiReady • Diversi test, non solo il markup • Testa pagine, markup e sito • http://ready.mobi/
  19. 19. domino point day2009 Emulatori e simulatori • Android skd: http://developer.android.com/sdk/index.html • iPhone (mac only) http://developer.apple.com/iphone/ • BlackBerry Smartphone Simulators http://na.blackberry.com/eng/developers/resources /simulators.jsp • Nokia sdk http://www.forum.nokia.com/info/sw.nokia.com/id/ ec866fab-4b76-49f6-b5a5- af0631419e9c/S60_All_in_One_SDKs.html
  20. 20. domino point day2009 Emulatore Android • Scarica ed installa l’sdk http://developer.android.com/sdk/index.html • Dall’ SDK Setup scarica i packages da google • Crea i tuoi AVD (Android Virtual Device) secondo necessità • Esegui gli AVD
  21. 21. domino point day2009 Emulatori: Nokia • Scarica dal forum nokia sdk per il device da emulare • Installa e lancia l’emulatore dai programmi sotto “nokia developer tools”
  22. 22. domino point day2009 Forum nokia: Remote Device Access • Accesso remoto a veri device nokia • Nulla da installare, ma ambiente condiviso in un pool di devices, quindi possibili code di attesa e problemi di riservatezza • http://www.forum.nokia.com/Technology_Topics/Application _Quality/Testing/Remote_Device_Access/
  23. 23. domino point day2009 simulatori: Blackberry • Scarica uno o più emulatori per ogni device/carrier • Scarica il “BlackBerry® Email and MDS Services Simulator Package” • Esegui l’MDS simulator quindi esegui l’emulatore blackberry • http://na.blackberry.com/eng/developers/browserd ev/
  24. 24. domino point day2009 Simulatori: iPhone • Solo su Mac OS X Snow Leopard http://developer.apple.c om/iphone/ Oppure simulatori hardware: – L’iPod touch di tua moglie – Vinci l’iPod Touch messo in palio da uno dei nostri sponsor!
  25. 25. domino point day2009 Simulatori: Opera Mini • http://www.opera.com/mini/demo/
  26. 26. domino point day2009 Le tecniche
  27. 27. domino point day2009 Identificare i device mobili • DeviceAtlas • Wurfl • Forniscono un servizio ed un database di “signature” dei device mobili per consentirne l’identificazione.
  28. 28. domino point day2009 Identificare i device mobili: quick&dirty mobile:=0; ua:=@LowerCase(@GetHTTPHeader("User-Agent")); :=@LowerCase(@GetHTTPHeader("User ua:=@LowerCase(@GetHTTPHeader("User-Agent")); xwap:=@GetHTTPHeader(" wap-profile"); :=@GetHTTPHeader("x xwap:=@GetHTTPHeader("x-wap-profile"); accept:=@GetHTTPHeader("Accept"); :=@GetHTTPHeader("Accept accept:=@GetHTTPHeader("Accept"); uasignatures:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p :=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|blackberry";"|"); uasignatures:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|blackberry";"|"); magents:="w3c ":"acs ":"alav":"alca":"amoi":"audi":"avan":"benq":"bird":"blac":"blaz":"brew":"cell":"cldc":"cmd acs- alav":"alca":"amoi":"audi":"avan":"benq":"bird":"blac":"blaz":"brew":"cell":"cldc":"cmd- magents:="w3c ":"acs-":"alav":"alca":"amoi":"audi":"avan":"benq":"bird":"blac":"blaz":"brew":"cell":"cldc":"cmd- ":"dang":"doco":"eric":"hipt":"inno":"ipaq":"java":"jigs":"kddi":"keji":"leno":"lg ":"lg ":"lg ":"lge dang":"doco":"eric":"hipt":"inno":"ipaq":"java":"jigs":"kddi":"keji":"leno":"lg- lg- lg- lge- ":"dang":"doco":"eric":"hipt":"inno":"ipaq":"java":"jigs":"kddi":"keji":"leno":"lg-c":"lg-d":"lg-g":"lge- ":"maui":"maxo":"midp":"mits":"mmef":"mobi":"mot ":"moto":"mwbp":"nec maui":"maxo":"midp":"mits":"mmef":"mobi":"mot- mwbp":"nec- ":"maui":"maxo":"midp":"mits":"mmef":"mobi":"mot-":"moto":"mwbp":"nec- ":"newt":"noki":"oper":"palm":"pana":"pant":"phil":"play":"port":"prox":"qwap":"sage":"sams":"sany":"sch newt":"noki":"oper":"palm":"pana":"pant":"phil":"play":"port":"prox":"qwap":"sage":"sams":"sany":"sch- ":"newt":"noki":"oper":"palm":"pana":"pant":"phil":"play":"port":"prox":"qwap":"sage":"sams":"sany":"sch- ":"sec-":"send":"seri":"sgh ":"shar":"sie ":"siem":"smal":"smar":"sony":"sph ":"symb":"t-mo":"teli":"tim send":"seri":"sgh- shar":"sie- siem":"smal":"smar":"sony":"sph- symb":"t tim- ":"sec-":"send":"seri":"sgh-":"shar":"sie-":"siem":"smal":"smar":"sony":"sph-":"symb":"t-mo":"teli":"tim- ":"tosh":"tsm ":"upg1":"upsi":"vk ":"voda":"wap tosh":"tsm- upsi":"vk- voda":"wap- ":"tosh":"tsm-":"upg1":"upsi":"vk-v":"voda":"wap- ":"wapa":"wapi":"wapp":"wapr":"webc":"winw":"winw":"xda":"xda wapa":"wapi":"wapp":"wapr":"webc":"winw":"winw":"xda":"xda- ":"wapa":"wapi":"wapp":"wapr":"webc":"winw":"winw":"xda":"xda-"; @If(@Contains(accept;"application/vnd.wap.xhtml+xml");mobile:=mobile+1;@Nothing); ;"application/vnd.wap.xhtml+xml");mobile:=mobile+1;@Nothing @If(@Contains(accept;"application/vnd.wap.xhtml+xml");mobile:=mobile+1;@Nothing); @If(@Contains(ua;uasignatures);mobile:=mobile+1;@Nothing); );mobile:=mobile+1;@Nothing @If(@Contains(ua;uasignatures);mobile:=mobile+1;@Nothing); @If(@Contains(ua;magents);mobile:=mobile+1;@Nothing); @If(@Contains(ua;magents);mobile:=mobile+1;@Nothing); );mobile:=mobile+1;@Nothing @If(@length(xwap)>0;mobile:=mobile+1;@Nothing); @If(@length(xwap)>0;mobile:=mobile+1;@Nothing); )>0;mobile:=mobile+1;@Nothing @If(@Contains(ua;"opera mini");mobile:=mobile+1;@Nothing @Nothing); @If(@Contains(ua;"opera mini");mobile:=mobile+1;@Nothing); @If(@Contains(ua;"windows");mobile:=0;@Nothing); ;"windows");mobile:=0;@Nothing @If(@Contains(ua;"windows");mobile:=0;@Nothing); @If(mobile=0;"desktop";"mobile:"+@Text(mobile)) @If(mobile=0;"desktop";"mobile:"+@Text(mobile))
  29. 29. domino point day2009 Css per device mobili • <link rel="stylesheet" href="..." type="text/css" media="handheld"> • <style type="text/css" media="handheld">...</style> • <style type="text/css"> @media handheld { ... } </style> • CSS Mobile Profile 2.0: http://www.w3.org/TR/css-mobile/ • un css per media “handheld” può essere usato come primo intervento per rendere siti tradizionali più comodamente fruibili da dispositivi mobili.
  30. 30. domino point day2009 Serviamo il content-type corretto •application/xhtml+xml •UTF-8 …. Se ovviamente stiamo in XHTML-MP ovvero: "- <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml- "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> "- <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml- tech/DTD/xhtml "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"> "- <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml- tech/DTD/xhtml "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
  31. 31. domino point day2009 meta HandheldFriendly <meta name="HandheldFriendly" content="true"/> Indica al browser che la pagina è destinata a dispositivi mobili (es: non è necessario scalare il contenuto)
  32. 32. domino point day2009 meta Viewport <meta name="viewport" content="width=device-width; height=device- height; user-scalable=0; initial-scale=1.0; maximum- scale=1.4"/> Controlla come il contenuto deve essere ridimensionato rispetto al display del dispositivo. width= device-width | floating-point (200—10,000) height= device-height | floating-point (223—10,000) user-scalable= 0 | 1 yes | no intial-scale= floating-point ( >0 – 10 ) maximum-scale= floating-point ( >0 – 10 )
  33. 33. domino point day2009 Performance: expire • @SetHTTPHeader("Expires";@Adjust(@Now([ServerTime]);0; 0;0;0;30;0)); • Diciamo per quanto tempo il browser può mantenere valida la pagina nella cache senza la necessità di controllare con il server se è stata modificata. • Non per pagine, css, javascript o risorse immagine, serve una regola sul server, vedi: http://www.ibm.com/developerworks/lotus/library/ls- resp_head_rules/index.html
  34. 34. domino point day2009 Performance: expire (8.5.1?) • WOHAAAA!!!!!!
  35. 35. domino point day2009 Attributo accesskey <a href="index.html" accesskey=“1">Home</a> • Fondamentali per i dispositivi non touch UK Government recommendation for • Sii consistente es: access keys S - Skip navigation 1 - Home page 2 - What's new 3 - Site map 4 - Search 5 - Frequently Asked Questions (FAQ) 6 - Help 7 - Complaints procedure 8 - Terms and conditions 9 - Feedback form 0 - Access key details
  36. 36. domino point day2009 Tag label <label><input ….. ></label> • Usiamo la label per “ingrandire” l’area del controllo di input • (optgroup label è un’altra cosa)
  37. 37. domino point day2009 Miglioramenti incrementali • Serviamo contenuti specifici per il dispositivo, ad esempio adeguandoci alle convenzioni del vendor per migliorare l’experience degli utenti
  38. 38. domino point day2009 Design ed Architettura
  39. 39. domino point day2009 design header • Pagine piccole (20k max) Navigazione primaria • Manteniamo un layout semplice • Scroll solo in una dimensione • Se il target è un’unica piattaforma, manteniamo le convenzioni del contenuti vendor (es: Nokia Mobile Web Templates http://www.forum.nokia.com/Tec hnology_Topics/Web_Technologie Navigazione secondaria s/Browsing/Web_Templates/) footer
  40. 40. domino point day2009 design • Priorità ai contenuti • Bersagli GRANDI (label nei form)! • Identifica i link in modo chiaro ed evidente • La dimensione dei font varia molto più facilmente che sui desktop • Contrasto e pochi colori • TABLE????? • Accesso rapido: m.azienda.it o azienda.it/mobile • Alt tag per chi ha le immagini disattivate • Margini: piccoli ma che ci siano! • Markup valido….
  41. 41. domino point day2009 architettura • Tradizionale • “proxy” Domino Domino Mobile DB DB app
  42. 42. domino point day2009 Architettura proxy: m.dominopoint.it • Non ho/non desidero accesso ai sorgenti DB Blog Mobile app origine • Origini multiple • Evoluzioni separate DB Forum • più facile di quanto sembri
  43. 43. domino point day2009 Il futuro
  44. 44. domino point day2009 Browser Blackberry • Il browser Blackberry firmware 5.0 dovrebbe supportare le xpages • RIM ha acquisito Torch, produttrice di un ottimo browser basato su webkit, le “voci” lo vedrebbero sulla piattaforma nel Q1 2010 • Quando succederà, tutti i major player useranno un browser webkit based (iPhone, Android e Symbian lo sono già)
  45. 45. domino point day2009 Applicazioni mobili • Vedremo sempre più funzionalità core del dispositivo esposte al browser via javascript (es: location api) • Supporto offline “a là” google gears (con) • Supporto database locali (mysql) • Markup desktop • Diffusione di browser mobili “desktop capable” • Framework mobili multiplatform
  46. 46. domino point day2009 widgets • Sempre più funzionalità core del dispositivo esposte al browser via javascript (es: location api, bluetooth, fotocamera etc.) • Ajax (già una realtà su alcuni dispositivi) • Supporto offline a là google gears • Supporto database locali (sqlLite) • Vedremo se i vendor aderiranno agli standard (http://www.w3.org/TR/widgets-reqs/ )
  47. 47. domino point day2009 contatti Giuseppe Grasso: m.dominopoint.it giuseppe.grasso@gmail.com twitter.com/grassog

×