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.

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)

12april

Software tip: ZoomIt [video]

Ik probeer een kleine serie samen te stellen van software-tools waar ik regelmatig mee werk. Het eerste bericht was

Vorig jaar ontdekte ik een stukje software waarvan ik wilde dat ik het eerder had gevonden: ZoomIt, van Mark Russinovich (bekend als de man achter Winternals Software, dat in 2006 door Microsoft werd overgenomen).

Het doel ervan is enorm eenvoudig: inzoomen op delen van het scherm tijdens het geven van een voordracht of presentatie. Zo zien de toeschouwers beter waar het om gaat en wordt de aandacht vanzelf gefocused op het deel van het scherm dat belangrijk is. Als is ingezoomd, kan desgewenst in verschillende kleuren worden getekend of getypt op het scherm om de zaken nog verder te verduidelijken.

Ik gebruik het sindsdien zelf in vrijwel elke presentatie of lezing die ik geef. En altijd komen na afloop mensen uit het publiek naar me toe: "hoe doe je dat, dat inzoomen op het scherm?" :-). Bekijk de video (03:49 min) voor een indruk van de werking ervan.

Download ZoomIt (44KB): http://technet.microsoft.com/en-us/sysinternals/bb897434.aspx

Veel plezier er mee!

Peter Kassenaar
-- 12 april 2008

10april

AP-elementen centreren in Dreamweaver [video]

In een eerder blogbericht liet ik zien hoe sites in Dreamweaver gecentreerd kunnen worden. Ik kreeg hier onder meer een volgende reactie op:

"De video klopt, maar met AP-div-tags werkt het niet. En dat is mijn probleem. Mijn websitepagina's zijn opgebouwd uit een aantal div-tags, waarvan er steeds tenminste twee naast elkaar staan. Ik krijg die niet in die 'container'. "

Er zijn inderdaad speciale vereisten als je werkt met absoluut gepositioneerde elementen in een pagina. Dan worden de elementen immers uit de standaard paginaflow gehaald en op basis van hun CSS-coördinaten gepositioneerd. Wat veel designers echter denken, is dat deze positionering altijd wordt berekend ten opzichte van het browservenster. En dat is niet correct. In werkelijkheid wordt hun positie berekend ten opzichte van het eerste bovenliggende element (parent element) dat uit de standaard paginaflow is gehaald. Op die manier wordt het ook mogelijk om elementen absoluut te positioneren binnen andere absoluut of relatief gepositioneerde onderdelen.

Bekijk de video voor een compleet stappenplan (07:29 min.)

Klik om de video te starten

Met deze kennis kun je er nu voor kiezen de div #container te relatief te positioneren, waarna je elementen binnen de container alsnog gewoon absoluut kunt positioneren zoals je eerder al deed. Nu wordt hun positie evenwel berekend ten opzichte van de linker bovenhoek van de container en niet de linker bovenhoek van het browservenster. En als daarmee de plaats van de gecentreerde container wordt aangepast, wordt ook de plaats van de AP-elementen binnen die container bijgewerkt.

Meer informatie

Enkele webpagina's over positionering met CSS:

Succes er mee!

Peter Kassenaar
-- 10 april 2008

dw_site_centreren_AP.zip (105,44 kb)

09april

Vensters verplaatsen in Spaces van Mac OS X [video]

In een eerder blogbericht over tien pluspunten van Mac OS X schrijf ik dat de tool Spaces mij erg bevalt. Je kunt er als het ware virtuele desktops mee maken en zo je werkruimte enorm vergroten. Wat ik toen als 'verbeterpunt' aanmerkte was dat het in een volgende versie van Spaces mogelijk zou moeten zijn om vensters te verplaatsen tussen een space.

Wat blijkt nu echter: dat kan al lang!

Als je op het pictogram Spaces in het Dock klikt, verschijnt een miniatuuroverzicht van alle Spaces en de vensters die per Space aanwezig zijn. Het blijkt echter dat dit overzicht interactief is! Met andere woorden: je kunt in Space 1 een venster oppikken met je muis, en dit bijvoorbeeld naar Space 3 slepen. Dit komt mij enorm van pas. Nu kan ik namelijk mijn virtuele machines van VMWare verdelen over de verschillende spaces en elk van de virtuele machines fullscreen draaien. Waarom hebben jullie mij dat niet eerder verteld? :-).

