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čochFormá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 |
Video element podporuje aj viacero zdrojov. Prehliadač použije prvý zdroj, ktorý rozpozná/dokáže prehrať.
Canvas
Používa sa na kreslenie grafiky na stránku - napríklad použitím JavaScript-u.Vytvorenie canvasu:
Na kreslenie do canvasu sa používa JavaScript. Príklad nakreslenia kruhu:
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
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
Pre pracu s objektmi:- var entry = {
- name: "Meno",
- email: "email"
- };
Na ukladanie do localStorage pouzit- var ObjLocalStorage = {};
- ObjLocalStorage.getItem = function(key) {
- return JSON.parse(localStorage.getItem(key));
- };
- ObjLocalStorage.setItem = function(key, object) {
- localStorage.setItem(key, JSON.stringify(object));
- };
ObjLocalStorage.setItem(key, object)
;
Na vyberanie z localStorage -ObjLocalStorage.getItem(key)
;
Odkazy a literatura
- http://www.w3schools.com/html5/
- http://diveintohtml5.org/
- http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
- http://html5test.com/ otestovanie podpory prehliadača pre HTML5
- http://www.findmebyip.com/litmus/ prehľad podpory HTML5
- http://www.modernizr.com/ JavaScript knižnica pre podporu HTML5 a CSS3 v starších prehliadačoch
- http://html5boilerplate.com/
- http://html5demos.com/