Skip to content
Snippets Groups Projects
Commit b3156fee authored by Sondre Sommerset Nordvik's avatar Sondre Sommerset Nordvik
Browse files

removed p3_changes

parent 26ab0ddf
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 0 additions and 498 deletions
P3-Changes.html deleted 100644 → 0
+ 0
− 498
View file @ 26ab0ddf
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P3 - Changes</title>
<link rel="icon" type="image/png" href="img/Favicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="sideNav">
<h4>Innhold</h4>
<ul>
<li><a href="#adminDet">Administrative detaljer</a></li>
<li><a href="#målMen">Mål og mening</a></li>
<li><a href="#navStr">Navigasjons struktur</a></li>
<li><a href="#oppsett">Oppsett og utseende</a></li>
<li><a href="#innhold">Innhold</a></li>
<li><a href="#minKrav">Minimums Krav</a></li>
<li><a href="#plan">Plan</a></li>
</ul>
</nav>
<article>
<header>
<h1>P2 - Prosjekt Krav</h1>
<h4>Medlemmer: Farhad, Fredrik, Sondre, Jeremy and Olav</h4>
<h5>Dato: 07.10.2021</h5>
</header>
<div class="content">
<section id="adminDet">
<header>
<h2>Administrative detaljer</h2>
</header>
<p>Vi har valgt en fiktiv klient QuickFood. Det er en fast-food restaurant som har funnet stor suksess
blant byens studenter
og ønsker å utvide. Vår kontaktperson er daglig leder Anders Berg. Restauranten ligger i Trondheim
sentrum og ønsker å ta
opp kampen med foodora. De ønsker derfor å opprette sin egen nettside som skal være moderne og
lettvint å bruke.
Nettsiden skal inneholde en meny, en handlekurv og en leveringsoversikt.
I tillegg skal siden ha et personlig tilbudssystem basert på tidligere kjøp, ved innlogging,
kuponger og studentrabatter. </p>
</section>
<section id="målMen">
<header>
<h2>Mål og mening</h2>
</header>
<p>Dette skal være en nettside som skal gjøre det raskt og enkelt for en bruker å bestille
mat/drikkevarer
fra QuickFood og få det levert på døren. Nettsiden skal bestå av mat- og drikkemenyer med bilder og
kort
beskrivende tekst hvor kunden får vite om allergener og næringsinnhold. En vil kunne legge til
mat/drikke i en
handlevogn for å så gå videre med bestillingen og legge til rabatt/kampanje-koder. Når en velger en
matvare skal
kunden få forslag til drikke, dessert, snacks og tilbehør. Ved å registrere seg på vår nettside kan
kunder få
nyhetsbrev og varslinger om f.eks. nedsatt pris på enkelte/flere varer. Det er også et mål for oss
at nettsiden
skal virke profesjonell og strukturert. Vi vil gjøre dette ved å nøye designe nettsiden slik at alle
målene blir
oppnådd.
</p>
<header>
<h3>Brukere</h3>
</header>
<p>QuickFood sin webside er laget for kunder som ønsker å bestille mat og/eller drikke i Trondheim.
Siden det er et stort marked for bestilling av mat av studenter i Trondheim, så vil nettsiden prøve
å appelere mer mot denne gruppen brukere.
Dette vil siden oppnå ved at studenter får avslag på bestillingen ved å benytte en studentrabatt.
Siden skal også være mobilvennlig for å tilpasse seg det moderne markedet.
</p>
</section>
<section id="navStr">
<header>
<h2>Navigasjons Struktur</h2>
</header>
<p>
Vi ønsker å ha en responsiv nettside som skal være lett for en ny bruker å
navigere seg rundt på. Det skal gå ann å komme seg hvor som helst på tre klikk.
Vi skal implementere en “navigasjonsbar” øverst på siden, som alltid skal være synlig.
Her har vi tenkt å ha en logo man kan klikke på for å alltid ha mulighet til å bli tatt direkte
til hjemmesiden. En meny med drop down funksjon, en handlekurv helt til høyre i navbaren som skal
kunne telle og vise antall varer i handlekurven, og en “om oss” knapp. </p>
<figure>
<img src="img/nav.png" id=#navimg alt="Navigation image">
<figcaption>Figuren viser den tenkte navigasjonsstrukturen på siden. Illustrerer at det er mulig
å komme seg til hovedsiden kun ved å klikke på logoen, og derfra komme seg til andre html-sider
ved bare ett klikk til,
totalt to klikk. På hovedsiden vil man kunne se dagens kampanje og nyheter, som begge vil
være matvarer som leder til meny.html ved å klikke på de, til riktig sted på den siden.
</figcaption>
</figure>
</section>
<section id="oppsett">
<header>
<h2>Oppsett og utseende</h2>
<h3>
Utseende
</h3>
</header>
<p>Vi ønsker å bruke en font som gjør at siden fremstår profesjonell, og har derfor valgt å bruke
“Montserrat” som primær-font for nettsiden. Hver side vil følge samme fargetema, rød og gul.
Grunnen til at vi har valgt rød og gul som hovedfarger er at disse fargene fanger oppmerksomheten
til
brukeren. I matindustrien er dette kjent som en svært effektiv fargekombo fordi fargene fremkaller
smaksløkene og stimulerer appetitten når man ser dem.
Alle sidene skal ha like headere og footere.
Headeren skal inneholde en logo og navigasjons bar, samt en handlekurv.
</p>
<figure>
<img src="img/Header3.png" id=#header alt="Header bilde">
<figcaption>Figuren viser headeren i webleser </figcaption>
</figure>
<p>
Med tanke på at websiden skal være responsiv, og dermed tilpasset alle skjermstørrelser,
tenker vi å implementere en media-query som fjerner elementene i nav-baren og erstatter det med én
enkel
dropdown knapp dersom man er på en liten skjerm.
</p>
<figure>
<img src="img/Header.png" id=#headermob alt="Headermobil bilde">
<figcaption>Figuren viser hvordan headeren ser ut på mobil </figcaption>
</figure>
<p>
Footeren skal inneholde et “kontakt oss” skjema og litt teknisk info om nettsidens versjon etc.
</p>
<figure>
<img src="img/footer.png" id=#footer alt="Footerbilde">
<figcaption>Figuren viser et eksempel for footer</figcaption>
</figure>
<header>
<h3>Modularitet</h3>
</header>
<p>
Siden både header og footer skal være lik på alle sidene på nettsiden vil disse bli lagret i
javascript objekter og hentet inn ved funksjoner når siden laster. Dette minker koden som må skrives
og lengden på html dokumentene.
I tillegg kommer ikke nettsidene til å ta i bruk inline scripting og heller ha alle javascript
funksjoner
i eksterne javascript filer som kan bli brukt på alle undersidene.
</p>
</section>
<section id="innhold">
<header>
<h2>Innhold</h2>
<h3>Forside</h3>
</header>
<p> Det første man ser på Quickfood sin nettside er hovedsiden. Hovedside.html skal, i likhet med hver
side,
ha en header som viser en navigasjonsbar og en footer med et
“kontakt oss” skjema. Vi skal i tillegg ha litt teknisk info om nettsidens versjon etc. Siden det er
hovedsiden
man
lander på når man besøker websiden, er det viktig at denne fanger oppmerksomhet til brukerne. Derfor
har vi
valgt å vise en knallgod kampanje på hovedsiden sammen med noen store bilder av tilbudet. Vi kommer
eventuelt
også til å inkludere en video av hvordan en av pizzaene lages og ha denne kjørende på autoplay,
muted i
bakgrunnen på hovedsiden.
</p>
<figure>
<img src="img/Forside.png" id=#forsideimg alt="Bilde av forsiden">
<figcaption>Et bilde av forsiden </figcaption>
</figure>
<header>
<h3>Meny</h3>
</header>
<p> En annen viktig side er meny siden. meny.html vil være nettsidens meny. Den er delt inn i to deler,
en navigasjonsmeny og hovedmenyen.
Hovedmenyen er en tabellen som er bygd opp av mindre under-tabeller. I øverste nivå av tabellen er
hovedkategoriene, pizza, hamburger, drikke osv. Hver av hovedkategoriene er så en overskrift for en
av
under-tabellene. Hver under-tabell er en oversikt over de enkelte produktene som passer inn i
kategorien.
I disse vil det være mulig å velge antall produkter og legge disse til handlekurven, i tillegg til
informasjon om priser og ingredienser.
Menyen skal ta opp cirka ¾ av nettsiden og ligge på høyre side av nettsiden. Størrelsen på hvert
enkelt
innlegg er slik at menyen er oversiktlig samtidig som det gir god lesbarhet for hvert enkelte
produkt.
Selve meny.html vil ha en egen navigasjonsbar/navigasjonsmeny, som er en fiksert tabell på venstre
side og tar opp cirka ¼ av siden. Den har oversikt over hovedkategoriene i menyen hvor hver rad
linker til tilsvarende kategori i hovedmenyen. Dersom hovedmenyen blir stor vil dette være en enkel
måte å navigere siden og finne det produktet man er interessert i.
</p>
<figure>
<img src="img/Meny.png" id=#menyimg alt="Bilde av forsiden">
<figcaption>Et bilde av menyen</figcaption>
</figure>
<header>
<h3>Min side</h3>
</header>
<p> min_side.html vil være en side man går inn på dersom man har tenkt å
enten; logge inn på siden eller opprette en bruker. Feltet der man skriver
inn brukernavn vil ha attribut type="text", mens felter hvor man skriver inn passord
vil ha type="password" slik at tegnene man skriver inn blir skjult med dotter. Med tanke
på at dette prosjektet kun fokuserer på front-end vil vi ikke ha mulighet til å lagre input
informasjonen i en database, så derfor vil man bare få opp en pop-up melding som sier noe sånn
som “Gratulerer du har blitt logget inn” dersom man prøver å logge inn på siden.
</p>
<figure>
<img src="img/Min_side.png" id=#minsideimg alt="Bilde av Min Side">
<figcaption>Et bilde av "Min side"</figcaption>
</figure>
<header>
<h3>Om oss</h3>
</header>
<p> om_oss.html vil bestå av informasjon om Quickfood. I likhet med menyen vil man kunne nå denne
siden,
uansett hvor man er pga.
navigasjonsbaren. Det første en vil kunne se er et avsnitt om QuickFood, deres mål og verdier,
og generelt hvem de er. Det skal være et bilde som passer til dette. Det andre; et avsnitt som
beskriver
QuickFoods historie og eventuelt litt om visjonen deres for framtiden, samt. et bilde som passer
til dette avsnittet. Denne siden vil da med andre ord være
ganske
simpel og ikke ha noen JavaScript-funksjoner, eller inputfelt. Det vil altså kun være tekst og
bilder.
Bildene vil
være plassert diagonalt; ett i nordøst tilhørende det første avsnittet, og ett i sørvest tilhørende
det andre
avsnittet. Størrelsen på bildene skal være 685 x 400.
</p>
<figure>
<img src="img/Om_oss.png" id=#Omossimg alt="Bilde av Om oss siden">
<figcaption>Et bilde av "om oss" siden </figcaption>
</figure>
<header>
<h3>Handlekurv</h3>
</header>
<p> Handlekurven skal være en interaktiv side, hvor du skal kunne se hvilke varer som allerede har blitt
lagt til,
og du skal kunne endre antall på de varene du ønsker. Har du trykket for mange ganger på hamburger,
så skal du
kunne fjerne de uønskede varene. Lenger ned på siden skal man også kunne se estimert leveringstid,
og ha mulighet til å
manuelt endre tid, hvis det for eksempel er ønskelig med maten senere på kvelden. Det vil også være
en tabell som
regner ut det totale beløpet av varene man har valgt pluss leveringsgebyr. Det går også ann og legge
inn en
rabattkode, og det vil bli lagt direkte inn i det totale beløpet. Deretter skal man kunne trykke
bestill for å
bestille.
</p>
<figure>
<img src="img/Handlekurv.png" id=#Handlekurvimg alt="Bilde av handlekurv siden">
<figcaption>Et bilde av handlekurv siden </figcaption>
</figure>
</section>
<section id="minKrav">
<header>
<h2>Minimums Krav</h2>
</header>
<p> For å oppnå en funksjonell webside kommer vi til å implementere flere javascript funksjoner.
Per dags dato er ikke vi i gruppen så rutinert på bruk av javascript, så vi regner med at det
vil komme en del utfordringer når vi skal begynne å implementere den funksjonelle delen. Vi regner
derfor med at vi vil ha minst to personer som jobber på javascript biten, dersom det viser seg å bli
en utfordring.
<br><br>
Javascript funksjoner vi ønsker å implementere:
</p>
<ul>
<li>Forside
<ul>
<li>Slideshow på forsiden: For å gi kunden et godt overblikk over varer som er
tilgjengelig skal vi ha et slideshow på forsiden under nyheter.
Her skal det vises fram de forskjellige produktene som nylig har blitt lagt til.</li>
</ul>
</li>
</ul>
<ul>
<li>Meny
<ul>
<li>Forslag: Når man legger til en ny vare i handlekurven skal det komme opp et vindu med
varer
som
passer til varen lagt til. For eksempel dersom man legger
til en pizza vil det komme opp et vindu med pizzasauser og drikke.</li>
</ul>
</li>
</ul>
<ul>
<li>Handlekurv
<ul>
<li>Kalkulator og oppbevaring:
Dette er funksjonalitet som vil ta i bruk flere funksjoner.
Målet er å kunne ta vare på produkter som er lagt til i handlekurven.
Kalkulatoren skal kunne ta hensyn til rabattkode og dermed gi x% rabatt på total pris.
Vi trenger også en funksjon som teller antall varer i handlekurven→ dette skal vises som
et
tall
nederst til høyre på selve handlekurv-ikonet
</li>
<li>Animasjon: Når man trykker på handlekurv-ikonet kommer det en dropdown som viser varer
som er lagt til nå, i dropdownen er det en link som linker til selve “checkout-en”,
handlekurv.html.
</li>
<li>Dynamisk hentetid: I betalingssiden, handlekurv.html, vil det være mulig å velge
leveringstid.
Til vanlig vil ASAP (as fast as possible) være valgt, men med våres
denamisk-hentetid-funksjon som
henter
den lokale tiden til brukeren, vil det bli gitt mulighet for å velge en spesifikk tid
senere. For eksempel dersom
klokka er
14:15 og ASAP levering er 35 minutter, så vil det være alternativer fra 15:00-16:30 med
15
min intervaller.
</li>
</ul>
</li>
</ul>
</section>
<section id="plan">
<header>
<h2>Plan</h2>
</header>
<p>
Dette er et eksempel på hvordan fil delingen vår kommer til å se ut. Disse filene kommer til å ligge
i en
mappe som heter "QuickFoodP3".
</p>
<div id="List">
<ul>
<li>hovdside.html</li>
<li>meny.html</li>
<li>om_oss.html</li>
<li>min_side.html</li>
<li>handlekurv.html</li>
<li>css/
<ul>
<li>style.css</li>
</ul>
</li>
<li>js/
<ul>
<li>script.js</li>
<li>hovedside.js</li>
<li>meny.js</li>
<li>om_oss.js</li>
<li>min_side.js</li>
<li>handlekurv.js</li>
<li>Slideshow.js</li>
<li>Dynamisk.js</li>
</ul>
</li>
<li>img/
<ul>
<li>img1</li>
<li>img2</li>
<li>img....</li>
</ul>
<li>video/
<ul>
<li>video1</li>
<li>video2</li>
<li>video...</li>
</ul>
</li>
</ul>
</div>
<p>Her har vi lagd et skjema for oppgaver som må gjøres,
hvem som er ansvarlig for å få det gjort, og når tidsfristen deres er.</p>
<table id="todoTable">
<tbody>
<tr>
<th>Fil</th>
<th>Beskrivelse</th>
<th>Ansvarlig</th>
<th>Tidsfrist</th>
</tr>
<tr>
<td>hovedside.html</td>
<td>Første siden</td>
<td>Olav</td>
<td>21/10</td>
</tr>
<tr>
<td>meny.html</td>
<td>En egen side med all mat som selges</td>
<td>Jeremy</td>
<td>21/10</td>
</tr>
<tr>
<td>handlekurv.html</td>
<td>Stedet hvor man får en oversikt over hva du har handlet</td>
<td>Farhad</td>
<td>21/10</td>
</tr>
<tr>
<td>om_oss.html</td>
<td>Info-del om hvem klienten er.</td>
<td>Sondre</td>
<td>21/10</td>
</tr>
<tr>
<td>min_side.html</td>
<td>En side du kan logge inn/registrere deg</td>
<td>Fredrik</td>
<td>21/10</td>
</tr>
<tr>
<td>style.css</td>
<td>Ha et CSS dokument for å style siden</td>
<td>Olav</td>
<td>31/10</td>
</tr>
<tr>
<td>script.js</td>
<td>Lage javascript</td>
<td>Farhad</td>
<td>31/10</td>
</tr>
<tr>
<td>Handlekurv.js</td>
<td>Lage handlekurvs funksjon i javascript</td>
<td>Jeremy</td>
<td>31/10</td>
</tr>
<tr>
<td>Teller.js</td>
<td>Lage en teller for handlekurven i javascript</td>
<td>Sondre</td>
<td>31/10</td>
</tr>
<tr>
<td>Slideshow.js</td>
<td>Lage et slideshow på forsiden i javascript</td>
<td>Sondre</td>
<td>31/10</td>
</tr>
<tr>
<td>Dynamisk.js</td>
<td>Javascript som skal hente tiden for å håndtere leveringstid</td>
<td>Sondre</td>
<td>31/10</td>
</tr>
<tr>
<td>Flere JavaScript modifikasjoner</td>
<td>Legge til forskjellige nødvendige funksjoner</td>
<td>Alle</td>
<td>31/10</td>
</tr>
<tr>
<td>Siste endringer</td>
<td>Se etter og fikse feil og mangler. Grundig testing av siden</td>
<td>Alle</td>
<td>11/11</td>
</tr>
</tbody>
</table>
<p></p>
</section>
</div>
</article>
<footer>
<p> -- Farhad, Sondre, Fredrik, Olav, Jeremy --</p>
</footer>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment