Webbteknik 1

I denna uppgift ska du skapa en webbplats för någon påhittad organisation (företag, förening, skola, etc.). Du får fritt välja område, men det får inte vara en sida om dig själv, utan du ska tänka dig att det finns någon extern "beställare". Det får heller inte vara en blomsterbutik, som används i föreläsningens exempel. Kontakta kursens lärare, om du är osäker på din idé till webbplats.

Du ska använda dig av Garretts designmodell med fem plan, så som den tas upp i föreläsningarna. Förutom att skapa webbplatsen, ska du också skriva en rapport, för att beskriva hur du tillämpat modellen samt visa resultat från en del av stegen. Rapporten ska inte vara någon komplett dokumentation, utan istället utdrag ur din dokumentation. Se krav på rapporten nedan. En stark rekommendation är att du skriver rapporten parallellt med att du utvecklar webbplatsen. De första delarna i rapporten (målgruppsanalys och kravspecifikation) ska vara underlag till den webbplats du ska utveckla.

Webbplatsen ska visa organisation, struktur, navigation och layout. Innehållet på webbplatsen måste vara tillräckligt omfattande, för att du ska kunna skapa en relevant struktur och navigering (både global och lokal) samt visa hur du organiserar och presenterar innehållet på sidorna. Det behöver dock inte vara något helt korrekt innehåll med långa välskrivna texter och proffessionella bilder. Du kan hitta på enkla texter, men det räcker inte med nonsenstexter som "Lorem ipsum", utan det måste vara relevant innehåll överallt. Då vi sedan granskar din webbplats jämför vi innehållet med vad du skrivit i din målgruppsanalys och kravspecifikation i rapporten.

Uppgiftsbeskrivning

Du behöver först bestämma område och syfte med webbplatsen. Gör en målgruppsanalys och ta fram en kravspecifikation. Därefter organiserar du innehållet, strukturerar webbplatsen och bestämmer hur navigeringen ska utformas. Sedan designar du din layout och övrig stil.

Du måste själv planera och dela upp arbetet med uppgiften. Det brukar alltid löna sig att göra en plan och bygga upp en modell av webbplatsen, innan man börjar skriva kod. Så du rekommenderas att gå igenom plan 1 till 4 i Garretts modell och där ta fram kravspecifikation, skisser på struktur och layout, m.m. under den första veckan. Sedan kan du andra veckan börja skriva HTML- och CSS-kod samt arbeta med innehållet. Resterande tid arbetar du med övrig stil och justeringar, samt gör användartest (VG-krav). Börja med att skapa din egen plan för arbete med uppgiften.

Se vidare beskrivningar och tips i rutorna till höger (eller längst ner, om du tittar i mobilen). Läs också nedanstående krav noga och fråga läraren, om något är oklart.

Krav och bedömningskriterier

Kraven är i denna uppgift uppdelade i krav för betyget G respektive VG. Alla krav för G är obligatoriska. Kraven för VG är valfria, men för att kunna erhålla betyget VG, måste alla krav (både de för G och VG) vara uppfyllda i din redovisning. Det görs också en kvalitativ bedömning av hur pass väl du uppfyllt kraven.

Krav på rapporten

Då redovisningen granskas börjar vi med att läsa rapporten, för att sedan kunna jämföra med det som finns på webbplatsen. Därmed är rapporten en viktig del av redovisningen. De två första avsnitten 1. Syfte och målgrupp och 2. Kravspecifikation utgör förberedelser till webbplatsen och du tar fram dessa först, för att sedan använda dem som arbetsplan för webbplatsen. Därmed påbörjar du också rapporten som en första del av arbetet i uppgiften.

Rapporten ska inte vara någon fullständig dokumentation, utan endast innehålla de delar som tas upp nedan. Ladda ner mall för rapportens HTML-dokument. Efter uppackning får du filen rapport.html, som du lägger i din mapp för U3. Lägg in en länk till rapporten på startsidan på din webbplats.

Se även kommentarer i mallens HTML-kod, som ger ytterligare förklaring till vad du ska ta med i rapporten och på vilket sätt det ska skrivas.

rapport.zip

• Krav för G:

  • Rapportens innehåll:

    1. Syfte och målgrupp — beskriv webbplatsens syfte och målgrupp samt resultatet av målgruppsanalysen i form av en lista med användarnas behov.
    2. Kravspecifikation — en lista med konkreta, mätbara krav uppdelat under rubrikerna Innehåll och Funktion.
       • Se vidare info i rutan "Kravspecifikation" i sidospalten.
    3. Beskrivning av arbetet — beskriv översiktligt hur du arbetat med skapandet av webbplatsen. Ta med det som du själv tycker är väsentligt att lyfta fram.
       • Utför du VG-kraven finns det ytterligare krav på detta avsnitt längre ner.
    4. Bilder — en lista där du beskriver vad du gjort, då du redigerat bilderna i ett bildredigeringsprogram, för att anpassa dem till användning på din webbplats.
    5. Utvärdering mot kravspecifikationen — gå igenom din kravspecifikation punkt för punkt, där du kort motiverar hur kravet uppfyllts eller varför det inte är uppfyllt.

  • Rapporten ska vara en webbsida (använd ovanstående mall). Lägg in en väl synlig länk till din rapport på din webbplats startsida.

  • Rapporten ska skrivas på svenska.

