I Love Web

My Tribe

Voor deze opdracht moesten we een online visitekaartje maken in je eigen stijl.

Waar heb ik voor gekozen?

Ik heb gekozen om een layout te maken waar in de linkerkant een menu te vinden is met buttons waardoor het gedeelte rechts beperkt is qua hogote en er geen nieuwe pagina's nodig zijn.

Waar liep ik tegen aan?

Aan het begin stonden mijn scss -> css watch instellingen nog niet helemaal goed, dus dit duurde even voordat mijn scss goed gecompiled werdt naar css code. Daarnaast waren sommige stukke content niet selecteerbaar. Dit heb ik opgelost met de volgende code:

.wrapper{
    opacity: 0;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    height: 100%;
    &.active{
        opacity: 1;
        z-index: 99;
        overflow: auto;
    }
}
                            

Met behulp van een hoge z-index op de actieve wrapper valt deze over alle blokken heen, waardoor alleen deze tekst selecteerbaar is.

04-09-2024 Shortened Some Code

Er bestond een functie die na een page load de eerste button en wrapper active class geeft. Later bedacht ik me dat ik simpelweg in de HTML deze handmatig een active class kan geven. Dit is voor nu beter aangezien mijn menu nu niet dynamisch is, maar hard in de code staat. Mocht ik deze code later nog nodig hebben, dan weet ik hem te vinden ;)

.function setActiveTab(){
    //At page load set the first tab
    var $this = $('nav .nav_item').first();
    let num = $this.data('giver');
    $this.toggleClass("active")
    let toshow = $('article .wrapper[data-receiver='+num+']');
    toshow.toggleClass("active")
 }
                            

Talk Webtechnologie 03-09-2024

Wat heb ik voor nieuws tijdens deze presentatie geleerd?

1. Voor mij vorheen nog onbekende CSS-selectors: a[href$=".pdf"] - a elementen die een href hebben die de string ".pdf" bevat. p::first-letter/line - de eerste letter of regel van een p tag wordt getarget. Hiervoor gebruikte ik normaal een span-element

2. LCH kleuren - een nieuw kleurenmodel die kleuren weergeeft die meer overeenkomen met hoe het menselijk oog deze weergeeft.

Daily Checkout 04-09-2024

Schrijf kort op wat je vandaag hebt gedaan

1. Bugs gefixet bij mijn tribe profile card
2. Schets van de tribe profile card uitgebreid met HTML Tags en wat css code.
3. I love webpagina geschetst.
4. I love web pagina geforked.

3 Studievragen

1. Wat is het nut van een breakdown schets? Voor jezelf het denkvermogen verminderen tijdens het programmeren + zodat je een beeld kan krijgen wat je wilt maken
2. Waar moet je op letten als je een breakdown schets maakt? Zoveel mogelijk elementen benoemen + alvast nadenken over css/js
3. Wat is het nut van een comment? Zodat andere mensen je code beter kunnen begrijpen

TO DO:

• Comments refinen op de my-tribe page
• Met rode en groene pen de html + css benoemen op de schets van de i love web page
• I love web pagina begin bouwen
• Tekst maken over de Lessen van week 1 in markdowns: (my tribe page (schetsen en bugs), presentatie basis html/css/js (wat heb ik geleerd), i love web page schetsen)

Daily Checkout 05-09-2024

Schrijf kort op wat je vandaag hebt gedaan en nog gaat doen

Ik ben vanochtend met een uitklapbare sidebar begonnen. Ik moet enkel nog twee icons met links toevoegen.

Schrijf een aantal studievragen op:

1. Wat maakt JavaScript verschillend van HTML en CSS?

Met JavaScript maak je je website dynamisch en kan HTML en CSS veranderen op basis van acties en/of gebeurtenissen.

1. Wat van mijn HTML en CSS kennis kan ik hergebruiken binnen JavaScript?

Je hebt CSS-notaties nodig om elementen aan te spreken in JavaScript en het is handig om te weten hoe een HTML structuur werkt als je functies als document.CreateElement gaat gebruiken.

1. Wat ga ik verder vandaag nog doen met JavaScript?

Vandaag niks meer, het Javascript gedeelte van mijn uitvouwbare social media blok op mijn visitekaart werkt. Er zitten alleen nog wat bugs in de CSS en de HTML.

TO DO:

• Journal omzetten naar HTML-stukken.
• Zorgen dat de content van het uitvouwbare social media blok op de visitekaart bugloos en gevuld is met content.
• Foto's van schetsen maken en deze opslaan in mijn Cloud + mijn I Love Web Repository

Daily Checkout 09-09-2024

Schrijf op wat je vandaag gedaan hebt

Vandaag zijn we begonnen aan de Squadpage-opdracht. Hiervoor hebben we een design geschetst + al onderzoek gedaan welke technieken we willen gebruiken en hoe we ze willen gebruiken.

Drie dingen die ik vandaag geleerd heb:

• :focus-within
• om minder jquery te gebruiken
• Verschill tussen a- en button-tags, wanneer je beide gebruikt

Schrijf 2 dingen die je interessant vind:

• CSS Grid layout
• Verschill tussen a- en button-tags, wanneer je beide gebruikt

Schrijf 1 ding waar je nog vragen over hebt

• CSS Grid layout

Daily Checkout 10-09-2024

Schrijf op wat je vandaag gedaan hebt

Vandaag hebben we de basics geleerd van CSS grids

Drie dingen die ik vandaag geleerd heb:

• verschil tussen grid layouts met alleen afmetingen + areas
• grid-column/row: 1/-1 (-1 is de laatste)
• gebruik align en justify self

Schrijf 2 dingen die je interessant vind:

• grid-column/row: 1/-1 (-1 is de laatste)
• Responsive grid layouts

Schrijf 1 ding waar je nog vragen over hebt

• PRE CODE tags in je html zonder whitespacing

Daily Checkout 11-09-2024

Schrijf kort op wat je vandaag hebt gedaan, en nog gaat doen.

Vandaag hebben we media queries besproken en online onderzocht hoe dit gebruikt wordt

Vandaag ga ik verder nog in mijn i-love-web pagina de volgende wijzigingen doorvoeren

• SCSS slopen en CSS nesten (geleerd van Justus dat dit nu mogelijk is)
• CSS grid gebruiken voor layouts ipv margin: auto

Verder ga ik nog werken aan de my squad page. Hiervoor ga ik het volgende doen

• Grid layout maken voor de campusblokken
• Hier ook een desktop versie voor bouwen

Schrijf drie studievragen op

• Hoe kan ik bij <code> en <pre> tags ervoor zorgen dat ik mijn code niet links in de html hoef te plaatsen maar wel tabjes kan gebruiken?
• is min-width altijd beter dan max-width (mobile-first)

Talk We ❤️ Web [13-09-2024]

Deze vrijdag kregen we een lezing van Vasilis van Gemert (expert in het maken van html-klokken)

Vasilis van Gemert benadrukt in zijn lezing dat hij het leuk vindt om soms nutteloze dingen te maken en hoe tegenwoordig veel websites op elkaar lijken. Volgens hem is het belangrijk dat websites toegankelijk zijn voor iedereen. Daarnaast vindt hij dat je je creativiteit de vrije loop moet laten en leuke animaties kunt toevoegen om een website dynamischer en aantrekkelijker te maken, zonder de toegankelijkheid uit het oog te verliezen. Een van zijn kernpunten is dat het web niet alleen functioneel moet zijn, maar ook plezier en ervaring moet bieden aan de gebruiker.

Daily Checkout 16-09-2024

Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.

Vandaag hebben we de basics geleerd van Figma, hier wat oefeningen mee gemaakt. Ook hebben we uitleg gekregen over visuele hiërarchie en hoe je kan toepassen in je design.

