Web Tech · HTML5

Uvod

HTML5 ne pripada niti jednoj tvrtki niti pojedinom pregledniku ali ga koriste velike kompanije poput Google-a, Microsoft-a, Apple-a, Mozzile i drugih. Uvođenjem ove verzije HTML-a, web je dobio jako puno novih mogućnosti, te poboljšanja starih. Donosi nove vizualne, audio i video mogućnosti koje prije nitko nije niti mislio da će biti moguće napraviti koristeći samo HTML.

Nova verzija omogućava kreiranje aplikacija i web stranica koje imaju brzinu, funkcionalnost i performanse kao aplikacije namijenjene za stolna računala . Korisnici također imaju dobrobiti od nove verzije HTML-a jer više ne moraju instalirati svoje omiljene aplikacije na nekoliko različitih uređaja i brinuti se oko nadogradnje na najnoviju verziju iste. Njihovi podaci, posao, zabava i sve što rade je dostupno bez obzira s kojeg uređaja se spajaju na stranicu.

Sintaksa

Prva i najosnovnija novost unutar HTML dokumenta je element doctype koji određuje na koji način će preglednik pregledavati dokument. U starijim verzijama HTML-a element je morao biti pisan ovako:

<!DOCTYPE HTML PUBLIC "- "http://www.w3.org/TR/html4/loose.dtd">

Unutar HTML5 potrebno je navesti puno kraći zapis:

<!DOCTYPE html>

Još jedna novost u zaglavlju HTML5 dokumenta je postavljane skupa znakova (charset). Na našim područjima se koristi UTF-8 koji sadrži hrvatske znakove poput č,ć,đ,š,ž.

Korištenje određenog skupa znakova (charset) u starijim verzijama HTML-a izgledalo je ovako:

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Koristeći HTML5 potrebno je navesti samo naziv skupa znakova ili načina kôdiranja stranice:

<meta charset="utf-8">

Način korištenja

HTML5 nije softver koji se mora instalirati, nego nova verzija HTML-a. Web preglednici moraju podržavati ovu novu verziju HTML-a, da bi ispravno prikazivali web stranice koje koriste HTML5 funkcije.

Sljedeća generacija web aplikacija može pokretati grafiku visokih performansi, raditi bez spajanja na internet, spremati velike količine podataka na korisnički uređaj, vrlo brzo izvoditi računske operacije te postaviti interakciju na totalno novu razinu.

HTML5 je smanjio potrebu za dodatnim priključcima (poput Flash-a), tolerantniji je na pogreške, sadrži više oznaka (elemenata).

Novi elementi

Novi elementi unutar HTML5:

Novi elementi
Element (Tag)	Opis
<acronym>	Definira akronim
<applet>	Definira applet
<basefont>	Definira glavni font za stranicu
<big>	Definira veliki tekst
Novi elementi forme
Element (Tag)	Opis
<datalist>	Definira listu predefiniranih opcija
<keygen>	Definira generator ključeva (za forme)
<output>	Definira rezultat računanja
Novi medijski elementi
Element (Tag)	Opis
<audio>	Definira zvučnu datoteku
<video>	Definira video datoteku
<source>	Definira višestruki medijski izvor za <video> i <audio>
<embed>	Definira prostor za vanjsku aplikaciju ili dodatak (plug-in)
<canvas>	Definira prostor grafičkog elementa , točnije prostor za crtanje

Izbačeni elementi

Elementi koji su izbačeni iz HTML5 se nalaze u tablici:

Element (Tag)	Opis
<acronym>	Definira akronim
<applet>	Definira applet
<basefont>	Definira glavni font za stranicu
<big>	Definira veliki tekst
<center>	Definira centriran (u sredini) tekst
<font>	Definira font, veličinu i boju teksta
<frame>	Definira okvir
<frameset>	Definira set okvira
<s>	Definira prekrižen tekst
<u>	Definira podvučen tekst

Strukturni elementi

Uvođenjem novih elemenata za pozicioniranje olakšava se izrada dizajna cijele web stranice. Novi elementi koji služe za pozicioniranje elementa su:

<header> - sadržaj zaglavlja (za stranicu ili dio stranice),
<footer> - sadržaj podnožja (za stranicu ili dio stranice),
<section> - dio web stranice,
<article> - nezavisni sadržaj članka,
<aside> - povezani sadržaj,
<nav> - navigacijski izbornik.

Audio

Novost u HTML5 je i korištenje audio elementa moguće je bez dodatnih dodataka (plugin-ova). Najjednostavnija primjena audio elementa:

<audio controls>
<source src="tom_jones.mp3" type="audio/mp3">
</audio>

Također moguće je koristiti i više izvora audio datoteka te je moguće staviti vidljive audio kontrole uz pomoću kojih je moguće regulirati glasnoću i poziciju željene audio datoteke.

Video

