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.

Denna kurs erbjuder möjligheten att dyka in i CSS-kodande och att med hjälp utav SASS strukturera upp och optimera sin CSS-kod. Den ger också insyn till vad som är grundstenarna för “god design”. Genom kursen försöker vi finna tekniska sätt, för en programmerare, att jobba och implementera “god design” i en webbplats. Vi studerar också vissa aspekter av begreppet användbarhet som påverkar användarens upplevelse av webbplatsen.

För att komma igång snabbt så använder vi en befintlig webbplats som grund till vår portfolio. Webbplatsen bygger på ett PHP-ramverk som heter Pico. Det är ett tunt ramverk som tillåter oss att lägga upp sidor skrivna i Markdown och hantera vår layout med hjälp utav Twig, som är en påbyggnation av HTML.

I första kursmomentet inleder vi med att installera labbmiljön, läsa lite kring teknikerna vi ska använda samt skapa en portfolio och ge den style med hjälp av CSS. I slutet av kursmomentet ska portfolion publiceras till studentservern och till Github.

Under kursens gång så kommer du att introduceras till ett par tekniker som är bra att ha för en webbprogrammerare. En av de är versionshantering med Git och Github.

Såhär kan det se ut när du är klar med kmom01.

(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.)

#Labbmiljön

(ca: 2-4 studietimmar)

Den korta varianten är att du behöver installera labbmiljön. Vilket innebär de tre artiklarna Webbserver, PHP och databaser, PHP i pathen och PHP och Composer. “Installera nodejs och npm” för att dbwebb test kommandot kan fungera.

Sedan uppdaterar du dbwebb-cli, klonar och initierar kursrepot.

# Gå till din katalog för dbwebb-kurser
dbwebb selfupdate
dbwebb clone design
cd design
dbwebb init

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Bläddra lite i kursboken “The Principles of Beautiful Web Design”. Bara för att bekanta dig med den, vi börjar läsa i samband med nästa kmom, men det skadar inte att ligga ett kapitel före.

Både tredje och fjärde utgåvan av boken fungerar, materialet är uppdaterat och fjärde upplagan är något längre. Boken, i sin tredje utgåva, finns tillgänglig online via BTHs bibliotek.

#Design med HTML5 och CSS3

Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.

• Grunderna
• Responsivitet

I guiden tittar vi på hur vi kan använda CSS tillsammans med HTML för att implementera designprinciper. I sektionen Grunderna tittar vi på grundläggande struktur för HTML och på vilka sätt vi kan applicera styling med CSS. I Responsivitet tittar vi på hur vi med hjälp av media queries kan anpassa en webbplats för både stora och små enheter.

#Markdown

Läs följande för att lära dig grunderna i textformatet Markdown. Markdown är ett populärt format för att låta användaren skriva text som är läsbar för ögat men ändå enkel att konvertera till HTML med en parser. I kursen kommer du att skriva dina webbsidor med Markdown.

1. Kika på vad Markdown innebär genom att läsa John Grubers introduktion till Markdown. För att testa själv så öppnar du en Gist och skriver i Markdown, det gör att du kan testa olika konstruktioner under tiden som du läser om dem.

#Git & GitHub

I kursen introduceras Git och GitHub. Git är ett versionshanteringssystem för kod och GitHub är en webbplats där man kan ladda upp sitt Git-repo och använda extra tjänster.

1. Bekanta dig kort med dokumentation på Gits hemsida. Där finner du referensinformation, en onlinebok om Git och ett antal korta videor som ger dig grunderna till vad Git och versionshantering handlar om.

2. Skaffa dig ett konto på GitHub. Du behöver det för att ladda upp och publicera ditt Git-repo. Det är gratis med konto och att ladda upp publika repon.

3. Ägna en stund åt att bekanta dig med webbplatser för GitHub. Du kan även kort och översiktligt kika på de guider och videor som finns för GitHub. Notera att de täcker så mycket mer än vad vi kommer jobba med i kursen så det kan räcka att du endast noterar att det existerar guider för hur man jobbar med GitHub.

Förutom ovanstående finns video-spellistan “Introduktion till git”:

#Videoserie

Kursen har en videoserie för hur man kan jobba med Pico:

PT-videos

Under kursens gång behandlar vi även mer mjuka delar av programvaruteknik. I denna första videon i PT-video-serien berättar Emil om olika roller och hur man kommunicerar på olika sätt.

#Hållbarhet

Som en del av BTH’s uppdrag har 5 perspektiv på utbildning definierats: Hållbarhet, forskningsanknytning, samverkan, internationalisering och jämställdhet. Perspektiven integreras i undervisningen för att belysa dessa viktiga områden.

I design kommer vi fokusera på perspektivet hållbarhet och vilken roll vi som programmerare har i den sammanhangen.

I kursmoment 04, 05 och 06 kommer vi se några praktiska exempel på hur vi som programmerare kan skapa en mer hållbar webb. För att vi har tillräcklig förståelse för vad hållbarhet innebär kommer vi under kursmoment 01-03 skapa oss en grundförståelse om hållbarhet och vad det innebär.

I följande video beskriver professor Johan Rockström jordklotets nuvarande status och hur vi påverkar det.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övningar

Följande länk är en genomstegning av Portfolio-sidan. Eget testande uppmuntras.

1. Läs igenom och testa med artikeln “Vad är Pico?”. Artikeln ligger till grund för att du ska förstå Pico’s upplägg.

2. Jobba igenom guiden “Kom igång med Git och GitHub”. Denna guide introducerar dig till Git/GitHub, ett verktyg som är branchstandard för att versionshantera kod.

#Uppgifter

Följande uppgift skall utföras och redovisas.

1. Lös uppgiften “Bygg en portfolio sida”. Du skall bygga en portfolio-sida som du taggar och publicerar på GitHub. Spara allt under me/portfolio.

2. Försäkra dig om att du har gjort dbwebb publish portfolio och taggat din inlämning med version 1.0.0 (eller högre) samt pushat repot inklusive taggarna till GitHub.

#Resultat & Redovisning

(ca: 1 studietimme)

Läs instruktionen om hur du skall redovisa.

Kom ihåg att publicera din portfölj till GitHub. Använd nedanstående kommandon i terminal när du står i `me/portfolio:

git push
git push origin --tags

Publicera sedan till studentservern med följande kommando:

dbwebb publish me

Gör Quiz på Canvas och lämna sedan in din inlämning i den nu upplåsta uppgiften. Länka till din portfölj på studentservern som en del av din inlämning.

#Testa din inlämning

När du är helt klar med uppgiften så är det ett par saker som du kan kolla för att testa din inlämning. Detta testar inte allt, men det är ett minimum av ett flöde som skall fungera.

• Kolla uppdaterad startsida
• Uppdaterad logga
• Kolla Github-länk i footer (profil eller repo, båda ok)
• Eget tema under portfolio/theme
• github.txt i me/portfolio
• Github
  • Kolla commits och taggar

#dbwebb test

Kommandot dbwebb test kommer användas som utgångspunkt för rättningen. Du kan göra följande om du vill testa på liknande sätt som de som rättar:

# stå i roten av kursrepot (dbwebb-kurser/design)
dbwebb update
npm install
dbwebb test kmom01

#Revision history