Schrijf 3 dingen die je geleerd hebt:

1. Ik heb vandaag geleerd hoe je visuele hiërarchie bereikt.

Je kan dit bereiken door elementen te laten verschillen in de volgende eigenschappen.

• Grootte

  Een groter element zal meer opvallen. hierdoor wordt er eerder naar gekeken worden of een interactie mee uitgevoerd.

• Kleurcontrast (warm + koud kleuren)

  Je kan spelen met warme en koude kleuren. Als je website veel koude kleuren bevat, kan je één element laten opvallen door deze warme kleuren te geven.

• Witruimte en positie

  Een element wat gecentreerd is en/of wat meer witruimte om zich heen heeft, zal meer opvallen

• Animatie

  Een element wat animeert zal meer opvallen dan non-geanimeerde elementen

2. Wat is belangrijk, wat prioriteer je in je design?

Als je een design maakt, zorg je ervoor dat de belangrijke informatie eerder gelezen wordt. Je kan bovenstaande technieken toepassen om belangrijke elementen te laten opvallen. Als eerste moeten belangrijkste informatie gelezen worden. Daarna de belangrijkste details en als laatste de achtergrondinfo.

3. Hoe werk je met Figma?

We hebben vandaag oefeningen gedaan met Figma. Hierbij leerden we ook belangrijke shortcodes. Dit waren onder andere:

