<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d4362399646555681964', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe", messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { 'blogger-ping': function() {} } }); } }); </script>

Una breve anteprima di HTML 5 06/12/07

html 5

Sembrerà strano ma, tra aggiornamenti e strade parallele, il codice HTML (4) ha quasi 10 anni; considerando i ritmi vertiginosi che muovono la rete è quantomeno curioso... a questo proposito segnalo volentieri il post di A List Apart che illustra alcune delle caratteristiche della nuova specifica HTML, la 5 appunto.

L' articolo divide le novità in tre categorie, la struttura, i nuovi elementi per l' audio/video e la rappresentazione del documento...

» continua

La prima cosa da sottolineare è che ancora si tratta di un progetto aperto, suscettibile a modifiche e comunque non definitivo; qui trovate la pagina del W3C dedicata ad HTML 5.

La struttura prevede una serie di nuovi tag che andranno a sostituire i normali contenitori <div> e le rispettive classi. Vediamo un esempio pratico, una semplice pagina a due colonne come la scriviamo adesso:

<div id="header">...</div>
<div id="navigazione">...</div>
<div id="contenuto">
<div class="post">...</div>
<div class="post">...</div>
</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

Come vedete la struttura è definita dalle classi e gli id applicati ai contenitori <div>; anche se valido a livello semantico (le indicazioni su cosa contengono i generici contenitori sono chiare) la nuova specifica vuole renderlo palese.

Ecco infatti come potremo scrivere lo stesso documento utilizzando HTML 5:

<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>

Di cosa si tratta si intuisce, ogni elemento "dice" che cosa contiene...

Sommariamente possiamo dire lo stesso delle novità introdotte per i file multimediali (audio/video); ecco un semplice esempio di codice HTML 5 con il quale embeddare un video nella pagina:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Anche qui poco da dire, l' attributo poster è utilizzato per mostrare un immagine prima che il video sia disponibile (ed è opzionale). L' altro elemento disponibile è <audio> e come dice la parola stessa si occupa di...

Su questo aspetto però vi consiglio vivamente un approfondimento in quanto esistono numerosi parametri e una serie di API che permetteranno il massimo controllo (e personalizzazione), sia agli sviluppatori che ai webdesigner.

L' articolo si conclude con la parte più tecnica, relativa alla rappresentazione del documento; come spunto indico solo una maggiore vicinanza della nuova specifica alla formattazione XML. Diversamente dalle versioni precedenti d' ora in avanti HTML sarà definito in termini di DOM e non rispetto alla sua sintassi; questo vuol dire, a grandi linee, che il linguaggio si definisce da solo...

Riporto ancora l' articolo originale e se volete approfondire date un' occhiata alle differenze rispetto ad HTML 4.

Etichette: ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti