KOMPOOS.NL

voorbeeld - HTML5


zuiver html5

een multi-browser pagina (example)

inhoud en opmaak gescheiden - Als er niets aan de html5-specificaties van W3C is veranderd (sinds dat deze pagina on-line staat), zal er een keurige html5 pagina zichtbaar zijn. voorbeeld Er staat een afbeelding in deze section, die netjes ingesloten wordt door de tekst. Dat heeft natuurlijk niets met html5 "an sich" te maken, maar als een pagina html5 is, wil dat nog niet zeggen dat alle "normale" html-zaken opeens niet meer geldig zouden zijn, of niet meer gebruikt zouden kunnen worden. Html5 dient er eigenlijk meer voor om inhoud en opmaak "volkomen" uit elkaar te houden. En dat is heel erg verstandig om te doen. Op moment van "maken" van deze pagina, kunnen nog niet alle browsers (native) overweg met de nieuwe tags van html5. Maar daar is een simpele oplossing voor. Met behulp van een paar regels javascript worden de nieuwe elementen gewoon aan de "gereedschapskist" van de browser toegevoegd. Ik heb er nu zes toegevoegd, maar je kan dit naar eigen goed-dunken verminderen of uitbreiden (benoem gewoon wat je nodig hebt op de pagina). Veel mensen bouwen "condities" in voor het javascript. Van mij mag dat best. Als je een "IE-conditie" toe wilt voegen kan dat helemaal geen kwaad. Maar als je het niet doet, is er ook geen enkele browser die daar een probleem van maakt.

vrijheid van handelen - Als je een html5 pagina maakt hoef je echt niet "verkrampt" te proberen om een article, alléén maar, in een section te "proppen" en/of te zorgen dat een footer alléén maar onderop de pagina terecht komt. Html5 zorgt er juist voor dat er een ruime mate van vrijheid is voor de mark-up van een pagina. html5 Laat je dus niet gek maken door de "guru's" die jou schema's voorhouden van hoe je nu jouw pagina moet inrichten. Nou, dat bepaal je dus helemaal zelf. Natuurlijk zijn er regeltjes waar jij je aan te houden hebt. Alles moet netjes "afgesloten" worden (<article></article> etc.) en het is natuurlijk ook niet zo handig om een header in een footer te gaan stoppen... Maar dat is meer een kwestie van gewoon eventjes logisch denken. Om de heren "guru" een beetje dwars te zitten is op deze pagina een "section" binnen een "article" geplaatst. Welnu "heren", dat is volkomen correcte code...

html5 kan je NU gebruiken - Op bijna alle pagina's (van de kompoos.nl) wordt de css-code gegeven als die beschikbaar is. Op deze pagina heeft dat niet zoveel zin. Jouw pagina zal er volstrekt anders uit gaan zien dan deze. Het allerbelangrijkste van deze pagina is eigenlijk om bij jou de koud-water-vrees weg te nemen om html5-pagina's te gebruiken op jouw website, terwijl nog niet alle browsers volledig html5 ondersteunen. Probeer deze pagina in alle browsers die je maar wilt. Je zal er achter komen dat de feitelijke inhoud van de pagina altijd overkomt, en html5-voorbeeld dat er heel weinig verschil is tussen hoe alle diverse browsers deze pagina weergeven. Wat maakt het trouwens uit? Denk je nu echt dat als iemand deze pagina in IE7 bekeken heeft, hij dan opera8 gaat opstarten, om te controleren of de pagina pixel-precies hetzelfde is? Ik dacht het niet. Soms moet je de moed hebben om maling te hebben aan alle "gevestigde" regeltjes die jou voorschrijven dat een pagina (getoond) in IE4 er precies hetzelfde uitmoet zien als in de laatste versie van Webkit... Volslagen onzin. Waarschijnlijk bedacht door bemoeizieke managers die "de ballen verstand" van scripten hebben, en gewoon niets beter te doen hebben dan de website-ontwikkelaars "in de wielen te rijden".

gebruik wat je nodig hebt - Ik neem aan dat je weet waar jouw rechter-muis-knop voor dient. Kijk dus zelf maar even in de broncode of je wat hebt aan deze pagina. In de stylesheet daar (broncode pagina), kan je zien dat de "nieuwe" tags allemaal een display:block hebben meegekregen. Op jouw html5-pagina dien je hetzelfde te doen. In de "aside" hiernaast, nog even de outline van de pagina en de paar regeltjes script die gebruikt worden. Ik heb mijn uiterste best gedaan om netjes te scripten. Nu is dat wel normaal op de kompoos.nl, maar dit keer is er overdreven nauwkeurig de "lijn" van de code-regels "ge-script". Dan is het voor jou makkelijker om te zien hoe een html5-pagina inelkaar zit... De plaatjes op deze pagina hebben, zoals je al begrepen hebt, niets van doen met html5. Ze fleuren alleen de pagina wat op. Tenminste als je van vrouwen houdt... Anders: sorry! Er staat ook nog een "lazy-load" procedure op de pagina, om de plaatjes vertraagd in te laden. Die heeft natuurlijk ook niets te maken met dit html5-voorbeeld...

ook wat irrelevante tekst op deze pagina - Mocht jij je nog afvragen waarom er zoveel "geleuter" op deze pagina staat, zal ik je uit de droom helpen. Ik had geen zin om deze pagina te vervuilen met "Lorem ipsum dolor". Ik vond het belangrijker om wat steekwoorden aan de pagina toe te voegen (en daar had ik ook wat tekst voor nodig).