HTML5 on innovaation virtuoosiosa, ja se on todellakin tekniikka, joka on tuonut uutta verta verkkosivustokehityksen genreen. Halusitpa sitten verkkosivustollasi olevan muotoaan muuttavia toimintoja tai haluat sen näyttävän ylivoimaisesti kauniilta visuaalisesti, HTML5 tekee työn puolestasi ja mitä mahtavimmalla tavalla.

Vaikka tämä alusta tunkeutui verkkokehitysmaailmaan jo kauan sitten, ei ole pulaa verkkovastaajista, joilla ei ole sitä "kolmen suosituimman työkalun" luettelossa verkkosivuston rakentamisen kannalta. Ja suuri osa Näistä verkkovastaavista käyttää jo muita alustoja verkkosivuillaan, mikä tekee kompromisseja monista ominaisuuksista, jotka HTML5 olisi voinut integroida heidän verkkosivustoihinsa.

1 Se antaa vapaat ohjat luoville sieluille

Innovaatio on suurimpien suunnittelijoiden ja kehittäjien tunnusmerkki, ja kun tulee työkalu, jonka avulla he voivat harjoittaa luovuuttaan rajattomasti, sitä on tuettava. HTML5 sopii täydellisesti ja parhaimmalla tavalla. Verkkokehityskehyksenä HTML5 on erittäin muokattavissa, joten suunnittelun ammattilaiset voivat ilmaista itseään. Joten kun edelläkäviminen on asialistallasi, HTML5-vaunu on paikallaan.

2 Paljon parannettu videotuki on käytettävissä

Videotukea on parannettu huomattavasti uudella HTML5-upotusvideolla selaimille. Koska kaikki selaimet eivät tue erilaisia muotoja, kuten H.264, sinun on käytettävä seuraavaa, kun haluat näyttää HTML5-videon:

<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 Sen avulla voit tehdä verkkosivustoja "mobiilikäyttöön" sen sijaan, että se pakottaisi sinut luomaan useita versioita

Kirjaudu sisään sivustosi analytiikkaan, raaputa pintaa hieman ja tarkkaile käyttöjärjestelmäalustoja, joilta saat suurimman osan vierailustasi. Yllätyt nähdessäsi, että suurin osa käynneistäsi tulee mobiilikäyttäjiltä, toisin kuin vuosi sitten, jolloin verkkosivustollasi oli luultavasti enemmän työpöytäkäyttäjiä. Siten mobiilisivuston tekeminen on paljon suositeltavampaa kuin työpöytäkeskeisen verkkosivuston tekeminen ja mobiiliystävällisen version luominen siitä. Ja HTML5 tekee siitä erittäin tehokkaan harjoituksen mobiililaitteille suunniteltujen verkkosivustojen luomiseen, jotka säilyttävät silmänsä houkuttelevan, kun niitä käytetään pienemmillä näytöillä ja jotka mukautuvat pienempään kokoon aiheuttamatta yhteensopivuus- tai reagointiongelmia.

4 Convoluted XHTML doctype tekee tien helpommalle, vähemmän hankalalle versiolle

Ilmaiseksi sanottuna kehittäjäyhteisö ei ole suhtautunut XHTML-dokumenttiin intohimoisesti. Ja syy samaan on enemmän kuin ilmeinen, kun se kirjoitetaan seuraavasti:

<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
    "http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 on tehnyt ilmoituksesta paljon lyhyemmän ja ymmärrettävämmän kehittäjille:

<!DOCTYPE html>

5 attribuuttia voidaan havaita intuitiivisemmin

Ensinnäkin ohjelmassasi käyttämiesi attribuuttien pitäisi pystyä saumattomasti määrittämään, tunnistavatko selaimet ne oikein. HTML5 antaa näille attribuuteille edellytykset tehdä juuri niin. Modernizr-kirjasto osoittautuu kekseliääksi työkaluksi, mutta on myös muita tapoja, kuten elementtien luominen ennen niiden leikkaamista. Tällä tavalla on helppo arvioida selaimen ominaisuuksia.

6 Sillä on korjauspaketti IE:lle

No, Internet Exploreria suhtaudutaan melko kiihkeästi Internet-yhteisössä kaikkialla maailmassa, ja syistä, jotka ovat erittäin oikeutettuja. Kuten odotettua, IE:llä on omat ongelmansa HTML5:n sisältämien uusien elementtien käsittelyssä. Siksi näiden elementtien muotoilu sellaiseksi, että ne tulevat ymmärrettävämmiksi tälle selaimelle, on tärkeää, jotta HTML5-elementtien tapa saa rakenteen tunteen. on kohdistettu lohkotason elementteinä:

header, footer, article, section, nav, menu {
   display: block;
}

Nyt on kaikki mahdollista, että Internet Explorer on jatkossakin tuskallinen, koska se ei ehkä tunne kunnolla otsikkoelementtiä. Joten HTML5:n tyyli on vaarassa jäädä räikeästi huomiotta. Samalle on kuitenkin helppo ratkaisu:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");

