Creare siti web HTML5 sempre attuali

Inserire Video HTML5

Libro Questo sito funziona

Dal lancio del primo iPhone e relativamente dei primi smartphone e tablet, già dal 2007, si parlava di HTML5.

Oggi dopo più di 5 anni stiamo ancora aspettando dei browser completamente compatibili con l’HTML5.

Questa attesa ingiustificata, a mio parere, ha spinto moltissimi webdesigner e sviluppatori (e io fra questi) a ritenere prematuro buttarsi a capofitto nello studio di questo nuovo linguaggio semantico per il semplice motivo che non tutti i browser lo supportano bene e quindi, con un occhio all’ottimizzazione del lavoro e dei risultati,  ritenere lo studio di HTML5 uno sforzo che avrebbe portato più perdite di tempo che benefici.

Oggi, però anche se non completamente supportato, vi sono molte opzioni che possiamo usare senza accollarsi un ulteriore carico di lavoro. Iniziando ad utilizzare HTML5 il vostro design sarà utile anche in fututo e pronto per i browser di nuova generazione.

html5

In questa mini serie di articoli dedicati ad HTML5 vedremo insieme come sfruttare questo linguaggio per realizzare siti web di nuova generazione che si avvalgono di accellerazine hardware, geolocalizzazione, audio e video incorporati e controlli predefiniti per gli input dei form inviati dagli utenti.

HTML5 infatti permette di creare nuove straordinarie esperienze interattive per i vostri visitatori, sviluppare applicazioni avanzate e interfacce uteinti sempre più eleganti.

E’ un momento storico molto importante per i webbdesigner e per il mondo dello sviluppo web fra nuove versioni di CSS, html5, il responsive design…..insomma se si vuol fare questo lavoro bisogna avere la passione sfrenata per la materia, studiare e sperimentare ed essere curiosi e perchè nò anche un pò pionieri.

Semantica e struttura

Con questi due paroloni non voglio spaventarti, però, devo informarti subito che questa non è sicuramente la parte più divertente di HTML5, ma una delle funzioni più importanti e pronta per essere usata subito indipendentemente dal browser utilizzato dagli utenti.

La semantica html5, non è affascinante ma è utile in diversi motivi: migliore ottimizzazione per i motori di ricerca, contenuti più accessibili, struttura del codice di gran lunga più facile da comprendere e migliore gestione.

Potrei citarne molti di più ma meglio non mettere troppa carne al fuoco.

Cosa significa esattamente Markup semantico?

In parole povere la semantica significa utilizzare i tag per lo scopo per il quale sono stati creati.

Il markup semantico non è altro che l’uso corretto dei tag HTML all’interno del codice. Si utilizzerà il tag <P> solo e soltanto per i paragrafi di contenuti e non per fare spazio fra un box e l’altro, per quello (lo spazio fra box) servirà il css.

Ok Andrea, ma cosa cambia con HTML5?

Sin dai primi tempi di internet e dei primi siti web uno dei problemi dell’html è sempre stato un numero limitato di tag. Questo portava i designer ad utilizzare i tag, per esempio il <div>, per utilizzi differenti fra loro all’interno dello stesso documento. Spesso il <DIV> veniva usato per centare un testo da una parte, per crare un box dall’altra e cosi via…

Addirittura molti tag venivano utilizzato per scopi assolutamente diversi da quello progettato. E’ il caso del tag <TABLE> e dei suoi figli.

All’inizio degl’anni 90 moltissimi designer utilizzavano le tabelle per impaginare grafiche che venivano spezzettate da photoshop. il mio primo sito web era una tabella con delle immagini spezzettate. 🙂

Perchè è importante HTML5

Dal punto di vista dell’ottimizzazione dei motori di ricerca, l’uso di tag universali che indicano esattamente che parte del sito vi racchiude è un grande vantaggio; questi tag aiutano gli spider dei motori di ricerca a stabilire i contenuti più importanti di ogni singola pagina web.

Ancor pià semplicemente direi che stai dotando il sito di un numero di tag segnaposto in cui dici: questo è l’header, questo è l’articolo, questa è la sidebar eccetera….

Quindi in HTML5 invece di crare un <DIV ID=”HEADER”>…</DIV> andremo a scrivere <HEADER></HEADER> ovvero il tag semantico.

I tag HTML5 più utilizzati per la costruzione del layout sono <SECTION>, <ARTICLE>, <ASIDE>, <FOOTER>, <HEADER> e <NAV>.

Come usarli?

Puoi iniziare subito ad utilizzare questi tag HTML5 senza effetti collaterali sui browser più vecchi, sfruttando uno script come HTML5Shiv per costringere i browserpiù vecchi a comprendere i nuovi elementi. Di questi trick ne esistono molti online anche riguardo i CSS3.

 

Articoli di questa serie:

Libro Questo Sito Funziona