# Model
## 23 okt
Vandaag hadden we een feedback moment. Mijn feedback was:
leer meer de sneltoetsen voor de verschillende accesibilitie dingen. 
Dit heb ik gedaan, en werkt goed. 

<img src="images/module3/accesabilitie_23okt.jpeg">

Hiernaast had kreeg ik terug dat ik meer op schetsen en de concepten moet letten, en niet gelijk naar het eind moet gaan. 
En dat ik zou kunnen letten/ vormgeven van de hover state als je aan het tabben bent. de focus state

Ook heb ik de retrospective gedaan. Deze heb ik getekened in het metaphore van verschillende recepten
Zo ziet dit eruit: 
<img src="images/module3/laatste_retrospective.jpeg">

De focus state heb ik ook aangepast. 
Dit is hoe het er nu uit ziet:
Dit was stadium 1
<img src="images/module3/statium_1.png">

Dit is stadium 2:
<img src="images/module3/stadium_2.png">

En dit is het eind werk:
<img src="images/module3/stadium_3.png">

Helaas moest ik wel wat chat gpt gebruiken. 
Dit is het bewijs hiervoor. Hiernaast heb ik veel inspiratie genomen van ww3chools. 


Ook zag ik dat mijn tweede sprint pagina niet werkten. Dit lukten mij compleet niet om op te lossen. Dus moest ik ook chatgpt gebruiken. 
<img src="images/module3/background_blur_0.png">
<img src="images/module3/achtergond_blur.png">

<img src="images/module3/body_lukt_niet.png">

<img src="images/module3/grid_stopped.png">
<img src="images/module3/grid_2.png">
<img src="images/module3/grid_3.png">
<img src="images/module3/grid_4.png">

## 22 okt
gisteren had ik feedback ontvangen van diederik over mijn lyrsich website. 
Dit feedback bestond uit: 
Hij wou dat ik te weinig had. Dit had ik van tevoren al aangepast.
Hiernaast vondt hij dat mijn elementen te veel uit elkaar stonden, en niet genoeg samenhang hadden. 
Hij raden aan door vorm en kleur dit aan te passen. 
Dit heb ik ook gedaan door meer kleuren toe te same te voegen, en de grotens en positie van woorden te veranderen zodat ze meer samen kwamen
zo ziet hij er nu uit. 
<img src="images/module3/lysrich_22okt_1.png">
<img src="images/module3/lyrisch_22okt_2.png">
<img src="images/module3/lyrshc_22okt_3.png">
<img src="images/module3/lyrsich_22okt_4.png">
<img src="images/module3/lyrssich_22okt_5.png">
<img src="images/module3/lyrsich_22okt_6.png">
<img src="images/module3/lyrsich_22okt_7.png">
<img src="images/module3/lyrsich_22okt_8.png">

hiernaast had ik nog feedback gevraagt van diederik. Dit was het feedback dat ik gekregen had: 
Joy, met name in het deel na ‘are you listening to me’ ondersteunt de vorm het ritme of de betekenis van de tekst. De nummers in de tekst zijn tegelijkertijd grappig en verwarrend en mischien zelfs niet je bedoeling geweest. De animaties lijken werder tegen de tekst te werken dan die te versterken, moet je die er dus wel in houden? 
De kleuren maakten het wel meer Village People…
 
Ik heb natuurlijk de fout van de cijfers weggehaalt. En de bovenstde onderdelen nog aangepast
<img src="images/module3/feedback_verandering.png">

## 21 okt

Eerst hadden wij de weekly geekly gedaan. Deze had ik gedaan met Amy, Shakila, en Poema.
Dit is het bewijs hiervan:
<img src="images/module3/weekly_geekly_21okt.jpeg">

Hiernaast was er een zwaar informative feedback moment met klasgenoten. Hier heb ik ook gekeken naar anderen hun werk.
Dit waren de documenten hiervan:
<img src="images/module3/feedback-21okt2.jpeg">
<img src="images/module3/feedback.21okt.jpeg">

Het feedback van deze dingen waren:
Dat ik mijn A tag kleiner moest maken zodat de elemten elkaar niet zouden overlappen in de main pagina.

Mijn light dark op de informatie pagina's donkereder make.

En mijn website nog verder valideren.

Mijn a tag had ik met de hulp van een student assistent afgemaakt/aangepast,
Dit is hoe de website er nu uit ziet.
<img src="images/module3/nieuwe_layout_21okt1.png">
<img src="images/module3/nieuw_layout_21okt2.png">
<img src="images/module3/nieuwe_layout_21okt3.png">

Daarna had ik de light dark beter gemaakt door de achtergrond donkereder te maken, en het font wit maken.
<img src="images/module3/lightdark_1.png">
<img src="images/module3/lightdark_2.png">

daarna heb ik de errors begonnen.
Dit waren de grote errors die ik bijna overal had.
<img src="images/module3/de_eerste_errors.png">
<img src="images/module3/derde_erros.png">
<img src="images/module3/fierde_2.png">

Mijn muziek pagina had ik compleet op kunnen lossen.
<img src="images/module3/muziek_errors.png">

Helaas had ik veel moeite met de header en de body. En na veel hulp van sanne kwam ik hier uit. Nu zitten er geen errors meer in. 

## 20 okt

Vandaag had ik de feedback elementen verwerkt.
Eerst had ik gekeken naar hoe ik mijn voor pagina beter kon maken. Dit heb ik gemaakt met @media.
Het is leuk als code klikt in je hoofd, want ineens heb je veel meer mogelijkheden.
ik moest wel 1 vraag stellen aan chat gpt:
<img src="images/module3/vraag_chat20okt_1.png">
<img src="images/module3/vraag_chat20okt_2.png">

Nu ziet mijn website er zo uit:
<img src="images/module3/website_nieuw.png">
Wat er nu beter is dat er minder ruimter zit aan de kant van de pagina. Dit ziet er beter uit, en is meer adaptive
Helaas zit er nog wat extra ruimte op de mobiel versie. Dit weet ik helaas niet hoe ik dit moet oplossen.

Ook had ik de knoppen aangepast zodat hij als de pagina groter en kleiner wordt de knopen niet rare dingen doen zoals ze eerder deden. Nu bewegen ze perfect mee.

Hierna ging ik werken aan mijn verschillende fonts. Ik had een font gevonden die hetzelfde concept door gaf, maar iets wat beter leesbaar is. Zo ziet dit er nu uit.
<img src="images/module3/nieuw_font_2.png">
<img src="images/module3/nieuw_font_3.png">
<img src="images/module3/nieuw_font_4.png">

Helaas moest ik wel hva ia hiervoor gebruiken.
Dit is het bewijs hiervan
<img src="images/module3/chatia_20okt_1.png">
<img src="images/module3/chatai_20okt_2.png">
<img src="images/module3/chatai_20okt_3.png">

Hiernaast had ik ook de knop op mijn animatie veranderd zodat op mobiel het makkelijker is om naar de home pagina te gaan.
Dit is hoe dit eruit ziet:
<img src="images/module3/nieuwe_home_pagina.png">

Hiernaast had ik feedback gevraagt op mijn lyrsich pagina omdat ik deze vrijdag niet mee had kunnen pakken.
Mijn feedback was dat ik een delay kon zetten tussen mijn 'young man' Dit heb ik gedaan. zodat het meer lijkt op dit het nummer.

Hiernaast heb ik een light dark toegevoegt. Zodat hij aan de regels van de opdracht valt. maar ook de kleuren en de betekenisen hebt.

Dit is het voorbeeld hiervan:

  <source src="images/module3/kleuren_veranderen.mov type="video/mp4">

<source src="images/module3/draaien.movtype="video/mp4">

en hoe het feedback eruit zag.
<img src="images/module3/feedback_songtext.jpeg">

Hiernaast had ik mijn lyrsich pagina groter gemaakt vanuit feedback van de leraar.
Ik probeerden hetzelfde concept door te voeren als ik daarvoor had gedaan:
<img src="images/module3/nieuwymca_1.png">
<img src="images/module3/nieuwymca_2.png">
<img src="images/module3/nieuwymca_3.png">
<img src="images/module3/nieuwymca_4.png">
<img src="images/module3/nieuwymca_5.png">

Ook had ik feedback gevraagt over mijn website, en kon vasilis wat fouten zien in mijn cookies. Dit heb ik aangepast.
<img src="images/module3/nieuwe_cookies.png">

## 19 okt.

Eerst had ik gekeken naar hoe webby mijn website is.
Dit waren de conclussies hiervan.

Ik zou meer animaites wilen toevoegen, zodat ik meer diversiteit heb in mijn website.
En moet ik nog van mijn songtekst pagina een home knop maken want deze was niet indrukbaar in de telefoon app.

Hier is de screenshot hiervan:

Hiernaast heb ik feedback gevraagt van jesse. Dit was het feedback die hij had:

## 15 okt

Hier had ik het werk proberen in te halen dat ik door ziekten heb gemist.
Hier had ik de schetsen gemaakt voor de animaties doe ik graag zou willen zien:
<img src="images/module3/animatie_schetsen.jpg">

Hiernaast ik had de vorige keer al duidelike fonts toegevoegt die whimsy toevoegenden, Alleen als ik nog meer moet veranderen zou ik mischien dikkeren en meer verschillenden schreven toevoegen.

Helaas kon ik niet feedback op doen

Welke variabelen van Seraphs gebruik je in de opmaak van je songtekst?
Sans
SemiSans
Serif
Slab
Wedge
Tuskan
Calligraphic
Light
Regular
Medium
Semi Bold
Bold

En ik gebruik veel light en bold

Wat voegt iedere variabele toe aan je ontwerp (denk aan leesbaarheid, hiërarchie of de uitstraling die je wil bereiken)?
Ik wil het grappig en dansig maken. En ik wil dat je weet in welke volgorden je alles leest.

Hoe zou je animatie kunnen toepassen om het ritme of de accenten in de weergave van je songtekst nog beter visueel te maken?
door alles dansender te maken

