28 mei DE CAROSSERIE VAN EEN MODERNE WEBSITE OF APPLICATIE
De basis voor iedere website en/of webapplicatie wordt gevormd door de Front-end – in feite de voorkant van de website. Om de parallel te trekken met een auto kan de front-end worden gezien als de carrosserie; de back-end processen vormen dan de motor, aandrijfas en het chassis. Die draaien dus “onder de motorkap” op de server waar de website/applicatie gehost wordt en genereren op basis van deze achterliggende dynamiek een statisch “eindresultaat” dat aan de browser van de bezoeker wordt voorgeschoteld. Deze basis-bouwstenen van een website bestaan uit een combinatie van minimaal 2, maar voornamelijk 3 programmeertalen: HTML, CSS en Javascript. Zij vormen het koetswerk (HTML5) van ons motorvoertuig (website/applicatie) zonder de losse onderdelen, met daaromheen het plaatwerk (Javascript) en de ruiten (CSS3) en zorgen er gezamenlijk voor dat de browser van de bezoeker de op de server gegenereerde data kan voorschotelen als een kant-en-klare webpagina.
HTML / CSS / Javascript: een ijzersterk trio
Waar het web begon als “statische” aaneenschakeling van met name front-end code hebben de opkomst van content management systemen en web-based databases het online landschap danig veranderd. Desondanks vormt de basis van iedere front-end nog altijd het oude vertrouwde HTML, waarvan de laatste ingrijpende doorontwikkeling (versie 4) dateert uit 1997, met in aanvulling daarop wat kleine aanpassingen van vlak voor de millenniumwisseling (HTML 4.01). In combinatie met CSS en JavaScript werd de vormgeving van websites in de jaren die daarop volgden steeds aansprekender. Desondanks duurde het nog ruim 10 jaar voordat in 2007 de eerste aanzet tot een serieuze update zich aandiende, toen de WHATWG het voorstel bij de W3C-werkgroep indiende om de door hen ontwikkelde verbeteringen van HTML als vertrekpunt te nemen voor toekomstige ontwikkeling van deze ‘oertaal’ op het web.
HTML5: Een nieuwe standaard
HTML5 (HyperText Markup Language 5) Is weliswaar de nieuwste versie van de HTML standaard, maar desondanks nog altijd officieel niet “af.” Daarbij worden nog niet alle mogelijkheden door alle browsers ondersteund, waarbij hoofdzakelijk Internet Explorer het meeste roet in het eten gooit – zoals te doen gebruikelijk, dus… HTML 5 levert ten opzichte van zijn voorganger verbeteringen voor web-applicaties en mobiele toepassingen en biedt daarnaast een groot aantal nieuwe front-end mogelijkheden. Zo is de implementatie van externe content vereenvoudigd, waardoor bijvoorbeeld het afspelen van online video voortaan zonder externe toepassingen (zoals Flash of Silverlight) kan geschieden en daarmee een stuk laagdrempeliger wordt. “More power to the browser” is een veelgehoorde term.
Ook CSS in een nieuw jasje: CSS3
Een groot nadeel van HTML was de inefficiëntie ten aanzien van de opmaak; stijlelementen moesten iedere keer opnieuw worden gedefinieerd voor alle onderdelen afzonderlijk. Afwijkingen op (de doorgaans foeilelijke) standaard layout moesten zo voor iedere link, tekstkop of tabel afzonderlijk worden gedefinieerd. Dankzij de komst van zogenaamde cascading style sheets (CSS) werd het opmaken van webpagina’s een stuk eenvoudiger, omdat alle opmaakelementen voortaan in één bestand gedefinieerd konden worden. Waar met HTML de functionaliteit van een webpagina kan worden bepaald, zorgt CSS voor de opmaak. Terug naar het voorbeeld van de auto; met HTML wordt gedefinieerd dat het een vijf-deurs is, terwijl CSS de kleur en het type lak bepaalt. Ook CSS heeft een flinke update gekregen. CSS3 biedt naast een hoop verbeteringen ook tal van nieuwe mogelijkheden waardoor websites niet alleen sneller maar eveneens nóg gelikter vormgegeven kunnen worden. Het native gebruik van een groot aantal fraaie lettertypes en teksteffecten, schaduwen, kleurovergangen en animaties die voorheen het integreren van gephotoshopte afbeeldingen en/of Flash vereisten behoren tot de ruime mogelijkheden die CSS3 biedt.
Actie = reactie
Het laatste onderdeel van de drie-eenheid is Javascript, een scripttaal die op vrijwel iedere website wordt toegepast. Javascript wordt veel gebruikt om websites interactiever te maken. Op plaatsen waar de gebruiker input kan leveren en de applicatie terugkoppeling “geeft” komt Javascript kijken, zoals bij interactieve webformulieren. Javascript zorgt dus voor ‘actie = reactie,’ en dankzij de opkomst van AJAX (asynchronous javascript and XML) gebeurt dat steeds vaker real-time, zonder dat de pagina opnieuw geladen hoeft te worden.
Kortom; HTML5 zorgt in combinatie met CSS3 voor nettere en door browsers beter (en sneller) hanteerbare code, een schat aan nieuwe functionele en grafische mogelijkheden en verbetering van mobiele ondersteuning. Javascript- en AJAX-toepassingen zorgen voor (real-time) interactie.