Web App From Scratch

Rubric

Deficiency	Criterion	Improvement
	User Interface - you design, build and test the user interface by applying interface design principles
	Code structure - you write modular, consistent and efficient HTML, CSS and JavaScript code by applying structure and best practices. You manage state for the application and the UI
	Data management - you understand how you can work with an external API using asynchronous code. You can retrieve data, manipulate and dynamically convert it to structured html
	Project - your app is working and published on GitHub Pages. Your project is thoroughly documented in the README.md file in your repository.

Toepassing

Wij hebben om een zo consistent mogelijk ontwerp op te leggen bij de opdrachtgevers een workshop georganiseerd samen met CMD Agency waarbij gezamenlijk door middel van co-creation en stemmingen de beste ontwerpen per component hebben uitgezocht. Dit design hebben wij getest bij de opdrachtgevers die deel uitmaken van de doelgroep, en hebben de gegeven feedback verwerkt om tot een eind design te komen waarbij alle partijen tevreden waren. Omdat we met 4 developers componenten gingen maken is de code nieuwe helemaal consistent, hiervoor hebben we een global.css file gemaakt waarbij de marges, font size etc voor defined om het design wel consistent te laten ogen. Data management verwerken wij niet via een api maar een call naar onze CMS prismic. Door middel van prismic hoeven wij vrij weinig data management uit te voeren omdat prismic Gestructureerde HTML objecten oplevert via een API. Hiermee kunnen wij gemakkelijk een website opbouwen door styling en interactie aan de componenten toe te passen.

Reflectie

Ik heb gedurende het project op verschillende manier gemengd met het ontwerp, van bepaalde componenten en soms hele pagina's die in het eindproduct terug te zien zijn. Mijn javascript is met hulp kort en van kwaliteit in VUE.js. Een geheel nieuwe programeer taal. Mijn CSS is consitent, responsive en maakt gebruik van media tags en specafieke oproepingen.

Progressive Web Apps

Rubric

Deficiency	Criterion	Improvement
	Project Your app is published and can be accessed using the browser. Your project is thoroughly documented in the README.md file in your repository. Included are an explanation of client- server rendering, an activity diagram including the Service Worker and a list of enhancements to optimize the critical render path implemented your app.
	Serverside rendering You’ve implemented serverside rendering and have articulated how it works and why you should want it.
	Service Worker You’ve implemented a usefull Service Worker and show it’s working in an activity diagram.
	Critical render path You’ve enhanced the critical render path for a better runtime or percieved performance in multiple ways and have described how you managed to do this.

Toepassing

De gehele website is server side gerenderd in VUE. De website maakt gebruik van een server worker die alle data cached om een zo duurzame laatbaarheid van de website te behalen. En dit maakt offline gebruik ook mogelijk!

self.addEventListener('install', function (e) {
  self.skipWaiting()
})

self.addEventListener('activate', function (e) {
  self.registration.unregister()
    .then(function () {
      return self.clients.matchAll()
    })
    .then(function (clients) {
      clients.forEach(client => client.navigate(client.url))
    })
})

De website is ook te downloaden als een PWA. Werkend met VUE gaat dit makkelijk dan in vanilla JS omdat er bepaalde plugins zijn die je helpen met het maken van een PWA.

De website wordt door middel van een Server Side Rendering geserveerd aan de browser waardoor er zo min mogelijk dynamische content wordt ingeladen, Vervolgens maken wij gebruik van een manifest.json en service-worker die alle pagina’s en content cache’t mocht het internet uitvallen blijft de website beschikbaar. Heeft de gebruiker interesse om de mid-term accreditatie op te slaan op zijn device is dat ook mogelijk.

Reflectie

We hebben er een PWA van gemaakt voor offline gebruik met een cache en serversworker. Dit is niks nieuwe door het vak PWA. Hier had ik geen moeite mee, voor mij ging dit heel soepel en ben ik tevrede op het resultaat op basis van het vak.

Browser Technologies

Rubric

• Student kan de Core functionaliteit van een use case doorgronden
• Student kan uitleggen wat Progressive Enhancement en Feature Detection is en hoe dit toe te passen in Web Development
• De demo is opgebouwd in 3 lagen, volgens het principe van Progressive Enhancement
• De user experience van de demo is goed
• Let op leesbaarheidsregels, contrast en kleuren
• Let op gebruiksvriendelijkheid, zoals affordance en feedback op interactieve elementen
• De meest 'enhanced' versie is super vet, gaaf en h-e-l-e-maal te leuk om te gebruiken

Toepassing

Wanneer javascript uit staat verschijnt er door een no script tag een melding dat de website niet toegankelijk is zonder JS. Dit is omdat de website werkt met een CMS. Wanneer de gebruiker echt niet in staat is om JS aan te schakelen zal de informatie op deze website ook toegankelijk zijn in PDF. De website maakt gebruik van tab, heeft een goed lezende geel/wit/zwart contrast. Dit is ook heel fijn voor lezers met dyslexie.

Reflectie

We hadden iets meer rekening kunnen houden de enhancement, helaas was dit geen priotiteut voor de opdrachtgevers. ook werd er aangegevn dat de doelgroep gebruikt maakt van de nieuwste mac laptops om ons product te gebruiken. Hierbij hebben we gelet op het contrast, leesbaarheid, hover en tab modes en een duidelijke html structuur!

Human Centered Design

Rubric