hierna heb ik ook de deep dive gemaakt.
Ik ben dat ik animeren met css erg leuk en uitdagend vind. Maar in alle eerlijkheid javascript echt helemaal niks haha!

<video width="320" height="240" controls>
  <source src="images/module3/deep_dive_animeren1.mov" type="video/mp4">

<video width="320" height="240" controls>
  <source src="images/module3/deep_dive_animeren2.mov" type="video/mp4">

  <video width="320" height="240" controls>
  <source src="images/module3/deep_dive_animeren3.mov" type="video/mp4">

## 8 okt

Helaas omdat ik mij echt niet lekker voelden kon ik weinig doen. En heb ik mijn best gedaan.

Ik heb zo de artiekelen voor de weekly dive al gemaakt:
de notes hiervan:

Notes weekly geekly.

From shrimp Jesus to erotic tractors: how viral AI slop took over the internet
AI creaties hebben veel gedaan, maar zitten ook dingen zoals kunst erg in de weg.

Maar het is ook een baan geworden. Dit zijn vaak heftigen beelden van mensen, die hopen dat iemand geld betaald om ze te krijgen.

Hier is echt veel geld mee te verdienen.

The Dead Internet Theory
Platformen die draaien op views en likes hebben veel te maken met de dead internet theorie.

Het is dat: omdat het zo vol zit met AI slop dat echt werk naar achteren wordt gestuurd.

Dat dingen zoals comments niet meer door mensen zijn.

En dat alles gereguleerd wordt door AI.

Een bot is een software die geprogrammeerd is om iets te doen, dit doet hij automatisch.

Dit kan voor legale als illegale dingen.

Maar de ‘bad bots’ hebben laatst de mensen overgenomene in de wereld van social media. To wel 51% waarin mensen 49% was.

Dingen die dit kan creëren is: dat bedrijven alles over nemen.
Dat ruimtes over worden genomen door ia.
Dat je makkelijk meningen van mensen kan veranderen door nep nieuwes.

Dit betekende dat bedrijven controle hebben. Dat AI bepaald wat wel en niet viral gaat en geld verdient.

Om dit tegen te gaan moeten er meer ethische bots gebouwd worden.
En moeten meer gerviewed worden door echte mensen.

## 7 okt

DIT ONDERDEEL (DE LYRSICH) KAN JE ZIEN ALS JE VIA DE HOME PAGINA OP DE KNOP: SPRINT 2 KLIKT!.

Een bron die ik heb gebruikt voor blinking achtergrond light:
https://www.youtube.com/watch?v=GqH8oyeNqpQ

Hiernaast mocht ik verschillende versies maken van mijn tekst. Mijn eerste iditie was een concept waar ik het concept van: Dancen probeerden vast te stellen. Het is namelijk een dans concept.
<img src="muziek/image/dans1.png">
<img src="muziek/image/dans2.png">
<img src="muziek/image/dans3.png">
<img src="muziek/image/dans1.png">

Hiernaast heb ik een wat seriuezen versie gemaakt:
<img src="muziek/image/seriues_1.png">
<img src="muziek/image/seriues_2.png">
<img src="muziek/image/seriues_3.png">

Ik heb voor fonts geprobeerdt zo veel mogelijk nadruk geef aan de belangrijke dingen, door het font groter en minder groot te maken.
Hiernaast heb ik een regenboog disco gemaakt. Om en de disco van deze tijd te representeren. Maar ook wat dit lied heeft betekend voor de LGBT communitie.
<img src="muziek/image/kleur_1.png">
<img src="muziek/image/kleur_2.png">
<img src="muziek/image/kleur_3.png">

Waarom is het goed om een grid in je ontwerp toe te passen? Noem een reden voor de ontwerper en een voor de bezoeker.
Voor een ontwerper voor controle en voor een website die duidelijk en goed scaalt.
voor bezoekers wordt het duidelijker, en overzicherlijker.

Noem drie manieren om chaos in je ontwerp te voorkomen.
Door een duidelijke grid toe te voegen.
Door een duidelijke inline toe te voegen
door herargie

Hoeveel gekkigheid moet er in je werk zitten?
Zoveel als je wilt? zolang de code maar klopt. Als het werk is voor een bedrijf is het mischien veel minder, maar vooral voor het digitale tuintje wordt het toch zeker uitgedaagt

Hiernaast heb ik nog een deep dive gedaan. Deze ging over animeren met verschillende fonts:

<img src="images/module3/deepdive_7okt.png">
<img src="images/module3/deepdive_7okt2.png">
<img src="images/module3/deepdive_7okt3.png">
<img src="images/module3/deepdive_7okt5.mov">

## 6 okt

Vandaag heb ik een begin gemaakt van de code. Ik heb de schets zo goed mogelijk proberen na te maken. Maar ik heb er een paar dingen aan veranderd, bijvoorbeeld de: young man heb ik op een anderen manier groter. en kleiner gemaakt. omdat dit beter pasten bij het lied,
En er mooier uitzag
<img src="images/module3/Eerste_concet_6okt.png">
<img src="images/module3/eerste_concept_6okt.png">
<img src="images/module3/Eeerste_concept_6okt.png">

Hierbij moest ik helaas wel HVA AI gebruiken. Dit is het bewijs hiervoor:
<img src="images/module3/grid_era_werktniet1.png">
<img src="images/module3/grid_area_werktniet2.png">

<img src="images/module3/lijn_1.png">
<img src="images/module3/lijn_2.png">
<img src="images/module3/lijn_3.png">
<img src="images/module3/lijn_4.png">
<img src="images/module3/lijn_5.png">
<img src="images/module3/lijn_6.png">

<img src="images/module3/lijnhoogte1.png">
<img src="images/module3/lijnhoogte2.png">
<img src="images/module3/lijnhoogte3.png">

Hiernaast heb ik het artiekel gelezen en zijn hiet de notities van:
Notes Technical Web Typography: Guidelines and Techniques:

Het web is 95 typography. Want er valt veel te lezen.
Creative and technische typgrofie.

Creative is met veel design keuzes, en welke mood je bijvoorbeeld moet zetten.

Technische is meer als een theorie. Waar regeles en regulaties aanvast zitten.

- h1 = 24 pixels,
- h2 = 22 pixels,
- h3 = 20 pixels,
- h4 = 18 pixels,
- h5 = 16 pixels,
- h6 = 16 pixels.

ik had nog wat moeite met deze stoff, dus ik hoop daar morgen meer mee bezig te zijn.

Hierna had ik de diepdive gedaan:
Hier had ik geleerdt weer met position sticky te werken. En met dingen zoals welke anderen units ik kon gebruiken:

<video width="320" height="240" controls>
  <source src="images/module3/deepdive_6okt.mov" type="video/mp4">

## 5 okt

Ik heb de YMCA Gekozen, omdat dit een belangrijk nummer was voor de lgbt community in deze tijd. Zo heeft dit nummer veel dingen gedaan.

Bronnen over de YMCA:
http://www.glbtqarchive.com/ssh/ymca_S.pdf

https://www.bbc.com/culture/article/20200804-the-gay-ecstasy-of-the-village-people

OOk hebben wij als klas een artiekel gelezen over verschillende fonts en de manieren hoe deze overkomen in de geschiedenis en waar dit vandaag kwam. En hoe je deze het best kan gebruiken.
Dit is de samenvatting hiervan die met mijn groep was gemaakt:
Goede typografie draait niet om decoratie, maar om het helder en krachtig overbrengen van een boodschap. Door de geschiedenis en theorie van typografie te begrijpen, kunnen we bewuster en respectvoller met typografie omgaan.

Wees tevens bewust welke tools je wanneer gebruikt, typografie is niet alleen decoratief, het is een tool om een motief uit te drukken

En het bewijs van de artiekelen:
<img src="images/module3/artiekel_1_5okt.jpeg">
<img src="images/module3/artiekel_2_5okt.jpeg">
<img src="images/module3/artiekel_3_5okt.jpegg">
<img src="images/module3/artiekele_4_5okt.jpeg">
<img src="images/module3/artiekele_5_5okt.jpeg">
<img src="images/module3/artiekel_6_5okt.jpeg">
<img src="images/module3/artiekele_7_5okt.jpeg">
<img src="images/module3/artiekele_8_5okt.jpeg">

Hiernaast heb ik goed en duidelijk gekeken naar de song tekst. wat het betekend en hoe ze met de tekst en beats iets door proberen te zetten.
Hier heb ik schetsen van gemaakt. Deze schetsen waren:
<img src="images/module3/schets_1_5_okt.jpeg">
<img src="images/module3/schets_2_5okt.jpeg">
<img src="images/module3/schets_3_5okt.jpeg">
<img src="images/module3/schets_4_5okt.jpeg">
<img src="images/module3/schets_5_5okt.jpeg">
<img src="images/module3/schets_7_5okt.jpeg">
<img src="images/module3/schets_6_5okt.jpeg">
<img src="images/module3/schets_8+5okt.jpeg">
<img src="images/module3/schets_8_5okt.jpeg">
<img src="images/module3/schets_9_5okt.jpegg">

Ook had ik een uitgewerkte schets hiervan gemaakt:
<img src="images/module3/uitgewerkte_schets_5okt.png">

check out:
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. (Hint, alle termen staan in de artikelen die we samen gelezen hebben)

kerning: De afstand van letters in een woord verkleinen en vergroten. om het leesbaar te maken

tracking: is hetzelfde maar dan over een groter geheel.

leading: De ruimte tussen de zinnen van baisline naar baisline.

flush-left: Dat alles op hetzelfde left punt begint

flush-right: Dat alles op hetzelfde rigth punt begint.

centered: dat iets in het midden zit.

justified indent: Dat de tekste beide margines aanraakt. En dat alles een soort en box wordt.

outdent: Is als de eerste lijn er anders uitzien als de anderen.

modular scale: is de nette manier hoe je dingen scalt.

movable type: een printer waar ze letters verplaatsen om een nieuwe print te maken.

focus punt: Een groter of kleiner lettertype om verschillende dingen naar boven te zetten.

vijf soorten contrast: typografie.
groot klein,
kleur
positie,
witruimtes.

spatial tension: witruimte gebruiken om een emotie neer te zetten.

Wat is jouw ideale regellengte (measure)? Leg uit waarom.
tussen 40 en 60 pixels. En omdat het dan het meest en duidelijkst leesbaar is.

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?
groottwe. Omdat je daarmee het meeste herargie kan neerzetten

## 2 okt.

Vandaag hadden wij alleen de retrospective. En het feedback. De retrospective was here
<img src="images/module2/2okt_retro_1.jpeg">
<img src="images/module2/2okt_retro_2.jpeg">

En de uitgewerkte tekening is:
<img src="images/module2/2okt_retro_3.jpeg">
Het betekend vooral dat ik eindelijk een beetje het eind er in kan zien. Omdat ik weer in het rooster kom. En omdat ik de code begin te begrijpen. Is het nu minder zwaar. Ook dingen zoals de stress coaching maakt het huiswerk minder zwaar.

## 30 sep

de check-out:
-Waar staat WCAG en A11y voor?:
De verschillende wetten om de privacy heen:
WCAG:Web Content Accessibility Guidelines (WCAG)  
A11y: A11y Project

-Wat vind je lastiger, je laptop/websites alleen met een toetsenbord bedienen of met een screenreader? Waarom? Waar moet je nog mee oefenen?
Alleen met toetsenboard, Omdat ik met een screenreader er nog een beetje makkelijk doorheen click.

-Met welke beperking rekening houden vind je het meest lastig?
Vind je dat je beperkt wordt in wat je kunt ontwerpen?
Of heb je al manieren gevonden om vanuit een solide basis - die voor iedereen toegankelijk is - allemaal leuke en mooie extra's toe te voegen als je bezoekers dat goed vinden?
Met toch echt mensen die een toetsenboard missen. Mijn websiyte is redelijk basic. Dus zijn er weinig echte dingen waar mensen niet omheen komen. Maar zonder toetsenboard omdat het veel tekst en weinig buttons zijn maakt dit het lastig om te navigeren.

Feedback vanuit de testen;
Voeg nog een duidelijke terug knop toe. Zodat mensen weer naar de main pagina gaan.
Hiernaast Zou ik de knoppen van: ga naar miss aura, duidelijker kunnen maken.
En mijn tab namen creatieveren namen kunen geven.
Ook kan de ruimte tussen de iconenen beter. Vooral in model is het soms moeilijk om te scrollen.

Ook zou ik graag nog een foto toe willen voegen

De leesbaarheids test.
Hieruit leerde ik dat mijn website duidelijk leesbaar en goed is.
Eigelijk ging alles goed. Behalven het lezen van teksten waar hij wat moeite mee had. Maar dit kan ook liggen aan mijn computer kunsten.
<img src="images/module2/lijsten_lezen.png">

Voor de rest had ik weinig fouten. Maar is mijn website ook een website met veel tekst en daarin minder interactie. Dus is het ook makkelijker om er doorheen te komen.

Het bewijs dat het tabbaar is. Hier ben ik eigelijk geen probleme tegengekomen behalven het feit dat ik een home button miss.
<img src="images/module2/bewijs_tab_1.png">
<img src="images/module2/bewijs_tab_2.png">
<img src="images/module2/bewijs_tab_3.png">
<img src="images/module2/bewijs_tab_4.png">
<img src="images/module2/bewijs_tab_5.png">
<img src="images/module2/bewijs_tab_6.png">

Hiernaast kon hij alles zonder probleem lezen. Behalevn de lijsten, die kon ik lezen maar had hij een beetje moeite mee.. Maar dat kan ook aan mijn eigen skills zitten haha!
<img src="images/module2/lezen_bewijs_1.png">
<img src="images/module2/lezen_bewijs_2.png">
<img src="images/module2/lezen_bewijs_3.png">
<img src="images/module2/lezen_bewijs_4.png">

<img src="images/module2/bewijs_van_link.png">

Hiernaast had ik tuurlijk ook de kleuren gecheckt. Dezen klopten allemaal. hier waren geen contrast problemen in:
<img src="images/module2/contrast_bewijs_1.png">
<img src="images/module2/contrast_bewijs_2.png">
<img src="images/module2/contrast_bewijs_3.png">
<img src="images/module2/contrast_bewijs_4.png">
<img src="images/module2/contrast_bewijs_6.png">
<img src="images/module2/contrast_bewijs_7.png">

Hiernaast had ik natuurlijk ook de check list gedaan. Hier kwam weinig uit. Het meeste klopten. behalven het feit dat mijn tweede link van: miss Aura te moeilijk te lezen was.
Hiernaast omdat ik weinig echte knoppen heb en veel A tags kwam ik hier veel op terug. Maar de echten knoppen hadden de button tag. En dat ik een home button heb toegevoegd. Om duidelijker en beter mensen die alleen hun toetsenboard kunnen gebruiken makelijker door de app heen kunnen.

Hiernaast heb ik een vidoe toegevoegt! En hiernaast heb ik de light-dark duidelijker gemaakt. Zodat het contrast nog hoger is voor alles!
bewijs hiervan:
<img src="images/module2/aanpassingen_1.png">
<img src="images/module2/aanpassingen_2.png">
<img src="images/module2/aanpassingen_3.png">
<img src="images/module2/aanpassingen_4.png">
<img src="images/module2/aanpassingen_5.png">

En het formulier hiervan:
<img src="images/module2/rechten_formulier_1.jpeg">
<img src="images/module2/rechten_formulier_2.jpeg">
<img src="images/module2/rrechten_formulier_3.jpeg">
<img src="images/module2/rechten_formulier_4.jpeg">
<img src="images/module2/rechten_formulier_5.jpeg">

## 29 sep

Hier had ik nog meer schetsen gemaakt. Voor deze schetsen wou ik verschillende dingen bereiken.
Ik wil dat mensen die het web niet goed begrijpen en er niet goed bij zijn het ook snappen. En er makkelijk doorheen komen.

Ook wil ik geen angst zaaien. Ik maakt deze website best gericht op 'niet nerds' die snappen vaak niet dingen zoals data. En schrikken vaak van deze dingen. Zo wil ik zo makkelijk, snel, en jip en janneke mogelijk laten zien: dit is wat er gebeurdt. A+B+C, hier zeg je ja of nee. en door.

Ook wil ik het natuurlijk in de huisstijl houden. Dit doe ik ook extreem express, om dus niet het: oh wow dit is super techy... ik ben er een beetje bang voor omdat ik het niet begrijp uit te lokken.
Daarom wil ik de 'veilige' huisstijl doorzetten.

Hier zijn de meer uitgewerkte schetsen:
<img src="images/module2/uitgewerkte_schetsen.png">

Hiernaast had ik de deep dive gedaan: S2: meer interactie met HTML en CSS (Vasilis)

Het bewijs hiervan:
<video width="320" height="240" controls>

<source src="images/module2/video_29_sep_deep.mov" type="video/mp4">

Hiernaast had ik nog wat buttons toegevoegt en veranderd. hier moest ik helaas AI voor gebruiken, hier is het bewijs:
<img src="images/module2/29_hva_1.png">
<img src="images/module2/29_hva_2.png">
<img src="images/module2/29_hva_3.png">
<img src="images/module2/29_hva_4.png">

En dit is hoe de knoppen er nu uit zien:
<img src="images/module2/knop_1.png">
<img src="images/module2/knop_2.png">
<img src="images/module2/knop_3.png">
<img src="images/module2/knop_4.png">

## 28 sep

Wat bedoelt Vasilis met de uitspraak: Semantiek doet mij niet zo veel, ik ben liever bezig met de UX van HTML?
omdat het moet werken, en dat eigelijk het enigste is wat belangrijk is. En dat hij adaptive kan zijn, en dat kan niet altijd met sematiek.

Wat voor type beperkingen hebben invloed op het gebruiken van websites?
zicht
congnitief.
motorieke skills
gehoor.

Noem drie manieren om door een website te navigeren met jouw screenreader.
via tab. via, via geluild, en via de pijltjes

Mijn notes voor de short cuts:
Tab werkt met alles, enter + spatie werkt om dingen te selecteren.
command+fn+f5. kan je de spreek ding selecteren.

Het bewijs van de weekly geekly:
<img src="images/module2/bi-weekly_geek2.jpeg">

En bewijs van de luistere/ toegankelijksheid test op de NS:
<img src="images/module2/ns_test.png">
En mijn notes hiervan:

Hiernaast kwam ik niet helemaal uit mijn code dus moest ik HVA ai gebruiken. Hier is het bewijs hiervan.
<img src="images/module2/hva_29_1.png">
<img src="images/module2/hva_29_2.png">

<img src="images/module2/hva_29_3.png">
<img src="images/module2/hva_29_4.png">

<img src="images/module2/hva_29_5.png">

<img src="images/module2/hva_29_4.png">
<img src="images/module2/hva_29_6.png">

<img src="images/module2/hva_29_7.png">
<img src="images/module2/hva_29_8.png">

<img src="images/module2/hva_29_9.png">
<img src="images/module2/hva_29_10.png">

En hoe de website er nu uitziet is:
<img src="images/module2/website_1.png">
<img src="images/module2/website_2.png">
<img src="images/module2/website_3.png">

## 26 sep

notes van de weekly geek:

notes:

ChatGPT facestougherrules under EU online safety regime
De commision zij dat de chatbot een soort search engine is. En ook aan deze regels moeten voordoen.
Anderen IA’S vooral grok moet hierdoor ook zwaar aan de bel trekken dat ze niet wetten onderbreken.
Dit kwam nadat ze 45 minion maandelijkse luisteraars kreeg.