Standaard draai ik meestal zowel Mac OS X en Windows XP tegelijk, maar daarnaast doe ik ook testwerk in Windows Vista en Linux. Die vensters hoeven nu dus niet meer over elkaar heen te liggen, maar draaien fijn elk in een eigen space. Handig!

Ik heb er even een korte video van gemaakt (02:08 min) met Jing, zodat je precies kunt zien wat ik bedoel (35 MB, het laden kan even duren!).

Let op: deze video is fullscreen opgenomen op mijn laptop, dat betekent een resolute van 1440x900. Anders zou de overzichtspagina van Spaces en het verslepen van vensters niet goed te zien zijn. En omdat Jing-video's naderhand niet meer te editen zijn (zoals ik hier al schreef), zul je het er even mee moeten doen :-). Als jouw monitor kleiner is, zul je mogelijk wat moeten schuiven om alles goed te kunnen zien, maar de hoofdlijnen zullen wel duidelijk zijn.

Ik hoop dat jullie er wat aan hebben,

Peter Kassenaar
-- 9 april 2008

03april

Sites centreren in Dreamweaver [video]

Regelmatig krijg ik van lezers de vraag 'Hoe kan ik mijn site centreren in Dreamweaver?'. Dit is daarmee zeker iets wat in een volgend boek over Dreamweaver aan de orde zal komen! Omdat ik jullie daar niet op wil laten wachten heb ik alvast een korte videodemo gemaakt waarin wordt getoond hoe je een site in Dreamweaver een vaste breedte kunt geven en deze vervolgens kunt centreren in de browser (06:32 min).

Ik werk in de video met een nieuwe pagina, maar als je dit wilt toevoegen aan bestaande pagina's, dan kun je eenvoudig de tag <div> om de bestaande content plaatsen, ongeveer zoals in

<div id="container">

…Overige inhoud van de pagina

</div>

En dan uiteraard de juiste codes voor #container schrijven in je CSS-bestand zoals in de video wordt aangegeven. De bestanden die in de demo worden gemaakt kun je hier downloaden. Veel succes er mee!

Peter Kassenaar
-- 3 april 2008

dw_site_centreren.zip (18,33 kb)

 

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

 

18maart

MacBook Pro review - multitouch trackpad

In mijn miniserie reviews over de MacBook Pro zijn inmiddels de volgende afleveringen verschenen:

Multitouch trackpad

In de voorlopig laatste video van deze serie kijk ik meer in detail naar de werking van het multitouch trackpad van de MBP. Wat zijn de opties, hoe worden ze ingesteld en - misschien nog wel belangrijker - heb je er in de praktijk ook echt iets aan? De video laat alle handelingen zien die mogelijk zijn met 1, 2 of 3 vingers.

Bekijk externe video bij YouTube (08:54)

Samenvattend, ik vind goed:

  • Toegevoegde waarde van het scrollen met twee vingers
  • Tappen met twee vingers om rechtermuisknop te simuleren
  • Schermzoom (Control+schuiven met twee vingers)

Wat kan beter:

  • Zoomen en roteren met twee vingers werkt vaak niet goed.
  • Trackpad op MBP wat aan de kleine kant om deze functies goed uit te voeren.

Conlusie

De absolute noodzaak van een multitouch op de MBP ontbreekt, omdat er tal van andere invoermethoden zijn (toetsenbord, muis), die bijvoorbeeld iPhone en iPod touch niet hebben. Op dergelijke devices is het mulitouch daarom een must-have. De aanwezigheid ervan is mijns inziens zeker geen hoofdreden om een MBP aan te schaffen. Aan de andere kant, als je toch al een MBP hebt is er ook geen enkele reden om de mogelijkheden die het multitouch trackpad biedt niet te gebruiken.

Apple moet de mogelijkheden van zoomen en roteren op de MBP nog eens kritisch bekijken. Het zou goed zijn als een volgende generatie MBP's een grotere touchpad zou hebben, bijvoorbeeld vergelijkbaar met de MacBook Air, zodat het multitouch trackpad aan gebruikersgemak wint.

Peter Kassenaar
-- 18 maart 2008

14maart

MacBook Pro review - Hardware, deel 3

Ik ben bezig met een miniserie reviews over mijn nieuwe MacBook Pro. Eerdere blogberichten in deze serie zijn

