Share
Credito: Argomento Semplice - Che cos'è HTML5? Fanno fantastici video animati.
Benvenuto su Envato Tuts +! Questo tutorial fornisce una panoramica introduttiva di HTML5. Se non ne hai sentito parlare o vuoi solo capire la sua rilevanza, sei arrivato nel posto giusto.
HTML5 è lo standard più recente per i browser per visualizzare e interagire con le pagine Web. Approvato nel 2014, è il primo aggiornamento di HTML in 14 anni. In questo giorno ed età, è una vita tra gli aggiornamenti.
Lo scopo di HTML5 è principalmente quello di rendere più semplice per gli sviluppatori web e i creatori di browser seguire gli standard basati sul consenso che rendono la conformità più efficiente e più efficace. È inoltre progettato per offrire esperienze utente migliori, più veloci e coerenti per i visitatori desktop e mobili.
Ecco alcuni miglioramenti chiave in HTML5:
Ad esempio, di seguito è riportato un esempio di geolocalizzazione HTML5 da Building Your Startup con PHP: Geolocation e Google Places (Tuts +):
HTML5 migliorerà la velocità, la facilità d'uso e la coerenza su tutto il web. Sì, la tua esperienza su YouTube diventerà gradualmente sempre meravigliosa. Ci saranno meno aggiornamenti per browser e plugin, meno minacce per la sicurezza e siti web più eleganti, più leggibili e più veloci.
HTML5 rende la tua vita incredibilmente più semplice e amplia notevolmente le possibilità. Significa anche che sarai in grado di costruire cose e affidarti maggiormente ai costruttori di browser per garantire coerenza. Questo significa molto meno codice di layout condizionale.
Da una parte, avrai una grande roadmap nella specifica HTML5 che spiega come e cosa dovresti costruire. D'altra parte, c'è altro da fare e avere ragione. Non sarà facile distinguere il tuo browser dai grandi produttori di browser per ragazze.
Solo un rapido promemoria prima di immergerci! Cerco di partecipare alle discussioni qui sotto. Se hai una domanda o un suggerimento sull'argomento per un futuro tutorial, per favore pubblica un commento qui sotto o contattami su Twitter @reifman.
HTML5 è l'ultimo in oltre 20 anni di standard di programmazione del browser sin dal lancio del web nel 1991.
L'HTML è emerso per la prima volta come uno standard nel 1993, ed ecco la timeline delle versioni HTML accettate dai comitati standard:
Secondo Wikipedia, HTML5 intende consolidare versioni precedenti e tipi di documenti differenziati come XHTML 1 e DOM Level 2 HTML:
[HTML5] estende, migliora e razionalizza il markup disponibile per i documenti e introduce markup e ... (API) per applicazioni Web complesse ... HTML5 è anche un potenziale candidato per applicazioni mobili multipiattaforma. Molte funzionalità sono state progettate con dispositivi a bassa potenza come smartphone e tablet presi in considerazione.
Ecco un riepilogo di come MakeUseOf ha spiegato gli obiettivi di HTML5:
Immagine credito: argomento semplice
Molto, risulta! HTML5 offre un elenco così impressionante di nuove funzionalità che i principali browser non sono ancora pienamente conformi anche a 18 mesi dalla sua accettazione:
Credito immagine: PHPFlow
C'è anche questo arcobaleno visivo interattivo su HTML5Readiness. Passa con il mouse su diversi archi e vedrai quali funzionalità sono supportate da quali browser:
È divertente, ma altri grafici su altri siti potrebbero essere più intuitivi dal punto di vista funzionale.
Nel 2011, Wikipedia ha riportato circa un terzo dei primi 100 siti Web supportati da alcuni HTML5. Ad agosto 2013, circa 153 dei siti Web di Fortune 500 lo hanno fatto.
Ecco una visualizzazione della vastità delle capacità di HTML5:
Credito immagine: Wikipedia
I nuovi elementi base di HTML5 semplificano la disposizione di pagine Web e il debug del codice o di altri '. Inoltre, rende più semplice per i servizi automatici la scansione del Web e l'importanza dei diversi componenti della pagina.
Per il layout di pagina e le funzionalità principali, ora ci sono elementi specifici come:
Ecco una bella descrizione visiva di questi di Smashing Magazine:
Ecco alcune delle funzionalità più avanzate di HTML5, inclusa l'integrazione delle API, che rendono la codifica in JavaScript per operazioni sofisticate più semplici e coerenti tra i browser:
HTML5 e The Future of the Web offrono un'altra guida a queste funzionalità. Ecco uno dei loro takeaway: apprezzano molto la cache dell'applicazione:
Google Gears ci ha fornito l'archiviazione dei dati offline e Flash ci ha introdotto alla potenza della cache dell'applicazione (Pandora lo utilizza per salvare le tue informazioni di accesso). Con HTML5, queste funzionalità sono ora disponibili per l'uso giusto nella lingua e possono essere facilmente ampliate con JavaScript.
Hai bisogno di vedere quali funzionalità sono supportate in quali browser? HTML5Test ha un'utile valutazione interattiva per funzionalità e supporto browser:
Ci sono così tante nuove funzionalità che è impossibile catalogarle tutte qui. Controlla i collegamenti alle risorse in fondo a questo tutorial per risorse più profonde che consiglio.
Diamo un'occhiata ad alcuni interessanti esempi di HTML5 in azione.
La semplicità di HTML5 è chiara nei suoi nuovi layout di pagina. Gli elementi più orientati al contenuto semplificano la comprensione e il debug del codice della pagina. Ecco un semplice esempio che ho creato con il progetto HTML5-Reset:
Titolo della pagina
Intestazione dell'articolo
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.
Articolo Sottotitolo
Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.
Si noti che esiste un tag doctype più semplice, tag di collegamento e tag di script. Lo script HTML5Shiv fornisce il supporto legacy per le versioni di Internet Explorer precedenti alla 9.x.
Se vuoi vedere altri approcci, controlla il file HTML5 Boilerplate, una pagina HTML5 predefinita open source più ampia.
Ecco un esempio di video di W3Schools che mostra il codice sorgente a sinistra e il player risultante a destra:
Non sono richiesti plug-in e aggiornamenti.
HTML5 offre un'ampia varietà di miglioramenti alle forme e agli elementi di input per rendere la programmazione Web più semplice e l'esperienza dell'utente molto migliore. Ad esempio, gli elementi di input ora supportano una varietà di convalide incorporate. Ecco una convalida per i numeri all'interno di un intervallo specifico:
Ecco un paio di eccellenti tutorial per approfondire i moduli su HTML5 Doctor:
Ad esempio, ecco una dimostrazione del gamma elemento mostrato in un browser Chrome:
In HTML5, puoi animare più facilmente gli elementi con JavaScript e HTML5. Ecco un semplice orologio animato che è scalabile (cambia lo zoom):
Ecco un esempio del codice per la demo sopra l'integrazione di JavaScript:
Dimostrazione HTML5: animazione orologio SVG Animazione orologio SVG
Animazione di clock SVG di David Basoko.
Spero ti sia piaciuta questa panoramica dell'emergenza e dei vantaggi di HTML5. Se desideri esplorare ulteriormente HTML5, ci sono altre due risorse che vorrei suggerire:
Ecco un esempio delle demo sfogliabili delle demo HTML5 (non tutti hanno funzionato per me):
Se sei un gestore di siti WordPress come molti lettori di Envato Tuts +, potresti valutare i temi futuri per la loro conformità con HTML5. Lo sviluppo basato su standard con un supporto browser coerente rende lo sviluppo Web molto più semplice per molti di noi e ridurrà il numero di bug che i nostri clienti incontrano, fornendo sempre più esperienze utente migliori.
Nel complesso, sono rimasto molto impressionato da HTML5. E sembra che continuerà ad evolversi più velocemente di ogni 14 anni.
Inoltre, se stai cercando altre utilità per aiutarti a far crescere le tue competenze HTML5, non dimenticare di vedere cosa abbiamo a disposizione nel mercato Envato.
Mi piacerebbe sapere di più del tuo feedback su HTML5 e suggerimenti per argomenti futuri di cui vorresti saperne di più. Non esitate a postare le vostre domande e commenti qui sotto. Puoi anche contattarmi su Twitter @reifman direttamente. Per vedere altri tutorial che ho scritto, sfoglia la mia pagina Envato Tuts + istruttore.
Poiché ci sono così tante risorse utili per HTML5, ho incluso un aiuto extra di alcune di quelle che ritengo più utili:
Accentsconagua
