Sviluppare applicazioni Domino Web per dispositivi Mobili

Going Mobile
Sviluppare applicazioni web Domino per
dispositivi mobili

Autore: Giuseppe Grasso
Professione: Sviluppatore

domino point day2009

Agenda

• Le piattaforme mobili
• Gli strumenti del mestiere
• Le tecniche
• Design ed Architettura
• Il futuro

2


Obbiettivo

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

3


Le piattaforme mobili
• Nokia Symbian OS
RIM Blackberry
Apple iPhone
• Android, palm
webOS, palm
garnet, windows
mobile, linux


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”


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.


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


display
• Grande varietà di
dimensioni
• Portrait/landscape anche
sullo stesso device


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à


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


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


Case history: ieri sera
• 17 speaker
• Nella lobby di un hotel
• Cercano tutti l’indirizzo del ristorante


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!!!


Gli strumenti del mestiere


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”)


Mobile markup

Da: http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg


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/


Validatori: mobiReady
• Diversi test, non solo il markup
• Testa pagine, markup e sito
• http://ready.mobi/


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


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


Emulatori: Nokia
• Scarica dal forum nokia sdk per il device da emulare
• Installa e lancia l’emulatore dai programmi sotto
“nokia developer tools”


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/


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/


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!


Simulatori: Opera Mini
• http://www.opera.com/mini/demo/


Le tecniche


Identificare i device mobili
• DeviceAtlas
• Wurfl

• Forniscono un servizio ed un database di “signature”
dei device mobili per consentirne l’identificazione.


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))


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.


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">

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

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


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

Indica al browser che la pagina è destinata a dispositivi mobili (es: non è
necessario scalare il contenuto)


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 )


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


Performance: expire (8.5.1?)

• WOHAAAA!!!!!!


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


Tag label
<label><input ….. ></label>
• Usiamo la label per “ingrandire” l’area del
controllo di input

• (optgroup label è un’altra cosa)


Miglioramenti incrementali
• Serviamo contenuti specifici per il dispositivo,
ad esempio adeguandoci alle convenzioni del
vendor per migliorare l’experience degli utenti


Design ed Architettura


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


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….


architettura
• Tradizionale • “proxy”

Domino Domino Mobile
DB DB app


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


Il futuro


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à)


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


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/ )


contatti

Giuseppe Grasso:
m.dominopoint.it
giuseppe.grasso@gmail.com
twitter.com/grassog

Sviluppare applicazioni Domino Web per dispositivi Mobili

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Sviluppare applicazioni Domino Web per dispositivi Mobili

Ähnlich wie Sviluppare applicazioni Domino Web per dispositivi Mobili (20)

Mehr von Dominopoint - Italian Lotus User Group

Mehr von Dominopoint - Italian Lotus User Group (20)

Sviluppare applicazioni Domino Web per dispositivi Mobili