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

čtvrtek 14. dubna 2011, 15:26 - 18863× 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.

yanmaneee - úterý 24. listopadu, 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

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