5 motivi per cui HTML5 è il futuro del Web Design
L’HTML5 è un linguaggio di markup per la strutturazione delle pagine web, e dal 28 Ottobre 2014 è diventato uno standard ufficializzato dalla W3C. Attualmente dopo anni e anni di sviluppo abbiamo a disposizione la versione 5.0 di questo linguaggio di markup, però nel mentre il suo sviluppo non si è fermato, quindi ecco che la release 5.1 è già in cantiere da 4 mesi a questa parte.
Perché HTML5 è importante?
Il linguaggio di markup HTML5 è importante, perché ufficialmente l’HTML così come lo abbiamo conosciuto fino ad oggi è cambiato radicalmente, ed ecco di seguito che cosa cambia dal vecchio HTML 4 al nuovo 5:
- vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni;
- vengono introdotti elementi di controllo per i menu di navigazione;
- vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici;
- vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>);
- vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun utilizzo effettivo;
- vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all’accessibilità, finora previsti solo per alcuni tag;
- viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap;
- introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e iOS, tra i più diffusi);
- sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
- standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di utilizzare alcuni siti offline;
- sostituzione del lungo e complesso doctype, con un semplice
(via wikipedia)
Sicuramente questo nuovo linguaggio di markup è qualcosa di completamente nuovo, gli stessi esperti del settore sono del parere che HTML5 compie la visione di ciò per cui questo linguaggio è stato concepito. Ma andiamo per passi, così riusciamo a capirci meglio.
Come forse già sapete, l’HTML, o Hypertext Markup Link, è un linguaggio standard utilizzata per creare pagine web. Tutto ciò che vedete su un sito web (il contenuto, di carattere, il colore, grafica, e hyperlink) è deciso e strutturato grazie a HTML.
Nelle versioni precedenti di HTML, per realizzare alcune cose tu sviluppatore avevi bisogno di API proprietarie e plugin per caricare determinati contenuti all’interno delle pagine del tuo progetto. Vi ricordate il noioso e insicuro Flash? Bene da oggi con HTML5, questa fastidio è stato eliminato, ma allo stesso tempo sono state aggiunte anche altre cose interessanti e che precedentemente ho elencato prima.
Quindi, con tutto questo, non c’è da meravigliarsi che il linguaggio HTML5 sta diventando sempre più popolare tra i programmatori, soprattutto se si considerano i numerosi benefici connessi e che questo nuovo linguaggio di markup porta con se.
Adesso andiamo a vedere, perché l’HTML5 sarà ed è il futuro del Web Design.
1. Built-in Audio-Video Playback
Come vi avevo accennato in precedentemente, al fine di riprodurre file di tipo audio–video, i webmaster in passato hanno dovuto dipendere molto da plugin sviluppati da terze parti, come: Quicktime, Silverlight e Adobe Flash Player. Alcune volte questo sistema, non era il masso e non lo è tuttora, visto la quantità enorme di bug e di aggiornamenti per la sicurezza che alcuni plugin ricevono, vedi l’Adobe Flash Player. Con l’HTML5 il tutto è stato semplificato, offrendo completo supporto per i file audio e video. Date un’occhiata a questo codice, per capire la semplicità.
<video poster="movie.jpg" controls> <source src=”movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video>
Come potete vedere, all’interno del codice ci sono due file nel codice (uno in formato .ogg e l’altro in formato .mp4) questa implementazione consente ai browser di scegliere quale file riprodurre in base alla compatibilità. Nessuna confusione, nessun errore e nessuna complicazione.
2. Cleaner Code
In passato, la codifica HTML era estremamente disordinata e creava molte volte dei problemi. Apportare modifiche di base a un sito web è stato per molto tempo un incubo, soprattutto per quei webmaster che avevano in gestione siti generati grazie a pagine e pagine di codice. Invece, con il nuovo HTML5 si presenta con una boccata d’aria fresca. Il codice è pulita e molto più facile da leggere. Inoltre, è anche ottimizzato per i motori di ricerca. Il facile leggibilità promuove una migliore comprensione dei contenuti del sito, che a sua volta, aumenta la probabilità di ottenere qualche punto in più per il posizionamento.
3. Organized Content
HTML5 offre nuovi tag che consentono l’organizzazione dei contenuti in modo più rilevante. Alcune delle nuove sintassi aggiunte sono: <header>, <footer>, <article>, <nav>, <aside>, <section>, <video>, <embed> e <sidebar>. Oltre a rendere il contenuto più significativo e semplice, l’HTML5 fornisce informazioni contestuali ai motori di ricerca. Grazie a queste informazioni rende molto più facile l’indicizzazione dei contenuti e aiuta la visualizzazione di quest’ultimi nei risultati dei motori di ricerca in modo più diretto.
4. Cross Browser Compatibility e Offline Caching
Se sei un webmaster e se hai sviluppato vari siti web, ti ricordi quanta fatica rendere visibile lo stesso sito per i vari browser? Una fatica enorme, visto che ogni browser ha un modo diverso di fare ed elaborare i contenuti della grande rete. Però grazie all’HTML5 si è riusciti a ridurre questo gap e ora, sviluppare un progetto web non richiede più mille ottimizzazioni per rendere il progetto compatibile e interpretabile allo stesso modo da: Chromium, Chrome, Firefox, Opera o Safari. Si dai non dimentichiamoci di Internet Explorer, che a quanto pare comincia anche lui a supportare il nuovo standard HTML5.
Inoltre, HTML5 facilita l’offline caching. Indipendentemente dal fatto che si dispone di una connessione Internet attiva o meno, tuo sviluppatore puoi decidere se alcune pagine del sito vengano caricate automaticamente, a patto che l’utente ha visitato la pagina a volte nel passato. Anche se la connessione di rete va giù, l’offline caching permetterà comunque di caricare gli elementi più importanti di un sito.
5. Contenuti ottimizzati per il mobile
Si può dire che finalmente sono finiti i giorni in cui si aveva problemi di accesso ai siti web da cellulari, tablet, palmari e smartphone. Infatti, utilizzando HTML5 e CSS, si possono realizzare interi progetti web che possono essere visualizzati e utilizzati in modo intelligente su una vasta gamma di dispositivi. Con l’avvento del responsive design, i contenuti di un sito web non sarà più limitato nella visualizzazione e nell’utilizzo da parte dei utenti finali.
Conclusione
In sintesi, i vantaggi dell’utilizzo di HTML5 sono molti e in queste pagine nel prossimo futuro vi saranno anche altre risorse dedicati agli sviluppatori, ma anche risorse per i web designer. Sostanzialmente l’HTML5 ha lo scopo principale quello di rende contenuti web accessibili su più dispositivi e tra i vari browser, impegnando meno risorse e facendolo in modo migliore del fratello HTML4. Il codice scritto con questo linguaggio è pulito, standardizzato, facilita il markup e migliora la semantica. Grazie ad elementi come per esempio il canvas, i progettisti possono fare e avere forme più elaborate, riducendo di molto la dipendenza dal linguaggio di scripting JavaScript.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Ricordiamo di nuovo il fatto, che gli elementi multimediali possono essere integrati in un sito web ed essere eseguiti senza aver bisogno di plugin aggiuntivi. Concludiamo il camino e questo post, ricordandovi che grazie a questo linguaggio si possono realizzare siti web responsive e compatibili con tutti i dispositivi mobile.
Seguiteci anche su Facebook, Google Plus, Tumblr e Twitter, per restare sempre in contatto con noi e con le nostre guide.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.
