Les 2: Can t get it out of my <head> 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. Docenten Koop Reynders Jorrit de Vries k.g.reynders@hva.nl Lesdoelen Geschiedenis en timeline HTML5 kennis overdragen (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. College (30) 2. Artikel bespreking (30) 3. Aan de slag (90) 4. Eindopdracht (30) 5. 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 Opdracht 1 - Het Video element - 30 minuten 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: Video: Maak! Minimale toepassing video element: <video src= video_file.mp4 controls></video> 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 <video> Hij moet voor iedereen met een hedendaagse browser werken. Zorg voor een fallback voor oude browsers. Er moet een caption track toegevoegd worden Captions http://clips.vorwaerts-gmbh.de/big_buck_bunny.webvtt Webm http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm OGG http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv MP4 http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 Plaatje http://sandbox.thewikies.com/vfe-generator/images/big-buckbunny_poster.jpg Voor deze opdracht zijn de bronbestanden ook hier te vinden zijn: https://gist.github.com/2339588 Bespreking opdracht 1 Resultaat van een student in Gist bespreken. Antwoord op de opdracht staat hier: https://gist.github.com/2339628
source en volgorde video files Je geeft het video element verschillende source files voor verschillende browser ondersteuning. De volgorde is bepalend voor welk file wordt afgespeeld. Een browser pakt een source als deze wordt herkend. Dus bovenaan zet je het belangrijkste video file. De volgorde wordt mp4 als eerste voor een Safari bug... En mp4 is het kleinste bestand met de hoogste kwaliteit. Dat wil je eigenlijk: Meest voor het minst. Voor een dubbeltje op de eerste rang zitten. Dus je bepaalt de volgorde op basis van de kwaliteit van de video. Het file dat bovenaan staat probeert een browser als eerst af te spelen. Als dat lukt wordt de rest van de code overgeslagen. De ogg versie staat alleen als fallback voor een beperkt aantal oude browsers die dit alleen kunnen lezen. Als je deze bovenaan zet wordt deze ook door browsers gepakt die ook mp4 of webm zouden kunnen afspelen. En dat wil je niet. ogg is groot en minder van kwaliteit. track Track element is voor ondertitleing. Het support voor track is nihil. Maar dat zou in de toekomst wel kunnen gebeuren. Misschien wordt er een browser ontwikkeld die dit gaat gebruilken. De src geeft een path naar het document. srclang is de taal van de ondertiteling. type Het type element moet je meegeven omdat oude browsers dit nodig hebben. Moderne browsers kijken alleen naar extensie van het file. width en height De width en height hoef je niet mee te geven. Waarschijnlijk wordt het video element zonder width en height door browsers anders weergegeven. Dit kun je in CSS doen. Bijvoorbeeld om de width en height niet in pixels maar in procenten weer te geven. fallback Tussen <video> en </video> kun je iets neerzetten dat wordt getoond als een browser geen van de video kan tonen. Hier staat html code met een plaatje, tekst, boodschap of bijvoorbeeld een flash object. Studenten vragen tijdens de les
-Wat is een caption? -Waarvoor is het type element in het source element? - Mijn ogv file doet het niet in Firefox? (antwoord: bij ogv file moet je type=ogg gebruiken...) Opdracht 2 - HTML5 Webforms 2.0-60 minuten Opdracht: HTML5 formulieren. In HTML5 zijn hele veel meer (functionele) mogelijkheden bedacht: placeholder > text voor leeg form field <input type=text id=hobbies placeholder= gimme some > autofocus <input type=text id=status autofocus> required <input type=password id=pw required> autocomplete > disable auto-completen, bv veiligheid <form autocomplete=off> of <input type=text autocomplete=off> datalist <input type=text id=all_your_coders_r_belong_to_us list=code _archetypes> <datalist id=code _archetypes> <option value=enthusiast > <option value=mash-up-artist> <option value= inventor > <option value= wizard > </datalist Input types <input type= > searching contact types: email, website, phone range (slider) number dates and times color pickers pattern Opdracht 2a Maak het volgende formulier met valide, toegankelijke HTML. Gebruik labels voor de verschillende elementen, vb:
<label for naam >naam</label> <input id= naam > 1. Contactgegevens 1a. Naam 1b. E-mail 1c. Straatnaam 1d. Nummer 1e. Postcode 1f. Land 1g. Telefoonnummer 2. Voorkeuren 2a. Lievelingskleur 2b. Leukste maand 2c. Hoe goed is dit ongeveer? (1 tm 10) De opdracht staat ook hier: https://gist.github.com/2339774 bespreken opdracht 2a Resultaat van een student in Gist bespreken. Antwoord op de opdracht staat hier: http://dabblet.com/gist/2339794 Waar zitten de fieldsets? Met de fieldset groepeer je content die thematisch bij elkaar hoort. Een <legend> geeft aan waar het fieldset over gaat. Een titel van de fieldset. Dit element is primair gekoppeld aan de fieldset. Kloppen de label/input paren? Een label is gekoppeld aan een input of textarea. Dit is ook belangrijk voor screenreaders. Handig voor gebruik is dat je op een label kan klikken om een element focus te geven. Opdracht 2b Vervang de klassieke formulier-attributen zo nodig door HTML5 attributen op deze pagina. Welke input types kunnen in HTML5 specifiek worden ingevuld. https://gist.github.com/2339825 Bespreken opdracht 2b Het resultaat moet er ongeveer zo uitzien: http://dabblet.com/gist/2339841
We bekijken een aantal gekozen oplossingen en bespreken welk attribuut waarbij hoort. Met required (bool) geef je aan welke form elementen verplicht zijn (overigens kun je die ook heel makkelijk stylen) Het attribuut placeholder kun je heel eenvoudig een standaard tekst in een input laten zien. Oude browsers negeren dit. Bij het number type krijg je in sommige browsers automatisch pijltjes naast het element. Als je geen pijltjes wil, bijvoorbeeld om dat je dit lelijk vindt, zou je bijvoorbeeld een pattern kunnen gebruiken. Dan geef je met een regularexpression aan wat de gebruiker mag invullen... Let op, browsers verwerken dit niet allemaal hetzelfde. Color type en date geven in sommige browsers een color picker en calender object. Op IOS, mobile OS van Apple, verandert het toetsenbord afhankelijk van het type dat je meegeeft. Bijvoorbeeld type=email geeft een toetsenbord met een @, type=number geeft een numeriek toetsenbord. Vasilis is helemaal fan van type=date op IOS. Probeer dit maar eens met de verschillende HTML5 input types... (OS heeft voor de mac een Iphone emulator die je kan gebruiken met de development kit.) Bij type=search laat IOS bijvoorbeeld standaard een x (clear) in het field zien: Handig!
4 Eindopdracht - 30 minuten Materiaal Laptop en internet Opstelling Werkeilanden waar twee duo s aan kunnen zitten Bespreken status van de eindopdracht: vorige week heb je de basis van een Artikel pagina gemaakt. Deze les heb je een begin gemaakt met het formulier. Voor de eindopdracht moet je specifieke content in je pagina s laten zien. Deze staan op het intranet op de Maakopdracht-pagina. In de download vind je de pagina s en plaatjes die je moet gebruiken. Ook is meegeleverd een Content Matrix, met in geel aangegeven om welke pagina s het gaat. 5 Terugkijken - 20 minuten (200/200) Wat hebben we geleerd? Lesdoelen: Geschiedenis en timeline HTML5 kennis overdragen (college) Begrip over deze nieuwe webtechnologie en HTML5 semantiek (discussie) Audio en Video tag begrijpen en toepassen (aan de slag) Webformulieren met HTML 5 (aan de slag) Vooruitkijken naar volgende week, mondeling en structuur van de les bespreken: Wat moeten ze af hebben voor deeltoets 1 en hoe gaat de beoordeling? Mondeling worden gehouden met dubbele duo s, 10 minuten per gesprek. Er zijn 18 duo s, dat betekent 9 dubbele duo s. Tijdens de maak-opdrachten worden de mondelingen afgenomen. Het werkeiland vooraan de klas vrijhouden voor de mondelingen. Schema komt op het bord. Hoe moeten studenten hun werk opleveren: in een Gist en meenemen op je laptop. Pagina s moeten gevalideerd zijn. Het is belangrijker dat een student een validatie error kan uitleggen dan dat er geen errors zijn.