MANUAL INTERNETSTANDAARDEN. HvA - CMD Blok v1.0

MANUAL INTERNETSTANDAARDEN HvA - CMD Blok 1 2013-14 – v1.0

INHOUD Weekoverzicht ....................................................................................................................................... 4 Vakomschrijving ..................................................................................................................................... 5 Diagnostische toets (Voor gevorderden) ............................................................................................... 8 Blokweek 2 ............................................................................................................................................ 9 Lees- en werkroutes ........................................................................................................................... 9 Software installeren ............................................................................................................................ 9 Oefeningen HTML ............................................................................................................................ 10 Artikel opmaken in HTML ................................................................................................................. 17 Studievragen blokweek 2 ................................................................................................................. 18 Blokweek 3 .......................................................................................................................................... 19 Lees- en werkroutes ......................................................................................................................... 19 Factsheet HTML5 ............................................................................................................................. 20 Oefeningen HTML ............................................................................................................................ 22 Content website verzamelen / maken .............................................................................................. 27 Studievragen blokweek 3 ................................................................................................................. 27 Blokweek 4 .......................................................................................................................................... 28 Lees- en werkroutes ......................................................................................................................... 28 Oefeningen CSS .............................................................................................................................. 28 HTML-template voor eigen website maken ...................................................................................... 28 Nieuwe mogelijkheden HTML5 onderzoeken (gevorderden) ........................................................... 29 10-min presentatie studentensymposium (expert) ........................................................................... 29 Studievragen blokweek 4 ................................................................................................................. 30 Blokweek 5 .......................................................................................................................................... 31 Lees- en werkroutes ......................................................................................................................... 31 Oefeningen CSS .............................................................................................................................. 31 jQuery (gevorderden) ....................................................................................................................... 31 Nieuwe mogelijkheden CSS3 onderzoeken (gevorderden) .............................................................. 32 Studievragen blokweek 5 ................................................................................................................. 32 Blokweek 6 .......................................................................................................................................... 33 Lees- en werkroutes ......................................................................................................................... 33 Maak eindopdracht zoveel mogelijk af ............................................................................................. 33

Manual Internetstandaarden 2013-14

2 / 37

Studievragen blokweek 6 ................................................................................................................. 33 Blokweek 7 .......................................................................................................................................... 34 Lees- en werkroutes ......................................................................................................................... 34 Maak eindopdracht af en zet online ................................................................................................. 34 Studievragen blokweek 7 ................................................................................................................. 34 Boeken, Software en Websites ............................................................................................................ 35


3 / 37

WEEKOVERZICHT


4 / 37

VAKOMSCHRIJVING HTML en CSS begrijpen helpt iedereen die wel eens met het web werkt. Als ontwerper kun je mooiere en meer bruikbare websites ontwerpen, als beheerder kun je betere inhoud maken, als marketeer kun je effectiever communiceren en als ontwikkelaar kun je beter doorzoekbare en netter opgebouwde websites ontwikkelen. In het vak Internetstandaarden krijg je, naast een theoretische basis, ruimte om actief met HTML en CSS te stoeien om de fundamenten van het wereldwijde web te ontdekken.

LEERDOELEN • • • •

De student kent de basis van HTML en CSS en kan deze kennis toepassen bij het maken van een eenvoudige website, met inachtneming van de standaarden van het W3C. De student kent de principes van toegankelijk en gebruiksvriendelijk webdesign en kan keuzes met betrekking tot de toepassing hiervan onderbouwen. De student is in staat gebruik te maken van de internet services HTTP en (S)FTP om een site online te zetten en te bekijken. De student kan leesbare, efficiënte en overdraagbare code schrijven

BEROEPEN Kernvak, relevant voor alle CMD-beroepsrollen

CMD COMPETENTIES Ontwerpen 1.4 Gebruikt basiskennis over interactie-, informatie- en visueel ontwerp. Maken 3.5 Maakt een eenvoudige website die voldoet aan webstandaarden.

INHOUD Internetstandaarden gaat over het maken van websites met behulp van HTML, CSS en Javascript. Hierbij staan de standaarden van het W3C centraal. De onderwerpen die worden behandeld zijn: • • • • • • •

Syntax van HTML en CSS Semantiek, het structureren van de inhoud Scheiding van vormgeving, inhoud en gedrag Standaardisering Navigatiepatronen CSS cascading en overerving Nesten en het Document Object Model en hoe selecteer je met CSS elementen uit je DOM

PLAATS IN HET CURRICULUM Internetstandaarden bijt het spits af voor de technieklijn in de propedeuse. De student krijgt een introductie in het maken van (interactieve) websites. Gedurende het jaar kunnen de geleerde


5 / 37

technieken worden ingezet in de projecten, bij het maken van het digitaal portfolio (SLC) en mogelijkerwijs in andere vakken.

WERKWIJZE Internetstandaarden bestaat wekelijks uit een hoorcollege en een werkcollege. In het werkcollege brengen de studenten de in het hoorcollege behandelde theorie in praktijk. De studenten krijgen aan de hand van oefenopdrachten de benodigde technieken voor de eindopdracht onder de knie. De hoorcollegereeks wordt afgesloten met een schriftelijk tentamen. In de werkgroepen werk je aan eindopdracht.

CRITERIA Bij het tentamen moeten studenten minstens 55 punten halen van in totaal 100 voor een voldoende. De practicumopdracht moet aan een aantal criteria voldoen, voordat hij in aanmerking komt voor een beoordeling (AVV: Aan Voorwaarden Voldaan) • • • • •

De website bestaat uit tenminste vier pagina’s. De website bevat relevante inhoud in correct Nederlands. De website is verzorgd en leesbaar opgemaakt. Wanneer de content niet zelf is geproduceerd, wordt de bron vermeld volgens de MLA standaard. De website staat op de in de les aangegeven server en is zonder technische problemen te bereiken.

De minimale criteria voor de practicumopdracht (benodigd voor het behalen van maximaal een 6) zijn: • • • • • • •

De HTML-code is semantisch correct, de inhoud is goed gestructureerd. De HTML-code is syntactisch correct, levert geen fouten op bij de validator. De website heeft een menu gebaseerd op unordered lists. De CSS-code is syntactisch correct. De code voldoet aan de in de les aangereikte codingstandaarden. De vormgeving is consistent doorgevoerd. HTML is enkel gebruikt voor content, CSS enkel voor opmaak ( Javascript enkel voor gedrag) en is fysiek gescheiden.

Ophoging van dit cijfer kan behaald worden door, bijvoorbeeld: • • • • • •

Javascript / jQuery te gebruiken voor DOM-manipulatie. Veel aandacht te besteden aan vormgeving. Je website oogt professioneel. Elegant te coderen, bijvoorbeeld met behulp van een CSS-strategie. Cross-browser verschillen op te lossen met behulp van CSS Een technisch complexe lay-out te hanteren. Een responsive design te realiseren.


6 / 37

TOETSING EN FEEDBACK De toetsing geschiedt in twee delen. Om het vak succesvol af te ronden, dienen beide delen voldoende beoordeeld te zijn. Delen die onvoldoende beoordeeld worden kunnen worden aangevuld of herkanst. De twee onderdelen van toetsing zijn: • •

Een tentamen met kennis- en inzichtvragen. Een practicumopdracht bestaande uit het maken van een eigen website van minimaal 4 pagina's. Tijdens de laatste werkgroep beoordelen studenten elkaars opdracht en geven hiermee een adviesbeoordeling aan de docent. Aanwezigheid bij deze werkgroep is verplicht. De adviesbeoordeling wordt door de docent meegewogen in de definitieve beoordeling.

