MICHELEPISANI.IT

Guida HTML5

Oltre che per l'impalcatura della pagina ci sono elementi per la struttura dei contenuti

Elementi per strutturare i contenuti

Agosto 20
07:422014

Esistono altri elementi per strutturare le pagine web oltre a quelli visti nell'articolo precente e che vanno a comporre più che l'impalcatura della pagina alcuni dati e dettagli dei contenuti presenti in essa, non è da escludere però che alcuni di essi possano essere supportati da un browser ma non da un altro o da una particolare versione delle stesso ed è pertanto consigliata cautela per il loro impiego.

Tra questi possiamo nominare il tag mark la cui funzione è un po' particolare dato che non esistono altri tag specifici al momento ossia viene utilizzato per evidenziare in un contenuto  determinate parole che originariamente non lo sarebbero, in alti termini basti pensare ai risultati che ci vengono forniti dopo una richiesta su un motore di ricerca, nei risultati proposti le parole che stiamo cercando sono evidenziate agli occhi dell'utente ma in realtà nel contenuto originale non lo sono.

Un altro tag già visto in un esempio di codice dell'articolo "Nuovi elementi per l'impalcatura della pagina" e di cui di seguito ne riporto un estratto è il tag time:

<section>
  <article>
    <header>[...titolo e subtitolo ...]</header>
    <p>[...testo dell'articolo...]</p>
    <footer>
      <dl>
        <dt>Articolo creato da</dt>
        <dd><address><a href="mailto:[...]">Michele Pisani</a></address></dd>
        <dt>Data</dt>
        <dd><time datetime="2014-08-19" pubdate="pubdate">Lunedì 18 Agosto</time></dd>
      </dl>
    </footer>
  </article>
</section>


Esso serve ad indicare la data di un determinato articolo o dell'intero documento e può essere di supporto al browser che lo interpreta purchè la stringa sia scritta in un formato corretto nel suo attributo datetime. L'altro attributo di cui il tag può disporre è pubdate il quale, se presente, indica che quella data si riferisce alla data di pubblicazione del contesto in cui si trova, sia esso un articolo che l'intero documento.

Altro elemento è il tag meter che quantifica una stringa, tramite i suoi attributi, in un valore frazionato o all'interno di un intervallo definito. Un esempio spiega meglio il concetto:

<meter min="30" max="45" low="35" high="39" optimum="36" value="37">Il paziente ha la febbre a 37 gradi, è meglio che non superi i 39...</meter>


Il tag progress indica lo stato di completamento di un processo, i suoi parametri indicano  il valore minore, quello maggiore e quello corrente:

<!-- lo span al valore testuale serve per la retrocompatibilità tra i browser -->
<progress min="0" max="100" value="20"><span>20</span>%</progress>


Nei browser dove è supportato, ad esempio Opera versione 11.64, il risultato a livello visivo è il seguente (Fig. 1):

 

HTML5 - Esempio del risultato di un tag progress su Opera 11.64

Fig. 1 - HTML5 - Esempio del risultato di un tag progress su Opera 11.64


Il tag picture è un contenitore di immagini, serve per indicare al browser quale immagini mostrare tra quelle in lui contenute in base alla risoluzione del dispositivo che visualizza la pagina. L'attributo srcset contiene l'url dell'immagine e può esistere anche come array di url separato da virgola dove il browser recupererà l'immagine adeguata alla risoluzione; l'attributo media indica una media query sempre per le risoluzioni del dispositivo. Un esempio classico può essere il seguente:

<picture>
  <source media="(min-width: 320px)" srcset="/immagine_piccola.jpg">
  <source media="(min-width: 480px)" srcset="/immagine_media.jpg">
  <img src="/immagine_grande.jpg" alt="">
</picture>


Altro tag degno di nota è datelist, esso lavora in concomitante di un campo input per l'invio dei dati in un form e coniuga l'immissione di testo ad un completamento automatico. La corretta sintassi per il suo funzionamento è mostrata nel seguente codice:

<input type="text" name="categoria" list="lista_categorie">
<datalist id="lista_categorie">
  <option value="agricoltura">
  <option value="business">
  <option value="informatica">
  <option value="scienze">
  <option value="viaggi">
</datalist>


Nei browser dove è supportato, ad esempio Opera versione 11.64, il risultato a livello visivo è il seguente (Fig. 2):

HTML5 - Esempio del risultato di un tag datalist su Opera 11.64

Fig. 2 - HTML5 - Esempio del risultato di un tag datalist su Opera 11.64


Esistono tutta una serie di altri elementi ma per evitare di rendere questa lista ancora più noiosa evito di approndire rimandando alle specifiche sul sito W3C e mi limito ad elencarne semplicemente alcuni nomi: command, menu, embed, figure, keygen, ecc..

Introduco solamente un paio di tag degni di nota per il loro risultato finale a livello visivo e che sono svg e math.
Questi hanno lo scopo di gestire la grafica di alcuni contenuti sfruttando una sintassi XML, dove il primo lavora a livello vettoriale, mentre con il secondo, sfruttando una semantica dedicata (per la quale rimando alle specifiche), permette di rappresentare formule complesse come se fossero disegnate sulla pagina rispettando le proporzioni di simboli, esponenti, radici, ecc...
Un esempio di utilizzo di sintassi per gestire una formula con math è il seguente:

<math>
 <mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
      </mrow>
      <mo>±</mo>
      <msqrt>
        <mrow>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>-</mo>
          <mrow>
            <mn>4</mn>
            <mo>?</mo>
            <mi>a</mi>
            <mo>?</mo>
            <mi>c</mi>
          </mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>?</mo>
      <mi>a</mi>
    </mrow>
  </mfrac>
 </mrow>
</math>


Ed il risultato è mostrato in Fig. 3 (riporto lo screenshot dell'immagine onde evitare che vi perdiate il risultato per un problema di compatibilità del vostro browser con la nuova semantica):

HTML5 - Esempio del risultato di un tag math per la visualizzazione di formule complesse

Fig. 3 - HTML5 - Esempio del risultato di un tag math per la visualizzazione di formule complesse

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …