Follow Us on Twitter

HTML5

HTML5 logoHTML4 heeft een nieuwe opvolger gekregen in de vorm van HTML5. HTML4 is de laatste geaccepteerde aanbeveling, HTML 4.01 en dateert alweer van december 1999. Tijdens zijn ontwikkeling heeft HTML5 lange tijd een sluimerend bestaan geleden totdat ene Steve Jobs in 2010 aankondigde dat Apple het tot dan toe veel gebruikte Adobe Flash zou laten vallen en zou inzetten op nieuwe open standaarden zoals HTML5 in het mobiele tijdperk, waardoor HTML5 in een keer vol onder de aandacht kwam van ontwikkelaars en het grote publiek. HTML5 heeft nog niet een officiele status maar wordt al door de meeste browsers ondersteund.

HTML5 wordt vaak als een containerbegrip gebruikt niet alleen voor html maar ook voor CSS3, JavaScript, XML, JSON en SVG. In dit artikel beperken we ons tot de echte HTML5 -delen. Daarnaast vervangt HTML5 niet slechts alleen HTML4 maar ook XHTML 1 and DOM Level 2 HTML.

HTML5 elementen

Belangrijke toevoegingen aan HTML5 zijn onder andere vergrote semantiek. Zo kan men meer betekenis toekennen aan een html document. De nieuwe semantische cq. structurele elementen zijn:

<article> Definieert het begin van een artikel.
<aside> Maakt de inhoud los van de content omringende paginainhoud.
<bdi>
 
