Deeltaak | component-building-block

[SamaraFellaDina]

Originele bron

Component Building Block

Ontwerp en bouw voor de opdrachtgever een robuust, goed werkend component, waarin de belangen van de eindgebruiker centraal staan.

Context

Deze leertaak hoort bij sprint 16 Don't Repeat Yourself. Dit is een deeltaak die je individueel uitvoert.

In het college Component Building Block wordt behandeld hoe je een component ontwerpt en in Sveltekit kunt realiseren. De focus ligt op het ontwerpen en bouwen van een robuust, goed werkend component, waarin de belangen van de eindgebruiker centraal staan.

Doel van deze opdracht

Je leert hoe je een component ontwerpt en bouwt op basis van web standaarden en de principes van progressive enhancement, toegankelijkheid, responsive design en performance.

Werkwijze

Je doorloopt bij deze opdracht de analyse-, ontwerp-, bouw- en testfase van de development lifecycle. In de workshop behandelen we de web standaarden en principes die je toepast in het component. Het is de bedoeling dat je een superstrak traject volgens het boekje uitvoert en briljante documentatie voor het betreffende component oplevert.

Fork voor deze opdracht de repo, het is een individuele opdracht waarbij je zelf de verantwoording voor de code en documentatie draagt.

• Analyseren Inventariseer met je team welke componenten je kan maken voor de opdracht van de opdrachtgever, verdeel componenten die jullie gaan maken op basis van complexiteit.
• Ontwerpen Onderzoek variaties voor jouw component met behulp van een morphological chart. Bespreek je ideeen met een docent voordat je verder gaat. Als je een GO hebt gekregen werk je verschillende versie van je component uit in Figma. Maak daarna een breakdownschets met de HTML, CSS en JS code voor het component. Schets hoe je responsive, progressive enhancement, performance en toegankelijkheid toepast.
• Bouwen Maak het component in Sveltekit.
• Testen Test het component regelmatig op toegankelijkheid, responsive design en performance en verwerk de feedack.

Criteria

Deze opdracht is done als:

• [ ] Je hebt verschillende versies van je component in detail uitgewerkt in Figma
• [ ] Je hebt een breakdownschets met uitleg hoe je in het component responsive design, progressive enhancement, performance en toegankelijkheid toepast
• [ ] je hebt een component gebouwd op basis van web standaarden, progressive enhancement, toegankelijkheid, responsive design en performance
• [ ] je het het component getest op toegankelijkheid, progressive enhancement, performance en responsive design, en de bevindingen gedocumenteerd in de wiki
• [ ] je hebt een gebruikerstest gedaan, en de bevindingen gedocumenteerd in de wiki

[SamaraFellaDina]

Analyseren

Inventariseer met je team welke componenten je kan maken voor de opdracht van de opdrachtgever, verdeel componenten die jullie gaan maken op basis van complexiteit.

Welke componenten kunnen wij gaan maken?

• Header
• De verschillende grafieken
• De foutmeldingen
  • Hierbij is het belangrijk dat er word gekeken naar een detail die meer informeert over het probleem

Taakverdeling

• @Khdulkadir wilt werken aan de header

• @SamaraFellaDina wilt gaan werken met de grafiek

Bij de sprint review, werd verteld dat bij de pop-up wolkjes met meer info ook een icoon moeten bevatten. Het is mogelijk dus leuk om uit te zoeken

• @J3SS3HVA moet even kijken welk component hij wilt gaan doen

[SamaraFellaDina]

Ontwerpen

Onderzoek variaties voor jouw component met behulp van een morphological chart. Bespreek je ideeen met een docent voordat je verder gaat. Als je een GO hebt gekregen werk je verschillende versie van je component uit in Figma. Maak daarna een breakdownschets met de HTML, CSS en JS code voor het component. Schets hoe je responsive, progressive enhancement, performance en toegankelijkheid toepast.

Maken van een graph chart

@SamaraFellaDina gaat werken aan de soorten foutmeldingen chart

Wat is de bedoeling van deze chart?

De gebruiker wilt in één overzicht zien welke foutmeldingen ter sprake zijn en welke ernstiger zijn dan anderen.

Deze was al aardig af, alleen na wat feedback op vorige sprints is het leuk om te kijken naar verschillende variaties van de chart. Hieronder kan je het verdere onderzoek vinden van het component

• [ ] #13

[J3SS3HVA]

Error result component

@J3SS3HVA Gaat het error result component doen