Webbapp på nolltid

Det finns två sätt att leverera innehåll till Android­enheter. Jämfört med andra system är det enkelt och ­billigt att komma igång med app-utveckling och leverera "riktiga" appar via Android Market, men ofta är webben en snabbare väg.

Med webbappar – pekskärmsanpassade mobilsajter – kan du bygga snygga mobilgränssnitt för till exempel din blogg eller webbutik utan att behöva installera Android sdk och knappa in hundratals rader java-kod. Som bonus fungerar innehållet dessutom lika bra i mobiler med andra operativsystem.

Så kommer du igång

Om du skapat en webbsida som fungerar bra på datorn har du säkert upptäckt att den inte alls är lika smidig att använda i mobilen eller i surfplattan. Vanliga webbfinesser som flash och silverlight fungerar i långt ifrån alla enheter, men problemen slutar inte där. Även om sidan laddas felfritt och ser ut på ungefär samma sätt i mobilen som på datorn så blir texten pytteliten, det är näst intill omöjligt att trycka rätt på länkarna och det krävs alldeles för mycket av zoomande och skrollande för att hitta rätt i innehållet.

Androidenheten ställer helt andra krav på webbinnehållet för att sidorna ska bli lättnavigerade. Första steget är att se till att mobilen förstår att din sida är anpassad för liten skärm och visar den utan att zooma ut. Grunden till en webbapp kan se ut så här:

Raden som inleds med meta name="viewport"… är viktig. Här talar vi om för webbläsaren att sidan är anpassad för mobilens bredd och att skalan ska vara 1 – det vill säga en pixel på webbsidan ska motsvara en pixel på skärmen. På raden nedanför aktiverar vi teckenuppsättningen utf-8 som gör det möjligt att använda svenska tecken. Nu kan du fylla på med innehåll mellan de båda body-taggarna. För att webbläsaren ska hitta filen – spara den med namnet index.html. Då räcker det att mata in sökvägen i adressfältet – filnamnet kan du utelämna.

Ta hjälp av ett ramverk

Nästa steg är att se till att text och länkar blir tillräckligt stora för att fungera bra i mobilen. För att åstadkomma det utan att behöva ange typsnitt och storlek på varje nytt textavsnitt krävs en stilmall – en så kallad css-fil. Om du någon gång har försökt dig på att skapa css-filer vet du att det krävs mycket arbete för att få en snygg typografi – och ännu mer jobb om du vill ha dynamiska funktioner som animerade sidväxlingar eller länkar som byter färg när du klickar på dem.

På developer.android.com/guide/webapps kan du hitta omfattande information om vilka möjligheter som Androids webbläsare erbjuder, men det finns ett smart och enkelt alternativ till att göra allt från grunden – använd ett färdigt ramverk. I våra exempel har vi använt Jquery Mobile Framework – en uppsättning gratisverktyg som ger dig stilmallar och funktioner som fungerar perfekt i din mobil.

För att bygga en webbapp med Jquery Mobile Framework – börja med grundkoden ovan och lägg till dessa rader ovanför /head-taggen

Koden gör att sidan alltid laddas tillsammans med en css-stilmall – "Stylesheet" – och två uppsättningar javascript-instruktioner som gör det möjligt att skapa snygga gränssnitt med minimala mängder kod.

I exemplet bygger vi delar av en webbapp som låter dig bläddra i en lista med mobiltester. Vi väljer ett tema med blått sidhuvud, grå bakgrund och mörkgrå sidfot. Allt innehåll ska in efter body-taggen och vi börjar med sidhuvudet:

Först skapar vi en så kallad p>

Om du vill ha en bakåt-knapp i sidhuvudet – lägg till en parameter i första p>

Nästa rad är allt som krävs för att skapa sidhuvudet och rubriken. Taggarna h1 som omger rubriktexten talar om att detta är sidans huvudrubrik och i p>

Allt som krävs för att skapa en snygg lista med sök- och filtreringsfunktion är en onumrerad html-lista i sin enklaste form. Jquery Mobile kan bygga många olika typer av listor och vi har valt en variant med hjälp av paramterarna data-role="listview" data-inset="true". 

