André Scholten » DHTML http://andrescholten.nl André Scholten: SEO, Laadtijd Optimalisatie en Google Analytics blog Fri, 27 Mar 2015 21:50:08 +0000 nl-NL hourly 1 http://wordpress.org/?v=4.1.2 Google Analytics tabellen sorteren verbeterdhttp://andrescholten.nl/google-analytics-tabellen-sorteren-verbeterd/ http://andrescholten.nl/google-analytics-tabellen-sorteren-verbeterd/#comments Thu, 13 Mar 2008 07:58:46 +0000 http://andrescholten.net/google-analytics-tabellen-sorteren-verbeterd/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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

Je hebt wellicht honderden pagina's die net een aantal keer bezocht zijn in de gegeven periode en een bounce rate van 100% hebben. Vooral bij enorm grote sites treed dit verschijnsel op omdat de lijsten (pagina's, keywords, refferers, enz) enorm zijn.

Een soort van oplossing die soms soelaas biedt is de export functie. Exporteer een paar keer een lijst van 500 items naar Excel, knip daar de items die te lage cijfers hebben weg en ga dan sorteren. Als je mazzel hebt kun je zo werken, als je pech hebt is je site vele malen groter en kijk je tegen uren handwerk aan.

De oplossing: sorteren met Greasemonkey

Terwijl ik in gesprek was met diegene die deze wens bij mij neer had gelegd schoot mij het tabel sorteer script van Joost te binnen. Deze moest op een of andere manier te integreren zijn in Google Analytics. Na een tijdje prutsen en testen is het volgende er uit gerold (zie de extra sorteerknoppen):

sorteerbalk.gif

Het sorteer script is met enkele aanpassingen gereed gemaakt voor Greasemonkey en Google Analytics. Je kunt hier eenvoudig de top 100 pagina's van je site opvragen en die 100 on-the-fly sorteren op de waardes in de andere kolommen. Probeer het ook eens.

]]>
http://andrescholten.nl/google-analytics-tabellen-sorteren-verbeterd/feed/ 23
AJAX, bookmarks, back buttons en deeplinkshttp://andrescholten.nl/ajax-bookmarks-back-buttons-en-deeplinks/ http://andrescholten.nl/ajax-bookmarks-back-buttons-en-deeplinks/#comments Tue, 24 Apr 2007 19:26:08 +0000 http://andrescholten.net/ajax-bookmarks-back-buttons-en-deeplinks/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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.

Hoe los je dat dan op?
Er is een manier om toch het adres te veranderen zonder de pagina te herladen. In een adres kan gebruik gemaakt worden van een hash, dat is het gedeelte wat achter een # staat in een URL. Deze hash is ontworpen om zo in lange pagina's anchors te kunnen plaatsen waar direct naar toe gelinked kan worden. Hierdoor hoeven bezoekers niet al scrollend door een pagina te zoeken. De meest gebruikte toepassing is vaak een inhoudsopgave bovenaan een pagina die links heeft naar de anchors verder naar onderen in de pagina.

Ik heb een voorbeeld in elkaar gezet dat aantoont dat het adres van een pagina prima kan veranderen (het hash gedeelte althans) zonder de pagina te herladen. Om het script zo irritant mogelijk te maken laat ik direct de statusbalk en titelbalk ook mee animeren (old school website technieken :P ) Als extra feature wordt de scrollhoogte ook in de teksten getoond, zo zou je pagina's op een bepaalde scrollhoogte kunnen bookmarken. Kleine opmerking: door het animeren werkt de back knop niet aangezien je dan 1 animatie terug gaat.

Hoe toe te passen
In plaats van een animatie kan ook iets minder spectaculairs gebruikt worden natuurlijk ;) . Het idee van deze techniek is dat bepaalde statussen binnen een AJAX applicatie gebookmarked kunnen worden. Stel dat je een boekingsysteem hebt waar je vier stappen moet doorlopen, dan zou je op het moment dat je van stap naar stap gaat de URL als volgt mee kunnen veranderen:

boeken.html
boeken.html#overzicht:drenthe
boeken.html#details:stacaravans-assen
boeken.html#boeken:carav102912

