|
|
| Riadok 1: |
Riadok 1: |
| − | [[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]][[Kategória:php]][[Kategória:web]] | + | [[Kategória:Webové technológie]] |
| − | {{Praca_uvod|3|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Google Gears|HTML 5|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD||||||}}
| + | [[Kategória:Informatika]] |
| − | = =
| + | [[Kategória:web]] |
| − | 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.
| |
| − | | |
| − | ===Elementy štruktúry===
| |
| − | 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"
| |
| − | |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á.
| |
| − | | |
| − | |-
| |
| − | |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.
| |
| − | | |
| − | |-
| |
| − | |article
| |
| − | | Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.
| |
| − | | |
| − | |}
| |
| − | | |
| − | ===Elementy multimédií===
| |
| − | 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 podobne). Preto sú v novej verzií HTML5 prístupné tagy ''<nowiki><</nowiki>video<nowiki>></nowiki>'' 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.
| |
| − | | |
| − | ===Inline elementy===
| |
| − | 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"
| |
| − | |mark
| |
| − | |Označenie textu. 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.
| |
| − | | |
| − | |-
| |
| − | |meter
| |
| − | |Predstavuje skalárne meradlá.
| |
| − | | |
| − | |-
| |
| − | |progress
| |
| − | |Reprezentuje pokrok v dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.
| |
| − | | |
| − | |}
| |
| − | | |
| − | ===Podpora režimu off-line===
| |
| − | S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K dispozícií máme SQL API a Caching APIs, ktorá je obdobou LocalServer API.
| |
| − | | |
| − | ====SQL API====
| |
| − | SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s 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
| |
| − | | |
| − | {|width="600px" class="prettytable"
| |
| − | |bgcolor = "#EAEAEA"|Metóda:
| |
| − | |bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)
| |
| − | | |
| − | |-
| |
| − | |Popis:
| |
| − | |Vytvára databázový objekt podľa zvolených parametrov<br>
| |
| − | | |
| − | |-
| |
| − | |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
| |
| − | | |
| − | |-
| |
| − | |Ďalšie Metódy:
| |
| − | |transaction(), executeSql()
| |
| − | | |
| − | |}
| |
| − | | |
| − | ====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 lokálnym úložiskom
| |
| − | | |
| − | {|border="2" cellspacing="0" cellpadding="4" width="600px" class="prettytable"
| |
| − | |bgcolor = "#EAEAEA"|Metóda:
| |
| − | |bgcolor = "#EAEAEA"|Popis
| |
| − | | |
| − | |-
| |
| − | |clear()
| |
| − | |zmaže celý obsah objektu
| |
| − | | |
| − | |-
| |
| − | |getItem()
| |
| − | |získa obsah objektu podľa názvu
| |
| − | | |
| − | |-
| |
| − | |key()
| |
| − | |získa kľúč podľa čísla
| |
| − | | |
| − | |-
| |
| − | |length
| |
| − | |Počet uložených kľučov
| |
| − | | |
| − | |-
| |
| − | |removeItem()
| |
| − | |odstráni položku podľa jej mena
| |
| − | | |
| − | |-
| |
| − | |setItem()
| |
| − | |Pridá hodnotu položke
| |
| − | | |
| − | |}
| |
| − | | |
| − | Podpora off-line aplikácií je zatiaľ vo fáze vývoja. Preto je podpora v prehliadačoch zatiaľ len minimálna.
| |
