6 Essential Firefox-tilføjelser til designere
Som webdesigner (og teknologisk kyndig bruger af internettet) er der ingen undskyldning for, at du ikke bruger Firefox som din primære web browser. Hvis du ikke bruger Firefox endnu, skal du gå og Hent det lige nu. Ikke alene giver Firefox en top af linjen internet browsing oplevelse, men det giver også en endeløs mængde af funktionalitet, som du simpelthen ikke vil finde i en anden internet browser.
Fordi tredjeparter kan udvikle tilføjelsesprogrammer til Firefox, ved at downloade de bedste tilføjelsesprogrammer, der er tilgængelige, kan du omdanne Firefox til et værktøj, der dramatisk øger din produktivitet og sparer dig i utallige mængder af tid. Da der er så mange forskellige tilføjelsesprogrammer til rådighed til download, kan det være lidt overvældende at vælge hvilke som du skal bruge.
Derfor besluttede jeg at gøre alt for dig og kompilere en liste over de seks bedste Firefox-tilføjelsesprogrammer til webdesignere.
Web-udvikler
Selv om det hedder Web-udvikler , denne Firefox-tilføjelse er absolut uvurderlig for webdesignere. Hvis du kun skulle downloade og installere en Firefox-tilføjelse, er dette det, jeg vil anbefale til dig. Årsagen er, at denne tilføjelse giver en række forskellige nyttige funktioner, og kan klassificeres som den schweiziske hærkniv af Firefox-tilføjelser .
Det første element i denne tilføjelse, som designerne finder nyttige er CSS-menuen . Funktionerne i denne menu omfatter evnen til at deaktivere stilarter, vise CSS efter medietype, se CSS, se stiloplysninger, tilføje et brugerdefineret brugerformatark eller redigere CSS direkte .
Det næste element af interesse for designere er billedmenuen . Udover at give dig mulighed for at vise ALT-attributter, billeddimensioner, billedfilstørrelser og billedbaner, kan du deaktivere billeder, finde ødelagte billeder, skitsere billeder, udskifte billeder med ALT-attributter og flere yderligere funktioner.
Selvom jeg kunne tildele flere sider til alle de funktioner, som denne tilføjelse tilbyder, vil jeg bare røre på nogle få andre funktioner, som webdesignere finder særligt nyttige. Disse omfatter evnen til at skitsere forskellige elementer (lige fra rammer til blokniveauelementer), redigere HTML og vise skjulte elementer .
Firebug
Mens Web Developer er den første tilføjelse, vil jeg anbefale til enhver designer, Firebug kører et nært sekund med hensyn til anvendelighed for designere.
Med Firebug får du øjeblikkeligt mulighed for at redigere, fejle eller overvåge enhver webside . Firebug giver dig fuld kontrol over CSS, HTML og JavaScript for enhver side, du vælger. Bedst af alt, er alle ændringer, du foretager, gjort direkte og øjeblikkeligt , så du kan hurtigt teste forskellige ændringer og se resultaterne af disse ændringer straks.
Som de fleste af de bedste tilføjelser til Firefox går Firebug ud over dets grundlæggende funktionalitet og giver et væld af muligheder, der gør det nemt for enhver bruger at tilpasse deres brug af denne tilføjelse helt. Nogle af de ekstra funktioner og muligheder, der tilbydes af Firebug, omfatter tastaturgenveje, evnen til at kontrollere, hvordan og hvor Firebug-redigeringsområdet vises, visuelle vejledninger til redigering af CSS, analyse af netværksaktivitet og tilpasset logning til JavaScript .
ColorZilla
Som webdesigner ved du aldrig, hvornår inspiration kommer til at strejke dig, mens du surfer rundt på internettet. For eksempel kan du se på et websted og komme på tværs af en farve, som du virkelig kan lide.
Hvis du vil have en hurtig og effektiv måde at kunne finde ud af den nøjagtige HSV- og RGB-værdi for det pågældende værktøj, skal du installere ColorZilla tilføjelse.
ColorZilla add-on har en online eyedropper , hvilket gør det ret nemt at få den nøjagtige værdi af en bestemt farve. Ud over online eyedropper tilbyder ColorZilla flere yderligere funktioner, som de fleste webdesignere vil finde nyttige som f.eks. En DOM-farveanalysator og online-palettenviser . DOM-farveanalysatoren giver dig mulighed for at finde elementer på siden, der svarer til en given farve, og finde ud af CSS-reglerne, der angiver en bestemt farve, mens online-palettviseren giver dig mulighed for at bogmærke og dele farvepaletter, du kan lide.
FireShot
Selvom dit operativsystem utvivlsomt har en indbygget skærmoptagelsesfunktion, betyder det ikke, at standardskærmen har alle de funktioner, du måtte have brug for.
For eksempel kan standardskærmopsamlingen af dit operativsystem få fat i dele af en webside, der er uden for browservinduet?
I de fleste tilfælde vil svaret på det spørgsmål være nej. Heldigvis er der en Firefox-tilføjelse, der tilbyder denne funktion, sammen med en række andre nyttige funktioner.
FireShot er et avanceret skærmbillede til Firefox . Ud over at give dig mulighed for at fange en hel webside (selv når der er dele af websiden, der ikke er synlige som følge af begrænsningerne i dit browservindue), giver FireShot dig også mulighed for at tilføje annoteringer direkte til din skærmfangster.
FireShot giver dig flere muligheder for håndtering af dine skærmbilleder. Ikke alene kan de gemmes i forskellige filformater, men de kan også gemmes på din computer, sendes til andre eller gemmes på den gratis FireShot hosting server. Som et resultat af sin bred vifte af funktioner har denne tilføjelse tiltrukket mere end et hundrede og halvtreds tusind aktive brugere og har vist sig at være uvurderlig for webdesignere og andre internetprofessorer.
CSS Validator / HTML Validator
Som designer ønsker du at sikre, at alt dit hårde arbejde nemt kan nås af besøgende og vises korrekt til dem. En af de nemmeste måder at sikre, at begge disse opgaver udføres, er ved at validere al din kode .
Selv om de er to separate tilføjelser, skal både CSS Validator og HTML Validator installeres i enhver webdesigners browser. Når add-ons er installeret, er CSS Validator kan fås fra menuen Værktøjer, mens HTML-validatoren er tilgængelig fra statuslinjen i Firefox.
Hver af tilføjelsesprogrammerne bekræfter koden mod de relevante W3C-standarder . Mens CSS Validator simpelthen gør en standard validering af koden, HTML Validator giver nogle ekstra funktionalitet.
Når du bruger HTML Validator, kan du vælge at validere direkte i browseren (hvor der vises fejl som et statuslinjeikon), vis kilden med forklaringer af fejl efter validering eller en validering med foreslåede løsninger til eventuelle fejl.
Browser Window Resizer
Som en person, der skaber designs til internettet, er et af de mest frustrerende problemer, som du utvivlsomt støder på, at forsøge at skabe design, der arbejder på tværs af forskellige skærmstørrelser.
Fordi du ikke ved, om en besøgende skal se dit arbejde på 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 eller 1600 × 1200, er det dit ansvar at oprette motiver, der fungerer ved alle disse beslutninger .
Mens der er flere forskellige måder at se dit arbejde på forskellige opløsninger, har jeg fundet ud af, at browseren Window Resizer add-on er den mest effektive måde at udføre denne opgave på. Når du har downloadet og installeret denne tilføjelse, kan du straks ændre størrelsen på dit browservindue til en af de standardopløsningsstørrelser, der er angivet ovenfor.
Dette giver dig mulighed for at se, om dit design skal se godt ud til besøgende, der ikke bruger den samme opløsning som dig. Det bedste ved denne tilføjelse er, at hvis du bruger det sammen med de andre add-ons i denne liste (specifikt Firebug), når du ser at noget ikke vises korrekt, kan du straks foretage justeringer af din kode og se om det løser problemet, alt sammen uden at forlade dit nuværende browservindue.
Kender du til andre gode udvidelser til designere? Du er velkommen til at kommentere og forlade os feedback.