Workshop 1 - HTML5 & CSS3

Vandaag heb ik de eerste workshop gehad van mijn verdieping in het Webdomein. De eerste workshop ging over HTML5 en CSS3.

HTML5 is op het moment nog in ontwikkeling, maar moet binnen nu en 3 jaar de nieuwe HTML standaard worden. Daar aan gekoppeld is/wordt CSS3 ontwikkeld. 

De verschillen met de vorige versie(s) van HTML zijn aannemelijk; HTML5 legt meer de nadruk op de content. Binnen de programmeertaal wordt met behulp van nieuwe 'markup elementen' een betekenis aan de content gegeven. Zo wordt het voor browsers makkelijker om het doel/nut van de content te herkennen. Daarnaast zouden zoekmachines in de toekomst deze 'betekenissen' kunnen gebruiken om concretere zoekresultaten te bieden. 

Om een voorbeeldje te geven: De tekst die ik hier type is voor mij op dit moment de basiscontent. In HTML5 zou ik deze tekst tussen de < article > tags kunnen plaatsen. Zo weet de browser dat dit de 'hoofdcontent' is van dit stukje blog. Daarnaast zou ik binnen de < aside > tags wat neveninformatie kwijt kunnen. Denk bijvoorbeeld aan links naar andere websites, voorbeelden ter verduidelijking van wat in de 'hoofdcontent' staat, etc.

Samenvattend valt te zeggen dat HTML5 voor browsers bijdraagt aan de manier waarop de internet pagina's worden 'ontleed'; welke betekenissen de content op diverse pagina's hebben. De focus ligt op de semantics, zoals dat zo mooi heet in vaktaal.

CSS3 is de nieuwe script-taal die het design voor zijn rekening gaat nemen. Hier zijn weer een hoop nieuwe functies geïmplementeerd, die het vormgeven van websites een stuk beter en makkelijker moet maken. Denk hier bijvoorbeeld aan het toevoegen van schaduwen om een (onderdeel op je) webpagina extra dynamiek te geven, of bijvoorbeeld het afronden van de hoekjes van een < div > element.

Voorheen moest je werken met achtergrond afbeeldingen, maar nu kan het allemaal door een simpel regeltje code toe te voegen. Ook mooie 'gradients' zijn in CSS3 een kwestie van slechts een enkel regeltje code. 

Om een voorbeeld te geven van al dit bovenstaande, hebben we in de workshop een HTML5 video viewer gemaakt. Door HIER (note: deze video viewer is alleen te bekijken in Safari) te klikken, kun je zien wat ik er van gemaakt heb. 

Naast HTML5 en CSS3 zit hier ook een stukje jQuery in (met dank aan Matthijs van Veen voor het beschikbaar stellen van deze code) om te laten zien wat de mogelijkheden van deze nieuwe technieken gaan zijn.

Benieuwd wat de tweede workshop mij gaat brengen!