AI chatbots citing Russian propaganda sourced from EU-sanctioned outlet
Grote langalge models zoals google gemini hebben propoganda van Rusland over genomen.
Mensen denken dat ze dit willen doen om mensen de influenceer.
Als er vragen gesteld werden over verschillende dingen die te maken hadden met ukriene kwamen ze snellen bij russesiche artikelen.

Omdat nu meer mensen AI gebruiken over normallen zoek machines is het makkelijk om op deze manier te infleunce.
Dit heet  generative engine optimisation

Dat implaats van gewoon antwoordt te geven ze antwoorden zoeken die meer marketing zijn.
En dit doet IA Niet express. Maar is wel helaas wat er gebeurd

Het einde van ‘Wild West’-internet: DSA uitgelegd:
De era waar je gewoon de cookies accepteert is over. Nu heb je de dsa.

De das is. Popt je algoritme bubble. Nu moeten de bedrijven laten zien waarom ze iets laten zien. En moeten ze ook een ‘off’ functie maken.

Kinderen en tieners beschermen.
Ze moeten nu duidelijke regels neerzetten om kinderen te beschermen. Nu moeten ze alles reguleren. En ook advertenties reguleren.

Geen secret sellers meer, markt platen moet nu hun klanten kennen.
Ze moeten ze duidelijk verifiëren. En tracken.

The enforcement. Het moet nu goed doorgevoerd worden. Anders zijn er extreme hoge boetes.

De dsa Zijn de regels om ons te beschermen

## 25 sep.

feedback: probeer dat je je klant alleen laat weten dat wij niks me je data doen, maar alleen maar informeren dat het er is. Maar dat wij het niet opslaan en er niks mee doen.
Hiernaast raaden zij aan om meer schetsen te maken van de verschillende cookies.
Hier werdt aangeraad om minder opties te geven omdat ik niet heel veel data verzamelen.

Hiernaast wilt zij ook graag dat wij meer letten over de echte vormgeving. en hoe mooi ik het kan maken.

Hier na ging ik code proberen op te lossen:
Dit waren all mijn error's:
Van de eerste pagina
<img src="/images/module2/errors-checken.png">
Dit waren fouten dat ik mijn foto's niet goed gekoppled had.

Voor de tweede pagina.
Hier had ik ook voor het meeste gewoon koppelings fouten
<img src="/images/module2/pagina2.png">
<img src="/images/module2/pagina3.png">
<img src="/images/module2/pagina4.png">

Voor de derde pagina.
<img src="/images/module2/pagina1-5.png">
<img src="/images/module2/pagina1-6.png">
<img src="/images/module2/pagina1-7.png">
<img src="/images/module2/pagina1-8.png">
Deze heb ik zelf en met de hulp van de studenten assisant aangepast.

Helaas toen ik mijn knop probeerden te maken lukten dit niet. Daardoor heb ik chat moeten vragen, Ik heb ook vasillian gevraagt:
<img src="/images/module2/chat_25_1.png">
<img src="/images/module2/chat_25_2.png">

doornemen wat ik deze week heb geleerdt:
Javascript. En vooral hoe je de code meer in de realitiet neer te zetten. Ik merkte deze week dathet me mekkelijker af gaat.
Hiernaast was het wel een zware week vanwegen persoonlijke dingen dus kon ik mij minder verdiepen als ik had gewilt. Maar had ik wel verschillende dingen zelf kunnen koppelen.
en de Var elementen snap ik nu beter.
En alle wetten om de privicy,

Hierna heb ik ook de deep dive gedaan. Hiernaast Deze ging over verschillende positioned.
<video controls width="250">

  <source src="/images/module2/position_oefeningen_2.mov" type="video/webm" />
  <video controls width="250">
  <source src="/images/module2/position_oefingen_3.mov" type="video/webm" />
  <video controls width="250">
  <source src="/images/module2/position_oefeingen_4.mov" type="video/webm" />

## 24 sep

Vandaag had ik een stress coach gesprek waardoor ik op school was.
Hiernaast ging ik mijn 2 htmls willen koppelen. Dit wou ik doen met een knop. En hier kwam ik helemaal niet uit.

Daardoor moest ik helaas chatgpt vragen om
<img src="images/module2/24-sep_AI1.png">
<img src="images/module2/24_sep_AI2.png">
<img src="images/module2/CHAT_24sep.png">
<img src="images/module2/CHAT_ANTWOORDT_2.png">
<img src="images/module2/CHAT_24sep.png">
<img src="images/module2/24-sep-AI3.png">
<img src="images/module2/24-SEP-AI4.png">
<img src="images/module2/24-SEP-AI5.png">
<img src="images/module2/24-SEP-AI77.png">
<img src="images/module2/AI_8.png">
<img src="images/module2/AI_9.pngg">

Uiteindelijk heb ik hier weinig tot niks van gebruikt. Omdat ik nergens duidelijk uit kwam.
En heb ik mijn eige oude code gebruikt.

Hiernaast ik een schets gemaakt van verschillende schetsen gemaakt waarin ik ideen kon uiten van hoe ik mijn onderdelen wil zien.

## 23 sep

Vandaag had ik de lecture in het KSH gebouw. Dit was extreem informatief. Nu weet ik meer over hoe data zich verspreid. En welke soort data's er zijn. En welke wetten waar aan vast zit. Dit waren dingen die ik hiervoor wel wist maar nu meer overna gedacht hebt.
Ook was het leuk om op een anderen manier te kijken naar hoe bedrijven om deze wetten heen proberen te komen. Hier waren de notes die ik hiervan had genomen
<img src="images/module2/data_notes_1.jpeg">
<img src="images/module2/data_notes_2.jpeg">

Hiernaast had ik verschillende. websites bekeken en verschillende bronnen gebruikt om te kijken wat voor soort data toesteming er was. Dit waren de notes hiervan:

De verschillende toestemmingen die ik moet vragen zijn:
GitHub pages hosting
digitaaltuintje component
Visual studio code.
Instagram omdat ik foto’s link.
Microsoft.
TransIP

Hoe kan je gebruikers informeren over het gebruik van hun gegevens op jouw website?:
Door het in jip en janneke taal neer te zetten in verschillende tabbladen. Zodat ze makeelijk kunnen klikken en kijken zonder overweldigd te worden door verschillende elementen.
Ook zodat ze goed uit kunnen sorten. Ik wil Paradiso en Melkweg, als voorbeeld nemen. Hun hadden alle elementen verschillende gezet zodat je goed dingen kon afwijzen en anderen dingen kon accepteren.

Op welke manier kan je instemming vragen? Doe desk-research en zoek tenminste 10 verschillende manieren van het vragen van consent op het web.
https://www.combell.com/nl/blog/soorten-cookies/
https://veiliginternetten.nl/wat-zijn-cookies/
https://pec.surf.nl/faqs/hoe-vraag-je-om-toestemming-wat-is-er-nodig/
https://www.combell.com/nl/blog/soorten-cookies/
https://veiliginternetten.nl/wat-zijn-cookies/
https://www.dailycms.com/artikelen/cookiemelding-op-je-website-wanneer-is-deze-wel-of-niet-verplicht/
https://www.dailycms.com/artikelen/avggdpr-wat-betekent-deze-wetgeving-voor-websites-en-webwinkels/
https://www.weer.nl/
https://www.telegraaf.nl/
https://www.tivolivredenburg.nl
https://www.zapp.nl/
https://www.zuiderzeemuseum.nl

Door duidelijke fotos te laten zien van waar je data heen gaat.

Door het duidelijk uit te leggen. In een grote tekst gelijk

Door het in kleine mapjes te zetten om makkelijk doorheen te gaan.

Door per pagina alleen daar de bijbehorende data knoppen te zetten zodat mensen weten waar wat heen gaat

Door ze gewoon te informeren welke data ze nemen. Terwijl je ze laat weten dat het nee zeggen je naar een anderen pagina leid.

Een vol scherm pop up neerzetten waar in het klein de info op staat, en ze uitnodigen om verder te lezen.

Een volscreen pop up maken. Waarin er verschillende keuze knoppen zijn.

Een kleine onderdeel neer te zetten onder aan de pagina. Waarin een uitleg zin staat. En dat dus niet uitdaagt om verder te lezen.

Met kleine icoontjes die de onderdelen representeren.

Ze 2 opties geven: waar ze alleen de noodzakelijke cookies kunnen accepteren en alles

Denk na over een manier van werken die past binnen de layout van jouw digital
garden?:
Iets makkelijks. Ik wil iets maken dat zelfs oma's van 80 zouden snappen. Waarin het duidelijk is. En de knopen allebij even groot zijn.

Hiernaast had ik gekeken naar een app/website die wel verschillende dark patterns gebruiken. voor mij is duolingo de meet ulitmate dark pattern bedrijf. Want het hele concept is een dark pattern vanwegen de streak opties.
Hiernaast vindt ik de super pagins het meest vervelend. Want ze duwen het zwaar door dat je dit nodig hebt. Dus deze dark pattern had ik uitgetekend:
Dit was hoe hij er normaal eruit ziet.
<img src="images/module2/duo_normaal.jpeg">

Dit is hoe hij er uit kan zien als hij wel goed ziet.
<img src="images/module2/duo_opnieuw.png">
Mijn ontwerp heeft alles beter. Alles staat gelijk wat een opties niet slechter of beter maakt dan de anderen.
Ook geeft hij duidelijke ALLE opties aan en moedigt hij niet er gelijk een aan. Natuurlijk heb je met deze opties ook dat je ja kan zeggen zonder je gevens te moeten geven.

Hiernaast had ik de workshop over Javascript gevolgt.
Hier zijn de vidoes hiervan
<video width="320" height="240" controls>

  <source src="images/module2/opdracht_1_java.mov" type="video/mp4">
  <video width="320" height="240" controls>
  <source src="images/module2/opdracht_2_java.mov" type="video/mp4">
<video width="320" height="240" controls>
  <source src="images/module2/opdracht_3_java.mov" type="video/mp4">
<img src="images/module2/opdracht_4_java.png">

## 22 sep

