13037293/afbeeldingen/oefenrapp… · Web viewDoor jQuery kunnen we HTML5 codes manipuleren om...

Eindproject Havo Website met jQuery en Javascript

Björn van BeekDennis Volkering

Roel van der EndeJeroen Schaareman

H5D

Opsk

Björn van Beek, Dennis Volkering, Jeroen Schaareman, Roel van der EndeH5D

InhoudInleiding..................................................................................................................................................2

Waarom hebben we gekozen om een website te maken?.................................................................2

Wat leren we ervan?..........................................................................................................................2

De onderwerpen................................................................................................................................2

De opbouw van derest van ons verslag..............................................................................................2

Hoofd- & Deelvragen..............................................................................................................................3

Hoofdvraag:........................................................................................................................................3

Hoe maken we een interactieve website?......................................................................................3

Deelvragen:........................................................................................................................................3

Hoe gebruiken we Javascript in een website?................................................................................3

Hoe gebruiken we JQuery in een website?.....................................................................................3

Hoe gebruiken we CSS3 in een website?........................................................................................3

Hoe kan de gebruiker op een goede en mooie manier navigeren op onze website?.....................3

Achtergrondinformatie...........................................................................................................................4

Hoe zorg je ervoor dat je website gebruiksvriendelijker wordt door middel van Javascript?............4

Antwoord:..........................................................................................................................................4

Hoe gebruiken we jQuery in onze website?.......................................................................................5

Antwoord:..........................................................................................................................................5

Hoe gebruiken we CSS3 in een website?............................................................................................6

Antwoord:..........................................................................................................................................6

Hoe kan de gebruiker op een goede en mooie manier navigeren op onze website?.........................7

Antwoord:..........................................................................................................................................7

Beschrijving Eindproduct........................................................................................................................8

Schets 1 (index pagina).......................................................................................................................8

Schets 2 (pagina’s met tekst)..............................................................................................................9

Javascript, het resolutieprobleem....................................................................................................10

De if-else statement(1,2):................................................................................................................10

jQuery – Horizontaal scrollen...........................................................................................................11

Vakken(1).......................................................................................................................................12

jQuery, de live tegels........................................................................................................................12

“App Recommendations”:................................................................................................................13

Tilepeek........................................................................................................................................13

Variabelen....................................................................................................................................13

2


De beweging.................................................................................................................................14

“iFormation”(1, 19):..........................................................................................................................14

Beschrijving eindproduct – jQuery – Airport plugin(21)......................................................................15

Uitleg voor belangrijke stukken CSS.................................................................................................15

@font-face...................................................................................................................................15

Position: fixed;..............................................................................................................................16

Overflow: hidden;.........................................................................................................................16

Display: block;...............................................................................................................................16

Background-repeat: none;............................................................................................................16

Background-position: left;............................................................................................................16

Transition: CSS3;(22, 23)....................................................................................................................17

Beschrijving eindproduct- jQuery - Loading.....................................................................................18

Leerpunten...........................................................................................................................................20

Leerpunten Björn.............................................................................................................................20

Algemeen:....................................................................................................................................20

Codeacademy...............................................................................................................................20

Lettertype.....................................................................................................................................20

Leesbaarheid................................................................................................................................20

Hoofd&Deelvragen.......................................................................................................................20

Leerpunten Dennis...........................................................................................................................21

Algemeen.....................................................................................................................................21

Resolutie.......................................................................................................................................21

Tegels...........................................................................................................................................21

Scrollen.........................................................................................................................................21

Laadtijd.........................................................................................................................................22

Leerpunten Jeroen...........................................................................................................................22

Codeacademy...............................................................................................................................22

Live Tegel......................................................................................................................................22

W3 Validator.................................................................................................................................22

Leerpunten Roel...............................................................................................................................23

Algemeen.....................................................................................................................................23

jQuery...........................................................................................................................................23

Waar ik van geleerd heb...............................................................................................................23

Conclusie..............................................................................................................................................24

3


Beknopte antwoorden op deelvragen..............................................................................................24

Beknopt antwoord deelvraag 1....................................................................................................24




Antwoord op de Hoofdvraag............................................................................................................25

Hoe maken we een interactieve website?....................................................................25

Antwoord:....................................................................................................................................25

Interactieve website.....................................................................................................................25

Airport effect................................................................................................................................25

Bronvermelding....................................................................................................................................26

Planning & Taakverdeling.....................................................................................................................27

Planning:...........................................................................................................................................27

Wat?.............................................................................................................................................27

Wanneer af?.................................................................................................................................27

Taakverdeling:..................................................................................................................................27

Wat?.............................................................................................................................................27

Door wie?.....................................................................................................................................27

Notulen vergaderingen:.......................................................................................................................28

Notulen vergadering 1:.....................................................................................................................28

Bespreekpunten:..........................................................................................................................28

Voortvloeiende afspraken:...........................................................................................................28

Notulen vergadering 2:.....................................................................................................................28

Bespreekpunten:..........................................................................................................................28

Voortvloeiende afspraken:...........................................................................................................28

Voortgangsverslagen............................................................................................................................29

Voortgangsverslag 1.........................................................................................................................29

Wat is er gedaan?.............................................................................................................................29

Welke problemen hadden we?....................................................................................................29

Wat moet er nog gebeuren?........................................................................................................29

Voortgangsverslag 2:........................................................................................................................29

Wat is er gedaan?.........................................................................................................................29

Welke problemen hadden we?....................................................................................................29

Wat moet er nog gebeuren?........................................................................................................29

4


Logboeken............................................................................................................................................30

Logboek Dennis................................................................................................................................30

Logboek Jeroen................................................................................................................................31

Logboek Björn..................................................................................................................................32

Slotwoord.............................................................................................................................................33

Samenwerking..................................................................................................................................33

De opdracht......................................................................................................................................33

Verdere plannen...............................................................................................................................34

Inlogscherm..................................................................................................................................34

Instellingen...................................................................................................................................34

Scrollen.........................................................................................................................................34

Verklarende woordenlijst .....................................................................................................................35

Symbolenlijst.........................................................................................................................................36

5


Inleiding

Waarom hebben we gekozen om een website te maken?We hebben voor een website voor ons eindproject in Havo 5 gekozen, omdat we een site maken het leukste onderdeel van het vak informatica vinden. Dit is wel de eerste site die we maken met Javascript en jQuery want deze programmeertalen voor websites zijn compleet nieuw voor ons allemaal.

Wat leren we ervan?Door deze website te maken leren we ook weer wat nieuws erbij. Dit is ook belangrijk, want daar hebben we later weer allemaal wat aan en dat past ook goed bij de bedoeling van school om je voor te bereiden op later.

De onderwerpenWe hebben voor verschillende onderwerpen van onze website gekozen om de website zo breed mogelijk te maken zodat we iedere doelgroep kunnen bereiken, want dit is ook de bedoeling van een website, om zoveel mogelijk mensen te bereiken. Het eerste onderwerp is computers.Dit vonden wij zelf persoonlijk een leuk onderwerp, omdat we er allemaal wel wat mee hebben en het ook interessant vinden. Het tweede onderwerp zijn onze supports.Hier vind je bijvoorbeeld een aantal voorbeelden wat wij ook gemaakt hebben en wat onze vrienden gemaakt hebben. Als laatste onderwerp hebben we gekozen voor informatie over ons.Zo kan de gebruiker van de website ons een beetje leren kennen.

Hoe: de opbouwDe rest van het verslag is als volgt opgebouwd: als eerste leggen we de hoofd- en deelvragen uit.Daarna komt de achtergrondinformatie met de antwoorden op de deelvragen.Hierna volgt de beschrijving van het eindproduct waarin we uitleggen hoe onze website is opgebouwd en hoe de broncodes in elkaar zitten.Vervolgens komen in de beschrijving van het eindproduct onze leerpunten.Hierin vermelden we welke problemen we zijn tegen gekomen tijdens het maken van deze website en wat we van die problemen allemaal geleerd hebben.Daarna stellen we de conclusie op waarin de beknopte antwoorden op de deelvragen staan en uiteindelijk het antwoord op de hoofdvraag.Na de conclusie hebben we een overzicht met de bronvermelding en als laatste de taakverdeling/planning met de logboeken van ieder groepslid.

6


Hoofd- & Deelvragen

Hoofdvraag:

Hoe maken we een interactieve website?Door een website te maken die op het Windows 8 startscherm lijkt (ook wel Metro UI genoemd) kunnen we de gebruiker makkelijk door informatie heen laten zoeken en op een andere manier dan op een normale website door de website heen laten zoeken. Ook worden er waarschijnlijk verschillende animaties gebruikt in de website door het er veel mooier uit te laten zien.

Deelvragen:

Hoegebruiken we Javascript in een website?Want door Javascript in de website te gebruiken kunnen we de website maken met jQuery. Javascript is namelijk de basis van jQuery en daarmee kun je de website maken met mooie bewegende effecten door bijvoorbeeld een loading screen en live tiles te gebruiken. Ook kun je met Javascript je website geschikt maken voor verschillende resoluties en dus voor iedere gebruiker.

Hoe gebruiken we JQuery in een website?Door jQuery kunnen we HTML5 codes manipuleren om een meer bewegende effecten in website te kunnen maken. Deze effecten maken de website een stuk professioneler en ook een stuk mooier er duidelijker. jQuery kunnen we gebruiken voor alle bewegende onderdelen op onze website.

Hoe gebruiken we CSS3 in een website?Door CSS3 te gebruiken in de website kunnen we de website makkelijk opmaken om het er goed en mooi uit te laten zien. CSS3 heeft meer functies dan de voorgaande versies van CSS en hiermee kan je dan ook meer uit je opmaak van je pagina halen in plaats van dat je met een van de vorige versies van CSS werkt. CSS gebruiken we voor de opmaak van onze site zodat het wat meer kleur krijgt letterlijk en figuurlijk.

Hoe kan de gebruiker op een goede en mooie manier navigeren op onze website?Door niet de standaard lay-out van normale websites te gebruiken, maar live-tegels te gebruiken waar de plaatjes steeds op veranderen en door de tegels in te delen in verschillende groepen, kan de gebruiker makkelijker zien op welke tegel hij moet drukken als hij naar iets specifieks op zoek is.

7


Achtergrondinformatie

Hoe zorg je ervoor dat je website gebruiksvriendelijker wordt door middel van Javascript?Door Javascript in de website te gebruiken kunnen we de website maken met jQuery. Javascript is namelijk de basis van jQuery en daarmee kun je de website maken met mooie bewegende effecten door bijvoorbeeld een laadscherm en live tegels te gebruiken. Ook kun je met Javascript je website geschikt maken voor verschillende resoluties en dus voor iedere gebruiker.

Antwoord:Javascript is een scripttaal met veel mogelijkheden. Javascript wordt door de browser uitgevoerd en vanuit de HTML aangeroepen. We willen ervoor zorgen dat de gebruikers van onze website zichzelf zo goed mogelijk door onze site kunnen navigeren. Dit hebben we gedaan doormiddel van het namaken van het Windows 8 startscherm. Door het er goed eruit te laten zien vind de gebruiker het leuker om op onze site te surfen. Ook hebben we voor een bepaalde groep resoluties ervoor gezorgd dat ze niet hoeven te scrollen in onze website, wat het gebruiksvriendelijker maakt en daar draait het tenslotte om.

Net als in Windows 8 heb je op het startscherm nog steeds dezelfde grootte van de tegels als je een kleine of grote resolutie hebt. Hiermee is alles nog steeds overzichtelijk. Door middel van het verplaatsen van enkele tegels kan je ervoor zorgen dat de website nog steeds even gebruiksvriendelijk is, ook als je een hoge resolutie hebt.Doormiddel van het gebruiken van Javascript kun je er dus voor zorgen dat de website een stuk gebruiksvriendelijker wordt, omdat je bij iedere resolutie een goede en duidelijke website voor je neus krijgt. Als je geen Javascript gebruikt om een andere hoogte container te nemen voor een andere resolutie, moet je scrollen om bij tegels te komen die lager staan in de site. Als gebruiker wil je dit niet. Een bijkomend voordeel is dat het nog meer op Windows 8 lijkt, omdat je niet van boven naar beneden hoeft te scrollen als er gebruik wordt gemaakt van Javascript.

Javascript is ook de basis voor jQuery. Bij de volgende deelvraag wordt jQuery uitgebreid uitgelegd. Je kunt jQuery in ieder geval niet gebruiken zonder javascript, omdat je de jQuery schrijft in Javascriptbestanden. Door jQuery wordt de website ook direct een stuk vriendelijker voor de gebruiker.

8


Hoe gebruiken we jQuery in onze website?Met behulp van jQuery kunnen we bewegende effecten in de website maken. Deze effecten maken de website een stuk professioneler en ook een stuk mooier en duidelijker. jQuery kunnen we gebruiken voor alle bewegende onderdelen op onze website.

Antwoord:jQuery heeft als basis Javascript. Het werkt door middel van een library bestand dat je tussen de bestanden van je webpagina zet. Je roept de jQuery bibliotheek aan op dezelfde manier als een Javascript bestand. Als je deze bibliotheek niet aanroept, kun je dus ook geen gebruik maken van jQuery op je website.In de jQuery bibliotheek staat dus elk stukje jQuery uitgewerkt in Javascript, waardoor je zelf alleen maar een heel klein beetje code hoeft te typen, neem bijvoorbeeld een .animate, je hoeft zelf alleen maar een woord te typen en je krijgt een effect. Als je dit helemaal uit moet werken in javascript ben je heel erg lang bezig, en het is ook nog is heel lastig. De jQuery bibliotheek zorgt dus voor de uitwerking van elk stukje code die je zelf hoeft te typen (zoals bijvoorbeeld .animate).

jQuery is er daarom ook voor gemaakt om het de web programmeur makkelijker te maken. De website ziet er al snel heel erg mooi uit. Dit komt door de verschillende effecten die jQuery je biedt. Ook kan je verschillende plug-ins downloaden. Een plug-in houdt dus in dat je een stukje bibliotheek toevoegt aan de bestaande jQuery bibliotheek.Er zijn heel veel plug-ins te downloaden via de site van jQuery. Sommige plug-ins zijn van jQuery zelf, maar er zijn ook plug-ins bij die mensen zelf hebben geschreven, neem bijvoorbeeld het Airport effect wat te bewonderen is op de pagina “The Beauty Itself”.jQuery UI is een uitbreiding op het hoofdbestand van jQuery. In jQuery UI zitten een hele hoop effecten en bijvoorbeeld kant- en klare buttons die er een stuk beter uit zien dan de buttons die je vanuit je HTML oproept.

Kortom, jQuery maakt het de web programmeur heel erg makkelijk om de website er zo professioneel mogelijk uit te laten zien op een zo makkelijk mogelijke manier. De slogan van jQuery is ook niet voor niets “Write less, do more”, wat in het Nederlands betekent dat je minder hoeft te schrijven voor je werk.

9


Hoe gebruiken we CSS3 in een website?Door CSS3 te gebruiken in de website kunnen we de website makkelijk opmaken om het er goed en mooi uit te laten zien. CSS3 heeft meer functies dan de voorgaande versies van CSS en hiermee kan je dan ook meer uit je opmaak van je pagina halen in plaats van dat je met een van de vorige versies van CSS werkt. CSS gebruiken we voor de opmaak van onze site zodat het wat meer kleur krijgt, letterlijk en figuurlijk.

Antwoord:CSS3 is de opvolger van CSS2. In CSS3 zijn een hoop dingen toegevoegd wat met het uiterlijk te maken heeft.Zo kun je bijvoorbeeld je vierkante division mooie hoeken geven, door ze een klein beetje rond te maken. Dit is makkelijk, omdat je in de vorige CSS het dan het beste doormiddel van een afbeelding kon doen. Alleen dan kwam je ook al in de problemen als je de afbeelding vloeiend groter wilde laten worden. Met CSS3 is dit mooi opgelost.

Een van de grootste verschillen zit hem in de transition en de transform functies. Je kunt je elementen hiermee bijvoorbeeld 30 graden draaien. Niet alleen in 2d, maar ook in 3d. De transition functie kun je gebruiken om bijvoorbeeld de stijl van je element te veranderen op een vloeiende manier. Je kunt zelf de tijd instellen, op welke manier de overgang plaats vindt en wat er precies veranderd wordt. Je kunt bijvoorbeeld de grootte van een division op een vloeiende manier veranderen als je er met je cursor overheen gaat. Ook kun je de plaats op een vloeiende manier laten veranderen.

De @font-face optie is een werelds idee die is uitgevonden. Hiermee kun je een eigen lettertype in je website zetten, zonder dat het enkele problemen oplevert. Hiermee kun je je website nog persoonlijker maken dan dat het al was. Wij hebben van deze optie gebruik gemaakt om het lettertype “Segoe UI Light” te gebruiken, die niet op elke pc standaard staat geïnstalleerd. Hiermee hebben wij onze webite nog meer op Windows 8 laten lijken dan dat het al was met een ander lettertype.

Verder kun je in CSS3 nog veel meer effecten toepassen die je tekst, borders of animaties mooi laten verlopen. Het is handiger voor beginnende web programmeurs om CSS3 te gebruiken voor animaties in plaats van jQuery. jQuery heeft wel veel meer opties, maar wie weet komt in CSS4 ook wel een hele hoop nieuwe effecten.

10


Hoe kan de gebruiker op een goede en mooie manier navigeren op onze website?Door niet de standaard lay-out van normale websites te gebruiken, maar live-tegels te gebruiken waar de plaatjes steeds op veranderen en door de tegels in te delen in verschillende groepen, kan de gebruiker makkelijker zien op welke tegel hij moet drukken als hij naar iets specifieks op zoek is. Ook andere onderdelen op onze website zorgen ervoor dat het een stuk duidelijker wordt voor de gebruiker.

Antwoord:Als je een website bezoekt, wil je natuurlijk wel dat je overal makkelijk kunt komen. Niet op elke website kun je overal gemakkelijk komen, maar onze bedoeling bij het maken van deze website is om de gebruiker zo vriendelijk mogelijk door de website te kunnen leiden. Dit hebben we gedaan door een Windows 8 start scherm na te maken. De gebruiker op onze website weet dan gelijk hoe het werkt, omdat in deze tijd al aardig wat PC’s op Windows 8 draaien.

Ook niet-Windows 8 gebruikers kunnen zich heel makkelijk door de website heen leiden, omdat alles duidelijk is aangegeven. We hebben live-tegels aangebracht om de gebruiker een zo duidelijk mogelijk voorbeeld te geven van wat er op die pagina te vinden is. Zo weet de gebruiker snel waar hij moet zijn.In de live-tegel van iFormation hebben we een afbeelding van de website geplaatst, zodat de gebruiker al kan raden dat de pagina waar hij of zij naar toe gaat over een website gaat. Met de tekst die in het tweede stuk komt ziet de gebruiker dat het over Apple-producten gaat, dus de gebruiker heeft nu al een hoop informatie gekregen zonder dat hij of zij nog op de pagina is geweest.

Ook door in sommige tegels een icoontje te zetten zien de gebruikers van onze site sneller waar je naartoe moet. Zo staat bij de tegel “Hardware” een icoontje met een computer en een beeldscherm, en bij de tegel “Software” een icoontje van Office 2013. Niet iedereen zal het icoontje van office 2013 nog herkennen, maar in de toekomst wordt dit vanzelf duidelijk als meer mensen gebruik gaan maken van office 2013.Bij de namen hebben we de namen heel duidelijk naar voren laten komen, door ze in dikgedrukte letters neer te zetten. Als je dan over de tegel heen gaat met je muis zie je een foto van de desbetreffende persoon, zo weet je sneller over welke persoon het gaat.

11


Beschrijving Eindproduct

Schets 1 (index pagina)

Titel Spa Goud!

Subtitels (14)

1 = Hardware 8 = Schiphol Info Destination (site Björn& Roel) Tile2 = Software Tile 9 = Spa Goud the beaty itself Live Tile3 = App Recommendations Live Tile 10 = Dennis Tile4 = Tips Tile 11 = Jeroen Tile5 = iFormation Live Tile 12 = Roel Tile6 = Hardstyle (Steven & Kevin) Tile 13 = Björn Tile7 = Coverband Tile 14 = Subtitels (computers, supports, about us)

12


Schets 2 (pagina’s met tekst)

1 Titel

Tekstvak 1 Tekstvak 2

2 2

1 = Pijl terug naar de index pagina 2 = pijlen om te navigeren naar de 2 volgende of de 2 voorgaande tekstvakken

13


Javascript, het resolutieprobleem.We stuitten na een week of twee op het probleem dat je moest scrollen als je de site op een resolutie bekeek waar je scherm lager is dan 900 pixels. Dennis heeft daar een oplossing voor kunnen vinden doormiddel van een stukje Javascript. Het script ziet er als volgt uit:

if (screen.height<900) {

document.write('<link href="stylesheet/stylesheetklein.css" rel="stylesheet" type="text/css" />');}

else {document.write('<link href="stylesheet/stylesheetgroot.css" rel="stylesheet"

type="text/css" />');}

De if-else statement(1,2):In dit geval hoort bij een groot probleem, een kleine oplossing. Namelijk de if-else statement.In deze code wordt bij een resolutie lager dan 900 pixelsde stylesheet genomen genaamd “stylesheetklein.css” (direct na de if). Bij een resolutie hoger dan 900 pixels neemt hij de stylesheet genaamd “stylesheetgroot.css” (de else).

De eigenschapscreen.height:

Door dit stukje wordt je schermhoogte ‘opgemeten’ in pixels. Als je dus een scherm hebt van 1920pixels breed en 1080 pixels hoog, is descreen.heightdus 1080.

Dedocument.writefunctie:Dedocument.writefunctie houdt in dat er een stukje tekst in het document wordt geplaatst. Door dit stukje code wordt er dus een stukje tekst in het document geplaatst, wat in dit geval een stukje code is, die hier een stylesheet oproept.

Binnendedocument.write:In dedocument.writefunctie staat een code die een stylesheet oproept.Als je dus een schermhoogte hebt van 900 pixels of hoger roept hij deze code op:<link href="stylesheet/stylesheetgroot.css" rel="stylesheet" type="text/css" />

En dan krijg je dit resultaat:

14


En als je een schermhoogte hebt met minder dan 900 pixels roept hij deze code op:<link href="stylesheet/stylesheetklein.css" rel="stylesheet" type="text/css" />

En dan krijg je dit resultaat:

jQuery – Horizontaal scrollenToen we ons gingen richten op de inhoud van de pagina’s kwamen we bij het probleem dat we te weinig ruimte hadden, dus moesten we ervoor zorgen dat we konden scrollen binnenin de container voor het mooiste resultaat. Uiteindelijk zijn we bij het volgende stuk jQuery gekomen:

$(document).ready(function() {

$("#right").click(function(){$("#tekstvak").animate({left: '-=576px', opacity: 1}, 1000, "easeOutBounce")});

15


$("#left").click(function(){$("#tekstvak").animate({left: '+=576px', opacity: 1}, 1000, "easeOutBounce")});

});

Eerst zorgen we dat als het document klaar is met laden dat je een functie uit kan voeren. Dit geven we aan met$(document).ready(function() {hier de functie}); Binnenin deze functie staatdus het stuk code dat ervoor zorgt dat als je op het linker pijltje drukt, dat je een stuk naar linksverschuift, en als je op het rechter pijltje drukt een stuk naar rechts verschuift.

$("#right").click(function(){});Dit zorgt ervoor dat als je op de division“#right” klikt, hij een functie uit gaat voeren. De .click ()betekend dat als je op het element klikt dat je ervoor hebt aangeroepen hij de functie uitvoert die tussen de haakjes staat.

Deze functie is dus:$("#tekstvak").animate({left: '-=576px', opacity: 1}, 1000, "easeOutBounce")

De division “#tekstvak” gaat dus naar links verschuiven met 576 pixels (je gaat een stukje info naar rechts en elk vak waar info in staat is 576 pixels breed.) Hij neemt dus de marge vanaf links = -576 pixels. Dit doet hij met een snelheid van 1000 milliseconden en met het effect"easeOutBounce". De helderheid van de division blijft op 1 staan, om misverstanden te voorkomen.

Dit principe geldt ook voor het rechter pijltje, alleen dan nemen we de button#leften verschuiven we het tekstvak met +576 pixels.

Vakken(1)

De informatie hebben we allemaal in <li> tags gezet om het makkelijk te ordenen. Zo krijg je verschillende vakken waarin je je informatie kan zetten. Voor elk vak maken we dus weer een nieuwe <li> aan. We hebben de vakken gescheiden door er een border in te zetten aan de linker kant van elke <li>.

jQuery, de live tegels.

Om de website er meer als Windows 8 uit te laten zien, hebben we er live-tegels aan toegevoegd. Een live tegel houdt in dat de tegel uit zichzelf veranderd, zonder dat je iets hoeft te doen. Er komt bijvoorbeeld een afbeelding tevoorschijn of er veranderd een logo. De live-tegel bestaat uit een plaatje, dat om de zoveel seconden verandert van positie.

We hebben twee live-tegels in onze website aangebracht, namelijk één bij “AppRecommendations” en één bij “iFormation”. Die zijn hier te zien:

16


De jQuery codes die hier voor zorgen zien er als volgt uit:

“App Recommendations”:

function TilePeek() {

vardelayRate = 2500, speed = 2000, easing = "easeInOutExpo";

$(".apprecommendations") .animate({top: "0px"}, speed, easing);

$(".apprecommendations") .delay(delayRate) .animate({top: "-130px"}, speed, easing);



$(".apprecommendations") .delay(delayRate) .animate({top: "0px"}, speed, easing);}

TilePeek(); setInterval(TilePeek, 0);

TilepeekDoor de functieTilePeek() tegebruiken, is het mogelijk om de code, wat betreft de animaties, automatisch te laten herhalen. De functie roepen we op aan het begin, en in de functie(- tussen de functie-haakjes’{}’) roepen we de code voor het verschuiven van de animatie op. Na de sluithaak van de functie, de ‘}’, geven we aan dat hij terug moet springen naar de functie ‘TilePeek()’ met eenwachttijd van 0 seconden. Hierdoor voorkom je dat hij na dit stukje script stopt met bewegen.

17


VariabelenDaarna gaan we een paar variabelen instellen, namelijk de variabelendelayRate, speed, en easing. We maken gebruik van variabelen om alles makkelijk en snel te kunnen veranderen. Zohoef je niet voor een halve seconde extra wachttijd elke.delay() te gaan veranderen, maar alleen de delayRate. Dit geldt ook voor de andere variabelen.

De variabelen hebben de volgende betekenis:delayRate: Hierachter zet je een getal. Dit getal is het aantal milliseconden dat hij elke keer moetwachten voordat hij een andere animatie mag afspelen,omdatdelayRatezich in de.delay() bevind.

speed: Dit is de snelheid van de overgang.easing: Dit is het type overgang.

De bewegingNu komt het daadwerkelijke stukje script dat ervoor gaat zorgen dat de afbeeldingen in de tegel ook echt bewegen.


Eerst roepen we de class “.apprecommendations” op, dit is de division waarin de afbeelding staatmet de drie logo’s. Hierna zeggen we dat hij eerst een bepaalde tijd moet wachten voordat hij verder kan in het script. Deze tijd is de tijd die de variabeledelayRateaangeeft, in dit geval is dat 2500milliseconden, dat is 2.5 seconde.Nu pas is het script bij de.animate. Als gebruik maakt van.animatein jQuery, geef je altijd eerst aan wat hij moet doen als animatie, dat is in dit geval dus -130 pixels vanaf de bovenkant afstandnemen. Door de min betekent het dat het plaatje zich naar boven verplaatst.Hierna komt de snelheid van de animatie, en daarna komt het soort animatie, die is hier “easeInOutExpo”“iFormation”(1,19):De code voor de live tegel van iFormation ziet er hetzelfde uit, alleen nu hebben we maar een code nodig die twee posities moet weergeven.

function TilePeek() {

vardelayRate = 7500, speed = 1000, easing = "easeInOutExpo";

$(".iformation")

18


.delay(delayRate) .animate({top: "-130px"}, speed, easing);

$(".iformation") .delay(delayRate) .animate({top: "0px"}, speed, easing);}

TilePeek(); setInterval(TilePeek, 0);

Zoals je ziet deze code er precies hetzelfde uit, alleen is hetgeen dat de animatie uitvoert nu ".iformation" in plaats van ".apprecommendations".

Het is heel belangrijk om de tegel zelf de CSS overflow: hidden; mee te geven, omdat je anders de hele afbeelding ziet op je scherm, maar wij willen natuurlijk dat je alleen het stukje ziet wat je hoort te zien, dus alleen het stuk binnenin de division. Binnenin de division die de tegel is, zit een division waar de afbeelding in staat.

Het gaat overigens lastig om de afbeeldingen die van positie veranderen in dit document te zetten, omdat het over het algemeen bijna helemaal wit en/of transparant is.

Beschrijving eindproduct – jQuery – Airport plugin(21).Voor het effect wat te zien is op de pagina “The Beauty Itself” heb ik gebruik gemaakt van een Airport plugin. De code die ik hier zelf voor heb moeten schrijven is het volgende:

$(document).ready(function() {$('#airport').airport([ 'dennis', 'roel', 'jeroen', 'bjorn' ]);

Met in de HTML het volgende:

<div id="airport"></div>

En in de CSS het volgende:

#airport {color: #888888;position: absolute;font-size: 300%;

}

.c0 {text-transform: uppercase;

}

Het is niet moeilijk om het te schrijven, omdat je alleen .airport hoeft te gebruiken na het element waar je wilt dat het effect verschijnt. Nu willen we dus dat in het element'#airport'het effectverschijnt. Je hoeft alleen het .airport te gebruiken omdat de plug-in die ik heb gedownload al hetwerk voor je doet. Dit hebben we dus niet zelf geschreven. Ik heb wel zelf de wachttijd veranderdtussen het veranderen van de woorden. Dit was eerst 1000 milliseconden, en ik heb dit veranderdnaar 4000 milliseconden (4 seconden).

19


Elk stukje tekst zet je tussen aanhalingstekens en scheidt je door een komma. Alle woorden bij elkaar zet je tussen rechte haken ( [ ] )In de CSS gebruik ik procenten bij de font-size, omdat we met verschillende grootte lettertype werken bij verschillende resoluties. Zo neemt hij dus 300% van de grootte aan dan dat de rest groot is.

De .c0 heb ik erin gezet, omdat je bij de eerste letter geen hoofdletter kreeg. Nu keek ik bij “Inspect Element” op Google Chrome en zag dat de eerste letter tussen een <span> werd gezet met de class=”c0”. Dan is het dus niet meer moeilijk om de eerste letter een hoofdletter te laten weergeven. Je geeft aan de class .c0 een text-transform met het attribuut “uppercase”. Uppercase staat voor hoofdletter in het Nederlands.

Uitleg voor belangrijke stukken CSS.Sommige delen van de stylesheet zijn basis en begrijpt iedereen die zich ook maar één keer met websites heeft beziggehouden, maar er zijn ook lastigere dingen. Deze lastigere stukken van de stylesheet pikken we er tussenuit en leggen we zo duidelijk mogelijk uit.

@font-face.We beginnen gelijk met een pittig stukje uit de stylesheet. @font-face zorgt er namelijk voor dat je zelf een eigengemaakt lettertype kan toevoegen aan je site, en dat iedereen die ook op zijn of haar computer kan bekijken. Wij gebruiken het lettertype Segoe UI Light voor onze website, omdat dat ook het lettertype is die wordt gebruikt in Windows 8. Aangezien de meeste computergebruikers dit lettertype niet hebben geïnstalleerd hun computers, hebben we gebruik gemaakt van font-face.

Door het stukje “font-family: 'Segoe UI Light';” erinte zetten geef je een naam aan hetlettertype. Hierna krijgen we een belangrijk stuk, namelijk het stuk waarbij we de lettertypen aanroepen. Voor het beste resultaat moet je lettertype met verschillende extensies aanroepen, omdat niet elke browser om kan gaan met dezelfde extensie. We hebben hier de extensies met (IE), .woff(Firefox), .ttf (Safari, Chrome, Firefox, Opera) en .svg (Chrome, iPhone). Hiermeezorgen we dat het lettertype zich op elke browser goed kan weergeven. Als je een lettertype aanroept ziet het er als volgt uit:

src: url('fonts/segoeuil-webfont.eot');

Dit doe je dus voor meerdere extensies, niet alleen voor de .eot.

Position: absolute;Je kunt dit op een makkelijke en op een moeilijke manier uitleggen. Ik maak er een mix van. Als je de position absolute aan een division geeft dan is het eigenlijk een soort van, ikke ikkeikke en de rest kan stikken. De division houdt dan geen rekening meer met de rest van de elementen die op de site staan. Als je zegt dat hij 150 pixels als marge moet nemen vanaf boven dan doet hij dat ook, de division doet dan niet moeilijk of er dan nog een element tussen de bovenkant en de division staat of niet.

20


Position: fixed;Bij de position: fixed; zorg je dat het element wat je deze positie meegeeft altijd op dezelfde plek blijft staan, ook als je door je website heen scrolt.

Overflow: hidden;Dit is een belangrijk stukje code in onze site. Door dit te gebruiken zorg je dat als je bijvoorbeeld een afbeelding hebt van 390 pixels hoog, en een tegel van 130 pixels hoog, je de afbeelding alleen binnen het element ziet staan, dus niet ook nog erbuiten. Zo kunnen we mooi een live tegel creëren of de inhoud van de website, met het horizontaal scrollen.

Display: block;Door dit toe te voegen zorg je dat het element wat je aanspreekt met deze code zich op een nieuwe regel bevindt.

Background-repeat: none;Hiermee zorg je dat als je een achtergrond toevoegt, dat hij zichzelf niet herhaalt. Dit is belangrijk voor onze live tegel “AppRecommendations”, omdat we niet willen dat de drie icoontjes van de stores zich twee keer weergeven. We zeggen dus eigenlijk dat hij zich één keer hierin mag bevinden. Varianten op de background-repeat zijn repeat-x (alleen op de x –as herhalen) en repeat-y (alleen op de y-as herhalen).

Background-position: left;Net als het verhaal van de afbeelding van de stores willen we dat het links uitgelijnd staat, zodat je de rechter icoontjes ook goed te zien krijgt.

Transition: CSS3;(22, 23)

Met een transition zorg je ervoor dat iets op een mooie, vloeiende manier beweegt. Je kunt veel dingen in de transition zetten, namelijk width, height entransform. Voor het gemak hieronder het stukje wat wij hebben gebruikt voor de kolom “AboutUs”

transition: margin 1s ease;-webkit-transition: margin 1s ease;-ms-transition: margin 1s ease;-moz-transition: margin 1s ease;-o-transition: margin 1s ease;

-webkit- is voor Google Chrome en Safari.-ms- is voor Internet Explorer 10 (eerdere versies kunnen het niet aan).-moz- is voor Mozilla Firefoxen –o- is voor de browser Opera.

Met “margin” geven we aan dat hij de marge moet veranderen van het aangeroepen element.Met “1s” geven we de tijd van de animatie aan. In dit geval is dat 1 seconde.En met “ease” geven we aan dat hij op een flexibele manier moet bewegen. In het Engels wordt dit ook wel easing genoemd.

21


Beschrijving eindproduct- jQuery - Loading(24t/m27).

22


$(document).ready(function(){

$("#container").ready(function(){

$("#laad-balk").stop().animate({width: "25%"},1500)

});

$("#footer").ready(function(){

$("#laad-balk").stop().animate({width: "75%"},1500)

});

$(window).load(function(){

$("#laad-balk").stop().animate({width: "100%"},2100,function(){

$("#loading").fadeOut(600);

$(".content").fadeIn(1000);

$(this).remove();

});});});

23


Zoals in de leerpunten vermeldt ontstond er na mate de site steeds meer jQuery en stylesheets bestanden nodig had, werd de laadtijd van de website steeds langer, de effecten van de icoontjes en de .fadeIn();effecten die je hoort te zien wanneer de website is geladen/vernieuwd. De lange laadtijd belemmerden de animaties en effecten, we waren het er allemaal over eens dat dit niet kon, en het moest anders kunnen.

Naar enige tijd hadden we bedacht om een laad scherm met een laadbalk en een windows 8 loading gif er in en een tekst als: “Spa Goud is bier aan het tappen, even geduld aub.” (Spa Goud is aan het laden) Hierdoor weet de gebruiker dat het even kan duren en is daar geen verwarring over.

De opmaak van het laadscherm(laad bal, de achtergrond, en de loading GIF) wordt beschreven in de ‘stylesheet-loading.’

De jQuery hierboven zorgt er voor dat wanneer de gebruiker aan komt op de website spagoud.tk, eerst het laadscherm laat zien.Dat is de divisionloading, de division laad-balk. De laad balk moet na het voltooien weer verdwijnen en daarom maken we gebruik van de functies: .stop().animate({ }). De animatie stopt wanneer de breedte een x aantal % is en de duur is ingesteld op 1500 ms.

“Achter de schermen”Het stukje script dat er voor zorgt dat de pagina content achter ‘de schermen’ wordt geladen en dat na de laadbalk 100% is na een bepaald aantal ms. , is;

$(window).load(function(){});

Hierdoor wordt dus de pagina content geladen en dit wordt uit het zicht van de gebruiker gedaan. In de functie wordt beschreven dat wanneer de laadbalk dus weer 100% is de divisionloading en de laad-balk weer verdwijnen met behulp van een .fadeOut();effect. Daarna wordt pas de pagina content in beeld gebracht met een .fadeIn(); effect. En met $(this).remove(); wordt de .load functie gestopt en ‘verwijderd.’

De code die voor het vorig genoemde zorgt en dus tussen de .load functie staat, ziet er als volgt uit:

$(window).load(function(){

$("#laad-balk").stop().animate({width: "100%"},2100,function(){

$("#loading").fadeOut(600);

$(".content").fadeIn(1000);

$(this).remove();

});

})

24


Leerpunten

Leerpunten Björn

Algemeen:De vorige keer toen ik het verslag maakte,was ik een paar dingen vergeten. Hier heb ik van geleerd en daarom zit er dit keer wel alles in. Zo zijn er in dit verslag screenshots te vinden waarmee we onze website en de codes die daar bij horen, uitleggen.

CodeacademyDe problemen die ik bij dit verslag ben tegen gekomen zijn de volgende: het begon bij het leren van jQuery en Javascript.Deze 2 scripttalen heb ik geleerd via Codecademy. Het probleem was alleen dat er in dit online programma een paar fouten zitten. Dit heeft echter voor mij niets uitgemaakt en snap ik jQuery en Javascript aardig goed. In het begin was het wel wennen, omdat het op sommige vlakken weer heel anders is dan PHP en die taal wist ik al door mijn profielwerkstuk.

LettertypeDe volgende leerpunten komen uit het verslag:Ten eerste was de vraag:‘welk lettertype is het duidelijkst en leest het makkelijkst?’. Dit is belangrijk, want een verslag moet goed leesbaar zijn zodat de mensen die niets van een website maken snappen, het verslag toch goed kunnen volgen. Ik kwam op de conclusie dat het standaard lettertype van Word genaamd “Calibri” het makkelijkst leesbaar is en het duidelijkst. Deze hebben we dus gebruikt voor de hoofdtekst. Voor de verschillende koppen hebben we de automatische functie in Word gebruikt. De koppen hebben daarom het lettertype “Cambria”. Hiermee kunnen we ook gelijk makkelijk de automatische inhoudsopgave maken. Samengevat heb ik het volgende van het lettertype probleem geleerd:Gebruik het lettertype “Calibri”voor de hoofdtekst, want deze is het duidelijkst en het makkelijkst leesbaar en gebruik de standaard koppen van Word met het standaard lettertype “Cambria” voor de koppen, want dit is makkelijk voor de automatische inhoudsopgave.

LeesbaarheidEen ander probleem dat ik in het verslag tegen kwam is het gebruik van veel alinea’s. In het begin maakte ik heel weinig gebruik van alinea’s. Dit zorgde ervoor dat de tekst heel moeilijk leesbaar was, omdat het hele grote lappen tekst achter elkaar waren, zonder witregels ertussen. Toen ik hier achter kwam heb ik een stuk met alinea’s geprobeerd en dit had een sterk en positief resultaat op de leesbaarheid van het verslag. Dit heb ik dus ook geleerd van dit verlag maken en is ook handig voor volgend jaar, want dan moet ik waarschijnlijk een hoop verslagen gaan maken.

Hoofd&DeelvragenHet laatste probleem was een probleem met de hoofd- en deelvragen. Het was moeilijk om de juiste hoofd- en deelvragen te bedenken bij deze opdracht. Uiteindelijk is het toch gelukt door goed te kijken naar wat echt een hoofdzaak is van onze website en niet de bijzaak. Dit is uiteindelijk gelukt en dus heb ik weer beter geleerd om de hoofdzaak te onderscheiden van een bijzaak.

25


Leerpunten Dennis

AlgemeenIk heb vooral veel geleerd om beter met CSS te kunnen werken. Ik kon het al heel goed gebruiken, maar omdat je nu een site in elkaar zet die een stuk geavanceerder is qua navigatie komt er net iets meer bij kijken dan alleen een beetje uitlijnen. Ook heb ik alles wat ik heb gedaan met jQuery geleerd, omdat ik nog helemaal niet bekend was met deze scripttaal. Dit geldt ook voor Javascript, waar ik nu ook de beginselen van ken. Ik heb de beginselen van Javascript in een uurtje of 4-5 geleerd, waardoor ik elk stukje script dat in onze site is verwerkt begrijp. jQuery heb ik binnen 5 uur helemaal geleerd op de website Codecademy.

ResolutieIk ben met verschillende problemen in aanraking gekomen. Neem bijvoorbeeld het probleem dat we moesten scrollen op schermen met een schermhoogte die lager is dan 900 pixels. We hadden namelijk een container die voor deze schermen te groot was. Eerst zaten we te denken om de container kleiner te maken voor elk scherm, maar dat wilden we niet omdat je dan je schermgrootte niet goed benut als je een groot scherm hebt. Het gaat tenslotte om de gebruiksvriendelijkheid van de website.Uiteindelijk zijn we op een oplossing gekomen. We dachten aan een verschillende grootte van de container bij verschillende resoluties, maar we wisten nog niet hoe we dat aan moesten pakken. Toen ik even op google zocht, kwam ik erachter dat je doormiddel van een stukje Javascript ervoor kunt zorgen dat je verschillende stylesheets aanroept.Hierna kregen we gelijk het probleem dat er een tegel niet in paste (The Beauty Itself).Dit hebben we opgelost door de tegel een rij naar rechts te verschuiven, maar nog wel in de kolom “Supports” te houden. (Zie het verschil op de screenshots bij de uitleg van dit stukje javascript)

TegelsOok heb ik problemen gehad met de posities van de tegels als je eroverheen gaat met je muis. De border neemt hij namelijk ook mee met de division. Hiermee bedoel ik dat je het blokje een stukje ziet verschuiven (bij een border van 3 pixels wordt de division dus 6 pixels breder en hoger). Dit heb ik opgelost door de margin-top en margin-left met 3 pixels te verminderen bij elke division:hover.

ScrollenOok is het handig om de position: absolute; mee te geven. Hiermee zeggen we dat hij vanaf de bovenkant van de division waar hij in staat moet uitlijnen, en andere divisions moet ontwijken.Hiermee blijft je tegel altijd goed uitgelijnd en maakt het ook makkelijker om volgende tegels uit te lijnen als bijvoorbeeld de tegel erboven ineens een border krijgt als je eroverheen gaat met je cursor.

Toen we eenmaal bij de pagina’s beland waren waar de informatie in moest komen, kwamen we bij het probleem dat er wat meer informatie in moest komen dan dat de container groot was. We moesten dus zorgen dat je binnenin de container moet kunnen scrollen. Ik heb een tijd gezocht naar hoe je met je scrollwheel horizontaal kon scrollen, maar daar heb ik niks voor kunnen vinden. Toen kwam ik uiteindelijk op het idee om een division in een division te zetten. De binnenste division gaf ik een hele grote breedte en de buitenste division gaf ik in de CSS overflow: hidden;Met overflow: hidden; zorg je ervoor dat je alle dingen die binnen die division staan er niet buiten

26


weergegeven kunnen worden. (de tekst die loopt er dus achterlangs en niet voorlangs)Doormiddel van een stukje jQuery heb ik er voor kunnen zorgen dat je de division telkens een vak naar links of naar rechts kan bewegen.Elk vak is eigenlijk een <li></li>, dit heb ik uitgelegd bij de jQuery van het scrollen.

Ik heb nog van alles gezocht om een maximum te zetten aan het aantal keer dat je kan ‘scrollen’ maar dat is me tot nu nog niet gelukt. Misschien is dat een leuk idee voor de verdere toekomst. (net als een menu waar je allerlei instellingen kunt veranderen van de site)

LaadtijdOmdat we een site hebben waarin veel afbeeldingen zijn verwerkt is de laadtijd van onze site ook een stuk langer. Roel heeft hier de ultieme oplossing voor bedacht door een laadscherm te maken. Zelf heb ik alle afbeeldingen op een zo klein mogelijke resolutie gezet. Niet te klein, maar precies groot genoeg. Neem bijvoorbeeld een tegel van 130 bij 130 pixels, hierin zet ik geen plaatje van 500 bij 500 pixels maar een plaatje van 130 bij 130 pixels, om de laadtijd van de website te verkleinen.

Leerpunten Jeroen

CodecademyAan het begin van het project via Codecademy de basis van jQuery geleerd en daarna begonnen aan de informatie pagina’s van de website. Nadat dit afgerond was heb ik de cursus van jQuery op Codecademy weer opgepikt en ben ik er wat dieper op ingegaan.

Live-tegelEr zijn behoorlijk wat punten waar ik van heb geleerd, vooral jQuery is hier een goed voorbeeld van. Eén van de problemen is ontstaan met het leren. Door te oefenen kan je veel leren. Ik heb cursussen op Codecademygevolgd en tijdens het oefenen van de cursussen was er op een gegeven moment een opdracht waarbij ik vast liep, omdat volgens de website de code verkeerd was en m’n opacity niet op 1 stond, terwijl dit wel het geval was. Ik heb veel geprobeerd om het op te lossen maar ik kwam niet verder. Later bleek dat Roel en ook Björn het zelfde probleem hadden. We hebben de conclusie getrokken dat het waarschijnlijk aan de site zelf lag. We konden althans probleemloos verder leren en oefenen.

W3 ValidatorDoordat ik jQuery cursussen heb gevolgd op Codecademy, kon ik aan het begin van dit project met Dennis beginnen aan het schrijven van de eerste live-tegels. Samen met Dennis heb ik de live-tegel tegel met het facebook, whatsapp en angrybirds plaatje er in gezet. Eerst hadden we twee plaatjes, maar met het derde plaatje erbij gaf het een probleem. Het lukte niet om het derde plaatje goed te laten weergeven. Dit hebben we opgelost door 1 plaatje te gebruiken met alle drie de logo’s er op. Dit maakte het goed laten functioneren van de live-tegel een stuk makkelijker. Van jQuery weet ik nu in ieder geval de basis, ook hoe je bestanden moet koppelen en functies te geven aan bijvoorbeeld plaatjes of tegels in een .html bestand.

Bij het valideren van de .html bestanden ben ik ook een aantal problemen tegengekomen die een hoop tijd kostten. Bij een paar moest je in de scriptjes van Roel en Dennis graven om te kijken waar de fout zat die in de standaard opmaak van de .html bestanden zat. Af en toe was het een hele makkelijke, zoals een ‘-’ veranderen in een ‘/’, maar soms moest je ook een heel stuk code

27


verwijderen of wijzigen, omdat die nog achter was gebleven van een code waar een aantal functies later van gewijzigd was. Doordat er een paar mensen uit ons groepje niet netjes/slordig hadden gewerkt, was het moeilijk om sommige pagina’s constant in de validator te doen en aan te passen. Soms zaten er te veel <br />’s in en was het daarom te onoverzichtelijk.

Leerpunten Roel

AlgemeenNatuurlijk is niet alles in een keer goed gegaan.Je komt altijd wel problemen tegen bij het ontwikkelen van een website, tijdens de code leren en schrijven. Door na te gaan en oplossingen proberen te verzinnen kun je leren, want van je fouten moet je immers leren.

Css - position: relative& absoluteNog een probleem waar ik veel van heb geleerd is: position: relative; en position: absolute; Deze twee posities zijn erg belangrijk en moet je niet verwisselen in verschillende situaties.Dat bleek wel wanneer we probeerden alle tegels netjes onder en boven elkaar probeerden te plaatsen met een margin van 10px. Ook met de metro-style icoontjes die linken naar bijvoorbeeld onze Facebook en Twitter.Deze icoontjes moesten bewegen wanneer de site was geladen. Dus na $(document).ready(). Het was belangrijk om de ruimte tussen de icoontjes en de plaats waar ze staan te definiëren. De eerste keer had ik niet position: absolute gebruikt, waardoor het moeilijk was een goede positie van de icoontjes te krijgen. Ook voor de tegels is position: absolute een veel betere methode om het goed voor elkaar te krijgen. Omdat bij absolute je meer individueel naar het object kijkt en hier heeft de margin geen betrekking op omliggende elementen.

NavigatieHet idee was om de navigatie van de website met windows 8/metro UI –style te maken. We hadden bedacht om doormiddel van een ‘slide effect’ de hele pagina(de body) te verschuiven naar rechts of links, naar de volgende pagina, wanneer de gebruiker een tegel aan geklikt had. Het idee om niet een division maar de body te verschuiven(te animeren naar rechts) bleek echter moeilijker of bijna onmogelijk voor ons dan gedacht. We hadden veel geprobeerd, maar met onze zelf geschreven code ( een voorbeeld als een .animate() functie ) leverde nog steeds niets op. We hadden ook op het internet gezocht naar alternatieven, zoals bijvoorbeeld de breedte van de container vijf keer zo lang maken wanneer je bijvoorbeeld 5 pagina’s had, het idee was dat de pagina’s waarnaar toe de gebruiker wilde navigeren, allemaal in de index als en grote division stonden. Om naar de divisions toe te navigeren moesten we de pagina dan naar rechts of links laten schuiven. Dit is echter niet gelukt omdat wij niet de kennis, ervaring en het niveau hadden om jQuery te schrijven om een pagina bij het klikken automatisch te laten schuiven naar rechts of links naar de volgende pagina op een specifieke plek. Dit is alleen gelukt door verticaal te scrollen, maar onze site is gebruiksvriendelijk en naar beneden scrollen of gescrold worden wilde we daarom absoluut niet. Overigens werd de code van zowel de jQuery als de css als

28


de html code te onoverzichtelijk bij de verschillende methodes die wij geprobeerd hadden.

Daarom hebben wij er voor gekozen om het overzichtelijk te houden en een niveau aan te houden die wij aankunnen, daarom hebben wij een mooi fadeIn effect bij het laden van elke pagina toegepast. We hebben hier erg van geleerd, het overzicht is altijd belangrijk en wanneer dit wegvalt of er bijna niet meer is, moet je misschien “een stapje achteruit” doen.

Laadtijd

Zoals in beschrijving eindproduct beschreven, is er na mate onze site steeds meer bestanden(jQuery/css) nodig had, de laadtijd bijna verdubbelt. Effecten die in actie moesten komen wanneer de pagina geladen was werden belemmerd. Hierdoor waren ze nauwelijks nog waar te nemen. Het was zaak om hier iets aan te doen. We hadden gelijk maatregelen getroffen door de afbeeldingen te verkleinen naar de gewenste grootte zodat de browser dit niet hoefde te doen. Ook de verwijzingen naar externe css en jQuery bestanden probeerde we te minimaliseren. Tot onze spijt bleef de laadtijd nog “te” lang.

Toen hebben we een andere maatregel getroffen, we bedachten een laadscherm te maken die de gebruiker vertelt dat het even kan duren om dat Spa Goud de tijd nodig heeft om te laden, dit voorkomt natuurlijk verwarring bij de gebruiker en nog belangrijker is dat we nu de mogelijkheid hadden de pagina achter de schermen te laden en dus uit het zicht van de gebruiker. Hiermee was het probleem verholpen want nadat het laadscherm werd getoond werd de pagina content pas getoond, wanneer deze helemaal geladen was en dus geen haperende animaties meer.

29


Conclusie

Beknopte antwoorden op deelvragen

Beknopt antwoord deelvraag 1Hoe zorg je ervoor dat je website gebruiksvriendelijker wordt door middel van Javascript?Javascript is een scripttaal met veel mogelijkheden.Elke browser ondersteunt het en je kan door Javascript ook jQuery gebruiken. Javascript wordt in onze website gebruikt om de gebruiksvriendelijkheid zo hoog mogelijk te houden door verschillende stylesheets op te roepen bij verschillende resoluties.

Beknopt antwoord deelvraag 2Hoe gebruiken we jQuery in onze website?De basis van jQuery is Javascript. Zonder de jQuery bibliotheek ben je nergens, dus moet je zorgen dat je die eerst aanroept voordat je begint met het gebruiken van jQuery codes. Je kunt er ook veel plug-ins voor downloaden, om nog meer uit jQuery te halen dan dat je al kan. Door jQuery geef je je site een veel mooier uiterlijk en ziet het er veel professioneler uit. We hebben jQuery vanaf het begin moeten leren. Op het begin was het lastig maar op een gegeven moment leer je er mee werken.

Beknopt antwoord deelvraag 3Hoe gebruiken we CSS3 in een website?CSS3 heeft veel veranderingen gekregen in vergelijking met de vorige versie. Wij hebben gebruik gemaakt van CSS3 omdat het heel makkelijk is te gebruiken, en het een mooi effect geeft. Door de @font-face functie te gebruiken zorg je dat je website er een stuk persoonlijker uitziet. Wij hebben hier gebruik van gemaakt op het lettertype aan te roepen dat in Windows 8 gebruikt wordt. Niet elke persoon heeft dit lettertype standaard op zijn of haar computer staan.

Beknopt antwoord deelvraag 4Hoe kan de gebruiker op een goede en mooie manier navigeren op onze website?Door gebruik te maken van het Windows 8 start scherm geven we de gebruiker een vertrouwde omgeving, waardoor hij/zij makkelijker op onze website kan navigeren. Door middel van live-tegels te gebruiken ziet de gebruiker snel, en op een mooie manier, wat er ongeveer op de pagina moet staan waar hij/zij naar toe wilt. We hebben de tegels op een goede manier ingedeeld, zodat ook niet-Windows 8 gebruikers makkelijk kunnen zien waar ze naartoe moeten.

30


Antwoord op de Hoofdvraag

Hoe maken we een interactieve website?Door een website te maken die op het Windows 8 start scherm lijkt (ook wel Metro UI genoemd) kunnen we de gebruiker makkelijk door informatie heen laten zoeken en op een andere manier dan op een normale website door de website heen laten zoeken. Ook worden er verschillende animaties gebruikt in de site waardoor onze website er een stuk mooier uitziet.

Antwoord:

Interactieve websiteEen interactieve website maak je door live-tegels toe te voegen aan de website. De gebruiker krijgt informatie via een live-tegel die op de website staat waarover de pagina gaat die via een link gebonden zit aan de live-tegel. Het geeft de gebruiker dus een interactief inzicht over wat er op die pagina staat. Zo kan de gebruiker makkelijker navigeren door onze website.

Windows 8 lay-out & live-tegel effectenAls je als gebruiker op een voor jou nog onbekende, normale website komt, heb je meestal geen idee waar je naar toe moet (navigeren), terwijl dit wel fijn zou zijn. Wanneer je als gebruiker op een voor jou nog onbekende, interactieve website komt, kun je makkelijker navigeren door de informatie die op de live-tegels wordt getoond. Dit zorgt voor een gebruiksvriendelijke werking, omdat het fijn oogt en het enorm veel lijkt op de gemakkelijke werking van Windows 8, die wij zo goed mogelijk hebben geprobeerd na te maken, door speciale effecten aan de live-tegels toe te voegen. Zo blijft de gebruiker geïnformeerd over wat er op de aangekoppelde pagina zit.Doordat wij nu een interactieve website hebben gemaakt die de lay-out heeft van het Windows 8 start scherm, kijk je alvast hoe in de toekomst websites er uit komen te zien als bijvoorbeeld alle computers van die slimme live-tegel start schermen krijgen. Je moet je dan voorstellen dat bijvoorbeeld websites dan ook in die stijl veranderen.

Airport effectNadat we jQuery een beetje onder de knie hadden en de interactieve website bijna af hadden, hadden we nog wat tijd over om wat te experimenteren met plug-ins. Zo is het Airport effect terechtgekomen in de ‘The beauty itself’ pagina en is er voor gekozen om in de footer (onderaan iedere pagina) vier icoontjes van links naar rechts te laten bewegen wanneer de website geladen is. Dit zorgt voor de introductie van een ‘interactief gevoel’ bij onze website. Je hoeft er namelijk niks

31


voor te doen om de icoontjes te laten komen.Door met plug-ins te werken leer je ook een hele hoop. Zo gebruik je bijvoorbeeld stukjes code die je normaal bij jQuery niet gebruikt, maar nu wel, omdat je een plug-in hebt gedownload. Op zo een manier leer je dus meer met jQuery omgaan. Ook als je een verandering aan wilt brengen, zoals de wachttijd tussen een effect, zoek je even in de bron van de plug-in. Als je dit eenmaal hebt veranderd begrijp je ook de werking van de plug-in.

Bronvermelding1. http://www.codecademy.com/ 2. http://forum.joomlacommunity.eu/showthread.php?t=4863 3. http://jquery.com/ 4. http://www.w3schools.com/ 5. http://www.htmlgoodies.com/ 6. http://javascript.startpagina.nl/ 7. http://www.voorbeginners.info/ 8. http://www.tizag.com/javascriptT/ 9. http://www.websitemaken.be/ 10. http://www.echoecho.com/ 11. http://visualjquery.com/ 12. http://jqueryui.com/ 13. http://www.webteacher.com/javascript/ 14. http://www.referencedesigner.com/tutorials/

index.php15. http://stackoverflow.com/ 16. http://www.javascriptkit.com/ 17. http://metro-webdesign.info 18. http://www.creepyed.com/2012/09/windows-8-colors-hex-code/ 19. http://metroui.org.ua/ 20. http://metro-webdesign.info/#!/Tutorials 21. http://www.unwrongest.com/projects/airport/ 22. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp 23. http://www.w3schools.com/css3/default.asp 24. http://w3schools.com/jquery/eff_animate.asp 25. http://w3schools.com/jquery/eff_fadein.asp 26. http://w3schools.com/jquery/eff_fadeout.asp 27. http://w3schools.com/jquery/eff_stop.asp

32

http://w3schools.com/jquery/eff_stop.asp

http://w3schools.com/jquery/eff_fadeout.asp

http://w3schools.com/jquery/eff_fadein.asp

http://w3schools.com/jquery/eff_animate.asp

http://www.w3schools.com/css3/default.asp

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

http://www.unwrongest.com/projects/airport/

http://metro-webdesign.info/#!/Tutorials

http://metroui.org.ua/

http://www.creepyed.com/2012/09/windows-8-colors-hex-code/

http://metro-webdesign.info/

http://www.javascriptkit.com/

http://stackoverflow.com/

http://www.referencedesigner.com/tutorials/index.php

http://www.referencedesigner.com/tutorials/index.php

http://www.webteacher.com/javascript/

http://jqueryui.com/

http://visualjquery.com/

http://www.echoecho.com/

http://www.websitemaken.be/

http://www.tizag.com/javascriptT/

http://www.voorbeginners.info/

http://javascript.startpagina.nl/

http://www.htmlgoodies.com/

http://www.w3schools.com/

http://jquery.com/

http://forum.joomlacommunity.eu/showthread.php?t=4863

http://www.codecademy.com/


Planning & Taakverdeling

Planning:

Wat? Wanneer af?Hoofd- en deelvragen 3 februariKeuze onderwerp en Keuze projectleider

3 februari

jQuery geleerd 10 februariNotulen eerste vergadering 10 februariEerste Voortgangsverslag 10 februariHTML + CSS grootste gedeelte 17 februariTitelpagina + inleiding 17 februariAchtergrondinformatie 24 februarijQuery in site verwerkt 3 maartNotulen tweede vergadering 3 maartVoortgangsverslag tweede vergadering

3 maart

Beschrijving eindproduct + Leerpunten

3 maart

Conclusie + Bronvermelding 10 maartTotale Verslag + inhoudsopgave 13 maart

Taakverdeling:

Wat? Door wie?jQuery Dennis, Roel, Jeroen en BjörnHTML Dennis, Roel, Jeroen en BjörnCSS Dennis, Roel, Jeroen en Björn

33


Javascript DennisHoofd- en deelvragen Björn, Dennis, JeroenNotulen vergaderingen DennisVoortgangsverslagen Roel en JeroenTitelpagina + inleiding BjörnAchtergrondinformatie Roel en BjörnBeschrijving Eindproduct Dennis en RoelLeerpunten Dennis, Roel, Jeroen, BjörnConclusie + Bronvermelding Jeroen en BjörnInhoudsopgave BjörnSpelling Verslag Björn, JeroenTekst Pagina’s Jeroen

Notulen vergaderingen:

Notulen vergadering 1:

Bespreekpunten:- Wanneer moet alles af?- Wie doet wat precies?- Beslissing van het uiteindelijke product.- Er moet duidelijkheid zijn bij iedereen.

Voortvloeiende afspraken:- Wie wat doet -> plan van aanpak project- Wanneer? -> plan van aanpak project- Beslissing van het uiteindelijke product hebben we gemaakt.- Iedereen doet ongeveer evenveel, alles wordt verdeeld.- We moeten het altijd met elkaar eens zijn over alles.- Als we iets maken hebben we dat met elkaar besproken- Alles moet één dag voor elke deadline af zijn, voor zekerheid.

Notulen vergadering 2:

Bespreekpunten:- Hoe staan we er voor?- Ligt iedereen nog op schema?- Moeten er nog dingen anders?- Is alles nog duidelijk bij iedereen?

34


Voortvloeiende afspraken:- Iedereen houdt zich aan zijn deadlines.- Zorgen dat het ruim op tijd af is, zodat we nog tijd hebben om alles te verbeteren.- Geen kwantiteit maar kwaliteit.- Niet te gehaast dingen doen maar op het juiste tempo, zodat het netjes wordt.- Meer richten op verslag in plaats van op de website zelf.

Voortgangsverslagen

Voortgangsverslag 1

Wat is er gedaan?- De HTML en het ontwerp zijn klaar.- Iedereen begrijpt jQuery.- CSS3 is grotendeels af.- De inleiding, plan van aanpak, taakverdeling, planning, voortgangsverslag, hoofd- en deelvragen en de voorkant van het verslag zijn gemaakt.- Informatie over enkele onderwerpen is al opgezocht.

Welke problemen hadden we?- jQuery werkt in sommige gevallen niet. De reden is meestal nog onduidelijk.- Bij een resolutie waarbij je schermhoogte kleiner is dan 900 pixels moest je scrollen. Dit wilden we niet omdat we een overzichtelijke website willen, dus heeft Dennis daar een stukje JavaScript voor gemaakt waardoor hij een andere CSS aanroept.- De horizontale scroll werkt nog niet bij enkele pagina’s waar het nodig is.

Wat moet er nog gebeuren?- jQuery moet over het algemeen nog toegepast worden.- Pagina’s moeten nog gelinkt worden aan de website.- Het verslag moet grotendeels nog gemaakt worden.

35


Voortgangsverslag 2:

Wat is er gedaan?- Website is zo goed als klaar, er moeten alleen nog een paar puntjes verder verbeterd worden. Voorbeelden van wat er gedaan is: Live tegels, loading pagina en het scroll probleem oplossen.- Het verslag is t/m het punt achtergrond informatie af, kan alleen nog wel wat beter en uitgebreider.- jQuery toepassen- Pagina’s linken aan de website

Welke problemen hadden we?- Lukte nog steeds niet om horizontaal te scrollen. Dit hebben we opgelost door er een stuk jQuery in te zetten waardoor je de hele division verplaats als je op het linker of rechter pijltje drukt.- Laadprobleem; Laden duurde te lang van de pagina. Dit hebben we opgelost door de afbeeldingen te verkleinen naar de precieze grootte die we nodig hebben en een laadscherm toe te voegen.

Wat moet er nog gebeuren?- Fouten uit de website halen en verbeteren.- Alle website bestanden door de W3 Validator halen om nog meer fouten op te sporen.- Verslag af maken en perfectioneren. - Website perfectioneren.

Logboeken

Logboek DennisDatum Activiteit Tijd29-jan info gezocht over websites met Windows 8 uiterlijk 1:0030-jan Begonnen met het leren van Javascript. (codecademy) 1:301-feb Javascript verder gaan leren (functions). 1:002-feb Javascript en jQuery opdrachten gedaan. 2:303-feb jQuery opdrachten afgerond. 2:003-feb Verdere informatie over jQuery opgezocht. 0:305-feb Bezig geweest met de "ColorPicker" 1:307-feb Begin gemaakt aan de officiële site. (divisions container ect.) 1:308-feb Verder gegaan met de officiële site. (tegels etc.) 3:309-feb Verder gegaan met de officiële site. (tegels ect.) 2:30

10-feb Indeling CSS volledig aangepast + icoontjes toegevoegd. 2:0011-feb Javascript gemaakt die zorgt voor een andere CSS bij een 3:00

kleinere resolutie. Ook de CSS helemaal omgegooid. 14-feb Bezig geweest met jQuery, het werkt alleen nog niet 2:30

helemaal zoals ik wil. 18-feb Test gedaan voor een input. 1:3021-feb Helemaal opnieuw begonnen voor dezelfde overzichtelijke 4:00

HTML en CSS voor elke pagina.

22-feb Samen met Jeroen de live-tegel van Roel volledig omgegooid 4:00

Hover-effect in tegels gezet van namen + geprobeerd het 2:30

36


een en het ander te veranderen aan de live tegel. 27-feb Horizontaal scrollen geprobeerd. Niet gelukt 1:001-mrt Weer dingen geprobeerd met horizontaal scrollen, maar 3:00

het is nog steeds niet gelukt. 3-mrt Horizontaal scrollen is gelukt. Ook de foto's bij de namen 2:30

gemaakt in Photoshop + gewerkt aan icoontjes. 4-mrt Afbeeldingen verkleind voor kortere laadtijd, template 5:30

gemaakt voor elke info-pagina & gelijk voor onze namen. pagina hardstyle gemaakt 0:45

5-mrt Slordigheid eruit gehaald (css en html). Live tegel van 2:00 iFormation verbeterd. Lettertype probleem gefixt.

6-mrt Geprobeerd om een maximum aan het scrollen te zetten. 1:308-mrt Live tegel iFormation veranderd en het logo gemaakt. 1:00

Logo in een tegel gezet en een hover effect gemaakt, uitleg over resolutieprobleem gemaakt. 3:00

9-mrt Airport jQuery erin gezet 1:0012-mrt Uitleg live tegel gemaakt 1:3013-mrt Uitleg belangrijke CSS en horizontaal scrollen gemaakt. 3:30

leerpunten gemaakt. 1:00 ~ Uren op school niet meegerekend ~ Totaal aantal uur: 64:15

Logboek JeroenDatum Activiteit Tijd30-jan Begonnen met Javascript opdracht op Codecademy 1:153-feb Javascript functies geoefend op Codecadamy 1:004-feb jQuery cursus begonnen op Codecademy 1:455-feb jQuery cursus 1.1 (Codecademy) vervolgd 2:006-feb jQuery cursus 1.2 (Codecademy) gestart en afgerond 1:457-feb jQuery cursus 1.3 (Codecademy) gestart en afgerond 2:00

9-feb Informatie opgezocht voor HTML pagina's en begonnen 2:15

deze informatie te verwerken in Dreamweaver bestanden.

11-feb In les gewerkt aan voortgangsverslag met Roel 0:3011-feb Thuis gewerkt aan HTML pagina's 1:0015-feb HTML info pagina's verder gedaan 0:4520-feb jQuery cursus 2.1 gestart en afgerond 1:1521-feb jQuery cursus 2.2 gestart 1:3022-feb Samen met Dennis de live-tegel van Roel herschreven. 4:0022-feb Gewerkt aan HTML pagina's 2:003-mrt Info pagina's bijgewerkt en HTML templates gevormd 3:304-mrt Gewerkt aan HTML templates 1:455-mrt HTML template Tips gemaakt en tekst aangepast 1:459-mrt HTML template The beauty itself gemaakt + teksten 3:00

aangepast 11-mrt Template hardware vervangen en aangepast + App 1:30

Recommendations gemaakt 12-mrt Hardware en AppRecommendations templates 1:45

37


aangepast13-mrt Alle .html bestanden gecontroleerd en door validator 4:30

gehaald, hierop bestanden aangepast

14-mrt Verslag aangepast op school en thuis hoofdvraag beantwoord 4:00

en grondige spelling- en grammaticacheck gedaan Totaal aantal uur: 44:45:00

Logboek BjörnDatum Activiteit Tijd

1-feb Codecademy 1:003-feb Codecademy 2:004-feb Codecademy 2:008-feb Codecademy 1:00

10-feb Codecademy 1:0011-feb Codecademy 2:0014-feb Vergadering + planning en taakverdeling 2:0015-feb Voorkant Verslag 0:3016-feb Inleiding Verslag 2:0018-feb 1e notulen en voortgangsverslag 1:0021-feb jQuery 2:0023-feb Horizontaal scrollen proberen op te lossen 3:0024-feb CSS 2:0026-feb Hoofd&Deelvragen verslag 2:0027-feb Achtergrond Informatie verslag 2:001-mrt Beschrijving eindproduct 2:002-mrt Beschrijving eindproduct 2:003-mrt Beschrijving eindproduct 2:005-mrt Leerpunten + 2e vergadering 2:006-mrt Leerpunten 2:008-mrt Conclusie 2:00

10-mrt Bronnenlijst 2:0011-mrt Schetsen 2:0012-mrt Logboeken in verslag gezet 1:30

38


13-mrt Verslag Geordend 2:0014-mrt Spelling controle verslag 2:0015-mrt Spelling controle verslag 2:00

Totaal: 43

Logboek: RoelActiviteit Tijd

vergaderingen 4,5 uurjQuery basis informatie

3 uur

jQuery cursussen 7 uurHTML pagina’s 5 uurjQuery proef animatie test

3 uur

jQuery klik navigatie 8 uurjQuery slide effect voor gehele pagina(niet gelukt)

5,5 uur

jQuery+ css3 tegels 2 uurjQuery live-tegels 7 uur

jQuery icoontjes 8,5 uur

Css3 aanpassingen en verbeteringen

2 uur

Verslag 5,5 uur

Pagina tekst 2 uur

Windows 8/metro UI Bestuderen + eigenschappen en gedragingen

1,5 uur

39


bestudeerd.Totaal aantal uren: 64,5 uur

SlotwoordTot slot willen we nog het een en het ander vertellen over deze opdracht, hoe we het vonden en hoe het er aan toe ging. Ging de samenwerking goed of viel dat juist tegen? Viel de opdracht mee, of was het heel erg lastig? En zijn er nog verdere plannen? Het is natuurlijk zonde om deze website te verwaarlozen en niet meer naar om te kijken. Misschien wordt het wel de hele nieuwe Facebook, niemand weet het, en we kennen geen grenzen!

SamenwerkingDe samenwerking tussen ons vieren ging goed, we maakten gebruik van Dropbox om onze website up-to-date te houden voor ons alle vier. Dropbox is hier een uitstekend programma voor, omdat je dan altijd alles kunt zien wat iedereen doet, of heeft gedaan.We gebruikten de Facebook-chat voor de communicatie als we thuis aan het werken waren. Op school hebben we ook veel overlegd over hoe het een en het ander in elkaar gezet moet worden. Tijdens de wiskunde lessen was het makkelijk om af en toe even over de lay-out te discussiëren of over hoe we nou precies elk probleem aan gingen pakken.Uiteindelijk loont onze goede samenwerking, want het resultaat mag er wezen. We zijn er met zijn allen heel erg trots op, maar het is nog zeker niet af. De plannen zijn nog groot en we kennen geen grenzen!

De opdrachtDe opdracht is over het algemeen goed te doen. Het was niet altijd even makkelijk. Als je het ene probleem hebt opgelost dan ben je voordat je het weet alweer bij je volgende probleem beland. Grote problemen die we tegen waren gekomen waren bijvoorbeeld het horizontaal scrollen, het probleem met de resolutie en de lange laadtijd. Met veel overleg komt iemand uiteindelijk met de oplossing. De CSS had even wat werk nodig voordat het een mooi geheel was, hier heeft ook zeker

40


veel tijd in gezeten. Zelfs de CSS was niet altijd even makkelijk, omdat het een geavanceerd werkje is om het allemaal mooi in elkaar te krijgen.Op het begin van de opdracht hadden we wat opstartproblemen, omdat we nog niet precies wisten wat we wilden gaan maken. Wilden we een web-app, een game in Java of juist een website die draait met jQuery? Uiteindelijk is het de laatste optie geworden. We zijn met zijn allen heel erg tevreden met het resultaat dat we hebben geboekt. We hadden op het begin nooit gedacht dat we dit in elkaar konden zetten, maar met doorzettingsvermogen om de problemen op te lossen zijn we er uiteindelijk gekomen.

Verdere plannenWe zijn niet van plan om onze site zo achter te laten. We zijn nog lang niet klaar met deze website. Als we een maand meer hadden gehad voor dit project hadden we er nog hele grote veranderingen in kunnen zetten. Denk hierbij bijvoorbeeld aan een inlogscherm of een menu waar je de instellingen kunt veranderen van de site.

InlogschermIk (Dennis) heb het er al met Kevin en Steven over gehad, een inlogscherm voor onze website. We willen gebruik gaan maken van PHP om in te kunnen loggen. Zodra je ingelogd bent kan je pas op onze site. Als je nog niet ingelogd bent kan je bijvoorbeeld alleen jezelf met een Hotmail account aanmelden, net zoals bij de echte Windows 8.We willen het dan ook echt zo maken als Windows 8, bijna alles moet hetzelfde zijn als dat je je in Windows 8 ook aan moet melden.

InstellingenOok had ik zelf nog een idee om een menu te maken aan de rechterkant van de container. Je drukt op een klein knopje en er komt een heel menu vanuit de rechter zijkant zetten, waarbij je verschillende instellingen van de website kunt veranderen. Denk hierbij aan het lettertype, de kleur van de achtergrond of dat je zelf tegels toe kan voegen. Hierbij maken we dan ook gebruik van PHP, omdat je dan ingelogd bent op je eigen account. Een mooie uitdaging is om dan de instellingen die je hebt gemaakt ook te behouden bij de volgende keer dat je inlogt.

ScrollenNu we het resultaat hebben bereikt dat je horizontaal kunt scrollen, willen we dit wel uitwerken. Nu zit er geen maximum aan, maar als de centrale examens geweest zijn staan alle kansen weer open omdat we dan pas weer genoeg tijd hebben. Wie weet maken wij zelf wel een plug-in waarmee we kunnen zorgen dat je met je scroll wieltje je pagina horizontaal kunt scrollen.

41

13037293/afbeeldingen/oefenrapp… · Web viewDoor jQuery kunnen we HTML5 codes manipuleren om...

Documents

Transcript of 13037293/afbeeldingen/oefenrapp… · Web viewDoor jQuery kunnen we HTML5 codes manipuleren om...