• alt gebruiken om elementen speciaal groter te maken.
• Command + ] / [ gebruiken om het element naar boven of beneden te plaatsen in de z-index tree.
• r toets voor een vierhoek
• o voor een cirkel
• t voor een tekstvlak
• Command + g voor groeperen en Command + Shift + g voor degroeperen

Daily Checkout 18-9-2024

Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.

Vandaag hebben we de squad pages van ons groepje samengevormd tot 1 squad page! Ook hebben we de balans opgemaakt welke issues er nog opgelost moeten worden, en al een groot deel ervan opgepakt.

Schrijf 3 dingen die je geleerd hebt:

1. Hoe je merge conflicten in GitHub kan oplossen en wat ze inhouden

Checkout Sprint planning (maandag 23-09-24)

Wat heb je vandaag gedaan?

Vandaag hebben we een briefing gekregen van onze opdrachtgever. We hebben gehoord waar het bedrijf voor staat en wat hun doelstelling is.

Noem drie dingen die je vandaag hebt geleerd.

• Wat een Briefing/Debriefing is
• Waarom een briefing/debriefing het handig is.
• De basics van SCRUM

Formuleer twee leervragen over wat je deze week wil leren.

• Ik wil meer duidelijkheid over de gang van het project.
• Wat kan ik allemaal met Gradients?

Daily Checkout 25-09-2024

Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.

• Vandaag hebben we geleerd hoe je een idee kan schetsen. Hoe je wireframes, wireflows en Sitemaps maakt.
• Wat het verschil is tussen HiFi en LoFi schetsen.

Schrijf 3 dingen die je geleerd hebt.

1. Hiërarchie van titels in schetsen (squiggly lines - dikke titels - dunne titels).
2. Eerst de tekst van de button schrijven, dan de rechthoek eromheen schetsen.
3. Titels die belangrijk zijn uitschrijven.
4. Focus state is de state die je ziet als je tabbet

Daily Checkout 27-09-2024

Documenteer wat je vandaag gedaan hebt:

We hebben mensen beoordeeld:

Stel jezelf 3 vragen over wat je hebt geleerd over HTML:

• Waarom is strong beter dan een bold class op een span?

  Een span met een bold class is niet semantisch genoeg. Beter is om hiervoor een strong te gebruiken.

• Is een div gebruiken niet goed?

  Een div kan je gebruiken, als het nodig is voor de opmaak van het document.

• Ik heb nu even geen verdere vragen

Werk je projectboard bij:

Verwerk de issues en feedback die je vandaag hebt gekregen:

• Fix de kleintjes meteen
• Plan de grote in voor volgende week.

Ik heb de kleine issues opgelost:

1. Language veranderd naar nl in de head. (zie: issue 2 en issue 3)
2. Ook heb ik de span class="bold" instanties veranderd naar strong elements.

Daily Checkout Flow Layout 30-09-2024

Wat heb je vandaag gedaan?

Vandaag hebben we uitleg gekregen over 7 verschillende soorten layout modes. Dit zijn: Flow Layout, Flex Layout, Grid Layout, Multi Column Layout, Position Layout, Float Layout en een Table layout.

Noem drie dingen die je vandaag hebt geleerd over Layout Modes:

1. Welke elementen standaard inline hebben en welke standaard block.
2. Wat een multi-column layout is.
3. Ik heb vandaag naast deze twee dingen verder niks nieuws geleerd.

Schrijf op welke layout modes je nodig hebt voor de leertaak/opdracht van de opdrachtgever:

Flow, Flex, Grid en Position

Checkout Typografie en leesbaarheid [02-10-2024]

Beschrijf wat je vandaag hebt geleerd.

Lees tekst heeft een minimale lettergrootte van 16px, optimale regellengte van 10-12 woorden en een regelafstand van 1.4 (line height) leesteksten nooit in caps, nooit centreren(1-3 lijnen wel)

Schrijf op welke CSS feature over typografie je gaat onderzoeken (Em, Vi, Clamp? Iets anders?)

Ik vind clamp wel interessant met het gebruik van vw en vh tergelijk

Schrijf op wat je nu gaat doen voor de opdracht.

Ik ga het meest gebruikte textformaat in de root vermelden en dan refereren met rem

Daily Checkout 7-10-2024

Beschrijf de drie code conventies van vandaag in je learning journal

• Geef je HTML ademruimte
• Schrijf je CSS selectors in dezelfde volgorde als de HTML
• Nest je media queries

Schrijf nog twee punten op waarmee je de leesbaarheid van je HTML en CSS kunt verbeteren

1. Gebruik duidelijke class- en id namen
2. Gebruik comments bij moeilijke stukken code

Schrijf op welke code conventie je vanaf nu gaat overnemen in je eigen code

Media queries nesten

Checkout Wrap up [9-10-24]

Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.

Vandaag heb ik puntjes op de i gezet met de code + geleerd wat een Sprint review is en hoe je een goede readme maakt.

Schrijf 3 leervragen over de stof die je vandaag hebt gekregen.

• Welke onderdelen zijn relevant in een readme
• Hoe bereid je een sprint review voor?
• Wat houdt een sprint review in?

Sprint review donderdag 10 Oktober 2024 [Red Pers]

Vanmiddag waren Adjunct Hoofdredacteur Jitze de Vries en Chef Website Rainn Vink bij on op locatie om de voortgang te bespreken, vragen te beantwoorden en aanpassingen te bespreken

Dit was erg leuk en ik zat op de juiste weg.

Checkout WCAG Audit [14-10-2024] (Analysefase)

Schrijf (kort) op wat je vandaag hebt gedaan en geleerd

Vandaag heb ik de analysefase van sprint 3 voor de artikel-detailpagina van Red Pers afgerond. Tijdens deze fase heb ik ook de sprintplanning uitgevoerd, waarbij ik alle belangrijke momenten en opdrachten aan mijn Project Board heb toegevoegd. Daarnaast heb ik taken aangemaakt om de Lighthouse-test en handmatige tests uit te voeren op mijn website van sprint 2.

Ook hebben we geleerd wat de Web Content Accessibility Guidelines (afgekort WCAG) zijn. Hiermee controleer je of je website goed navigeerbaar/bedienbaar is voor mensen die in een speciale categorie passen. Bijvoorbeeld iemand die slecht hoort. Dit kan permanent zijn, bijvoorbeeld iemand die doof geboren is, maar iemand kan ook tijdelijk doof zijn. Denk bijvoorbeeld aan het barpersoneel in de club.

Schrijf op wat je nog moet doen voor de WCAG audit presentatie van woensdag.

Ik ben nog niet begonnen, maar ga er vanmiddag mee aan de slag.

Daily Checkout 16-10-2024

Schrijf op wat je vandaag hebt gedaan

Vandaag heb ik mijn WCAG audit deeltaak gepresenteerd. Daarna heb ik hier feedback op gekregen van mijn mentor in Portflow. Daarna hebben we een workshop gekregen over user experience. Hierin hebben we bij verschillende elementen tips gekregen om betere HTML (en ook met behulp van CSS state selectors betere CSS) te schrijven.

Benoem 3 dingen die je hebt geleerd

• Het target attribuut in CSS
• ::backdrop selector
• De fieldset en legend selectors

Beschrijf alle 6 onderdelen uit de workshop en noteer welke je kan toepassen in je opdracht.

Links

Als je de gebruiker ergens op wil laten klikken EN ergens naartoe wilt sturen, dan gebruik je een <a> en geen <button>. Verder kan je met een anchor link (href="#elementID") de pagina laten scrollen. Op dit moment kan je ook met CSS met behulp van (::target) het element targeten in CSS waarnaar gescrolled is. Verder kan je met het download attribuut de user een link laten downloaden. Dit kan een html pagina zijn, maar ook een afbeelding op een server.

Afbeeldingen

Het is belangrijk om duidelijke alt attributen toe te voegen aan je website, zodat gebruikers met slecht internet nog wel kunnen zien waar de afbeelding over gaat. Als er tekst in de afbeelding staat, probeer dit zo duidelijk in de alt tekst te vermelden.

Labels voor invoervelden

Sommige invoervelden zijn klein en op telefoon moeilijk aanklikbaar, zoals een checkbox of een radio button. Hier is het handig om een label om een invoerveld te plaatsen. Hierdoor kan je ook op de tekst (de label) klikken om het invoerveld te bereiken. Ook is het handig om een focus attribuut toe te voegen aan je invoervelden, zodat het duidelijk is dat een invoerveld geselecteerd is.

Headings

Als je een goede headings-nest structuur gebruikt, kunnen screenreaders er een mooie inhoudsopgave van maken. Ook zorgt dit voor nettere HTML.

Accordeons (FAQ)

Accordeons zijn een veelgebruikte tool bij het maken van websites. Je ziet op bijna elke FAQ-sectie wel een accordeon staan. Hiermee kan je content beperken op je website, maar ook weer niet, omdat je uitklapbare stukken tekst hebt. Ook kan je hiermee ervoor zorgen dat telkens maar een tabje geopend is.

Popups

Popups kan je ook heel makkelijk maken zonder JS te gebruiken:

<button popovertarget="popup">Open iets</button>
<dialog popover id="popup">
    <p>Dit staat in een popup/overlay/popover.</p>
    <p>Leuk he.</p>
    <button popovertarget="popup" popovertargetaction="hide">Sluit dit ding weer</button>
</dialog>
                            

17 Oktober 2024 (Testfase)

Jarig!🎉 Vandaag mag ik 24 kaarsjes uitblazen!

Goed, door naar de orde van de dag, want er moet natuurlijk nog wel wat gedaan worden. Ik heb de Lighthouse-test gedaan op mijn website uit sprint 2. Dit is onderdeel van de testfase

Daarna heb ik nog wat handmatige tests gedaan. Als eerste kwam de keyboard test aan bod. Hiervoor ben ik door middel van tabben door de pagina heen gegaan. Wat mij opviel, is dat de buttons "outline: inherit" bevatten. Ik wist niet dat dit de focus state beinvloedde. Ik heb hiervoor een issue aangemaakt. Wat hier ook mis gaat zijn de buttons in de popups. Deze worden overgeslagen tijdens het tabben. Tijdens het bekijken van de popup tabt de site ook door de a's en buttons die niet in de popup staan. Ook is de tabvolgorde niet correct.

Als tweede ging ik de handmatige test doen met betrekking tot de screen reader. Hier kwam ik erachter dat sommige afbeeldingen niet voorgelezen werden. Dit komt omdat niet alle afbeeldingen een alt-attribuut hebben. Ook werden sommige buttons niet voorgelezen. Dit zijn de buttons zonder tekst, maar met enkel een icoontje. Deze moeten een aria-label krijgen. Ook hiervoor heb ik issues aangemaakt:

Als laatste ging ik een heading en landmarks test doen. Ook hier was ik niet tevreden over. Ik vond dat de taxonomie van de headings niet helemaal klopte met hoe ik het zou indelen. Hier had ik beter over na moeten denken.

Vandaag zag ik ook dat Joost Faber een issue had ingeschoten. Hij zag dat ik dubbele content had in mijn code.

Daily Checkout 18-10-2024

Schrijf op wat je vandaag hebt gedaan

Vandaag hadden we een code/design review van Toegankelijkheid. Ik heb met Ole samen de reviews gedaan van Julia en Luc. Daarnaast heb ik zelf ook een review gekregen.

Neem de uitbreiding van de checklist code review toegankelijkheid over in je Learning Log en leg kort uit hoe je die getest hebt:

• Class namen bevatten een duidelijke beschrijving van de inhoud – Getest of de klasse namen niet te lang zijn, en overeenkomen met de content, of waar het element voor dient.
• Outline by focus op <button> en <a> – Testen door te tabben door de content heen, of deze elementen andere styling krijgen (desnoods standaard styling met de zwarte border).
• <ul>, <ol>, en <menu> moeten een <li> bevatten – Website inspecteren en de DOM doorlopen.
• Aria-label, aria-expand, etc... voor toegankelijkheid screen readers – Website inspecteren en de DOM doorlopen.
• Genoeg contrast in een tekst met achtergrond duo – Bijvoorbeeld geen lichtrode tekst op een rode achtergrond. Lighthouse test gedaan op het gebied van toegankelijkheid en gecontroleerd of dit punt terugkwam bij de fouten.

18 Oktober 2024 - We ❤️ Web [Dion Pieters]

Tijdens het We ❤️ Web event gaf Dion Pieters, Creative Developer en docent bij FDND, tips over zijn ervaringen bij het maken van een portfolio
Zijn sessie vond plaats van 13:00 - 14:00 in MLH01A30, waar hij onderwerpen besprak zoals de tijdsinvestering, de doelgroep, en wat je wilt tonen.

Dion benadrukte dat je als developer geen designer hoeft te zijn en verwees naar het Sydney Opera House als voorbeeld van groots werk zonder specifieke ervaring.
Hij gaf aan erg kritisch te zijn op zijn eigen werk, waarbij hij zijn portfolio zelfs de “slechtste website” die hij ooit heeft gemaakt noemde. Hij sprak ook over een project voor Adam Underwear dat hem tegenviel.

Samen met Sean Hofman voegde hij iets speels toe aan zijn design, zoals een grote smiley. Dion maakt graag gebruik van WebGL om animaties toe te voegen, zodat zijn site niet statisch aanvoelt.

"Je eigen portfolio is misschien wel het slechtste product dat je ooit zult maken."

In deze presentatie zag ik dat hij gebruik maakte van transitions met een overshoot (conic-bezier). Ik zal hiermee gaan experimenteren, want dit is wel erg gaaf.

19 Oktober 2024

Vandaag heb ik de designfase achter de rug van deze sprint. Ik heb naar aanleiding van mijn Lighthouse test de contrasten op bepaalde plekken (donkerrode kleur en de tekst/svg fill kleur op de lichtgrijze achtergrond) verhoogd om te voldoen aan de WCAG AA standaarden.

Deze kleuren zal ik later vandaag in een "@media (prefers-contrast: more)" query plaatsen, zodat ik in de inspector de kleuren kan omwisselen om het verschil te laten zien.

Hier moet ik nog meer onderzoek naar doen.

19 Oktober 2024 - @media prefers-contrast

Vandaag heb ik mij verdiept in het toepassen van media queries op het gebied van toegankelijkheid. Aangezien ik nog niet definitief de kleurwijziging wil doorvoeren op de website, maar het toch wil presenteren tijdens de Sprint Review, heb ik deze kleurwijzigingen in een speciale media query gezet.

21 Oktober - A11y test

Uit de a11y test zijn de volgende punten niet door de test heen gekomen.

GLOBAL CODE

• Validate your HTML.
• Avoid using the autofocus attribute.

KEYBOARD

• Ensure there is a visible focus style for interactive elements that are navigated to via keyboard input.
• Check that keyboard focus order matches the visual layout.
• Ensure all interactive elements can be accessed and operated using a keyboard alone.

IMAGES

• Ensure that all <img> elements have an alt attribute.
• Make sure decorative images use a null (empty) alt attribute value.
• Verify that important images have meaningful alt text.

CONTROLS

• Ensure that controls have visible :focus states.
• Provide a skip link and ensure it is visible when focused.
• Identify links that open in a new tab or window.

APPEARANCE

• Check your content in specialized browsing modes (e.g., high contrast, screen readers).
• Ensure that fonts and text sizes are readable on all screen sizes.

COLOR CONTRAST

• Check the contrast for all icons and UI elements.
• Ensure that text and background contrast meet accessibility guidelines (e.g., WCAG 2.1 AA standards).
• Test for color blindness to ensure key information isn't conveyed by color alone.

In deze resultaten stonden, behalve HTML validatie (deze heb ik 23-10-2024 opgelost) geen nieuwe punten die niet tijdens de handmatige en lighthouse test aan bod komen.

22 Oktober 2024

Vandaag heb ik de bouwfase achter de rug. Ik heb vandaag alle issues opgelost.

Ik heb alle issues die naar boven zijn gekomen gedurende de analysefase + de punten uit de integratie fase (feedback Red Pers) aangepakt en opgelost.

Daily checkout 23 Oktober 2024

Schrijf 3 dingen op die je vandaag hebt gedaan

1. Ik heb een Readme gemaakt.
2. We hebben met ons groepje van Red Pers elkaars werk bekeken.
3. Ik heb nog wat kleine bugs gefixed in mijn JS voor de all-human site.
4. Laptop gebruikt zonder muis of trackpad, en keyboard shortcuts opgezocht en geoefend.

Beschrijf 2 verbeteringen die je in je readme hebt gemaakt:

1. Minder code laten zien.
2. De nadruk gelegd op de belangrijkere elementen.

Schrijf 1 ding die je anders gaat doen de komende sprint.

1. Niet te moeilijk over dingen nadenken : )