LITERATUUR Verplicht: Engelse versie Duckett, Jon, HTML & CSS: Design and Build Webpages, Indianapolis: Wiley, 2011 (te koop op bookdepository.co.uk) of Nederlandse versie Duckett, Jon, HTML & CSS: Websites ontwerpen en bouwen, Pearson Benelux, 2012.


7 / 37

DIAGNOSTISCHE TOETS (VOOR GEVORDERDEN) Datum: wo avond 18 september Inschrijven: vóór vrijdag 13 september bij je eigen docent Tijdstip en lokatie: TTH02A12 18:40 uur Ieder jaar zijn er een aantal eerstejaarsstudenten die al zoveel ervaring hebben bij het maken van websites, dat ons vak te weinig uitdaging biedt. Voor deze mensen bieden we de mogelijkheid om een alternatief traject te volgen, waardoor je toch nog nieuwe dingen leert. Bij het maken van websites met HTML, CSS en Javascript is momenteel zo veel aan het veranderen dat er genoeg te leren valt. Je moet natuurlijk wel kunnen bewijzen dat je aan de eindcriteria van ons vak voldoet. Daarom bieden we aan het begin van blok 1 een diagnostische toets aan. Let op dat je toch wel behoorlijk wat kennis en ervaring nodig hebt om deze toets te kunnen halen, anders is het verloren moeite. De diagnostische toets bestaat uit tien vragen over de kernprincipes van ons vak. Jouw antwoorden bespreken we aansluitend tijdens een mondeling en daar laat je ook een of meerdere websites zien die je zelf gemaakt hebt. Om je voor te bereiden, lees je het eerste deel van deze manual met de vak omschrijving heel goed door. Hier staan de leerdoelen, de lesstof en de beoordelingscriteria. Verder kun je het boek dat bij dit vak hoort doorscannen om te zien of er dingen in staan die je nog niet weet. Daarnaast kies je een of meerdere websites uit die je zelf hebt gemaakt en die voldoen aan de criteria van ons vak. Als je geen websites hebt die aan de criteria voldoen, kun je overwegen om er eentje te maken. Als je de diagnostische toets haalt, mag je jezelf ‘gevorderde’ noemen. Je krijgt dan meer een rol van student-assistent. Tijdens het practicum en werkgroepen help je je medestudenten, niet door hun code te gaan schrijven, maar door uitleg te geven. Je mag meedoen aan masterclasses die gegeven worden. Je krijgt vrijstelling voor het huiswerk, maar je maakt nog wel de practicumopdracht en het tentamen. Als je bij de diagnostische toets hoger dan een 8 haalt, mag je jezelf ‘expert’ noemen. In dat geval krijg je vrijstelling van de practicumopdracht en het tentamen, onder voorbehoud dat je als studentassistent helpt bij de lessen en een presentatie van 10 minuten aan je klas geeft over een geavanceerd onderwerp. Denk aan onderwerpen als: responsive webdesign, geolocatie, de mogelijkheden van het canvas element, 3D, interactieve elementen met ajax etc. Als je inspiratie nodig hebt, kijk dan bijvoorbeeld op http://www.html5rocks.com. Overleg met je docent welk onderwerp je wilt doen en in welke lesweek je de presentatie gaat houden. De beste expert studenten mogen hun presentatie geven aan alle propedeusestudenten tijdens het laatste college van Internetstandaarden. Je cijfer voor dit vak wordt het gemiddelde tussen je cijfer voor de diagnostische toets en een cijfer dat je krijgt voor de presentatie aan de klas. Beide onderdelen moeten wel voldoende zijn.


8 / 37

BLOKWEEK 2 Laten we van start gaan! Het zal misschien even wennen zijn aan het tempo van HBO, maar als je netjes elke week je werk doet, is het goed te doen. Geen zorgen als je nog geen ervaring hebt, want we bieden je veel oefeningen en demonstraties aan. Sommige van jullie hebben wellicht al meer of zelfs veel ervaring in het maken van websites. Daarom proberen we het vak voor alle niveaus interessant te maken. Lees het stuk over de diagnostische toets op pagina 8 om te zien of je daaraan mee wilt doen. Uiteindelijk moet iedereen voldoen aan dezelfde eindcriteria, maar je kunt veel meer uit het vak halen als je dat wilt.

LEES- EN WERKROUTES BEGINNELING

GEVORDERDE

EXPERT

«

«

(Optioneel) Inschrijven voor diagnostische toets bij je docent. Deadline: uiterlijk vrijdag 13 september.

«

«

(Optioneel) Boek doorscannen ter voorbereiding op diagnostische toets. Deadline: woensdag 18 september

«

«

Lezen hoofdstuk 1,2,3 en 18 van het boek. Deadline: voor HC op 17 september

«

Software installeren. Zie pag. 9 Deadline: voor werkgroep in blokweek 3

«

Oefeningen HTML. Zie pag. 10. Deadline: voor werkgroep in blokweek 3

«

Artikel opmaken in HTML. Zie pag. 17 Deadline: voor werkgroep in blokweek 3

«

SOFTWARE INSTALLEREN Als je websites gaat maken heb je in ieder geval een drietal programma’s nodig: 1. Een browser om je website in te bekijken. We willen dat iedereen bij dit vak Google Chrome gebruikt, omdat hierin een aantal handige tools zitten en deze browser werkt goed met HTML5 en CSS3. In de tabel hieronder staat een link naar de downloadsite voor Chrome. Ook staan er een tweetal extensies die handig zijn en die we vooral aanbevelen aan beginnelingen. 2. Een code-editor om je code in te typen. We raden bij dit vak Sublime aan, omdat het een goede gratis editor is die zowel voor Mac als Windows beschikbaar is. Als je zelf voorkeur hebt voor een andere editor, mag dat ook. 3. Een ftp-programma om je website online te publiceren. We raden Filezilla aan, maar andere ftp-programma’s zijn ook mogelijk.


9 / 37

SOFTWARE EN PLUGINS https://www.google.com/intl/en/chro me/browser/

Verplicht. Installeer Chrome als je die nog niet op je computer hebt staan. Deze browser ondersteunt de meeste html5 en css3 eigenschappen en gebruik je bij het nakijken van je website.

X

X

X

http://www.sublimetext.com/

Aanbevolen. Deze code editor voor zowel Mac als Windows heeft onze voorkeur bij dit vak. Je mag ook een andere code editor gebruiken als dat je voorkeur heeft, maar we raden deze vooral aan als je nieuweling bent.

X

X

X

http://filezillaproject.org/download.php/

Aanbevolen. Filezilla is een een ftp-programma voor zowel Mac als Windows, waarmee je je website online kunt zetten. Je mag ook een ander ftp-programma gebruiken als dat je voorkeur heeft.

X

X

X

https://chrome.google.com/webstor e/detail/webdeveloper/bfbameneiokkgbdmiekhj nmfkcnldhhm

Aanbevolen. Chrome extensie met allerlei handige hulpmiddelen voor het maken van websites.

X

X

X

OEFENINGEN HTML OEFENING 1 – EEN EERSTE WEBPAGINA 1. Open Sublime en neem onderstaande code over in een leeg bestand. Dit komt in de titelbalk van een tab
Hallo wereld!

2. Maak een map / folder aan op je computer waar je de bestanden van deze oefeningen opslaat, bijvoorbeeld ‘IS-wg1’. Sla het bestand wat je zojuist hebt gemaakt in deze map op met de naam 'index.html'. 3. Open het bestand nu met Chrome door hem vanuit Verkenner / Finder naar Chrome toe te slepen. Als het goed is zie je nu de tekst 'Hallo wereld!' staan. 4. Zoek de tekst 'Dit komt in de titelbalk van een tab' in het Chrome venster.


