May 15

PhoneGap

Na veel geploeter met Objective-C is het misschien verstandig in te zien dat ik er niet echt gelukkig van word, zelfs voor de programmeurs hier bij Occhio is het een lastige taal. Tijdens de Next Web conference werd er Objective-J genoemd, dit is een port (geconverteerde versie) van Objective-C naar javascript. Hier heb ik ook naar gekeken, aangezien ik met javascript nog wel het een en ander kan, maar het lijkt er op dat we dan alsnog met web apps te maken hebben ipv native apps, dus je mist dan een groot aantal features (geo location, file access etc).

Maar gelukkig kwam ik PhoneGap tegen!

“PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.”

En, last but not least:

PhoneGap

Klinkt goed dus!

To be continued..

May 14
Booreiland over iPhone Development
Booreiland over iPhone Development
De afgelopen weken heb ik me bezig gehouden met Objective-C en dit valt eerlijk gezegd zwaar tegen. Wanneer je al C gewend bent zul je weinig problemen ondervinden met Obj-C, maar dit is bij mij dus niet het geval. Aangezien ik enkel *enige* ervaring heb met PHP. Ik heb een tweetal boeken over Obj-C maar merk toch dat ik vrij lastig te behappen vind allemaal. Het is voor mij ook een eerste aanraking met object georienteerd programmeren en ook voor het eerst dat ik MVC daadwerkelijk zelf moet opbouwen. Hier bovenop komt dan nog de omslachtige manier waarop Obj-C geschreven wordt. Ook werk je niet alleen in een code omgeving, je hebt ook nog de zogeheten Interface Builder waar je views en controls aan elkaar kan koppelen e.d. Kortom, de wanhoop is nabij.
Gelukkig wil Oebe, programmeur Occhio, met me gaan zitten, om te kijken of hij het wat duidelijker voor me kan maken.

To be continued..

Apr 03

Aangezien JQTouch een port claimt te zijn van het al eerder gebruikte iUI, leek het me interessant om te kijken of mijn eerder gebouwde app makkelijk omgezet kon worden naar een JQtouch app. Dit wilde ik graag omdat JQTouch gebaseerd is op jQuery.

Helaas is het toch vrij goed te merken dat JQtTouch zich nog maar in de Alpha fase bevindt, aangezien er nog vele bugs zijn. Ook werkt niet alles zoals in iUI. Wat wel ontzettend mooi is aan JQTouch zijn de hardware accelerated animaties. Hierdoor zijn deze animaties veel sneller en meer smooth.

Aangezien ik nu nog niet verder ga met JQTouch vanwege de bug-factor, maar wel de animaties graag in iUI ook zo zou willen hebben, ga ik nu uitzoeken of ik iUI wat dit betreft aan kan passen.

Apr 02

Inmiddels heb ik me wat verdiept in Joe Hewitt’s iUI en ik kan concluderen dat dit kleine framework me bevalt. Het is vrij eenvoudig aanpasbaar, zonder dat je in verschillende programma’s aan de gang moet. Ik heb op basis van de Occhio Newsmanager, een systeem waar klanten zelf nieuwsitems e.d. kunnen publiceren, een web app gemaakt. Je kunt hiervoor ook een RSS feed gebruiken. Helemaal geweldig zou het zijn om een API uit te lezen, maar hier ben ik nog niet aan toegekomen.

Ondertussen heeft het andere framework waar ik een voorkeur voor had, JQtouch, meer voorbeelden beschikbaar dus hier wil ik me nu kort in verdiepen. Wanneer dit framework net zo lekker werkt als iUI zal de voorkeur naar JQtouch uitgaan vanwege het feit dat het op basis van jQuery is geschreven, waarmee Occhio ook werkt.

iui1iui2

Mar 26

Tegenwoordig kun je er bijna niet meer onderuit: een mobile versie van je website. Dit is dus breder dan alleen voor de iPhone. Het moeilijke hieraan is dat je te maken krijgt met veel verschillende platformen en browsers. En niet te vergeten: de vele verschillende schermresoluties. Daarom moet een layout zo flexibel/fluid mogelijk zijn opgebouwd.

We hebben een standaard template ontwikkeld die aanpasbaar is binnen ons CMS. Wanneer je met je telefoon naar het normale webadres navigeert wordt er gedetecteerd dat je met een mobiele telefoon aan het surfen bent. Na deze detectie wordt je geredirect naar de mobiele variant.

Een probleem waar ik eerst tegenaan liep was dat de breedte van de site niet overal even lekker werkbaar was, dus dit is zo flexibel mogelijk gehouden.

Telefoons van nu kunnen gedraaid worden zodat je van portrait naar landscape-view gaat. Het is belangrijk dat je website dan mooi meegeschaald wordt.

Wanneer je een website maakt voor het mobile web moet je rekening met houden met een niet altijd snelle internetverbinding. Als je afbeeldingen wilt gebruiken kun je het dus niet maken om grote, zware afbeeldingen in te laden.

