Heb je de zaterdageditie van de krant uit? Loop je met je ziel onder je arm. Hier is wat leesvoer om het weekeinde door te komen. Een paar dingetjes voor het leeslijstje van het weekeinde van 20 | 21 februari:

Creating Better Auto-Generated Text

Altijd goed, een stuk tekst van Michael — Graywolf — Gray. Door sommigen beschouwd als 100% blackhat, maar ik vind het meestal nogal meevallen.

Zijn artikeltje over automatisch gegenereerde teksten, die ook door Google als unieke inhoud in plaats van gibberish wordt beschouwd, komt trouwens wel aardig in de buurt van het predikaat “black hat”. Het is natuurlijk allemaal puur theoretisch. En voor eductional purposes only …

To be clear, using auto-generated text will fall into the gray-hat to black-hat side of the equation.  Again understand that it may be technically in compliance with the concept of unique content, but it isn’t what Google really has in mind when they say “create unique content.” So don’t mix it with your good stuff and don’t come crying to me if it gets you banned or penalized.

jQuery plugin: Masonry

Deze mooie jQuery plugin ga ik binnenkort zeker gebruiken op één van mijn websites: masonry. Zorgt dat div’s als stenen in een metselwerk een (letterlijk) passend plekje krijgen.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Hier kun je een mooie post-it-achtige website mee maken. En ik heb vast nog een domein waar ik op het moment niks mee doe …

Geen tijd om te lezen

Zelf heb ik dit weekend bar weinig tijd om te lezen. Ik moet rennen. Een heel stuk rennen. In Apeldoorn.

Leuk. Spelen met de Google Maps API. Gaandeweg word je steeds wijzer.

Voorbeeldje: het GPolygon object in Google Maps stelt je in staat om een vorm op je GMap kaartje te tekenen. Nu is dat niet zo’n probleem als het een vierkant of een andere eenvoudige vorm is. Maar wat als je een overlay wilt maken in de vorm van de provincie Friesland? Ga je dan alle coordinaten die nodig zijn om het polygoon te tekenen handmatig opzoeken? Da’s toch iets te omslachtig.

De oplossing die ik bedacht is de volgende: een polygoon overlay prepareer je vrij eenvoudig door in Google Earth een polygoon overlay te maken, het getekende object als KML bestand op te slaan en vervolgens de coordinaten in het KML bestand te gebruiken om huup huup huup barbatruc (relatief) snel een eigengemaakt XML bestand te brouwen dat een Google Maps polygoon overlay implementeert.

Zoiets als hieronder, waarin een xml-bestand de basis is voor een (vrij ruwe) Gpolygon overlay van de provincie Friesland.

