Top 5 novosti v HTML5


html5 top 5 novosti

HTML5

HTML5 je prinesel veliko novih funkcionalnosti in s tem olajšal življenja mnogih razvijalcev. V tem članku boste našli 5 novosti, ki vam bodo v pomoč pri postavljanju boljših spletnih strani.

1. Avdio in video podpora

Ker je bil HTML5 objavljen z namenom, da izboljša jezik s podporo za najnovejše multimedije, je najverjetneje najbolj pomembna nova značilnost avdio in video podpora.

Vredno je omeniti, da HTML5 standard ne podpira vseh formatov. Vaša najboljša in priporočena možnost je, da se držite uporabe formata MP4 za video in MP3 za avdio.

  • Podprti video formati: MP4, WebM in Ogg
  • Podprti avdio formati: MP3, WAV in Ogg

Primer kode za vstavljanje avdio in video datotek:

<video autoplay="autoplay" width="320" height="240">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
</video>

<audio controls="controls">
    <source src="horse.ogg" type="audio/ogg" />
    <source src="horse.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

2. Boljši obrazci

HTML5 prinaša veliko novih tipov in atributov za vnosna polja. To je zelo dobrodošel dodatek, saj naredi vnosna polja interaktivna (odvisno od podpore brskalnika), brez uporabe zunanjega vtičnika (plugin-a).

Na primer – če ste hoteli postaviti color picker (izbiralec barve) pred HTML5, ste morali uporabiti vtičnik kot naprimer jQuery UI Colorpicker. Sedaj morate samo nastaviti pravi tip vnosnega polja in brskalnik bi moral poskrbeti za ostalo.

<input required type="color" />

OPOMBA: Vsi brskalniki ne podpirajo vseh tipov vnosnih polj – vedno preizkusite svojo kodo.

HTML5 date picker v Google Chrome

HTML5 date picker (izbiralec datumov) v Google Chrome

Novi tipi vnosnih polj:

  • color– iskalnik odpre color picker (izbiralec barve)
  • date – iskalnik odpre date picker (izbiralec datumov)
  • time – iskalnik odpre time picker (izbiralec časa)
  • email – e-poštni naslov je avtomatično potrjen
  • range – pokaže drsnik za nastavitev števila in mu določi razpon

Novi atributi vnosnih polj:

  • placeholder – določi namig pričakovane vrednosti
  • required (zahtevano?) – določi obvezno vnosno polje
  • form – dopušča vnosnemu polju, da je zunaj HTML oblike, a še vedno del le te
  • min in max atributa – določata minimalno in maksimalno vrednost vnosnega polja, z enim izmed naslednjih tipov: number (število), range (razpon), date (datum), datetime-local (lokalni čas in datum), month (mesec), time (čas), week (teden)
  • multiple – dopušča, da vnesete več kot eno vrednost v input z enim izmed naslednjih tipov:  email (e-pošta), file (datoteka)

Za več informacij obiščite HTML Input Types in HTML Input Attributes.

3. Atributi po meri

Končno imamo uradno podporo za atribute po meri na vseh HTML elementih. To nam še posebno pride prav, ko moramo posredovati kakšne podatke JavaScriptu. Ni več potrebe po skritih vnosnih poljih in drugih “hack-ih”, saj z data attribute  posredovanje informacij postane zelo preprosto.

Kako nastaviti in pridobiti atribute po meri:

<div id="mojDiv" data-moj-atribut="Neka vrednost"></div>
<a id="mojaPovezava" href="#">
    Klikni me!
</a>
<script>
    var mojDiv = document.getElementById('mojDiv');
    var mojaPovezava = document.getElementById('mojaPovezava');
    var myAttr = mySampleDiv.getAttribute('data-moj-atribut');
    mojaPovezava.on('click',function(e){
        e.preventDefault();
        alert(myAttr);
        return false;
    });
</script>

Preizkusite: Klikni me!

4. Novi grafični elementi

HTML5 nam prinaša <canvas> in <svg> elemente. Canvas (platno) se uporablja za sprotno risanje elementov (pixel by pixel) z JavaScript-om. SVG pa je jezik za opisovanje 2D grafičnih vektorjev v XML formatu.  SVG elementi ostanejo v spominu kot objekti v DOM-u, medtem ko canvas elemente brskalnik pozabi takoj, ko so narisani.

Canvas je odličen za grafično zahtevne igrice, a je odvisen od resolucije (če sliko povečamo izgubimo kvaliteto).

SVG grafika je neodvisna od resolucije (sliko lahko večamo ali manjšamo po želji brez izgube kvalitete) in se dobro obnese pri aplikacijah z večjo površino, kot je naprimer Google Maps.

Spodaj je primer kode za risanje kroga s canvas-om in SVG:

Canvas:

<canvas id="demoCanvas1" style="border: 1px solid #000;" width="100" height="100">
</canvas>
<script>
     var c = document.getElementById("demoCanvas1");
     var ctx = c.getContext("2d");
     ctx.beginPath();
     ctx.arc(50,50,40,0,2*Math.PI);
     ctx.stroke();
</script>


SVG:

<svg width="100" height="100" style="border: 1px solid #000;">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

5. Boljša semantična struktura in preprostejša koda

HTML5 semantic elements - elementi s pomenom

Za tiste, ki imajo radi urejeno in pregledno kodo prinaša HTML5 veliko novih semantičnih elementov (elementov s pomenom).

Dobili nismo samo novih <header> in <footer> elementov, sedaj lahko za opisovanje vsebine uporabljamo tudi elemente kot so <article>,  <nav> ali <summary>.

Novi semantični elementi:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Poleg vsega pa HTML5 še podpira lenobo, saj vam omogoča, da napišete krajšo kodo, ki jo lahko brez napak spravite čez HTML Validator.

Za začetek lahko sedaj v dokumentu popolnoma izpustite <head> in pozabite na <html> in <body> označbe, čeprav se to ne priporoča. To pomeni, da bo spodnja koda še vedno veljaven HTML5:

Testna stran
<h1>To je naslov</h1>
<p>To je odstavek.</p>

Prav tako si DOCTYPE-a ni več nemogoče zapomniti:

/* prej */
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

/* sedaj */
 <!DOCTYPE html>

Tudi type atribut na <link> in <script> označbah ni več nujen:

/* prej */
<link rel="stylesheet" type="text/css" href="style.css">
<script src="myscript.js" type="text/javascript"/>
<script type="text/javascript"/>
    function someFunc(){
        alert('Some value');
    }
</script>

/* sedaj */
<link rel="stylesheet" href="style.css">
<script src="myscript.js">
<script>
    function someFunc(){
        alert('Some value');
    }
</script>

Če preživite vsaj približno toliko časa v HTML-ju kot mi, verjetno že poznate vse te novosti in jih tudi uporabljate in cenite. V nasprotnem primeru pa vam toplo priporočamo, da se z njimi seznanite in si prihranite čas in živce.

1 Komentar

Komentiraj

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This