.JPG){kind=link}
Dit is het ontwerp van de squad page gemaakt door Renzo, Miel en Riley.
Voor Sprint 1 is er de opdracht gegeven om een Squad Page te ontwerpen in groepen van drie personen. De reden voor deze Squad Page is om de visitekaartjes en interessante plekken op de Amstel Campus te laten zien op een interactieve manier.
Met behulp van foto's is er laten zien wat onze gedachtegang was tijdens dit project en welke ontwerpen er zijn gemaakt.
De pagina is responsive ontworpen en dus bereikbaar voor mobiele, tablet, en desktop gebruikers.
Hier staat de website: https://renzowille.github.io/squad-page-rmr/finalindex.html
Layout van de homepage
De Squad Page kan op deze manier gebruikt worden:
KLik op de foto van de persoon van wiens visitekaartje je wilt zien, dit brengt je naar een ander tablad waar je het visitekaartje kan zien en gebruiken. Zoals je ziet, zijn alle foto's in een carousel gezet waardoor de doorloop makkelijk en clean is. Hover over een foto, en de carousel stopt met draaien voor een optimale gebruikservaring.
Voor de map van de Amstel Campus, hover over een punt op de kaart om meer informatie te kunnen zien over een interessante plek op de campus waar gewerkt kan worden.
Gebaseerd op onze schets was heel snel duidelijk voor ons dat we een bewegende achtergrond wilde om wat extra effect te creëren. Dat was gelukt door middel van een video als achtergrond te zetten maar we kwamen er al snel dat niet alle browsers de video’s registreren als achtergronden waardoor de conclusie al snel getrokken kon worden dat niet iedereen de vid zou kunnen zien als achtergrond, we hebben hiervoor een oplossing bedacht waarbij wij een screenshot hebben gemaakt van de video en die in onze code achter de video hebben geplakt. Op deze manier hebben gebruikers waarvan hun browsers niet de video kunnen ondersteunen nog steeds hetzelfde design als gebruikers waarbij hun browsers wel de video kunnen ondersteunen.
<video playsinline autoplay muted loop poster="image.png" id="bgvid">
<source src="215697_small.mp4" type="video/mp4">
</video>
We hebben ook de amstel campus map toegevoegd aan onze website. We hebben een leuke functie toegevoegd waar de gebouwen in de zero state blauwe puntjes zijn , met een hover hebben we kunnen creëren dat zodra je met je curser over een van de blauwe puntjes gaat informatie te voorverschijn komt over wat voor gebouw op die plek staat etc. Op deze manier word de gebruiker niet overvallen met veel informatie maar kan de gebruiker zelf bepalen wat voor informatie op dat moment willen zien.
De website is gebouwd met HTML en CSS, en JavaScript.
Hieronder staat de basis structuur uitgelegd met de setting in de HEAD en opmaak van de BODY:
In de <head> worden twee CSS file geladen. De algemene styleguide met basis settings en kleuren.
En een local CSS file met specifieke styling voor deze pagina.
<link rel="stylesheet" href="finalstyles.css"> De structuur van de body is HEADER, CAROUSEL:
In de header staat de H1 titel.
In de carousel staan de verschillende classes de squad page aan moet voldoen om de carousel werkend te maken. Dit wordt gedaan door:
<div class="carousel">
<div class="carousel-wrapper">
<div class="carousel-slide">In de CSS staat een carousel-slide; op de html voor een animatie wanneer de pagina wordt ingeladen dat de carousel naar links blijft bewegen door de carousel leven in te blazen.
.carousel-slide {
display: flex;
flex: 1 0 calc(100% / 33); /* Elke afbeelding neemt 1/33 van de wrapper */
margin-right: 20px;
}In de JavaScript staat de 'carousel-slide' toepassing die zorgt dat de carousel draait.
(foto van JavaScript)
Bij de achtergrond van de tweede pagina zijn sterren op de achtergrond toegepast. Deze sterren staan elke keer op een andere plek doordat de functie 'random' is gebruikt.
)
Renzo: https://renzowille.github.io/squad-page-rmr/indexrenzo.html Riley: https://renzowille.github.io/squad-page-rmr/docs/index.html Miel: https://renzowille.github.io/squad-page-rmr/indexMiel.html
Final:
This project is licensed under the terms of the MIT license.