Vývoj webových aplikací pro mobilní zařízení

Transkript

Vysoká škola ekonomická v Praze
Fakulta informatiky a statistiky
Katedra informačních technologií
Studijní program: Aplikovaná informatika
Obor: Informatika
TÉMA BAKALÁŘSKÉ PRÁCE
Vý vojwebový chaplikacı́ pro
provozna mobilnı́ c htelefonech
Student:
Michael Žabka
Vedoucí bakalářské práce:
Ing. Jan Mittner
Oponent bakalářské práce:
doc. Ing. Alena Buchalcevová, Ph.D.
Rok: 2012
Prohlášení
Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a že jsem uvedl všechny
použité prameny a literaturu, ze které jsem čerpal.
V Praze dne 25. 4. 2012
……………………………………………
Jméno a příjmení studenta
Poděkování
Rád bych poděkoval vedoucímu práce Ing. Janu Mittnerovi, který mi poskytnul cenné
informace a komentáře spojené s tématem práce. Dále bych rád poděkoval Františkovi
Tomanovi
za diskuse
a konzultace
ohledně
tématu
a ohledně
bakalářské
práce.
Za gramatickou korekturu bych rád poděkoval své matce Elišce Žabkové a své přítelkyni
Kateřině Švecové.
Abstrakt
Tato bakalářská práce si klade za cíl popsat technologie využívané při vývoji mobilních
webových aplikací, vysvětlit rozdíly mezi vývojem desktopových aplikací a aplikací
mobilních a uvést příklad mobilní aplikace. Kromě webových aplikací jsou v práci zmíněny
i nativní aplikace. Dále se práce věnuje mobilním platformám a zařízením a popisuje rozdíly
mezi nimi. Pro vývoj webových aplikací jsou popsány nejvyužívanější frameworky jako jsou
jQuery Mobile, Sencha Touch apod. Zároveň se práce zabývá i vývojovými prostředími
a emulátory, podporujícími tvorbu mobilních webových aplikací. K danému tématu existuje
jenom velice strohá literatura a ještě méně zdrojů je v českém jazyce, proto jsem se rozhodl
tuto práci zpracovat. Cíl je dosahován postupným vpravováním do tématu, popisováním
současné situace na trhu a předpokládaného rozvoje tohoto odvětví. Následně jsou
zpracovány a vysvětleny nejvyužívanější technologie a principy jejich používání a to
především pomocí programovacího jazyka JavaScript. Ke konci práce je vytvořena ukázková
aplikace, která ukazuje možnosti tvorby webových, ale i nativních aplikací.
Klíčová slova
Mobilní aplikace, webové aplikace, nativní aplikace, jQuery Mobile, Sencha Touch,
Android, iPhone, PhoneGap, vývojová prostředí, vývoj aplikací, mobilní platformy.
Abstract
This bachelor work aims to describe the technologies used for developing mobile web
applications, explain the differences between developing desktop application and mobile
application, and give an example of mobile application. In addition to web application are in
the work also mentioned the native application. Further the work analyzes mobile platforms
and devices, and describes the differences between it. For web application development are
described the most frequently used frameworks such as jQuery Mobile, Sencha Touch, etc.
Work also describes the development environments and emulators that support the creation of
mobile web application. For a given topic, there is a very austere literature and even fewer
resources in the Czech language, so I decided to prepare this topic. The goal is achieved by
gradually injected in to the topic, describing the current market situation and probable
development of the sector. Subsequently are processed and explained most used technologies
and principles of their use, especially using the programing language JavaScript. At the end of
the work is created a sample application that demonstrates the possibilities of the web and
also native applications.
Keywords
Mobile applications, web applications, native applications, jQuery Mobile, Sencha
Touch, Android, iPhone, PhoneGap, development environments, application development,
mobile platforms.
Obsah
1
2
Úvod ....................................................................................................................................1
1.1
Význam ........................................................................................................................1
1.2
Cíl práce .......................................................................................................................1
1.3
Způsob dosažení cíle ....................................................................................................2
1.4
Předpoklady a omezení ................................................................................................2
1.5
Struktura práce .............................................................................................................3
1.6
Výstupy práce...............................................................................................................3
1.7
Rešerše zdrojových prací .............................................................................................3
Možnosti mobilních zařízení ...............................................................................................5
2.1
2.2
2.3
Moderní tvorba webových aplikací..............................................................................6
2.1.1
HTML 5.........................................................................................................6
2.1.2
CSS3 ..............................................................................................................9
2.1.3
Hlavička mobilní webové aplikace .............................................................10
Možnosti JavaScriptu .................................................................................................11
2.2.1
Událost otočení displeje ..............................................................................11
2.2.2
Úložiště prohlížeče ......................................................................................13
2.2.3
Cache aplikace.............................................................................................14
2.2.4
Databáze SQL..............................................................................................16
2.2.5
GPS Geolokace............................................................................................18
2.2.6
Plátno neboli grafika....................................................................................20
2.2.7
Události dotykového displeje vs. Myši .......................................................23
2.2.8
Mapy............................................................................................................25
Operační systém Android...........................................................................................26
2.3.1
Úvod do OS .................................................................................................26
2.3.2
Možnosti JavaScriptu v Android .................................................................27
2.3.3
Frameworky.................................................................................................28
2.3.4
Webové prohlížeče ......................................................................................29
2.3.5
2.4
2.5
2.6
3
Operační systém iOS..................................................................................................31
2.4.1
Úvod do iOS ................................................................................................31
2.4.2
Webové prohlížeče ......................................................................................33
2.4.3
Frameworky.................................................................................................33
Další operační systémy ..............................................................................................33
2.5.1
Symbian OS.................................................................................................33
2.5.2
Windows Phone 7........................................................................................34
2.5.3
BlackBerry, WebOS (PalmOS), Bada.........................................................34
Web z pohledu dalších zařízení..................................................................................34
2.6.1
Webové aplikace na osobních počítačích....................................................34
2.6.2
Tablety jako zlatá střední cesta....................................................................35
Přizpůsobení webových aplikací ve Frameworcích ..........................................................37
3.1
Moderní mobilní zobrazení ........................................................................................37
3.2
Framework jQuery Mobile.........................................................................................39
3.3
3.4
3.5
4
Android Market ...........................................................................................30
3.2.1
Stručně o možnostech frameworku .............................................................39
3.2.2
Psaní aplikace v jQuery Mobile ..................................................................41
Framework jQTouch ..................................................................................................48
3.3.1
Úvod k Frameworku....................................................................................48
3.3.2
Psaní aplikace v jQTouch............................................................................48
Framework Sencha Touch..........................................................................................56
3.4.1
Úvod do Sencha Touch ...............................................................................56
3.4.2
Psaní JavaScript kódu v Sencha Touch .......................................................57
Shrnutí frameworků ...................................................................................................62
Nativní aplikace.................................................................................................................64
4.1
Možnosti tvorby nativních aplikací............................................................................64
4.1.1
Android aplikace .........................................................................................64
4.1.2
iPhone aplikace............................................................................................65
4.1.3
Ostatní aplikace ...........................................................................................65
4.2
4.3
5
6
PhoneGap ...................................................................................................................65
4.2.1
Instalace a konfigurace ................................................................................66
4.2.2
Dodatečné možnosti ....................................................................................66
Vývojová prostředí a simulátory................................................................................67
4.3.1
Simulátory a Emulátory...............................................................................68
4.3.2
PhoneGap ....................................................................................................68
4.3.3
Appcelerator Titanium.................................................................................69
Praktická ukázka aplikace .................................................................................................70
5.1
Nativní aplikace pro Android.....................................................................................74
5.2
Zhodnocení aplikací ...................................................................................................75
Závěr..................................................................................................................................76
6.1
Dosažené cíle a výsledky ...........................................................................................76
6.2
Budoucí zpracování....................................................................................................77
7
Terminologický slovník.....................................................................................................78
8
Citovaná literatura .............................................................................................................81
9
Seznam obrázků a tabulek .................................................................................................87
9.1
Seznam obrázků .........................................................................................................87
9.2
Seznam tabulek ..........................................................................................................87
9.3
Seznam příkladů.........................................................................................................87
10 Přílohy ...............................................................................................................................89
1 Úvod
1.1 Význam
Tato bakalářská práce je zpracovávána jako pomůcka pro webové vývojáře
a programátory. Dosud nebyla zpracována žádná literatura, která by postihovala zvolený
problém a zároveň byla psána v českém jazyce. Jak už to alespoň v posledních několika
desetiletích bylo, Česká republika nepatrně zaostává v technologickém i estetickém vývoji co
se internetu a mobilního průmyslu týče. Tato situace může mít spousty příčin. Jednou z nich
může být nízký zájem českých zákazníků o inovace. Dále je určitě brzdou, a to především
v konkrétním případě mobilního vývoje, nedostatečná nabídka internetových připojení
v rámci bezdrátových sítí. Příčinou, ale i následkem, může být nedostatečná dokumentace
a podpora technologií v českém jazyce nebo nízká motivace programátorů webových aplikací
ze strany firem. Ačkoli příčiny mohou být jakékoli (a to není předmětem této práce), je
zřejmé, že je třeba tento směr podporovat a pomoci jej rozvinout i v České republice.
1.2 Cíl práce
Hlavním cílem práce je popsat možnosti tvorby webových a nativních aplikací pro
mobilní zařízení, a to především pro mobilní telefony. (V rámci popisování těchto možností je
třeba vytvořit mobilní aplikaci jako příklad.) Abych tohoto hlavního cíle dosáhl, rozdělil jsem
jej na několik dílčích cílů:

charakterizovat mobilní vývoj a popsat možné technologie, využívané na mobilních
zařízeních, jako je HTML5, CSS3, JavaScript apod.,

popsat zařízení, pro které je možné tvořit webové a nativní aplikace, napsat jejich
přednosti a zápory a porovnat je,

popsat některé webové frameworky, využívané pro mobilní vývoj a vysvětlit jejich
používání na jednoduchých příkladech,

popsat možnosti tvorby nativních aplikací pro různá zařízení resp. operační systémy,

představit některá vývojová prostředí, ulehčující vývoj mobilních aplikací,

vytvořit webovou aplikaci pro mobilní zařízení, ve které jsou využity některé
možnosti mobilních zařízení a dále tuto aplikaci převést do nativní Android aplikace.
Cíle postupně dosahuji hlubším popsáním aktuální situace ve webovém vývoji pro
mobilní zařízení a možnostmi tvorby aplikací. Pro vývojáře by práce měla poskytnout
informace o aktuálních trendech v oblasti tvorby webových aplikací napříč celým trhem.
Situace v tomto odvětví se velice rychle mění a rozrůstají se možnosti. Proto popisuji jak
současný stav, tak zachycuji možný budoucí rozvoj.
1
Větší část této práce je věnována programátorům webových aplikací. Součástí cíle je
rozšíření jejich dosavadních schopností tvořit webové stránky. V poslední době je stále více
vidět přesun veškeré internetové aktivity z osobních počítačů na mobilní zařízení. Aby tyto
změny bylo možné provádět i ze strany nabídky, je třeba měnit i použitelnost aplikací. To se
snaží zjednodušit webové frameworky, o jejichž znalost by se měli programátoři také
obohatit.
Kromě webových aplikací se stále častěji vyskytují i tzv. nativní aplikace. To jsou ty,
které běží kompletně na přístroji, na rozdíl od aplikací webových. Ty přinášejí samozřejmě
výhody, ale i nevýhody, které se pokusím osvětlit. Práce by měla ukázat, že i tyto dvě
varianty mohou jít ruku v ruce.
Nejen uživatelé potřebují příjemné zacházení se svým zařízením. I programátor by měl
mít možnost rychle a efektivně tvořit své aplikace a k tomu mu dopomáhají vývojová
prostředí. Z těch se pokusím vyzvednout ty nejzajímavější a krátce je popsat.
Teorie je pro všechny práce jistě důležitá, každý ale potřebuje nějaké ty praktické
ukázky, aby si danou problematiku osvojil. Proto se pokusím i ty předvést a vysvětlit na nich
základní principy webového vývoje a vývoje nativních aplikací pro mobilní zařízení.
Hlavními hráči na trhu jsou v současné době Apple a Google, kteří zabírají nepřebernou
většinu trhu, proto se celá práce zaměřuje hlavně na ně a na jejich mobilní zařízení.
1.3 Způsob dosažení cíle
Abych dosáhl cíle, zaměřuji se na obsahovou strukturu. Každý bod obsahu je předem
promyšlen. Každá kapitola práce má mít jasně daný výstup, přičemž kapitoly jsou mezi sebou
částečně závislé. Praktická část práce je webová a nativní aplikace, která využívá poznatky
z teoretické části. Programování ovšem bude probíhat průběžně s tvorbou teoretické části, aby
čtenář lépe pochopil vývoj.
Práce je psána tak, aby ji čtenář lépe pochopil, tedy spíše v přátelském duchu, jak už
tomu v tomto oboru často bývá. Na druhou stranu přistupuji k tématu odborně a nenechávám
čtenáře na pochybách.
1.4 Předpoklady a omezení
Tato práce je určena spíše znalým v oblasti programování a především vývoje webových
stránek a aplikací. Práce obsahuje i pasáže, které jsou zajímavé a pochopitelné i pro neznalé,
ale pro pochopení většiny tezí je třeba se v oblasti webu pohybovat. V práci jsou často
zmiňována sousloví webová aplikace a webová stránka. Webová aplikace je spíše brána jako
2
kompletní soustava stránek, které vytvářejí celou aplikaci společně s logikou a databázovou
vrstvou. U webové stránky mám na mysli spíše jednoduché zobrazení jedné stránky
[Wikipedia, 2012z].
1.5 Struktura práce
Práce je zpracována postupně od základní osvěty problému přes podrobné popsání
technologií až po uvedení některých příkladů webových stránek a nativních aplikací pro
mobilní zařízení. Pro zpracování bylo využito mnoha zdrojů. Na zpracovávané téma je velice
omezená dokumentace v českém jazyce, proto bylo třeba získávat informace především
z anglicky psaných knih. Hlavním zdrojem z technické stránky pro mě byla kniha „HTML5
Mobile Websites“ od Matthewa Davida. Obsahuje jak osvětu do mobilního webu, tak popis
některých nejvyužívanějších frameworků. Dále jsou zde uvedeny možnosti nativních aplikací,
tvořených jako webové aplikace. Mezi další zdroje patří např. knihy o tvorbě webových
aplikací pro dané platformy (iOS, Android). Veškeré tyto zdroje jsou doplněny o další
internetové zdroje. Pro tvorbu mobilních webů je třeba znát nové standardy jako HTML5,
CSS3 apod., kterým je na internetu věnována řada stránek.
Příklady jsou zpracovány postupně a jednotlivé kroky jsou vysvětleny. Je využíváno
popsaných frameworků jako jQTouch, jQuery mobile, Sencha Touch aj. Dále pak technologie
jako HTML5, CSS3, JavaScript apod. V závěru je zhodnocena samotná práce, možný budoucí
vývoj technologií pro mobilní web a v návaznosti i možné budoucí práce („future works“).
1.6 Výstupy práce
Výstupem práce je velmi užitečná dokumentace některých možností webového vývoje,
který se týká mobilních přenosných zařízení a telefonů. Tato dokumentace je oproti většině
dostupných v češtině. Kromě dokumentace práce slouží i jako návod, jak začít webové
aplikace efektivně vyvíjet a které vlastnosti využívat. Výstupem práce je i příkladová
aplikace, která ukazuje jednu z možností, jak se k vývoji postavit. Z této aplikace je možné
vypozorovat používání některých funkcí v praxi.
1.7 Rešerše zdrojových prací
Pro práci jsem využíval řadu zdrojů, především zahraničních. Prvním hlavním zdrojem je
kniha [Matthew, 2011]. Autor popisuje problematiku spojenou s HTML5, CSS3 a možnými
frameworky, používanými při tvorbě mobilních webových aplikací. Kniha postupně
vysvětluje zmíněné obory od laického pohledu až po odborný a detailní výklad. Kniha mi
v práci sloužila jako průprava do daného tématu.
3
Dalším velice užitečným zdrojem je kniha [Oehlman, et al., 2012]. Tato kniha je napsána
velice odborně. Pomocí této knihy jsem se dozvěděl spoustu nových zajímavých věcí, které
jsem do své práce zahrnul. Členění kapitol je přehledné a jazyk srozumitelný. V knize je
uvedeno také spousty příkladů, které pomohou porozumět tématu. Hlavní pointou knihy je
ukázat možnosti vývoje na mobilních zařízeních Android a naučit programátora možnosti
využívat.
Kniha [Harwani, 2010] je jakousi učebnicí pro autorovy studenty. Začátek knihy se
zabývá tvorbou aplikací pro mobilní zařízení. Dále je ovšem téma zaměřeno na tvorbu webu
obecně a především na serverové straně pomocí jazyka PHP apod. Kniha je dle mého názoru
pojata v širokém kontextu, což není příliš ku prospěchu.
Další knihou je [Picchi, 2011]. Tato kniha je velice podrobnou studií o vývoji aplikací
pro iPhone a obecně pro iOS. Kniha je velice rozsáhlá a zaměřuje se na problém vývoje
především ze strany návrhu a postupu vývoje. Kniha je obohacena o zkušenosti několika
zkušených autorů. Osobně si myslím, že je kniha velice přínosná, ovšem zaměřena na lehce
jiné téma, které není cílem mé práce.
Kromě uvedených knih jsem využíval i některé další české a zahraniční tituly. Vše je
doplněno o internetové zdroje, které byly pomůckou při pochopení technologií. Nedílnou
součástí zdrojů jsou i blogy a fóra, které tímto nepřímo cituji.
4
2 Možnosti mobilních zařízení
Pro vývoj webových aplikací pro mobilní telefony a obecně pro přenosná zařízení, je
třeba si aplikace rozdělit do skupin. Základní dělení je podle jejich možností rozšiřovat
o aplikace. Do první skupiny se řadí klasické telefony, které mají svůj vnitřní software,
zabudovaný v paměti už z výrobní linky. Tyto mobilní telefony nemají možnost rozšiřovat se
a většinou nemají ani internetový prohlížeč, ale pouze tzv. WAP prohlížeč. Aplikace resp.
stránky pro tento prohlížeč jsou psané v jazyce, vycházejícím z XML a podobné HTML,
ovšem postrádá spousty jeho předností. Jedná se o jazyk WML. V současné době tento jazyk
a toto využívání internetu v mobilech téměř vymizelo.
Další skupina se označuje jako „feature phones“ neboli telefony s funkcemi. Oproti
předchozí skupině je možné je již rozšiřovat o další aplikace. Firmware také není pevně vázán
na paměť a lze jej upgradovat. Zde ovšem volnost feature phones končí. Jejich firmware se
nedá považovat za operační systém, protože nesplňuje všechny jeho náležitosti. Pro tuto
skupinu již jsou internetové prohlížeče, které dokáží dobře zobrazit webové stránky, většinou
v mobilním zobrazení, a některé i v zobrazení pro PC. Tyto prohlížeče jsou většinou psané
v jazyce Java, minimalizované pro mobilní telefony. Ačkoli už se s těmito zařízeními dá lépe
pracovat s webovými stránkami, nedokážou to, co následující skupina.
Konečně třetí skupina, které se budu věnovat téměř celý zbytek práce, jsou tzv. smartphones neboli chytré telefony. Tato zařízení v sobě mají operační systémy, kterých je
v současné době velká řada. Mezi ty, o kterých má smysl uvažovat, jsou tyto: iOS (iPhone,
iPod Touch, iPad), Symbian S60, Symbian Platform, BlackBerry OS 5 a 6, Android, WebOS,
Bada, MeeGo, Windows Mobile, Maemo, Windows Phone. Hlavní odlišností smartphonů
od předchozích skupin je možnost aplikací přistupovat k datům a především periferiím
telefonu, jako je fotoaparát, GPS, polohovací senzor, dotykový displej, přisvětlovací dioda,
TV tuner, bluetooth, Wifi a spousty dalších. Největší nárůst využívání těchto periferií začal
s příchodem iPhone od firmy Apple. Následně pak pokračovaly telefony s operačním
systémem Android od firmy Google a některé další. [Wikipedia, 2012d]
Pro iPhone byly vyvíjeny nativní aplikace od nejabsurdnějších her typu „vypij pivo
z iPhone“ až po praktické aplikace jako realtime překladač. Ačkoli to není pravidlem, tak se
chytré telefony většinou vyznačují svým velkým dotykovým displejem. Rozlišení displejů
stále roste, ale aby zůstal telefon telefonem do kapsy, jeho rozměry zůstávají stejné, přičemž
se zvyšuje DPI. Při vývoji je pak důležité brát v potaz i tento poznatek, aby se nestalo, že
např. některý text bude velice malý až k nepřečtení.
5
Jak bylo již napsáno, uvedené aplikace byly psány jako nativní aplikace. Ve světě
a později i v České republice postupně vzrostl význam internetu v mobilu a to přispělo
k možnostem tvoření těchto aplikací, a to např. pomocí webového rozhraní [Almaer, 2011].
Nejnovější chytré telefony, resp. jejich prohlížeče, dokáží pracovat s pamětí telefonu
a periferiemi téměř na stejné úrovni jako nativní aplikace. Jejich hlavní výhodou je, že není
třeba tyto aplikace instalovat na zařízení. Většina logiky běží na webovém serveru
a na přístroji běží relativně nenáročný JavaScript, který se stará o přívětivé uživatelské
rozhraní a získávání dat z přístroje. Aplikace díky JavaScriptu bývá i tlustým klientem. Na
straně přístroje není využíván pouze JavaScript, který se stará o programovou část, ale také
jiné technologie a standardy jako HTML5 a CSS3.
Pro moderní mobilní webové aplikace je využíváno kombinace právě těchto 3 standardů.
HTML5 je značkovací jazyk, který se stará o strukturovaný výpis dat. Je následník HTML
4.01, který je doposud nejvyužívanějším značkovacím jazykem pro webové aplikace
na osobních počítačích. Je ovšem doplněn o spousty možností, které nejen ulehčují práci
programátorům, ale také rozšiřují možnosti webových aplikací. CSS3, jako další verze
kaskádových stylů, se aplikuje na HTML5 tagy a zajišťuje, aby aplikace byla uživatelsky
přívětivá, přehledná a poutající. Oproti předchozím verzím je doplněna o možnosti, které také
zjednodušují práci programátorům, ale především zrychlují výpočetní cyklus při
překreslování aplikací, což je u stále relativně pomalých mobilních zařízení velká úleva [Irish,
2011].
2.1 Moderní tvorba webových aplikací
2.1.1 HTML 5
Aby bylo možné začít tvořit moderní aplikace, je třeba přistupovat k tvorbě moderní
cestou. Zcela nový jazyk HTML5, schválený světovým standardizačním konsorciem W3C, je
jedním z významných kroků ke sjednocení několika starších standardů. Základ tohoto
značkovacího jazyka je postaven na HTML 4.01. Dále je doplněn o zvyklosti z xhtml. Ovšem
to není zdaleka vše. Jazyk se snaží postihnout i takové funkcionality, na kterých je dnešní
internet prakticky založen, jako třeba přehrávání videa. Jazyk obsahuje, oproti předešlým
verzím, několik zásadních vylepšení, které následně více přiblížím. Identifikace pro prohlížeč,
že se jedná o HTML5, je zajištěna novým krátkým zápisem DOCTYPE:
<!DOCTYPE html>
Html se již od jeho vzniku snaží strukturovat jednotlivé bloky obsahu celé stránky.
Postupem času se ovšem obsah stránek dost měnil a začal se z rámu, tabulek apod.
přemísťovat do blokových tagů DIV. Při pohledu na moderní stránku, psanou v HTML 4 či
6
xhtml, je vidět obrovské množství těchto vnořených DIV tagů. HTML 5 se na tento problém
snažilo myslet a strukturovalo bloky do těchto blokových elementů:

