Syftet med uppgiften är att tillämpa de kunskaper som vi gått igenom under terminens gång. Du skall skapa en komplett webbsida utifrån de önskemål och målgrupp som din kund har. Din webbsida skall omfattas av nedanstående kravspecifikation.
Se ditt din dokumentationsmall för info om företag, syfte, målgrupp och huvudkulör.
Layouten på alla sidor skall göras främst med GRID. Du skall göra 3 sidor på din webbsida.
- 3 olika skisser över de olika sidorna
- Olika layout på sidor men konsekvent header + navigation
- En landing page - Startsida (GRID)
- En cardssida (t.ex. anställda, företagets produkter eller liknande) FLEX (i GRID) ex. till höger →
- Den tredje sidan skall lösas med GRID
- Vanliga mappstrukturen i kursen. Undermappar css, img, misc.(misc ny, placera filer som inte passar andra mappar)
- Html-dokument i projektets huvudmapp. Passande filnamn. (inga nordiska tecken samt mellanslag)
- Totalt tre html-sidor, varav en landing page med namnet index.html
- Använd gärna AI-genererad text till paragrafer/rubriker.
- Anpassa bilder/text så att de passar ihop. Originalfiler (ex. .psd, oredigerad jpg etc placeras i misc mappen) redigerade bilder i img.
- Lagermasker och justeringslager ska användas på minst en bild (t.ex. frilägga ansikte). Photoshop/Illustrator-filen läggs i misc-mappen. I img-mappen till projektet lägger ni den exporterade bilden som används på hemsidan (samt övriga bilder ni har använt).
Under arbetets gång skall arbetet syncas mot GitHub. Detta gör vi för att både spara en historik och för vi skall ha en kopia utifall att något skulle hända med sidan under arbetets gång. (t.ex. dator som går sönder)
Du skall minst göra en push till GitHub efter varje lektion [fr.o.m. v.47] men kan med fördel pusha om du gör en större förändring på sidan med. Slutinlämning av webbsidan görs som en Push till GitHub med kommentaren “Inlämning”.
Hur kommer jag igång?
Gör en fork/gaffel på följande sida https://github.com/ntijoh/kundenhar2024. I GitHub for Desktop programvaran väljer du sedan att göra en cloning av din fork/gaffel (command+shift+o). Om du inte ser den kan du behöva göra en refresh med ikonen med cirkeln.
Dokumentation
Ditt projekt skall dokumenteras (varje vecka efter/under lektion) och lämnas in på classroom som en klassisk inlämning. Tänk på att dokumentationen skall visa en process och dina beslut längs vägen. Ta gärna skärmbilder för att beskriva arbetets process. (CMD+SHIFT+4 för mac/print screen för windows)
Tidsplanering
| 47 | Presentation av uppgiften / Om dokumentering / Start planering/ skissa |
|---|---|
| 48 | Fortsatt arbete, genomgång bland annat av valideringsverktyg |
| 49 | Fortsatt arbete, genomgång av sånt som kommit upp under arbetet |
| 50 | Fortsatt arbete, genomgång av sånt som kommit upp under arbetet |
| 51 | Sista lektionen att arbeta med projektet Deadline inlämning vid slutet av lektion (pusha till GitHub samt lämna in dokumentationen på classroom) |
Bedömningsmatris, med exempel för C-nivå
| E | C | Exempel för C |
|---|---|---|
| Eleven gör en enkel projektplan för en tänkt produkt. �� Utifrån projektplanen utvecklar eleven i samråd med handledare produkten. � I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och omfattar någon av de grundläggande teknikerna för märkspråk och stilmallar.���Eleven bearbetar också med viss säkerhet enkel text, bild och eventuell annan media så att de anpassas till produkten. Produkten är av tillfredsställande kvalitet och följer etablerad god praxis vilket eleven kontrollerar med begränsade tester.��� Eleven testar produkten i någon webbläsare.��Dessutom bygger eleven en webbplats som med tillfredsställande resultat följer grundläggande principer för tillgänglighet.�� När arbetet är utfört gör eleven en enkel dokumentation av de moment som har utförts och utvärderar med enkla omdömen sitt arbete och resultat. Eleven använder med viss säkerhet terminologi inom området. | Eleven upprättar en genomarbetad projektplan för en tänkt produkt. �� Eleven utvecklar utifrån planen en produkt efter samråd med handledare. I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och som omfattar några av de grundläggande teknikerna för märkspråk och stilmallar. � Eleven bearbetar med viss säkerhet och via flera moment text, bild och eventuell annan media, så att de anpassas till produkten. �Produkten är av tillfredsställande kvalitet och följer etablerad god praxis vilket eleven kontrollerar med automatiserade tester.����Eleven testar produkten i några webbläsare.��Dessutom bygger eleven en webbplats som med tillfredsställande resultat följer grundläggande principer för tillgänglighet och kontrollerar detta med några automatiserade tester.��När arbetet är utfört gör eleven en noggrann dokumentation av de moment som har utförts och utvärderar med nyanserade omdömen sitt arbete och resultat.� �Eleven använder med viss säkerhet terminologi inom området. | Utförlig planering med tydlig skiss. Beskriven tanke om vad de tre olika sidorna ska innehålla. Tydlig målgruppsbeskrivning. ��Den färdiga sidan följer uppgiftsbeskrivningen väl. ���Den skrivna koden (HTML och CSS) är tydligt indenterad. Korrekt mappstruktur i inlämningen. I sidan visas teknik för CSS Flex och CSS Grid.���Bilderna till sidan är komprimerade i en passande storlek. I sidan visas flera olika formateringar av text och bild på ett passande sätt. ��God praxis vad gäller fil- och mappnamn. Ett gemensamt CSS-dokument används för alla tre sidor. Sidan är testad med valideringsverktyg vilket finns med i rapporten.��Testning i tre olika webbläsare finns dokumenterad med skärmbilder. ��Semantiska taggar används på korrekt sätt. Till bilderna används passande alt-attribut. Sidan är testad med valideringsverktyg samt contrast-checker. Dokumentationen innehåller en beskrivning av vad som gjorts (alla moment ovan) under projektet. En utvärdering genomförs av vad som fungerade bra och vad som förbättras till nästa gång ett projekt genomförs. I planeringsdokumentet och i dokumentationen används begrepp som förekommer i presentationer t ex elementnamn, css-egenskaper, CSS-grid etc. |