Maakt dat de formatering van bidirectionele tekst (bijv. Hebreeuws en Engels zich eender moeten gedragen.
<command>    Maakt een command knop die een gebruiker kan aanklikken.
<details> Definieert extra details die een gebruiker kan zien of verbergen.
<dialog> Maakt een dialoog box of window
<summary> Maakt een zichtbare koptekst voor een verborgen of zichtbaar details element
<figure> Illustraties, foto's, diagrammen etc.
<figcaption> Maakt een bijschrift for a
<figure> element
<footer> Maakt een voetnoot voor een document of sectie
<header> Maakt een koptekst voor een document of sectie
<mark> Markeert tekst.
<meter> Zet een scalaire waarde binnen een bepaald bereik (min. en max.) van waarden.
<nav> Maakt een navigatie link
<progress> Maakt een progressbar voor een taak
<section> Maakt een nieuwe sectie in een document

Deze elementen hebben duidelijk meer zeggingskracht dan bijv. de primitieve elementen <div> en <span>.

Verder zijn er een aantal media elementen bijgekomen:

<audio> Definieert een geluidsfragment
<video> Definieert een video
<source> Zet de bron voor video of audio
<embed> Bepaalt hoe de content als embedded moet worden getoond
<track> Bijschrift voor video en audio

Inderdaad maakt het video element Flash plugins overbodig zodat op elke mobiel apparaat video’s kunnen worden getoond.

JavaScript API

Een ander nieuw snufje in HTML5 dat het gebruikersgemak zal verhogen is de Javascript API die onder andere drag and drop mogelijk maakt. Om een element draggable te maken moet het gemarkeerd worden als “draggable”. Voorbeeld:

<img id="verplaatsbaar" src="plaat.gif" draggable="true"

Nu moeten we specificeren wat er dient te gebeuren als het plaatje wordt verplaatst, dat doen we door een extra attribuut te zetten:

<img id="verplaatsbaar" src="plaat.gif" draggable="true" ondragstart="drag(event)"

De drag functie moet men wel zelf implementeren:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

Evenzo zijn er drop attributen die bij het andere element, waarin men wil droppen, gezet kunnen worden. Ook zal er dan een drop functie moeten worden geimplementeerd.

Laten we ons nu richten op de extra functionaliteit die van nut is voor het maken van enterprise level webapplicaties. Ten eerste is daar local storage. Net zoals cookies, levert het localStorage object een voorziening om key-value paren aan de client-side te bewaren, maar hoeven deze paren niet, zoals bij cookies, heen en weer geschoven te worden tussen client en server bij iedere request. LocalStorage heeft ook een aanzienlijke capaciteit ten opzichte van cookies nl. 5 megabytes, maar dat kan per browser verschillen (2.5 - 10 mb).

Het localStorage object heeft vier hoofdfuncties:

  • localStorage.clear()
  • localStorage.getItem( key )
  • localStorage.removeItem( key )
  • localStorage.setItem( key, value )

Het is belangrijk dat er slechts 1 type object als value wordt meegegeven en verkregen nl. het type String. Er dient dus geinterpreteerd te worden bij gebruik van deze waarden. Het gebruik van localStorage is als een Javascript API. Hieronder is eenvoudige voorbeeld code voor het gebruik van het localStorage object.

<!DOCTYPE html>
<html>
<head>
<title>Explorating HTML5's localStorage</title>
 
<script type="text/javascript">
 
   localStorage[ "whitehorses" ] = "innovation"; 
 
   console. log(
         "localStorage.getItem( 'whitehorses' ) ---",
         localStorage.getItem( "whitehorses" )
    );
 
   localStorage.clear();
 
</script>
</head>
</html>

In de output van de console is dan de regel localStorage.getItem ( 'whitehorses' ) --- innovation terug.

Websockets

WebsocketsDe misschien wel belangrijkste toevoeging aan HTML5 is voor het laatst bewaard namelijk websockets. Websocket is een nieuw protocol en levert bidirectionele commincatie (full-duplex) tussen client en server.

Waar http gebaseerd is op het request/response model geinitieerd door de client kan een server via Websockets PUSH berichten versturen. Voorheen was het behulp van AJAX mogelijk om een dergelijk model te simuleren via zoiets als “long polling”. Echter alle oplossingen die hier gebruik van maken hebben een groot nadeel, namelijk een overhead bovenop het HTTP protocol resulterend in grotere complexiteit, vergrote bandbreedte en verhoogde latency, zeker als het gaat om real-time gegevens. Voorbeelden van use cases waar real-time een eis is is bijvoorbeeld bij het kunnen bepalen van de actuele bedrijfsgegevens van windmolens in een windmolenpark, zoals windsnelheid en windrichting, wattage etc. . Of in de scheepvaart waar men de actuele situatie op de scheepvaartroute moet kunnen beoordelen. Natuurlijk zullen ook game-makers van deze functionaliteit gebruik maken in een wereld waar real-time gegevens onontbeerlijk zijn.

Websockets zijn zeer goed toepasbaar in gedistribueerde omgevingen waar messaging gebruikt wordt. STOMP is een text-georienteerd berichten protocol dat prima ingezet kan worden. Het resultaat is dan STOMP over websockets. Activemq van Apache ondersteunt STOMP en de combinatie van Websockets, STOMP en Activemq lijkt dan ook een logische keuze.

Wanneer men eenmaal een Websocket verbinding heeft dan kan men data van de browser naar de server versturen via de send() functie en data van de server ontvangen via een onMessage event handler. Websockets in HTML5 bestaat dus eigenlijk uit een Websocket protocol en een Websocket API. Het Websocket protocol vereist een “handshake” tussen browser en server zodat het "same-origin" security model wordt gewaarborgd. De meeste message brokers kunnen nog niet omgaan met dit soort handshakes maar er zijn er wel een paar die daarop zijn ingericht, waaronder ActiveMQ. Om vanuit de browser via het STOMP protocol over websockets met ActiveMQ te communiceren is er een speciale JavaScript library “STOMP.js” ontwikkelt die daarvoor zorg draagt.

Als voorbeeld een simpele chat-applicatie waarmee men met andere ingelogde gebruikers kan chatten. Hiertoe moet de laatste versie van ActiveMQ van de apache website worden gedownload en geinstalleerd. Na installatie start men de broker op door het uitvoeren van het commando:

$./bin/activemq console xbean:examples/conf/activemq-demo.xml

Men kan dan naar http://localhost:8161/demo/websocket gaan om het client chat programma te gebruiken. De volgende code-snippet geeft een beeld van hoe het chat programma is opgebouwd.

<form class="form-horizontal" id='connect_form'>
  <fieldset>
    <div class="control-group">
      <label>WebSocket URL</label>
      <div class="controls">
        <input name=url id='connect_url'
              value='ws://localhost:61614'
              type="text">
      </div>
    </div>
    <div class="control-group">
      <label>User</label>
      <div class="controls">
        <input id='connect_login' 
              placeholder="User Login"
              value="admin" type="text">
      </div>
    </div>
    <div class="control-group">
      <label>Password</label>
      <div class="controls">
        <input id='connect_passcode' 
              placeholder="User Password"
              value="password" 
              type="password">
      </div>
    </div>
    <div class="control-group">
      <label>Destination</label>
      <div class="controls">
        <input id='destination' 
              placeholder="Destination"
              value="/topic/chat.general" 
              type="text">
      </div>
    </div>
    <div class="form-actions">
      <button id='connect_submit' 
              type="submit" 
              class="btn btn-large btn-primary">Connect
      </button>
    </div>
  </fieldset>
</form>
 

In deze code snippet is het websocket adres ws://localhost:61614 van de broker te herkennen evenals het topic waarop de client is geabonneerd. Verder is er nog wat "boilerplate" JavaScript nodig dat gebruik maakt van Stomp.js om communicatie mogelijk te maken. Zo eenvoudig is het!

Conclusie

HTML5 is een duidelijke stap voorwaarts in de wereld van de html. Niet alleen is het eenvoudiger om een document prachtig op te maken maar met Websockets en LocalStorage wordt het adagium van "Power to the Browser" steeds meer bewaarheid. Steve Jobs had het al voorspeld HTML5 is niet alleen maar een nieuwe html voor de aloude browser maar een belangrijke component in mobiele wereld.

Referenties

HTML5: www.w3.org

ActiveMQ: activemq.apache.org

STOMP over websocket: jmesnil.net/stomp-websocket

Waardering:
 

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.