Studio Immo | Full-service reclame bureau | Identiteit, marketing en media ontwerp

Wat is HTML 5

Deze term is de laatste tijd flink onder de aandacht gebracht in de media. In programma's als dwdd, marketing/seo/tech websites en gadget besprekingen in andere vormen. Is HTML 5 nou eigenlijk interessant? Nou voor degene die een website willen eigenlijk niet, want het simpelweg een middel om een website te maken.

Maar wij maken wel veel mee dat marketing mensen allerlei vakbladen en vakwebsites bekijken en deze term tegenkomen. En zij willen natuurlijk wel dat hun projecten gebruik maken van de laatste technieken. Dus vandaar dit korte artikel waarvan ik hoop dat dit misschien wat verduidelijkt voor u de lezer wat HTML nou eigenlijk inhoud.

Wat is HTML

Een browser (internet explorer, safari, opera, chrome etc.) is een programma welke HTML opmaak taal/code interpreteert naar een toonbare website. Logo links, grijze achtergrond, tekst in arial, foto van de directeur met een vergroting onder een muisklik. Deze code kunt u zien als u in de browser op een webpagina klikt en "bekijk broncode" selecteert. Dan ziet alleen maar rare tekstjes en woorden welke in <> tekens staan. Deze code is gestandaardiseerd waardoor elke browser weet hoe hij met allerlei zaken om moet gaan. 

Bijvoorbeeld een titel is <title>, een paragraaf is <p>, een lijst is <ul>, een plaatje is <img>. Mocht u dit willen leren dan raad ik u de bekende dummies boeken aan of zoeken op google want er is een legio aan informatie om zelf HTML te leren.

Omdat er verschillende browsers zijn gemaakt door commerciële bedrijven heeft dit als gevolg dat iedereen dus ook zijn eigen belangen heeft. En omdat website bouwers niet voor elke browser een aparte website kunnen of willen ontwikkelen (kosten en beheersbaarheid als grootste probleem). En website bezoekers vroeger totaal andere website zagen in verschillende browsers zijn er mensen opgestaan om zaken te standaardiseren, W3C genoemd. Want het is wel leuk dat wanneer een plaatje links van de tekst moet staan, deze overal ook links staat.

Alleen W3C doet alleen in aanbevelingen aan browserontwikkelaars en visaversa doen de ontwikkelaars voorstellen aan het W3C of voeren dingen door op eigen houtje door. Moeilijk verhaal, mocht u geinterreseerd zijn lees dan gerust verder op wikipedia. Maar alles is dus vrijblijvend met de gevolgen van dien.

Maar sinds HTML is gestart (ergens begin 1990) zijn we nu beland op de standaard "HTML 4.01 strict". Maar HTML is eigenlijk alleen maar voor de statisch zaken zoals tekst en plaatjes. Alle leuke dingen die u ziet op het internet, zoals bewegende beelden, animaties, geluidjes, transparante foto's etc worden weer mogelijk gemaakt door externe opmaaktalen en scriptjes welke gekoppeld zijn aan HTML. En ook hiervoor zijn weer standaarden of worden door aparte bedrijfjes gepushed. Als belangrijkste en bekende spelers flash van Adobe en silverlight van Microsoft waarvan u vast wel een keer een update of een installatie voor heeft moeten doen.

Maar hierdoor is het internet wel fantastisch geworden. Waar we vroeger tegen herhalende plaatjes en platte tekst keken, hebben we nu dynamische websites waarin alles mogelijk is. Database gestuurd, dropdown navigaties, dynamische formulieren, films, animaties en noem het maar op.

Zie hieronder bijvoorbeeld het verschil van de NY Times in 1993 en nu.... U kunt ook uw huidige website bekijken zoals deze gemaakt zou zijn in 1993 door hier te klikken en uw url in te voegen. Erg leuk, en herkenbaar voor mensen die al wat langer met internet bezig zijn.

Maar wat is nou HTML 5, meneer van Immo?

Nou HTML 5 is niks meer dan een verbetering op de huidige standaard. Meer mogelijkheden, meer snelheid en meer flexibiliteit voor webdevelopers zoals wij, waardoor wij nog veel mooiere dingen kunnen maken voor u. Maar ik zal u wel wat praktische voorbeelden geven om u een idee te geven wat eerst niet (gemakkelijk) kon en nu wel.

Code

Normaliter benoemde wij de navigatie, start- en afsluiting van een pagina, artikel e.d. van a tot z  helemaal zelf. Nu zijn daar standaarden voor, wat het voor ons gemakkelijker maakt om te bouwen. En dit is goed voor de snelheid qua bouwen (minder code) en goed voor zoekmachines (door duidelijke definities  van verschillende elementen op een website). 

