Category Archives: DHTML

Google Analytics tabellen sorteren verbeterd

Onlangs werd mij de vraag gesteld of er ook iets te doen was aan de half onbruikbare sortering van de Google Analytics tabellen. En aangezien ik zelf ook al een aantal keer tegen dit probleem aangelopen was moest er toch maar eens een oplossing komen.

Het probleem waar ik het over heb is als volgt: stel je hebt het scherm "Top Content" voor je waarin je de top 100 pagina's van je site ziet. Van deze pagina's wil je zien welke de hoogste "bounce rate" heeft, dus klik je in de kolomheader op "bounce rate". En wat krijg je vervolgens: de top 100 pagina's met de hoogste bounce rate. Dit lijkt handig, maar vaak ziet het er zo uit:

weigerings.gif

Continue reading

AJAX, bookmarks, back buttons en deeplinks

hash.pngWat hebben deze vier begrippen met elkaar gemeen? Nou, in veel gevallen is het zo dat door de eerste term te gebruiken je de andere drie min of meer onmogelijk maakt cq uitschakelt. Zoals wellicht bekend is kan er met AJAX voor gezorgd worden dat delen van pagina's opnieuw geladen worden zonder de hele pagina te verversen. Schitterende techniek die bepaalde zaken aanzienlijk kan versnellen, maar er is een keerzijde:

Door een deel van de pagina te verversen zal het adres van de pagina niet veranderen.

Nou en?
In eerste instantie denk je dat het niets uit maakt, maar wat nou als je bijvoorbeeld een op AJAX steunende vakantieboeksite gebruikt hebt om de vakantie te boeken. En vlak voor het bevestigen wil je nog even wachten op goedkeurig van de partner, je bookmarked de pagina en sluit de browser. Even later open je de bookmark om de uitgezochte vakantie te showen en je ziet het intro scherm van het boekingssyteem voor je...daar wordt je niet blij van. Dit verschijnsel komt puur en alleen door het feit dat met AJAX de url niet veranderd en de samengestelde pagina niet meer te bookmarken is. Tegelijkertijd betekent dit dat je de back-knop van je browser ook niet kunt gebruiken, want er is geen vorig adres. En voor deeplinken geldt hetzelfde, er is geen adres om naar te linken.

Continue reading

Een select element spiderbaar maken

lijst.gif

In een aantal gevallen kan het zo zijn dat je op je site gebruik maakt van een zogenaamde <select> box om naar diverse onderdelen te navigeren. Helaas zijn deze elementen oorspronkelijk alleen bedoeld voor formulieren die verstuurd kunnen worden, waardoor ze standaard geen navigeer functionaliteit gekregen hebben. Dit gebeurt dan ook altijd met Javascript wat niet te spideren is door de zoekmachines.

Om dit op te lossen heb ik in eerste instantie de volgende oplossing bedacht: plaats links om de tekst van de option heen zodat zoekmachines die kunnen gebruiken. Dat ziet er als volgt uit:

<option value="http://www.url.nl"><a href="http://www.url.nl" >Url</a></option>

Zoekmachines negeren de option en lezen de link, en browsers negeren de link en zullen keurig alleen de option laten zien. Alleen tijdens een open vragen sessie aan Matt Cutts (mannetje van Google) heb ik gevraagd of dit een mooie oplossing was. En zijn antwoord: "It could raise some flags". Met andere woorden: hij zou het niet aanraden.

Op zoek naar een andere oplossing dus, en die schoot me vandaag te binnen. Ik maak nu gebruik van een <ul> met een aantal <li>'s er in die na het laden omgezet worden naar een <select> box. Heb je geen Javascript of ben je een zoekmachine dan krijg je keurig een lijst met links te zien. Ondersteund je browser wel Javascript dan krijg je keurig een ruimtebesparende select box te zien.

Het voorbeeld is hier te bekijken, bekijk de broncode en je ziet 3 lijsten staan. Maar op je scherm worden keurig selectboxen getoond.

DHTML AsTree

tree.gifAsTree is een javascript tree zoals in de windows explorer waarmee op een simpele manier veel items in 1 menustructuur gegoten kunnen worden. Geinspireerd op een versie die ik ergens online gezien had maar die bij 2000 items veels te traag werd. Daarom ben ik zelf bezig gegaan om een snellere versie te ontwikkelen, en dit is het resultaat geworden.

Deze tree is momenteel de snelste die er op internet te downloaden is, ik heb er uitgebreid mee getest en nog geen snellere gevonden. Na diverse kleine tweaks heb ik de opbouw van 1000 nodes van 7130ms naar 5210ms naar 4670ms naar 3790ms gekregen. Die kleine tweaks waren onder andere het veranderen van de volgorde in if-statements, het de andere kant op laten lopen van for lussen en het vervangen van innerHTML door createTextNode (DOM).

Continue reading

DHTML Astris

Dit spel is het resultaat van de DHTML contest 2003 op Tweakers.net. Jammer genoeg was het geen winnende inzending, er had namelijk iemand een complete DHTML Lemmings nagemaakt die nagenoeg hetzelfde kon als het origineel.

Deze Tetris kloon heeft me aardig wat tijd gekost en heeft me veel geleerd over diverse DHTML technieken. Zo zie je maar dat Javascript best een krachtig script is alleen kan het bij een verkeerde implementatie heel erg traag worden.

DHTML Snake

Volgens mij is dit spel het resultaat van een avond in 2000 dat ik niets te doen had. Mijn doel was om een spelletje te maken met javascript. Hij is niet helemaal af maar de basis werkt. Het is een game die toentertijd zeer populair was op de Nokia mobieltjes. En het namaken is redelijk gelukt want meer opties zaten er toen ook daar nog niet in.