Sviluppare applicazioni Domino Web per dispositivi Mobili

GoingGoing MobileMobileSviluppare applicazioni web Domino per Sviluppare applicazioni web Domino per

dispositivi mobilidispositivi mobili

Autore: Giuseppe GrassoProfessione: Sviluppatore

domino point day2009

2

•• Le piattaforme mobiliLe piattaforme mobili•• Gli strumenti del mestiereGli strumenti del mestiere•• Le tecnicheLe tecniche•• Design ed ArchitetturaDesign ed Architettura•• Il futuroIl futuro

AgendaAgenda


3

•• Rendere uno sviluppatore web Rendere uno sviluppatore web capace di migrare allo sviluppo web capace di migrare allo sviluppo web mobilemobile

ObbiettivoObbiettivo


Le piattaforme mobiliLe piattaforme mobili

•• Nokia Symbian OSNokia Symbian OSRIM RIM BlackberryBlackberryApple Apple iPhoneiPhone

•• AndroidAndroid, , palmpalmwebOSwebOS, , palmpalmgarnetgarnet, windows , windows mobile, linuxmobile, linux


Applicazioni nativeApplicazioni native

•• Ogni Ogni vendorvendor ha una o piha una o piùù piattaforme proprietarie piattaforme proprietarie ed ed sdksdk (c, c++, java, (c, c++, java, objectiveobjective cc…….).)

•• Java ME Java ME èè la piattaforma pila piattaforma piùù diffusa fra i diffusa fra i devicedevice con 2 con 2 notevoli eccezioni: notevoli eccezioni: –– AndroidAndroid ((DalvikDalvik non esattamente java)non esattamente java)

–– iPhoneiPhone (non se ne parla, espressamente proibito il codice (non se ne parla, espressamente proibito il codice interpretato)interpretato)

•• FlashliteFlashlite tenta di porsi come piattaforma (per tenta di porsi come piattaforma (per androidandroid, , palmpalm weboswebos, , symbiansymbian e e blackberryblackberry) ma ) ma Apple Apple ““fa resistenzafa resistenza””


Applicazioni webApplicazioni web

•• Decisamente limitate rispetto alle applicazioni Decisamente limitate rispetto alle applicazioni nativenative

•• ÈÈ possibile realizzare applicazioni siti ed possibile realizzare applicazioni siti ed applicazioni fruibili dalla maggioranza dei applicazioni fruibili dalla maggioranza dei dispositivi mobilidispositivi mobili

•• Ci sono tendenze diffuse fra i vari Ci sono tendenze diffuse fra i vari vendorvendor per per rendere pirendere piùù competitive le applicazioni web al competitive le applicazioni web al confronto di quelle native.confronto di quelle native.


Con cosa abbiamo a che fareCon cosa abbiamo a che fare

Dobbiamo considerando i diversi fattori che influenzano Dobbiamo considerando i diversi fattori che influenzano pesantemente lpesantemente l’’utilizzo di dispositivi mobili:utilizzo di dispositivi mobili:

•• Banda limitataBanda limitata

•• Latenza elevataLatenza elevata

•• BatterieBatterie

•• Costo dei datiCosto dei dati

•• Metodi di inputMetodi di input

•• MemoriaMemoria

•• ProcessoreProcessore

•• SchermoSchermo

•• Interfaccia di reteInterfaccia di rete


displaydisplay

•• Grande varietGrande varietàà di di dimensionidimensioni

•• PortraitPortrait//landscapelandscape anche anche sullo stesso sullo stesso devicedevice


bandabanda

•• GPRS UMTS 3G 2.5G EDGE HSPAGPRS UMTS 3G 2.5G EDGE HSPA

•• Le torri radio sono una risorsa limitataLe torri radio sono una risorsa limitata

–– Per lo piPer lo piùù con banda limitatacon banda limitata

•• Non può che peggiorareNon può che peggiorare

–– Sul medio/breve termineSul medio/breve termine

–– ChiavetteChiavette

–– DiffusioneDiffusione

–– InvestimentiInvestimenti

–– redditivitredditivitàà


Inoltre: Inoltre:

•• Batteria: qualsiasi cosa facciamo, consuma cicli Batteria: qualsiasi cosa facciamo, consuma cicli CPU, quindi costa carica residuaCPU, quindi costa carica residua

•• Costo dei dati: roaming, soglie di traffico, costi Costo dei dati: roaming, soglie di traffico, costi a a ““pacchettopacchetto””

