Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur): Rättad av: Datum:
Innehållsförteckning Problembeskrivning 3 Problemlösning 3 Reflektion 8 Bilagor 9
Problembeskrivning Denna uppgift består av att skapa en webbsida som både är funktionell och estetiskt tilltalande. Webbsidans syfte är att ge en mer givande upplevelse åt familjespel och videospel som har börjat bli tråkiga, men som man inte vill släppa av emotionella skäl. Webbsidan ska inspirera till att ge liv åt spelen med hjälp av att kombinera uppgifter och uppdrag från spelet i fråga med en utmaning, för sig själv eller tillsammans med andra. På webbsidan ska det finnas en tärning, en timer, en tabell med poäng och liknande, och en lista med förslag på utmaningar att anta, så att man inte behöver skaffa dessa resurser själv, för att sedan ligga och skräpa. I Head taggen finns bland annat de stilmallar som innehåller importerade typsnitt och den stilmall, eller CSS dokument, som bestämmer sidans utseende i stort. Här finns också bestämmelser för vilken titel som ska synas på fliken för webbsidan i webbläsaren. Det finns även en rad meta taggar som ger kort information om webbsidan, såsom dess beskrivning, vilka kodspråk som använts och hur sidan är publicerad. I Body finns först och främst en Div som kallas container som håller samman sidans delar fram till Footern som läggs under. Alla sidor på webbplatsen har en identisk navigationsmeny förutom ett par sidor där valet för Log In har bytts ut mot Profile eftersom dessa sidor hur som helst kommer kräva att man är inloggad för att nå dem. Tillsammans med de olika funktionerna på webbsidan finns förklarande texter för att det ska vara lätt för användaren att förstå hur sidan används. Webbplatsen har på något sätt använt sig av alla medier; texter, listor, bilder, tabeller, video, audio och länkar mellan platsens olika sidor. Det finns numrerade och icke numrerade listor, men på denna sida användes bara en onumrerad lista, dock så syns inte listdekorationerna som vanligtvis följer med då de har valts bort i CSS dokumentet. Ljudfilen som finns på sidan har ingen signifikant funktion, emn finns för till som en referens för hur ljud kan infogas på en webbsida. I ett HTML5 dokument visas denna version endast som <!DOCTYPE html>. Det som verkligen bygger upp webbsidan är de taggar som kallas för element selektorer, och det är alla som markerar en början och ett slut. I dessa är det vanligt att man anger en class eller ID som via CSS dokumentet kan ge elementet ett specifikt utseende. En class kan användas multipla gånger i samma HTML dokument, medan ett ID bara kan användas en gång. Ett element kan också ges både en class och ett ID om man så vill. Problemlösning Den färdiga hemsidan finns att hitta här: http://130.239.115.172/user307/labb%201%20html/main.html Den här webbsidan bestämdes skulle vara skriven på engelska eftersom det fanns planer på att publicera den internationellt. En webbsida behöver en index sida att börja på. Denna gjordes klart först, och var relativt enkel att genomföra eftersom det inte innehåller särskilt många delar eller element (se bild 3 och 4 i Bilagor). Här ges en kort förklaring vad
webbsidans syfte är, och hur dess innehåll kan användas. Koden för videoklippet längre ned är den inbäddningskod som man kan ta från youtube klippets sida: Nästa sida i ordningen är sidan där man som inloggad användare kan publicera sin egen idé till utmaning (se bild 5). Det finns olika val för kategorier där användaren skall kunna välja en från listan, och ett antal tags som man kan välja flera utav för att lättare specificera eventuella krav för den utmaningen. Lite längre ned finns knappen för att publicera det man skrivit. I nuläget blir man länkad tillbaka till Challenges sidan där alla tidigare utmaningar är desamma. I koden nedan visas en lista med knappar som har givits en klass som kallas greenbutton, och en rad checkboxar som bestämmer vilken eller vilka tags som utmaningen får. När webbsidan ges en JavaScript kod ska dessa publicera utmaningen i den valda kategorin och tagen. Bilden nedan visar hur man i CSS dokumentet definierar de gröna knapparna.
Challenges sidan är där alla anonymt publicerade utmaningar visas, antingen efter kategori, slumpmässigt valda eller alla. Där finns en lista för de olika tags som går att leta efter, men denna sökfunktion är ännu inte fungerande. Den här sidan ska i framtiden fungera som Twitter, där listan fortsätter i oändlighet, eller tills man når den allra första utmaningen. De utmaningar som blir synliga för alla ges varsin Section, för att separera dem från varandra, både funktionsmässigt och utseendemässigt. Nästa menyval är Timer, där man kommer till en sida som visar timerfunktionen, och en bildknapp som, även detta i framtiden, kommer att visa en pop up med en siffra som kan visas på en vanlig sex sidig tärning. Tärningen rullas en gång i taget. I text fältet ska man kunna skriva in antal minuter eller sekunder man vill att timern ska räkna ned, och dessa kan regleras om 30 eller 10 sekunder åt vardera håll med hjälp av pilarna. En power button startar timern när tiden är inställd klart. Eftersom Timer sidan än så länge mest vestår av bilder som kommer att bli till knappar, är CSS koden för sidomenyn kanske det mest utmärkande. Dess höjd är inställd på 93% eftersom det skulle skapa problem i gränssnittet om höjden skulle vara 100%, och skapa en onödig scrollbar som leder till outnyttjat tomrum. Sedan skapades både en inloggningssida och en sida för en inloggad användare. Inloggningssidan består av två rutor, där man antingen kan logga in på sitt färdiga konto eller skapa ett nytt. Log In knappen och Register knappen leder till profilsidan oavsett om fälten för email och lösenord inte innehåller något. På profilsidan hittar man lite statistik som är knuten till sin användare, som hur många poäng man har kammat ihop, hur många utmaningar man har skapat, osv. Det finns även information om sin inloggning, en knapp för att ändra inställningarna, logga ut och radera sitt konto. Koden nedan visar hur tabellen är uppbyggd. den första th taggen som syns är blank eftersom det inte behövs någon rubrik
där. I HTML ställs en tabell upp på det sättet att uppifrån ned ställs vänsterifrån till höger. Så för varje th har man ett cell innehåll åt höger, och för varje tr tagg har man en ny rad nedåt. Nedan redovisas de resultat från valideringar från https://validator.w3.org/nu/ :
Ovan: Index sidan. Här listas ett error om videolänken längre ned på sidan. Detta ignoreras eftersom iframe taggen är utvecklad för att fungera bra ändå, och detta har testats på hemsidan. Varningarna för heading i de olika sektionerna avfärdas också eftersom det inte var planerat att se ut på det sättet. Create sidan. Liknande situation här. Ovan: Challenge sidan. Timer sidan. Alla bilder har blivit givna en alternativ bild. Login och Profile sidorna ser likadana ut.
Reflektion Det var en trög uppgift att strukturera upp sidans utseende till så som jag ville, men när alla problem och krockar som hade att göra med Float och Margins blev arbetet mycket lättare. I min första version hade jag svart, rött, gult och vitt som mitt färgtema vilket var alldeles för ljus för min smak. Detta ändrades till ett grönt tema som är lite mer spännande och originellt, samtidigt som färgerna matchar varandra mycket bättre. Vissa saker hade jag kunnat göra bättre på sidan på en gång, till exempel som att färger ändras när muspekaren står ovanför en knapp, vilket kan göras i CSS. Själva HTML delen var lätt att lära om, eftersom jag hade tagit lektioner i det tidigare, men CSS är lite knepigare och inte lika straightforward som HTML. Margins och Paddings fungerar olika, och ibland kan kosen trassla till alla kommandon så att oförväntade saker händer. Jag tänker att man kanske skulle ha haft lite mer tid på sig att få i ordning allt sådant.
Bilagor Bild 1: Flödesschema Bild 2: Lo Fi för Main och Challenges sidan
Bild 3: Lo Fi för profil sidan. Bild 4: Index sidans övre del. Webbläsare: Chrome.
Bild 5: index sidans nedre del med en videospeare. Bild 6: Create a challenge sidan.
Bild 7: Challenge List sidan. Bild 8: Timer sidan.
Bild 9: Övre profil sidan. Webbläsare: Chrome. Jämfört med exemplet i den Lo Fi som framställdes finns inte längre knapparna vid sidan kvar, eftersom det beslöts att kontot inte behöver ha så många olika inställningar för en sådan enkel webbsida. Bild 10: Nedre profilsidan. Webbläsare: Chrome.
Bild 11: Nedre profilsidan. Webbläsare: Firefox. Det kan synas en liten skillnad i den nedre marginalen under den svarta knappen jämfört med samma sida i Chrome.