Ho visto questo sito e questo sito , ma è molto da digerire. Quali sono le cose principali di HTML5 che lo rendono diverso / migliore del normale HTML (CSS) vecchio (X)?
Ho visto questo sito e questo sito , ma è molto da digerire. Quali sono le cose principali di HTML5 che lo rendono diverso / migliore del normale HTML (CSS) vecchio (X)?
Risposte:
HTML5 è enorme , ma anche fantastico .
A mio avviso, si tratta principalmente di interoperabilità . La specifica va e specifica anche i casi limite per provare e assicurarsi che tutti i browser leggano il markup allo stesso modo .
In secondo luogo, HTML5 ha video e audio, che fanno esattamente ciò che dice il nome. Se si desidera includere video o audio, HTML5 dovrebbe ridurre le esigenze del plug-in.
Al terzo posto, HTML5 include molta accessibilità e aiuto semantico. Ad esempio, elementi come <section>e <article>aiutano le macchine a capire quale dovrebbe essere il contenuto. Nuovi tipi di input come <input type=email>possono anche essere utili per gli stessi motivi, anche se i nuovi tipi di input includono interfacce utente personalizzate che li rendono utili anche per i lettori umani "comuni".
Si noti che le nuove funzionalità di moduli sono molto più che nuovi tipi di input. Include anche il supporto per il testo segnaposto e molti altri attributi.
HTML5 include <canvas>, che consente di disegnare forme 2D (e, con WebGL, 3D) come grafici o persino renderizzare giochi.
Il vecchio comportamento è ora standardizzato, come quello di Internet Explorer contentEditable.
Il DOCTYPE è finalmente decente! Ora puoi effettivamente memorizzarlo!<!DOCTYPE html>
Anche specificare la codifica è più semplice <meta charset=utf-8>.
Se si desidera inviare dati al client e associarli ad elementi, ora è possibile farlo con attributi personalizzati. Ad esempio, <div data-status=open>Open</div>ora è finalmente permesso. Si noti che i nomi degli attributi personalizzati devono essere preceduti da data-.
Ora puoi includere SVG e MathML nei documenti HTML. In precedenza, era possibile farlo solo con documenti XHTML.
Tra le molteplici nuove funzioni e campi definiti da HTML5, uno dei più impressionanti è classList, che consente di manipolare più facilmente l'attributo di classe. Invece di dover ottenereAttribute / setAttribute e usare hack complessi per capire quali classi ha un elemento e rimuovere una classe specifica da quell'elemento, classList rende queste situazioni difficili molto semplici.
Ci sono anche diverse specifiche correlate, come Web Workers, Web Socket e IndexedDB, che non fanno realmente parte di HTML5 ma tutti ne parlano come se lo fossero. Sono molto utili per sfruttare i computer multi-core, comunicare con i server e archiviare i dati localmente.
Per quanto riguarda CSS3, include il supporto per animazioni , transizioni , bordi arrotondati e il modello box flessibile .
Un'altra novità di CSS3 sono i nuovi selettori, che semplificano la corrispondenza di elementi specifici di una pagina (come solo le righe pari o dispari in una tabella).
Opacità, nuove unità, tendone e rubino fanno anche parte di CSS3.
Penso che praticamente copra tutte le parti importanti.
Per tenere traccia delle funzionalità e del supporto delle specifiche è possibile selezionare Quando posso usare . Include funzionalità HTML5 e CSS3 e cose come SVG, PNG, CSS2.1 e CSS2. Tiene inoltre traccia del loro stato di approvazione (Raccomandazione, Raccomandazione proposta, Raccomandazione del candidato, Bozza di lavoro, standard IETF). FindMeByIP mantiene le matrici delle funzionalità CSS3 supportate solo dal browser.
Qualche rejiggering e semplificazione della sintassi si sono verificati in sostanza:
<!DOCTYPE html>languageAttributo semplificato per <html>tag: <html lang="en">xmlnse xml:langse si desidera la conformità XML)<meta>Tag dedicato per charset:<meta charset="utf-8" />script non accetta più type attributi, richiede charsetscript remoti: <script src="/media/js/jquery.js" charset="utf-8"></script>(gli script incorporati non richiedono alcun attributo aggiuntivo)HTML5 offre la possibilità per il markup di essere molto di più semantico , e nel complesso molto più facile da leggere / scrivere e avere file di dimensioni inferiori. Invece di avere <div id="nav">, hai solo <nav>. Non sembra molto ma si somma.
Molti elementi di XHTML1 e HTML4 sono stati deprecati. I seguenti elementi non sono supportati in HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>,<s> , <strike>, <tt>, <u>e <xmp>.
Diversi nuovi elementi in HTML5 hanno lo scopo di aggiungere solo più markup semantico e non faranno altro che fornire un'alternativa più significativa a <div>. Questi nuovi elementi includono: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>,<time> , <mark>, <figure>, e <figcaption>.
I moduli HTML5 sono notevolmente migliorati.
Nuovi tipi di input
Nuovi attributi:
Nuovi elementi
Potremmo andare in moduli tutto il giorno, ma qui ci sono alcune risorse per spiegare meglio tutte queste nuove cose.
CSS3 porta il meraviglioso delle Media Query . Le Media Query sono così fantastiche. Non disponibile in IE8 e precedenti, ma sarà supportato da IE9.
CSS3 ha contatori incrementali . Puoi usarli per numerare automaticamente gli elementi senza un elenco ordinato usando lo :beforepseudo-selettore e ilcontent stile quando una lista ordinata o una numerazione sarebbero semanticamente errate. (Ad esempio, numerando i passaggi della compilazione dei campi del modulo.)
Se sei un fan dei ripristini CSS, c'è un ripristino CSS HTML5 disponibile da HTML5 Doctor. Ho apportato tre aggiunte a questo ripristino per le mie pagine personali:
text-rendering: optimizeLegibility; aggiunto agli stili nella definizione per <body>label incluso nella definizione con input e selectpoiché ha bisognovertical-align: middle;inse :focusda Reset CSS di Eric Meyer aggiunti di nuovo inÈ disponibile un reset concorrente chiamato reset5 , ma non l'ho ancora valutato personalmente. Si basa su entrambi i ripristini di Eric Meyer e HTML5 Doctor.
Il cheatsheet di sicurezza HTML5 tiene traccia dei bug nelle funzionalità HTML5 implementate in vari browser e include anche bug nelle funzionalità esistenti che è utile tenere traccia anche di.
L'uso di elementi HTML5 non rende automaticamente semantico il tuo codice. WHATWG ha scritto un articolo chiamato <section> non è solo un "semantico <div>" che spiega che non è semplicemente un elemento contenitore.
In HTML 5, esiste un algoritmo per costruire una vista di struttura dei documenti. Questo può essere usato, ad esempio da AT, per aiutare un utente a navigare attraverso un documento. E <section> e gli amici sono una parte importante di questo algoritmo. Ogni volta che annidate una <sezione>, aumentate la profondità del contorno di 1 (nel caso vi stiate chiedendo quali sono i vantaggi di questo modello rispetto al modello tradizionale <h1> - <h6>, considerate un feedreader basato sul web che vuole integrare la struttura del documento del contenuto sindacato con quella del sito circostante. In HTML 4 questo significa analizzare tutto il contenuto e rinumerare tutte le intestazioni. In HTML5 le intestazioni finiscono alla giusta profondità gratuitamente).
...
Se converti ciecamente tutte le <div> s delle tue pagine in <sections> è abbastanza improbabile che la tua pagina abbia lo schema che ti aspettavi. E, oltre ad essere un passo falso semantico, questo confonderà l'inferno delle persone che si affidano alle voci per la navigazione.
Come ogni altra cosa in questo mondo, esiste un framework per le applicazioni Web HTML5 chiamato SproutCore , costruito da un ex ingegnere Apple chiamato Charles Jolley.
Oltre a html5rocks.com puoi tenere il passo con html5doctor.com e html5gallery.com .
Ci sono elementi di layout di base come border-radius, shadows (box / text), supporto rgba e così via; Questo è ciò per cui CSS3 è maggiormente noto. Più interessanti sono il tag canvas, il tag video, l'archiviazione locale, i websocket e così via che creeranno esperienze utente molto più ricche in HTML / JS / CSS. Queste funzionalità potrebbero essere un'ottima alternativa a Flash sul Web senza la necessità di plug-in aggiuntivi.
Trovo i nuovi elementi HTML piuttosto interessanti ... alcuni di essi sono promettenti sostituzioni semantiche per i generici div. I promettenti nuovi elementi includono article, section, aside, figure, nav, header, e footer, tra gli altri. Mi piace molto l'idea di elementi semantici che sostituiscono contenitori insignificanti.
Oh sì, un elemento correlato: il molto semplificato doctype- finalmente qualcosa che posso scrivere dalla memoria!
( Questa è la mia risposta a una domanda simile su webapps.stackexchange.com )
I thread Canvas e Web Worker sono per me gli aspetti più interessanti di HTML5. Ho scritto alcune app Web che utilizzano queste funzionalità:
GioAUTHor [sic] fa ampio uso della tela per permetterti di tracciare percorsi su una mappa e quindi trovare il percorso più breve dall'inizio alla fine (tramite l'algoritmo di Dijkstra in JavaScript).
La demo dei thread JavaScript fa un uso limitato dell'area di disegno ma mostra l'uso dei thread di lavoro, completi di codice demo. Utilizza anche il controllo del cursore di input type = "range" HTML5 .
Il supporto del browser HTML5 è vario quanto i browser stessi. C'è un bel sito (in HTML5, natch) sulla disponibilità di HTML5 che mostra chi è pronto per cosa.
Per quanto riguarda CSS3, dai un'occhiata a http://css3please.com/ per vedere cosa puoi fare.
Più tardi il tuo browser, più probabilità sarai in grado di vedere gli effetti.
I tag audio e video consentono di presentare file multimediali senza la necessità di un plug-in come Flash o Silverlight e, soprattutto, funzionano sui browser iPhone e iPad. Vi sono alcuni problemi che devono essere risolti in merito ai codec e alla gestione dei diritti digitali.
Jeremy Kieth ha appena pubblicato un ottimo libro sull'argomento, "HTML5 per i web designer". potresti voler dare un'occhiata.
È il primo libro di A Book Apart. Lo consiglio vivamente a designer di livello intermedio o avanzato. A ++
NOTA : potrebbe essere necessario attendere per ottenere una copia cartacea
Questo non offre un'opinione sull'importanza, ma è un utile delta tra HTML 4 e 5.
Il mio 2 ¢ sui principali miglioramenti:
<section>e il nuovo algoritmo che delinea l'intestazione (ho detto che era solo il mio 2 ¢)<input type=email>data-* attributi<audio>e<video>Perché nessuno ha ancora messo questo:
HTML5 è ottimo per ciò che tutti hanno elencato, ma include anche geolocalizzazione standard, web worker, web socket, canvas e localStorage. Tutti questi strumenti fanno parte delle specifiche HTML5, che usano molto JavaScript dietro le quinte per realizzarlo.