• Krav för VG:
  Utöver ovanstående krav för G, gäller även följande för VG:

  • Rapportens innehåll:

    1. Beskrivning av arbetet — i beskrivningen ska det tydligt framgå hur du använt dig av Garretts modell. Ta med specificerade referenser till boken, för att styrka din beskrivning.
       • Se vidare info i rutan "Referenser" i sidospalten.
    2. Bilder — ange även var du använt dig av picture-elementet.
    3. Användartest — beskriv hur du tillämpade "Tänka högt"-metoden, vad resultatet blev och vilka förändringar du gjort på webbplatsen utifrån testresultatet.
       • Se vidare info i rutan "Användartest" i sidospalten.

Eftersom rapporten ska skrivas som en webbsida och innehålla många punktlistor, går det inte sätta några gränser på omfattning i antal sidor eller ord. Men för att ändå få en uppfattning om en rimlig gräns, så motsvarar det ungefär 3-4 A4-sidor för G-delen och ytterligare en A4-sida för VG-delen.

Krav på webbplatsen

Du ska i denna uppgift skapa en ny webbplats, så CSS-koden får inte vara en kopia av CSS-koden för uppgift U1 eller U2. Layouten får alltså inte vara exakt densamma som i tidigare uppgifter. Webbplatsen får heller inte vara en kopia av de webbplatser som skapas i föreläsningar och laborationer, där endast innehållet byts. Du måste skapa egen kod för struktur och stil, men kan naturligtvis ha vissa delar utformade på samma sätt som i tidigare uppgifter eller kursens exempel.

• Krav för G:

  • Webbplatsen ska ha en väl genomtänkt organisation, struktur, navigationssystem och layout, motiverat utifrån vad som tas upp i kursen.

  • Det ska finnas både global och lokal navigering.

    • Lokal navigering behöver inte finnas på alla sidor, men åtminstone någon avdelning på webbplatsen måste ha tre eller flera sidor och lokal navigering, för att gå mellan dem.

  • På startsidan ska det finnas en länk till sidan med rapporten.

  • Innehållet ska vara tillräckligt omfattande och uppdelat på flera sidor, för att visa hur du organiserar och strukturerar det samt för att motivera både global och lokal navigering.

  • Både text och bilder ska finnas med. Bilderna ska vara redigerade i ett bildredigeringsprogram, så att de är anpassade för användning på din webbplats.

    • Se vidare i rutan "Material på webbplatsen" i sidospalten.

  • Det ska finnas ett formulär med några olika HTML-element för inmatning.

    • Det räcker inte med endast textfält och skicka-knapp, utan det måste innehålla element för några olika typer av inmatning.
    • Det kan t.ex. vara ett kontaktformulär.
    • Det får inte vara en kopia av formuläret i lab L7.
    • Formuläret behöver inte ha någon bakomliggande funktion, så det behöver inte skickas någonstans.

  • Sidornas layout skapas på valfritt sätt.

    • För G är det inte nödvändigt att ha en responsiv design, utan det krävs endast för VG, se krav längre ner.

  • CSS-koden för layout och grundläggande stil ska finnas i en gemensam CSS-fil, som det länkas till från samtliga HTML-filer.

    • Finns det behov av att på någon eller några sidor ha ytterligare en CSS-fil för något på dessa sidor, så är det tillåtet. Men det får då inte vara någon upprepning av koden från den gemensamma CSS-filen. Har du flera CSS-filer, ska samtliga tas in med link-taggar i HTML-koden, alltså ej med import-kommandon i CSS-koden. Undantag är om du inkluderar ett typsnitt (t.ex. från Google fonts). Då får import-kommando användas. Men för egna CSS-filer får du inte använda import, eftersom det försvårar granskningen av koden.
    • Det får inte finnas någon CSS-kod i HTML-filerna, utan all CSS-kod ska ligga i den separata CSS-filen.
    • Rapporten är ett undantag till ovanstående. Den har en CSS-kod som ligger i HTML-filen, så den ska inte länka till din CSS-fil.

  • Innehållet på webbplatsen ska vara på svenska eller engelska.

  • Allt måste fungera i Firefox, som är den webbläsare vi använder, då redovisningen granskas.

• Krav för VG:

  • Sidornas layout ska skapas med grid och/eller flexbox.
  • Webbplatsen ska ha en responsiv design och fungera i olika skärmstorlek, från 300px och uppåt.
  • På någon sida ska picture-elementet användas för att specificera olika bilder för olika utformning av layouten.
  • Genomför ett användartest med metoden "Tänka högt" (Thinking out loud) och minst tre testpersoner.
    • Se vidare info i rutan "Användartest" i sidospalten.

Se även de allmänna kraven för uppgifterna.

Redovisning

Då du publicerat dina sidor på Netlify går du in på den url du får där. Kontrollera noggrannt att allt ser ut som du vill. Gå också igenom ovanstående kravlista och checka av att alla krav är uppfyllda - både för rapport och webbplats.

Redovisningen ska endast bestå av en länk med den url som du fått på Netlify. Du redovisar genom att skapa länken i ditt svar i MyMoodle.

Redovisa innan deadline. Uppgifterna stängs efter deadline och öppnas inte för ny redovisning förrän till nästa deadline. Missar du deadline, får du alltså vänta till nästa deadline för att redovisa uppgiften. Se datum för deadlines i veckoplan / schema.