Tentamen i webbproduktion (7,5 hp)

Transkript

1 Umeå Universitet Institutionen för tillämpad fysik och elektronik Ulrik Söderström Thomas Mejtoft Tentamen i webbproduktion (7,5 hp) Denna tentamen består av tre sektioner, en gemensam och två profiler. Profilerna är anpassade utifrån de utbildningsprogram som ni läser och i tentamen framgår det tydligt vilka uppgifter som ni förväntas lösa och vilka ni kan hoppa över. Löser ni uppgifter som hör till en profil som ej är riktad till just ert utbildningsprogram kommer ni inte att erhålla poäng för dessa. Det är viktigt att ni anger vilket utbildningsprogram ni läser! Totalt antal poäng: 25p För poäng erhåller ni betyget tre. För poäng erhåller ni betyget fyra. För poäng erhåller ni betyget fem. Inlämnade uppgifter skall vara fullständigt lösta. Detta innebär att: * Varje steg i problemlösandet skall redovisas * Antaganden och approximationer skall vara så noggrant utförda att de inte ger upphov till tolkningssvårigheter.

2 Samtliga studenter Uppgift 0 (0p) Ange vilket utbildningsprogram ni läser vid. Fristående kursare skriver tentan som medieproducenter. Uppgift 1a (3p) Här nedan finns en bild på en webbsida. Beskriv hur 4 olika gestaltningslagar har använts vid designen av denna sida. Det finns flera lagar som kan användas. Här är exempel på några. Närhet Det är väldigt tydligt att kategorierna i menyn hör samman eftersom de ligger nära varandra. Område Rullistorna i toppen av huvudfönstret är inhängnade så det är väldigt tydligt att knapparna till höger hör samman med alternativen. Likhet Alla produktbilderr har sammaa storlek med liknande bakgrund och eftersom de är så lika syns det väldigt tydligt att de har samma syfte. Orientering Det finns nästan bara horisontella och vertikalaa linjer på sidan och produktbilderna är orienterade på samma sätt. Stängda figurer Om man tar de 8 bilderna på klockor så upplevs de somm en stängd figur eftersom det finns objekt i varje hörn. Enkelhet Förutom menynn som innehåller många alternativ är det en väldigt enkel sida med bilder och lite text om varje klocka.

3 Uppgift 1b (1p) Beskriv de två gestaltningslagarna Gyllene snittet och Optisk mittpunkt. Gyllenee snittet Sidan delas in i rutor (12.5%) Undvik att användaa den gula ramen r Undvika att lägga något enbart i mitten, detta kommer att upplevas som något väldigt tungt! Blåmarkerade områden är smarta att använda Optisk mittpunkt Innehållet läggs innanför den gröna rutann Stjärningspukterna mellan de grå linjernaa är de optiska mittpunkterna, rödaa linjerna blir stödlinjer Uppgift 2 (3p) Det finns flera olika sorters informationsstrukturer. Beskriv 4 olika strukturer och ge ett exempel på när det passar att använda dem. Några exempel på informationsstrukturer Linjär Sidorna följer på varandra Hierarkisk Ungefär som ett släktträdd tfe.umu.se -> kurser -> ht10 -> webbproduktion Matris t.ex. om programvaror finns för olika operativsystemm (OS) och man kan klicka sig vidare beroendee på vilket OS man använder Lager Informationen ligger samlade i olika lager och man får f fram denn genom attt flytta på ett lager Parallell Öppnar flera webbläsare påå samma gång Zoom Väldigt vanligt för nyheter. Enn liten ingress leder tilll hela artikeln Nätverk Det finns ingen riktig r struktur på länkarna, t.ex. Internet.