Ik had deze dag mijn README bijgewerkt omdat ik een beetje achter liep.
Hiernaast moest ik nog even aan mijn nieuwe code zitten.
Ik wou de kleuren goed zetten en de grid goed zetten.
De kleuren waren nu wel gelukt. Omdat mijn grid niet goed gelinkt was kon niks koppelen.
Helaas moest ik dit wel even chatgpt hiervan vragen:
<img src="images/module2/header_verwijderd.png">
<img src="images/module2/header_verwijderd_oplossing.png">
<img src="images/module2/oplossing_2.png">
<img src="images/module2/oplossing3.png">
<img src="images/module2/oplossing4.png">
Hiernaast lukten dus mijn grid niet. En deze daarom dus wel.
Hiernaast stond mijn footer ineens in het midde van mijn pagina. Dit moest ik weer aan chat vragen. Hierdoor ben ik er wel uit gekomen.

Hiernaast had ik een rare gap in mijn pagina. Nadat ik hier niet uit kwam had ik het gevraagt. Maar hier kwam chat ook helaas niet uit
<img src="images/module2/gap_1.png">
<img src="images/module2/gap_oplossing.png">

Hier zijn de screenshots van de website tot nu toe:
<img src="images/module2/eersteversie_1.png">
<img src="images/module2/eersteversie_2.png">
<img src="images/module2/eersteversie3.png">
<img src="images/module2/eersteversie4.png">

En de fullscreen:
<img src="images/module2/fulscreen1.png">
<img src="images/module2/fulscreen2.png">
<img src="images/module2/fullscreen3.png">
<img src="images/module2/eersteversie4.png">

hiernaast heb ik de artiekel gelezen:

Notes
What are dark patterns in UX:

Dark pattern design is design om een specefieke actie uit te dagen. Vaak worden ze dan gemanipuleerd.
Vaak willen ze dat je meer betaald voor iets. Dat je je aanmeld. Dat je data deelt. En dat je gewoon een beslissing maakt die je normaal niet genomen had.

Het komt van UX designer Harry Brignull uit 2010.

Deze patronen zijn zwaar on ethisch.
Dark patterns maken misbruik ban de manier hoe mensen al met apps omgaan. Door dingen op specifieken plekken neer te zetten.

Door dit soort apps te veel te gebruiken kan je mistrust creeren in niet alleen jou website maar ook anderen websites.

12 soorten van dark patterns zijn:
Hidden costs, door iets te verbergen onder anderen kosten.

Bait and switch
Door gebruikers neer te zetten op plekken waar ze denken dat het een leid naar het een, terwijl het ineens naar iets anders leid.

Forced Continuity. Als een website je tricked in bepaalde gegevens in te voeren. Waardoor hij ze gelijk kunnen gebruiken na de free trail.

Roach motel. Warneer een bedrijf het makkelijk maken om je aan te melden. Maar het extreem moeilijk maken om je weer tegen iets af te melden.

Misdirection, om je gelijk iets anders te laten zien. En dus de goedkopere optie niet duidelijk te maken.

Confirm shaming. Door je te schamen met bepaalde woorden om je het idee te geven dat je iets fout doet als je dingen niet doet.

Sneak into basket. Als hij dingen er gewoon bij zet zonder het echt te benoemen.

Friend spam, Ze liegen dan tegen je om je social media in te voeren voor ‘vrienden’ maar ze willen gewoon echt je data.

Disguised ads:
Als je verchillende buttons een anderen vorm geeft. Terwijl het eigelijk een add is.

Trick questions. Zodat ze de woorden verkeerd verwoordt zodat je de verkeerde keuze maakt.

Fomo. Door je te beschamen als je dingen niet doet. En dingen niet koopt.

Price Comparison. Door prizes naar elkaar te vergelijken om verschillende prijze ziek goedkoop te laten klinken.

De beste manier om dit te vermijden is om duidelijk te zijn, en de uX te leiden naar waar het heen moet leiden.

Notes: mirco interactions:
Micro interactions helpen bij het weten wat je oprecht doet bij een app of websiye. Het is het verschil tussen een product waar je van houdt en die je gewoon tolereert.

Design is niet alleen om dingen op te lossen.
Dingen zoals een goede klik kan veel vreugde brengen naar mensen als je ontwerpt.

Micro interacties staan echt overal. In alle Apps en alle websites. Dit is ook belangrijk om een app leuk en vreugdevol te maken.

Mirco interacties zijn goed voor
Accompishing a single task
Een beweegende task verder maken.
Machines samen zetten.
Een process controleren.
Een setting aanpassen.
Een piece of content bekijken en aanpassen.
Iets aan of uit zetten.

Experience design is niet alleen de grote dingen maar ook de kleine details
Ook brengt het een eco systeem goed bij elkaar.

Je moet altijd eerst een trigger hebben, daarna regels om deze interactie neer te zetten. Daarna de feedback die je krijgt bij de knop. En daarna de loop of de modes hierna.

Je hebt 2 soorten triggers, de systeem triggers en de manual triggers. Manual zijn de echte knoppen die je echt indrukt, en alles in die soort. Waar je echt iets moet doen.

De systeem is waarneer er een systeem getriggerd wordt. Bijvoorbeeld een licht die aangaat omdat je er bij loopt.
Of als jij een code vanuit je systeem herkend om in te voren.

De regels Zijn hoe de micro interactie werkt, en daarneer de feedback doorgaat.
Het zorgt er ook voor dat je ding niet misbruikt wordt. En human error vermeiden.

Dit is ok waar micro interacties goed voor zijn.

Feedback zorgt ervoor dat je weet dat alles goed is gedaan door geluid of beeld of kleur.

Notes:
Don’t Trick Users: 2 Ways to Avoid Deceptive Design Patterns
Je moet jezelf altijd 2 vragen stellen:
Wie zou deze design het meest beniften.
En hoe goed is deze design voor de verwachtingen van de users.

Als je antwoordt je bedrijf is. Moet je terug gaan. Je wilt dat alleen je klanten het goed hebben. En niet alleen dat het bedrijf het goed doet.

Design voelt oneerlijk als hij werkt zoals je hem niet verwacht.

Hiernaast heb ik de diep dive van buttons gevolgt in de klas:
<img src="images/module2/button_opdracht1.png"/>
<img src="images/module2/button_opdracht2.png"/>

## 21 sep

Wat zijn HTML landmark role elements?
De speciale tekens die je een onderdeel geef waar je elke keer naar terug kan referen.

Wat zijn heading elementen en hoe horen deze 'genest' te worden?
Je moet eerste een header maken. Daarin kunnen tags zoals H1, H2,

Hoe ga jij met cookies om? Beschrijf jou beweeg redenen en of die zijn veranderd na het volgen van dit college.
Ik probeer altijd erg voorzichtig te zijn. Maar eigelijk vermijd je dit niet. Ik wil niet dat mensen of bedrijven zo snel mijn data hebben voor privicy redene. Alleen deze college heeft me wel iets meer geinformeerdt over hoe nutteloos het is om het oprecht aan te passne omdat ze het toch vaak stellen.

In deze college hadden wij een live code gedaan. En een college geluisterd. Van deze college heb ik weer een refresher in code gehad wat erg handig was.
Hiernaast hadden wij het gehad over cookjes en alles dat daarbij komt. Hiervan heb ik geleerdt hoe je er mee om gaat. Wat netjes en wat niet is. En hoe vormgeving hier aan toepas komt

<img src="images/cookies_document.png">

En hier zijn de screenshots van de natype code:
<img src="images/module2/cookies_code1.png">
<img src="images/module2/cookies_code2.png">
<img src="images/module2/cookes_code3.png">
<img src="images/module2/code_van_cookies.png">

### 18 sep.

Waarom geven de docenten deze opdracht?
Voor verschillende redenen. Vooral om goede code te leren kennen. We hebben vaak ge 'vibe code' wat werkt maar vaak niet echte code is. Via deze opdracht leren we rauw code kennen. En er mee te werken.
Ook leren we beter het web kennen, Waardoor we meer weten wat er is, en welke kanten er zijn. Met een digital garden heb ik persoonlijk veel meer te weten gekomen over hoe divers het internet kan zijn. Ook hebben we dingen over hieragie geleerdt. Want zelfs een persoonlijke website moet inhoud bevatten.

Welke technieken gebruik ik?
Je gebruikt natuurlijk HTML en CSS. maar ook de gestalte dingen, en de profesionele competenties.
Ook natuurlijk de onderzoek manieren en de manieren van schetsen.

Wat zijn de randvoorwaarden?
Natuurlijk dat hij webby is, en daarvoor moet hij bijvoorbeeld toegankelijk zijn. En moet hij duidelijk je data aangeven.
adaptive zijn. en voor gelezen kunnen worden. Dat soort dingen zodat een website oprecht gebruikt kan worden voor iederen een niet gewoon voor jezelf of een kleine groep.
Hiernaas meot de vormgeving ook toegankelijk zijn, Zo moet je goede hieragie maken. Zodat mensen er makkelijk doorheen gaan.
Ook moet het mobiel en computer versies zijn. Moet je duidelijke en rauw code gebruikt hebben. En het zo goed als af hebben binnen 2 weken.

Waar gebruik je HTML/CSS voor?
Voor de rauwe code, Eigelijk kan je dit voor alles gebruiken.
Je gebruikt html voor de basis van de website voor alle letterlijke informatie.
En de css om alles mooi te maken

Wat kan er allemaal met CSS?
Je kan letterlijk alles met css behalven lettelrijke informatie.
Kleuren, vormen, achtergronden, en animaties.
de lay-outs en de grids.

Lukt het om verschillende ideeën te bedenken?
Deze module had ik er wat moeite mee. Ik heb moeite met code, waardoor ik zo veel mogelijk tijd moest stoppen in mijn code. Daardoor moet ik niet zo veel tijd had om echt werk te maken van alle schetsen en concepten.

