Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Greenpeace
Guida ad HTML5: nuovi elementi semantici (3/6)
Scritto da Pellegrino Principe il 11-02-2011 ore 09:42
Intel Cluster Studio XE
Continuiamo la disamina dei nuovi elementi HTML5 con meter, utile a definire una sorta di contatore o misuratore, che indica dei valori nell’ambito di un determinato e conosciuto range: ammontare di utilizzo di un disco fisso, percentuale di rilevanza di un risultato di una ricerca e così via. Esso ha, tra gli altri, i seguenti attributi programmabili: value, min, max, low, high.

Seguono: details, con cui possiamo definire un’area, che può essere espansa per presentare le informazioni ivi contenute, oppure collassata per nasconderle; generalmente è presente l’elemento summary, che fornisce l’etichetta o il titolo da cliccare per eseguire le azioni di apertura/chiusura dell’elemento details. E’ interessante rilevare come quest’elemento permetta di ottenere l’effetto mostra/nascondi, che è altrimenti ottenibile solo utilizzando librerie JavaScript esterne.

Con l'elemento menu possiamo definire un’area contenente degli item che rispondono a dei comandi. Esso può essere di tipo contestuale, toolbar o lista; a seguire, command è utile a rappresentare un’azione eseguibile da un utente: esso può essere parte di un menu contestuale o di una toolbar, oppure essere inserito dovunque nella pagina web a rappresentare uno shortcut da tastiera.

Infine, abbiamo gli elementi: figure con cui possiamo definire un’area avente lo scopo di annotare un’immagine, un blocco di codice, un’illustrazione ecc., e al cui interno può essere incluso l’elemento figcaption, che le fornisce un titolo; embed, utile a rappresentare del contenuto esterno interattivo o un plug-in da includere nella pagina web. In effetti, quest’elemento era presente anche prima dell’avvento di HTML5, ma ora esso è stato standardizzato (non lo era con HTML4 o XHTML) e viene correttamente validato.

Illustriamo ora un esempio utile a verificare quali elementi semantici il browser in uso ha implementato, attraverso la costruzione di una semplice applicazione web, formata dal file newelements.html, che ne definisce la struttura, e dal file newelements.js che ne definisce la logica. Per quanto attiene al primo file, esso è formato dal seguente codice, che all’onload della pagina web invoca la funzione di inizializzazione dell’oggetto NE, il quale determina il browser in uso e gli elementi supportati e definisce due div, che fungeranno da placeholder dove appendere l’immagine del browser corrente e dei riquadri informativi (che mostreranno il supporto o meno dell’elemento che rappresentano):
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>New elements demo...</title>
  5.     <link href="css/newelements.css" rel="stylesheet" />
  6.     <script src="javascript/HTML5_Support.js"></script>
  7.     <script src="javascript/newelements.js"></script>
  8.     <script>
  9.         window.onload = NE.init;
  10.     </script>
  11. </head>
  12. <body>
  13. <div id="bl"></div>
  14. <div id="ph_el"></div>
  15. </body>
  16. </html>
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Realizzare un simulatore SPICE: versione per Windows a 32 bit (4/5)
Successiva: Come creare nuovi Internet Media Type (2/2)
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.276 secondi.