# Model
Het staat model voor digitale tuintjes welke bij 'Het web is voor iedereen' door studenten worden gemaakt.
Bronnen:
CSS animations. (n.d.). W3Schools. https://www.w3schools.com/css/css3_animations.asp
CSS Grid Layout. (n.d.). W3Schools. https://www.w3schools.com/css/css_grid.asp
How to create a toggle switch. (n.d.). W3Schools. https://www.w3schools.com/howto/howto_css_switch.asp
CSS gradients. (n.d.). W3Schools. https://www.w3schools.com/css/css3_gradients.asp
Bubb, J. (2020, October 22). Create a simple On/Off slide toggle with CSS. DEV Community. https://dev.to/codebubb/create-a-simple-on-off-slide-toggle-with-css-db8
GeeksforGeeks. (2023, May 26). What are Accessibility Concerns in CSS ? GeeksforGeeks. https://www.geeksforgeeks.org/css/what-are-accessibility-concerns-in-css/
Wikipedia contributors. (2026, October 8). Ōkunoshima. Wikipedia. https://en.wikipedia.org/wiki/%C5%8Ckunoshima
Farmer, A. a. M. (2017, March 22). The Dark History of Japan's Rabbit Island. Smithsonian Magazine. https://www.smithsonianmag.com/travel/japan-rabbit-island-dark-history-180962631/
## Learning Log
### 26 okt. - Schooldag
Mijn gekregen stickers en feedback van de Expo:
Gekregen feedback van Shakila:
Gegeven feedback aan Shakila:
### 25 okt. - Thuis werken
Feedback verwerken:
-witruimte tussen letters
-Cookies cursor pointer toevoegen
Toegvoegd. (Kan het niet goed screenshotten.)
-alt-tekst bij Cookies attribuut
-highlighter op blauw zetten
-hover bij topnavigatie
### 23 okt. - Schooldag
Retrospect:
Dit is de feedback, die ik heb gekregen van Barbara en een werkstudent:
### 22 okt. Thuis werken
Vandaag had ik de vormgeving van mijn topnavigatie aangepast. Voor light mode had ik namelijk erg weinig contrast als je keek naar de achtergrond en de topnavigatie. Nu heb ik gekozen voor iets donkere/vibrante kleuren om meer contrast te hebben.
Ook de dark mode topnavigatie heb ik aangepast om te zorgen dat ik daar ook gradient in heb, zodat dat matcht met de vormgeving van de topnavigatie in de light mode.
Ik vond dat de likeknop niet genoeg contrast had ik light mode, want ik had besloten om voor de likeknop dezelfde kleuren te gebruiken voor zowel light mode en dark mode, maar dat bracht een probleem: in dark mode zagen de kleuren er goed uit, maar in light mode zag de likeknop er subtiel uit.
Maar het is ook belangrijk, qua toegankelijkheid, om rekening te houden met kleurenblinden, die (meer) afhankelijk zijn van contrasten.
Before:
After:
Hier is de aangepaste likeknop met meer contrast en dat maakt mijn website dus nog toegankelijker!
Ik had ook besloten om rood te gebruiken voor bepaalde stukken tekst (in light mode), aangezien het past bij de roze achtergrond en het interessanter oogt dan gewoon zwarte tekst.
### 21 okt. Schooldag
Ik kwam erachter dat ik eigenlijk kleur weer terug mocht toevoegen in mijn lyric-opdracht, dus iks belsoot dat te doen! Ik had dus al animaties bij het hoveren, die het variabele font deed veranderen, maar ik besloot om nog meer animaties toe te voegen, nadat ik was geinspireerd voor het werk van mijn klasgenoten, wat was laten zien op het digibord.
Dit is een voorbeeld van een van mijn toegevoegde hoveranimaties. De tekst verdubbeld, maar in contrasterende kleuren; ik vond het persoonlijk erg passen bij de lyrics, aangezien "Let it happen" als quote meerdere interpretaties kan hebben en zelfs tegenstelde interpretaties.
Ik kreeg feedback van twee klasgenoten: Ella en Justin.
Ik heb de feedback bekeken en een top 3 gemaakt van feedback, die ik ga verwerken:
Top 3 dingen, die ik ga aanpassen:
1. Cookies toggleknoppen in light mode goed zichtbaar maken
2. Witruimtes aan buitenkant verbeteren
3. Knoppen leesbaar maken voor screenreader
----------------------------------------------------------------------------
1. Cookies toggleknoppen in light mode goed zichtbaar maken
Before:
After:
2. Witruimtes aan buitenkant verbeteren
Before:
After:
Before:
After:
Before:
After:
3. Knoppen leesbaar maken voor screenreader
Before:
After:
Before:
After:
Before:
After:
Ik had tijdens de deepdive van vandaag ook mijn happen-knop gefixt. De spans werkte niet zoals ik wilde, dus de animatie had in invloed op het hele woord en ik wilde het letter per letter. Gelukkig had Sanne mijn uitgelegd, waar het probleem zat, dus dat was fijn en nu werkt de animatie zoals ik wil!
### 20 okt. - Thuis werken
Ik heb de Cookies uitgebreider gemaakt. Ik heb toggle-knoppen toegevoegd aan de Cookies, zodat de gebruiker kan kiezen om bijvoorbeeld wel data te geven aan het ene, maar niet het andere.
Het coderen van twee toggleknoppen was uitdagend en dit is ook hoe het er eerst uit zag, toen ik probeerder eerst 1 toggleknop te maken:
Gelukkig was het uiteindelijk na veel vallen en opstaan, gelukt op twee toggleknoppen op mijn Cookies-functie te krijgen. Ik had besloten voor rondvormige toggleknoppen, aangezien het past bij de rest van de vormgeving van de website, wat ook allemaal rondvormig is.
Ik heb de like-knop verplaatst, hij stond eerst onder de happen-knop, maar aangezien het Cookies-icoon meebeweegt als je scrollt, keek ik nog een keer goed naar de visuele hierarchie. De visuele hierarchie zou meer gebalanseerd zijn, door de symmetrie, als ik de like-knop links op het scherm zou zetten. Dus dat heb ik gedaan.
Als ik nog meer tijd heb in het weekend, wil ik graag nog op de homepage kunst zetten. Namelijk mijn favoriete konijnenkunst, zoals schilderijen etc., waar konijnen in de voorstelling zitten.
### 19 okt. - Schooldag
Hier zie je hoe "webby" mijn website is. Ik heb nog een aantal verbeterpunten bij verschillende aspecten. Ik ga proberen zoveel mogelijk punten proberen te verbeteren om mijn website zo "webby" mogelijk te maken.
Verder had ik vandaag nog feedback van een klasgenoot gekregen. Ik ging met haar namelijk even kijken naar mijn website en mijn webby-formulier.
Feedback van Laura:
-Ritme-animatie horizontaal maken in plaats van verticaal.
-De animaties voegen een hele positieve vibe toe.
-Bekijk het contrast nog een keertje.
### Herfstreces
Hier zijn schetsen, die ik heb gemaakt. Dit zijn animaties, die ik nog wil toevoegen.
Tijdens de hersftreces heb ik de nieuw vergaarde kennis uit de animaties deepdive toegepast.
Ik wilde graag een functie, waar mensen de site konden "liken". Hieronder zie je hoe ik bezig die functie te implementeren met werkende animatie.
Ik had eerst een beetje moeite om alles goed te koppelen (de html met de css) (en de javascript werkend te krijgen). Het was uiteindelijk gelukt!
Nu werkt de like-button-animatie en heb ik dus weer gekozen voor ronde hoeken bij de border.
### 9 okt- Schooldag
Ik wil de deepdive kennis natuurlijk ook toepassen op mijn liedtekst. De woorden, waar nadruk op ligt in het nummer kan ik natuurlijk (extra) benadrukken met variabele font animaties.
Aangezien ik nog wat witruimte over heb onder "LETITHAPPEN." wil ik daar misschien een verticaal effect toevoegen naar beneden toe.
Hier is een verbeterde versie van de knop, die leidt naar de liedtekstopdracht-pagina.
Het heeft dus een hover-animatie met CSS gradient. Ik heb gekozen voor een border met ronde hoeken, want ik had eerder besloten dat dat de vormgeving zou worden van mijn site: een "zachte" en speelse uitstraling.
Ik heb ook verder gewerkt aan de lied-tekst-opdracht, op het vlak van het Seraphs-font. Vasilis liet namelijk zien hoeveel mogelijkheden je hebt met het font. Het is natuurlijk een variabele font, dus je kan spelen met de dikte en de schreven.
Op basis van hoe het nummer klinkt, ging ik goed kijken naar de verschillende lyrics en besloot om zo te bepalen hoe ik het Seraphs-font ging modificeren. Ik had besloten dat als je hovert over de tekst dat je dan het font ziet veranderen en je dus echt de mogelijkheden en matamorfose van de het variabele font ziet.
(Hover-animatie kan je helaas niet zien hier, maar wel op mijn website.)
### 8 okt. - Thuis werken
Ik was vandaag bezig met de deepdive Variabele fonts. Ik leerde hoe je variabele fonts kan gebruiken om je website er interessanter uit te laten zien, qua vormgeving.
Ik wil de liedtekst-opdracht graag ergens op mijn site kwijt. Het komt natuurlijk niet op de homepagina. Ik wil het ook niet op andere webpagina's, dus ik ga een losse webpagina ervoor maken en daarvoor wil ik een knop ontwerpen, die ernaar leidt.
Schetsen en mijn gedachten bij het bedenken van een knop, die naar de liedtekst-opdracht-webpagina leidt:
Hier is de eerste versie van een knop, waarbij ik de kennis van de deepdive had toegpast. Deze knop leidt naar mijn liedtekst-opdracht. Als je over de knop hovert komt er een animatie (interactie met de knop).
### 7 okt. - Schooldag
Dit is een verbeterde versie van mijn digitale versie. Ik heb de tekst meer over het scherm verspreidt en nagedacht over welke woorden nadruk nodig hebben. Ik vond het woord "me" heel belangrijk en wilde echt dat het eruit sprong en echt (letterlijk) centraal stond.
Check-out:
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 de ontwerper, is het handig om alle elementen neer te kunnen zetten op een overzichtelijke manier.
Voor de bezoeker ziet grid er beter uit, aangezien een hierarchie met een grid overzichtelijker en fijner oogt.
Noem drie manieren om chaos in je ontwerp te voorkomen.
-Een hierarchie toevoegen, die de belangrijkste elementen benadrukt.
-Een grid toevoegen, die de elementen ordent.
-Typoggrafie: passend(e) font(s) gebruiken, die passen bij het concept achter je werk.
Hoeveel gekkigheid moet er in je werk zitten?
Je moet creatieve gekkigheid combineren met een harmonieuze hierarchie om een goed werk af te leveren.
### 6 oktober - Naar school voor deepdive
Vandaag was ik naar school voor de deepdive-les van Vasilis.
Dit is de digitale versie van mijn liedtekst-opdracht. Dit is de eerste versie. Ik heb gekozen voor gecentreerde hierarchie, waarbij de ogen verticaal naar beneden worden geleidt. Ik vond dit passen bij de geleidelijke flow van het nummer Let it Happen van Tame Impala.
### 5 oktober - Schooldag
Mijn schetsen voor de liedtekst-opdracht:
Ik heb veel gefocust op het woord "around", ik vond het namelijk wel potentie hebben om er nadruk op te leggen. Ik heb geexperimenteerd met de visuele hierarchie en dus de plaatsing van de woorden en letters. Ik heb ook letters neergezet, als een soort woordzoeker, waarin letters elkaar kruizen en dezelfde letters meerdere woorden vormen. Het lied wordt dan echt 1, ook visueel. Een soort poezie.
Schets, die ik wil uitwerken:
Ik vind ook echt dat "Let it happen" aan elkaar moet als 1 krachtig woord bijna. Een soort woordenmassa, die in je treft. Ik heb in deze finale schets echt geprobeerd om te focussen op de sfeer van het nummer. Hoe zou je lyrics over kunnen brengen tot een doof persoon? Een vraag, waar ik over nadacht. Dit is hoe ik het nummer ervaar, althans!
Check-out:
1. Het zijn allemaal termen op teksten mee te structueren. Zoals de ruimte tussen de letters en woorden en de witruimte eromheen.
kerning = ruimte tussen letters
tracking = de gelijkmatige ruimte tussen alle letters in een heel woord, een regel of een heel blok tekst
leading = regelafstand
flush-left = left-aligned
flush-right = right-aligned
3. Tussen de 45 en 75 karakters. Waarom? Omdat dit in "de Bijbel" van typografie staat.
4. Spacing, aangezien je dan alle elementen in een "goede" visuele hierarchie kan plaatsen.
### 2 okt. - Schooldag
Retrospect:
Titel: Springen en winnen
Toelichting: Ik had wat uitdagingen deze sprint, maar ik probeer toch de eindstreep te halen. Soms moet je daar meer moeite voor doen door bijvoorbeeld onverwachtse uitdagingen.
Feedback van Vasilis:
-focus states vormgeven
-kopjes met screenreader
-alt tekst Cookies
-meer schetsen maken
-coderen en readme afwisselen
### 1 okt. - Thuis werken
Ik heb o.a. nieuwe animaties toegevoegd! Ik heb een konijn op een fiets getekend, aangezien dat past bij in Nederland wonen en daar schrijf ik kort over (Nederlands appartment). De konijn fiets dus heen en weer over het scherm en dat is ook weer een knipoog naar het konijn dat heen en weer slide op de homepagina! Ook vond ik dat Nederlandse aspect van het fietsen mooi contrasteren met Bad Bunny, die natuurlijk uit een totaal andere cultuur komt (Puerto Rico).
Ik had eerst de fiets nagetekend van een afbeelding online van een icoon van een fiets en daarna had ik een konijn getekend en op de fiets gepositioneerd. Vervolgens heb ik de tekening opgeslagen als png.
De vinyl animatie heb ik dus toegevoegd, aangezien het gaat over de (muziek)artiest Bad Bunny. De vinyl-animatie is een png-afbeelding van online, die ik laat ronddraaien.
Ik heb vandaag ook gezorgd dat de animaties niet afspelen, als iemand "reduce motion" heeft aanstaan. Dit draagt toe aan de toegankelijkheid van mijn website, voor mensen met bijv. een evenwichtsstoornis, die niet goed tegen animaties kunnen.
### 30 sept. - Schooldag
WCAG checklist afgenomen (met Amy):
Website testen:
1. Screenreader
Headings
Is de structuur logisch?
De screenreader kan goed de topnav uitspreken, maar op de homepage kan ik nog niet goed door de kopjes heen tabben of de screenreader geheel goed toepassen.
Op de "Soorten konijnen" pagina valt het tabben en de screenreader goed te gebruiken. Ik heb de afbeeldingen omschreven in de alt-teksten.
Geeft elk kopje goed aan wat er onder het kopje valt?
Ik moet de kopjes dus nog verder uitwerken en de website technisch verbeteren, qua kopjes.
Interactie elementen
link, button, dialog, details/summary, inputs…
Zijn ze opgenomen in de overzichten met interactie elementen?
Redelijk duidelijk.
Geeft elke link goed aan waar naartoe gelinkt wordt?
Ja, de topnavigatie is duidelijk, ook voor screenreaders.
Heeft elke button een heldere naam?….
Ja.
2. Alleen-een-toetsenbord
Interactie elementen
link, button, dialog, details/summary, inputs…
Zijn ze allemaal te bereiken met het toetsenbord?
Ja, je kan tabben door de topnav en de Cookies-opties.
Is de volgorde logisch (focus-volgorde - gelijk aan visuele volgorde)?
Ik zou denken van wel.
Zijn er :focus en :active states?
Ja. Focus en vooral active states wil ik nog aanpassen om duidelijker te maken.
Is er een skip to content link?
?
3. WCAG checklist
::selection contrast verbeteren:
voor:
na:
Cookies knop vormgeven:
Kijken of ik een foto als knop kan laten dienen.
Succesvol.
Checkout:
Waar staat WCAG en A11y voor?
Web Content Accessibility Guidelines, checklist of je website voldoet aan de toegankelijkheidseisen.
A11y is een afkorting voor "accessibility".
Wat vind je lastiger, je laptop/websites alleen met een toetsenbord bedienen of met een screenreader? Waarom? Waar moet je nog mee oefenen?
Screenreader, ik moet nog oefenen met bepaalde sneltoetsen. Screenreader gebruiken kan soms frustrerend zijn, aangezien het hardop praat en soms allemaal extra info geeft, die ik niet nodig heb.
Met welke beperking rekening houden vind je het meest lastig?
Mensen met evenwichtsproblemen: het lukt nog niet volledig om mijn animaties stop te zetten, als de "reduced motion"/"verminder beweging" functie aanstaat.
Vind je dat je beperkt wordt in wat je kunt ontwerpen?
Nee, ik kan nog steeds ongeveer ontwerpen wat ik wil.
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?
Ja, de alt teksten zorgen voor nog meer creatieve uitlaat, want het is tof om leuke becshrijvingen te bedenken voor mensen, die een screenreader gebruiken.
Na school:
Schetsen Cookies-knop:
Het was moeilijk om een keuze te maken, maar ik wilde sowieso het hapje gebruiken met de twee tanden, ik vond het een grappig detail en een soort inside joke met mijzelf en natuurlijk een grap voor de oplettende websitegebruiker!
Ik vond een happend konijn ook erg bijpassend. Alsof hij het koekje (Cookies) echt eet.
Dit is mijn Cookies-knop uitgewerkt. Ik wilde een illustratie als knop, zodat het de gebruiker zou "verleiden" om het Cookies-menu te openen (door op de tekening te klikken) en op die manier dus de Cookies te gaan accepteren. Ik zie het als een soort omgekeerde dark pattern, aangezien de gebruiker zelf het Cookies-menu opent, uit een soort natuurlijke nieuwsgierigheid. De gebruiker wordt dus niet geforceerd om Cookies te accepteren.
### 29 sept. - Thuis werken
Vandaag was ik nog steeds ziek, maar beter aan het worden door de dag heen, dus besloot ik om wat schoolwerk in te halen van maandag, want ik was toen ziek.
Wat bedoelt Vasilis met de uitspraak: Semantiek doet mij niet zo veel, ik ben liever bezig met de UX van HTML?
Semantiek in deze context houdt in een juiste codering. Vasilis houdt zich meer bezig met of een website goed bruikbaar is. Vb: Werken alle knoppen goed? Kan je goed een screenreader gebruiken op de website?
Wat voor type beperkingen hebben invloed op het gebruiken van websites?
Neurodiversiteit (dyslexie, epilepsie etc.) , spierproblemen, oog- en gehoorproblemen.
Noem drie manieren om door een website te navigeren met jouw screenreader.
Met de tab-toets, via koppen (headings) en met links.
Hieronder zie je schetsen, die ik heb gemaakt voor mijn Human Consent Component:
1. Ik vond concrete accepteer/afwijs-knoppen een interessant concept en best passend bij mijn website, waar ik wel meer visuele vormgeving gebruik.
2. Deze tabs, die je kan uitklappen, zijn zeer handig om bijvoorbeeld meer informatie te geven over de verschillende plekken waar je Cookies-data naar toe gaat.
3. Ik vond dit de interessante schets, aangezien de toggle-switches echt een gevoel geven van controle voor de gebruiker. Het is ook handig, aangezien je handmatig kan kiezen, waar je data naar toe mag gaan.
4. Hier gebruik ik toggle-switches in combinatie met de kruis-/vink-knoppen. Deze schets oogt heel direct en concreet.
5. Hier gebruik ik vierkante checkboxes (de hoeken zijn rondvormig om de rest van de vormgeving te machten. Ik gebruik vierkante checkboxes, ipv ronde checkboxes, aangezien ik had geleerd dat vierkante checkboxes worden gebruikt als de gebruiker meer keuzes kan kiezen tegelijk en ronde checkboxes zijn voornamelijk voor 1 keuze tegelijk.
In dit scenario moet je meerdere keuzes tegelijk kunnen maken, als de gebruiker dat wil.
### 25 sept. - Schooldag
Vandaag ben ik bezig met de HTML website (te) valideren.
Dit zijn mijn HTML errors.
Eindeweeksgesprek aantekeningen:
-schetsen vastleggen
Vorige week had ik een beetje frustratie, aangezien mijn website niet goed syncte. Ik had hulp gevraagd aan Justus en hij heeft mij kunnen helpen. Dat was erg fijn.
Wat is HTML validatie, waarom is het belangrijk en hoe heb je dat vandaag uitgevoerd?
HTML validatie is of de code goed in elkaar zit en dat is belangrijk, zodat de code een goede structuur heeft en goed runt. Ik heb vandaag 5 errors opgespoord met de gegeven website en de 5 errors ook opgelost.
Welke dingen vielen je op?
Ik had errors, die ik niet door had eerst en die had ik opgelost.
Welke feedback heb je ontvangen tijdens het gesprek met je docenten?
Dat ik verder moet schetsen.
### 23 sept. - Schooldag
Human Consent Component
Opdracht:
Bespreek in jouw groepje welke gegevens op jouw digital garden van gebruikers verwerkt worden. Houdt daarbij in de gaten welke diensten je allemaal gebruikt. Zelfs als je alles zelf geschreven hebt zijn dat er al twee: GitHub pages hosting én het digitaaltuintje component.
Deze twee gebruik ik:
-GitHub pages hosting
-het digitaaltuintje component
Informeren van gebruikers is een plicht die je hebt als websitemaker: Hoe kan je gebruikers informeren over het gebruik van hun gegevens op jouw website?
Door een duidelijke tekst te schrijven over waarom de informatie wordt verzameld, hoe het wordt gebruikt en waar het allemaal naar toe gaat.
Op welke manier kan je instemming vragen? Doe desk-research en zoek tenminste 10 verschillende manieren van het vragen van consent op het web.
Ik vind de beste ontwerpen, als je duidelijk meer keuzes hebt, dus verschillende knoppen en toggles om je Cookie-keuzes te personaliseren.
Ook is het belangrijk dat er een optie is om een volledig gedetailleerde uitleg te krijgen over hoe de data van de gebruiker wordt verwerkt en gebruikt. De volledige uitleg hoeft naar mijn mening niet meteen volledig zichtbaar te zijn, maar kan bijv. onder een knop van "Meer uitleg" staan. DE korte uitleggende teskt (de korte versie) moet wel al meteen goed aangeven, waar de Cookies voor worden gebruikt en waar de data heen gaat.
Denk na over een manier van werken die past binnen de layout van jouw digital garden?
Ik wil graag meerdere keuzes neerzetten met toggles, zodat de sfeer van mijn website licht blijft. Ook wil ik dat als pop up komt in de hoek en niet meteen de website onbruikbaar maakt (of bedekt met de Cookies pop up).
Deepdive Javascript:
### 22 sept. - Naar school voor deepdive
Vandaag had ik geleerd over buttons, bijv. de button states en over summary en details knoppen.
### 21 sept. - Schooldag
Wat zijn HTML landmark role elements?
Dat zijn speciale elements, die tussen <> staan, die allemaal nog een aparte functie hebben (of niet).
Wat zijn heading elementen en hoe horen deze 'genest' te worden?
Dat zijn alle titel groottes en die kan je nesten door bijv. het ene html element in het andere te zetten.
Hoe ga jij met cookies om? Beschrijf jouw beweegredenen en of die zijn veranderd na het volgen van dit college.
Ik ga nu vaker handmatig Cookies afwijzen met de toggles na deze les.
### 18 sept. - Schooldag
Retrospect:
Kleur van teksten light mode gefixt.
---
Waarom geven de docenten deze opdracht?
Om te leren over de content, dus in dit geval coderen.
Welke technieken gebruik ik?
Ik gebruik HTML en CSS
Wat zijn de randvoorwaarden?
Naast de gebruikte techniek zijn er eigenlijk altijd ook andere randvoorwaarden. Zorg er voor dat je die goed voor ogen hebt. Bijvoorbeeld: hoe veel tijd heb je? Wat is je kennis tot nu toe? Maar ook: is mijn ontwerp wel toegankelijk? voldoet het aan de privacy-wetgeving? En ook: is mijn ontwerp wel echt webby of maak ik een plaatje van een website?
Waar gebruik je HTML/CSS voor?
Wees je bewust van de mogelijkheden en de onmogelijkheden van HTML en CSS. HTML is om content te structureren en om interactie mogelijk te maken. CSS is om vorm te geven, om dingen te verduidelijken, en om interactie prettiger te maken.
Wat kan er allemaal met CSS?
Niemand weet wat er allemaal kan met CSS, er kan zoveel, steeds meer, en nog niet alles is ontdekt. Maar je kan wel een heel goed beeld krijgen van wat er allemaal ongeveer kan. Je kan op allerlei manieren dingen layouten, je kan eindeloze hoeveelheden visuele effecten toepassen, en je kan op talloze manieren dingen laten animeren. Je hoeft natuurlijk niet alles te kunnen, daar is dit blok veel te kort voor, maar het is wel lang genoeg om te zien wat er allemaal kan. Dan kan je kiezen wat je wil gaan leren, zowel tijdens het blok als daarna.
### 17 sept. - Thuis werken en propedeuse-uitreiking
Vandaag was ik voornamelijk bezig met mijn Digital Garden nog meer afmaken. Ik had dark en light mode eindelijk toegevoegd op een werkende manier. Verder had ik mijn propedeuse-uitreiking op school.
Ik had ook animatie toegevoegd aan het konijn (png) en die uiteindelijk zichtbaar gemaakt voor zowel light als dark mode door de zwarte kleur van de png te inverten bij dark mode.
### 17 sept. - Thuis werken
Vandaag was ik bezig met mijn Digital Garden. De light en dark mode was nog niet helemaal gelukt, dus daar ging ik o.a. vandaag mee aan de slag! Nu heb ik succesvol dark mode kunnen toevoegen en ervoor gezorgd dat de titel en de bewegende konijnen-png van kleur veranderen, als dark mode aan staat.
### 16 sept. - Schooldag
Hier was ik bezig met grid toevoegen, aangezien Joy dat had gegeven als tip tijdens de les bij het schetsen van de mobile/one-column lay out(s).
Hier had ik een animatie toegevoegd aan de border, die de website meer "webby" maakt.
Contrast: De sterkte van het verschil.
Hierarchie: De belangrijkheid van de ordening van elementen.
Symmetrie: Beide kanten zijn hetzelfde en in evenwicht.
Je kan elementen/aspecten overal op het grid plaatsen (op elke lijn/in elk blok), maar je kan het wel alleen op de lijnen/in de blokken plaatsen.
(Visuele) hierarchie, ik let nu bewuster op hoe ik alles plaats, qua grids en hoe ik alles plaats op basis van lees-"flow" en belangrijkhheid van de content.
### 15 sept. - Naar school
Vandaag was ik naar school gegaan voor de deep dive, dat was erg leerzaam.
Daarna was ik naar de minorenmarkt gegaan om nu alvast informatie te krijgen over de minoren, waaruit ik kan kiezen in de toekomst.
### 14 sept - Schooldag
Ik moet ervoor zorgen, dat de website er beter uitziet in klein voormaat, aangezien hij nu er het beste uit ziet in groot formaat.
Check-out:
Leg uit wanneer een website 'lelijk' wordt
Genoeg CCS gebruiken voor de vormgeving en zorgen dat alles op de website "responsive" is.
Vertel welke volgende stap je neemt om je website responsive te maken.
Zorgen dat de teskt (en afbeeldingen) zich aanpast op basis van het formaat scherm.
Kun je het ontwerp en de bouw van je eigen Garden (zo uit je hoofd) onderbouwen in Webby vocabulair?
Wel als ik de lijst van Webby woorden er bij houd.
### 11 sept - Schooldag - feedback
Als feedback kreeg ik dat ik mijn Learning Log moet afmaken.
(Zwart balkje bovenaan is een pop up van Google Chrome, sorry.)
Experimenteren met topnavigatie (topnav). Ik heb gekozen voor de kalmere look, die meer in blend met de achtergrond. Het oogt wat rustiger en professioneler, maar heeft wel nog een speelse kleur net zoals de achtergrond en dus mijn gekozen kleurenpalet.
### 10 sept. - Thuis werken
Vandaag was ik bezig met de eerste opzet van mijn Digital Garden. Ik heb besloten om te kiezen voor een wesbite lay out, waar er bovenaan een keuzemenu staat, die je naar verschillende webpagina's kan brengen.
Hier was ik bezig met de deepdive:
### 9 sept. - Online les
Vandaag hadden we online les ivm OV staking.
Ik ben vandaag erg vooruitgekomen met het brainstormen en bedenken van ideeen voor mijn Digital Garden. Het heeft mij erg geholpen om erg visueel te brainstormen en onderzoeken met kleur en sfeerwoorden etc. Ook hebben mijn gekozen posters mij geinspireerd op visueel vlak.
Crazy 8 doen helpt mij ook altijd. Het is fijn om snel ideeen op papier te zetten als snelle schetsen.
### 8 sept. - Thuis werken
Vandaag heb ik een HTML presentatie gemaakt over mijn onderwerp: konijnen. Dit was leuk en een tikje uitdagend. Ik heb de presentatie vrij minimalistisch gelaten, qua vormgeving, aangezien ik nog niet heel goed ben in coderen. Ik wel heel zorgvuldig foto's bij elkaar gezorgd en ze als collages in de presentatie gezet. Op die manier is het als een soort moodboards, die in een oogopslag een sfeer overbrengen.
Ik heb ook de deepdive over dark mode gedaan. Dit was leuk en "satisfying" om te zien hoe de kleuren zo kunnen veranderen op basis van of welke instelling je aanklikt in je instellingen.
### 7 sept. - Schooldag
Vanuit de inventarisatie: Wat zou je zelf willen maken? Heb je dingen gezien die je nog niet kan, maar wel interessant vindt in de websites die je bekeken hebt?
Ik wil graag het LED-effect toepassen op bepaalde tekstjes in mijn Digital Garden. Ik wil ook geanimeerde gifs kunnen maken en toevoegen.
Welke webby dingen heb je gezien die je ook wil gebruiken?
Dat de achtergrond van kleur verandert, als je scrollt (gradient bijv., was wat ik had gezien).
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!
Mijn onderwerp is konijnen, aangezien ik daar veel interesse in heb en al behoorlijk veel er over weet. De toon is informerend en entertainend. Het doel is om mensen te vermaken, maar dat ze tegelijk ook nieuwe dingen/aspecten leren over konijnen!
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?
Op welke manier is de content te ervaren, denk verder dan alleen in tekst en beeld (beleeft, voelt, ziet, hoort enz.)
Er moet visueel veel te zien zijn → met animaties bijvoorbeeld.
Een Digital Garden is een persoonlijk hoekje op het internet, waar je je eigen content kan bepalen en het publiek is jezelf.
Het is een aanpassende, interactieve, toegankelijke en leuke website met goede leesbaarheid en expressie dmv animaties.
Ik wil een Digital Garden, waar interactiviteit een grote rol speelt → je moet doorklikken om op volgende pagina’s te komen (op icoontjes/afbeeldingen/tekeningen/knoppen etc.).
### 4 sept. - Schooldag
Vandaag had ik weer deep dives: HTML & CSS Basics en Praktische CSS.
HTML & CSS Basics:
Ik heb veel geleerd van deze deep dive.
Waarom Tim Bernes Lee het wereldwijde web had gemaakt: om wetenschappers bij CERN makkelijker met elkaar te laten communiceren en informatie te laten uitwisselen. Ook een refresher van de verschillende codes in HTML & CSS.
Praktische CSS:
Bij deze deep dive kon ik actief mee typen met het coderen, dat Vasilis deed op het digibord. Dat was erg fijn en leerzaam, aaangezien je het beter onthoudt als je code uittypt. Ook dit was weer een refresher van de basis van CSS,
### 3 sept. Thuis werken
Voorbereiding les morgen:
Welk kleurensysteem kunnen we het best gebruiken?
Moet je per se “em” gebruiken bij CSS?
De mogelijkheden met