Webbutveckling · område 6

Projekt 5 – Interaktiv sajt

Deadline tisdag 16 mars kl 23:59. Samma sajt som i Projekt 4, nu med ljuden och mikrointeraktionerna från Gränssnittsdesign.

1. Uppdraget

Du ska bygga in ljuden och mikrointeraktionerna från Gränssnittsdesign i din sajt, med JavaScript, webbens programmeringsspråk. Samma sajt som i Projekt 4, nu med beteende.

Det här är första gången i kursen du skriver kod som gör något i stället för att vara något. HTML säger vad som finns, CSS hur det ser ut, JavaScript vad som händer när någon använder det. De tre ska hållas isär, och det är ett krav, inte en stilfråga.

Sajten ska fungera fullt ut med JavaScript avstängt. All information går att läsa, alla länkar och formulär fungerar. Det enda som saknas utan JavaScript är ljudet och de tillstånd som bara JavaScript kan sätta. JavaScript lägger till, det bär aldrig.

Uppgiften är en trappa. Du börjar med kod du inte skrivit själv och slutar, om du siktar högt, med kod någon annan kan använda:

Nivå	Vad du gör med JavaScript
E	Kopplar in och anpassar en färdig modul från referensprojektet, efter överlämningen
C	Skriver egen, kort händelsekod för en mikrointeraktion och en ljudknapp
A	Skriver en egen liten modul som fungerar på element den inte byggdes för

Ljud och rörelse finns i båda kurserna, och här går gränsen:

Här handlar det om	I Gränssnittsdesign om
Koden: `script`, händelser, klasser, ljudet som spelas upp	Ljudet: inspelning, redigering, att ljuden hör ihop
CSS-övergången, med värdena i överlämningen	Värdena: varaktighet, tidskurva, utlösare, och varför
`prefers-reduced-motion` och ljudknappen i koden	Vad som ska hända för den som valt bort ljud eller rörelse
Att följa överlämningen, och skriva ner var koden avviker	Att skriva överlämningen

Rörelsen görs i CSS. JavaScript byter bara läge. En knapp som visar att den skickar får en klass av JavaScript, och det är CSS som sköter hur den klassen ser ut och hur övergången går. Då fungerar rörelsen för sig, och JavaScript-koden blir kort.

Prov 4 ligger dagen efter inlämningen

Onsdag 17 mars. Det prövar att läsa, förutsäga och anpassa kod, utifrån områdets referensprojekt.

2. Vad du utgår från

Det här har du redan	Var det kommer ifrån
Sajten, responsiv och tillgänglig	Projekt 4, inlämnad 9 februari
Ljudfilerna och överlämningstabellen	Uppgift 7 i Gränssnittsdesign, överlämnad 8 mars
Modulerna att koppla in	Områdets referensprojekt
`prefers-reduced-motion` och `dokumentation.md`	Område 5

Överlämningen kommer den 8 mars, och passet den 10 mars är till för att bygga in den. Fram till dess arbetar du med de delar som inte behöver den: skriptfilerna, modulen, beteendet utan JavaScript. Ändras något i överlämningen efter den 8 mars tar du in det fram till deadline.

3. Ska-krav

Är alla ikryssade och kontrollerade ligger du på E.

4. Bör-krav

Skillnaden mellan kod du kopplat in och kod du förstår. Nivå C.

Bör-krav — nivå C

Egen händelsekod för minst en mikrointeraktion, skriven av dig och inte hämtad ur modulen
En ljudknapp som stänger av ljuden och minns valet till nästa besök. Knappen säger om ljudet är på eller av
Kommentarer i JavaScript som säger varför, på samma sätt som i stilmallen
Överlämningens värden följs, och där koden avviker står det i dokumentationen med skäl
Beteendet är skilt från utseendet: JavaScript ändrar klasser, aldrig style direkt

5. Utmaningar

Nivå A. Ta dem när ska- och bör-kraven sitter.

Utmaningar — nivå A

En egen liten modul som styrs med attribut i HTML:en och fungerar på element den inte byggdes för. Prövad på en kamrats sajt
Alla mikrointeraktioner går att utlösa med tangentbordet, och återkopplingen når också den som använder skärmläsare
Mörkt läge som följer systemets inställning och användarens eget val, med kontrasten kontrollerad i båda lägena
Du kan visa vad som händer när ljudfilen saknas, och koden hanterar det utan fel i konsolen

6. Tekniska krav

