Posts Tagged ‘measurelt’

27/04 2011

Top 9 extensii Firefox pentru web designeriScris de admin

Exista o multitudine de add-on-uri (extensii) la dispozitia unui web designer care pot extinde functionalitatea browserelor. Tipurile de add-on-uri pe care le puteti gasi sunt de o utilitate larga, de la unelte de productivitate care monitorizeaza timpul pe care il petreceti online pana la unelte de social media care va ofera modalitati in browser foarte convenabile pentru a utiliza serviciile populare ale Facebook sau Twitter.

Browserul Firefox este o alegere populara in randul designerilor web si sunt o multitudine de add-on-uri care pot face munca de zi cu zi a unui web designer mai usoara. Va prezint aici o lista de 10 add-on-uri recomandate pentru designerii web. Spuneti-ne ce alte add-on-uri folositi in sectiunea de comentarii.

1. Web Developer

Extensia Firefox Web Developer contine un pachet urias de unelte de web design cu multiple functionalitati care ii ajuta pe web designeri sa isi faca treaba mai eficient. Se afiseaza ca un toolbar in partea de sus a browserului, oferind variate meniuri precum CSS, Resize si Cookies. Fie ca ai nevoie sa inspectezi CSS-ul unei pagini, sa afli informatii despre o pagina web ( alt tag-urile imaginilor, de exemplu), sa validezi rapid un design pentru standardele W3C sau sa masori elemente din design, Web Developer va avea o unealta convenabila pentru tine, care te va ajuta sa faci toate aceste lucruri.

2. Firebug

Firebug este o extensie atat de populara pentru web/dezvoltare web front-end incat exista extensii pentru ea ( vezi nr 5). Daca ar fi sa intrebi un web designer sau programator fara ce extensie de Firefox nu ar putea trai, sansele sunt ca raspunsul va fi Firebug.

Firebug este o extensie  open source care ofera web designerilor unelte puternice pentru inspectarea si debugging-ul unui design web. Te poate ajuta sa-ti dai seama ce stiluri CSS afecteaza anumite elemente (in cazul in care ai dificultati cu o regula de stil care se comporta inadecvat), sa inspectezi modelul obiectului document (DOM) ca te familiarizezi cu structura paginii web, sa determini atribute precum culoarea, latimea, inaltimea elementelor HTML si multe alte functionalitati.

3. Measurelt

Aceasta extensie Firefox are un singur scop: iti da o rigla (linie) pe care o poti folosi in orice pagina web pentru a masura elemente. Web design-ul se bazeaza pe adecvarea dimensiunilor elementelor dintr-un site, aceasta extensie este o unealta valoroasa pentru colectia de add-on-uri a unui web designer.

4. ColorZilla

Lucrul cu care web designerii lucreaza cel mai frecvent este culoarea. Aceasta extensie include un color picker (asemanator cu cel din PhotoShop) si o unealta eye dropper ca sa poti identifica cu usurinta culorile folosite pe orice pagina web. O extensie similara de Firefox care merita sa fie vazuta este si Rainbow Color Tools.

5. CSS Usage

CSS Usage este o extensie pentru Firebug ( deci trebuie sa ai instalat Firebug )care iti arata reguli CSS neutilizate. Functioneaza in felul urmator: identifica stilurile CSS pe care le utilizezi si cele pe care nu le utilizezi, aratandu-ti ce elemente sunt de prisos si pot fi sterse, pentru a mentine codul CSS curat si de dimensiuni mici.

6. HTML Validator

Aceasta extensie misto si micuta te ajuta sa te asiguri ca scrii cod HTML bine formatat. Verifica daca markup-ul tau este in conformitate cu standardele si daca gaseste ceva ce nu este suficient de bun extensia iti spune unde si de ce trebuie sa modifici ca sa ai un cod updatat.

7. IE Tab 2

Web designerii sunt intodeauna ingrijorati de compatibilitatea  cross-browser a design-urilor lor. . IE Tab 2 este o extensie Firefox care iti permite sa vezi orice pagina web in Internet Explorer fara a parasi Firefox. Tot ce trebuie sa faci este sa dai click dreapta pe o pagina si sa alegi  “View Page in IE Tab” in meniul contextual.

8. ScreenGrab

Sa realizeze capturi de ecran in browser este un task foarte comun pentru web designeri. ScreenGrab este o unealta simpla pentru a realiza capturi full-page sau partiale de ecran. Poti copia captura de ecran in clipboard sau o poti salva pe hard sub forma unui fisier imagine.

9. SEO Doctor

Optimizarea pentru motoarele de cautare ar trebui sa inceapa in faza de design, cand HTML-ul site-ului este inca maleabil si usor de schimbat/ modificat. SEO Doctor este o unealta convenabila pentru a verifica statusul SEo al oricarei pagini.

SEO Doctor iti da un scor intre 0 si 100% si accentueaza zone ale paginii web care inca mai pot fi optimizate pentru motoarele de cautare. O functionalitate marfa este aceea ca poti exporta datele pentru analize si rapoarte ulterioare.

Ce alte extensii folositi? Spuneti-ne in comentarii.