<?xml version=”1.0″ encoding=”UTF-8″?>
<provincies>
<provincie naam=”Friesland”>
<punt lat=”5.6417540301387″ lng=”53.31862537478114″ />
<punt lat=”5.601394272591392″ lng=”53.29722883035308″ />
<punt lat=”5.514664156630218″ lng=”53.25351579038482″ />
<punt lat=”5.436265962100094″ lng=”53.20028996820903″ />
<punt lat=”5.416757798236787″ lng=”53.1510373918212″ />
<punt lat=”5.395750580550342″ lng=”53.09988125925209″ />
<punt lat=”5.379957548464859″ lng=”53.05170159446328″ />
<punt lat=”5.39763038307855″ lng=”53.02456027531464″ />
<punt lat=”5.401958640132307″ lng=”52.98881301736234″ />
<punt lat=”5.408149085717938″ lng=”52.95677879231113″ />
<punt lat=”5.399267798428184″ lng=”52.93447282266515″ />
<punt lat=”5.412958517587612″ lng=”52.91651012360246″ />
<punt lat=”5.380917899485013″ lng=”52.89800152571775″ />
<punt lat=”5.36367928371574″ lng=”52.87372539129518″ />
<punt lat=”5.416175071741861″ lng=”52.85154622296546″ />
<punt lat=”5.491051933326873″ lng=”52.84469950940976″ />
<punt lat=”5.551940503772812″ lng=”52.84088213581107″ />
<punt lat=”5.598639728158858″ lng=”52.84714773291602″ />
<punt lat=”5.636523793034897″ lng=”52.85358018645154″ />
<punt lat=”5.661714108058447″ lng=”52.84324246289889″ />
<punt lat=”5.697648152178303″ lng=”52.84261449445339″ />
<punt lat=”5.749430081155723″ lng=”52.83045122396133″ />
<punt lat=”5.785232690944113″ lng=”52.80754678183364″ />
<punt lat=”5.82964060277358″ lng=”52.80673432868616″ />
<punt lat=”5.880492542198327″ lng=”52.79889359510096″ />
<punt lat=”5.919515645360648″ lng=”52.83011096406028″ />
<punt lat=”5.960191924145264″ lng=”52.83636075248498″ />
<punt lat=”5.984057665880329″ lng=”52.82326561821252″ />
<punt lat=”6.015227775365845″ lng=”52.82125777577868″ />
<punt lat=”6.065867012905827″ lng=”52.8371042553437″ />
<punt lat=”6.11826155321647″ lng=”52.843120486328″ />
<punt lat=”6.210568730071103″ lng=”52.89159646550523″ />
<punt lat=”6.251936444106989″ lng=”52.92319449271693″ />
<punt lat=”6.286614540385401″ lng=”52.92246151728106″ />
<punt lat=”6.331584002418808″ lng=”52.90076425350457″ />
<punt lat=”6.366461450997775″ lng=”52.91479507778703″ />
<punt lat=”6.401967964850272″ lng=”52.93043759610292″ />
<punt lat=”6.425470099821169″ lng=”52.96630735522788″ />
<punt lat=”6.365579100846901″ lng=”53.02684756683307″ />
<punt lat=”6.367040039553033″ lng=”53.06206588410836″ />
<punt lat=”6.320289090776243″ lng=”53.07279684808722″ />
<punt lat=”6.323753840929329″ lng=”53.09401149324337″ />
<punt lat=”6.263968310031288″ lng=”53.10351786451235″ />
<punt lat=”6.185694303123142″ lng=”53.12509837860175″ />
<punt lat=”6.179219235938903″ lng=”53.15391711492647″ />
<punt lat=”6.206240726857743″ lng=”53.19119827794165″ />
<punt lat=”6.224908574241908″ lng=”53.218845366347″ />
<punt lat=”6.237846164792843″ lng=”53.2398940083819″ />
<punt lat=”6.261144497410939″ lng=”53.2791593271518″ />
<punt lat=”6.291200702654109″ lng=”53.30800580725216″ />
<punt lat=”6.280377771892447″ lng=”53.34194945857235″ />
<punt lat=”6.231242919591765″ lng=”53.34862635327323″ />
<punt lat=”6.175961820092312″ lng=”53.37263418102311″ />
<punt lat=”6.188510064022098″ lng=”53.41315211996164″ />
<punt lat=”6.045691180344208″ lng=”53.4022774077747″ />
<punt lat=”5.887686278109897″ lng=”53.37823569581277″ />
<punt lat=”5.742743614816973″ lng=”53.3410559123932″ />
<punt lat=”5.6417540301387″ lng=”53.31862537478114″ />
</provincie>
</provincies>

Dit bestand laadt je vervolgens met een javascript functie in in je Google Maps toepassing. Let op: de lat en lng waarden staan in het KML bestand omgekeerd. Vandaar dat hieronder eerst het lng attribuut wordt uitgelezen en daarna het lat attribuut om ze in de voor Google Maps geschikte volgorde te krijgen. Over quick and dirty gesproken :

function polyLaden() {
if (xmlhttp) {
var url=”/xml/provincies.xml”;
xmlhttp.open(“GET”,url,false);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var xmldata = GXml.parse(xmlhttp.responseText);
var punten = xmldata.documentElement.getElementsByTagName(“punt”);
var pnts = [];
for (var i = 0; i < punten.length; i++) {
pnts[i] = new GLatLng(parseFloat(punten[i].getAttribute(“lng”)), parseFloat(punten[i].getAttribute(“lat”)));
var poly_friesland = new GPolygon(pnts,”#666666″,1,1,”#ff0000″,0.5,{clickable:true});
}

map.addOverlay(poly_friesland);

GEvent.addListener(poly_friesland,”click”, function() {
alert(“Je klikte op Friesland”);
if (poly_friesland.isHidden()) {
poly_friesland.show();
}
else {
poly_friesland.hide();
}
});
}
else {
alert(“Er was een probleem met het ophalen van xml data voor de kaart.”);
}
}
}
xmlhttp.setRequestHeader(‘Accept’,'message/x-formresult’);
xmlhttp.send(null);
return false;
}
else {
alert(“Het ophalen van kaartinformatie wordt door uw browser niet ondersteund.”);
}
}

