Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML, CSS en Dreamweaver 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
1. Hoofdstuk 1 t/m 6 Introductie HTML, CSS en Dreamweaver 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: 20 hoofdstuk 1 t/m 6 o Opdracht 1 o Opdracht 2 o Opdracht 3 o Opdracht 4 o Opdracht 5 o 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). 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
uiteraard ook vrij om een eigen webserver te kiezen zolang deze dat wat redelijkerwijs verwacht kan worden ook ondersteunt. 1.3. De webrichtlijnen 1.4. De syntax (schrijf) van XHTML, HTML5 en CSS 1.5. De structuur van de pagina in HTML 1.6. Tekst en semantiek (beschrijvende markering), 1.7. Tekstelementen 1.8. CSS en stylesheets 1.9. Tekstelementen vormgeven met CSS 2. Hoofdstuk 7 Tekst vormgeven. (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 15 hoofdstuk 7 toe in een zelf te maken pagina op een 3. Hoofdstuk 8 en 9 CSS Lay-outs 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 20 hoofdstuk 8 en 9 toe in een zelf te maken pagina op een 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 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 hoofdstuk 10, 11 en 12 (oef 12,1 en 12.2) 4
Een achtergrondafbeelding als opsommingsteken o Horizontaal en vertikaal menu in een lijst 5. Hoofdstuk 12 en 13 Lagen en Valideren 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 De grammatica van de code controleren (valideren met de W3C validator) 15 hoofdstuk 12 en 13 6. HTML5 en CSS3 Het HTML5 doctype, de nieuwe semantische lay-out elementen i.c.m de HTML5 shiv Bronnen: 15 de les 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
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
De cesuur 1 (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