Jana Neužilová

HTML5

nový štandard pre HTML, XHTML a DOM HTML (stále nie je oficiálnym štandardom)

Doctype definícia

<!DOCTYPE html>

Nové formulárové prvky

Typy inputov

Search - po zadaní textu sa objaví vymazávací krížik

<input type="search" name="searchInput">

Phone - zadávanie telefónnych čísiel

<input type="phone" name="phoneInput">

URL - validuje správnosť formátu URL

<input type="url" name="urlInput">

Email - validuje správnosť formátu e-mailu

<input type="email" name="emailInput">

DateTime - ponúka na výber dátum a čas pomocou GUI kalendára

<input type="datetime" name="dateTimeInput">

Date - ponúka na výber dátum pomocou GUI kalendára

<input type="date" name="dateInput">

Month - ponúka na výber mesiac pomocou GUI kalendára

<input type="month" name="monthInput">

Week - ponúka na výber týždeň pomocou GUI kalendára

<input type="week" name="weekInput">

Time - ponúka na výber čas pomocou GUI

<input type="time" name="timeInput">

LocalTime

<input type="localtime" name=localTimeInput">

Number - ponúka GUI pre zadanie čísla.
- min - minimálna hodnota zadaného čísla
- max - maximálna hodnota zadaného čísla
- step - špecifikuje interval čísiel po ktorých sa má meniť

<input type="number" min="0" max="10" step="2" name="numberInput">

Range - ponúka GUI pre zadanie čísla z rozsahu pomocou posuvníka
- min - minimálna hodnota zadaného čísla
- max - maximálna hodnota zadaného čísla
- step - špecifikuje interval čísiel po ktorých sa má meniť

<input type="range" min="0" max="10" step="0.1" name="rangeInput">

Colour - má ponuknúť na výber farbu

Multimédiá nové elementy pre multimédiá

<audio>
<video>

Video

Podporované formáty a ich podpora v prehliadačoch

Formát	IE	Firefox	Opera	Chrome	Safari
Ogg	Nie	3.5+	10.5+	5.0+	Nie
MPEG 4	9.0+	Nie	Nie	5.0+	3.0+
WebM	Nie	4.0+	10.6+	6.0+	Nie

Vloženie videa na stránku:

<video src="movie.ogg" width="320" height="240" controls="controls"></video>

Video element podporuje aj viacero zdrojov. Prehliadač použije prvý zdroj, ktorý rozpozná/dokáže prehrať.

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

Canvas

Používa sa na kreslenie grafiky na stránku - napríklad použitím JavaScript-u.

Vytvorenie canvasu:

<canvas id="myCanvas" width="200" height="100"></canvas>

Na kreslenie do canvasu sa používa JavaScript. Príklad nakreslenia kruhu:

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
 
</script>

WebStorage

Doteraz sa zvyčajne ukladajú do cookies, avšak sú nevhodné pre ukladanie veľkého množstva dát, keďže sú dosť veľkostne obmedzené a sú určené hlavne pre server. HTML5 umožňuje 2 spôsoby uloženia dát na klientovi:

localStorage - ukladanie dát nastálo
sessionStorage - ukladanie dát v rámci session

HTML5 používa JavaScript na ukladanie a prístup k dátam.

WebStorage metódy:

setItem(key,value)
getItem(key)
clear()
removeItem(key)
key(n)

Úlohy:

Vytvorte formulár ktorý bude obsahovať nové typy inputov:
- meno - povinne
- email - typ email, povinne
- url - typ url, povinne
- hodnotenie webu - typ range, stupnica po 1 stupni od 1 do 10 bodov
Uložte všetky dáta, ktoré ste "odoslali", aby boli prístupné aj po reštarte prehliadača a nad formularom doplnte tabulku so všetkými vami odoslanými dátami.
- Vkladanie do pripravenej tabulky - napr pomocou innerHTML
- Uloženie do WebStorage - ako hodnotu kľúča vložiť celý objekt
```
var entry = {                
    name: "Meno",
    email: "email"
};
```
Pre pracu s objektmi:
```
var ObjLocalStorage = {};
 
ObjLocalStorage.getItem = function(key) {
    return JSON.parse(localStorage.getItem(key));
};
 
ObjLocalStorage.setItem = function(key, object) {
    localStorage.setItem(key, JSON.stringify(object));
};
```
Na ukladanie do localStorage pouzit ObjLocalStorage.setItem(key, object);
Na vyberanie z localStorage - ObjLocalStorage.getItem(key);