Under hösten har jag ju läst webbdesign på distans vid BTH (Blekinge tekniska högskola). Min första reflektioon är att det har varit väldigt mycket att göra för att bara vara 7,5 hp, kvartsfart. De två tidigare åren har jag läst dramakommunikation och handikappvetenskap, båda två på halvfart. Trots det upplever jag denna kurs som betydligt tyngre och med mer att göra. Utöver att bygga en webbplats från grunden har det varit analys av webbplats, både ur ett användbarhets och tillgänglighetsperspektiv och ur ett perspektiv med fokus på handhållna enheter, en övning kring sökmotorer, SEO, search engine optimisation, och dess funktionalitet och lite andra småövningar.

Fokus har dock legat på webbplatsen, där vi har fått skriva en kravspecifikation och utforma storyboards, som är som ett bildspel där man visar vad som kommer att hända om något visst görs på den kommande webbplatsen, t.ex. om någon trycker på en länk eller skrollar neråt på sidan, + att bygga upp webbplatsen från grunden i Notepad eller någon annan texteditor.

Kursen började dock inte bra för mig, för den aktuella litteraturen fanns inte inläst hos TPB, där jag laddar ner all litteratur. En nyproduktion tar ca 6-8 veckor, men det skulle inte vara någon fara, enligt kursansvarig, för litteraturen skulle inte bli aktuell förrän i kursblock 2 och 3. Kursblock 2 och 3 visade sig dock börja efter bara några veckor. Så där stod jag, mitt i kursen, utan litteratur. Mina tidigare kunskaper kring HTML och CSS har därför kommit väldigt bra till pass genom hela kursen och jag har använt mig väldigt mycket av Webdesignskolan, som vi använde mycket när jag läste webbdesign på gymnasiet. En hel del googlande och läsande på internet har det också blivit för att kunna lösa vissa problem, som t.ex. hur måttenheten em ställer sig mot måttenheten px. Px, som är samma måttenhet som skärmupplösning anges i, angav jag nämligen alla mått i från början, men i kursmålen står det att måtten för webbplatsen ska anges i em, som är en relativ måttenhet som går att zooma in/ut, vilket inte px går att göra.

Ser man är det ju bara att testa sig fram där, tills det ser bra ut, men jag ser ju inte hur stor/liten texten, rubrikerna, listelementen etc. är, så jag måste veta exakt hur många em en px motsvarar. Jag hittade där en sida som var väldigt bra och som man kunde konvertera em till px eller tvärtom på. Där kom jag fram till att 19px motsvarar 1.188em.

Den biten ligger dock inne på CSS-formateringen av en sida, d.v.s. det dokument man använder för att fixa till layout, textfärg, form, teckensnitt, rubriker, listor, boxar osv.

Innan dess ska man dock koda själva innehållet på sidan och det gör man i HTML, Hypertext markup language, eller XHTML, Extensible hypertext markup language.

När man så småningom surfar in på den färdiga webbsidan försöker ju webbläsaren, eller browsern, läsa sidan och för att hjälpa den att göra det på rätt sätt kan man ange en doctype för dokumentet. Varje enskild sida på en webbplats utgör ju nämligen ett dokument, som man kan skapa i en helt vanlig texteditor, som t.ex. Notepad. Det finns i huvudsak tre olika doctypes, Strict, Transitional och Frameset.

På gymnasiet använde vi Transitional och Frameset, men i den här kursen är det XHTML Strict som gäller. Den stora skillnaden på Strict jämt mot transitional är att i Strict sker all formatering i ett separat CSS-dokument. Ingen formatering alls finns i själva HTML-koden. I Transitional är det tillåtet att lägga viss formatering direkt i HTML-koden, att lägga formaterande atribut till grundelementen, men i Strict är detta inte tillåtet.

För att koda en sida på en webbplats anger man först doctype. Sedan följer huvudet, eller "head", där man anger metataggar och annat, som hjälper bl.a. sökmotorer att hitta sidan, sidans titel och länkning till ett CSS-dokument, där all formatering för sidan finns. Allt detta är osynligt på sidan när man surfar in på den. Efter huvudet kommer däremot kroppen, eller body, och det är det innehållet man ser när man surfar in på en sida.

All text, alla rubriker och annat, s.k. element, har sitt eget märke i koden. Här följer några av de vanligaste elementen:
(<)p(>) - Vanlig brödtext, markerar också nytt stycke.
(<)h1-h6(>) - Rubriker, där h1 är störst och h6 är minst.
(<)ul(>) - Markerar en punktlista.
(<)ol(>) - Markerar en numrerad lista.
(<)li(>) - Anger varje listelement inne i listan.
(<)table(>) - Markerar en tabell.
(<)tr(>) - Markerar ny rad i tabell.
(<)td(>) - Markerar ny cell i en tabell.
(<)a(>) - Markerar en länk.
(<)img(>) - Markerar en bild.

Parenteserna ska bort, men tar man bort dem här syns inte de tänkta elementen i inlägget.

Utöver dessa vanliga element förekommer en rad andra elementt, som styr t.ex. tabellhuvud och tabellfot, radbrytning etc.

En enkel HTML-sida kan alltså se ut såhär:

(<)!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"(>)
(<)html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv"(>)
(<)head(>)
(<)title(>) Min blogg (<)/title(>)
(<)link href="style.css" rel="stylesheet" type="text/css" /(>)
(<)/head(>)
(<)body(>)
(<)ul id="vanstermeny"(>)
(<)li(>) (<a) href="http://schumacher4ever.blogg.se/" id="current"(>) Min blogg (<)/a(>) (<)/li(>)
(<)li(>) (<)a href="http://www.dalarnasstolthet.blogg.se"(>) Hockeybloggen (<)/a(>)(<)/li(>)
(<)/ul(>)

(<)h1(>) Min blogg! (<)/h1(>)
(<)div class="center"(>)
(<)p(>) Välkommen till min blogg, där jag skriver om mitt liv som elitidrottare, hur det är att inte se och annat smått och gott. (<)br /(>)(<)br /(>)
Jag heter Johan och är 23 år, älskar hockey och elitsatsar för att nå paralympics i Rio 2016. (<)/p(>)
(<)/div(>)
(<)/body(>)
(<)/html(>)

Alla öppnade taggar måste avslutas och det är särskilt viktigt i Strict, eftersom att man där inte kan starta nya taggar i redan öppnade taggar. De redan öppnade taggarna måste först stängas, annars ger det ett valideringsfel när man validerar, kontrollerar sidan för ev. kodningsfel enligt den angivna doctypen, koden. Ett valideringsfel kan göra att sidan inte visas korrekt i någon webbläsare, särskilt i äldre webbläsare. Därför är det viktigt att veta hur man kodar och att man har koll på vilka taggar som är öppna och att man är noga med att stänga alla taggar. Stänga taggar gör man, som ni ser ovan, med öppningstaggen, men med ett / före. Det går även bra att stänga vissa element i samma tag som öppningstaggen. Då sätter man ett / i slutet av taggen, se t.ex. radbrytningen (br) eller länkningen till css-dokumentet i head, (link). I link-elementet ser ni också flera andra saker, t.ex. "href". "href" anger vilket CSS-dokument som ska anropas för den aktuella webbsidan. Det är ett s.k. atribut till "link".

Man kan även använda atribut till t.ex. p eller h1-elementen, men inte om man använder Strict. Där läggs alla atribut, all formatering av de olika taggarna, i CSS-dokumentet och HTML-koden blir på så sätt ren från all form av formatering.

Av dokumentet ovan är det enda man ser, om man hade surfat in på sidan, en lista med två länkar till min blogg och till hockeybloggen, en rubrik och några rader om bloggen. Allt annat är osynligt.

Ni ser att det står "div" på några ställen i koden? Det är ett element som används för att lägga allt som är innanför den taggen i en box. Atributet "id" används sedan för att ge just den specifika boxen sitt namn. Det gör också "class". Skillnaden är att "id" bara går att använda en gång/sida, medan "class" går att upprepa på en och samma sida.

Hur boxarna ska se ut och vilka egenskaper de ska ha formaterar man sedan i CSS-dokumentet, tillsammans med all annan formatering på webbsidan. Där kan en kod för ovanstående HTML-dokument se ut såhär, med mina förklaringar under varje formaterat element:

body {
background-color: black;
margin: 0; padding: 0;
font-size: 10px; }

Först anges elementet, body, som ska formateras. Sedan är klammrarna viktiga för att koden ska bli korrekt. Även semikolonet efter varje formatering är viktigt. Det är som när man programmerar. Minsta lilla fel så fungerar inte koden som den ska. Det är samma sak här.

Body formaterar allt i hela dokumentet. Man kan säga att det är som ett första papper som läggs på bordet. "Background-color" anger inte helt oväntat hela dokumentets bakgrundsfärg. "Font-size" anger storleken på text etc. för hela dokumentet, medan "margin" och "padding" säger åt webbläsaren att inte ha någon kant mellan dokumentet och dess innehåll, såvida värdet 0 har angivits, så klart.

