Prosjekt 2 Nettside for en kunde

Bestillingen

E-post fra kunden
Hei!

Jeg driver Eik sykkelverksted på Torget i sentrum. Vi har ingen nettside, og folk ringer hele dagen for å spørre om når vi har åpent og hva det koster å fikse sykkelen.

Jeg ønsker meg en enkel nettside med
– en forside som forteller hvem vi er, og når vi har åpent
– en prisliste for de vanligste reparasjonene
– en kontaktside med adresse, telefon og e-post

Mange av kundene mine er eldre, så teksten må være lett å lese. De fleste finner oss på mobilen. Fargene i logoen vår er mørkegrønn og oransje. Jeg har noen bilder fra verkstedet som dere kan bruke.

Kan dere vise meg en skisse før dere lager siden?

Hilsen Jonas Eik

I dette prosjektet lager du en nettside for en kunde med alt du har lært i kapittel 1–9. Du arbeider slik en webutvikler gjør: bestilling, skisse og plan, bygging, testing og dokumentasjon. Eksemplet er Eik sykkelverksted.

  1. Les e-posten. Hvilket problem vil kunden løse med nettsiden?
  2. Lag en kravliste med en tabell som den nedenfor. Tabellen har tre av kravene. Finn minst tre til.
Krav Fra bestillingen Slik sjekker jeg det
Tre sider: forside, priser og kontakt «en enkel nettside med» Alle sidene finnes, og er lenket i <nav>
Siden virker på mobil «De fleste finner oss på mobilen» Mobilvisningen, 360 piksler bred
Teksten er lett å lese «Mange av kundene mine er eldre»
  1. Kravet om at teksten skal være lett å lese, er uklart. Hva kan det bety i CSS? Fyll inn den siste ruta i tabellen.
  2. Kunden har ikke skrevet hvilke åpningstider eller priser verkstedet har. Skriv minst tre spørsmål du vil stille kunden før du begynner.

Kunden vil ha oransje på siden. Den oransje fargen i logoen er #e8731c.

Tekst Bakgrunn Slik ser det ut Kontrast
#1e4d2b #ffffff Åpent i dag 9–17 9,8:1
#e8731c #ffffff Åpent i dag 9–17 3,0:1
#b35400 #ffffff Åpent i dag 9–17 5,0:1
  1. Kan den oransje fargen i logoen brukes til vanlig tekst på hvit bakgrunn? Hva kan du foreslå for kunden?

Kunden bestemmer hva siden skal inneholde, men det er du som kan lage nettsider. Ser du at et ønske gjør siden vanskelig å bruke, skal du si fra og foreslå noe bedre.

Spør KI

Jeg skal lage en nettside for en kunde. Her er bestillingen: [lim inn bestillingen]. Ikke lag nettsiden for meg. Hvilke spørsmål bør jeg stille kunden før jeg begynner, og hvorfor er hvert spørsmål viktig?

Skisse og plan

Mobil, 360 px
PC

Ovenfor ser du en skisse av forsiden på mobil og på PC. En skisse, eller wireframe, viser hvor innholdet skal stå, men ikke hvordan det skal se ut. Den er rask å endre, og kunden kan si fra tidlig.

  1. Se på skissene. Hvilke krav fra kravlisten kan du se?
  2. På mobil står åpningstidene rett under menyen. Hvorfor tror du de står så høyt på siden?
  3. På PC står bildet og teksten ved siden av hverandre. Hvilken CSS-teknikk fra kapittel 8 eller 9 vil du bruke for å få det til?
  4. Tegn en skisse av forsiden på papir, både for mobil og for PC. Tegn også prissiden og kontaktsiden for mobil.
  5. Vis skissene til kunden, eller til en medelev som later som hun er kunden. Hva ville kunden endre? Endre skissene.

Før du begynner å skrive kode, lager du en plan for mappen med alle filene.

Mappe
eik-sykkelverksted
├── index.html
├── priser.html
├── kontakt.html
├── dokumentasjon.html
├── stil.css
└── bilder
    ├── verkstedet.jpg
    └── skisse-mobil.jpg
  1. Lag en plan for mappen til din kunde. Gi mappen navnet til kunden, for eksempel nordbyen-skolekorps. Hvilke sider trenger du, og hva skal filene hete?
  2. Velg to eller tre farger til siden. Sett opp en tabell med fargene, hva de skal brukes til og kontrasten mot bakgrunnen.

