Il working draft elenca una serie di nuovi elementi non classificandoli esplicitamente, compongono la lista:
- embed
- mark
- meter
- progress
- time
- ruby, rt e rp
- bdi
- wbr
- canvas
- command
- details
- datalist
- keygen
- output
Li analizzeremo in ordine, uno ad uno, partendo da embed.
embed
Definizione formale
L’elemento embed rappresenta un punto di integrazione per una applicazione esterna (tipicamente non-HTML) o per un contenuto interattivo.
embed prevede la presenza dei seguenti attributi:
- src: l’indirizzo della risorsa da includere
- type: il MIME type in base al quale verrà selezionato il plugin da istanziare.
- width
- height
src e type sono sostanzialmente obbligatori affinchè embed abbia un significato.
Il draft sottolinea due importanti osservazioni: la prima è che embed non è influenzato dal comando CSS "display: none", il plugin selezionato tramite type viene comunque istanziato; la seconda si riferisce al fatto che embed non prevede un fallback content, ossia del contenuto da mostrare nel caso in cui il browser non trovi il plugin adatto per l’applicazione, se infatti questo avvenisse lo user-agent dovrebbe caricare un plugin di default, detto plugin potrebbe anche solo mostrare una stringa che avverte dell’impossibilità di caricare l’applicazione/contenuto interattivo.
Un esempio minimale:
<embed type="video/quicktime" src="vacanze.mov" width="200" height="200">embed è in realtà presente sul web da lungo tempo ma il W3C lo inserisce tra i nuovi tags; la ragione di questa apparente discrasia risiede semplicemente nel fatto che l’elemento non era ufficialmente parte di HTML4 sebbene molti user-agents lo supportassero, con sfumature leggermente diverse soprattutto per quanto riguarda gli attributi. HTML4 supportava ufficialmente soltanto object, peraltro ancora presente in HTML5 ed i cui casi d’uso in molte occasioni possono essere sovrapponibili a quelli applicabili ad embed.
mark
Definizione formale
L’elemento mark rappresenta una porzione di testo in un documento evidenziata (marcata) a scopo di riferimento per la sua rilevanza in un altro contesto. Quando utilizzato per una citazione o in un altro blocco di testo indica una parola o frase importante che non era originariamente presente, ma che è stata aggiunta per portare l’attenzione del lettore su di una porzione di testo che l’autore potrebbe non avere considerato importante nel momento della stesura originale, ma che in quel contesto acquista una rilevanza precedentemente non prevista. Quando utilizzato nella prosa principale di un documento indica una parte del documento stesso che è stata evidenziata a causa della rilevanza che assume per l’attività corrente dell’utente.
Il tag in buona sostanza ottiene a video l’effetto grafico di un evidenziatore e va utilizzato ogniqualvolta si debba marcare una parte di testo allo scopo di attirarvi fortemente l’attenzione di chi legge. Il draft propone diversi esempi di impiego, mi limito a mostrarvene un paio, con le dovute modifiche; il primo è riferito al caso in cui si vogliano isolare le parole corrispondenti ad una ricerca testuale effettuata dall’utente:
<p>Ho letto diversi libri di <mark>Hemingway</mark>. Lo trovo un narratore straordinario.
Adoro l'<mark>Hemingway</mark> perso tra le assolate strade spagnole così come lo scrittore innamorato del mare.
In una parola Ernest <mark>Hemingway</mark>!</p>il risultato in Opera:
Importanza vs Rilevanza
Quando si voglia denotare importanza è bene utilizzare l’elemento strong, mark è applicabile quando si debba sottolineare la rilevanza di un estratto di testo. A tale proposito il draft propone un esempio, che vedremo leggermente riadattato. Lo scenario è quello di un libro di testo pensato come materiale base per sostenere un esame. Le sezioni di testo che possiedono rilevanza per l’esame sono contenute in elementi mark, le sezioni importanti invece sono wrappate dal tag strong:
<p>PHP5 è un linguaggio di scripting server side.<mark>PHP è debolmente tipizzato e supporta la programmazione ad oggetti (OOP).</mark>.</p>
<p>Nasce nel 1995 ad opera di <strong>Rasmus Lerdorf.</strong></p>
<p><mark>Uno script PHP deve essere sempre aperto dal <em>delimiter</em> <?php</strong> e chiuso da ?></mark></p>
<p>[..]</p>
<p>Vediamo un frammento di codice di esempio nel quale abbiamo inserito un errore:</p>
<pre>
<code><?php function compare($var) { return <mark>$var = 1</mark> ? true : false; }</code>
</pre>Notate come anche per evidenziare l’errore nel codice sia stato utilizzato mark.
Una considerazione personale: trovo l’effetto visivo predefinito dell’elemento (l’evidenziatore) stilisticamente poco piacevole. Suggerisco di limitarne l’uso il più possibile associandovi in casi particolari anche un foglio di stile che ne modifichi la renderizzazione standard, il draft non lo vieta.
progress
L’elemento progress rappresenta il progresso nel completamento di un task (operazione). Il progresso può essere indeterminato, qualora un avanzamento sia stato compiuto ma non risulti chiaro quanto occorra per il completamento (ad esempio quando il task è in attesa di una risposta da un host remoto) oppure può essere un numero compreso tra 0 ed un valore massimo, indicando la frazione di lavoro rimanente perchè il task giunga a conclusione.
L’elemento possiede due attributi:
- value: la misura del valore attuale nel completamento del task.
- max: il valore indicante il raggiungimento del completamento dell’attività. L’omissione del valore indica un progresso indeterminato.
Entrambi gli attributi devono essere, se presenti, valorizzati con numeri validi a virgola mobile (floating point es: 0.0 -> 1.0); valgono le seguenti regole: max > value && value >= 0 && max > 0.
Vi sottopongo uno scenario di utilizzo che sfrutta jQuery per agire sul value della progressbar:
<doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
// # Al DOM Ready
$(function() {
var progressBar = $("#progress_bar");// caching del selettore
// # Al click sul bottone
$("#progress_button").click(function() {
// # Aumento il valore di 1
progressBar.attr("value", progressBar.attr("value") + 1);
// # Aggiorno il valore testuale
$("#progress_value").val(progressBar.attr("value"));
});
});
</script>
</head>
<body>
<section>
<h2>Avanzamento attività</h2>
<p>Progress: <progress id="progress_bar" value=0 max=10><span id="progress_value">0</span>%</progress></p>
<button id="progress_button">+ 1!</button>
</section>
</body>
</html>Il risultato in Opera:
Per motivi didattici l’avanzamento della barra avviene qui al click del bottone da parte dell’utente. In casi reali lo stato potrebbe dipendere dal completamento di chiamate asincrone al server oppure dallo step di avanzamento nel contesto di un wizard (procedure di installazione a steps, processi di acquisto e pagamento).