#vanstermeny {
width: auto;
list-style-type: none;
float: left;
text-decoration: none; }

Här formateras själva listan där de två länkarna till min blog och till hockeybloggen finns.

Nummertecknet, eller brädgården, framför "vanstermeny" är viktig när man använder atributet id, som jag har gjort på listan i HTML-dokumentet. Annars visas inte formateringen, för CSS-dokumentet vet då inte att det är den diven, eller boxen, som avses med formateringen.

"width" anger bredden på listan och är här angiven till "auto", för att styras av listans innehåll.

"Float" används för att bestämma var boxen, listan, ska ligga. När "left" anges flyter den till vänster och text och annat kommer till höger om den vänsterstälda boxen/listan.

"List-style-type" och "text-decoration" anger här att det inte ska finnas några symboler framför listans objekt, länkarna.

#vanstermeny a {
display: block;
width: auto;
background: red; }

Här är länkarnas grund i samma box som ovan, "vanstermeny", formaterade. Bredden är, precis som i listan, angivna med auto och "display" används för att tala om hur listan, eller menyn, som det nu blir, ska se ut. Värdet "block" gör listan till en meny i CSS och det är därför atributet "id="current" har angivits i HTML-koden. "Current" talar nämligen om att det är den länken man för tillfället är inne på.

Sedan ser vi också att bakgrundsfärgen till länkarna är satt till röd.

#vanstermeny a:link {
color: yellow;
font-size: 1.188em; }

Här är då själva länkarna i samma box, "vanstermeny" formaterade. Färgen är satt till gul, vilket alltså kommer ge en gul text mot röd bakgrund i menyn. Storleken på länkarnaär satt till 1.188em, vilket är något större än standardstorlek för text. När det handlar om huvudlänkar kan man dock med fördel göra de ännu större för att markera att de just är huvudlänkar.

#vanstermeny a:visited {
color: yellow;
font-size: 1.188em; }

Här formateras länkar som man har klickat på. I det här fallet är formateringen exakt densamma som för obesökta länkar, men man skulle t.ex. kunna sätta en annan färg på dem e.d.

#vanstermeny a:hover {
background: purple;
font-size: 1.199em; }

Här har vi formatering för länkarna i menyn när man rör muspekaren, hovrar, över dem. Då ser vi att bakgrunden på länken man håller muspekaren på kommer byta färg till lila och att texten blir något större, 1.199em, till skillnad från normaltexten, som var 1.188em.

#vanstermeny a#current {
background: yellow;
color: red;
font-size: 1.188em; }

Här är då den aktuella länken, den man för tillfället är inne på, formaterad. I det här fallet är det min blogg, som man kan se i HTML-koden ovan, och då kommer bakgrunden att vara gul, medan länktexten är röd. Alltså tvärtom mot de andra länkarna i menyn, där texten är gul och bakgrunden är röd.

Observera dock att all denna ovanstående länkformatering endast gäller de länkar i boxen "vanstermeny". Ska man formatera andra länkar på sidan får man göra det separat, då bara genom att ange "a { xxx}", med den aktuella formateringen mellan klammrarna.

.center {
background: white;
width: 60%;
padding: 0.938em;
margin-left: auto;
margin-right: auto;
text-align: left; }

Nu är vi inne på boxen "center", som omsluter all brödtext på sidan. Precis lika viktig som brädgården är för atributet id är punkten lika viktig för class-atributet. Annars vet inte CSS-dokumentet att det är just den boxen som avses med koden.

Här ser vi att bakgrunden är satt till vit, vilket ger en skarp kontrast mot den övriga bakrunden på sidan, som vi angav till svart uppe i "body".

Vi ser också att boxen ska vara 60% av sidans totala bredd. % är, likt em, också en relativ måttenhet som kan anpassa sig efter fönstrets storlek.

Padding anger att innehållet i boxen ska vara en liten bit från boxens kant och margin-left/right med värdet "auto" anger att boxen ska ligga i mitten på sidan. "Text-align" med värdet "left" anger att texten i boxen kommer att ligga i vänsterkant av boxen.

p {
font-size: 1.188em;
font-family: verdana, arial;
color: black; }

Här har vi då själva texten på sidan. Det är storlek, typsnitt och färg angivet, lite som ett vanligt Worddokument, men här måste man koda allt enligt CSS och dess regler. Det går inte att bara gå in i en meny och ändra det, som man kan göra i ett Worddokument.

h1 {
font-size: 3.000em;
font-family: italic;
color: yellow;
text-align: center; }

Slutligen har vi då rubriken, "Välkommen till min blogg", som här är formaterad med färg, typsnitt och storlek även den, samt att den är satt till att ligga i mitten av sidan med "text-align: center;".

