Академический Документы
Профессиональный Документы
Культура Документы
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
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
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>
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>
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)
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
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">
9
HTML5: nuovo markup - XV
type = range per l'inserimento di un numero attraverso uno slider
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
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
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
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)
Suggerimenti bibliografici - I
(oltre ai link segnalati nelle slide...)
Guida HTML5
www.html.it/guide/guida-html5/
14
Dispositivi mobili e mobile apps - I
15
Sistemi Operativi mobili
16
Sistemi Operativi mobili: Android - II
Architettura di Android (da: Carli 2010; www.android.com)
[4]
[3]
[2]
[1]
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)
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
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)
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
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
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!)
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)
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
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
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)
27