4 Uppgift 3 (3p) Inom ett webbprojekt har projektdeltagarna olika roller. Nämn 4 olika roller och beskriv vad personen med den rollen ansvarar för i ett projekt. Det finns väldigt många roller som projektdeltagarna kan ha. Här nedanför listar jag alla roller som jag gett rätt för samt två roller som ni har fått fel för. Webbutvecklare Koda sidan och även lite design av sidan Redaktör Bestämma över innehållet som ska finnas på sidan Informatör Informera allmänhet/bransch/kund/intresserade om hur projektet fortskrider Projektledare Leda arbetet för webbprojektet Grafisk designer/designer/grafiker Ansvarar för det visuella utseendet på sidan, färger, typsnitt, bilder, osv. Programmerare Ansvarar för kodning av sidan. Utvecklare Ansvarar för t.ex. att se till att rätt sorts funktioner används på webbplatsen. Textproducent Ansvarar för att skapa texterna som ska finnas på webbplatsen. Producent - Ansvarar för att skapa innehåll som ska finnas på webbplatsen. Webbredaktör Ansvarar för att sidan fungerar bra när den finns ute på Internet. Testare Ansvarar för att prova webbplatsen och hitta fel på den. Dessa två är felaktiga eftersom beställare samt medlemmar i styrgrupp/referensgrupp inte är med i projektgruppen. (Beställare) Är inte med i en projektgrupp. Projektgruppen har kontakt med beställaren, via informatör eller projektledare. (Medlem i styrgrupp/referensgrupp) Dessa är inte egentligen med i projektgruppen eftersom de är med i styrgrupp/referensgrupp Uppgift 4a (2p) Vilken färg kommer texten Det här är en tentamen att få? En förklaring till varför det blir så krävs för ett godkänt svar. Index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <div class="red"> <p id="blue">det här är en tentamen</p> </html>

5 stylesheet.css.red{color:red;} p#blue{color:blue;} Texten kommer att bli blå. Det blir så eftersom definitioner som görs längre in i ett element går före de som är definierade längre ut. id=blue går före class=red eftersom det är definierat efter. Uppgift 4b (1p) Vad är skillnaderna mellan en klass och en identifikator (id) i css? Ett id är unikt och kan bara användas en gång medan en klass kan användas flera gånger. En bra jämförelse för ett id är ett personnummer och för en klass är det mer generellt, t.ex. student som läser medieproducent. Uppgift 5 (1p) Du jobbar i ett större webbprojekt och ni är inne i sista fasen för att leverera och lämna över webbplatsen till kunden. Beskriv kortfattat och diskutera hur ni har gått till väga för att förenkla framtida underhåll för den grupp som tar över ansvaret för webbplatsen. Tänkbara svar på den här frågan inkluderar att ni har valt att separera innehållet från strukturen, dvs att ni har valt att bygga upp er sida med CSS och (X)HTML och på sätt skilt på design och struktur. Därefter så kanske ni har valt att använda er av SSI, vilket gör det möjligt att snabbare göra förändringar på sidan och enkelt att lägga till nya sidor på en webbplats. Uppgift 6a (1p) Redogör för minst tre olika sätt att göra OnPage-sökmotoroptimering. Bra svar kan inkludera metataggen keywords, metataggen descriptions, nyckelord tidigt i sidan, använd rubriker och korrekt struktur, undvik JavaScript, Flash och liknande som inte kan genomsökas av sökmotorer. Uppgift 6b (1p) Diskutera för hur man sökmotoroptimera med OffPage-metoder. Diskussioner som berör att försök få andra sidor med relevant och relaterat innehåll att länka till din sida och att försöka få sidan att finnas med i erkända länkkataloger är bra svar.

6 Uppgift 7 (3p) Nedan så ser ni en sida som har utvecklats för att använda sig av Server Side Includes (SSI). När ni validerar den här koden upptäcker ni att den inte validerar som korrekt HTML 4.01 kod. (a) Förklara vad det beror på och samtidigt hur SSI fungerar. (b) Visa dessutom på vad som ska ändras i koden för att man ska använda SSI korrekt och att den ska validera som korrekt kod. (a) koden validerar inte korrekt för att det är starttaggar (<!DOCTYPE > och <html>) och sluttaggar (</html>) i index.shtml. Dessa finns redan i header.shtml och footer.shtml (vilka inkluderas) och därigenom så blir det fel. (b) Allt ovanför  och allt nedanför  i index.shtml ska tas bort. index.shtml <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html>  <div id="huvudsida"> <p>nya böcker</p> <ul> <li><p>html och CSS för nybörjare<br>pris: 235 kr</p></li> <li><p>xhtml för utvecklare<br>pris: 357 kr</p></li> </ul>  </html> header.shtml <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>bokhandeln Flugan</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="sidhuvud"> <p><img src="logo.jpg" alt="bokhandeln Flugan"></p> footer.shtml <div id="sidfot"> <p>(c)2011 Bokhandeln Flugan</p> </body> </html>