Ta bilde av skissene, og legg bildene i mappen bilder. Du skal bruke dem når du dokumenterer prosjektet.

Bygge siden

eik-sykkelverksted/index.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Eik sykkelverksted</title>
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <header>
      <h1>Eik sykkelverksted</h1>
      <nav>
        <ul>
          <li><a href="index.html">Forside</a></li>
          <li><a href="priser.html">Priser</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
      </nav>
    </header>
    <main>
    </main>
    <footer>
      <p>Eik sykkelverksted · Torget 4 · Telefon 123 45 678</p>
    </footer>
  </body>
</html>

Koden ovenfor er en mal for alle sidene på nettstedet. Bare <title> og innholdet i <main> er forskjellig fra side til side.

  1. Les koden ovenfor. Hvilke kodelinjer må du endre når du lager prissiden?
  2. Lag mappen eik-sykkelverksted, med filene index.html og stil.css. Skriv av koden, og valider siden.
  3. Fyll <main> med innholdet fra skissen av forsiden. Bruk <section> til åpningstidene og til teksten om verkstedet.
  4. Lag priser.html og kontakt.html ved å kopiere index.html. Endre <title>, og fyll <main> med innholdet fra skissene.
  5. Prislisten skal være en tabell med <caption> og <th>. Kontaktsiden skal ha lenker med tel: og mailto:, som du lærte i 2.2.

Gjør én side ferdig og valider den før du kopierer den. Da slipper du å rette den samme feilen på tre sider.

Nedenfor ser du fire lenker til prissiden. Filen heter priser.html. Bare én av lenkene virker både på din egen datamaskin og når nettstedet er lagt ut på nettet.

Kode A
<a href="Priser.html">Priser</a>
Kode B
<a href="C:\Users\jonas\eik-sykkelverksted\priser.html">Priser</a>
Kode C
<a href="priser.html">Priser</a>
Kode D
<a href="våre priser.html">Priser</a>
  1. Finn lenken som alltid virker. Forklar hvorfor hver av de tre andre kan slutte å virke.

Gi filene navn med små bokstaver, uten mellomrom og uten æ, ø og å. Bruk bindestrek mellom ordene, for eksempel om-oss.html. Mange webservere skiller mellom store og små bokstaver, selv om datamaskinen din ikke gjør det.

Nå skal siden få stil. Begynn med mobil, slik du lærte i kapittel 9. Bruk ett stilark for alle sidene, slik du lærte i kapittel 7.

  1. Skriv reglene for skrift, farger og boksmodell i stil.css. Bruk rem, en linjeavstand på minst 1,5 og fargene du valgte i planen.
  2. Legg til mediespørringer, slik at forsiden får den layouten skissen viser på PC.
  3. Legg inn bildene fra kunden med god alternativ tekst, og bruk regelen img { max-width: 100%; height: auto; }.

Du kan bare bruke bilder som du har tatt selv, som kunden har gitt deg lov til å bruke, eller som har en lisens som tillater det. Skriv ned hvor hvert bilde kommer fra. Du trenger det når du dokumenterer prosjektet.

Teste og levere

Test Slik tester du Resultat
Koden er gyldig Validatoren, for hver side
Alle lenkene virker Klikk på alle lenkene fra alle sidene
Siden virker på mobil Mobilvisningen, 360 piksler bred
Siden virker på PC Fullt vindu på en PC
Teksten kan forstørres Zoom til 200 prosent
Kontrasten er god nok Utviklerverktøyene
Alle bildene har alternativ tekst Inspiser hvert bilde
Siden kan brukes med tastaturet Trykk gjennom alle lenkene