Lukt het om je ideeën te schetsen?
Ja dat zeker, ik ben goed in wireframes en ik kan vaak realistisch kijken naar hoe hij oprecht eruit moet zien.
Vaak vindt ik hem wel wat moeilijk om hem echt door te zetten.

Wat doet deze CSS-property?
Daarmee kan je verschillende dingen specfieke neerzetten en animaties.

Welke content, en welke HTML heb ik nodig?
Voor een foto heb je een img tag nodig. voor text een P tag, voor koppen h2-h4.
Voor een lijst lu en li.

Hoe kan ik dit soort content vormgeven?
Door css verschillenden dingen te gebruiken. Zoals bijvoorbeeld background-color. size, en grid.

Wat als ik hier nu eens 1000 invul?
Dat wordt iets heel groot, en heel erg iets anders. Dan kan je goed zien of iets werkt of niet

Begrijpen bezoekers de site?
Ja, vanuit hovers en duidelijke plekken en knoppen is het moeilijk om niet de website te snappen.
Ik had het gemaakt zodat je niet hoeft te raden hoe de website werkt.

Wat vindt de opdrachtgever er van?
Hij vondt het een duidelijke website. Maar had liever nog wat meer letterlijks HTML gezien implaayts van de eerste pagina van illustratie.
Hiernaast vondt hij de huisstijl kloppen. En de pagina's duidelijk.

Werkt dit wel?
Veel werkte na veel sleutelen wel. Maar veel ook niet. Zo had ik meer adaptive gewilt. Meer pagina's en meer buttons en mischien zelfs animaties. Maar vanwegen gebrek van skills en tijd lukten dit niet.

Oooooh, kan dit óók?!
Ik had graag meer willen werken met grid, zodat het er allemaal meer uitzag als een 'prikboard' ook had ik meer met animaties, en speelden vidoes en interviews en fotos willen werken. Om een groter geheel te maken.

Reflecteren met the riddle:
Ik wilden weten hoe dingen zoals grid enzo werkgten. Hier ben ik ongeveer uit gekomen. Ik heb de deepdives bijgewoond, en veel leraren en websites om hulp gevraagt. Nu snap ik het iets wat beter

Wat wil(de) ik weten/bereiken?
En website maken die interactief en persoonlijke was. En die mijn concept duidelijk doorgaf.

Wat heb ik gedaan?
Een website gemaakt met verschillende items.

Wat was het resultaat?
Een interactive website met verschillende onderdelen. Die het concept van een soort interactief prikboard doorgeven.

Wat weet je nu (niet)?
Ik weet nu hoe ik verschillende displays gebruik. En hoe ik ervoor zorg dat een website interactief is.
Hoe ik een website light dark maakt. Ook ik codeer zonder dingen zoals divs te gebruiken.
Maar ik ken code nog niet goed genoeg. Er zijn veel dingen die ik nog niet goed begrijp. En als er iets fout gaat kan ik nog niet genoeg zien hoe ik het oplos.

Wat vond je (niet) leuk?
Coden is niet de taal voor mij. Zo vondt ik het onderzoeken en het illusteren en vormgeven erg look.
Maar alle letterlijke code taal heb ik gedaan met veel moeite. Dus ik ben blij dat het 90% gelukt is.

Voldoet het nog aan de eisen?
Ja, want hij is interactief. Met dingens zoals light en dark. er staat rauwe code in. Hij is zo webby als ik hem kon maken.

HTML validatie
Ja, tuurlijk is hij niet perfect. Maar zo goed als de code kon zijn is hij nu goed.
Er zitten geen grote fouten in.

Toegankelijkheids-check
Ja, alles heeft alt teksten, En hij is erg adaptive. Ook heeft hij light dark. Alleen had ik iets nog iets wat meer licht en donker kunnen zijn.

Is mijn website nog wel adaptief?
Hij werkt op alles scherm grotes, behalven de knoppen in de tweede pagina die ik nog wat had kunnen verstellen.
Maar voor de rest is alles adaptief.

Voldoet mijn website nog wel aan de wet?
Alle fonts en fotos zijn duidelijk met bronnen vermeld. En omdat deze website van eige gebruik is mag ik deze onderdelen gebruiken.
Alleen de data heb ik nog niet duidelijk geregistereed.

Zie ik mezelf nog wel terug in wat ik doe?
Daar had ik nu wat meer moeite mee. omdat ik door de tijd druk en de skill verschil niet de tijd had om echt sterk bij binnen still te staan

Hier naast had ik ook de retrospective opdracht gemaakt
En de title die ik dit heb gegeven was: de code rollercoaster

<img src="/images/ratinglang.jpeg">
<img src="/images/rating1.jpeg">
<img src="/images/rating2.jpeg">

En de tekeningen

<img src="/images/retrospective1.jpeg">
<img src="/images/retrospective2.jpeg">
<img src="/images/retrospective3.jpeg">

Ook had ik de feedback gekregen: hier was de feedback van het tussen gesprek:
<img src="/images/echt/Scherm­afbeelding 2026-09-21 om 11.29.20.png">

### 17 sep.

Ik heb vandaag een stress curus gehad en daarna de propuduse uitreiking dus was ik op school aanwezig.

Hierna heb ik geprobeerd mijn grid aan te passen voor de web versie.
Hier kwam ik compleet niet uit haha.
Ik heb ICTers gevraagt. Maar hun kwamen er ook niet uit. Ik heb chat gevraagt. Hier heb ik geen schreenshots van omdat ik hier geen lijn code van heb gebruikt.
Omdat ik het zo niet begreep.
Maar gelukkig kwam Sanne aan de redding en heeft die mij geholpen over teams. Hier ven ik heel dankbaar voor.

<img src="/images/echt/sanna_bewijs.png">

### 16 sep

Wij hadden gekeken naar de ideale versie van onze website. Daarna hhebben anderen mensen ernaar gekeken en vanuit dit feedback nieuwe vormen gemaakt.
Mijn grote lijnen feedback was: dat ik mischien de vormgeving beter kan doorzetten. Door dus bijvoorbeld de title ook te teken

<img src="/images/eigen_schetsen_16sep.jpeg">
<img src="/images/schets_VAN_lex.jpeg">
<img src="/images/schets_VAN_poema.jpeg">
<img src="/images/shctes_voor_poema.jpeg">
<img src="/images/schets_voor_lex.jpeg">

Ook, heb ik schetsen gemaakt voor mijn ideale web formaat pagina.

<img src="/images/ideal_voor.png.png">
<img src="/images/ideal_1.png">
<img src="/images/ideal2.png">

Hiernaast heb ik aan mijn website gewerkt. En heb ik sanne, Isaac, en Barbara.
Waarna dit wel werkten.

Een bron die ik heb gebruikt voor de grid area's
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas

https://css-tricks.com/almanac/properties/g/grid/grid-template-areas/

Check out:
Noem 3 Gestaltprincipes op en laat de ander uitleggen wat ze betekenen en doen.
Scale, balance, contrast.
scale: waar je ogen gelijk op vallen. Dus het aandachts punt.

balance: dingen die gelijk zijn waardoor je ogen het als 1 geheel zien.

Contrast: als je grote en heftige kleuren bij normale kleuren zet om daar je aandacht naar te trekken.

Een grid biedt ruimte om te spelen (vrijheid), maar tegelijkertijd ook eenheid en structuur (vastigheid). Wat wordt hiermee bedoeld?
Omdat je via een grid het makkelijkst posties neer kan zetten waar ze horen. En je niet meer vast zit van een bestaande vorm.

Welk principe neem je mee in een laatste iteratie van je ontwerp?
Balance, scale, en visual hierarchy. Om de meeste ruimte te creeren. En het menselijkst te ontwerpen.

### sep 15

Voor de bronnen die ik vaker gebruik zijn;
https://www.w3schools.com/
https://stackoverflow.com/questions
https://dev.to/

Welke link ik had gebruikt voor de hidden sourch:
https://www.dofactory.com/html/img/hidden
https://www.monkeyvision.nl/kennisbank/alt-tekst/

Ik hhad ook mijn hover deze dag gebruikt. Maar hier kwam ik helaas niet uit. Ik heb deze bronnen gebruikt.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover
https://www.w3schools.com/CSSref/sel_hover.php

Alleen hier kwam ik alsnog niet uit En moest ik het helaas aan chat vragen. Hier is het bewijs.
<img src="./images/chat_van_15sep.png">
<img src="./images/chat_bewijs_15sep.png">
<img src="./images/mijn_chat_vraag_2_15sep.png">
Maar hier heb ik eigelijk niks gebruikt.

Helaas kwam ik er niet ook niet bij. Maar toen ik perongelijk de halve van mijn tekst verwijdereden kwam ik tot: transform: scale(1.05). En toen ineens werkten dit

Hiernaast heb ik een deep dive in grid area gehad.
<img src="/images/grid_area1.png">
<img src="/images/grid_area2.png">
<img src="/images/grid_area3.png">
<img src="/images/13_sep_vraag4.png">

Hiernaast had ik niet helemaal door dat ik niet echt met DIV's mocht werken. En moest ik daarna veel veranderen.
En heeft een studenten leerling mij in de details nog een keer grid uitgelegt.
Dit was super lief en behulpzaam. En hoewel ik geen held ben. Ik het wel veel meer snap

###14 sep:
Leg uit wanneer een website 'lelijk' wordt en geef voorbeelden wat je kan doen om deze 'lelijke' onderdelen te fixen?
Als er geen vormgeving is, en als hij niet interactief meebeweegt

Vertel welke volgende stap je neemt om je website responsive te maken.
Door dingen zoals grids en padding toe te voegen.

Kun je het ontwerp en de bouw van je eigen Garden (zo uit je

hoofd) onderbouwen in Webby vocabulair?
Hij is interactief, en fluede en adaptief vanwege groter en kleiner worden van de fonts.
Ook vanwege light and dark mode is hij toegankelijk. En hij is expressief vanwege de tekeningen erin

