ybouz2 / blokweb

Mijn website voor FED in blok Web

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:

Yousri Bouzaien (500731321)

Je startniveau:

Rood

Je focus:

Responsive (kies uit responsive óf surface plane)

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.apple.com/

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

Home

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

iPhone

Breakdownschets (week 1)

uitwerken na afloop 2e werkgroep

de hele pagina:

Voortgang 1 (week 2)

uitwerken voor 1e 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

Wij hadden allen geen vragen

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• Besproken hoe we het verder aan zulllen pakken en laten zien hoe ver we al zijn.

Voortgang 2 (week 3)

uitwerken voor 2e voortgang

Stand van zaken

Eigenlijk ging alles wel goed alleen met het hamburger menu waren een paar moeilijkheden maar die waren snel op te lossen!

Agenda voor meeting

samen met je groepje opstellen

Ook hier hadden wij allemaal geen vragen.

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• Code doorgekeken en in de CSS moet ik wat comments gaan toevoegen en kijken of ik met EM of PX ga werken. verder was alles in orde.

Toegankelijkheidstest (week 4)

uitwerken na test in 8e voortgang

Tijdens het testen met de screenreader kwam ik erachter dat als je afbeeldingen in css zet om als achtergrond te gebruiken zoals bij het kopje iPhone 13 en bij Apple TV dat de screenreader dit niet voorleest. Verder las hij alles perfect voor. Ook met de tab knop om door de linkjes heen te gaan ging alles goed.

Verdere bevindingen:

• Het gebruiken van een screenreader is niet altijd even makkelijk
• Alt tekst bij afbeeldingen is belangrijk voor screenreaders.
• Je kan een hamburger menu niet openen met screenreaders.
• Verder was alles makkelijk te gebruiken.

Bevindingen

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

Hamburger menu

Hamburger menu klapt niet open met gebruik van TAB.

Dit kan worden opgelost door van het hamburger menu icoontje ook een link te maken.

Afbeeldingen.

Afbeeldingen die in CSS als achtergrond worden gebruikt worden niet gelezen door een screenreader.

De adbeelding in html plaatsen.

Voortgang 3 (week 4)

uitwerken voor 3e voortgang

De enigste vraag die ik had was of je een andere video mocht gebruiken. mijn medestudenten hadden geen vragen.

Stand van zaken

De site is zo goed als af alleen nog de puntjes op de I en nog even kijken naar de responsiveness.

Eindgesprek (week 5)

uitwerken voor eindgesprek

Stand van zaken

Over het algemeen ging alles goed, ik kom er alleen niet uit hoe ik het hamburger menu weg krijg als ik op een desktop scherm kom.

Screenshot(s)

hier screenshot(s) van je eindresultaat

Bronnenlijst

continu bijhouden terwijl je werkt

Alle afbeeldingen zijn screenshots van de apple website.

1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. https://www.w3schools.com/tags/att_video_autoplay.asp
3. https://developer.mozilla.org/en-US/docs/Web/CSS/position
4. https://flaviocopes.com/rotate-image/