kosterm14/lets-jam-webapplicatie

Ontwerp en ontwikkel een complexe, gebruiksvriendelijke en interactieve webapplicatie op basis van een bestaande api of een zelf in te richten headless CMS

Visual Thinking

📚 Inhoudsopgave

• Beschrijving
• Kenmerken
• Bronnen
• Licentie

🗒️ Beschrijving

Visual thinking 🖌️:

Wij gaan de website van Visual Thinking verbeteren en aanvullen.

💻👨🏻‍💻👨🏼‍💻 Gebruik

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.

👩🏼‍💻👩🏾‍💻👨🏻‍💻👨🏼‍💻 Kenmerken

Lijst met gebruikte tools, technieken en communicatie middelen. Dit project is gemaakt met Sveltekit en Hygraph.

Sveltekit: Dit is een framework. SvelteKit biedt extra mogelijkheden bovenop Svelte, zoals routing, statische site generation (SSG) en server-side rendering (SSR).

Hygraph: Dit is een headless CMS. Hierin heeft Charley al haar data staan.

• TOOLS 🧰:
• VSCode
• Pen & Papier
• Laptop

• GEBRUIKTE TECHNIEKEN 🛠️:
• HTML
• CSS
• Javascript
• Sveltekit
• Hygraph

• COMMUNICATIE MIDDELEN 🗣️:
• Microsoft Teams
• Whatsapp

🌐 Bronnen

• https://github.com//
• https://www.google.nl/

🔒 Licentie

This work is licensed under GNU GPLv3.

lets-jam-webapplicatie's Issues

Header

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar
• Contrast test

Is het component performant?

• Lighthouse test
• Code gevalideerd

Loading screen - Feedback oplevering verwerken

Kennisclips component: Video implementeren

Tekenruimte: Tekentools uitklap ook tablet scherm?

Artikelen homepagina component: responsive maken (tablet)

Artikelen homepagina

Wat moet er nog gebeuren om het af te maken**

Is het component responsive en voldoet het aan de huisstijl?

Ik was ermee bezig maar moet nu het in grid maken want flexbox werkt niet

• Mobile
• Desktop
• Tablet

Voldoet het component aan de coding standards?

Ja ik heb aan de huisstijl gehouden.

• Huistijl aanhouden

Is het component toegankelijk?

Nee moet nog een keer testen uitvoeren.

• Pagespeed
• Lighthouse
• Tab
• Screenreader

Is het component performant?

Ik moet nog een keer testen uitvoeren

• Image zijn convert naar webp
• Pagespeed
• Lighthouse

Over pagina

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar
• Contrast test

Is het component performant?

• Lighthouse test
• Code gevalideerd

Artikelen homepagina component: detailpagina’s linken aan buttons

Tekenmethodes detailpage: Mobile first beginnen new design

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar

Is het component performant?

• Lighthouse test
• Code gevalideerd

Kennisclips component: Headings centreren en Huisstijl checken

Tekenruimte: Responsive verbeteren

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar

Is het component performant?

• Lighthouse test
• Code gevalideerd

Minicursussen - Responsive maken (Mobile)

Minicursussen - Tekst toevoegen

Detailpagina component: img implementeren in hygraph

Artikelen homepagina component: data img ophalen in mijn code

Homepage

Is het component responsive en voldoet het aan de huisstijl?
[x] Component is responsive voor mobiel
[x] Component is responsive voor tablet
[x] Component voldoet aan de huisstijl
Voldoet het component aan de coding standards?
[ ]
Is het component toegankelijk?
[x] Component is tabbaar
[ ]
[ ]
Is het component performant?
[ ]
[ ]
[ ]

Kennisclips component: Grijse achtergrond implementeren

Detailpagina component: responsive maken (desktop)

Website huistijl bij alle paginas hetzelfde zijn

Kennisclips component: Clips Responsive

Project board bijhouden tot week drie

Detailpagina component: tekst implementeren in hygraph

Homepage

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar
• Contrast test

Is het component performant?

• Lighthouse test
• Code gevalideerd

Artikelen homepagina component: tekst implementeren in hygraph

Minicursussen - Gif's werkend krijgen

Project board inrichten

Hygraph: youtube link implementeren

Artikelen detailpagina

Wat moet er nog gebeuren om het af te maken**

Is het component responsive en voldoet het aan de huisstijl?

Het component is nog niet responsive.

• Mobile
• Desktop
• Tablet

Voldoet het component aan de coding standards?

Nee nog niet.

• Huisstijl aanhouden
• Prototype aanhouden

Is het component toegankelijk?

Nee moet nog testen uitvoeren.

• Pagespeed
• Lighthouse
• Tab
• Screenreader

Is het component performant?

Nee moet nog testen uitvoeren.

• Pagespeed
• Lighthouse

Minicursussen - Opzet maken en taak onderzoeken

Detailpagina component: responsive maken (tablet)

Tekenmethodes detailpage: Prototype namaken

Mini curcussen

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar
• Contrast test

Is het component performant?

• Lighthouse test
• Code gevalideerd

Home page - Feedback oplevering verwerken

Tekenmethodes: Foto's categorieën terugplaatsen

Loading screen

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar
• Contrast test

Is het component performant?

• Lighthouse test
• Code gevalideerd

Tekenruimte: Meerdere tekentools toevoegen

Kennisclips component: P text veranderen naar wat in de prototype straat

Video carasoul component: Responsive mobile

Kennisclips component: Witruimte tussen nav en clips

Responsive issue/bug - nazneen

@Nazneen05x Er komen te veel kaarten naast elkaar op mijn scherm. Dit betekend dat hij nog niet zo goed respnsive werkt. Kijk hier nogmaals naar

Kijk naar deze stackoverflow post: https://stackoverflow.com/questions/65197577/responsive-layout-with-3-items-per-row-on-larger-screens-and-1-item-per-row-on-s

Over page - Feedback oplevering verwerken

Minicursussen - Responsive maken (Tablet)

Tekenmethodes: Responsive afmaken

Is het component responsive en voldoet het aan de huisstijl?

• Component is responsive voor mobiel
• Component is responsive voor tablet
• Component voldoet aan de huisstijl

Voldoet het component aan de coding standards?

• Code conventies gevolgd

Is het component toegankelijk?

• Component is tab baar

Is het component performant?

• Lighthouse test
• Code gevalideerd

Detailpagina component: responsive maken (mobile)

Detailpagina component: data img ophalen in mijn code

Artikelen homepagina component: responsive maken (desktop)

Artikelen homepagina component: img implementeren in hygraph

Artikelen homepagina component: responsive maken (mobile)

Detailpagina component: Stijlen (css)

Video carasoul component: Videos uit hygraph halen