The-web-is-for-everyone-interactive-functionality Vini Mini

Ontwerp en maak voor een opdrachtgever een interactieve toepassing die voor iedereen toegankelijk is.

#13 Als ouder wil ik in een dagboek aantekeningen kunnen maken zodat ik niet vergeet wat er is gebeurd.

Ik heb helaas niet het dagboek kunnen maken omdat ik alleen kreeg te horen dat we iets met notities moesten gaan doen. Daarom heb ik deze sprint de focus gelegd op het maken van notities en leren omgaan met POST.

Inhoudsopgave

• Beschrijving
• Installatie
• Poster visual
• Live link
• Checklist
• Licentie

Beschrijving

Elke frontender bij FDND heeft de taak gekregen om met node, een server-side website te maken voor de gekozen opdrachtgever. Elke opdrachtgever heeft zijn/haar eigen api waar je alle benodigde data uit moet halen, en laat zien op de website. In deze sprint stond toegankelijkheid centraal. Wat doe je als er mensen zijn met een hele oude apparaat, kunnen ze dan nog wel door de website heen navigeren? Daarnaast stond POSTEN ook centraal deze sprint. Een manier om gebruikers iets te laten plaatsen op de website.

Installatie

1. Download de code via de zip
2. Pak het bestand uit
3. Open het uitgepakte bestand met Visual Studio Code
4. Open de terminal
5. Typ in: npm install en installeer de benodigde packages
6. Nadat de installatie klaar is, typ nogmaals in de terminal: npm start
7. Je krijgt helemaal onderaan een link te zien, wat als volgt, gaat: http://localhost:8000
8. Klik op de link en bekijk het project

Poster visual

🖥️ Desktop

📱 Mobiel

Live link

https://eager-teal-handkerchief.cyclic.app/

Checklist

✅ Wat er wel is gelukt:

• Een interactieve functionaliteit ontworpen en gemaakt met Node, Express en EJS en een REST API en client-side JS, CSS en HTML
• Gebruikers kunnen iets achterlaten op de website (user generated content)
• De website is online gepubliceerd
• Ik heb gewerkt volgens de verschillende fases van de development-lifecycle en ik heb mijn proces bijgehouden in de Wiki
• Je hebt je werk getest in verschillende browsers en devices en de test gedocumenteerd in je wiki
• Ik heb comments in mijn Node-code waarmee de server-side code is uitgelegd
• Aangetoond dat ik in de ontwerpfase verschillende methoden en technieken heb ingezet die ervoor zorgen dat ik precies weet wat ik moet bouwen
• Ik heb in de Readme bij 'Kenmerken' uitgelegd wat Progressive Enhancement is en hoe ik dit hebt toegepast

❌ Wat er niet is gelukt:

• Mijn originele schets na bouwen
• Een dagboek maken
• Een pagina maken met "notitie gelukt"
• Een pagina maken met "notitie niet gelukt"

Kenmerken

• HTML
• CSS
• JS
• NODE
• EJS
• EXPRESS
• Progressive enhancement - zorgt ervoor dat de essentiële inhoud en functionaliteit aan zoveel mogelijk gebruikers wordt getoond terwijl de beste ervaring alleen wordt geleverd aan gebruikers van de meest up-to-date browsers die alle code (zoals JavaScript) kan uitvoeren. Dit heb ik gedaan door het essentiële gedeelte van de website (het posten) gebruikelijk te kunnen maken voor mensen met oudere apparaten/browsers.
• JSON
• API
• REST
• Visual Studio Code

Licentie

This work is licensed under GNU GPLv3.