7 Maantieteellinen sijainti

Geolocation on kiistatta HTML5:n saalisominaisuus. Se heittää sinulle matemaattiset arvot, jotka edustavat käyttäjän sijainnin koordinaatteja. Nämä sijaintikoordinaatit lasketaan käyttämällä selainta, jolla vierailija käyttää verkkosivustoa.

8 koodia, joka on sotkuton ja paljon ymmärrettävämpi

On aina suositeltavaa kirjoittaa ohjelmia, jotka ovat puhtaita, helposti ymmärrettäviä ja kirjoitettuja mahdollisimman uudelleenkäytettäviksi. HTML5 tekee kaiken tämän mahdolliseksi, ja enemmänkin mahdollistamalla koodin, joka on erittäin synkroninen, semanttinen ja antaa sinulle vapauden piirtää rajan tyylin ja sisällön välille, jotta ne ovat helposti ymmärrettävissä. Normaali otsikkokoodi navigoinnin kanssa näyttää tältä:

<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>

Vaikka saatat väittää, että koodi on tarpeeksi yksinkertainen, katsotaanpa mitä HTML5 voi tehdä sillä:

<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>

Ilmeisesti HTML5 lisää koko koodiin paljon rakennetuntumaa tekemällä siitä selkeämmän ja käyttämällä HTML-otsikoita kuvaamaan paremmin sisältöäsi.

9 Sinun ei tarvitse käsitellä komentosarjojen ja linkkien tyyppiä

Ei ole pulaa verkkokehittäjistä, jotka ovat tukeutuneet voimakkaasti Type-attribuutin käyttöön, varsinkin kun heidän on hyödynnettävä komentosarjojen tunnisteita. HTML 5:llä voit parantaa tyyppejäsi, mieluummin poistaa ne kokonaan. Tämän seurauksena koodista tulee kuvaava.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

Yllä korostetuilla ominaisuuksilla ei ole vaikea päätellä, että HTML5 on täällä muuttamaan verkkoteknologiaa hallitsevalla ja vaikuttavimmalla tavalla. Ja se on jo toiminut Internetin upeimpiin verkkosivustoihin ja teemoihin.

Erinomaisia esimerkkejä tehokkaista HTML5-verkkosivustoista

Seuraavat esimerkit tukevat edelleen sitä tosiasiaa, että HTML5 on täällä luomassa voimakkaita muutosaaltoja:

1 Ghost Writer Art Studio

Ghost Writer Art Studio ei ehkä jätä mieltäsi, mutta se tulee varmasti antamaan vahvan kannanoton älykkäiden mallien ansiosta, jotka ovat vähintäänkin tarttuvia. HTML5-työkalut ovat antaneet sille vetovoiman, jota on vaikea löytää.

2 Valpolicella Negrar -viinitilaa

Cantina Valpolicella Negrarin verkkosivusto luo tunnelman, jota on vaikea kohauttaa olkapäitään, mieluummin sellaisen tunnelman, jota haluat pitää yllä. HTML5-toimintoja käytetään älykkäimmin näissä minimaalisesti suunnitelluissa verkkosivustoissa, jotka tekevät suurimman vaikutuksen.

3 Waterloo: Elokuva

Sivusto kytkee sinut suoraan taisteluun, aikakonetta ei tarvita. Se tekee tehtävänsä ja antaa sinulle silmäyksen elokuvan sisältöön erinomaisella värienkäytöllä, asettelulla, elementtien sijoittelulla ja muulla tavalla.

4 Zizzi

Jos et ole vielä uskonut ikivanhaan sanontaan "kuva kertoo enemmän kuin tuhat sanaa", tämä vakuuttaa sinut varmasti. HTML5:llä toimiva Zizzin verkkosivusto on hieno osoitus siitä, kuinka luovuus yhdistettynä tehokkaaseen alustaan voi luoda taikuutta. Maineikkain viraston Propeller Communicationsin luoma tämä varmistaa, että HTML5:n Geolocation API -ominaisuutta käytetään runsaasti.

5 Vesikangas

Ja sitten on se! Water Canvas on henkeäsalpaavan kaunis, mutta huomiota on kiinnitetty myös sivuston responsiivisuuteen. Tekstuurit ja yleinen asettelu yhdistyvät tarpeeksi hyvin, jotta tämä kappale erottuu joukosta.

6 Lardini

Lardinin verkkosivuilla on tarpeeksi muotia puhuakseen puolestaan ja brändin puolesta. HTML 5 todellakin antoi suunnittelijoilleen ja kehittäjilleen koko joukon työkaluja ja kykyjä, joilla he voivat harjoittaa luovuuttaan muodin vapaimmalla ja tehokkaimmalla tavalla.

Näiden esimerkkien pitäisi antaa sinulle todellinen syy tauolle ja vahvistaa entisestään tätä kasvavaa vetoa kohti HTML5:tä. jotain, joka vain pitää web-kehitysteknologian hyvänä.