Als ZZP’er moet je jezelf continu blijven (bij)scholen. In april 2010 ging ik naar Las Vegas voor de ASP.NET and Silverlight Conference and Expo, met de feestelijke lancering van Visual Studio 2010 en Silverlight 4. En daaromheen tientallen uiterst nuttige sessies van de bekendste sprekers en developers op .NET gebied. Ik heb er erg veel aan gehad. We weten weliswaar allemaal hoe het is afgelopen met Silverlight (namelijk: zo goed als dood), maar Visual Studio is levendiger dan ooit, en juist vorige week is Visual Studio 2013 gelanceerd.

(als je het leuk vind: ik heb destijds een blog bijgehouden met artikelen en filmpjes over randzaken als De Strip in Las Vegas, de woestijn, het Hollywood Sign en nog meer: http://www.kassenaar.nl/vegas/?page_id=25)

Fast forward 3,5 jaar. Eind deze week reis ik opnieuw naar Las Vegas, ditmaal voor de conferentie <anglebrackets />. Uit de online beschrijving:

/* anglebrackets is a conference for lovers of the web. We believe that the web is best when it's open and collaborative. We believe in the power of JavaScript and expressiveness of CSS the lightness of HTML. */

En dat is precies waarvoor ik er naar toe ga. Ik denk dat er geen conferentie ter wereld is die meer gericht is op de openheid van het web, open standaarden en hoe deze het beste toe te passen zijn, dan Anglebrackets. Alles ademt open source.

Hoewel veel sprekers uit de Microsoft-stal afkomstig zijn, zijn er ook workshops van Douglas Crockford (JavaScript-goeroe), Denise R. Jacobs, John Papa, Shawn Wildermuth, Elijah Manor en andere onafhankelijke webspecialisten. Ik kijk in het bijzonder uit naar de full day-workshop over SPA met AngularJS van John Papa en Ward Bell (ontwikkelaar van Breeze.js).

Meer informatie over anglebrackets vind je – behalve op de conferentiewebsite zelf – bijvoorbeeld op

• http://www.hanselman.com/blog/DoYouMissMIXJoinUsAtAngleBrackets20InVegas.aspx
• http://www.johnpapa.net/angular-workshop-and-and-xbox-one/

En ik zal regelmatig mijn Twitterfeed bijwerken, op https://twitter.com/PeterKassenaar.

Ik heb er zin in!

Peter Kassenaar
-- 21 oktober 2013

In 2008 heb ik mijn website voor het laatst een grote make-over gegeven. Het betrof toen de overgang van een ‘gewone’ site naar een blog, waarover je in de eerste blogpost kunt lezen.

Nu, ruim vijf jaar en een kleine 200 blogartikelen later, is het tijd voor een volgende stap. Ik had het gevoel dat het blog – hoewel dynamisch en regelmatig bijgewerkt – de speerpunten en werkzaamheden van mijn bedrijf niet goed genoeg representeerde.

Website anno 2013

Daarom heb ik de afgelopen zomermaanden gebruikt om een nieuwe website te ontwerpen rondom de drie thema’s die mijn bedrijf covert:

• Trainingen – ik blijf trainingen geven (voor partners en in eigen beheer) op het gebied van webdevelopment. De focus ligt op front-end technieken: HTML, CSS, JavaScript, jQuery en app-trainingen als PhoneGap. Binnenkort worden (als eerste in Nederland!) high-end technische trainingen aan het portfolio toegevoegd, waaronder trainingen in Twitter Bootstrap, Node.js en Angular.js. Volg mij op Twitter om op de hoogte te blijven van de ontwikkelingen
• Schrijven – Dit jaar heb ik titels geschreven als Handboek Word 2013, Handboek Outlook 2013 en het binnenkort te verschijnen Handboek JavaScript en jQuery. Ook in de toekomst blijf ik schrijven voor uitgevers, websites en magazines.
• Development – als programmeur ben ik verbonden aan projecten als Yindo en Boekenwolk. Ook ontwikkel ik gedurende projecten diverse besloten apps en websites als prototype of proof-of-concept. Als je hier een vraag over hebt, of een consultancy-afspraak wilt maken, kun je uiteraard contact opnemen.

Finetuning

De nieuwe website is voor een groot deel gereed, maar er zijn nog enkele aandachtspunten die finetuning behoeven. Hier wilde ik met de lancering echter niet op wachten. Dit is analoog aan het developmentprincipe release early, release often.

In de komende weken zullen de laatste plooien worden gladgestreken met betrekking tot:

• Facebook Like-buttons toevoegen voor pagina’s (de Facebook API blijkt er niet van te houden als je deze dynamisch genereert/aanpast).
• Weergave op tablets: op de meeste tablets (iPad, Android, Windows RT) is de weergave in orde, maar op tablets met een afwijkende resolutie (bijvoorbeeld 1024x600) is het responsive design nog niet helemaal correct. Het menu en sommige andere tekst kan wegvallen. Wordt aan gewerkt.
• Typefoutjes en andere kleinigheden. Als je iets tegenkomt wat volgens jou niet klopt, of je vindt het onlogisch: laat het weten!

Die goede oude tijd…

Tot slot, in de categorie ‘opa vertelt’: het huidige ontwerp is de vierde generatie website op kassenaar.com. De eerste versie stamt uit 1997, hiervan is helaas geen screenshot bewaard gebleven. Deze tel ik daarom niet mee. Maar al vrij snel (na een paar maanden) was dit het ontwerp dat van 1998-2001 dienst heeft gedaan:

1998-2001

Een standaard website, opgemaakt met tabellen en afbeeldingen. Alles handgecodeerd in (jawel!) Frontpage 98 en Kladblok.

2002 – 2008

Het kenmerk van deze site waren de tabbladstructuur (groot gemaakt door amazon.com en bol.com) en veel, heel veel tabellen en Dreamweaver MM_SwapImage()-scripts. Maar ook custom scripts om de stylesheets te wisselen tussen grote- en kleine letters en voor het eerst een ingevoegde Google-zoekdienst.

2008 – 2013

Overgang naar een blogstructuur, waardoor de site regelmatiger bijgewerkt kon worden en er minder tijd aan onderhoud besteed hoefde te worden. Dit blog blijft gehandhaafd, maar ik keer toch ook een beetje terug naar de ‘oude’ opzet, waarin op eenvoudige wijze de pijlers van het bedrijf worden benoemd.

2013 – …

Een nieuwe site, een nieuw logo. Geheel volgens de mode van deze tijd, met één grote centrale visual en korte kernbegrippen. Een lichtere opmaak, verbeterde CSS en HTML5-elementen en meer witruimte moeten de inhoud beter leesbaar maken. De site is voor een groot deel gebaseerd op Twitter Bootstrap in combinatie met jQuery, maar maakt op de achtergrond gebruik van een SQL Server-database en het .NET-framework.

Nogmaals, het is werk in uitvoering. Als je opmerkingen hebt, of punten ter verbetering dan hoor ik het graag!

Peter Kassenaar
-- 6 augustus 2013

Het was een tijd lang erg in de mode om alles online en digitaal te willen doen. Zo ook trainingen en cursussen voor werknemers. E-learning, e-lokaal, online teaching en meer van die namen. En hoewel online leren zeker voordelen heeft en wat mij betreft een vaste plek heeft verdiend, komen er toch steeds meer bedrijven en organisaties terug van alleen maar online cursussen inkopen. Er worden anno 2013 weer meer ‘ouderwetse’, klassikale trainingen verzorgd. Ik merk dat aan de aantallen cursisten die in mijn klasjes verschijnen en het aantal aanvragen dat ik krijg om training te verzorgen.

Voordelen

Het samen leren in een klaslokaal onder ervaring van een ervaren docent die live en proactief met de cursisten op de stof kan ingaan wordt weer meer gewaardeerd. Deze leervorm heeft onder meer de volgende voordelen.

• Volledig concentreren op de stof. Niet worden afgeleid door email, telefoontjes, binnenlopende collega’s, andere apps op de computer of iPad, of de situatie thuis (bij thuis e-learning).
• Ervaren docent rechtstreeks beschikbaar voor vragen.
• Flexibiliteit; indien een onderdeel bekend is, kan een (goede) docent doorgaan met een volgende onderdeel, zodat de leeropbrengst hoger is.
• Een goede docent kan differentiëren in de opdrachten en oefeningen en deze realtime aanpassen aan het niveau van de cursist. E-learningsystemen zijn hierin amper flexibel.
• Interactiviteit; contact met medecursisten: horen welke vragen bij anderen leven, uitwisselen hoe andere organisaties met vraagstukken omgaan.
• Netwerken; uitwisselen van gegevens en ervaringen met medecursisten.
• Niet te onderschatten: lekker lunchen.

Trainingen

De komende maanden geef ik voor diverse opleiders onder meer de volgende trainingen. Klik op de links voor meer informatie of inschrijven. Neem contact op als je me rechtstreeks een vraag wilt stellen.

Bovenstaande data en onderwerpen zijn open inschrijvingen met een vooraf vastgesteld programma. Daarnaast verzorg ik nog diverse besloten in-company trainingen. Hierbij is meer maatwerk mogelijk. Ook hiervoor kun je altijd even contact opnemen.

Hopelijk tot ziens tijdens een van de cursussen!

Peter Kassenaar
-- 16 februari 2013

Een eeuwigheid geleden, in 2004, heb ik het boek Modern Redesign – met XHTML, CSS en XML geschreven. Op de oude site kun je nog de detailpagina van dit boek vinden. Het boek was gericht op de factoren die destijds bij modern web(re)design hoorden: het omzetten van een op HTML-tabellen gebaseerd ontwerp naar een CSS-gebaseerd ontwerp. Ook het vormgeven van elementen als formulieren, forums en blogs kwam aan de orde.

Inmiddels zijn we bijna zeven jaar verder en is er op webgebied enorm veel gebeurd. Het doet mij dan ook deugd te kunnen melden dat in het voorjaar van 2011 de opvolger van dit boek zal verschijnen: Modern Redesign – tweede herziene editie (titel nog onder voorbehoud).

Het boek zelf zal (haha) een compleet redesign ondergaan; ik verwacht dat 70%-80% van de inhoud vernieuwd zal worden ten opzichte van de eerste editie. Want de uitdaging waar de hedendaagse webdesigner voor staat is een heel andere dan destijds. Tegenwoordig moet de site voorbereid zijn op de komst van HTML5, maar wel zonder oudere browsers in de kou te laten staan, liefst zonder aanpassingen draaien op een veelheid aan platforms (Windows, Mac, iPad, iPhone, Android), en verwachten bezoekers veel meer van de interactieve mogelijkheden van een site.

Modern Redesign - tweede herziene editie komt hieraan tegemoet. Het wordt een boek voor alle webdesigners die nieuwe sites direct geschikt willen maken voor HTML 5, of oudere sites willen gaan opwaarderen naar de nieuwste standaarden. Uiteraard zal ik werken met veel praktijkvoorbeelden en tref je allerlei cases aan van redesignprojecten waarin (delen van) de HTML5-standaard verwerkt worden.

Beknopte inhoudsopgave

De inhoud staat op dit moment – aan de start van het schrijfproces - nog niet in steen gebeiteld, maar begint al wel vorm te krijgen. En: je kunt meepraten! Zie hiervoor de aanwijzingen aan het einde van dit artikel. Onder meer de volgende onderwerpen zullen aan de orde komen.

• Waarom Redesign? – een inleiding in de standaarden HTML, CSS en het DOM/JavaScript en de ontstaansgeschiedenis van HTML5.
• Consequent structureren – De HTML5-tijdlijn, wat is HTML5 (en wat is het niet?), de erfenis van XHTML, de juiste notatie van tags en attributen in diverse typen HTML-pagina’s.
• Redesign - van HTML4 naar HTML5 – De verschillen in DOCTYPE’s, nieuwe structuurtags voor HTML5, nieuwe tags voor inhoud in HTML5, verouderde HTML4-elementen en –attributen.
• Nieuwe documenten structureren – Top-level elementen structureren, inhoudselementen maken, headers maken, de document outline, ontwerpen voor verschillende browsers.
• De presentatie verzorgen met CSS3 – herhaling van basiskenmerken CSSS, nieuwe selectors in CSS3, graceful degredation.
• CSS3 en HTML5 in combinatie – verbeterde typografische mogelijkheden, CSS3-transitions, tools om problemen te omzeilen.
• Redesign – webformulieren van HTML4 naar HTML5 – nieuwe invoertypen, autofocus, placeholder teksten, formuliervalidatie, invoer van getallen, datums en cijfers.
• Redesign – nieuwe HTML5 API’s gebruiken – het element <canvas>, de elementen <audio> en <video>, de API drag-and-drop, API voor offline storage, Gerelateerde API’s.
• Interactie met JavaScript – ECMAScript en het DOM, kant-en-klare JavaScript bibliotheken, jQuery, menu’s, tabs en tooltips, Ajax-toepassingen met JavaScript en XHR.
• Redesign van overige elementen – een website zonder plug-ins, diashow’s en caroussels, geanimeerde menu’s, overige interactieve elementen.

Meedenken? Graag!

Het schrijfwerk van dit boek zal volgens planning tot medio januari 2011 duren. Mis je in bovenstaande opsomming onderdelen? Wil je sommige aspecten graag besproken zien of heb je misschien zelf een bijdrage die (uiteraard met naam/bronvermelding) in het boek aan de orde zou kunnen komen? Aarzel dan niet om dat in een commentaar bij dit bericht te laten weten. Je kunt ook 1:1 contact opnemen via het Contactformulier.

Ik ben benieuwd naar jullie input.

Peter Kassenaar
-- 4 oktober 2010

Vandaag is het Handboek (X)HTML, CSS en JavaScript verschenen. In dit handboek leert u vanaf het nulpunt hoe een website wordt opgezet en welke technieken daarbij worden gebruikt. U leert hierbij zelf de codes schrijven voor webpagina. Het boek gaat hierbij niet uit van een visuele editor, zoals Adobe Dreamweaver of Microsoft Visual Studio. In plaats daarvan gaat u zelf met de code aan de slag, zodat u maximale grip hebt op het eindresultaat. U weet na afloop van dit boek precies wat nodig is om een moderne website te ontwerpen en kunt websites van anderen doorzien.

In de inleidende hoofdstukken worden de drie technieken kort voorgesteld. In de overige hoofdstukken worden de technieken altijd geïntegreerd toegepast. Het boek werkt hierbij case/oplossingsgericht. In het hoofdstuk over formulieren wordt bijvoorbeeld de HTML-code besproken om het formulier in te stellen, maar direct ook de CSS-code om het formulier op te maken en JavaScript-code om formuliervelden te valideren.

Specificaties

• Boek, paperback, 480 pagina's.
• Geschikt voor Windows en Macintosh
• Geschikt voor opleidingen en zelfstudie.
• ISBN-13: 978-90-5940-414-4 (9789059404144)
• Prijs: EUR 29,90
• Voorbeeldhoofdstuk beschikbaar op Yindo

Van de flapekst:

"(X)HTML, CSS en JavaScript vormen de drijvende kracht achter de hedendaagse website. Niet alleen kennis van deze onderdelen, maar ook van de onderlinge interactie is van cruciaal belang om een gelikte, gebruiksvriendelijke en moderne website te ontwikkelen. In het Handboek (X)HTML, CSS & JavaScript laat internetexpert Peter Kassenaar u zien hoe u gebruikmaakt van genoemde technieken, maar vooral ook hoe u ze optimaal laat samenwerken. Het resultaat is een website die zich aan de huidige webstandaarden conformeert en in alle gangbare browsers optimaal presteert."

Beknopte inhoudsopgave

Tot de behandelde onderwerpen behoren:

• Beginnen met HTML
• Kennismaken met CSS
• JavaScript in een notendop
• Koppelingen maken
• Werken met HTML-lijsten
• Verschillende mediatypen op de site gebruiken
• Werken met HTML-tabellen
• Pagina's opmaken met CSS-lagen
• Werken met formulieren
• Technieken met JavaScript
• De site publiceren op het web

Oefenbestanden

In het boek staan tal van oefeningen om zelf met HTML, CSS en JavaScript aan de slag te gaan en direct uw eigen website op te zetten voor school, vereniging, onderneming of hobby. Het is typisch een boek om naast het toetsenbord te leggen en zelf mee oefenen.

HtmlCssJavaScriptOefenbestanden.zip (1,0 MB)

De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan de oefenbestanden gerangschikt in afzonderlijke zip-bestandjes per hoofdstuk.

Hebt u het boek gelezen en hebt u er opmerkingen over ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een bericht achter onder dit artikel.

Bestellen

• Bestellen bij computerboek.nl
• Bestellen bij bol.com

Peter Kassenaar
-- 29 juni 2009

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. De eerste column (W3C, opchieten) lees je hier. Deze tekst is ook verschenen op de site van computerboek.nl.

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden.

"Lange tijd werd JavaScript beschouwd als het lelijke eendje in de webdesign-wereld. Goed, het was een programmeertaal, maar dan toch eerder speeltje binnen de browser dan een gereedschap voor serieuze toepassingen. Typische JavaScript-taken waren bijvoorbeeld het tonen van al dan niet overbodige waarschuwingsvenstertjes ('Welkom op mijn website, gast!'), het valideren van formulier-velden en het tonen van een scrollende boodschap of klokje in de statusbalk van de browser. Tot zover JavaScript.

Tenminste, tot voor kort.

JavaScript werd medio 1995 onder de naam Mocha en later LiveScript ontwikkeld door Brendan Eich, destijds een medewerker van browserfabrikant Netscape. In Netscape Navigator 2.0 werd de eerste versie van JavaScript aan de wereld getoond. De naam van de programmeertaal werd met het voorvoegsel 'Java' getooid omdat dit uit marketingoverwegingen beter aansloot bij het juist door Sun gelanceerde programmeerplatform Java. Hoewel JavaScript voor de hiervoor genoemde taken goed te gebruiken was, had de scripttaal onder programmeurs geen goede naam. Er werd gebruik gemaakt van een complex en inconsistent programmeermodel (het Document Object Model, DOM), dat van browser tot browser verschilde, er waren geen goede tools voor het opsporen van fouten (debugging) en de manier waarop met objecten en variabelen werd omgegaan was anders dan in andere programmeertalen. Goed, als het echt niet anders kon dan wilde de webontwikkelaar wel een paar regels JavaScript schrijven, maar als het even kan werd het gebruik ervan vermeden.

Totdat vier letters voor een omslag zorgden.

Deze vier letters zijn natuurlijk 'AJAX'. Dit staat voor Asynchroon JavaScript and XML. Opeens bleek een functie die al langere tijd binnen JavaScript bestond om asynchroon verzoeken te doen aan de webserver (voor de kenners: het object XMLHttpRequest) enorm handig om delen van een pagina opnieuw te laden. Hierbij is het niet meer nodig de hele pagina te verversen. Dit zorgt voor een veel betere gebruikerservaring bij de bezoeker - want die hoeft immers niet meer vooruit en achteruit te bladeren door een website. Ook bleken op deze manier in combinatie met het eerder verfoeide DOM interactief complete onderdelen aan een pagina te kunnen worden toegevoegd, te worden geanimeerd, of uit de pagina worden verwijderd.

Ineens bleek JavaScript in moderne webtoepassingen steeds belangrijker, om niet te zeggen onmisbaar. Op welke manier zouden anders websites als Gmail, Flickr, FaceBook, Google maps en talloze anderen goed moeten werken? Dat zou onmogelijk zijn. Bijkomend voordeel - en in grote mate bepalend voor het huidige succes - is dat JavaScript door alle moderne browsers op dezelfde wijze wordt verwerkt. Hierdoor was het voor grote bedrijven als Google en Yahoo mogelijk standaardbibliotheken met animaties, invulvensters, validaties en meer te ontwikkelen die in alle browsers gelijk functioneren. Webontwikkelaars omarmden deze en andere, door kleine partijen als jQuery en MooTools ontwikkelde bibliotheken met grote vreugde.

Het balletje was gaan rollen. Tegenwoordig kan elke webdesigner met een paar klikken een complete JavaScript-functiebibliotheek downloaden en met enkele regels code aan zijn pagina toevoegen en aanroepen. Dit verbetert de standaardisatie van de site en verminderd de afhankelijkheid van externe plug-ins als QuickTime, Flash of Silverlight.

Grappig hierbij om te zien is dat het - ondanks de naam Asynchroon JavaScript en XML - helemaal niet nodig is te werken met XML, dat een aanroep niet asynchroon hoeft te zijn, en dat het gebruik van JavaScript tegenwoordig bijna tot een minimum beperkt is.

Brendan Eich kan trots zijn. Ruim 15 jaar na de geboorte van JavaScript is het voormalige lelijke eendje uitgegroeid tot een sierlijke zwaan die onmisbaar is in modern webdesign."

Peter Kassenaar
-- 24 juni 2009

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. Ze zijn ook verschenen op de site van computerboek.nl

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden. Maar eerst even opwarmen met de columns…

"Wie al wat langer meeloopt in de webdesignwereld kan zich de eerste 'browser war' uit de jaren 1996-2000 nog wel herinneren. De browsers Netscape Navigator en Microsoft Internet Explorer vochten een bittere strijd uit om de gunst van de eindgebruiker. Ze deden dit onder meer door in elke nieuwe versie van hun browser nieuwe mogelijkheden en nieuwe HTML-tags te introduceren en te proberen deze tot standaard te verheffen. Kent iemand nog tags als <marquee>, <blink>, <layer>, <spacer> en <multicol>?. Hetzelfde gebeurde op het gebied van CSS-ondersteuning en JavaScript-versies. Tot op de dag van vandaag gebruikt Microsoft een (iets) andere manier van JavaScript-verwerking die ze hardnekkig JScript blijven noemen.

Omdat webdesigners deze tags en technieken naar eigen goeddunken gebruikten, leidde dit er toe dat er talloze sites waren die er goed uitzagen in Internet Explorer, maar in Netscape Navigator onleesbaar waren, of andersom. Iedereen kent nog wel knoppen en teksten als 'Deze site is geoptimaliseerd voor [vul een browsernaam in]'.

De aanwezigheid van zoveel 'standaarden' is voor iedereen vervelend. Voor thuisgebruikers, omdat de site die ze bezoeken mogelijk niet goed wordt weergeven in de browser die zij gebruiken. Maar ook voor ontwerpers, omdat zij bij het ontwerp van hun site rekening moeten houden met allerlei verschillende browserversies en zogenaamde standaarden.

Het World Wide Web Consortium (W3C), onder leiding van webuitvinder Tim Berners-Lee zag deze ontwikkelingen op het browserfront met lede ogen aan. W3C tracht de ontwikkelingen op webgebied in goede banen te leiden door richtlijnen en standaarden te publiceren waar - als het goed is - elke browserfabrikant zich aan houdt. Om de browser war in goede banen te leiden werden de standaarden HTML 3.2 en HTML 4.01 (1997-1999) en CSS level 1 en level 2 (1996-1998) opgesteld.

En toen gebeurde er een hele tijd niets.

De browser war werd overtuigend gewonnen door Internet Explorer. Niet in de laatste plaats omdat Microsoft het onmiskenbare voordeel had dat ze de browser met elke computer met Windows konden meeleveren maar ook omdat - eerlijk is eerlijk - technisch gezien Internet Explorer in die jaren een veel beter product was dan het topzware en onstabiele Netscape Navigator. Voor gebruikers en webdesigners is het leven nu een stuk aangenamer, omdat de standaarden bekend zijn en alle browsers zich hier binnen redelijke grenzen goed aan houden.

Maar het web veranderd voortdurend. De strijd tussen browsers is nieuw leven ingeblazen door de lancering van Mozilla Firefox. Deze browser knabbelt voortdurend procentjes af van het marktaandeel van Internet Explorer. Van een comfortabele 90% zakt het aandeel Microsoft-browsers nu naar waarden tussen de 60% en 70%. In het kielzog van Firefox zagen ook andere grote partijen weer brood in het lanceren van een eigen browser. Apple ontwikkelde Safari, Google kwam een half jaartje geleden met Google Chrome op de proppen.

En wat doet W3C? Het is al jaren angstig stil uit deze hoek. Jazeker, er zijn tal van aanbevelingsrapportages, werkgroepen en activiteitencommissies en die zich buigen over vraagstukken over hoe de nieuwe ontwikkelingen als AJAX, Flash, Silverlight en meer nu gestandaardiseerd kunnen worden. Al bijna tien jaar wordt gewerkt aan de opvolger van HTML 4.01. Toch wordt HTML 5 - volgens de meest gunstige schatting - pas in de jaren 2010-2012 verwacht, terwijl een uitloop naar 2015 of nog later niet ondenkbaar is.

Browserfabrikanten wachten hier natuurlijk niet op en proberen elkaar nu al telkens de loef af te steken met nog snellere scores op JavaScript-taken, betere ondersteuning van de ACID-compatibiliteitstest en het steeds sneller laden van pagina's. Het verst hierin gaat Apple, dat begin juni bij het uitbrengen van Safari 4 voor Windows en Macintosh op hun conferentie voor programmeurs in San Fransisco (WWDC) aankondigde dat Safari 'de beste ondersteuning biedt voor nieuwe elementen uit de HTML 5-standaard'. Een standaard die op zijn vroegst pas over een aantal jaar bekend wordt!

W3C zou er goed aan doen haast te maken met het standaardiseringproces en snel duidelijkheid te scheppen over de nieuwe elementen in HTML 5 en de wijze waarop deze door webdesigners en browserfabrikanten verwerkt moeten worden. Anders staan we aan de vooravond van een nieuwe golf websites die is 'geoptimaliseerd voor [vul browsernaam in]'. Hier is niemand mee gediend."

Peter Kassenaar
-- 16 juni 2009

Op steeds meer websites zie je kaarten opduiken die afkomstig zijn van Google Maps. Dit is niet zo verwonderlijk, want Google stelt de code die nodig is om kaartjes in een webpagina op te nemen gratis beschikbaar via de Google Maps API.

Met enkele regels HTML en JavaScript kun je op deze manier snel een interactieve kaart in je webpagina opnemen die precies dezelfde functionaliteit bevat als de volledige versie van Google Maps: in- en uitzoomen, verschuiven, routes plannen, markeringen plaatsen en nog veel meer. Om hiermee te beginnen hoef je alleen een Google Maps API Key op te vragen. Zodra je deze hebt (gratis) kun je je eigen dynamische kaarten maken.

Statische kaarten

Soms is een dynamische kaart echter niet de beste oplossing. Dynamische kaarten met de Google Maps API worden gemaakt met behulp van JavaScript (niet altijd beschikbaar in browsers en/of mobiele telefoons) en het kan soms lang duren voordat de kaart geladen is, zeker bij tragere internetverbindingen. Er is aardig wat overhead vereist voor een dynamische kaart.

Kortom, als je gewoon even snel een kaartje in een pagina wilt plaatsen, is het gebruik van de Google Maps API al snel overkill.

Sinds kort biedt Google echter ook de optie om statische kaarten in je webpagina op te nemen. Deze bieden minder functionaliteit (niet scrollen, niet zoomen), maar laden razendsnel en zijn erg eenvoudig te maken. Hieronder zie je een voorbeeld van een statische Google Map met de locatie van ons kantoor in Doesburg.

Technische achtergronden

Bij een statische kaart kun je gewoon de algemene tag <img> invoegen in de pagina op de plaats waar de kaart moet komen. Het attribuut src=".." mce_src=".." laat je vervolgens verwijzen naar de coordinaten van de kaart, en met het attribuut key="..." geef je je persoonlijk Google Maps API Key op. De totale code voor een kaart zie er dan uit als

<img src="http://maps.google.com/staticmap?center=52.010877,6.137674&markers=52.010877,
6.137674,red&zoom=15&size=480x480&key=jouw_google_key" />

Hierin moet de tekst jouw_google_key natuurlijk worden vervangen door een echte Google Maps API Key. Deze is enkele tientallen tekens lang en ziet er bijvoorbeeld uit als ABQIACFDwlt31CnZMUVmUIoAlicZ0hSuTLwashVo9ZdMxpEBj (dit is een fake-key).

Een statische Google Map maken

Het proces om een statische Google Map te maken bestaat uit verschillende stappen.

1. Maak een Google account op www.google.com/accounts/. Als je al een Google account hebt voor bijvoorbeeld Gmail of AdSense dan kun je deze accountgegevens gebruiken.
2. Maak een persoonlijk Google Maps API Key op code.google.com/apis/maps/signup.html.
3. Ga naar de wizard om een nieuwe statische kaart te maken. Dit is de speciale Google Static Maps Wizard
4. Typ het adres in waarvoor u de kaart wilt maken en klik op Create Marker Here.
   
5. Verander desgewenst de hoogte en breedte van de kaart. De maximale afmetingen zijn 512x512 pixels. Voor een kaart voor een mobiele telefoon geeft u bijvoorbeeld de afmetingen 176x240 op.
   
6. Voer de URL van uw site in (dit moet dezelfde URL zijn als u in stap 2 hebt opgegeven, bij het maken van de Google Maps API Key) en klik op Generate Key.
   
7. Kopieer en plak de code die wordt gegenereerd naar een <img>-tag in uw HTML-pagina.
   

Meer informatie

• Static Maps API Developers Guide (US)
• Google Maps API (algemene documentatie, US)
• Artikel - Uw eerste kaart maken met Google Maps API (US)

-- Peter Kassenaar
26 februari 2008