Solution Video

Website

Ik heb mijn project geupload naar mijn website zodat iedereen deze kan bezoeken en uitproberen. 

http://sennat.linkhosting.nl/

Video

De solution video heb ik online gezet via Behance. In deze video laat ik mijn demo zien en hoe deze werkt. 

https://www.behance.net/gallery/45270879/Project-Creative-Technologies

Eind reflectie

Leerervaring

Tijdens dit project ben ik veel obstakels en valkuilen tegen gekomen. Ik heb geleerd om hier oplossingen voor te vinden. Ook heb ik geleerd om mijn voortgang goed bij te houden.

Ik ben altijd redelijk goed geweest in planningen maken. Bij dit project bleek dat echter lastig te zijn dan gedacht. Achteraf denk ik dat dat voornamelijk komt doordat ik nog nooit met JavaScript en GreenSock had gewerkt. Dit zorgde ervoor dat ik niet goed kon inschatten hoe lang ik met iets bezig zou zijn. Ook was ik soms bijna klaar met een ontwikkelingsstap, maar had ik vervolgens een error waar ik lang mee bezig was. Het vinden een oplossing ging steeds sneller doordat mijn kennis groeide.

Het kan heel nuttig zijn om vragen te stellen op een forum. Zelf heb ik enkele keer om hulp gevraagd op het GreenSock forum. Hierbij leerde ik dat het belangrijk is om je probleem heel concreet aan te geven. Het heeft dus niet veel zin om een vraag te stellen als je niet weet wat het probleem is.

Het niet gestructureerd bijhouden van mijn voortgang was voor mij een valkuil. Zeker in het begin van het project. Ik vertelde wel alles wat ik gedaan had, maar vaak niet op een duidelijke manier en soms miste ik een onderdeel. Toen ik begon met het structureren van mijn blogs in <aanpak>, <leerervaring>, <resultaat> en <bronnen> ging het een stuk beter. Ook ben ik mijn tijdsbesteding gaan bijhouden. Dit gaf mij goed inzicht in hoeveel van mijn tijd ik in bepaalde stappen stak, waar ik dit zou kunnen verbeteren en wanneer ik genoeg had gedaan.

 

Toekomst

Ik ben tevreden met wat ik gemaakt en geleerd heb. Ik ben er op trots dat ik niet alleen iets heb kunnen maken aan de hand van tutorials, maar dat ik ook echt de code snap en zelf kan gebruiken. Nu ik de technische mogelijkheden van GreenSock en JavaScript ken, kan ik hier in de toekomst een stuk makkelijker mee gaan werken. Graag zou ik een eigen prentenboekje maken, met een eigen verhaal en zelfgemaakte illustraties. Ook is de kennis die ik heb goed te gebruiken voor het maken van websites, hiervoor wil ik graag meer leren van JavaScript. 

voortgang week 8 & 9 + demo

De laatste stap is het afmaken van de demo. Hierbij heb verschillende nieuwe dingen geleerd.

Aanpak
Ik wilde verschillende kleine aanpassingen doen aan mijn demo. Ik heb verschillende sites bezocht om te kijken hoe ik bepaalde dingen kon doen. Vervolgend heb ik dit toegepast in mijn eigen code.

Leerervaring

- Achtergrond toevoegen in CSS
Een makkelijke manier om elke pagina een ander achtergrond te geven is met de volgende code:

background-image: url(images/naam.jpg);

Hiervoor moet je je 'images' mapje wel in je CSS mapje zetten.
Je kunt de achtergrond de hele pagina laten vullen met de code:

background-size: 100% 100%;

- Een timeline oneindig herhalen
Je kunt met 'repeat: -1' een timeline oneindig laten herhalen.
Bijvoorbeeld: tlleafys.staggerTo(".leafy", 20, {y: '1200', repeat: -1}, 0.7) om de blaadjes altijd te laten vallen

- Elementen boven de pagina positioneren
De vallende blaadjes moeten boven de pagina verschijnen en dan naar benden vallen. Dit kan door in CSS '-        top: -1200' toe te voegen. 

- Timeline afspelen bij hover
Je bepaald eest elke element je de hover wilt. Vervolgens zet je daar een functie op. In de functie zet je play en repeat zodat de timeline gaat afspelen wanneer je met je muis over het element gaat. 

var $oor = $('#rear4');
$oor.hover(
  function(){
    tldeer.play();
    tldeer.restart({paused: true})
 })

- custom cursor maken
Ik wilde een vliegje maken van mijn cursor. Dit kan door de volgende code:

.cursorfun {
   cursor: url('images/fly.png'), auto ;
}

Een probleem hierbij was echter dat de de achtergrond niet als element in de class stond. Daardoor veranderde de cursor alleen in een vlieg wanneer je over de tekst of de afbeelding ging. Daarom heb ik een onzichtbare achtergrond toegevoegd in de class.

Resultaat


Hier is de uiteindelijk versie van de demo te zien.

Bronnen

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://greensock.com/forums/topic/3914-looping-a-tween/

http://stackoverflow.com/questions/16548338/full-screen-responsive-background-image

http://stackoverflow.com/questions/2006134/float-a-div-above-page-content

http://www.w3schools.com/jquery/event_mouseenter.asp

http://codepen.io/dharrah/pen/wzKGvW?editors=0010

https://davidwalsh.name/css-custom-cursor

https://css-tricks.com/almanac/properties/c/cursor/

http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors 

To do - week 9

To do

- Demo afmaken

- Voortgang week 8 & 9 op blog plaatsen

- Retrospective schrijven

Voor de deadline aankomende zondag wil ik mijn laatste ontwikkelingsstap (de demo maken) afhebben. Ook zal ik de retrospective schrijven zodat ik het justification gedeelte kan laten beoordelen. De video zal ik waarschijnlijk in week 10 maken en inleveren. 

Retrospective week 8

Deze week heb ik vooral heel veel tijd besteed aan de andere deadlines en tentamens voor deze week. Ik heb wel wat voortgang gemaakt met mijn demo, de aanpak en het resultaat hiervan zal ik later nog delen op mijn blog. 

Wat ging goed

Ik heb mijn demo op een aantal punten goed kunnen verbeteren, zoals de audio en tekst. Ik heb een handige manier geleerd op achtergronden toe te voegen. 

Wat kan beter

Ik had niet meer tijd om te besteden aan het project, dus echt veel kon ik niet verbeteren. Wat ik deze week gedaan heb ging wel goed. 

Wat moet beter

De demo moet nog afgemaakt worden en de retrospective voor het hele project moet geschreven worden.