
Geschreven op 07.05.2010 om 11:11 door Niels de Vries.
| Zoals jullie in mijn vorige blogs hebben kunnen lezen is vrije tijd erg belangrijk voor mij. Ik wil zoveel mogelijk kunnen doen in zo weinig mogelijk tijd. En Firefox heeft dat goed begrepen in de vorm van Add-ons. Dit zijn tools die je kunt gebruiken om websites uit te pluizen. Ik maak veel gebruik van enkele Add-ons, omdat ik daardoor snel informatie kan vinden die ik op dat moment nodig heb. Dit kan verschillen van een bepaald lettertype tot een kleur.
Tijdens het bouwen van de website vind ik de Add-ons ook een voordeel. Hierdoor kan ik bepaalde elementen snel positioneren, een fontgrootte veranderen of een kleur aanpassen. Hier bespaar ik zelf erg veel tijd mee. Ik heb mijn favorieten op een rijtje gezet. 1. Firebug Firebug was voor mij de eerste extensie die ik in Firefox gebruikte en nog steeds het meest gebruik. Aan de hand van Firebug kun je niet alleen de code achter een website bekijken, maar je kunt deze ook live aanpassen. Dat wil zeggen wanneer je iets veranderd in de code, je dat meteen te zien krijgt in de website. Het is ook handig als je bezig bent met je eigen website. Je kunt eenvoudig een element verplaatsen of een font-grootte aanpassen zonder dat je steeds opnieuw je bestand moet uploaden naar jouw website, om het vervolgens online te bekijken. Het mooie van Firebug is dat je van bestaande websites kunt kijken hoe deze zijn opgebouwd. Wanneer je op inspecteren klikt (4), en vervolgens met je cursor over de website beweegt, dan verschijnt er om elk element waar de cursor overheen komt een blauwe rand (1). Daarnaast zie je onderaan de pagina de HTML-structuur staan (2) en rechts daarvan de CSS van het element wat jij geselecteerd hebt (3).
Download Firebug 2. Validator Ik als webdesigner vind het belangrijk dat de website die ik maak ook HTML en CSS valid is. Dat wil zeggen dat er geen fouten in de code van de website zitten. Aan de hand van HTML Validator zie je in een oogopslag of een website valid of niet valid is. Ik neem als voorbeeld de website van Twitter. Hier zie je dat de Validator 134 fouten aangeeft en 2 waarschuwingen. Nu is dit op zich niet zo erg, want naar mijn mening zitten er veel onzin fouten tussen. Zo moet je bijvoorbeeld bij een afbeelding altijd een Alt=”naam” neerzetten. Maar ik vind het wel zo netjes om alle fouten er uit te halen. Dat heb ik bij mijn eigen website gedaan, zoals je ziet op de onderstaande afbeeldingen.
Download HTML Validator 3. PixelZoomer Met de PixelZoomer kun je op elke willekeurige website tot op de pixel inzoomen. Dit is bijvoorbeeld erg handig als je een specifieke kleur van een element of lettertype wilt weten. Want als je hebt ingezoomd, kun je de pixel selecteren (1) met de Eye Dropper (3) en verschijnt de hexadecimale kleurcode daarvan bovenaan in het menu (2). Download PixelZoomer 4. FontFinder Het is soms erg omslachtig om het hele CSS bestand van een bepaalde website te doorzoeken om het juiste lettertype te kunnen vinden. Daarvoor is de extensie FontFinder ideaal. Je selecteert een stuk tekst, waarvan jij het lettertype wilt weten. Vervolgens rechtermuisknop - FontFinder - Analyze Selection. Je krijgt dan naast het lettertype nog meer informatie zoals de grootte en de kleur. Download FontFinder 5. Rainbow De laatste van dit rijtje is Rainbow. Wanneer je op het Rainbow icoon (onderaan in Firefox, naast de anderen) klikt, verschijnt er naast je cursor een vierkantje. Die geeft de kleur aan waar jij met je cursor overheen gaat. Klik je vervolgens, dan komt de hexadecimale kleurcode er te staan, die je vervolgens snel kunt kopiëren en plakken. Download Rainbow Voor mij waren dit de belangrijkste en meest gebruikte Add-ons. Zelf maak ik er erg veel gebruik van en ik kan dat ook iedereen aanraden die met het ontwikkelen van een website bezig is. Het scheelt ten eerste heel veel tijd tijdens het programmeren en daarnaast kan je snel een kleur, vorm of lettertype opzoeken en gebruiken. Reacties Barbara Kuiper
07.05.10 om 11:31 Leuk leuk, inderdaad tijd is geld en waarom zou je ergens langer overdoen dan nodig is? En op deze manier heb je wat meer tijd voor je meisje haha! Liefs! Schrijf een reactie
* verplichte velden, emailadres wordt niet getoond. |