PORTFOLIO WEBSITE DOCUMENT AMY VERLOUW VAK: DED KLAS: M21T DOCENT: SCL

PORTFOLIO WEBSITE DOCUMENT AMY VERLOUW VAK: DED KLAS: M21T DOCENT: SCL 1

INHOUDSOPGAVE Doelgroep Concept uitleg en Sitemap Mock- Ups Lettertype- en kleurverantwoording PHP & Database Database Pagina s & SQL Javascript 3 3 5 9 10 10 11 14 2

DOELGROEP Als je een website maakt, is het natuurlijk de bedoeling dat je een doelgroep hebt. Ten eerste wil ik dat het portfolio voor mezelf is: een netjes, geordend overzicht van mijn werk en kwaliteiten. Daarnaast is het portfolio belangrijk voor toekomstige werk/opdrachtgevers. Door naar mijn portfolio te kijken, kunnen zij een inschatting maken van hoe goed mijn werk is en of zij zoiets kunnen gebruiken. Daarnaast is handig om een portfolio te hebben voor medestudenten en docenten. Zo hebben zij ook in één oogopslag een beeld van wat ik nu precies uitgevoerd heb. CONCEPT UITLEG EN SITEMAP Nadat ik de doelgroep heb bepaald, ben ik gaan denken over wat ik nu precies op mijn portfolio website wil laten zien. Ik wil een one- page website maken met bovenaan een menu en verschillende menu- items. Je kunt bij de verschillende onderdelen terecht komen door simpelweg door de website heen te scrollen, maar je kunt ook op een menu- item klikken en zo naar onder worden verwezen. Bij About geef ik een kort verhaaltje over mezelf en voeg ik een foto toe. Bij Services ga ik de services van mijn werk neerzetten, denk hierbij aan design, user friendly, concept en codering. Bij Work komen al mijn creaties te staan. Ik wil het ook mogelijk maken om verschillende buttons toe te voegen met filters zoals Web Design, Graphics en Rubrics. De rubrics moeten echter alleen maar zichtbaar zijn voor mensen die hier iets aan hebben. Denk hierbij aan docenten en mezelf. Daarnaast wil ik dat als je op een foto van een portfolio item klikt, je hierbij een pop- up krijgt met de informatie en indien een website, de link hier naartoe. Bij Contact wil ik een uitklapbaar contactformulier maken. Iemand moet mij een berichtje kunnen sturen. Hiervoor moeten zij wel een naam, e- mailadres, onderwerp en bericht invullen. De log- in pagina heb ik inmiddels veranderd naar een My account pagina. Het is de bedoeling dat je als je op deze link klikt, naar een aparte log in pagina wordt verwezen. Hier kun je dus gelijk inloggen. Ook kun je als je nog geen account hebt, hier de link registreren aanklikken: dan word je naar een registratiepagina doorverwezen. Als je een account hebt aangemaakt, kom je weer terug bij de log- in pagina. Als je ingelogd bent krijg je de keuze om je account te bewerken/verwijderen. Een admin krijgt hier echter niet alleen de keuze om zijn/haar account te bewerken/verwijderen, maar ook de keuze om het account van iemand anders te bewerken/verwijderen. 3

Ik ben er nog niet helemaal over uit of ik de website in het Nederlands of Engels wil maken. Hierin moet ik nog een duidelijke lijn trekken, maar ik twijfel hier nog een beetje over. Vandaar dat sommige dingen half in het Nederlands, half in het Engels uitgewerkt zijn. SITEMAP Home About Services Werk Contact (Log- In) 4

MOCK- UPS Landingspage: Dit is de eerste pagina van mijn one- page portfolio. Ik heb gekozen om een menu vast aan de bovenkant te prikken, met een logo aan de linkerkant. Daarnaast komt er onderaan een pijl naar beneden, zodat je ziet dat je naar beneden moet scrollen. Verder komt er over de gehele pagina een achtergrond afbeelding en staat er in het midden een tekst. 5

De about- pagina bestaat uit het menu aan de bovenkant, de titel About en een foto van mijzelf links in een kolom en in de rechterkolom komt de hoofdtekst. De services pagina bestaat uit het menu aan de bovenkant, de titel services, en vier (of misschien drie) kolommen met aan de bovenkant een icoontje en eronder de korte uitleg. 6

De work pagina bestaat uit het menu aan de bovenkant, de titel work met daaronder buttons van verschillende filters en hieronder staan de foto s van previews van projecten. Op dezelfde pagina, komt er een pop- up als je een preview van het werk aan klikt. Deze pop- up is een heel klein beetje doorzichtig en bevat de naam van het project, de uitleg aan de linkerkant en drie foto s. 7

Contact bestaat uit het menu, de titel Contact en twee kolommen. Aan de linkerkant staan iconen met daarnaast de kopjes en informatie. Aan de rechterkant is een formulier waarbij je je naam, e- mail en bericht moet invullen, en een verzendknop. Als laatste is er de log- in pagina. Inmiddels heb ik besloten om de contactpagina een losse pagina te maken. Deze komt dus niet onderaan de website. Wel is het concept vrijwel hetzelfde. Het enige verschil is dat onder het formulier nog een registreer- optie is toegevoegd. 8

LETTERTYPE- EN KLEURVERANTWOORDING Ik wil een portfolio maken met een moderne uitstraling. Daarom hou ik de achtergrond en lettertype kleuren graag wit en grijs. Daarnaast wil ik graag één kleur hebben die eruit springt. De fonts die ik wil gaan gebruiken zijn Montserrat en dan Sans Serif. Daarnaast heb ik een website gevonden met Flat UI Colors. Hiervan wil ik naast het gewone wit, de kleuren Clouds en Peter River, Emerald of Turquoise gebruiken. Door deze manier van lettertypes en kleuren te combineren, krijgt je website een minimalistic uiterlijk. Ik heb wel meerdere van zulke ontwerpen gemaakt en ik vind deze altijd enorm overzichtelijk en modern. Groen staat vaak voor naar binnen gericht en rustig, dit staat gelijk aan mijn persoonlijkheid en groen heeft voor mij daarom een voorkeur. De kleur Turquoise heb ik gebruikt in mijn opzet en zal ik waarschijnlijk ook blijven gebruiken. 9

PHP & DATABASE Natuurlijk hoort in een website ook een stukje PHP te zitten. Dit ga ik in mijn portfolio website laten terugkomen doormiddel van een inlogsysteem. Zodra je rechtsboven in het menu op My account klikt, kom je op de inlogpagina. Als je nog geen account hebt, kun je onder het formulier op Registreer hier klikken. Mocht je al wel een account hebben, dan kun je inloggen met de gegevens waarmee jij je geregistreerd hebt en kun je (gebaseerd op je level) je account (of meerdere accounts) bewerken en/of verwijderen. Daarnaast kun je ook teruggaan naar de portfolio website en kun je als admin of editor dingen aanpassen. DATABASE Aan inlog- gegevens zit natuurlijk een database gekoppeld. Hiervoor gebruik ik MySQL / PHPMyAdmin via de Iris- server. De database komt er als volgt uit te zien: Iemand die zich registreert zal altijd een unieke ID moeten hebben. Dit is dus de primary- key en zal voor elke geregistreerde gebruiker anders zijn. Daarnaast moet het e- mailadres ook uniek zijn. Het is namelijk niet mogelijk om op één e- mailadres meerdere accounts te registreren. Het wachtwoord wordt in de database opgeslagen als hatch waardoor niemand het daadwerkelijke wachtwoord kan zien. Het level wordt gebruikt om aan te geven welke gebruikers welke rechten hebben. Dit gebeurt tot nu toe nog handmatig, maar hier kan vast ook een handigere oplossing voor zijn. Ik kan dus een user Admin maken door dit aan te passen bij level. Het level blijft wanneer iemand een account aanmaakt standaard leeg. 10

PAGINA S & SQL REGISTREER Als je een account aanmaakt, zal deze ook opgeslagen moeten worden in de database wanneer je op de knop registreer drukt. Dit gebeurt met het volgende SQL statement: INSERT INTO login (username, email, password) VALUES ('$username', '$email', '$hash')"; 11

LOGIN Vervolgens moet je kunnen inloggen. Uiteraard word je nadat je een account aangemaakt hebt, gelijk doorgestuurd naar de inlogpagina. Hier moet je je e- mailadres en wachtwoord invullen in een form. Ook worden deze gevalideerd en worden er foutmeldingen gegeven wanneer de gegevens niet overeenkomen. Zodra beide velden correct zijn ingevuld, zullen deze uit de database opgehaald worden met het volgende SQL statement: $sql = "SELECT username, email, password, level FROM login WHERE email='". $email. "'"; Hierna word je doorgestuurd naar de overview of ingelogd pagina. Mochten de gegevens niet kloppen en heb je bijvoorbeeld een fout wachtwoord ingegeven, dan krijg je een melding dat je onjuiste gegevens ingevoerd zijn of dat de gegevens niet bekend zijn. 12

OVERVIEW Zodra je ingelogd bent, kom je op de overview/ingelogd pagina. Nu wordt er gecontroleerd of je wel of geen admin bent. Dit gebeurt als volgt: if ($level === 'Admin') { $sql = "SELECT id, username, email, password, level FROM login"; } else { $sql = "SELECT id, username, email, password FROM login WHERE email='$email'"; } Als je admin bent, worden de gegevens van alle gebruikers uit de database geladen. Als je geen admin bent, worden alleen jouw gegevens uit de database geladen. Hier wordt voor gezorgd doordat alleen de gegevens die gelinkt zijn aan het e- mailadres van de ingelogde gebruiker weergegeven worden. Verder moet ik nog een optie toevoegen om uit te loggen en pagina s op de portfolio website te bewerken. 13

JAVASCRIPT VOORBEELDEN Voorbeelden van Javascript die ik gaaf vind: http://www.menucool.com/slider/javascript- image- slider- demo1 Dit is een slider die is gemaakt met Javascript en geen JQuery. Nu heb ik zelf niet echt een slider nodig voor mijn portfoliowebsite, maar ik vind deze toch zeker wel handig om te onthouden voor eventuele latere projecten. http://www.cssscript.com/demo/javascript- plugin- for- smooth- responsive- background- images- backwall/ Smooth background images. Dit is erg handig voor als je grote afbeeldingen hebt die snel mee moeten schalen. Deze ga ik wellicht gebruiken in mijn portfolio, maar is geen noodzaak. 14

JAVASCRIPT CODE SNIPPETS De volgende Javascript Code Snippets wil ik gaan gebruiken voor mijn website: SMOOTH SCROLLING De volgende snippet zorgt voor de smooth scroll in mijn website. Script in HTML: <script src="scroll.js"></script> scroll.js document.addeventlistener("domcontentloaded", function() { "use strict" var links = document.queryselectorall("a.scroll") var i = links.length var root = /firefox trident/i.test(navigator.useragent)? document.documentelement : document.body var easeinoutcubic = function(t, b, c, d) { } if ((t/=d/2) < 1) return c/2*t*t*t + b return c/2*((t- =2)*t*t + 2) + b while (i- - ) links.item(i).addeventlistener("click", function(e) { var starttime var startpos = root.scrolltop var endpos = document.getelementbyid(/[^#]+$/.exec(this.href)[0]).getboundingclientrect().top var maxscroll = root.scrollheight - window.innerheight var scrollendvalue = startpos + endpos < maxscroll? endpos : maxscroll - startpos var duration = 900 var scroll = function(timestamp) { starttime = starttime timestamp var elapsed = timestamp - starttime 15

var progress = easeinoutcubic(elapsed, startpos, scrollendvalue, duration) root.scrolltop = progress elapsed < duration && requestanimationframe(scroll) } requestanimationframe(scroll) e.preventdefault() }) }) scroll.min.js document.addeventlistener("domcontentloaded",function(){for(var c=document.queryselectorall("a.scroll"),a=c.length,e=/firefox trident/i.test(navigator.useragent)?doc ument.documentelement:document.body;a- - ;)c.item(a).addeventlistener("click",function(c){var f,d=e.scrolltop,a=document.getelementbyid(/[^#]+$/.exec(this.href)[0]).getboundingclientrect().top, g=e.scrollheight- window.innerheight,h=d+a<g?a:g- d,k=function(a){f=f a;a- =f;var c;var b=a;c=1>(b/=450)?h/2*b*b*b+d:h/2*((b- =2)*b*b+2)+d;e.scrollTop= c;900>a&&requestanimationframe(k)};requestanimationframe(k);c.preventdefault()})}); MIXITUP Ik gebruik MixItUp voor het filteren van mijn portfolio items. Deze functie zorgt ervoor dat je kunt filteren op datum en ook op tags. Scripts in HTML: <script src="js/main.js"></script> <script src="http://code.jquery.com/jquery- 1.11.0.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script> main.js $(function(){ $('#MixItUp1').mixItUp({ selectors: { } filter: '.filter- 1', sort: '.sort- 1' 16

}); $('#MixItUp2').mixItUp({ selectors: { filter: '.filter- 2', sort: '.sort- 2' } }); }); 17