We hebben klasikaal de artiekelen besproken. En een opdracht gedaan waarin we duidelijk konden zien waar, en hoe we het best onderzoek over dingen konden doen.
Hiervan heb ik geleerdt om anders naar bepaalde dingen te kijken. En te weten hoe en waar ik voor informaties onderzoek kan doen.

<img src="/images/Image.jpeg">
Hiernaast heb ik met een klasgenoot gekijekn naar mijn website, en hebben we samen deze vragen ingevult.

Hiernaast had een vriend die de ICT opleiding doet hulp nodig bij zijn HTML. Waarbij ik hem factueel en duidelijk grids kon uitleggen. Het werkte niet door een fout in zijn HTML. Maar ik stond er versteld van het feit dat ik de grid zo kon uitleggen. En dat ik het op deze manier begreep

Opdracht 16:
Wanneer is er een verandering van layout nodig: Waarneer hij groter of kleiner wordt. En er moet meer padding komen.

Opdracht 17:
Wij vonden het interessant dat het een soort game wordt.

En de websites waarin wij de interactie het leukst vonden was: 1.https://immersivebags.miumiu.com/en/ 2.https://why.zero.university/ 3.https://assets.awwwards.com/awards/external/2017/07/595badffaf6a2.mp4

###13 Sep.
Hier had ik kleine dingen gedaan, Ik had mijn header foto omgezet in een SVG. Hier had ik gelijk geleerdt hoe veel beter dit werkten. Ik zag gelijk wat de leraar bedoelden.
Ook kon ik hem makkelijker manipuleren in mijn pagina.

Hiernaast heb ik mijn best gedaan om light dark mode te maken met achtergrond foto's. Maar hier kwan ik niet uit. Helaas moest ik chatgpt om hulp vragen. Maar zelfs hiermee kwam ik er niet uit.

<img src="/images/13_sep_chat1.png">
<img src="/images/13-sep_antwoordt.png">
<img src="/images/13_sep_vraag2.png">
<img src="/images/13_sep_vraag3.png">
<img src="/images/13_sep_vraag4.png">

Hiernaast heb ik de videos en artiekelen gelezen voor de bi weekly. Hier heb ik geleerdt hoe het internet werkt. En waarom gecapitalizeerde data verkeerdt af kan lopen.

Dit waren mijn notities hiervan.

<img src="/images/internet_notes_1.png">
<img src="/images/internet_notes_2.png">

###11 september
In deze les heb ik feedback gekregen van mijn leraar. Dit was het geven feedback:
Joy feedback:
-Switchen naar SVG'S op je website (via illustrator of affinity SVG is vectoren, met CSS kan je dat stijlen. Je kan bijv. andere kleur geven met CSS. Kracht van je eigen tekenstijl en CSS. SVG blijft altijd scherp

-De tekst moet HTML zijn. Wat lastig is, is dat je niet weet hoe lang die tekst eruit komt te zien. De kader kan webby zijn. Met dit soort vormen zijn lastig, probeer iets anders

-Beoordeling op groei, ben je gegroeid? Welke competentie heb je moeite mee. Beoordeling ook op product: is die webby? De deepdives die we aanbieden of je dat ook in je website hebt verwerkt. Voldoende = Ik heb veel geleerd en dat laat je zien in je werk en je verslag. Voor je eigen werk hebt gemaakt en het stof beheerst komt het goed.

-Je mag een onafgemaakte pagina hebben binnen 2 weken, dat wordt ook niet van je verwacht. Ideale plaatje: Uitknipt in stukjes. Is een bepaalde fase van bruikbaarheid. In plaats van werken vanuit het doel werk je stap je voor stapje naar je doel. Opbouwen in plaats van alles tegelijk doen. Genoeg nemen met minder.

Hiervan heb ik geleerdt hoe ik het best in deze les werk. En hoe ik verder kan. Ook heb ik geleerdt wat zij van mijn verwachten.

Hiernaast heeft een studenten assisent bij geholpen mijn werk goed neer te zetten op github. En hoe hij mijn foto's duidelijk en goed en interactief plaats.
Hiervan heb ik geleerdt hoe ik @media werk.
Daarna heb ik de deep dive over grids bijgewoond. De screenshots hiervan zijn
<img src="/images/grid_deep_dive1.png">
<img src="/images/grid_deepdive2.png">
<img src="/images/griddeepdive3.png">
<img src="/images/griddeepdive5.png">
<img src="/images/griddeepdive4.png">
<img src="/images/griddeepdive7.png">
<img src="/images/griddeepdive6.png">
<img src="/images/griddeepdive8.png">
<img src="/images/griddeepdive9.png">
<img src="/images/griddeepdive10.png">
<img src="/images/griddeepdive11.png">
<img src="/images/griddeepdive12.png">
<img src="/images/griddeepdive13.png">

Ik heb nu het gevoel alsof ik veel meer weet van grids, en van hoe ik een pagina opstel.
Dit waren dingen die ik hiervoor echt nog niet begreep.

###9 sep:
check out vragen:
Leg uit waar het Visual Research in 3 stappen naartoe werkt
Naar een visuale sfeer neerzetten die niet te letterlijk is. Zodat
je het best een vormgeving om je concept kan maken die je het
gevoel geeft die je wilt

Vertel in 2 zinnen waar jouw Garden over gaat, en met welke content je dat gaat doen (beeld, tekst, sound, animatie enz).
Miss verkiezingen. Ik wil persoonlijkheid en communite laten zien
in beeld. Dus zo min mogelijk profesionele fotos en zo veel
mogelijk 'rommelige' foto's.
Met tekst en kleur wil ik een whimsicale en vrouwlijke sfeer neerzetten. om girlhood neer te zetten.
Ik wil het neerzetten als een soort scrap book, of een soort poster board.

Vertel kort welk idee van de Crazy 8 je het liefst zou willen uitvoeren/ verder zou willen onderzoeken.
Ik wil concept 1 uitvoeren. Omdat concept 1 het beste de persoonlijkheid en de menselijkheid achter de verkiezingen neerzet.

Deze dag had ik ook de presentatie gedaan tegen iemand.
Waaruit deze conclussies kwamen:
<img src="./oefeningen/presentatie/images /presentatie_conclussies.png">

Hiernaast hebben wij sfeerwoorden. moodboards, en typografie
moodboards gemaakt.
Dit waren de screenshots hiervan.
<img src="./images/sfeer_moodboard.png">
<img src=".images/typografie_moodboards.png">
<img src=".images/uitgewerkte_aantekeningen.png">

Hieruit heb ik een crazy 8 gemaakt:
<img src="./images/crazy8.png">
<img src="./images/uitleg_crazy_8.png">

Hiervan heb ik snelle schetsen gedaan. En daarna heb ik deze uitgewerkt
<img src="./images/eerste-schetsen.jpeg">
<img src="./images/uitwerking1.png">
<img src="./images/uitwerking2.png">
<img src="./images/uitwerking3.png">
<img src="./images/uitwerking4.png">
<img src="./images/uitwerking5.png">
ik heb gekozen voor ontwerp 1

Mijn HTML uitgewerkt concept:
<img src="./images/html_uitgewerkt.jpg">

Hiernaast heb ik de gradient deep dive gemaakt.
De eerste spelletjes
<img src="./images/spelletje_1.png">
<img src="./images/spelletje_2.png">
<img src="./images/spelletje_3.png">

Opdracht 1
<video controls width="250">

  <source src="./images/opdracht_1GR.mov" type="video/webm" />
Opdracht 2
  <video controls width="250">
  <source src="./images/opdracht_2GR.mov" type="video/webm" />

###10 sept:
Helaas ben ik echt niet uit @property animeren gekomen.
Ik heb mijn best gedaan: zo heb ik deze links gebruikt.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property

https://www.w3schools.com/cssref/css3_pr_animation.php

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property

https://css-tricks.com/exploring-property-and-its-animating-powers/

https://www.youtube.com/shorts/dba1xLnU9AM

https://www.youtube.com/watch?v=z2LQYsZhsFw

https://www.geeksforgeeks.org/css/css-keyframes-rule/

Helaas moest ik weer een chatgpt vraag stellen. Maar ook hier had ik weinig aan:
<img src="./images/eerste_vraag_10_sep.png">
<img src="./images/chat_antwoord_10_sexp.png">
<img src="./images/tweede_vraag_10_sep.png">

Wel heb ik tijd gestopt in het leren wat @propertys zijn
en hoe je deze gebruikt. Dit heb ik gedaan met de volgende onderdelen:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties

http://web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html#text

https://css-tricks.com/almanac/rules/p/property/

Hiernaast heb ik een sterk begin gemaakt vanuit het maken van mijn html. Ik heb de eerste pagina gemaakt. en een van de sub pagina's
ik zou nog graag aan een leraar willen vragen hoe ik de kleineren fotos goed kan positioneren.
Hier is de vidoe hiervan

 <video controls width="250">
  <source src="./images/eerst_html_10_sep.mov" type="video/webm" />

###8sep:

Ik heb voor deze grid lay-out deze informatie gebruikt:
https://medium.com/@fatukunda/a-responsive-photo-grid-with-css-grid-layout-5d3bf6b71c0
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
Ook heb ik chatgpt helaas gebruikt. Dit is het bewijs en de code veranderd is.
Omdat ik na heel heel veel sleutelen er niks lukte totdat ik chat om
hulp vraagte

de vragen die ik een chat heb gesteld:
<img src="./images/eerste_vraagchat.png" alt="Girl in a jacket">
<img src="../Joy_Portfolio_ect/images/antwoord_van_chat.png" alt="Girl in a jacket">
<img src=".images/antwoordt.png" alt="Girl in a jacket">
<img src=".mages/antwoordt_van_chat.png" alt="Girl in a jacket">
<img src=".images/nog_een_chat.png" alt="Girl in a jacket">
<img src=".images/nog_een_vraag_vanchat.png" alt="Girl in a jacket">
<img src=".images/tweedevraag.png" alt="Girl in a jacket">

