2. Ontwerpen
Bijvoorbeeld: het maken van idee-schetsen, wireframes en wireflows tekenen, labels bepalen, responsive layout uitwerken, breakpoints bepalen en breakdowns maken voor onderzoek naar semantische HTML elementen die je nodig hebt, hoe je de layout in CSS zou kunnen maken en welke JS en CSS je nodig hebt voor interacties en animaties.
Funda heeft ons dit ontwerp opgeleverd, dit is de Advertentie Detail Pagina. Onze opdracht is om dit helemaal opnieuw op te bouwen met HTML en CSS.
Voor de breakdown schets heb ik blauwe kleuren gebruikt voor HTML en roze kleur voor CSS. Verder heb ik aan de linker kant de structuur van de HTML genoteerd.
Ik heb na het bekijken van het ontwerp een snelle breakdown schets gemaakt. Ik heb daar wat HTML code en CSS code neergezet, zodat ik beetje een idee krijg hoe ik het ga coderen.
Ik ben samen gaan zitten met Rutger en we hebben onze wiki vergeleken. Rutger heeft alles in 1 pagina en ik heb meerdere pagina's en dan zijn dan de kopjes. We zijn er samen uitgekomen dat wij dit het overzichtelijks vinden.
We zijn er samen uitgekomen dat de ideale manier van de kopjes is om het op volgorde van de DLC onder te verdelen in pagina's. Door de pagina's nummers te geven, staan ze op volgorde van de DLC.
Hierdoor is de wiki overzichtelijker en chronologischer. We keken wel nog naar een oplossing van hoe je het echt chronologisch kunt doen, maar dan kun je desnoods bij het kopje de datum erbij zetten. We hadden ook idee om het leuker te maken met emoji's.
De pagina home kan of verwijderd worden of hier kun je een lijst maken met een overzicht.
Voor de opdracht hebben we een layout gekregen die we na moeten bouwen (zie ontwerp), hierin is het belangrijk dat het mobiel-first wordt gebouwd, dus eerst mobiel. Verder is het ook belangrijk dat de website responsive is en in ieder geval op de volgende breakpoints: mobiel, tablet en desktop.
Voor het bepalen van de breakpoints heb ik gekeken naar het ontwerp en naar een live detail pagina van funda. Ik heb gekeken hoe de pagina liep responsive via "element inspecteren" en keek goed naar wat er precies veranderen en op welke breakpoints.
Gevonden breakpoints:
- 1200px (Tussen fase) (header foto, grid van 4 naar 2 en laatste twee foto's weghalen)
- 1020px (Tablet/ iPad)
- 760px (Mobiel)
Ik heb goed naar de layout gekeken en heb ook een snelle breakdown schets gemaakt om een beetje een beeld te krijgen naar hoe ik de layout in CSS zou kunnen maken. zie breakdown schets
Ik ga vooral veel gebruik maken van display: grid en display: flex om de layout te maken. Grid vooral om het als zijnde blokken te verdelen horizontaal en verticaal. En flex vooral om het mooi uit te lijnen.
Ook heb ik een beetje gekeken naar wat voor interactie ik kan gaan maken en wat voor JS ik daarvoor nodig zien te hebben.
Lees volledige beschrijving
Het ontwerp en huidige pagina heeft een kopje omschrijving met daaronder veel tekst, alleen wordt niet alle tekst weergegeven en kun je alle tekst zien d.m.v. een knop/link "Lees volledige beschrijving".
Alleen zag ik dat op de huidige detail pagina van funda je daar wel op kunt klikken maar daarna geen optie hebt om de volledige beschrijving te verbergen. Dit lijkt mij een goed verbeter puntje en interactie om te gaan maken.
Ik denk dat ik deze interactie kan maken met CSS & JS, d.m.v. de tekst in een <div> te zetten en die een max-height te geven met een overflow: hidden. En dan met JS, wanneer ik op de <button>Lees volledige beschrijving klik dat ik een class geef met een click toggle. .classList.toggle('classnaam')
Zie Voorbeeld:
Uitklappen footer menu
Hiervoor had ik het zelfde idee met de JS, dus wanneer je een h4 aan klikt krijgt de ul een class(die een display:block geeft), d.m.v. .classList.toggle('classnaam').
Zie voorbeeld:
