elfineer | blog

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.

čtvrtek 14. dubna 2011, 15:26 - 16244× shlédnuto - RSS komentářů - tagy: ipad html5 televize weby webdesign

, Follow @elfineer

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".

Komentáře používají Texy! syntaxi.

"odkaz":http://kam.vede.cz, *zdůrazněné (em)*, **zdůrazněnější (strong)**, citace