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:

(Louise Monte)

Je startniveau:

hier je startniveau (Rood)

Je focus:

hier je focus (Responsive)

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.ikea.com/nl/nl/

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

Home pagina

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

hier de naam van de pagina

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2^e werkgroep

Bevindingen

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

Uit mijn fyisieke test kwam naar voren dat ikea voor mij perfect scoort op toegankelijkheid. Namelijk detoegangelijkheid met de tap, de kleurgebruikt van IKEA die handige informatie aan geeft. De screen reader die goed werkt duidelijke fout meldingen. Feedback als je ergens op wilt klikken. Dan komt er een balkje onder. De schaalbaarheid dat groter word voor slecht ziende. Dit is voor mij een uitstekend goeie website die denkt aan de toegankelijkheid van andere. IKEA maakt alleen geen gebruik van darkmode.

Uit de WCAG test kwamen belangrijke bevindingen. Uit de test scoorde IKEA ook goed. Ik kon bij elk element wel "yes" zeggen. Maar IKEA scoort wel slecht op de 'images, media. en animation' daar heb ik veel "no" in moeten vullen. Een paar bevindingen zijn bijvoorbeeld dat IKEA niet werkt met afmetingen als een schermm bijschaaldt. Zij gebruiken voor elk formaat ander soort afbeeldingen. Dus van een plaatje zijn wel 9 varianten. IKEA gbruikt in de code ook geen "alt" (geen beschrijving van de afbeeldingen) Ook maakt IKEA niet echt gebruik van animatie's (dat is over het algemeen niet erg) maar daar scoorde ze laag op. Bij media (video en audio) hebben ze geen audio transcriptions of captions.

Breakdownschets (week 1)

uitwerken na afloop 3^e werkgroep

de hele pagina:

dynamisch deel (bijv menu):

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

In week 2 was ik begonnen met het opbouwen van de CSS-pagina's. Ik was goed op weg, totdat ik tegen een paar obstakels aanliep. Ik had moeite met het maken van mijn footer en ook met het gebruik van Grid. Elke keer als ik dacht dat het lukte, kreeg ik het niet voor elkaar. Met mijn footer ben ik nu nog steeds aan het experimenteren.

Desondanks heb ik in week 2 mijn focus gelegd op het stijlen van de pagina. Ik was bezig met het instellen van de basiselementen, zoals het kiezen van geschikte fonts en kleuren, en het toevoegen van marges en paddings om de lay-out te verfraaien. Voor de positionering van de elementen heb ik gebruik gemaakt van Flexbox en Grid om een responsieve en goed gestructureerde lay-out te creëren. Maar met Grid had ik niet altijd het gewenste resultaat. Zoals ik al eerder aangaf had ik last met het leren van grid. Ik vind dat lastiger dan flexbox

Agenda voor meeting

samen met je groepje opstellen

1. Hoe krijg ik de video en de afbeelding naast elkaar in een grid
2. hoe zorg ik er voor dat deze carousel functie swipt?
3. hoe maar ik zo;n card met kleur aan de onderkant ?
4. hoe kan mijn lettertype groter worden als ik het scherm groter maak

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• Het maken van een afbeelding met daar onder een kleur er tegen aan aan de onderkant.
• Ook hoe je het beste de scroll functie kan gebruiken zodat hij niet terug swipe naar de vorige pargina
• meer te weten gekomen over het gebruiken van grid
• het mee schalen van afbeeldingen en font sizes

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

Deze week, bij de derde stand van zaken, merkte ik dat ik een beetje achterliep en dat ik toch nog wat gas erbij moest gooien. In week 3 heb ik me vooral gefocust op het verbeteren van de website. Ik heb verschillende componenten toegevoegd, zoals knoppen en formuliervelden. Daarnaast ben ik aan de slag gegaan met hover- en focus-effecten. Ook heb ik gewerkt aan de positionering van elementen door gebruik te maken van Flexbox en Grid, waarbij ik mijn kennis verder heb verdiept. Hetzelfde geldt voor de media queries die ik heb toegevoegd aan mijn CSS.

Agenda voor meeting

samen met je groepje opstellen

1. Hoe krijg ik deze text boven op een afbeelding ?
2. hoe krijg ik deze afbeelding naar de rechter kant van mijn scherm

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• Meer informatie te weten gekomen over grid
• meer gebruik gemaakt van @media queries

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9^e werkgroep

Bevindingen

Uit de WCAG - test van IKEA zijn een paar belangrijke bevindingen te vinden.

1. Content Bij het onderdeel content scoorde IKEA goed. Daar was niet iets echt om te verbeteren. In mijn eigen website heb ik ook duidelijke taal en dat buttons, links en labels er anders uit ziet. Maar zoals ik al aangaf is dat IKEA geen foute hier op scoorde. Dus ik heb het design van de IKEA website aangehouden met de links, buttons en forms.

2. Global code Bij het onderdeel Global code scoorde IKEA bij de validate en de lang attribute on the html element niet goed. Over het algemeen zaten er in IKEA website veel errors in de HTML. Dat heb ik weten te verbeteren.

