Kmom01: Ramverk, innehåll, style

Låt oss kika på några av de mjukare aspekterna inom webbprogrammering. Det handlar om webbdesign och användbarhet. Men det handlar också om snabba sidladdningar, sökmotoroptimering, att skriva för webben och hur vi väljer att organisera webbplatsens material. Även om vi tittar på de mjuka aspekterna så är tanken att vi lära oss “hårda” tekniker för att jobba med de mjuka. Låt se vad det kan innebära i praktiken.

Vi ställer oss frågan hur vi bygger våra webbplatser för att underlätta för design och användbarhet? Hur kan vi som programmerare rent tekniskt förbereda webbplatserna för design och användbarhet? Vi vill vara förberedda när det kommer en webbdesigner, eller designer inom användbarhet, och berättar hur webbplatsen skall se ut. Då vill vi med enkla (rimliga) medel uppfylla deras visioner.

Denna kurs är främst en möjlighet att dyka in i CSS-kodande och att via CSS-preprocessorer använda möjligheten att strukturera och optimera vår CSS-kod. Det är också en möjlighet att få insyn i 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 me- och redovisa-sida. Webbplatsen bygger på ett PHP-ramverk som heter Anax. Den variant vi använder är en flat-file version där allt innehåll i webbplatsen skrivs i Markdown-filer.

Öppna ditt sinne och låt oss börja. I detta första kmom inleder vi med att installera en labbmiljö, läsa lite litteratur samt att skapa redovisa-sidan och ge den style via CSS. Vi väljer att göra redovisa-sidan i ett Git-repo och lägga upp den på 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.

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

#Introduktion

I videoserien “Kursen design (v2)” kan du kika på de videor som börjar på 0* och 1*. De ger dig en kort intro till kursen och kmom01.

#Labbmiljön

(ca: 2-4 studietimmar)

Det finns en längre beskrivning om kursens labbmiljö. Läs den om du är osäker på vad som skall göras, eller om detta är din första dbwebb-kurs.

Den korta varianten är att du behöver installera labbmiljön, uppdatera dbwebb-cli samt klona och initiera 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.

#Design med HTML5 och CSS3

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

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.

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

2. I kursen använder vi en Markdown-parser som heter PHP Markdown. Du kan läsa om dess extra bidrag till Markdown-syntaxen i referensdokumentationen.

   • The Syntax: Concepts
   • The Syntax: PHP Markdown Extra

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

#CSS

I detta kursmomentet jobbar vi med CSS. Läs följande.

1. I online boken “SMACSS Scalable and Modular Architecture for CSS” läser du följande korta kapitel för inspiration av en variant till hur man kan tänka när man skriver CSS i större sammanhang.
   • Introduction
   • Categorizing CSS Rules
   • Base Rules
   • Layout Rules

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Uppgifter

Följande uppgift skall utföras och redovisas.

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

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

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

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

• Är du sedan tidigare van att jobba i ramverk för att bygga webbplatser?
• Det blev en del nya verktyg och tekniker i labbmiljön och för att jobba med redovisa sidan, är du bekant med några av dem sedan tidigare?
• Har du några förutfattade meningar, eller kanske en etablerad övertygelse, inom design och användbarhet för webben?
• Hur kändes det att styla webbplatsen med CSS? Gick det bra?
• Vilken är din TIL för detta kmom?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

#Revision history