Webbteknik 1

Uppgift 2

Skapa en responsiv webbplats

Du ska, liksom i föregående uppgift, även i denna uppgift skapa en webbplats med svar på tre frågor. Webbplatsen ska innehålla tre sidor med en fråga och svar per sida. Skillnaden jämfört med uppgift 1 är att det nu ska vara en responsiv layout på sidorna. Du ska ha en layout som anpassar sig till olika skärmstorlekar, genom att förändringar görs i media queries i CSS-koden.

Frågorna

Följande är de tre frågor som ska finnas (tillsammans med dina svar) på webbsidorna. En fråga (inkl. delfrågor) och svar per sida.

Det är lämpligt att ta en fråga per vecka, eftersom det då stämmer med kursens veckoplan, där de olika områdena introduceras i föreläsningarna. Du bör kunna få fram svar på fråga F4 i föreläsning 4, fråga F5 i föreläsning 5 och fråga F6 i föreläsning 6.

F4. Layout

  1. Förklara vad CSS-egenskaperna justify-content respektive align-items har för effekt när man använder flexbox för layout.
  2. Vad är en media query och vad används den till?

F5. Navigering

  1. Beskriv vad global respektive lokal navigering är.
  2. Beskriv vad supplementary respektive courtesy navigering är.
  3. Länka till någon valfri webbsida (dock ej kursens webbplats eller den webbplats som används i föreläsningens exempel) och ange var på sidan man kan hitta ovanstående fyra typer av navigering.
    • Om du inte hittar alla fyra typer av navigering på samma sida, kan du länka till flera sidor.

F6. Målgruppsanalys och kravspecifikation

Denna fråga handlar om en del av det som skapas på plan 1 och 2 i Garretts modell.

  1. Ett resultat i målgruppsanalysen är "användarnas behov" (user needs). Beskriv vad detta är och vad det ska användas till.
  2. I en kravspecifikation är det viktigt att kraven skrivs, så att de är mätbara. Vad bör man tänka på då man formulerar ett krav, så att det är mätbart?
  3. Vad är skillnaden mellan krav på innehåll och krav på funktionalitet? Ge exempel på ett mätbart krav av respektive typ.

Krav och bedömningskriterier

Kraven blir ganska lika de som finns i uppgift 1. I nedanstående lista är det endast kraven på CSS-koden som skiljer sig från det som finns i uppgift 1. Du behöver kanske ändå strukturera din HTML-kod annorlunda, för att kunna uppfylla kraven på det du ska skapa i denna uppgift.

Följande krav ska vara uppfyllda:

  • Innehåll

    • Webbplatsen ska bestå av tre sidor, som ska innehålla följande:
      • En fråga (inkl. delfrågor) och ditt svar per sida.
        • De tre frågorna hittar du ovan.
      • Svaren på frågorna ska vara formulerade med dina egna ord och skrivas på svenska.
      • Minst en bild (som läggs in med HTML-kod) per sida.
        • Du får fritt kopiera bilder från kursmaterialet och använda i dina svar. T.ex. en skärmkopia från föreläsningsmaterial eller en bild från exempel och laborationer. Vill du istället använda egna bilder, får du naturligtvis göra det.
      • På samtliga sidor ska det finnas navigeringslänkar till alla tre sidor, så att man kan gå mellan sidorna.
        • Navigeringslänkarna ska alltså även innehålla en länk till den sida man befinner sig på, så att de tre länkarnas placering blir stabil och likadan på alla tre sidor.

  • HTML-kod

    • Relevant titel i title-elementet.
    • Text strukturerad med korrekta element för rubriker och textstycken samt andra relevanta HTML-element.
    • Adresser till bilder och i navigeringslänkar ska vara relativa adresser.
    • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.
    • Koden ska vara indenterad, så att strukturen framgår.
      • Använd formateringskommandot i Visual Studio Code, så som det beskrivs i lab L2a.

  • CSS-kod

    • Det ska vara endast en CSS-fil och all CSS-kod för webbsidorna ska finnas i den. Det får alltså inte finnas någon CSS-kod i HTML-filerna. Alla tre HTML-filerna ska länka till samma CSS-fil, så att sidorna får samma stil och layout.
    • Till sidornas layout ska du använda dig av display: grid och tillhörande relevanta CSS-egenskaper för att skapa kolumner. I "desktop"-versionen ska du ha minst två kolumner med innehåll (kolumner som används som marginaler räknas alltså inte in i detta).
    • Någon del på åtminstone en sida ska vara formaterad med display: flex och tillhörande relevanta CSS-egenskaper.
    • Det ska vara en responsiv design, där det görs förändringar av layouten och/eller navigeringen i minst två media queries för olika bredd.
      • Du bestämmer själv om du vill använda metoden "mobile-first" eller "desktop-first".
      • I varje media query ska du göra en förändring av layout och/eller navigering.
      • Observera att det inte handlar om tre helt olika layouter, utan en grundlayout som förändras med media queries. Du gör först grundlayouten i din CSS-kod, anpassad antingen för desktop eller mobil, och lägger sedan in minst två media queries (kodavsnitt som börjar med @media), för att göra förändringar för större eller mindre skärmar.
      • Det ska vara olika gränsvärden för de olika media queries.
      • Välj gränsvärden i dina media queries, så att det inte blir någon rullningslist i sidled, då fönstrets bredd förändras.
      • Tänk på att i en media query endast ta med kod för det som förändras, så att du inte upprepar kod i onödan.
    • På åtminstone någon sida ska du ha med användning av CSS-egenskaperna transition och transform där det är lämpligt
    • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.

  • Publicering

    • Webbplatsen ska vara publicerad på Netlify.
    • URL till din publicerade webbplats får inte lämnas ut till någon annan än kursens lärare.
    • Ändra inte den URL som du får från Netlify, utan behåll URL med den slumpmässiga texten som du får från Netlify. I annat fall kan kanske någon gissa din URL och obehörigt komma åt dina svar.
    • Allt måste fungera i Firefox, som är den webbläsare vi använder, då redovisningen granskas.

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.

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.