Opleiding | Project - Nito Vamo

Opleiding | Case Project - Nito Vamo
Gepost op
vrijdag 27 april 2018 om 08:36
Gepost door
admin@nimor

Dit was ons eerste grote eindproject, dit voor de modules Interface Design, Web Layout Design en Javascript (server-side scripting).

Als afsluiter voor de basis modules Interface Design, Web Layout Design en Javascript (server-side scripting) moesten we een website maken voor een bestaande of fictieve horecazaak.

We werden daarvoor in groepjes van 2 verdeeld en mochten samenwerken met onze, door de leerkrachten, gekozen partner.

De naam voor dit project is ook onstaan door een combinatie van beide onze namen.

Mijn partner voor dit project was Tom Vanhees, je kan zijn website bekijken op www.tomvanhees.be .

Wij hebben hier gekozen voor een fictief restaurant.

Meer info

Dit project bestond uit het ontwerp en de ontwikkeling van een dynamische website. Niet enkel het gebruik van een aantal opgelegde technieken wordt gequoteerd, ook afwerking, creativiteit en vormelijke precisie worden in ogenschouw genomen.


Algemeen

Opzet, thema en leverbaarheden

Nu de economie wat lijkt aan te zwengelen, hebben heel wat horecazaken wederom oog voor een onontkoombare online identiteit. Creëer een knappe webstek voor een al dan niet fictief hotel, restaurant of café. Saai? Sla dan even acht op de vele interessante sectormengvormen zoals danstenten, B&B’s of broodjesbars. Er wordt geen ontegensprekelijke ontwerpstijl aangesmeerd, maar plagiaat wordt opgemerkt en afgestraft.

Je levert één webpaginaontwerp en één websitemap af – een bundel van geldige HTML code, CSS-opmaakbestanden, gecomprimeerde afbeeldingen en JavaScriptbestanden.


Structuur en vorm

Verzorg de tekenopmaak van hoofdingen, paragrafen en lijstjes. Een consistente vorm biedt visuele rust en benadrukt je inhoudelijke boodschap. Stoei met nieuwerwetse webtypografieraamwerkjes – Google Fonts, Adobe Edge Web Fonts, ‘@font-face’-lettertypen,… Plaats de gebruikte lettertypen indien nodig in een ‘fonts’-map. Je afbeeldingen stockeer je in een ‘images’-map. Besteed zeker aandacht aan het bestandstype en de -optimalisatie van deze beelden.

Zorg ervoor dat de bezoeker met de site kan interageren en voorzie dus enkele welgeplaatste lappen JavaScriptcode.


Vakspecifieke verwachtingen

Web Layout Design

Werk met lagen en wijs elke laag een beschrijvende naam toe – groepeer in functie van een handzame conversie naar een <div>-elementgebaseerd ontwerp. Boen je design op – gebruik laageffecten wanneer dat kan. Heb oog voor schaalbaarheid. Zo vangen niet-destructieve vormlagen, slimme objecten en uitknipmaskers latere ontwerpwijzigingen op.

Beroep je op de aangeleerde beeldverbeteringstechnieken, maar verlies het websiteaspect niet uit het oog – hou de navigatie eenvoudig, waak over een duidelijk interfaceoverzicht en streef een evenwichtige vlakverdeling na. Ontwerp voor de relatief webveilige resolutie – 1024 pixels bij 768 pixels, dus.

Zorg voor een precieze omzetting naar syntactisch en semantisch correcte HTML- en CSS-code.
Aandachtspunten
Laat zien wat je met het tekenpakket kan. Durf extra opzoekwerk te verrichten – stel jezelf een aantal uitdagingen voor, maar blijf realistisch.

 

HTML & CSS

Merk op dat deze eindopdracht weinig strikt gedefinieerd wordt – zo is de hoeveelheid aangewende beeldtechnieken, stijlregels en overig oogsnoep niet echt van tel. Het geheel is immers meer dan de som van de delen. Natuurlijk moet het project structuurgewijs in orde zijn – heb oog voor een technisch-elegante en doordachte vormgeving, de onderhoudsvriendelijkheid en schaalbaarheid van het ontwerpbestand, leesbare codelappen, juiste syntaxisregels,… Bewaak codegeldigheid en -efficiëntie en verwerk eventuele commentaarregels. Puur de aangewende technieken zo hevig mogelijk uit. Vermijd redundante code.
Inhoud
Voorzie minstens vier pagina’s.

Natuurlijk bevat je site een ‘index.html’-bestand.
Voorzie een contactpagina met contactformulier en Google Maps-kaart.
Publiceer je je menukaart? Heeft je site nood aan één of ander reservatieformulier? Wil je af en toe evenementen aankondigen?


Technisch

Schrijf bovenal overzichtelijke en juiste code. Werk dus met inspringingen, betekenisvolle ‘class’- en ‘id’-namen,… Voorzie ook ordelijkheid in je bestands- en mappenstructuur. Geldige code is een evidentie.

Maak gebruik van de juiste technieken en verweef dus geen CSS-code in je HTML-bestanden. Werk met meerdere externe CSS-documenten.

Je website dient in elke moderne browserversie correct getoond worden en werken. Voorzie een ‘reset.css’- of ‘normalize.css’-bestand.

 

SEO

Zorg ervoor dat het project klaar is om het internet te veroveren. Hiervoor moet je website ook zoekmachinevriendelijk zijn. Maak gebruik van de juiste HTML-elementen en -structuren. Koppel ook Google Analytics aan je website.

