Mobil Nyhetr.se med jQTouch

Ja, jag har en iPhone. Jag har ända sedan jag köpte den varit lite sugen på att programmera applikationer till den. Problemet är att jag inte har någon Mac att utveckla på, och att jag helt enkelt inte varit tillräckligt motiverad i att sätta mig in i hur man gör.

För ett tag såg jag någon som skrev om jQTouch, kanske var det på Hacker News. jQTouch är ett Javascript-bibliotek för att utveckla webbsidor för iPhone för att hjälpa till att få funktion och utseende att bli iPhone-likt, och att få webbsidor i iPhone att likna applikationer. Den hjälper också till med splash-screen och lite till. Att skapa en sida i jQTouch påminner lite om hur det var att skapa en WAP-sida på 90-talet. Där var allt organiserat i ”cards” som återfanns i en och samma fil. Med jQTouch är det likadant, men blir det lite mer flexibelt då jQTouch har väldigt bra stöd för AJAX. jQTouch bygger på Javacript-biblioteket jQuery.

Jag har tagit några skärmbilder på min nuvarande ”alfa-version”. På den första bilden syns hur startikonen ser ut om den läggs på en hemskärm. Funktionen blir lite olika om man startar den från en ikon på hemskärmen eller som man går till webbsidan från iPhones Safari. Med en start-ikon på hemskärmen så kan man med jQTouch få webbsidan att köra i ”maximerat läge” vilket gör att Safari inte syns, och det ser ut nästan precis som en ”riktig” applikation. Denna möjlighet använder t.ex Google Wave för iPhone.


ikon

Om du startar ”webbsidan” från hemskärmen så visas en ”splash-screen” under tiden webbsidan laddas.

ikon

När sidan laddat klart så visas webbsidan. Naturligtvis krävs uppkoppling för att köra ”webbsidan”. jQTouch har visst stöd för att köra ”offline”, men det är något som jag ännu inte utforskat.

ikon

Än så länge finns där bara ett par fördefinierade nyhetskategorier och en sökruta, men mer kommer. Klickar jag på ”Ekonomi” AJAX-laddar webbsidan in nedanstående sida.

ikon

Klickar jag på någon av länkarna så kommer webbsidan att AJAX-ladda en liten omdirigeringssida, som i sin tur laddar nyhetssajtens sida i en iframe. Jag är inte helt nöjd med att lägga den externa sidan i en iframe, men det är det enda sättet för en webbsida i fullskärmsläge att visa en extern sajt utan att öppna Safari. Att öppna i Safari gör att det skulle krävas en massa klick för att komma tillbaka till min webbsida/applikation. Nu visas en tillbaka-knapp högst upp som tar mig tillbaka till min webbsida. Detta liknar det sätt som bl.a. Twitter-klienten Tweetdeck använder för att visa externa sidor.En länkad nyhet hos HD får detta utseende:

ikon

En sökning kan görs på normalt iPhone-sätt. Klicka på inmatningsfältet och tangentbordet dyker upp.


ikon

Söker jag på [Google] så hittar jag alla insamlade nyhter som innehåller just det ordet. Träffarna visar på en vanlig sökresultatsida.

ikon

Det går att se lite mer av texten om du vänder telefonen så att skärmen används i landskapsläge.

ikon

Just nu är detta hela funktionaliteten. Min plan är att få till all funktionalitet från Nyhetr.se att det fungerar på iPhone-versionen, inklusive Twitter-login. Planen är också att jag bara ska visa länkar till nyheter som finns på ”mobilversioner” av nyhetssajterna. Då detta är en ”spinnoff” av den vanliga webbsökningen så kommer jag även i fortästtningen bara ett indexera normala nyhetssidor (inte mobilversioner). Detta gör att jag kommer att begränsa sökningen till webbsajter som har en liknande länkstruktur på sin mobila version som på sin normala webbsida. De som har det just nu är HD, IDG, Expressen och Aftonbladet, och kanske någon mer. Jag vet inte hur svårt det är att få det klart, eller hur lång tid det tar, men jQTouch är kul att leka med när man väl greppat hur det fungerar.

  1. [...] skrev tidigare om mina initialt positiva erfarenheter av att skapa en webb-sida med jQTouch till iPhone. Det [...]