Idé och syfte

Jag vill göra en webbsida som på ett enkelt och tydligt sätt visar vilka val eleverna på Teknikprogrammet kan göra under årskurs 1 till 3. Målet är att sidan ska hjälpa både elever som redan går där och elever i årskurs 9 som funderar på att börja, att förstå vilka kurser och valmöjligheter som finns. Jag vill också att vårdnadshavare och studievägledare ska kunna använda sidan för att få en bra överblick.

Mål

När projektet är klart ska det finnas en färdig webbsida som:

• Visar alla val och kurser för Teknikprogrammets tre år
  
• Har en design som fungerar lika bra på dator, mobil och surfplatta
  
• Är enkel och tydlig att använda och förstå
  
• Har klickbara kort där man kan öppna och stänga information om valen
  
• Innehåller JavaScript som gör sidan mer interaktiv
  
• Är optimerad för snabb laddning, bland annat genom att bilderna är komprimerade
  
• Har validerad och korrekt HTML och CSS-kod
  

Kravspecifikation

Ska (måste finnas):

• Visa valen för alla tre årskurser
  
• Responsiv design som funkar på alla skärmstorlekar
  
• Kort som går att öppna och stänga med mus (klick)
  
• JavaScript för att hantera kortens öppning och stängning
  
• Optimerade bilder för snabbare laddning
  
• Validerad HTML och CSS
  

Bör (viktigt att försöka få med):

• Kort ska även kunna öppnas/stängas med tangentbord (tillgänglighet)
  
• Tydlig kontrast mellan text och bakgrund
  

Kan (om jag hinner):

• Enkla animationer när korten öppnas och stängs
  
• Mörkt läge som användaren kan slå på och av

Skiss och designidé

Jag tänker mig en sida med en lista av kort. Varje kort visar ett val eller en kurs och går att klicka på för att få fram mer information. Designen ska vara enkel och ren, med bra avstånd mellan korten så det blir lättläst. 

Här kommer en skiss hur jag tänker att sidan ska se ut på ett ungefär:

Tidsplan

Vecka 1:
Bestämma idé, göra en plan och rita en skiss på hur sidan ska se ut.

Vecka 2:
Bygga grundstrukturen med HTML och börja jobba på CSS för att få till layout och färger.

Vecka 3:
Fortsätt med CSS och se till att sidan blir mobilanpassad. Börja med JavaScript för att göra korten klickbara.

Vecka 4:
Testa sidan på olika enheter och i olika webbläsare, fixa eventuella problem, förbättra prestanda och tillgänglighet. Avsluta med att skriva resultat och utvärdering.

Teknik och verktyg

Jag kommer använda vanlig HTML och CSS för strukturen och designen. För interaktivitet använder jag JavaScript så att korten kan öppnas och stängas. Jag tänker också använda verktyg för att optimera bilder så att sidan laddar snabbt. När allt är klart validerar jag koden för att säkerställa att den följer standarderna. När sidan är klar för att säkerställa mig att sidan fungerar bra kommer jag göra dessa test:

• Pagespeed- test hur snabbt sidan laddar
• Bings mobilvänlighetstest 
• wave webaim – test som testar tillgänglighet

Utmaningar

Det kan vara lite knepigt att få korten att funka bra både med mus och tangentbord, så att sidan är tillgänglig för alla. Jag vill också hålla designen enkel trots att det är mycket information, så att det inte blir rörigt eller svårt att hitta. Dessutom kan det ta tid att optimera bilder och testa på olika enheter.