New Informatica per Umanisti Antonio Lieto · 2017. 4. 9. · ‹N› Dipartimento Informatica...

Informatica per Umanisti Antonio Lieto

Parte V HTML 5

1

‹N›Dipartimento Informatica

Tecnologie Web

Linguaggi di markup (I)

• I linguaggi di markup sono linguaggi che consentono di annotare dei documenti (spesso testuali, ma non solo)

• Le annotazioni sono meta-informazioni (cioè informazioni sul contenuto vero e proprio dei documenti) di vario tipo

• Relativamente alle pagine Web, i linguaggi di markup come HTML o XHTML consentono di specificare meta-informazioni sul contenuto delle pagine Web: ad esempio, indicazioni per la visualizzazione del contenuto (come formato, dimensione e colore dei caratteri di paragrafi, frasi o singole parole, ...) o indicazioni sulla struttura del contenuto (come strutturazione in paragrafi, sottoparagrafi, titoli di primo livello, titoli di secondo livello...)


Tecnologie Web

HTML5 (I) Negli ultimi tempi si fa un gran parlare di HTML5... E’ solo

l’ultima versione di HTML o c'è qualcosa di più?

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 e, eventualmente, il loro aspetto)

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 programmi JavaScript (HTMLVideoElement, HTMLVideoElement, ...), grazie alle funzionalità definite nel (nuovo) DOM


Tecnologie Web

• Molte funzionalità sono supportate dalla maggioranza delle ultime versioni dei browser 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)

HTML5 (II)

http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html





Tecnologie Web

⇒ rispetto alle tre distinzioni viste prima, HTML5:

• è un linguaggio markup, ma con una forte integrazione con JavaScript (che è un linguaggio di scripting, quindi di programmazione)...rappresenta pertanto un esempio di convergenza fra linguaggi di markup e linguaggi di scripting

• consente di scrivere pagine "dinamiche"

• è elaborato client-side

HTML5 (V)


Tecnologie Web

1. EVOLUZIONE DEL MARKUP E SEMANTICA

• mancava omogeneità + browser (e motori di ricerca) non "capivano" questi nomi...

⇒ problema principale dell'HTML: incapacità di descrivere il significato delle informazioni contenute in una pagina Web in un formato "comprensibile" ai vari browser

HTML5 (VI)NUOVO MARKUP – I


Tecnologie Web

⇒ nascono diversi microformati1 per scopi specifici, per es hRecipe (microformats.org/wiki/hrecipe) per le ricette:

<span class="hrecipe"> <span class="fn">Tisana alla liquirizia</span> <span class="ingredient">2 cucchiai di zucchero</span> <span class="ingredient">20g radice di liquirizia</span> <span class="yield">2</span> <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 anche far fronte (almeno in parte) a queste problematiche...

1I microformati sfruttano gli attributi dei tag per rappresentare in maniera comprensibile da un browser informazioni sulla semantica dei contenuti

fn = titolo

yield = per quante persone

HTML5 (VII)NUOVO MARKUP – II


Tecnologie Web

Quali innovazioni introduce HTML5 (relativamente al markup) rispetto alle versioni precedenti? • Sancisce la definitiva fine di una serie di tag e attributi (che

mantengono validità formale solo per preservare 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 • Introduce dei nuovi tag "semantici" (con nomi "significativi" rispetto

al contenuto); per es: <header> Titolo </header> <nav> Collegamenti di navigazione </nav> <article> Post </article> <article> Altro Post </article>

HTML5 (VIII)NUOVO MARKUP – III


Tecnologie Web

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>

HTML5 (IX)NUOVO MARKUP – IV


Tecnologie Web

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

HTML5 (X)NUOVO MARKUP – V


Tecnologie Web

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

HTML5 (XI)NUOVO MARKUP – VI


Tecnologie Web

−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 differenza di fuso 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>

HTML5 (XII)NUOVO MARKUP – VII


Tecnologie Web

−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 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: www.html.it/guide/esempi/html5/esempi/lezione_progress/

progress.html

HTML5 (XIII)NUOVO MARKUP – VIII


Tecnologie Web

• 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> (nuovo paragrafo)...

• Parallelamente mette a disposizione un insieme di funzionalità per agire sulla zona modificabile; per es è possibile definire un pulsante per attivare/disattivare il grassetto sulla selezione corrente

HTML5 (XIV)NUOVO MARKUP – IX


Tecnologie Web

FORM in HTML5 • Uno degli usi principali di Javascript è quello di

interagire con i campi dei form, per esempio per controllarne il contenuto ("validazione dei form")

→

HTML5 (XVI)NUOVO MARKUP – XI


Tecnologie Web

In Javascript: <HEAD> <SCRIPT language="JavaScript"> function e_vuoto(campo) { if (window.document.getElementById(campo).value=="") { alert(campo + " non puo' essere vuoto!"); return true; } else { return false; } } </SCRIPT> </HEAD> <BODY>

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

(1) quando l'utente clicca sul pulsante 'OK' (onSubmit), controlla il valore della funzione e_vuoto(...); se tale valore è true (vero), blocca l'invio del modulo (return false)

(2) se il campo da controllare è vuoto (value=""), mostra una pop-up window (alert) e restituisci il valore true (vero)

HTML5 (XVII)NUOVO MARKUP – XII


Tecnologie Web

Con HTML5: • come per gli elementi multimediali (video e audio), HTML5

introduce dei tag per realizzare funzioni di controllo del contenuto dei campi dei form tramite markup

• 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="email" name="nickname">

• type = tel per l'inserimento di numeri di telefono

HTML5 (XVIII)NUOVO MARKUP – XIII


Tecnologie Web

• 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

HTML5 (XIX)NUOVO MARKUP – XIV


Tecnologie Web

• 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, equivale ad un campo di testo semplice)

NB non tutti i browser supportano tutti questi tipi!!

HTML5 (XX)NUOVO MARKUP – XV


Tecnologie Web

• 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 dell'elemento a cui è applicato; il controllo viene 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> </textarea>

HTML5 (XXI)NUOVO MARKUP – XVI


Tecnologie Web

• 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 type="number" name="age" 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 comportamento

NB non tutti i browser supportano tutti questi attributi... verificate provando o cercando online (per es. sui forum)

HTML5 (XXII)NUOVO MARKUP – XVII


Tecnologie Web

2. ESTENSIONE DELLE FUNZIONALITA’ (JAVASCRIPT) E' possibile suddividere questi strumenti in due categorie: • Funzionalità per la multimedialità • Funzionalità per costruire applicazioni Web "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

HTML5 (XXIII)NUOVE FUNZIONALITA’ CON JavaScript– I


Tecnologie Web

Funzionalità di 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è fare l'upload di un file) è possibile trascinare il file sulla pagina per la composizione del messaggio

HTML5 (XXVI)NUOVE FUNZIONALITA’ (con JavaScript)– IV

New Informatica per Umanisti Antonio Lieto · 2017. 4. 9. · ‹N› Dipartimento Informatica...

Documents

Transcript of New Informatica per Umanisti Antonio Lieto · 2017. 4. 9. · ‹N› Dipartimento Informatica...