HEADER

SECTION

ARTICLE

ASIDE

FOOTER

NAV
Toto strukturování jde ruku v ruce s XML DocBook a jeho označováním částí textu
podle toho jaký text obsahují, nikoli jak by měl text vypadat. Toto rozvrstvení elementů
pomáhá jak přehlednosti kódu, tak vyhledávacím strojům určit, co je důležité. Než popisovat
jednotlivé elementy, bude lepší je představit ilustračně na obrázku nejprve pro běžný osobní
počítač a následně pro případné mobilní zařízení.
Obrázek 1 - Koncept rozvržení HTML5 tagů na obrazovce (desktop) - Zdroj: autor
Na obrázku (“Obrázek 1“) je téměř univerzální layout pro zobrazení webové aplikace
na monitoru osobního počítače. V HTML 4 by červené rámečky představovaly s velkou
7
pravděpodobností element DIV. V HTML 5 tomu je ovšem jinak. Každý logický prvek
stránky nese své vlastní jméno tagu. Tato změna se zdá být malicherná, ale pokud má být
HTML 5 používané správně, je třeba se této konvence držet. Jak později ukáži, u většiny
frameworků je toto třídění nutností pro správné zobrazení aplikace.
Obrázek 2 - Koncept rozvržení HTML tagů na obrazovce (mobilní zobrazení) - Zdroj: [WordPress, 2012]
Na obrázku (“Obrázek 2“) jsou vyobrazeny možné layouty pro mobilní webovou
aplikaci. Jak je vidět, logicky jsou prvky pojmenovány stejně, jako v předchozím případě, liší
se pouze rozmístění na displeji. Pokud je tedy stránka aplikace správně strukturována, je
možné přecházet mezi mobilním a desktopovým zobrazením pouhou změnou kaskádových
stylů. Toto je základem frameworků pro mobilní zobrazení. Ty sice nepracují pouze s CSS
styly, ale i JavaScriptem, nicméně na stejném principu.
Mezi další rozšíření, které přišlo s HTML 5, patří možnost vkládání videa. Podobně jako
se vkládá obrázek IMG, je možné nyní vložit VIDEO s odkazem ve vnitřním elementu SOURCE.
Je možné zadat i více zdrojů pro video v různých formátech. Formáty jsou vůbec jediným
problémem videí na webu. Videa totiž mohou být zakódována různými kodeky. Některé mají
volnou licenci pro šíření a používání a jiné nikoliv. Z tohoto důvodu podporují prohlížeče
různé kodeky. Především komerční prohlížeče záměrně nepodporují otevřené kodeky
a naopak otevřené prohlížeče nemají možnosti podporovat kodeky placené. Je zde tak
problém, který ještě není s HTML 5 vyřešen, a tak je třeba počkat, jak se s tím prohlížeče
8
poperou. Předchozí informace vycházejí z přednášek Ing. Jiřího Koska o vývoji webových
aplikací.
Dalšími možnostmi HTML 5 je např. vkládání audio souborů pomocí elementu AUDIO
nebo vytváření jednoduché grafiky pomocí elementu CANVAS. Tím možnosti HTML 5
nekončí. Je možné získávat také geolokaci přes GPS modul. Velice podařené změny se
povedly i pro formuláře, kdy je možné už pomocí HTML validovat většinu vstupů a vytvářet
zajímavé grafické formuláře.
HTML 5 je velice silný značkovací jazyk pro moderní webové aplikace. Jeho popis není
předmětem této práce, přičemž podrobný popis je k nalezení např. ve zdrojích [Valoušek,
2011], [Stehlík, 2011], [Matthew, 2011].
Tento standard pomáhá stránkám, aby byly psány precizněji a přehledněji. Dále rozšiřuje
o praktické možnosti a pro mobilní web se zdá být velice užitečný. Nastává tu ovšem jedno
velké ALE. Windows Phone 7 jako nejnovější pilotní operační systém Microsoftu pro mobilní
telefony ve své první verzi nepodporuje nový standard HTML 5. Kvůli tomu je třeba některé
vlastnosti nového jazyka vynechávat kvůli zpětné kompatibilitě.
2.1.2 CSS3
Nová verze kaskádových stylů CSS 3 je obohacena o spousty praktických možností
oproti CSS 2. Pomocí starších kaskádových stylů se daly upravovat elementy pouze
jednoduchými filtry. Pro složitější grafické efekty bylo třeba použít grafické editory a vytvořit
obrázky, které se následně vkládaly do stránek. S CSS 3 se spousta těchto efektů dá provést
přímo na stránce, což zrychluje stažení stránky za cenu vyšší výpočetní náročnosti pro
prohlížeč. Jelikož je těchto změn velká spousta, pokusím se přiblížit jen ty nejdůležitější.
První užitečnou změnou je rozšíření selektorů o možnost vybírat i podle názvu atributů.
Syntaxe pak vypadá např. takto E[att$=“val“], E[att*=“val“] nebo E[att^=“val“].
Další novinka v selektorech jsou nové pseudotřídy. Mezi ně patří root, empty, target,
enabled,
disabled,
checked.
Velice silná funkce CSS 3 je možnost změnit font
na jakýkoli vlastní, zadaný pomocí url. Na následujícím příkladu (Příklad 1) je vidět možný
zápis ze zdroje [Stehlík, 2011].
Příklad 1 - Použití uživatelských fontů v CSS3
@font-face {
font-family: 'devonshire';
src: url(../fonts/devonshire-regular-webfont.eot);
src: url(../fonts/devonshire-regular-webfont.svg);
9
src: url(../fonts/devonshire-regular-webfont.svgz);
src: url(../fonts/devonshire-regular-webfont.ttf);
src: url(../fonts/devonshire-regular-webfont.woff);
}
nav a, nav a:visited {
font-family: devonshire;
}
Dalšími možnostmi jsou: částečná průhlednost zvolených barev, zaoblené rohy rámečků
radiem, 3D efekty, přechody barev, vícenásobné pozadí, ale i dynamické prvky jako
transformace a posun elementů.
Je vidět, že oproti předchozí verzi zaznamenaly styly veliký nárůst funkčností. Jediná
nevýhoda může být, že je občas možné se setkat s prohlížeči, které CSS 3 ještě plně
nepodporují. Popsání možností CSS není předmětem této práce, proto pro podrobnější popis
doporučuji např. zdroje [Valoušek, 2011], [Stehlík, 2011], [Matthew, 2011].
Hlavním důvodem používání CSS 3 v mobilních webových aplikacích je, že již není
třeba složitější grafické efekty provádět javascriptem. Ten je totiž velice nešetrný
na výpočetní složitost. U mobilních telefonů, kde je pořád relativně pomalý procesor, je třeba
s ním šetřit. Zároveň některé složitější operace se mohou projevovat zpomaleným
vykreslováním, jako třeba držení fixní polohy patičky při scrolování. Zabudováním do CSS 3
se zobrazování stává plynulejším.
2.1.3 Hlavička mobilní webové aplikace
Oproti běžným stránkám pro desktopové počítače se v mobilních zařízeních lehce mění
hlavička HTML dokumentu. Načítání JavaScriptu probíhá identickým způsobem. Změna
nastává u vkládání stylu, kdy je třeba zmínit, že daný styl se zobrazí jen v mobilním zařízení.
V atributu media se nadále uvádí „screen“ pro zobrazení na obrazovce. K tomuto zobrazení
je možné dodat informaci o šířce zařízení pomocí vlastnosti device-width, min-devicewidth
a max-device-width. K tomu je třeba přidat styl, který se zobrazí na všech zařízeních.
Řádky pro přidání stylu by pak mohly vypadat jako v příkladu (Příklad 2).
Příklad 2 - Doplnění hlavičky HTML mobilní webové aplikace
<link rel=“stylesheet“ type=“text/css“ media=“only screen and (max-devicewidth: 320px)“ href=“small-style.css“ />
<link rel=“stylesheet“ type=“text/css“ media=“only screen and (min-devicewidth: 321px)“ href=“large-style.css“ />
10
<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“all-style.css“
/>
Aby mobilní telefon poznal, že stránka je určena pro mobilní zobrazení a ne pro běžnou
desktopovou stránku, je o tom třeba sdělit prohlížeči v meta tagu. Název meta tagu je
viewport a hodnota pro mobilní zobrazení, resp. pro nastavení pevné šířky rovné šířce
displeje, je width=device-width. Šířku je možné nastavit na jakékoli číslo v pixelech, pro
správné zobrazení je ale doporučeno používat uvedenou klauzuli. Kromě šířky je možné
definovat i výšku pomocí height (výška displeje je pod klíčovým slovem device-height).
Dále je možné přidat úroveň přiblížení při načtení a i maximální a minimální možnou
přibližovací úroveň v násobcích. Tím je možné uživateli používání zoomu na stránce zakázat,
přičemž pro tuto možnost je zde speciální příznak. Klíčová slova jsou maximum-scale,
minimum-scale, initial-scale
a user-scalable. Meta tag by tedy pro mobilní zařízení
mohl vypadat následovně (Příklad 3).
Příklad 3 - Metatag pro určení mobilní aplikace
<meta name=“viewport“ content=“width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1“ />
Pro Android OS je zde možnost ještě speciálního nastavení target-densitydpi, které je
možné předat parametry high-dpi, medium-dpi, low-dpi či hodnotu od 70 do 400,
vyjadřující hustotu pixelů pro dané zařízení.
2.2 Možnosti JavaScriptu
V následujících subkapitolách ukáži různé možnosti, které poskytuje JavaScript v nových
zařízeních a prohlížečích podporujících HTML5. Tyto funkcionality byly přidány
s příchodem HTML5, ovšem většina z nich je třeba obsluhovat programovacím jazykem
a k tomu je nejlepší a jediná možnost právě JavaScript. Většina možností, které budu
popisovat, jsou plně funkční na každém zařízení podporujícím HTML5, včetně osobních
počítačů. Nicméně využitelnost je zásadní na mobilních zařízeních, které tyto možnosti umějí
lépe využívat a vznikají v nich tak aplikace, o kterých je možno si na počítačích nechat jenom
zdát.
2.2.1 Událost otočení displeje
Jako první ukáži, jak pomocí JavaScriptu zjistit polohu natočení přístroje neboli
„orientation“.
Při změně orientace displeje je v kvalitních aplikacích třeba zajistit některé
změny, aby mohl uživatel dále bez problému aplikaci ovládat. Pro odchycení změny orientace
displeje má JavaScript událost s názvem onorientationchange na objektu window. Některé
verze Android ovšem tuto možnost nepodporují, proto je třeba pokusit se ošetřit otáčení
displeje jinak. Alternativní možnost je událost onresize, která zjišťuje změnu velikosti
11
prohlížeče. V mobilních zařízeních se resize zpravidla rovná změně orientace displeje. Zápis
v kódu je pak možno realizovat takto (Příklad 4).
Příklad 4 - Událost změny orientace obrazovky
var canDetect = ‘onorientationchange‘ in window;
$(window).bind(canDetect ? ‘orientationchange‘ :‘resize‘, function (ev) {
// kód pro ošetření změny orientace displeje
});
V předchozím kódu se objevil klíčový znak $. Pro zrychlení a zjednodušení zápisu se
v drtivé většině případů využívá framework jQuery, který tento znak používá jako svou hlavní
funkci. Tento framework ulehčuje práci především se samotným dokumentem. V následující
kapitole představím některé další frameworky, které jsou na jQuery závislé. Podrobnější
informace o jQuery jsou k dispozici na stránkách http://jquery.com/.
K samotnému kódu vysvětlím, jak to vlastně funguje. Na instanci window přichytím
novou událost. Tato událost je závislá na tom, zda aktuální zařízení podporuje událost
onorientationchange.
resize.
Pokud ano, tak přichytí tu, v opačném případě přichytí alternativní
Uvnitř vytvořené funkce je možno obsloužit otočení. Významné proměnné mohou
být tyto: window.innerHeight, window.innerWidth, window.orientation, ev.type.
Pomocí nich je možné zjistit například, zda je obrazovka „landscape“ či „portrait“
následujícím způsobem (Příklad 5).
Příklad 5 - Zjištění polohy zařízení (Portrait, Landscape)
var aspectRatio = 1;
if (window.innerHeight !== 0) {
aspectRation = window.innerWidth / window.innerHeight;
}
var orientation = aspectRatio <= 1 ?‘portrait‘ :‘landscape‘;
Vlastnost window.orientation oproti předchozímu kódu vrací natočení ve stupních (0, 90, 90, 180), ovšem nefunguje pro událost resize. Pokud bych chtěl pomocí jQuery vyvolat
uměle událost otočení displeje, zavolám funkci trigger.
$(window).trigger(‘reorient‘, [orientation, rotationText]);
Ačkoli se zmiňuji o událostech jako o nových funkcích JavaScriptu, JavaScript k nim
pouze přistupuje. Tyto vlastnosti byly přidány do standardu HTML5 a to i se všemi dalšími
možnostmi, které budu popisovat v následujících subkapitolách.
12
2.2.2 Úložiště prohlížeče
Nyní osvětlím možnosti práce s pamětí zařízení. Již v základním JavaScriptu na osobních
počítačích byla možnost ukládat data do prohlížeče, a to pomocí cookies. Ty jsou ovšem
razantně limitovány pamětí a způsobem použití. Proto se stále používají pouze pro
jednoduchá nastavení či označování jedinečnosti uživatelů. Pro mobilní zařízení přibyly hned
dvě nová úložiště dat. První se nazývá localStorage a druhé sessionStorage. V přístupu
k datům se tato dvě úložiště nijak neliší. Jediný rozdíl, jak už název naznačuje, je v době
pamatování si dat. Úložiště sessionStorage ukládá pouze pro dané sezení, tady po zavření
okna prohlížeče se data vymažou. Zato localStorage dokáže ponechat data na disku
a používat je i při dalších příchodech na stránku. Velikou výhodou těchto úložišť je možnost
uložit i složitější struktury než jen řetězec. Například mohu uložit celý JSON1 objekt či pole
a následně jej znovu načíst a používat jako objekt. K oběma úložištím lze přistupovat pouze
ze stránek, které jej vytvořily, což zabraňuje zneužití dat třetí stranou.
Obě úložiště implementují stejné rozhraní Storage, na kterém se dají zavolat metody
getItem, setItem, removeItem
a clear. Následující příklad (Příklad 6) ukazuje použití
metod.
Příklad 6 - Zápis metod úložiště
localStorage.setItem(‘nazevPolozky‘, ‘Hodnota položky‘);
localStorage.getItem(‘nazevPolozky‘);
localStorage.removeItem(‘nazevPolozky‘);
localStorage.clear();
Aby bylo možné ukládat celé objekty, je třeba je před uložením serializovat a po načtení
deserializovat. K tomuto účelu u JSON poslouží jQuery funkce $.parseJSON a funkce
$.toJSON.
Následující kód (Příklad 7) ošetří ukládání JSON objektů v localStorage
do objektu localStore.
Příklad 7 - Ukládání JSON do úložiště
var localStore = new function () {
this.getItem = function (itemName) {
var itemValue = localStorage.getItem(itemName);
try {
itemValue = $.parseJSON(itemValue);
1
JSON (JavaScript Object Notation) – je jednoduchý objekt obsahující stromovou strukturu jednoduchých
prvků s řetězcovým klíčem
13
} catch (e) {}
return itemValue;
}
this.setItem = function (itemName, itemValue) {
try {
itemValue = $.toJSON(itemValue);
} catch (e) {}
localStorage.setItem(itemName, itemValue);
}
this.removeItem = function (itemName) {
return localStorage.removeItem(itemName);
}
}
Knihovna jQuery bohužel obsahuje pouze metodu pro zpracování JSON řetězce parseJSON,
nikoli tvůrce JSON řetězce toJSON. Proto je třeba stáhnout a vložit rozšíření
jquery.json.js
2
.
Využití těchto úložišť může být v mobilních aplikacích velice užitečné. Jelikož se velká
část logiky přenáší na klientovu stranu, je třeba mít stálý přístup k nejpoužívanějším datům.
Ovšem není možné se stále ptát serveru, který je jednak zbytečně zatěžován, ale především je
zvyšována doba načítání jednotlivých stránek. Nehledě na pomalá připojení v mobilních
zařízeních uživatelé vyžadují rychlou odezvu na jejich akce a to mimo jiné zajistí i tato
úložiště.
2.2.3 Cache aplikace
Další funkce, kterou nové HTML5 nabízí je tzv. applicationCache. Umožňuje práci
s aplikací i v případě, že je zařízení offline, tedy nemá dostupné připojení k internetu. Řada
aplikací je totiž možné ovládat i bez dat z internetu. Je ovšem třeba mít načtené potřebné
soubory, které offline provoz obslouží. HTML5 je možné sdělit informace o těchto souborech
konfiguračním souborem Cache Manifest. Tento soubor se nejčastěji připojuje k HTML
dokumentu pomocí atributu manifest v tagu <html/> (Příklad 8).
Příklad 8 - Připojení Cache Manifest souboru k HTML
<!DOCTYPE html>
<html lang="cs" manifest="/offline.appcache">
2
Knihovna je k nalezení na stránce http://code.google.com/p/jquery-json/
14
// váš html dokument
</html>
Tento soubor má příponu „.appcache“, či „.manifest“ a MIME-type: text/cachemanifest.
Soubor začíná klíčovým slovem CACHE MANIFEST a následně je rozdělen do 3
bloků kódu (Příklad 9).
Příklad 9 - Soubor Cache Manifest
CACHE MANIFEST
# poznámky a komentáře
CACHE:
/css/offline.css
/js/offline.js
/img/logo-offline.png
FALLBACK:
/ /offline.html
NETWORK:
*
První blok CACHE: prohlížeči říká, jaké soubory si má stáhnout do cache pro pozdější využití.
Tyto soubory pak bude mít prohlížeč k dispozici i po přechodu do offline režimu. Další blok
FALLBACK:
prohlížeči říká, jak se má standardně zachovat, pokud se uživatel pokusí načíst
danou stránku v offline režimu. V ukázkovém případě domovskou stránku a všechny jeho
podstránky přesměruje na /offline.html soubor, který si zároveň již uložil do offline cache.
V jednoduché aplikaci by stránka mohla obsahovat informaci o tom, že byl uživatel odpojen
od internetu. Poslední blok NETWORK: dává prohlížeči informaci o tom, jaké soubory si má
vždy žádat server a nebude je nikdy cachovat. V kódu je možno použít i zástupný znak *,
který nahrazuje veškeré soubory na serveru. Komentáře se jako v jiných konfiguračních
souborech vytvářejí mřížkou (#) na začátku řádku.
Toto nastavení je velice silným nástrojem, ovšem pro složitější aplikace je nedostačující.
Proto je samozřejmě tato funkčnost zařazena i do JavaScriptu. Objekt, který komunikaci
s cache zajišťuje, je vlastností window: window.applicationCache. Na tomto objektu je
možné zavolat funkce update, která načte, resp. aktualizuje soubory cache. Tato metoda se
15
volá při prvním načtení cache anebo při změně manifest souboru. Pro znovunačtení
jednotlivých souborů do cache je třeba zavolat funkci swapCache, která není závislá na změně
manifest souboru. Po zavolání jedné z těchto funkcí si prohlížeč začne stahovat požadovaná
data. Pro pozdější použití je třeba vědět, zda se soubory již načetly, a to nějakou dobu trvá.
Aby se script nezastavil uprostřed kódu, je třeba k odchytávání stavu přistupovat
asynchronně. Objekt applicationCache obsahuje vlastnost status, která říká, v jaké fázi se
načítání nachází. Pro odchytávání změny stavu je možné na objekt přichytit události
checking, noupdate, downloading, progress, cached, updateready, obsolate, error.
Názvy těchto událostí odpovídají možným stavům applicationCache.status, k jehož
konstantám
je
možné
přistupovat
applicationCache.UPDATEREADY).
window
->
online
offline
stejnojmenně
s velkými
písmeny
(např.:
Další událost, která se dá využívat s cache je událost
a vlastnost navigator.onLine. V následujícím seznamu
stručně vysvětlím jednotlivé události [Oehlman, et al., 2012].

checking
– kontroluje manifest soubor

noupdate
– nejsou k dispozici žádné aktualizace cache

downloading

progress

cached

updateready

obsolate

error

window.online
– stahuje soubor do cache
– soubor byl stažen do cache
– všechny soubory byly staženy do cache
– jsou k dispozici nové aktualizace pro soubory
– nebyl nalezen manifest soubor
– nastala chyba při cachování
– stav připojení se změnil na online
Nyní, pokud jsou známy možnosti applicationCache, tak je možné společně s úložišti
vytvořit aplikaci, kterou lze ovládat i offline nebo je aplikaci dokonce možné z internetu
pouze načíst a poté už internet není třeba využívat. Tím je vidět, jakým způsobem se webové
aplikace přibližují nativním aplikacím. V závěrečné kapitole předvedu využití cache
na příkladu.
2.2.4 Databáze SQL
Zatím jsem vysvětlil, jak přistupovat k webovému úložišti dvojího typu a taky jak
ukládat do prohlížeče celé soubory. HTML5 má ovšem ještě další možnost práce s daty přímo
v prohlížeči, a to je WEB SQL Database. K této databázi se přistupuje jazykem SQL3 stejně
jako k většině jiných relačních databází. Tato databáze má velice podobný význam jako
3
SQL je dotazovací jazyk, který se používá pro dotazování do relačních databází. Podrobnější informace
lze nalézt např. ve zdroji [W3School, 2012].
16
localStorage.
Stejně jako ona se zachovávají data při zavření prohlížeče a lze k ní
přistupovat pouze ze stejné domény. Výhodou oproti localStorage je možnost přistupovat
k datům relačně. Ačkoli přístup k datům objektově přes localStorage může být někdy
výhodou, relační přístup má své výhody zejména v rychlosti přístupu k dotazovaným datům.
Většina webových databází je pak také relačních a je proto pohodlnější mít stejný přístup
i v prohlížečích. Každou databázi je možné také označit příslušnou verzí, což umožňuje
v průběhu běhu aplikace měnit strukturu databáze, a to bez ztráty dat a plně pod kontrolou.
Nejprve je třeba se k databázi připojit pomocí funkce openDatabase. Jako první
parametr je zadán název databáze resp. její identifikátor. Jako další parametr je zadána
zmiňovaná verze. Verze může být řetězec jako například “1.0“. Třetí parametr je popis
databáze a poslední čtvrtý parametr je vyhrazení místa pro databázi v bajtech. Samotná
funkce vrací instanci daného připojení, na kterou lze provádět další operace. Připojení
databáze by mohlo vypadat následovně (Příklad 10).
Příklad 10 - Otevření Web SQL Databáze
var db = openDatabase(‘moje_databaze‘, ‘1.0‘, ‘Moje zkušební databáze‘,
100*1024);
Velikost vyhrazená pro databázi je 100*1024 B, tedy 100KB.
Po zavolání této funkce je v prohlížeči k dispozici databáze, na kterou se již mohou zadávat
dotazy. Na rozdíl od běžných přístupů je u této databáze povinné provádět tzv. transakce. Pro
každý blok dotazů, nebo i jeden dotaz, je třeba vytvořit transakci a v rámci ní se teprve
dotazovat. K vytvoření transakce poslouží metoda transaction resp. readTransaction. Jak
už název napovídá, metoda readTransaction otevírá transakci, ve které je povoleno pouze
čtení z databáze, nikoli zápis. Metoda má jediný parametr, a to funkci, která bude v rámci
transakce provedena. Této funkci je jako parametr předána instance aktuální transakce,
na kterou už lze konečně volat dotazy. Pro zavolání SQL dotazu se využívá metoda
executeSql.
Té zadávám jako první parametr samotný SQL dotaz jako řetězec. Pokud je
třeba vložení proměnných, jsou vkládány do SQL řetězce zástupným znakem ?. Jako druhý
parametr metody je zadáno pole hodnot, které se zamění za zástupné znaky v daném pořadí
a to escapované4, aby se zabránilo SQL injection5. Třetí parametr poslouží jako callback
funkce, která se zavolá po provedení dotazu a jako parametry jí vrátí instanci transakce
a výsledek dotazu. Následující příklad (Příklad 11) ukazuje jednoduché volání dotazu.
Příklad 11 - Dotaz na Web SQL Databázi
4
Escapování řetězce je zaměnění funkčních znaků ze jejich nefunkční náhrady.
SQL injection může nastat, pokud se do SQL dotazu dostane taková hodnota, která by mohla změnit
význam dotazu a nechtěně ovlivnit databázi.
5
17
db.transaction(function (transaction) {
transaction.executeSql(“SELECT * FROM table WHERE id = ?“,
[1],
function (transaction, result) {
alert(result.rows.item(0));
});
});
Poslední možností databáze je možnost měnit její verzi pomocí metody changeVersion. Této
metodě je zadána stará verze, nová verze a jako třetí parametr zadána funkce, která bude
zavolána jako transakce a obsahuje změny (SQL dotazy) pro danou verzi. Příklad změny
verze databáze je na následujících řádcích (Příklad 12).
Příklad 12 - Změna verze Web SQL Databáze
db.changeVersion(‘1.0‘, ‘1.1‘, function (transaction) {
transaction.executeSql(“ALTER TABLE item ADD novy_sloupec TEXT;“);
});
Databáze je funkcionalita, která se pro mobilní zařízení dá využít stejně jako úložiště, záleží
pouze na situaci, kdy bude lepší použít jednu variantu a kdy druhou. Jelikož se jedná o relační
databázi, je možné vytvořit si synchronizační metodu, která snadněji synchronizuje databázi
s databází serveru a jednodušeji se tyto databáze udržují v konzistenci. Samozřejmě na konci
práce využiji tuto databázi na příkladu.
2.2.5 GPS Geolokace
Jako další možností, ke které lze přistupovat pomocí JavaScriptu, je GPS Geolokace. Je
to další z rozšíření, které bylo přidáno do HTML5 standardu. Moderní rozsáhlejší aplikace se
nyní jen těžko obejdou bez GPS souřadnic, a proto je tato funkcionalita velkým přínosem.
Přístup k datům se provádí velice jednoduše, a to pomocí objektu navigator.geolocation.
Na tomto objektu se dá zavolat metoda getCurrentPosition, které je jako první parametr
předán callback funkce, zavolané po zjištění geolokace. Callback funkci je předán parametr
s objektem Position, obsahujícím vlastnosti coords (objekt Coordinates) a timestamp
(objekt DOMTimestamp) s časem zjištění pozice. První instance obsahuje následující vlastnosti.
– zeměpisná délka ve stupních

longitude

latitude
– zeměpisná šířka ve stupních

altitude
– nadmořská výška v metrech

accuracy
– přesnost zeměpisné polohy v metrech
18

altitudeAcurracy

heading

speed
– přesnost nadmořské výšky v metrech
– směr pohybu ve stupních od severu
– rychlost pohybu v metrech za sekundu
Jako druhý parametr je předán callback pro nezdaření zjištění geolokace. Ten je volán
s parametrem,
který
obsahuje
informace
(PositionError.PERMISSION_DENIED,
PositionError.TIMEOUT)
dané
chyby.
Vlastnosti
jsou
code
PositionError.POSITION_UNAVAILABLE,
a message se zprávou o chybě. Posledním parametrem je
nastavení pro zjištění geolokace. Popis možných nastavení:
– jak často se má zjišťovat pozice

frequency

enableHighAccuracy
– zda musí být pozice maximálně přesná pro vrácení dané
pozice
– jak dlouho se může zjišťovat pozice

timeout

maximumAge
– jak dlouho se má ukládat pozice do cache (v budoucnu plně nahradí
vlastnost frequency, která je nyní deprecated)
Další funkcí, kterou lze na objektu geolocation zavolat, je watchPosition. Ta se chová
stejně jako předchozí funkce, ovšem callback funkce je spouštěna pravidelně ve stanoveném
intervalu. Pro ukončení činnosti tohoto časovače se volá funkce clearWatch. Následující
příklad (Příklad 13) ukazuje možné použití Geolokace.
Příklad 13 - Získání GPS informací
navigator.geolocation.getCurrentPosition(function (position) {
alert(position.coords.longitude+“, “+position.coords.latitude);
}, function (error) {
alert(error.name);
}, {
frequency: 5000,
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 15*60*1000
});
Určování polohy je další utilitou, která dělá z webových aplikací silný nástroj pro uživatele.
Přístup k GPS modulu je ve většině zařízení nyní k dispozici. Některé prohlížeče dokonce
19
nemusí GPS modul využívat. Například Google chrome na desktopovém počítači dokáže
zjistit polohu s velmi solidní přesností pomocí polohy registrované IP a dalších technologií.
2.2.6 Plátno neboli grafika
Další funkčností, kterou lze v HTML5 využít, je plátno. Umožňuje vytvořit 2D plátno
a kreslit na něj jednoduché obrazce a obrázky. Z nich lze pomocí JavaScript logiky vytvořit
pěkné animace. Tato utilita dokáže nahradit dosavadní Adobe Flash6 aplikace [Irish, 2011].
Přístup k plátnu a samotné kreslení je možné také pomocí JavaScriptu. Problém ovšem je, že
podpora ještě není tak velká, jako u ostatních funkcionalit.
Pro využívání grafiky, je nejprve potřeba vytvořit plátno. Pro něj vznikl v HTML5
speciální tag CANVAS. K tomuto elementu je třeba přidat id, aby bylo možné k němu jednoduše
přistupovat a jako obsah může být zadán text zobrazený v případě, že plátno není v prohlížeči
podporováno. V JavaScriptu je možno na tomto plátně zavolat metodu, která inicializuje
plátno a vrátí kontext plátna. Metoda se nazývá getContext. Jako parametr je zadáno klíčové
slovo, znázorňující, v jakém kontextu se bude kreslit. Standardně se jedná o 2D plátno
(Příklad 14).
Příklad 14 - Vytvoření Canvas plátna
var canvas = $(“canvas#moje_platno“);
var context = canvas.getContext(“2d“);
Na tomto kontextu je již možné volat řadu metod, které kreslí na plátno různé objekty. Pro
přehlednost uvádím tabulku (“Tabulka 1“) metod a vlastností s jejich funkčnostmi.
Tabulka 1 - Metody kontextu pro 2D grafiku - Zdroj: [Hassman, 2009]
Název metody
Parametry
Popis
fillRect
x, y, width, height
Nakreslí obdélník vyplněný
nastavenou barvou fillStyle.
strokeRect
x, y, width, height
Nakreslí
nevyplněný
obdélník s okrajem širokým
lineWidth
a barvou
strokeStyle.
clearRect
x, y, width, height
Vymaže
z plátna
vše
v zadaném obdélníku.
moveTo
x, y
Přesune
kurzor
grafiky
na zadanou souřadnici.
6
Adobe Flash je platforma, umožňující jednoduše vytvářet grafické a animované aplikace.
20
lineTo
x, y
Z aktuální souřadnice grafiky
nakreslí čáru do souřadnic
zadaných v parametrech.
beginPath
Začne cestu, ve které je
možné
kreslit
libovolné
útvary a vybarvovat je.
closePath
Ukončí cestu.
fill
Vybarví
vnitřek
útvaru
v rámci cesty.
stroke
Vybarví okraj útvaru v rámci
cesty.
drawImage
Název vlastnosti
fillStyle
img_elem, dx, dy[, dw,
dh]
|
img_elem, sx, sy, sw,
sh, dx, dy, dw, dh
Vykreslí zadaný obrázek.
Formát
Popis
Barva ve stylu CSS
Nastaví
barvu
pro
vyplňování
strokeStyle
Barva ve stylu CSS
Nastaví barvu pro obrys
lineWidth
Šířka čáry v pixelech
Nastaví šířku čáry
Kreslené obdélníky se rovnou zobrazují po zavolání metody. U čáry je třeba po načrtnutí
zavolat metodu fill či stroke, aby se čára vyplnila barvou. Pro využití cest je třeba cestu
začít metodou beginPath. Poté je možné kreslit libovolně čáry lineTo a přesouvat kurzorem
moveTo.
Takto je možné nakreslit libovolný obrazec. Po nakreslení je pomocí metod fill
a stroke možné vybarvit obrazec a nakonec cestu zavřít. Vyplňuje se pouze v rámci jedné
cesty, tedy neberou se v potaz ostatní již nakreslené objekty. Při kreslení se objekty vykreslí
vždy přes sebe podle pořadí, v jakém jsou kresleny. Jednoduchý příklad využití metod
kreslení je v následujícím bloku (Příklad 15).
Příklad 15 - Vykreslení na plátno Canvas
context.beginPath();
context.lineWidth = 8;
context.fillStyle = ‘#6EE677‘;
context.strokeStyle = ‘#E66E88‘;
context.moveTo(10, 10);
context.lineTo(100, 10);
21
context.stroke();
context.fill();
context.closePath();
context.fillStyle = ‘#DDDD22‘;
context.fillRect(35, 20, 40, 30);
Předchozí příklad vykreslí následující obrázek (“Obrázek 3“).
Obrázek 3 - Nakreslený pomocí plátna HTML5 a JavaScriptu - Zdroj: Autor
Poslední nevysvětlená metoda dokáže vykreslovat obrázek na plátno. Tento obrázek může být
buď obrázek z elementu IMG a dokonce to může být i jiné plátno, které vykreslilo nějaký
obrázek. Metoda je přetížena třemi možnými vstupy. První nejednoduší obsahuje pouze
element obrázku a poté souřadnice vykreslení. Druhá varianta může být rozšířena o velikost
nakresleného obrázku. Poslední varianta má navíc 2 souřadnice, obsahující informaci, kde se
má obrázek oříznout. Následující příklad (Příklad 16) ukazuje nejlehčí variantu vykreslení
obrázku na plátno. Vykreslí logo Google.
Příklad 16 - Vykreslení obrázku na plátno Canvas
var img = new Image();
img.addEventListener(‘load‘, function () {
var i = 2.1;
context2.clearRect(0, 0, 800, 600);
context2.drawImage(img, 20, 20);
}, false);
img.src =
‘http://www.androidmarket.cz/wp-content/uploads/2011/12/Google_logo.jpg‘;
Kromě těchto metod lze využít další, jako třeba translate, která se stará o přesunutí obsahu
plátna na zadanou pozici, či rotate, který otáčí obsahem plátna o uvedený stupeň.
22
Kreslení umožňuje vytvářet nejen hezké animace, ale i renderovat jednoduché hry
a jinou grafiku. Je to další krůček, který webové aplikace přibližuje nativním aplikacím.
2.2.7 Události dotykového displeje vs. Myši
Jedna z klíčových možností, která se týká především mobilních zařízení, je odchytávání
událostí dotykové obrazovky. Tato vlastnost je velice podobná stávajícím událostem myši.
Standardně lze odchytávat stisknutí tlačítka myši mouseDown, puštění tlačítka myši mouseUp,
pohyb myši mouseMove, najetí myši na prvek mouseOver, odjetí myši z prvku mouseOut,
kliknutí myši mouseClick a případně dvoj kliknutí myši dblClick. Zmíněné události jsou
na desktopovém počítači velice využívané. Stejnou měrou jsou využívané události
dotykového displeje na mobilních zařízeních. S ohledem na trend dotykových telefonů jsou
tyto události nedílnou součástí každé mobilní aplikace, a proto jsou ve většině prohlížečů plně
podporovány.
Zásadním rozdílem ovládání dotykovou obrazovkou a myší je samotné kliknutí. Dotyk
prstu popřípadě stylusu automaticky vyvolává nějakou akci. Oproti tomu najetí myši na prvek
akci nevyvolává. Kliknutí myši tedy odpovídá dotyku displeje. Posunutí myši, tedy
mouseMove,
neodpovídá posunutí prstu touchMove. Tato událost by spíše odpovídala události
mouseDrag
(pohyb se stisknutým tlačítkem), která v základním JavaScriptu neexistuje. Jak už
jsem naznačil, události displeje začínají klíčovým slovem touch. V následující tabulce
(“Tabulka 2“) je uveden seznam události displeje a jejich ekvivalentu k události myši.
23
Tabulka 2 - Události dotykové obrazovky s ekvivalenty k myši – Zdroj: Autor
Událost
Popis
Ekvivalent myši
touchstart
Přiložení prstu na displej
mousedown
touchend
Ukončení pohybu prstu
mousemove
touchmove
Pohnutí prstu po displeji
mouseup
Každá z těchto událostí v JavaScriptu spouští callback funkci, které je předán objekt události.
Ten obsahuje několik speciálních vlastností, uvedených v následujícím seznamu (Zdroj:
Autor).
– seznam všech prstů přiložených na displej

touches

targetTouches

changesTouches
– seznam všech DOM elementů pod prsty na displeji
– seznam všech prstů, které vyvolaly aktuální událost
Každý prvek v seznamu je objekt, který obsahuje následující informace.
– číslo unikátní pro daný prst v rámci všech prstů na displeji

identifier

target

clientX, clientY

pageX, pageY

screenX, screenY

radius, coordinates, rotationAngle
– element DOM, který je cílen daným prstem
– souřadnice prstu vůči prohlížeči včetně odscrolování
– souřadnice prstu vůči stránce s odscrolováním
– souřadnice prstu absolutně vůči displeji bez odscrolování
– popis elipsy popisující rozmístění prstů
Seznam je u každé události uveden kvůli multi-touch obrazovkám, které už bývají běžnou
součástí telefonů. Jelikož si jsou události myši a obrazovky podobné, je možné jednoduchým
skriptem namapovat oba na stejný script a vytvořit stránky funkční s oběma událostmi.
Následující script ukazuje příklad použití událostí displeje (Příklad 17). Zároveň ošetřuje
události i pro události myši na desktopovém počítači.
Příklad 17 - Použití událostí displeje
var touchStart = function (evt) {
var obj = typeof evt.touches != 'undefined' ?evt.touches[0] :evt;
$(‘event‘).html(‘Start: ‘ + obj.pageX + ‘ x ‘ + obj.pageY);
evt.preventDefault();
canDraw = true;
}
$(document.body).bind('touchstart', touchStart).bind('mousedown',
touchStart);
24
var touchMove = function (evt) {
if (!canDraw) return;
$(‘event‘).html(‘Move: ‘ + obj.pageX + ‘ x ‘ + obj.pageY);
}
$(document.body).bind('touchmove', touchMove).bind('mousemove', touchMove);
var touchEnd = function (evt) {
$(‘event‘).html(‘End: ‘ + obj.pageX + ‘ x ‘ + obj.pageY);
canDraw = false;
}
$(document.body).bind('touchend', touchEnd).bind('mouseup', touchEnd);
Dotyková obrazovka, jak již bylo popsáno, je standardem každého chytrého telefonu
a uživatelé si na ni stále více zvykají. Proto je třeba tyto události zařadit do aplikací, a to
i do webových. Vývojáři prohlížečů a operačních systémů stále přinášejí nové věci v oblasti
obrazovky, takže jsou i nové vlastnosti JavaScriptu. O rozdílech v různých systémech ještě
bude popsáno v následující subkapitole.
2.2.8 Mapy
Již byla zmíněna možnost získávat data GPS modulu, ovšem HTML5 jde s geolokací
ještě dál. Ačkoli se nejedná přímo o funkcionalitu HTML5, je na ní postavená. Jedná se
o mapování, neboli zobrazení map a práce s nimi. Dosud existují dvě API7, která jsou
použitelná, a je možné s nimi psát zajímavé aplikace. První API je od firmy Google a druhá
alternativní možnost je Tile5. Obě služby jsou možné připojit přes vzdálené API.
První
Google
mapy
se
připojují
přes
adresu
http://maps.google.com/maps/api/js?sensor=false, která vrátí JavaScript, na kterém už je
možné vytvářet mapy a pracovat s nimi. Jako parametr je předán sensor. Pokud je ten
nastaven na true, tak je automaticky zjišťována lokace uživatele a zadána do map. Funkcí,
které API poskytuje, je celá řada. Nebudu je zde vysvětlovat, ale doporučuji se podívat
na zdroj [Google, 2012]. Tyto mapy budou lehce popsány a vysvětleny v závěrečných
příkladech.
7
API (Aplication Programing Interface) – označuje v informatice rozhraní pro programování aplikací.
[Wikipedia, 2012f]
25
Další firma, která poskytuje mapy pro HTML5, je zmíněný Tile5. Připojení k aplikaci
probíhá podobným způsobem, a to připojením vzdáleného JavaScriptu. Dále je ovšem
využíváno CANVAS elementu, na který je navázána mapa a vykreslena HTML5 technologiemi.
Po vytvoření objektu je možné volat spousty funkcí, jejichž API je možné shlédnout ve zdroji
[Tile5, 2012].
2.3 Operační systém Android
2.3.1 Úvod do OS
V předchozích podkapitolách jsem popsal, jak je možné webové aplikace pro mobily
vytvářet, resp. jakými jazyky psát kód. Nyní se pokusím vpravit do základních vlastností
konkrétního operačního systému, a tím je Android OS. Tento operační systém je vyvíjen již
od roku 2003, přičemž ho v roce 2005 odkoupila společnost Google [Wikipedia, 2012c].
V návaznosti na marketingový zásah společnosti Apple a rozšíření jeho pilotního produktu
iPhone se Android vyvinul do velice úspěšného prostředí pro mobilní telefony a zařízení.
Tento systém je postaven na Linuxovém jádru, tedy OpenSource8, a to je v řadě případů
jeho předností. Nativní aplikace pro tento systém jsou vyvíjeny v programovacím jazyce
Java9, který je pro programátory velice pohodlný a jednoduchý. Z tohoto důvodu se vytváří
velká spousta aplikací10, které z mobilního telefonu dokáží udělat velice užitečný a lákavý
stroj. Tyto aplikace využívají právě přístup k periferiím telefonu. Jak už bylo popsáno, jedná
se např. o fotoaparát, akcelerometr11, mikrofon, GPS a spousty dalších. Nativní aplikace jsou
základem každého chytrého telefonu a v řadě případů je nelze jednoduše nahradit. Nevýhodou
však může být nutnost instalace těchto aplikací, vysoká hardwarová náročnost či
komplikovanější způsob programování aplikací [Šrajer, 2011].
Některé nevýhody a další řadu výhod se snaží přinést právě webový vývoj aplikací.
Novější verze operačního systému Android obsahují již v základu kvalitní webový prohlížeč,
který je schopen podporovat HTML5, CSS3 a JavaScript resp. ECMAScript12. Tato trojice je
velice silným nástrojem pro tvorbu aplikací. Oproti již zmíněnému jazyku Java jsou
technologie uzpůsobeny pro snadné vytváření uživatelského rozhraní a zároveň dokáží
8
OpenSource se rozumí aplikace či kód, ke kterému je volný přístup a lze jej upravovat podle vlastní
potřeby a dále využívat pro programování dalších aplikací
9
Ve skutečnosti se jedná pouze o stejný programovací jazyk, nikoli o stejnou platformu, která by pro
mobilní zařízení byla příliš náročná. Kompilátor tedy na rozdíl od standardní Javy tvoří přímo strojový kód pro
OS.
10
V současné době se na oficiálním obchodu Android market (http://www.androidmarket.cz/) pohybuje
přes 290 000 aplikací, do kterých nejsou započítané aplikace z neoficiálních obchodů [Wikipedia, 2012c].
11
Akcelerometr je snímač, který pozná pohyb telefonu a to i pozici jeho natočení.
12
ECMAScript je standard, který vyčleňuje takové součásti JavaScriptu, které jsou stejně funkční pro
většinu webových prohlížečů. Pojmy jsou v praxi často zaměňovány.
26
pracovat s nejvyužívanějšími komponenty při mobilním vývoji. Strukturování tagů HTML5
tedy nejen zpřehledňuje kód pro programátory a ulehčuje tvorbu uživatelského rozhraní, ale
přispívá i lepšímu indexování stránek, např. pro vyhledávací stroje. CSS3 dokáže velice
snadno přetvořit stránky do estetického zobrazení. JavaScript se poté postará o interaktivitu
stránek a většinou i o samotnou logiku aplikace.
Předtím, než začnu vytvářet webovou stránku, je třeba si uvědomit možnosti připojení
mobilního telefonu. Situace s bezdrátovým připojením je velice různá jak v různých zemích,
tak i v různých regionech země. V České republice není tato situace příliš dobrá, ale téměř
všude je možné se k internetu připojit. Základní a nejčetnější technologie je GPRS. Přes
GPRS se s českými operátory připojuje s rychlostí přibližně 30Kbps13, tedy asi 4KB/s. Pokud
je mobil připojen takto, je třeba zásadně omezit množství přenesených kilobajtů, popřípadě se
snažit části stránek nechat ukládat v prohlížeči. Další o něco rychlejší možnost je EDGE. Ta
by měla poskytovat rychlost připojení až 200Kb/s 14(25KB/s). Další možností je připojení 3G.
U této možnosti stejně jako u Wifi či HotSpot si již není třeba lámat hlavu s přenosovou
rychlostí. Problém je, že v současné době je pokrytí 3G kolem 20%, a to především ve větších
městech. Informace byly pořízeny ve zdrojích [T-mobile] a [newslog, 2004].
2.3.2 Možnosti JavaScriptu v Android
Konečně přejdu ke konkrétnější věci, a to jsou nové objekty a funkce JavaScriptu,
přidané do Androidu pro práci s mobilním telefonem. Pro podrobnější informace
o JavaScriptu doporučuji webové stránky [W3Schools, 2011]. Kromě veškeré funkčnosti,
který JavaScript nabízí, je v Androidu rozšířen o možnost pracovat s periferiemi z následující
tabulce (“Tabulka 3“).
13
14
Test GPRS z praxe je k nalezení ve zdroji [newslog, 2004].
Oficiální seznam rychlostí připojení od T-mobile je k nalezení ve zdroji [T-mobile].
27
2012]
Tabulka 3 - Podpora periferií ve verzích Android a přístup k periferiím prohlížečů - Zdroj: [Oehlman, et al.,
Funkčnost
Podpora OS Android
Přístup prohlížeče
Detekce připojení
≥ 1.5
Přemostění
GPS Geo-lokace
≥ 1.5
Ano
Hardware senzory
≥ 1.5
Přemostění
Dotyková
obrazovka ≥ 1.5
Částečně
a události
Lokální paměť a databáze
≥ 1.5
Ano
Zprávy a oznámení
≥ 2.2
Ne
Fotoaparát
≥ 1.5
Přemostění
Je vidět, že sice není podpora z prohlížeče úplná, ale velice uspokojivá. Téměř všechny
funkce lze alespoň částečně využívat. U řádků, kde je uvedeno přemostění, se dá využívat
funkcionalita přes speciální rozhraní, nikoli přímo prohlížeč. Toto rozhraní se nazývá např.
PhoneGap a bude o něm ještě napsáno v pozdější kapitole.
Ačkoli to není standard a ve spoustě prohlížečů Android dosud není funkčnost
k dispozici, dá se předpokládat, že se tam postupem času dostane. Jedná se např. o přístup
k datům akcelerometru. Ten je prozatím přístupný i jako následující možnosti pro PhoneGap.
Volání probíhá přes instanci navigator.accelerometr. Dalšími přístupy jsou např.
fotoaparát přes instanci navigator.camera, přístup ke zvuku a vibracím přes objekt
navigator.notification.
2.3.3 Frameworky
Jelikož je Android otevřená Linux platforma, je nejrozšířenějším systémem a má také ze
strany
komunity silnou
podporu
[Wikipedia,
2012d].
To
je
samozřejmě
vidět
i na frameworcích, které jsou pro Android navrženy. Na druhou stranu komunita velice ráda
dodržuje standardy a konvence. Proto většina frameworků a knihoven, vyvíjených pro
Android, je plně využitelných i v ostatních operačních systémech. To samozřejmě není nic
špatného, naopak spíše ku prospěchu vývoje, ale Android tak ztrácí výhodu oproti komerčním
operačním systémům, které kromě otevřených součástí mají i vlastní, penězi vyvíjené
knihovny a frameworky.
Webové prohlížeče Android si nejvíce rozumí s frameworkem jQuery mobile, který je
určen pro všechny platformy. Ten dokáže vytvořit jednoduše webové aplikace s podobným
layoutem, jako mají nativní aplikace pro iPhone. Obecně je snaha o vzhled směřována
28
k iPhone aplikacím téměř u všech frameworků. Podrobněji o frameworcích bude popsáno
v následující kapitole.
2.3.4 Webové prohlížeče
Z hlediska vývoje je jistě důležité vědět, kde se vytvořené webové aplikace mohou
zobrazovat, a proto v této kapitole představím webové prohlížeče, které je možné využívat
právě na Android zařízení. Prohlížečů je velká řada, ale jen některé splňují standardy HTML5
a naštěstí ty jsou také těmi nejvyužívanějšími. Veškeré statistiky je možné shlédnout
v následujícím zdroji [W3Schools, 2012]. Článek, ze kterého jsem vycházel při porovnávání
prohlížečů, naleznete v tomto zdroji [Kilián, 2011].
2.3.4.1 Opera
První prohlížeč, který je špičkou i u desktopových počítačů, si našel velmi slušné místo
v mobilních zařízeních včetně Android systémů. Jeho velkou výhodou je možnost nahrát
téměř na každý OS. Již od začátku vývoje je totiž distribuována hned ve dvou verzích.
První je Opera Mini, která byla dlouhou dobu v popředí před svým bratrem Operou
Mobile. Důvodem byla možnost nainstalovat na jakékoli zařízení s podporou J2ME15, kterou
jednu dobu mělo téměř každé mobilní zařízení. Musím ovšem zmínit zásadní nevýhodu, a to,
že stránka je renderována na vzdálených serverech Opery a na mobilu je pouze zobrazen
výstup. To se hodí pro pomalejší méně výkonné zařízení, nikoli pro účel tvorby moderních
webových aplikací.
Již zmíněný prohlížeč Opera Mobile v současné době úspěšně dohnal Java-verzi Opery
a dokonce předehnal. V současné době je k dispozici na všechny verze Android a je velice
silným nástrojem pro prohlížení webu. Z hlediska uživatelů má spousty předností, jako funkce
Opera Turbo, zrychlující načítání stránek, nebo Opera Link, umožňující synchronizaci
s uživatelovou desktopovou verzí prohlížeče. Z hlediska podpory HTML5 a nových vlastností
webu není na špatné cestě, ovšem občas řeší některé situace nestandardně. To je ovšem cena
za již zmiňované funkce jako Opera Turbo apod.
2.3.4.2 Výchozí browser Android
Výchozí prohlížeč zabudovaný v Androidu v novějších verzích dokáže zpracovávat
veškeré možnosti HTML5 a nebrání programátorovi vytvořit plnohodnotnou webovou
aplikaci. Menší nevýhoda může být ze strany uživatelů, kteří s tímto prohlížečem přicházejí
o některé funkce, které jiné prohlížeče poskytují. Stále ho ovšem využívá většina uživatelů
Androidu, i když mu Opera často šlape na paty. I tak je dobré se na něj zaměřovat při vývoji.
15
J2ME je speciálně upravená verze Javy, přizpůsobená pro mobilní telefony.
29
2.3.4.3 Boat Browser Mini
Tento prohlížeč je velice jednoduchý, ale zato velice rychlý i na horších konfiguracích.
Proto si našel svoje umístění v Androidu. Jeho uživatelské rozhraní je velice minimalistické
a jednoduché, nicméně přehledné a zvládne veškeré životně důležité funkce, které webový
prohlížeč potřebuje. Kromě HTML5 dokáže zobrazit i Flash animace či pohybovat se
v aplikaci offline po přesunutí do paměti telefonu.
2.3.4.4 Dolphin Browser HD
Tento prohlížeč se vyznačuje tím, že je dostupný pouze na mobilním zařízení. To je
jistým způsobem jeho výhoda, protože se vývoj nezatěžuje desktopovým rozhraním. Tento
prohlížeč má řadu předností a funkcionalit. V nové verzi se dokáže i příjemně přizpůsobit
tabletům. Je možné si dle libosti upravovat vzhled rozhraní, otevírat a ukládat karty a spousty
dalšího. Je možné si ukládat cache na stránky, nebo ji naopak smazat. Flash animace je možné
jednotlivě zapínat na stránce, což zrychlí načítání stránky, nebo je zapnout všechny najednou.
A asi největší výhodou je možnost doplňovat prohlížeč o pluginy, které se hodí jen tomu, kdo
je potřebuje. Tento prohlížeč nemá dominantní postavení v telefonech, ale jistě má svou
budoucnost.
2.3.4.5 Chrome mobile beta
Za zmínku stojí určitě i zcela nový prohlížeč pro Android zařízení a tím je Chrome. Za
posledních pár let byl desktopový Google Chrome nejlépe si vedoucím webovým
prohlížečem. Z toho důvodu je dobré předpokládat, že i mobilní verze bude novou jedničkou
mezi prohlížeči. Zatím se jedná pouze o Beta verzi prohlížeče, běžící pouze na Android verze
4.0. Článek o novém prohlížeči je k nalezení ve zdroji [Mullany, 2012].
2.3.4.6 Miran Browser
Poslední prohlížeč, který představím, je Miran Browser. Ten je sice méně známý,
nicméně se uplatňuje svou rychlostí jak z hlediska načítání stránek a hardwarové náročnosti,
tak i uživatelským rozhraním, které usnadňuje celkovou navigaci.
2.3.5 Android Market
Každý operační systém má i svou podporu ze strany programátorů resp. firem, které
poskytují aplikace do daného prostředí. Na tomto místě se z převážné většiny prodávají
nativní aplikace, ovšem nejen ty. K dispozici jsou i nativní aplikace zdarma a některé aplikace
jsou v uvozovkách pouhé webové aplikace. Uživatel si stáhne jen odkaz na jistou stránku,
která po otevření odebere navigační lištu a schová navigační prvky prohlížeče. Dále se pak
tváří jako plně nativní aplikace a uživatel nemusí o tom, že se jedná o aplikaci webovou, ani
30
tušit. Aplikace jsou pro Android poskytovány na Android Market resp. na oficiálním obchodu
Google Play16.
Z mobilního telefonu je možnost stahovat a instalovat aplikace, určené pro daný typ
telefonu. Aplikace jsou řazeny a nabízeny uživateli podle jejich hodnocení, počtu stáhnutí,
oblíbenosti a dalších parametrů. Závislost je i na datu vložení aplikace, přičemž aplikace je
prvních pár dní nabízena uživateli více, aby měla šanci se na trhu uchytit. Tento mechanismus
je třeba vzít na vědomí při prodeji aplikace a je třeba správně sestavit marketingový plán již
od začátku, protože posléze už je složité aplikaci vyzdvihnout. Jedná se sice spíše o vývoj
nativních aplikací, ovšem ten má k webovému vývoji blízko a je možné, že se tyto dvě
odvětví brzy propojí.
2.4 Operační systém iOS
2.4.1 Úvod do iOS
Jak už první písmeno vypovídá, jedná se operační systém vyvíjený společností Apple.
Tento systém byl nejprve určen pro mobilní telefony iPhone, nicméně postupem času se
rozmohl i do dalších zařízení, jako je iPod, iPad či dokonce Apple TV. iOS je podobně jako
Android systém postavený na UNIX17 jádru. Jeho podstata je ovšem dost jiná. Apple již
od prvních verzí iOS šel cestou jednoduchosti. K veškerému ovládání postačuje jedno hlavní
tlačítko a dotyková obrazovka. Odlišnost od ostatních OS je většinou patrná na první pohled.
Veškeré přechody při uživatelských akcích jsou animovány stejně jako na desktopové verzi
systému OS X18. Systémy ovšem nejsou stejné. Na OS X je možné dělat spoustu věcí a jde
využívat nespočet funkcí, přičemž je využitelnost dohnaná do detailu. U iOS je snaha spíše
o jednoduchost a snadné ovládání. V mobilních telefonech, kde je třeba rychlého zacházení,
se tato metoda osvědčila a také proto se iPhone stal nejprodávanějším mobilním telefonem
na trhu [Wikipedia, 2012l].
S příchodem iPhone přišel i jeden trend, a to samotný vzhled iPhone aplikací. Jedná se
o horní navigační lištu, většinou s tlačítkem zpět či odkazem na menu a dále jsou veškeré
odkazy zaoblené v boxech a s příslušným gradientem. Výchozí barvy většinou bývají modrá
s šedým pozadím. Na obrázku (“Obrázek 4“) je vidět typický layout iPhone aplikace.
16
Google Play je internetový obchod s aplikacemi pro Android, k nalezení je na webové adrese
http://play.google.cz/
17
UNIX je označení pro OS postavené na architektuře vycházející z operačního systém UNIX.
18
OS X je operační systém od firmy Apple určený pro desktopové počítače iMac, či laptopy MacBook.
31
Obrázek 4 - Typický layout iOS aplikace v iPhone – Zdroj: [Doll, 2011]
Tento trend v tzv. „Look&Field“ začal u nativních aplikací iPhone a dále se přesunul
na ostatní platformy jako je Android, Symbian apod. V poslední době se ovšem stává hlavním
stavebním kamenem pro webové aplikace. Veškeré frameworky, postavené pro mobilní
webové aplikace, jej v základním nastavení využívají. Důvodem je, že uživatelé si na tento
vzhled zvykli, a nemusí nic dlouze hledat a zvykat si na nové prostředí, což uživatelé dělají
neradi [Wikipedia, 2012l].
Ačkoli v prvních verzích iOS nedokázal plnohodnotně multitasking, tedy běh více
aplikací najednou, nyní se s tímto problémem dokáže hravě vypořádat. Co se týče periferií, je
iPhone na velice dobré úrovni a i iOS si s nimi dokáže dobře rozumět. Především se jedná
o dotykový displej, který je předností každého iPhone. Jeho multi-touch systém byl již ze
začátku předním vodítkem samotného telefonu na trhu. S pomocí více prstů na obrazovce je
možné precizně ovládat celý telefon.
Z hlediska vývoje nativních aplikací je zde lehký problém. Není to opravdový problém,
spíše nevýhoda oproti Androidu. Aplikace se totiž vyvíjejí v ne příliš přívětivém Objective-C,
který je oproti Javě o něco náročnějším jazykem. Po dlouhou dobu nebylo možné vyvíjet
aplikace jinak, než v aplikaci xCode, která běžela pouze na Mac OS X. To značně limitovalo
možnosti vývojářů, resp. jim znepříjemňovalo život. Nyní je možné programovat aplikace
i v jiných programech jako např. Adobe Flash. Aplikace jsou prodávány v elektronickém
obchodu Apple s názvem iTunes.
32
2.4.2 Webové prohlížeče
JavaScript v iPhone je podporován téměř stejně jako v ostatních operačních systémech.
Samozřejmě záleží na prohlížeči, ve kterém je stránka zobrazena. Standardní integrovaný
prohlížeč je Safari a je zřejmě nejlepší volbou pro iPhone. Dokáže pracovat s HTML5, CSS3
a JavaScriptem a využívá veškeré standardy. Existuje pár odlišností v implementaci
JavaScriptu, které rozšiřují práci např. s událostmi dotykového displeje, ovšem nejsou
nikterak závratné a často jej podporují i ostatní OS [Posterous, 2008]. Prohlížeč Safari
obsahuje standardní funkce, jako je více karet, záložky, historii a spousty dotykových akcí,
například slide pro vpřed a zpět či multi-touch pro zoom. Další možností prohlížeče na iOS je
Opera Mini. Ta má stejnou funkcionalitu jako již popsaný z kapitoly o Android prohlížečích.
2.4.3 Frameworky
Frameworků, které jsou k dispozici přímo pro iOS resp. Safari, je celá spousta.
Vyjmenuji některé z nich a v následující kapitole budou některé popsány podrobněji. Jako
první zmíním framework s názvem „jQTouch“. Tento framework byl vytvářen přímo pro
iPhone, nicméně v současné době je možné jej stejně dobře využít i pro Android. Další
možností pro tvorbu nativních aplikací pomocí webové technologie je „Sencha Touch“, který
je v nynější době k dispozici ve verzi 2. Ten využívá webový framework „Ext JS“ a některé
další, které vyvíjí společnost Sencha Inc. Jako další frameworky na podobné bázi je možné
využít např. „Jo“ nebo webový framework „jQuery Mobile“.
2.5 Další operační systémy
2.5.1 Symbian OS
Na trhu se pohybují i jiné operační systémy, které nemají špatné postavení. Před
příchodem Android a iOS byl ve vedoucím postavení operační systém Symbian, dodávaný
především v zařízeních Nokia. Tento systém poslední dobou jde do ústraní, ale stále ho
spousta chytrých telefonů využívá. Tento OS je lehce odlišný od předešlých zmíněných.
Především se jedná o strukturu složek, která se spíše blíží systému Windows než ostatním
Unixovým řešením. Jelikož systém tu byl ještě mnohem dříve, než mobily vůbec snily
o dotykových displejích, má i v nových verzích pro dotykové displeje občas špatné návyky
a není dostatečně uživatelsky příjemný. Možná to zapříčinilo úpadek Symbian. Symbian byl
vytvořen i v nové distribuci zvané MeeGo, který měl být lépe přizpůsobivý novým chytrým
telefonům, nicméně ani ten se moc neuchytil. Zlomem v jeho vývoji bylo určitě zrušení
smlouvy s velikánem mezi výrobci mobilních telefonů, a to Nokií [Šrajer, 2011], [Oehlman,
et al., 2012].
33
Na systémech Symbian je možné dokupovat a stahovat aplikace jako v jiných OS
a komunita není zrovna špatná. Samotná Nokia pro tento účel vytvořila vlastní obchod
s aplikacemi s názvem OVI Store. Aplikacím ovšem chybí mrštnost a jednoduchost. Většina
aplikací je velice robustních a mají složité uživatelské rozhraní, které se běžným uživatelům
nelíbí jako u nových OS. Hardwarové požadavky OS i aplikací také nejsou nízké včetně jeho
výkonu, takže zařízení se Symbian nevydrží dlouho bez potřeby dobít. V Symbianu je
defaultně integrován webový prohlížeč, který není plnohodnotným prohlížečem pro HTML5
aplikace. Naštěstí je možné do něj doinstalovat jiný, jako např. Opera Mobile či Mini
a využívat plně jeho funkce jako na jiných OS. Programování aplikací se provádí ve
standardním C++ a je možné vytvářet nativní aplikace přes platformu PhoneGap.
2.5.2 Windows Phone 7
Další platformou, která vnikla na trh teprve nedávno, se jmenuje Windows Phone 7 a je
kompletně přepracovaným nástupcem Windows Mobile. Společnost Nokia chystá stále více
do svých telefonů nahrávat právě tento systém namísto předchozí éry Symbian. Tím se možná
Windows Phone dostane také na zajímavá místa v žebříčku trhu. Další telefony, které jsou
standardně dodávány s Windows Phone jsou zařízení firmy HTC. Ačkoli Windows Phone
dlouho ve svém integrovaném prohlížeči nepodporoval HTML5, tuto ztrátu s novým
prohlížečem IE9 napravil a není již problém tvořit kvalitní webové aplikace i pro tento OS.
Nativní aplikace se pro tento OS prodávají a poskytují na Windows Phone Market Place,
který je podobný ostatním obchodům s aplikacemi.
2.5.3 BlackBerry, WebOS (PalmOS), Bada
Jako poslední OS, které stojí za zmínku, jsou: BlackBerry, který je ve světě business
velkým hráčem, nicméně pro běžné uživatele bývá zbytečně složitý. WebOS, neboli dříve
PalmOS je OS využívaný pouze pro mobilní zařízení a je postaven na jádru Linux. Tento
systém vyvíjí společnost HP a má také své příznivce, i když v poslední době jich ubývá.
Poslední systém Bada je vyvíjen stejně jako Android společností Google a v mnoha
telefonech je v současné době zabudován a to především v telefonech společnosti Samsung.
Bohužel má některá hardwarová omezení, která tento systém brzdí, např. oproti Androidu.
2.6 Web z pohledu dalších zařízení
2.6.1 Webové aplikace na osobních počítačích
U osobních počítačů, nebo jak v průběhu práce zmiňuji desktopových počítačů, je třeba
přistupovat k tvorbě webových aplikací jiným způsobem, než u mobilních zařízení. Na
počítačích je možné dát na obrazovku mnohem více informací najednou. U mobilních
telefonů například není nutné vždy zobrazovat komplexní menu. Jednak se na displej celé
34
nevejde a hlavně jej uživatel ani nepotřebuje. Více informací se také načítá déle a u mobilních
zařízení, kde bývá připojení často omezené, je třeba i na toto hledět. Zatímco u desktopů je
načítána celá stránka se všemi informacemi a po přechodu na jinou stránku se znovu načtou
všechny informace, u mobilů je dobré načíst na hlavní stránce jen navigaci, kam by se mohl
uživatel vydat. Načtení takové stránky je velice svižné a přehledné na malých displejích.
Pokud se uživatel rozhodne přejít do nějaké sekce, je třeba, aby měl rychlou možnost vrátit se
zpět a přejít na stránku jinou. Zde by nemělo vznikat zdržení, proto je třeba zanechat menu
v paměti. Tento způsob zobrazování se dociluje přes funkce XHR resp. AJAX. Při kliknutí
uživatele na odkaz se načte pouze část stránky a tyto informace se uloží do stávajícího
obsahu. Tento obsah nemusí být zprvu viditelný. JavaScript se po načtení postará o zobrazení
načtené informace. Pokud uživatel klikne na tlačítko zpět, měl by se dostat na předchozí
stránku, která již načtená je a stačí, aby JavaScript pouze přehodil zobrazení na předchozí
stránku. Tímto způsobem je zajištěna rychlost webových aplikací a zároveň přehlednost.
Na osobních počítačích je podobný způsob načítání stránek pomocí AJAX také možný,
ovšem zaprvé uživatelé nejsou zvyklí na takovéto přechody mezi stránkami a zadruhé spousta
desktopových prohlížečů ještě bohužel plně nepodporuje funkce AJAX, či XHR. Například
internetový prohlížeč společnosti Microsoft Internet Explorer začal podporovat HTML5 až
od verze 9. Většina uživatelů ovšem stále využívá starší prohlížeče a těch není malá část.
JavaScript a nové funkce HTML5 a CSS3 je tedy dobré na počítačích využívat pouze jako
doplňující funkce, ale mít stránky přístupné bez podpory těchto technologií.
Pokud je vytvářena aplikace pro mobilní zařízení, je třeba, pokud je to možné, ji mít
přístupnou i z počítače. Je nepravděpodobné, že by web z desktopových počítačů úplně
vymizel. Každý se na fakturu z e-shopu raději ještě koukne na počítači a poté si ji třeba
vytiskne. Proto by mobilní aplikace měly především sloužit jako rozšíření pro ty počítačové.
Není vyloučené podporovat v mobilech plně všechnu funkcionalitu, naopak je to vítané, ale
s ohledem na to, aby mobilní web zůstal jednoduchý na ovládání.
2.6.2 Tablety jako zlatá střední cesta
V poslední době se uchytil trend právě v tabletech jako mobilních zařízeních. Jako první
měl na trhu tablet Apple s názvem iPad, který obsahuje stejný operační systém jako jeho
zmenšená verze iPhone. Ze začátku byly brány tablety jako zbytečnost. Podle většiny
uživatelů se jednalo o zvětšení dosavadních mobilních telefonů, ovšem velký displej začal mít
mezi uživateli oblíbení. Ačkoli je velikost displeje většinou jedinou změnou oproti telefonům,
je třeba k tvorbě aplikací přistupovat zase jiným způsobem. Zobrazení webových, ale
i nativních aplikací navržených pro mobil, je na tabletech většinou značně nepraktické.
35
Spousty místa je nevyužito a uživatel vidí méně informací než by vidět mohl. Z toho vyplývá,
že návrh aplikací je třeba vytvářet pro tablety znovu, oproti tomu technologie na tabletech se
od mobilních telefonů neodlišují [Picchi, 2011].
Při tvorbě mobilních aplikací je třeba myslet právě i na tablety. Není totiž vyloučené, že
za nedlouho dosáhne počet přístupů k aplikacím přes tablet podobné hodnoty jako počet
přístupů z mobilních telefonů. Problém nastává například u výběru frameworku, ve kterém
bude aplikace vyvíjena. Některé frameworky totiž dokáží excelentně vytvořit aplikaci pro
mobil, nikoli však pro tablet, což může být problém pro budoucí rozšiřování pro tablety.
Jednou z novinek, která s tablety přišla, je postranní lišta neboli „sidebar“. Další novinka je
tzv. „Pop-over“, které na desktopu odpovídá vyskakovacímu oknu. Pokud mají být stránky
moderní a uživatelsky přívětivé, je třeba tyto prvky do aplikace zakomponovat.
36
3 Přizpůsobení webových aplikací ve Frameworcích
3.1 Moderní mobilní zobrazení
V této kapitole bude popsána práce s frameworky, ale ještě předtím je třeba zmínit,
v jakém stylu frameworky podporují vývoj. Při vývoji pro mobilní zařízení platí několik
zásad, které by při psaní aplikací bylo zbytečně složité stále dodržovat a prodlužovat tak kód.
Jedná se zejména o vzhled, neboli Look&Field, který byl převzat z nativních aplikací pro
iPhone. Pro něj jsou typické ovládací prvky, které v krátkosti zmíním.
Horní část displeje u mobilních aplikací bývá věnována navigaci. Zobrazena je jako pruh,
ve kterém jsou přítomny nejdůležitější možnosti, jako např. „O aplikaci“, „Přidat“, „Najít“,
„Domů“, „Menu“ a především pak tlačítko „Zpět“. Pro tuto lištu je typické, že zůstává
na obrazovce i při procházení dokumentem, resp. scrolováním. Ve výjimečných případech se
tato lišta může nacházet i u dolního okraje displeje. Zafixování pevně na obrazovce je možné
dvěma způsoby. První způsob je pomocí JavaScriptu, který odchytává událost scrolování
a v závislosti na aktuální pozici scrolu dopočítá odsazení lišty. Tento způsob byl využíván
dříve, především na PC. S tímto řešením přichází problém neustálého dopočítávání pozice,
což zdržuje procesor a většinou je tak přechod neplynulý. Proto přišla s CSS možnost
zafixovat prvek na displeji pomocí position: fixed. Tlačítka je doporučeno v liště používat
maximálně dvě, jedno přichycené vlevo a druhé vpravo. Uprostřed je zobrazen krátký popisek
aktuální stránky.
Patička je podobného rázu, také je ji možné zafixovat, ovšem pouze pokud je třeba a jsou
na ní důležité informace. Styl může zůstat stejný jako u horní lišty a může být i změněn. Pro
barvu pozadí je dobré zvolit například přechod, umožňující vlastnost CSS3, a to gradient.
Dále je možné do patičky přidat tlačítko např. pro odkaz na další stránku dokumentu či
obecnou věc pro stránku, např. jméno autora, copyright apod.
Samotný obsah může být několika typů, přičemž je možné jej kombinovat. Jako první je
možné vložit seznam, který slouží např. jako navigace. V rámci jednoho seznamu jsou prvky
řazeny vertikálně a jsou opticky spojeny. Začátek a konec seznamu je nejčastěji zaoblen
vlastností border-radius. Co se barev týče, pozadí bývá defaultně šedé a ovládací prvky
modré, přičemž je toto samozřejmě možné změnit. Samotný textový obsah včetně nadpisů
bývá zobrazen standardně.
Hlavní rozdíl oproti desktopu je znát u formulářů. Aby měl uživatel pohodlnější možnost
vyplňování, je upraveno zobrazení jednotlivých tzv. tagů input. Pro standardní input
37
s textovým vstupem je využito možnosti „placeholder“. Ta, v případě, že je obsah inputu
nezadán, zobrazí náhradní text v zašedlé barvě, který uživateli říká, co do pole vyplnit. Pro
uživatele je tento způsob intuitivní a šetří místo na obrazovce. Stejným způsobem se může
chovat i textové pole textarea. Další viditelnou změnou je zaškrtávací políčko checkbox. To
je možné vykreslit standardním způsobem nebo jako vypínač. Ten má standardně dvě polohy
možné změnit tahem po displeji a vybrat mezi On a Off. Prvek radio neukazuje standardní
kroužky s možností vybrat jedno, nýbrž seznam možností se zvýrazněným vybraným prvkem
dané možnosti. Text je zobrazen v samotném seznamu. Poslední změnou je pole select. To
po kliku na prvek zobrazí výběr z možností na celém displeji. Následující obrázek (“Obrázek
6“) ukazuje některé možné prvky na displeji mobilního zařízení.
Obrázek 5 Standardní zobrazení obsahových prvků pro mobilní zařízení - Zdroj: Autor
Obrázek 6 - Standardní zobrazení formuláře pro mobilní zařízení – Zdroj: Autor
Krom těchto základních prvků je možné přidávat další libovolné prvky, jako např.
obrázky, animace, mapy atd. Každý framework přistupuje k tvorbě a k zobrazení lehce
odlišně, proto aplikace napsané v různých frameworcích budou různě náročné na tvorbu
a budou i nepatrně jinak vypadat na displeji.
38
V následujících podkapitolách popíši nejznámější a nejpoužívanější frameworky
od různých firem či organizací. Některé z nich jsou zcela volně ke stažení a některé jsou
podmíněny licenčními podmínky, např. pro užívání k nekomerčním účelům.
3.2 Framework jQuery Mobile
3.2.1 Stručně o možnostech frameworku
Framework jQuery Mobile je jeden z nejznámějších díky frameworku jQuery, který je
pomůckou při psaní JavaScriptových aplikací. Framework jQuery je určen pro veškeré
platformy a prohlížeče a odstraňuje tak nejednotnost ve standardech JavaScriptu napříč
prohlížeči. Ve stejném duchu je vytvořen i jQuery Mobile, tedy je určen pro veškeré
standardní prohlížeče a mobilní zařízení. V následující tabulce (“Tabulka 4“) je zobrazeno,
v jakých prohlížečích a na jakých OS je jQuery Mobile podporován.
39
Tabulka 4 - Podpora jQuery Mobile v mobilních prohlížečích - Zdroj: [Wikipedia, 2012p]
Platform
iOS
Symbian S60
Symbian UIQ
Symbian
Platform
Version
Nativ
e
4
5
v3.1.3,
v3.2
A
A
A
A
A
A
v4.0
v3.1,
v3.2
v5.0
v3.0,
v3.1
v3.2
C
A
A
C
C
B
C
B
C
C
A
C
A
1.1
*
C
C
C
C
B
B
A
C
A
v6.0
v1.5,
v1.6
v2.1
A
A
A
A
A
A
v2.2
A
A
v6.1
C
C
C
v6.5.1
C
C
C
v7.0
A
A
bada
1
A
Maemo
5
B
A*
0,
9
4
C
C
C
C
1.4.2001
Net
front
C
C
1.1*
1
C
C
MeeGo
1
0
Fennec Ozone
A
v4.5
v4.6,
BlackBerry OS v4.7
v5.0
webOS
8, 8,6 9,
5
5
5
Opera
Mini
B
A
Windows
Mobile
0,9
Opera Mobile
v2.2.1
v.3.0
Android
Phone
Gap
A
C
A
*
B
C
C
*
B
A
A
C
A
A
C
A
A*
C
A
B
A
*
C
B*
A*
U zelených políček s písmenkem A je podpora maximální. U nativních prohlížečů je
podpora téměř úplná. Jediný problém je u Windows Mobile resp. její verze 6.5 a nižších
a starších zařízení BlackBerry. Zde je problém právě s nepodporováním standardu HMTL5.
Pokud ovšem nad těmito OS zavřu oči, tak se jedná o zdařilý multiplatformní framework.
Co je hlavním plusem jQuery Mobile, je jeho zápis při vývoji stránky. Ačkoli je celý
framework napsaný v JavaScriptu stejně jako jeho výchozí framework jQuery, při psaní
aplikací je často vidět JavaScript kód jen minimálně. Veškerý zápis pro vytvoření layoutu je
40
zakomponován do atributů a elementů HTML5, které tento speciální zápis podporují. Jedná se
především atributy data-, které přišly jako nová možnost s HTML5. jQuery Mobile pak jen
tyto elementy označené data atributy přikreslí do mobilního zobrazení, popisovaném
v předchozí podkapitole.
3.2.2 Psaní aplikace v jQuery Mobile
Psaní aplikací v jQuery Mobile je opravdu velice jednoduché a rychlé. Během téměř pár
minut je možné napsat AJAXovou aplikaci, která vypadá jako nativní mobilní aplikace. To
značně zjednodušuje práci programátorovi, co se formalit týká. Není nutné psát složité styly
a JavaScriptové přechody, ale pouze HTML kód a jQuery Mobile zařídí zbytek. Přejdu tedy
k první jednoduché aplikaci a následně vysvětlím (Příklad 18).
Příklad 18 – Jednoduchá aplikace v jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Testovací aplikace</h1>
</div>
<div data-role="content">
Hello world
</div>
<div data-role="footer">
<a data-role="button" href="#home">Domů</a>
<a data-role="button" href="#about-us">O nás</a>
41
<a data-role="button" href="#about" datarel="dialog">O aplikaci</a>
<a data-role="button"
href="http://www.seznam.cz/">Seznam.cz</a>
</div>
</div>
<div data-role="page" id="about-us">
<h1>O nás</h1>
</div>
Stránka o nás
</div>
<div data-role="footer">
<a data-role="button" href="#home">Domů</a>
<a data-role="button" href="#about-us">O nás</a>
<a data-role="button" href="#about" datarel="dialog">O aplikaci</a>
</div>
</div>
<div data-role="page" id="about">
<h1>O aplikaci</h1>
</div>
Informace o aplikaci: verze 1.0.0
</div>
</div>
</body>
</html>
Začátek dokumentu je standardní pro HTML5. Následují metatagy, kde jako druhý
uvádím informaci o šířce stránky v závislosti na displeji a zakazuji přibližování. Tento řádek
není v této aplikaci důležitý, nicméně je dobré ho vkládat pro pozdější použití. V těle
42
dokumentu je první DIV element, který obsahuje klíčový atribut data-role s obsahem page.
Ten o tomto elementu říká jQuery Mobile, že se jedná o stránku. První element označený jako
data-role=“page“
je zobrazen v prohlížeči. Ostatní jsou ze začátku schované. Obsahem
tohoto elementu je daná stránka a vše co se na ní má zobrazit. Layout je rozdělený do tří
základních částí pomocí rolí, a to hlavička header, obsah content a patička footer, stejně
jako jsem zmínil v úvodní subkapitole. V hlavičce je vidět nadpis, který popisuje právě
zobrazovanou stránku. Dále je hlavička prázdná. V obsahu je nějaký text pro danou stránku
a v patičce je menu neboli navigace mezi stránkami.
Navigace je vytvořena výčtem odkazů, jejichž role je button. Na stránce jsou pak
zobrazena, jako tlačítka, kdy po kliknutí je přesměrováno na uvedenou stránku. Přesměrování
neprobíhá standardní způsobem. Pokud se jedná o odkaz na stejnou doménu, je stránka
z daného umístění načtena pomocí AJAX a zobrazena na stránce. Zde je vidět, jak jednoduše
je možné tvořit AJAX stránky pouze pomocí standardních odkazů. V uvedeném příkladu je
druhý způsob načítání odkazů a stránek, a to pomocí hashmarku (mřížky), za kterou uvedu id
požadované stránky. Pokud je v prohlížeči na tento odkaz kliknuto, je na stránce nalezen
element s odpovídajícím id a zobrazen jako aktuální stránka. Poslední nová věc je atribut
data-rel
v odkazu, který s hodnotou dialog namísto načtení do celé stránky otevře pouze
dialogové okno s danou stránkou. Všechny ostatní bloky stránky, role page jsou ve stejném
duchu. Obrazovky z uvedené stránky budou vypadat jako na obrázku (“Obrázek 7“).
43
Obrázek 7 - Stránka z příkladu pro jednoduchou jQuery Mobile aplikaci - Zdroj: Autor
K těmto novým možnostem, které framework nabízí, je samozřejmě možné přidávat
i původní možnosti HMTL5, připojovat vlastní CSS3 styly i vlastní JavaScript soubory.
Přechody mezi stránkami jsou standardně nastaveny na tzv. fade, neboli zmizení a zobrazení.
Je ovšem možné nastavit na kterýkoli jiný a na výběr je hned z deseti možností v následujícím
seznamu.









fade
pop
flip
turn
slidefade
slide
slideup
slidedown
none
Nastavení přechodu se inicializuje atributem data-transition v daném odkazu. Tyto
změny nemusí být pouze pro daný jeden prvek, ale je možné je nastavit i globálně, ovšem to
44
už je třeba psát i JavaScript kód. Objekt, který zprostředkovává komunikaci s jQuery Mobile
je v $.mobile.
Na následujícím příkladu (Příklad 19) jsou zobrazeny další možnosti frameworku. Nyní
už neuvádím hlavičku, ale pouze obsah těla dokumentu.
Příklad 19 - Složitější aplikace v jQuery Mobile
<div data-role="page" id="home">
</div>
<div>
<ul data-role="listview">
<li><a href="#prvni">První</a></li>
<li><a href="#druhy">Druhý</a></li>
<li><a href="#treti">Třetí</a></li>
<li><a href="#ctvrty">Čtvrtý</a></li>
</ul>
</div>
<div data-role="collapsible">
<h2>První</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
anim id est laborum.
proident, sunt in culpa qui officia deserunt mollit
</p>
</div>
<div data-role="controlgroup" data-mini="true" datatype="horizontal">
45
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Maybe</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<ul data-role="navbar">
<a data-role="button" data-icon="gear" href="index.html"
data-theme="c">Domů</a>
<a data-role="button" data-icon="delete"
href="index.html#about-us" data-transition="flip">O nás</a>
<a data-role="button" data-icon="check"
href="index.html#about" data-rel="dialog">O aplikaci</a>
</ul>
</div>
</div>
V příkladu přibyla nová role listview. V rámci ní je uvedený seznam zobrazován jako
vertikálně položené řádky. Do nich je v příkladu dosazen odkaz. Zajímavou rolí je také
collapsible.
Jelikož na displeji bývá dost málo místa, je dobré některé části stránky skrývat
a zobrazit je až po akci uživatele. V rámci collapsible je zobrazena pouze hlavička a zbytek
se zobrazí až po kliknutí na hlavičku. Tlačítka je možné shromažďovat do skupin, které pak
mají společné ohraničení pomocí role controlgroup. Tu lze nastavit na horizontální, či
vertikální při zobrazování. Zajímavou vlastností, kterou lze jednoduše ve frameworku
dosáhnout, je zafixování části stránky pevně na displeji. K tomuto slouží atribut dataposition=“fixed“,
který na příkladu fixuje patičku s menu aplikace. Zobrazení prvků
na displeji telefonu je vidět na následujícím obrázku (“Obrázek 8“). Poslední možností, která
je z příkladu patrná, je přidání ikony k tlačítku. To se provádí pomocí atributu data-icon
s názvem dané ikony. Tento název je možné vybrat ze seznamu, nebo v pokročilých funkcích
i stáhnout vlastní ikony a ty jako dodatečné.
46
Obrázek 8 - Stránka z příkladu pro jQuery Mobile aplikaci – Zdroj: Autor
Framework jQuery Mobile stejně jako samotné jQuery je velice silným nástrojem, který
velmi zjednoduší práci při psaní webových aplikací pro mobilní zařízení. Ve své verzi 1.1.0
Final si zabral významný kus internetu mezi mobilními stránkami. Jeho velkou výhodou je
právě zápis přímo do HTML kódu. Je to tedy rozšíření jak pro jQuery, tak pro HTML5
a neusměrňuje styl psaní aplikací a tím pádem ani neomezuje programátora. Na oficiálních
stránkách jQuery Mobile je k dispozici builder pro aplikaci. Jednoduše se natahají
požadované prvky do okna builderu a poté je možné kód stáhnout. Poslouží určitě dobře
k zjištění možností a k osvětě samotného frameworku.
jQuery Mobile obsahuje řadu dalších možností a speciálních funkcí, které jsou velice
dobře popsány na oficiálních stránkách jQuery Mobile, tedy ve zdroji [jQueryMobile, 2012].
47
3.3 Framework jQTouch
3.3.1 Úvod k Frameworku
Framework jQTouch vznikl původně pro telefony iPhone. Postupem času se ovšem
zaměřil na veškeré operační systémy. Stejně jako jQuery Mobile je i jQTouch postaven ne
frameworku jQuery a je třeba jej mít načtený společně s jQTouch. Knihovna jQuery je velice
robustní a obsahuje i některé nepotřebné věci, proto se jQTouch často načítá pouze s jeho
osekanou verzi s názvem Zepto. Styl, ve kterém je jQTouch vytvořen, je velice podobný
jQuery Mobile. Je to jakési rozšíření značkovacího jazyka HTML o nové funkce.
Zásadním rozdílem je, že jQTouch nevyužívá nové atributy data- přidané v HTML5, ale
již dlouho známé atributy pro označení třídy class. Tento způsob sebou nese jak výhody, tak
některé nevýhody. Elementy označované třídou jsou dobře zobrazeny i na starších verzích
prohlížeče a ten ani nemusí podporovat HTML5. Pokud je v prohlížeči vypnutý JavaScript, je
i tak stránka nějakým základním stylováním zobrazena. Zápis je často kratší, takže nenabývá
zbytečné množství textu, který se stává nepřehledným. Nevýhodou je ovšem možnost kolize
CSS stylů, protože názvy tříd se nijak od normálních neodlišují. Za cenu úspory místa je
používání tříd k těmto účelům méně intuitivní a chybí zde odlišování logických chování.
Aplikace v jQuery Mobile je zato s vypnutým JavaScriptem absolutně nepoužitelná.
Framework jQTouch oproti jQuery Mobile používá vlastní zápis JavaScriptu o poznání více.
Pro samotnou inicializaci je třeba napsat jeden řádek kódu, kterému je možné předat
rozšiřující nastavení.
3.3.2 Psaní aplikace v jQTouch
V následujících
příkladech
vytvořím
obdobnou
jednoduchou
aplikaci
jako
s frameworkem jQuery Mobile, ale s použitím jQTouch. Na tomto příkladu (Příklad 20)
budou patrné rozdíly jak v samotném kódu a jeho náročnosti, tak ve výsledném vzhledu
stránky. První jednoduchá stránka se sice zkrátila o pár řádků, ale přibyly některé další věci,
bez kterých bych k výsledku nedospěl.
Příklad 20 - Jednoduchá aplikace v jQTouch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, minimum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
48
<meta name="apple-mobile-web-status-bar-style" content="blacktranslucent" />
<style type="text/css" media="screen">
@import "./jqtouch/themes/css/jqtouch.css";
</style>
#jqt .leftButton {
position: relative;
}
</style>
<script src="./jqtouch/src/lib/zepto.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch/src/jqtouch.min.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jqt = new $.jQTouch({
icon : './img/logo.png',
addGlossToIcon : false,
startupScreen :
'./jqtouch/demos/ext_autotitles/jqt_startup.png',
statusBar : 'black'
});
</script>
</head>
<body>
<div class="current" id="home">
<div class="toolbar">
</div>
<div class="info">
Hello world
</div>
49
theme="c">Domů</a>
<a class="button leftButton" href="#home" data<a class="button leftButton" href="#about-us">O
nás</a>
<a class="button leftButton" href="#about" datarel="dialog">O aplikaci</a>
<a class="button leftButton"
href="http://www.seznam.cz/" rel="external">Seznam.cz</a>
</div>
</div>
<div class="page" id="about-us">
<h1>O nás</h1>
</div>
<div class="info" id="about-us-content">
Stránka o nás
</div>
theme="c">Domů</a>
<a class="button leftButton" href="#home" data<a class="button leftButton" href="#about-us">O
nás</a>
<a class="button leftButton slideup" href="#about"
data-rel="dialog">O aplikaci</a>
href="#seznam">Seznam</a>
</div>
</div>
<div class="page" id="about">
<a href="#" class="back close">X</a>
<h1>O aplikaci</h1>
</div>
<div class="info">
Informace o aplikaci: verze 1.0.0
</div>
</div>
50
</body>
</html>
Úvodní hlavička je stejná. K tomu byly přidány ještě 2 metatagy, které dávají informaci
pro iPhone jak zobrazit aplikaci, resp. jaký zobrazit posuvník. Dále je naimportován styl
a JavaScript jQTouch. Namísto standardního jQuery je načtena zkrácená verze Zepto. Po té
následuje JavaScript blok s inicializací jQTouch. V této inicializaci je přidána ikona, která se
zobrazuje např. v aplikacích telefonu, či v záložkách. startupScreen je obrazovka
zobrazovaná před načtením stránky a posledním parametrem je barva stavového řádku.
V těle stránky se změnilo pár věcí. Jak už jsem popisoval, celá aplikace je řízena pomocí
tříd. Elementy DIV v první úrovni jsou brány jako jednotlivé stránky. Aktuální stránka, která
se zobrazí při načtení, je označena třídou current. Id stránek jsem ponechal stejné. Součástí
stránky je namísto header element s třídou toolbar, který označuje hlavičku stránky. Obsah
hlavičky zůstává stejný. Obsah stránky jsem zabalil do elementu s třídou info, která pěkně
nastyluje obsah. Patička je označována stejně jako hlavička, a to třídou toolbar. Do patičky
jsou vloženy odkazy s třídou button, které z nich dělají tlačítka. Zde nastává první zásah
do frameworku, a to přepsání pozice třídy leftButton. Framework totiž nedovoluje vložit
do toolbar více jak 2 tlačítka, jedno vlevo a druhé vpravo. Ostatní stránky byly předělány
stejným způsobem. Ke stránce o aplikaci bylo pro jednoduchost přidáno tlačítko zpět třídou
back
s popiskem X, které je alternativou pro zavření dialogového okna. Výsledná stránka je
znázorněna na následujícím obrázku (“Obrázek 9“).
51
Obrázek 9 - Stránka z příkladu pro jednoduchou jQTouch aplikaci - Zdroj: Autor
Ačkoli v těle stránky bylo napsáno kódu o něco méně, stránka vypadá o něco lépe, než
v případě jQuery Mobile aplikace. Nicméně jQTouch nedovoluje takové možnosti a je třeba si
některé věci sám upravovat a dopisovat.
V druhém příkladu už je o něco složitější dopracovat se k výsledku. Na některé věci je
třeba vytvořit dodatečnou logiku v JavaScriptu. Do hlavičky HTML dokumentu předchozího
příkladu byl přidán následující kód (Příklad 21).
Příklad 21 - Složitější aplikace v jQTouch (hlavička)
#jqt .leftButton {
position: relative;
}
.groupButtonMy {
margin: 5px;
padding: 5px;
52
}
.buttonMy {
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
padding: 5px;
margin: 10px 0 10px 0;
background-color: #222222;
border-right: 1px solid #505050;
color: #888888;
text-decoration: none;
min-width: 30px;
display: block;
float: left;
}
.leftButtonMy {
border-left: 1px solid #EEEEEE;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-right: 1px solid #505050;
}
.rightButtonMy {
border-right: 1px solid #EEEEEE;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.collapsibleMy p').css('display', 'none');
$('.collapsibleMy *').first().click(function () {
var els = $('.collapsibleMy p');
if (els.css('display') == 'none') {
53
els.css('display', 'block');
} else {
els.css('display', 'none');
}
});
});
</script>
V CSS stylech je popis tlačítek, které jsou sloučeny do skupiny. Pro tlačítka jsou
definovány základní styly a pro okrajová tlačítka zaoblení okrajů pomocí border-radius.
Abych doplnil funkcionalitu, kterou poskytuje jQuery Mobile, přidal jsem krátký jQuery kód,
který se stará o zobrazování a skrývání textu pod titulkem, který jQuery Mobile označuje jako
callapsible.
Na první pohled je vidět, co všechno navíc jsem musel dodat ke standardu
jQTouch frameworku, abych dosáhl požadovaného cíle. Framework sice poskytuje řadu
dodatečných rozšíření, které dokáží některé nedostatky doplnit, nicméně je ztracen komfort
z jednoduchého psaní kódu. Do samotného těla jsem přidal následující kód (Příklad 22).
Příklad 22 - Složitější aplikace v jQTouch (tělo)
<div id="seznam">
</div>
<div>
<ul class="plastic scroll">
href="#prvni">První</a></li>
href="#druhy">Druhý</a></li>
href="#treti">Třetí</a></li>
<li class="forward"><a
<li class="arrow"><a
href="#ctvrty">Čtvrtý</a></li>
</ul>
<div class="collapsibleMy">
<h2>První</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
54
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure
dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<div class="groupButtonMy">
<a href="#" class="buttonMy
leftButtonMy">Yes</a>
<a href="#" class="buttonMy">No</a>
rightButtonMy">Maybe</a>
<a href="#" class="buttonMy
</div>
</div>
theme="c">Domů</a>
<a class="button leftButton" href="#home" data<a class="button leftButton flip" href="#about-
us">O nás</a>
<a class="button leftButton slideup"
href="#about">O aplikaci</a>
href="#seznam">Seznam</a>
</div>
</div>
Tento kód je velice podobný původnímu z jQuery Mobile. Víceméně byly pouze
zaměněny atributy data- za obyčejné třídy a lehce změněna pojmenování. Výsledné
zobrazení aplikace pak vypadá jako na následujícím obrázku (“Obrázek 10“). Některé prvky
jsou graficky lépe zpracované, některé nikoli, ovšem toto je už spíše otázka návrhu
a dodatečného stylování. Dokumentace k jednotlivým možnostem je k dispozici v balíku,
který je ke stažení společně se samotným frameworkem, a to včetně některých rozšíření,
zkušebních dem a dvou témat.
55
Obrázek 10 - Stránka z příkladu pro jQTouch aplikaci - Zdroj: Autor
Framework jQTouch byl dříve povedeným rozšířením pro jQuery a ulehčoval práci při
tvorbě aplikací do mobilů. V nynější době je ovšem lehce pozadu oproti svým konkurentům,
a jelikož doposud nepřišel se svojí finální verzí, nýbrž jen s beta 4, není velká naděje, že
na trhu dlouho zůstane, nehledě na to, že doposud plně nepodporuje tablety. Mínus pro tento
framework činí i velice strohá dokumentace ze strany výrobce, ale i ze strany komunity.
Jedním ze znaků jeho zániku je také spojení se společností Sencha, která jej buď vyzdvihne,
nebo připojí do svého dosavadního mobilního frameworku. Sencha totiž vyvíjí svůj vlastní
framework, který budu popisovat v následující subkapitole.
3.4 Framework Sencha Touch
3.4.1 Úvod do Sencha Touch
Framework Sencha Touch je oproti dvěma předchozím frameworkům zcela jiný. Přístup
k programování aplikace je pomocí JavaScriptu, nikoli pomocí značkovacího jazyka HTML5.
Ačkoli jej Sencha Touch plně využívá, veškerý kód samotné aplikace je umístěn v JavaScript
souborech, přičemž v souboru HTML je pouze skelet stránky a vložený script samotné
56
aplikace. Další zásadní rozdíl je, že Sencha Touch nepoužívá knihovnu jQuery, nýbrž svou
vlastní knihovnu s názvem Ext. V zásadě tato knihovna dokáže to samé jako jQuery a možná
ještě více.
Zatímco v jQuery a jQuery Mobile je velice snadné napsat jednoduchou aplikaci,
v Sencha Touch je to o něco těžší. Je to hlavně z důvodu jiné speciální syntaxe tohoto
frameworku. Krom zápisu kódu je ovšem Sencha Touch mnohem robustnější framework,
který obsahuje mnohem více funkcionalit a je možno pouze pomocí něho napsat ohromnou
webovou aplikaci se vším všudy. Sencha Touch má takové množství funkcionalit a nastavení,
že programátorovi téměř v ničem nebrání. Pomocí řady komponent je možné vytvořit rychle
elegantní aplikaci. Jeho robustnost je ovšem také vlastním problémem. Aby bylo možné
napsat tuto elegantní aplikaci, musí programátor framework dobře znát a umět s ním pracovat,
což bývá často problémem.
Pomocí frameworku, lze vytvářet jednoduché aplikace, které se konfigurují
v JavaScriptu, resp. JSON objektech, ovšem jeho podstata je někde jinde. Se základním
balíkem, který je na stránkách Sencha ke stažení, je k dispozici nejen knihovna pro tvorbu
komponent pro mobilní zobrazení, ale i celý framework, který má MVC19 přístup. Předchozí
vysvětlované frameworky slouží pouze jako pomocník při vypisování data na obrazovku
do speciálního iPhone Look&Field. Veškerou logiku je třeba zajistit na straně serveru a jedná
se tedy v zásadě o tenkého klienta. U Sencha Touch je tomu naopak. Ten se stará jak
o samotné vykreslování komponent, tak o logiku aplikace a ze serveru si pomocí AJAX
a podobných pouze stahuje potřebná data.
Sencha Touch sice funguje na většině nových zařízení a především na hlavních
produktech firem, nicméně zaměření je spíše na business aplikace. Tyto aplikace je totiž třeba
lépe propracovat a to tento framework nabízí v plné parádě.
3.4.2 Psaní JavaScript kódu v Sencha Touch
Jak už jsem zmínil, veškerý kód se pro tento framework přesune na stranu JavaScriptu.
V následujícím příkladu přetvořím jednoduchou aplikaci z předchozích subkapitol do tohoto
frameworku. Nejprve ukáži, jak se zkrátil kód v HTML dokumentu prakticky pouze na skelet
(Příklad 23).
Příklad 23 - Skelet HTML aplikace v Sencha Touch
<!DOCTYPE html>
19
MVC (Model, View, Controller) – je to návrhový vzor pro tvorbu aplikací, který odděluje vrstvu dat,
logiky a zobrazení.
57
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1" />
<title>Getting Started</title>
<link rel="stylesheet" href="senchatouch/resources/css/senchatouch.css" type="text/css">
<script type="text/javascript" src="senchatouch/builds/sencha-touchall-compat.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Jak je vidět, jediné co dělám je, že načítám samotný framework Sencha Touch s jeho
styly a následně soubor vlastní aplikace. Jelikož přístup k tvorbě je zásadně jiný, s příklady
aplikace půjdu trochu pomaleji. Nejprve vytvořím první uvítací obrazovku s panelem
v patičce a jednou ikonkou v souboru s aplikací app.js (Příklad 24).
Příklad 24 - Vytvoření aplikace v Sencha Touch
Ext.application({
name: 'Testovací aplikace sencha',
launch: function () {
Ext.create('Ext.tab.Panel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Domů',
iconCls: 'home',
html: 'Hello world'
}
]
})
}
58
});
První řádek slouží ke startu aplikace, následně je uveden název aplikace a ve vlastnosti
launch
je funkce, která se spustí při startu aplikace. Uvnitř této funkce se již vytváří první
komponenta a tou je tab panel. Jedná se vlastně o toolbar, který je pomocí vlastnosti
tabBarPosition
ukotven na spodek obrazovky. Je nastaveno, že se jedná o celoobrazovkový
režim a pomocí items, která je klíčovou vlastností většiny komponent, je nastavena první
položka v toolbaru. Zde je uveden popisek, třída pro nastavení ikony a HTML kód
zobrazovaný pod touto položkou. V dalším příkladu (Příklad 25) je již kód rozšířen o zbytek
funkcionality, který stránka z předchozích příkladů nabízela.
Příklad 25 - Složitější aplikace v Sencha Touch
var storeList = Ext.create('Ext.data.Store', {
data: [
{val:'První'},
{val:'Druhý'},
{val:'Třetí'},
{val:'Čtvrtý'}
]
});
var button = Ext.create('Ext.Button', {
text: 'První',
id: 'firstButton',
docked: 'bottom'
});
Ext.application({
name : 'TestAppSecha',
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch : function() {
Ext.create('Ext.tab.Panel', {
fullscreen : true,
tabBarPosition : 'bottom',
items : [{
title : 'Domů',
59
iconCls : 'home',
xtype: 'container',
fullScreen: true,
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Testovací aplikace'
}, {
xtype: 'viewport',
html : 'Hello world'
}]
}, {
title : 'O nás',
iconCls : 'user',
xtype: 'container',
fullScreen: true,
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'O nás'
}, {
xtype: 'viewport',
html : 'Stránka o nás'
}]
}, {
title : 'O aplikaci',
iconCls : 'info',
listeners: {
painted: function () {
Ext.Msg.alert('Dialog o apliakci',
'Informace o aplikaci: verze 1.0.0', function () {});
}
60
}
}, {
title : 'Seznam',
iconCls : 'more',
title: 'Seznam',
xtype : 'list',
fullScreen: true,
itemTpl: '<div>{val}</div>',
store: storeList,
ui: 'round',
pinHeaders: false,
onItemDisclosure: function (record, btn, index) {
na '+record, function () {});
Ext.Msg.alert('Dialog seznamu', 'Kliknuto
},
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Seznam'
}, button]
}]
})
}
});
Ext.create('Ext.Panel', {
html: 'Lorem ipsum dolor sit amet.',
left: 10,
padding: 20
}).showBy(button);
Je vidět, že kód je značně delší než u předchozích frameworků a docela nepřehledný. Co
se týče výsledného zobrazení, dá se říci, že je o něco elegantnější. Výsledné zobrazení je
možné vidět na následujícím obrázku (“Obrázek 11“).
61
Obrázek 11 - Zobrazení jednoduché Sencha Touch 2 aplikace - Zdroj: Autor
Ačkoli je framework značně složitější, je možné s ním dělat divy, o kterých je možné si
nechat v jQuery Mobile zatím jen zdát. Sencha Touch je velice silný nástroj a ve své verzi 2,
která je nyní jedním z hlavních produktů Sencha, dokáže nejen dokonalé zobrazení
na mobilních telefonech, ale i na tabletech s využitím veškerých jeho nových možností jako
jsou dialogy, postranní lišty apod. Sencha Touch obsahuje nespočet možností, komponentů,
událostí, rozšíření atd., které jsou podrobně popsané včetně příkladů, jsou součástí balíku
frameworku, který je ke stažení na oficiálních stránkách Sencha.
3.5 Shrnutí frameworků
Před tím, než se začne vytvářet webová aplikace, je třeba se rozhodnout, jak se bude psát,
jakými prostředky a tedy v jakém Frameworku, pokud vůbec v nějakém. Důležitý pro
rozhodnutí je určitě charakter projektu. Pro malé jednoduché aplikace a webové prezentace
jistě poslouží použití frameworku jQTouch stejně jako jQuery Mobile. Oba jsou v zásadě
jednoduché a vytvoří aplikaci s jistými standardy, které se do mobilních aplikací mezi
uživateli vžily. Není poté třeba přemýšlet nad složitým layoutem aplikace, aby byla pro
62
uživatele přívětivá a přátelská. Využije se tak „best-practices“, které do frameworku tvůrce
přidal.
Pokud se jedná o aplikaci ve stylu ad-hoc (tedy jednorázovou aplikaci) nebo podobně
malou aplikaci, je možné framework úplně vynechat. Tyto aplikace často vyžadují rychlost
načtení a používání a je třeba přihlédnout i na velikost souboru frameworku, která se
pohybuje v řádu kilobajtů, což může být v takovémto případě zbytečnou přítěží při stahování
aplikace. Frameworky také využívají složité selektování v DOM struktuře a složitější logiku,
která také může zbytečně zpomalovat zařízení. V takovém případě se v aplikaci použijí jen
takové funkce, které aplikace potřebuje v rámci standardního HTML5, CSS3 a JavaScriptu.
Pokud se jedná o aplikaci větší, která má obsahovat složitou funkcionalitu, je dobré se
držet kvalitního zázemí, a to např. frameworku Sencha Touch. U frameworku je z jeho strany
zajištěna aktualizace s novými standardy, kompatibilita s určenými zařízeními a opravování
chyb frameworku. Pro stranu tvůrce aplikace pak framework zajišťuje kvalitní zázemí pro
aplikaci, které může mít nadstandardní možnosti. Sencha Touch, ale i jQuery Mobile
podporují řadu funkcí, jako práce s Google mapy, s geolokací, s dotykovým displejem a další.
Tato podpora pak zvyšuje konkurenceschopnost aplikace.
Frameworky jsou často chráněny licenčními podmínkami a oficiálními licencemi, které
pro tvůrce mohou činit také problém. Ačkoli je většina z nich pod licencí OpenSource, je
někdy potřeba do kódu zasáhnout či ho rozšířit a aplikace pak musí být přístupná např. pod
stejnou licencí, a to může být u komerčních aplikací problém. Každopádně je třeba si před
tvorbou aplikace tyto informace zjistit a vyřešit. Sencha Touch např. nabízí svůj framework
také pod komerční licencí, která je sice placená, ale není třeba se o tento problém dále starat.
63
4 Nativní aplikace
4.1 Možnosti tvorby nativních aplikací
Moje práce směřuje hlavně k webovému vývoji, nicméně ten se v posledních letech
velice přiblížil vývoji nativnímu, a to jak možnostmi, které nabízí, tak vzhledem a způsobem
vývoje. Proto v této subkapitole zmíním, jakými způsoby se dají aplikace pro telefon dále
vyvíjet a lehké porovnání s nimi oproti aplikacím webovým. Krom toho, že se aplikace stávají
podobnými, vznikají i střední cesty, které propojují oba světy aplikací. Jedná se o vývoj
nativních aplikací pomocí technologií, navržených pro vývoj webu, kde průkopník tohoto
světa je PhoneGap. V současné době se do této sféry začíná připojovat i Microsoft
na zařízeních s OS Windows Phone 7. Podrobněji o PhoneGap bude psáno v následující
podkapitole.
4.1.1 Android aplikace
Nativní aplikace se pro zařízení s operačním systémem Android programují v jazyce
Java. Ten má s původním jazykem Java od společnosti Oracle pouze stejnou syntaxi
a konvence. Ve skutečnosti aplikace běží ve virtuálním stroji Dalvik, nikoli v Java VM. Do
byte kódu tohoto stroje se kompiluje kód napsaný v Javě, která je rozšířena o knihovny
Androidu. Tento způsob vytvořila společnost Google pro zrychlení běhu aplikací a celkovou
optimalizaci výkonu. Pro vývoj nativních aplikací pro Android hraje možnost vytvářet
aplikace na kterékoli desktopové platformě pomocí Android SDK a rozšíření pro editor
Eclipse, či některé další editory [Šrajer, 2011].
Na rozdíl od ostatních operačních systémů je možné Android emulovat na desktopovém
operačním systému včetně všech jeho funkcí. Emulátor spustí zařízení přímo v operačním
systému a je možné na něm dělat veškeré operace jako na opravdovém zařízení. K tomu je
možné simulovat různé vstupy, jako je příchozí hovor, příchozí SMS, GPS pozici, ale
dokonce i GPS pohyb. Pro zprovoznění vývojového prostředí pro Android aplikace je třeba
nainstalovat pouze již zmíněný Android SDK, ke kterému jsou dostupné aktualizace
aktuálních verzí Android. Pro spuštění emulátoru je možné nakonfigurovat různé parametry
přístroje dle vlastní libosti a potřeby.
Aplikace jsou po dokončení vývoje publikovány na Android Market, kam je může nahrát
každý registrovaný vývojář. Tyto aplikace neprocházejí žádnou kontrolou a je možné nahrát
tak kteroukoli aplikaci bez ohledu na její funkčnost. Google se svým obchodem vytvořil
volný trh s aplikacemi, které posoudí trh sám a vyzdvihne pouze ty kvalitní a oblíbené.
64
4.1.2 iPhone aplikace
Aplikace pro operační systém iOS jsou vyvíjeny v jazyce ObjectiveC, který je rozšířením
klasického jazyka C o knihovny, podporující mobilní periferie a další možnosti. Společnost
Apple dlouhou dobu neumožňovala vývoj v jiném editoru než xCode od stejné společnosti.
Tento nástroj je ovšem možné spustit pouze na desktopovém Mac OS, což bylo pro vývojáře
značnou přítěží. V posledních verzích SDK ovšem Apple umožnil vývoj i na jiných
operačních systémech a v jiných editorech, čehož se ihned chytly editory Flash CS5.5,
Appcelerator Titanium a další.
Co se týče ladění aplikací, probíhá na rozdíl od Androidu v simulátoru, který nedokáže
přesně zobrazit dané zařízení, ale pouze jej simulovat. To lehce znepříjemňuje ladění, ale pro
běžné aplikace vystačí. Tato platforma je uzavřený software a to jej činí výjimečným a nese to
své výhody i nevýhody. Aplikace jsou kontrolovány společností Apple, ale jsou pak zase
kvalitnější. iPhone resp. Apple je v této sféře jednoznačným průkopníkem a veškeré novinky
do mobilních zařízení přinesl právě on. Ačkoli ho zdatně Android dohání, je pravděpodobné,
že trh povede stále Apple se svými novinkami.
4.1.3 Ostatní aplikace
Pro ostatní operační systémy se většinou vyvíjí v jazyce C++, upraveném pro mobilní
zobrazení nebo v jazyce Java (J2ME) také pro mobilní zařízení a pro Windows Phone 7 se
vyvíjí v .NET. Nativní aplikace dobily svět a většina z nich je určena pro Android a iPhone.
Pokud aplikace není podporována v dalších zařízeních, není to většinou znatelný problém.
Tato ostatní zařízení se systémy Symbian, Bada, WebOS apod. se ovšem stále vyskytují a je
dobré podporovat i ta, pokud je to možné. S řešením přišly tzv. wrapery, neboli obálky pro
webové aplikace. Webové aplikace totiž dokáží téměř to samé, co standardní nativní aplikace
a pokud ne, wrapery jim pomohou, aby to dokázaly. Budoucnost vývoje pro mobilní zařízení
je určitě touto technologií ovlivněna a nejlépe má zatím našlápnuto PhoneGap, který je
předmětem následující kapitoly.
4.2 PhoneGap
Jeden z nejúspěšnějších wraperů je právě PhoneGap. Jedná se o jakousi aplikaci, do které je
vložen webový kód včetně HTML5, CSS3 a JavaScriptu a zabalen do balíčku, určeného pro
jakýkoliv operační systém. Často je tento wraper rozšířen o možnost přemosťovat některé
funkcionality, které webové stránky samy o sobě nezvládnou. PhoneGap dokáže přemostit
některé z nich. Podrobnější informace o podpoře periferií na PhoneGap jsou uvedeny
v kapitole 2.3.2, v tabulce (“Tabulka 1“).
PhoneGap nabízí ke stažení na svých stránkách SDK, pomocí kterého se tvoří projekty
k aplikacím. Každý projekt má své speciální umístění složek, ve kterých se tvoří nativní
65
aplikace pro různá zařízení. V současné době PhoneGap ve verzi 1.6 podporuje tvorbu
aplikací pro operační systémy iOS, Android, Symbian, Windows Phone 7, Bada, WebOS,
BlackBerry. Každý systém podporuje jiné rozpětí funkcionalit. Podrobný přehled je možné
získat ve zdroji [PhoneGap, 2012b]. Jedním z problémů webových aplikací je nemožnost je
zveřejňovat v Application Marketech. Běžně tyto obchody totiž dokáží zveřejňovat a prodávat
pouze nativní aplikace pro danou platformu. Pokud je webová aplikace zabalena
do PhoneGap, nic nebrání ji uplatnit na těchto obchodech.
4.2.1 Instalace a konfigurace
Pro zprovoznění PhoneGap je na oficiálních stránkách k dispozici velice užitečný
manuál, který provádí nastavením pro všechny podporované platformy. V mé práci
se zabývám převážně systémem Android a ostatními pouze okrajově. Pro systém Android je
tedy třeba stáhnout a nainstalovat Eclipse Classic. Vývojovým prostředím bude lehce
věnována následující podkapitola. Dále je třeba stáhnout a nainstalovat Android SDK. Ten
umožní emulovat zařízení Android. Poté už stačí jen nainstalovat pluginy do Eclipse.
Po nainstalování je již možné vytvořit nový projekt Android. Ten vytvoří potřebnou
strukturu složek pro PhoneGap. V archivu PhoneGap, který je ke stažení na oficiálních
stránkách, je k dispozici příklad projektu pro každou platformu. Struktura složek je rozdílná,
protože za každým OS stojí jiná technologie. U Androidu je to Dalvik, tedy pro zjednodušení
Java. Ve stejném archivu je k dispozici i kompletní API pro dodatečné možnosti PhoneGap
pro JavaScript. Klíčový propojovací soubor pro rozšíření o možnosti PhoneGap se jmenuje
cordova-1.x.x.js, a k němu stejnojmenný soubor JAR pro Java prostředí. Konfigurace jsou
pomocí XML souborů, přičemž je potřeba tuto složku překopírovat z příkladového projektu
a nastavit. Drobné úpravy, a to především pro nastavení hlavní složky HTML projektu, je
třeba nastavit v loadovacím Java souboru. Veškeré informace o instalování a konfiguraci jsou
krok po kroku na oficiálních stránkách PhoneGap. Kompilaci do výsledné nativní aplikace je
možné provádět buď přímo v Eclipse, a to jak do emulátoru, tak do reálného zařízení. Druhý
způsob kompilace a spuštění je pomocí příkazové řádky a příkazů android update project
–p ./, adb devices, emulator $android_web_apps, ant debug install.
Pro správné
používání v příkazové řádce je třeba stáhnout a dát do proměnného prostředí Path aplikace
Apache ANT.
4.2.2 Dodatečné možnosti
Po spuštění a nainstalování se v zařízení objeví ikona aplikace, kterou lze spustit. Pro
samotný webový projekt je nejdůležitější JavaScript cordova, který je třeba připojit ke svým
stránkám. Díky němu je možné přemosťovat periferie telefonu do JavaScriptu. Klíčovými
66
možnostmi, které PhoneGap nabízí ve své knihovně, je akcelerometr, fotoaparát a přístup
do galerie, oznámení tónem či vibrací a některé další.
Pro přístup k akcelerometru je využíváno stejného principu jako u získávání dat z GPS.
V systémovém objektu navigator.accelerometer se po připojení cordova.js objeví nové
možnosti a metody. Hlavní metoda je watchAcceleration, které je předán callback funkce
pro zpracování dat, callback funkce pro chybu a dodatečná nastavení. Metoda vrací instanci
časovače, kterou je možné pomocí metody clearWatch zrušit. Callback funkci je předán
objekt, obsahující 3 vlastnosti, a to souřadnice naklopení (x, y, z). V nastavení je předávána
především hodnota frekvence volání callback funkce s novými daty, a to ve vlastnosti
frequency.
Ačkoli akcelerometr je senzor zjišťující zrychlení přístroje, je v drtivé většině
využíván jako senzor naklopení telefonu v prostoru.
Pomocí PhoneGap knihovny je možné nejen přistupovat k fotoaparátu a vytvářet nové
fotky, ale je umožněn i přístup k již vyfoceným obrázkům v galerii. V umístění
navigator.camera
přibyl nový objekt, na kterém po zavolání metody getPicture telefon
otevře rozhraní pro focení. Po vyfocení obrázku se zavolá první callback funkce. Při
nezdaření focení se zavolá druhá callback funkce. Poslední parametr určuje nastavení, a to
především kvalitu výsledného obrázku v procentech ve vlastnosti quality. První callback
funkci je standardně předána proměnná s daty v binárním tvaru. Tento obrázek je možné
vykreslit na stránce pomocí vložení dat do atributu SRC v tagu IMG, a to s prefixem pro
dekódování dat “data:image/jpeg;base64,“. V nastavení metody je možné nechat si vrátit
ne data, nýbrž absolutní cestu k obrázku na disku telefonu (URL, či URI) pomocí vlastnosti
destinationType
(požadované konstanty jsou Camera.DestinationType.FILE_URI,
Camera.DestinationType.FILE_URL).
Pokud
se
vlastnost
Defaultně je nastaveno focení pomocí fotoaparátu.
sourceType
Camera.PictureSourceType.PHOTOLIBRARY,
nastaví
na konstantu
je uživateli nabídnuto z galerie obrázků
namísto fotoaparátu.
Někdy je třeba uživatele aplikace upozornit o nějakém stavu. Zvlášť, když se jedná
o aplikaci běžící na pozadí. K tomuto účelu zde vznikl objekt navigator.notification se
dvěma metodami. První je beep, které je předán počet pípnutí. Další metoda je vibrate, které
je předán čas délky vibrace v milisekundách. Jednoduchou aplikaci zabalím do PhoneGap pro
Android v závěrečných příkladech.
4.3 Vývojová prostředí a simulátory
Pro vývoj webových aplikací je možné použít i úplně standardní editor jako třeba
notepad. Kód totiž není třeba kompilovat a o zpracování se postará sám webový prohlížeč.
67
Součástí vývoje je i samotný webový prohlížeč. Většinu vlastností a možností je možné
testovat přímo v desktopovém prohlížeči. Prohlížeč Google chrome je ideální náhražkou pro
mobilní prohlížeč Android zařízení. Stejné zastoupení dokáže i prohlížeč Safari pro desktop
jako vývojové prostředí pro iOS aplikace. Univerzální prohlížeč Opera má taktéž podobné
zobrazení na desktopu a na jeho mobilních verzích.
4.3.1 Simulátory a Emulátory
Jednoduché webové aplikace lze tedy plnohodnotně ladit na desktopu. Pro složitější
aplikace mohou být standardní desktopové prohlížeče problémem při vývoji. Jedná se
především o aplikace s rozšířeným dotykovým ovládáním, GPS aplikace apod. K těmto
účelům existují Simulátory nebo lépe Emulátory. Pomocí simulátorů je možné nasimulovat
chod aplikace jako v reálném zařízení. To ovšem ne vždy odpovídá realitě a existují zde další
problémy se simulací dalších periferií apod. Simulátory se především používají pro vývoj
nativních aplikací.
Emulátor se navenek chová téměř identicky jako Simulátor. Rozdíl je ovšem ve stylu
načtení aplikace. Pomocí emulátoru se ve virtuálním počítači (telefonu) naemuluje a spustí
plnohodnotný Operační systém jako třeba Android. Ten má oproti standardním operačním
systémům v telefonech pouze pár úprav, poskytujících simulace čidel a periferií. Společnost
Google dohnala emulaci k dokonalosti a je možné spustit více různých emulovaných zařízení
najednou a dokonce si mezi jednotlivými volat, posílat zprávy, simulovat GPS pozici i pohyb
apod. Na tomto emulátoru jdou instalovat veškeré Android aplikace včetně aplikací ve
wraperech jako PhoneGap. Pro webové aplikace je ovšem nejdůležitější mít nainstalovaný
webový prohlížeč a aplikace spouštět v něm.
Pro Android je k dispozici emulátor volně ke stažení společně s celým Android SDK.
V tomto nástroji je možné stáhnout veškeré dostupné verze Android od verze 1.0 až
po současnou 4.0. Před spuštěním emulátoru je třeba si vytvořit zařízení a nakonfigurovat jej.
Nejdůležitější informace o zařízení jsou: rozměry displeje, verze operačního systému,
podporované periferie a další. Po vytvoření emulátoru je možné jej spustit, což trvá necelou
minutu až několik minut. Tato doba se výrazně neliší od doby zapnutí reálného přístroje.
V emulátoru je možné využívat klávesnici a funkční tlačítka a pomocí myši simulovat dotyky
prstu na displeji.
4.3.2 PhoneGap
Přímo od tvůrce PhoneGap je doporučováno pro jeho projekty využívat editor Eclipse.
Pro něj je k dispozici rozšíření o tvorbu projektu PhoneGap Android. S tímto rozšířením
v editoru se zjednodušuje ladění aplikace a oprošťuje se od příkazové řádky. Jak už bylo
68
popsáno, většina webových aplikací je možné ladit ve standardním desktopovém prohlížeči.
Pro složitější aplikace je třeba využít SDK Android a jeho emulátor, který lze v editoru přímo
spustit pro otevřený projekt. Eclipse zvládne našeptávání a některé další možnosti, které jde
rozšířit o nespočet pluginů.
4.3.3 Appcelerator Titanium
Editor Appcelerator Titanium studio je velice silným nástrojem právě při tvorbě
mobilních aplikací. Již v základní verzi je možné vytvářet projekty jak pro desktop, tak pro
mobil. Projekt je vytvořen se základní strukturou složek, potřebnou pro správný chod
aplikace. Je možné připojit k editoru různá SDK pro různá zařízení, jako je Android, iPhone,
BlackBerry apod. Při spouštění aplikace z editoru je nabídnuto, v jakém zařízení se má
aplikace spustit. Na výběr jsou jak zmíněná SDK, tak veškeré nainstalované internetové
prohlížeče. Aplikace může být kromě klasického spuštění spuštěna i v debug režimu. Editor je
spojen s konzolí a je možné v něm využívat sadu kvalitních a užitečných nástrojů. Kromě
mobilního webu dokáže editor vytvářet i projekty serverové jako PHP, Ruby apod. a je v něm
možné psát i plně nativní aplikace.
69
5 Praktická ukázka aplikace
Pro příklad jsem se rozhodl vytvořit aplikaci pro osobní hotovostní účetnictví. Aplikací
je možné zadávat nové položky, a to Platbu, Výběr z bankomatu, Dluh, Půjčení hotovosti
a Příjem. Dále je možné si prohlížet veškeré uložené informace v různých sestavách. Při
přidávání položky je zadána částka, datum a čas, umístění a popřípadě poznámka a osoba,
které se položka týká. Osobu je možné buď vytvořit novou zadáním jejího jména, nebo vybrat
ze seznamu již uložených osob. Umístění je defaultně nastaveno na aktuální pozici GPS. Je
možné pozici změnit na některou ze seznamu uložených míst nebo vybrat z mapy. Mezi
sestavami je možné nalézt seznam bankomatů včetně jeho statistiky a možnosti zobrazení
na mapě. Dále je k dispozici seznam míst, také zobrazitelný na mapě, a seznam osob
s informacemi o dluzích.
Předtím, než jsem začal programovat samotnou aplikaci, rozmyslel jsem si její funkčnost
a následně nakreslil tzv. mockupy. Ty ukazují veškerou funkcionalitu, kterou aplikace bude
nabízet. Jedná se o předpokládaný vzhled obrazovek aplikace. Pro tvorbu mockupů existují
různé softwarové aplikace. Já sem si ovšem vystačil jen s tužkou a papírem. Návrh
nakreslených mockupů je vidět na obrázku (“Obrázek 12“).
70
Obrázek 12 - Návrh aplikace pomocí mockup (tužkou na papíru) – Zdroj: Autor
V aplikaci jsou využívány některé možnosti, které jsem v teoretické části práce popsal.
Jedná se o GPS lokalizace, WEB SQL databáze, Dotykové události, jQuery Mobile,
Application Cache, Google Maps Mobile a pro PhoneGap je možné rozšířit ještě o některé
71
další jako Kontakty, SMS, volání apod. Celá stylizace aplikace je vytvořena pomocí
frameworku jQuery Mobile. Kompletní logika je napsána v JavaScriptu s pomocí knihovny
jQuery. Další knihovnou, která je připojená, jsou zmíněné Google Mapy. Na serverové straně
je pouze zajištěno, aby se soubor s příponou „.manifest“ posílal se správným MIME typem.
Aplikace využívá možnosti cachování a tedy kromě map je možné k aplikaci přistupovat
i bez připojení k internetu. Funkční běžící aplikaci je možné vyzkoušet na stránkách
http://myaccount.avantcore.cz
[Žabka,
2012b].
Ke
stažení
http://zabka.avantcore.cz/userfiles/downloads/myaccount-1.0.1.zip
je
pak
[Žabka,
na adrese
2012c].
Kompletní kód aplikace je přiložen jako příloha v poslední kapitole Přílohy. Oproti
navrhovanému vzhledu se aplikace lehce změnila, nicméně k dispozici je veškerá navrhovaná
funkcionalita. Na následujícím obrázku (“Obrázek 13“) jsou vidět skutečné obrazovky hotové
aplikace.
72
Obrázek 13 - Obrazovky hotové příkladové aplikace – Zdroj: Autor
73
5.1 Nativní aplikace pro Android
Příklad nativní aplikace bude pouhé obalení mé webové aplikace do wraperu PhoneGap.
Není nutné tak nic dodatečně programovat. Veškerá funkcionalita funkční ve webovém
prohlížeči by měla fungovat v nativní aplikaci a naopak. Jediné, co je tedy třeba pro vytvoření
nativní aplikace, je správně nakonfigurovat prostředí SDK a samotný projekt aplikace.
K vytvoření je třeba mít nainstalovaný již zmíněný Android SDK, dále pak stažený
PhoneGap projekt a server Apache ANT. Poté, co je vše nainstalováno, je třeba zkopírovat
příklad projektu PhoneGap, který má správnou strukturu složek a souborů. Veškeré
konfigurační soubory je možné nastavovat, přičemž většina z nich je v XML formátu. Jediný
konfigurační soubor by měl v příkladovém projektu chybět a to je local.properties. Tento
soubor je možné vytvořit příkazem android update project –p ./. Do složky asset/www
je třeba nakopírovat zvolenou webovou aplikaci. Spuštění emulátoru se provádí příkazem
emulator @nazev_zařízení
nebo je možné spustit přímo v AVD Manager. Posledním
krokem je nainstalování aplikace do zvoleného zařízení příkazem ant debug install.
Aplikaci je nyní možné nahrát rovnou na Android Market. Jedinou barierou je vstupní
registrační poplatek vývojáře, který činí $20. Tvorba aplikací pomocí PhoneGap je velice
jednoduchá a nemusí se poté starat o kompatibilitu na různých platformách. PhoneGap dobře
zvládá aplikace na všech podporovaných operačních systémech s drobnými rozdílnostmi.
Vytváření nativní aplikace pro různé OS je zdokumentováno na oficiálních stránkách
PhoneGap. Na následujícím obrázku (“Obrázek 14“) je vidět příkladová webová aplikace,
spuštěná pomocí PhoneGap jako nativní aplikace. Hotový instalační balíček aplikace je ke
stažení na adrese http://zabka.avantcore.cz/userfiles/downloads/myaccount-1.0.1.apk [Žabka,
2012a].
74
Obrázek 14 - Screenshot nativní aplikace v Android zařízení - Zdroj: Autor
5.2 Zhodnocení aplikací
Vytvořená webová aplikace a postup při vývoji je jednoduchým příkladem vývoje
moderních mobilních aplikací. Využívá standardy uvedené v teoretické části práce,
a poskytuje uživateli některé nadstandardní možnosti, které klasické desktopové webové
aplikace nemají. Využívání GPS modulu je v této aplikaci velkou předností. Dále se uplatnilo
i využívání WEB SQL databáze, která udržuje data přímo na přístroji, stejně jako použitá
cache. Aplikace ovšem nijak nekomunikuje se serverem, který by mohl synchronizovat
uživatelská data. To je ovšem už dalším krokem, který se ne úplně týká právě mobilních
zařízení.
Pokud se využije wraperu PhoneGap, je možno aplikaci distribuovat na internetových
obchodech, což může být výhodou. Výhodou ale může být i distribuce přímo pomocí
internetu a webového prohlížeče. Záleží pak už spíše na charakteru projektu.
75
6 Závěr
Webové aplikace jsou v současné době nejvíce se rozvíjejícím odvětvím v oblasti IT
a stejně tomu je i v oblasti mobilních telefonů a přenosných zařízení. Oproti běžnému vývoji
se mobilní vývoj v některých věcech značně liší a moje práce ukazuje, jaké jsou hlavní
rozdílnosti. Mobilní web je často dokonce graficky lépe zpracovaný a využívá možnosti, které
klasický web nemá. Samozřejmě z obou stran je znát vývoj, ale zaměření trhu na mobilní
zařízení je zřejmé.
Mobilní vývoj se dělí na dvě odvětví a tou je webový vývoj a nativní vývoj. Obě odvětví
se na trhu drží zdatně. U některých aplikací není možné nahradit alternativou v druhém
odvětví, nicméně je znát postupné propojování obou odvětví, ať je to závislost nativních
aplikací na internetu nebo vytváření nativních aplikací pomocí webových technologií
HTML5, CSS3 apod. Každopádně se obě dvě varianty mohou těšit z velkého zisku.
Vývoj mobilních aplikací se nedělí pouze na způsob vývoje, ale také na zařízení, pro
která je vyvíjen. Ty nejvýznamnější hráči na trhu jsou iPhone a Android a obě dvě platformy
jsou plně podporované ze strany vývoje, ale i plně využívané ze strany uživatelů. Aplikace by
se měly přizpůsobovat standardům, které tito velikáni se svými zařízeními přináší.
Aby byl vývoj aplikací efektivní, je třeba si jej zjednodušovat. K tomu je dobré využívat
některý z řady frameworků, které jsou vytvářeny jak komunitou, tak profesionálními firmami.
Frameworky mají řadu odlišností, nicméně všechny vedou ke společnému cíli, a tím je
kvalitní aplikace v rámci časových a finančních prostředků. Stejně jako u výrobců zařízení
i u frameworků existují leadeři, a to jsou jQuery Mobile a Sencha Touch. Nezáleží na tom,
jaký z nich se při vývoji zvolí, ale spíše proč se ten jistý zvolí.
6.1 Dosažené cíle a výsledky
Z hlediska stanovených cílů si myslím bylo všeho dosaženo. Programátorům
a vývojářům práce pomůže zorientovat se v novém světě mobilního prostředí a dá jim
základní znalosti o technologiích. Zároveň práce ukazuje, co všechno je programátor schopen
vytvářet. Pro návrháře aplikací se rozšíří obzory v možnostech a trendech, které uživatelé
vytvářejí a vyžadují. Programátoři ke své práci potřebují vývojová prostředí a ladící pomůcky,
o kterých bylo stručně zmíněno v jedné kapitole. V závěru práce je popsána vytvořená
aplikace, která slouží jako příklad pro vývojáře, jak se mohou aplikace tvořit. Kromě
webového vývoje, který je předmětem práce, je zmíněn i vývoj nativní a vytvořena
jednoduchá aplikace.
76
Ačkoli je text podložen literaturou a různými webovými zdroji, práce je ovlivněna mou
vlastní zkušeností s webovým vývojem. Tato zkušenost je asi zásadním přínosem práce, krom
zdokumentování dosud nepopsaného problému v českém prostředí.
6.2 Budoucí zpracování
Téma mobilního vývoje je velice stroze zdokumentované odvětví. Proto je zde velice
široká možnost navázání na tuto práci. První možnost je zaměření na nativní aplikace a jejich
vývoj pro různé platformy a především Android a iPhone. Kromě těchto dvou je ovšem stále
více vidět i Windows s produktem Phone 7, který má zajímavé nové možnosti tvorby
nativních aplikací. Tyto technologie jsou zatím ještě v zárodku, ale i tak se dostaly z útrob
firmy Microsoft ven na svět.
Jedna z kapitol této práce nese název Tablety jako zlatá střední cesta. Popisuji pouze
existenci těchto zařízení, ovšem odvětví je každým měsícem více zajímavé jak pro uživatele,
tak pro programátory. Předními výrobci je průkopník Apple a Android, ale i Microsoft se
svými Windows 8 útočí na tuto část trhu. Proto se mi toto téma jeví jako další možné pro
zpracování.
Tato práce je věnována spíše technologiím vývoje, ale důležitou součástí vývoje je
i metodika a řízení vývoje. Stejně jako jakýkoli programovací jazyk má svá specifika,
i moderní vývoj mobilních aplikací je má. Jelikož je na trhu mobilní trend relativně krátkou
dobu, toto odvětví není dostatečně zanalyzované. V tomto si myslím je schované další možné
téma pro zpracování.
Osobně mě téma mobilního vývoje stále zajímá a rád bych se podobným tématům
věnoval v dalších pracích, např. v diplomové práci v mém navazujícím magisterském studiu.
77
7 Terminologický slovník
Termín
Zkratka
Význam [zdroj]
Dots per inch
DPI
Dots per inch (DPI) je údaj určující, kolik obrazových
bodů (pixelů) se vejde do délky jednoho palce. Jeden
palec, anglicky inch, je 2,54 cm. Někdy se také užívá
zkratky PPI čili pixels per inch, pixely na palec.
Zjednodušeně DPI je kolik bodů je na délce 2,54 cm,
nebo také na kolik dílů se dá rozdělit 2,54 cm. Pojem se
užívá zejména v počítačové grafice či DTP. [Wikipedia,
2012i]
WML
Wireless
WML (Wireless Markup Language) je značkovací jazyk
Markup
založený na jazyce XML umožňující tvorbu online
Language
dokumentů pro mobilní zařízení. [Wikipedia, 2012y]
HTTP Cookies
Cookies
Jako cookie (anglicky koláček, oplatka, sušenka) se
v protokolu HTTP označuje malé množství dat, která
WWW server pošle prohlížeči, který je uloží na počítači
uživatele. [Wikipedia, 2012k]
JSON
JavaScript
JavaScript Object Notation (JavaScriptový objektový
zápis, JSON) je způsob zápisu dat (datový formát)
Object Notation
nezávislý na počítačové platformě, určený pro přenos
dat, která mohou být organizována v polích nebo
agregována objektech. [Wikipedia, 2012o]
Multipurpose
Internet
MIME-type
MIME, plným názvem Multipurpose Internet Mail
Extensions („Víceúčelová rozšíření internetové pošty“),
Mail
je internetový standard, který umožňuje pomocí
Extensions
elektronické pošty zasílat zprávy obsahující text
s diakritikou, lze k ní přiložit přílohu v nejrůznějších
formátech, umožňuje funkci digitálního podpisu apod.
[Wikipedia, 2012r]
Structured
SQL
SQL (někdy vyslovováno anglicky es-kjů-el [ɛs kjʊː ɛɫ]
IPA, někdy též síkvl [siːkwəl] IPA) je standardizovaný
Query Language
dotazovací jazyk používaný pro práci s daty v relačních
databázích. [Wikipedia, 2012u]
-
SQL-
SQL injection je technika napadení databázové vrstvy
injection
programu vsunutím (odtud „injection“) kódu přes
78
neošetřený vstup a vykonání vlastního, samozřejmě
pozměněného, SQL dotazu. [Wikipedia, 2012v]
Adobe Flash
Flash je grafický vektorový program, momentálně ve
vlastnictví společnosti Adobe (dříve Macromedia).
[Wikipedia, 2012a]
Document
DOM
DOM (akronym anglického Document Object Model –
objektový model dokumentu) je objektově orientovaná
Object Model
reprezentace XML nebo HTML dokumentu. DOM je
API umožňující přístup či modifikaci obsahu, struktury,
nebo stylu dokumentu, či jeho částí. [Wikipedia, 2012h]
Application
API
API (zkratka pro Application Programming Interface)
Programming
označuje v informatice rozhraní pro programování
Interface
aplikací. [Wikipedia, 2012g]
ECMAScript
-
ECMAScript je standard, který vyčleňuje takové
součásti JavaScriptu, které jsou stejně funkční pro
většinu webových prohlížečů. Pojmy jsou v praxi často
zaměňovány. Zdroj: Autor
Otevřený
OpenSource
Otevřený software (anglicky open-source software nebo
open software, zkratka OSS) je počítačový software
software
s otevřeným zdrojovým kódem. [Wikipedia, 2012s]
Java
-
Java je objektově orientovaný programovací jazyk, který
vyvinula firma Sun Microsystems a představila 23.
května 1995. [Wikipedia, 2012m]
Java
Platform, J2ME
Java Platform, Micro Edition (neboli Java ME, dříve
označovaná jako Java 2 Micro Edition nebo J2ME) je
Micro Edition
jedna z několika základních platforem Javy (spolu s Java
SE a Java EE) a Java Card). [Wikipedia, 2012n]
-
HotSpot
Hotspot je oblast či místo, v němž je dostupné
bezdrátové připojení do sítě Internet. [Wikipedia, 2012j]
-
Wifi
Wi-Fi (nebo také Wi-fi, WiFi, Wifi, wi-fi, wifi) je
v informatice označení pro několik standardů IEEE
802.11
popisujících
bezdrátovou
komunikaci
v počítačových sítích (též Wireless LAN, WLAN).
[Wikipedia, 2012x]
-
UNIX
Označení UNIX je ochranná známka, kterou v současné
79
době vlastní konsorcium The Open Group a mohou ji
používat pouze systémy, které jsou certifikovány podle
Single UNIX Specification. [Wikipedia, 2012w]
Asynchronous
JavaScript
AJAX
AJAX (Asynchronous JavaScript and XML) je obecné
označení
and
pro
technologie
vývoje
interaktivních
webových aplikací, které mění obsah svých stránek
XML
bez nutnosti jejich znovunačítání. [Wikipedia, 2012b]
-
XHR
Technologie využívající AJAX. V praxi a v rámci práce
se tyto dva často zaměňují. [Zdroj: autor]
Model-view-
MVC
je softwarová architektura, která rozděluje datový model
aplikace, uživatelské rozhraní a řídicí logiku do tří
controller
nezávislých komponent tak, že modifikace některé
z nich má minimální vliv na ostatní. [Wikipedia, 2012q]
Standard
Development
SDK
Je prostředí pro vývoj aplikací. Každá platforma
a vývojové prostředí má svou SDK. Zdroj: Autor
Kit
80
8 Citovaná literatura
Almaer, Dion. 2011. Native apps are always better than Web apps. Techno blog Dion.
[Online] 12 2, 2011. [Cited: 5 1, 2012.] http://almaer.com/blog/native-apps-are-always-better.
Apple. 2011. HTML5 Offline Appliacation Cache. Safari Developer Library. [Online] 2011.
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabas
eGuide/OfflineApplicationCache/OfflineApplicationCache.html.
Bechynský, Štěpán. 2011. HTML5 Aplikace pro Windows Phone 7. Zdroják.cz. [Online] 2.
11 2011. http://zdrojak.root.cz/clanky/html5-aplikace-pro-windows-phone-7/.
Doll,
Electronic.
2011.
ScreenDim.
Electronic
Doll.
[Online]
1
27,
2011.
http://elecdoll.com/screendim-turning-off-the-screen-with-iphone-gestures-to-save-morebattery/.
Google. 2012. Build maps for mobile apps. Google Maps API. [Online] Google, Inc., 2012.
https://developers.google.com/maps/mobile-apps.
—. 2012. Google Developers API. Google Developers. [Online] Google Inc., 2012.
https://developers.google.com/.
Harwani, B.M. 2010. Begining Web Development for Smartphones: Developing Web
Applications with PHP, MSQL and jQTouch. Ajmer, India : Createspace, 2010. ISBN 9781453831052.
Hassman, Martin. 2009. Začínáme s HTML5 Canvasem. Zdroják. [Online] 10. 4 2009.
http://zdrojak.root.cz/clanky/zaciname-z-html5-canvasem/.
Irish, Paul. 2011. DOM, HTML5 & CSS3 Performance. Paul Irish. [Online] 4 21, 2011.
[Cited: 5 1, 2012.] http://paulirish.com/2011/dom-html5-css3-performance/.
JoApp. 2012. The simple app framework for HTML5. Jo Framework. [Online] 2012.
http://joapp.com/.
jQTouch. 2012. A jQuery plugin for mobile WebKit development. Google code. [Online]
2012. http://code.google.com/p/jqtouch/.
jQueryMobile. 2012. jQuery Mobile Framework: Demos and Documentation. jQuery
Mobile. [Online] 2012. http://jquerymobile.com/demos/1.1.0/.
81
Kilián, Karel. 2011. SvětAndroida doporučuje: Pět webových prohlížečů. Svět Androida.
[Online] 21. 7 2011. http://www.svetandroida.cz/svetandroida-doporucuje-pet-webovychprohlizecu-201107.
ManiacDev. 2012. iPhone Development On Windows - 7 Options. ManiacDev.Com.
[Online]
2012.
http://maniacdev.com/2010/01/iphone-development-windows-options-
available/.
Matthew, David. 2011. HTML5: mobile wibsites. Waltham : Focal Press, 2011. p. 236. ISBN
978-0-240-81813-9.
Motyar. 2012. Handling HTML5 Application Cache with JavaScript. Moytar blogspot.
[Online]
2012.
http://motyar.blogspot.com/2011/09/handling-html5-application-cache-
with.html.
Mozilla. 2011. Using the viewport meta tag to control layout on mobile browsers. Mozilla
developer
network.
[Online]
2011.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag.
Mullany, Michael. 2012. HTML5 Scorecard: Chrome for Android Beta. Sencha Blog.
[Online] 2 9, 2012. http://www.sencha.com/blog/html5-scorecard-chrome-mobile-beta.
Nadel, Ben. 2010. Using HTML5 Offline Application Cache Events in JavaScript. Ben Nadel
Blog. [Online] 10 8, 2010. http://www.bennadel.com/blog/2029-Using-HTML5-OfflineApplication-Cache-Events-In-Javascript.htm.
newslog, About. 2004. Skutečná rychlost GPRS. About newslog. [Online] 13. 5 2004.
[Citace: 23. 4 2012.] http://www.zpravy.net/newslog/archiv/0405/skutecna-rychlost-gprs.php.
Oehlman, Damon and Sé Blanc , and bastien. 2012. Pro Android Web Apps: Develop for
Android using HTML5, CSS3 & JavaScript. New York : APress, 2012. ISBN-13: 9781430232766.
PhoneGap.
2012a.
API
reference.
Cordova
Documentation.
[Online]
2012a.
http://docs.phonegap.com/.
—.
2011.
Geolocation.
API
Reference.
[Online]
2011.
http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html.
—. 2012b. Supported Features. [Online] 2012b. http://phonegap.com/about/features.
82
Picchi, Andrea. 2011. Pro iOS Web Design and Development: HTML5, CSS3 and JavaScript
with Safari. NewYork : APress, 2011. ISBN 978-1430232469.
Posterous. 2008. iPhone Touch Events in JavaScript. Ross Posterous. [Online] 19. 8 2008.
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/.
Quirksmode. 2011. A pixel is not a pixel is not a pixel. Quirksmode. [Online] 9 2011.
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html.
Ribinson, Mike. 2011. Go offline with application cache. HTML5 Doctor. [Online] 1 25,
2011. http://html5doctor.com/go-offline-with-application-cache/.
Safari, Developer Library. 2012. HTML5 Offline Application Cache. Safari Developer
Library.
[Online]
2012.
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabas
eGuide/OfflineApplicationCache/OfflineApplicationCache.html.
Smus, Boris. 2011. Multi-touch web development. HTML5 Rocks tutorials. [Online] 8 21,
2011. http://www.html5rocks.com/en/mobile/touch/.
Stehlík, Petr. 2011. Praktické využití jazyka HTML 5 a CSS 3. Praha : Vysoká škola
ekonomická, FIS, KIZI, 2011.
Šrajer, Michal. 2011. Vývoj nativních aplikací pro chytré telefony. Multimediální záznamy
VŠE.
[Online]
31.
4
2011.
http://multimedia.vse.cz/media/Viewer/?peid=08c9cd64cf744cc3bf38ab6386a017ac1d.
Tile5. 2012. API Proposal. Tile5 - API. [Online] 2012. http://www.tile5.org/news/apiproposal-1-0.html.
Till, Michal. 2011. Sencha Touch vs. jQuery Mobile. Multimediální záznamy VŠE. [Online]
14.
4
2011.
http://multimedia.vse.cz/media/Viewer/?peid=f84f1e28d42d4b679ce5a213fbe39f4f1d.
T-mobile.
T-Mobile
3G/EDGE/GPRS.
T-mobile.
[Online]
http://www.t-
mobile.cz/web/cz/residential/internet/vice.o.datovych.sluzbach/t-mobile.3g.gprs.edge.
Valoušek, Filip. 2011. HTML 5 a CSS 3. Praha : Vysoká škola ekonomická, FIS, KIT, 2011.
W3C. 2012. HTML5 Specification. W3C. [Online] 3 29, 2012. http://dev.w3.org/html5/spec/.
83
—.
2010.
Web
SQL
W3C.
Database.
[Online]
11
18,
2010.
3
27,
2012.
http://www.w3.org/TR/webdatabase/.
W3School.
2012.
SQL
Tutorial.
W3School.
[Online]
http://www.w3schools.com/sql/default.asp.
W3Schools.
2011.
JavaScript
-
W3
W3
School.
Schools.
[Online]
2011.
http://www.w3schools.com/js/.
—.
2012.
Web
Statistics
and
W3
Trends.
Schools.
[Online]
2012.
http://www.w3schools.com/browsers/browsers_stats.asp.
Wikipedia. 2012a. Adobe Flash. Wikipedia. [Online] 2012a. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/Adobe_Flash.
—.
2012b.
Wikipedia.
AJAX.
[Online]
2012b.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/AJAX.
—. 2012c. Android (Operační systém). Wikipedia. [Online] 2012c. [Citace: 04. 04 2012.]
http://cs.wikipedia.org/wiki/Android_(opera%C4%8Dn%C3%AD_syst%C3%A9m).
—.
2012d.
Android
(operating
system).
Wikipedia.
[Online]
2012d.
http://en.wikipedia.org/wiki/Android_(operating_system).
—.
2012.
Android
software
development.
Wikipedia.
[Online]
2012.
http://en.wikipedia.org/wiki/Android_software_development.
—.
2012e.
Android
software
development.
Wikipedia.
[Online]
2012e.
http://en.wikipedia.org/wiki/Android_software_development.
—. 2012f. API. Wikipedie - otevřená encyklopedie. [Online] 1. 4 2012f. [Citace: 8. 4 2012.]
http://cs.wikipedia.org/wiki/API.
—. 2012g. Application Programming Interface. Wikipedia. [Online] 2012g. [Citace: 23. 4
2012.] http://cs.wikipedia.org/wiki/API.
—. 2012h. Document Object Model. Wikipedia. [Online] 2012h. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/Document_Object_Model.
—.
2012i.
DPI.
Wikipedia.
[Online]
2012i.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/DPI.
84
—. 2012j. Hotspot (internet). Wikipedia. [Online] 2012j. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/Hotspot_(internet).
—. 2012k. HTTP Cookies. Wikipedia. [Online] 2012k. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/Cookies.
—. 2012l. iOS (Apple). Wikipedia. [Online] 2012l. http://cs.wikipedia.org/wiki/IOS_(Apple).
—. 2012m. Java (Programovací jazyk). Wikipedia. [Online] 2012m. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/Java_(programovac%C3%AD_jazyk).
—.
2012n.
Java
ME.
Wikipedia.
[Online]
2012n.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/J2ME.
—. 2012o. JavaScript Object Notation. Wikipedia. [Online] 2012o. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/JSON.
—.
2012p.
jQuery
Wikipedia.
Mobile.
[Online]
4
13,
2012p.
http://en.wikipedia.org/wiki/JQuery_Mobile.
—. 2012q. Model View Controller. Wikipedia. [Online] 2012q. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/MVC.
—. 2012r. Multipurpose Internet Mail Extensions. Wikipedia. [Online] 2012r. [Citace: 23. 4
2012.] http://cs.wikipedia.org/wiki/MIME.
—. 2012s. Otevřený software. Wikipedia. [Online] 2012s. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/OpenSource.
—.
2012t.
Sencha
Wikipedia.
Touch.
[Online]
2012t.
http://en.wikipedia.org/wiki/Sencha_Touch.
—.
2012u.
SQL.
Wikipedia.
[Online]
2012u.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/SQL.
—.
2012v.
SQL
Injection.
Wikipedia.
[Online]
2012v.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/SQL_injection.
—.
2012w.
Unix.
Wikipedia.
[Online]
2012w.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/Unix.
—.
2012z.
Webová
aplikace.
Wikipedia.
[Online]
2012z.
http://cs.wikipedia.org/wiki/Webov%C3%A1_aplikace.
85
—.
2012x.
Wifi.
Wikipedia.
[Online]
2012x.
[Citace:
23.
4
2012.]
http://cs.wikipedia.org/wiki/Wifi.
—. 2012y. Wireless Markup Language. Wikipedia. [Online] 2012y. [Citace: 23. 4 2012.]
http://cs.wikipedia.org/wiki/WML.
WordPress.
2012.
WordPress.
Adding
mobile
view.
[Online]
2012.
http://fbflex.wordpress.com/2012/02/11/adding-mobile-views-to-your-grails-applicationswith-jquery-mobile-a-real-life-example/.
Žabka, Michael. 2012a. myAccount - Instalační Android soubor. Michael Žabka. [Online]
23. 4 2012a. [Citace: 23. 4 2012.] http://zabka.avantcore.cz/userfiles/downloads/myaccount1.0.1.apk.
—. 2012b. myAccount - Osobní hotovostní účetnictví. myAccount. [Online] 23. 4 2012b.
[Citace: 23. 4 2012.] http://myaccount.avantcore.cz/.
—. 2012c. myAccount - Zdrojový kód aplikace. myAccount. [Online] 23. 4 2012c. [Citace:
23. 4 2012.] http://zabka.avantcore.cz/userfiles/downloads/myaccount-1.0.1.zip.
86
9 Seznam obrázků a tabulek
9.1 Seznam obrázků
Obrázek 1 - Koncept rozvržení HTML5 tagů na obrazovce (desktop) - Zdroj: autor................7
Obrázek 2 - Koncept rozvržení HTML tagů na obrazovce (mobilní zobrazení) - Zdroj:
[WordPress, 2012] ......................................................................................................................8
Obrázek 3 - Nakreslený pomocí plátna HTML5 a JavaScriptu - Zdroj: Autor ........................22
Obrázek 4 - Typický layout iOS aplikace v iPhone – Zdroj: [Doll, 2011]...............................32
Obrázek 5 Standardní zobrazení obsahových prvků pro mobilní zařízení - Zdroj: Autor .......38
Obrázek 6 - Standardní zobrazení formuláře pro mobilní zařízení – Zdroj: Autor ..................38
Obrázek 7 - Stránka z příkladu pro jednoduchou jQuery Mobile aplikaci - Zdroj: Autor .......44
Obrázek 8 - Stránka z příkladu pro jQuery Mobile aplikaci – Zdroj: Autor ............................47
Obrázek 9 - Stránka z příkladu pro jednoduchou jQTouch aplikaci - Zdroj: Autor.................52
Obrázek 10 - Stránka z příkladu pro jQTouch aplikaci - Zdroj: Autor ....................................56
Obrázek 11 - Zobrazení jednoduché Sencha Touch 2 aplikace - Zdroj: Autor ........................62
Obrázek 12 - Návrh aplikace pomocí mockup (tužkou na papíru) – Zdroj: Autor ..................71
Obrázek 13 - Obrazovky hotové příkladové aplikace – Zdroj: Autor ......................................73
Obrázek 14 - Screenshot nativní aplikace v Android zařízení - Zdroj: Autor..........................75
9.2 Seznam tabulek
Tabulka 1 - Metody kontextu pro 2D grafiku - Zdroj: [Hassman, 2009] .................................20
Tabulka 2 - Události dotykové obrazovky s ekvivalenty k myši – Zdroj: Autor .....................24
Tabulka 3 - Podpora periferií ve verzích Android a přístup k periferiím prohlížečů - Zdroj:
[Oehlman, et al., 2012] .............................................................................................................28
Tabulka 4 - Podpora jQuery Mobile v mobilních prohlížečích - Zdroj: [Wikipedia, 2012p] ..40
9.3 Seznam příkladů
Příklad 1 - Použití uživatelských fontů v CSS3..........................................................................9
Příklad 2 - Doplnění hlavičky HTML mobilní webové aplikace .............................................10
Příklad 3 - Metatag pro určení mobilní aplikace ......................................................................11
Příklad 4 - Událost změny orientace obrazovky.......................................................................12
Příklad 5 - Zjištění polohy zařízení (Portrait, Landscape)........................................................12
Příklad 6 - Zápis metod úložiště ...............................................................................................13
Příklad 7 - Ukládání JSON do úložiště.....................................................................................13
87
Příklad 8 - Připojení Cache Manifest souboru k HTML ..........................................................14
Příklad 9 - Soubor Cache Manifest...........................................................................................15
Příklad 10 - Otevření Web SQL Databáze................................................................................17
Příklad 11 - Dotaz na Web SQL Databázi................................................................................17
Příklad 12 - Změna verze Web SQL Databáze.........................................................................18
Příklad 13 - Získání GPS informací..........................................................................................19
Příklad 14 - Vytvoření Canvas plátna.......................................................................................20
Příklad 15 - Vykreslení na plátno Canvas ................................................................................21
Příklad 16 - Vykreslení obrázku na plátno Canvas...................................................................22
Příklad 17 - Použití událostí displeje ........................................................................................24
Příklad 18 – Jednoduchá aplikace v jQuery Mobile .................................................................41
Příklad 19 - Složitější aplikace v jQuery Mobile......................................................................45
Příklad 20 - Jednoduchá aplikace v jQTouch ...........................................................................48
Příklad 21 - Složitější aplikace v jQTouch (hlavička)..............................................................52
Příklad 22 - Složitější aplikace v jQTouch (tělo) .....................................................................54
Příklad 23 - Skelet HTML aplikace v Sencha Touch ...............................................................57
Příklad 24 - Vytvoření aplikace v Sencha Touch .....................................................................58
Příklad 25 - Složitější aplikace v Sencha Touch.......................................................................59
88
10 Přílohy
Veškeré přílohy zpracoval a vytvořil Autor.
Příloha kódu pro příkladovou webovou aplikaci myAccount je k dispozici v úložišti
na adrese https://github.com/misak113/myAccount.
89

Vývoj webových aplikací pro mobilní zařízení

Transkript

Podobné dokumenty

ŽIVOTOPIS • Aplikace pro mezibankovní platební styk. - SNN

Informační systém pro „Ocenění odškodňování újem na zdraví