Bij startende websites zie je vaak pop-ups. Ik geef je alvast de conclusie van dit artikel: gebruik ze niet! Er zijn alternatieven waarmee je hetzelfde kunt bereiken.

Wat is een pop-up?
Onder een pop-up versta ik het openen van een nieuw venster vanuit een webpagina waarbij Javascript gebruikt wordt. Dit is dus een alternatief voor het openen van een nieuwe pagina in een nieuw venster.

Hoe maak je een pop-up?
Wat er meestal gebeurt is dat een pop-up wordt gemaakt door het inladen van een pagina (in de onLoad functie van de body tag) of door een klik op een link of afbeelding (in de onClick functie). Met een script wordt een nieuw venster geopend. Je kunt daarbij een aantal zaken instellen:
1) de grootte van het scherm
2) de inhoud van de pagina
3) het tonen van de adresbalk
4) de beschikbaarheid van navigatieknoppen
5) of de bezoeker kan scrollen
6) of de bezoeker de grootte van het scherm kan aanpassen

Een prima uitleg over het maken van pop-ups met Javascript vind je op mijnhomepage.nl.

Waarvoor gebruik je een popup?
Er zijn meerdere redenen waarmee je een pop-up zou willen gebruiken; een paar voorbeelden die ik in de praktijk ben tegengekomen:
1) Als je bezoekers van je website inhoud wilt tonen die los staat van de rest van je website. Een soort kennisgeving van relevante informatie, maar zelf geen pagina waard zijn.
2) Een andere reden kan zijn dat je niet wilt dat je bezoeker de standaardfuncties van je browser kan gebruiken.
3) Het kan ook zijn dat je je eigen website in beeld wilt houden (achter het pop-up scherm).
4) Om bezoekers te laten inloggen.
5) Als waarschuwing.

In mijn laadtijd meting met Firebug, hebben we gemerkt dat de javascript-bestanden van mijn website naar verhouding vrij groot zijn. Tijd om daar wat aan te doen, zodat pagina's (ook bij een eerste bezoek) wat sneller inladen. Eens kijken of Dojo ShrinkSafe een oplossing biedt.

Dojo ShrinkSafe
Een handige tool hiervoor is Dojo ShrinkSafe. Er zijn twee varianten: een online variant of een programma dat je op je computer installeert. Ik maak even gebruik van de online versie. De werking is eenvoudig:
1) Maak een backup van je huidige javascript bestanden.
2) Upload je javascript bestanden naar de website.
3) Herhaal dit voor ieder bestand dat je wilt comprimeren. Dojo ShrinkSafe maakt er nl een nieuw bestand van.
4) Bekijk of het effect heeft.
5) Controleer nu of het bestand nog valide is. In mijn situatie was er 1 duidelijke fout die ik met behulp van de javascript validatie van Eclipse direct kon opsporen en verbeteren.
6) Als alles klopt, vervang dan de originele bestanden door het nieuwe bestand.
7) Pas eventuele verwijzingen op je webpagina ook aan.
8) Test je site grondig! Dus doe dit allemaal eerst op een testserver.
9) Als alles goed werkt, pas dan je live website aan.

Hoe werkt het?
De code die Dojo ShrinkSafe genereert vervangt regeleinden e.d., maar vervangt ook variabelen en namen door veel kortere variabele; je code is dus niet langer leesbaar! Bewaar je oude code!

wordt

De snelheid van je website is van groot belang. Hoe sneller, des te meer bezoekers en des te beter de ervaring van je bezoekers. Ook in zoekmachines scoor je beter, omdat je site beter bereikbaar is. Een manier om die snelheid te meten is de Firefox plug-in Firebug. Deze plug-in is – los van deze functionaliteit – bijzonder handig voor het ontwikkelen van je website.

Firebug installeren
Als je Firebug nog niet hebt geïnstalleerd, doe dit dan alsnog vanaf www.getfirebug.com. Herstart je browser en start met meten!

De laadtijd meten met Firebug
Klik op het icoontje rechts onderin je scherm om Firebug te openen (een groen rondje met een wit vinkje). Ga daar naar het Net tabblad. Je ziet nu iets wat lijkt op onderstaande afbeelding.

Als je snel wilt kijken wat de CSS code is van een deel van je pagina, maak dan gebruik van XRAY van Westciv. Een handig hulpmiddel om even een kijkje in je CSS te nemen.

XRAY installeren
XRAY laat zich installeren als een booklet. Dit is een klein stukje javascript dat je met een bookmark kunt starten. Het werkt heel eenvoudig:
1) Zet het ergens op je favorieten werkbalk.
2) Zoek de site op die je wilt onderzoeken.
3) Klik op je bookmark.
4) Klik daarna op een element in de pagina dat je wilt inzien.

Het effect ziet er als volgt uit:

Alternatieven
Ben je op zoek naar meer informatie en meer mogelijkheden? Gebruik dan een FireFox plugin: FireBug of Webdeveloper.

In het vorige artikel heb ik toegelicht hoe je oude installaties van MySQL, Apache en PHP verwijdert. Nu de installatie van XAMPP, het controleren van de instellingen en terugzetten van je vorige instellingen.

XAMPP downloaden en installeren
Dowload eerst XAMPP. Ik heb gekozen voor de automatische installer. Voordeel hiervan is dat je er niet veel omkijken naar hebt; nadeel is dat je minder goed weet wat je precies installeert. Wil je meer controle over het installatieproces, maak dan gebruik van de handmatige installatie. Er ga er even vanuit dat je de installer kiest.
Als je deze hebt gedownload is het een kwestie van dubbelklikken en de diverse installatieschermen doorlopen. Kies overal voor de standaard instelling (tenzij je XAMPP niet op de standaardlocatie wilt installeren – kies dan een alternatieve locatie).

Bijzonderheden bij de installatie
Er zijn een paar dingen handig om te weten:
1) Bij de installatie kun je nog kiezen of je ook FileZilla wilt installeren. Dit stelt je in staat een eigen fileserver te beginnen. Als je dit niet van plan bent, vink je dit af.
2) Dit geldt ook voor Mercury Mail. Daarmee kun je een eigen mailserver starten. Ook hier geldt: als je dit niet van plan bent, vink je dit af.
3) Tijdens de installatie controleert XAMPP zelf of er nog oude services zijn die draaien. Als dit het geval is wordt hiervan een waarschuwing gegeven. Dit stelt je in staat om oude services eerst nog op te ruimen.