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
ultime versioni dei browser (p(per es Explorer
p 9 e Firefox 5)) e
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 [...]
Lobiettivo 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 locchio 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
lanno successivo preferendo di fatto la direzione intrapresa dallHTML5. [...]
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 lagognato 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 dellutente
accedere allapplicazione 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 5

HTML5: nuovo markup - II slide

saltata
nascono diversi microformati, per es hRecipe
(microformats.org/wiki/hrecipe) per le ricette:
<span class="hrecipe">
class= fn >Tisana alla liquirizia</span> fn
<span class="fn">Tisana fn=titolo
titolo
<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 95C;
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 da_chi
libro a_chi Nido vacio Diego
Un covo di vipere Paola Salam, maman mamma
L'uomo inquieto Steve valori
a.a. 2015/16 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
fare l'upload di un file)) ppossibile trascinare il file sulla pagina
p g
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 abilita Ubiquitous

SaaS 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
librerie, un emulatore del dispositivo, documentazione))
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 unazienda per
lo sviluppo delluna o dellaltra, tra questi: le capacit e le
conoscenze del team di sviluppo, laccesso alle funzionalit del
dispositivo, limportanza della sicurezza, la personalizzazione
dellapplicazione rispetto al look and feel della piattaforma, la
possibilit di non richiedere accesso alla rete pper poter
p p essere
eseguita, linteroperabilit su pi piattaforme differenti, le
performance e le risorse richieste in fase desecuzione 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 add HTML5 dad 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'apppp 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 cross-
platform 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 allarea
disponibile, in modo da
fornire una visua-
lizzazione ottimale
indipendentemente
dallambiente 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 ebook-
ebook
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
Tesi di Laurea Magistrale in Produzione e Organizzazione
g della
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