Slutprojekt Webbutveckling 1

Det här projektet går ut på att skapa en site anpassad för tre olika sorters enheter (t.ex. mindre mobil, surfplatta och desktop).

Inlämningen ska bestå av

• Planeringsdokument (se nedan)
• Utvecklingsdagbok (se nedan)
• Alla relevanta filer (hela projektmappen, zippad och döpt till slutuppgift_webbutveckling_fornamn_efternamn_klass.zip)
• Skärminspelning där du visar hur gränssnittet fungerar i de tre olika enheterna (simulerat)
• Självbedömning i minimatris

Planeringsdokument

Sitebeskrivning

En eller par meningar som beskriver vad det är för typ av site du skapar, t.ex:

"En site där veganska hundägande foodies kan köpa raw-food för sina älskade fyrbenta vänner"

Utvalda enheter och orientering

Vilka enheter (och orientering) din site ska fungera på (3.st). Namn och dimensioner (pixlar/display-pixlar), t.ex:

iPhone 5/SE - Portrait 640x960 pixlar, 320x480 display-pixlar

iPad Mini 4 - Landscape - 2048x1536 pixlar, 1024x768 display-pixlar

Desktop (> 1024 px)

Designskisser

Skisser som visar övergripande layout för siten. En skiss per utvald enhet.

Spara skisserna i misc-mappen.

Utvecklingsdagbok

Varje tillfälle du arbetar med siten ska du dokumentera:

0. Datum

1. Vad du ändrat/lagt till

"Skapade en header och en bakgrundsbild där loggan ingår"

2. Vad stötte du på för problem/utmaningar?

"Jag hade glömt hur lagermaskar fungerade, så jag kollade på en film om lagermaskar på IT-Gymnasiets Vimeo-sida"

3. Vad är nästa delmål?

Jag ska skapa menyn, och se till att den döljer sig på mobila enheter, men visas på större enheter.

Utvecklingsdagboken ska sammanställas i ett dokument och lämnas in i misc-mappen, eller som en länk till en GitHub-wiki.

Utforming av sidan

Sidans innehåll och utformning är upp till er, med följande förbehåll

Omfattning

Minst tre "sidor" (siten kan ha enbart en html-fil, men då får ni simulera flera sidor med hjälp av javscript och visa och dölja relevanta dela av siten dynamiskt).

Bilder

Minst en bild där du använder lager och lagermaskar för att kombinera flera olika bilder. Kom ihåg PSD-filen!

Anpassning till vald enhet

Olika utseende för de olika utvalda enheterna (och inte enbart mer marginaler på sitens kanter)

Javascript

Ett (eller flera) javascript som på något sätt manipulerar sitens utseende

Validering

All HTML/CSS ska vara validerad med en validator.

Optimering av överföring av resurser

Din site ska använda sig av CSS-sprites för lämpliga bilder

Länkar

• CSSTree Validator for Visual Studio Code
• HTML Programming in VS Code
• css-tricks.com: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprite Generator

Bedömningsmatris

Bedömningsaspekt	E	C	A
Planering	Tillsammans med läraren skapar du en översiktlig projektplan för en tänkt produkt.	Efter att ha rådfrågat läraren skapar du en genomarbetad projektplan för en tänkt produkt.	Efter att ha rådfrågat läraren skapar du en genomarbetad projektplan för en tänkt produkt, och reviderar vid behov planen
Kodning och kodningsstil	Tillsammans med läraren skriver och felsöker du HTML- och CSS-kod som med tillfredsställande resultat följer grundläggande standarder och tekniker	Efter att ha rådfrågat läraren skriver och felsöker du HTML- och CSS-kod som med tillfredsställanderesultat följer grundläggande standarder och tekniker, och du infogar enkla domscript	Efter att ha rådfrågat läraren skriver och felsöker du kod som med gott resultat följer grundläggande standarder och tekniker, och du infogar lite mer avancerade domscript
Testning och optimering	Tillsammans med läraren gör du enklaoptimeringar för överföring resurser och kontrollerar manuellt att produkten följer god praxis och fungerar i några webbläsare	Efter att ha rådfrågat läraren gör du lite mer avancerade optimeringar för överföring resurser och använder tester för att kontrollera att produkten följer god praxis och fungerar på flera plattformar	Efter att ha rådfrågat läraren gör du avanceradeoptimeringar för överföring resurser och använder tester för att kontrollera att produkten följer god praxis och fungerar på flera plattformar
Dokumentering	Tillsammans med läraren dokumenterar du översiktligt ditt arbete.	Efter att ha rådfrågat läraren dokumenterar du noggrant ditt arbete.	Efter att ha rådfrågat läraren dokumenterar du noggrant och utförligt ditt arbete enligt en angiven standard.
Utvärdering och självbedömning	Tillsammans med läraren bedömer du med enkla omdömen ditt arbetes kvalitet och din egen förmåga.	Efter att ha rådfrågat läraren bedömer du med nyanserade omdömen ditt arbetes kvalitet och din egen förmåga.	Efter att ha rådfrågat läraren bedömer du med nyanserade omdömen ditt arbetes kvalitet och din egen förmåga, och ger förbättringsförslag.
Bild- och textbehandling	Tillsammans med läraren bearbetar du med viss säkerhet enkla bilder och texter så de fungerar i produkten	Efter att ha rådfrågat läraren bearbetar du med viss säkerhet och via flera steg lite mer avanceradebilder och texter så de fungerar i produkten.	Efter att ha rådfrågat läraren bearbetar du med säkerhet och via flera steg lite mer avanceradebilder och texter så de fungerar i produkten.
Kommunikation	Tillsammans med läraren skriver du med viss säkerhet tydlig och lättläst kod.	Efter att ha rådfrågat läraren skriver du med viss säkerhet tydlig och lättläst kod.	Efter att ha rådfrågat läraren skriver du med säkerhet tydlig och lättläst kod.