Het web is een geweldige plek en de beschikbare technologieën ervan zijn vandaag de dag krachtiger dan ooit tevoren. De kracht van het web ligt in het feit dat het een platform is dat voor iedereen beschikbaar is en dat het gebaseerd is op open standaarden. De technologieën worden ontworpen en gespecificeerd op basis van consensus en zijn niet in handen van één enkele entiteit.
Desondanks zijn er veel mensen en bedrijven die vinden dat het internet niet voldoet aan hun behoeften. Dit blijkt uit de pogingen van grote techbedrijven om hun eigen afgesloten ecosystemen te creëren. Ze streven hiermee naar controle over zowel de gebruikerservaring als de gegenereerde data.
In dit vier weken durende vak zullen we de kracht van het web ervaren en kijken hoe we (mobiele) web apps kunnen maken die net zo aantrekkelijk zijn als native mobiele apps. We beginnen met het maken van een server-side gerenderde applicatie waarbij we geleidelijk de gebruikerservaring verbeteren met relevante beschikbare web API's.
Na deze cursus zul je:
- In staat zijn om een server-side gerenderde applicatie te maken.
- In staat zijn om een enerverende gebruikerservaring te creëren.
- Een breder begrip hebben van het web en zijn mogelijkheden.
In dit vak zullen we een van de meest voorkomende app-concepten van vandaag gebruiken en ontdekken dat we deze kunnen maken met moderne webtechnologie.
Voorbeelden:
- Maak je eigen streamingplatform (Netflix/Spotify).
- Maak je eigen doom-scroll-app (Instagram/TikTok).
- Maak je eigen chatapplicatie (WhatsApp/Signal).
- Een andere app die je zelf leuk vindt...
Voorbeeld content API's die je kan gebruiken:
Voorbeelden van Web API's die je kan gebruiken:
- Page Transition API voor animaties tusse npagina's
- Web Animations API voor complexe animaties
- Service Worker API voor installable web apps
- Web Push API voor push notifications
- Server sent events voor realtime functionaliteit
- Geolocation API
- Web Speech API
- Web Share API voor sharen van content binnen de context van de gebruiker
- ...
De lijst is eindeloos, laat je vooral inspireren op de overzichtspagina van MDN.
Je zal beoordeeld worden op basis van je code, creativiteit en je gedocumenteerde proces. Om het vak te halen zal je aan de 3 criteria hieronder moeten voldoen. Een hoger cijfer kan je halen door verder te gaan dan de basis.
| Tekortkomingen | Criterium | Verbeteringen |
|---|---|---|
Project - Je app werkt en is online beschikbaar. Daarnaast heb je je concept, technologieen, gebruikte Web API's en proces duidelijk gedocumenteerd in je README.md. |
||
| Functionaliteit - Je hebt minstens een overzicht en een detailpagina. Hoe meer dynamischer je functionaliteit.hoe beter. | ||
| Enhancements - Je laat zien dat je begrijpt hoe het web werkt door meerdere Web API's te gebruiken om een aantrekkelijke gebruikerservaring neer te zetten. Je gebruikt je eigen creativiteit om iets unieks neer te zetten. |
| Planning | Maandag | Dinsdag | Vrijdag |
|---|---|---|---|
| Week 1 - Kickoff & concept | Pasen | Introductie en uitleg | Feedback gesprekken |
| Week 2 - The baseline | College + workshops | Workshops | Feedback gesprekken |
| Week 3 - Enhance | College + workshops | Workshops | Feedback gesprekken |
| Week 4 - Enhance & wrap up | Individuele vragen | Individuele vragen | Beoordelingsgesprekken |
- Om serverside te kunnen renderen maak ik gebruik van TinyHttp, maar je kan ook kiezen voor Express.
- Voor templating maak ik gebruik van LiquidJS, maar je kan ook kiezen voor EJS.
- Voor build tooling(CSS en JS) maak ik gebruik van Vite.
Voel je vrij om je eigen technolgieën te kiezen, zolang je maar kan uitleggen waarom je deze hebt gekozen en zolang je geen gebruik maakt van een framework zoals React, Vue, Svelte, Angular, etc.