Er bestaat een API (tinysrc.mobi) die afbeeldingen speciaal voor mobiel dynamisch verkleint en ook voor je cached. Je kan zelf een een breedte en hoogte meegeven, of kiezen voor een aantal modi, waaronder ‘high’ en ‘ultra’. Ultra is speciaal voor telefoons zoals de Android of iPhone, maar helaas werkte deze optie niet (kreeg de melding “no match”).
Er is ook weinig documentatie over deze API te vinden, maar ik houd hem in de gaten.

De template is getest op een iPhone, Android, Nokia N82 en Nokia N95.

Mobile website: De KnorMobile website: De KnorMobile website: De Knor

Mar 20

Na gekeken te hebben naar de verschillende iPhone web apps frameworks kwam ik onder andere bij iUI uit.
iUI staat voor iPhone User Interface, niet te verwarren met intra-uteriene inseminatie ;).
iUi is ontwikkeld door Joe Hewitt, een bekend Firefox developer. Ook heeft hij firebug en de iPhone facebook web app ontwikkeld!

iUI heeft de volgende features:

  • Het creeren van navigatie menu’s en iPhone interfaces gemaakt door standaard HTML.
  • Weinig JavaScript kennis nodig om een basic iPhone pagina te maken.
  • Kan omgaan met de iPhone orientatie veranderingen, landscape/normal view.
  • Biedt een meer ‘iPhone-achtige’ ervaring aan web apps.

Wat mij hier interessant aan lijkt is dat waar je bij Dashcode een aantal kant en klare dingen voorgeschoteld krijgt, je hier vrij je gang kan gaan.

Ter introductie zal ik eerst de volgende items doornemen:

http://joehewitt.com
http://code.google.com/p/iui/wiki/Introduction
http://ajaxian.com/archives/joe-hewitt-presentation-on-iui-video

Mar 19

Na een tijd gekeken te hebben naar Dashcode vroeg ik me af of er nog andere (misschien minder omslachtigere) methodes zijn om een web app voor de iPhone te maken. Nou, die waren er:

  • xUI - slimmed down jQuery work-alike - website
  • JQTouch - JQuery Plugin for Making iPhone-like apps - website
  • iUI - make iPhone-feeling interfaces - website
  • Magic Framework - make fast and smooth iPhone-feeling apps with native-feeling widgets, lists, etc. Also provides an easy HTML5 db storage interface. - website
  • CiUI - CNET iPhone UI - website
  • Safire - Zillow JS/CSS framework (MIT License) - website
  • iWebkit - load 25% faster by reducing and optimizing the code - website
  • jPint - set of libraries to build web-based apps that look like native iPhone apps, but not iPhone dependent. - website

Dit zijn er nogal wat. Gezien mijn planning is het niet haalbaar om deze allemaal uit te proberen, het liefst kies ik hier 2 frameworks van uit om me verder in te verdiepen. Helaas kan ik niet echt een goed vergelijkend artikel o.i.d. vinden, dus ik ga voor degenen die mij het meest aanspreken zo op het eerste gezicht.

Dit zijn tot nu toe iUI en JQTouch. iUI lijkt mij interessant omdat het veel gebruikt wordt en er dus ook veel documentatie aanwezig is. De maker van iUI is Joe Hewitt, een bekend Firefox developer. JQTouch spreekt mij aan vanwege de jQuery factor. Hier bij Occhio maken we veel gebruik van jQuery waardoor dit mooi zou aansluiten. Wel is JQtouch nog in alpha, maar dat geldt voor veel van deze frameworks. Hierdoor is er helaas ook nog weinig documentatie aanwezig. xUi is ook jQuery based, maar niet enkel mobile gericht. Om tussen de twee een keuze te maken zal ik eerst kort uitzoeken welke beter lijkt, ik zal dan beginnen met iUI aangezien JQTouch nog erg Alpha is.

Mar 18

Zoals ik al eerder schreef kreeg ik het niet voor elkaar om een cross domain Ajax call te maken. Ook Oebe kwam er niet uit, dus ik zet dit even in de koelkast totdat Gijs de Occhio Ajax guru weer terug is van zijn roadtrip door de USA!

Edit: Ondertussen is dit probleem besproken met Gijs, en het is praktisch onmogelijk.

Mar 17

Vandaag was het dan zover, Apple heeft de iPhone SDK voor iPhone OS 3.0 beta gelanceerd! Helaas kan ik deze zelf nog niet downloaden omdat ik geen betaald iPhone developer lid ben.

Wel betekent de nieuwe SDK veel verandering op het gebied van applicaties, vooral omdat er nu zoveel meer mogelijk is!
Ook is er een nieuwe tutorial uit voor het maken van een (native!) applicatie!