Locatie

Normaal moest wij allerlei moeilijk scripts schrijven om de locatie van de bezoeker te bepalen, nu kan dit relatief simpel. En met opkomst van mobiele apparaten kunnen daar allerlei leuke toepassingen voor worden bedacht. Commercieel gezien het aanbieden van reclame m.b.t de locatie waar u zich bevind. Maar ook automatisch taalomschakeling, praktisch wegwijzer informatie of routehulp naar het bedrijf waar u naar zoekt binnen de website van dit bedrijf zelf.

Drag and drop

Elementen zijn vrij. Hiermee kunt u gemakkelijk zelf pagina's inrichten hoe u hem zelf graag wilt zien. Een voorbeeld zou uw favoriete webwinkel kunnen zijn. Horloges en schoenen zijn niet uw ding, maar wel de dvd's, jurken van een bepaald merk en telefoons. De ongewenste blokjes met advertenties of collectie overzichten sleept u weg en de wel gewenste blokjes sleept u naar het hoofdscherm. En elke keer wanneer u uw favoriete website bezoekt ziet u direct de zaken die u interesseert.

Offline gebruik

Normaliter moest u voor de gehele duur van een website gebruik online zijn. Met HTML5 kunt u online beginnen met het schrijven in uw blog, offline gaan en verder gaan zonder merkbaar verschil en verder tikken. En op het moment dat u weer online bent kunt u de geschreven tekst online zetten.

Audio en video

Voor deze zaken moesten altijd externe software partijen de software verzorgen. Waardoor u als gebruiker de melding kreeg om flash te upgraden of een nieuwe versie van silverlight en weet ik veel wat te downloaden. HTML5 zorgt ervoor dat browsers dit zelf kunnen. Dus geen extra updates meer om dat bepaalde filmpje af te kunnen spelen. De apple ipad ondersteund al geen flash, youtube is praktisch HTML5 ready en zelfs uitzending gemist probeert de stap te zetten. 

Formulieren

Voor webontwikkelaars wordt het gemakkelijker om extra functies aan een formulier te hangen om de invoer te vergemakkelijken. Denk dan aan agenda's, wereldtijden en automatische herkenning voor niet computers zoals pda's, ipads en telefoons. Welke toch een andere invoer hebben als een compleet toetsenbord.

Dus kortom meer mogelijkheden om de webexperience te verbeteren, te versnellen en u als klant te voorzien van middelen om uw boodschap beter en effectiever over te brengen op uw doelgroep.

Maar er is wel een kanttekening aan dit verhaal en dat is dat HTML5 nog steeds in concept fase is. Elke webbrowser bouwen heeft nog steeds zijn eigen agenda en eigen belangen. En de verwachting is dat de algemene HTML5 standaard pas in 2022 echt overal volledig is geaccepteerd. Maar zoals altijd zullen bepaalde zaken sneller opgepakt worden, waardoor wij de vernieuwing kunnen gaan gebruiken en u garanderen dat dit werkt in de meest gebruikte browsers.

Maar genoeg gepraat, nu wat linkjes en video voorbeelden van HTML. Let op het nerd gehalte is misschien wel wat hoog...

Linkjes en filmpjes

Als eerste een Link naar een pagina met een showcase van verschillende website gemaakt in HTML 5. Let op voor het bekijken van deze websites is wel een recente browser nodig zoals de laatste chrome, opera, firefox of internet explorer.

Een showcase bij apple zelf. Aangezien de iphone en ipad geen flash ondersteunen, wil apple met hun safari browser heel graag tonen dat flash niet nodig is. De laatste Safari browser zal waarschijnlijk wel nodig zijn. Klik naar de apple site. Maar in tegenstelling tot wat zij beweren op deze website kan google chrome de getoonde websites ook prima aan.

Een leuk artikel (let op in engels) over video marketing per email. Filmpjes direct in de mail box, klinkt goed voor marketeers.
Hierbij de link. Staat wel nog echt in de kinderschoenen.  

Nog een artikel op frankwatching over HTML 5. Emerce is een toonaangevend orgaan voor marketeers en heeft recent een artikel geplaatst dat HTML 5 nog niet geschikt was voor algemene acceptatie. Op frankwatching wordt dit nogal genuanceerd. Klik voor artikel op frankwatching waar ik mijzelf beter in kan vinden.

Sports illustrated website in html 5

Een nerd filmpje van een expert van google over html 5