In de video die bij dit bericht hoort, kijk ik meer in detail naar het beeldscherm van de MBP. Dit is per slot van rekening toch het onderdeel waar je het grootste deel van de tijd tegenaan kijkt gedurende het dagelijks werk. Een beeldscherm moet daarom stabiel verlicht zijn, moet letters en afbeeldingen haarscherp weergeven en moet het beeld ook goed weergeven als je niet loodrecht voor het scherm zit. In het filmpje komen al deze aspecten aan de orde.

En oh ja, als het even kan moet de computer ook een beetje vlot opstarten...

Bekijk externe video bij YouTube (06:43)

Samenvattend, ik vind goed:

  • Snelle opstarttijd van Mac OS X
  • Het beeldscherm. Ik heb in ruim 15 jaar laptopgebruik nog geen notebook gehad met een beter scherm.
  • Diverse instelmogelijkheden met betrekking tot resoluties.
  • De keuze tussen glossy en mat. Ieder kan zijn eigen voorkeur kiezen.

Wat kan beter:

  • Dit beeldscherm heeft geen minpunten. Punt.

Wat komt er nog meer?

  • Ik hoop volgende week een video gereed te hebben over het gebruik van de multitouch trackpad op de MBP.

Peter Kassenaar
-- 14 maart 2008

13maart

VMWare Fusion installeren op Mac OSX

Hoe prachtig het besturingssysteem Mac OS X ook is, soms moet je gewoon de beschikking hebben over een aantal Windows-toepassingen. Bijvoorbeeld omdat er geen Mac-drivers of -programmatuur beschikbaar is voor randapparaten (zoals mijn Tacx Fortius fietstrainer), of omdat er gewoonweg geen geschikt Mac-equivalent is (zoals Visual Studio 2008).

Virtualisatie

Dan kun je besluiten om binnen Mac OS X een virtualisatieprogramma in te zetten, waarmee je Windows (maar ook tal van andere besturingssystemen) kunt draaien. Voor Mac OS X zijn er -naast BootCamp van Apple zelf- twee bekende systemen

Omdat ik al bekend ben met VMWare op het pc-platform heb ik in eerste instantie gekozen voor Fusion. Onderstaande filmpjes laten zien hoe VMWare Fusion wordt geinstalleerd op Mac OS X.

Jing

De video's zijn gemaakt met Jing, het enige videocapture-programma dat ik ken voor de Mac (helaas is Camtasia Studio [nog] niet verkrijgbaar in een Mac-versie, nog een reden om Fusion te draaien :-).

De kwaliteit van Jing-filmpjes is voor schermopnamen stukken beter dan de YouTube-kwaliteit van mijn eerdere opnames met een camcorder. Maar helaas zijn ze naderhand niet meer te wijzigen.

Video's

De laatste 30, 40 seconden van het eerste filmpje kun je dan ook probleemloos overslaan, omdat er niets gebeurt :-). Mijn cursor was tijdens de installatie van Windows gevangen in het Fusion-venster, en ik wist niet hoe ik hem er uit kon bevrijden om de opname te stoppen (dat bleek later: Control-Appeltje). Onmachtig liep het filmpje door tot de maximale opnametijd van vijf minuten voor Jing bereikt was...

Bekijk externe video bij screencast.com (5.00)

Windows XP Installeren binnen VMWare Fusion

In de video's wordt getoond hoe Windows XP Professional wordt geinstalleerd binnen een virtuele VMWare Fusion computer. De totale installatie duurde op mijn MacBook Pro slechts ongeveer 12 minuten (dual-core Intel Pentium, 2,4 GHz, 4GB RAM). Dit is veel sneller dan ik op welk andere 'kale' computer ooit heb meegemaakt! Deel 2:

Bekijk externe video bij screencast.com (4.42)

Ik heb nu de trialversie van VMWare Fusion geinstalleerd. Mocht dit bevallen, dan koop ik het complete pakket. In volgende video's hoop ik nog in te gaan op de configuratiemogelijkheden voor virtuele machines, zodat je ziet wat de opties zijn voor het optimaliseren van de instellingen binnen Fusion zelf, en het combineren van Mac- en Windows-toepassingen in je workflow.

Peter Kassenaar
-- 12 maart 2008

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