•• Memoria: non Memoria: non èè un desktop, idiosincrasie un desktop, idiosincrasie architetturaliarchitetturali

•• Rete: diretta, Rete: diretta, proxyproxy basedbased, mista, mista


LL’’utente mobileutente mobile

Il peggior tipo di utente possibile:Il peggior tipo di utente possibile:

•• InfedeleInfedele

•• Vuole le sue informazioni subitoVuole le sue informazioni subito

•• Mentre Mentre èè distrattodistratto

•• ÈÈ fortemente limitato nellfortemente limitato nell’’inputinput

•• Ha difficoltHa difficoltàà a recepire la recepire l’’outputoutput

•• Soglie di attesa ridotteSoglie di attesa ridotte


Case Case historyhistory: : ieri seraieri sera

•• 17 speaker17 speaker

•• Nella lobby di un hotelNella lobby di un hotel

•• Cercano tutti lCercano tutti l’’indirizzo del ristoranteindirizzo del ristorante


Case Case historyhistory: : ieri seraieri sera

•• Grande esposizioni di dispositivi mobiliGrande esposizioni di dispositivi mobili

•• Top di gamma, ultima generazioneTop di gamma, ultima generazione

•• Tutti abbiamo fallitoTutti abbiamo fallito

•• Soluzione: il desktop della lobbySoluzione: il desktop della lobby

•• Il sito del ristorante? Il sito del ristorante? BheBhe…… non facciamo non facciamo nomi.nomi.

•• Lieto fine: si Lieto fine: si èè mangiato alla grande!!!mangiato alla grande!!!


Gli strumenti del mestiereGli strumenti del mestiere


Come procedere?Come procedere?

•• Sviluppo iniziale con i browser desktop:Sviluppo iniziale con i browser desktop:firefoxfirefox, safari, , safari, chromechrome, opera (safari e , opera (safari e chromechromesono basati su sono basati su webkitwebkit) ed i ) ed i validatorivalidatori mobilimobili

•• Prima fase di controllo ed affinamento con Prima fase di controllo ed affinamento con emulatori e simulatoriemulatori e simulatori

•• Test di usabilitTest di usabilitàà, verifiche finale e collaudo su , verifiche finale e collaudo su dispositivi fisicidispositivi fisici. (obbligatoria ed inevitabile, . (obbligatoria ed inevitabile, emulatori e simulatori non sono in grado di emulatori e simulatori non sono in grado di restituire al pieno la restituire al pieno la ““useruser--experienceexperience””))


Mobile markupMobile markup

Da: http://Da: http://en.wikipedia.orgen.wikipedia.org//wikiwiki/File:Mobile_Web_Standards_Evolution_Vector.svg/File:Mobile_Web_Standards_Evolution_Vector.svg


ValidatoriValidatori: : W3C W3C mobileOKmobileOK CheckerChecker

•• Basato suBasato suW3C W3C mobileOKmobileOK BasicBasicTestsTests 1.01.0http://www.w3.org/TR/http://www.w3.org/TR/mobileOKmobileOK--basic10basic10--tests/tests/

•• molto preciso ed molto preciso ed affidabileaffidabile

•• http://validator.w3.org/http://validator.w3.org/mobile/mobile/


ValidatoriValidatori: : mobiReadymobiReady

•• Diversi test, non solo il markupDiversi test, non solo il markup

•• Testa pagine, markup e sitoTesta pagine, markup e sito

•• http://http://ready.mobiready.mobi//


Emulatori e simulatoriEmulatori e simulatori

•• AndroidAndroid skdskd: : http://developer.android.com/sdk/index.htmlhttp://developer.android.com/sdk/index.html

•• iPhoneiPhone ((macmac onlyonly))http://developer.apple.com/iphone/http://developer.apple.com/iphone/

•• BlackBerryBlackBerry SmartphoneSmartphone SimulatorsSimulatorshttp://na.blackberry.com/eng/developers/resourceshttp://na.blackberry.com/eng/developers/resources/simulators.jsp/simulators.jsp

•• Nokia Nokia sdksdkhttp://www.forum.nokia.com/info/sw.nokia.com/id/http://www.forum.nokia.com/info/sw.nokia.com/id/ec866fabec866fab--4b764b76--49f649f6--b5a5b5a5--af0631419e9c/S60_All_in_One_SDKs.htmlaf0631419e9c/S60_All_in_One_SDKs.html


Emulatore Emulatore AndroidAndroid

