Technológie off-line web aplikácií - História úprav

Dusan: /* Technológie off-line web aplikácií */

2010-09-05T13:14:32Z

Technológie off-line web aplikácií

Zobraziť rozdiely

Juraj na 13:10, 5. september 2010

2010-09-05T13:10:58Z

Dusan na 13:06, 5. september 2010

2010-09-05T13:06:07Z

Dusan na 12:37, 5. september 2010

2010-09-05T12:37:43Z

Dusan na 12:33, 5. september 2010

2010-09-05T12:33:09Z

Dusan: /* */

2010-09-05T11:55:47Z

Zobraziť rozdiely

Juraj: Vytvorená stránka „Kategória:Študentské práce Kategória:Bakalárske práce Kategória:Informatika Kategória:php Kategória:web {{Hlavička_FM|{{PAGENAME}}|Dušan Pag…“

2010-05-14T18:45:57Z

Vytvorená stránka „Kategória:Študentské práce Kategória:Bakalárske práce Kategória:Informatika Kategória:php Kategória:web {{Hlavička_FM|{{PAGENAME}}|Dušan Pag…“

Nová stránka

[[Kategória:Študentské práce]]
[[Kategória:Bakalárske práce]]
[[Kategória:Informatika]]
[[Kategória:php]]
[[Kategória:web]]
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|
2009/2010
|Semetrálna práca|Mechatronika}}
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}
__TOC__

= =

==Google Gears==
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do prehliadača dokáže sprístupniť webovú aplikáciu aj v režime off-line. Užívateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie tohto rozšírenia.

[[Image:semestralka_dušan_pagáč_v1_0_07.png|framed|none]]

Obr. 2.1 Zobrazenie rozšírenia Google Gears v správe rozšírení prehliadača Firefox

[[Image:semestralka_dušan_pagáč_v1_0_08.png|framed|none]]

Obr. 2.2 Nastavenie povolenia rozšírenia pre konkrétnu lokalitu (localhost)

===Moduly Google Gears===
====Rozdelenie modulov====
Podstata tohto rozšírenia je, že s ním získame tri nezávislé moduly. Každý z nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.

'''Localserver'''

Modul LocalServer (lokálny server) umožňuje aplikácií uložiť a používať jeho HTTP zdroje lokálne bez pripojenia k sieti. Je to špecializovaná URL vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a obslúžené lokálne priamo z disku používateľa.

'''Databáza'''

Databázový modul poskytuje open-source SQLite databázový systém. Databázová API slúži k neustálemu ukladaní používateľských dát. Dáta ktoré sú uložené používajú bezpečnostnú politiku, ktorá web aplikácií nedovolí prístup mimo jej domény.

'''Workerpool'''

Skript časovo náročný na spracovanie ako napríklad zložitý výpočet môže spôsobiť, že užívateľské prostredie neodpovedá. WorkerPool API dovoľuje web aplikácií spustiť javaskriptový kód na pozadí, bez blokovania vykonávania ostatných skriptov na stránke.

====Google Gears API====
S modulmi pracujeme pomocou metód aplikačného rozhrania. Pre prístup k nim musíme do aplikácie zahrnúť súbor ''gears_init.js'' (http://code.google.com/intl/sk/apis/gears/gears_init.js).

'''Factory API'''

Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov.

Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''
<source lang="javascript">
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
if (window.google && google.gears) {
var db = google.gears.factory.create('beta.database');
}
</script>
</source>

Existenciu rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V skripte ''gears_init.js'' sa definuje objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''značí typ objektu, ktorý sa ma vytvoriť.

{|border="2" class="prettytable" width="600"
|+ Tabuľka 2.1 Popis metód triedy'' Factory''''.'' (Kompletná špecifikácia je v [2])
|-
!Trieda:
!factory
|-
|Metóda:
|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''

|-
|Popis:
|Vytvára Gears objekt danej triedy<br>

|-
|Parametre:
|className – typ objektu ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki>

|-
|Detaily:
|Podporované hodnoty parametru className:

{|border="1" cellspacing="0" cellpadding="4" width="100%"
!className
!Vytvorenie Gears triedy

|-
|beta.blobbuilder
|BlobBuilder

|-
|beta.canvas
|Canvas

|-
|beta.database
|Database

|-
|beta.desktop
|Desktop

|-
|beta.geolocation
|Geolocation

|-
|beta.httprequest
|HttpRequest

|-
|beta.localserver
|LocalServer

|-
|beta.timer
|Timer

|-
|beta.workerpool
|WorkerPool

|}

|}

'''LocalServer API'''

Na správu vyrovnávacej pamäti sú dostupné dve triedy:

'''''ResourceStore'' '''– povoľuje dáta (obrázky, PDF súbor), ktoré sú adresované s URL zachytávať pomocou javaskriptu.

'''''ManagedResourceStore''''' – zoznam URL odkazov je v súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácií všetky dáta, ktoré potrebuje definovaním v jednom súbore. Výhoda je v automatickej aktualizácií pri zmene ''manifestu''. Príklad použitia (Kód 2.2).

Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''
<source lang="html4strict">
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore('test-store');
store.manifestUrl = 'manifest.txt';
</script>
</source>

Odkazy na súbory uvedené v manifeste (Kód 2.3) sa pri synchronizácií skopírujú na lokálny disk.

Kód 2.3 Výpis súboru ''manifest.txt''
<source lang="javascript">
{
"betaManifestVersion": 1,
"version": "1.0",
"entries": [
{ "url": "index.html" },
{ "url": "gears_init.js" }
]
}
</source>

{|border="2" cellspacing="0" cellpadding="4" class="prettytable"
|+
Tabuľka 2.2 Výpis metód triedy LocalServer. Kompletná špecifikácia je v [3]
|-
!Trieda:
!LocalServer

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br>

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru

|-
|Návratová hodnota:
|ManagedResourceStore

|-
|Popis:
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadná taká neexistuje<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru

|-
|Návratová hodnota:
|ManagedResourceStore

|-
|Popis:
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadná taká neexistuje<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki>

|-
|Popis:
|Odstráni ManagedResourceStore a odstráni všetky jej URL z lokálnej<br>vyrovnávacej pamäti<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki>

|-
|Návratová hodnota:
|ResourceStore

|-
|Popis:
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadná taká neexistuje<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru

|-
|Návratová hodnota:
|ResourceStore<br>

|-
|Popis:
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadná taká neexistuje<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru

|-
|Popis:
|Odstráni ResourceStore a odstráni a celý jeho obsah<br>vyrovnávacej pamäti<br>

|}

'''Database API'''

Database API je aplikačné rozhranie pre prácu s lokálnou databázou SQLite.

Kód 2.4 Príklad práce s lokálnou databázou
<source lang="javascript">
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var db = google.gears.factory.create(’beta.database’);
db.open(’moja-databaza);
db.execute(’create table if not exists Zoznam’ + ’ (Meno text, Vek int)’);
db.execute(’insert into Zoznam values (?, ?)’, [’Peter’, ’22’]);
var rs = db.execute(’select * from Zoznam order by Vek desc’);
rs.close();
</script>
</source>

Metóda ''execute'' vykoná požiadavku na databázu. Pri ukončení práce s databázou je doporučené použitie metódy ''close''.

{|border="2" cellspacing="0" cellpadding="4" class="prettytable"
|+Tabuľka 2.3 Popis metód triedy ''Database.'' Kompletná špecifikácia je v [4]
|-
|bgcolor = "#EAEAEA"|<font color="#000000">Trieda: </font>
||<font color="#000000">Database</font>

|-
|bgcolor = "#EAEAEA"|'''Metóda: '''
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''

|-
|Parametre:
|name – voliteľný<br>

|-
|Popis:
|Otvorí databázu<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''

|-
|Parametre:
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>

|-
|Návratová hodnota:
|ResultSet

|-
|Popis:
|Vykoná SQL príkazy.

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void '''close()'''

|-
|Popis:
|Ukončí spojenie s databázou. Volanie Database.close() nie je potrebné<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void''' remove()'''

|-
|Popis:
|Zmaže práve otvorenú databázu.<br>

|}

Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.

{|border="2" cellspacing="0" cellpadding="4" class="prettytable"
|+Tabuľka 2.4 Popis metód triedy ''ResultSet''
|-
||<font color="#000000">Trieda: </font>
||<font color="#000000">ResultSet</font>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''

|-
|Popis:
|Vráti true ak môžete volať metódy na extrakciu dát<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void '''next()'''

|-
|Popis:
|Pokračuje na ďalší riadok výsledkov

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|void '''close()'''

|-
|Popis:
|Je potrebné zavolať metodu close() ak sme skončili s prácou s výsledkami<br>

|}

{|border="2" cellspacing="0" cellpadding="4" class="prettytable"
|+Tabuľka 2.5 Popis metód na extrakciu dát
|-
| <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''<br>ResultSet</font>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''

|-
|Popis:
|Vráti počet polí výsledku<br>

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''

|-
|Parametre:
|fieldIndex – index požadovaného pola

|-
|Popis:
|Vráti meno špecifikovaného pola.

|-
|bgcolor = "#EAEAEA"|Metóda:
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''

|-
||Parametre:
||fieldIndex – index požadovaného pola

|-
|Návratová hodnota:
|rôzne

|-
|Popis:
|Vráti obsah špecifikovaného pola v aktuálnom riadku

|-
||Metóda:
||'''fieldByName(string fieldName)'''

|-
|Parametre:
|fieldName – názov požadovaného pola

|-
|Návratová hodnota:
|rôzne

|-
|Popis:
|Vráti obsah špecifikovaného pola v aktuálnom riadku

|}

'''WorkerPool API'''

Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [5].

'''Blob API'''

Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [6].

'''BlobBuilder API'''

BlobBuilder je pomocný objekt pre vytváranie objektov typu Blob. Blob je nemenný, read-only object, rovnaký ako reťazec v Javascripte. BlobBuilder je používaný na generovanie Blobu s novým obsahom. Kompletná špecifikácia v [7].

'''Canvas API'''

Prostredníctvom tejto API môžeme pracovať s obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [8].

'''Desktop API'''

Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. Kompletná špecifikácia v [9].

Kód 2.5 Ukážka práce s Desktop API
<source lang="javascript">
var desktop = google.gears.factory.create(’beta.desktop’);
function createShortcut() {
var desktop = google.gears.factory.create("beta.desktop");
var description = "Vytvorenie ikonky ROZVRHU.";
var icons = {
"16x16": "16icon.png"
"32x32": "32icon.png",
"48x48": "48icon.png",
"128x128": "128icon.png"
};
desktop.createShortcut("Rozvrh Fakulty Mechatroniky","http://priklad.sk/index.html", icons, description);
}
</source>

{| class=wikitable
|+Tabuľka 2.6 Popis metód triedy ''Desktop ''
|-
!Trieda:
|Desktop
|-
!Metóda:
|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)
|-
!Parametre:
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>'''''rozmer : URL ikony'''.''<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br>
|-
!Popis:
|Vytvorí desktopový odkaz na spustenie aplikácie
|}

'''Geolocation API'''

Geolocation API umožňuje webovej aplikácie získať užívateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [10].

'''HttpRequest API'''

HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [11].

'''Timer API'''

Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s časovým oneskorením a podobne. Kompletnú špecifikáciu nájdete v [12].

===Podpora===
Funkčnosť Google Gears je overená na nasledujúcich platformách a prehliadačoch:

* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)
* Firefox 1.5 alebo vyššia
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)
* Linux
* Firefox 1.5 alebo vyššia
* Microsoft Windows (XP alebo vyššia)
* Firefox 1.5 alebo vyššia
* Internet Explorer 6 alebo vyššia
* Google Chrome
* Microsoft Windows Mobile (5 alebo vyššia)
* Internet Explorer 4.01 alebo vyššia
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)
*  Nasledovné zariadenia nie sú podporované
* Samsung i320 a i320N
* Orange SPV C600
* Motorola Q
* Android 1.0
===Umiestnenie dát na disku===
Umiestnenie dát webovej aplikácie na disku záleží na platforme a internetovom prehliadači.

'''Windows Vista - Internet Explorer'''

Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer

'''Windows Vista - Firefox'''

Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox

'''Windows Vista - Chrome'''

Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears

'''Mac OS X - Safari'''

Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari

'''Linux - Firefox'''

Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox

===Využitie Google Gears===

Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.

Ďalšie webové služby využívajúce Google Gears:

* správca úloh '''rememberthemilk.com,'''
* sociálna služba '''myspace.com,'''
* on-line správca hesiel '''passpack.com,'''
* nástroj pre riadenie projektov''' mindmeister.com,'''
* open-source redakčný systém '''wordpress.net''' a ďalší.

==HTML 5==
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.

@@ Riadok 9: / Riadok 9: @@
 {{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}
 __TOC__
 ==Technológie off-line web aplikácií==

@@ Riadok 9: / Riadok 9: @@
 {{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}
 __TOC__
 ==Technológie off-line web aplikácií==

@@ Riadok 4: / Riadok 4: @@
 [[Kategória:php]]
 [[Kategória:web]]
 {{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}
 __TOC__

@@ Riadok 50: / Riadok 50: @@
 Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''
+<source lang="javascript">
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
+<script type="text/javascript" src="gears_init.js"></script>
-|<nowiki><</nowiki>script type="text/javascript" src="gears_init.js"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br>    if (window.google && google.gears) <nowiki>{</nowiki><br>        var db = google.gears.factory.create(<nowiki>’</nowiki>beta.database<nowiki>’</nowiki>);<br>    <nowiki>}</nowiki><br><nowiki><</nowiki>/script<nowiki>></nowiki>
+<script type="text/javascript">
+    if (window.google && google.gears) {
-|}
+        var db = google.gears.factory.create('beta.database');
 Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].
@@ Riadok 132: / Riadok 135: @@
 Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''
+<source lang="javascript">
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
+<script type="text/javascript" src="gears_init.js"></script>
-|<nowiki><</nowiki>script type="text/javascript" src="gears_init.js"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br>    var localServer = google.gears.factory.create(<nowiki>’</nowiki>beta.localserver<nowiki>’</nowiki>);<br>    var store = localServer.createManagedStore(<nowiki>’</nowiki>test-store<nowiki>’</nowiki>);<br>    store.manifestUrl = <nowiki>’</nowiki>manifest.txt<nowiki>’</nowiki>;<br><nowiki><</nowiki>/script<nowiki>></nowiki>
+<script type="text/javascript">
+    var localServer = google.gears.factory.create('beta.localserver');
-|}
+    var store = localServer.createManagedStore('test-store');
 Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.
 Kód 2.3 Výpis súboru ''manifest.tx''''t''
+<source lang="javascript">
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
-|<nowiki>{</nowiki><br>    "betaManifestVersion": 1,<br>    "version": "1.0",<br>    "entries": <nowiki>[</nowiki><br>        <nowiki>{</nowiki> "url": "index.html" <nowiki>}</nowiki>,<br>        <nowiki>{</nowiki> "url": "gears_init.js" <nowiki>}</nowiki><br>    <nowiki>]</nowiki><br><nowiki>}</nowiki><br><br>V&nbsp;tabuľke 2.2 je výpis metód triedy ''LocalServer. ''Kompletná špecifikácia je v [3].
+    "betaManifestVersion": 1,
+    "version": "1.0",
-|}
+    "entries": [
 Tabuľka 2.2 Metódy triedy ''LocalServer''.
@@ Riadok 247: / Riadok 258: @@
 Kód 2.4 Príklad práce s&nbsp;lokálnou databázou
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
+rs.close();
-|<nowiki><</nowiki>script type="text/javascript" src="'''gears_init.js'''"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br>var db = google.gears.factory.create(<nowiki>’</nowiki>beta.database<nowiki>’</nowiki>);<br>db.open(<nowiki>’</nowiki>moja-databaza);<br>db.execute(<nowiki>’</nowiki>create table if not exists Zoznam<nowiki>’</nowiki> <nowiki>+</nowiki><br>           <nowiki>’</nowiki> (Meno text, Vek int)<nowiki>’</nowiki>);<br>db.execute(<nowiki>’</nowiki>insert into Zoznam values (?, ?)<nowiki>’</nowiki>, <nowiki>[’</nowiki>Peter<nowiki>’</nowiki>, <nowiki>’</nowiki>22<nowiki>’]</nowiki>);<br>var rs = db.execute(<nowiki>’</nowiki>select * from Zoznam order by Vek desc<nowiki>’</nowiki>);<br><br>rs.close();<br><nowiki><</nowiki>/script<nowiki>></nowiki><br><br>V&nbsp;kóde 2.2 je ukážka vytvorenia tabuľky v&nbsp;lokálnej databáze. Metóda ''execute'' vykoná SQL dopyt na databázu. Pri ukončení práce s&nbsp;databázou je doporučené použitie metódy ''close''. V&nbsp;tabuľke 2.3 je výpis metód triedy ''Database.'' Kompletná špecifikácia je v [5].
+</script>
+</source>
 Tabuľka 2.3 Opis metód triedy'' Database''''.''
@@ Riadok 415: / Riadok 434: @@
 Kód 2.5 Ukážka práce s&nbsp;Desktop API
+<source lang="javascript">
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
+var desktop = google.gears.factory.create('beta.desktop');
-|var desktop = google.gears.factory.create(<nowiki>’</nowiki>beta.desktop<nowiki>’</nowiki>);<br>function createShortcut() <nowiki>{</nowiki><br>      var desktop = google.gears.factory.create("beta.desktop");<br>      var description = "Vytvorenie ikonky ROZVRHU.";<br>      var icons = <nowiki>{</nowiki><br>           "16x16": "16icon.png"<br>           "32x32": "32icon.png",<br>           "48x48": "48icon.png",<br>           "128x128": "128icon.png"<br>      <nowiki>}</nowiki>;<br>      desktop.createShortcut("Rozvrh Fakulty Mechatroniky",<br>           " http://priklad.sk/index.html",<br>            icons,<br>            description);<br><nowiki>}</nowiki>
+function createShortcut() {
+      var desktop = google.gears.factory.create("beta.desktop");
-|}
+      var description = "Vytvorenie ikonky ROZVRHU.";
 V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].