Browsers en Firefox-extensies

Browsers

Als front-ender streef je er gewoonlijk naar dat je sites in zoveel mogelijk browsers functioneren, en er liefst ook zoveel mogelijk hetzelfde uitzien. Vuistregel: als de site er goed uitziet in Firefox, gaat het gewoonlijk ook wel goed in de meeste andere browsers met een goede ondersteuning voor webstandaarden (zoals Opera, Safari, Chrome en Internet Explorer 7 en later). Internet Explorer (IE voor intimi) 6 heeft zoveel bugs dat het meestal wat extra aandacht nodig heeft. De meeste ontwikkelaars ondersteunen de lagere versies van IE niet meer.

Onderstaande lijst is niet uitputtend, maar dit zijn wel de meest gebruikte. Op de wikipedia vind je een complete(re) lijst.

Internet Explorer: Alleen verkrijgbaar voor Windows-gebruikers. Deze browser van Microsoft wordt wereldwijd het meest gebruikt, maar heeft een slechte naam onder webontwikkelaars dankzij de vele bugs die IE teisterden. Het moet gezegd worden: IE 7 was een grote stap voorwaarts voor wat betreft ondersteuning van webstandaarden. Aan de andere kant: dat was dan ook hard nodig. De huidige versie is Internet Explorer 8.
Firefox: De open-source browser Firefox is zeer populair onder webontwikkelaars vanwege de vele extensies die ervoor verkrijgbaar zijn. Bovendien is de ondersteuning voor webstandaarden erg goed.
Google Chrome: Ook Google heeft tegenwoordig een browser, die zowel op Windows, Linux en Mac kan gebruikt worden. Chrome draait net als Safari op de WebKit-engine.
Safari: Deze browser van Apple is nu ook verkrijgbaar voor Windows. Safari staat bekend om zijn goede ondersteuning van webstandaarden.
Opera: Dit programma is verkrijgbaar voor vele platforms, waaronder de pc, de Mac en Linux. Maar ook vele mobieltjes en de Nintendo Wii draaien Opera. Voor je mobiele telefoon kun je gratis Opera Mini downloaden.
Konqueror: Open-source programma Konqueror is een veel gebruikte browser voor Linux.
Camino, SeaMonkey, Flock, Epiphany en Netscape: Net als Firefox zijn deze browsers gebaseerd op de Gecko engine van Mozilla. Geen van alle worden ze veel gebruikt, maar ze hebben elk zo hun voordelen. Netscape, ooit de grootste browser, wordt inmiddels niet meer officieel ondersteund.
iCab: iCab is een browser voor de Mac met een aantal mogelijkheden die bij andere browsers ontbreken. Voor de Pro versie moet betaald worden.
Lynx: Lynx is een text-only browser voor Windows, Unix en DOS. Een goede test: als je site bruikbaar is in Lynx, ben je aardig op weg voor wat betreft de toegankelijkheid van je site. Als je Lynx niet kunt of wilt installeren, dan kun je ook de Lynx viewer gebruiken.

Browsers kijken

Heb je niet alle browsers bij de hand en wil je toch weten hoe je site het doet? Er zijn verschillende services die screenshots voor je maken in verschillende browsers. De een biedt meer browsers dan de ander en ze zijn niet allemaal gratis. Voor tests in IE is IE NetRenderer waarschijnlijk de snelste. De beste (maar niet gratis) dienst is misschien wel BrowserCam. Bekijk een uitgebreide lijst van rendering services.

Meerdere versies van IE installeren

Testen in Internet Explorer is altijd spannend, vooral omdat de verschillende versies van IE soms heel verschillend met je code omgaan. Daarom is het handig om de belangrijkste versies allemaal op je eigen computer te hebben en daarvoor bestaan verschillende oplossingen.

De Internet Explorer Collection
IETester
IE Virtual PC images in combinatie met Virtual PC

Firefox extensies

Web Developer Toolbar: Deze extensie voegt een extra knoppenbalk toe aan je Firefox, propvol met handigheidjes. Zet snel even javascript uit, of de css, of alle plaatjes… valideer je pagina met een druk op de knop… markeer alle floats op de pagina met een gekleurd lijntje etc. etc.
Firebug: Samen met de web developer toolbar de meest geprezen extensie voor ontwikkelaars. Alleen al de functie 'inspect element' is de installatie waard. Een must!
YSlow: Deze door Yahoo ontwikkelde extensie analyseert de snelheid van webpagina's en geeft tips om ze sneller te maken. Werkt alleen als je Firebug geïnstalleerd hebt.
MeasureIt: Deze kleine, maar fijne extensie voegt een liniaaltje toe aan je gereedschapskist, waarmee je snel objecten op een pagina kunt opmeten.
Colorzilla: Ook handig: een pipetje waarmee je de kleurcode van een stukje website kunt achterhalen.
HTML Validator: Deze extensie plaatst een symbooltje onderin je browservenster, waaraan je in één oogopslag kunt zien wat de HTML-validator van je code vindt.
DOM inspector: Met de DOM inspector kun je gemakkelijk en snel de structuur van een pagina bekijken. Of zoals de makers het zelf zeggen: "DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application."
Operator en Tails: Deze extensies maken de Microformats op een pagina zichtbaar. Ook handig voor mensen die zelf geen Microformats schrijven!
IE View en IE Tab: De meeste front-enders ontwikkelen hun sites met Firefox, en als ze tevreden zijn openen ze de pagina's in Internet Explorer om te kijken hoe groot de schade is. IE View voegt een link toe aan het rechter-muisknopmenu van Firefox, waarmee je snel de huidige pagina in IE kunt openen. Met IE Tab kun je IE zelfs openen als een tabblad in Firefox.
Safari View voor de Mac en voor Windows: Hetzelfde, maar dan voor Safari.