Kmom01: En mobil webapp i HTML

Tanken är att komma igång med utveckling av mobila applikationer. De mobila applikationerna utvecklar vi med tekniker baserade på HTML, CSS och JavaScript och vi kallar dem för mobila webbapplikationer. Som ett första steg så läser vi på om grunderna och vi bygger en me-app med fokus på mindre terminaler.

Eller ja, den blir skalbar så den fungerar även på större plattformar, men vårt fokus är mindre, mobila enheter.

Vi använder ramverket jQuery Mobile för att snabbt komma igång och du får en introduktion till utvecklingsmiljön som erbjuds i webbläsaren.

Det kan se ut så här när vi är klara.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 6-10 studietimmar)

#Kurslitteratur

Läs följande:

1. Mobile HTML5.
   • Ch 1: Setting the stage

#Artiklar

Läs följande artiklar för att få bakgrunden till övningarna.

1. Titta i manualen om jQuery Mobile. Du finner den på deras webbplats under demo. Börja med att läsa artikeln som heter “Introduction” och läs därefter artikeln “Responsive Web Design”. Avsluta med att skumma igenom manualen för att se vad där finns och för att bygga en känsla om vad jQuery Mobile innehåller.

2. Titta på olika varianter av mobila webappar med jQuery Mobile och få en känsla för vad man kan bygga med jQuery Mobile.

3. Läs om viewport på MDN i artikeln “Using the viewport meta tag to control layout on mobile browsers”.

4. Läs artikeln om “Mobile: native Apps, Web Apps, and hybrid Apps”.

#Video

Titta på följande video.

1. Video som ger en översikt av jQuery Mobile, “jQuery Mobile and jQuery UI Keynotes - jQuery Conference Portland 2013”. Video är från 2013 men ger en bra översikt och bakgrund av jQuery Mobile.

2. Video om Dave Methvin - The State of the jQuery Foundation. Videon är opening keynote från konferensen jQuery Chicago 2014 och Dave Methvin är president av jQuery Foundation.

#Lästips

Det finns inga extra lästips.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Labbmiljö

Installera labbmiljön för kursen.

1. Installera labbmiljön som behövs för kursen.

2. Installera kommandot dbwebb samt kursrepot för kursen webapp.

Om detta är din första dbwebb-kurs så läser du också igenom hela manual-sidan för kommandot dbwebb.

#Övningar

Gör följande övningar för att träna inför uppgifterna.

1. Läs igenom tipset om “Developer tools i webbläsaren för mobila enheter”.

2. Gör övningen “Kom igång och skapa en mobil webapp med jQuery Mobile”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Skapa en me-app till webapp-kursen”.

#Extra

Det finns ingen extrauppgift.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

• Vilken utvecklingsmiljö sitter du på?
• Är du sedan tidigare bekant med utveckling av mobila appar?
• Är du bekant med jQuery och/eller jQuery Mobile?
• Hur känns det att jobba i jQuery Mobile?
• Var det något som krånglade eller tog extra mycket tid?

#Revision history