Share
Credit: Subiect simplu - Ce este HTML5? Fac videoclipuri cool animate.
Bine ati venit la Envato Tuts +! Acest tutorial oferă o prezentare generală introductivă a HTML5. Dacă nu ați auzit prea multe despre aceasta sau doriți doar să înțelegeți relevanța acesteia, ați ajuns la locul potrivit.
HTML5 este cel mai recent standard pentru browsere pentru afișarea și interacțiunea cu paginile web. Aprobat în 2014, este prima actualizare a HTML-ului în 14 ani. În această zi și vârstă, aceasta este o viață între actualizări.
Scopul HTML5 este în primul rând să ușureze dezvoltatorii web și creatorii de browsere să respecte standardele bazate pe consens, care fac conformarea mai eficientă și mai puternică. De asemenea, este proiectat pentru a oferi experiențe mai bune, mai rapide și mai coerente pentru utilizatorii de desktop și mobil.
Iată câteva îmbunătățiri cheie în HTML5:
De exemplu, mai jos este un exemplu de localizare geografică HTML5 din Construcția dvs. de pornire cu PHP: Geolocație și Google Locații (Tuts +):
HTML5 va îmbunătăți viteza, ușurința de utilizare și coerența pe web. Da, experiența YouTube va deveni treptat minunat. Vor exista mai puține actualizări ale browser-ului și plugin-urilor, mai puține amenințări la adresa securității și mai multe site-uri mai elegante, mai lizibile și mai rapide.
HTML5 vă face viața incredibil de ușoară și extinde foarte mult ceea ce este posibil. Aceasta înseamnă, de asemenea, că veți putea să construiți lucruri și să vă bazați mai mult pe constructorii browserului pentru a asigura coerența. Aceasta înseamnă un cod de aspect mult mai puțin condiționat.
Pe de o parte, veți avea o foaie de parcurs excelentă în caietul de sarcini HTML5 care detaliază cum și ce trebuie să construiți. Pe de altă parte, mai sunt multe de făcut și de bine. Nu va fi la fel de ușor de diferențiat browserul dvs. față de producătorii de browsere mari.
Doar un memento rapid înainte de a ne scufunda! Încerc să particip la discuțiile de mai jos. Dacă aveți o întrebare sau o sugestie de subiect pentru un tutorial viitor, vă rugăm să postați un comentariu de mai jos sau să mă contactați pe Twitter @reifman.
HTML5 este ultima versiune de peste 20 de ani de standardizare a programelor de navigare de la lansarea web-ului în 1991.
HTML a apărut pentru prima dată ca un standard în 1993, și aici este cronologia versiunilor HTML acceptate de comitetele de standarde:
Potrivit Wikipedia, HTML5 este destinat să consolideze versiuni anterioare și tipuri de documente diferențiate, cum ar fi XHTML 1 și DOM Level 2 HTML:
[HTML5] extinde, îmbunătățește și raționalizează marcarea disponibilă pentru documente și introduce markup și ... (API-uri) pentru aplicații web complexe ... HTML5 este, de asemenea, un candidat potențial pentru aplicații mobile pe mai multe platforme. Multe caracteristici au fost proiectate cu dispozitive cu consum redus, cum ar fi smartphone-uri și tablete luate în considerare.
Iată un rezumat al modului în care MakeUseOf a explicat obiectivele HTML5:
Imagine credit: Subiect simplu
Multe, se pare! HTML5 oferă o listă impresionantă de noi capabilități pe care browserele majore nu respectă în totalitate încă 18 luni de la acceptarea sa:
Image credit: PHPFlow
Există, de asemenea, acest curcubeu vizual interactiv la HTML5Readiness. Plasați cursorul peste arce diferite și veți vedea ce funcții sunt acceptate de browserele:
Este distractiv, dar alte diagrame de pe alte site-uri pot fi mai funcționale intuitive de utilizat.
În 2011, Wikipedia a raportat că aproximativ o treime din primele 100 de site-uri Web au acceptat câteva HTML5. Până în august 2013, aproximativ 153 dintre site-urile Web Fortune 500 au făcut.
Iată o vizualizare a vastității capacităților HTML5:
Creditul imagine: Wikipedia
Cele mai noi elemente de bază ale HTML5 facilitează structurarea paginilor web și depanarea codului sau a altora. De asemenea, facilitează serviciile automate să scaneze web-ul și să înțeleagă importanța diferitelor componente ale paginii.
Pentru aspectul paginii și caracteristicile cheie, există acum elemente specifice, cum ar fi:
Iată o schiță vizuală frumoasă a acestora de către Smashing Magazine:
Iată câteva dintre cele mai avansate caracteristici ale HTML5, inclusiv integrarea API, făcând codarea în JavaScript pentru acțiuni sofisticate mai ușoară și mai consecventă în cadrul browserelor:
HTML5 și The Future of the Web oferă un alt ghid pentru aceste caracteristici. Iată câte una dintre ele - ei apreciază foarte mult cache-ul aplicației:
Google Gears ne-a dat stocarea offline a datelor și Flash ne-a prezentat puterea cache-ului de aplicații (Pandora o folosește pentru a salva informațiile dvs. de conectare). Cu ajutorul HTML5, aceste capabilități sunt acum disponibile pentru utilizare directă în limbă și pot fi ușor extinse cu JavaScript.
Necesitatea de a vedea ce caracteristici sunt acceptate în ce browsere? HTML5Test are o evaluare interactivă utilă pentru funcțiile și suportul browserului:
Există atât de multe caracteristici noi, încât este imposibil să le catalogăm aici. Verificați legăturile de resurse din partea de jos a acestui tutorial pentru resursele mai profunde pe care le recomand.
Să aruncăm o privire asupra câtorva exemple interesante de HTML5 în acțiune.
Simplitatea HTML5 este clară în noile planuri de pagină. Elementele orientate mai mult spre conținut fac codul de pagină mai ușor de înțeles și depanat. Iată un exemplu simplu pe care l-am construit cu proiectul HTML5-Reset:
Titlul paginii
Articolul antet
Etiam pretium odio eu mi convellis vitae varius neque pharetra. Nulla vestibulum se află într-un curs de școală.
Subtitlul articolului
Vestibulum lacus erat, volutpat vel dignissim la, fringilla ut felis.
Observați că există o etichetă doctype mai simplă, etichete de legătură și etichete de script. Scriptul HTML5Shiv oferă suport pentru vechile versiuni ale Internet Explorer înainte de 9.x.
Dacă doriți să vedeți alte abordări, examinați Boilerplate-ul HTML5, o pagină implicită HTML5 implicită.
Iată un exemplu video de la W3Schools care afișează codul sursă în partea stângă și playerul rezultat în partea dreaptă:
Nu este necesar un plugin și nu există actualizări.
HTML5 are o mare varietate de îmbunătățiri ale formelor și elementelor de intrare pentru a face programarea web mai ușoară, iar experiența utilizatorului este mult mai bună. De exemplu, elementele de intrare acceptă acum o varietate de validări încorporate. Iată o validare pentru numerele dintr-un anumit interval:
Iată câteva tutoriale excelente pentru a merge un pas mai profund pe formulare la HTML5 Doctor:
De exemplu, iată o demonstrație a gamă element afișat într-un browser Chrome:
În HTML5, puteți anima mai ușor elemente cu JavaScript și HTML5. Iată un ceas animat simplu, care este scalabil (schimbați zoom-ul):
Iată un exemplu de cod pentru demonstrația de mai sus care integrează JavaScript:
Demo HTML5: animație ceas SVG SVG ceas animație
SVG ceas de animație de David Basoko.
Sper că v-ați bucurat de această prezentare generală a apariției și beneficiului HTML5. Dacă doriți să explorați în continuare HTML5, există încă două resurse pe care aș dori să le sugerez:
Iată un exemplu de demo-uri care pot fi vizualizate în Demo-urile HTML5 (nu toate au lucrat pentru mine):
Dacă sunteți un manager de site WordPress ca mulți cititori Envato Tuts +, este posibil să doriți să evaluați teme de viitor pentru conformitatea acestora cu HTML5. Dezvoltarea bazată pe standarde, cu asistență consistentă în browser, face ca dezvoltarea web să fie mult mai ușoară pentru atât de mulți dintre noi și va reduce numărul de bug-uri pe care clienții noștri le întâmpină, oferind din ce în ce mai multă experiență utilizatorilor.
În ansamblu, am fost destul de impresionat de HTML5. Se pare că va continua să evolueze mai repede decât la fiecare 14 ani.
În plus, dacă căutați alte utilitare pentru a vă ajuta să vă dezvoltați abilitățile HTML5, nu uitați să vedeți ce avem la dispoziție în piața Envato.
Mi-ar plăcea să aud mai multe despre feedback-ul dvs. despre HTML5 și sugestii pentru subiectele viitoare despre care doriți să aflați mai multe despre. Vă rugăm să nu ezitați să postați întrebările și comentariile dvs. de mai jos. De asemenea, puteți să mă contactați pe Twitter @reifman direct. Pentru a vedea alte tutoriale pe care le-am scris, parcurgeți pagina mea de instructor Envato Tuts +.
Deoarece există foarte multe resurse utile pentru HTML5, am inclus o contribuție suplimentară a unora dintre cei pe care îi consider cel mai util:
Accentsconagua