Det ger en lista i en egen ruta med rundade hörn och en liten marginal till skärmkanten. Parametern data-filter="true" är det enda som krävs för att lägga till sökfunktionen. Om du vill spara utrymme och hoppa över sökfältet kan du utelämna den.

Varje rad i listan omges av li-taggar. Raderna inleds med en länk – sista raden länkar till en riktig sida om Motorola Atrix – på de tre första länkar vi till "#" som är en testadress – det ser ut som en länk på sidan, men leder inte till något innehåll. En praktisk funktion att använda när man bygger upp en meny, men inte har det underliggande innehållet klart.

Taggen img src="bild1.jpg" laddar den lilla bilden på respektive mobil. För att det ska bli snyggt måste bilderna vara kvadratiska och vi har tilldelat dem namnen bild1.jpg–bild4.jpg. Jquery Mobile fixar automatiskt storleken och de rundade hörnen på första och sista raden så att det passar exakt in i listan. 

Efter bilden kommer de båda textraderna. Rubriken omger vi med h3-taggar och raden nedanför gör vi till vanlig brödtext med hjälp av p-taggar. Det ger en tydlig skillnad i storlek och svärta på texten. För att avsluta koden för sidan och skapa en sidfot lägger vi till:

Om du hoppar över att ange tema får sidfoten mörkgrå bakgrund – precis som vi vill ha den – men du kan lägga till ­tema-parametern på samma sätt som för sidhuvudet om du vill ha någon annan färg. Nu är sidan klar att provköra. Vi kan antingen ladda upp den till ett webbhotell och testa i mobilen eller använda en webbläsare på datorn.

Filerna i vårt exempel finns här:

Index

Mobil1

Provkör på datorn

Det säkraste sättet att provköra och se att allt ser rätt ut och fungerar som det är tänkt är naturligtvis att öppna webbappen i din mobil. Många gånger kan det dock vara smidigare att simulera webbläsaren på datorn – då kan du snabbt växla till att granska källkoden och enklare mata in värden om du utvecklar appar med formulär. 

Du kan också testa appar lokalt på din dator utan att behöva en webbserver eller internetuppkoppling. Bästa lösningen är Android sdk som beter sig exakt som en riktig enhet, men webbläsaren Safari är enklare att installera och räcker långt för att simulera hur mobiler hanterar och visar webbappar.

1. Installera Safari från apple.se/safari

2. Starta Safari och aktivera utvecklarmenyerna via Inställningar 

och Visa utvecklarmenyn i menyraden. 

3. Mata in javascript:window.scrollTo(0,0);resizeTo(480,800); i Safaris adressfält och tryck på enter. Nu justeras fönstret till exakt samma mått som de flesta Androidmobiler så att radbrytningar, bilder och andra element visas på rätt sätt. Om du vill testa sidan för exempelvis en Motorola Razr – ändra siffrorna 480, 800 till 540, 960. 

4. Nu kan du provköra din webbapp genom att dra filen index.html 

till Safari-fönstret.­

Fler finesser för dina webbappar

Listor är bara en av alla funktioner som Jquery Mobile kan hjälpa till med. När du vill gå vidare innehåller Jquery Mobile-sajten mängder av funktioner och exempel som du kan kopiera till dina egna projekt. I ramverket finns lösningar för knappar, formulär, animationer, bildgallerier, verktygsfält och mycket annat. 

En komplett lista med exempel hittar du på jquerymobile.com.

Glöm inte ikonen 

För att bokmärket till din webbapp ska få en snygg ikon på startskärmen behöver du ladda upp en särskild bildfil till webbhotellet. Filen ska vara kvadratisk, sparad i png-formatet och 48 × 48 pixel stor enligt Googles specifikationer. Välj gärna en större fil – till exempel 96 × 96 pixel. Då fungerar ikonen även på Iphone och resultatet blir snyggt på mobiler med högupplösta skärmar. Allt du behöver göra är att länka till filen från dina sidor genom att lägga till koden intill före /head-taggen i dina html-filer. Ersätt »bildfil.png« med filnamnet för din ikon. Bokmärkesikoner fungerar tyvärr inte på alla Androidenheter – till exempel saknas stöd i de flesta HTC-lurar.