Procesverslag

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Max van Dieren

Je startniveau:

Blauw

Je focus:

Surface

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.flyplatoon.com/

Screenshot(s) van de eerste pagina (small screen):

Home

Screenshot(s) van de tweede pagina (small screen):

Our Story

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 1e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen:

Screenreader

Met een screenreader is de webpagina erg onduidelijk te navigeren, je springt automatisch naar het hamburger menu op een bapaald moment en komt niet echt bij de content omdat de pagina een lange scroll pagina is.

Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Door de pagina goed semantisch in te delen zou het handiger kunnen zijn te navigeren, zo kan de gebruiker eerst kiezen voor de menu opties, dan de content. Aangezien de pagina een grote div soep is kan daar zeker verbetering in plaats vinden.

Muis en Toetsenbord

Hier korte omschrijving (met indien nodig afbeeldingen) Zonder muis of touchpad met sroll kom je nergens. Met tabben kom je na een paar tabjes in het (nog dichte) hamburger menu terecht, waarna de footer opeens boven aan de pagina komt te staan. De pagina scrollt niet mee met tabjes dus de content is niet te zien. Op de mobiele pagina kan ik wel door de content heen tabben omdat de er dan knoppen in de hoofdcontent staan.

Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) De pagina niet opmaken uit divjes zou hier misschien mee kunnen helpen en zorgen dat de gebruiker kan tabben naar titels bij ieder kopje, na het kiezen voor de content van de pagina.

Motoriek (shocks, elastiekjes)

Hier korte omschrijving (met indien nodig afbeeldingen) geen grote problemen sinds het vooral scrollen is. Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)

Visueel (brillen, contrast, kleurenblind, dark/light).

Hier korte omschrijving (met indien nodig afbeeldingen)

Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)

Breakdownschets (week 1)

Breakdown schetsen van de 'Home' en 'Our Story' pagina.

de hele pagina:

dynamisch deel (bijv menu):

Voortgang 1 (week 2)

uitwerken voor 1e voortgang

Stand van zaken

Ik had moeite met het indelen van de sections, de h1 laten verdwijnen bij het omhoog scrollen. Het laten lijken dat de tweede section over de eerste afbeelding heen kwam vond ik lastig.

Ook miste ik een hamburger menu waar ik mee aan het werk was.

Verslag van meeting

• Ik heb met de student assistenten gezeten over de de sections. Ik had erg in mijn hoofd om alles met verschillende positions te doen maar dit werd onoverzichtelijk.

Voortgang 2 (week 3)

uitwerken voor 2e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1	student 2	student 3	student 4
dit bespreken	en dit	en ik dit	en dan ik dat
en dat ook nog	dit als er tijd is	nog een punt	dit wil ik zeker
...	...	...	...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• punt 1
• punt 2
• nog een punt
• ...

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 8e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):

Screenreader

Door alles in te delen in sections en articles is de pagina met een screenreader toegankelijker.

Muis en Toetsenbord

Omdat ik op de Our story pagina geen knoppen heb naast de footer springt de tab daar gelijk naartoe. Het hambuger menu is niet lekker aan te spreken via tabben.

Motoriek (shocks, elastiekjes)

Doordat ik vooral scroll functionaliteiten heb op de pagina is het met motorieke handelingen ook goed te navigeren.

Visueel (brillen, contrast, kleurenblind, dark/light).

De pagina was goed te navigeren met de brillen op.

Voortgang 3 (week 4)

Het derde voortgangsgesprek heb ik met Laurens gedaan. We gekeken het toevoegen van een favicon en naar het wat meer responsive maken van mijn webpaginas. Verder had ik wat vragen over witruimte die ik niet wegkreeg bij de mobiele weergave van de paginas.

Stand van zaken & verslag

De witruimte was vrij makkelijk op te lossen door de stijling van een h1 aan te passen, dit heb ik gedaan doormiddel van een calc functie.

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Korte omschrijving met plaatjes

Dit was lastig/Is niet gelukt:

Korte omschrijving met plaatjes

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).

1. https://www.youtube.com/watch?v=SJVCvnKM_lI uitwerking van de back to top knop. aangepast om ook titel en logo te laten verdwijnen.
2. https://codepen.io/erikterwan/pen/EVzeRP aangepast om fullscreen te zijn, van boven te komen en rechts boven aan te staan(icoon).
3. https://www.flyplatoon.com/our-story de verschillende afbeeldingen en video die ik van de site heb gehaald