27 februari 2011

Ik heb m'n eerste WebApp gebouwd!

Trendmatcher mobiel
Tot gisteren leefde ik in de veronderstelling dat je voor het aanschaffen van een "App" puur afhankelijk was van de Appstore van Apple, tenzij je een jailbreak uitvoerde op je iPad of iPhone.

Niets is echter minder waar!

Door het lezen van een artikel in PC-Active kwam ik op het spoor van iWebKit. Daarmee is het (met een beetje kennis van HTML) heel eenvoudig om je eigen webapplicaties te bouwen die geoptimaliseerd zijn om te gebruiken op een mobieltje. Door een slim gebruik van HTML5 en CSS3 ziet het er op een iPhone heel "native" uit, maar op een Android smartphone werkt het ook prima. Nokia, Blacberry en Windows smartphone heb ik helaas niet kunnen testen dus ik hoor graag jullie ervaringen daarmee.

Achteraf realiseer ik me dat de ELO Lifeschool waarover ik eerder schreef ook op deze manier gebouwd moet zijn.

De webapplicatie die je bouwt bestaat in feite uit een verzameling webpagina's. Je kunt de applicatie installeren op je iPhone waardoor deze niet meer in de browser maar fullscreen getoond wordt. Ook schijnt het dat de pagina's lokaal worden opgeslagen, al kan dat natuurlijk niet werken met dynamische inhoud zoals die gegenereerd wordt door bijvoorbeeld RSS feeds die je in de applicatie hangt.
Bij het installeren kun je ervoor zorgen dat er een eigen button op het scherm verschijnt en je kunt een startscherm aanmaken dat getoond wordt als de applicatie opstart.

iPhone integratie
Wanneer je de app gebruikt op een iPhone heb je extra mogelijkheden. Zo kun je direct vanuit de app een mailtje versturen naar een voorgedefinieerd adres en datzelfde geldt voor een SMS'je en het bellen naar een nummer. Ook kun je in de applicatie formulieren opnemen. Verder kun je Youtube filmpjes en Google Maps binnen je applicatie tonen. Sommige van die mogelijkheden werken trouwens ook gewoon bij gebruik op een Android telefoon. Er zijn verschillende mogelijkheden om knoppen aan te maken die zich heel mooi laten bedienen op een smartphone.

Wat hebben we hier nu aan?
Tja, bedenk het zelf maar! Hoeveel webkwesties zijn er bijvoorbeeld al gemaakt? Deze kun je met wat aanpassingen optimaliseren voor mobiel gebruik zodat ze voor leerlingen nóg toegankelijker worden! Maar zo zijn er natuurlijk veel meer toepassingen denkbaar. Ik vond het leuk om er een weekend mee bezig te zijn en ben benieuwd wie hier serieus mee aan het werk gaat...

Klik hier voor mijn eerste WebApp. Hij is uiteraard ook gewoon te bekijken in je browser.

4 opmerkingen:

  1. Vet! doet het ook op mijn HTC en ziet er goed uit. Eens bedenken hoe wij dat in Domburg zouden kunnen gebruiken :-)

    BeantwoordenVerwijderen
  2. Mooi stukje werk, Willem. Daar ga ik me ook eens in verdiepen. Ik heb nog een vraag. Bovenaan (ik gebruik een iPad) staat een knop 'Installeren'. Als ik die aantik, wordt ie wel 'vet' maar er gebeurt verder niets. Wat is de bedoeling ervan?

    BeantwoordenVerwijderen
  3. @Paul
    De knop installeren is een inline link naar de tekst onderaan dezelfde pagina waar staat hoe je de app kunt installeren op je iPhone of iPad.
    Op een Iphone is deze tekst niet gelijk te zien vanwege de grootte van het scherm.
    Op een iPad wel waardoor er niets gebeurt.
    Inderdaad wat verwarrend..

    BeantwoordenVerwijderen
  4. Maar misschien is dit bericht geheel overbodig omdat je al lang geabbonneerd bent op de feed van Frankwatching...

    BeantwoordenVerwijderen