Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen: 50 För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet) Allmänna anvisningar: Nästkommande tentamenstillfälle: Tisdag 19 december Rättningstiden är i normalfall 15 arbetsdagar, till detta tillkommer upp till 5 arbetsdagar för administration. Viktigt! Glöm inte att skriva tentamenskod på alla blad du lämnar in. Lycka till! Ansvarig lärare: Telefonnummer:
Fråga 1. (2 p) Vad resulterar följande värde i för färg? #81D27E (Att enbart skriva om det är mycket eller litet av de tre färgerna ger 1 poäng. För full poäng vill jag veta vad resultatet blir.) Fråga 2. (3 p) Precis som i interaktionsdesign är det viktigt att tänka på syfte, målgrupp och sammanhang även inom webbdesign. Utifrån webbplatsen hb.se, ge exempel på just syfte, målgrupp och sammanhang. Fråga 3. (3 p) Beskriv olika tekniker som kan underlätta för synskadade (inte nödvändigtvis blinda) att ta del av webben. Fråga 4. (7 p) Rolf Molich tar i sin bok Webbdesign med fokus på användbarhet upp begreppet tänka högt test. a) Vad är ett tänka högt test? (1p) b) Beskriv utförligt vilka steg ett tänka högt test består av. (6p) Fråga 5. (4 p) Ange 5 åtgärder för att underlätta för skannbarhet på en webbsida. Motivera kortfattat ditt svar. Fråga 6. (5 p) Diskutera kring när i designprocessen som användbarhetsarbete bör utföras och varför. 2
Fråga 7. (6 p) Här nedan ser du en bild av en webbsida. De två styckena är identiska sånär som på att det första anropar en CSS klass och att bilden i det andra stycket av praktiska skäl har fått en viss bredd. Du ser också html koden för den här sidans body del. Utifrån informationen du får av bilden och texten, skriv CSS koden för att ge det här utseendet! Du ska alltså skriva CSS koden för body och för bilden i det första stycket. Observera att bilden i det första stycket ska formateras med CSS utan att ändringar görs i HTML koden. Att notera: Ramen är grå. Textstorleken är 16 px. Sidbredden är 800 px. Bildkoden ska enbart gälla för bilder inuti stycken med klassen artikelbeskrivning. Bilden har 1 em marginal till vänster och nedåt. Bildens bredd är 35 % av styckets bredd. <body> <p class="artbeskrivning"> <img alt="alpackor" src="img/kungslanda_alpackor.jpg" />Alpackan har en partåig fot med trampdyna och två klor. [ ] på 20 25 år. <em>(text från Wikipedia)</em></p> <img alt="alpackor" src="img/kungslanda_alpackor.jpg" style="width:35%;" />Alpackan har en partåig fot med trampdyna och två klor. [ ] på 20 25 år. <em>(text från Wikipedia)</em></p> </body> 3
Fråga 8. (5 p) Nedan finner du en hel webbsidas HTML kod. I koden har medvetet fem fel lagts in. Vilka är felen? Notera: Footern hade kunnat skrivas med elementet footer, men det är inte fel att göra som nedan. Tips! Det finns inga fel i meta elementen i head delen. Eventuella stavfel i innehållet räknas inte som fel (men däremot skrivfel i HTML koden). <!DOCTYPE html> <head> <title>lantliv Hem</title> <meta name="keywords" content="lantliv fastighetsbyrå, Lantliv, fastighetsbyrå, jordbruksfastigheter, Linda Ericsson, Marika Styrborn, fastighetsmäklare, Sjuhärad" /> <meta name="description" content="lantliv fastighetsbyrå för samman köpare och säljare när det gäller fastighetsaffärer på landet." /> <link href="main.css" rel="stylesheet" type="text/css" /> <body> <div> <a href="index.htm"> <img src="img/lantliv_logo.png" width="200" height="92" /></a><img ="img/bg_ang.jpg" alt="" width="690" height="96" /> <div class="vanster"> <a href="index.htm">hem</a><br /> <a href="objekt.htm">objekt</a><br /> <a href="kontakt.htm">kontakt</a><br /> <br /> <div class="hoger"> <h1> Välkommen till Lantliv fastighetsbyrå!</h1> Det finns många fastighetsmäklare och det finns också riktigt stora mäklarbyråer. Så varför välja oss?</p> Vi verkar inom en särskild nisch, gård och skog, och har ett eget synsätt:</p> <ul> <li>vi fokuserar på fastigheter utanför tätorter. Därför har vi stor erfarenhet av försäljning av hus på landet och känner väl till området Sjuhärad.</li> <li>vi förstår att längtan till landet kan vara stark, men att du som spekulant kanske inte vet vad allt innebär. Hos oss får du råd och inga frågor är dumma.</li> <li>vi förstår att det kan vara jobbigt att sälja sitt hem och försöker därför hitta bra köpare. Vi har också respekt för att det kan ta litet tid innan du hittar en köpare du är nöjd med. Vi stressar inte fram några affärer.</li> <li><strong>vi älskar djur, rent vatten och härlig luft! Om du är som vi, är vi som du!</strong></li> </ol> Vår logotyps "blomma" symboliserar det vi står för: Ett liv med sol, jord, vatten och kärlek.</p> Kontakta oss genom att <a href="kontakt.htm">klicka här</a>!<br /> Vi är självfallet medlem av <a href="http://www.maklarsamfundet.se" target:"_blank"> Mäklarsamfundet</a>.<br /> <br /> </p> <div class="footer"> <hr /> Lantliv fastighetsbyrå Trädgårdsgatan 22, 601 88 Borås 033 12 15 00 </body> </head> </html> 4
Fråga 9. (15 p) Din skotska vän hör av sig till dig eftersom du har gått en kurs i webbdesign. Din vän har en hästgård och undrar hur deras sida kan göras om till en informativ webbplats med flera sidor med lite olika innehåll. På hästgården erbjuds kurser i ridning, enstaka turridningstillfällen och även övernattningar för kortare eller längre tid. (Strunta i om texten i bilderna nedan säger något annat.) Utifrån bilderna nedan och din egen kreativitet, designa en skiss över en webbplats för din väns företag. Utgå från dina nyvunna kunskaper om grafik, användbarhet och tillgänglighet för webben. Ta även med sådant som du egentligen inte kan koda idag, dvs. sådant som kräver en databaslösning i botten men som vore bra att ha på den här typen av webbplats. Du behöver inte rita jättesnyggt, men det ska framgå hur du tänker. Webbplatsen ska ha minst fyra sidor en hemsida och minst tre sidor som visar valfria delar av webbplatsen. Du ska även ge ett skriftligt resonemang kring de delar du vill visa eller kanske kommentera ändå. Du behöver förstås bara rita malldelen ( masterfilen ) en gång. För den här uppgiften behöver du inte skriva någon HTML eller CSS kod, utan uppgiften handlar om grafik, användbarhet och tillgänglighet. Vad gäller grafiskt uttryck står det dig fritt att helt ändra form, färg, logga etc. (Observera poängen för denna fråga. Du förväntas ägna allra minst 45 minuter åt frågan.) Hemsidan (idag alltså bara en sida) 5
Här är tentafrågorna slut. Lycka till! 6