Kmom03: Dashboard

Vi jobbar vidare med mithril och att hämta data från api’er. Nu handlar det om att skapa mithril komponenter, som underlätter för att återanvända kod. Vi ska även titta på hur vi skapar ett grid system för att skapa en SPA-applikation som kan visas upp på enheter i fem olika storlekar.

Så här kan det se ut 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 11: CSS3 features in Responsive Web Design
   • Ch 12: Designing Mobile Applications

#Artiklar

1. Läs “What the heck is shadow DOM”.

2. Läs om vilka “use case som finns för shadow DOM”.

3. Skumma igenom “Googles artikel shadow DOM-v1”.

#Video

1. Det finns en videoserie kopplat till kursen, titta på videos som börjar på 3.

#Lästips

• Bekanta dig med mithril Components, som hjälper dig att skapa återanvändbar kod.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

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

1. Läs igenom artikeln “Ett enkelt grid för alla våra enheter”.

2. Läs igenom artikeln “En kalender med mithril components”.

3. Läs igenom artikeln “Lägg till en Splash screen och ändra ikon”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Dashboard”.

2. Lägg till en Splash screen och en ikon till din meapp.

#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.

• Hur är din generella uppfattning om mithril nu efter tre kursmoment?
• Hur känns det att utveckla för enheter med olika stora skärmar?
• Valde du flex eller float grid? Varför?
• Vilket API valde du förutom Github? Varför?
• Var det något som krånglade eller tog extra mycket tid?

#Revision history