Creare siti web HTML5 sempre attuali
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.
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:
- Creare siti web sempre attuali con HTML5
- Form HTML5
- Canvas HTML5
- I Video HTML5
Max ha detto:
Un’approccio dettagliato sull’HTML5 che non avevo mai letto da nessuna parte.
Complimenti per l’articolo.
Si vede che ha passione per questi argomenti e per il suo lavoro.
Ho dato uno sguardo al suo portfolio e devo dire che i suoi lavori sono di ottima fattura.
Vive congratulazioni
Andrea Leti ha detto:
Grazie Max! Sono contento che ti sia piaciuto.
Questo è il primo di una mini serie che sto scrivendo.
Aldo Zarattin ha detto:
Ciao Andrea,
il tuo stile nell’esprimere i tuoi articoli è sempre molto scorrevole e chiaro; il fatto è che per me che vivo il codice solamente attraverso l’interfaccia visiva, è molto difficile da comprendere.
Dovrei avere un minimo di istruzione delle basi di Html per avvicinarmi un po’ di più a questi tuoi contenuti.
Come posso fare? Cosa mi consigli?
Comunque, complimenti per quello che dai, sempre molto interessante!
Andrea Leti ha detto:
Sicuramente approfondire l’argomento ti arricchisce in diversi modi.
Puoi iniziare con un’ottima base magari partendo dalla lettura di un libro su HTML5 e l’applicazione pratica degli argomenti trattati all’interno.
Mi sembra una buona idea.
Aldo Zarattin ha detto:
Grazie per il tuo intervento e gradita risposta!
Alessandro Casto ha detto:
Come sempre contenuti di grande qualità, bravo Andrea, seguirò la serie con attenzione !