Tof. En de performance van de polygoon rendering is behoorlijk te noemen. Ik ben wel benieuwd hoe de performance van een kaart wordt beïnvloed als je er voor elke provincie een overlay overheen zet.

Tot zover het goede nieuws. Wat dan alleen weer een afknapper is … het feit dat het GPolygon object geen mouseover event ondersteunt. Een klik-event kun je wel registreren, maar een mouseover / mouseout — bijvoorbeeld om een opwindend visueel effect te creëren als er iemand overheen muist — helaas (nog) niet. Aaaargh!!!

Update
Bill Chadwick heeft een subclass voor het GPolygon object geschreven waarmee je op een eenvoudige manier mouseover effecten implementeert. Gewoon even die polygon javascript class scoren en you’re good to go.

Dinsdag 18 september 2007 organiseerde Peter Paul Koch in Pakhuis de Zwijger in Amsterdam het mini-congres voor front enders. Met als doel een belangenvereniging op te richten voor personen die zich beroepsmatig met frontend webdesign bezighouden. Voor iedereen met een beroepsmatige (x)html, Cascading Style Sheets of javascript tic dus. Maar ook voor Flashers. Want Flash is definitely frontend.

Het programma werd ingevuld met presentaties van Stephen Hay van Cinnamon en Refunk’s Bobby van der Sluis (mij vooral bekend vanwege zijn UFO project). En een aantal code reviews. Onder andere verzorgd door de lead frontend developers van Lost Boys, Eden Design en Info punt nl.

Bere-interessant allemaal … Maar het heeft me wel aan het denken gezet. Op de weg terug naar huis borrelde de vraag op: wie ben ik op webgebied? Wat kan ik en waar sta ik? Het antwoord: ik ben voornamelijk een generalist. Een jack of all trades. (X)HTML, cascading style sheets, javascript, webstandaards, XML, ASP, Google mashups, MySQL, IIS, zoekmachineoptimalisatie, PHP, web usability, Flash, grafische dingen, SQL, DOM scripting. Allemaal leuk om eens mee te knutselen en dat heb ik dan ook gedaan. Of zoals Vulcano — 1 van die onvergetelijke Nederlands topbands van de jaren 80 — al verkondigde: Een beetje van dit en een beetje van dat. Een beetje van zus. En een beetje van zo. Ik ben dus voornamelijk breed ge-oriënteerd. Daar is toch niks mis mee, zou je denken. Maar hoe zit het dan met de diepgang? Is het logische gevolg van elke spannende techniek niet dat je een chronisch gebrek aan specialisme ontwikkelt? Is het zo zoetjes aan niet verstandiger om me te concentreren op ëën of enkele deelgebieden?

Okay. Binnenkort maak ik m’n keuze met betrekking tot de webtechnische zaken waarop ik me ga concentreren. Helemaal helder heb ik het nog niet op m’n netvlies, maar ik denk dat het de voorkant van websites wordt waar ik me op wil focussen — XHTML, stijlbladen en javascript dus. Met daarnaast een solide kennis van CMS‘en (Drupal en WordPress bijvoorbeeld) om als backend te implementeren. En SEO is en blijft natuurlijk ook wel spannend.

K*#@t. Daar gaan we alweer …

De achtergrond
Met Company of Kids ben ik voorzichtig aan het nadenken over een vorm van samenwerking. Om te beginnen ben ik door Company of Kids gevraagd om een flash banner op Leuk voor kids te zetten. Om vervolgens maar eens een dooddoener-konijn uit de hoge hoed te trekken: meten is weten.

En ik wil graag weten hoe vaak de banner van Company of Kids aangeklikt wordt.

Het idee
Oké, dat is niet zo spannend zou je zeggen. Hang een javascript event handler aan het flash object en laat deze event handler een serverside script aanroepen dat het klik-veld van de betreffende record in de hey_hoevaak_wordt_er_op_mij_geklikt tabel met één ophoogt. Een kind kan de was doen …

Het probleem
Een kind kan de was doen … maar niet heus. In theorie klinkt het bovenstaande dan wel logisch, maar in de praktijk blijkt het gemakkelijker gezegd dan gedaan. Want hoewel het in Firefox niet zo’n probleem is om bij een klik op de flash banner de klikteller te updaten, werken Internet Explorer versies 6 en 7 niet mee. En aangezien het overgrote deel van de bezoekers langskomt met deze browsers en versies, MOET een en ander werken onder Internet Explorer 6+. Het probleem lijkt hem erin te zitten dat het flashfilmpje zich in de documentstructuur op de bovenste laag bevindt en derhalve het onclick event van het javascript onderschept. De banner voorzien van de wmode = transparent parameter (geopperd op de Adobe website) biedt evenmin uitkomst. Grrr. Op internet is weliswaar voldoende naslagwerk te vinden over het probleem van de layering van swf objecten in een htmlbestand, maar voor mijn specifieke situatie heb ik geen oplossing gevonden.

