Webbutveckling02 [weuweb02]

Moment06 - Ramverk mobil & css

Förändrade kursplaner

Inför HT18 så förändrades kursplanerna för denna kursen och så länge denna rutan finns kvar så håller jag på att uppdatera detta moment.

Introduktion

Vi skall kolla på två ramverk som styr webbsidans utseende och användbarhet på olika klienter. Att du skall kunna bygga mobilvändliga hemsidor har vi pratat om i kursen men vi har inte kollat på något ramverk för detta. Förrän nu.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Webben som körmiljö för applikationer av olika slag.
  • Utvecklingsprocessen för ett webbtekniskt projekt. Målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
  • Märkspråk och stilmallar.
  • Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodellen som en teknik för ökad användbarhet genom progressiv förbättring.
  • Nationella och internationella riktlinjer för god praxis inom webbutveckling.
  • Uppnående av interoperabilitet genom att följa standarder och testa på olika användaragenter.
  • Applikationer som fungerar oberoende av val av användaragent, operativsystem eller hårdvaruplattform samt hur tillgänglighet uppnås utifrån att applikationerna ska vara användarvänliga och robusta även för användare med funktionsnedsättning.
  • Terminologi inom området webbutveckling.

Bootstrap & sass

Bootstrap är ett ramverk som hjälper dina webbapplikationer att bli mobilanpassade fullt ut. Bootstrap tar hjälp av css och javascript för att hela tiden anpassa applikationen så att den ritas upp så bra som det bara är möjligt oavsett om sidan visas upp i en dator, en padda eller i en mobiltelefon.

Sass är ett ramverk som gör det enklare att jobba med css eftersom du har möjlighet att dela upp css-delarna så att du bara inkluderar det som verkligen används och det finns också möjlighet att jobba med variabler vilket är skönt när några enstaka färger skall bygga upp hela applikationens utseende.

Tutorial

Detta moment kommer bygga kring en gratistutorial som finns på Udemy. Klicka på länken, https://www.udemy.com/bootstrap-4/learn/v4/content för att komma till kursen. Att registrera ett konto på Udemy är gratis och där finns det mängder av bra kurser som antingen är gratis eller kostar pengar.

Den tutorial som du skall jobba med innehåller först ett avsnitt där han förklarar vad kursen innehåller, vad och hur allt skall laddas ner och installeras innan han gör tre olika projekt för att visa på vad man kan göra med Bootstrap. Som sista del av kursen så gör han en applikation med sass.

Uppgift

Uppgiften är att genomföra kursen och bygga de fyra applikationer som byggs i kursen. Dessa fyra applikationer skall du senare lägga upp på din webbplats och utvärdera arbetet genom ett inlägg i din Wordpress.

Frivillig uppgift

Med dina nyvunna kunskaper i Bootstrap så kan du bygga om din samlingssida utifrån ramverket Bootstrap.

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp de tutorials som du arbetat med på din hemsida. Lägg varje projekt i en egen mapp.
  2. Länka sidan/sidorna från din samlingssida.
  3. I WordPress så reflekterar du över ditt arbete, berätta vilka uppgifter du gjort och varför. Resonera kring hur du tycker att det har gått att jobba med momentet.
    Frågestöd
    • Hur har det gått att arbeta med momentet?
    • Känner du dig tillräckligt redo att bygga nya webbplatser utfrån denna tekniken?