Informatica per Umanisti Antonio Lieto. Parte V HTML 5

Transcript

1 per Umanisti Antonio Lieto Parte V HTML 5 1

2 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...)

3 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

4 HTML5 (II) 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: 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)

5 HTML5 (V) 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

6 HTML5 (VI) NUOVO MARKUP I 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

7 HTML5 (VII) NUOVO MARKUP II nascono diversi microformati 1 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> fn = titolo yield = per quante persone HTML5 nasce per anche far fronte (almeno in parte) a queste problematiche... 1 I microformati sfruttano gli attributi dei tag per rappresentare in maniera comprensibile da un browser informazioni sulla semantica dei contenuti

8 HTML5 (VIII) NUOVO MARKUP III 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: 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>

9 HTML5 (IX) 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>

10 HTML5 (X) NUOVO MARKUP V Article: per definire sezioni di contenuto autonome <article> <header> <h1>titolo articolo</h1> <time pubdate datetime=" t14: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>

11 HTML5 (XI) 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>

12 HTML5 (XII) 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 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=" ">20 Gennaio</time>

13 HTML5 (XIII) 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 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: lezione_progress/ progress.html

14 HTML5 (XIV) NUOVO MARKUP IX 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

15 HTML5 (XVI) 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 ("validazione dei form")

16 HTML5 (XVII) 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.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(' ')) return false;" ACTION="registra.php"> <INPUT TYPE="text" ID=" "> <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)

17 HTML5 (XVIII) 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 dei form tramite markup Nuovi tipi che effettuano automaticamente (alcun)i controlli: <input type="text" name="nickname"> type = per l'inserimento di indirizzi ; se inserisco qualcosa che non ha la "forma" di un' , me lo segnala <input type=" " name="nickname"> type = tel per l'inserimento di numeri di telefono

18 HTML5 (XIX) 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

19 HTML5 (XX) 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, equivale ad un campo di testo semplice) NB non tutti i browser supportano tutti questi tipi!!

20 HTML5 (XXI) 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 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>

21 HTML5 (XXII) 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 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)

22 HTML5 (XXIII) NUOVE FUNZIONALITA CON JavaScript I 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

23 HTML5 (XXVI) NUOVE FUNZIONALITA (con JavaScript) IV 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' (cioè fare l'upload di un file) è possibile trascinare il file sulla pagina per la composizione del messaggio