6 Essentiële Firefox-add-ons voor ontwerpers
Als een webdesigner (en technologisch onderlegde gebruiker van internet), is er geen excuus om Firefox niet als uw primaire webbrowser te gebruiken. Als u Firefox nog niet gebruikt, moet u gaan en downloaden het nu. Firefox biedt niet alleen een eersteklas surfervaring op internet, maar biedt ook een eindeloze hoeveelheid functionaliteit die u eenvoudigweg niet zult vinden in een andere internetbrowser.
Omdat derden invoegtoepassingen voor Firefox kunnen ontwikkelen door de beste beschikbare invoegtoepassingen te downloaden, kunt u Firefox transformeren in een hulpmiddel dat uw productiviteit drastisch verhoogt en u een ontelbare hoeveelheid tijd bespaart. Omdat er zoveel verschillende add-ons beschikbaar zijn om te downloaden, kan het een beetje overweldigend zijn om uit te zoeken welke je zou moeten gebruiken.
Daarom besloot ik om al het werk voor je te doen en een lijst samen te stellen van de zes beste Firefox-add-ons voor webontwerpers.
Webontwikkelaar
Hoewel het wordt genoemd Webontwikkelaar , deze Firefox-add-on is absoluut van onschatbare waarde voor webontwerpers. Als u slechts één Firefox-add-on zou downloaden en installeren, dan is dit degene die ik u zou aanraden. De reden is dat deze add-on verschillende nuttige functies biedt en kan worden geclassificeerd als het Zwitsers zakmes van Firefox-add-ons .
De eerste functie van deze add-on die ontwerpers nuttig zullen vinden, is het CSS-menu . Functies van dit menu omvatten de mogelijkheid om stijlen uit te schakelen, CSS op mediatype weer te geven, CSS te bekijken, stijlinformatie te bekijken, een aangepast gebruikersstijlblad toe te voegen of CSS rechtstreeks te bewerken .
Het volgende kenmerk van interesse voor ontwerpers is het beeldmenu . Naast dat u ALT-kenmerken, afbeeldingsdimensies, afbeeldingsbestanden en afbeeldingspaden kunt weergeven, kunt u afbeeldingen uitschakelen, gebroken afbeeldingen vinden, afbeeldingen omkaderen, afbeeldingen vervangen door ALT-kenmerken en verschillende extra functies.
Hoewel ik verschillende pagina's zou kunnen wijden aan alle functies die deze add-on biedt, wil ik alleen nog een paar andere functies bespreken die webontwerpers bijzonder handig zullen vinden. Deze omvatten de mogelijkheid om verschillende elementen (variërend van frames tot blokniveau-elementen) te schetsen , HTML te bewerken en verborgen elementen te tonen .
Firebug
Hoewel Web Developer de eerste add-on is die ik aan elke ontwerper zou aanraden, Firebug komt op de tweede plaats qua bruikbaarheid voor ontwerpers.
Met Firebug krijgt u direct de mogelijkheid om een webpagina te bewerken, te debuggen of te controleren . Met Firebug heeft u volledige controle over de CSS, HTML en JavaScript van elke pagina die u kiest. Het beste van alles is dat elke wijziging die u aanbrengt live en direct wordt uitgevoerd , zodat u snel verschillende wijzigingen kunt uitproberen en de resultaten van die wijzigingen direct kunt zien.
Zoals de meeste van de beste add-ons voor Firefox, gaat Firebug verder dan de basisfunctionaliteit en biedt het een schat aan opties die het voor elke gebruiker gemakkelijk maken om hun gebruik van deze add-on volledig aan te passen. Een aantal van de extra functies en opties die Firebug biedt, zijn snelkoppelingen naar sneltoetsen, de mogelijkheid om te bepalen hoe en waar het bewerkingsgebied van Firebug wordt weergegeven, visuele handleidingen voor het bewerken van CSS, analyse van netwerkactiviteit en aanpasbare logboeken voor JavaScript .
ColorZilla
Als webontwerper weet je nooit wanneer inspiratie je zal treffen terwijl je surft op internet. U kijkt bijvoorbeeld naar een website en vindt een kleur die u echt leuk vindt.
Als u een snelle en efficiënte manier wilt om de exacte HSV- en RGB-waarde voor die tool te weten te komen, moet u de ColorZilla toevoegen.
De ColorZilla-add-on is voorzien van een online pipet , waardoor het vrij eenvoudig is om de exacte waarde van een specifieke kleur te krijgen. Naast de online eyedropper biedt ColorZilla verschillende extra functies die de meeste webontwerpers nuttig zullen vinden, zoals een DOM- kleuranalysator en een online paletviewer. Met de DOM-kleuranalysator kunt u elementen op de pagina zoeken die overeenkomen met een bepaalde kleur en de CSS-regels vinden die een bepaalde kleur bevatten, terwijl u in de online paletviewer kunt bladwijzers maken en kleurenpaletten delen die u mooi vindt.
FireShot
Hoewel uw besturingssysteem ongetwijfeld een ingebouwde functie voor schermvastlegging heeft, betekent dit niet dat de standaardschermopname alle functies heeft die u mogelijk nodig hebt.
Kan de standaard schermopname van uw besturingssysteem bijvoorbeeld delen van een webpagina vastleggen die zich buiten het browservenster bevinden?
In de meeste gevallen zal het antwoord op die vraag nee zijn. Gelukkig is er een Firefox-add-on die deze functie biedt, samen met een aantal andere handige functies.
FireShot is een geavanceerde add-on voor het maken van screenshots voor Firefox . Naast dat je de mogelijkheid hebt om een hele webpagina vast te leggen (zelfs als er delen van de webpagina zijn die niet zichtbaar zijn als gevolg van de beperkingen van je browservenster), kun je met FireShot ook rechtstreeks annotaties toevoegen aan je schermopnamen.
FireShot geeft je verschillende opties voor het verwerken van je schermopnamen. Ze kunnen niet alleen in verschillende bestandsindelingen worden opgeslagen, maar kunnen ook op uw computer worden opgeslagen, naar andere worden gemaild of op de gratis FireShot-hostingserver worden opgeslagen. Als gevolg van het brede scala aan functies heeft deze add-on meer dan honderdvijftigduizend actieve gebruikers aangetrokken en heeft deze bewezen van onschatbare waarde te zijn voor webontwerpers en andere internetprofessionals.
CSS Validator / HTML Validator
Als ontwerper wilt u ervoor zorgen dat al uw harde werken eenvoudig toegankelijk zijn voor bezoekers en dat ze correct worden weergegeven. Een van de gemakkelijkste manieren om ervoor te zorgen dat beide taken worden voltooid, is door al uw code te valideren .
Hoewel het twee afzonderlijke add-ons zijn, moeten zowel de CSS Validator als HTML Validator worden geïnstalleerd in de browser van elke webontwerper. Zodra de add-ons zijn geïnstalleerd, is de CSS Validator is toegankelijk via het menu Tools, terwijl de HTML Validator kan worden geopend via de statusbalk van Firefox.
Elk van de invoegtoepassingen valideert de code tegen de toepasselijke W3C-normen . Hoewel de CSS Validator eenvoudig een standaardvalidatie van de code uitvoert, biedt de HTML Validator wat extra functionaliteit.
Wanneer u de HTML Validator gebruikt, kunt u ervoor kiezen om rechtstreeks in de browser te valideren (waarbij eventuele fouten worden weergegeven als een statusbalkpictogram), de bron te tonen met uitleg over fouten na de validatie of een validatie met voorgestelde oplossingen voor eventuele fouten.
Browser venster Resizer
Als iemand die ontwerpen voor internet maakt, is een van de meest frustrerende problemen die je ongetwijfeld tegenkomt, het proberen ontwerpen te maken die op verschillende schermformaten werken.
Omdat u niet weet of een bezoeker uw werk bij 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 of 1600 × 1200 zal bekijken, is het uw verantwoordelijkheid om ontwerpen te maken die werken op al deze resoluties .
Hoewel er verschillende manieren zijn om uw werk met verschillende resoluties te bekijken, heb ik ontdekt dat de browser Window Resizer add-on is de meest efficiënte manier om deze taak te volbrengen. Nadat u deze add-on hebt gedownload en geïnstalleerd, kunt u uw browservenster onmiddellijk opnieuw instellen op een van de hierboven genoemde standaardresolutiematen.
Hiermee kunt u zien of uw ontwerp er goed uit zal zien voor bezoekers die niet dezelfde resolutie gebruiken als u. Het beste van deze add-on is dat als je het gebruikt in combinatie met de andere add-ons in deze lijst (met name Firebug), als je ziet dat iets niet correct wordt weergegeven, je direct je code kunt aanpassen en kijk of dat het probleem oplost, alles zonder ooit je huidige browservenster te verlaten.
Kent u andere goede uitbreidingen voor ontwerpers? Reageer gerust en geef ons feedback.