Kursen design (v3)

Kursen Teknisk webbdesign och användbarhet, a.k.a. design, lär webbprogrammeraren att tekniskt förbereda sin webbplats för design och användbarhet.

Kursen syftar till en orientering inom områden design och användbarhet, specifikt för tillämpningsområdet webb. Kursen har tekniken som utgångspunkt, där olika tekniker introduceras och används för att underlätta webbdesign och användbarhet för webbplatsen med syftet att skapa en korrekt och användarvänlig webbplats.

#Förkunskaper

Det formella förkunskapskravet är:

Genomgången kurs i Webbteknologier 7.5hp.

#Innehåll

Kursen omfattar följande områden:

• Färglära och färgsättning av en webbplats
• Typografi
• Lagar och regler kring webbplatser
• Anpassa webbplats för funktionshindrade
• Grid-baserad layout
• CSS-konstruktioner för style med CSS/SASS
• Bygga tema till webbplats
• Använda PHP-ramverk för att skapa och designa webbplats

#Mål

Kursens mål är indelade i undergrupper.

#Kunskap och förståelse

Efter genomförd kurs skall studenten:

• påvisa grundläggande förståelse för teknisk webbdesign och användbarhet genom att skriftligen beskriva och sammanfatta erfarenheter och observationer från övningar och projekt.
• påvisa goda kunskaper i att anpassa och designa en webbplats via praktiska övningar och projekt.

#Färdighet och förmåga

Efter genomförd kurs skall studenten:

• självständigt utveckla, dokumentera och presentera ett projekt inom webbdesign och användbarhet.
• ha god praktisk förmåga att hantera de tekniker, verktyg och miljöer som används för att designa och göra en webbplats användbar.

#BTH’s perspektiv i utbildningen

Blekinge Tekniska Högskola har de senaste åren utvecklat en vision som ska genomsyra hela verksamheten:

En bättre värld genom kunskap, kompetens och innovation inom digitalisering och hållbarhet.

Som en del av visionen och strategin för att tillämpa vision har BTH definierat fem perspektiv på utbildning:

• Samverkan​
• Hållbarhet
• Jämställdhet
• Internationalisering
• Forskningsanknytning

Vi kommer i denna kurs fokusera på perspektivet hållbarhet och sedan får ni även en introduktion till perspektivet forskningsanknytning.

I början av kursen introduceras vi till perspektivet hållbarhet för att i slutet av kursen ha förutsättningar för att kunna analysera hur vi som programmerare kan arbeta hållbart.

#Kursmoment

Kursen är uppdelad i kursmoment där varje kursmoment uppskattas till 20h studerande i form av programmering, undersökning, läsande, övningar, uppgifter, redovisning och eftertanke.

#Kmom01: Ramverk, innehåll, style

Vi ska ta oss en titt på den mjukare delen av webbprogrammering, webbdesign och användbarhet. Det handlar också om snabba sidomladdningar, sökmotoroptimering, att skriva för webben och hur vi väljer att organisera webbplatsens material. Vi ska även kolla över de tekniker som används för att uppnå detta.

Instruktion till kursmoment 01.

#Kmom02: SASS och typografi

Vi går igenom hur man kan designa med SASS, som är en preprocessor till CSS. Vi lär oss grunderna, hur vi bygger CSS-filer ifrån våra SASS-konstruktioner.

Vi går även igenom fonter, vad man ska tänka på kring valet av font, var man kan hitta fonter och hur man använder dem tillsammans med SASS. Vi nuddar även ikoner, skillnaden mellan webbläsarna och begreppet minifiering.

Instruktion till kursmoment 02.

#Kmom03: Layout

Med hjälp utav CSS-grid och flexbox går vi igenom hur man kan lägga upp sin layout, vad man ska tänka på och hur de båda teknikerna används.

Vi går även igenom vad polyfill är, hur man kan placera saker utanför sin layout och webbläsarens devtools, som är webbutvecklarens bästa vän.

Instruktion till kursmoment 03.

#Kmom04: Färg

Vi tittar på färger, färghjulet och olika tekniker för att kombinera färger i ett sammanhang, så kallade färgscheman.