Slično kao i audio element, video element omogućuje direktnu reprodukciju video datoteka unutar HTML dokumenta bez potrebe dodatnih dodataka.

<video width="320" height="240" controls>
<source src="tom_jones.mp4" type="video/mp4">
</video>

Canvas

Canvas je element koji omogućuje postavljanje dinamičkih grafičkih elemenata na web stranicama. Također moguće je i napraviti vlastitu grafiku koristeći razne elemente i JavaScript. Kako bi se mogao koristiti canvas element potrebno je željeni kod staviti unutar <canvas> oznaka.

U radu sa canvas-om vrlo je bitno poznavanje koordinatnog sustava jer je to temelj rada u korištenju canvasa.

Gornji lijevi kut ima koordinate x=0, y=0.
x vrijednost povećava se horizontalno dok se y vrijednost povećava vertikalno.
donji desni kut ima koordinate x=100, y=100.
Točka u centru ima koordinate x=50, y=50.

Predefinirana vrijednost canvas-a je pravokutnih veličine 300 sa 150 piksela no veličinu je moguće postaviti na bilo koju drugu vrijednost koristeći svojstva height i width. Svaki canvas element može imati i HTML atribute kao što su klasa, id ili ime. Koristeći JavaScript i id canvas-a povezuje se u jedno cjelinu te se na taj način omogućuje korištenje svih mogućnosti. Kreiranje canvas objekta: Pomoću JavaScript naredbi moguće je kontrolirati canvas elemente koristeći document.getElementById().

<canvas id="Canvas" width="280" height="220"  tyle="border:1px solid #d3d3d3;">

