HTML 5: Rozdiel medzi revíziami

Z Kiwiki
Skočit na navigaci Skočit na vyhledávání
 
(36 medziľahlých úprav od 3 ďalších používateľov nie je zobrazených)
Riadok 1: Riadok 1:
−
HTML5 [13] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v novej verzií je samotná štruktúra HTML dokumentu, veľké množstvo nových elementov a aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V súčasnosti je stále HTML 5 vo fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5.
+
[[Kategória:Webovské technológie]]
 +
[[Kategória:Informatika]]
 +
[[Kategória:web]]
  
−
===Elementy štruktúry===
+
==Úvod do HTML5==
−
Doposiaľ bola štruktúra HTML dokumentu tvorená z ''div ''elementov. HTML5 pridáva nové elementy k identifikácií každého z nich. Tieto majú presne stanovený sémantický význam a lepšie sa v nich orientuje aj samotný programátor.
 
  
−
Tabuľka 3.1 Zoznam nových sémantických elementov štruktúry HTML5
 
  
−
{|border="2" cellspacing="0" cellpadding="4" width="600px" class="prettytable"
+
Počas obdobia 10-tich rokov HTML4 neprešlo žiadnym zásadným update-om. Skupina WHATWG (Web Hypertext Application Technology Working Group – skupina organizácií, napr. Mozilla, Opera, Apple) začala vývoj HTML5 v roku 2004. V súčastnosti väčšina popredných priehliadačov podporuje HTML5 tagy. Avšak ani v jednom prípade sa nedá hovoriť o plnej podpore. HTML5 prináša nové možnosti pomocou ktorých je možné jednoduchšie organizovať webovú stránku. HTML 5 je vlastne spojenie dvoch jazykov: HTML a XML. HTML 4 používa dva syntaxy: '''SGML''' (tzv. HTML 4.01) a '''XML''' (tzv. XHTML 1.0). SGML nebol nikdy nasadený v prehliadačoch a HTML vývojových nástrojoch. HTML 5 definuje nové sériovo volané HTML, ktoré vyzerá veľmi podobne ako predchádzajúci známy SGML.
−
|section
 
−
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.
 
  
−
|-
 
−
|header
 
−
|Hlavička časti, v ktorej je začlenená.
 
  
−
|-
+
[[Súbor:html5-serializations.png|framed|center|Vznik HTML5 ]]
−
|footer
 
−
|Pätička časti, v ktorej je začlenená.
 
  
−
|-
 
−
|nav
 
−
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.
 
  
−
|-
+
===Podpora prehliadačov===
−
|article
 
−
| Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.
 
  
−
|}
+
Najnovšie verzie Safari, Chrome, Firefox, Opera podporujú väčšinu funkcií integrovaných v HTML5. Internet Explorer 9 bude podporovať niektoré funkcie HTML5. :-)
  