•• Scarica ed installa lScarica ed installa l’’sdksdkhttp://http://developer.android.comdeveloper.android.com//sdksdk//index.htmlindex.html

•• DallDall’’ SDK SDK SetupSetup scarica i scarica i packagespackages da googleda google

•• Crea i tuoi AVD (Crea i tuoi AVD (AndroidAndroid VirtualVirtual DeviceDevice) secondo ) secondo necessitnecessitàà

•• Esegui gli AVDEsegui gli AVD


Emulatori: NokiaEmulatori: Nokia

•• Scarica dal forum Scarica dal forum nokianokia sdksdk per il per il devicedevice da emulareda emulare

•• Installa e lancia lInstalla e lancia l’’emulatore dai programmi sotto emulatore dai programmi sotto ““nokianokia developerdeveloper toolstools””


Forum Forum nokianokia: : Remote Remote DeviceDevice AccessAccess•• Accesso remoto a veri Accesso remoto a veri devicedevice nokianokia•• Nulla da installare, ma ambiente condiviso in un pool di Nulla da installare, ma ambiente condiviso in un pool di

devicesdevices, quindi possibili code di attesa e problemi di , quindi possibili code di attesa e problemi di riservatezzariservatezza

•• http://www.forum.nokia.com/http://www.forum.nokia.com/Technology_TopicsTechnology_Topics//ApplicationApplication_Quality_Quality//TestingTesting/Remote_Device_Access//Remote_Device_Access/


simulatori: simulatori: BlackberryBlackberry•• Scarica uno o piScarica uno o piùù emulatori per ogni emulatori per ogni devicedevice//carriercarrier•• Scarica il Scarica il ““BlackBerryBlackBerry®® EmailEmail and MDS and MDS ServicesServices

Simulator PackageSimulator Package””•• Esegui lEsegui l’’MDS simulator quindi esegui lMDS simulator quindi esegui l’’emulatore emulatore

blackberryblackberry•• http://http://na.blackberry.comna.blackberry.com//engeng//developersdevelopers//browserdbrowserd

evev//


Simulatori: Simulatori: iPhoneiPhone

•• Solo su Solo su MacMac OS X OS X SnowSnowLeopardLeopardhttp://http://developer.apple.cdeveloper.apple.comom//iphoneiphone//Oppure simulatori Oppure simulatori hardware: hardware:

–– LL’’iPodiPod touchtouch di tua mogliedi tua moglie

–– Vinci lVinci l’’iPodiPod TouchTouch messo messo in palio da uno dei nostri in palio da uno dei nostri sponsor!sponsor!


Simulatori: Opera MiniSimulatori: Opera Mini

•• http://www.opera.com/mini/demo/http://www.opera.com/mini/demo/


Le tecnicheLe tecniche


Identificare i Identificare i devicedevice mobilimobili

•• DeviceAtlasDeviceAtlas

•• WurflWurfl

•• Forniscono un servizio ed un database di Forniscono un servizio ed un database di ““signaturesignature””dei dei devicedevice mobili per consentirne lmobili per consentirne l’’identificazione.identificazione.


Identificare i Identificare i devicedevice mobili: mobili:

quick&dirtyquick&dirty

mobile:=0;mobile:=0;mobile:=0;mobile:=0;mobile:=0;mobile:=0;mobile:=0;mobile:=0;

uauauauauauauaua:=@LowerCase(:=@LowerCase(:=@LowerCase(:=@LowerCase(:=@LowerCase(:=@LowerCase(:=@LowerCase(:=@LowerCase(@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader@GetHTTPHeader("("("("("("("("UserUserUserUserUserUserUserUser--------AgentAgentAgentAgentAgentAgentAgentAgent"));"));"));"));"));"));"));"));

xwapxwapxwapxwapxwapxwapxwapxwap:=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader("xxxxxxxx--------wapwapwapwapwapwapwapwap--------profileprofileprofileprofileprofileprofileprofileprofile");");");");");");");");

acceptacceptacceptacceptacceptacceptacceptaccept:=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader(":=@GetHTTPHeader("AcceptAcceptAcceptAcceptAcceptAcceptAcceptAccept");");");");");");");");

uasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignatures:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|p:=@Explode("up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");hone|android|blackberry";"|");