<script>
var c=document.getElementById("Canvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(280,220);
ctx.stroke();
</script>

SVG

SVG znači Scalable Vector Graphics, a to je jezik za opisivanje 2D-grafike i grafičkih aplikacija u XML datoteci. SVG je koristan za vektorske dijagrame. Jedna od značajnijih karakteristika SVG elemenata je ta što ne gube kvalitetu prilikom zumiranja. SVG je postao W3C preporuka 14. Siječnja 2003. te je postao sve korišteniji uz HTML5

<svg height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="100" cy="100" r="100" stroke="black" stroke-width="2" fill="red"/>
</svg>

Dodatni elementi

Uz sve navedene novosti uvedeno je niz novih elemenata koje do sada nije bilo moguće koristiti direktno unutar HTML dokumenta. Većina elemenata donosi novosti po pitanju grafičkih elemenata za koje više nije potrebno uključivati razne dodatke kako bi stranica izgledala funkcionalno i moderno. KAo primjere takvih elemenata je vrijedno istaknuti oznaku <meter> koji grafički prikazuje veličinu nečega i <progress> koji prikazuje radnju koja se odvija (na primjer učitavanje neke video datoteke na stranicu ).

Progress:

Meter:
2 out of 10

Progress:
<progress value="22" max="100"></progress>
Meter: 
<meter value="5" min="0" max="20"></meter>

Tip unosa

HTML5 has several new input types for forms. These new features allow better input control and validation. This chapter covers the new input types:

color
date
datetime
datetime-local
month
weeek
time
number
tel
range
search
url
email

color:

*omogućava odabir boja u novom prozoru

date:

*omogućava odabir datuma

month:

*omogućava odabir mjeseca

time:

*omogućava odabir vremena

email:

*izvršava validaciju unesenog teksta tj. provjerava da li je unesen mail ili obični tekst

number:

*omogućava odabir broja

range:

*omogućava unos vrijednosti preko klizača

 color:
<input type="color">

date:
<input type="date">

month:
<input type="month">

time:
<input type="time">

email:
<input type="email">

number:
<input type="number">

range:
<input type="range">

* preporuča se pregled putem Google Chrome-a koji podržava SVE nove tipove unosa.

Elementi

Novi elementi forme su :

<datalist>

Element datalist omogućuje odabir predefiniranih vrijednosti. Također omogućava automatsku ponudu vrijednosti. Vrijednosti koje se nude kao izbor upisane se u atributima elementa.

Odabir preglednika:

<input list="preglednici">
<datalist id="preglednici">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<keygen>

Svrha keygen elementa je pružiti korisniku sigurniji način provjere korisnika. Kada se forma potvrdi kreiraju se dva ključa, privatni i javni. Privatni ključ je pohranjen lokalno dok se javni ključ šalje serveru. Javni ključ se može iskoristiti za certifikata kako bi klijent mogao u budućnosti pristupati stranici.Kao rezultat forma će vratiti par ključ- vrijednost i to vrijednost enkriptiranu ovisno o odabranoj vrijednosti unutar forme.

<input type="text" name="usr_name">
<keygen name="security">
<input type="submit" value="Pošalji">

<output>

Ukoliko se ne želi koristiti JavaScript-a za izračun nekih jednostavnih izraza moguće je koristiti HTML5 oznaku output.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

<fieldset>

Koristeći element fieldset moguće je grupirati niz elemenata tako da čine jednu cjelinu.

Podaci o korisniku Ime:
Email:
Datum rođenja:

<fieldset>
<legend>Podaci o korisniku</legend>
    Ime:<input type="text">
    Email:<input type="email">
    Datum rođenja:<input type="date">
</fieldset>

<figcaption>

Koristeći element figcaption moguće je postavi opis slike koja se nalazi unutar web stranice.

<figure>
<img src="img/yosemite.jpg" alt="yosemite">
<figcaption>Slika 1. Park Yosemite</figcaption>
</figure>

<optgroup>

Ukoliko postoji potreba za grupiranjem selekcijskog odabira korištenjem elementa optgroup moguće je grupirati skupine koje se mogu odabrati iz padajućeg izbornika.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Atributi

Novom verzijom HTML-a uvedeno je i nekoliko novih atributa koji se mogu koristiti unutar forme. Neki od njih su:

required
autofocus
autocomplete
novalidate
multiple
placeholder

required:

Koristeći ovaj atribut moguće je odrediti koji su elementi obavezni za unos te se morma neće moći potvrditi ukoliko se ti elementi ne ispune.

autofocus:

Koristeći atribut autofocus moguće je odrediti na koji se element želi postaviti fokus prilikom otvaranja stranice.

autocomplete:

Koristeći atribut autocomplete moguće je zapamtiti prethodne unose u elemente na razini cijele forme ili samo nekog elementa. Isto tako moguće je postaviti pamćenje prethodnih unosa za cijelu formu osim za neke elemente. Ovaj atribut napravo sprema do sada unašane vrijednosti i automatski nudi odabir postojećih vrijednosti prilikom unosa vrijednosti u element.

novalidate:

Ukoliko se želi isključiti automatska provjera unesenih podataka (email element ima predefinirano automatsku provjeru unesenih podataka) to je moguće napraviti koristeći atribut novalidate.

multiple:
Odaberite slike:
Prilikom podizanja (uploadanja) datoteka na stranicu u većini slučajeva moguće je odabrati samo jednu datoteku. To ograničenje može usporiti rad krajnjeg korisnika ukoliko je potrebno odabrati nekoliko datoteka i postaviti ih na stranicu. Koristeći atribut multiple omogućeno je označavanje više datoteka odjednom.

placeholder:

Placeholder je atribut koji prikazuje kratki opis koju vrijednost element očekuje. Opis se prikazuje dok je element prazan i nestaje čim element dobije fokus.

 required:
<input type="text" name="username" required>

autofocus:
<input type="text" name="usrname" required autofocus>

autocomplete:
<form autocomplete="on">
    Ime:<input type="text">
    Prezime:<input type="text">
    E-mail:<input type="email" name="email">
</form>

novalidate:
<form novalidate>
    E-mail:<input type="email" name="email">
</form>

multiple:
Odaberite slike:<input type="file" name="img" multiple>

placeholder:
<input type="text" name="username" placeholder="Korisničko ime">
<input type="password" name="pass" placeholder="Lozinka">

Korištenje navigacije i GPS-a danas je svakodnevnica, većina današnjih mobilnih uređaja ima ugrađene GPS senzore uz pomoću kojih je moguće točno odrediti lokaciju korisnika. GPS senzori nisu baš česta pojava računalima. Zahvaljujući opciji geolociranja korisnici koji nemaju GPS senzor također mogu koristiti mogućnosti navigacije i lociranja. Unutar HTML-a geolokacija se može vrlo jednostavno koristiti za razne primjene od jednostavnog pozicioniranja te traženja raznih usluga u okolici pa čak do potpuno funkcionalne navigacije ukoliko se korisni i GPS senzor uređaja. Prije prikazivanja lokacije, korisnik mora potvrditi da želi podijeliti lokaciju sa serverom, ukoliko korisnik odbije podijeliti svoju lokaciju neće se moći odrediti njegova pozicija. Isto kao i za prethodne opcije potrebno je provjeriti da li preglednik podržava korištenje geolokacije.

HTML5 Geolokacija se koristi da bi se prikazala lokacija korisnika.

Lokacija korisnika je na srediti karte. Na ovaj način korisnik jednim pogledom na kartu može znati gdje se nalazi i što se nalazi u njegovoj blizini. Prilikom dohvaćanja podataka postoji mogućnost pojave greške. Greške koje se mogu pojaviti su:

PERMISSION_DENIED – ukoliko korisnik ne želi podijeliti lokaciju,
POSITION_UNAVAILABLE – nije moguće odrediti položaj,
TIMEOUT – vrijeme unutar kojega se mora odrediti položaj je isteklo
UNKNOWN_ERROR - nepoznata greška

HTML 5

Osnovno