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. Föreläsning 4 behandlar alltså relevant innehåll för fråga F4, föreläsning 5 innehåll relevant för fråga F5, och så vidare.

F4. Layout

  1. Då man skapar en layout med grid används bl.a. CSS-egenskaperna grid-template-columns, grid-template-rows och grid-template-areas. Beskriv vad dessa används till.
  2. Vad är en media query och vad används den till?

F5. Navigering

  1. Global och lokal navigering har mycket gemensamt. Redogör för vilka likheterna och skillnaderna är.
  2. Beskriv kortfattat vad supplementary navigering är. Komplettera ditt svar genom att lägga in två skärmdumpar där du markerat användning av supplementary navigering på två olika webbplatser.

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. Vi brukar skilja på krav på innehåll och krav på funktionalitet. Vad utmärker krav på innehåll? Vad är poängen med att sammanställa alla innehållskrav i en lista tidigt i utvecklingeprocessen? Ge exempel på ett konkret och mätbart innehållskrav.

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.