Přeskočit na obsah

Hledej:


elfineer | blog

@PavelHoralik @ischiam tomu obyčejně hráblo, ne? :)
twitter.com/elfineer


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 2 (přejít na komentáře, přidat nový, sledovat pomocí RSS)
Přečteno 11910×
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).

Náhled iPad aplikace (TV program)

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:

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

iPad aplikace

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.

Blueprint (aplikace na iPad)

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ží.

Google Analytics - měření iPad aplikace
Google Analytics Cookies (na iPadu)

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

Google Analytics - měření iPad aplikace

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.

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



?>


Nepřehlédněte

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.

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.

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

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


Hledání

Mikroblog

GOTO TWITTER
GOTO POSTEROUS

Reklama

Nejčtenější

Reklama

Kvalitní domény, levný webhosting
Vyzkoušejte spolehlivý Český hosting. www.cesky-hosting.cz

Facebook tipy

Moje weby

Napište mi vzkaz