Det var alla element som fanns med i den korta HTML-koden ovan. Har man med andra element, t.ex. en tabell, en punktlista eller en vanlig länk utanför menyn måste man formatera de också. Alla element som finns med på en webbplats måste formateras för att visas korrekt. Sedan är det inte säkert att de visas korrekt ändå, det kan bero på webbläsare, dess inställningar och hur uppdaterad den är.

Det här är, som ni märker, en hel djungel, men jag tycker det är intressant. Det kräver dock stor noggrannhet och att man är noga med boxnamn och annat, så man lätt kommer ihåg dem och lätt kan gå in och ändra något och samtidigt ha full kkoll på vad exakt det är man ändrar. Det gäller också att ha koll på den aktuella doctypen, så man vet vilka atribut som är godkända enligt just den doctypen osv. Det har hänt mig flera gånger att jag kodat fel och upptäckt att element och atribut jag har använt inte är godkända i XHTML Strict. Då har jag fåttt ta bort dem och leta efter nya lösningar. Störst problem hade jag med min Flasspelare. Jag letade på nätet efter en bra och lättkodad ljudspelare och hittade till en början ett gammalt forum där kod för ljudspelare angavs. Jag testade den och det fungerade, men den koden var så gammal, så jag ville ha något nyare. Då hittade jag Googles egen Flashspelare. Flera andra spelare fanns på samma webbplats, men Googles verkade bäst. Jag infogade den, men det kom inget ljud. Jag kontrollerade koden och allt verkade stämma, men ändå inget ljud. Inte förrän jag lade upp sidan på servern. Då fungerade det plötsligt. Problemet var dock att den kod som spelaren använde var baserad på elementet "embed". "Embed" är inte godkänt enligt XHTML Strict, vilket jag också märkte när jag validerade koden. Så, det var bara att börja pilla och ändra i koden så att den blev godkänd i XHTML Strict. Det lyckades och då var det guld och gröna skogar, men det är samma spelare som finns i inlägget nedan och det var flera av er läsare som inte såg någon spelare där. Så något är uppenbart fortfarande fel.

Ett annat problem var att jag först tänkte låta sidor öppnas i nytt fönster med atributet "target" till länkarna, men "target" är inte heller godkänt i XHTML Strict. Jag letade runt på nätet efter någon annan lösning, men det tycks faktiskt inte finnas någon för tillfället. Idag kan man oftast välja själv om man vill öppna sidan i nytt fönster, i samma fönster eller bara i ny flik. Ett alternativ är att använda någon form av Javasctript, men den världen är jag inte så hemma på, så jag avstod från det och tänkte om gällande min webbplatsidé. Istället för att öppna sidorna i nytt fönster lade jag till en tillbakalänk på varje sida som jag från början hade tänkt skulle öppnas i nytt fönster. Nu öppnas de i samma fönster, men det är lätt att klicka sig tillbaka igen.

Jag nämnde ovan att klammrar, semikolon och andra tecken är viktiga när man kodar sin CSS-mall. Det kan också vara av stor vikt när man sedan lägger upp sin färdiga hemsida på en server. I kursen nu har vi använt en Linuxserver och de är extremt känsliga för versaler och gemener etc. Det innebär alltså att om man råkar skriva en bokstav fel i adressen till sidan, ja, då hittas den helt enkelt inte. Har man t.ex. döpt ett HTML-dokument till om_mig, då går det inte att skriva "Om_mig" i adressen, för då hittas inte sidan. Alla tecken måste vara identiska i adressen med de på själva dokumenten som man har lagt upp på servern.

Andra servers än just Linux är inte lika känsliga för detta och de kan dessutom sköta behörigheten till alla dokument automatiskt. På Linuxservrar måste man ange behörigheten manuelt. Det handlar om läs, skriv oh exekuivitet för de olika dokumenten. Man kan antingen kryssa i och ur vanliga checkboxes, eller så skriver man bara in ett s.k. OCT-tal. För mappar ska detta oftast vara 0755 och för filer 0744.

Jag förstår om ni för länge sedan har tappat tråden och inte har orkat läsa enda hit, men detta är i alla fall ungefär vad jag har pysslat med under hösten. Jag vill dock poängtera, igen, att det har varit väldigt mycket att göra för bara 7,5 hp.

Nu har jag det sista av den sista delkursen kvar och sedan väntar nya kurser i vår. Jag kollade mitt antagningsbesked tidigare idag och det lutar i nuläget åt att det blir sociologi på halvfart och distans vid Högskolan i Kristianstad.