Hallo, dit is mijn dagelijks journal. Hierin deel ik wat ik die dag in de klas of thuis heb geleerd, en wat ik eventueel nog verder wil leren.

Selectors worden gebruikt in CSS om elementen op een webpagina te selecteren en te stijlen. Ze helpen je om specifieke HTML-elementen te stylen op basis van hun naam zoasl:

• Element Selector: Selecteert alle elementen van een bepaald type. Bijvoorbeeld: p selecteert alle paragrafen.
• Class Selector: Selecteert alle elementen met een bepaalde klasse. Bijvoorbeeld: .button selecteert alle elementen met de klasse button.
• ID Selector: Selecteert een enkel element met een specifieke ID. Bijvoorbeeld: #header selecteert het element met de ID header.
• Attribute Selector: Selecteert elementen op basis van hun attributen. Bijvoorbeeld: [type="text"] selecteert alle input-elementen met het type text.

Properties zijn instellingen die je met CSS kunt gebruiken om de stijl van elementen te veranderen. Elke property heeft een waarde die bepaalt hoe de stijl eruitziet:

• Color: Bepaalt de tekstkleur, bijvoorbeeld: color: red;
• Font-size: Bepaalt de grootte van de tekst, bijvoorbeeld: font-size: 16px;
• Background-color: Bepaalt de achtergrondkleur van een element, bijvoorbeeld: background-color: blue;
• Margin: Bepaalt de ruimte rond een element, bijvoorbeeld: margin: 10px;
• Padding: Bepaalt de ruimte binnen de rand van een element, bijvoorbeeld: padding: 5px;

DevTools zijn hulpmiddelen in webbrowsers zoals Chrome, Firefox die je helpen om webpagina's te inspecteren, testen en verbeteren.

• Element Inspector: Hiermee kun je de HTML- en CSS-structuur van een pagina direct bekijken en aanpassen terwijl je de pagina in je browser opent.
• Console: Hiermee kun je JavaScript-code uitvoeren en direct foutmeldingen en logberichten zien.

Wireframes en waarom is het handig?

• Wireframes zijn schetsen die je handmatig kunt maken om de lay-out en structuur van een website te tonen. Ze hoeven niet perfect te zijn. Wireframes helpen je om te plannen waar elementen zoals knoppen, menu's en content op de pagina moeten komen, zonder je zorgen te maken over de grafische stijl.

• JavaScript is een programmeertaal die je kunt gebruiken om je website interactief en dynamisch te maken. Het werkt samen met HTML en CSS om een webpagina niet alleen visueel aantrekkelijk, maar ook functioneel te maken.

• DOM Manipulatie: Dit is het proces waarbij JavaScript de Document Object Model (DOM) gebruikt om toegang te krijgen tot HTML-elementen en deze te wijzigen. De DOM fungeert als een tussenlaag tussen HTML en JavaScript, waardoor je met JavaScript de structuur en inhoud van de webpagina dynamisch kunt aanpassen zonder de pagina opnieuw te hoeven laden.

• Het team is gekozen voor een mini-project waarbij je op een creatieve manier de visitekaartjes van de hele klas op jouw eigen manier moet integreren in de website. Daarnaast moet je informatie over de Amstcampus verzamelen en ook op de website plaatsen.

• We hebben de taken op Miro verdeeld, en ik ben meteen aan de slag gegaan. Ik ben al een beetje bekend met Miro-borden

• Doel: Het zorgt ervoor dat je website er goed uitziet en functioneert op verschillende apparaten, zoals smartphones, tablets en desktops.

Visuele hiërarchie helpt om te bepalen wat belangrijk is in je ontwerp en hoe de informatie wordt gepresenteerd. Het zorgt ervoor dat de gebruiker snel begrijpt welke elementen belangrijk zijn en in welke volgorde ze moeten worden bekeken.

1. Grootte: Grotere elementen trekken meer aandacht.
2. Kleur: Felgekleurde of contrasterende elementen vallen meer op.
3. Typografie: Verschillende lettergroottes en stijlen maken informatie duidelijker.
4. Ruimte: Witruimte helpt om elementen van elkaar te scheiden.
5. Uitlijning: Zorgt voor een georganiseerde uitstraling.

@keyframes:

• Hiermee definieer je een animatie in CSS. Het specificeert de stappen van de animatie en de veranderingen die plaatsvinden op verschillende momenten tijdens de animatie.

• CSS-animatie is mijn favoriete techniek om toe te passen. Ik heb veel animaties geïmplementeerd op de Squad-teampagina. Ik heb een 3D-slider gemaakt die draait met de namen van elke klasgenoot

Pseudo-elementen ::before en ::after:

Pseudo-elementen zijn speciale elementen die je kunt gebruiken om extra inhoud toe te voegen aan een element zonder extra HTML toe te voegen. Ze worden gedefinieerd met dubbele dubbele punten ::, en je kunt ze gebruiken om stijlen toe te passen vóór of na de inhoud van een element.

• ::before: Plaatst inhoud vóór de inhoud van het geselecteerde element.

• ::after: Plaatst inhoud na de inhoud van het geselecteerde element.

• Voorbeelden van Gebruik: In de team Squadpage heb ik met pseudo-elementen de kleur van de container langzaam van geel naar paars laten veranderen.

Vandaag heb ik verder gewerkt aan de squadpage en de puntjes op de i gezet. Ik heb telefonisch afspraken gemaakt met Halima, omdat zij ziek is. Zij gaat de README en issues toevoegen en eventueel nog wat wijzigingen aanbrengen in de code en op het Miro-bord indien nodig. Wat ik heb geleerd, is hoe belangrijk het is om taken duidelijk te verdelen en te communiceren met teamleden. Daarnaast heb ik geleerd hoe ik moet omgaan met situaties waarin teamleden afwezig zijn. Een teamlid is ziek, dus daar kan zij niets aan doen. Een ander teamlid heeft echter niets van zich laten horen, wat de situatie lastiger maakt. In plaats van extra werk te doen, moet ik meer ervaring opdoen zodat ik kan leren hoe ik met zulke situatie kan omgaan.

Vandaag heb ik informatie opgezocht over media queries die ik moet toepassen in het mini-project. Ik heb geleerd wat media queries inhouden, hoe je ze kunt gebruiken en waarom ze belangrijk zijn.

• min-width en max-width: Voor het controleren van de breedte van het viewport.
• min-height en max-height: Voor het controleren van de hoogte van het viewport.
• orientation: Om te controleren of een apparaat in liggende (landscape) of staande (portrait) modus is. /* Media Queries voor responsief ontwerp */

/* Voor schermen kleiner dan 960px / @media (max-width: 960px) { .button { padding: 12px 24px; / Kleinere padding voor kleinere schermen / font-size: 12px; / Kleinere lettergrootte */ }

.intro-section {
    padding: 40px 10px; /* Kleinere padding voor de introductie sectie */
}

.intro-section h1 {
    font-size: 2.2rem; /* Kleinere lettergrootte voor de titel */
}

.intro-section p {
    font-size: 1rem; /* Kleinere lettergrootte voor de paragraaf tekst */
}

.grid-container {
    grid-template-columns: 1fr; /* Eén kolom layout voor kleinere schermen */
    padding: 20px; /* Kleinere padding */
}

.grid-item {
    margin-bottom: 20px; /* Marges onder de grid-items */
}

.grid-item img {
    height: auto; /* Automatische hoogte voor afbeeldingen */
}

.button {
    padding: 12px 24px; /* Kleinere padding voor knoppen */
    font-size: 12px; /* Kleinere lettergrootte */
}

h2 {
    font-size: 4em; /* Kleinere lettergrootte voor h2 */
    letter-spacing: 8px; /* Kleinere letterafstand */
    margin-left: 50px; /* Kleinere marge aan de linkerkant */
    top: -150px; /* Kleinere verticale verplaatsing */
}

}

/* Voor schermen kleiner dan 600px / @media (max-width: 600px) { .button { padding: 10px 20px; / Nog kleinere padding voor zeer kleine schermen / font-size: 10px; / Nog kleinere lettergrootte */ }

.intro-section {
    padding: 20px 10px; /* Nog kleinere padding voor de introductie sectie */
}

.intro-section h1 {
    font-size: 1.8rem; /* Nog kleinere lettergrootte voor de titel */
}

.intro-section p {
    font-size: 0.9rem; /* Nog kleinere lettergrootte voor de paragraaf tekst */
}

