Skip to content

Latest commit

 

History

History
106 lines (68 loc) · 5.62 KB

INSTRUCTIONS.md

File metadata and controls

106 lines (68 loc) · 5.62 KB

Progressive Enhancement

Ontwerp en bouw een website in lagen

Context

Deze deeltaak hoort bij sprint 9 "The Web is for Everyone". Dit is een deeltaak die je individueel uitvoert.

In het college _S09W2-02-Progressive-Enhancement wordt behandeld wat Progressive Enhancement is.

Deze deeltaak hoort bij de leertaak:

Doel van deze opdracht

Één van de mooiste principes van het web is dat iedereen met een computer en een browser het web kan gebruiken. Het web is voor iedereen.

Maar het web is geen gecontroleerde (programmeer) omgeving, je kan er gerust van uit gaan dat niemand precies hetzelfde te zien krijgt als wat jij in je browser ziet. Er zijn technische beperkingen, zoals afmetingen van de browser, type van de browser, versie van de browser, combinatie van browser extensies, grootte van het apparaat, manier van interactie, kwaliteit van de hardware, kwaliteit van het netwerk en er zijn mensen, allemaal verschillende mensen ...

Het doel van deze opdracht is te leren hoe je een website kan ontwerpen en maken met behulp van Progressive Enhancement zodat het voor iedereen toegankelijk is.

Progressive enhancement

Progressive Enhancement is een (coding) strategy waarmee je er voor kan zorgen dat je website het altijd doet.

  1. Eerst bouw je de core functionality van je website in HTML, zo nodig met server-side rendering. De content layer. Zo zorg je er voor dat je website het in de meest eenvoudige vorm goed doet.
  2. Daarna voeg je CSS toe voor feedback voor de gebruiker en om de huisstijl toe te passen. Dit noemen we de presentation layer.
  3. Tot slot voeg je met CSS en JS extra enhancements toe om de User Experience te verbeteren. Als een browser CSS en/of JS niet ondersteunt valt het terug naar laag 1 of 2, zodat de website altijd werkt.

image
The skateboard may be a little slower, but it doesn’t stop the user getting to where they want to go. So, if the user’s browser doesn’t support JavaScript or modern CSS then it doesn’t break - Andy Bell

Werkwijze

Voor deze opdracht ga je een aantal UI componenten ontwerpen, bouwen en testen in verschillende lagen, volgens het principe van Progressive Enhancement.

Fork deze leertaak en ga aan de slag met de files die klaar staan.

Voor elk component staat een HTML-file klaar met een demo video van het eindresultaat. In de HTML van elk component staan wat hints en content die je nodig hebt.

UI componenten

Maak minimaal 3 van onderstaande user interface componenten:

voor sprint 11

Voor sprint 11 is het het interessantst om componenten uit je ontwerp voor de leertaak in sprint 11 te gebruiken. Je mag ook componenten uit bovenstaande lijst gebruiken. Het is een individuele opdracht - dus elke teamlid werkt eigen componenten uit (of maakt een substantieel andere uitwerking van dezelfde component).

Ieder teamlid werkt minimaal 2 componenten uit.

Aanpak (per component)

  1. Beschrijf in eigen woorden wat dit component is, en wat de core functionaliteit is. Gebruik de demo video om een idee te krijgen.
  2. Schets het component en de interactie
  3. Laag 1: Onderzoek welke HTML je voor de core functionaliteit nodig hebt, maak hiervan een breakdownschets, en codeer je HTML (gebruik de hints en content in de code die klaarstaat, MDN en CanIUse).
  4. Test deze HTML versie op verschillende browsers en devices.
  5. Laag 2: Voeg CSS toe, aan de hand van MDN, CanIUse en @supports.
  6. Test deze “enhanced” versie op verschillende browsers en devices.
  7. Laag 3 en verder: Voeg eventueel meer CSS & JS toe, aan de hand van MDN, CanIUse, @supports en feature detection.
  8. Test deze “enhanced” versie(s) op verschillende browsers en devices.
  9. Documenteer je experiment.

voor sprint 11

  1. In sprint 11 is het doel pleasurable (ga lekker los).
  2. Documenteer je experiment.

Bronnen bouwfase

Criteria

Deze opdracht is done als:

  • Je hebt minstens drie interactie componenten uitgewerkt en gedocumenteerd
  • De breakdownschetsen zijn opgenomen in je wiki
  • Bij elke schets staat een korte uitleg van de code
  • Je werk is te bekijken via GitHub Pages