Skip to content

Latest commit

 

History

History

opdracht2

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

Browser Technologies

//Robuuste, toegankelijke websites leren bouwen …

Opdracht 2 - 1, 2, 3 Feature Detectie

//Wat laat je zien als een browser of gebruiker 'enhancement' niet kan tonen of zien? Hoe doe je Feature Detection en wat doe je als een techniek niet werkt?

Werk 2 componenten uit in een demo. Je onderzoekt hoe je verschillende features door verschillende browsers worden ondersteund en hoe je voor goede fallback kan zorgen. Gebruik html5test.com, css3test.com en kangax.github.io/compat-table/es6/

  • Per component: Schets hoe het component moet gaan werken en hoe het eruit komt te zien. Verzamel uitleg en artikelen. Bouw een (kleine) progressive enhanced demo (zonder extra tools, gewoon in 1 HTML file inclusief CSS en Javascript, zo simpel mogelijk). Test het component op verschillende browsers en het Device Lab. Polyfills en NPM is niet toegestaan.
  • Post je 2 demo’s op GitHub met uitleg in een README file. Wat is het component? Voeg je schets toe. Welke browsers/devices ondersteunen deze wel/niet? Hoe zorg je dat de Core Functionaliteit overal werkt?

Beoordelingscriteria

  • 2 componenten zijn onderzocht en er is een demo gemaakt.
  • De code staat in een repository op GitHub.
  • Een Readme is toegevoegd met, per component:
    • Een beschrijving van het component.
    • Een schets van de functionaliteit.
    • Bronnen van uitleg en gebruikte artikelen.
    • Welke browsers/devices ondersteunen deze wel/niet.
    • Een beschrijving hoe je ervoor hebt gezorgd dat de Core Functionalitiet het overal doet.

Componenten

Kies minimaal twee componenten. Één van de Romeinse en één van de Arabische serie.

  • i. FAQ lijst, een vragen lijst over de verschillende minorvakken
  • ii. Tabbladen, de 5 studenten met de meeste kudo’s
  • iii. Accordeon, de drie favoriete docenten met meer informatie
  • iv. Responsive menu, dat een hamburger wordt op een klein scherm
  • v. … egen idee? Kom maar overleggen
  1. Carrousel van een aantal aankondigingen (met tekst en links in de tekst)
  2. Link + overlay/modal-window met algemene voorwaarden of extra specs
  3. Image picker + preview, voor als je een profiel foto wil uploaden naar je favoriete sociale netwerk
  4. Routebeschrijving van huis naarKSH , die stap voor stap op een kaart laat zien waar je heen moet
  5. … eigen idee? Even overleggen