Wat heeft bol.com met online leren te maken?

Er was geen plek meer vrij, mensen waren enorm verrast en je voelde een golf van inspiratie door de zaal heen gaan. Daarom doe ik graag ook verslag van de sessie die wij vanuit TinQwise zelf gaven: ‘Wat heeft bol.com Lees meer...

Marcel de Leeuwe, Hans de Zwart: Self Organised Learning

Self Organised Learning, Do It Yourself Learning, Het Nieuwe Leren... Hoe we het ook noemen, we gaan er veel over horen in deze sessie. We gaan het zelfs zelf ervaren. "Maar vooral," zegt Hans de Zwart, "we gaan niet vertellen Lees meer...

Claire Boonstra: Van niet naar wel

Claire Boonstra heeft als laatste keynote iedereen in de zaal anders naar de wereld, het bedrijfsleven en leerprocessen laten kijken. De ene positieve tweet na de andere kwam voorbij via #ele13. Ook zorgde haar verhaal voor goede discussies. Volop reuring Lees meer...

Dale Stephens: New education please!

"The end of university" is de pakkende slogan waar Dale Stephens mee begint. "Uncollege is de huidige universiteit: leren buiten het systeem om, gericht op individuals, en met behulp van workshops en come togethers in de weekenden." Hij had direct Lees meer...

ITS2012 Day 2: Serious Game Design

Around 5 PM during the 2nd day of the Intelligent Tutoring Systems Conference, prof. Bertrand Marne presented a design pattern library for mutual understanding and cooperation in serious game design. According to Marne, serious game design is about collaboration that Lees meer...

Victor Peters: Ins en outs van HTML5

Victor G.B. Peters is De Webninja omdat hij een webninja is. Lang, lang geleden (zo begin jaren negentig) waren er veel webgurus en -profeten, maar dat paste niet bij Victor, vond zijn omgeving. Gurus en profeten zeggen en voorspellen veel, maar doen weinig. Victor doet. En daarbij doet hij ook nog eens veel verschillende dingen – net als een ninja. Die kan ook karate, beheerst de kunst van het zwaardvechten, heeft stealthtechnieken en meer. Deze ninja is journalist, docent, schrijver, programmeur en houdt niet van poespas. De toon is gezet: Victor praat graag en met humor. En hij is dus een webninja.

Allereerst vertelt hij waarom we bij zijn presentatie zijn: hij gaat ons iets vertellen over de dag van morgen, over een nieuwe visie; dat het allemaal geen rocket science is, zoals hij zal laten zien; en dat inhoud belangrijk is. Waar we het dan precies over zullen gaan leren is HTML5. Wat het is, wat het niet is, wat het kan, waarom het er is… Deze insteek is voornamelijk bedoeld voor leken, maar mijn conclusie is dat het ook voor de gevorderde leek een waardevolle toevoeging kan zijn. Maar daarover later meer.

We beginnen bij het begin: wat is html? Dit lijkt een wel heel elementaire stap, maar het blijkt een belangrijke basis. Victor haalt er een aantal dingen bij.

Server vs. browser – Ten eerste is er het verschil tussen servers en browsers. Een server staat ergens in Nederland, of ergens anders in de wereld, in een datahotel. Hierop worden allerlei gegevens bewaard en verwerkt. Daar merk je als consument meestal helemaal niets van. Aan de andere kant zijn er de browsers. Deze geven informatie weer. Tussen servers en browsers vindt uitwisseling van informatie plaats. Althans: er wordt informatie verzonden en ontvangen. Victor vergelijkt het met een ingezonden brief: je leest de krant en bent het ergens niet mee eens. Je vult in je browser een formulier in en stuurt dat naar de server. Daar wordt die informatie opgeslagen en er wordt – als het goed is – iets met die informatie gedaan. De nieuwe krant wordt gepubliceerd en komt jouw kant op. Je leest hem in je browser en zo is het kringetje rond. Wat is HTML5? Het speelt zich af in je browser. Maar… heeft ook iets te maken met de communicatie met de server. Later zal duidelijk worden waarom.

Talen voor het web – Dan zijn er verschillende talen op het web. Er zijn servertalen, zoals PHP, ASP, .Net, Perl, Java en meer. Ook zijn er browsertalen: HTML, Javascript, CSS… Servertalen gaan over wat er gebeurt onder de motorkap. Het programmeren ervan kun je vergelijken met het sleutelen aan een auto. Browsertalen gaan over het rijden in de auto. Over de interactie en hoe hij eruit ziet. En dan zijn er nog allerlei browserplugins zoals Flash (ActionScript), Silverlight en ActiveX. Deze laatste maken het de consument op het moment erg moeilijk, vooral de Apple liefhebbers. Want tja… Flash werkt niet op een iPad. Op de vraag of dat dom is van Apple antwoordt Victor dat dat niet relevant is. Ook zonder een oordeel te vellen over Apple is het nog steeds ruk: het werkt niet voor de consument.