Ontoereikend	Criteria	Verbetering
	Readme - In de beschrijving van het project staat de opdracht uitgelegd, is het probleem duidelijk beschreven en hoe het probleem is opgelost.
	Design Principles - Student laat zien hoe de Exclusive Design Principles zijn toegepast in het ontwerp. De principes study situation, prioritise identity, ignore conventions en add nonsense zijn goed uitgelegd. Aan de hand van de principes wordt duidelijk gemaakt hoe deze hebben bijgedragen aan het verbeteren van het ontwerp.
	User Needs - Er is een user scenario geschreven dat aansluit bij de identiteit van de test persoon. Er is een duidelijk en volledig user scenario geschreven dat antwoord geeft op de 4 w-vragen: Who? What? How? en Why?
	Testen - Er is minimaal drie keer getest. Er is een verslaglegging van de tests gedaan waarin de test-opzet wordt behandeld en er is een duidelijke conclusie beschreven met do's en dont's over hoe je goed kan testen.
	Testresultaten - Aan de hand van de tests wordt duidelijk gemaakt hoe deze hebben bijgedragen aan het verbeteren van het ontwerp of hoe dit een volgende keer beter of anders kan.

Toepassing

Er is bij elke design iteratie gezeten met de opdrachtgevers die deel uitmaken van de doelgroep om te testen hoe dit voor hun gebruik werkt. Hierbij hebben we leuke animaties toegevoegd om de website niet alleen bruikbaar maar ook levendig te maken. Deze moeten enkel nog verwerkt worden in de eind code. De resultaten van deze onderzoeken zijn genoteerd en verwerkt tot het huidige product. De user’s needs: CMS waardoor de website kan aangepast worden & Een website voor de midterms, worden hier dus behaald. Hierbij is de identiteit van de users, CMD goed terug te zien in de website door het volgen van de huisstijl. Hierbij hebben we een paar eigen iteraties gedaan op deze huisstijl om ons afgescheiden van de CMD website. En het iets meer te laten voelen alsof het voor en door studenten is. Maar het meest belangrijke is dat de informatie op een leuke manier wordt overgebracht ipv van 50 pagina’s aan tekst. Hierbij wordt het voor de doelgroep leuker maar ook makkelijker meer te weten te komen over CMD!

Reflectie

We hebben goed geluisterd naar onze gebruikers en doelgroep, het design meerdere malen getest op verschillende manier en geluisterd naar hun wensen en twijfels. Hierbij komt de indentiteit goed naar voren van onze gebruikers, en CMD. De user's needs hebben we behaald door een werkend CMS op te stellen en tot slot is het ook nog is leuk om te lezen! Hierbij ben ik erg tevreden over het testen en de verschillende design itteraties die we hebben geprobeerd om tot het eindproduct te komen!

Real-Time Web

Rubric

Deficiency	Criterion	Improvement
	Project Your app is working and published on Heroku. Your project is thoroughly documented in the README.md file in your repository. Included are a description of the data-lifecycle, real-time events and external data source used by your app.
	Complexity You’ve implemented enough real-time functionality for us to test your comprehension of the subject. A lot of functionality is self-written. You are able to manipulate online examples live.
	Client-server interaction By interacting with the app, a user can influence the data model of the server in real time by directly modifying data OR by influencing API requests between server and source. The student has set up the data manipulations.
	Data management The server maintains a data model and each client is continuously updated with the correct data.
	Multi-user support Multiple clients can connect to the server. Interaction works as expected and is not dependent on the number of clients. You can explain how your app approaches this.

Toepassing

De website maakt geen gebruik van sockets maar wel van een CMS. Hierbij is er een directe communicatie tussen de CMS server en de website. Als er iets wordt veranderd in de cms en gepubliceerd zal dit in de website verschijnen. Ook wordt er in enkele componenten gebruik gemaakt van v-model. Hierbij maak je gebruik van een constante listener. Waarbij het lijkt alsof het realtime is.

Reflectie

Ik had wel meer willen proberen met real-time-web alleen bood het project daar geen prioriteit aan. Wel heb ik wat geprobeerd met VUe.js en V-models wat lijkt op real-time web aangezien je gebruik maakt van een constante eventlistener. Dit vond ik heel leuk om te leren. En natuurlijk de communicatie tussen de CMS wat geen real-time is maar wel data vanaf twee kanten kan manipuleren.

CSS to the Rescue

Rubric

• Je kunt experimenteren met (voor jou) nieuwe css-technieken - om de mogelijkheden op waarde te schatten en te gebruiken waar gepast.
• Je hebt begrip van de volle kracht en mogelijkheden van CSS. Je laat zien dat CSS meer kan dan allen web pages 'stylen'.
• Je hebt begrip van de interactie-technieken van CSS (en HTML). De UX is aangenaam bruikbaar binnen de gekozen context(en).
• Je hebt begrip hoe progressive enhancement elegant toe te passen. Je laat zien dat je cascade, inheritance en specificity kunt toepassen.

Toepassing

We hebben geëxperimenteerd met 3D en animaties. helaas is dit nog niet aan bod gekomen in de definitieve code. Daarnaast is het overal gebruik gemaakt van custom properties, media screen tags en :before & :after elementen. En maken we gebruik van specifieke aanroepingen zoals :nth-of-type. PE is van werking door middel van het gebruik van SSR waardoor de browser HTML binnenkrijgt dat verfijnd wordt met CSS en JS. De website blijft in werking ookal werkt JS niet, en is ook nog te lezen als CSS er meer is.

Reflectie

Ik heb veel van dit vak toepast zoals de specafieke oproepingen maar ok veel responsiveness trucjes zoals media tags. Ook heb ik veel gespeeld met :before en :after tags omdat ik dit niet veel gebruik maar wel heel waardevol kan zijn ipv images en dan postion:absolute. Ik had wel meer 3d en animaties willen toevoegen als de tijd daar nog voor was.