Wanneer men dan in het detailscherm op de back knop drukt springt de URL terug naar het overzicht Drenthe. Vervolgens kan de applicatie dit volgen en ook weer het overzicht laten zien. Het is niet moeilijk om dan te bedenken dat bookmarks en deeplinks ook werken. Zo kun je bijvoorbeeld het laatste adres bookmarken zodat je later terug kunt gaan naar die betreffende caravan.

Opmerkingen
De toepassing van deze techniek die ik nu als voorbeeld genomen heb is vrij makkelijk. Maar ik weet uit ervaring dat het vrij moeilijk is deze techniek goed werkend in een site te krijgen. Vaak is het zo dat dit al vanaf de start van een ontwerp meegenomen moet worden om goed geïntegreerd te kunnen worden. Een goed werkend voorbeeld kreeg ik door van collega Peter Meindertsma die op de SES in New York is geweest. Daar werd de case van Rolex gepresenteerd, een goed werkende implementatie van deze techniek.

En is dit dan goed voor zoekmachines?
Helaas, zoekmachines indexeren vooralsnog niet het hash gedeelte van een URL. Het is daarom geen oplossing voor het zoekmachine vriendelijk maken van een AJAX implementatie. Wel om het gebruikersvriendelijker te maken.

]]>
http://andrescholten.nl/ajax-bookmarks-back-buttons-en-deeplinks/feed/ 11
DHTML Grafiek generatorhttp://andrescholten.nl/dhtml-grafiek-generator/ http://andrescholten.nl/dhtml-grafiek-generator/#comments Wed, 10 Jan 2007 22:35:23 +0000 http://andrescholten.net/dhtml-grafiek-generator/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
De DHTML Grafiek generator is een handig script waarmee een simpele lijst met datums en getallen omgezet kan worden naar een grafiek. Dus geen PHP, ASP of welke serverside taal dan ook is vereist.

graph.gif

Op dit moment is er alleen een basale versie maar ik wil in de loop van de tijd dit script steeds verder uitbreiden tot een handig en volwaardig script.

De punten die op dit moment to-do zijn:

  • Het kunnen toevoegen van meerdere grafieken
  • Schaalverdeling op de y-as
  • Betere hover info per staaf
  • ?

Suggesties?

Meest recente versie: 1.0 (10 januari 2007)

]]>
http://andrescholten.nl/dhtml-grafiek-generator/feed/ 5
Een select element spiderbaar makenhttp://andrescholten.nl/een-select-element-spiderbaar-maken/ http://andrescholten.nl/een-select-element-spiderbaar-maken/#comments Tue, 26 Sep 2006 07:09:51 +0000 http://andrescholten.net/een-select-element-spiderbaar-maken/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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.

]]>
http://andrescholten.nl/een-select-element-spiderbaar-maken/feed/ 9
DHTML AsTreehttp://andrescholten.nl/dhtml-astree/ http://andrescholten.nl/dhtml-astree/#comments Tue, 15 Aug 2006 20:57:07 +0000 http://andrescholten.net/dhtml-astree/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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).

De tree is helemaal opgebouwd met layers omdat de <table> tag snelheidsproblemen geeft bij veel folders en items, en omdat tables niet bedoeld zijn voor dit soort doeleinden. Ook wordt hij helemaal volgens het DOM opgebouwd waardoor hij officieel in alle browsers zou moeten werken ;). Meer dan 3000 nodes zouden prima moeten kunnen op een PIII 500.

Bij links naar documenten kun je met een variabele aangeven of hij kleine icoontjes moet laten zien achter de link.

