HTML5 - I
HTML5 è una specifica di HTML che ha introdotto nel
linguaggio funzionalità che vanno ben oltre il markup tradizionale
(che, sostanzialmente, definiva "solo" la struttura dei contenuti)
[www.html.it/guide/guida-html5/]
Un esempio di tali funzionalità è il supporto alla multimedialità:
– Con HTML5 è possibile includere (e quindi visualizzare) in
una pagina Web elementi audio e video senza l'ausilio di
plugin esterni (QuickTime, Flash, ...), grazie ai tag video e
audio
– Inoltre, ogni elemento multimediale è rappresentato come
"oggetto" manipolabile da Javascript (HTMLVideoElement,
HTMLVideoElement, ...), grazie agli API definiti nel (nuovo)
DOM
a.a. 2015/16
Tecnologie Web
1
HTML5 - II
• Le specifiche di HTML5 sono uno standard W3C
(www.w3.org/TR/html5)
• Molte funzionalità sono supportate dalla maggioranza delle
(per es Explorer
p
9 e Firefox 5)) e
ultime versioni dei browser (p
per questo utilizzate su portali come youtube... Attenzione,
però! esistono parti delle specifiche che sono (ad oggi)
supportate in modo superficiale e disomogeneo...
Tabella di compatibilità per i vari browser:
www.html.it/guide/esempi/html5/tabella_supporto/tabella.html
• Gli aspetti innovativi di HTML5 ruotano principalmente
attorno a due temi:
1. un nuovo approccio "semantico" nella creazione delle
pagine Web
2. un ricco insieme di API (per manipolare gli oggetti del
DOM, anch'esso arricchito)
a.a. 2015/16
Tecnologie Web
2
1
HTML5 - III
STORIA DI HTML5 (da www.html.it/guide/guida-html5/)
Venerdì 4 giugno 2004, in una notte buia e tempestosa, Ian Hickson annuncia la creazione
del gruppo di ricerca WHAT, acronimo di Web Hypertext Application Technology [...]
L’obiettivo del gruppo è quello di elaborare specifiche per aiutare lo sviluppo di un web
più orientato alle applicazioni che ai documenti; tra i sottoscrittori di questa iniziativa si
annoverano aziende del calibro di Apple, Mozilla e Opera. Questo piccolo scisma dal W3C
è determinato dal disaccordo in merito alla rotta decisa dal consorzio durante un famoso
convegno del 2004 dove, per un pugno di voti, prevalse la linea orientata ai documenti di
XHTML2. [...]
Il 27 ottobre 2006 in un post sul proprio blog [...]Tim Berners-Lee annuncia la volontà di
creare un nuovo gruppo di ricerca che strizzi l’occhio al WHAT e ammette alcuni sbagli
commessi seguendo la filosofia XHTML2 [...] Dovranno passare quasi altri due anni di
competizione tra le due specifiche, questa volta entrambe interne al W3C, prima che nel
luglio del 2009 lo stesso Tim sancisca di non voler riconfermare il gruppo XHTML2 per
l’anno successivo preferendo di fatto la direzione intrapresa dall’HTML5. [...]
Nonostante il continuo e solerte lavoro e il grande intervallo di tempo speso nella stesura
di questo documento, i passi residui necessari ad eleggere questa tecnologia al rango di
‘W3C Recommandation’, relegandola così tra gli standard riconosciuti, sono ancora molti,
al punto che si prevede di raggiungere l’agognato traguardo soltanto attorno al 2020.
a.a. 2015/16
Tecnologie Web
3
HTML5 - IV
 all'interno di HTML5 convivono l'eredità dell'XHTML2 e
quella del WHAT  risultato di questo mix:
1. evoluzione del modello di markup, in direzione
"semantica"  specifiche per nuovi microformati e per
l'i
l'integrazione
i
tra HTML5 e RDFa
RDF
2. estensione delle API JavaScript, per supportare nuove
funzionalità, per es:
•
•
•
•
•
•
salvare informazioni sul device dell’utente
accedere all’applicazione anche in assenza di una connessione
eseguire operazioni in background
pilotare flussi multimediali (video, audio)
editare contenuti anche complessi, come documenti di testo
usare metafore di interazione tipiche di applicazioni desktop, come il
drag and drop
• accedere e manipolare informazioni generate in tempo reale
dall'utente attraverso sensori multimediali quali microfono e webcam
a.a. 2015/16
Tecnologie Web
4
2
HTML5: nuovo markup - I
1. Evoluzione del markup e "semantica"
• All'inizio erano tabelle... poi arrivarono i <div> (vi ricordate...
il Box Model di CSS2?!? un modello pensato per separare in
modo chiaro struttura e contenuto)
• Debolezze dei <div>: i nomi dei div erano arbitrari 
mancava omogeneità + browser (e motori di ricerca) non
"capivano" questi nomi...
 problema principale dell'HTML4: incapacità di descrivere il
significato delle informazioni contenute in una pagina Web
in un formato "comprensibile" da altri software
a.a. 2015/16
Tecnologie Web
HTML5: nuovo markup - II
5
slide
saltata
 nascono diversi microformati, per es hRecipe
(microformats.org/wiki/hrecipe) per le ricette:
<span class="hrecipe">
fn=titolo
titolo
<span class="fn">Tisana
class= fn >Tisana alla liquirizia</span> fn
<span class="ingredient">2 cucchiai di zucchero</span>
<span class="ingredient">20g radice di liquirizia</span>
<span class="yield">2</span> yield=per quante persone
<span class="instructions">
Scaldare un pentolino con 200cl d'acqua fino a 95°C;
versare la radice di liquirizia;
lasciar macerare per 7 minuti;
zuccherare e servire.
</span>
<span class="duration">90 min</span>
</span>
HTML5 nasce per far fronte a queste problematiche...
a.a. 2015/16
Tecnologie Web
6
3
HTML5: nuovo markup - III
Quali innovazioni introduce HTML5 (relativamente al markup)
rispetto alle versioni precedenti?
• Sancisce la definitiva fine di una serie di elementi e attributi[*]
((che mantengono
g
validità formale solo per
p preservare
p
la
retrocompatibilità, ma sono espressamente vietati nella
creazione di nuovi documenti); per es gli attributi: align, valign,
background, bgcolor, cellpadding, border, cellspacing
Documentazione completa:
www.w3.org/TR/html5-diff/#absent-attributes
[*]
TAG: <elem attrib1="val1" attrib2="val2" ...>
• IIntroduce
d
d i nuovii tag "semantici"
dei
"
i i" (con
(
nomii "significativi"
" i ifi i i"
rispetto al contenuto); per es:
<header> Titolo </header>
<nav> Voci di menu </nav>
<article> Post </article>
<article> Altro Post </article>
a.a. 2015/16
Tecnologie Web
7
HTML5: nuovo markup - IV
Principali nuovi tag "semantici":
 Header: per raggruppare elementi introduttivi (es. titoli o barre di
navigazione)
<header>
<hgroup>
<h1>Questo è un titolo</h1>
<h2>Questo è un sotto-titolo</h2>
</hgroup>
<nav>[<a...>link1</a> <a...>link2</a> <a...>link3</a>]</nav>
</header>
 Hgroup: per raggruppare titoli e sottotitoli
<hgroup>
<h1>Questo è un titolo</h1>
<h2>Questo è un sotto-titolo</h2>
</hgroup>
 Nav: per raggruppare gli elementi di navigazione (link, menu)
<nav>[<a...>link1</a> <a...>link2</a> <a...>link3</a>]</nav>
a.a. 2015/16
Tecnologie Web
8
4
HTML5: nuovo markup - V
 Article: per definire sezioni di contenuto autonome
<article>
<header>
<h1>Titolo articolo</h1>
<time pubdate datetime="2011-10-09T14:28-08:00"></time>
</header>
<p>Contenuto dell'articolo</p>
<footer><p>Informazioni sull'autore</p></footer>
</article>
 Section: per suddividere la pagina in sezioni (generiche)
<article>
<section>
<h1>Titolo 1</h1>
<p>Primo testo</p>
</section>
/
<section>
<h1>Titolo 2</h1>
<p>Secondo testo</p>
</section>
</article>
a.a. 2015/16
Tecnologie Web
9
HTML5: nuovo markup - VI
 Aside: per definire e raggruppare informazioni correlate ai
contenuti principali (correlate al contenuto dell'elemento
padre che la contiene)
<aside>
<h1>Approfondimenti</h1>
<nav>
<h2>Link interessanti:</h2>
<ul>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto</li>
</ul>
</nav>
<section>
[immagini pubblicitarie]
<section>
</aside>
 Footer: per inserire informazioni sulla sezione che lo contiene
<footer>
<small>©2011 Autore contenuto. Design by ...</sl>
</footer>
a.a. 2015/16
Tecnologie Web
10
5
HTML5: nuovo markup - VII
 Time (e gli attributi pubdate e datetime): per definire date e
orari; in particolare:
time rappresenta il tempo su un orologio di 24 ore, o una data precisa nel
calendario Gregoriano (accompagnata opzionalmente con un orario e una
differen a di fuso
differenza
f so orario)
<p>La riunione si terrà alle <time>15:00</time></p>
l'attributo pubdate è di tipo booleano (true/false); la sua presenza indica
che la data presente nel tag <time> è anche la data nella quale è stato
scritto l'<article> padre più vicino
l'attributo datetime serve a specificare in modo più dettagliato la data
(ANNO-MESE-GIORNO-ORE:MINUTI:SECONDI.MILLISECONDI-FUSO
ORARIO)
<time pubdate datetime="2011-01-20">20 Gennaio</time>
a.a. 2015/16
Tecnologie Web
11
HTML5: nuovo markup - VIII
 Mark: per evidenziare (sequenze di) parole importanti nella
pagina; per es. per mostrare una pagina risultante da una query in un
motore di ricerca, in cui sono evidenziate le parole ricercate
<p>Prima erano necessari <mark>plug in</mark> di terze parti per
mostrare contenuti multimediali; con HTML5 i <mark>plug
p g
in</mark> non servono più...</p>
 Meter: per definire misure (scalari); possiede i seguenti
attributi: min, max, value, low, high, optimum
<meter value="6" max="8">
6 blocchi utilizzati (su un totale di 8)
</meter>
 Progress: rappresenta lo stato di completamento di un compito;
esempio:
i www.html.it/guide/esempi/html5/esempi/lezione_progress/
progress.html
a.a. 2015/16
Tecnologie Web
12
6
HTML5: nuovo markup - IX
• Definisce un nuovo attributo globale, contenteditable, che
impostato a true rende qualsiasi elemento modificabile da
browser (per offrire uno strumento di
editing testuale oltre le aree di testo)
NOTA: Ma cosa significa "modificabile da browser"? Che riscontro visivo
dovrebbe avere l'utente? Come dovrebbe comportarsi il markup in seguito
alle modifiche dell'utente?
Su questi aspetti le specifiche non sono tanto chiare... dicono solo che il
risultato delle modifiche deve essere conforme all'HTML5: questa libertà ha
prodotto comportamenti diversi nei browser; per es alcuni traducono il
tasto invio con <br> ((interruzione di linea),
), altri con <p>
p ((nuovo p
paragrafo)...
g
)
• Parallelamente mette a disposizione un insieme di API per
agire sulla zona modificabile; per es è possibile definire un
pulsante per attivare/disattivare il grassetto sulla selezione
corrente utilizzando la funzione document.execCommand('bold')
a.a. 2015/16
Tecnologie Web
13
HTML5: nuovo markup - X
• Media query: consentono di selezionare il corretto CSS per il
device utilizzato; per es:
<link rel="stylesheet" href="monitor.css" media="screen">
<link rel="stylesheet"
rel= stylesheet href=
href="printer
printer.css
css" media=
media="print">
print >
<link rel="stylesheet" href="printer.css" media="print
and (min-resolution: 1000dpi)"> stampante con almeno 1000dpi
<link rel="stylesheet" href="phone_landscape.css"
media="screen and (max-device-width: 480px) and
(orientation: landscape)">
<link rel="stylesheet" href="phone_portrait.css"
media="screen and (max-device-width: 480px) and
(orientation: portrait)">
<link rel="stylesheet" href="progressive.css" media="tv
and (scan: progressive)"> TV con scan dell'immagine progressiva
<link rel="stylesheet" href="mono.css" media="screen and
(monochrome)"> device monocromatici (Kindle, etc..)
a.a. 2015/16
Tecnologie Web
14
7
HTML5: nuovo markup - XI
FORM in HTML5
• Uno degli usi principali di Javascript è quello di interagire
con i campi dei form, per esempio per controllarne il
contenuto
t
t ("validazione
(" lid i
dei
d i form")
f
")

VEDI: sol_es_2.html
a.a. 2015/16
Tecnologie Web
15
HTML5: nuovo markup - XII
In Javascript: (2) se il campo da controllare è vuoto (value=""), mostra
una pop-up window (alert) e restituisci il valore true (vero)
<HEAD>
<SCRIPT language="JavaScript">
function e_vuoto(campo) {
if (window
(window.document.getElementById(campo).value=="")
document getElementById(campo) value=="") {
alert(campo + " non puo' essere vuoto!");
return true; }
else {
return false; }
}
</SCRIPT> (1) quando l'utente clicca sul pulsante 'OK' (onSubmit),
</HEAD>
controlla il valore della funzione e_vuoto(...); se tale valore
<BODY>
è true ((vero),
) blocca l'invio del modulo (return false)
<FORM NAME="modulo" onSubmit="if (e_vuoto('email'))
return false;" ACTION="registra.php">
email: <INPUT TYPE="text" ID="email">
<INPUT TYPE="Submit" VALUE="OK">
</FORM>
</BODY>
a.a. 2015/16
Tecnologie Web
16
8
HTML5: nuovo markup - XIII
Con HTML5:
• come per gli elementi multimediali (video e audio), HTML5
introduce dei tag per realizzare funzioni di controllo del
contenuto dei campi
p dei form tramite markup
p
• Nuovi tipi che effettuano automaticamente (alcun)i controlli:
<input type="text" name="nickname">
– type = email per l'inserimento di indirizzi e-mail; se inserisco
qualcosa che non ha la "forma" di un'email, me lo segnala
<input type
type="email"
email name
name="nickname">
nickname >
– type = tel per l'inserimento di numeri di telefono
a.a. 2015/16
Tecnologie Web
17
HTML5: nuovo markup - XIV
– type = url per l'inserimento di URL (indirizzi Web); se inserisco
qualcosa che non ha la "forma" di un'URL, me lo segnala
– type = date (time) per l'inserimento di date (e orari); mi mette
automaticamente a disposizione un calendario
– type = number per l'inserimento di valori numerici
a.a. 2015/16
Tecnologie Web
18
9
HTML5: nuovo markup - XV
– type = range per l'inserimento di un numero attraverso uno slider
– type = color per la
selezione di colori; mi
mette automaticamente
a disposizione una
palette di colori
– type = search per
l'inserimento di query di
ricerca (in realtà, nella
maggioranza dei browser
browser,
equivale ad un campo di
testo semplice)
NB non tutti i browser supportano tutti questi tipi!!!
Provate con Google Chrome... (e NON usate Explorer!)
a.a. 2015/16
Tecnologie Web
19
HTML5: nuovo markup - XVI
• Nuovi attributi, per es:
– required: attributo booleano (cioè che può assumere solo i valori
true (vero) e false (falso)) che serve a rendere obbligatoria la
compilazione
co
p a o e dell'elemento
de e e e to a cui
cu è applicato;
app cato; il controllo
co t o o viene
ve e
fatto automaticamente al "submit" (invio) del form
– placeholder: testo che compare in un campo e che scompare
quando l'utente inizia a scrivere
Messaggio
<textarea name="msg"
placeholder="Scrivi qui il tuo messaggio"
required>
q
</textarea>
NB per gli attributi boleani
vale la seguente equivalenza:
attr=true  attr (es: required=true  required)
a.a. 2015/16
Tecnologie Web
20
10
HTML5: nuovo markup - XVII
– min e max: indicano il valore minimo e massimo consentito; si
applicano alle date (type=date, type=time, ...) e ai numeri
(type=number, type=range)
Età: <input
p
type="number"
yp
name="age"
g
min="18" max="100">
il menu che mi compare automaticamente (type=number) parte da
18 e arriva fino a 100
– autocomplete: spesso i browser forniscono suggerimenti per
riempire i campi; questo a volte è comodo e a volte fastidioso... con
l'attributo autocomplete possiamo attivare/disattivare questo
p
comportamento
NB non tutti i browser supportano tutti questi attributi... verificate
provando o cercando online (per es. sui forum)
a.a. 2015/16
Tecnologie Web
21
HTML5: nuove API - I
2. Estensione delle API (Javascript)
E' possibile suddividere questi strumenti in due categorie:
– API per la multimedialità
– API per costruire applicazioni Web "ricche"
ricche , cioè che
offrono all'utente un'esperienza interattiva simile a quella
offerta da programmi desktop/stand alone
Ci focalizzeremo sul secondo aspetto, vedendo qualche esempio
Esempi di funzionalità offerte da HTML5:
– supporto al funzionamento offline di app Web
– memorizzazione di informazioni sul browser
– supporto al drag&drop
– utilizzo di informazioni georeferenziate
E inoltre...
– comunicazione bidirezionale tra client e server
– esecuzione asincrona e parallela di script Javascript
a.a. 2015/16
Tecnologie Web
22
11
HTML5: nuove API - II
Offline API
• consentono di creare applicazioni Web funzionanti anche
offline
• con queste
t API è infatti
i f tti possibile
ibil specificare
ifi
in
i un apposito
it
file, .manifest (es: C:/Programmi/Mozilla_Firefox/browser/
chrome.manifest), un elenco di pagine Web, immagini, fogli di
stile CSS, ecc. dei quali vogliamo che il browser conservi
una copia locale
• questi oggetti, dopo la prima sessione di navigazione online,
resteranno accessibili anche senza connessione di rete
a.a. 2015/16
Tecnologie Web
23
HTML5: nuove API - III
Indexed Database API
• consentono di accedere a database locali, gestiti dal browser
• con queste API è possibile eseguire operazioni di inserimento
d ti modifica,
dati,
difi eliminazione
li i i
e ricerca
i
• ogni database può contenere un numero arbitrario di Object
Store ("contenitori di oggetti")
• gli Object Store sono liste associative (ordinate), dove ogni
coppia chiave-valore rappresenta un oggetto
• es: database libreria contiene 2 Object
j Store: LibriInPrestito,,
LibriPrestati
chiavi
libro
a_chi
Un covo di vipere Paola
L'uomo inquieto
a.a. 2015/16
Steve
libro
da_chi
Nido vacio
Diego
Salam, maman mamma
valori
Tecnologie Web
24
12
HTML5: nuove API - IV
API per il drag&drop
• un esempio delle capacità del supporto al drag&drop offerto da
HTML5 è visibile in GMail: per allegare un file ad un'email (cioè
p
di un file)) è ppossibile trascinare il file sulla pagina
p g
fare l'upload
per la composizione del messaggio
a.a. 2015/16
Tecnologie Web
25
HTML5: nuove API - V
Geolocation API
• non appartengono ad HTML5 in senso stretto, ma fanno parte
di quell'insieme di librerie che gravitano attorno alle specifiche
[dev.w3.org/geo/api/spec-source.html
dev w3 org/geo/api/spec source html]
• servono per definire una struttura-dati atta a contenere dati
geospaziali e delle funzioni di accesso a tali dati
• se invocate da un dispositivo mobile (di ultima generazione)
utilizzano le coordinate provenienti dal GPS; se invocate da un
PC (es: portatile) utilizzano posizionamento legato
all'indirizzo IP dell'host
• NB: per proteggere la privacy dell'utente è vietato utilizzare tali
info senza autorizzazione esplicita
a.a. 2015/16
Tecnologie Web
26
13
HTML5: nuove API - VI
• le funzioni principali messe a disposizione da queste API
sono:
– getCurrentPosition: restituisce la posizione corrente
– watchPosition: si attiva automaticamente ogni volta che la
posizione cambia (es se l'utente sta passeggiando)
• se l'operazione di recupero della posizione dell'utente
(coordinate) ha successo, viene eseguita una funzione (definita
dal programmatore) che ha come input (dato in ingresso) la
posizione, corredata di data e ora di recupero (es: tale funzione
potrebbe, data la posizione dell'utente, suggerirgli i sushi bar
più
iù vicini)
i i i)
a.a. 2015/16
Tecnologie Web
27
Suggerimenti bibliografici - I
(oltre ai link segnalati nelle slide...)
• Guida HTML5
www.html.it/guide/guida-html5/
a.a. 2015/16
Tecnologie Web
28
14
Dispositivi mobili e mobile apps - I
Cloud Computing
SaaS
abilita
Ubiquitous
Computing
servizi e dati nella nuvola  accessibili in modalità ubiquitous
(anywhere and anytime)
NB L'accesso da device mobile ha caratteristiche diverse rispetto
all'accesso da PC (e l'accesso da smartphone non è identico
)
all'accesso da tablet)...
E' diverso soprattutto il contesto (sono quindi diverse le
problematiche di interazione – HCI)
a.a. 2015/16
Tecnologie Web
29
Dispositivi mobili e mobile apps - II
• I dispositivi mobili ad oggi più diffusi sono gli smartphone e
i tablet
• Smartphone e tablet fanno uso di sistemi operativi diversi:
Android, Apple iOS, Microsoft Windows Phone, BlackBerry
OS, Symbian, ecc.
 le applicazioni mobili (app) vengono sviluppate
