iPhone webdevelopment: jQTouch vs iWebkit

Geschreven door: Bart Geraerts

iPhone webdevelopment

Om op een gemakkelijke manier een webapplicatie te schrijven voor de iPhone maak je het best gebruik van een miniframework of -toolkit. In deze blogpost licht ik kort de twee vooraanstaande toe: jQTouch en iWebkit.

Wat deze toolkits doen is vrij eenvoudig: ze gebruiken HTML, CSS en JavaScript om de 'volledige' look and feel van een echte iPhone applicatie na te bootsen. Denk hierbij aan het verbergen van de Safari balken bovenaan en onderaan. Zo zal je webapplicatie dus op een volledig scherm (de balk waar onder andere je provider vermeldt staat, blijft wel staan) draaien en daardoor de indruk geven dat het een echte applicatie betreft. Hiervoor moet de webapplicatie wel opgeslagen zijn naar je iPhone, zodat hij via het hoofdscherm toegankelijk is. Ik wil wel vermelden dat een webapplicatie zijn gebreken heeft:

  • Je kan niet alle API's van de iPhone oproepen (tot op heden enkel de GeoLocation);
  • Je webapplicatie zal nooit in de AppStore terecht komen.

Waarom zou je dan per sé je eigen webapplicatie schrijven? Misschien vind je bepaalde applicaties uit de AppStore wel goed, maar mis je die persoonlijke toets. Of misschien wil je de grenzen van het mogelijke proberen te verleggen? Bovendien is het maken van een webapplicatie volledig gratis, moet je geen weken wachten op goedkeuring van de AppStore en is de applicatie snel te porten naar andere platformen. Welke reden je ook hebt, met deze blogpost geef ik je alvast enkele tips om op weg te geraken.

Hoe begin je?

Maak eerst en vooral een keuze welke toolkit je gaat gebruiken. Hieronder vind je kort samengevat de twee grootste spelers op het vlak van toolkits. Je downloadt vervolgens deze toolkit en uploadt de bestanden naar een (eigen) webruimte. Maak vervolgens een nieuw HTML (PHP mag natuurlijk ook) bestand aan en zorg dat zowel de JavaScript bestanden als de CSS bestanden van de toolkit bij in het bestand zijn ingesloten. Vanaf dit moment ben je effectief klaar om de webapplicatie te bouwen.

De verschillende schermen van een webapplicatie kan je in veel gevallen onderbrengen in één enkel HTML/PHP bestand. Eén div-element herbergt één 'pagina' binnen de webapplicatie. Binnen deze layer kunnen we dan weer inhoud – en onze menubalk vanboven – gaan inbouwen. Hoe dit precies gebeurt, hangt natuurlijk voor een groot deel af van de gekozen toolkit.

jQTouch

De eerste toolkit van deze blogpost is jQTouch. Zoals de naam het misschien al verklapt, maakt deze toolkit gebruik van jQuery. Dit dan voornamelijk voor de animaties tussen verschillende schermen. Dankzij jQuery heeft jQTouch een indrukwekkend gamma aan animaties. Het ziet er natuurlijk mooi uit, maar in de meeste gevallen heeft dit geen echte meerwaarde. Ook de grafische schil van jQTouch oogt mooi. Natuurlijk kan je het grafische aspect zelf naar je eigen wensen aanpassen.

Een voorbeeld van een simpele pagina in jQTouch zou bijvoorbeeld het volgende kunnen zijn:


<div id="home" class="current">

	<div class="toolbar">
		<h1>Een titeltje</h1>
		<a class="back" href="#">Terug</a>
	</div>
	
	<h2>Subtitel</h2>
	<ul class="rounded">
		<li><a href="#paginaid">Interne link</a><li>
		<li><a href="#paginaid">Interne link</a><li> 
	</ul>
	
	<h2>Subtitel 2</h2>
	<ul class="rounded">
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
	</ul>
	
</div>

We zien een div met het ID 'home'. Dit ID is nodig om tussen onderlinge pagina's te linken. Dan hebben we een toolbar div. Je raadt het al, dit is waar onze toolbar staat. Je kan hierin onder meer een header voorzien, alsook links naar andere pagina's (bijvoorbeeld een 'about' pagina).

Daarna is het gewoon HTML gebruiken om te pagina op te vullen. Naast het intern linken kunnen er ook links gelegd worden naar formulieren (waarbij het formulier een pagina voorstelt en dus ook zijn eigen ID heeft).

Een overzicht van de meeste functies van jQTouch kan je vinden op het introductie filmpje op hun website.

iWebkit

Na jQTouch is het nu de beurt aan iWebkit. iWebkit verschilt op een aantal punten radicaal met jQTouch. Zo maakt iWebkit geen gebruik van jQuery en bijgevolg moet je dus geen jQuery bronbestanden inladen.

Een groot verschil met jQTouch is dat de verschillende pagina's hier ook effectief verschillende HTML pagina’s zijn. Bekijk volgend stukje demo code maar eens:


<div id="topbar">
	<div id="title">iWebKit</div>
	<div id="leftbutton">
		<a href="http://iwebkit.net">PC website</a>
	</div>
</div>
<div id="content">
	<ul class="pageitem">
		<li class="textbox">
			<span class="header">Welcome</span>
			<p>Welcome to the iWebKit 4 Demo site!</p>
		</li>
		<li class="menu">
			<a href="changelog.html">
				<img alt="Start" src="thumbs/start.png" />
				<span class="name">What’s New?</span>
				<span class="arrow"></span>
			</a>
		</li>
	</ul>

</div>
<div id="footer">
	<a href="http://iwebkit.net">Powered by iWebKit</a>