23 Oktober 2024

Vandaag heb ik de testfase achter de rug.

Op school heb ik voorbereid voor de sprint review van morgen d.m.v. een readme te maken en de laatste puntejs op de i te zetten op het gebied van bugs. Ook heb ik voor de laatste keer mijn gode gevalideerd en daar ook de laatste problemen verholpen.

Sprint review donderdag 24 Oktober 2024 [Red Pers]

Ik heb nu de integratiefase ook achter de rug.

Vanmiddag waren Adjunct Hoofdredacteur Jitze de Vries en Chef Website Rainn Vink bij ons op locatie om de voortgang te bespreken, vragen te beantwoorden en aanpassingen te bespreken.

Dit was erg leuk en ik zat op de juiste weg.

Checkout Styleguide (11-11-2024)

Documenteer wat je vandaag hebt gedaan en voeg links toe naar voorbeelden en bronnen.

Allereerst hebben we tijdens de sprint planning de nieuwe taken in het projectboard gemaakt en gekeken wat ons te wachten staat. Hierin hebben we een sitemap en wireframes gemaakt van de pagina's die we gaan ontwerpen en ontwikkelen.

Daarna hebben we tijdens de workshop Styleguide verschillende dingen gedaan. Als eerste hebben we gekeken welke uitingen een huisstijl bevatten. Als voorbeeld hebben we Transavia gehad. Deze huisstijl is gemaakt door Studio Dumbar. (Transavia huisstijl door Studio Dumbar) Daarna hebben we gekeken hoe een styleguide eruit ziet van de Decathlon.

Hierna zijn we aan de slag gegaan met de Interface inventory. Hierin hebben we alle instanties van verschillende elementen van de oude site en de site uit sprint 2/3 genoteerd. Daarna zijn we begonnen aan het samenstellen van de Styleguide.

Schrijf drie dingen op die je geleerd hebt.

1. Dat een huisstijl niet alleen de website betreft.
2. Dat het heel verwarrend is als websites veel verschillende styles gebruiken voor dezelfde soorten elementen
3. Hoe een style guide eruit ziet.

Bedenk ook:

Hoe ga je met je team deze teamopdracht aanpakken?

Allereerste gaan we de volgende drie taken afronden:

1. Interface inventory
2. Styleguide samenstellen
3. Gedeelde Stylesheet maken

Hierna gaan we elk een design maken van de Home en Contact pagina, en deze ontwikkelen op basis van de gemaakte styleguide.

Waar ga je afspraken bijhouden? (Teamcanvas?)

Wij zullen in iedere geval in onze Discord server afspraken noteren. Deze zal gebaseerd zijn op onze team canvas uit sprint 1.

12 November 2024

Op 12 november 2024 volgde ik een inspirerende workshop van Wes Oudshoorn, getiteld Playful Figma. Wes is een ervaren designer en ontwikkelaar, 36 jaar oud, die zijn eerste website al in 2002 maakte. In 2012 richtte hij AppSignal op, een tool die ontwikkelaars helpt om versies van hun code te monitoren en bij te houden waar de prestaties achteruitgaan of waar fouten optreden. AppSignal biedt waardevolle inzichten om efficiënter te ontwikkelen en codeproblemen snel te identificeren.

Figma Tips & Tricks

Wes gaf ons tijdens de workshop verschillende praktische tips en shortcuts in Figma om sneller en effectiever te werken:

• Command + Klik: Hiermee kun je direct het diepste niveau van een element selecteren, zonder eerst door alle lagen te klikken.
• I: Sneltoets voor de kleurpicker, handig om kleuren rechtstreeks uit andere elementen te kopiëren.
• Enter: Een manier om naar een dieper niveau in de lagenstructuur te gaan.
• Shift + X: Wisselt snel de stroke en fill van een element om, wat tijd bespaart bij aanpassingen aan vormen of illustraties.

Werken met Blur Effecten

Ook behandelde Wes de mogelijkheden om blur-effecten toe te voegen in Figma. Om een blur toe te voegen, ga je naar Effect -> Layer Blur. Dit effect kan subtiele diepte en zachtheid toevoegen aan ontwerpen, waardoor een meer gelaagde uitstraling ontstaat.

Oefening: Variaties Maken

Tijdens de workshop kregen we de kans om zelf aan de slag te gaan. We werkten met een voorbeeldontwerp en maakten drie verschillende variaties. Het was een leuke en uitdagende oefening om creatief te zijn en te experimenteren met de tools en technieken die Wes had uitgelegd. Door meerdere versies te maken, leerden we hoe kleine aanpassingen een ontwerp aanzienlijk kunnen veranderen en hoe variaties kunnen helpen om nieuwe ideeën en perspectieven te ontdekken.

De workshop was niet alleen leerzaam maar ook een goede kans om mijn workflow in Figma te verbeteren en efficiënter met de tool om te gaan. Ik kijk ernaar uit om deze technieken vaker toe te passen in mijn eigen ontwerpen!

