Toetsmatrijs Web Markup

Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of comp.indicatorennummers

Leerdoelen c.q. toetscriteria

C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web

HTML, CSS en Dreamweaver

Weging Aantal vragen % (+ evt. vraagnummers)

Taxonomie

Algemeen De student leert schone code schrijven conform de webrichtlijnen van XHTML, HTML5 en CSS(3) (zie ook http://www.webrichtlijnen.nl/wat-en-waarom voor meer informatie) met Dreamweaver. Een goed gestructureerd bestandsbeheer is van groot belang bij websites ontwikkelen. Site management en FTP zijn behulpzame en onmisbare functies die Dreamweaver biedt. Goed kunnen werken met gescheiden structuur (HTML) en vormgeving (CSS) is een vereiste voor iedere webbouwer. De student leert elke week nieuwe HTML en CSS. Er wordt gewerkt met het boek ‘Websites Ontwikkelen met HTML, CSS en Dreamweaver’.

De beoordeling 1. De beoordeling en toekenning van de punten gaat via de opdrachten die de student maakt steeds in de week die volgt op de les waarin de stof is behandeld; 2. Iedere opdracht begint in een aparte nieuw te maken webpagina; 3. Deadline: de opdrachten dienen online te staan op de dag van de volgende les op het hiervoor door de student opgegeven webadres; 4. Indien de opdracht niet online staat krijgt de student 0 punten voor het betreffende onderdeel.

1

competentienummers of comp.indicatorennummers


1. Hoofdstuk 1 t/m 6 – Introductie HTML, CSS en Dreamweaver De student leert werken met: 1.1. Bestandsbeheer en Dreamweaver Site Management. De student zet de bestandstructuur op de webruimte als volgt op: • •

Ieder vak van dit blok waarvoor opdrachten gemaakt worden, heeft een eigen map met om te beginnen 1 webpagina. Op die ene webpagina van ieder vak staat een korte beschrijving van het vak en een menu met links naar de onderdelen die t.z.t. voor dat vak gemaakt worden. Zo zal er voor Web Markup in dat menu iets komen te staan in de geest van: o o o o o o

Opdracht 1 Opdracht 2 Opdracht 3 Opdracht 4 Opdracht 5 Opdracht 6

o

Op de homepage van de webruimte (dus hoogste niveau in de root folder) staat een korte beschrijving van het gehele blok met een menu met duidelijke links naar de diverse webpagina per vak (de pagina die hierboven beschreven staat onder 2).


20

De student past het geleerde uit hoofdstuk 1 t/m 6 toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Taxonomie

Begrip en toepassen

1.2. FTP De webruimte: de student geeft in week 36 aan Ellen Leen de URL (het webadres) door waar het werk voor dit blok komt te staan, zodat zij dit kan noteren op Blackboard en zorgt dat hij/zij dit tijdens de lessen beschikbaar heeft. Bij https://deds.nl/ is gratis webruimte verkrijgbaar zonder reclame. De student is 2




Taxonomie

uiteraard ook vrij om een eigen webserver te kiezen zolang deze dat wat redelijkerwijs verwacht kan worden ook ondersteunt. 1.3. 1.4. 1.5. 1.6. 1.7. 1.8. 1.9.

De webrichtlijnen De syntax (schrijfwijze) van XHTML, HTML5 en CSS De structuur van de pagina in HTML Tekst en semantiek (beschrijvende markering), Tekstelementen CSS en stylesheets Tekstelementen vormgeven met CSS

2. Hoofdstuk 7 – Tekst vormgeven. De student leert werken met: • •

(pseudo)classes, padding, margin en borders Hetzelfde tekstelement (bijv. een alinea of een link) op diverse plaatsen in hetzelfde document een andere vormgeving (bijv. een kleur)geven

•

Wiselende vormgeving (bijv. kleur, onderstrepen) van de verschillende staten van hyperlinks: a:link, a:visited, a:hover, a:active

3. Hoofdstuk 8 en 9 – CSS Lay-outs De student leert werken met: •

Afbeeldingen in HTML en CSS

•

Inline en block-level

•

Elementen naast elkaar weergeven met float

•

Elementen die volgen na elementen met float, onder elkaar plaatsen met clear

15

De student past het geleerde uit hoofdstuk 7 toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Begrip en toepassen

20

De student past het geleerde uit hoofdstuk 8 en 9 toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Begrip en toepassen

3



•

Tekstblokken naast elkaar plaatsen

•

Het boxmodel

•

Lay-outs maken met float

•

Centreren van je webpagina

•

Onderscheid tussen de verschillende vormen van layout: static, liquid en elastic design.

•

Conditional comments: aparte CSS voor Internet Explorer

•

Commentaar toevoegen in de HTML-code en de stylesheet

•

Basis lay-out maken die op de belangrijkste browsers gelijk wordt weergegeven (crossbrowser)

4. Hoofdstuk 10, 11, oef.12.1 en oef.12.2 – Tabellen en Lijsten De student leert werken met:

•

Het doel van tabellen

•

Het doel van lijsten

•

Samengestelde kiezers

•

Een menu in een lijst

•

Een basistabel en uitgewerkte tabel

•

Ingesloten lijsten

•

Genummerde en ongenummerde lijsten crossbrowser


15

De student past het geleerde uit hoofdstuk 10, 11 en 12 (oef 12,1 en 12.2) toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Taxonomie

Begrip en toepassen

4



•


Taxonomie

Een achtergrondafbeelding als opsommingsteken o

Horizontaal en vertikaal menu in een lijst

5. Hoofdstuk 12 en 13 – Lagen en Valideren De student leert werken met:

• •

• •

Begrip en toepassen

15

De student past het geleerde uit de les toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Begrip en toepassen

De grammatica van de code controleren (valideren met de W3C validator)

Het HTML5 doctype, de nieuwe semantische lay-out elementen i.c.m de HTML5 shiv Bronnen:

•

De student past het geleerde uit hoofdstuk 12 en 13 toe in een zelf te maken pagina op een duidelijk aantoonbare en representatieve wijze

Absoluut positioneren Positioneren van divs (en andere elementen) met CSS: plaats de elementen op iedere gewenste plek op het beeldscherm Volgorde aanpassen van de stapeling van de elementen

6. HTML5 en CSS3 De student leert werken met:

•

15

http://www.5stepstohtml5.com/ geeft de student een indruk van de grote sprong voorwaarts met HTML5. De student wordt verwacht om de informatie van de volgende slides werkelijk toe te passen in dit blok: - Step 1: t/m slide 1.4 (met de nadruk op de nieuwe semantische layout elementen die in slide 4 getoond worden) - Step 3: t/m slide 3.2 http://www.sitepoint.com/a-basic-html5-template licht de basisstructuur toe van de HTML5 webpagina

5




Taxonomie

Het gebruik van ARIA landmark roles (role attributen) ten behoeve van screenreaders volgens dit artikel: http://www.paciellogroup.com/blog/2010/10/using-wai-arialandmark-roles/ CSS3 eigenschappen zoals border-radius, box-shadow, text-shadow, RGBA, transitions, transform, gradients, multiple colums, first-child, lastchild, @font-face, media-queries volgens de principes van progressive enhancement (dit laatste is belangrijk!) Bronnen: • • • • •

http://www.css3generator.com/ http://css3-tutorial.com/ http://www.css3.info/ http://sixrevisions.com/web-development/progressive-enhancement/ http://caniuse.com/

7. Hoofdstuk 14 en 15 - Formulieren en Dreamweaver Templates De student leert werken met semantische formulieren en met Dreamweaver templates

6



1


Taxonomie

De cesuur (zak/slaaggrens) van de toets is:

60 %

Toetsvorm van deze toets (/delen van de toets):

Iedere les eindigt met een huiswerkopdracht. Deze opdracht kan uitsluitend de volgende les worden ingeleverd. De student krijgt feedback en een pass of fail.

1

Bijvoorbeeld absolute cesuur van 50, 55 of 60%. = Bij welk beheersingsniveau heeft de student een voldoende?

7

Toetsmatrijs Web Markup

Recommend Documents