De oplossing
Ik kan slecht tegen mijn verlies. Dus heb ik net zolang lopen klooien totdat ik een workaround gevonden had. Toegegeven, ik betwijfel of mijn uiteindelijke fix voor het bovenstaande probleem de schoonheidsprijs verdient, maar hey … het werkt in elk geval wel. Oké, wat heb ik dan gedaan? Door te rommelen met absolute positionering en de z-index, en daarnaast vals te spelen met de in de flashbanner geprogrammeerde doorklik naar de Company of Kids website (lees: de doorklik wordt gedaan door het javascript in plaats van de flash banner) is het gelukt om een tracking van het aantal kliks op de banner te realiseren.

Ik heb een div gebruikt en daarin een absoluut gepositioneerde afbeelding (een transparante gif) geplaatst. Daaronder laad ik een nog een div in, waarin tenslotte de flashbanner zich bevindt. Aan de transparante gif heb ik een onclick event opgehangen, die zorgt voor (1) het verhogen van de teller en (2) het laden van de achterliggende website.

De code
1. html en javascript

<div id="container-banner-cok">
<img id="anker" src="/img/transparant-468x60.gif" />
<div id="flashbanner">
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("pad naar flash bestand", "", "468", "60", "6", "#f0f0f0", true);
fo.addParam("wmode", "transparent");
fo.write("flashbanner");
var container = document.getElementById("container-banner-cok");
var anker = document.getElementById("anker");
anker.style.cursor = "pointer";
anker.onclick = function () { updateBannerClicks('cok022007'); window.open('url die geopende moet worden'); }
// ]]>
</script>
</div>
</div>

2. stijlblad dingen

#container-banner-cok { width: 468px; height: 60px; display: block; background: #fff; margin: 10px 10px 10px 20px; padding: 0; z-index: 100; text-align: left; }
#anker { position:absolute; display: block; border: none; z-index: 99; width: 468px; height: 60px; margin: 0; padding: 0; }
#flashbanner { position: absolute; display: block; width: 468px; height: 60px; z-index: 0; padding: 0; margin: 0; }

Oh ja, in het bovenstaande geval heb ik gebruik gemaakt van Geoff Sterns’ flash object voor het inladen van de Flash banner.

Via een artikel op Download Squad kwam ik terecht op Curvy Corners. Op de Curvy Corners website draait het allemaal om een leuk javascript dat DIV elementen, slechts op basis van een stukje javascript, voorziet van afgeronde hoeken.

Nu zijn er natuurlijk meerdere wegen die naar Rome leiden. Zelf hanteerde ik tot nu toe een oplossing met cascading style sheets en achtergrond afbeeldingen om kaders met ronde hoeken te creëren. Een implementatie hiervan kom je tegen op één van de nullbeta diezijnz pagina’s. Het werkt naar behoren, maar ik ben de eerste om toe te geven dat het niet echt een charmante manier is om je kaders te stylen.

Nee, dan is de Curvy Corners manier om kaders te voorzien van ronde hoeken een heel stuk eleganter en flexibeler. Wat heeft Curvy Corners dan te bieden? Onder andere:

• Afgeronde hoeken op basis van javascript
• Geen afbeelding noodzakelijk voor het maken van de ronde hoeken
• Ondersteuning van anti-aliasing
• Ondersteuning van een achtergrondafbeelding in het afgeronde kader (zie mijn demopagina voor een voorbeeld)
• Toepasbaar in vloeibare layouts
• Aanpasbare ronding van de hoeken

Op een demopagina heb ik even uitgeprobeerd hoe gemakkelijk het script is in de omgang. En ik ben behoorlijk enthousiast over de mogelijkheden van het Curvy Corners javascript. Snel en simpel! En mooi bovendien. Aangezien het script gebruik maakt van DOM scriptfuncties is een stukje object detectie voldoende om het script zonder sputteren te laten degraderen als de browser niet voldoet aan de eisen die curvyCorners stelt.

Check anders zelf wat het Curvy Corners script je allemaal te bieden heeft …