# Model
Het staat model voor digitale tuintjes welke bij 'Het web is voor iedereen' door studenten worden gemaakt.
## Learning Log
### 07 okt - Typografie songtekst opdracht
Verder gewerkt aan de typografie songtekst opdracht, verschillende versies gemaakt om van te leren met verschillende opties. Ik ben mij wat meer gaan verdiepen in verschillende css codes om stukken tekst bijvoorbeeld te kunnen draaien of schuin te trekken.
Verschillende css codes die ik heb geleerd die te maken hebben met transform:
- Translate (x, y): verplaatst een element horizontaal en/of verticaal ten opzichte van de oorspronkelijke positie
- Rotate: draait een element om een bepaald aantal graden bijvoorbeeld (45deg)
- Scale (x, y ): vergroot of verkleint een element in de breedte en hoogte
- Skew: hellingen of kantelt het element
Met deze kennis heb ik verschillende versies gemaakt om deze uit te testen. Graag wil ik hier nog verder aan werken met bijvoorbeeld animaties of de grid aan te passen.
**Check-out**
*1. Waarom is het goed om een grid in je ontwerp toe te passen? Noem een reden voor de ontwerper en een voor de bezoeker.*
Een grid in je ontwerp toe passen zorgt voor structuur en rust in de lay-out. Voor de ontwerper is goed als hulpmiddel om elementen logisch, snel en herhaalbaar op de pagina te zetten. Voor de bezoeker zorgt het vooral voor visuele rust en een duidelijke hiërarchie.
*2. Noem drie manieren om chaos in je ontwerp te voorkomen*
- Duidelijke visuele hiërarchie
- Gebruiken van voldoende witruimte
- Beperken van kleur en verschillende fonts
*3. Hoeveel gekkigheid moet er in je werk zitten?*
De website kan er creatief en speels uitzien, als er maar een goede structuur in zit.
---
### 06 okt - Deep dive + Typografie opdracht songtekst
Deze dag heb ik besteed om het huiswerk te maken voor aankomende woensdag. Hiervoor heb ik de deep dive van Vasilis gevolgd over interessantere layouts. Met deze deep dive heb ik geleerd over verschillende code om bijvoorbeeld een header zijwaards te kunnen plaatsen en hoe je deze vanaf een bepaalde scherm grootte pas te zien krijgt. Ook ben ik achter de code gekomen hoe je bijvoorbeeld een header bovenin het scherm blijft staan wanneer je naar beneden scrollt. Dit zijn een aantal voorbeelden van het interessanter maken van de layout en kunnen de website al een stuk meer vorm geven.
Hiernaast ben ik verder gegaan met de typografie songtekst opdracht, om mijn schetsen digitaal te maken. Dit vond ik nog best moeilijk sinds je geen veel mogelijkheden of opties hebt om er daadwerkelijk veel aan te kunnen veranderen of meer gevoel te geven.
---
### 05 okt - Typografie
In de les hebben wij gewerkt aan een nieuwe opdracht om typografie te verwerken in songteksten. Dit na het gezamelijk lezen van artikels over typografie en het werken hiermee. Ook hebben we een presentatie van Diederik over typografie gekregen met verschillende voorbeelden en uitleg van de opdracht. Voor deze opdracht heb ik Let it happen van Tame Impala uitgekozen, zelf ken ik het nummer al goed voor het gevoel, en na het lezen van de tekst heb ik hierbij al meerdere ideeën bij bedacht. Deze ideeën heb ik vervolgens geschetst op papier waarmee ik samen met Shakila naar elkaars schetsen hebben gekeken en de vragen in DLO hebben beantwoord.
*1. Wat wil je bij de kijker bereiken met je vormgeving?*
Met gebruik van typografie wil ik gevoel en emotie overbrengen die uit de tekst komt
*2. Hoe voegt jouw opzet iets toe aan de tekst?
*
Mijn opzet brengt gevoel en emotie toe aan stukken tekst die geen vormgeving hebben
*3. Wat is een volgende stap: welke schets vind je het meest geschikt om digitaal uit te werken?
*
Deze schets vind ik het meest geschikt om digitaal uit te werken, vanwege de mogelijkheid om creatief gebruik te kunnen maken van de betekenis van de woorden in de typografie stijl.
*4. Hoe zou je dit kunnen aanpakken in code? (vraag hulp wanneer je het niet zeker weet)*
Gebruik van verschillende fonts, dik gedrukte letters, schuin maken van letters, white spacing, de h’s (h1, h2, h3, …), etc.
**Check-out**
*1. Leg uit wat er met de volgende termen bedoeld wordt: kerning, tracking, leading, flush-left, flush-right, centered, justified, indent, outdent, modular scale, movable type, focus punt, vijf soorten contrast, spatial tension.
*
Deze termen zijn typografische ontwerp termen die te maken hebben met afstanden en uitlijning van tekst, lay-out en historie, compositie en beeldtaal.
*2. Wat is jouw ideale regellengte (measure)? Leg uit waarom.
*
De aangeraden ideale regellengte door typografen is 66 tekens. Als je namelijk te veel of te weinig tekens op een regel plaatst, heeft dat directe impact op hoe comfortabel iemand een tekst leest.
*3. Als je in een ontwerp maar één variabele tot je beschikking had om hiërarchie aan te brengen (grootte, plaatsing, spacing, lettersoorten), welke zou je dan gebruiken en waarom?
*
Ik zou kiezen voor grootte als ik maar 1 variabele tot mijn beschikking had om hiërarchie aan te brengen. Dit lijkt mij het meest belangrijke variabele om te hebben voor de structuur van tekst, zoals wat het meest belangrijke is om te lezen of wat meteen je aandacht zou moeten trekken en wat daarna.
---
### 02 okt - Retrospective
Samen met Vasilis gekeken naar mijn website samen met de competenties waaraan mijn website zou moeten voldoen na deze sprint. Hierbij hebben we de screenreader doorgenomen met een aantal vragen waarbij alles werkte. Wel heb ik deze sprint meer kunnen documenteren sinds ik alles wel gedaan heb maar niet volledig in de readme heb staan zoals een paar opdrachten bewijs en wat ik geleerd heb.
Daarnaast heb ik de retrospective ingevuld met hoe de afgelopen sprint voor mij ging en hoe ik deze heb ervaren. Hierbij heb ik een grafiek gemaakt met ups en downs en een metafoor getekend om deze sprint te omschrijven.
---
### 01 okt - Website aanpassingen
De pagina "Steun de otters" aangepast door content te plaatsen van de website Stichting WWF over otters. Via deze pagina kunnen gebruikers zich informeren over het steunen van de otter in Nederland en hierbij de mogelijkheid om te doneren met een link naar de officiele website van de WWF.
Bij het klikken van de button gaat de gebruiker naar de website van de WWF die via een nieuw tabblad wordt geopent.
---
### 30 sept - Werking van de screenreader en de website
Tijdens de les bezig geweest met het gebruik van de screenreader met de website. Bladen ingevuld met regels waaraan de website zou moeten voldoen voor gebruik met een beperking waarbij je de screenreader kan gebruiken. Deze heb ik ingevuld en genoteerd wat ik nog aan de website zou moeten aanpassen voor een meer optimaal gebruik van de website met de screenreader.
---
### 28 sept - Screenreader gebruik & website aanpassingen
Samen in een groepje 5 deelvragen bedacht over de hoofdvraag: "Wie is verantwoordelijk wanneer AI propaganda als betrouwbare informatie presenteert?". Vervolgens hebben wij over 5 deelvragen van een ander groepje met de hoofdvraag: "Kan een machine onderscheid maken tussen informatie, propaganda en desinformatie?", onderzoeksmethodes besproken en uitgekozen voor hun bedachte deelvragen.
**Website aanpassingen**
Tijdens de les ben ik verder gaan werken aan mijn website. Ik heb de leuke-weetjes pagina aangepast in CSS, om deze meer vorm te geven. Hierbij heb ik gebruik gemaakt van margins van de titels en max-width zodat deze zich goed aanpassen met de verschillende breedte van schermen.
**Screenreader opdracht**
Tijdens de les hebben we kennis gemaakt met verschillende commands om de screenreader te kunnen gebruiken. Met deze commands en gebruik van de screenreader opdrachten gedaan om via de website van ns een bepaalde reis te plannen.
**Check-out**
1. Wat bedoelt Vasilis met de uitspraak: Semantiek doet mij niet zo veel, ik ben liever bezig met de UX van HTML?
Dat hij het minder interessant vindt hoe de website wordt ervaren maar zich liever meer bezig houdt met de structuur van de code er achter.
2. Wat voor type beperkingen hebben invloed op het gebruiken van websites?
- Zicht
- Motorisch
- Cognitief
- Audio
3. Noem drie manieren om door een website te navigeren met jouw screenreader.
- Linklijst openen en doorheen navigeren
- Navigeren per element
- Navigeren per koptekst
---
### 25 sept - Cookie button
Aan de website heb ik een cookie button aan toegevoegd onderaan de pagina met de mogelijkheid om de vereiste cookies of alle cookies te accepteren. Deze button staat onderaan de website met gebruik van een dialog waarin alle informatie voor de gebruiker te lezen is.
Door de opdrachten en uitwerking van de deepdive over buttons en dialogs van Sanne heb ik geleerd hoe ik een werkende button kan toevoegen aan de website en een dialog hieraan kan linken in html en css.
---
### 24 sept - Website aanpassingen HTML & CSS
Deze dag heb ik aanpassingen gemaakt aan de HTML en CSS van de website. Dit zijn aanpassingen zoals het maken van een nieuwe pagina voor het steunen van otters, waar informatie te vinden zal zijn om de otters te kunnen steunen en helpen. Daarnaast de hoofdpagina de articles aangepast met stukjes tekst om deze te vullen inplaats van de opvul tekst die er stond. Ook een nieuwe pagina aangemaakt voor de Zeeotter zoals de opmaak van de Rivierotter zodat deze dezelfde lay-out hebben en gemakkelijk aangemaakt kunnen worden. Aan deze pagina's heb ik in de CSS ook aanpassingen gemaakt met gebruik van @media zodat wanneer de website op een kleiner scherm wordt bekeken (zoals telefoon), de afbeelding boven de tekst komt de staan.
Ook heb ik verdere aanpassingen gemaakt na het gekregen feedback van afgelopen vrijdag.
Verdere CSS aanpassingen zijn de titels van de pagina's (h1) die een andere, meer speelse font hebben gekregen.
Hiernaast heb ik het light & dark thema aangepast met de kleuren. Hiervoor heb ik custom properties gebruikt die ik nog niet had aangemaakt.
---
### 23 sept - Workshop Dark patterns & Wireframes/Wireflows
Aan het begin van de ochtend een presentatie gehad van Hans de Zwart over privacy. Met deze informatie begrijp ik de privacy redenen beter voor gebruik van mijn eigen website en hoe ik hiermee zou kunnen omgaan. Vervolgens hebben wij in een groepje opdrachten gemaakt over dark paters van het web zoals bij een eigen gekozen website. We hebben van de website GinaTricot een wireframe/wireflow geschetst waarbij dark patterns te zien zijn. Hiernaast hebben we deze dark patterns besproken en aangegeven.
1.
2. Bespreek met elkaar welke elementen 'dark' zijn en hoe er met data omgegaan wordt. Maak vervolgens een herontwerp voor dit pattern.
We hebben naar de cookies pop-up gekeken. Er word nergens aangegeven om de cookies volledig af te wijzen. Er komt een knop met alleen vereiste cookies en alle cookies toestaan. Onderin de pop-up staat een knop met instellingen waar je verder kan kijken naar wat er met je data gaat gebeuren. Ook zijn niet alle noodzakelijke cookies noodzakelijk. Ook de tekst: "Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.", hoe kan dit anoniem zijn als deze cookie staat onder statistieken en niet onder noodzakelijk?
Als je ook de noodzakelijke cookies niet wilt accepteren, krijg je deze pop-up:"Verplicht - kan niet worden gedeselecteerd. Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken."
**Check-Out**
1. Wat is een wireflow en wat heb je er aan?
Een wireflow zijn schetsen van losse webpagina's die met elkaar verbonden zijn en die laten zien hoe de gebruiker door de website heen navigeert.
2. Wat zijn dark UX patterns? Geef drie voorbeelden...
Dark UX patterns zijn misleidende ontwerp trucs die gebruikers stiekem dingen laat doen die ze eigen niet zouden willen. Voorbeelden hiervan zijn:
- verborgen kosten, bijvoorbeeld kosten die pas bij het afrekenen toegevoegd worden aan het bedrag.
- valse urgentie, bijvoorbeeld een timer bij een product met korting waarvan de korting zou gaan verlopen maar eigenlijk helemaal niet gebeurd.
- visuele misleiding, visuele elementen op de website die de aandacht van de gebruiker afleiden.
3. Waar moet je als ontwerper rekening mee houden bij het maken van een human consent component?
Bij het maken van bijvoorbeeld een cookie-banner of privacy-keuzehulp is het belangrijk om de gebruiker te respecteren met hun keuzes en voorkeuren. Om hiermee rekening te houden moet je denken aan het voorkomen van dark patterns, genoeg en alle informatie geven (transparantie), toegankelijkheid, context en timing.
---
### 21 sept - Cookies en Popup meldingen
Tijdens de les opdrachten gemaakt samen met een duo om verschillende cookies pop-up meldingen te bekijken en deze te onderzoeken. Hiervoor heb ik samen met Inger vragen beantwoord die daarover gaan en hoe ze met de cookies en meldingen omgaan. Hierdoor hebben wij een beter beeld gekregen over wat websites willen wat je doet, hoe ze deze meldingen laten zien en hoe je deze kan terug vinden.
**Check-Out**
1. Wat zijn HTML landmark role elements?
HTML landmark role elements zijn speciale structurele secties op een webpagina die aangeven waar belangrijke onderdelen zich bevinden.
2. Wat zijn heading elementen en hoe horen deze 'genest' te worden?
Heading elementen zijn HTML-tags zoals h1 die worden gebruikt om structuur en hiërarchie van de inhoud op een webpagina te bepalen. h1 is dan bijvoorbeeld de belangrijkste kop.
3. Hoe ga jij met cookies om? Beschrijf jouw beweegredenen en of die zijn veranderd na het volgen van dit college.
Ik accepteer automatisch altijd cookies en ik ben niet bezig met bijvoorbeeld voorkeuren te selecteren of de privacy redenen door te lezen.
---
### 18 sept - Retrospect, Voortgangsgesprek + Feedback
Tijdens de les het Retrospectieve ingevuld met mijn voortgang en hoe ik de afgelopen weken zelf heb ervaren. Ik merk dat ik erg moest wennen aan het begin om weer in de workflow te komen en weer bezig te zijn met schoolwerk. Dit duurde wat langer om op gang te komen en heb ik daardoor de afgelopen dagen wat harder moeten werken aan de website en opdrachten. Tijdens mijn voortgangsgesprek is dit ook naar voren gekomen maar kreeg heb ik alsnog erg positieve feedback gekregen over de website.
De feedback die ik heb gekregen voor mijn website is:
+ Bronnen in code en Readme zetten
+ De titel aanpassen om deze meer karakter te geven, meer vormgeven
+ De clean look van de website meer betrekken bij losse vormen en het speelse
+ Light & dark themas meer aandacht geven, de kleuren aanpassen etc.
+ CSS Custom-properties toepassen
---
### 17 sept - Digitaal tuintje website aanpassingen
Deze dag heb ik verder gewerkt aan het bouwen van mijn website. Hiervoor heb ik mij het meeste gericht op de css ervan en het toevoegen van content. Een nieuwe pagina aangemaakt voor articles over verschillende soorten otters + een nieuwe pagina aangemaakt voor leuke weetjes die ook te vinden is in het navigatiemenu. Deze pagina's gebouwd min html met content zoals beeld en tekst, vervolgens css aan toegevoegd en gewerkt aan de lay-out.
---
### 16 sept - Digitaal tuintje website aanpassingen
Deze dag heb ik besteed aan het werken van mijn website door aanpassingen te maken in vooral de css en lay-out van de html. Hierbij heb ik een font uitgekozen via Google Fonts en deze in de html en css toegevoegd. Hierbij een afbeelding op de Home pagina toegevoegd, header aangepast, articles gelinkt aan nieuwe pagina's en een nieuwe pagina aangemaakt als voorbeeld van de articles. Via de articles wil ik verschillende soorten otters introduceren waar de bezoekers van de site gemakkelijk naartoe kunnen navigeren en kunnen lezen.
---
### 14 sept - Wat is het internet? & Digitaal tuintje website + Check-out
Tijdens de les samen in een groepje/team over de hoofdvraag "Zijn overheden verantwoordelijk voor de betrouwbaarheid van het internet?" deelvragen bedacht. Voor gekregen deelvragen van een ander team samen onderzoeksmethodes besproken en uitgekozen voor hun bedachte deelvragen.
Het vervolg van de les gewerkt aan mijn website. Deze keer heb ik aanpassingen gemaakt aan de Home pagina waar ik grids heb gebruikt om articles te kunnen tonen. Deze articles zo gemaakt dat deze zich zelf aanpassing aan de breedte van het scherm met meerdere articles naast elkaar.
Hiernaast de navigatie van de site aangepast naar een menu balk bovenin. Deze heeft nog verdere css nodig netzoals de articles.
**Check-out**
1. Leg uit wanneer een website 'lelijk' wordt en geef voorbeelden wat je kan doen om deze 'lelijke' onderdelen te fixen?
Wanneer er alleen html onderdelen in de code staan. Om dit te fixen hieraan css code toe te voegen zoals kleuren, grids, margins, fonts etc.
2. Vertel welke volgende stap je neemt om je website responsive te maken.
Het toevoegen van buttons, meerder pagina’s, interacties voor de gebruiker van de website.
3. Kun je het ontwerp en de bouw van je eigen Garden (zo uit je hoofd) onderbouwen in Webby vocabulair?
De bouw van mijn eigen Garden is nog erg rustig maar wel speels.
---
### 11 sept - Feedback, Deep Dive kleuren & gradients + Check-out
Naar mijn vooruitgang gekeken samen met Vasilis. Deze ochtend gezien dat mijn learning log verdwenen was, dit maakte het moeilijk om samen naar mijn vooruitgang te kijken.
Vervolgens de deep dive kleuren & gradients gedaan met oefeningen die in DLO staan. Deze deep dive ging goed door het kunnen kijken naar de presentatie die in DLO staat met uitleg en namen van de codes met de verschillende gradients die je kan maken in code.
**Check-out**
1. Welke feedback heb je gehad?
- Minder uitstellen de codeer opdrachten, Lees de tekst goed bij de deepdives.
- De professionele competenties zijn nog niet terug te zien. Sommige dingen gaan nog niet helemaal lekker. Reserveer er tijd voor.
- Probeer bij de deep dives aanwezig te zijn.
- Probeer feedback te vragen om de lat voor jezelf wat hoger te leggen.
- Ga even voor de Deep Dives zitten. Onthoud dat je het niet hoef te kunnen, maar het is om te leren.
- De professionele competenties zie ik niet terug, omdat je learning log leeg is(perongeluk verwijderd).
- Als de basis goed staat en je kan doorwerken geeft het rust. Dan kun je verder met wat je echt moeilijk vind. Ga er tijd voor reserveren. Zoek klasgenoten op als het niet lukt.
- Probeer om bij de Deep dives aanwezig te zijn. Niet voor jezelf de lat te laat gaan leggen. Docenten geven aan als het te hoog licht.
Met de gekregen feedback heb ik gemerkt dat ik mij wat meer moet verdiepen in de code sinds ik dat niet erg leuk vind om te doen en dit voor mij uit schuif. Hiervoor ga ik wat meer tijd vrij maken om hieraan te werken en de oefeningen beter te kunnen maken.
---
### 10 sept - Deep Dive light & dark theme + Scherm schetsen
Via DLO de deep dive light & dark theme gevolgd met oefeningen. Hierbij heb ik in CodePen oefeningen gedaan met het schrijven van code hoe je de light & dark theme kan aanpassen naar eigen kleuren. Dit vond ik erg lastig om te volgen sinds het mij eerst niet wilde lukken en niet werkte. Na het doen van vergelijkingen in de code van de uitwerking heb ik kunnen achterhalen wat de codes horen te zijn en hoe deze vervolgens werken met wat testen.
Op papier heb ik 5 verschillende schermen geschetst met manieren hoe mijn website er visueel uit zou komen te kunnen zien met verschillende ideeën voor interacties.
---
### 9 sept - HTML Presentatie, Visual research + check-out
Vragenlijst HTML Presentaties
Samen met Reinout hebben wij onze presentaties gedeeld met elkaar en de vragen uit de vragenlijst gesteld aan elkaar om een groter beeld te krijgen over elkaars onderwerp.
Wat voor mij de essentie is van wat ik heb gepresenteerd qua onderwerp en geschreven/beeldende content is om informatie en leuke weetjes te geven over otters die je nog niet zou weten. De informatie die ik al heb gevonden heb ik gebruikt als inspiratie om beelden te vinden over mijn onderwerp.
Woorden uit de kwaliteitenlijst die bij mijn onderwerp passen zijn vrolijk, creatief, informatief en rustig.
Als aanvulling op mijn onderwerp zou ik wat meer uitzoeken en bezig houden met de leuke weetjes over otters, en deze ook visueel te maken.
Het karakter/ de uitstraling/ het gevoel dat bij het onderwerp past is vooral vrolijkheid en rust. De inspiratie die je uit de afbeeldingen kan halen is een rustige stijl met blauwe tinten wat verbinding legt met het water waar zeeotters op hun rug in drijven. De stijl wordt daarom vooral met ronde vormen om een rustig beeld te geven met lichte, zachte kleuren.
1. Wat zou je willen vertellen over het onderwerp aan een ander? en hoe zou je dat voor je kunnen zien?
Met mijn onderwerp wil ik vertellen over leuke weetjes met daarbij behorende afbeeldingen die deze weetjes beeld kunnen geven. De afbeeldingen wil ik samen in verbinding brengen met de kleuren en achtergrond van de pagina zoals met vormen.
2. Ik wil mijn Digital Garden laten gaan over leuke weetjes en informatie over otters.
en wil dat laten zien door verschillende afbeeldingen van bezigheden van otters en informatie aan content te tonen.
Ik begin met een stukje eigen content over mijn interesse naar otters.
Als het begin is gemaakt kan ik mijn Garden verder uitbreiden door andere interesses van mij te delen en hier mij meer in over te gaan verdiepen.
In Figma heb ik oefeningen gedaan voor de visual research. Hierbij heb ik stappen gevolgd om beeld te vertalen naar gevoel en welke uitstraling mijn website met mijn onderwerp gaat geven. Daarbij een crazy 8 gedaan.
Door de Visual Research heb ik een beter beeld gekregen met hoe ik mijn website visueel wil gaan maken en kan ik makkelijker verder met het bouwen van mijn website.
**Check-out**
1. Leg uit waar het Visual Research in 3 stappen naartoe werkt
Het Visual Research werkt toe naar het vinden van eigenschappen en kenmerken die kunnen dienen als visuele uitgangspunten voor je Garden ontwerp. Met deze stappen denk je vanuit een sfeer of karakter en met vorm/beeld, kleur en typografie te ontwerpen.
2. Vertel in 2 zinnen waar jouw Garden over gaat, en met welke content je dat gaat doen (beeld, tekst, sound, animatie enz).
Mijn Garden gaat over mijn interesses zoals een journal om bij te houden en zodat ik de tijd kan nemen om mij meer te gaan verdiepen in onderwerpen die ik interessant vind.
3. Vertel kort welk idee van de Crazy 8 je het liefst zou willen uitvoeren/ verder zou willen onderzoeken.
Het deel van de crazy 8 die ik het liefst wil gaan uitvoeren of verder zou willen onderzoeken is het idee om verschillende lijnen en vormen te kunnen creëren die in verbinding komt met de gehele pagina.
---
### [...]
[...]
---
### 3 sept - [Workshop]
[...]
### 31 aug - Kickoff
Een fork van de model repository gemaakt en gepubliceerd via mijn eigen Github omgeving.