Skip to content

Latest commit

 

History

History
89 lines (53 loc) · 4.13 KB

INSTRUCTIONS.md

File metadata and controls

89 lines (53 loc) · 4.13 KB
Raw

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.
  2. Daarna voeg je CSS toe voor feedback voor de gebruiker en om de huisstijl toe te passen, de presentation layer.
  3. Tot slot voeg je met CSS en JS extra enhancements toe om de User Experience te verbeteren.

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.

UI componenten

Maak minimaal 3 van onderstaande user interface componenten:

  • Veelgestelde vragen
  • Switch control
  • Mobiel menu
  • Rating
  • Favorieten picker
  • Carrousel
  • File upload met preview
  • Tabbladen

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.

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