1 Les 2: Can t get it out of my Les 2 gaat over de geschiedenis van HTML. Het W3C en WHATWG. Ook wordt de HTML5 timeline besproken. In de les ga je w...
Les 2: Can’t get it out of my Les 2 gaat over de geschiedenis van HTML. Het W3C en WHATWG. Ook wordt de HTML5 timeline besproken. In de les ga je werken aan Validatie & Code lezen, Rich media elementen: Audio, Video en de mogelijkheden van Web Forms 2.0.
Lesdoelen • Geschiedenis en timeline HTML5 bespreken (college) • Begrip over deze nieuwe webtechnologie en HTML5 semantiek (bespreking) • Audio en Video tag begrijpen en toepassen (aan de slag) • Webformulieren met HTML 5 (aan de slag)
Programma (200 minuten) 1. 2. 3. 4. 5.
College (30) Artikel bespreking (30) Aan de slag (90) Eindopdracht (30) Terugkijken (20)
1 College - 30 minuten (30/200) Materiaal Papier en pen voor aantekeningen Opstelling College opstelling Geschiedenis en ontwikkeling Tim Bernard Lee (sir) > Uitvinder van WWW. Internet bestond al. Ontwikkeling van HTML, gekoppeld aan browsers. Wat was er eerder? browser of HTML? Welke browsers heb je en wanneer? Mosaic > Netscape > Opera (bestaat nog) > IE > iCab > Mozilla/Firefox > Safari > Chrome. Bekijk website: De evolution of the web http://evolutionofweb.appspot.com IE 10 wordt een indrukwekkende browser. Webkit, Presto, Gecko, Triband zijn rendering engines. We willen niet afhankelijk zijn van Webkit, dan krijg je hetzelfde als afhankelijkheid van IE: Monoculture: Makkelijk, erg vervelend, het web staat stil. W3C - WHATWG - Timeline of HTML5 W3C op basis van consensus worden ontwikkelingen vastgesteld, traag. WHATWG, groep rebellen vanuit W3C willen een praktisch web. Geen dracionian error handling. Beslissingen worden, na discussie, uiteindelijk door 1 persoon gemaakt == snel. W3C heeft uiteindelijk het werk overgenomen van WHATWG. Wanneer wordt een standaard vastgesteld? Er moeten 2 rondes toepassingen zijn gebouwd met alle specificaties. Dat duurt altijd heel lang.
2 Discussie - 30 minuten (60/200) Materiaal Papier en pen voor aantekeningen Opstelling Tafels in een vierkant, 2 groepen van 18 Introductie: Groepje van 2 of 3 studenten het woord geven en kort uitleggen wat ze moeten doen en wat de rol en activiteit is van de docent. Beoordeling, criteria. Structuur: • Groepje studenten geeft een korte samenvatting van de artikelen • Studenten uit de groep krijgen vragen over de stof • Docent mag overal doorheen praten en andere mensen een beurt geven (om te beoordelen) • Aan het eind van de discussie geeft de docent een round up over de beoordeling • Nieuwe groep aanwijzen voor les 3 Vragen: The design of HTML 5 - The design of HTML5 by Jeremy Keith (70 minuten) • Wat betekent WHATWG? Wat doen ze? Waarom zijn ze begonnen met eigen standaard? • HTML 5 design principles? • Wat is doctype? • Wat bedoelt Jeremy Keith met ‘pave the cowpaths”? • Degrade gracefully • Form type element, wat doen browser die het niet ‘snappen’ ? • HTML5 vs Flash, which side are you on? • Priority of constituencies? users - authors - implementors - specifiers theoretical purity Semantics in HTML 5 - Semantics in HTML 5 by John Allsopp • Probleem van HTML? We have simply run out of HTML elements and attributes with which to mark up more richly semantic documents • What is the single most pressing goal for the HTML 5 project? We need mechanisms in HTML that clearly and unambiguously enable developers to add richer, more meaningful semantics—not pseudo semantics— to their markup. • Wat is een grote uitdaging van de ontwikkeling van HTML? Forward and backwards compatible • Why are we inventing these new elements? Because HTML lacks semantic richness, and by adding these elements, we increase the semantic richness of HTML—that can’t be bad, can it?
• Krititek op HTML5 ontwikkeling: - We don’t need to add specific terms to the vocabulary of HTML, we need to add amechanism that allows semantic richness to be added to a document as required. In technical terms, we need to make HTMLextensible. HTML 5 proposes no mechanism for extensibility. - HTML 5, therefore, implements a feature that breaks a sizable percentage of current browsers, and doesn’t really allow us to add richer semantics to the language at all.
3 Aan de slag - 90 minuten (150/200) Materiaal Laptop en internet Opstelling Werkeilanden waar twee duo’s aan kunnen zitten Terugkijken op de opdrachten van lesweek 1: Vorige week hebben we de semantische elementen even bekeken, we hebben gekeken naar validatie. We weten weer hoe HTML werkt. Vandaag gaan we verder met andere elementen.
Opdracht 1 - Het Video element - 30 minuten Opdracht: Video: Maak! Minimale toepassing video element: De praktijk werkt anders: =politiek: Niet alle video formaten worden ondersteund door alle browsers. Je moet verschillende video sources aanbieden om alle browsers te bedienen. HTML5 Periodic Table of Elements http://joshduck.com/periodic-table.html > specs voor video element en ondersteuning https://developer.mozilla.org/en/ HTML/Element/video Het video element Plaats de onderstaande bronbestanden in een