En testtabell er en liste over alt du skal teste, hvordan du tester det, og hva som skjedde. Når du fyller ut tabellen, viser du kunden og læreren at du har sjekket hele nettstedet, og ikke bare den siden du er mest fornøyd med.

  1. Lag en testtabell for nettstedet ditt. Legg til de kravene fra kravlisten som ikke er med i tabellen ovenfor.
  2. Lukk utviklerverktøyene, og klikk et sted på forsiden. Trykk mange ganger. Kan du se hvilken lenke som er valgt hele tiden? Trykk på en lenke. Hva skjer?
  3. Gjennomfør alle testene, og skriv resultatet i tabellen. Rett feilene du finner, og test på nytt.

Skriv i tabellen hva som var galt, og hva du gjorde for å rette det. Det er ikke en svakhet å finne feil. Det viser at du har testet grundig.

Til slutt skal noen som ikke har laget siden, teste den. Det kalles en brukertest. Du gir testpersonen noen oppgaver, og ser hvordan hun løser dem. Du skal ikke hjelpe til.

  1. Gi en medelev disse tre oppgavene på mobilen eller i mobilvisningen: Finn ut hva det koster å lappe en slange. Finn telefonnummeret til verkstedet. Finn ut om verkstedet har åpent på lørdag.
  2. Skriv ned hvor testpersonen ble usikker eller trykte feil. Hva vil du endre på siden?
Spør KI

Jeg skal brukerteste en nettside for [beskriv kunden]. Foreslå fem oppgaver jeg kan gi testpersonen. Forklar også hvorfor jeg ikke bør hjelpe testpersonen mens hun prøver.

Når alt er testet, skal nettstedet leveres. Kunden og læreren må kunne åpne mappen på en annen datamaskin.

  1. Kopier mappen eik-sykkelverksted til et annet sted, for eksempel til en minnepinne. Åpne index.html i kopien. Vises alle bildene, og virker alle lenkene?
  2. Lag en komprimert fil av mappen. I Windows høyreklikker du på mappen og velger Komprimer til ZIP-fil. På Mac høyreklikker du og velger Komprimer. Lever ZIP-filen slik læreren sier.

Forsvinner bildene når du flytter mappen, har du brukt en adresse som begynner med C:\ eller /Users/. Bruk relative stier, som du lærte i kapittel 2.

Dokumentere prosjektet

eik-sykkelverksted/dokumentasjon.html
<main>
  <h1>Dokumentasjon: Eik sykkelverksted</h1>
  <h2>Kunden og bestillingen</h2>
  <p>Eik sykkelverksted ville ha en enkel nettside med åpningstider, priser og kontaktinformasjon.</p>
  <h2>Skisser og plan</h2>
  <img src="bilder/skisse-mobil.jpg" alt="Skisse av forsiden på mobil">
  <h2>Valg jeg tok</h2>
  <p>Den oransje fargen i logoen har for dårlig kontrast mot hvit bakgrunn. Derfor bruker jeg en mørkere oransje, #b35400, i teksten.</p>
  <h2>Testing</h2>
  <h2>Kilder</h2>
  <ul>
    <li>Bildet av verkstedet er tatt av Jonas Eik, og brukt med hans tillatelse.</li>
  </ul>
  <h2>Hva jeg ville gjort annerledes</h2>
</main>

Når du dokumenterer et prosjekt, skriver du ned hva du har laget, hvilke valg du tok, og hvorfor. Dokumentasjonen er en egen HTML-side i mappen, uten lenke i <nav>.

  1. Les koden ovenfor. Hvilke deler av dokumentasjonen er ikke ferdige?
  2. Lag dokumentasjon.html i mappen til nettstedet ditt. Bruk malen fra Bygge siden, og fyll <main> med de samme overskriftene som i koden ovenfor.
  3. Legg inn kravlisten og testtabellen som HTML-tabeller. Legg inn bildene av skissene.
  4. Under Valg jeg tok skal du skrive minst tre valg. Forklar hvorfor du valgte som du gjorde. Bruk kravlisten.
  5. Under Kilder skal det stå hvor hvert bilde kommer fra, og hvem som har gitt lov til å bruke det.

Det er også lurt å forklare koden inne i selve koden, med kommentarer. Du lærte å skrive kommentarer i HTML i 4.3, og i CSS i 7.7.