.grid-container {
    padding: 10px; /* Nog kleinere padding */
}

.grid-item {
    margin-bottom: 15px; /* Nog kleinere marges onder de grid-items */
}

.grid-item img {
    height: 250px; 
}

.button {
    padding: 10px 20px; /* Nog kleinere padding voor knoppen */
    font-size: 10px; /* Nog kleinere lettergrootte */
}

h2 {
    font-size: 3em; /* Nog kleinere lettergrootte voor h2 */
    letter-spacing: 6px; /* Nog kleinere letterafstand */
    margin-left: 20px; /* Nog kleinere marge aan de linkerkant */
    top: -100px; /* Nog kleinere verticale verplaatsing */
    
}

}

Retrospect Squad Page

Vandaag moest ik een bedrijf kiezen waar ik mijn project voor de aankomende sprint aan wil werken. Het was lastig om een keuze te maken, omdat dit de eerste keer is dat ik zoiets doe. De product owner wil dat we de website aantrekkelijker en responsiever maken voor de gebruikers.

Wat me direct opviel, is dat de huidige website van het bedrijf veel werk nodig heeft. De site ziet er saai uit en de informatie is overal verspreid, waardoor het een rommelige indruk maakt.

Mijn plan is om inspiratie op te doen bij bedrijven die ze zelf hebben aanbevolen, zoals:

[The New Yorker - Fiction and Poetry] (https://www.newyorker.com/fiction-and-poetry) [De Correspondent - Kiosk] (https://kiosk.decorrespondent.nl/) Ik wil ideeën opdoen voor het beste kleurenpalet dat past bij een journalistiek bedrijf en op zoek gaan naar de beste elementen om toe te passen in het project.

Vandaag heb ik een Figma-design gemaakt om te kunnen beoordelen of mijn ontwerp een verbetering is ten opzichte van de huidige website. Hiermee wil ik visualiseren hoe de nieuwe lay-out en elementen eruit zouden kunnen zien en of ze daadwerkelijk bijdragen aan een betere gebruikservaring.

Dit is de eerste keer dat ik eerst een design moet maken voordat ik begin met coderen. In het verleden had ik hier moeite mee; ik begon altijd met coderen en maakte daarna pas het design. Nu begrijp ik echter waarom het belangrijk is om eerst een design te maken: het geeft je veel meer inzicht en maakt het hele proces logischer en gestructureerder. Hierdoor kun je beter plannen en voorkom je dat je tijdens het coderen steeds aanpassingen moet doen.

Ik had vandaag oefeningen over het recht trekken van lijnen, waar ik nog moeite mee heb. Dit is iets waar ik verder aan moet werken. Daarnaast heb ik ook een sitemap gemaakt, wat helpt om een overzicht te krijgen van alle pagina's die de hele website moet hebben. Een sitemap is een visuele weergave van de structuur van een website en kan heel handig zijn bij het plannen en ontwerpen van een website. Het geeft duidelijk weer hoe de verschillende pagina's met elkaar verbonden zijn en helpt om het project overzichtelijk te houden tijdens de ontwikkeling.

Vandaag heb ik feedback ontvangen van Robin over mijn HTML-code en moet ik enkele aanpassingen doorvoeren. Dit was zijn feedback:

Font Awesome is wel handig, maar kan juist problematisch zijn voor gebruikers, vooral voor mensen die een screen reader gebruiken. Font Awesome zet namelijk bepaalde letters om naar icoontjes, zoals een letter A in een specifiek font om een icoon te krijgen. Dit is echter een probleem voor screen readers, omdat ze dan alleen de letter voorlezen, zonder dat duidelijk wordt dat het om een icoon gaat. Daarnaast moet een gebruiker alle iconen van Font Awesome downloaden, ook als er maar een paar icoontjes op de pagina worden gebruikt. Dit kan nadelig zijn voor mensen met langzamere internetverbindingen.

Robin raadde me daarom aan om SVG-iconen te gebruiken in plaats van Font Awesome. SVG's zijn schaalbare vectorafbeeldingen, die je direct kunt integreren in je HTML. Ze bieden meerdere voordelen, zoals betere toegankelijkheid en snellere laadtijden.

Zijn suggestie was om iconen te downloaden als SVG-bestanden via een site zoals SVGRepo, deze in de assets-map van mijn website te plaatsen, en ze dan aan te roepen met een -element in de HTML.

Ik heb nog niet veel ervaring met SVG-elementen, dus dit is iets wat ik de komende periode verder moet onderzoeken om zijn feedback goed te kunnen verwerken.

Maandag/31/9 Vandaag heb ik uitleg gekregen over flow layout, inline en block elementen, en verschillende layoutmodellen in CSS. De focus lag voornamelijk op CSS Grid, een layout-systeem dat ik eigenlijk pas recentelijk probeer toe te passen in mijn opdrachten. Hoewel ik nog niet helemaal bekend ben met Grid, zie ik het potentieel en ben ik bezig om het beter onder de knie te krijgen.

Ik heb opdrachten gekregen die specifiek gericht zijn op het werken met Grid. Deze moet ik nog afronden voordat ik de wijzigingen kan pushen naar de main branch. Daarnaast moet ik ook nog 9 user stories maken om mijn werk verder te structureren en duidelijkheid te creëren in wat er precies moet gebeuren.

Het zal wat tijd en oefening kosten om alles goed toe te passen, maar ik merk al dat het werken met Grid een krachtige manier is om layouts flexibel en responsief te maken.

Dinsdag 1/10

Vandaag heb ik onderzoek gedaan naar Flexbox, wat ik het meeste gebruik in mijn code. Ik merk echter dat ik vaak informatie moet opzoeken over de juiste Flexbox-elementen en hoe ze werken. Daarom heb ik besloten een soort notitieboek bij te houden waarin ik mijn kennis over verschillende elementen kan opschrijven. Dit biedt me een handig overzicht dat ik steeds kan raadplegen wanneer ik weer met Flexbox werk, waardoor het duidelijker en eenvoudiger wordt.

De volgende stap die ik wil gaan documenteren, is CSS Grid, zodat ik dit layout-systeem beter kan begrijpen en toepassen in mijn toekomstige projecten.

Vandaag had ik een workshop over schrijf- en coderingsregels. Ik leerde dat het belangrijk is om code te schrijven in regels van maximaal 10 woorden. Dit helpt om de leesbaarheid en focus te verbeteren. Hoofdletters moeten vermeden worden, en 'justify' mag niet gebruikt worden in de lay-out. Centraal uitlijnen mag alleen voor korte teksten van 1 tot 3 regels. Sanne gaf uitleg over de eenheden 'vh' en de functie 'clamp', die nuttig zijn voor het optimaliseren van lay-outs en het beter structureren van de code. De functie 'clamp' is nog nieuw voor mij, dus ik moet hier meer onderzoek naar doen. Kaan D ging me ook helpen door uit te leggen hoe GitHub Desktop werkt en waarom het beter is om via de desktop te clonen en pushen, in plaats van via de terminal die ik altijd gebruik.

.article-content { max-width: 800px; margin: 0 auto; padding: clamp(0.875rem, 2vw, 1rem); background-color: #ffffff; border: 1px solid #ddd; border-radius: 8px; min-height: 80vh; }

Minimale padding: 0.875rem (14px) – Dit is de kleinste waarde die de padding kan aannemen. Maximale padding: 1rem (16px) – Dit is de grootste waarde die de padding kan aannemen. Dynamische padding: 2vw – De padding varieert afhankelijk van de breedte van het scherm, maar blijft altijd tussen 14px en 16px.

Vandaag liet iedereen zijn eigen versie van de CSS grid layout zien voor dezelfde opdracht. Het was interessant om te zien hoe iedereen met een andere aanpak toch hetzelfde resultaat bereikte. Hoewel ik de basis begin te begrijpen, heb ik het nog niet helemaal onder de knie. Er zijn zoveel opties en structuren dat het soms verwarrend wordt. Ik moet nog meer oefenen om goed te snappen hoe ik elementen precies moet ordenen en positioneren. Maar door deze variaties heb ik wel gezien hoe flexibel CSS grid is en hoe ik het in de toekomst kan gebruiken.

Sprint revieuw met de opdrachtgever

Retrospect sprint 2 terugkijken op de afgelopen 3 weken, wat heb ik allemaal geleerd en wat kan ik de volgende keer beter doen.

Wat ik vandaag heb gedaan en geleerd: Vandaag heb ik me verder verdiept in de WCAG-richtlijnen en geleerd hoe een audit kan helpen om een website toegankelijker te maken. Ik begrijp nu beter hoe we kunnen testen op zaken als contrast, navigatie, en leesbaarheid om ervoor te zorgen dat een website aan de WCAG-standaarden voldoet.

Wat ik nog moet doen voor de presentatie van woensdag:

Een geschikte website vinden om te analyseren voor de WCAG-audit. De layout-house test uitvoeren en controleren op toegankelijkheidscriteria. De checklist gebruiken om systematisch te testen en de resultaten vast te leggen. De opdracht voor de presentatie afronden en de bevindingen en verbeterpunten voorbereiden voor bespreking.

Vandaag heb ik deelgenomen aan de WCAG-auditpresentaties, waarin we onze onderzoeksresultaten over de toegankelijkheid van bestaande websites bespraken. We kregen feedback op indicatoren 1.3.2 en 1.3.3, wat me hielp om dieper inzicht te krijgen in het rapporteren van onze bevindingen.

3 Dingen die ik heb geleerd:

Hoe ik toegankelijkheidsproblemen duidelijk en effectief kan rapporteren. Het belang van nette HTML-structuur voor een betere gebruikerservaring. De impact van specifieke WCAG-indicatoren (zoals 1.3.2 en 1.3.3) op de leesbaarheid en bruikbaarheid van websites. 6 Onderwerpen uit de Workshop en Toepassing op Mijn Opdracht:

Inhoudelijke Structuur – Belangrijk om de HTML-structuur helder te houden; kan ik toepassen door mijn website overzichtelijk te structureren. Formulieren en Labeling – Noodzakelijk voor gebruiksvriendelijkheid; ik zal controleren of labels duidelijk zijn voor screenreaders. Contrast en Leesbaarheid – Een van de WCAG-vereisten; kan ik testen door de kleurcontrasten te controleren. Navigatiegemak – Helpt gebruikers met beperkte mobiliteit; ik ga na of mijn website toegankelijk navigeert met toetsenbordgebruik. Alternatieve Tekst voor Afbeeldingen – Dit zorgt dat visuele content ook voor slechtzienden toegankelijk is; ik check of alle afbeeldingen een beschrijvende alt-tekst hebben. Responsieve Layout – Van belang voor mobiele gebruikers; ik pas dit toe door mijn layout voor verschillende schermformaten te testen.

Vandaag heb ik de workshop We ♥ Web bijgewoond met Dion Pieters, een Creative Developer en docent bij FDND. Dion gaf een presentatie over zijn portfolio en website, dionpieters.dev, en vertelde over zijn proces en benadering als ontwikkelaar. Hij deelde waardevolle inzichten in het combineren van creativiteit en technische vaardigheden voor het bouwen van een sterk portfolio.

Vandaag heb ik deelgenomen aan de workshop Kleur en Contrast, waarin we leerden hoe je sterke kleurcontrasten kunt ontwerpen en meten om websites toegankelijker te maken voor alle gebruikers. Koop legde uit hoe belangrijk kleurcontrasten zijn voor mensen met visuele beperkingen en gaf ons tools en tips om dit in ons eigen werk toe te passen.

Belangrijkste inzichten:

Ontwerpen met Toegankelijkheid in Gedachte: Goede kleurcontrasten maken het voor gebruikers met een visuele beperking makkelijker om tekst en elementen op een pagina te onderscheiden. Kleurcontrast Meten: We leerden hoe we met hulpmiddelen zoals de WCAG-kleurenchecker en contrast-analysetools kunnen controleren of de kleurcombinaties voldoen aan de aanbevolen contrastverhoudingen (minimaal 4.5:1 voor tekst). Effect van Kleurenkeuze op Leesbaarheid en Gebruiksgemak: Door contrastbewust te kiezen, kun je leesbaarheid verbeteren zonder het esthetische aspect van de website te verliezen.

Vandaag hebben we teruggekeken op Sprint 3 en besproken wat goed ging en wat beter kan.

We kregen ook uitleg over het assessment. We hebben besproken hoe we ons portfolio moeten inleveren en wat de vereisten zijn. Nu weten we beter wat we kunnen verwachten en kunnen we goed aan de slag met de laatste aanpassingen.