En de code waar dit tot leed:
<img src="./images/eigdecode.png" alt="Girl in a jacket">
<img src="./images/eige_code.png" alt="Girl in a jacket">
<img src="../images/eigecode.png" alt="Girl in a jacket">
<img src="./images/eigencode.png" alt="Girl in a jacket">
<img src="./images/nog_een_eigen_code.png" alt="Girl in a jacket">

Dit waren de fotos van de stadiums van de grid:
<img src="./images/grid_optie.png alt="Girl in a jacket">
<img src="./images/gridoptie2.png" alt="Girl in a jacket">
<img src="./images/gridoptie3.png" alt="Girl in a jacket">

En daarnaast heb ik opdracht 1 en 2 gemaakt van de light dark. Helaas
omdat ik volledig gaar ben en geen code meer kan zien, Zal ik morgen
beginnen aan opdracht 3
<img src="./images/opdracht_1_licht_dark.png" alt="Girl in a jacket">
<img src="./images/opdracht_1_light_dark.png" alt="Girl in a jacket">
<video controls width="250">

  <source src="./images/opdracht_2.mov" type="video/webm" />

###7 sept
-Vanuit de inventarisatie: Wat zou je zelf willen maken?:
de website die ik als inspiratie zou willen nemen is:
https://nuel.pw/
Dit is de website die ik als inspiratie wil voordoen. Dingen zoals de pagina's over elkaar hebben gemaakt, om een collage te maken.

Ik wil het de 'sfeer' van een bewegende, levende poster te maken. Om mijn liefde van vormgeving ook voort te zetten.

-Welke webby dingen heb je gezien die je ook wil gebruiken?:
Ik wil het een echte colleage maken.

En minder een soort wikipedia. Ik neem dingen zoals dit: als voorbeeld.
https://virtual-viscera.neocities.org/
Ik wil het zo persoonlijk maken als ik kan, omdat mijn onderwerp ook gaat over miss verkiezingen personlijk maken.

-Welke eigen content zou je over het onderwerp kunnen schrijven? Wat is de toon, ​de context, het doel, wat zijn onderwerpen, wat is ‘het’ wat jou raakt!​

Ik wil het erg persoonlijk maken. Dus het niet alleen hebben over de manier hoe miss verkiezingen verlopen. En welke er zijn. Maar ook over hoe persoonlijk het is. En wat veel van deze meiden uit verkiezingen zoals dit halen.
Persoonlijk zit ik since 2024 in de verkiezings industrie. Dus weet ik niet alleen persoonlijk hoe het werkt. Maar ook hoe de mensen in de industrie zich vaak voelen.
Ik wil het hebben over de steroeptypes. En die doorbreken.

-Maak je gebruik van content van een ander? Hoe denk je dat te doen? En mag dat eigenlijk wel? Hoe kan je die content zo aanpassen dat het echt een eigen verhaal wordt? Dat het echt jouw content wordt, op jouw eigen garden?

Ik zou natuurlijk wel foto's nemen van verschillende verkiezingen. Naast een bron geven en een link naar de bijbehorende website waar de foto bijhoordt.
Zal ik hem ook proberen aan te passen, zodat hij mischine ge-illustreerdt is.
Ook zou ik proberen het zo veel mogelijk het niet letterlijk houden.

check out vragen:
-Leg uit wat een digital garden is en waarom dat anders is dan een reguliere website.
Een digital garden is een plek waar je je eigen ding kan doen, Denk eraan als een soort boeken kast.
Het is een blog, alleen dan voor je compleet eigen dingen. Zonder het publiek waar je normaal tegen praat
Het heeft ook geen upload datum, en het is je persoonlijke kleine 'dagboekje'

-Leg uit wat een website 'webby' maakt en welke websites jou het meeste inspireren.
De interactiviteit, de adaptiviteit, De toegankelijkheid. Het is volassen, experesief, en verassened. Het gebruikt veel onderdlene van het web dat het super interactive maakt.

-Vertel waar jij mee aan de slag wilt gaan bij het maken van jouw eigen digital garden let op: dit zijn jouw eerste ideeën, dit kan en mag veranderen in de loop van het programma.
ik wil het een soort poster maken. Omdat ik erg hou van vormgeving. Ook wil ik het erg persoonlijk maken, omdat mijn onderwerp ook heel erg gaat over het mensenlijk maken van de missverkiezingen.

Wij begonnen de dag met uitleg over de sprints en de manier hoe de rest van de deepdives zouden verlopen.
Hierna, in onze eigen klas hebben wij artiekelen gelezen en besproken over de verschillende gardens, En wat een garden een garden maakt, en waar deze vandaan komt.
Hiernaast hebben wij gekeken naar de anderen gardens van vorige jaren en met een nieuwe group besproken wat deze goed/ slecht/ niet duidelijk/ wel duidelijk maakte.
Of hij webby was en waarom. En hoe wij dit persoonlijk konden aanpassen.

###4 sep:
Ik had de deep dives: HTML en CSS basics. En praktisch css.
Hier heb ik veel geleerdt. Bij de HTML heb ik weinig notities gemaakt,
omdat ik het meeste al wel snapten.

Maar dit waren de antwoorden van mijn vragen.
<img src=".images/uitgewerkte_aantekeningen.png" alt="Notities_van_basic_html" width="500" height="600">

<img src="./images/screenshots_van_praktisch_css.png" alt="screenshots_praktisch_css" width="500" height="600">

Het staat model voor digitale tuintjes welke bij 'Het web is voor iedereen' door studenten worden gemaakt.

### 3 sept - [Workshop]

In deze workshop (de workshop Interactie: MMD, micro-interacties, forms) hadden we verschillende dingen weer terug gehaalt. Waarvan ook verschillenden design elementen zoals de affordance.

Hier heb ik een wok to walk oefening gemaakt. Zodat je weer kon oefenen met de elementen waar we net mee hadden gewerkt. Ik heb geprobeerdt cue's en de anderen elementen in de user interaction te zetten.

Hier heb ik een duidelijke en goede opfrisser gehad. En konden we weer design wise wakker geworden.

Later werdt ons aangeraden om meer onderzoek te doen. En meer om ons heen te kijken voordat we ontworpen. Ook om meer te schetsen. Dit had ik deze keer niet gedaan vanwegen het gebrek van tijd.
Maar in anderen momenten zou ik dit zeker doen.

<img src="images/foto_wok_to_walk.png" alt="foto_wok_to_walk.ng" width="100" height="200">

Bij de tweede les had ik (font in css). Hierbij hadden we verschillende dingen geleerdt over fonts en font-face.
Dit zijn dingen die ik al had geleerdt. Maar het was erg fijn om met een nieuw persoon deze informatie te krijgen. Ook kregen wij info over welke fonts illegaal waren en niet. Zo mogen we google and adobe progromma's niet gebruiken. Behalven als we het downloaden van tevoren en in de map zetten.

Hierna hebben we verschillende opdrachten gedaan. Deze heb ik afgerond. Ik heb hulp gevraagt aan een klasgenoot en een leraar.

Dit zijn de screenshots van de opdrachten
opdracht 1

<img src="./images/opdracht_1.png" alt="foto_wok_to_walk.ng" width="100" height="200">

opdracht 2
<img src="./images/opdracht_2.png" alt="Opdracht_2.png" width="500" height="600">

<img src="./images/opdracht2_2.png" alt="Opdracht_2_2.png" width="500" height="600">

opdracht 3
<img src="./images/opdracht_3.png" alt="Opdracht_3.png" width="500" height="600">

opdracht 4

 <source src="./images/opdracht_4.mov" type="video/mp4">

 <source src="./images/opdracht_4_2.mov" type="video/mp4">

Ook heb ik een voorbereiding gedaan op de volgende deep dive, deze deep dive is: Praktische CSS.
Hiervoor heb ik de css dinner game gemaakt.

<img src="./images/dinner_css_af.png" alt="dinner_css_af" width="500" height="600">

<img src="./images/dinnercss_bewijs1.png" alt="dinnercss_bewijs1" width="500" height="600">

<img src="./images/dinnercss_bewijs2.png" alt="dinnercss_bewijs1" width="500" height="600">

3 Sep
Voor de deep dive: Html en css basic heb ik de aangegeven teksten en artiekelen gelezen.
Dit leed tot de volgende notities en vragen.
Ook had ik 2 artiekelen gelezen.

<img src="./images/notities_basic_html.png" alt="notitiesbasichtml" width="500" height="600">

Hiernaast had ik ook de lelijke pagina van html opgesteld. Voor de diepdive: praktische css. Deze had ik gemaakt over miss verkiezingen.

<img src="./images/lelijke_pagina_1.png" alt="lelijkepagina1" width="500" height="600">

<img src="./images/lelijke_pagina_2.png" alt="lelijkepagina2" width="500" height="600">

<img src="./images/code_lelijke_pagina1.png" alt="codelelijkepagina1" width="500" height="600">

<img src="./images/code_lelijke_pagina2.png" alt="codelelijkepagina2" width="500" height="600">

## Learning Log

## 31 Augustus.

ik heb alles geinstaleerdt, en gekoppled wat gekoppled moest worden. Helaas kon ik niet VS codium gebruiken omdat mijn computer het niet aankon.
dus code ik in VS code,

vragen: Leg uit wat een source hosting platform is en voor welke jij gekozen hebt.
-Het is het platform waar je je website op zet zodat hj ergens gebacked staat.
Ik heb gekozen voor github-

Vertel welke domeinnaam jij gekozen hebt en hoe je die hebt gekoppeld aan jouw pagina.
-mijn domijn naam is Joyportfolio. Omdat ik mijn portfolio hier aan wil linken.

Ik heb dit gedaan door het via NSD te koppelen. Github van deze verifieren. En hiermee kan je met VS code schrijven.-

Beschrijf hoe je aanpassingen aan jouw pagina kunt maken en hoe je er voor zorgt dat die op het web gepubliceerd worden.
-Door het het op te slaan bij Github, En via hier wordt je website oprecht gerealizeerdt. En gekoppeled tot het bestaande domijn.-