3. Keyboard Bij het onderdeel Keyboard scoorde IKEA ook normaal. Je kon er door heen met de taptoetsen. In mijn eigen website heb ik dit gelaten

4. Mobile and touch Bij het onderdeel Mobile and touch scoorde IKEA ook goed. Hier heb ik geen bijzondere wijzigingen gedaan voor op mijn eigen website.

5. Headings Bij het onderdeal van de heading scoorde de orginele website van IKEA goed. Ze hadden duidelijke koppjes en ook een logische volgorden. Bij mijn IKEA website heb ik het zelfde gedaan.

6. List Bij het onder deel list. is e over het algemeen zelf gebruikt gemaakt voor bijna alles wat te maken heeft met ul. Het zelfde heb ik gedaan voor mijn website.

7. Images Bij het onderdeel images scoorde IKEA over het algemeen heel slecht. Alles was een "no". IKEA maakte geen gebruik van alt attributes, of enige discription voor hun afbeeldingen. Als een blind iemand er dan doorheen bladerd met de tap toesten. Dan werd de image niet omschreven. Bij mijn IKEA website heb ik dat wel toegevoegd. Een bijschrijf met een omschrijving van wat er op de afbeelding staat. Zodat het ook voor zulke gebruikers toegankelijk kan zijn.

8. Media Bij het onderdeel media scoorde IKEA niet goed. Zij maakte gebruik van een video die autoplay deed. En dat er bij de video captions of bij de audio transcripts zijn. Daar maakte IKEA geen gebruik van. In mijn eigen website van IKEA heb ik alleen de video op 'niet autoplay' staan zodat de video zich niet gaat afspelen wanneer de website wordt geopend.

9. Controls Bij het onderdeel controls scoorde IKEA wel redelijk goed. Een paar no's waarvan ik er eentje kon veranderen. Als je bij de IKEA website op een link klitk dan opent de link in de zelfde tab. Daar scroorde IKEA "no" op. In mijn website is dat niet en dan opent er een nieuwe link op een nieuw tablad.

10. Appearance Bij het onderdeel appearance scoorde IKEA slecht. Over het algemeen hebben zij geen light darkmode. Bij mijn website heb ik wel de light dark mode toegevoegd.

11. Animation Bij het onderdeel Animation scooorde IKEA over het algemeen niet goed. Maar dat is niet erg want IKEA maakt niet echt gebruiik van animaties. Ik heb daar mijn deel ook niet aan bij genomen. Ik heb gekzoen voor responsive dus ik heb geen gebruik gemaakt van animaties.

12. Color contras Bij het odner deel Color contrasScoorde IKEA goed, dus over het algemeen waren daar geen aanpassingen voor nodig.

Bevindingen op een rijtje:

• content en structuur: IKEA scoorde goed op content, met duidelijke taal en visuele consistentie voor buttons, links en labels. Dit is overgenomen in mijn eigen ontwerp.
• Toegankelijkheid: Ik heb de toegankelijkheid verbeterd door alt-attributen toe te voegen aan afbeeldingen en autoplay voor video's uit te schakelen.
• HTML-validatie: De IKEA's website bevatte veel fouten in de HTML-code. Deze zijn in mijn code gecorrigeerd.
• Dark mode: IKEA biedt geen light/dark mode, maar ik hebt deze functionaliteit toegevoegd aan mijn website.
• Links en tabs: IKEA opent links in dezelfde tab, mijn website doet dat niet

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

In deze week heb ik de website geschikt gemaakt voor mobiele apparaten. Ik heb media queries toegevoegd, zodat de website goed past op verschillende schermen, zoals op een desktop, tablet of smartphone. Voor de kleinere schermen heb ik een hamburger-menu gemaakt. dat heb ik samen met Ali gedaan. Die heeft mij daar bij geholpen. Ook deze week ben ik weer druk aan de slag geweest met het maken van een grid van de afbeeldingen. En ik had heel veel moeite met het maken van een hamburger menu in het begin van de week.

Agenda voor meeting

samen met je groepje opstellen

1. Het opstellen van een hamburger menu want dat werkt niet elke keer
2. het maken van een pintrest grid

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• de Nieuwe hamburger menu
• object position gebruiken om in mijn grid een bepaald gedeelte van mijn afbeelding te hebben
• en een schaduw toevoegen zodat ik een hover effect heb op mijn icoontjes

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Ik heb geleerd:

1. ik heb geleerd hoe je een header opstelt met menu, grid, @media queries, svg'ts en de marges
2. ik heb geleerd hoe je kan werken met grid en hoe eenvoudiger dat is tegenover flexbox
3. ik heb geleerd hoe dingen kunnen mee schalen als je iets groter maakt
4. ik heb geleerd hoe je een website responsive kan maken
5. ik heb geleerd hoe je roots kan gebruiken
6. hoe handig inspecteren is

Dit was lastig/Is niet gelukt:

Er zijn een paar dingen niet gelukt en dat zijn: 1. de footer dat als hij groter word dat dan de text naast elkaar komt 2. de header waarbij als je op de zoek balk komt dat er een menu tervoorschijn komt 3. en dark mode is niet goed gelukt

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

1. gridgenerator.io
2. Chat GPT
3. Sanne, kim en Ali