Als u dit blog wat vaker leest dan zult u zien dat ik regelmatig video's publiceer over allerlei zaken. Dat was oorspronkelijk een hobby van mij, maar ook in mijn werk is deze kennis al vaak van pas gekomen. Ik ben sinds 1999-2000 bezig met het opnemen en bewerken van (scherm)video's en heb hier –in alle bescheidenheid – inmiddels al veel ervaring mee opgedaan. Gebruik bijvoorbeeld de tag Video voor een compleet overzicht van berichten op dit blog die hier over gaan.

Voor klanten en opdrachtgevers maak ik bij de oplevering van een nieuwe site of applicatie bijvoorbeeld vaak een serie instructievideo's over [nieuwe] kenmerken van de applicatie en de wijze waarop hij het best gebruikt kan worden. Dat scheelt veel schrijfwerk en uitleg-sessies. Ook in usability-onderzoeken worden veel video-opnames gebruikt om sites en applicaties te verbeteren.

Videotraining en vBook

Daarnaast heeft ons bedrijfje voor de publieksmarkt (=de consument) in samenwerking met uitgeverij Van Duuren Media onder de noemer 'Videotraining' en 'vBooks' ook een aantal kant-en-klare videoproducties gemaakt. Dit zijn bijvoorbeeld

• Werken met Premiere Pro en Encore DVD
• Dynamische websites maken met Dreamweaver
• Werken met ASP.NET

en nog een aantal anderen. Een compleet overzicht hiervan is nog beschikbaar op de oude site. U kunt ze desgewenst nog steeds bestellen. Er is nog voorraad!

Nu is deze reeks inmiddels wel enigszins verouderd geraakt. De nieuwste versies van de software (Premiere Pro CS3 en Dreamweaver CS3) wordt hierin niet besproken en er zijn problemen bekend bij gebruik van de nieuwste versie van Flash Player. Hoewel de besproken technieken zeker ook in de nieuwe versies nog goed gebruikt kunnen worden, zien we dat deze serie langzamerhand aan het einde van zijn levenscyclus is gekomen.

Wat onze klanten hierbij altijd als een groot voordeel hebben ervaren is – indien mogelijk – het gebruik van Nederlandstalige software in de video's (waar ze zelf ook mee werken) en Nederlandstalig gesproken instructies. Natuurlijk zijn op het web ook tal van videoinstructies te vinden, maar deze zijn vaak in het Engels. En het is al lastig genoeg om een nieuwe techniek te leren, laat staan dat deze ook nog gepresenteerd wordt in een taal die niet je eerste taal is.

Nieuwe uitgaven en tijdgebrek

Het oorspronkelijke idee was om de hiervoor genoemde serie ook uit te breiden met uitgaven over bijvoorbeeld Flash, Photoshop en Digitale fotografie. Door tijdsgebrek is dat er helaas echter nooit concreet van gekomen. Oh, ideeën en kennis genoeg, maar de hectische computerboekenmarkt leent zich er helaas niet voor om je ongestoord een paar maanden op een zolderkamertje op te sluiten en rustig een nieuw product in elkaar te sleutelen. Het is altijd rennen en vliegen om boeken te schrijven voor de volgende nieuwe serie toepassingen (Office 2007, Windows Vista, CS3 en ga zo maar door).

Ik heb destijds echter al wel enige tientallen video's over verscheidene onderwerpen opgenomen en gemonteerd. Maar deze zijn helaas op de plank komen te liggen.

Tot vandaag.

Onlangs kwam ik ze weer tegen toen ik mijn vaste schijf-archief aan het opschonen was. En omdat ik nu een mooi publicatiemedium heb (dit blog) met redelijk veel schijfruimte kan ik makkelijker de betreffende video's distribueren. Ik heb besloten de video's de komende periode langzamerhand op dit blog te publiceren en eens te kijken hoe mensen hier op reageren.

Afweging

Ik moest hierbij de volgende afwegingen maken

• De filmpjes zijn ondertussen al weer een paar jaar oud (hoewel de behandelde technieken veelal tijdloos zijn), waardoor ze waarschijnlijk lastig in de reguliere hype-markt ('altijd het nieuwste van het nieuwste') te verkopen zijn...
• maar as ik ze gratis op het blog zet, verdien ik er niets aan. Er zit wel tientallen uren werk in...
• ...maar het potentiële publiek dat ik bereik is wel veel groter (dan via een vaste verpakking in de (web)winkel)...
• ...en misschien willen bezoekers zelf wel een vrijwillige donatie doen?