Krav	Vad som gäller
Filstruktur	`skript/` för JavaScript, `ljud/` för ljudfilerna, bredvid `index.html`. Fortfarande en `stil.css`
Inkoppling	`<script src="skript/…" defer></script>` i `<head>`. `defer` gör att skriptet väntar tills sidan är läst
Variabler	`const` och `let`. Inte `var`
Ljudfilerna	Överlämningens filer, med överlämningens namn. Döp inte om dem
Rörelsen	CSS-övergångar på klasser. JavaScript sätter och tar bort klasserna
Ljudknappen	En `button`. Valet sparas med `localStorage`, och koden tål att lagringen är avstängd
Utan JavaScript	Provat i två webbläsare med JavaScript avstängt. Resultatet i testprotokollet
Dokumentationen	`dokumentation.md`: nytt avsnitt Skript, och testprotokollet utökat
Validering	W3C för HTML och CSS, noll fel. JavaScript kontrolleras i konsolen
Var det lämnas	Repolänk och Pages-adress i itslearning

Raden om ljudfilerna

Det är den som brukar ställa till det. Byter du namn på en fil måste både modulen och överlämningen ändras, och då stämmer de inte längre med varandra. Låt namnen vara.

7. Bedömningsmatris

Kriterium	E	C	A
Inkoppling och struktur	Egna filer, `defer`, inget JavaScript i HTML	Kommentarer som säger varför, beteendet skilt från utseendet	En egen modul som fungerar på element den inte byggdes för
Mikrointeraktioner	Två byggda med överlämningens värden, reducerad rörelse respekterad	Egen händelsekod för minst en	Alla går att utlösa med tangentbordet och når skärmläsaren
Ljud	Tre ljud vid rätt händelser, med synlig motsvarighet	Ljudknapp som minns valet	Saknad ljudfil hanteras utan fel
Utan JavaScript	Sajten fungerar fullt ut med JavaScript avstängt	Provat i två webbläsare, dokumenterat	Mörkt läge fungerar också utan JavaScript, via systemets inställning
Dokumentation och test	Skripten beskrivna, testprotokoll med och utan JavaScript	Avvikelser från överlämningen dokumenterade med skäl	Dokumentationen räcker för att någon annan ska kunna ändra i skripten

8. Kom igång

Skriv upp vad som fungerar på din sajt, första passet: innehållet, länkarna, formuläret. Sajten har ingen JavaScript än, så listan är sajten utan JavaScript. Det är din nollpunkt, och allt på den ska fungera på deadlinedagen med JavaScript avstängt.
Koppla in en tom skriptfil som skriver i konsolen. En rad, console.log("skriptet laddades"). Syns raden i konsolen på varje sida är sökvägen och defer rätt innan du skrivit något som kan gå fel.
Bygg en mikrointeraktion i CSS innan du skriver JavaScript. Gör klassen och övergången, och sätt klassen för hand i DevTools. Ser det rätt ut är det bara en rad JavaScript kvar.
Ljuden sist, när överlämningen kommit den 8 mars. Modulen går att koppla in och prova med referensprojektets ljud före dess.

9. Vanliga misstag

onclick i HTML:en. Det fungerar, men det blandar ihop beteende och struktur. All JavaScript i .js-filer, kopplad med addEventListener.
Skriptet körs innan sidan finns. Utan defer letar skriptet efter element som inte är lästa än, och querySelector ger null. Felet står i konsolen.
Innehåll som bara JavaScript skapar. Text som skrivs in med JavaScript finns inte för den som har det avstängt, eller för sökmotorn. Innehållet hör hemma i HTML:en.
Rörelse satt med style i JavaScript. Då går den inte att stänga av med prefers-reduced-motion, och utseendet ligger på två ställen. Byt klass i stället.
Ljud som spelas när sidan laddas. Webbläsaren stoppar det, och det är rätt av den. Ljud spelas när användaren gör något.
Ljudknappen som bara är en ikon. Den som inte ser den vet inte vad den gör. Knappen ska säga vad den gör och om ljudet är på.
Namnbyten på ljudfilerna. Modulen hittar dem inte, och överlämningen stämmer inte längre.

10. Innan du lämnar in

Sista passet, 16 mars, är till för det här. Gå igenom i tur och ordning:

Öppna konsolen på varje sida. Inga röda rader
Stäng av JavaScript och gå igenom sajten. Går allt innehåll att läsa, fungerar länkarna och formuläret?
Slå på det igen och gör varje handling i överlämningen. Spelas rätt ljud, syns rätt rörelse, och syns motsvarigheten?
Slå på reducerad rörelse i systemet och gör samma sak
Validera HTML och CSS, och öppna den publicerade adressen
Läs dokumentation.md. Står varje skript med, och varje avvikelse från överlämningen?
Lämna båda adresserna i itslearning: repot och den publicerade sidan

Punkt 2 är den som skiljer

Det som slutar fungera utan JavaScript är det som byggts på fel ställe.