Index - TessaViergever/your-tribe-squad-page GitHub Wiki

✔Je hebt gewerkt volgens de verschillende fases van de development-lifecycle
✔je hebt als team het proces (ontwerpbeslissingen, schetsen, inzichten en testresultaten) gedocumenteerd in de Wiki
✔de squad page staat op Github en heeft een live url

Analyseren

Tijdens het analyseren heeft ons team unaniem besloten dat een space/futuristisch thema tof zou zijn voor onze Squadpage. 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 link geeft meer informatie over deze taak.

https://github.com/TessaViergever/your-tribe-squad-page/wiki/Team-Canvas

Ontwerpen

Onderstaande schets is van mij. Hier zie je een spiraalvormige carousel waarop de profielfoto's van onze squadgenoten van klein naar groot in beeld komen d.m.v. scrol/tab. Eventueel nog een zoekfunctie om op naam te zoeken of een side menu waarin je de namen van alle studenten kunt vinden. Schets-Squad-Page

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 maan heen.

Screenshot 2022-09-21 at 12 06 56

Twee onderstaande schetsen zijn van Stefan.

Schermafbeelding 2022-09-12 om 12 38 12 Schermafbeelding 2022-09-12 om 12 38 21

Luuk was in deze fase nog geen onderdeel van ons team en heeft daarom geen schets.

Eindschets: Vanuit de bovenstaande schetsen en de toegevoegde afbeeldingen aan het visuele moodboard is de eindschets tot stand gekomen. Schermafbeelding 2022-09-12 om 12 55 14

Naast bovenstaande schetsen hebben we ook ieder individueel een responsive design schets gemaakt. Hier mijn schets + uitleg: https://github.com/TessaViergever/your-tribe-squad-page/wiki/Responsive-Design

Bouwen

Het bouwen van de uiteindelijke squad page heb ik niet aan bijgedragen. Wel heb ik een eigen versie van de squadpage gemaakt zodat ik daarin kon experimenteren met zelf bouwen en onderzoeken wat de code van Stefan en Luuk deed. Werken in een aparte map voelde veiliger omdat ik op die manier niet het werk van Luuk of Stefan ongedaan zou maken.

Mijn uitprobeersel was om een neon effect rondom de profielfoto's te krijgen. Dit is me gelukt, alleen wel op iedere foto tegelijk én op de zon. Dit was niet helemaal de bedoeling maar al met al wel tevreden dat het enigszins lukte. Hier zie je het stukje CSS dat ik gebruikt heb.

.oval img{ border-radius: 50%; transform: skew(-180deg); width: 4em; height: 4em; object-fit: cover; transition: 0.5s ease-in-out; margin: 10px; border-radius: 50%; box-shadow: 0px 0px 4px 4px rgb(255, 99, 219); animation: glow 1.5s linear infinite alternate; }

@keyframes glow{ to { box-shadow: 0px 0px 30px 20px rgb(30, 30, 114); }

Hieronder meer informatie over de algemene bouwfase.

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.

Schermafbeelding 2022-09-21 om 14 23 02

https://github.com/Stefan-Espant/your-tribe-squad-page/blob/8b4edac1ef8adabaf8867ff2a4b97b34f229bd8c/styles/style.css#L461-L484

De bovenstaande code genereert het glow effect wanneer de gebruiker over een student hovert of tabt.

Integreren

Aan het integratieproces heb ik zelf geen bijdrage geleverd. Wel heb ik aangegeven dat ik graag mee wilde kijken bij het mergeconflict om eens te zien hoe dit eruit ziet. Ik begrijp nog niet helemaal hoe dit werkt en hoe je conflicten oplost maar het was wel prettig om het in ieder geval een keer gezien te hebben.

Hieronder het integratieproces dat Luuk en Stefan hebben uitgevoerd.

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.

Schermafbeelding 2022-09-19 om 15 10 34 Schermafbeelding 2022-09-19 om 15 13 11

Tijdens het valideren heeft Stefan de broncode van de index.html 3x aangepast. De meeste fouten waren het verkeerd linken van Javascript bestanden, Schermafbeelding 2022-09-22 om 13 52 49 Schermafbeelding 2022-09-22 om 13 53 02 Schermafbeelding 2022-09-22 om 14 04 21

Testen

In de testfase heb ik geen uitvoerende rol gespeeld. Wel heb ik meegedacht over hoe we de resultaten van Pagespeed Insight beter konden krijgen. Mijn idee hierover was om de afbeeldingen "kleiner" te maken. Deze stonden namelijk nog op de originele resoluties en het kost tijd om dat allemaal in te laden terwijl het niet nodig is om de foto's in die kwaliteit aan te bieden. Stefan heeft dit vervolgens verder opgepakt.

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.
Schermafbeelding 2022-09-15 om 21 13 42 Schermafbeelding 2022-09-15 om 21 13 56
De recenste versie gaf de Google Pagespeed Insight een score van 93 voor Desktop. Schermafbeelding 2022-09-22 om 14 09 38

⚠️ **GitHub.com Fallback** ⚠️