1. www.follow-app.it
HTML5 e jQuery Mobile
Massimiliano Morga
morga.max@gmail.com
Follow-App è un'attività sperimentale realizzata da ARTI e QIRIS in collaborazione con la Regione Puglia - programma Bollenti Spiriti nell'ambito dell'iniziativa
www.follow-app.it
Innovazione per l’Occupabilità – Azioni a supporto del Piano Straordinario per il Lavoro 2011. PO FSE, Asse VII "Capacità Istituzionale".
2. HTML5 e jQuery Mobile
SOMMARIO
www.follow-app.it Titolo lezione 2 /91
3. Sommario
• Di cosa parliamo in questo incontro?
– Concetti di base su “tecnologie, tool e regole” a supporto dello
sviluppo di APP
• Di cosa non parliamo in questo incontro?
– Come si scrive il codice di una APP: poco tempo a disposizione e
soprattutto è una attività che difficilmente si insegna, ma facilmente si
impara (da soli giocando, provando e riprovando)
– Gaming: esistono librerie, tool, motori grafici e tutta una serie di
strumenti dedicati complessi e che soprattutto non ricadono nelle mie
conoscenze :D )
www.follow-app.it /91
6. Scenario di riferimento
• “Le APP sono ovunque”
• I device per utilizzarle, anche se macroscopicamente
ricadono in 4 tipologie, in realtà sono molto più
numerosi, in continua evoluzione e spesso differenti
tra loro
• Esiste una utenza sempre più esigente che vuole APP
sempre più complesse ed esteticamente gradevoli
www.follow-app.it /91
7. Scenario di riferimento
• Esiste una utenza APP-native (o + in generale
web-native) che non ha vissuto la crescita e
l’evoluzione delle tecnologie: si aspetta che le
APP abbiano tutte lo stesso comportamento,
la stessa struttura e le stesse interfacce
www.follow-app.it /91
8. Scenario
• La durata del time-to-market per chi realizza APP è
fondamentale:
– una buona APP che giunge anche solo seconda su uno dei market non
esprime tutto il valore/business potenziale
– una buona APP che non è manutenuta/aggiornata rapidamente perde
rapidamente utenti e notorietà
• I team di lavoro, soprattutto per le nuove APP sono “piccoli,
ma larghi”:
– Poche persone
– Trasversali a tutte le attività (sviluppo, promozione, vendita, post-
vendita, ecc..)
www.follow-app.it /91
9. Scenario
• Lo scenario è sicuramente ampio e complesso,
ma ci sono una serie di strumenti che ci
possono aiutare ad affrontarlo meglio:
– Tecnologie ad-hoc per lo sviluppo MOBILE
– Utilizzo di tool a supporto dello sviluppo e del
deploy delle APP
– Regole di buona programmazione
www.follow-app.it /91
10. Scenario
• Ognuno degli strumenti indicati ha un
impatto più o meno forte su alcuni degli
aspetti dello scenario:
TIME-TO- GRANDEZZA
DEVICE DIVERSI COMPLESSITA’ APP
MARKET TEAM
Tecnologie ++ +
Tool +++ ++ +++ ++
Regole + + ++ ++
www.follow-app.it /91
11. Scenario
• Nello specifico in questo incontro ci occuperemo dei
seguenti che rappresentano uno spaccato (non
esaustivo) di quelli più diffusi.
• Tecnologie
– HTML5
– jQuery MOBILE
• Tool
– Sencha Touch
– PhoneGAP
www.follow-app.it /91
13. HTML5
• Rappresenta l’evoluzione dell’HTML 4.01 (ultimo
standard ufficiale risalente ormai al 1999)
• Ha l’obiettivo di raccogliere e uniformare tutte le
evoluzioni e i miglioramenti che i singoli produttori
(di browser, di linguaggi e di applicazioni web) hanno
già apportato nei propri prodotti utilizzando soluzioni
proprietarie e plug-in
www.follow-app.it
Reference: http://www.w3schools.com/html5/ /91
14. HTML5
• Pone una spiccata attenzione alla navigazione da
dispositivi mobili ed alla accessibilità dei contenuti
• Impone una più netta separazione di scopi nella
realizzazione delle pagine/applicazioni:
– Struttura definita dai tag di markup
– Visualizzazione definita dalle direttive di stile
– Contenuti definiti dal testo
NON E’ ANCORA STANDARD
(probabile rilascio specifiche ufficiali nel 2014)
www.follow-app.it /91
15. HTML5
• Cosa c’è di nuovo?
– Introduzione di nuovi Elementi e Attributi (ma anche
rimozione di alcuni obsoleti o inutilizzati)
– Introduzione di tag dedicati per audio e video
– Grafica (2D/3D, CSS3, shadow, canvas, SVG, ecc..)
– Possibilità di memorizzare dati localmente (anche con
supporto SQL)
– Server-Sent Events
– Web Applications
www.follow-app.it /91
16. HTML5 - element
• Elementi dedicati a una strutturazione + efficiente
dei contenuti di una pagina (header, footer, figure,
summary, ecc..)
• Elementi dedicati ai media (audio, video, canvas,
ecc..)
• Elementi dedicati ai form e al trattamento dei dati
(datalist, output, ecc.)
• Elementi dedicati alla sicurezza (keygen)
www.follow-app.it /91
18. HTML5 - attribute
• form • input
– autocomplete – autocomplete / autofocus
– novalidate – form / formaction / formenctype /
formmethod / formnovalidate /
formtarget
– height / width (solo per immagini)
– list
– min / max (per date, tempo e numeri)
– multiple (dedicato ai file)
– pattern (utilizzando espressioni
regolari)
– placeholder
– required
www.follow-app.it
– step (per date, tempo e numeri)/91
19. HTML5 – audio/video
• VIDEO - Tre formati sono • AUDIO - Tre formati sono
supportati: MP4, WebM e supportati: : MP3, Wav e
Ogg: Ogg:
Browser MP4 WebM Ogg Browser MP3 Wav Ogg
IE 9 X - - IE 9 X - -
FF 4 - X X FF 4 - X X
Chrome X X X Chrome X X X
Safari X - - Safari X X -
Opera - X X Opera - X X
www.follow-app.it /91
20. HTML5 - Grafica
• canvas: rappresenta solo un container per una area
della pagina “disegnabile”, il disegno viene realizzato
con jscript
• SVG: offre pieno supporto per il formato SVG; è
vettoriale e basato su XML, consente una maggiore
flessibilità di editing, alta qualità delle immagini,
capacità di ricerca e indicizzazione, dotato di
numerosi effetti nativi
www.follow-app.it /91
21. HTML5 - grafica
• Pieno supporto per CSS3:
– Maggiore controllo sui bordi (rounded, image, ecc..)
– Utilizza un qualsiasi font (anche di produzione personale)
– Effetti sul testo
– Trasformazioni 2D/3D
– Animazioni e transizioni evolute (a sostituzione di altri
formati quali Flash, GIF, ecc..)
– Supporto per multi colonne
www.follow-app.it /91
22. HTML5 – Memorizzazione
• Una nuova modalità di memorizzare dati con scope
solo della singola pagina: WebStorage
• Sostituisce parte delle finalità dei cookie, non
vengono trasmessi ad ogni request, ma solo quando
richiesto ed è + veloce/sicura
• Consente di memorizzare anche notevoli quantità di
informazioni esclusivamente lato client
www.follow-app.it /91
23. HTML5 – Memorizzazione
• La struttura di memorizzazione è la classica key/value
– localStorage.nome=“Pippo";
– document.getElementById(“divnome").innerHTML=“Nome
: “ + localStorage.nome;
• Due tipi diversi di Storage
– localStorage: nessuna scadenza
– sessionStorage: solo per la sessione corrente (rimossi alla
chiusura della fienstra di navigazione)
www.follow-app.it /91
24. HTML5 – server-sent
• Consente di intercettare aggiornamenti direttamente
dal server web
• Possibile anche prima di HTML5, ma adesso la
comunicazione è invertita:
– Prima: client a intervalli i tempo richiedeva aggiornamenti
al server
– Adesso: il server notifica al client la presenza di
aggiornamenti e la pagina li intercetta e ne consente la
gestione (utile per contenuti frequente aggiornati)
• I dati ricevuti vanno comunque manipolati ad-hoc
www.follow-app.it /91
25. jQuery Mobile
• Rappresenta un framework cross-platform per
lo sviluppo mobile.
• Basato sulla forte interazione tra HTML5,
CCS3, classico jQuery e jQueryUI
• Pieno supporto per eventi “touch” e i classici
eventi “mouse”
Reference: http://jquery.org/
www.follow-app.it /91
26. jQuery Mobile
• Molto leggero (alcune versioni opportunamente
compresse e “minified” occupano meno di 20K)
• Pieno supporto alle direttive W3C WAI-ARIA (Web
Accessibility Initiative - Accessible Rich Internet
Applications) utilizzando anche una semantica
associata ai metadati di base
– Es: classico slider per la scelta del giorno della settimana =
<div role="slider" aria-valuenow="1" aria-valuemin="1"
aria-valuemax="7" aria-valuetext="Sunday">
www.follow-app.it /91
27. jQuery Mobile
• Vantaggi:
– Solleva lo sviluppatore dall’implementazione di
effetti e complesse regole di styling dei documenti
fornendo una serie di Wdiget già pronti all’uso e
facilmente configurabili.
– Basato su una nomenclatura nominale che utilizza
attribute e reference agli id degli element da
manipolare
www.follow-app.it /91
28. jQuery Mobile
• Struttura di jQuery Mobile
– Basato su elementi di jQuery che eredita ed estende
– Attributi Globali di configurazione
– Eventi e Metodi propri dell’ambiente mobile
Es: tap, taphold, swipe, vmouse, changeorientation,
scroll, dedicati alle pagine (change , remove,
transition)
www.follow-app.it /91
29. jQuery Mobile
• Oggetti predefiniti immediatamente utilizzabili per le
più comuni interfacce e situazioni:
– Button, Radio, Checkbox, Listview
– Dialog, Text
– Page, Link, Header, Footer, Navigation bar
• Ognuno dei precedenti è dotato di caratteristiche
proprie ed estendibile dallo sviluppatore
www.follow-app.it /91
30. jQuery Mobile
• Resa grafica facilmente modificabile grazie a
uno strumento di editing completamente
dedicato al theming:
– ThemeRoller
• E’ possibile modificare l’aspetto di tutti gli
elementi previsti dal framework e realizzare
temi fortemente personalizzati
(http://jquerymobile.com/themeroller/)
www.follow-app.it /91
31. jQuery Mobile
• Numerose possibilità di “riuso” di plugin e di
supporto utilizzando competenze di altri
sviluppatori grazie all’enorme diffusione del
framework di origine jQuery.
• Portali dedicati per plugin ed estensioni
www.follow-app.it /91
32. HTML5 - jQuery Mobile vs APP
• Abbiamo scoperto i vantaggi e le novità di
queste 2 tecnologie … Ma che rapporto hanno
con le APP??
• Siamo abituati a considerare una APP come un
classico programma stand-alone simile a quelli
che troviamo sui nostri “PC old-style” invece…
www.follow-app.it /91
33. HTML5 - jQuery Mobile vs APP
• Le APP si possono suddividere in due macrocategorie:
– Native: sono realizzate come delle vere e proprie applicazioni
“classiche”, utilizzando i linguaggi nativi dei diversi OS (Object-C, Java,
.NET) e le librerie e le potenzialità che ognuno di essi mette a
disposizione
– Browsable (o web-based): sono basate sul web, estendono cioè il
concetto di browser. Sono pagine HTML con widget e funzionalità più
o meno ricche ed esteticamente attraenti; sono ospitate in specifici
container per essere utilizzate come APP
Ovviamente oltre a questa suddivisione vi è la possibilità di
avere mix di entrambe le categorie
www.follow-app.it /91
34. HTML5 - jQuery Mobile vs APP
• Una ricerca di ADOBE nel 2010 indicava esplicitamente
l’utilizzo da parte degli utenti rispetto alle APP o al Browser:
www.follow-app.it /91
35. HTML5 - jQuery Mobile vs APP
• Realizzare APP browsable (o meglio ancora di tipo
ibrido con le native), consente di soddisfare anche
quella parte di utenza che, come emerge dalla ricerca
precedente, preferisce il browser per specifiche
operazioni
• Il caso GMAIL (su IOS):
– Lentamente è evoluto da semplice link alla pagina dedicata
ai dispositivi mobile ad una vera e propria APP
www.follow-app.it /91
36. HTML5 - jQuery Mobile vs APP
• HTML5 e jQueryMobile rappresentano le
tecnologie fondanti e abilitanti per le APP
della seconda categoria
www.follow-app.it /91
37. Tool
• Come mostrato in introduzione i tool sono gli
strumenti che potenzialmente hanno il maggiore
impatto nella realizzazione di una APP perché
impattano fortemente su tutte le variabili in gioco
TIME-TO- DEVICE GRANDEZZA COMPLESSITA’
MARKET DIVERSI TEAM APP
Tecnologie ++ +
Tool +++ ++ +++ ++
Regole + + ++ ++
www.follow-app.it /91
38. Tool
• E’ evidente quindi che l’utilizzo di uno o più tool a
supporto dello sviluppo può incidere enormemente
sul successo della nostra APP
• I tool presenti sul mercato sono in numero sempre
maggiore e come spesso accade in questi casi hanno
picchi di popolarità e poco dopo magari cadono in
disuso perché superati da nuovi o vecchi competitor
La scelta del tool diventa critica
www.follow-app.it /91
39. Tool – Quale scegliere?
• Sicuramente quelli che:
– consentono di coprire più device e più OS
– hanno la community più numerosa o il produttore più
affidabile
– sono maggiormente documentati e facilmente estendibili
Un punto di partenza per iniziare la ricerca:
http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
www.follow-app.it /91
40. Tool – approcci diversi
• Ogni tool ci supporta allo sviluppo con un
approccio diverso:
– Enhancing di codice HTML preesistente (jQTouch,
jQueryMobile)
– Generazione di proprio codice HTML/DOM (Sencha
Touch)
– Compilazione in codice target come Objective-C o Java
(Titanium Mobile)
Spesso i tool usano un mix dei precedenti approcci
per estendere le proprie capacità e risultare più efficienti
www.follow-app.it /91
41. Tool – caratteristiche comuni
• Tutti i tool hanno una serie di caratteristiche
comuni:
– Esposizioni di API e librerie di controllo predefinite
– Personalizzazione grafica basata su temi
– Strutturazione e nomenclatura rigida
www.follow-app.it /91
43. Tool - esempi
• Sencha Touch
– Basato sul diffusissimo framework ExtJS giunto alla versione 4 e molto diffuso
– Completo per ogni esigenza
– Nelle ultime versioni MVC-oriented
– Differenti pricing a seconda delle esigenze, ma gratuito per lo sviluppo
• PhoneGap
– La società Nitobi che lo ha presentato nel 2009 ad un devcamp dedicato allo
sviluppo per iPhone, recentemente è stata acquisita da ADOBE (riflessione… )
– Rappresenta un efficace bridge tra browsable e native, consentendo di creare
APP trasversali che usano le potenzialità del device unite alla potenza di
HTML5 e jQueryMobile
– Integrabile con altri tool e librerie (ad esempio Sencha Touch e tante altre)
– Innovativo sia per struttura che per le diverse modalità di utilizzo (as-a-
Service: Write once. Compile in the cloud. Run anywhere)
– Differenti pricing a seconda delle esigenze, ma gratuito per lo sviluppo
www.follow-app.it /91
44. Tool - esempi
1. Classico “Hello World”
– HTML5/jQueryMobile
– Sencha Touch
2. Una APP più complessa
– Sencha Touch
– PhoneGap
3. Tante APP pronte per essere analizzate
www.follow-app.it /91
45. Tool - esempi
Cosa ci serve
DEMO1 = Editor di testo + Apache Web Server +
libreria jQueryMobile + Sencha Touch
DEMO2 = Eclipse + PhoneGap + Sencha Touch
MDS PhoneGap for Android Plug-In
DEMO3 = Esempi predefiniti per esplorare le
potenzialità
www.follow-app.it /91
46. Tool - esempi
• DEMO1: non abbiamo bisogno di particolari
procedure
• DEMO2: occorre configurare l’ambiente. La scelta di
AppLoud ci consente di accorciare questa fase, ma
esistono altre modalità di procedere… basta cercare
in rete
• DEMO3: stesso ambiente del precedente o un
semplice browser web (bugia: solo su Chrome/Safari)
www.follow-app.it /91
47. Il problema della risoluzione..
(.. o la risoluzione del problema)
www.follow-app.it /91
48. Risoluzione..
• Tanti device, tanti schermi, tante risoluzioni e
dulcis in fundo anche l’orientamento della
pagina.
• Tutto molto bello quando siamo gli utenti
della APP, ma quando recitiamo il ruolo degli
sviluppatori, il contesto cambia
www.follow-app.it /91
49. Risoluzione..
• Necessario qualche chiarimento:
– I pixel dedicati alla pagina (viewport) non sempre
corrispondono alla effettiva risoluzione dello
schermo del device
– I device e i browser effettuano ulteriori operazioni
di scaling sulle dimensioni del viewport
www.follow-app.it /91
51. Risoluzione..
•La W3C raccomanda però il paradigma dell’One Web:
One Web means making, as far as is reasonable, the same information and services available to users
irrespective of the device they are using. However, it does not mean that exactly the same information is
available in exactly the same representation across all devices. The context of mobile use, device capability
variations, bandwidth issues and mobile network capabilities all affect the representation. Furthermore,
some services and information are more suitable for and targeted at particular user contexts (see 5.1.1
Thematic Consistency of Resource Identified by a URI).
Some services have a primarily mobile appeal (location based services, for example). Some have a primarily
mobile appeal but have a complementary desktop aspect (for instance for complex configuration tasks).
Still others have a primarily desktop appeal but a complementary mobile aspect (possibly for alerting).
Finally there will remain some Web applications that have a primarily desktop appeal (lengthy reference
material, rich images, for example).
It is likely that application designers and service providers will wish to provide the best possible experience
in the context in which their service has the most appeal. However, while services may be most
appropriately experienced in one context or another, it is considered best practice to provide as reasonable
experience as is possible given device limitations and not to exclude access from any particular class of
device, except where this is necessary because of device limitations.
www.follow-app.it /91
52. Risoluzione..
• Soluzioni possibili:
– Statica: <meta name="viewport"content="width=xxxxx"/> usando la regola del
minimo comune denominatore
– Massimo spazio disponibile: dimensioni width=‘100%’
– Flessibile: preparando una collezione di stylesheet che
definiscono le dimensioni da scegliere a seconda dell’user
agent (non risolve il problema dell’orientation)
– Super-Flessibile: utilizzando comunque una collezione di
stylesheet, ma operando la scelta non solo basandosi
sull’user-agent.
www.follow-app.it /91
53. Risoluzione..
• Super-Flessibile: utilizzando le regole CSS3 - @media
in un unico file o selezionando nella nostra index.html
quale css scegliere
• Sono presenti molte + proprietà per effettuare scelte
precise e realizzare quindi regole complesse e dedicate
a specifici aspetti (orientation and color, ecc..)
– Width, height, device-width, device-height, orientation,
aspect-ratio, device-aspect-ratio, color, color-index,
monochrome, resolution, scan, grid
www.follow-app.it /91
54. Risoluzione..
• jQueryMobile cosi come i tool e framework
presentati forniscono supporti aggiuntivi per la
gestione di queste problematiche:
– jQM: metodi/eventi per gestire changeorientation
– Sencha Touch: metodo Ext.Viewport.getOrientation() , proprietà
dedicate come fullscreen e monitorOrientation
– PhoneGap: supporto nativo relativo al device
utilizzato
www.follow-app.it /91
56. Domande
• Primo caso al mondo di domanda anticipata
e/o trasmessa telepaticamente!!!!!
– Cosa è possibile fare in merito alle piattaforme di
acquisto In-App, soprattutto quelli che funzionano
su più OS/ Market, o indipendenti dall'OS/
Market?
www.follow-app.it /91
57. Domande
• Con il termine IN-APP Purchase si intende la possibilità di
effettuare acquisti dall’interno di una APP senza obbligare
l’utente ad abbandonare la APP e ritornare sul Market o ad
interagire con il browser.
• Ovviamente parte dei compiti sono a carico della APP stessa e
parte sono eseguiti da terze parti come i vari market o
fornitori di servizi esterni
• Esistono rigide regole da osservare per eseguire IN-APP
Purchase data la sicurezza e la riservatezza necessarie in caso
di transazioni economiche
www.follow-app.it /91
58. Domande
• Esistono due tipologie di acquisto:
– Inerenti la APP stessa: estensioni di
funzionalità, add-on specifici, bonus e item
vari per i games (es: la chain gun che ci
consente di massacrare per bene i nostri
nemici), ecc. Se la procedura non viene gestita
correttamente rischiamo di avere problemi
con rimborsi e noie (e soprattutto dobbiamo
uccidere il boss con un misero coltellino)
– Slegati dalla APP: acquisti di servizi o beni di
qualunque genere.
www.follow-app.it /91
59. Domande
• Tutti i player del mercato offrono questa possibilità con poche
eccezioni:
– Apple non consente di acquistare tramite APP beni e/o servizi estranei
alla APP
• Solitamente vengono fornite librerie e API dedicate
esclusivamente alla gestione dell’intero ciclo della
transazione: la APP e lo sviluppatore devono provvedere da
soli a tenere traccia di cosa ha acquistato l’utente ed a fare in
modo che ne possa usufruire.
www.follow-app.it /91
60. Domande
• Quindi l’effetivo scambio del bene non viene
gestito e perciò o:
– La APP possiede già al suo interno il bene e la
procedura di Purchase serve solo a sbloccarla.
– La APP recupera da un server (definito IN-APP
server) il bene e deve essere predisposta ad
aggiornare le proprie informazioni ad acquisto
avvenuto.
www.follow-app.it /91
61. Domande
• Anche in questo caso possiamo usare quanto già previsto dai player
oppure ricorrere a tool e servizi già pronti che ci vengono in aiuto. Tra
questi alcuni meritevoli di essere approfonditi sono:
– Corona (in realtà è un ambiente di sviluppo per APP che ha proprie API per
interagire con le procedure di IN-APP Purchase)
– Urbanairship: soluzione dedicata e completa per l’ IN-APP Purchase; gestisce
anche il delivery dei beni e consente di fare a meno di un proprio IN-APP
server
– Zooz: distribuisce una propria SDK, compatibile con i maggiori servizi di
pagamento e facilmente integrabile. Gestisce solo il pagamento
– Movend: molto completa, la + trasversale (copre anche Blackberry e Windows
Phone), consente l’acquisto di + tipologie di beni (Subscription-based items,
Consumable items, Activation-based items)
www.follow-app.it /91
62. Domande
ALTRE DOMANDE???
www.follow-app.it /91
