diff --git a/P3-Changes.html b/P3-Changes.html deleted file mode 100644 index d8adc714bf3ed7f115ed7fcbfa68e201decbc34e..0000000000000000000000000000000000000000 --- a/P3-Changes.html +++ /dev/null @@ -1,498 +0,0 @@ -<!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