Tableless - Desenvolvimento inteligente com Padrões Web

23/01/2006
Browsers

MeasureIt

Já se deparou com algo parecido: Ei, ali está dando uma diferença de 1px… Fica um degrauzinho, tá vendo?! Era para ter 300 e tem 299Px! Aí, taca o Designer fazer um screenshot da tela, levar pro Photoshop e medir. …

Por

Já se deparou com algo parecido: Ei, ali está dando uma diferença de 1px… Fica um degrauzinho, tá vendo?! Era para ter 300 e tem 299Px!

Aí, taca o Designer fazer um screenshot da tela, levar pro Photoshop e medir. Pois é… O problema foi resolvido.
Com a extensão MeasureIt você medir qualquer objeto direto na tela do browser.
Clique no ícone de uma reguinha que aparece no lado inferior esquerdo, clique na tela e arraste. Pronto, ele forma uma régua para você, mostrando a largura e altura em pixels! Ótimo para resolver momento como os descritos acima ou outros mais…

MeasureIt de Kevin Freitas.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://cirofeitosa.com.br/ Ciro Feitosa

    Boa dica. Uso o MeasureIt a bastante tempo, e realmente, facilita nas medições em tela. ;)

  • João David

    a nova verão da extensão WebDeveloper ja possui uma regua bem interessante

    http://chrispederick.com/work/webdeveloper/

    até

  • Paulo Schilling

    Photoshop? Por que o pessoal tem essa mania de generalizar e dizer que todo mundo usa Photoshop?! Acho que seria muito mais correto colocar, ao invés de “Photoshop”, a frase “algum programa gráfico”.

    Eu não o uso, mas sim o Fireworks e muita gente também.

    Quanto ao MeasureIt, já tenho ele instalado desde as suas primeiras builds e raramente tive a necessidade de usá-lo. Mas que é útil isso é.

    []‘s

    :-h:-h

  • http://phpnuke.org.br luiz gustavo aleagi nunes

    Nossa, há quanto tempo eu procurava por isso!

    Valeu pela dica (como sempre, excelentes!)

    Abraços,

  • http://www.baseweb.com.br Ricardo Santos

    Sugestão1: para quem precisar de uma ferramenta como esta em qualquer aplicativo e não só no Firefox, aconselho a Cool Ruler. Já utilizo há um bom tempo e ajuda bastante. Obs: a medida default não é em pixels, portanto não esqueça de configurar.

    Link: http://www.fabsoft.com/products/ruler/ruler.html (freeware)

    Sugestão2: quem quiser pegar a cor de um pixel qualquer na tela, como a ferramenta “Eyedropper” (conta-gotas) do PhotoShop, aconselho o ColorCop.

    Além de mostrar qual a cor de cada pixel, também é possível visualizar uma área com zoom, o que ajuda bastante no desenvolvimento de sites.

    Link:
    http://www.datastic.com/tools/colorcop/ (freeware)

  • Nelson

    A extensão webdeveloper tambem tem uma regua, igual essa.

  • http://www.joaovagner João Vagner

    Em vez de usar extesions exteriores que deixam o navegador pesado, aumente o ZOOM como opera, o navegador dos deuses!

  • Vinicius

    Eh…!! eu uso ele sim!!! mto bom!!

  • http://www.cosmeweb.com.br/blog/ CosmeWeb

    Boa extensão, mas não sei se precisarei. :P

  • http://sqlexperts.net Marcelo

    estou usando há exatos 2 meses.. muito boa a extensão.

    achei em um dos passeios no addons ;)

    acho que tem algumas indispensáveis:

    - measureit
    - colorzilla
    - web developer
    - delicious post

    se alguém quiser continuar postem as extensões que vocês utilizam no dia-a-dia

    –Marcelo

  • Felipe

    Outro que eu acho tambem indispensavel é o infoRSS que mostra RSS, ATOM, e Podcasts na barra de status do firefox !