10 / 37

 HTML-TAGS De stukjes code met <> worden html-tags genoemd. De meeste tags hebben een begintag tussen <...> en een eindtag met . Er zijn een aantal uitzonderingen, maar daar komen we later op terug. OPBOUW HTML DOCUMENT In bovenstaand voorbeeld zijn vijf tags gebruikt: , , , <body> en <h1>. Een html bestand bestaat altijd uit twee delen: de head en de body. In de head (tussen <head> en </head>) kan je allerlei algemene informatie over het bestand kwijt, zoals de titel. In de body (tussen <body> en </body>) komt de inhoud van de pagina zelf, hetgeen dat zichtbaar wordt voor de gebruiker. 5. Ga terug naar je Sublime en vervang de code tussen <body> en </body> door: Hallo Wereld! De regeleindes en een browser bekijk. spaties verdwijnen als ik het in 6. Sla het bestand op. Ga naar Chrome en klik op 'reload this page'.  PARAGRAFEN Je ziet dat regeleindes en spaties verdwijnen als je het in een browser bekijkt. Als je een bestand wilt opmaken ga je daar html-tags voor gebruiken. Eén van de tags is die gebruikt wordt voor paragrafen. Om een paragraaf te maken zet je vooraan de tag en om de paragraaf af te sluiten gebruik je . 7. Hieronder staat de code nogmaals, maar er zijn paragraaf tags toegevoegd. Neem de <h1>, </h1>, en tags over in je eigen code. <h1>Hallo Wereld!</h1> De regeleindes en een browser bekijk. spaties verdwijnen als ik het in 8. Sla het bestand op. Ga naar Chrome en klik op ‘reload this page’. 9. Voeg zelf onderaan een nieuwe paragraaf toe met tekst erin die je zelf verzint. 10. Sla het bestand op. Ga naar Chrome en klik op ‘reload this page’. Manual Internetstandaarden 2013-14 11 / 37 11. Voeg onderstaande regel toe binnen de body. Dit is een nieuwe paragraaf. En dit is een regeleinde middenin een paragraaf. 12. Sla het bestand op. Ga naar Chrome en klik op ‘reload this page’.  REGELEINDEN Je kunt een regeleinde toevoegen met de tag . De meeste tags hebben een begintag <...> en een eindtag </...>, maar is een van de uitzonderingen. Vaak wil je van een stuk tekst de opmaak bepalen. Zoals bij een paragraaf geef je met aan dat daar een paragraaf begint en met dat de paragraaf daar eindigt. Met een regeleinde is het anders. Je combineert de begintag en eindtag samen in één tag . OEFENING 2 – HTML-SPIEKBRIEF MAKEN Als je net begonnen bent met het leren van HTML zul je alle verschillende tags moeilijk kunnen onthouden. Daarom maken we een HTML-spiekbrief met de meest gebruikte tags. Met deze tags kunnen we pagina's iets spannender maken dan onze eerste pagina. Toch zal het pas echt mooi worden als je stylesheets (CSS) gaat gebruiken. Met een stylesheet gaan we lettertypen, kleuren, randen, afmetingen en lay-out aanpassen. Dat gaan we vanaf de derde week pas gaan leren. 1. Ga naar https://gist.github.com/3424047. Hier staat het basisrecept van een lege pagina. Zet deze pagina bij je favorieten / bookmarks. Kopieer de HTML-code naar een nieuw leeg bestand in Sublime. 2. Sla het bestand op als 'spiekbrief.html' in dezelfde map op als de vorige oefening (‘IS-wg1’). 3. Verander wat in de <title> tag staat naar ‘HTML spiekbrief’. 4. Alle code die vanaf nu wordt toegevoegd, zal in de body komen te staan, dus in plaats van de tekst ‘Dit is de body’. Allereerst gaan we verschillende niveaus koppen toevoegen. De belangrijkste kop op een pagina wordt aangegeven met <h1>. Daarna zijn er nog 5 andere niveaus: <h2> t/m <h6>. De letter 'h' komt van de Engelse term voor kop, namelijk 'header'. Voeg onderstaande code toe aan de spiekbrief binnen de body. <h1>Kop <h2>Kop <h3>Kop <h4>Kop <h5>Kop <h6>Kop niveau niveau niveau niveau niveau niveau 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> 5. Sla het bestand op en open het bestand in Chrome. Manual Internetstandaarden 2013-14 12 / 37 6. Nu voeg je een stuk code toe dat we al eerder hebben gebruikt: De regeleindes en spaties verdwijnen als ik het in een browser bekijk. Dit is een nieuwe paragraaf. En dit is een regeleinde middenin een paragraaf. 7. Sla het bestand op en klik op reload in Chrome. Vanaf nu herinner ik je er niet meer aan om het bestand op te slaan en op reload te klikken om het resultaat van je code te zien. 8. Als je een stukje tekst wilt benadrukken, kan je dat op twee manieren doen, met of met (van emphasize). Je kunt bijvoorbeeld gebruiken om aan te geven waar de klemtoon valt. Voeg onderstaande code toe en bekijk het resultaat: CMD stelt ontwerpen centraal in de opleiding. Zij wil studenten leren te denken als een ontwerper en opleiden tot interactieve media ontwerpers met een goede aansluiting op de huidige én de toekomstige beroepspraktijk. CMD gelooft in het human centered ontwerpproces. De volgorde waarin je tags opent en sluit is niet zomaar willekeurig. In bovenstaand stukje code zie je dat binnen een paragraaf twee tags en worden gebruikt. Je ziet dat eerder dan komt. Manual Internetstandaarden 2013-14 13 / 37  VOLGORDE OM TAGS TE OPENEN EN TE SLUITEN Je kunt tags binnen andere tags gebruiken. Je moet wel, want je hebt de tag <html> en </html>. Hiertussen staan de tags <head> </head> en <body> </body>. We zeggen dat de head en de body in de html tag staan, ofwel we nesten head en body in de html tag. <html>  GOED! <head> </head> <body> </body> </html> Wanneer een tag wordt geopend binnen een andere tag, dan moet de tag afgesloten worden voordat de andere tag wordt afgesloten. Onderstaande voorbeelden zijn fout: <html> <head> <body> </head> </body> </html>  FOUT! <html> <head> </head> <body> </html> </body>  FOUT! 9. We gaan verder met nieuwe tags. Deze tags kun je gebruiken om lijsten te maken, namelijk genummerde lijsten met <ol> (ordered list) en ongenummerde lijsten met <ul> (unordered list). Voor elk item uit de lijst gebruik je een <li> (list item). Kopieer de code en bekijk het resultaat. <ol> <li>Eerste item</li> <li>Tweede item</li> <li>...</li> </ol> <ul> <li>Bulleted item</li> <li>Nog een item</li> <li>...</li> </ul> Manual Internetstandaarden 2013-14 14 / 37 10. We willen een afbeelding toevoegen. Binnen webpagina's kan je het beste afbeeldingen van type gif, jpg of png gebruiken. Het is goed gebruik om je afbeeldingen in een aparte map te zetten. Maak een map met de naam ‘media’ binnen de map ‘IS-wg1’. Haal ergens een (niet te grote) afbeelding vandaan en zet hem in de zojuist gemaakte map ‘media’. Stel dat mijn afbeelding 'verjaardag.jpg' heet. Dan kan ik de afbeelding invoegen met de volgende tag: <img src="media/verjaardag.jpg" alt="Verjaardag" /> Probeer dit voor je eigen afbeelding.  AFBEELDINGEN Binnen websites worden voornamelijk afbeeldingen van type gif, jpg of png gebruikt. Voor afbeeldingen gebruik je de img tag. De img tag is een voorbeeld van een tag waarbij begintag en eindtag zijn samengevoegd, net als bij . In een img tag moet je altijd twee dingen aangeven: • • src – de locatie van het plaatje o als de afbeelding in dezelfde map staat als het html document, dan zet je hier de bestandsnaam, bijv: <img src="verjaardag.jpg" alt="Verjaardag" /> o als de afbeelding in een andere map staat, bijvoorbeeld in een submap met de naam 'img', dan geef je het pad aan: <img src="img/verjaardag.jpg" alt="Verjaardag" /> o Je kunt ook een url gebruiken als de afbeelding ergens online staat, bijv: <img src="http://www.mijnsite.nl/verjaardag.jpg" alt="Verjaardag" /> alt – een beschrijving in tekst van de afbeelding. Mocht de afbeelding niet zichtbaar zijn om een of andere reden, dan krijgt de bezoeker deze tekst te zien. 11. Een van de belangrijkste onderdelen van websites zijn links. Hieronder zie je drie voorbeelden van links. Kopieer ze in je code en probeer ze eens uit door erop te klikken. Een link naar een andere site, bijvoorbeeld naar <a href="http://www.html5rocks.com/en/" rel="nofollow">HTML5 Rocks</a> Een link naar een andere pagina in je eigen website, bijvoorbeeld naar <a href="index.html" rel="nofollow">Mijn eerste webpagina</a> Een link naar een e-mailadres, bijvoorbeeld naar <a href="mailto:s.e.rouwhorst@hva.nl" rel="nofollow">s.e.rouwhorst@hva.nl</a> Manual Internetstandaarden 2013-14 15 / 37  LINKS Voor links gebruik je de a tag en kan je de volgende dingen aangeven: • • href – de locatie waar de link naartoe gaat. o als je een lokale link wilt maken, dan zet je hier de bestandsnaam, of het pad naar de bestandsnaam, bijv: <a href="spiekbrief.html" rel="nofollow">spiekbrief</a> o als je een link naar een andere site wilt maken, dan zet je de complete url neer, bijv: <a href="http://www.w3.org/" rel="nofollow">W3C</a> o Je kunt ook een mailto link maken naar een e-mail adres, bijv: <a href="mailto:mijnemail@hva.nl" rel="nofollow">E-mail mij</a> target – als je wilt aangeven dat de pagina in een nieuw venster geopend moet worden, doe je dat met de target als volgt: <a href="http://www.w3.org/" target="_blank" rel="nofollow">W3C</a>  ATTRIBUTEN VAN TAGS Een tag kan attributen bevatten waarin je extra informatie zet. In de voorbeelden hieronder zie je de attributen src en alt in de img tag en het attribuut href in de a tag. Sommige attributen zijn verplicht en andere attributen zijn optioneel. Zo zijn bij een img de attributen src en alt beide verplicht. Bij de link staat een title attribuut en deze is optioneel. <img src="media/verjaardag.jpg" alt="Verjaardag" /> <a href="spiekbrief.html" title="Deze spiekbrief heb ik voor mezelf gemaakt" rel="nofollow">Spiekbrief</a> Een attribuut wordt altijd gevolgd door een '=' teken en de informatie die erbij hoort komt tussen dubbele aanhalingstekens "". Je spiekbrief is nu klaar! Manual Internetstandaarden 2013-14 16 / 37 OEFENING 3 – ALLES COMBINEREN 1. Maak een nieuw leeg bestand in je html-editor met de naam ‘parkiet.html'. 2. Kopieer het basisrecept van een HTML-pagina erin, zoals je dat bij de vorige oefening ook hebt gedaan. Zie https://gist.github.com/3424047 3. Probeer onderstaand voorbeeld te maken. De tekst en afbeelding kun je halen van http://nl.wikipedia.org/wiki/Halsbandparkiet. De link in het woord ‘exoot’ in de eerste paragraaf gaat naar " http://nl.wikipedia.org/wiki/Exoot". Verder zijn er woorden op verschillende manieren benadrukt en is er een geordende lijst gebruikt. ARTIKEL OPMAKEN IN HTML In de laatste oefening over de halsbandparkiet hoefde je niet zelf na te denken over hoe de inhoud van de pagina gestructureerd moest worden, omdat je het eindresultaat al wist. In deze oefening is het de bedoeling dat je zelf bedenkt welke tags je moet gebruiken. In de les heb je gehoord welke van de artikelen je gaat doen. Gebruik de links hieronder om de tekst te downloaden naar je eigen computer. Uit deze tekst is alle structuur weggehaald. Gebruik HTML om deze weer terug te zetten. Je kunt starten met het basisrecept dat je bij de oefeningen ook hebt gebruikt. 1. 2. 3. 4. Artikel 1: https://gist.github.com/3452102 Artikel 2: https://gist.github.com/3452115 Artikel 3: https://gist.github.com/3452123 Artikel 4: https://gist.github.com/3452135 Manual Internetstandaarden 2013-14 17 / 37 STUDIEVRAGEN BLOKWEEK 2 Elke week staan er in deze manual een aantal studievragen opgesomd. Hiermee kun je inschatten of je de belangrijkste onderwerpen hebt begrepen. Probeer voor jezelf antwoord te geven op de vragen. Als je het antwoord niet weet, ga dan terug naar je aantekeningen van het hoorcollege of denk terug aan de werkgroep. 1. 2. 3. 4. 5. 6. 7. Waar is HTML voor bedoeld? Wat betekent het als je een pagina semantisch opmaakt? Hoe ziet de anatomie van een HTML-element eruit? Hoe ziet de anatomie van een HTML-tag eruit? Wat betekent het nesten van HTML-elementen? Wat is de DOM? Wat is het verschil tussen de <head> en de <body> van een pagina? Manual Internetstandaarden 2013-14 18 / 37 BLOKWEEK 3 Woensdagavond is de diagnostische toets voor mensen die dat willen doen. Het is alleen verstandig om mee te doen, als je al behoorlijk veel kennis over HTML en CSS hebt. Je had je bij je docent moeten opgeven om mee te doen aan deze toets. In de werkgroep gaan we verder met oefeningen over HTML. Dit is de laatste week dat je met HTML oefeningen doet, want volgende week gaan we alweer aan een nieuwe taal beginnen: CSS. Ook maak je deze week een begin met de eindopdracht van het practicum. LEES- EN WERKROUTES BEGINNELING GEVORDERDE Lezen hoofdstuk 4,5,6 en 8 van het boek. Deadline: voor HC op 24 september « « Lezen Factsheet HTML5. Zie pag.20 Deadline: voor HC op 24 september « « Oefeningen HTML. Zie pag. 22 Deadline: voor werkgroep in blokweek 4 « Content website verzamelen / maken. Zie pag. 27 Deadline: voor werkgroep in blokweek 4 « (Optioneel) Boek doorscannen ter voorbereiding op diagnostische toets. Deadline: wo 18 september. Manual Internetstandaarden 2013-14 EXPERT « « « « 19 / 37 FACTSHEET HTML5 HTML staat voor HyperText Markup Language. Deze taal wordt gebruikt om documenten op te maken voor het World Wide Web. Met andere woorden met HTML kan je websites opmaken die via het internet kunnen worden geraadpleegd. HTML5 is de nieuwste versie van HTML en is nog geen standaard volgens het W3C, maar kan al wel gebruikt worden in de meeste moderne browsers. Een van de belangrijkste verschillen van HTML5 met de voorgaande versie is dat er een aantal nieuwe semantische elementen zijn gespecificeerd. De belangrijkste nieuwe elementen worden hieronder beschreven. NIEUWE HTML5 ELEMENTEN • • • • • • <header> Het header element specificeert een header van een document of een section. <nav> Het nav element specificeert een navigatie sectie van een document. Het nav element bevat links naar andere documenten of naar andere elementen in het document. <section> Het sectie element beschrijft een sectie gerelateerde content. Een sectie heeft typisch een header. Secties kunnen bijvoorbeeld worden gebruikt voor de hoofdstukken in een boek of verhaal. <article> Het article element is een speciaal sectie element. Het specificeert een op zichzelf staand blok content in het document, dat als zodanig kan worden hergebruikt op een andere plek. Een voorbeeld van een article element is een forum-bericht of een nieuwsartikel. <aside rel="nofollow"> Het aside element is een sectie element dat (enigszins) gerelateerd is tot de naastliggende content. Het aside element kan bijvoorbeeld worden gebruikt worden om een sidebar op te maken. <footer> Het footer element is een sectie waarmee typisch metadata over de omliggende sectie wordt opgemaakt. VOORDELEN HTML5 • • Beter indexeerbaar Door de nieuwe semantische HTML5 elementen kunnen HTML documenten met meer betekenis worden opgemaakt en kunnen daarom beter worden geindexeerd door zoekmachines zoals Google. Rijkere content HTML5 maakt het mogelijk om rijke, interactieve content toe te voegen zonder dat daar plugins zoals Flash voor nodig zijn. Denk hierbij aan video, audio, animaties, grafieken, e.d. Manual Internetstandaarden 2013-14 20 / 37 • • • • Consistentere opmaak Door de nieuwe semantische elementen zullen html documenten consistenter worden opgemaakt en zal het voor ontwikkelaars en ontwerpers makkelijker worden om de structuur van een pagina te begrijpen. Handigere formulieren HTML5 biedt een aantal nieuwe functionaliteiten voor formulieren. Het is nu bijvoorbeeld mogelijk om zonder javascript formulieren te valideren. Offline applicatie cache Offline applicatie cache maakt het mogelijk om een webapplicatie (gedeeltelijk) op een apparaat op te slaan zodat de applicatie kan worden geraadpleegd als het apparaat offline is. Betere performance Lokale opslag van data kan de performance van webapplicaties drastisch verbeteren, doordat er minder netwerk verkeer noodzakelijk is. NADELEN HTML5 • • • Browser support HTML5 wordt niet door alle browsers in dezelfde mate ondersteund. Het kan dus zijn dat bepaalde HTML5 toepassingen verschillend reageren in verschillende browsers. Met name oudere versies van Internet Explorer (voor IE9) ondersteunen nauwelijks HTML5. De javascript library Modernizr kan worden gebruikt om HTML5 ondersteuning voor oudere browsers te simuleren. Nog niet klaar De verwachting is dat de specificaties voor HTML5 pas rond 2020 klaar zullen zijn. Dat kan in principe betekenen dat alles wat nu bedacht is weer kan veranderen. Algemeen aangenomen wordt echter dat een groot gedeelte van HTML5 niet meer zal worden aangepast. Media licenties Door gesteggel met licenties worden bepaalde media formaten niet door alle browsers ondersteund. Dat kan betekenen dat je bijvoorbeeld verschillende audio bestanden nodig hebt om hetzelfde audio element op te maken. Manual Internetstandaarden 2013-14 21 / 37 OEFENINGEN HTML OEFENING 1 – SYNTAX CONTROLEREN Je hebt vorige week een eerste webpagina gemaakt. Misschien zag het er nog niet zo spannend uit, maar je zal binnenkort al veel meer kunnen. Eerst krijg je een korte uitleg over HTML en W3C standaarden.  HTML5 W3C is de internationale organisatie (www.w3.org) die richtlijnen en standaarden ontwikkelt voor het web. Als je je aan deze standaarden houdt is de kans het grootst dat je webpagina er in alle browsers goed uitziet en goed werkt. Verschillende browsers werken echter met verschillende rendering engines. Daarom moet je zelf altijd nog testen of je pagina ook in deze browser goed werkt. Op dit moment wordt gewerkt aan een nieuwe standaard HTML5. Deze is nog niet officieel ingevoerd en het is ook niet bekend wanneer dat precies gaat gebeuren. We gaan er bij dit vak wel alvast mee werken, omdat vrijwel alle browsers de taal al ondersteunen en er zijn duidelijke verbeteringen ten opzichte van huidige standaarden, HTML4.01 en XHTML1.0. Hoe kun je nu testen of je pagina aan onze standaard, HTML5, voldoet? W3C biedt een hulpmiddel om je code te controleren aan op http://validator.w3.org/ De HTML5 standaard is echter niet erg strikt op sommige aspecten en we willen dat je bij dit vak echt nette code oplevert. Zo willen we bijvoorbeeld dat je alle tags die je opent ook netjes afsluit en dat je de waarden van attributen tussen "" zet. De validator van W3C controleert dit niet. Daarom willen we dat je je pagina’s ook nog checkt met Tidy. Hiervoor kun je bijvoorbeeld tidyHTML package installeren in Sublime. De volgende oefeningen gaan over het valideren van je code. 1. Open de oefening van vorige week ‘parkiet.html’ in Sublime én in Chrome. Je gaat zo een validator gebruiken om je syntax automatisch te laten controleren. Je kunt het vergelijken met de spellingchecker in Word bijvoorbeeld. Zoals je weet zijn er verschillende versies van HTML. Deze versies hanteren kleine verschillen in de syntax. Als je de syntax wilt laten controleren door een validator moet je zelf aangeven welke versie van HTML je gebruikt. Dat doe je in de eerste regel van je HTML bestand. Voor HTML5 moet de volgende regel bovenaan je code staan. <!DOCTYPE html> Als je hier iets anders hebt staan, verander het dan zodat het goed staat. Manual Internetstandaarden 2013-14 22 / 37 2. Open de volgende website http://validator.w3.org/#validate_by_input en zet hem bij je favorieten. Kopieer de HTML code (alle code) van parkiet.html uit sublime naar deze website en klik op ‘check’. 3. In de nieuwe tab kun je zien of je code voldoet aan de HTML5 standaard. Je kunt bijvoorbeeld het volgende te zien krijgen: Blijkbaar zijn er 6 foutjes in de pagina en negen waarschuwingen. Het kan natuurlijk best zijn dat jij meer of minder fouten en waarschuwingen ziet. Uiteindelijk willen we alle fouten en waarschuwingen eruit halen zodat we het volgende te zien krijgen: Het is niet absoluut noodzakelijk om waarschuwingen eruit te halen, maar wel verstandig. Als je fouten hebt en je scrollt naar beneden, krijg je de details van een fout te zien: Hij geeft het regelnummer en de positie op de regel aan waar de fout zich ongeveer bevindt. LET OP: dit is een indicatie, de fout kan ergens anders bevinden. Kijk in je HTML-editor en controleer of je regelnummers kunt zien naast je code. Als dat niet zo is, zoek dan de optie waarmee je deze zichtbaar kunt maken. 4. Zorg dat je alle eventuele foutjes uit jouw bestand verbetert. 5. Aangezien we bij dit vak echt nette code van je verwachten, gebruiken we nog een andere validator die naar andere criteria kijkt. Bijvoorbeeld of je alle tags netjes sluit en of je je tags niet met hoofdletters schrijft. Als het goed is, heb je tijdens de les de package tidyHTML geïnstalleerd in Sublime. Als je op ctrl+alt+h (windows) of cmd+alt+h (mac) drukt in Sublime, dan krijgt je foutmeldingen en waarschuwingen over code die niet netjes is. OEFENING 2 – SYNTAX FOUTEN OPSPOREN 1. Maak een nieuwe map aan op je computer met de naam ‘IS-wg2’. 2. Open in Sublime een nieuw bestand waarin je de code zet die staat op https://gist.github.com/3488818. Sla het bestand op in de zojuist gemaakt map met de naam ‘syntaxfouten.html’ 3. Valideer het bestand met de validator van W3C. De url staat in de vorige oefening. Deze zal twee fouten vinden. 4. Probeer de fouten beide te corrigeren. Een aantal tips: - Begin met de bovenste foutmelding en werk van boven naar beneden. Het kan goed zijn dat wanneer je een fout oplost er meerdere foutmeldingen daaronder wegvallen. Manual Internetstandaarden 2013-14 23 / 37 - Sla je HTML-bestand na een wijziging op en valideer steeds opnieuw. Het regelnummer dat door de validator wordt genoemd, klopt niet altijd. Het kan zijn dat de fout al eerder is gemaakt. 5. De oplossing komt bij de oefeningen van volgende week. OEFENING 3 – SEMANTISCHE FOUTEN OPSPOREN Semantische fouten worden over het algemeen niet door een validator gevonden. Die moet je zelf opsporen door kritisch naar je eigen code te kijken.  SEMANTISCHE FOUTEN Wanneer je HTML gebruikt, doe je dat om structuur te geven aan de inhoud van je pagina. Je geeft bijvoorbeeld aan wat de titels zijn, waar een paragraaf begint en eindigt, je groepeert meerdere elementen die bij elkaar horen. Wanneer je de tags toevoegt, zie je in je browser ook gelijk dat de vormgeving van je pagina enigszins verandert. Koppen worden groot en vet, een paragraaf krijgt afstand tot andere paragrafen, een link wordt onderstreept en krijgt kleur. Het is zeer waarschijnlijk dat je niet tevreden bent met de standaard vormgeving die de browser toevoegt. Het is soms erg verleidelijk om voor andere html-tags te kiezen om de reden dat je dat mooier vindt. Bijvoorbeeld, je hebt een kop gemaakt met <h1> en je vindt het lettertype veel te groot en kiest daarom voor een <h2> in plaats van een <h1>. Dit wordt een semantische fout genoemd. Met <h1> geef je aan wat de belangrijkste kop op je pagina is. Als je een pagina maakt waar bijvoorbeeld wel een <h2> op voorkomt maar geen <h1>, dan heb je waarschijnlijk daarvoor gekozen om je de <h2> mooier vindt, in plaats van dat je de structuur van je content wilt aangeven. Zodra je CSS hebt geleerd, kun je die taal gebruiken om de vormgeving aan te gaan passen. Een ander voorbeeld van een semantische fout is als je meerdere elementen achter elkaar gebruikt. Dit doe je waarschijnlijk omdat je wat extra ruimte tussen twee onderdelen wilt toevoegen. Dat heeft echter te maken met vormgeving en niet met de structuur van je content. C Hanteer de volgende vuistregel: Gebruik HTML alleen om de structuur in je content aan te geven en CSS om de vormgeving te verzorgen. Bedenk wat de semantische waarde is van een tag als je die gebruikt. Gebruik bijvoorbeeld geen tabellen om de lay-out van je pagina te bepalen en gebruik een <dl> element alleen waar hij voor bedoeld is, namelijk om een lijst van definities te geven. Met CSS kun je op een later moment de exacte vormgeving nog gaan bepalen. Denk dan aan typografie, kleuren, achtergronden, compositie en dergelijke. Manual Internetstandaarden 2013-14 24 / 37 1. Open in Sublime een nieuw bestand waarin je de code zet die staat op https://gist.github.com/3489096. Sla het bestand op in de zojuist gemaakte map met de naam ‘semantischefouten.html’ 2. Bekijk eerst hoe het eruit ziet in Crome. 3. Probeer de semantische fouten te vinden en te corrigeren. 4. De oplossing komt bij de oefeningen van volgende week.  OVERZICHT VAN VEELGEBRUIKTE HTML-ELEMENTEN De omschrijving die ernaast staat, geeft aan waar het element voor bedoeld is. <a> <address rel="nofollow"> <article> <aside rel="nofollow"> <blockquote> <cite> <figure> <figcaption> <footer> <header> <h1> to <h6> <img /> <li> <nav> <ol> <q> <section> <table> <td> <th> <tr> <ul> Manual Internetstandaarden 2013-14 Link Contact informatie over de auteur van de pagina Artikel Sectie waarin content staat die gerelateerd is aan naastliggende content Een lange quote Een enkel regeleinde Referentie naar de titel van een boek, film, krant en dergelijke Benadrukt tekst zodat het de klemtoon krijgt Gebruik voor een figuur eigenlijk altijd in combinatie met de <figcaption> tag Het onderschrift bij een figuur Footer van een pagina of van een sectie Header van een pagina of van een sectie Koppen Plaatje Lijstelement Sectie voor navigatie Genummerde lijst Paragraaf Een korte quote Sectie Maakt een stuk tekst extra belangrijk Tabel Een cel in een tabel Een kolomkop van een tabel Een rij in een tabel Ongeordende lijst 25 / 37 OEFENING 4 – EEN MENU MAKEN IN HTML  EEN MENU MAKEN IN HTML De beste manier om een menu in HTML op te maken is door een ongeordende lijst, <ul>, met daarin lijstelementen, <li> en linkjes <a> te gebruiken. Dat is semantisch gezien de beste oplossing. Daarnaast is het gebruikelijk om je lijst met linkjes in een <nav> te zetten. Maak je geen zorgen over dat je straks een menu zonder bullets wilt, of dat de linkjes naast elkaar in plaats van onder elkaar komen te staan. Dat soort zaken kun je later met CSS helemaal gaan bepalen. Voorbeeld: <nav> <ul> <li><a <li rel="nofollow"><a <li rel="nofollow"><a <li rel="nofollow"><a </ul rel="nofollow"> </nav> href="pagina1.html">Pagina href="pagina2.html">Pagina href="pagina3.html">Pagina href="pagina4.html">Pagina 1</a></li> 2</a></li> 3</a></li> 4</a></li> 1. Maak drie hele simpele pagina’s in HTML. Op elke pagina neem je een menu met links naar de andere pagina’s. Ook zet je een kop neer waaraan je kan zien op welke pagina je je bevindt. Zie de afbeeldingen hieronder. 2. Controleer de syntax van elke pagina met de validators. Manual Internetstandaarden 2013-14 26 / 37 CONTENT WEBSITE VERZAMELEN / MAKEN • • • • • Je start deze week met het maken van je website waarop je aan het eind van dit vak beoordeeld wordt. Het makkelijkste is als je de content van het vak ‘Tekst in context’ ook gebruikt voor deze website, maar je mag ook een ander onderwerp kiezen. In je website moeten minstens vier pagina’s komen. Bedenk welke pagina’s je website gaat hebben. Schrijf de content of verzamel de content. LET OP: dat je je bron moet vermelden als je de content niet zelf schrijft. Maak een ‘over mij’ pagina waarin je kort vertelt over jezelf en eventueel contactgegevens neerzet. Maak HTML-pagina’s voor de content. Je hoeft nu nog niet na te denken over vormgeven, alleen nog maar het structureren van je content. Zet de website online op je Oege account. STUDIEVRAGEN BLOKWEEK 3 1. 2. 3. 4. 5. 6. Wat doet een validator? Wat is het verschil tussen syntactische fouten en semantische fouten in je HTML-code? Hoe kan je een menu maken in HTML-code? Wat zijn veelgebruikte HTML-tags? Wat zijn nieuwe HTML5 elementen? Wat is het verschil tussen block-level, inline en invisible elementen? Manual Internetstandaarden 2013-14 27 / 37 BLOKWEEK 4 Nu begint het leuke deel van internetstandaarden, namelijk het leren van CSS! Hiermee kan je je website gaan vormgeven. LEES- EN WERKROUTES BEGINNELING GEVORDERDE Lezen hoofdstuk 10,11,12 van het boek. Deadline: voor HC op 2 oktober « « Oefeningen CSS. Zie hieronder Deadline: voor werkgroep in blokweek 5 « HTML-template voor eigen website maken. Zie hieronder Deadline: voor werkgroep in blokweek 5 « (Optioneel) Nieuwe mogelijkheden HTML5 onderzoeken. Zie pag. 29 EXPERT « « (Optioneel) Voorbereiden 10-min presentatie voor studentensymposium. Zie pag. 29 « OEFENINGEN CSS De CSS oefeningen staan niet in deze manual, want er staan goede oefeningen online. • • • Ga naar http://www.codecademy.com/tracks/web Sla de HTML oefeningen over en ga gelijk van start met de zevende les ‘CSS: an overview’ Doe ook de negende les ‘CSS Selectors’ HTML-TEMPLATE VOOR EIGEN WEBSITE MAKEN • • Schets de layout van je eigen website Maak de HTML-template voor de pagina’s in je website. Heeft elke pagina dezelfde layout, dan heb je een enkel template. Als je meerdere lay-outs hebt, maak je ook meerdere templates. Gebruik in je template in ieder geval de volgende elementen: o <div id="wrapper"> o <header> o <nav> o <div id="content"> o <footer> En eventueel: o <section> o <article> o <aside rel="nofollow"> • Maak een begin met de stylesheet voor je website. Ga nu alleen nog aan de slag met typografie en kleuren (tekstkleur en achtergrondkleuren). Zet je stylesheet online • Manual Internetstandaarden 2013-14 28 / 37 NIEUWE MOGELIJKHEDEN HTML5 ONDERZOEKEN (GEVORDERDEN) Vorige week heb je de factsheet van HTML5 gelezen. Dat klinkt allemaal nog niet zo heel spannend. Dat klopt ook wel, het wordt pas echt leuk als je HTML5 met CSS3 en Javascript gaat combineren. Het is soms wat verwarrend dat de term “HTML5” zowel gebruikt wordt voor de nieuwe versie van HTML, als voor die combinatie van HTML5, CSS3 en Javascript. Deze week kun je je verdiepen in het ‘pure’ HTML5 deel. Lees onderstaande bronnen en ga ermee experimenteren, bijvoorbeeld in de website voor dit vak. Je kunt je verder verdiepen in nieuwe HTML5 elementen, naast de elementen die we vorige week hebben behandeld, zoals <section>, <nav> en <article>. Er zijn bijvoorbeeld nieuwe formulierelementen die beschreven staan in hoofdstuk 7 van het boek. Er zijn ook meer mogelijkheden om animaties, video en audio in je website te integreren, zie hoofdstuk 9 van het boek. Helaas moet je ook rekening houden met het feit dat veel browsers nog geen ondersteuning bieden voor al dit nieuws. • • http://caniuse.com Overzicht van welke browsers en browserversies welke css3 en html5 eigenschappen ondersteunen. http://modernizr.com/ Modernizr is een javascript library om te zien welke html5 en css3 eigenschappen worden ondersteund door de browser van een gebruiker. Als je nog meer wilt weten, overweeg dan om de volgende twee goedkope en goede boekjes te kopen: • • HTML5 for Web Designers, Jeremy Keith, A Book Apart, http://www.abookapart.com/products/html5-for-web-designers CSS3 for Web Designers, Dan Cederholm, A Book Apart, http://www.abookapart.com/products/css3-for-web-designers Volgende week meer over CSS3 voor gevorderden. 10-MIN PRESENTATIE STUDENTENSYMPOSIUM (EXPERT) Als je de diagnostische toets met minstens een 8 hebt gehaald, kun je zeker wel wat extra uitdaging gebruiken. We willen graag dat studenten ook van elkaar leren. Daarom kun je een presentatie van maximaal 10 minuten aan je klasgenoten geven over een geavanceerd onderwerp. Denk aan onderwerpen als: responsive webdesign, geolocatie, de mogelijkheden van het canvas element, 3D, interactieve elementen met ajax etc. Als je inspiratie nodig hebt, kijk dan bijvoorbeeld op http://www.html5rocks.com. Overleg met je docent welk onderwerp je wilt doen en in welke lesweek je de presentatie gaat houden. De beste expert studenten mogen hun presentatie geven aan alle propedeusestudenten tijdens het laatste college van Internetstandaarden. Manual Internetstandaarden 2013-14 29 / 37 STUDIEVRAGEN BLOKWEEK 4 1. 2. 3. 4. 5. 6. 7. 8. Wat wordt bedoeld met scheiding van vormgeving, inhoud en gedrag? Wat zijn voordelen van het scheiden van vormgeving, inhoud en gedrag? Wat is het verschil tussen inline, intern/embedded en externe CSS-code? Hoe kan je je CSS code valideren? Hoe ziet de anatomie van een CSS-regel eruit? Welke verschillende soorten selectoren zijn er? Wat wordt bedoeld met 'Cascading' in CSS? Wat wordt bedoeld met 'overerven' binnen CSS? Manual Internetstandaarden 2013-14 30 / 37 BLOKWEEK 5 LEES- EN WERKROUTES BEGINNELING GEVORDERDE Lezen hoofdstuk 13 en 15 van het boek. Deadline: voor HC op 8 oktober « « Oefeningen CSS. Zie pag. 31 Deadline: voor werkgroep in blokweek 6 « jQuery. Zie pag. 31 Deadline: voor werkgroep in blokweek 6 Werk verder aan de eindopdracht Deadline: eindopdracht grotendeels af in blokweek 7 (Optioneel) Nieuwe mogelijkheden CSS3 onderzoeken. Zie pag. 32 EXPERT « « « « OEFENINGEN CSS We gaan weer verder met CSS oefeningen van http://www.codecademy.com/tracks/web • Volg de elfde les ‘CSS Positioning’ JQUERY (GEVORDERDEN) Als je al gevorderd bent, is het waarschijnlijk leuk om in je website te gaan werken met javascript/jQuery. Kies zelf een tutorial die je aanspreekt: • • • • http://www.codecademy.com/tracks/jquery http://learn.jquery.com http://try.jquery.com http://www.w3schools.com/jquery Manual Internetstandaarden 2013-14 31 / 37 NIEUWE MOGELIJKHEDEN CSS3 ONDERZOEKEN (GEVORDERDEN) Met de komst van CSS3 zijn veelvoorkomende vormgevingspraktijken nu een stuk makkelijker te realiseren dan voorheen. Denk aan zaken als ronde hoeken, transparantie, gradient, schaduwen etc. Nog leuker wordt het met transities en transformaties, want hiermee kan je simpele animaties maken, vaak zonder Javascript. Het is nog wel steeds een gedoe om het er in verschillende browsers en browserversies goed uit te laten zien. Aan dit soort zaken merk je dat CSS3 nog steeds geen standaard is en elke browser net anders werkt als de andere. Als je wilt experimenteren met de nieuwe CSS3 eigenschappen kun je in ons boek kijken. In de CSS hoofdstukken staat her en der vermeld wanneer het om een CSS3 eigenschap gaat. Je kunt ook bijvoorbeeld kijken op http://www.css3.info/ voor onder andere tutorials. Een heel handige site vind ik http://css3please.com/, want hier staan de belangrijkste eigenschappen op één pagina vermeld en kun je simpel de code overnemen. Als je wilt zien wat anderen maken, kijk dan bijvoorbeeld naar dit artikel in Smashing magazine: http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/#more120609. STUDIEVRAGEN BLOKWEEK 5 1. 2. 3. 4. Wat is het box-model? Wat is het verschil tussen een fixed- en fluid-layout? Hoe kun je meerdere kolommen maken met CSS? Hoe kun je van een HTML-lijst met menu-items een mooi vormgegeven menu maken met CSS? Manual Internetstandaarden 2013-14 32 / 37 BLOKWEEK 6 LEES- EN WERKROUTES BEGINNELING GEVORDERDE Lezen hoofdstuk 16 en 17 van het boek. Deadline: voor HC op 15 oktober « « Maak eindopdracht zoveel mogelijk af. Deadline: voor werkgroep in blokweek 7 « « EXPERT MAAK EINDOPDRACHT ZOVEEL MOGELIJK AF Volgende werkgroep is de laatste werkgroep waarin je nog met vragen en problemen bij de docent terecht kunt. Zorg dus dat je de eindopdracht zover mogelijk afmaakt en ergens een lijstje met vragen en problemen vóór de volgende les opschrijft. STUDIEVRAGEN BLOKWEEK 6 1. 2. 3. 4. 5. 6. 7. Wanneer zet je een afbeelding in je HTML en wanneer in je CSS? Wat is een sprite en wat kun je ermee? Hoe kun je je website online zetten? Wat zijn nieuwe CSS3 eigenschappen? Wat zijn voor- en nadelen van CSS3 ten opzichte van CSS2? Wat is javascript en wat kun je ermee? Wat is jQuery en wat kun je ermee? Manual Internetstandaarden 2013-14 33 / 37 BLOKWEEK 7 LEES- EN WERKROUTES Maak eindopdracht af en zet online Deadline: voor werkgroep in blokweek 9 BEGINNELING GEVORDERDE « « EXPERT MAAK EINDOPDRACHT AF EN ZET ONLINE In blokweek 8 zijn er geen lessen in verband met het herfstreces. In blokweek 9 vind de beoordeling van de websites plaats. Je website moet dus vóór aanvang van de werkgroep in blokweek 9 helemaal af zijn en online staan. STUDIEVRAGEN BLOKWEEK 7 1. Wat is de rendering engine van een browser? 2. Wat is DOM-manipulatie? 3. Hoe kun je een simpele DOM-manipulatie met jQuery realiseren? Manual Internetstandaarden 2013-14 34 / 37 NIEUWELING GEVORDERDE EXPERT BOEKEN, SOFTWARE EN WEBSITES X X X Aanbevolen. Dit goedkope digitale boekje is handig als je al HTML kent en meer wilt weten over HTML5. X X CSS3 for Web Designers, Dan Cederholm, A Book Apart, http://www.abookapart.com/products/ css3-for-web-designers Aanbevolen. Dit goedkope digitale boekje is handig als je al CSS kent en meer wilt weten over CSS3. X X Responisive Web Design, Ethan Marcotte, A Book Apart, http://www.abookapart.com/products/ responsive-web-design Aanbevolen. Heb je al veel ervaring met websites maken, dan kun je hier meer leren over responsive web design. TOELICHTING BOEKEN HTML & CSS – design and build websites, Jon Ducket, Wiley, ISBN: 978-1-118-00818-8, http://htmlandcssbook.com/ Verplicht. Het lesboek dat we gebruiken bij dit vak. Dit is een verplicht boek, want je gebruikt het om je voor te bereiden op het tentamen. HTML5 for Web Designers, Jeremy Keith, A Book Apart, http://www.abookapart.com/products/ html5-for-web-designers X SOFTWARE EN PLUGINS https://www.google.com/intl/en/chrom e/browser/ Verplicht. Installeer Chrome als je die nog niet op je computer hebt staan. Deze browser ondersteunt de meeste html5 en css3 eigenschappen en gebruik je bij het nakijken van je website. X X X http://www.sublimetext.com/ Aanbevolen. Deze code editor voor zowel Mac als Windows heeft onze voorkeur bij dit vak. Je mag ook een andere code editor gebruiken als dat je voorkeur heeft, maar we raden deze vooral aan als je nieuweling bent. X X X http://filezillaproject.org/download.php/ Aanbevolen. Filezilla is een een ftp-programma voor zowel Mac als Windows, waarmee je je website online kunt zetten. Je mag ook een ander ftp-programma gebruiken als dat je voorkeur heeft. X X X https://chrome.google.com/webstore/ detail/webdeveloper/bfbameneiokkgbdmiekhjn mfkcnldhhm Aanbevolen. Chrome extensie met allerlei handige hulpmiddelen voor het maken van websites. X X X https://chrome.google.com/webstore/ detail/w3c-html5-%26-css3validato/kobpbiokkobnmnaefmpcode eficgbfkg Aanbevolen. W3C HTML5 & CSS3 Validator voor in Chrome X X X http://www.colorzilla.com Aanbevolen. Colorpicker om makkelijk kleuren te pakken X X X Manual Internetstandaarden 2013-14 35 / 37 GEVORDERDE Basisrecept HTML X X http://htmlshell.com/ Makkelijk en snel de code voor een blanco html-pagina krijgen. X X http://www.cssplay.co.uk Heel veel voorbeelden van CSS code, voor bijvoorbeeld voor menu’s en layout X X http://css.maxdesign.com.au/ Voorbeelden van menu’s X X http://css3please.com/ Cross-browser code voor nieuwe CSS3 eigenschappen, zoals ronde hoeken, gradients, doorzichtigheid X http://matthewjamestaylor.com/blog/p erfect-multi-column-liquid-layouts Multi-column liquid layout X http://matthewjamestaylor.com/blog/e qual-height-columns-cross-browsercss-no-hacks Even hoge kolommen X EXPERT NIEUWELING https://gist.github.com/3424047 TOELICHTING WEBSITES MET VOORBEELDCODE X X WEBSITES MET TUTORIALS http://www.codecademy.com/tracks/w eb Oefeningen om html, css en nog veel meer talen te leren. X http://css.maxdesign.com.au/ Tutorials over menu’s, float en selectoren X http://css-tricks.com CSS truuks en discussies X X X TOOLS http://validator.w3.org/#validate_by_i nput HTML validator die je kunt gebruiken als je website nog niet online staat. X X X http://jigsaw.w3.org/cssvalidator/#validate_by_input CSS validator die je kunt gebruiken als je website nog niet online staat. X X X https://sublime.wbond.net Sublime package manager om makkelijk plugins voor sublime te installeren X X X http://colorschemedesigner.com/ Tool om goede kleurencombinaties te kiezen X X X http://jquery.com Javascript library X X http://modernizr.com/ Modernizr is een javascript library om te zien welke html5 en css3 eigenschappen worden ondersteund door de browser van een gebruiker. X X http://caniuse.com Overzicht van welke browsers en browserversies welke css3 en html5 eigenschappen ondersteunen. X X Manual Internetstandaarden 2013-14 36 / 37 GEVORDERDE EXPERT Een demonstratie van wat je met CSS kunt bereiken. X http://css.maxdesign.com.au/ Presentaties waarin de principes van CSS overerving en cascading worden uitgelegd X http://www.smashingmagazine.com/ Online magazine over webdesign X X http://www.html5rocks.com Online platform voor webdevelopers X X http://www.alistapart.com/ Artikelen voor mensen die websites maken X X NIEUWELING http://www.csszengarden.com/ TOELICHTING WEBSITES MET ARTIKELEN EN VERDIEPENDE INFORMATIE Manual Internetstandaarden 2013-14 37 / 37 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/manual-internetstandaarden-hva-cmd-blok-v10" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MANUAL INTERNETSTANDAARDEN. HvA - CMD Blok v1.0"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <a href="https://adoc.pub/about">About Us</a> | <a href="https://adoc.pub/privacy">Privacy Policy</a> | <a href="https://adoc.pub/term">Terms of Service</a> | <a href="https://adoc.pub/copyright">Copyright</a> | <a href="https://adoc.pub/contact">Contact Us</a> | <a href="https://adoc.pub/cookie_policy">Cookie Policy</a> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

MANUAL INTERNETSTANDAARDEN. HvA - CMD Blok v1.0

Recommend Documents

Hallo wereld!