eik-sykkelverksted/index.html
<!-- Åpningstidene står øverst, fordi kunden sier at folk ofte ringer for å spørre om dem. -->
<section id="apningstider">
  1. Skriv kommentarer på to eller tre steder i HTML-koden og i stilarket, der du har gjort noe som ikke er lett å forstå med en gang.
  2. Presenter nettstedet for kunden eller klassen på tre minutter. Vis siden på en mobil, og forklar hvordan siden oppfyller kravene i bestillingen.
Spør KI

Her er dokumentasjonen av nettsiden jeg har laget for en kunde: [lim inn teksten]. Ikke skriv den om. Si hva en kunde eller en lærer som leser den, kan komme til å savne.

Oppsummering

I dette prosjektet har du laget et nettsted for en kunde. Du har lest bestillingen og laget en kravliste, tegnet skisser for mobil og PC, bygget sidene med HTML og CSS, testet dem og dokumentert arbeidet.

Arbeidsmåten

Del Du lager
Bestillingen en kravliste og spørsmål til kunden
Skisse og plan skisser for mobil og PC, en plan for mappen og en fargetabell
Bygge siden en mal for sidene, alle sidene og stilarket
Teste og levere en testtabell, en brukertest og en ZIP-fil
Dokumentere prosjektet dokumentasjon.html, kommentarer i koden og en presentasjon

En mal for alle sidene

eik-sykkelverksted/index.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navnet på siden</title>
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <header>
      <h1>Navnet på nettstedet</h1>
      <nav>
        <ul>
          <li><a href="index.html">Forside</a></li>
        </ul>
      </nav>
    </header>
    <main>
    </main>
    <footer>
    </footer>
  </body>
</html>

Før du leverer

  • Alle sidene er gyldige i validatoren.
  • Alle lenkene virker fra alle sidene.
  • Siden virker på mobil og på PC, og kan forstørres til 200 prosent.
  • Teksten har god kontrast, og alle bildene har alternativ tekst.
  • Filnavnene har små bokstaver, uten mellomrom og uten æ, ø og å.
  • Mappen virker når den er kopiert til en annen datamaskin.
  • Dokumentasjonen har kravliste, skisser, valg, testtabell og kilder.

Flere bestillinger

Læreren kan gi deg en av bestillingene nedenfor. Arbeid på samme måte som med Eik sykkelverksted.

Bestilling A: Nordbyen skolekorps

E-post fra kunden
Hei!

Nordbyen skolekorps har 40 musikanter fra 4. til 10. trinn. Vi vil ha en nettside der foreldrene kan finne øvingstidene og konsertene våre, og der nye musikanter kan lese om hvordan de begynner i korpset.

Konsertene bør stå i en tabell med dato, sted og klokkeslett. Mange foreldre leser på mobilen mens de venter i bilen.

Hilsen styret i Nordbyen skolekorps

Bestilling B: Hundepensjonatet Pote

E-post fra kunden
Hei!

Hundepensjonatet Pote passer hunder mens eierne er på ferie. Vi vil ha en nettside med priser per døgn for små, mellomstore og store hunder, bilder av hundegården og en veibeskrivelse.

Vi har mange gode bilder, og vi vil gjerne at de vises fint både på mobil og på PC. Fargene våre er lys blå og hvit.

Hilsen Mari på Pote

Bestilling C: Elevrådet

E-post fra kunden
Hei!

Elevrådet vil ha en nettside der elevene kan se hvem som sitter i elevrådet, når vi har møter, og hva vi har bestemt på de siste møtene.

Siden må kunne brukes av alle elever, også de som bruker skjermleser eller forstørrer teksten.

Hilsen leder av elevrådet

Bestilling D: Turistkontoret

E-post fra kunden
Hei!

Turistkontoret ønsker en nettside med fem ting turistene bør oppleve i byen. Hver av de fem skal ha et bilde, en kort tekst og en lenke til mer informasjon.

Mange av de besøkende kommer fra utlandet, så siden må finnes både på norsk og på engelsk, og det må være lett å bytte språk.

Hilsen Turistkontoret

Undersøk hvordan attributtet lang brukes når et nettsted har sider på flere språk, og hvordan du kan lage en lenke som bytter språk.