Sigrid Bekkema 2e jaars Geo media & design studente Webdesign & -development assessment
2
Inleiding Dit document is samengesteld voor het assessment van de module webdesign en -development en bestaat uit de voorbereiding voor de nieuw te bouwen website. Voordat er een prototype website opgeleverd kan worden wordt er aangeraden om verschillende stappen te doorlopen. De url van de website is www.sigrid.inhetwaterland.nl en de website is tot stand gekomen dankzij Wordpress. Dit document kan gezien worden als de rode draad voor het proces van de website. Het proces wordt per leertaak onderverdeeld zoals ze zijn ingedeeld in het module werkboek. Tevens wordt dit document bewaard om als voorbeeld te dienen voor toekomstige (web)design projecten. Er is een apart document van de lessen van webdesign waarin verschillende opdrachten worden uitgevoerd ter bevordering van dit project. De opdrachten die zo doende van toepassing zijn voor dit project worden tevens in dit document gezet en benoemd. De software die gebruikt is om dit document vorm te geven is Adobe InDesign. Hiervoor is bewust gekozen om ook de vaardigheden van dit programma nog beter onder de knie te krijgen. Vragen en feedback over het document en de website zijn altijd welkom.
3
4
Inhoudsopgave Inleiding 3 Leertaak 1 7 Leertaak 2 16 Leertaak 3 26
5
6
Leertaak 1 Leertaak 1 bestaat uit het maken en presenteren van een plan van aanpak voor dit project. Na het presenteren zal de feedback worden meegenomen en de leertaak wordt vervolgens ingeleverd. Dit plan van aanpak bestaat uit verschillende subcategorieĂŤn die later worden toegelicht.
1.1 Doel Het doel van dit project is een website opzetten die betrekking heeft met het onderwerp ‘Sustainable Urban Delta’. Op de website wordt een onderwerp uitgelicht dat gaat over duurzame stedelijke ontwikkeling. Deze website gaat over duurzame functiecombinaties, wat het nut hiervan is en wat voor betrekking dit heeft met duurzame stedelijke ontwikkeling. De website heeft wil inspiratie bieden voor de lezers zodat dit leidt tot bewustwording en verandering in hun gedrag. De lezer zal enthousiast worden en vervolgens kijken hoe hij/zij een bijdrage kan leveren voor een duurzame wereld d.m.v. functiecombinaties.
1.2 Doelgroep De doelgroep is gebaseerd op het adoptiemodel van mr. Rogers(1962). Dit model is voornamelijk toegepast in de marketingwereld voor het toepassen van nieuwe producten maar kan ook voor vernieuwende websites worden toegepast. Als er gefocust wordt op een groep voorlopers die ook wel pioniers genoemd worden komt er vanzelf een groep volgers bij. Nadat er een duidelijk grote groep de website bezocht heeft worden de twijfelaars, welke de volgende groep is, ook over de streep getrokken. Hierdoor vergroot je het animo wat de website bezoekt. De doelgroep wordt bepaald door verschillende uitgangspunten van de doelgroep bij langs te gaan. De leeftijd van de doelgroep ligt tussen de 20 en de 35 jaar. De verhouding man/vrouw ligt gelijk. De burgerlijke status van deze doelgroep is of single of samenwonend. De meeste mensen hebben een bachelor afgerond en werken voor vooruitstrevende bedrijven op freelance basis. Het inkomen is boven modaal en ze investeren graag in een goede toekomst. De idealen van de doelgroep worden gevormd door bewustwording van het huidige gedrag van de maatschappij, de doelgroep is optimistisch ingesteld en staan open voor verandering. De wereld wordt Ondanks dat de doelgroep graag investeert in een goede toekomst leven ze ook alsof vandaag de laatste kan zijn. De wereld moet gezien worden, er wordt lekker gegeten en er staan verschillende Apple apparaten in huis. De doelgroep is gevestigd in en rondom grotere steden in Nederland, ondanks dat ze graag gezien willen worden als pioniers houden ze van de comfort die een stad ze biedt. Het openbaar vervoer en de fiets zijn een van de meest gebruikte vervoersmiddelen van de doelgroep. Ondanks dat de meesten wel een rijbewijs hebben leven ze bewust zonder auto. Het web wordt voor deze doelgroep gezien als een grote inspiratiebron. Men leeft bij de idealen en deelt deze ook zonder problemen met elkaar. Eerlijk- en openheid staan dan ook hoog op het vaandel van deze mensen. De inspiratie wordt gedeeld door middel van de zovele social media accounts ze bezitten. Hiernaast zijn sommigen ook aan het bloggen of vloggen over hun leven en interesses. Positieve interactie is een van de levensbehoeftes van de doelgroep.
7
1.2.1 Buyer persona’s De buyer persona’s zijn geinspireerd op vier verschillende MBTI types. De benoemde MBTI types zijn ingedeeld als volgt: een competitieve bezoeker, een spontane bezoeker, een humanistische bezoeker en als laatste een methodische bezoeker. Competitieve bezoeker Aagje Dassen, hoofd assistent inkoop “Waar”. Aagje is 27 jaar, heeft een fulltime baan als hoofd inkoop assistent bij de duurzame cadeaushop keten “Waar”. Aagje heeft een druk leven en is gewend om snel beslissingen te nemen. Ze houdt van organiseren en organiseert in haar vrije tijd ook af en toe een feestje voor haar vrienden. Zo’n feestje varieert van een barbecue tot een mini vakantie. Ze heeft een bachelor afgerond en studeert hiernaast nog aan haar master, dit valt te combineren met haar werk. Aagje is momenteel happy single en heeft ook niet de interesse om op korte termijn in een relatie te stappen. Zij besteed veel aandacht aan haar vrienden en vriendinnen en wil volop carrière maken. Zij huurt een grote studio in Zwolle en heeft geen eigen auto. Ze reist met de fiets, openbaar vervoer of ze carpoolt met bekenden. Dit is een bewuste keuze geweest. Wel woont Aagje samen met haar kat Pino. Pino is geadopteerde ras kat (blauwe rus) van 4,5 jaar oud. In haar studio staat een groot bureau waar ze vaak achter zit te leren voor haar master, haar manier van verdiepen in het onderwerp is om er interessante Tedtalks over op te zoeken en of andere gefilmde lezingen. Tevens heeft ze een groot planbord op haar koelkast waar ze alle belangrijke dingen in rijtjes sommeert. Aagje hecht geen waarde aan apparatuur, ze heeft een Windows laptop maar zit vaker achter haar Ipad. Aagje beheerst niet altijd alle computers even goed. Zolang het doet zoals het moet, is er niks aan de hand. Echter kan zij niet tegen langzaam computeren, dit wekt frustratie op. Aagje gaat minimaal twee keer per jaar op vakantie. Dit zijn meestal citytrips naar grotere steden, omdat zij zich hier goed op kan voorbereiden. Ze houdt niet van verrassingen. Ook houdt Aagje van lekker eten. Wel heeft ze een specifieke voorkeur voor de bekendere keukens. Je zal haar niet snel in een Thais of Maleisisch restaurant zien. Aagje is niet heel erg van kinderen, ze vind ze toch altijd wat uit de onverwachte hoek komen. Aagje kan het goed vinden met haar kat Pino. Hij praat niet tegen haar en dat houdt het rustig. Ze vind het heerlijk om een zaterdagavond op z’n tijd samen met Pino thuis op de bank voor de tv te besteden.
8
Spontane bezoeker Dirk van Groenendaal, freelance SmartCities adviseur, gemeente Amsterdam Dirk is 32 jaar oud, werkt als freelance SmartCities adviseur en werkt momenteel ook onder contract bij de gemeente Amsterdam. Dirk werkte hiervoor bij een groot verzekeringsbedrijf en is met een ‘oprotpremie’ de deur uit gestuurd. Hierdoor heeft Dirk het financieel niet lastig en kan hij doen wat hij leuk vind. Dirk houdt er van om samen met zijn vriendin Marah leuke ondernemingen te doen. Zo boeken ze vaak ergens een hotelletje om te overnachten. De relatie met Marah is zo’n twee jaar bezig. Ze wonen sinds kort samen in een flatje in Rotterdam. Beide hebben geen kinderwens en hun relatie loopt na omstandigheden soepel. Ze wonen samen maar zijn niet claimend naar elkaar toe en gunnen elkaar zeker de vrijheid die ze nodig hebben. Dirk zijn flatje is volgens de wensen van Marah ingericht. Dirk toont geen interesse in meubilair en vind apparatuur belangrijker. Hij is een fanatieke gadget fan en maakt hier ook goed gebruik van, zo heeft hij een Iphone, Ipad, Imac en draagt hij sinds kort ook een Iwatch. Dirk is wel spiritueel ingesteld, hij houdt van het leven en hij heeft kenmerken van een Boeddhist. Hij zoekt bewust naar de toegevoegde waarde van het leven en boekt zo’n af en toe een last minute vakantie voor hem en Marah. Ze gaan met z’n tweeën vaak uit eten. Dirk is regelmatig in de sportschool te vinden en hij gaat soms impulsief mee met zijn vrienden om te voetballen. Als het even kan staat Dirk zondagmorgen zijn neefje aan te moedigen aan de kant. Hij is gek op zijn neefje en zijn neefje logeert ook vaak bij Dirk en Marah. Ook gaan ze graag samen naar de bioscoop. Dirk houdt zelf heel erg van 3D films en deelt deze passie met zijn neefje.
9
Humanistische bezoeker Marthijn Beeld, autonoom kunstenaar Marthijn is 23 jaar, en net afgestudeerd aan de kunstacademie Minerva in Groningen. Hij verdient zijn geld momenteel met een bijbaan bij de bloemist en probeert zijn naamsbekendheid te vergroten zodat hij uiteindelijk van opdrachten uit zijn vak kan leven. Marthijn heeft een grote vriendenkring die voor hem erg belangrijk zijn. Hij vraagt altijd wat zijn vrienden van zijn werk vinden en is constant opzoek naar waardering. Marthijn heeft een vriendin maar woont niet samen. Hij en zijn vriendin zien elkaar vaak in het weekend en vinden het belangrijk om een eigen leven te behouden. Na zijn werk door de weeks gaat hij graag met vrienden poolen in de stad Groningen. Ook houdt hij af en toe om met z’n vrienden een joint te roken voor de gezelligheid. Marthijn woont in een container woning en is bewust van duurzaamheid. Hij probeert zijn ontwerpen dan ook zo veel mogelijk van gerecyclede producten te maken. Zijn gehele inboedel komt bij de kringloop vandaan. Dankzij de interesse op het gebied van hergebruik en duurzaamheid geeft hij af en toe gastcolleges op MBO scholen over dit gebied. Dan neemt hij af en toe zijn werk mee zodat anderen dit kunnen bewonderen. Ook geeft hij workshops over hoe je van verschillende producten een onverwachts tweede leven kunt maken. Deze workshops geeft hij voornamelijk aan mensen met een gemiddelde leeftijd van 45 jaar. Marthijn houdt echter niet van veranderingen op het gebied van eten, hij kan het meeste genieten van aardappelen met groenten en een stukje vlees. Hij gaat dan ook niet vaak uit te eten en eet vaak bij zijn ouders thuis.
10
Methodische bezoeker Daphne Corrs, studente Daphne Corrs is een studente van 21 jaar. Zij studeert Economie en wil graag eigen ondernemer worden. Wel is zij zich zeer bewust dat de gang van zaken zoals nu niet goed zijn voor deze wereld. Ze woont en studeert in Rotterdam en vind dat er in de stad wel het een en ander kan veranderen. Ze woont zelf in een kamer die zij huurt van vrienden van haar ouders. Daphne is een langzame beslisser, en een perfectionist, hierdoor heeft zij enige vertraging opgelopen met haar studie. Daphne houdt overigens wel van gezelligheid, zo zit zij in het bestuur van de studentenvereniging “Hocus Pocus Augustia�. Een studentenvereniging die duurzaamheid en verbetering van een leefomgeving hoog op de kaart zet. Daphne is sinds dit jaar penningmeester. Daphne huurt bij vrienden van haar ouders een mooi kamertje in Rotterdam, ze heeft heel lang nagedacht over hoe ze het wou inrichten maar is met de Scandinavische stijl die ze in haar interieur heeft verwerkt erg tevreden. Daphne zit ook in een korfbalvereniging waar ze vaak mee speelt. Ze heeft een winnaarsmentaliteit en is niet snel tevreden met een wedstrijd. Zo kan ze een week lang ongelukkig zijn en nadenken over een verloren wedstrijd. Tevens is Daphne echt een gadget geek, alleen kijkt ze meestal wel de kat uit de boom. Zo heeft ze na de uitkomst van de Iwatch eerst gewacht op de eerste recensies. Maar ze kocht hem na positief commentaar wel direct.
11
1.3 Planning
week nummer
46 47 48 l
ee ction = fu n aak 2 werp leert o nt
Doelgroep bepalen d.m.v. vragen over
wie, waar.. interesses etc.
Puntjes op de i en alvast nadenken
over functioneel
ontwerp les 1 van hwed2
28/11 Deadline ver-
beterde versie leertaak 1 inleveren
Plan ning m ake en v n orm g v van e en het ver slag
Ademhalen,
bewust feed-
kopje thee en
bezinken
back laten
Website om-
schrijven aan de wensen van de
geinterviewden
self 2 my Note oet , je m Sigrid t rojec het p N! KENE
Feedback toe-
bewust web-
toepassen in de
designtrends
waar nodig
ren en aanvullen
passen, verbete-
AFBA
whiteboard Planning-)
Onderwerp
bepalen over sustainable
urban delta dingen
22/11
Presentatie
leertaak 1 aan de klas
nog me er me nse n interviewen te r behoeve van de website
omschrijving
met
leertaak 1 = plan van aanpak
Prutsen
of Powtoon zo Emaze of presenvoor de n het tatie va lan projectp
Mensen uit de d o e lgroep vinden om te interv ie w e n voor leerta ak 2 e n 3
ling sty n ke ma art leu ka e k e r d rafi voo pog po, ty om ren n c m e vor sitie
12
aak 3
leert
p twer
12/12 Deadline ver-
inleveren
beterde versie leertaak 2
be gi t n e m ch w ak nis er e c p n h le o e n r t ta ak 3
n isch o
hn = tec
week nummer s /\
a rkla Sinte
49
50 51
19/12
Deadlin e v erbete rd e v ersie leertaa k 3 inleveren
testen uit-
wordpress
toevoegen
content
, len ha eem , b ee ad ck th ba pje n ed ko fe ke st zin wu be en lat
boek
modulewerk-
leertaak 3, zie
voeren voor
leertaak 2
leertaak 3
werp aanhouden
functioneel ont-
klasgenoten
feedback
hand van
ren aan de
verbete-
klasgenoten
van feedback
aan de hand
verbeteren
whiteboard Planning-)
6/12
Speeddates
met klasgenoten leertaak 2
13/12 Leertaak 3 bij klasgenoten inleveren
kleurpalet
wordpress aanpassen
content
management system en talen
keuze toelichten + bestandsformaten
puntjes op de i
website
bezig met de
met ten star n asse toep nisch tech erp ontw
13
& oud
euw/\ en ni
week nummer
kerst
52 1
/\ antie vak kerst
2
kerst vieren
bu f f er si t w e eb bo uw en
10/1 Klantgesprek !! van een half uur met de docenten
verschillen-
feedback we-
ken
derom verwer-
ken opzoeken
klantgesprek-
de scenario’s
en lat n e ss re en st nk rzi ve be e n ein ge kl rin n te se be as np aa
bouwen
bedenken
van te voren
vragen enz.
voorbereiden,
klantgesprek
individueel
buffer website
whiteboard Planning-)
bewust niks doen
e it bs we er en uw bo ff bu
feedback
verwerken
klantgesprek
buf fer v o punt or jes op d e i
ype
otot 4 = pr taak bsite we
leer
b u w ff eb er b s o uw ite en
voorbereiden
klantgesprek
met een wille-
offer
keurig slacht-
4 13/1 ak rta Lee oor en v ver inle ck dba fee
14
week nummer
3 4
feedback
verwerken leertaak 4
extra tijd
herkansing
voor eventueel
buffer
ment
gehele assess-
lijn voor het
De echte dood-
20/1
whiteboard Planning-)
puntjes op
de i gehele
assessment
eindelijk weer
slapen
tijd om bij te
15
Leertaak 2 Leertaak 2 bestaat uit het functioneel ontwerp. Hierin zijn wireframes gemaakt van de website, is de navigratiestructuur weergegeven is een contactformulier vormgegeven, en zijn de kleuren en lettertypen bepaald door middel van een stylingcard.
2.1. Navigratiestructuur De navigratiestructuur is hiernaast weergegeven. Het is de bedoeling dat je in het menu alle kanten op kunt gaan. Ook zit er in het menu verschillende dingen ingedeeld. Het is nog niet zeker of er een webshop op de website komt maar het zou zo kunnen. Op de homepage kan je verschillende dingen bekijken, zo kan je weetjes, tips en interviews aanklikken en staan er verschillende inspirerende quotes op. Tevens is er een grote slider die dient als foto album. Dit moet een eyecatcher worden.
16
Homepage Weetjes Tips
Contact formulier
Contact Gegevens Adres
Over ons Hoofden
Webshop
Privacy disclaimer Bestellen Registreren
Route
Quotes
Betalen
Interviews Foto album
Bevestigen
Live chat
Inlog ding chat
Zoekfunctie
17
2.2. Wireframes website De wireframes die gemaakt zijn zijn met behulp van Balsamiq vormgegeven. De wireframes geven globaal weer waar wat komt te staan op de website.
2.2.1 Homepage De eerste wireframe die op de volgende pagina afgebeeld is een wireframe van de homepage. Boven in de header komt het log te staan ernaast komt direct een menubalk voor de navigratie. Bovenin de body startten we met een slider met allerlei inspirerende beelden van duurzame functiecombinaties projecten. Hierin wordt doorgelinkt naar een pagina met meer informatie over dit project. Daaronder staan drie blurbs die naar verschillende pagina’s verwijzen over ‘Tips, weetjes en interviews’. Onder de blurbs komt een insprirerende quote over duurzame functiecombinaties. En daar onder komen kleine stukjes te staan over de duurzame functiecombinaties projecten die ook al eerder in de slider boven in te zien zijn. Helemaal op het eind, boven de footer komt een inspirerende spotify playlist die wisselt per seizoen. In de footer is een kleine herhaling van de header te zien met wederom het logo en een navigratiemenu.
18
19
2.2.2. Contactpagina De tweede wireframe is gemaakt van de contactpagina. De header is gelijk aan de header van de homepage. De slider loopt ook gelijk met de slider van de homepage, zo kan iedereen op ieder moment verder klikken naar een inspirende project. Daaronder is drie kolomsverhouding gemaakt met een foto van het bezoekadres, gevolgd met de contactgegevens en een knop naar het contactformulier. Daaronder ziet men kaart waarin het bezoekadres is weergegeven.
2.2.3. Over ons Een belangrijke pagina voor de website is de “Over ons” pagina, hier wordt openlijk verteld over de ambities van de personen. De header blijft ook hier gelijk aan de homepage en de contact pagina. De geliefde slider van de webpage volgt ook wederom hier. Daaronder worden drie afbeeldingen van de ‘Hoofden’ gepost. Aangezien de website door alleen mij gerund wordt komt hier mijn hoofd, en twee inspirerende afbeeldingen. Daaronder komt bij 1 een tag cloud met allerlei ‘tags’ gerelateerd met wat wij doen. In het midden, waar het hoofd staat, komt een persoonlijk verhaal over mijn eigen ervaringen. De afbeelding ernaast komt een verhaal over de ontstaanswijze van de website te staan. Wat volgt is dezelfde volgorde van de contactpagina, met de afbeeldingen van het pand, contact en het contactformulier. Wederom wordt dit gevolgd door de kaart waar het bezoekadres is weergegeven.
20
21
2.2.4. Live chat De life chat is indien haalbaar ook op de webiste. Hier wordt weer de standaard header en slider weergegeven en staat er een blok in het midden van de webpage waar de chat zich automatisch opstart. Je kan zien wie er live zijn met avatar en chatten. Onder de chat staat ook zoals op de homepage een spotify playlist geplaatst. De footer bevat wederom het logo en het navigratiemenu.
2.2.5. Zoekmenu Het zoekmenu bevat een duidelijk filter waardoor de zoekopties snel gevonden zijn. Zie hiernaast.
2.3. Contactformulier Het contactformulier wat gemaakt wordt bestaat uit de volgende punten: Naam, e-mail adres en bericht. Hiervan is het e-mail adres en het bericht een verplicht onderdeel om in te vullen. De vraag is of het standaard contactformulier van Wordpress voldoende is. Een voorbeeld contactformulier is gemaakt via www.contactformulieren.nl HTML link: <a href=”http://www.contactformulieren.nl/formulier/web/zXGt0feVbLoqxu6yJn_4/” title=”contactformulier”>Contactformulier</a> Iframe Code: <iframe src=”http://www.contactformulieren.nl/formulier/frame/zXGt0feVbLoqxu6yJn_4/” frameborder=”0” height=”600” width=”350” scrolling=”no”><a href=”http://www. contactformulieren.nl” title=”contactformulier”>Contactformulier</a> gemaakt via ContactFormulieren.nl</iframe> Link: http://www.contactformulieren.nl/formulier/web/ zXGt0feVbLoqxu6yJn_4/ Voorbeeld foto hiernaast:
22
23
2.3 Stylingcard De stylingcard is hiernaast visueel vormgegeven. De toelichting wordt hieronder verder gegegeven. Het logo is geïnspireerd uit het circulaire denkbeeld wat onderdeel is van duurzaamheid. Echter leven wij nog niet volledig circulair en wordt hier aan gewerkt. Niets is perfect, dat probeert de cirkel om de tekst ook aan te geven. Hij is niet volledig rond omdat er altijd verbeterpunten zijn aan te merken, ook is om die reden de cirkel niet volledig gesloten. De tekst, duurzame functiecombinaties probeert echter wel de cirkel te sluiten waardoor het patroon verbeterd wordt. De kleuren die gebruikt worden zijn de voorjaarstrendkleuren 2017 van Pantone. Tevens staat de roze kleur voor de zachte kant van de mens, de oranje voor het vuur wat in ons zit, de blauw heeft met de realiteitszin te maken dat we de idealen waar willen maken. De antraciet kleur is erbij gekozen omdat we ‘steenvast’ zijn maar ook zelfverzekerd. De RGB kleurcodes zijn als volgt: Oranje: 246,90,60 | Roze: 246,208, 200 Blauw: 73, 138, 163 | Antraciet: 86, 89, 89 De inspiratie heb ik gebaseerd op de kleurencombinatie via Pinterest, je ziet als eerste afbeelding schelpen, als tweede afbeelding roest en als derde afbeelding de woeste zee en als laatste zie je antraciet wol. De details zijn belangrijk, vandaar de quote van Charles Eames. Meneer Eames is een grote naam in de meubelbranche en heeft samen met zijn vrouw tijdloze designklassiekers geproduceerd. De gekozen fonts zijn tot stand gekomen met Google fonts. Het is een combinatie van Palentino italic en Tahoma en dit geeft een moderne en chique uitstraling. Door een schreef font (Palentino italic) toe te passen in de titels en de knoppen wordt de website minder statisch. De grafische elementen worden afgerond zoals hiernaast is vormgegeven ook wordt hier duidelijk gebruik gemaakt van de kleuren die zijn genoemd. Wel worden tekstkaders zachter gemaakt en krijgen ze een helderheid van 18%. De omlijning wordt 100%.
24
- Logo -
- Colors Trend kleuren Spring 2017 Pantone
- Inspiration The details are not the details. They make the design - Charles Eames
- Fonts abcdefghijklmn opqrstuvw ABC
abcdefghijkl mnopqrstuvw ABC
- Grafische elementen Meer info Home
Over ons
Contact Contact
Meer info
Live chat
Webshop
Afbeeldingen JPEG Illustraties PNG
Te k s t k a d e r s kleurtint 18% Omlijning 100%
25
Leertaak 3 Leertaak 3 bestaat uit het technische ontwerp, hierin worden verschillende onderdelen besproken zoals de webtalen en het domeinnaam. Deze onderwerpen worden in subparagraven omschreven.
3.1 Domeinnaam De testomgeving van de website is momenteel www.sigrid.inhetwaterland.nl. Als de website online gaat wordt dit omgezet naar een van deze vijf mogelijkheden: 1. www.duurzamefunctiecombinaties.nl 2. www.duurzaamfunctiescombineren.nl 3. www.duurzamefunctiecombinaties.com 4. www.duurzaamfunctiescombineren.com 5. www.functiecombinatiesverduurzamen.nl
3.2 Webtalen en CMS De website wordt gebouwd in wordpress en met behulp van een klein beetje HTML en CSS. Het is een dynamische website die gebruik maakt van een database. Deze database wordt onder andere toegepast voor de zoekmachine. De webpagina bevat een script dat een koppeling legt met de database. Het script zal de gevraagde database-informatie vertalen naar HTML, waarna de server de webpagina terugstuurt naar de client. De client kan in principe niet zien dat er een database is geraadpleegd. De vormgeving van de website wordt mede dankzij het Divi thema gebouwd. Hiervoor worden sommige CSS bestanden gebruikt.
3.3 Bestandsformaten Zoals al in de stylingcard aangegeven wordt er voor afbeeldingen .jpeg bestandstypen gebruikt. Dit komt omdat je hier afbeeldingen in kan comprimeren zonder dat het menselijk oog dit doorheeft. De illustraties kunnen in .jpeg bestanden kleuren vervallen wat zichtbaar is, vandaar is er een keuze gemaakt om de illustraties op de website op te slaan als .png bestanden. Dit om de kwaliteit te behouden.
3.4 Browser compatibiliteit De website wordt automatisch gebouwd en ondersteund door alle browsers. Ook wordt er rekening gehouden via welke manier de website bezocht wordt, zo is het layout iets aangepast op een tablet of een smartphone. De website zelf is grotendeels gebouwd in Safari. Hij is getest in Google Chrome en Internet Explorer en Safari. Mobiel is de website getest op Safari en het Android besturingssysteem. Hierop zijn ook geen fouten ondervonden.
3.5 Platforms De website is getest op Macintosch en Windows. En is gebouwd op een Macintosch desktop.
26
3.6 Resoluties De resoluties worden vormgegeven door middel van het Wordpress Divi thema. Hierin zijn een aantal standaard resoluties opgenomen. Voor het gemakt worden ze hier onder nog even besproken. 1 kolom: 1080 pixels ¾ kolom: 795 pixels ⅔ kolom: 700 pixels ½ kolom: 510 pixels ⅓ kolom: 320 pixels ¼ kolom: 225 pixels
27
3.7 Snelheid Voor de snelheid is een test gedaan op 13 december 2016. Voor de test is de website is de tool Webpage test gebruikt (webpagetest.org). Hieruit kwamen de volgende conclusies:
- Mijn webpage is niet heel erg snel, dit komt door de spotify link die erin staat. - De tweede keer is hij al dubbel zo snel, tevens is het thema niet heel erg snel.
3.8 W3C Standaard De W3C standaard is een internationaal concortium onder web professionals en gebruikers. Het maakt het navigeren in websites makkelijker. Dit wordt voornamelijk door zorginstellingen en overheden toegepast. Ik heb dit via www.validator.w3.org getest en er kwamen 5 fouten uit, hieronder vermeld: Warning: Consider avoiding viewport values that prevent users from resizing documents. From line 80, column 1; to line 80, column 108 t=xml” />↩<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=0” /> <sty Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.) From line 119, column 69; to line 119, column 110 f+Ruqaa’);<style type=”text/css” id=”et-custom-css”>↩@impo Contexts in which element style may be used: Where metadata content is expected. In a noscript element that is a child of a head element. Content model for element body: Flow content. Error: Stray end tag head. From line 121, column 9; to line 121, column 15 ;↩</style></head>↩<body Error: Start tag body seen but an element of the same type was already open. From line 122, column 1; to line 122, column 393 e></head>↩<body class=”home page-template-default page page-id-53 et_color_scheme_ orange et_pb_button_helper_c…oter_columns4 et_header_style_left et_pb_pagebuilder_layout et_right_sidebar et_divi_theme unknown”>↩ <div Fatal Error: Cannot recover after last error. Any further errors will be ignored. From line 122, column 1; to line 122, column 393 e></head>↩<body class=”home page-template-default page page-id-53 et_color_scheme_ orange et_pb_button_helper_c…oter_columns4 et_header_style_left et_pb_pagebuilder_layout et_right_sidebar et_divi_theme unknown”>↩ <div
28
3.9. (broken)Links Doorlinken is succesvol indien de link succesvol is, omdat ik verschillende projecten benoem op mijn website ga ik gebruik maken van link building. Hierdoor kunnen verschillende mensen naar mijn website worden toegetrokken door middel van zoekmachines zoals Google. Tevens heb ik links in blurbs en menu’s gedaan die allemaal doorverwijzen naar een andere pagina op de website. Alle links werken,alleen zijn de pagina’s nog incompleet. Hier wordt aan gewerkt. Om te checken of mijn website broken links heeft, heb ik gebruik gemaakt van de website http:// smallseotools.com/websites-broken-link-checker/ Deze gaf het volgende aan: Results sr# Link’s URL: Status 1 http://sigrid.inhetwaterland.nl/ OK 2 http://sigrid.inhetwaterland.nl/ OK 3 http://sigrid.inhetwaterland.nl/about/ OK 4 http://sigrid.inhetwaterland.nl/contact/ OK 5 http://sigrid.inhetwaterland.nl/live-chat/ OK 6 http://sigrid.inhetwaterland.nl/webshop/ OK 7 http://sigrid.inhetwaterland.nl/# OK 8 http://sigrid.inhetwaterland.nl/weetjes/ OK 9 http://sigrid.inhetwaterland.nl/weetjes/ OK 10 http://www.sigrid.inhetwaterland.nl/tips/ OK 11 http://www.sigrid.inhetwaterland.nl/tips/ OK 12 http://www.sigrid.inhetwaterland.nl/interviews/ OK 13 http://www.sigrid.inhetwaterland.nl/interviews/ OK 14 https://www.facebook.com/sigrid.bekkema OK 15 https://twitter.com/sigridbekkema OK
3.10 Betrouwbaarheid De website is getest op betrouwbaarheid via Scamadviser.com deze website geeft aan dat mijn website 86% veilig is. Ook heeft de site aangegeven dat het een ‘High trust rating’ is. Het is volgens deze website goed betrouwbaar. Zie afbeelding.
29