magentsmagentsmagentsmagentsmagentsmagentsmagentsmagents:="w3c ":":="w3c ":":="w3c ":":="w3c ":":="w3c ":":="w3c ":":="w3c ":":="w3c ":"acsacsacsacsacsacsacsacs--------":"":"":"":"":"":"":"":"alavalavalavalavalavalavalavalav":"alca":"":"alca":"":"alca":"":"alca":"":"alca":"":"alca":"":"alca":"":"alca":"amoiamoiamoiamoiamoiamoiamoiamoi":"":"":"":"":"":"":"":"audiaudiaudiaudiaudiaudiaudiaudi":"":"":"":"":"":"":"":"avanavanavanavanavanavanavanavan":"":"":"":"":"":"":"":"benqbenqbenqbenqbenqbenqbenqbenq":"":"":"":"":"":"":"":"birdbirdbirdbirdbirdbirdbirdbird":"":"":"":"":"":"":"":"blacblacblacblacblacblacblacblac":"":"":"":"":"":"":"":"blazblazblazblazblazblazblazblaz":"":"":"":"":"":"":"":"brewbrewbrewbrewbrewbrewbrewbrew":"":"":"":"":"":"":"":"cellcellcellcellcellcellcellcell":"":"":"":"":"":"":"":"cldccldccldccldccldccldccldccldc":"":"":"":"":"":"":"":"cmdcmdcmdcmdcmdcmdcmdcmd--------":"":"":"":"":"":"":"":"dangdangdangdangdangdangdangdang":"":"":"":"":"":"":"":"docodocodocodocodocodocodocodoco":"":"":"":"":"":"":"":"ericericericericericericericeric":"":"":"":"":"":"":"":"hipthipthipthipthipthipthipthipt":"inno":"":"inno":"":"inno":"":"inno":"":"inno":"":"inno":"":"inno":"":"inno":"ipaqipaqipaqipaqipaqipaqipaqipaq":"java":"":"java":"":"java":"":"java":"":"java":"":"java":"":"java":"":"java":"jigsjigsjigsjigsjigsjigsjigsjigs":"":"":"":"":"":"":"":"kddikddikddikddikddikddikddikddi":"":"":"":"":"":"":"":"kejikejikejikejikejikejikejikeji":"":"":"":"":"":"":"":"lenolenolenolenolenolenolenoleno":"":"":"":"":"":"":"":"lglglglglglglglg--------cccccccc":"":"":"":"":"":"":"":"lglglglglglglglg--------dddddddd":"":"":"":"":"":"":"":"lglglglglglglglg--------gggggggg":"":"":"":"":"":"":"":"lgelgelgelgelgelgelgelge--------":"":"":"":"":"":"":"":"mauimauimauimauimauimauimauimaui":"":"":"":"":"":"":"":"maxomaxomaxomaxomaxomaxomaxomaxo":"":"":"":"":"":"":"":"midpmidpmidpmidpmidpmidpmidpmidp":"":"":"":"":"":"":"":"mitsmitsmitsmitsmitsmitsmitsmits":"":"":"":"":"":"":"":"mmefmmefmmefmmefmmefmmefmmefmmef":"":"":"":"":"":"":"":"mobimobimobimobimobimobimobimobi":"":"":"":"":"":"":"":"motmotmotmotmotmotmotmot--------":"moto":"":"moto":"":"moto":"":"moto":"":"moto":"":"moto":"":"moto":"":"moto":"mwbpmwbpmwbpmwbpmwbpmwbpmwbpmwbp":"":"":"":"":"":"":"":"necnecnecnecnecnecnecnec--------":"":"":"":"":"":"":"":"newtnewtnewtnewtnewtnewtnewtnewt":"":"":"":"":"":"":"":"nokinokinokinokinokinokinokinoki":"":"":"":"":"":"":"":"operoperoperoperoperoperoperoper":"":"":"":"":"":"":"":"palmpalmpalmpalmpalmpalmpalmpalm":"pana":"":"pana":"":"pana":"":"pana":"":"pana":"":"pana":"":"pana":"":"pana":"pantpantpantpantpantpantpantpant":"":"":"":"":"":"":"":"philphilphilphilphilphilphilphil":"play":"":"play":"":"play":"":"play":"":"play":"":"play":"":"play":"":"play":"portportportportportportportport":"":"":"":"":"":"":"":"proxproxproxproxproxproxproxprox":"":"":"":"":"":"":"":"qwapqwapqwapqwapqwapqwapqwapqwap":"":"":"":"":"":"":"":"sagesagesagesagesagesagesagesage":"":"":"":"":"":"":"":"samssamssamssamssamssamssamssams":"":"":"":"":"":"":"":"sanysanysanysanysanysanysanysany":"":"":"":"":"":"":"":"schschschschschschschsch--------":"sec":"sec":"sec":"sec":"sec":"sec":"sec":"sec--------":"":"":"":"":"":"":"":"sendsendsendsendsendsendsendsend":"seri":"":"seri":"":"seri":"":"seri":"":"seri":"":"seri":"":"seri":"":"seri":"sghsghsghsghsghsghsghsgh--------":"":"":"":"":"":"":"":"sharsharsharsharsharsharsharshar":"":"":"":"":"":"":"":"siesiesiesiesiesiesiesie--------":"":"":"":"":"":"":"":"siemsiemsiemsiemsiemsiemsiemsiem":"":"":"":"":"":"":"":"smalsmalsmalsmalsmalsmalsmalsmal":"":"":"":"":"":"":"":"smarsmarsmarsmarsmarsmarsmarsmar":"":"":"":"":"":"":"":"sonysonysonysonysonysonysonysony":"":"":"":"":"":"":"":"sphsphsphsphsphsphsphsph--------":"":"":"":"":"":"":"":"symbsymbsymbsymbsymbsymbsymbsymb":"t":"t":"t":"t":"t":"t":"t":"t--------mo":"teli":"mo":"teli":"mo":"teli":"mo":"teli":"mo":"teli":"mo":"teli":"mo":"teli":"mo":"teli":"timtimtimtimtimtimtimtim--------":"":"":"":"":"":"":"":"toshtoshtoshtoshtoshtoshtoshtosh":"":"":"":"":"":"":"":"tsmtsmtsmtsmtsmtsmtsmtsm--------":"upg1":"":"upg1":"":"upg1":"":"upg1":"":"upg1":"":"upg1":"":"upg1":"":"upg1":"upsiupsiupsiupsiupsiupsiupsiupsi":"":"":"":"":"":"":"":"vkvkvkvkvkvkvkvk--------vvvvvvvv":"":"":"":"":"":"":"":"vodavodavodavodavodavodavodavoda":"":"":"":"":"":"":"":"wapwapwapwapwapwapwapwap--------":"":"":"":"":"":"":"":"wapawapawapawapawapawapawapawapa":"":"":"":"":"":"":"":"wapiwapiwapiwapiwapiwapiwapiwapi":"":"":"":"":"":"":"":"wappwappwappwappwappwappwappwapp":"":"":"":"":"":"":"":"waprwaprwaprwaprwaprwaprwaprwapr":"":"":"":"":"":"":"":"webcwebcwebcwebcwebcwebcwebcwebc":"":"":"":"":"":"":"":"winwwinwwinwwinwwinwwinwwinwwinw":"":"":"":"":"":"":"":"winwwinwwinwwinwwinwwinwwinwwinw":"":"":"":"":"":"":"":"xdaxdaxdaxdaxdaxdaxdaxda":"":"":"":"":"":"":"":"xdaxdaxdaxdaxdaxdaxdaxda--------";";";";";";";";

