Examen Multimedia

Doelstelling

In de ECTS fiche dat de eindevaluatie bestaat uit twee delen:

1. maken van een website
2. theorie toepassen in kleine opdrachten

Deze opdracht bevat de richtlijnen voor het maken van een website.

Een website maken

Bepaal zelf een thema. Een thema kan van alles zijn: reizen, auto's, boeken, ...

Voor het thema werk je de volgende pagina's uit:

• een home pagina waarin je het thema presenteert
• een artikel pagina met uitleg over de inhoud van het thema; je baseert je daarvoor op de Bloemlezing Marsman;
• een registratiepagina met minstens 1 tekstvak, een groep keuzerondjes, een groep selectievakken, een keuzlijst, een textgebied, een schuifbalk, datumtekstvak;
• een geluids- en of beeldfragment

Richtlijnen

1. Maak een wireframe voor elke pagina en plaats die in je Word dossier.
2. Gebruik semantische HTML
   1. Elke pagina is een welgevormd html document met een juiste semantische indeling. Gebruik de volgende html elemeten:
   2. meta
   3. header
   4. footer
   5. article
   6. section
   7. h1 .. h6
   8. nav
   9. aside
   10. figure
   11. hyperlins
       1. interne
       2. externe
3. Gebruik de volgende sturctuurelementen:
   1. ol
   2. ul
   3. table
   4. form
4. Functionele elementen
   1. horizontaal menu
   2. vertikaal menu een van die menu's gebruikt de target pseudoklasse om content binnen dezelfde pagina te tonen of te verberge
   3. functionele tabel: zoek een type tabel en maak CSS zodat de css het type tabel zo juist mogelijk weerspiegelt: bijvoorbeeld een tabel met een balans is anders dan een tabel met prijzen, of een kalender (hou rekening met lettertype, randen, witruimte, grootte lettertype) Gebruik caption en figure indien nodig. Noem het type tabel dat je wilt op de webpagina plaatsen
   4. functionele form; verplichte elementen:
      1. input (text, button, radio, file, email, range, number)
      2. checkbox
      3. select
      4. button
      5. attributen:
         1. required
         2. placeholder
         3. value
         4. name
         5. id
5. CSS
   1. Maak gebruik van inline, interne en externe css.
   2. Kies een kleurenpalet en pas het toe. Plaats het kleurenpalet in je Word dossier met enkele toelichtingen.
   3. Lettertype:
      1. je kiest twee lettertypes en je kan uitleggen waarom die twee. Leg je keuze uit in je Word dossier.
      2. je bepaalt het lettertype grootte voor elk HTML element volgens een verhouding t.o.v. van de standaard van de browser. Stel daar een structuur voor op (denk ook aan tabellen, headings,...). Maak je een blauwdruk, plan met de details van lettertype voor elke html element. Geef daarvan een overzicht in je Word dossier.
   4. kies een bepaald box model
   5. gebruik de volgende selectoren:
      1. klassenselector
      2. id-selector
      3. universele selector
      4. nth-child selector
      5. pseudoklasse:
         1. :target
         2. :hover
      6. sibling en descendant selectoren
      7. attribuut selectoren
   6. Transition
      1. zoek op hoe je een transitie maakt in CSS (info vind je op CSS transities)
      2. Gebruik minstens 1 transitie in je website.
   7. Animation (optioneel)
      1. zoek op hoe je een animatie maakt in CSS (info vind je op CSS animaties)
      2. Voeg een image-slider toe in je website (met CSS en niet met JavaScript).
6. PHP
   1. Refactoring van de website: plaats alle htmlblokken, die op meer dan één pagina gebruikt worden, in aparte include bestanden.
   2. Maak een script die de ingetype waarden retourneert.
7. Publishen
   1. Je website staat online (Cloud9)
8. Javascript
   1. Schrijf een scenario voor een animatie en plaats het in je Word dossier. Je mag een bestaande JavaScript animatiescript, die je op het internet gevonden hebt, ook gebruiken. In je dossier leg je dan uit hoe die script in elkaar steekt.
   2. Programmeer het scenario door o.a. gebruik te maken van een timer en/of events.