Als webdeveloper heb je met een hoop te maken. Naast de taal die je gebruikt om te programmeren (bijvoorbeeld, C#, VB.NET, PHP, classic ASP), moet je HTML, Cascading Stylesheets (CSS), Javascript en waarschijnlijk nog wat SQL kunnen dromen. Verder moet je diverse browsers ondersteunen en ook nog op verschillende Operating Systemen. Begin er maar aan. Gelukkig zijn er wat tools die je hierbij kunnen helpen!

Als webdeveloper heb je met een hoop te maken. Naast de taal die je gebruikt om te programmeren (bijvoorbeeld, C#, VB.NET, PHP, classic ASP), moet je HTML, Cascading Stylesheets (CSS), Javascript en waarschijnlijk nog wat SQL kunnen dromen. Verder moet je diverse browsers ondersteunen en ook nog op verschillende Operating Systemen. Begin er maar aan. Gelukkig zijn er wat tools die je hierbij kunnen helpen!
Ik heb me even gericht op een aantal gratis tools die (volgens mijn bescheiden mening) onmisbaar zijn.
Browser plugins
Een beetje mooi webdesign resulteert al snel in een doolhof van DIV-jes en styles. Het kan dan erg lastig zijn om bijvoorbeeld juist dat ene element te vinden dat juist alles uit elkaar drukt zodat het er niet meer uitziet.
Internet Explorer Developer Toolbar
De IE Developer Toolbar is dan een mooie tool om je te helpen. De HTML van de website wordt als tree-structuur weergegeven en je kunt gemakkelijk door alle elementen navigeren. Daarnaast laat hij ook direct zien welke styles er allemaal op het element van toepassing zijn. De tool geeft je ook de mogelijkheid om een element in de tree terug te vinden door op het element in de pagina te klikken. Even kijken welke style aangepast moet worden en je hebt weer een probleem opgelost! Daarnaast is het bijvoorbeeld mogelijk om alles styles tijdelijk uit te zetten, Javascript te disabelen, de groottes van elementen op te meten, enz. En er is een color-picker: klik op iets in je pagina en je krijgt de kleurcode terug.
Internet Explorer Developer Toolbar
FireBug
Als het dan er goed uitziet in IE wil dat nog niet zeggen dat dit ook geldt voor Firefox. En aangezien Firefox een steeds grotere gebruikersgroep heeft, moet hiermee wel rekening worden gehouden. Ook Firefox heeft een plugin die het mogelijk maakt om je HTML als tree weer te geven met de bijbehorende style informatie. Alleen kun je de waardes van de styles ook meteen aanpassen zodat je meteen kunt zien welke waarde je zou moeten gebruiken om het kloppend te maken. Maar dat is nog niet alles. In Firebug kun je bijvoorbeeld ook Javascript debuggen! Compleet met breakpoints, watches, enz.
FireBug
Browser versies
Multiple IE’s
Websites kunnen op veel verschillende browsers (en browser versies) bekeken worden en dan ook nog op verschillende Operating Systems. Dus dat betekent ook testen op allerlei verschillende versies. Dit kan wel een aantal problemen met zich meebrengen. Zo is het normaal gesproken niet mogelijk om verschillende versies van Internet Explorer naast elkaar geïnstalleerd te hebben, terwijl het verschil in weergave tussen IE6 en IE7 behoorlijk kan zijn. Tredosoft heeft een tool waarbij het mogelijk is om alle IE’s van 3 t/m 7 naast elkaar te draaien: Multiple IE’s. Downloaden, aanvinken welke versies je wilt en testen maar.
Safari
Naast Windows in Apple natuurlijk ook een factor om rekening mee te houden. De meeste ‘Mac-ers  gebruiken Safari. Gelukkig is er inmiddels een Windows versie van beschikbaar. Deze gebruikt een identieke render-engine voor de weergave van HTML en is daarmee prima geschikt om te testen of Apple gebruikers je site fatsoenlijk kunnen bekijken.
Google Analytics
Google heeft een gratis service waarmee je enorm veel over de gebruikers van je website te weten kunt komen: Google Analytics. Naast informatie over browsers en Operating Systems, vind je ook gegevens over aantallen en geografische herkomst van de gebruiker, welke pagina’s worden er bekeken en hoe lang, welke zoektermen werden er gebruikt in Google om jouw site te vinden, welke schermresoluties hebben de gebruikers en vanaf welke sites zijn gebruikers op jouw website terecht gekomen, enz., enz. Kortom, erg bruikbare informatie die je kunnen helpen je site beter en succesvoller te maken. Het enige dat je moet doen is je aanmelden en een scriptje onderaan de pagina’s van je website toe te voegen.
Google Analytics
Integrated Development Environment (IDE)
Wellicht wat kort door de bocht, maar ik beperk me even tot ASP.NET en PHP, omdat dit (op dit moment) de meest gebruikte omgevingen zijn.
ASP.NET
ASPX ontwikkelaars weten natuurlijk dat Visual Studio de IDE is om in te werken. Omdat dit blog bericht zich richt op gratis tools, wil ik wel nog even benadrukken dat Visual Studio ook gratis versies (Express versies) kent, bijvoorbeeld specifiek gericht op webdevelopment. In combinatie met SQL Server Express, toch een prima en goedkope oplossing.
PHP
PHP, in combinatie met een Apache webserver en MySql database is natuurlijk ook een prima, gratis omgeving. Maar er is minder duidelijk dan bij ASP.NET, een IDE beschikbaar. Eclipse (open source editor) in combinatie met de Zend-plugin voor PHP levert een prima IDE, met code completion, PHP-manual documentatie, Syntax highlighting. En last but not least: Debugging!
Zend-plugin
En als ik dan nog 1 laatste tip mag geven: Smarty template engine. Normaal gesproken staan de HTML opmaak en de PHP programma code door elkaar gemixt in één bestand. Smarty is dé oplossing om deze spaghetti-code te voorkomen. Je hebt één bestand met HTML (de template) en één bestand met de Code (ASP.NET developers zouden dit de code-behind noemen). Vanuit het PHP bestand roep je het template bestand aan, geeft aan welke gegevens in de template geplaatst moeten worden en het resultaat (de HTML) wordt naar de gebruiker gestuurd.
Nog Tips?
Dit was een greep uit de tools die ik onmisbaar vind bij Internet development. Er zullen zeker nog andere zeer bruikbare tools zijn en ik houd me dan ook aanbevolen voor aanvullingen. Heb je nog een tip, laat dan even een reactie achter!