Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

29juni

Handboek (X)HTML, CSS en JavaScript

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

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). 

24juni

JavaScript wordt mooie zwaan - column

 

 

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

16juni

W3C, opschieten! - column

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

27april

Rechtermuisknop uitschakelen voor het opslaan van afbeeldingen [video]

Een van de toepassingen die al bijna zou oud is als het web zelf, is het klikken met de rechtermuisknop op een pagina om een contextmenu te openen. In het contextmenu kan vervolgens worden gekozen voor het afdrukken van de pagina, het opslaan ervan en meer. Als je met de rechtermuisknop op een afbeelding klikt, verschijnt in het contextmenu ook de optie Afbeelding opslaan als…, of Save image as… in Engelstalige browsers. Zo zijn snel afbeeldingen vanaf het web op te slaan op je eigen computer. Vrijwel elke internetter kent deze techniek.

Rechtermuisknop uitschakelen

En al sinds ik mijn eerste trainingen gaf op dit gebied (flashback: 1997, de cursus 'internetspecialist/webmaster' voor Computerij Opleidingen destijds) krijg ik de vraag van cursisten 'Hoe kan ik de rechtermuisknop uitschakelen?'. Ook lezers stellen deze vraag in allerlei varianten: 'hoe kan ik de pagina beveiligen', 'hoe kan ik voorkomen dat bezoekers mijn foto's downloaden' en meer. Ik had gedacht dat deze vraag in de loop der jaren wel zou overwaaien, maar hij komt toch telkens weer terug. Ook afgelopen maand had ik weer een paar mailtjes waarin deze vraag werd gesteld.

En mijn korte antwoord is altijd : dat kan niet.

Als je er voor kiest om een afbeelding openbaar te maken op het wereldwijde internet, moet je er rekening mee houden dat iedereen met die afbeelding aan de haal kan gaan, of je dat nu leuk vind of niet. Als je dat niet wilt, moet je je foto niet op internet zetten. Zo simpel is het in feite.

Welke 'beveiligingstechniek' je ook bedenkt of gebruikt, op het moment dat een bezoeker een afbeelding op zijn beeldscherm heeft staan kan hij hem opslaan en verder gebruiken. Al is het maar door met PrintScreen een schermafdruk te maken en deze in Photoshop bij te knippen en op te poetsen.

Je kunt hooguit proberen een barrière op te werpen, door expliciet te laten weten dat je liever niet ziet dat bezoekers de afbeelding opslaan.

Het lange antwoord is dan ook: gebruik een script dat in zoveel mogelijk browsers actief is en waarbij een JavaScript-venstertje wordt geopend waarin een boodschap wordt getoond. Het script tref je hieronder aan om te downloaden, de toepassing en werking ervan kun je in de video bekijken (06:48 min.).

Peter Kassenaar
-- 27 april 2008

rechtermuisknop.zip (87,90 kb)