Giter Club home page Giter Club logo

blokweb's Introduction

Procesverslag

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Alyssa Tobi

Je startniveau:

Mijn startniveau is blauw

Je focus:

Ik ga me tijdens deze opdracht richten op surface plane.

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://animalcrossing.nintendo.com/

Screenshot(s) van de eerste pagina (small screen):

hier de naam van de pagina
homepage van de animal crossing website

Screenshot(s) van de tweede pagina (small screen):

hier de naam van de pagina
homepage van de animal crossing: new horizons website

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen: Ik heb de checklist doorlopen en kwam erachter dat mijn site best goed scoorde. De pagina's die ik na wil maken hebben niet echt punten waar je tegenaan loopt qua toegankelijkheid als je bijvoorbeeld kijkt naar kleurenblind zijn of andere beperkingen qua zicht. Voor de rest was de lay-out zelf in mijn ogen ook toegankelijk op zowel desktop als mobiele versie.

Breakdownschets (week 1)

uitwerken na afloop 3e werkgroep

de hele pagina:

breakdown van de hele pagina

dynamisch deel (bijv menu):

breakdown van een dynamisch deel

wellicht nog een dynamisch deel (bijv filter):

breakdown van nog een dynamisch deel

Voortgang 1 (week 2)

uitwerken voor 1e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1 student 2 student 3 student 4
dit bespreken en dit en ik dit en dan ik dat
en dat ook nog dit als er tijd is nog een punt dit wil ik zeker
... ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • punt 1
  • punt 2
  • nog een punt
  • ...

Voortgang 2 (week 3)

uitwerken voor 2e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1 student 2 student 3 student 4
dit bespreken en dit en ik dit en dan ik dat
en dat ook nog dit als er tijd is nog een punt dit wil ik zeker
... ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • punt 1
  • punt 2
  • nog een punt
  • ...

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is): Leest alles voor maar onderscheid geen elementen. Hij leest alles aan één stuk door waardoor alles een groot stuk lijkt. Je hebt dus niet in de gaten wat precies bij wat hoort. Bij de eerste pagina heb ik buttons gebruikt voor het gedeelte waar je de verjaardagen kan zien per dag. Daar leest hij wel knop voor maar ook wat er in de knop te zien is. Echter wordt er niet gezegd waarvoor deze dient. Wat me ook opviel was dat hij elke link bezocht, link noemde. Voor de rest vind ik het lastig om te oordelen of alles duidelijk gestructureerd is voor een blind persoon besef ik me nu. Ik heb geprobeerd de meeste stukken aan te duiden met een h2, maar sommige stukken hadden in de originele versie ook geen titel als het waren.

Voortgang 3 (week 4)

uitwerken voor 3e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1 student 2 student 3 student 4
dit bespreken en dit en ik dit en dan ik dat
en dat ook nog dit als er tijd is nog een punt dit wil ik zeker
... ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • punt 1
  • punt 2
  • nog een punt
  • ...

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

uitomst opdracht 1

Dit ging goed/Heb ik geleerd:

Korte omschrijving met plaatjes

1. de algemene vormgeving van de site:

Het was even weer opfrissen, maar uiteindelijk ging het positioneren en vormgeven best wel goed. Ik merk dat ik vergeleken de vorige programmeer vakken qua styling wel een stukje vooruit ben gegaan. Ik heb nu veel beter leren positioneren door veel te oefenen en dingen te proberen en dat heeft uiteindelijk wel goed uitgepakt vind ik.

2. hamburger menu:

Ik vond dit in een vorige opdracht erg moeilijk, maar nu begreep ik het helemaal en vond ik het eigenlijk best makkelijk. Ik had het niet in een keer, maar dat kwam door die kleine foutjes die je snel over het hoofd ziet. Ik heb er dus wel lang aan gezeten, maar ik begrijp hem nu wel helemaal! top

Dit was lastig/Is niet gelukt:

Korte omschrijving met plaatjes:

1. reduce motion button:

Ik wilde eerst een reduce motion knop op mijn site zelf maken maar dat was me uiteindelijk niet gelukt. Ik heb de knoppen we gemaakt, maar het lukte me niet om deze actief te maken. Ik heb daar dus uiteindelijk de andere reduce motion optie gebruikt vanuit je instellingen en dat werkte wel. bummer

2. Scroll animatie:

Ik wilde net als in het origineel dat mijn content zou verschijnen wanneer je de content op het scherm had bereikt. Dit wilde ik doen met keyframes en dan aansporen met javascript. Ik heb verschillende tutorials gevolgd en niks wilde werken... Ik had uiteindelijk wel een werkende animatie op de betreffende onderdelen, maar mijn content wilde op geen enkele manier blijven staan dus daar had ik ook niet veel aan. bummer bummer

3. interactief verjaardag gedeelte:

Ik wilde hier dat als je op de knoppen zou drukken dat er informatie van een andere verjaardag zou komen te staan. Ik ben vergeten om de code vast te leggen, maar ik gok dat ik een klein typefoutje over het hoofd heb gezien... Ik had net niet genoeg tijd om hier nog langer aan te werken, dus heb ik dat helaas moeten laten gaan. bummer

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
  2. https://codepen.io/tobi-wan-kenobi/pen/YzdrKvg
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  4. https://chat.openai.com/c/f75f254d-d85c-4914-a90d-a030763245eb
  5. https://codepen.io/tobi-wan-kenobi/pen/OJdWqxM

blokweb's People

Contributors

tobia-hva avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.