</div>

Dit is een verkorte weergave van de iWebkit demopagina. In grote lijnen lijkt deze code op de code van jQTouch, maar er zijn toch enkele kleine verschillen. Zo kunnen we afbeeldingen gaan toevoegen aan onze menu items. Zo creëer je natuurlijk een mooi visueel overzicht.

Alle features van iWebkit bespreken in deze blogpost zou te veel van het goede zijn. Wil je jezelf overtuigen, bekijk dan zeker de demopagina op je iPhone.

Meer informatie

Conclusie

Of je nu kiest voor jQTouch of iWebkit maakt eigenlijk niet uit. Hoewel er zoals eerder vermeld enkele nadelen zijn aan webapplicaties, hoop ik toch dat ik jullie voldoende stof heb kunnen geven om eens te experimenteren met beide toolkits. Persoonlijk heb ik geen echte voorkeur. Ik stel mezelf de vraag of ik een grafisch sterke applicatie wil, of eerder een lichtgewicht applicatie. Aan de hand daarvan kies ik respectievelijk voor jQTouch of iWebkit.

Heb je zelf al iets gemaakt met bovenstaande toolkits (of andere)? Plaats dan gerust een reactie met de link naar de webapplicatie. Ook andere suggesties van toolkits zijn meer dan welkom!

8 Reacties op deze blogpost:

Jochenvde
Door Jochenvde op 10 december 2009

Goede blogpost Bart. PhoneGap is ook zeker een aanrader voor het bouwen van webapplicaties. PhonGap is een open source development tool voor het bouwen van iPhone, Android, Blackberry,.. mobile applicaties met JavaScript.

Jochen.

Bert Timmermans
Door Bert Timmermans op 10 december 2009

Ik ben het niet helemaal eens met je blogartikel. Als je namelijk de source code van jQtouch en iWebkit merk ik al dadelijk dat de opbouw bij jQtouch een stuk beter in elkaar steekt en dan bij iWebkit. Zo zitten er een hele hoop standaart functies in jQtouch die iWebkit nog mist. Dus als ik zou moeten kiezen zou ik niet tijwfelen en voor jQtouch gaan. En in combinatie met Phonegape is het wel mogelijk om je webapp in de App Store te krijgen !

Jan Boden
Door Jan Boden op 10 december 2009

Wat is het verschil tussen dit en een mobiele website/webapplicatie? Want een iPhone App maken kan op deze manier toch niet, of ben ik verkeerd?

Bart Geraerts
Door Bart Geraerts op 10 december 2009

@Jan
Deze blogpost handelt inderdaad over mobiele websites of webapplicaties. Een genuine App maken is niet meteen mogelijk. Blijkbaar is er wel een mogelijkheid om webapplicaties in de App Store te krijgen, zie daarvoor de reactie van @BertTimmermans.

@Bert @Jochen
Ik heb nog niet met PhoneGap gewerkt. Ik vermoed dat ik hier zelfs niet mee kan werken op een Windows platform, klopt dat?

Bert Timmermans
Door Bert Timmermans op 10 december 2009

@bart
Als je voor de iPhone ontwikkeld is het logisch dat je dit enkel vanop een mac doet omdat de iPhone SDK ook gebruikt kan worden voor applicaties voor osx te schrijven. Je kan wel je applicatie helemaal in html, javascript en css bouwen op een windows en achteraf alles compilen op een mac. Phonegape bied trouwens een emulator die opgebouwt is in AIR om je app te testen in de phonegape omgeving op een Windows computer.

Steffest
Door Steffest op 10 december 2009

Als webdeveloper is het me wel een doorn in het oog dat je dan weer een webapplicatie aan het maken bent specifiek gericht naar 1 browser op 1 type device. (klinkt misschien bekend? IE6 op windows was 7 jaar geleden een gelijkaardige situatie, dat had ook IE only transformaties en effecten, zoals je nu webkit transforms hebt die enkel op iPhone werken.)

Ik mag toch hopen dat we ondertussen wat geëvolueerd zijn naar een open web.

Als je een mobiele webapplicatie maakt, waarom dan niet ineens een applicatie maken die voor meerdere mobile devices werkt? de Android browsers zijn ook op webkit gebaseerd, waarom wil je dan de iPhone UI perse opdringen aan die gebruikers? Daar komt bij dat hoe goed de imatie ook, het blijft een imitaite die op kleine puntjes net iets anders werkt, wat naar usability toe eerder een nadeel dan een voordeel is.

Als je voor iPhone wil ontwikkelen, maak dan een native iPhone app.
Als je voor het web ontwikkeld, kijk kan verder en maak een app die op zoveel mogelijk devices werkt.

Bart Geraerts
Door Bart Geraerts op 10 december 2009

@Bert
Bedankt voor deze informatie. Het is inderdaad logisch dat een (web)applicatie voor een Apple product op een Apple product wordt gecompiled.

@Steffest
Ikzelf als webdeveloper streef ook naar een open web hoor. Dat is ook niet het doel van deze blogpost. Het gaat hier om een webapplicatie enkel en alleen voor een iPhone. Je hebt dus al op voorhand bewust gekozen om een iPhone webapplicatie te maken. Hoe deze er dan uitziet in bijvoorbeeld FireFox op Windows maakt dan eigenlijk niet uit, want ik zal de webapplicatie enkel benaderen via een iPhone.

Dennis
Door Dennis op 13 december 2009

Leuk vertrekpunt voor iPhone ontwikkeling, ga het zeker allemaal eens deftig doornemen wanneer er tijd en inspiratie is.

{* Remarketing tag *}