Bouw je eigen iPhone website

Buiten is het koud, binnen gaan we een iPhone website bouwen! We hebben de mogelijkheden op een rij gezet van de meest populaire iPhone templates en voorbeelden.

De basis

Het Engelse Engageinteractive heeft een goede tutorial gemaakt hoe je een website kan maken die geschikt is voor de iPhone en de iPod Touch.

Maak een mapje op je bureaublad en zorg er voor dat de volgende bestanden in het mapje staan:

index.html
iphone.css
orientation.js
tutorial.html

Bewerk nu met hulp van de tutorial met een HTML editor of het gratis Smultron voor Mac OS X de index.html file. Als je een beetje experimenteert kan je al snel het volgende resultaat krijgen.



iUI

Joe Hewitt is nu al een legende als het gaat om bouwen van iPhone websites. Hij heeft onder andere de iPhone website voor Facebook gebouwd met het gratis iUI. Met iUI is het mogelijk om met enige kennis van html een iPhone website te maken. Voordeel is dat je verder geen kennis nodig hebt van JavaScript om een basic iPhone website te maken. De iPhone website van CNet is ook gemaakt met iUI.


iUI is gratis te downloaden rechts op de pagina onder de titel: Featured Downloads: iui-0.13.tar.gz

iWebKit

iWebKit 3.0 is volgens ons de beste keus als je eenvoudig een iPhone website wil maken. Zelfs als je geen kennis hebt van html is het mogelijk om een iPhone website te maken. Op de website van iWebKit staan goede tutorials en als je die ook leest dan gaat het lukken! In het gratis iWebKit software pakket zit alles wat je nodig hebt om snel en eenvoudig een iPhone of iPod Touch website te maken.

iWebKit is snel en daarom hebben wij ook onze iphone portal er mee gemaakt. Voordeel is ook dat de website ook te zien is voor mensen die geen iPhone hebben. iWebKit is zelfs compatibel met alles wat kan web browsen! Een voorbeeld van wat je allemaal kan met iWebKit kan je via deze link zien.

iWebKit is uit te breiden met plugins en thema's en de mogelijkheden zijn onbeperkt.

iWebKit is via deze link te downloaden en meer informatie over iWebKit via deze pagina.



WebApp.net framework

Het Franse WebApp is op dit moment ook erg in opkomst onder iPhone website "bouwers". De Belgische publieke Omroep VRT (De redactie en Sporza) maken ook gebruik van deze software.

Op dit moment is versie 0.3.9a gratis te downloaden via de website van WebApp.net. In het software pakketje zit een Javascript voorbeeld, CSS en een voorbeeld website daarbij zijn ook nog extra grafische voorbeeld bestanden te downloaden. Achter de website van WebApp hangt ook een forum dus als je er even niet uitkomt kan je daar je vraag stellen.

Jonas Themes

Last but zeker not least :) Het Nederlandse Jonas Themes uit Delft heeft 2 prachtige iPhone theme's gemaakt die te gebruiken zijn in RapidWeaver. Via deze link kan je een demonstratie zien van de mogelijkheden van het Touch theme en hier een demonstratie van de mogelijkheden van het Touch utilitas theme.


Gecombineerde schermafbeeldingen van de diverse mogelijkheden van de thema's

Beide thema's hebben we uitgebreid getest en het werkt allemaal prima. Je kan snel een iPhone website maken en in combinatie met andere plugins in RapidWeaver werkt het allemaal prachtig. Een WYSIWYG iPhone website is eenvoudig te maken en de bijgeleverde handleidingen bij de twee iPhone thema's zijn helder en geven voldoende informatie om iets moois te maken.

De iPhone thema's zijn te koop via de website van Jonas Themes. Beide thema's kosten 12 euro en daarbij heb je natuurlijk ook nog RapidWeaver nodig wat 65.78 euro kost.

Voorbeeld: Touch utilitas
Voorbeeld: Touch theme

RapidWeaver werkt alleen op een Mac en in combinatie met de thema's van Jonas Themes al genoeg rede voor een persoon die wij gisteren de software lieten zien om vandaag een Mac te kopen en de software :)
Onze creatie met behulp van de Jonas Themes zetten we aanstaande maandag online...



Duh? html?

Voor diegene die niets ziet in html is er nog altijd de mogelijkheid om gewoon een plaatje te maken met de schermafmetingen van de iPhone. Je kan daar gewoon een Web App van maken. Voordeel is dat het er prachtig uitziet en lijkt alsof je een website hebt gebouwd. De Lowlands 2008 webapp is waarschijnlijk ook zo gemaakt.



Maak in Photoshop een een afbeelding van 320 bij 417 pixels. Creëer je website. Download de volgende voorbeeld bestanden voor de iPhone of voor de iPod Touch Download de bestanden en open ze in een mapje op je bureaublad. Sla je Photoshop website creatie op als homeimage.jpg in het mapje. Open vervolgens met bijvoorbeeld Dreamweaver homescreen.html en maak hotspots met links op het plaatje. Succes gegarandeerd!

Source: iWebKit



Heb je nog meer links of tips voor het bouwen van een iPhone website mail het ons of geef een reactie op dit bericht.

 
 
 
 

Een reactie posten 9 reacties:

Anoniem zei

Wow erg cool ga het zeker uitproberen dit weekend!

04:15

Anoniem zei

Gebruik al iWebKit maar die truc met de plaatjes in Photoshop kende ik nog niet. Briljant!

10:07

Anoniem zei

was al enige tijd op zoek naar iPhone templates. Mooie links en voorbeelden. Bedankt!

10:45

Anoniem zei

Handige tips en links bedankt! Heb net met een plaatje in Photoshop wat gemaakt en het werkt prima. Ben al met mijn App aan het showen: "heb jij dat gemaakt" cool zeg.

14:00

Anoniem zei

Handy thanks!

19:55

Anoniem zei

Yeah, mijn MP3 Oordopjes net besteld voor 9,95 via http://bit.ly/qcd3MA
Hoop hem morgen binnen te krijgen:)

09:50

Doris zei

Wow, prachtig ga ik uitproberen dit weekend

17:12

Eef zei

Deze truc kende ik nog niet, nice

17:49

Een reactie posten