dub 11 14
Pár tipů z vývoje HTML5 iPad aplikace
Datum a čas | čtvrtek 14. dubna 2011, 15:26 |
Tagy | ipad html5 televize weby webdesign |
Komentáře | 8 (přejít na komentáře, přidat nový, sledovat pomocí RSS) |
Přečteno | 21871× |
Popis | Jak vznikl web kopírující nativní iPad aplikaci |
Představení aplikace
Zmiňovanou aplikací je TV program pro iPad a je kompletně napsaný pomocí HTML, jQuery, CSS a některých HTML5 prvků. Po přidání na plochu se chová téměř stejně jako nativní aplikace, dokonce i podporuje něco jako offline režim. Vyzkoušet si ji můžete na ipad.vtelevizi.cz (v normálních prohlížečích nefunguje, dokonce ani v Safari).
Nativní nebo mobilní
Já jsem aplikaci tvořil jako HTML z toho důvodu, že neumím Objective-C a hlavně nemám Maca, nicméně článků na téma nativní nebo webová naleznete spoustu (včetně jednoho videa z letošního GDD Praha).
Nevýhody, uděláte-li aplikaci jako webovou:
- přicházíte o push notifikace (ano, můj minulý článek, jak to jde jinak, ale z těch se dostanete jen do prohlížeče, ale ne aplikace)
- přinášíte nezvyklou „instalaci“
- přicházíte o zviditelnění v AppStore
- horší přístup k hardwaru
Výhody:
- žádné schvalování, žádné čekání na Apple, můžete si dělat, co chcete (viz Playboy)
- známé HTML a JS
- asi lepší statistiky použitelnosti (ano, Google Analytics umí měřit aplikace, ale víc bych věřil webové aplikaci)
Někde mezi je PhoneGap, se kterým by měla jít webová aplikace zabalit jako nativní a dát na AppStore, ale nemám s tím žádné zkušenosti.
Dál už budu popisovat jen HTML aplikaci.
Framework
Procházel jsem si pár frameworků jako jQuery Mobile nebo jqpad, ale spíš jsem měl pocit, že nejde o usnadnění tvorby aplikace, ale nalití obsahu do připravených šablon - menu bude vlevo, bude mít tento styl.... – sice se mi to před 3,5 rokem osvědčilo u iPhonu, ale teď jsem nechtěl jít touto cestou, už taky proto, že iPada mám, takže můžu kontrolovat, co tvořím.
Použil jsem tedy HTML, standardní jQuery a pročetl si na Zdrojáku seriál o HTML5 (spíš než učení se syntaxe jen pro pochopení principu, jaké storage je na co...). Další výhodou také je, že prohlížeč je víceméně jeden (jen různé verze iOS), takže jakmile tu databázi rozchodíte jednou, tak prostě funguje a nemusíte řešit nic podobného.
První kroky
Úplný začátek popisuje článek HTML5: píšeme aplikaci pro iPad – díky tomu pochopíte, jak dát aplikaci ikonku, jak zakázat zoomování dvěma prsty a jak vytvořit první dojem aplikace při otevírání přes ikonku. Taky změna CSS podle natočení iPadu fungovala slušně – zatím žádný problém.
Otevřete-li aplikaci ikonkou, chová se jako jiné - i vypadá "zmultitaskovaná".
Novinkou tu je, že použijete-li normální odkaz (a href stránka.html), tak se cílová stránka zobrazí v Safari a vaše aplikace odjede do pozadí – všechny přechody mezi stránkami jsou tedy řešeny přes .load do divu. Tzn obrázky ve spodním menu vedou na javascriptové funkce, které (kromě jiného) načtou AJAXem obsah do divu nad menu.
K UI: dole jsem chtěl mít stejný panel, jako mívají aplikace na iPadu (jako YouTube nebo AppStore). Tlačítka jsou nakonec z aplikace Blueprint Lite, ve které je i několik předpřipravených ikon – z různých variant panelu (podle toho, které tlačítko je aktivní) obrázky.
Tu ale nastal největší kámen úrazu – to, co při používání vypadá jako naprostá samozřejmost - že menu je vespod a nehýbe se a v obsahu nad ním se pohybuje jedním prstem – byl asi největší problém ze všeho. Menu je vespod přes podivné triky s vloženými DIVy a jejich výškou (position: fixed totiž nefunguje).
O posouvání obsahu jedním prstem se stará jQuery knihovna Touch Scroll, bez ní by se musely používat vždy prsty dva (standardní gesto pro scrollování v Safari). Specialitou je, že načte-lise jiná stránka, musí mít nadefinovánoz svou výšku (stránka ~ DIV, HTML a BODY tu není, tu má jen ta hlavní stránka s menu) a stejně funkci Touch Scroll zavolat znovu (vyvolat update). A také, také žádná stránka nesmí být delší než byla první (netuším proč, ale je v tom pár hodin pokusů).
HTML5 prvky
Dál přicházejí HTML věci, které sice pro mě byly nové, ale fungovaly bez větších problémů.
Offline běh
Podrobný popis AppCache je opět na Zdrojáku. Hlavní stránka (/index), JS knihovny a obrázky jsou nacachované, naopak všechny stránky, které načítají obsah jsou NETWORK. FALLBACK mi úplně nefungoval, jak jsem čekal (není-li dostupná stránka A, ukaž B); to, aby se načetl osobní program z databáze při offline běhu dělá přímo index. Mimochodem nevím, jak do manifestu popsat "nic" (jen lomítko), takže jsem radši udělal přesměrování z ipad.vtelevizi.cz na vtelevizi.cz/mobil/ipad/index (a ne jen vtelevizi.cz/mobil/ipad/).
Pokud se vám povede něco špatně nacachovat, pomoc je v nastavení Safari, vymazat cache (smaže to i localStorage proměnné - viz dále).
Databáze
Opět Zdroják - databáze funguje pěkně, plním ji XMLkem, které parsuje jQuery. Jméno uživatele a jeho heslo jsou v GETu XMLka, takže jakmile si uživatel v aplikaci uloží do nastavení heslo, uloží se a dál posílá jen kus MD5 (jQuery knihovna). Do databáze zatím ukládám jen osobní program, aktuální program (Právě běží) se vždy tahá z internetu, taky proto, že na aktuálním jsou důležité náhledy.
Ukládání
Věci jako uživatelské jméno a heslo jsou uloženy v localStorrage (Zdroják o WebStorage). Kromě toho, že to vypadá lépe než cookies (trvalejší), tak cookies uložené přes jQuery aplikace po vypnutí zahodila.
Vlastní atributy
Vlastní atributy k prvkům také příjemně zjednodušují prvek - stačilo do odkazu napsat date="..." a v jQuery se na to dotázat přes .attr.
Měření používanosti
Používanost aplikace je měřena přes Google Analytics - každý přechod vygeneruje virtuální pageviews v adresáři /ipad-app (pro který je nastavený vlastní profil). Ačkoliv moje cookies po vypnutí mizí, cookies od Google Analytics vydrží.
Přes vlastní proměnné je měřeno také, jestli má uživatel iPada na výšku nebo na šířku (podle výšky okna zjištěného JavaScriptem).
Pobízení k "instalaci"
Pokud uživatel aplikaci otevře jen v Safari, vidí navíc žlutý pruh, který mu radí, že pro "instalaci" má kliknout na šipku vedle adresního řádku. Tento pruh se ukazuje podle výšky okna (objeví se pokud je výška okna menší než 700px).
Závěr
To je zatím vše, očekávám, že statistiky po pár týdnech provozu lépe ukáží, které funkce se používají a které méně a jaké má smysl dělat změny.
pondělí 14. dubna 2011, 15:26 - 21871× shlédnuto - RSS komentářů - tagy: ipad html5 televize weby webdesign
Nepřehlédněte
- Videoarchiv TV Nova pro iPhone/iPad (02. 05. 2011)
Už pár dní lze v AppStoru stáhnout aplikaci Voyo.
- Push notifikace i bez aplikace (1) (03. 03. 2011)
Push notifikace do iPhonu/iPadu můžete odesílat, i když nemáte nativní aplikaci.
- Tři měsíce s iPadem (30. 12. 2010)
Pár postřehů z delšího používání iPadu, tipy na aplikace...
- WebGL globus od Googlu (06. 05. 2011)
Zobrazte data na globu - rozchození za pár minut.
- Automatický výběr města podle skutečné polohy (14. 08. 2010)
Jak do formuláře přidat tlačítko "Zjisti město podle polohy".
Garçon - neděle 1. ledna 2012, 12:09 - web - #
Nešlo by v manifestu při odkazování na inicializační soubor aktuální složky použít dot-segment URI?
CACHE MANIFEST
CACHE:
./
Pěkné shrnutí, díky.
yanmaneee - úterý 24. listopadu 2020, 21:07 - #
jordan shoes
golden goose sneakers
supreme
golden goose sneakers
canada goose outlet
supreme new york
jordans shoes
longchamp bags
longchamp outlet
kyrie irving shoes
moncler outlet
stephen curry shoes
lebron shoes
off white
supreme hoodie
lebron 15
curry 7 shoes
yeezy shoes
cheap jordans
lebron 17
yeezy
supreme clothing
golden goose outlet
supreme clothing
jordan shoes
kyrie spongebob
yeezy boost
supreme new york
kyrie 4
kyrie 4 shoes
kyrie shoes
yeezy
yeezy boost
goyard handbags
pandora jewelry
michael jordan shoes
jordan retro
golden goose
cheap jordans
100% real jordans for cheap
curry 6 shoes
jordan 13
yeezy shoes
supreme
lebron james shoes
longchamp
yeezys
giannis antetokounmpo shoes
jordans
longchamp handbags
supreme
golden goose sneakers
westbrook shoes
air jordan
kd shoes
longchamp
yeezy
yeezy boost 350
golden goose outlet
off white jordan 1
jordan 4
retro jordans
kd13
off-white
jordan 12
yeezy shoes
nike react
golden goose
yeezy 350
yeezy
longchamp outlet
bape
jordan shoes
retro jordans
yeezy boost 350
supreme t shirt
moncler outlet
jordan shoes
off white
jordan sneakers
canada goose outlet
golden goose
curry 7 sour patch
curry 7
canada goose
yeezy boost 350 v2
bape
yeezy boost 350
birkin bag
supreme clothing
golden goose
jordans
steph curry shoes
bape outlet
yeezy boost 350 v2
balenciaga
kevin durant shoes
longchamp
pg 4
jordan shoes
hermes
supreme
yeezy 350 v2
supreme outlet
lebron shoes
off white hoodie
off white hoodie
nike off white
yeezy boost 350 v2
nike x off white
hermes online
bape hoodie
jordan 11
moncler
curry 6
kyrie 5
bape clothing
air jordan
adidas yeezy
supreme clothing
off white clothing
yeezy boost 350
stone island
longchamp
yeezy
pandora bracelet
golden goose
golden goose
curry 6
golden goose sneakers
supreme clothing
yeezy boost 350
moncler coat
bape hoodie
moncler
lebron 17 shoes
adidas yeezy
supreme new york
pandora
kobe shoes
offwhite
yeezy sneakers
yeezy shoes
yeezy
golden goose
yeezy supply
yeezy boost 350 v2
yeezy shoes
yeezy boost 380
ggdb
canada goose jacket
nike lebron 16
supreme outlet
moncler jackets
golden goose sneakers
supreme clothing
kenzo clothing
golden goose sneakers
supreme clothing
jordan shoes
cheap jordans
nike shox
longchamp bags
supreme clothing
kenzo clothing
pandora
off white shoes
jordan shoes
supreme new york
golden goose
hermes
retro jordans
pandora
yeezy boost
yeezy boost 350
a bathing ape
moncler outlet
off white
supreme hoodie
jordan retro
stone island
stone island sale
kd shoes
paul george shoes
yeezy
off white hoodie
supreme clothing
kenzo
supreme t shirt
moncler
cheap jordans
supreme clothing
kd shoes
jordan shoes
golden goose sneakers
nike off white
a bathing ape
balenciaga shoes
yeezy 500
supreme hoodie
russell westbrook shoes
balenciaga triple s
chrome hearts outlet
moncler
kobe sneakers
golden goose outlet
kobe shoes
kevin durant shoes
kd 12
kd 10
yeezy 700
kobe shoes
canada goose
calvin klein outlet
pandora jewelry
giannis shoes
supreme clothing
yeezy boost 350 v2
birkin bag
kenzo
golden goose sneakers
pandora jewelry
bape
off white
hermes birkin
hermes belt
canada goose outlet
cheap jordans
golden goose
yeezy boost 700
kd shoes
yeezy 350
curry 6 shoes
supreme clothing
golden goose
yeezy shoes
pandora
yeezy boost 500
golden goose
yeezy boost 350 v2
yeezy
supreme
kyrie irving shoes
yeezy boost 350
kobe basketball shoes
golden goose outlet
yeezy 350
golden goose outlet
a bathing ape
jordan shoes
jordan shoes
canada goose jacket
cheap jordans
off white shoes
supreme clothing
yeezy shoes
supreme
pandora jewelry official site
birkin bag
kd 12
supreme hoodie
lebron shoes
air yeezy
adidsas yeezy
air jordan
yeezy supply
golden goose outlet
yeezys
yeezy boost
golden goose sneakers
yeezy shoes
moncler jackets
pandora charms
off white clothing
lebron 16
kobe 9
retro jordans
yeezy boost 350 v2
hermes handbags
balenciaga shoes
moncler
chrome hearts online store
off white clothing
supreme hoodie
yeezys
yeezy boost 350 v2
longchamp handbags
off white jordan 1
supreme hoodie
pandora charms
supreme clothing
off white
moncler jackets
kd 12 shoes
air jordan
jordans
yeezy boost 350 v2
kyrie 5 spongebob
yeezy boost 350 v2
kobe byrant shoes
yeezy
golden goose
kyrie 6 shoes
stephen curry shoes
cheap jordans
kyrie 6
steph curry shoes
bape hoodie
kobe 11
moncler jackets
supreme
supreme shirt
longchamp
nike shox for men
yeezy shoes
goyard
supreme new york
supreme clothing
curry shoes
stone island outlet
moncler jacket
off white hoodie
yeezy shoes
cheap jordans
lebron 15 shoes
kyrie 5 shoes
golden goose shoes
supreme outlet
steph curry shoes
lebron james shoes
supreme
off white shoes
yeezy 700
curry shoes
kyrie 6 shoes
yeezy 380
jordan 6
golden goose shoes
off white x jordan 1
yeezys
adidas yeezy
golden goose
nike epic react
off white nike
supreme
supreme clothing
kyrie shoes
jordan 1 off white
golden goose
jordan shoes
pandora
off white nike
kd shoes
hermes birkin
yeezy
supreme clothing
pandora outlet
kawhi leonard shoes
golden goose sale
off white outlet
longchamp handbags
balenciaga
calvin klein underwear
jordan shoes
yeezy boost 350
off white
yeezy boost 350 v2
yeezy boost
yeezys
curry 6
longchamp handbags
air jordans
kyrie 6
yeezy
pandora
hermes handbags
yeezy supply
moncler
moncler
golden goose sneakers
yeezy
curry 7
yeezy
curry 6 shoes
jordan shoes
bape
pandora jewelry
amna - pondělí 3. ledna, 07:59 - #
I personally like your post; you have shared good insights and experiences. Keep it up. satta
slotplayfree - sobota 15. ledna, 17:43 - #
This is often these types of an awesome resource you are supplying and you simply give it away for free. I really like seeing blog that recognize the value of giving an outstanding useful resource without cost. สล็อตเล่นฟรี
Mikroblog
Reklama
Nejčtenější
Reklama
Kvalitní domény, levný webhosting
Vyzkoušejte spolehlivý Český hosting.
www.cesky-hosting.cz
Pitrsonek - čtvrtek 14. dubna 2011, 16:36 - web - #
Ahoj díky za užiteční článek, moc se mi líbí a inspiroval. Osobně jsem také testoval různé frameworky pro realizaci mobilních web aplikací ale člověk je v nich dost omezený viz. jQuery Mobile, Sencha Touch.