Merge branch 'main' of https://github.com/fdnd/docs.fdnd.nl

.github/workflows/deploy.yml

@@ -6,18 +6,19 @@ on:
   push:
     branches:
       - main
-
+  discussion:
+    types: [created]
 jobs:
   build_site:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
 
       - name: Install dependencies

docs/assets/style/print.css

@@ -29,7 +29,8 @@ header h1 > span::after {
 
 header nav,
 header .settings,
-footer {
+footer,
+section aside {
   display: none;
 }
 

docs/assets/style/web.css

@@ -42,6 +42,7 @@
   --svg-filter: invert(4%) sepia(84%) saturate(7069%) hue-rotate(246deg) brightness(64%) contrast(105%);
 
   --gradient: linear-gradient(var(--gradient-angle), var(--color-purple) 0%, var(--color-green) 100%);
+
   @media (color-gamut: p3) {
     --gradient: linear-gradient(
       var(--gradient-angle) in oklch,
@@ -65,6 +66,7 @@
   --svg-filter: invert(92%) sepia(93%) saturate(32%) hue-rotate(252deg) brightness(105%) contrast(100%);
 
   --gradient: linear-gradient(var(--gradient-angle), var(--color-purple-negative) 0%, var(--color-green-negative) 100%);
+
   @media (color-gamut: p3) {
     --gradient: linear-gradient(
       var(--gradient-angle) in oklch,
@@ -388,7 +390,7 @@ header {
       }
       & [aria-label='false'] {
         &:before {
-          content: '0';
+          content: '';
           float: left;
         }
       }
@@ -431,9 +433,15 @@ header {
 
 /* Discussies (discussion) invisible */
 [data-discussion='false'] {
+  section:has(.icon-discussion) {
+    border-right-color: transparent;
+  }
   & a.discussion-link {
     display: none;
   }
+  section aside {
+    display: none;
+  }
 }
 
 /* Subnav / table of contents (in main) */
@@ -606,6 +614,39 @@ section {
   }
 }
 
+/* Discussion contents */
+section aside.discussion {
+  position: relative;
+  font-size: 0.9rem;
+  margin: var(--gap) 0;
+  padding: var(--nav-padding);
+  border-radius: var(--rounded);
+  background: #c2c2c2c2;
+
+  & span {
+    display: block;
+    clear: both;
+    &:first-of-type {
+      font-weight: bold;
+      &:before {
+        content: 'Discussie gestart door ';
+      }
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+  /* large screens? */
+  @media (min-width: 52rem) {
+    float: right;
+    clear: right;
+    margin-left: calc(100% + var(--gap));
+    /* top: 0; */
+
+    /* max-width: 100%; */
+  }
+}
+
 main section:first-of-type {
   & p {
     font-size: 1.1rem;

docs/boksa.md

@@ -12,7 +12,6 @@ Zoals overal binnen de ICT vind ook binnen het frontend vakgebied *arbeidsdeling
 
 Een goede frontender wordt gekenmerkt door een aantal belangrijke eigenschappen. Vooraleerst beschikt deze over sterke technische vaardigheden op het gebied van HTML, CSS en JavaScript en ontwerpen voor het web. Heel belangrijk is gedegen kennis op het gebied van gebruiksvriendelijkheid en toegankelijkheid. Een frontender kan zich inleven in de gebruiker en stelt deze centraal in het ontwerp- en ontwikkelproces. Daarbovenop heeft een frontender uitstekende communicatieve vaardigheden en lost met een team op een constructieve manier problemen op. Tenslote blijven frontenders voortdurend bijleren gezien de snelle ontwikkelingen in het vak. ([Cohier, 2018](https://css-tricks.com/what-makes-a-good-front-end-developer/))
 
-
 - [The spectrum of design roles in 2018](https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966) Op UX-collective worden verschillende Designer rollen neest elkaar gezet. 
 
 - [Concept to Code, code literay](https://uxmag.com/articles/concept-to-code) Code is the material that breathes life into a user experience, so we ought to get familiar with it. The enthusiast. The mash-up artist. The inventor. The wizard.
@@ -34,115 +33,113 @@ Bij elke leertaak wordt de DLC doorlopen. Daardoor i) ontwikkelen studenten een
 
 De development lifecycle hanteert de volgende fasering:
 
-1. [Analyseren](#analyseren) - bijvoorbeeld: grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
+1. [Analyseren](#analyseren) - bijvoorbeeld: teamorganisatie, grip krijgen op een opdracht door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een takenlijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done et cetera.
 2. [Ontwerpen](#ontwerpen) - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
 3. [Bouwen](#bouwen) - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
 4. [Integreren](#integreren) - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
 5. [Testen](#testen) - bijvoorbeeld: Unit testing (TDD), System test, User test, device lab test, A\B testing.
 
 ### Analyseren
 
-In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren en formuleer je een aantal uitgangspunten waar je ontwerp aan moet voldoen.
+In de analyse fase onderzoek en inventariseer je wat er moet gebeuren om een taak uit te voeren. Er zijn verschillende technieken die je hierbij kunt gebruiken. De aanpak verschilt per sprint afhankelijk van de fase in je project. 
 
-Grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
+Als je voor de eerste keer met een team samenwerkt is het handig om een [teamcanvas](#teamcanvas) in te vullen om afspraken te maken en [conventies](#conventies) vast te stellen. Vaak spreek je de opdrachtgever in een [briefing en debriefing](#briefing-en-debriefing) sessie.
 
-Bij analyse hoort bijvoorbeeld briefing, debriefing, planning  en functionaliteiten beschrijven, job stories schrijven en burnpoints bepalen. 
-Analyseer de briefing. Breng het probleem in kaart en kies een belangrijk gebied om op te focussen qua oplossing. 
-Debriefing schrijven, probleem definitie, planning bepalen. En communiceren. 
-Visual thinking, schetsen
+#### Teamcanvas
 
-- Briefing/debriefing https://www.joho.org/en/hoe-stel-je-een-goede-briefing-en-debriefing-onderzoeksomschrijving-en-terugkoppeling-daarop-op
-- 5 Tips For Writing A Job Story https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9
-- visual thinking
-- Styleguides en design systems https://www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems/where-to-start?u=2132228
+Een raamwerk dat helpt bij het ontwikkelen en uitlijnen van hun teamdynamiek. Met aandacht invullen helpt teams bij:
+- Definiëren van doelen voor het team en voor individuele teamleden;
+- Afspraken over kernwaarden en gedragsregels;
+- In kaart brengen van sterke en zwakke punten;
+- Bespreken van behoeften en verwachtingen.
 
-#### Teamcanvas
+Lees meer op: [https://www.theteamcanvas.com/](https://www.theteamcanvas.com/)
 
 #### Conventies
 
 Code Conventies, naamgeving, etc…
 
 BEM, CUBE etc.
 
-#### Briefing en Debriefing
+- Styleguides en design systems https://www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems/where-to-start?u=2132228
+
+#### Briefing en debriefing
 
 Briefing, Gesprek opdrachtgever
 
+- Briefing/debriefing https://www.joho.org/en/hoe-stel-je-een-goede-briefing-en-debriefing-onderzoeksomschrijving-en-terugkoppeling-daarop-op
+
 #### Contentanalyse
 
 Welke gegevens zijn beschikbaar, welke moeten gemaakt worden
 
 #### Projectbord inrichten
 
-Github Projects, Trello, Linear.app
+Github Projects, Trello, Linear.app, Todo List
 
 #### Projectinrichting
 
 Github, forks, boilerplates
 
-##### Taken vaststellen
+#### Taken vaststellen
 
 User scenario’s, User Stories, Job Stories
-Definition of Done, Todo List
+Definition of Done
+
+- User scenario's https://usabilla.com/blog/how-user-scenarios-help-to-improve-your-ux/
+- 5 Tips For Writing A Job Story https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9
 
-##### Planning poker
+#### Planning poker
 
 Planning Poker
 
-##### MoSCoW Prioritering
+#### MoSCoW Prioritering
 
 Must-haves\
 Should-haves\
 Could-haves\
 Want to have but will not have this sprint
 
-#### Budget
+#### Budgetten
 
 Beschikbare uren voor het project
 
 Performance budget, hoeveel seconden mag een site inladen op welke snelheid. Welke waarden voor TFP..
 
 a11y budget, welke WCAG standaard moet gehaald worden A+, A++, A+++
 
-#### Tech-stack vaststellen
+#### Tech-stack bepalen
 
 Onderbouwen met valide argumenten
 
 ### Ontwerpen
 
-Bij de start van deze fase weet je wat het doel en het resultaat van je project zijn.
+Bij de start van deze fase ken je het doel, beoogde resultaat en aanwezige materiaal voor jouw project. Je weet welke eisen opdrachtgever, eindgebruikers en andere belangrijke partijen aan het resultaat stellen. Het doel van de ontwerpfase is het maken van een ontwerp om te verkennen wat mogelijke oplossingsrichtingen zijn en een duidelijk beeld te vormen wat je gaat maken.
 
-Je weet ook welke eisen de opdrachtgever en andere belangrijke partijen aan het resultaat stellen (Wat moet het kunnen en wat niet? Waar moet men rekening mee houden? Etc.)
+Soms maak je het ontwerp van een website *from scratch* maar in het frontend-vak krijg je vaak een ontwerp of huisstijl aangeleverd. Doorgaans is dit ontwerp onvolledig of slechts op één resolutie uitgewerkt. Heel af en toe is het ontwerp goed uitgewerkt en zijn alle *states* van (micro)interacties en transities tussen pagina’s ontworpen of beschreven. Als frontender neem je doorlopend ontwerpbeslissingen met betrekking tot structuur (semantiek), flow (breakpoints), (micro)interacties, animaties, toegankelijkheid en prestaties.
 
-Nu wordt het tijd om te kijken hoe het resultaat eruit zou kunnen zien.
+Aan het einde van de ontwerpfase is duidelijk hoe het resultaat van dit project eruit zal zien. Je maakt keuzes en evenutele alternatieve ontwerpen vallen af.
 
-Dit is een belangrijk moment in het project. Voor veel opdrachtgevers geldt dat ze nu pas duidelijk krijgen hoe het resultaat eruit zal zien. En dat is een moment waarop veel opdrachtgevers veel duidelijker kunnen aangeven wat ze wel en niet willen.
-https://werken-aan-projecten.nl/fasen-project/ontwerpfase/
+~~In de ontwerpfase maakt een frontender idee-schetsen, wireframes, wireflows, break-down schetsen, site-maps en actor-diagrams. Maar ook inspiratie opdoen, patterns onderzoeken en ontwerp variaties maken... User scenario's bedenken, Customer Journey mapping, Job stories onderzoeken, Wireframes, wireflows, break-down schetsen, actor-diagrams maken.~~
 
-Het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
-
-In de ontwerpfase moet een frontender wireframes, wireflows, break-down schetsen en actor-diagrams kunnen maken. Maar ook inspiratie opdoen, patterns onderzoeken en ontwerp variaties maken...
-User scenario's bedenken, Customer Journey mapping, Job stories onderzoeken, Wireframes, wireflows, break-down schetsen, actor-diagrams maken.
-
-
-- User scenario's https://usabilla.com/blog/how-user-scenarios-help-to-improve-your-ux/
-- Using Customer Journey Maps to Improve Customer Experience https://hbr.org/2010/11/using-customer-journey-maps-to
-- Wireflows: A UX Deliverable for Workflows and Apps https://www.nngroup.com/articles/wireflows/
-- Wireframing User Flow with Wireflows https://balsamiq.com/learn/articles/wireflows/
-- varieren
+#### Visual Thinking
 
-**Interaction Engineering**
-- [Design for Fingers, Touch, and People - Steven Hoober](https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php)
-- UI stack https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/ + initial state
-- Activity Diagram
+Visual thinking leert studenten en docenten hun gedachten en doelen te verbeelden. Het helpt ze bij het creëren van overzicht en het overbrengen van hun boodschap. Kijk voor een overzicht van tekenmethodes op [visualthinking.school](https://visualthinking.school)
 
 #### Ideation
 
 Technieken gericht op het genereren van ideeën. 
 
-##### StyleTile
 ##### Moodboard
+
+
+
+##### Style Tile
+
+Een *style tile* bestaat uit lettertypen, kleuren en interface-elementen die de essentie van een visueel merk voor het web communiceren. Ze helpen een gemeenschappelijke visuele taal te vormen tussen ontwerpers en belanghebbenden binnen een project kunnen helpen bij het vaststellen van voorkeuren en doelen van de opdrachtgever. Kijk voor meer uitleg en voorbeelden op [styletil.es](https://styletil.es/)
+
 ##### Morphological Chart
+
 ##### Harris Profile
 
 #### Modelling
@@ -151,9 +148,17 @@ Technieken gericht op het genereren van ideeën.
 ##### Sitemap (Hierarchie)
 ##### Breakdown Schets
 ##### Wireframe
+
+Wireframing User Flow with Wireflows https://balsamiq.com/learn/articles/wireflows/
+
 ##### Wireflow
+
+Wireflows: A UX Deliverable for Workflows and Apps https://www.nngroup.com/articles/wireflows/
+
 ##### Datamodel
 
+##### Activity Diagram
+
 #### Schetsen
 ##### Low-fi schetsen
 Pen en papier, Materiaal
@@ -163,9 +168,18 @@ Figma, Adobe XD
 
 #### Principes
 ##### Atomic Design
+
+[atomic design @ bradfrost.com](https://bradfrost.com/blog/post/atomic-web-design/)
+
 ##### Not ignoring the UI-Stack
+
+UI stack https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/ + initial state
+
 ##### Divergeren Convergeren
 ##### Responsive Design
+
+[Design for Fingers, Touch, and People - Steven Hoober](https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php)
+
 ##### Kleuren en contrast
 ##### Hierarchie
 ##### Afstand/Nabijheid

docs/reflectie.md

@@ -278,13 +278,13 @@ Uit NVAO stuk:
 
 #### Cohort 2022-23
 
-Alle afstudeerwerken…
+4 afstudeerwerken…
 
 Screenshot en beschrijving van de eindopdrachten en links naar dossiers (achter login).
 
 #### Cohort 2023-24
 
-Selectie afstudeerwerken…
+6 afstudeerwerken…
 
 Screenshot en beschrijving van een selectie eindopdrachten en links naar dossiers (achter login).
 
@@ -300,3 +300,8 @@ Boudewijn, Daan, Daphne, Finn, Justin, Matthijs, Shauri
 
 wordt tzt. aangevuld met nieuwe inzichten.
 
+## Studenten aan het woord
+
+Welke onderwerpen verdienen nog aandacht en zijn hierboven niet aangestipt?
+
+Wat vertel jij over je opleiding op een feestje?