- [Uppgiftsbeskrivning - Fullstack - Slutuppgift](#uppgiftsbeskrivning---fullstack---slutuppgift)
- [Planering](#planering)
- [Kundbeskrivning](#kundbeskrivning)
- [Målgrupp, Personas och Scenarios](#målgrupp-personas-och-scenarios)
- [Mockup](#mockup)
- [Flödescchema / Sitemap](#flödescchema--sitemap)
- [Implementering](#implementering)
- [Versionshantering](#versionshantering)
- [Uppdatering av planeringen](#uppdatering-av-planeringen)
- [Kravsspecifikation](#kravsspecifikation)
- [Användargränssnitt](#användargränssnitt)
- [Omfång](#omfång)
- [Media](#media)
- [Mappstruktur](#mappstruktur)
- [Info som också ligger på Classroom](#info-som-också-ligger-på-classroom)

###### tags: `webbutveckling`

## Flödesschema
https://drive.google.com/file/d/19HiU1DyZbUowBff0S3DhmDB6aQVFEdNu/view?usp=sharing

# Webb2 - Uppgiftsbeskrivning - Fullstack - Slutuppgift
Den här uppgiften går ut på att planera, genomföra och dokumentera, och utvärdera ett webbutvecklingsprojekt.

* Projektet består av tre delar: *Planering*, *Implementering*, och *Utvärdering*.

# Planering
Planeringen skall göras klar och bli godkänd av läraren innan ni går vidare till implementeringsfasen.

Exempel planering:
https://i.imgur.com/h3JAyMD.png
https://i.imgur.com/doXnSfc.png
https://i.imgur.com/i4Ft8Cl.png

* Planeringen skall innehålla följande:

---

# Kundbeskrivning
Beskriv vad er kund är för typ av företag (se [4. Kravspecifikation](#4))

---

# Målgrupp, Personas och Scenarios ####
* Vilka är det som kommer använda siten? Vad har de gemensamt, vad utmärker dem?
* Vilka är deras mål med att besöka siten?
* Skapa personas och scenarion för siten.

# Mockup
* Utgå från de scenarios ni skapat, och skapa skisser eller prototyper som tydligt visar hur den färdiga siten ska se ut och fungera. Mockupen kan vara ritad för hand och inscannad, eller skapad i valfritt program.

* Mockupen skall även innehålla val av färger och färgtema

# Flödescchema / Sitemap
Skall översiktligt visa hur sitens olika delar hänger ihop, och vilken typ av information som kommer finnas på de olika delsidorna.

# Implementering
När planeringen är klar och godkänd av läraren är det dags att skapa själva siten.

# Versionshantering
Gör regelbundna commits, med tydliga (men kortfattade) kommentarer som talar om vad som förändrats.
Synka med GitHub åtminstone i slutet av varje dag ni gjort en ändring.

# Uppdatering av planeringen
Om ni under arbetets gång kommer fram att er ursprungliga planering (t.ex. designen) inte är optimal, måste ni, **innan** ni genomför förändringen, uppdatera dokumentationen, och *tydligt visa vad som har förändrats, och motivera varför förändringen var nödvändig* (det kan här också bli nödvändigt att uppdatera målgrupp, personas och scenarios).

# Kravsspecifikation
Ni ska skapa en site för en (påhittad) restaurang. Ni får själva välja vilken typ av restaurang det är - lyxrestaurang, bed-and-breakfast, upplevelserestaurang, eller vad ni nu kan tänka er. Vad ni väljer för typ av restaurang avgör naturligtvis vilken målgrupp det riktar sig in på.

# Användargränssnitt
Siten skall ha ett tydligt och lättnavigerat menysystem

# Omfång
Siten skall bestå av en startsida, och minst *tre* underliggande sidor/avdelningar.

# Media
Texter behöver ni skapa själva. Denna gången är det inte okej att
använd en ["Lorem Ipsum"-generator](http://www.lipsum.com) för att skapa nonsenstexter.

# Mappstruktur
Ni ska använda er av denna mappstruktur:
* originalfiler/
* psd/
* misc/
* site/
* css/
* js/
* img/

## Info som också ligger på Classroom

Uppgiften är att bygga din egen webbapplikation/webbsida.
Utgå ifrån baskoden för servern som vi byggt upp under repetitionerna. Har man inte skrivit sin egen kan man göra en Fork utav repot som finns länkat som material här på classroom.

Skriv en utförlig planering som beskriver vad din sida kommer innehålla och vilka tekniker du tänkt använda.
Skriv också med om du tänkt följa några guider eller tutorials för delar av projektet.
Planeringen behöver vara utformad så att du själv ska kunna arbeta med den och den ska beskriva för läsaren vad som ska göras.
Börja med att se till att de grundläggande kraven uppfylls!

Skapa ett repo och lägg till länken i uppgiften NU! Namnet skall vara "Fullstackprojekt förnamn-x" (sista bokstaven i efternament).

Detta skall finnas med och fungera:
* CSS skriven i tailwind, SASS eller bootstrap (motivera varför du valde den tekniken i dokumentationen)
* Sidorna skall renderas med hjälp av en "view engine", t.ex. ejs.
* Alla sidor skall ärvas från en CSS (endast en css fil skall laddas in, undantag om det är bootstrap och din egen css)
* Presentation av bilder, text, ljud, video måste presenteras på lämpligt sätt
* Alla taggar skall vara så semantiskt korrekta de kan vara (undantag uppenbara saker så som)
* Sidan skall vara responsiv

Dokumentation att lämna in:
* Kort planering i ett text stycke
* Flödescchema (vilka sidor som leder till vilka)
* Målgrupp, Persona och Scenarios

- Vilken målgrupp kommer du ha?
- Skapa en persona (googla ordet om ni är osäkra)
- Vilka är det som kommer använda siten? Vad har de gemensamt, vad utmärker dem?
- Vilka är deras mål med att besöka siten?
- Skapa personas och scenarion för siten.

Ni skall ha med 1 målgrupp.
Ni skall använda 1 person till er persona.
Ni skall göra 1 scenario.

Välj ett av följande:
* Livechat
* Forum
* Webbshop
* Blogg

När projektet är färdigt kommer en ytterligare uppgift för utvärdering.

Länkar till "Målgrupp, Persona och Scenarios": https://docs.idew.org/principles-and-practices/practices/design-practices/personas,
https://anegy.se/blogg/malgrupp-eller-personas-vad-ar-skillnaden/