Grunner for deg til å bytte til HTML5, og eksempler som fremmer det
HTML5 er en virtuos strek av innovasjon, og er virkelig en teknologi som har brakt nytt blod til sjangeren nettstedutvikling. Enten du vil at nettstedet ditt skal skryte av formskiftende funksjoner eller du ønsker at det skal fremvise en overveldende vakker visuell appell, gjør HTML5 jobben for deg, og på en mest formidabel måte.
Selv om denne plattformen gjorde sitt inntog i nettutviklingsområdet for en stund siden, er det ingen mangel på webansvarlige som ikke har den på listen over "topp 3 foretrukne verktøy" når det gjelder å bygge et nettsted. Og en stor del av disse nettredaktørene bruker allerede andre plattformer for nettsiden deres, og går dermed på akkord med en rekke funksjoner som HTML5 kunne ha integrert nettsidene deres.
1 Det gir frie tøyler til de kreative sjelene
Innovasjon er kjennetegnet til de største designere og utviklere, og når det kommer et verktøy som lar dem utøve sin kreativitet uten grenser, må det godkjennes. HTML5 passer perfekt, og på den beste måten. Som et webutviklingsrammeverk er HTML5 supertilpassbar, og lar designere fagfolk uttrykke seg. Så når det er på agendaen å være foran kurven, er HTML5-vognen der for å fange.
2 Den mye forbedrede videostøtten er der for å ta
Videostøtten har blitt kraftig forbedret med den nye HTML5-innebygde videoen for nettleserne. Siden ikke alle nettlesere støtter forskjellige formater som H.264, må du bruke følgende når du ønsker å vise en HTML5-video:
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p>Your browser does not support the format. <a href="cohagenPhoneCall.mp4">Download this format.</a></p>
</video>3 Den lar deg lage nettsteder "for mobil", i stedet for å tvinge deg til å lage flere versjoner
Logg inn på nettstedets analyser, skrape litt i overflaten og observer OS-plattformene du får de fleste besøkene dine fra. Du vil bli overrasket over å se at flertallet av besøkene dine kommer fra mobilbrukere, i motsetning til tallene som eksisterte for et år siden, da du sannsynligvis hadde flere stasjonære brukere på nettstedet ditt. Derfor er det mye mer å anbefale å lage et nettsted for mobil enn å lage et skrivebordsentrisk nettsted og deretter lage en mobilvennlig versjon av det samme. Og HTML5 gjør det til en svært effektiv øvelse å lage nettsteder som er laget for mobil, som beholder sin okulære appell når de åpnes på mindre skjermer og tilpasser seg den reduserte størrelsen uten å kaste kompatibilitet eller responsproblemer på deg.
4 kronglete XHTML doctype gjør vei for en enklere, mindre tungvint versjon
For å si det uten tvil, XHTML doctype har ikke blitt sett lidenskapelig på av utviklernes fellesskap. Og grunnen til det samme er mer enn tydelig med hvordan det er skrevet som:
<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
"http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5 har gjort erklæringen mye kortere og mer forståelig for utviklerne:
<!DOCTYPE html>5 attributter kan oppdages mer intuitivt
Først og fremst bør attributtene du bruker i programmet sømløst kunne avgjøre om de blir oppdaget på riktig måte av nettleserne. HTML5 gir disse attributtene midler til å gjøre akkurat det. Med Modernizr viser biblioteket seg å være et ressurssterkt verktøy, men det er andre måter som å lage elementene før de dissekeres. På denne måten vil det være enkelt å evaluere nettleserkapasiteten.
6 Det har sitt sett med rettelser for IE
Ah vel, Internet Explorer blir sett på ganske lidenskapelig av Internett-fellesskapet over hele verden, og av grunner som er svært berettigede. Som forventet har IE sine egne problemer med å håndtere de nye elementene som HTML 5 fyller inn. Derfor er det viktig å style disse elementene på en måte slik at de blir mer forståelige for denne nettleseren for å gi strukturen til måten HTML5-elementene på. er justert som blokknivåelementer:
header, footer, article, section, nav, menu {
display: block;
}Nå er det alle muligheter for at Internet Explorer vil fortsette å være en smerte, da den kanskje ikke er ordentlig kjent med overskriftselementet. Så stylingen i HTML5 står i fare for å bli åpenbart ignorert. Når det er sagt, er det en enkel løsning for det samme:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");7 Geolokalisering
Geolokalisering er unektelig fangstfunksjonen til HTML5. Det den gjør er at den kaster etter deg de matematiske verdiene som representerer koordinatene til brukerens plassering. Disse plasseringskoordinatene beregnes ved hjelp av nettleseren som den besøkende bruker for å få tilgang til nettstedet.
8-kode som er rotfri og mye mer forståelig
Det anbefales alltid å skrive programmer som er rene, enkle å forstå og skrevet på en måte som er mest gjenbrukbar. HTML5 gjør alt dette mulig, og mer ved å legge til rette for en kode som er svært synkron, semantisk og gir deg friheten til å trekke en linje mellom stil og innhold slik at de lett kan forstås. En standard overskriftskode med navigasjon ser slik ut:
<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
</ul>
</div>
</div>Selv om du kanskje hevder at koden er enkel nok, men la oss se hva HTML5 kan gjøre med den:
<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
</ul>
</nav>
</header>Tilsynelatende tilfører HTML5 mye struktur til hele koden ved å gjøre den mer oppklarende og ved å bruke HTML-overskriftene bedre representere innholdet ditt.
9 Du trenger ikke å forholde deg til "Type" for skript og lenker
Det er ingen mangel på webutviklere som lener seg tungt mot Type-attributtet, spesielt når de trenger å utnytte kodene til skript. Med HTML 5 kan du kurere typene dine, heller fjerne dem helt. Koden blir som et resultat beskrivende.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Med settet med funksjoner fremhevet ovenfor, er det ikke vanskelig å utlede at HTML5 er her for å endre nettteknologisfæren på en måte som er mest dominerende og påvirker. Og den har allerede drevet noen av de mest fantastiske nettstedene og temaene på Internett.
Utmerkede eksempler på kraftige HTML5-nettsteder
Følgende eksempler fremmer det faktum at HTML5 er her for å skape kraftige endringsbølger:
1 Ghost Writer Art Studio
Ghost Writer Art Studio forvirrer kanskje ikke tankene dine, men det kommer garantert til å gi en sterk uttalelse, takket være de smarte designene som tilfeldigvis er fengende, for å si det mildt. HTML5-verktøyene har gitt det en appell som er vanskelig å matche.
2 Valpolicella Negrar vingård
Nettstedet til Cantina Valpolicella Negrar skaper en stemning som er vanskelig å trekke på skuldrene, snarere en stemning du ønsker å holde på. HTML5-funksjonene brukes mest intelligent for dette minimalt utformede nettsteder som gir maksimal effekt.
3 Waterloo: The Film
Nettstedet kobler deg rett inn i kampen, uten behov for tidsmaskin. Den gjør jobben sin med å gi deg et blikk inn i hva filmen handler om svært godt med sin fine bruk av farger, layout, posisjonering av elementer og mer.
4 Zizzi
Hvis du ennå ikke tror på det eldgamle ordtaket, "et bilde sier mer enn tusen ord", vil dette definitivt overbevise deg. Drevet av HTML5, er nettstedet til Zizzi et godt bevis på hvordan kreativitet kombinert med en kraftig plattform kan skape magi. Laget av det velrenommerte byrået, Propeller Communications, sørger denne for at Geolocation API-funksjonen til HTML5 brukes rikelig.
5 Vannlerret
Og så er det det! Water Canvas er betagende vakkert, men fokus har også blitt trukket på responsen til nettsiden. Teksturene og den generelle layouten kombineres godt nok til å få dette stykket til å skille seg ut.
6 Lardini
Lardini-nettstedet har nok mote til å snakke for seg selv og for merket. HTML 5 ga faktisk sine designere og utviklere et helt ensemble av verktøy og muligheter for å utøve sin kreativitet på den mest frihjulende og potente moten.
Disse eksemplene bør gi deg en autentisk grunn til pause og ytterligere øke denne voksende trekkraften mot HTML5; noe som bare vil holde webutviklingsteknologien i god stand.