Share
Kreditt: Emne Simple - Hva er HTML5? De gjør kule animerte videoer.
Velkommen til Envato Tuts +! Denne opplæringen gir en innledende oversikt over HTML5. Hvis du ikke har hørt mye om det eller bare vil forstå dens relevans, har du kommet til rett sted.
HTML5 er den nyeste standarden for nettlesere å vise og samhandle med nettsider. Godkjent i 2014, det er den første oppdateringen til HTML i 14 år. I denne dag og alder er det en levetid mellom oppdateringer.
Hensikten med HTML5 er først og fremst å gjøre det enklere for webutviklere og nettleserskapere å følge konsensusbaserte standarder som gjør samsvaren mer effektiv og effektiv. Det er også designet for å gi bedre, raskere, mer konsistente brukeropplevelser for desktop og mobile besøkende.
Her er noen viktige forbedringer i HTML5:
For eksempel nedenfor er et HTML5 geolocation eksempel fra Bygg opp oppstart med PHP: Geolocation og Google Places (Tuts +):
HTML5 vil forbedre hastighet, brukervennlighet og konsistens på tvers av nettet. Ja, din YouTube-opplevelse vil gradvis bli konsekvent fantastisk. Det vil bli færre nettleser- og pluginoppdateringer, færre sikkerhetstrusler og mer elegante, lesbare, raskere nettsteder.
HTML5 gjør livet ditt utrolig enklere og utvider det som er mulig. Det betyr også at du kan bygge ting og stole mer på nettleserbyggerne for å sikre konsistens. Dette betyr mye mindre betinget layoutkode.
På den ene siden har du en flott veikart i HTML5-spesifikasjonen som beskriver hvordan og hva du skal bygge. På den annen side er det mer å gjøre og få rett. Det vil ikke være like enkelt å skille mellom nettleseren din og de store nettleserprodusentene.
Bare en rask påminnelse før vi dykker inn! Jeg prøver å delta i diskusjonene nedenfor. Hvis du har et spørsmål eller et emneforslag for en fremtidig opplæring, vennligst legg inn en kommentar nedenfor eller kontakt meg på Twitter @ reifman.
HTML5 er det siste innen over 20 år med nettleserprogrammeringsstandarder siden lanseringen av nettet i 1991.
HTML først oppstod som en standard i 1993, og her er tidslinjen for HTML-versjoner akseptert av standardkomiteer:
Ifølge Wikipedia er HTML5 ment å konsolidere tidligere versjoner og differensierte dokumenttyper som XHTML 1 og DOM Level 2 HTML:
[HTML5] strekker seg ut, forbedrer og rasjonaliserer markeringen tilgjengelig for dokumenter, og introduserer markering og ... (APIer) for komplekse webapplikasjoner ... HTML5 er også en potensiell kandidat for mobile plattformsplattformer. Mange funksjoner er designet med lavdrevne enheter som smarttelefoner og tabletter tatt i betraktning.
Her er et sammendrag av hvordan MakeUseOf forklarte HTML5s mål:
Bilde Kreditt: Emne Simple
Mye, det viser seg! HTML5 gir en så imponerende liste over nye muligheter at de store nettleserne fremdeles ikke er helt kompatible selv 18 måneder etter at den er akseptert:
Bilde kreditt: PHPFlow
Det er også denne interaktive visuelle regnbuen på HTML5Readiness. Beveg deg over forskjellige buer, og du får se hvilke funksjoner som støttes av hvilke nettlesere:
Det er morsomt, men andre diagrammer på andre nettsteder kan være mer funksjonelt intuitive å bruke.
I 2011 rapporterte Wikipedia om at en tredjedel av de 100 beste nettstedene støttet noen HTML5. Ved august 2013 gjorde omtrent 153 av Fortune 500 nettsteder.
Her er en visualisering av enormiteten av HTML5s evner:
Bilde kreditt: Wikipedia
De mest grunnleggende nye elementene i HTML5 gjør det enklere å legge ut websider og feilsøke koden eller andre '. Det gjør det også lettere for automatiserte tjenester å skanne nettet og forstå betydningen av ulike sidekomponenter.
For sideoppsett og nøkkelfunksjoner er det nå bestemte elementer som:
Her er en fin visuell oversikt over disse ved Smashing Magazine:
Her er noen av de mer avanserte funksjonene i HTML5, inkludert API-integrasjon, noe som gjør koding i JavaScript for sofistikerte handlinger lettere og mer konsistent på tvers av nettlesere:
HTML5 og fremtiden på nettet gir en annen guide til disse funksjonene. Her er en av deres takeaways-de setter stor pris på programbufferen:
Google Gears ga oss frakoblet datalagring og Flash introduserte oss til kraften til programbufferen (Pandora bruker den til å lagre logginformasjonen din). Med HTML5 er disse funksjonene nå tilgjengelige for å bruke rett på språket og kan enkelt utvides med JavaScript.
Trenger du å se hvilke funksjoner som støttes i hvilke nettlesere? HTML5Test har en nyttig, interaktiv vurdering for funksjoner og nettleserstøtte:
Det er så mange nye funksjoner at det er umulig å katalogisere dem alle her. Kontroller ressurslinkene nederst i denne veiledningen for dypere ressurser som jeg anbefaler.
La oss ta en titt på noen få kule eksempler på HTML5 i aksjon.
Enkelheten til HTML5 er tydelig i de nye sidelayoutene. Jo mer innholdsrettede elementer gjør sidekoden enklere å forstå og feilsøke. Her er et enkelt eksempel jeg bygget med HTML5-Tilbakestillingsprosjektet:
Side tittel
Artikkeloverskrift
Etiam pretium odio eu mi convallis vitae neus pharetra. Nulla vestibulum Nisi ut av kursen, og det er viktig.
Artikkel Underhode
Vestibulum lacus erat, volutpat vel dignissim på, fringilla ut felis.
Legg merke til at det er en enklere doktype-tag, linketiketter og skriptetiketter. HTML5Shiv-skriptet gir eldre støtte for versjoner av Internet Explorer før 9.x.
Hvis du vil se andre tilnærminger, sjekk ut HTML5 Boilerplate, en bredere HTML-side for åpen kildekode.
Her er et eksempel på video fra W3Schools som viser kildekoden til venstre og den resulterende spilleren til høyre:
Det er ingen plugin påkrevd og ingen oppdateringer.
HTML5 har et bredt utvalg av forbedringer til skjemaer og innspillingselementer for å gjøre webprogrammering enklere og brukeren opplever mye bedre. For eksempel støtter inputelementer nå en rekke innebygde valideringer. Her er en validering for tall innenfor et bestemt område:
Her er et par gode opplæringsprogrammer for å gå et trinn dypere på skjemaer på HTML5 Doctor:
For eksempel, her er en demonstrasjon av område element vist i en Chrome-nettleser:
I HTML5 kan du lettere animere elementer med JavaScript og HTML5. Her er en enkel animert klokke som er skalerbar (endre zoom):
Her er et eksempel på koden for demoen ovenfor integrering av JavaScript:
HTML5 Demo: SVG klokke animasjon SVG klokke animasjon
SVG klokke animasjon av David Basoko.
Jeg håper du har hatt denne oversikten over fremveksten og fordelene med HTML5. Hvis du vil utforske HTML5 videre, er det to flere ressurser jeg vil foreslå:
Her er et eksempel på de gjennomsiktige demoer på HTML5 Demos (ikke alle av dem jobbet for meg):
Hvis du er en WordPress-nettstedleder som mange Envato Tuts + -lesere, vil du kanskje vurdere fremtidige temaer for at de overholder HTML5. Standardsdrevet utvikling med konsekvent nettleserstøtte gjør webutvikling mye lettere for så mange av oss, og vil redusere antall bugs kundene våre kommer inn i, samtidig som de gir bedre brukeropplevelser..
Totalt sett har jeg vært ganske imponert over HTML5. Og det ser ut til at det vil fortsette å utvikle seg raskere enn hvert 14. år.
I tillegg, hvis du leter etter andre verktøy for å hjelpe deg med å utvide dine HTML5-ferdigheter, ikke glem å se hva vi har tilgjengelig i Envato Market.
Jeg vil gjerne høre mer om tilbakemeldingen din om HTML5 og forslag til fremtidige emner du vil lære mer om. Ta gjerne inn dine spørsmål og kommentarer nedenfor. Du kan også kontakte meg på Twitter @ reifman direkte. For å se andre opplæringsprogrammer jeg har skrevet, bla gjennom min Envato Tuts + instruktørside.
Fordi det er så mange nyttige ressurser for HTML5, har jeg tatt med en ekstra hjelp av noen av dem som jeg finner mest nyttige:
Accentsconagua
