Index - Stefan-Espant/your-tribe-squad-page GitHub Wiki
Voordat we gingen ontwerpen had ons team unaniem besloten om in een ruimte-achtig thema onze overzichtspagina. Om dit concept visueel te maken, stelde we een moodboard op binnen onze Miro pagina. Daarin kregen we allemaal een goed beeld van welke stijl we wilden uitstralen naar de gebruiker toe.
Onderstaande schets is van Tessa. Hier zie je een spiraalvormige carousel waarop de profielfoto's van onze squadgenoten van klein naar groot in beeld komen d.m.v. scroll of tab. Eventueel nog een zoekfunctie om op naam te zoeken of een side menu waarin je de namen van alle studenten kunt vinden.
Schets Michelle: In de sketch zie je een maan midden in het midden van het scherm. Hierom heen zweven allemaal planeten, waarin de mugshots worden weergeven. De platen draaien rond de maand heen.
Twee onderstaande schetsen zijn van Stefan.
Luuk was in deze fase nog geen onderdeel van ons team en heeft daarom geen schets.
Individueel heeft elk teamlid schetsen gemaakt.
Vanuit de bovenstaande schetsen en de toegevoegde afbeeldingen aan het visuele moodboard is de eindschets tot stand gekomen.
Het coderen ging vrij vlekkeloos. Luuk en Stefan bouwden in de root map aan de site en wisten zo een geanimeerde sterrenhemel te ontwikkelen met Javascript en een zonnestelsel te laten bewegen dankzij CSS. Tessa en Michelle experimenteerden in een map lager hoe sommige elementen beïnvloedbaar zijn en pastte elementen aan hoe zij reageerde.
Tijdens het ontwikkelen bouwde Luuk een landingssection waar doormiddel van scrollen de gebruiker op de zonnestelsel section kwam. Echter werkte het scrollen niet nadat we het op meerdere apparaten hadden uitgeprobeerd.
De bovenstaande code genereert het glow effect wanneer de gebruiker over een student hovert of tabt.
Tijdens het integreren ontstond er een merge conflict waarbij in de live code bij Luuk een error ontstond. Dit hebben we opgelost door de code handmatig aan te passen. Voor de toekomst is het handig hierin een manier te vinden om parallel naast elkaar te coderen zonder grote impact te leveren op elkaars werk.
Tijdens het valideren heeft Stefan de broncode van de index.html 3x aangepast.
De meeste fouten waren het verkeerd linken van Javascript bestanden. Ook was de eerste regel: DOCTYPE html, verkeerd genoteerd. Dit gaf de meeste errors.
Tot slot gaf die nog 2 laatste fouten waarvan de link van het Javascript bestand verkeerd was ingesteld.
Deze was simpel op te lossen op type en text van plaats te wisselen.
Bij het testen van de overzichtspagina maakte ons team gebruik van Google Pagespeed Insight om de snelheid van het laden van de website te testen. Dit was de eerste test en verrassend genoeg gaf die een resultaat van 74%. Omdat we de originele mugshots hebben gebruikt (en deze een resolutie van c.a. 3000 x 2000 pixels per foto had) vertraagde de site met 10 seconden.
De recenste versie gaf de Google Pagespeed Insight een score van 93 voor Desktop.