Daily checkout 13 november 2024

Documenteer wat je vandaag hebt gedaan. Voeg links toe naar voorbeelden en bronnen.

Eerst hebben we met een groepje van dezelfde opdrachtgever onderzoek gedaan op 3 verschillende websites hoe CSS is toegepast voor een h2 en een button element. De sites die we moesten onderzoeken waren:

• https://css-tricks.com/
• https://www.smashingmagazine.com/
• https://fdnd.nl/

Aangezien wij nog niet de stylesheet af hadden en er bij ons wat onduidelijkheid was over de opdracht hadden we het vooral over de stylesheet-opdracht gehad. Het is ons wel gelukt om https://css-tricks.com/ te analyseren.

Vandaag hebben we ook uitleg gekregen over custom properties. Met custom properties zorg je ervoor dat je jezelf niet herhaalt (DRY, Don't Repeat Yourself).

Schrijf drie dingen op die je geleerd hebt

1. Zet je variables in de body, niet in root
2. Zet je variable soms binnen een element. Door een andere scope te gebruiken, kan je voor bepaalde elementen en de child elementen ervan, variabelen maken en/of aanpassen. Verdere inspiratie: https://blog.logrocket.com/css-variables-scoping/
   
   BIJV:
   

   
   .button-one {
       --color: salmon;
       color: var(--color);
   }
                                   

3. Je kan variabelen ook inline gebruiken (voor nu nog niet relevant, maar dit kan handig zijn als je met data gaat werken).
   
   BIJV:
   

                                       
   <button style="--color: red"/>
                                       
                                   

Bedenk Ook:

Hoe ga je nieuwe CSS code in de gemeenschappelijke en in je eigen code verwerken?

We hebben vandaag met ons groepje een begin gemaakt aan de stylesheet. Deze maak ik morgen af. Ik ga de nieuwe variabelen op de pagina die ik al heb gemaakt verwerken. Hiernaast zal ik mijn eigen stylesheet maken waarin ik:

1. Deze variabelen gebruik waar nodig
2. voor de elementen mijn eigen styling toevoegen en in de <HEAD> deze onder de gezamelijke stylesheet inladen.

Waar ga je afspraken over jullie CSS strategie met je teamgenoten documenteren?

We gaan in ons eigen Team Board afspraken en andere zaken vermelden. Daarnaast gaan we ook een Miro Board maken waar we later op kunnen reflecteren.

Opdracht betreft Cascade en Specificity [13-11-2024]

Na de Workshop "stylesheets for styleguides" zijn we zelf aan de slag gegaan met verschillende experimenten betreft Cascade en Specificity.

De uitwerking van de opdracht is hier te zien:

Experiment 1: Element Selector

Ik heb een <h2> element gemaakt met een class uit de gezamenlijke stylesheet en nog een <h2> element zonder class:

<h2 class="heading-medium">Ik ben een heading, welke kleur krijg ik?</h2>
<h2>Ik ben ook een heading, welke kleur krijg ik?</h2>
                            

In specificity.css heb ik een element selector gemaakt met een andere kleur dan in de huisstijl:

h2 {
    color: purple;
}
                            

Vragen

Wordt de heading nu paars? Of wordt de huisstijl uitgevoerd?

De heading wordt inderdaad Paars.

Waarom gebeurt dit?

Dit gebeurt omdat het specificity css-bestand later ingeladen wordt als de file met de huisstijl.

Experiment 2: Class Selector

Ik heb een extra <h2> element toegevoegd met twee classes:

<h2 class="heading-medium green">Ik ben een heading met twee classes</h2>
                            

Vervolgens heb ik de green class in specificity.css toegevoegd met een nieuwe kleur:

.green {
    color: green;
}
                            

Vragen

Welke kleur krijgt de heading met twee classes? De kleur van de huisstijl of de green class?

Deze wordt zwart. Deze kleur is afkomstig uit de huisstijl.

Waarom krijgt de heading die kleur?

Omdat in redpers.css deze code staat:

.h2.heading_quote {
    /*Quote */
    color: var(--black);
    font-family: var(--font-heading-important);
    font-weight: bold;
    line-height: var(--line-height-xs);
    font-size: var(--font-size-header-xl);
}
                            

Deze selector heeft een weight van 0 0 1 1. Het target de class en het element. De waarde hiervan is 11.
De selector in specificity.css bevat de volgende code:

.green {
    color: green;
}
                            

Deze selector heeft een weight van 0 0 1 0. Het target enkel de class. De waarde hiervan is 10.

Aangezien 10 > 11 wint de selector in de huisstijl.

Experiment 3: Class Volgorde

In specificity.css heb ik een class gemaakt met dezelfde naam als in de gezamenlijke stylesheet, maar met een andere kleur:

.heading-medium {
    color: pink;
}
                            

Vragen

Welke kleur hebben de headings nu?

Zwart

Waarom hebben de headings deze kleur?

Om de zelfde reden als in Experiment 2. In de huisstijl wordt ook het element gebruikt in de selector.

Experiment 4: ID Selector

Ik heb nog een <h2> element toegevoegd met de heading-medium class uit de gezamenlijke stijlesheet en een ID:

<h2 class="heading-medium test" id="heading">Ik ben een heading met een ID</h2>
                            

In specificity.css heb ik een ID selector gemaakt met een andere kleur:

#heading {
    color: yellow;
}
                            

Vragen

Welke kleur krijgt de heading?

Deze laatste heading wordt geel.

Waarom wint de kleur van de ID-selector of de class?

Omdat een ID selector zwaarder weegt dan een class selector.

Daily Check Out 15 November 2024

Schrijf kort op wat je vandaag hebt gedaan.

Vandaag hebben we een code-review gedaan op de gezamenlijke styleguide en de Readme van twee groepen.

Hiervoor moesten we controleren met het volgende stappenplan:

-- README --

1. Check de Readme of deze genoeg informatie bevat om te begrijpen hoe de stylesheet werkt en hoe deze te implementeren is.

-- CSS --

1. Check daarna of de stylesheet een logische indeling heeft. Hiermee wordt bedoeld of de secties goed zijn ingedeeld zodat ze makkelijk terug te vinden zijn.
2. Check daarna of de stylesheet consistente naamgeving bevat (variabelen en classes).
3. Check daarna of in de stylesheet de naamgeving van variabelen en classes goed te volgen is.
4. Check daarna of de stylesheet genoeg states bevat (hover, active, focus) en controleer de formulieren (inputvelden, foutmeldingen).
5. Check daarna of de stylesheet op de juiste plaats/manier custom properties toepast (niet op de :root).
6. Check daarna of de stylesheet geen herhaling van code bevat.

Wij hebben Mediahuis beoordeeld:

• https://github.com/vsheo/look-and-feel-styleguide/issues/8
• https://github.com/vsheo/look-and-feel-styleguide/issues/5

Daarna hebben wij DDA beoordeeld:

• https://github.com/RenzoWille/look-and-feel-styleguide/issues/8
• https://github.com/RenzoWille/look-and-feel-styleguide/issues/9

Welke code heb jij gezien die je ook wil meenemen in je werk?

Ik vond bij Mediahuis het wel leuk gedaan dat ze goed gebruik maakten van scope.
Zie hier de code:

Design Day - 16 november 2024

Vandaag heb ik de hoofdpagina ontworpen. Voorbereidingen hiervoor vonden al plaats tijdens de Sprint Planning (Analysefase). Ik heb een aantal zaken aangepast ten opzichte van de oude hoofdpagina.

Dingen aangepast t.o.v. oude Homepagina (Desktop)