Wat is eigenlijk het nut van deze plugins? Ze zorgen voor een betere beleving, voor audio en video, een flitsende presentatie en interactiviteit. Tegelijk zijn ze vervelend omdat je ze apart moet installeren, ze niet functioneren in elke browser, operating system en apparaat, en ze zijn niet open. ‘Open’ in de zin van dat ze eigendom zijn van een bedrijf. Dat ze niet gratis zijn maakt Victor niet eens zoveel uit, maar het eigendom maakt het vaak ingewikkeld en soms zelfs politiek – denk wederom Apple en Adobe Flash. Wat is HTML5? Het bestaat uit browsertalen. HTML5 is een combinatie van HTML, CSS, javascript en inhoud. Maar wederom: hierover later meer.

Crossplatform – Het web heeft zich vanaf ongeveer 1990 steeds verder ontwikkeld. Het begon met platte tekst – heel spannend in die tijd! – en daarna volgden afbeeldingen, interactie en ten slotte media. Dat is het punt waarop we nu zo’n beetje zijn. Als we in de toekomst kijken, wordt het web vervolgens steeds meer integrated. Om dit te bereiken, is volgens Victor een andere benadering nodig dan die we tot nu toe kennen. Integrated betekent immers dat elementen worden geïntegreerd tot ‘één’. Eén toepassing, één stuk informatie, één website: voor iedereen, overal, voor elk <ding> en met optimale vindbaarheid. Crossplatform.

‘HTML4′, de voorganger van HTML5, kan dit niet. Als je alle plugins en niet-standaardelementen van de oude HTML weglaat en het dus crossplatform maakt, blijf je over met iets wat geen audio en video kan afspelen, wat geen data kan opslaan in de browser (dat gebeurt allemaal op de server, zie daar het bruggetje met browsers en servers) en wat ingewikkeld is en dus alleen voor technische programmeurs bedoeld is. Dan is er ook nog XHTML, maar dat kan ook niet veel meer. Volgens Victor is XHTML “Dood. Het is HTML met hier en daar een streepje.” En wat is XML dan? Dat is een structuurtaal, een soort apothekerskast die aangeeft welke data waar staat.

Terug naar HTML5. Want dat kan alles wat hierboven beschreven staat, wél. Het functioneert zonder plugins en speelt tóch audio en video af. Het kan zelf tekenen: je hoeft dus geen statische afbeeldingen of tabellen meer te plaatsen, maar vraagt de browser dynamisch de juiste lijnen te plaatsen. Het is apparaatloos en dialectloos; aangezien elke browser op dit moment iets anders doet met HTML ook een erg belangrijke eigenschap. Zo hoef je – in het ergste geval – bijvoorbeeld geen vier verschillende websites meer te bouwen voor Internet Explorer, Firefox, Chrome en Safari. En HTML5 geeft betekenis. Het gebruikt logische termen en betekenisvolle code die de informatie in je website of toepassing altijd en overal vindbaar maken.

Ten slotte is er de browsertest – want HTML5 is nog steeds volop in ontwikkeling. Dus kun je via www.html5test.com checken in hoeverre jouw pc-, tablet- of smartphonebrowser al voldoet aan de mogelijkheden van HTML5. De uitslagen zijn soms bemoedigend en soms ronduit bedroevend. Internet Explorer 9 scoort een schrikbarende 138 van de 500 punten, terwijl Chrome 18 een aardige 400 punten binnenhaalt. Dan wordt de onvermijdelijke vraag gesteld: wanneer is HTML5 ‘af’? Nooit, is het antwoord. Het zal in ontwikkeling blijven, maar stiekem zullen over vijf jaar ‘ineens’ alle websites in HTML5 geprogrammeerd zijn, is Victor’s voorspelling.

Nu we begrijpen wat er allemaal bij HTML(5) komt kijken, is het tijd om door te gaan naar de drie-eenheid (in vier delen). Op deze manier laat Victor zien hoe de verschillende browsertalen zich tot elkaar verhouden en wat dit met HTML5 te maken heeft. We beginnen met de drie-eenheid: structuur, vorm en interactie.

  • Structuur is HTML: het geeft een geraamte aan een website. Het geeft aan waar het begin is, het midden en het eind. Het benoemt de plaats van koppen en alinea’s, media en menu’s.
  • Vorm is CSS: het geeft aan hoe de structuur van HTML moet worden weergegeven. Blauwe of groene tekst? Wat voor soort achtergrond? Ronde hoeken, wel of geen lijnen zichtbaar?
  • Interactie is Javascript: het beschrijft wat de website moet doen. Wat gebeurt er als de gebruiker op een knop klikt? Hoe kun je video op seconde dertig laten starten?

Het vierde element in deze drie-eenheid is in feite de reden dat we op het E-learning Congres zijn: de inhoud. Want wat zijn structuur, vorm en interactie zonder vulling? Wat is leren zonder inhoud? Deze inhoud wordt geïnjecteerd in de eerste drie elementen via een externe bron, bijvoorbeeld via php. Er wordt naar php verwezen in de code van de website, zodat je browser weet welke inhoud op te halen van de server. En hier zit één van de trucs van HTML5. HTML5 scheidt inhoud en structuur van elkaar en houdt de structuur puur en voor alle browsers begrijpelijk. Elke browser kan met deze structuur omgaan en elke browser kan de inhoud inlezen in de structuur. Zonder plugins! Uiteraard, nog niet alle browsers kunnen met alle ins en outs van HTML5 omgaan (zie de browsertest), maar de basis is er.

Een bijkomend voordeel is dat browsers de server niet voortdurend nodig hebben. Browsers gaan in feite functioneren als miniservertjes en communiceren alleen data met de server wanneer dat echt nodig is. Lees: wanneer er data definitief moet worden vastgelegd. Je kunt bij wijze van spreken naar een website gaan, je internetdraadje doorknippen, helemaal los gaan op de site, rommelen met de informatie, interacties ondernemen, en pas als je daarmee klaar bent het draadje weer aanleggen. Op dat moment is er namelijk pas weer communicatie nodig met de server in het datahotel. Zie daar (wederom) het bruggetje met browsertalen en servertalen.

Hoe de drie-eenheid in vier delen er precies eruit ziet in de code, zien we in een live demonstratie die hier niet eenvoudig in enkele regels te herhalen is. De kern is echter dat het simpel is en zelfs voor de leek te begrijpen. Een vervolgconclusie is dat HTML5 dus helemaal niet zo moeilijk is. Victor betoogt dat we programmeurs dus ook niet moeten geloven wanneer ze zeggen dat het dat wél is. Een beetje programmeur kan HTML5 zo uit zijn mouw schudden.

Ten slotte komt Victor ook nog even terug op een laatste functie van HTML5: het geven van semantische betekenis  aan de structuur. Door logische, betekenisvolle code te gebruiken wordt informatie op een website beter vindbaar. In plaats van <p> en <h1> te gebruiken, bevat HTML5 – bij wijze van spreken – termen als <artikel>, <menu> en <contact>. Dit zorgt ervoor dat inhoud beter gescheiden wordt van de structuur en daardoor beter vindbaar wordt.

Zo hebben we in anderhalf uur een spoedcursus HTML5 gekregen en kunnen we ineens allemaal een beetje programmeren. Leuk! Zoals ik al zei, beschouw ik mezelf niet als complete leek, maar meer als gevorderde leek. Zoals meer TinQers ken ik wel wat HTML en CSS en weet ik ongeveer wel hoe het zich tot elkaar verhoudt. Ook meende ik de meerwaarde van HTML5 al aardig te kennen. Maar toch bleek uiteindelijk het complete plaatje groter dan gedacht. En dat geeft weer een meer gedegen basis voor overwegingen en aanbevelingen in de toekomst.

De bijbehorende presentatie vind je hier: http://blog.euroforum.nl/wp-content/uploads/2012/03/presentatie-den-bosch.pdf

Posted on in congres, ele12

Reactie op Victor Peters: Ins en outs van HTML5

  1. willem witlox

    Geachte heer Peters,
    Het betreft je boekje:
    “Basiscursus HTML5 inclusief CSS3″

    En dan met name blz 72, bij Oefening 6.3
    Daar wordt volgens mij een foutje gemaakt vwb het resultaat van Figuur 6.31
    Volgens mij moet in de html5 editor het element ná komen onder de .
    Dus:
    …..
    ..

    ….
    ..
    menu 3

    ….
    ..

    zo niet,…komt het plaatje van figuur 6.31 niet juist tevoorschijn

    Ik verneem graag van u.
    groet,

    willem witlox

     

Voeg een reactie toe