En dus heb ik maar besloten om inderdaad dit nieuwe experiment te starten.

Doneren

Eigenlijk verandert er niets. Alles op dit weblog blijft gratis beschikbaar. Behalve dat er nu een optie 'Doneren' in het menu aan de rechterkant van deze pagina is bijgekomen. Hiermee kunt u een vrijwillige bijdrage storten als blijk van waardering voor de uren die er in zijn gaan zitten en als dank voor de kennis die u via de filmpjes hebt opgedaan.

U kunt een bijdrage geven via de betaalsystemen iDeal en PayPal.

Nogmaals, het is niet verplicht, maar ik zou het zeker op prijs stellen. Al is het alleen al uit nieuwsgierigheid hoeveel Nederlanders dit daadwerkelijk doen. Over een paar maand zal ik via een blogbericht eens laten weten hoeveel de Donatie-knoppen tot dan toe hebben opgebracht.

Daarbij: als u een donatie hebt gedaan voelt dat erg goed! (voelt u zich na een paar dagen niet meer zo goed? Doe nog een donatie! :-)

Video – Digitale fotografie

Genoeg tekst voor dit moment, laat ik deze serie starten met een eenvoudige instructie die oorspronkelijk bedoeld was voor de serie 'Videotraining – digitale fotografie'.

Tijdens mijn trainingen destijds merkte ik bijvoorbeeld dat veel gebruikers niet weten hoe ze binnen Photoshop (of een willekeurig ander grafisch pakket) een woord kunnen maken waarbij de letters verschillende kleuren hebben – denk aan het Google logo.

En dus heb ik daar een video van gemaakt (08:41 min). Hierin komen verschillende aspecten aan de orde

• Tekst typen en het lettertype aanpassen
• Werken met teksteffecten in Photoshop: verschillende kleuren, slagschaduw en schuine rand (bevel).
• Teksten op verschillende lagen plaatsen.

De video is opgenomen met Photoshop CS2, maar het werken met teksten is al sinds Photoshop 6 of 7 niet sterk meer gewijzigd, zodat de instructie vrijwel voor elke Photoshop-versie (of Photoshop Elements) geschikt zal zijn (natuurlijk zijn er wel allerlei extra effecten toegevoegd, zoals tekst langs een pad en werken met vectorteksten, maar voor de basishandelingen die hier worden besproken maakt dat niet veel uit).

Conclusie

In de komende weken/maanden zal ik regelmatig nieuwe video's plaatsen die oorspronkelijk bedoeld waren voor commerciële exploitatie. Als u hiervan op de hoogte gehouden wilt worden, neem dit blog dan op in uw RSS-favorieten (héééé, hoe moet dat? Daar kan ik ook wel een video van maken!), dan krijgt u vanzelf een berichtje wanneer een nieuw filmpje beschikbaar is.

Hebt u suggesties of tips voor nieuwe (instructie-)video's, of wilt u misschien een serie video's produceren voor het trainen van werknemers binnen uw bedrijf, neem dan nader contact op.

Ook andere opmerkingen zijn uiteraard welkom door een commentaar bij dit bericht achter te laten.

Bedankt voor het lezen/kijken,

Peter Kassenaar
-- 5 juli 2008

In mijn miniserie over handige softwarehulpjes heb ik eerder geblogd over

• Werken met IE7 Pro
• Zoomen met Zoomit

In deze post laat ik een handige manier zien om in Windows Vista schermafdrukken te maken. Hiervoor gebruik ik het nieuwe tooltje Knipprogramma ('snippets' in Engelstalige Vista-versies) dat – voor zover ik weet – met alle versies van Windows Vista wordt meegeleverd.

PrintScreen, Alt+PrintScreen en Knipprogramma

Het werken met de knoppen PrintScreen (schermafdruk van hele scherm maken) en Alt+Printscreen (afdruk maken van het actieve venster) werkt in Windows Vista nog net zoals in Windows XP en eerder. Maar met het nieuwe Knipprogramma kun je nu ook exact aangeven welk deel van het scherm je als gif, jpg of png-bestand wilt opslaan. Als extraatjes kun je vanuit Knipprogramma een screenshot direct e-mailen of nog eenvoudig verder bewerken door met een potlood of markeerstift extra opmerkingen te maken in het knipsel. Maar als dat niet voldoende is, kun je het knipsel natuurlijk altijd laden in Photoshop of Fireworks om hem daar nog verder te bewerken.

Bekijk de video (05:29 min) voor een compleet overzicht.

Peter Kassenaar
-- 15 mei 2008

In een van mijn vorige blogberichten gaf ik een techniek en een stukje JavaScript-code om het opslaan van afbeeldingen via de rechtermuisknop te ontmoedigen. Ik gaf ook in de video al aan dat het te ver gaat om dit ‘uitschakelen’ of zelfs maar ‘beveiliging’ te noemen. Het is hooguit een kleine barrière, die aan de bezoeker aangeeft dat je graag het copyright op afbeeldingen op de pagina gerespecteerd ziet.

In de video van deze post (03:55 min) laat ik zien op welke manier elke rechtermuisknopbeveiliging is te omzeilen. Hiervoor is eenvoudig gebruik te maken van het venster Pagina-info van Firefox.

Ik hoop dat je er wat aan hebt.

Peter Kassenaar
-- 3 mei 2005

Soms is er zo'n samenloop van omstandigheden dat je denkt 'hier moet ik wat mee doen'. Zo ook weer afgelopen week. Ik zat de worstelen met een ongewilde witruimte bovenaan een pagina. In Internet Explorer was het probleem niet zichtbaar, maar in Firefox wel. En juist had ik dit knelpunt verholpen (met dank aan Gert Ribbink voor de initiële oplossing) toen een lezer mij mailde met vrijwel hetzelfde probleem. En dus bedacht ik me dat dit geen toeval kon zijn en er waarschijnlijk nog wel meer webontwerpers tegen hetzelfde probleem aanlopen

Het probleem

Er is ongewenste witruimte zichtbaar rondom elementen. Soms in Internet Explorer wel en in Firefox niet, soms andersom. De pagina-opmaak kan hierdoor in de war raken.

Figuur 1: Firefox geeft een ongewenste wituimte boven de pagina

Figuur 2: Internet Explorer plaatst de pagina precies tegen de bovenrand van het venster

De oorzaak

Het bleek dat de koptekst <h1> in dit geval voor het probleem zorgde. Deze krijgt in Firefox standaard een margin van ongeveer 20 pixels aan de bovenkant en onderkant, terwijl dat in Internet Explorer niet het geval is.

De meer conceptuele oorzaak is dat er tussen de fabrikanten onderling gewoon geen vaststaande afspraken zijn gemaakt voor margin en padding van elementen. Met andere woorden: de ene keer krijgt een element in Firefox wel padding en in Internet Explorer niet, soms krijgen elementen juist margin (en soms niet) en soms werken de browsers precies tegengesteld (en in Opera en Safari gaat het weer anders). Kortom, het is een ratjetoe. Vandaar ook alle tientallen CSS-hacks die je op internet kunt vinden

De oplossing

De korte oplossing is: maak een stylesheet-regel waarin expliciet de margin voor kopteksten op nul wordt gezet. In Internet Explorer was dat al zo, dus verandert er niets. Maar in Firefox ziet de pagina er dan ook goed uit.

h1{ 
   margin: 0;
}

De langere oplssing is: gebruik de analyse-tool Firebug voor Mozilla Firefox om de bron van het probleem te achterhalen en te verhelpen. In de video (08:41 min) laat ik hiervoor een mogelijke werkwijze zien.

Uiteraard zijn er meer methoden om te analyseren wat de oorzaak van lay-outproblemen is, maar het werken met Firebug (ik ken dit pas een paar maanden, maar zou nu al niet meer zonder kunnen!) is wel een van de makkelijkste manieren denk ik.

In de komende maanden hoop ik een serie videodemo's te maken over het werken met Firebug en de uitgebreide mogelijkheden van deze Firefox-extension.

Peter Kassenaar
-- 29 april 2008

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)

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

• Werken met IE7Pro

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

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

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:

• http://www.yourhtmlsource.com/stylesheets/csslayout.html
• http://www.alistapart.com/articles/flexiblelayouts/
• http://www.katinkahesselink.net/webvisie/geentabel.html (Nederlandstalig)
• En een hele lijst bij Google.

Succes er mee!

Peter Kassenaar
-- 10 april 2008

dw_site_centreren_AP.zip (105,44 kb)

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