@If@If@If@If@If@If@If@If((((((((@Contains@Contains@Contains@Contains@Contains@Contains@Contains@Contains((((((((acceptacceptacceptacceptacceptacceptacceptaccept;";";";";";";";"applicationapplicationapplicationapplicationapplicationapplicationapplicationapplication/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;/vnd.wap.xhtml+xml");mobile:=mobile+1;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If((((((((@Contains@Contains@Contains@Contains@Contains@Contains@Contains@Contains((((((((uauauauauauauaua;;;;;;;;uasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignaturesuasignatures);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If((((((((@Contains@Contains@Contains@Contains@Contains@Contains@Contains@Contains((((((((uauauauauauauaua;;;;;;;;magentsmagentsmagentsmagentsmagentsmagentsmagentsmagents);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;);mobile:=mobile+1;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If((((((((@length@length@length@length@length@length@length@length((((((((xwapxwapxwapxwapxwapxwapxwapxwap)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;)>0;mobile:=mobile+1;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If((((((((@Contains@Contains@Contains@Contains@Contains@Contains@Contains@Contains((((((((uauauauauauauaua;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;;"opera mini");mobile:=mobile+1;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If((((((((@Contains@Contains@Contains@Contains@Contains@Contains@Contains@Contains((((((((uauauauauauauaua;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;;"windows");mobile:=0;@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing@Nothing););););););););

@If@If@If@If@If@If@If@If(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))(mobile=0;"desktop";"mobile:"+@Text(mobile))


CssCss per per devicedevice mobilimobili

•• <link <link <link <link <link <link <link <link rel=rel=rel=rel=rel=rel=rel=rel=""""""""stylesheetstylesheetstylesheetstylesheetstylesheetstylesheetstylesheetstylesheet" " " " " " " " href=href=href=href=href=href=href=href="..." "..." "..." "..." "..." "..." "..." "..." type=type=type=type=type=type=type=type="text/"text/"text/"text/"text/"text/"text/"text/csscsscsscsscsscsscsscss" " " " " " " "

media=media=media=media=media=media=media=media=""""""""handheldhandheldhandheldhandheldhandheldhandheldhandheldhandheld"> "> "> "> "> "> "> ">

•• <style <style <style <style <style <style <style <style type=type=type=type=type=type=type=type="text/"text/"text/"text/"text/"text/"text/"text/csscsscsscsscsscsscsscss" " " " " " " " media=media=media=media=media=media=media=media=""""""""handheldhandheldhandheldhandheldhandheldhandheldhandheldhandheld">...</style> ">...</style> ">...</style> ">...</style> ">...</style> ">...</style> ">...</style> ">...</style>

•• <style <style <style <style <style <style <style <style type=type=type=type=type=type=type=type="text/"text/"text/"text/"text/"text/"text/"text/csscsscsscsscsscsscsscss"> "> "> "> "> "> "> "> @media@media@media@media@media@media@media@media handheldhandheldhandheldhandheldhandheldhandheldhandheldhandheld { ... } </style> { ... } </style> { ... } </style> { ... } </style> { ... } </style> { ... } </style> { ... } </style> { ... } </style>

•• CSS Mobile CSS Mobile ProfileProfile 2.0: 2.0: http://www.w3.org/TR/http://www.w3.org/TR/csscss--mobilemobile//

•• un un csscss per media per media ““handheldhandheld”” può essere usato può essere usato come primo intervento per rendere siti come primo intervento per rendere siti tradizionali pitradizionali piùù comodamente fruibili da comodamente fruibili da dispositivi mobili.dispositivi mobili.


Serviamo il Serviamo il contentcontent--typetype correttocorretto

••applicationapplication//xhtml+xmlxhtml+xml

••UTFUTF--88

……. Se ovviamente stiamo in . Se ovviamente stiamo in XHTMLXHTML--MP ovvero:MP ovvero:<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "--------//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml"http://www.wapforum.org/DTD/xhtml--------mobile10.dtd">mobile10.dtd">mobile10.dtd">mobile10.dtd">mobile10.dtd">mobile10.dtd">mobile10.dtd">mobile10.dtd">

<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "--------//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"//WAPFORUM//DTD XHTML Mobile 1.1//EN"

"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/techtechtechtechtechtechtechtech/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml--------mobile11.dtd">mobile11.dtd">mobile11.dtd">mobile11.dtd">mobile11.dtd">mobile11.dtd">mobile11.dtd">mobile11.dtd">

<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "--------//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"//WAPFORUM//DTD XHTML Mobile 1.2//EN"

"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/"http://www.openmobilealliance.org/techtechtechtechtechtechtechtech/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml/DTD/xhtml--------mobile12.dtd">mobile12.dtd">mobile12.dtd">mobile12.dtd">mobile12.dtd">mobile12.dtd">mobile12.dtd">mobile12.dtd">


meta meta HandheldFriendlyHandheldFriendly

<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="HandheldFriendlyHandheldFriendlyHandheldFriendlyHandheldFriendlyHandheldFriendlyHandheldFriendlyHandheldFriendlyHandheldFriendly" content="true"/>" content="true"/>" content="true"/>" content="true"/>" content="true"/>" content="true"/>" content="true"/>" content="true"/>

IndicaIndica al browser al browser cheche la la paginapagina èè destinatadestinata a a dispositividispositivi mobilimobili ((eses: non : non èènecessarionecessario scalarescalare ilil contenutocontenuto))


meta Viewportmeta Viewport

<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="<meta name="viewportviewportviewportviewportviewportviewportviewportviewport" content="width=device" content="width=device" content="width=device" content="width=device" content="width=device" content="width=device" content="width=device" content="width=device--------width; height=devicewidth; height=devicewidth; height=devicewidth; height=devicewidth; height=devicewidth; height=devicewidth; height=devicewidth; height=device--------height; userheight; userheight; userheight; userheight; userheight; userheight; userheight; user--------scalable=0; initialscalable=0; initialscalable=0; initialscalable=0; initialscalable=0; initialscalable=0; initialscalable=0; initialscalable=0; initial--------scale=1.0; maximumscale=1.0; maximumscale=1.0; maximumscale=1.0; maximumscale=1.0; maximumscale=1.0; maximumscale=1.0; maximumscale=1.0; maximum--------scale=1.4"/>scale=1.4"/>scale=1.4"/>scale=1.4"/>scale=1.4"/>scale=1.4"/>scale=1.4"/>scale=1.4"/>

ControllaControlla come come ilil contenutocontenuto devedeve essereessere ridimensionatoridimensionato rispettorispettoal display del al display del dispositivodispositivo. .

width= devicewidth= device--width | floatingwidth | floating--point (200point (200——10,000)10,000)

height= deviceheight= device--height | floatingheight | floating--point (223point (223——10,000)10,000)

useruser--scalable= 0 | 1 yes | no scalable= 0 | 1 yes | no

intialintial--scale= scale= floatingfloating--point ( >0 point ( >0 –– 10 )10 )

maximummaximum--scale= scale= floatingfloating--point ( >0 point ( >0 –– 10 )10 )


Performance: Performance: expireexpire

•• @SetHTTPHeader@SetHTTPHeader("("ExpiresExpires";";@Adjust@Adjust((@Now@Now([([ServerTimeServerTime]);0;]);0;0;0;0;30;0));0;0;0;30;0));

•• Diciamo per quanto tempo il browser può mantenere valida Diciamo per quanto tempo il browser può mantenere valida la pagina nella cache senza la necessitla pagina nella cache senza la necessitàà di controllare con il di controllare con il server se server se èè stata modificata.stata modificata.

•• Non per pagine, Non per pagine, csscss, javascript o risorse immagine, serve una , javascript o risorse immagine, serve una regola sul server, vedi: regola sul server, vedi: http://www.ibm.com/developerworks/lotus/library/lshttp://www.ibm.com/developerworks/lotus/library/ls--resp_head_rules/index.htmlresp_head_rules/index.html


Performance: Performance: expireexpire (8.5.1?)(8.5.1?)

•• WOHAAAA!!!!!!WOHAAAA!!!!!!


Attributo Attributo accesskeyaccesskey

<a <a <a <a <a <a <a <a href=href=href=href=href=href=href=href=""""""""index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html" " " " " " " " accesskey=accesskey=accesskey=accesskey=accesskey=accesskey=accesskey=accesskey=““““““““1">Home</a>1">Home</a>1">Home</a>1">Home</a>1">Home</a>1">Home</a>1">Home</a>1">Home</a>

•• Fondamentali per i dispositivi non Fondamentali per i dispositivi non touchtouch

•• Sii consistente Sii consistente eses::UK Government recommendation foraccess keysS - Skip navigation1 - Home page2 - What's new3 - Site map4 - Search5 - Frequently Asked Questions (FAQ) 6 - Help 7 - Complaints procedure 8 - Terms and conditions9 - Feedback form0 - Access key details


TagTag labellabel

<<<<<<<<labellabellabellabellabellabellabellabel><input ><input ><input ><input ><input ><input ><input ><input …………………….. ></.. ></.. ></.. ></.. ></.. ></.. ></.. ></labellabellabellabellabellabellabellabel>>>>>>>>

•• Usiamo la Usiamo la labellabel per per ““ingrandireingrandire”” ll’’area del area del controllo di inputcontrollo di input

•• ((optgroupoptgroup labellabel èè unun’’altra cosa) altra cosa)


Miglioramenti incrementaliMiglioramenti incrementali

•• Serviamo contenuti specifici per il dispositivo, Serviamo contenuti specifici per il dispositivo, ad esempio adeguandoci alle convenzioni del ad esempio adeguandoci alle convenzioni del vendorvendor per migliorare lper migliorare l’’experienceexperience degli utentidegli utenti


Design ed ArchitetturaDesign ed Architettura


designdesign

•• Pagine piccole (20k Pagine piccole (20k maxmax))

•• Manteniamo un layout sempliceManteniamo un layout semplice

•• Scroll solo in una dimensioneScroll solo in una dimensione

•• Se il target Se il target èè unun’’unica piattaforma, unica piattaforma, manteniamo le convenzioni del manteniamo le convenzioni del vendorvendor ((eses: Nokia Mobile Web : Nokia Mobile Web TemplatesTemplateshttp://www.forum.nokia.com/http://www.forum.nokia.com/TecTechnology_Topicshnology_Topics//Web_TechnologieWeb_Technologiess//BrowsingBrowsing//Web_TemplatesWeb_Templates//))

header

Navigazione primaria

contenuti

footer

Navigazione secondaria


designdesign

•• PrioritPrioritàà ai contenutiai contenuti

•• Bersagli GRANDI (Bersagli GRANDI (labellabel nei nei formform)!)!

•• Identifica i link in modo chiaro ed evidenteIdentifica i link in modo chiaro ed evidente

•• La dimensione dei font varia molto piLa dimensione dei font varia molto piùù facilmente che sui facilmente che sui desktopdesktop

•• Contrasto e pochi coloriContrasto e pochi colori

•• TABLE?????TABLE?????

•• Accesso rapido: Accesso rapido: m.azienda.itm.azienda.it o o azienda.itazienda.it/mobile/mobile

•• Alt Alt tagtag per chi ha le immagini disattivate per chi ha le immagini disattivate

•• Margini: piccoli ma che ci siano!Margini: piccoli ma che ci siano!

•• Markup Markup validovalido……. .


architetturaarchitettura

•• TradizionaleTradizionale •• ““proxyproxy””

Domino DB

Domino DB

Mobile app


Architettura Architettura proxyproxy: : m.dominopoint.itm.dominopoint.it

•• Non ho/non desidero Non ho/non desidero accesso ai sorgenti accesso ai sorgenti origineorigine

•• Origini multipleOrigini multiple

•• Evoluzioni separateEvoluzioni separate

•• pipiùù facile di quanto facile di quanto sembrisembri

DB Blog Mobile app

DB Forum


Il futuroIl futuro


Browser Browser BlackberryBlackberry

•• Il browser Il browser BlackberryBlackberry firmwarefirmware 5.0 dovrebbe 5.0 dovrebbe supportare le supportare le xpagesxpages

•• RIM ha acquisito RIM ha acquisito TorchTorch, produttrice di un , produttrice di un ottimo browser basato su ottimo browser basato su webkitwebkit, le , le ““vocivoci”” lo lo vedrebbero sulla piattaforma nel Q1 2010vedrebbero sulla piattaforma nel Q1 2010

•• Quando succederQuando succederàà, tutti i major player , tutti i major player useranno un browser useranno un browser webkitwebkit basedbased ((iPhoneiPhone, , AndroidAndroid e Symbian lo sono gie Symbian lo sono giàà))


Applicazioni mobiliApplicazioni mobili

•• Vedremo sempre piVedremo sempre piùù funzionalitfunzionalitàà corecore del dispositivo del dispositivo esposte al browser via javascript (esposte al browser via javascript (eses: location api): location api)

•• Supporto offline Supporto offline ““a la là”à” google google gearsgears (con)(con)

•• Supporto database locali (Supporto database locali (mysqlmysql))

•• Markup desktopMarkup desktop

•• Diffusione di browser mobili Diffusione di browser mobili ““desktop desktop capablecapable””

•• FrameworkFramework mobili mobili multiplatformmultiplatform


widgetswidgets

•• Sempre piSempre piùù funzionalitfunzionalitàà corecore del dispositivo esposte del dispositivo esposte al browser via javascript (al browser via javascript (eses: location api, bluetooth, : location api, bluetooth, fotocamera etc.)fotocamera etc.)

•• Ajax (giAjax (giàà una realtuna realtàà su alcuni dispositivi)su alcuni dispositivi)

•• Supporto offline a lSupporto offline a làà google google gearsgears

•• Supporto database locali (Supporto database locali (sqlLitesqlLite))

•• Vedremo se i Vedremo se i vendorvendor aderiranno agli standard aderiranno agli standard ((http://www.w3.org/TR/http://www.w3.org/TR/widgetswidgets--reqsreqs// ))


contatticontatti

Giuseppe Grasso:Giuseppe Grasso:

m.dominopoint.itm.dominopoint.it

[email protected]@gmail.com

twitter.comtwitter.com//grassoggrassog

Sviluppare applicazioni Domino Web per dispositivi Mobili

Technology

Transcript of Sviluppare applicazioni Domino Web per dispositivi Mobili