You may want to put some text here

Ontwikkelen van iPhone webapps deel 1

In dit artikel zal ik je uitleggen hoe je kan beginnen met het ontwikkelen van iPhone webapplicaties. Dit zijn kleine applicaties die draaien in de webbrowser van de iPhone.

Als je wat kennis hebt van HTML, CSS een een beetje PHP dan zal je snel aan de slag kunnen.

In deze tutorial ga ik je laten zien hoe je een iPhone webapplicatie maakt die een RSS feed leest en een overzicht toont van de items. Als er dan op één van die items geklikt wordt dan ga je rechtstreeks naar het artikel.

Download de onderstaande zip want dit is de basis van het project dat we gaan maken. Ik geef je dit begin al omdat dit niet veel met de iPhone te maken heeft. Het is gewoon een RSS feed die uitgelezen wordt met PHP en waar ik de items ondereen toon met behulp van HTML en CSS.

Download de project bestanden

iphone webapplicatie begin

Als je de project bestanden uitpakt en je plaatst deze op je server dan krijg je iets als het bovenstaande.

Zoals je in het filmpje hierboven kan zien krijg je met wat je nu gemaakt hebt nog niet echt een applicatie gevoel. dit komt omdat je eerst nog moeten inzoomen om de items te kunnen lezen en omdat je horizontaal kunt scrollen.

Dit gaan we oplossen door een viewport in te stellen. Voeg aan de index.php de volgende tag aan de head toe.

<meta name="viewport" content="width=device-width,user-scalable=no" />

Hierdoor zal het venster automatisch bij het openen ingezoomed worden op de inhoud van de applicaite doordat hij enkel de breedte van het scherm gaat tonen. De user-scalable=no instellingen gaat ervoor zorgen dat er niet meer kan in- en uitgezoomed worden. Dit gaat er ook tot bijdragen dat je meer het gevoel hebt van een echte applicatie.

Wat nu nog wat stoort is dat er bij het openen van de applicatie vanboven de adresbalk blijft staan. Dit kunnen we gemakkelijk oplossen door een klein javascriptje uit te voeren bij een body load.

<body onload="window.scrollTo(0,1);">

Dit javascriptje gaat ervoor zorgen dat wanneer de pagina geladen is dat deze een beetje naar onder gaat scrollen waardoor de adresbalk niet meer zichtbaar is.

Wat je nu nog kan doen is het voorzien van een desktop icoon. Als de webapp dan wordt opgeslagen op de  “desktop” van de iPhone dan krijgt deze het icoontje van je website. Hierdoor zal het er uitzien als een gewone applicatie.

Om een icoon te maken start je een grafisch programma als Photoshop en maak je een nieuw document aan van 57×57 pixels. Zorg ervoor dat de achtergrond transparant is en teken nu een vierkant met afgronde hoeken over heel de grote van het document met langst de randen 1 pixel spatie. De vierkant is dus 55px op 55px. Gebruik als achtergrond een lineare gradient naar keuze en plaats daar een icoontje ofzo op. Hou het simpel en voeg best geen glans effect toe omdat de iPhone dit zelf zal doen. Sla de afbeelding nu op als apple-touch-icon.png. Hieronder staat een voorbeeldtje van een icoon dat ik gemaakt heb.

apple-touch-icon

Vul de title tag van de index.php pagina in en voeg vervolgens onderstaande code toe aan de head van je index pagina.

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

Als je webapp nu wordt toegevoegd aan de desktop van de iPhone den krijg je het volgende.

Dit was de introductie tot het maken van een iPhone webapplicatie. Hopelijk was alles duidelijk. Nu is het tijd om zelf een super gave webapp te schrijven voor je iPhone.

Als extra voorbeeld kan je mijn iMazon webapp eens bekijken. Dit is een frontend voor de Amazon store.

Een andere webapp die ik ook gemaakt heb is de iPhone television guide.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

2 Responses »

  1. Beste Computerfaq,
    Ik heb een Web-app gemaakt op mijn pc met iwebkit (pc draait op Windows vista),nu kan ik dit bestand openen op mijn pc. Maar ik wil dat anderen ook gebruik kunnen maken van mijn Web-app (heb het namelijk voor mijn school gemaakt)en wil dus dat mensen met iphone of ipod touch, via hun browser op de web-app komen.
    Weten jullie iets waardoor ik deze web-app op een server/online kan zetten zodat iederen met een Iphone of IpodTouch (natuurlijk wel internet met verbinding) bij mijn web-App kan komen?

    Voorbaat dank:
    Laurens

Leave a Comment