−
===Elementy multimédií===
+
[http://html5test.com/ Test prehliadača HTML5]
−
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''
 
  
−
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.
+
[http://tools.css3.info/selectors-test/test.html Test prehliadača CSS3 Selectors]
  
−
===Inline elementy===
+
==Štruktúra HTML5==
−
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.
 
  
−
Tabuľka 3.2 Zoznam nových inline elementov HTML5
 
  
−
{|border="2" cellspacing="0" cellpadding="4" width="600px" class="prettytable"
+
HTML 5 obsahuje množstvo nových elementov uľahčujúcich štruktúrovanie stránok. Stránky písane v HTML4 majú štruktúru pozostavájucu z hlavičky, päty a samozrejme stĺpcov. Označujú sa pomocou elementov ''div'' odlíšených prostredníctvom atribútov ''id'' a ''class''.  
−
|mark
 
−
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov
 
  
−
|-
 
−
|time
 
−
|Označuje čas, alebo dátum v bloku textu.
 
  
−
|-
+
[[Súbor:html5.gif|framed|center|Štruktúra HTML]]
−
|meter
 
−
|Predstavuje skalárne meradlá.
 
  
−
|-
 
−
|progress
 
−
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.
 
  
−
|}
+
Na obrázku je typický dvojstĺpcový layout vyznačený elementami ''div'' s atributy ''id'' a ''class''. Obsahuje hlavičku, pätu a navigačnú lištu pod hlavičkou. Hlavný obsah je v článku a vedľajšom stĺpci umiestnením vpravo. Element div musí byť použitý, nakoľko súčasná verzia HTML 4 neobsahuje potrebné sémantické prvky pre presnejšie vyznačenie špecifických častí dokumentu. HTML 5 rieši tento problém zavedením nových elementov reprezentujúcich jednotlivé časti dokumentu. Element je nahradený novými elementami:'' header, nav, section, article, aside'' a ''footer''.
  
−
===Podpora režimu off-line===
 
−
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Caching APIs, ktorá je obdobou LocalServer API.
 
  
−
====SQL API====
+
Tento dokument by mohol vyzerať takto:
−
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že užívateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.
 
  
−
Tabuľka 3.3 Zoznam metód návrhu HTML5
+
<source lang="html4strict">
 +
<body>
 +
<header>...</header>
 +
<nav>...</nav>
 +
<article>
 +
<section>
 +
...
 +
</section>
 +
</article>
 +
<aside>...</aside>
 +
<footer>...</footer>
 +
</body>
 +
</source>
  
−
{|width="600px" class="prettytable"
+
===Sémantické prvky===
−
|bgcolor = "#EAEAEA"|Metóda:
 
−
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)
 
  
−
|-
 
−
|Popis:
 
−
|Vytvára databázový objekt podľa zvolených parametrov<br>
 
  
−
|-
+
Rovnako ako konštrukčné prvky, HTML 5 pridáva niektoré čisto sémantické prvky:
−
|Parametre:
 
−
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch
 
  
−
|-
+
* aside
−
|Ďalšie Metódy:
+
* figure
−
|transaction(), executeSql()
+
* dialog
  
−
|}
+
'''Aside '''element reprezentuje poznámku, tip, sidebar, pullquote, alebo niečo, čo je práve mimo hlavného toku informácií poskytovaných dokumentom.
  
−
====LocalStorage API====
 
−
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''
 
  
−
Tabuľka 3.4 Zoznám niektorých metód pre prácu s&nbsp;lokálnym úložiskom
+
<source lang="html4strict">
 +
<p>Me and my family visited The Epcot center this summer.</p>
 +
<aside>
 +
<h4>Epcot Center</h4>
 +
The Epcot Center is a theme park in Disney World, Florida.
 +
</aside>
 +
</source>
  
−
{|border="2" cellspacing="0" cellpadding="4" width="100%"
+
'''Figure''' je element predstavujúci blokovú úroveň obrázku, spolu s popisom.
−
|bgcolor = "#EAEAEA"|Metóda:
 
−
|bgcolor = "#EAEAEA"|Popis
 
  
−
|-
+
<source lang="html4strict">
−
|clear()
+
<figure>
−
|zmaže celý obsah objektu
+
<img ... > (or video, table etc)
 +
<figcaption>A rabid unicorn goring a fairy.</figcaption>
 +
</figure>
 +
</source>
  
−
|-
 
−
|getItem()
 
−
|získa obsah objektu podľa názvu
 
  
−
|-
+
'''Dialóg''' element predstavuje komunikáciu medzi tvorcom dokumentu a čitaťeľom (ziskava potrebné informácie pre ďalšie spracovanie).
−
|key()
 
−
|získa kľúč podľa čísla
 
  
−
|-
+
<source lang="html4strict">
−
|length
+
<dialog>
−
|Počet uložených kľučov
+
<dt>Teacher</dt>
 +
<dd>What is 2+2</dd>
 +
<dt>Student</dt>
 +
<dd>4</dd>
 +
<dt>Teacher</dt>
 +
<dd>Correct!</dd>
 +
</dialog>
 +
</source>
  
−
|-
 
−
|removeItem()
 
−
|odstráni položku podľa jej mena
 
  
−
|-
+
===Canvas===
−
|setItem()
 
−
|Pridá hodnotu položke
 
  
−
|}
 
  
−
Podpora off-line aplikácií je zatiaľ vo fáze vývoja. Preto je podpora v&nbsp;prehliadačoch zatiaľ len minimálna.
+
Je to vlastne plátno známe z iných programovacích jazykov. Umožňuje generovať vlastný obsah.
 +
 
 +
 
 +
Použitie:
 +
 
 +
* Dynamická a interaktívna grafika (napr. [http://media.liquidx.net/js/plotkit-tests/dynamic.html# graf reagujúci na ovládanie používateľa]),
 +
* Kreslenie obrázkov pomocou 2D kreslenia API ([http://html5demos.com/canvas čiary, kružnice, výplne, tvary]),
 +
* Vhodné pre grafy, aplikácie, puzzle a [http://canvex.lazyilluminati.com/83/play.xhtml hry].
 +
 
 +
 
 +
 
 +
[[Súbor:HTML5_Canvas_Cheat_Sheet.png|framed|center|Canvas Cheat ]]
 +
 
 +
 
 +
 
 +
===Audio a video===
 +
 
 +
 
 +
V HTML4 chýbajú prostriedky, ktoré by umožňovali úspešne pracovať s vloženými multimédiami (závisí na Flashi). Aj keď je možné vkladať multimédia prostredníctvom rôznych pluginov (napr. QuickTime, Windows Media a ďalšie), Flash je jediný rozšírený plugin, ktorý poskytuje platformovo nezávislé riešenie spolu s potrebným API (Application Programming Interface). V HTML5 poskytuje tuto funkcionalitu priamo webový prehliadač prostredníctvom natívnej podpory pre vkladanie videa, audia a DOM API pre ovládanie a prehrávanie pomocou skriptovacích technológií. HTML5 obsahuje tagy pre audio a video.
 +
 
 +
 
 +
[http://html5demos.com/video Video]
 +
 
 +
<source lang="html4strict">
 +
<video src="video.mp4" width="320" height="480" posters="screenshot.jpg" controls />
 +
</source>
 +
 
 +
alebo
 +
 
 +
<source lang="html4strict">
 +
<video id="video" width="640" height="480" volume=".7" controls autoplay>
 +
<source src="video.mp4" type="video/wmv"> (For Browser supporting H.264 codec)
 +
<source src="video.ogg" type="video/ogg"> (For Browser supporting Theora codec)
 +
</video>
 +
</source>
 +
 
 +
 
 +
[http://moztw.org/demo/audioplayer/ Audio]
 +
 
 +
<source lang="html4strict">
 +
<audio>
 +
<source src="music.oga" type="audio/ogg">
 +
<source src="music.mp3" type="audio/mpeg">
 +
</audio>
 +
</source>
 +
 
 +
Na základe podpory zo strany prehliadača dokážeme zvoliť codec('''co'''der-'''dec'''oder).
 +
 
 +
===Drag and Drop===
 +
 
 +
[http://html5demos.com/drag# Drag and Drop] je jedným zo základných interakcií, ktoré ponúka grafické používateľské rozhranie v HTML5. Drag and drop je funkcia používaná v&nbsp;grafických prostrediach pri premiestňovaní objektov alebo pri úprave tvarov. Slúži na prekopírovanie súboru z&nbsp;jedného adresára do&nbsp;druhého, vymazávanie alebo presúvanie do koša ako aj na vytváranie rôznych druhov asociácií medzi dvoma abstraktnými objektami.
 +
 
 +
Pri týchto aplikáciách sa využíva myš, kedy sa pri stlačenom tlačidle presúva vybraný objekt do určeného cieľa. V&nbsp;cieľovom bode sa tlačidlo myši pustí a&nbsp;tým sa ukončí funkcia drag and drop . Táto funkcia je preto jednoduchá na používanie a&nbsp;súčasne účinná. Pri vyvolaní danej funkcie sa spúšťa viacero procesov:
 +
 
 +
* Dragstart: presúvanie vybraného objektu sa začalo
 +
* Drag: myš sa pohybuje spolu s&nbsp;presúvaným objektom
 +
* Dragenter: presúvaný objekt sa pohybuje smerom k&nbsp;cieľovému bodu
 +
* Dragover: presúvaný objekt bol prenesený mimo cieľového bodu
 +
* Dragleave: objekt umiestnený na nesprávnom mieste bol z&nbsp;neho vybratý
 +
* Drop: druhý krát prenášaný objekt bol úspešne umiestnený v&nbsp;cieli
 +
* Dragend: presúvanie bolo úspešne ukončené
 +
 
 +
Pohyb myšou je umožnený do všetkých strán ale obmedzený hranicami okna prehliadača. Vykonávaná akcia sa vzťahuje len na objekt ktorý je presúvaný a&nbsp;môže byť problém umiestniť daný objekt do vybraného cieľa ( umiestniť na zvolené miesto&nbsp;).
 +
 
 +
Podpora funkcie drag and drop nie je vo všetkých softvéroch (&nbsp;prehliadačoch&nbsp;), hoci je to rýchlo a&nbsp;ľahko sa učiaca technika pre používateľov na plnenie úloh. Samozrejme, že väčšina moderných softvérov dokáže abstrahovať veľkú časť problémov a&nbsp;dokonca aj daný systém zdokonaliť.
 +
 
 +
==Reálne aplikovanie HTML5==
 +
 
 +
* http://www.pelletized.com/
 +
* http://anino.sining.net/
 +
* http://www.diablo3.be/
 +
* http://colosseotype.com/
 +
 
 +
==Referencie==
 +
 
 +
* http://linuxers.org
 +
* http://www.w3schools.com/html5/
 +
* http://www.ibm.com/developerworks/library/x-html5/
 +
 
 +
==Externé linky==
 +
* http://www.html5rocks.com/
 +
* http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-tahame-data-od-navstevnika/
 +
* http://www.itnews.sk/spravy/software/2010-06-08/c134023-vytlaci-jazyk-html5-a-element-canvas-z-prehliadacov-flash-a-silverlight
 +
* http://www.whatwg.org/specs/web-apps/current-work/
 +
* http://dev.w3.org/html5/html4-differences/
 +
* http://caniuse.com/

Aktuálna revízia z 13:59, 29. jún 2010


Úvod do HTML5

Počas obdobia 10-tich rokov HTML4 neprešlo žiadnym zásadným update-om. Skupina WHATWG (Web Hypertext Application Technology Working Group – skupina organizácií, napr. Mozilla, Opera, Apple) začala vývoj HTML5 v roku 2004. V súčastnosti väčšina popredných priehliadačov podporuje HTML5 tagy. Avšak ani v jednom prípade sa nedá hovoriť o plnej podpore. HTML5 prináša nové možnosti pomocou ktorých je možné jednoduchšie organizovať webovú stránku. HTML 5 je vlastne spojenie dvoch jazykov: HTML a XML. HTML 4 používa dva syntaxy: SGML (tzv. HTML 4.01) a XML (tzv. XHTML 1.0). SGML nebol nikdy nasadený v prehliadačoch a HTML vývojových nástrojoch. HTML 5 definuje nové sériovo volané HTML, ktoré vyzerá veľmi podobne ako predchádzajúci známy SGML.


Vznik HTML5


Podpora prehliadačov

Najnovšie verzie Safari, Chrome, Firefox, Opera podporujú väčšinu funkcií integrovaných v HTML5. Internet Explorer 9 bude podporovať niektoré funkcie HTML5. :-)

Test prehliadača HTML5

Test prehliadača CSS3 Selectors

Štruktúra HTML5

HTML 5 obsahuje množstvo nových elementov uľahčujúcich štruktúrovanie stránok. Stránky písane v HTML4 majú štruktúru pozostavájucu z hlavičky, päty a samozrejme stĺpcov. Označujú sa pomocou elementov div odlíšených prostredníctvom atribútov id a class.


Štruktúra HTML


Na obrázku je typický dvojstĺpcový layout vyznačený elementami div s atributy id a class. Obsahuje hlavičku, pätu a navigačnú lištu pod hlavičkou. Hlavný obsah je v článku a vedľajšom stĺpci umiestnením vpravo. Element div musí byť použitý, nakoľko súčasná verzia HTML 4 neobsahuje potrebné sémantické prvky pre presnejšie vyznačenie špecifických častí dokumentu. HTML 5 rieši tento problém zavedením nových elementov reprezentujúcich jednotlivé časti dokumentu. Element je nahradený novými elementami: header, nav, section, article, aside a footer.


Tento dokument by mohol vyzerať takto: 

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

Sémantické prvky

Rovnako ako konštrukčné prvky, HTML 5 pridáva niektoré čisto sémantické prvky:

  • aside
  • figure
  • dialog

Aside element reprezentuje poznámku, tip, sidebar, pullquote, alebo niečo, čo je práve mimo hlavného toku informácií poskytovaných dokumentom. 


<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

Figure je element predstavujúci blokovú úroveň obrázku, spolu s popisom. 

<figure>
<img ... > (or video, table etc)
<figcaption>A rabid unicorn goring a fairy.</figcaption>
</figure>


Dialóg element predstavuje komunikáciu medzi tvorcom dokumentu a čitaťeľom (ziskava potrebné informácie pre ďalšie spracovanie). 

<dialog>
<dt>Teacher</dt>
<dd>What is 2+2</dd>
<dt>Student</dt>
<dd>4</dd>
<dt>Teacher</dt>
<dd>Correct!</dd>
</dialog>


Canvas

Je to vlastne plátno známe z iných programovacích jazykov. Umožňuje generovať vlastný obsah.


Použitie:


Canvas Cheat


Audio a video

V HTML4 chýbajú prostriedky, ktoré by umožňovali úspešne pracovať s vloženými multimédiami (závisí na Flashi). Aj keď je možné vkladať multimédia prostredníctvom rôznych pluginov (napr. QuickTime, Windows Media a ďalšie), Flash je jediný rozšírený plugin, ktorý poskytuje platformovo nezávislé riešenie spolu s potrebným API (Application Programming Interface). V HTML5 poskytuje tuto funkcionalitu priamo webový prehliadač prostredníctvom natívnej podpory pre vkladanie videa, audia a DOM API pre ovládanie a prehrávanie pomocou skriptovacích technológií. HTML5 obsahuje tagy pre audio a video.


Video 

<video src="video.mp4" width="320" height="480" posters="screenshot.jpg" controls />

alebo 

<video id="video" width="640" height="480" volume=".7" controls autoplay>
<source src="video.mp4" type="video/wmv"> (For Browser supporting H.264 codec)
<source src="video.ogg" type="video/ogg"> (For Browser supporting Theora codec)
</video>


Audio 

<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

Na základe podpory zo strany prehliadača dokážeme zvoliť codec(coder-decoder).

Drag and Drop

Drag and Drop je jedným zo základných interakcií, ktoré ponúka grafické používateľské rozhranie v HTML5. Drag and drop je funkcia používaná v grafických prostrediach pri premiestňovaní objektov alebo pri úprave tvarov. Slúži na prekopírovanie súboru z jedného adresára do druhého, vymazávanie alebo presúvanie do koša ako aj na vytváranie rôznych druhov asociácií medzi dvoma abstraktnými objektami.

Pri týchto aplikáciách sa využíva myš, kedy sa pri stlačenom tlačidle presúva vybraný objekt do určeného cieľa. V cieľovom bode sa tlačidlo myši pustí a tým sa ukončí funkcia drag and drop . Táto funkcia je preto jednoduchá na používanie a súčasne účinná. Pri vyvolaní danej funkcie sa spúšťa viacero procesov:

  • Dragstart: presúvanie vybraného objektu sa začalo
  • Drag: myš sa pohybuje spolu s presúvaným objektom
  • Dragenter: presúvaný objekt sa pohybuje smerom k cieľovému bodu
  • Dragover: presúvaný objekt bol prenesený mimo cieľového bodu
  • Dragleave: objekt umiestnený na nesprávnom mieste bol z neho vybratý
  • Drop: druhý krát prenášaný objekt bol úspešne umiestnený v cieli
  • Dragend: presúvanie bolo úspešne ukončené

Pohyb myšou je umožnený do všetkých strán ale obmedzený hranicami okna prehliadača. Vykonávaná akcia sa vzťahuje len na objekt ktorý je presúvaný a môže byť problém umiestniť daný objekt do vybraného cieľa ( umiestniť na zvolené miesto ).

Podpora funkcie drag and drop nie je vo všetkých softvéroch ( prehliadačoch ), hoci je to rýchlo a ľahko sa učiaca technika pre používateľov na plnenie úloh. Samozrejme, že väčšina moderných softvérov dokáže abstrahovať veľkú časť problémov a dokonca aj daný systém zdokonaliť.

Reálne aplikovanie HTML5

Referencie

Externé linky

Zdroj: „http://www.kiwiki.info/index.php?title=HTML_5&oldid=6002“