appositamente per ogni sistema
• Su smartphone e tablet è tipicamente possibile installare
nuove app, accanto a quelle "di sistema"
• L'interazione
L interazione con smartphone e tablet avviene tipicamente
attraverso schermi touch
a.a. 2015/16
Tecnologie Web
30
15
Sistemi Operativi mobili
Fonte: IDC (International Data Corporation: www.idc.com)  Worldwide Mobile
Phone Tracker, 14/8/2014 [www.idc.com/getdoc.jsp?containerId=prUS25037214]
a.a. 2015/16
Tecnologie Web
31
Sistemi Operativi mobili: Android - I
• Android = sistema operativo per dispositivi mobili [1+2+3] +
piattaforma per lo sviluppo di applicazioni mobili [4] (SDK:
Software Development Kit che include strumenti di sviluppo,
p
documentazione))
librerie, un emulatore del dispositivo,
prodotto da Google (in collaborazione con l'Open Handset Alliance:
www.openhandsetalliance.com)
• è un software open source
• ha un'architettura a layer (strati) che comprende:
1. Sistema Operativo vero e proprio – Linux Kernel
2. librerie ((C/C++)) per
p le funzionalità core
3. Dalvik Virtual Machine (interprete del bytecode delle app)
4. librerie (Java) per realizzare applicazioni mobili
Nota: in Android tutte le applicazioni sono "uguali": le applicazioni native e
quelle sviluppate da terze parti sono scritte con le stesse API ed eseguite allo
stesso modo; è possibile rimuovere o sostituire qualsiasi applicazione nativa
a.a. 2015/16
Tecnologie Web
32
16
Sistemi Operativi mobili: Android - II
Architettura di Android (da: Carli 2010; www.android.com)
[4]
[3]
[2]
[1]
a.a. 2015/16
Tecnologie Web
33
Altri Sistemi Operativi mobili - I
• iOS: versione mobile del sistema operativo desktop Mac
OS X della Apple [www.apple.com/ios]
• Windows Phone: sistema operativo mobile per smartphone
sviluppato dalla Microsoft [www.windowsphone.com]
• BlackBerry: sistema operativo mobile per dispositivi della
BlackBerry Limited (ex Research In Motion  RIM 
Limited [global.blackberry.com]
a.a. 2015/16
Tecnologie Web
34
17
Applicazioni: tipologie - I
Principali tipologie di applicazioni mobili:
• native
• web-based
• ibride
Come scegliere?
"Sono molti i fattori che possono far propendere un’azienda per
lo sviluppo dell’una o dell’altra, tra questi: le capacità e le
conoscenze del team di sviluppo, l’accesso alle funzionalità del
dispositivo, l’importanza della sicurezza, la personalizzazione
dell’applicazione rispetto al look and feel della piattaforma, la
possibilità di non richiedere accesso alla rete pper poter
p
p
essere
eseguita, l’interoperabilità su più piattaforme differenti, le
performance e le risorse richieste in fase d’esecuzione ed il tipo
di applicazione da sviluppare (gioco, produttività, finanza, sport,
salute, moda, cibo, ecc.)"
[Tesi Spadaccia – vedi bibliografia finale]
a.a. 2015/16
Tecnologie Web
35
Applicazioni: tipologie - II
Esempio di app (Unito su Facebook) – gen 2014
nativa (a sinistra) e web-based (a destra)
[Fonte: Tesi Spadaccia – vedi bibliografia finale]
a.a. 2015/16
Tecnologie Web
36
18
Applicazioni native - I
Applicazioni native
• sono sviluppate con strumenti e linguaggi definiti dalla
specifica piattaforma (es: Java, Objective C, C#, C++, ecc.)
• vengono
g
scaricate dall'app
pp store di riferimento ed installate
sul dispositivo
• Vantaggi principali:
– fedeltà al look&feel della piattaforma e, generalmente,
migliore user experience
– accesso alle risorse hardware del dispositivo (es:,
fotocamera, GPS, ...) e ai dati dell'utente gestiti dalla
piattaforma
i tt f
(messaggi,
(
i calendario,
l d i contatti,
t tti ecc.))
– possibilità di essere eseguite offline
– migliori performance
– maggiore visibilità e notifiche per gli aggiornamenti grazie
alla pubblicazione sull'app store
a.a. 2015/16
Tecnologie Web
37
Applicazioni native - II
• Svantaggi principali:
– sono specifiche per una piattaforma  bisogna
sviluppare un'applicazione per ogni piattaforma su cui si
desidera far funzionare l'app
pp
– richiedono specifiche competenze e strumenti di
sviluppo ad hoc
– richiedono, tipicamente, maggiori tempi e costi di
sviluppo
– la pubblicazione sull'app store è vincolante in termini di
tempo e di costo (il gestore dello store percepisce una
piccola percentuale su ogni applicazione venduta)
– alcuni utenti possono ignorare gli aggiornamenti resi
disponibili nell'app store  non vi è un'unica
applicazione di riferimento che venga utilizzata da tutti
a.a. 2015/16
Tecnologie Web
38
19
Applicazioni web-based - I
Applicazioni web-based
• sono sviluppate con gli strumenti e i linguaggi del Web (es:
HTML, CSS, Javascript, jQuery, ecc.)  app web-based =
insieme di ppagine
g web progettate
p g
pper essere visualizzate su
schermi piccoli
• sono accessibili attraverso il web browser (non devono
essere installate sul dispositivo)
• Vantaggi principali:
– cross-platform = write once run anywhere: sono
immediatamente fruibili su qualunque dispositivo
(i di d t
(indipendentemente
t dal
d l sistema
it
operativo)
ti )
– non richiedono specifiche competenze né strumenti ad
hoc, diversi da quelli usati per lo sviluppo su Web, ed
esistono molti framework e librerie che ne facilitano lo
sviluppo
a.a. 2015/16
Tecnologie Web
39
Applicazioni web-based - II
– possono essere utilizzate anche attraverso i browser desktop
e possono essere indicizzate nei motori di ricerca
– non sono vincolate a nessun app store e non richiedono
installazione
– sono automatricamente aggiornate
• Svantaggi principali:
– browser diversi possono presentare incompatibilità
nell'interpretazione dei linguaggi utilizzati (HTML5, CSS3,
geolocalizzazione, ecc.)
Anche se...
 il supporto
t ad
d HTML5 da
d parte
t degli
d li attuali
tt li browser
b
mobili è ormai molto valido
 gli attuali browser mobili sono in grado di eseguire
animazioni e transizioni (CSS3), fornendo una fluidità
comparabile alle applicazioni native
a.a. 2015/16
Tecnologie Web
40
20
Applicazioni web-based - III
– performance peggiori (per es. non è possibile realizzare
applicazioni con grafica complessa)
– necessitano sempre della connessione di rete attiva (a
meno che l'app
pp non sfrutti ggli offline
ff
API di HTML5 che
ne consentono la fruizione off-line)
– non hanno accesso (diretto) alle risorse hardware del
dispositivo (es: accellerometro, fotocamera, GPS, ...) né
ai dati dell'utente gestiti dalla piattaforma (messaggi,
calendario, contatti, email, foto/video gallery, ecc.)
– non rispettano automaticamente al look&feel della
piattaforma che deve essere esplicitamente riprodotto
piattaforma,
– minore visibilità (non sono pubblicate sull'app store)
a.a. 2015/16
Tecnologie Web
41
Applicazioni ibride - I
Applicazioni ibride
• sono delle applicazioni web-based, che utilizzano tipicamente
tecnologie web client-side e sono accessibili attraverso il web
browser
• vengono incapsulate all'interno di un contenitore nativo (es.
PhoneGap: phonegap.com), che consente l'accesso alle risorse
della piattaforma (es. attraverso API Javascript)
• il modello ibrido permette lo sviluppo di applicazioni crossplatform native partendo da un unico codice web-based (che
ne facilita la manutenzione e l'aggiornamento)
• come le applicazioni native, possono essere pubblicate
nell'app store della piattaforma di riferimento e installate sul
dispositivo  utilizzate anche in modalità offline
• le performance sono comparabili alle app web-based
a.a. 2015/16
Tecnologie Web
42
21
Responsive design - I
A proposito delle app web-based (e ibride) è utile introdurre il
concetto di responsive design:
una particolare strategia di Web design il cui fine è la
realizzazione di siti Web in cui le ppagine
g si adattano
autonomamente all’area
disponibile, in modo da
fornire una visualizzazione ottimale
indipendentemente
dall’ambiente nel quale
vengono
g
visualizzate
[E. Marcotte, Responsive Web Design, A List Apart, issue 306, 2010 
alistapart.com/article/responsive-web-design]
a.a. 2015/16
Tecnologie Web
43
Responsive design - II
Tecniche principali per rendere un'app responsive:
• Media Query: con HTML5 e/o CSS3 posso "chiedere" al
dispositivo info sul device, per es. la risoluzione dello schermo
 pposso creare diversi layout
y
per un unico contenuto; x es.
p
posso creare uno stile CSS per visualizzare il contenuto su un
monitor desktop, un altro stile per smartphone, un altro per
tablet, ecc.
• Layout flessibile ("fluido"): layout che si adatta alla larghezza
del viewport (= finestra del browser in cui viene visualizzata
l'app); x es. larghezza di un box espressa in percentuale
(width: 80%) e non con unità assolute (pixel o punti)
• Immagini flessibili: con l'utilizzo della grafica vettoriale è
possibile ridimensionare automaticamente le immagini
adattandole ai diversi layout
a.a. 2015/16
Tecnologie Web
44
22
Strumenti di sviluppo - I
Strumenti di sviluppo per applicazioni web-based e ibride:
• Tecnologie Web: HTML5, CSS3, Javascript/jQuery, ...
• PhoneGap [phonegap.com]: framework open-source di Adobe
che permette di
creare applicazioni
mobili ibride
partendo da
applicazioni
sviluppate con
tecnologie web
[Fonte: phonegap.com]
a.a. 2015/16
Tecnologie Web
45
Strumenti di sviluppo - II
 PhoneGap non effettua una conversione del codice
Javascript in codice nativo (Objective C per iOS e Java per
Android), ma agisce da ponte, "incapsulando"
ll'applicazione
applicazione web (che verrà eseguita e visualizzata dal
browser) e garantendo all'app stessa l'accesso alle risorse
native del dispositivo (file system, fotocamera,
geolocalizzazione, ...)
 PhoneGap supporta i sistemi operativi più diffusi: iOS,
Android, Windows Phone e Blackberry
• (opzionalmente, ma nemmeno tanto...) un framework, x es:
Sencha Touch o JQuery Mobile (ma ne esistono molti altri!)
a.a. 2015/16
Tecnologie Web
46
23
Strumenti di sviluppo - III
•
•
•
•
•
•
•
•
•
•
•
Sencha Touch [www.sencha.com/products/touch]
framework per lo sviluppo di applicazioni mobili cross-platform
supporta HTML5
garantisce il supporto a PhoneGap
le funzionalità
f n ionalità messe a disposizione
disposi ione dello sviluppatore
s il ppatore sono innumerevoli
inn mere oli
(dalla gestione degli eventi multi-touch alla comunicazione AJAX-based)
l'app viene definita all'interno di un'unica pagina HTML (index.html)
il DOM della pagina viene modificato dinamicamente attraverso gli API
Javascript in risposta ad eventi (azioni dell'utente)
la user experience è tra le migliori (anche se non al livello delle app native)
Sencha Architect (a pagamento) fornisce tutte le funzionalità tipiche di un
ambiente di sviluppo
pp integrato
g
(es.
( strumenti per
p realizzare l'interfaccia
grafica dell'app tramite drag & drop) [www.sencha.com/products/architect]
supporta iOS, Android e Blackberry ed i principali browser (è previsto il
supporto Windows Phone 8 ed Explorer 10 Mobile)
la documentazione ufficiale è molto dettagliata
è distribuito attraverso due tipologie di licenze: GNU GPLv3 e commerciale
a.a. 2015/16
Tecnologie Web
47
Strumenti di sviluppo - IV
•
•
•
•
•
•
•
•
•
•
•
•
jQuery Mobile [jquerymobile.com]
framework per lo sviluppo di applicazioni mobili cross-platform
realizza le proprie funzionalità grazie alla libreria JQuery
supporta HTML5
ggarantisce il supporto
pp
a PhoneGapp
l'app viene definita all'interno di un'unica pagina HTML (index.html)
i widget grafici disponibili sono molto curati ed il look&feel è ottimizzato per
le app mobili
la user experience è molto buona (solo leggermente inferiore a Sencha Touch)
un tool online sviluppato da Codiqa [codiqa.com] consente la realizzazione
dell'interfaccia grafica dell'app tramite drag & drop
supporta un gran numero di piattaforme e dispositivi anche con hardware
obsoleto (Android,
(Android iOS,
iOS Blackberry
Blackberry, Windows Phone,
Phone Symbian,
Symbian ebookebook
reader, Firefox, Opera, ...)
lo stretto legame con la libreria JQuery mette a disposizione un gran numero
di plugin che consentono di estenderne le funzionalità in maniera semplice
a documentazione dettagliata, ben strutturata e facilmente comprensibile
è distribuito attraverso licenza open source
a.a. 2015/16
Tecnologie Web
48
24
Strumenti di sviluppo - V
Strumenti di sviluppo per applicazioni native – Android:
• un IDE dedicato  Android Studio
fornisce un ambiente integrato,
comprensivo di tutti gli strumenti
necessari allo sviluppo di app
Android [developer.android.com/
sdk/installing/studio.html]
oppure...
• Eclipse (IDE per Java)
+ plugin Android per Eclipse (Android Development Tools –
ADT), che permette di integrare in Eclipse gli strumenti per la
compilazione, il debugging, ecc. dell' Android Software
Development Kit (SDK)
a.a. 2015/16
Tecnologie Web
49
Strumenti di sviluppo - VI
• In entrambi i casi, quando si sviluppa un'app mobile,
tipicamente si utilizza un
emulatore (Android
Virtual Device  AVD),
)
che permette di testare le
app senza dover usare uno
smartphone vero e proprio
• Come dicevamo, le app
native devono essere
pubblicate sull'app store di riferimento
 Android
A d id Market
M k
a.a. 2015/16
Tecnologie Web
50
25
Strumenti di sviluppo - VII
• Pubblicare un'app nell'Android Market
– l'app deve essere testata e configurata secondo le
specifiche dell'Android Market
((vedi: www.html.it/pag/19520/pubblichiamo-la-nostra-app/)
– Android Studio e il plugin di Android per Eclipse
(ADT) mettono a disposizione degli stumenti per la
preparazione dell'app per la pubblicazione
a.a. 2015/16
Tecnologie Web
51
Strumenti di sviluppo - VIII
– Per pubblicare una app nell'Android
Market dobbiamo essere registrati
come sviluppatori (vedi: https://
play.google.com/apps/publish/signup)
– poi si accede all'Android Market, si
clicca sul pulsante Upload Application,
si compila il form e si clicca sul
pulsante Publish
 l'app comparirà immediatamente nell'Android Market
– sarà possibile vedere le
statistiche relative alla app
(per es quante volte è stata
visitata, scaricata ed installata)
e i "voti" degli utenti
a.a. 2015/16
Tecnologie Web
52
26
Suggerimenti bibliografici - II
(oltre ai link segnalati nelle slide...)
• A. Spadaccia,
Applicazioni multi-piattaforma per dispositivi mobili: sviluppo di un
prototipo mediante framework e tecnologie Web,
g
in Produzione e Organizzazione
g
della
Tesi di Laurea Magistrale
Comunicazione e della Conoscenza, Universtà di Torino, a.a. 2013/14
[www.di.unito.it/~goy/materiale/1516/estrattoTesiSpadaccia.pdf]
Capitoli suggeriti:
–
–
–
–
–
Cap. III – I dispositivi mobili
Sez. 4.1.2 (Responsive Web design)
Sez. 5.4 (jQuery Mobile)
Sez. 5.7 (Sencha Touch)
Sez. 5.8 (PhoneGap)
a.a. 2015/16
Tecnologie Web
53
27