Kleine disclaimer: dit heb ik ontwikkeld in 2003, dus er kunnen verouderde zaken in zitten.

]]>
http://andrescholten.nl/dhtml-astree/feed/ 5
DHTML Astrishttp://andrescholten.nl/dhtml-astris/ http://andrescholten.nl/dhtml-astris/#comments Sun, 09 Jul 2006 15:46:02 +0000 http://andrescholten.net/dhtml-astris/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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.

]]>
http://andrescholten.nl/dhtml-astris/feed/ 2
DHTML Snakehttp://andrescholten.nl/dhtml-snake/ http://andrescholten.nl/dhtml-snake/#comments Sun, 09 Jul 2006 15:23:39 +0000 http://andrescholten.net/dhtml-snake/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
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.

]]>
http://andrescholten.nl/dhtml-snake/feed/ 0
Layer over select heen plaatsen is mogelijkhttp://andrescholten.nl/layer-over-select-heen-plaatsen-is-mogelijk/ http://andrescholten.nl/layer-over-select-heen-plaatsen-is-mogelijk/#comments Thu, 29 Jun 2006 21:12:59 +0000 http://andrescholten.net/layer-over-select-heen-plaatsen-is-mogelijk/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Al jaren irriteert dit probleem me, je hebt een mooi menu op je pagina dat uitklapt als je over de items heen gaat. Maar dan is er een pagina waar gebruikt gemaakt wordt van de zogenaamde select box. Deze verschijnt dwars door je menu heen zoals te zien is in onderstaande afbeelding.

pulldown.gif De meeste gebruikte oplossing was het laten verdwijnen van de selectbox wanneer het menu opengeklapt staat. Dit is vaak niet een mooie oplossing en vereist ook een stukje script wat op maat gemaakt moet worden voor dit probleem. Andere oplossingen had ik tot dus toe nog niet gezien.
De oplossing blijkt echter vrij simpel te zijn: plaats een iframe in de layer die in ieder geval het gedeelte van de select bedekt. Een iframe wordt namelijk wel bovenop de selectbox gerenderd. Daar overheen plaats je dan de layer en voila: de pulldown is keurig bedekt. Een iframe staat wel toe dat er een layer overheen gezet word.

Een voorbeeld van deze oplossing heb ik in deze pagina gezet. Dit probleem is overigens niet aan de orde in Firefox, deze rendert keurig de layer over de pulldown heen zoals het hoort. Alleen Internet Explorer is hierin een spelbreker.

]]>
http://andrescholten.nl/layer-over-select-heen-plaatsen-is-mogelijk/feed/ 0
DHTML Scroll progress barhttp://andrescholten.nl/dhtml-scroll-progress-bar/ http://andrescholten.nl/dhtml-scroll-progress-bar/#comments Sun, 25 Jun 2006 11:42:32 +0000 http://andrescholten.net/dhtml-scroll-progress-bar/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Met deze scroll-progress-bar kun je zien hoe ver je al gescrolled hebt op lange pagina's. Dat kun je ook wel zien aan je normale scrollbar maar dit maakt het visueel net even wat mooier. Het is ooit voor iemand gemaakt die wilde visualiseren hoever men al klaar was met het invullen van een enquete.

]]>
http://andrescholten.nl/dhtml-scroll-progress-bar/feed/ 4
DHTML Vuurwerkhttp://andrescholten.nl/dhtml-vuurwerk/ http://andrescholten.nl/dhtml-vuurwerk/#comments Sun, 25 Jun 2006 11:35:29 +0000 http://andrescholten.net/dhtml-vuurwerk/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Ooit heb ik ergens dit script online gevonden en daarna voorzien van goede up-to-date code zodat het in bijna alle browsers goed werkt. Leuk om bijvoorbeeld met oud en nieuw op je site te plaatsen.

