23
luglio
Introduzione ad Html5
In questo articolo, cercherò di illustrarvi in modo semplice informazioni di base e novità di HTML5, in modo da rendere la transizione un tantino più morbida.
Il Doctype
La dichiarazione del doctype per html5 è:
<!DOCTYPE html>
Molti si chiederanno perché si è scelto di utilizzare “html” anziché “html5″, ma sembrerebbe che <!DOCTYPE html5> non sarebbe stato riconosciuto su alcuni browser tipo IE6, non permettendo così un funzionamento a ritroso.
Poi se guardiamo il lato positivo finalmente questo DOCTYPE è piccolo, significativo, e forse per la prima volta saremo in grado di ricordarlo a memoria, e non dovremo incollarlo da un sito all’altro.
I nuovi elementi da conosere
Il W3C ha dato ascolto alla comunità e programmato per il futuro quando ha architettato i nuovi elementi a disposizione.
Abbiamo di tutto, da elementi strutturali di base come <header> e <footer> ad altri come <canvas> , <audio> e <video>, che sembrano essere API molto potenti, che daranno la possibilità di creare più applicazioni user-friendly senza la necessità di Flash per ad esempio animazioni complesse.
I nuovi elementi strutturali:
- <header> L’elemento header contiene informazioni introduttive ad una sezione o una pagina.
- <nav> L’elemento nav è riservato ad una sezione di un documento che contiene collegamenti ad altre pagine o collegamenti a sezioni della stessa pagina.
Non tutti i gruppi di collegamento devono essere contenuti entro il <nav> ma solo quelli per la navigazione principale - <section> L’elemento section rappresenta una sezione ben precisa della pagina
- <article> Article rappresenta una porzione di una pagina che può funzionare autonomamente, tipo un post del blog dove l’utente ha espresso osservazioni indipendenti ecc.
- <aside> L’elemento aside potrebbe rappresentare una nota, un suggerimento, una barra laterale o qualcosa che solitamente non riguarda il contesto generale di un articolo.
- <footer>Il footer è elemento per la marcatura a piè di pagina, e non solo della pagina corrente, ma di ogni sezione della pagina. Quindi, è molto probabile che vi sarà più di un <footer> all’interno di una pagina
Guardando questi nuovi elementi, sembra sostituiscono solo il nostro comune DIV ID, e in un certo senso, è vero.
Ma, elementi come <header> e <footer> possono essere utilizzati più di una volta su una sola pagina e si comportano come normali classi. Infatti non hanno solo lo scopo di rappresentare la parte superiore e inferiore del documento, ma rappresentano anche <header> e <footer> di ogni sezione, simile al modo di utilizzare <thead> e <tfoot> per i dati in tabelle.
I vantaggi di utilizzare questi elementi strutturali è dovuto principalmente al fatto che essi sono estremamente ben definiti e forniscono un perfetto modo semantico per definire la struttura del documento.
Tuttavia, questi elementi devono essere utilizzati con una certa attenzione, perché si può facilmente commettere l’errore di ripeterli troppe volte.
Facilitare il passaggio da XHTML
Anche se HTML 4.01, XHTML 1.0, e HTML5 sono tutti molto simili ci sono alcune piccole differenze nella sintassi che possono, molto facilmente, non permettere la validazione del codice.
Per questo HTML5 ha alcune funzioni ad hoc per rendere la transizione più facile.
Ad esempio, quando vogliamo creare un form in HTML5, la corretta sintassi di un elemento di input di testo è questa:
<input type=”text” id=”name”>
Ma se siete accaniti codificatori XHTML e abituati alla chiusura degli elementi andrebbe bene anche così:
<input type=”text” id=”name”/>
Le stesse regole si applicano a <meta> e agli altri elementi di chiusura.
Quali sono i vantaggi?
Con le nuove tecnologie ci devono essere benefici, altrimenti perché si usano? Se il vecchio codice funziona bene ed è efficiente non vi è alcun motivo di aggiornarlo. Non c’è nessuna ragione per farlo.
Archiviazione dati offline
La parte più bella di HTML5 è sicuramente la sua capacità offline. Programmi come Thunderbird e Outlook (e ora in misura GMail) permettono di navigare anche in modalità offline. Con HTML5, avremo la stessa funzionalità, ma nel browser stesso, e questo è il primo serio passo per colmare il divario tra desktop e web, e apre tutti i tipi di porte per il futuro delle applicazioni on line.
Il W3C ha preso le parti migliori dalle varie tecnologie Web e messe insieme, ciò che ne nasce è il più potente linguaggio di markup esistente.
Alcune altre API HTML5
- Drag & Drop La API drag-and-drop definisce un evento basato su sistema di trascinamento. Tuttavia, questa API richiede JavaScript per funzionare pienamente .
- Video & Audio L’API di audio e video sono ottimi aggiornamenti per l’incorporamento dei media. Anche se il supporto è limitato al momento, incorporare video non è mai stato così facile:
<video width=”400″ height=”360″ src=”vid.mp4″>
- Geolocation La Geolocalizzazione è un API molto cool di HTML5.
Tramite un dispositivo User Agent, (ad esempio un dispositivo mobile) viene rilevata la locazione dalla quale ci si collega al sito per eventualmente fornire all’utente dati personalizzati. Per questione di privacy sembrerebbe che questa funzione può essere disabilitata.
Dove posso usarlo?
Anche con il sostegno molto limitato di HTML5, nel Web ci sono già ambienti dove possiamo fare le nostre prove. Attualmente, Safari è la nostra migliore piattaforma di test, infatti sostiene la maggior parte dei nuovi elementi e le API.
Naturalmente, le cose possono cambiare in qualsiasi momento, quindi, occhi sempre aperti su Opera, Firefox e Chrome.
E ora cosa fare?
Ci vorrà tempo prima che tutti gli elementi siano completamente supportati.
I browser devono recuperare anni di ritardo e molto altro tempo si perderà prima che tutti i navigatori aggiornino i loro browser con quelli che supportano questo linguaggio.
Con Html5, siamo prossimi ad una nuova era, con un patrimonio di conoscenze e la capacità di imparare dagli errori del passato (e dai nuovi ). HTML5 è stato istituito con le aspettative di un potente linguaggio di markup e tocca a noi utilizzarlo in modo che possa beneficiare tutti noi.
TweetTi è piaciuto questo articolo?
SI
Iscriviti ai Feed RSS, magari ti piaceranno anche i prossimi
NO
Iscriviti ai Feed RSS, prima o poi ne scriverò uno che ti piace
Diventa un autore
SImpatica l’idea del give me five
ahahaha
Ottima panoramica, anche se noto che c’è troppo entusiasmo e voglia di utilizzare HTML 5… per me ancora è presto per sviluppare siti complessi con questa specifica (che non è ancora una raccomandazione e lo sarà solo tra un paio di anni a giudicare dallo stato dei lavori). E’ bene però iniziare ad assimilare le feature del limguaggio.
Un saluto.
Ottimo post, anche io vedo però troppo entusiasmo, preferisco aspettare e vedere dopo un pò di mesi cosa risulta. Magari studiare anima e corpo un “nuovo” linguaggio per poi scoprire continui bacchi o i clienti che han problemi meglio temporeggiare. Comunque sempre sotto osservazione.
Bello l’articolo, magari quando l’HTML 5 sarà propriamente supportato da tutti i browser sarebbe utile poter scaricare una pagina di prova scritta in xHTML o HTML 4 e confrontarla con la stessa, scritta però in HTML 5
Bravo Salvo!!