Tijdens de presentatie (bekijk hier) werd er verteld dat er 8 miljoen(!) apps gedownload zijn. Momenteel zijn er 25.000 titels te vinden en dit aantal groeit nog steeds. Verbazingwekkend is dat meer dan de helft van de ontwikkelaars nog nooit mobile software heeft gemaakt (ja, er is dus nog hoop..).

De coolste features vind je hier:

In App Purchase
Allow users to purchase content or services from your application using the Store Kit framework. This new framework handles the financial aspects of the transaction, processes payment with the iTunes Store, and provides your application with information about the purchase.

Peer to Peer Connectivity
Add multi-player capabilities to your games using the peer to peer network connectivity and in game voice communication features of Game Kit. This powerful new framework allows any application, not just games, to communicate between devices using Bluetooth-no pairing required.

Apple Push Notification service
The Apple Push Notification service provides a way to alert your users of new information, even when your application isn’t running. Send text notifications, trigger audible alerts, or add a numbered badge to your application icon.

Maps
You can now embed maps within your applications using the new Map Kit framework. Map Kit works with the Google Mobile Maps Service and features panning and zooming, custom annotations, current location and geocoding.

Accessories
Using the new External Accessory framework, your application can now communicate with “Made for iPod” hardware accessories attached to iPhone or iPod touch through either the 30-pin dock connector or wirelessly using Bluetooth.

iPod Library Access
Access music, podcasts, or audio books in a user’s iPod library directly from your application using the updated Media Player framework. You can play, repeat and shuffle songs or whole playlists, or create sequences of songs using custom searches.


Behalve nieuwe features in de SDK zijn er in het OS ook een aantal nieuwe features te vinden:

Copy/paste is nieuw: je kunt dubbeltappen om een tekst te selecteren. Je kunt ook met je vinger over het scherm slepen om langere teksten te selecteren, waarna er een vergrootglas verschijnt. Via een pop-up kun je daarna kiezen voor Select, Select All en het knippen, kopiëren en plakken.

De SMS-applicatie heet nu Messages en heeft de mogelijkheid om MMS-berichtjes te versturen. Het werkt met foto’s, audio en dergelijke, maar niet met video’s.

Alle applicaties krijgen een landscape-modus, zodat je ook een groter toetsenbordje tot je beschikking hebt.

De iPhone krijgt Spotlight: een zoekfunctie, die in alle applicaties werkt die daarvoor ondersteuning bieden. Dat wil zeggen: de applicaties die Apple zelf heeft ontwikkeld.

Apple kondigde Stereo Bluetooth (A2DP) aan, maar dit werkt alleen op de iPhone 3G en misschien op de iPod touch 2G.

Een belangrijke aankondiging kwam pas aan het einde in de Q&A-sessie aan de orde: de p2p-verbinding werkt voor het uitwisselen van bestanden, streaming van bestanden en het op afstand bedienen van apparaten.

Mar 13
Dashcode RSS Template
   standaard Dashcode RSS template

Met behulp van Dashcode kun je vrij eenvoudig een Web App maken die dmv AJAX RSS feeds ophaalt. Wel ziet de standaard template layout er werkelijk waar niet uit:

Het is me helaas nog niet gelukt om cross domain AJAX calls te maken, dus heb de applicatie op het domein geplaatst waar ook de feed vandaan komt. Dit werkt perfect, maar eigenlijk is het wel de bedoeling RSS feeds te kunnen ophalen van andere domeinen.

Omdat ik de standaard template niet zo mooi vond, heb ik gekeken naar de mogelijkheden om deze te customizen. Dashcode biedt de optie om kleuren aan te passen, gradients toe te voegen en dergelijke. Maar dit is nog wel redelijk beperkt, en omdat ik echt geen WYSIWYG-er, maar natuurlijk een CSS-er ben heb ik de bijgeleverde stylesheet aangepast, zodat de web app een beetje in de Occhio huisstijl past.

De template heeft ook al veel standaard teksten, in het Engels uiteraard. Je kan deze ook aanpassen in Dashcode, maar ik vond dat redelijk vervelend, dus deze teksten heb ik aangepast in de losse JS-bestanden.

Wanneer je deze web app aan je homescreen toevoegt krijg je er meteen een icoon bij, en als je deze opstart heb je geen last meer van de (nu overbodige) url bar en navigatie knoppen.

Kortom: Dashcode is leuk voor een RSS app omdat je de heel technische dingen niet zelf hoeft te doen (dat cross domain AJAX call gebeuren even vergetend), maar wil je wat simpele aanpassingen doen, dan werkt het prettiger om dit te doen in de bestanden die je krijgt wanneer je je project op schijf opslaat.

Het resultaat:

Dashcode RSS Template
Dashcode RSS Template

Wil je de web app werkend zien? Ga dan, als je safari hebt, of een iPhone natuurlijk, naar www.occhio.nl/mobile-rss