Het script laat een aantal diverse soorten vuurwerk zien op willekeurige locaties en met willekeurige kleuren.

]]>
http://andrescholten.nl/dhtml-vuurwerk/feed/ 0
DHTML Panorama viewerhttp://andrescholten.nl/dhtml-panorama-viewer/ http://andrescholten.nl/dhtml-panorama-viewer/#comments Tue, 06 Jun 2006 20:38:31 +0000 http://andrescholten.net/dhtml-panorama-viewer/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
In een topic op Tweakers.net werd er gevraagd naar een javascript Panorama Viewer. Ik ben toen even bezig geweest om iets simpels te maken en het resultaat daarvan is op deze pagina te zien. Sleep het plaatje en je ziet dat hij gaat scrollen binnen de viewport. Misschien een keer handig om toe te passen, het script mag door iedereen vrij gebruikt worden.

]]>
http://andrescholten.nl/dhtml-panorama-viewer/feed/ 5
DHTML Regenboog teksthttp://andrescholten.nl/dhtml-regenboog-tekst/ http://andrescholten.nl/dhtml-regenboog-tekst/#comments Sat, 27 May 2006 19:38:18 +0000 http://andrescholten.net/dhtml-regenboog-tekst/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Wat moet ik hier van zeggen, een online regenboog tekst generator. Volgens mij heb ik hem gemaakt omdat ik ergens zo'n tekst nodig was en het niet zag zitten om dit handmatig te doen. Het script werkt heel simpel met door elke letter zijn een span te geven met daarin een inline style waarvan de RGB waarden stapsgewijs veranderen.

]]>
http://andrescholten.nl/dhtml-regenboog-tekst/feed/ 0
DHTML Slidelettershttp://andrescholten.nl/dhtml-slideletters/ http://andrescholten.nl/dhtml-slideletters/#comments Fri, 26 May 2006 21:51:48 +0000 http://andrescholten.net/dhtml-slideletters/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Dit is een DHTML animatie die ik gemaakt heb n.a.v. dit topic op Tweakers.net. Daar wordt een flash logo gedemonstreerd met de vraag "hoe maak je zoiets". Ik ben even aan de gang gegaan en toen zijn mijn DHTML Slideletters er uit gekomen. De letters komen in het scherm vliegen, en zodra ze stil staan kun je ze met de muis opnieuw laten animeren.

]]>
http://andrescholten.nl/dhtml-slideletters/feed/ 3
Chopperhttp://andrescholten.nl/chopper/ http://andrescholten.nl/chopper/#comments Fri, 21 Apr 2006 20:51:05 +0000 http://andrescholten.net/chopper/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Af en toe wordt in het Webdesign, Markup & Clientside Scripting forum op Tweakers.net een contest georganiseerd om te kijken wie het leukste spel kan maken met alleen Javascript en CSS. Dit spel is daaruit ontstaan.

Het idee komt van een spel dat ik vroeger op de ZX Spectrum had, je moest in een zo kort mogelijke tijd plaatsen opzoeken in Nederland. Grappig detail is dat dit spel al bijna geavanceerder is dan het origineel.

De versie zoals ik hem nu heb is niet af, wel kan er met de pijltjestoetsen naar diverse plaatsen gevlogen worden. Bekijk hier het resultaat: Chopper.

]]>
http://andrescholten.nl/chopper/feed/ 2
CSS Menuhttp://andrescholten.nl/css-menu/ http://andrescholten.nl/css-menu/#comments Wed, 19 Apr 2006 20:26:15 +0000 http://andrescholten.net/css-menu/ Related articles:
  1. Over Andre Scholten
  2. De 9de Online Marketing Blog Kermis
  3. 8e online marketing blog kermis weer live
]]>
Tegenwoordig is het belangrijk dat een zoekmachine makkelijk een hele site kan doorzoeken om zoveel mogelijk pagina's te kunnen indexeren. Maar wat vaak gebeurt is dat er DHTML menu's gebruikt worden die niet te volgen zijn door zoekmachine spiders. Een oplossing voor dit probleem zijn de CSS menu's. Deze worden op een semantisch verantwoorde manier met kale HTML opgebouwd en met CSS tot een menu gestyled. In IE is een klein stukje Javascript nodig om het uitklappen te laten werken maar voor de zoekmachines is dat niet relevant.

Dit geheel kan op heel veel verschillende manieren gestyled worden, voorbeelden hiervan zijn te zien in de pagina's die hieronder genoemd worden. Mijn advies is om deze menu's te gebruiken i.p.v. de bloated DHTML menu's. Hou er rekening mee dat je op de folders ook een link plaatst naar een pagina waar je subitems staan zodat mensen zonder javascript ook alle pagina's kunnen bereiken.

Listamatic

one list, many options

A List Apart

Suckerfish Artikel
Suckerfish voorbeeld

Peterned

CSS Hover artikel
CSS Menu voorbeeld

Webmaster Toolkit

CSS Menu Generator

Meyer Web

pure CSS menus

]]>
http://andrescholten.nl/css-menu/feed/ 2