Vi jobbar med tekniker kring hur en webbplats kan färgläggas. Men innan det funderar vi igenom om de vanligaste webbplatsern är färgglada eller inte? Det kan vara så att många webbplatser har ett begränsat användande av färger. Om det stämmer, hur kan det komma sig?

Instruktion till kursmoment 04.

#Kmom05: Bilder

Låt oss ägna ett kursmoment åt att testa runt med bilder, bildverktyg och bildformat samt hur vi publicerar bilderna på en webbplats, inklusive responsivitet.

Vi skall se hur vi kan använda bilder för att skapa “bildtunga” teman, här är bilderna en viktig ingrediens i webbplatsens tema.

Instruktion till kursmoment 05.

#Kmom06: Tillgänglighet och prestanda

Vi arbetar med verktyget Google Lighthouse för att på ett tydligt sätt kunna se hur vi kan förbättra vår hemsida.

Instruktion till kursmoment 06.

#Kmom07/10: Projekt och examination

Avslutningsvis gör du ett projekt enligt en specifikation. Projektet är det sista som du gör och tillsammans med alla redovisningar som finns på din me-sida så används detta som underlag för att examinera dig från kursen.

Instruktion till kursmoment 10.

#Kurslitteratur

Måste jag skaffa kurslitteraturen?

#Kurslitteratur

Som kurslitteratur har jag valt följande böcker, tillsammans med ett antal artiklar som finns tillgängliga på nätet.

Det finns läsanvisningar i samband med varje kursmoment.

• The Principles of Beautiful Web Design

#Övrig litteratur

I varje kursmoment kan det tillkomma läsanvisningar i till exempel artiklar, manualer och webbmaterial.

#Läsanvisningar

Här följer en sammanställning av de läsanvisningar till kurslitteraturen som ges i varje kursmoment.

#Rekommenderad studieplan

Kursen har en rekommenderad studieplan som visar en översikt över kursens olika moment och när de i tiden bör utföras för att studenten skall ligga i fas med kursens planering.

I studieplanen visas när rättning sker av respektive inlämnat moment samt när det finns möjligheter att göra restinlämningar.

Läs mer om den rekommenderade studieplanen.

#Lektionsplan

Det finns en lektionsplan som visar en detaljplanering för undervisningen i kursen, vecka för vecka.

Läs mer om lektionsplanen.

#Handledning

Förutom den planerade undervisningen enligt lektionsplanen så kan du få hjälp och stöd i kursens chatt och via kursens Github Issues. Chatten lämpar sig för korta enkla frågor och issues för mer utredande och längre frågor och svar. Om du inte får svar i chatten så rekommenderar vi att du skapar en Github Issue.

Läs om lärarstöd och handledning.

#Betygsättning

Det finns ett särskilt dokument som beskriver hur bedömning och betygsättning sker.

#Ladok

Enligt kursplanen finns ett antal ladokmoment och de är kopplade till kursens kursmoment enligt följande.

Den sista inlämningen bestämmer kursens slutbetyg vilket utfärdas när samtliga moment godkänts.

Läs mer om rapportering av resultat.

#Kursvärdering och kursutveckling

Det finns ett särskilt dokument som beskriver hur arbetet med kursutvärderingar och kursutveckling sker. Det är oerhört viktigt för mig att du säger till vad du tycker om kurs och kursmaterial, du kan alltid hojta till i både forum, chatt eller mail.

Läs om hur vi jobbar med kursutvärdering och kursutveckling.

#Kursplan

Kursplanen är kursens formella dokument som fastställts av högskolan. När kursen utvärderas görs det mot kursplanen. I kursplanen kan du läsa om kursens klassificering, syfte, innehåll, mål, generella förmågor, lärande och undervisning, bedömning och examination, litteratur, mm.

Du hittar kursplanen genom att söka på kurskoden PA1436 via BTH’s hemsida.

#Versioner av kursen

Om du påbörjat den äldre version av kursen så skall du också slutföra denna versionen av kursen (eller göra om den nya kursen från start). Alternativt rådgör du med den som är kursansvarig.

För tillfällen från höstterminen 2020 så finns kursmaterialet till design (v3) här.

För tillfällen från hösten 2018 till och med hösten 2019, så finns kursmaterialet till den kursen i design (v2).

För tillfällen fram till och med höstterminen 2017, så finns kursmaterialet till den kursen i design (v1).

#Revision history