7 Nät och kommunikationstekniker Uppgift 8 (1p) Beskriv vad som är skillnaden mellan en absolut och en relativ länk. En absolut länk består av hela sökvägen, <a href= > En relativ länk beror på var länken finns. Det blir skillnad på <a href= webbproduktion > beroende på om man finns på tfe.umu.se eller tfe.umu.se/kurser. Uppgift 9 (1p) Vad behöver läggas till i det här formuläret för att det ska skickas till ulrik.soderstrom@tfe.umu.se? <form method="post" enctype="text/plain" action= > Namn:<br> <input type="text" name="name" value="skriv ditt namn"><br> Text:<br> <textarea name="text" rows="6" cols="30">skriv...</textarea><br> <input type="submit" value="skicka"> </form> I form måste action= ändras så att det står action="mailto: ulrik.soderstrom@tfe.umu.se" Uppgift 10 (2p) Det finns 3 olika sorters listor i html. Beskriv hur de definieras i html-kod och ge exempel på hur de ser ut på en skärm. Oordnad lista <ul> Första elementet Andra elementet Tredje elementet Ordnad lista <ol> 1. Första elementet 2. Andra elementet 3. Tredje elementet Definitionslista <dl> Första elementet Beskrivning av första elementet Andra elementet Beskrivning av andra elementet Tredje elementet Beskrivning av tredje elementet

8 Uppgift 11 (2p) Beskriv vad de olika delarna i koden nedan har för funktion eller syfte. <a href="index.html"> <img src="home.gif" alt="home" height="50" width="50" align="middle" vspace="10" hspace="10"> Hem </a> a Visar att det är ett ankare, dvs. en länk. href="index.html" Är den adress om länken går till. img Betyder att det är en bild. src="home.gif" Namnet på bilden som visas. alt="home" Den alternativa text som visas om man för muspekaren över bilden. height="50" width="50" Storleken på bilden, höjd och bredd. align="middle" Bilden ska centreras. vspace="10" hspace="10"> Utrymmet som är tomt mellan bilden och texten, både i höjd- och sidled. Hem Den text som visas vid bilden, som också är klickbar. </a> Avslutar ankarelementet.

9 Medieproducenter Uppgift 8 (1p) Förklara skillnaden mellan tillgänglighet och användbarhet. Tillgänglighet: hur väl fungerar en webbplats (i det här fallet) för personer med funktionsnedsättningar. Användbarhet: Hur lätt är det att lära sig och använda en viss webbplats. Viktiga begrepp involverar lärbarhet (learnability), effektivitet (efficiency), minne (memorability), fel (errors), tillfredställelse (satisfaction). Uppgift 9 (2p) Beskriv varför man genomför användbarhetstester på en webbplats samt diskutera kring hur man genomför en användbarhetstest. Användbarhetstest är ett snabbt och enkelt sätt att hitta svårigheter i en webbplats och på sätt kunna öka tillgänglighet och användbarhet innan webbplatsen lanseras. Utförandet kan vara strukturerade intervjuer fokuserade på specifika egenskaper i en prototyp eller existerande webb. Deltagare ur målgruppen utför ofta en serie uppgifter som är typiska för webbplatsen. Den som utför själva testen gör anteckningar/ljudupptagningar/skärminspelningar, som sedan hjälper till att identifiera missförstånd, misstag och åsikter hos testpersonen. Många försöksobjekt ger en bättre bild över hur webbplatsen kommer att uppfattas. Uppgift 10a (2p) Förklara vad som har gjorts för att öka tillgängligheten på webbsidan nedan samt vad de markerade delarna i koden medför för funktion till webbsidan. Man har lagt till en alternativ bildtext (alt) för att en skärmuppläsare ska kunna berätta vad bilden föreställer. Man har lagt till snabbkommandon för tangentbordet (accesskey) för den som har problem att använda ett pekverktyg. I övrigt så har sidan bla strukturerats med listor för att göra det enklare att förstå strukturen på sidan. Uppgift 10b (1p) Beskriv minst ett sätt till att göra webbsidan mer tillgänglig. Man kan t.ex. göra så att rubriken på sidan har <h1> tag istället för <p> som nu. Man kan lägga till tabindex på sidan. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>bokhandeln Flugan</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="sidhuvud"> <p><img src="logo.jpg" alt="bokhandeln Flugan"></p> <div id="meny"> <p><a accesskey="b" href="bocker.html">butik</a> <a accesskey="v" href="villkor.html">villkor</a>

10 <a accesskey="k" href="kontaktupgifter.html">kontakt</a></p> <div id="huvudsida"> <p>nya böcker</p> <ul> <li><p>html och CSS för nybörjare<br>pris: 235 kr</p></li> <li><p>xhtml för utvecklare<br>pris: 357 kr</p></li> </ul> <div id="sidfot"> <p>(c)2011 Bokhandeln Flugan</p> </body> </html>