Maak correct gebruik van bestandsnamen, mapnamen, hoofdingen, ‘alt’-attributen, <meta>-tags, een gepaste sleutelwoordendichtheid, sitemap, een ‘robots.txt’-bestand,… Zet in op elke ingreep op je website zo goed mogelijk door zoekmachines te laten indexeren.
Lay-out
Het ontwerp wordt zelf in elkaar geknutseld – kant-en klare frameworks zoals Bootstrap of themes mag je voor deze opdracht niet gebruiken. Als je zelf een raamwerk wilt maken, kan dat natuurlijk wel.

Voor het HTML-gedeelte kijken we niet naar het uiterlijk van je website, al besteden we wel aandacht aan de mate waarin je uiteindelijk HTML-resultaat overeenkomt met je originele Photoshop-ontwerp. Ben je consequent geweest in je uitwerking? 
Extra
Voorzie een inschrijvingsformulier voor nieuwsbrieven. Dit formulier mag gegenereerd worden door een externe partner zoals MailChimp.

 

JavaScript - Programming 101

Korte uitleg

Voorzie een formulier met client-side JavaScriptvalidatie. Dit formulier moet gemaild kunnen worden via het e-mailprogramma van de gebruiker.
Bespreking
Voor het JavaScriptgedeelte maak je een client-side validatiescript van een formulier. HTML5-formuliervalidatiemogelijkheden mogen dus niet gebruikt worden.

Het formulier sluit aan bij het type van zaak waarvoor je een website ontwikkelt. Ter verduidelijking – een formulier voor een bestelling van pizza zal andere mogelijkheden hebben dan een formulier tot aanvraag van een reservatie van een hotelkamer.
Voorbeelden van formulieren
Restaurant – reservatieformulier waarin bijvoorbeeld het uur van aankomst en het aantal personen aangegeven worden.
Afhaalrestaurant – bestelformulier waarin aangegeven wordt welke gerechten, drankjes,… men wil bestellen.
Hotel – reservatieformulier waarin bijvoorbeeld de dag en het uur van aankomst en vertrek, het aantal personen kamervoorkeuren,… aangegeven worden.
Jeugdhuis – reservatieformulier waarin bijvoorbeeld de huuropties –  bier, wijn,  muziekinstallatie, schoonmaak door huurder of verhuurder,… – aangegeven worden.
Pizzeria – bestelformulier waarmee de klant zelf een eigen pizza kan samenstellen door de ingrediënten aan te geven.

Bovenstaande voorbeelden bieden een initiële voorbeeldinhoud, maar het is nodig dat je zelf grondig onderzoek doet naar welke elementen op zo’n formulier nodig zijn en hoe je ze best toont. Ook welke controles je best toepast vereist onderzoek. Voor sommige onderdelen zal bijvoorbeeld een <input>-element volstaan, andere onderdelen werken misschien beter met een keuzelijst, selectievakjes,… Daar dit een 101 cursus is, is gevorderde toepassing niet nodig, bv. omgaan met schrikkeljaren indien je zelf een soort kalender maakt. Vraag na indien je vragen hebt.

Hoe er rekening mee dat je voor deze case niet alles zal kunnen doen. Zo wordt een registratie- of aanmeldpagina normaal uiteindelijk met PHP gecodeerd, niet (enkel) via JavaScript. Je mag dit wel opnemen, maar houd er rekening mee dat er normaal ook een servervalidatie moet gebeuren naast de client-side JavaScriptvalidatie.


Codering

Werk in ‘strict mode’ voor het hele script en maak een apart .js-bestand aan.

Je werkt volgens onderstaande regels – code die afwijkt van deze regels is niet toegestaan.
Er zijn honderden oplossingen mogelijk, dus (bijna) identieke oplossingen (plagiaat) is niet toegestaan. Je schrijft de code ook zelf. Online gevonden formulieren en validatiescripts hoofdzakelijk of geheel overnemen mag niet. Natuurlijk kan je wel opzoekwerk doen hoe je bepaalde onderdelen moet scripten.

Zorg ook voor nette code met correcte inspringing en commentaar waar nodig.


Controle

De controles worden uitgevoerd bij het klikken op de ‘verstuur’-knop van het formulier. Roep hiervoor een functie op met naam verstuur(). Een eerste controle bestaat uit het kijken of alle verplichte velden ingevuld zijn, indien een veld niet ingevuld is, moet er naast dit veld een foutmelding verschijnen.

Enkel als de eerste controle geslaagd is, volgt een tweede controle. Indien een veld een fout bevat, moet er naast dit veld een foutmelding verschijnen. Je mag hierbij gebruik maken van reguliere expressies. Maak gebruik van je gezond verstand en Google om de validatiespecificaties op te stellen.

Versturen

Indien het formulier correct werd ingevuld, moet dit verstuurd worden via het e-mailprogramma van de gebruiker. Zorg voor een gepaste inhoud van dit e-mailbericht.

Lay-out

Zorg voor een moderne layout van het formulier die aansluit bij rest van de website.
 

Evaluatieresultaat voor Interface Design

Geslaagd met 94% van het eindtotaal

Evaluatieresultaat voor Web Layout Design

Geslaagd met 88% van het eindtotaal

Evaluatieresultaat voor Javascript deel 1

Geslaagd met 91% van het eindtotaal