» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #66

Bookmarklets voor webdesigners - klikbaar gereedschap

Bookmarklets, ook wel favelets genaamd, zijn een speciaal soort bookmarks of favorieten. In plaats van http://-adressen van websites bevatten ze javascript:-urls. Door een bookmarklet aan te klikken wordt de betreffende Javascript-code uitgevoerd op de huidige pagina.

Dit artikel bestaat uit een opsomming van bookmarklets die handig zijn bij het bouwen en ontwerpen van een website. Ze geven informatie over (elementen van) de huidige pagina of bieden manieren om het uiterlijk van de pagina ‘live’ te beïnvloeden, ter analyse of inspiratie.

Maar eerst gaan we eens bekijken hoe zo’n bookmarklet eigenlijk werkt. Zo kun je ze zelf bouwen en anderen helpen met een handig stuk gereedschap.

Een bookmarklet bouwen

De enige vereiste voor het bouwen van een bookmarklet is kennis van Javascript. De volgende twee voorbeelden geven een indicatie van de procedure en waar je zoal op moet letten.

Voorbeeld 1: Verander achtergrondkleur

Het veranderen van de achtergrondkleur van een pagina naar een kleurwaarde naar keuze kan in Javascript met het volgende commando:
document.body.style.backgroundColor = prompt('Kleur:','green');

Om dit op de huidige pagina uit te voeren typen we het volgende in de adresbalk:
javascript:void(document.body.style.backgroundColor = prompt('Kleur:','green'));
Om het commando staat void() zodat de return-waarde genegeerd wordt; als we void() zouden weglaten zou de hele pagina vervangen worden door de ingetikte kleurwaarde.

Op veel pagina’s zal de code geen effect hebben, omdat er een achtergrondpatroon is ingesteld dat de achtergrondkleur verbergt. Om dat achtergrondpatroon tegelijkertijd te verbergen breiden we de code uit tot:
javascript:void(document.body.style.backgroundColor = prompt('Kleur:','green')); void(document.body.style.backgroundImage = 'none');
wat ingekort kan worden tot:
javascript:with(document.body.style){ void(backgroundColor=prompt('Kleur:','green'), backgroundImage='none');}

Nu willen we deze bookmarklet natuurlijk bewaren. Internet Explorer maakt dat heel makkelijk: plak de code in de adresbalk en sleep het pagina-icoon dat aan het begin van de adresbalk staat naar het links-menu. Vervolgens nog even de link een herkenbare naam geven zoals ‘verander achtergrondkleur’ en we zijn klaar.

We zijn tevreden over onze bookmarklet en willen hem wereldkundig gaan maken. En dat willen we zó doen dat mensen zelf de bookmarklet makkelijk kunnen installeren. Daarvoor gebruiken we de volgende html-code:

<a href="javascript:with(document.body.style){ void(backgroundColor=prompt('Kleur:','green'), backgroundImage='none');}"> verander achtergrondkleur</a>
(sleep naar links-menu)

wat er uit komt te zien als:
verander achtergrondkleur (sleep naar links-menu)

Let erop dat bij het opnemen van de code in een href zoals we hier doen niet zomaar alle javascript-karakters gebruikt mogen worden. Vervang de volgende karakters door hun bijbehorende entiteiten om o.a. problemen met valideren te voorkomen:
< wordt &lt;
> wordt &gt;
&& wordt &amp;&amp;
" wordt &quot;

Voorbeeld 2: Count used tags

We willen een bookmarklet schrijven dat laat zien welke html-tags er in de pagina gebruikt worden en hoe vaak elke tag voorkomt. Voor een complexer bookmarklet zoals dit is het handig om de Javascript-code uit te schrijven in een text-editor zoals Notepad, in plaats van alles direct in de adresbalk te typen.
De benodigde code ziet er als volgt uit:


// maak array van alle elementen
alltags  = document.getElementsByTagName('*');

// loop door alle elementen en houd telling bij
// in array tagcount
tagcount = [];
for (i=0; i<alltags.length; i++)
{
  if (tn = alltags[i].tagName)
  {
    if (!tagcount[tn]) { tagcount[tn] = 0; }
    tagcount[tn]++;
  }
}

// loop door array tagcount en genereer overzicht
msg = '';
for (i in tagcount)
{
  msg += tagcount[i] + '\t' + i + '\n';
}

// toon gegenereerde overzicht
alert('#\tused tags\n'+msg);

We maken er één regel van, laten alle comments weg en plaatsen void() om alle commando’s heen die een waarde teruggeven. Nu kunnen we de code in de adresbalk plakken en testen:
javascript:void(alltags=document.getElementsByTagName('*'), tagcount=[]); for (i=0; i<alltags.length; i++) { if (tn = alltags[i].tagName) { if (!tagcount[tn]) { void(tagcount[tn] = 0); } void(tagcount[tn]++); } } void(msg = ''); for (i in tagcount) { void(msg += tagcount[i] + '\t' + i + '\n'); } void(alert('#\tused tags\n'+msg));

De code blijkt te werken, dus we bewaren de bookmarklet door het adresbalk-icoon naar het links-menu te slepen, en publiceren het als volgt (let op de vervanging van ‘<’ door ‘&lt;’ in de for-loop):
<a href="javascript:void(alltags=document.getElementsByTagName('*'), tagcount=[]); for (i=0; i&lt;alltags.length; i++) { if (tn = alltags[i].tagName) { if (!tagcount[tn]) { void(tagcount[tn] = 0); } void(tagcount[tn]++); } } void(msg = ''); for (i in tagcount) { void(msg += tagcount[i] + '\t' + i + '\n'); } void(alert('#\tused tags\n'+msg));">count tags</a> (sleep naar links-menu)

Resultaat:
count used tags (sleep naar links-menu)

Handige bookmarklets

En dan nu een groot aantal kant-en-klare bookmarklets. De meesten kun je testen door gewoon op de link te klikken. Het installeren van een bookmarklet is verder slechts een kwestie van slepen van de link naar het bookmarks- of favorietenmenu van je browser. Het kan handig zijn om je bookmarklets te verzamelen in één subfolder in je links-menu (subfolders van het links-menu worden automatisch een uitklapmenu).

Let op: na het klikken op sommige van de bookmarklets zal de pagina gereload moeten worden om deze weer normaal te kunnen lezen.

Tot slot

Zoals je ziet zijn er veel verschillende nuttige bookmarklets, die heel handig kunnen zijn in je dagelijks werk als webdesigner en waar je uitgebreid gebruik van kunt maken. Als je zelf een goed idee hebt voor een bookmarklet kun je je collega’s misschien wel een groot plezier doen door zelf een nieuwe bookmarklet te bouwen en beschikbaar te maken! De onderstaande links helpen je daarbij verder op weg.

Meer informatie/bronnen

Auteur

Milo Vermeulen

Webkracht, houdt een persoonlijk weblog / fotolog bij op milov.nl en experimenteert met html / javascript op i.am/bald.

Tevens programmeur van WHEDONesque.

Publicatiedatum: 3 november 2003

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs