Hlavní strana Blog Práce Kontakty Mapa stránek Filmy

Podkategorie

C++
Php
Java
JavaScript
Ruby on Rails
Vývoj pro iPhone
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
VlastnÍ projekty
Jen tak mimochodem
Hry

Můžete mě sledovat:

Projekty

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

www.www.zaachi.com » Blog/Webdesign » iPhone web app

iPhone web app

Vytvoření webové aplikace tak, aby se tvářila jako aplikace pro iPhone nebo iPad.

Reklama
Pokud mě chcete podpořit a jste milovník jedné stopy, navštivte můj projekt: MotoArena.cz

Pokud potřebujete jednoduchou aplikaci pro iPad nebo iPhone pro vlastní potřeby, můžete ji vytvořit formou webové aplikace.

Nastavení hlaviček

Nejdůležitelší je nastavení hlaviček a zvětšení viewportu, aby se nám naše aplikace zobrazovala v safari bez všech nepotřebných lišt. správným nastavením hlaviček dokážeme zrušit jak adresní, tak stavový řádek:

<meta 	name="viewport"  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; 

user-scalable=0;" />
<meta 	name="apple-mobile-web-app-capable" content="yes" />

Nastavení ikony aplikace

Další důležitou věcí je nastavení ikony aplikace. Po přidání aplikace na plochu bude mít ikonu webu (screen webu).
Pomocí parametru apple-touch-icon si můžete tuto ikonu změnit:

<link rel="apple-touch-icon" href="/icon.png" />

Základ aplikace

Celá aplikace může nyní vypadat například nějak takto:


<html>
	<head>
	<meta 	name="viewport" content="width=device-width; initial-scale=1.0; maximum-

scale=1.0; user-scalable=0;" />
	<meta 	name="apple-mobile-web-app-capable" content="yes" />

	<title>MyWebApp</title>
	<link rel="apple-touch-icon" href="/icon.png" />
	</head>


	<body>

	Obsah aplikace

	</body>
</html>

V iPhone se zobrazí bez všech přebytečných lišt:

Přidání aplikace na plochu

Aby se aplikace tvářila jako skutečná aplikace, je nutné ji přidat na plochu telefonu. To uděláme velmi jednoduše. V safari klikneme na ikonu + a zvolíme možnost Přidat na plochu:

Nyní se dostaneme k přidávacímu formuláři, kde se nám načte ikona, kterou jsme nastavili v hlavičce a zvolíme si název aplikace:

Aplikace se bude zobrazovat na ploše a vypadat jako kterákoli jiná aplikace

Závěrem

Samozřejmě aby se aplikace tvářila jako výchozí aplikace bude nutné ji dále nastylovat, a doladit, pro tyto účely můžete využít například tento jednoduchý javascriptový framework: http://webapp-net.com/

Komentáře (3)

Autor: Zaachi
Publikováno: 8.6.2010 15:12:55

Mohlo by vás zajímat:
Vývoj aplikací pro iPhone: použití SqLite v iPhone
iPhone - tisk z iPhone
Lokální software pro iPhone 3G
Top Free aplikace pro iPhone 3G