• Groene shape toegevoegd (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
• Rubriek kopjes rood in plaats van zwart
• Geen rand tussen titel van artikel en metatekst (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
• Donatiebox toegevoegd (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
• Datum in blokje geplaatst Net zoals bij het uitgelichte artikel op de oude homepagina, vond ik het mooi om dit overal, bij elk artikel dus, te doen.
• Auteursnamen met '&'-teken: Bij twee auteurs heb ik ervoor gekozen om een "&" te gebruiken in plaats van "en". Dit bespaart één karakter, waardoor langere namen makkelijker passen.

Werkwijze

• Wireframe gemaakt op het whiteboard met het team tijdens de sprintplanning. (analysefase)
• Een volledige screenshot gemaakt van de homepagina met GoFullPage.
• Het Figma-bestand geopend van de door de klant aangeleverde artikelpagina.
• De nieuwe homepagina naast deze artikelpagina en een foto van de wireframe gehouden om te vergelijken.

Experimenten voor de Homepagina (desktop)

• @media-prefers-contrast kleuren: Ik heb een versie van de homepagina gemaakt die rekening houdt met contrastvoorkeuren van gebruikers.
• Eerste artikel in groene stijl en verplaatste vorm: Een versie gemaakt waarbij het eerste artikel een groene stijl heeft en de groene vorm iets verplaatst is.

Experimenten voor de Homepagina (mobiel)

• @media-prefers-contrast kleuren: Ik heb een versie van de homepagina gemaakt die rekening houdt met contrastvoorkeuren van gebruikers.
• Primaire kleur gegeven aan de ronde vorm bovenaan: Een versie gemaakt waarbij de vorm bovenaan in de pagina de primaire kleur bevat in plaats van zwart.

Wat heb ik geleerd?

• Alt + H: Hiermee kun je een item horizontaal centreren binnen het parent-element. Dit heb ik gebruikt om de zwarte blokjes rechtsonderin de artikelen uit te lijnen, waarin datums staan.

Hieronder is het Figma-ontwerp te bekijken:

Slide 1: Homepagina Desktop
Slide 2: Homepagina Desktop (WCAG AAA Kleurencontrasten)
Slide 3: Homepagina Desktop Versie B
Slide 4: Homepagina Desktop Versie B (WCAG AAA Kleurencontrasten)
Slide 5: Homepagina Mobiel
Slide 6: Homepagina Mobiel (WCAG AAA Kleurencontrasten)
Slide 7: Homepagina Mobiel Versie B
Slide 8: Homepagina Mobiel Versie B (WCAG AAA Kleurencontrasten)

Design Day - 17 november 2024

Vandaag heb ik de contactpagina ontworpen. Voorbereidingen hiervoor vonden al plaats tijdens de Sprint Planning (Analysefase). De contactpagina op hun oude website bevatte geen contactformulier. Er is dus een hoop aangepast ten opzichte van de oude contactpagina.

Dingen aangepast t.o.v. oude Contactpagina (Desktop)

• Groene shape toegevoegd (Net zoals op de artikel detailpagina's uit Sprint 2 en 3)
• Contactformulier toegevoegd (Naam, e-mail, onderwerp, bericht)

Werkwijze

• Wireframe gemaakt op het whiteboard met het team tijdens de sprintplanning (analysefase).
• Bij deze pagina heb ik GEEN screenshot gemaakt met GoFullPage. De wireframe verschilde zodanig met de oude contactpagina dat dit niet veel nut had.
• Het Figma-bestand geopend van de door de klant aangeleverde artikelpagina.
• De nieuwe contactpagina naast deze artikelpagina en een foto van de wireframe gehouden om te vergelijken.

Experimenten voor de contactpagina (desktop & mobiel)

• @media-prefers-contrast kleuren: Ik heb een versie van de contactpagina gemaakt die rekening houdt met contrastvoorkeuren van gebruikers.
• Foutmeldingen: Een versie gemaakt waarbij te zien is hoe het wordt getoond als er een foutmelding optreedt bij het invullen van het formulier.

Hieronder is het Figma-ontwerp te bekijken:

Slide 1: Contactpagina Desktop
Slide 2: Contactpagina Desktop (WCAG AAA Kleurencontrasten)
Slide 3: Contactpagina Desktop Foutmelding
Slide 4: Contactpagina Desktop Foutmelding (WCAG AAA Kleurencontrasten)
Slide 5: Contactpagina Mobiel
Slide 6: Contactpagina Mobiel (WCAG AAA Kleurencontrasten)
Slide 7: Contactpagina Mobiel Foutmelding
Slide 8: Contactpagina Mobiel Foutmelding (WCAG AAA Kleurencontrasten)

19 November 2024 - Begin bouwfase (Hoofdpagina)

Vandaag heb ik een aantal issues van Joost opgelost. Deze hadden betrekking tot de stylesheet. Hierna ben ik aan de slag gegaan met de ontwikkeling van de hoofdpagina. Ik heb allereerst van mijn header en footer mijn rem-waardes en kleur-variabelnamen geüpdatet. Daarna heb ik voor mobiel en desktop het intro-gedeelte van de hoofdpagina weten af te ronden.

Ik kwam er achter dat ik in het design sommige afmetingen 15px heb gemaakt. Nu mijn 1rem gelijk staat aan 16px heb ik besloten om deze waardes van 15px naar 16px te maken.

Daily Checkout 20 November 2024

Beschrijf 3 dingen die je hebt geleerd over HTML en link naar goede bronnen

1. Bij een input type="color" moet de value altijd een 6-cijferige hexcode zijn. Dus #333333 in plaats van #333 (ook al betekent het hetzelfde). MDN - Input Color Mijn eigen experiment
2. Ik heb geleerd dat er een input type="week" bestaat. MDN - Input Week
3. Ik heb geleerd dat er een input type="image" bestaat. Dit vind ik wel heel nuttig aangezien ik vaak icons gebruik in mijn submitbuttons. MDN - Input Image

Beschrijf 3 dingen die je hebt geleerd over CSS en link naar goede bronnen

1. Ik heb goed gebruik gemaakt van @property in CSS om mijn Sprint separator animatie op mijn "I Love Web" pagina zonder JS te maken. I Love Web - Sprint Separator
2. Je kan met CSS stylen op required. MDN - Required Attribute
3. Je kan met CSS stylen op invalid en valid fields. MDN - Invalid & Valid Fields

21 november (Bouwfase dag 2)

Vandaag ben ik verder gegaan aan de bouwfase. Ik heb de mobiele versie van de hoofdpagina vanaf 390px compleet. Daarnaast is de desktopversie ook bijna af.

Wat heb ik gedaan om de codeconventie na te leven

Ik had nog een inconsistentie gevonden met de codeconventies. De structuur is nu: elementtype_functie. De popups heetten eerst bijvoorbeeld (sprint 2 en 3): search_popup.

Met de huidige codeconventie is dit niet meer correct. Nu heten deze bijvoorbeeld: popup_search. Hier is te zien dat ik het heb aangepast:

Code Review 22‐11‐2024

Vandaag (22-11-2024) hebben we met 4 klasgenoten elkaars werk ge-reviewd.

Ik heb samen met Seif, Fatima en Matthijs ge-reviewd.

De issues die we hebben geplaatst bij Fatima (QATAR MUSEUMS):

De issues die we hebben geplaatst bij Matthijs (DROP AND HEAL):

Ik heb ook issues ontvangen:

Deze issues zal ik behandelen.

23 November 2024

De homepage is afgerond. Naast de voltooiing van de basisfunctionaliteit en het design zijn er nog enkele verbeteringen doorgevoerd:

Verbeteringen:

- Aria-labels toegevoegd aan de donatieknoppen voor betere toegankelijkheid.

- Aria-hidden toegevoegd aan decoratieve icoontjes en shapes om te voorkomen dat deze door screenreaders worden voorgelezen.

Contactpagina

Op de contactpagina is een kleine wijziging aangebracht ten opzichte van het oorspronkelijke design:

- De gap tussen de invoervelden is op mobiele apparaten aangepast naar 40px voor een compactere weergave. Op desktops blijft de gap ingesteld op 60px.

Opgeloste issues uit de code design review

Tijdens de code design review zijn de volgende issues opgelost:

Met deze verbeteringen is zowel de functionaliteit als de toegankelijkheid van de website naar een hoger niveau gebracht.

24 November 2024

Max Verstappen is viervoudig kampioen!! 🦁🧡

### Tot de orde van de dag dan maar

Vandaag heb ik de form en bijbehorende inputs toegevoegd aan de styleguide.

Daily Checkout 25 November

Beschrijf in eigen woorden de 3 Gestalt wetten die je vandaag met je team hebt onderzocht

Vandaag hebben we in groepjes van 3 personen onderzoek gedaan naar de Gestalt wetten. Ik heb dit vandaag gedaan met Tom en Matthijs. Hieronder benoem ik in mijn eigen woorden wat deze wetten inhouden:

Met Gestalt Psychologie kan je elementen groeperen in je website, zonder expliciet kaders te tekenen. Het menselijke brein is goed in staat om elementen logisch te groeperen.

Wij hebben de volgende manieren onderzocht:

1. Law of Similarity: Als elementen gelijk zijn in vorm, kleur, en/of grootte, worden ze door mensen als een groep gezien. Denk aan kleurgebruik bij categorieën.
2. Law of Proximity: Elementen die dicht bij elkaar staan worden als groep gezien, terwijl witruimte een scheiding aangeeft. Bijvoorbeeld: bij de Hero van Duinrell staan vier belangrijke attracties dicht bij elkaar, omgeven door witruimte.
3. Law of Common Region: Groepering door lijnen of kaders. Bijvoorbeeld een formulier met invoervelden binnen een kader of een menubalk in een header met een border of achtergrondkleur.

Presentatie

Ik heb een presentatie gemaakt over de Law of Similarity. Deze is hier te bekijken:

In deze presentatie is de opdracht om snel het juiste vlak te selecteren waarin staat: "Klik hier wel".

Noem 2 dingen die je nog wil leren

1. De andere Gestalt principes
2. Welk principe het best werkt voor welke situatie

Geef 1 iemand een compliment

Ik heb Tom Deeterink een compliment gegeven omdat hij mij goed het verschil heeft uitgelegd tussen de Law of Proximity en de Law of Common Region.

Afbeelding

Hier moet nog een afbeelding toegevoegd worden:

26 November [Variaties op de Gestalt Wetten]

Hier zijn mijn ontwerpen te zien:

• Slide 1: Originele hoofdpagina gemaakt vorig weekend
• Slide 2: Hoofdpagina met toepassing van Similarity Gestalt-wet
• Slide 3: Hoofdpagina met toepassing van Proximity Gestalt-wet
• Slide 4: Hoofdpagina met toepassing van Common Region Gestalt-wet

Red Pers Variatie: Similarity

Wat heb ik gedaan?

Ik heb gekozen om de kleur aan te passen in de auteur en de border. De auteur omdat de auteur centraal staat bij red pers Ook de navigatie krijgt per categorie een dingetje met die kleur (bolletje of streepje).

Waarom?

Door de kleur krijgen rubrieken een "categoriekleur". Bezoekers kunnen deze kleur associëren met een rubriek, wat het makkelijker maakt om deze categorieën bij een volgend bezoek te herkennen.

Red Pers Variatie: Proximity

Ik heb de rubriueken meer witruimte ten opzichte vna elkaar gegeven. Ik heb de intro sectie wel dichtbij de eerste afbeelding gehouden, aangezien dit erbij hoort.

Waarom?

Door deze ruimte is het makkelijker te zien als een sectie eindigt, en een nieuwe begint. Het is nu duidelijker te zien dat de seperator die boven de artikels staat, erbij hoort.

Red Pers Variatie: Common Region

Wordt al goed toegepast op de website bij het formulier op de contactpagina en de donatiesectie op de hoofdpagina. Maar aangezien ik niet lui ben heb ik nog nagedacht over een versie die hier beter op scoort.

Wat heb ik gedaan?

Ik heb bij de rubriekkoppen (.seperator_rubriek) een extra verticaal lijntje toegevoegd.

Waarom?

Door deze lijn is het makkelijker te zien dat de seperator die boven de artikels staat, bij de artikels eronder hoort.

Advies van Krijn

Ik heb de tekst "meer (rubrieknaam)" in de separators bold gemaakt. Hierdoor is het duidelijker dat deze klikbaar is.

Daily Checkout 26-11: CSS Challenge States

Vandaag hebben we uitleg gekregen over wat je met CSS kunt doen voor inputs en states. Hier zijn mijn notities en een samenvatting van wat ik heb geleerd:

Buttons

• Standaard browserstijlen verwijderen:

  appearance: none;

• Verschillende states:
  • :focus: Wordt geactiveerd bij klikken of navigeren via toetsenbord.
  • :focus-visible: Wordt alleen geactiveerd bij toetsenbordnavigatie.
• Gebruik van currentcolor:

  
  outline: 0.15em currentcolor;
  outline-offset: -0.3em;
                                  

Links

• Styling van onderlijnen:
  • text-decoration-thickness: Regelt de dikte van onderstrepen.
  • text-underline-offset: Verplaatst de onderstreping verder naar beneden.
  • text-decoration-style: wavy: Geeft een golvende lijn als onderstreping.
• Specifieke links targeten:

  
  a[href$="pdf"]::after {
      content: " 📄";
  }
  a[href^="mailto"] {
      /* Specifieke styling voor mailto-links */
  }
                                  

Thema-opties

• color-scheme voor licht en donker thema:

  color-scheme: light dark;

• Gebruik variabelen voor kleuren:

  --kleur: light-dark(#000, #fff);

Checkbox als switch

input[type="checkbox"] {
    appearance: none;
    aspect-ratio: 2 / 1;
    background-color: white;
    border-radius: 0.75em;
}
                                
input[type="checkbox"]::after {
    content: "";
    height: 100%;
    display: block;
    background-color: gray;
    border-radius: inherit;
}
                                
input[type="checkbox"]:checked::after {
    opacity: 0.5;
    transform: translateX(100%);
    background-color: blue;
}
                            

Media query voor motion voorkeuren

@media (prefers-reduced-motion: no-preference) {
    transition: 1s;
}
                            

:has() Pseudo-class

• Styling met afhankelijkheden:

  
  label:has(input:checked) {
      background-color: blue;
      color: white;
  }
                                  

• Focus-gebaseerde styling:

  
  label:has(input:focus-visible) {
      outline: solid 0.15em currentcolor;
      outline-offset: 0.5em;
  }
                                  

• Rotatie van een element afhankelijk van een state:

  
  body:has(input:checked) main {
      rotate: 0.25turn;
  }
                                  

Gebruik van :is()

:is(ul, ol) li {
    margin-left: 1em;
}
                            

Codepen

Mijn oefeningen zijn te zien op CodePen.

Daily Checkout 26-11: CSS Challenge States

Vandaag heb ik gewerkt aan de Gestalt-principes en heb ik issues opgelost. Hieronder vind je een samenvatting van mijn voortgang:

Gestalt-principes uitgewerkt

• Similarity: Bekijk voorbeeld
• Proximity: Bekijk voorbeeld
• Common Region: Bekijk voorbeeld

Opgeloste issue: Date functie werkt niet zonder JS

Tom Deeterink meldde een issue met de noscript-tag in mijn project:

Bekijk issue

Ik heb dit opgelost door inline styles toe te voegen in de <noscript>-tag. Zie mijn commit:

Bekijk commit

Daily Checkout 28-11: Het Einde van Red Pers

Vandaag hebben we tijdens de sprint review te horen gekregen dat Red Pers helaas stopt met de samenwerking met de HvA. Dit betekent dat dit project wordt afgerond en we ons gaan richten op een nieuwe opdrachtgever.

Feedback van de klant

Ondanks het nieuws heb ik waardevolle feedback ontvangen van Rainn. Hier is wat ze heeft meegegeven:

• Tip: Gebruik ronde vormen voor de buttons als dit in lijn is met de huisstijl.
• Top: De uitwerking van mijn intro-gedeelte op mobiel werd als zeer mooi beoordeeld.

Daily Checkout 2 december 2024

Wat heb je vandaag gedaan?

We hebben naar wat voorbeelden van interacties gekeken en hier de feedforward en feedback genoemd.

Daarna ben ik begonnen aan mijn Wireflow voor mijn interactie en heb ik een les JS Fundamentals gedaan.

2 December 2024 - JS Fundamentals les 1

Ik heb de eerste les van learnprogrammingonline gedaan. Deze eerste les ging over het defineren van js variables met behulp van let.

3 December 2024

Wat heb ik vandaag gedaan?

Vandaag heb ik mijn wireflow gemaakt voor mijn user story.

Het issue van de user story is hier te bekijken:

Daily Checkout 4 December 2024

De workshop van vandaag bestond uit 3 opdrachten:

De Console, het 3 stappenplan, en van Comments naar Code. Schrijf hoe ver je bent gekomen met de 3e opdracht en wat moet je daar nog voor doen?

Ik heb de comments geschreven voor de derde opdracht, en ga morgen lekker bouwen. Ik moet ook in mijn wireflow nog laten zien hoe je de popup sluit.

Schrijf welke lesje je aan het doen bent van de JS Fundamentals deeltaak. Wat heb je bij de vorige les geleerd?

Ik heb nog maar 1 lesje gedaan. Ik haal dit eind deze week in.

Daily Checkout 5-12: Leeslijst Interactie

Vandaag heb ik gewerkt aan de leeslijstfunctionaliteit met HTML, CSS en JavaScript. Hier is een samenvatting van wat ik heb bereikt:

Wat heb ik gedaan?

• Items kunnen nu toegevoegd en verwijderd worden uit een leeslijst.
• De leeslijst wordt opgeslagen in localStorage en blijft bewaard in de browser.
• Elk artikel bevat een ID, link, titel en auteur.
• Bij het toevoegen van een artikel worden:
  • De leeslijst add-button geüpdatet.
  • Het menu-item voor de leeslijst aangepast.

To-do

• De titel en auteur omwisselen in de leeslijsttooltip.
• Artikelen kunnen verwijderen op de leeslijstpagina.

Daily Checkout 6-12: Code/Design-review over de code van de User Interaction

Vandaag heb ik samen met Branco en Clarice feeback gegeven op de code en de manier van feedback/feedforward.

De code moesten we op de volgende elementen beoordelen:

1. Controleer het JavaScript-bestand en beoordeel of er duidelijke code-comments zijn toegevoegd, zoals beschreven in het kopje Van Comments naar code. Zijn de comments begrijpelijk en helpen ze om de logica van de code te volgen?
2. Bekijk de aangemaakte variabelen in het JavaScript-bestand. Geven de namen van de variabelen een goed beeld van wat erin wordt opgeslagen?
3. Controleer of er styling (CSS) wordt aangepast in het JavaScript-bestand. Indien dit het geval is, maak dan een issue aan om HTML, CSS en JavaScript van elkaar te scheiden in aparte bestanden. HTML moet verantwoordelijk zijn voor de structuur en inhoud van de pagina, CSS voor de opmaak en JavaScript voor de interactiviteit. Bespreek met het team hoe je dit het beste kunt oplossen, bijvoorbeeld door gebruik te maken van de classList.toggle() methode.

Het design moesten we controleren op de volgende punten:

1. Analyseer met elkaar hoe feedforward is toegepast in het ontwerp. Begrijpt de gebruiker meteen wat er zal gebeuren bij interactie met het element? Bespreek met de groep of er visuele of tekstuele verbeteringen mogelijk zijn om dit te verduidelijken.
2. Beoordeel hoe feedback is verwerkt in de interactie. Is het voor de gebruiker duidelijk wat er gebeurt nadat een interactie heeft plaatsgevonden? Zijn de signalen die feedback geven (bijvoorbeeld kleurveranderingen, meldingen of animaties) logisch?
3. Maak een issue aan hoe de interactie nog vetter, functioneler of toegankelijker gemaakt kan worden. Gebruik hiervoor jullie verbeeldingskracht. Het mag out-of-the-box zijn!

Wij hebben Jules, Saif en Karima beoordeeld:

Jules:

• Issue 28
• Issue 29
• Issue 30
• Issue 31

Saif:

• Issue 25
• Issue 26
• Issue 27
• Issue 28

Karima:

• Issue 6
• Issue 7
• Issue 8
• Issue 9
• Issue 10

6 December 2024

Issues opgelost

Vandaag heb ik de issue opgelost van Ravi:

Daarnaast heb ik de twee issues van Koop opgelost:

Daily Checkout UI events

Beantwoord de volgende vragen in je Learning Journal

Hoeveel van de 10 experimenten heb je al gemaakt?

Ik heb er nu twee gemaakt.

Bij welk gedragscriterium past deze deeltaak en wat moet je nog doen om het te kunnen toevoegen aan Portflow?

Deze hoort bij probleemoplossend vermogen. Wat ik er nog voor moet doen weet ik niet.

Welke UI Events kun je nog meer toepassen in de leertaak, voor de opdrachtgever?

Dat weet ik nog niet.

Daily Checkout 10 December

Vandaag heb ik geleerd hoe je de view transitions kan toepassen op je website. Ik heb dit toegepast op mijn website van Sprint 5.

Daily Checkout Forms and States 11-12-24

Wat heb je vandaag geleerd over HTML? Wat over CSS? En wat over JS?

Ik heb van HTML en CSS vandaag niets geleerd. Dit wist ik al. Van JS heb ik geleerd dat bij een gesette customValidity het element alsnog foutief wordt weergegeven, ook al is de waarde correct.

Wat ga je voor vrijdag nog toevoegen aan je micro-interactie voor de opdrachtgever?

Ik ga de issues van Krijn oplossen.

Welke functionaliteit wil je vrijdag laten testen?

De Leeslijst.

Daily Checkout 13 December

Vandaag hebben we een user test gemaakt. Als eerst heb ik een scenario geschreven voor mijn user test. Deze is hier te bekijken

Hierna heb ik met drie klasgenoten elkaars user story en scenario getest. Hieronder het resultaat van de user stories die ik heb getest:

• Jules
• Marcin
• Sebastiaan

Daarnaast ben ik vandaag geweest bij de I love Web-presentatie van Justus. Hierin liet hij zien hoe hij van jongs af aan steeds behendiger werd met de computer en hoe het web vroeger in elkaar zat. Hieruit is zijn liefde voor het web ontstaan.

Daily Checkout 17 December

Vandaag heb ik geleerd hoe je API's kan gebruiken in je javaScript. Joost heeft ons een voorbeeld gegeven waarbij met een speech recognition, drag and drop en webAudio API een applicatie is gemaakt

Hiermee moesten we zelf aan de slag om een van de assignments te maken die in de opdracht zaten. Ik heb gekozen voor de localStorage opdracht. Hier een link naar mijn repository die ik geforked heb: