6 Add-ons Essenciais do Firefox para Designers
Como webdesigner (e usuário tecnologicamente experiente da Internet), não há desculpa para você não estar usando o Firefox como seu navegador principal. Se você ainda não usa o Firefox, precisa ir e baixar agora mesmo. O Firefox não apenas fornece uma experiência de navegação na Internet topo de linha, mas também fornece uma quantidade infinita de funcionalidades que você simplesmente não encontrará em qualquer outro navegador da Internet.
Como terceiros podem desenvolver add-ons para o Firefox, baixando os melhores complementos disponíveis, você pode transformar o Firefox em uma ferramenta que aumenta drasticamente sua produtividade e economiza um tempo incontável. Uma vez que existem muitos add-ons diferentes disponíveis para download, pode ser um pouco avassalador para escolher quais você deve usar.
Por isso, decidi fazer todo o trabalho para você e compilar uma lista dos seis melhores add-ons do Firefox para web designers.
Desenvolvedor Web
Embora seja chamado Desenvolvedor Web , este add-on do Firefox é absolutamente inestimável para web designers. Se você fosse baixar e instalar apenas um complemento do Firefox, este é o que eu recomendaria a você. A razão é que esse complemento fornece uma variedade de diferentes recursos úteis e pode ser classificado como o complemento do canivete suíço do Firefox .
A primeira característica deste complemento que os designers acharão útil é o menu CSS . Os recursos desse menu incluem a capacidade de desativar estilos, exibir CSS por tipo de mídia, exibir CSS, exibir informações de estilo, adicionar uma folha de estilos de usuário personalizada ou editar diretamente CSS .
O próximo recurso de interesse para designers é o menu Imagem . Além de permitir que você exiba atributos ALT, dimensões de imagem, tamanhos de arquivo de imagem e caminhos de imagem, você pode desabilitar imagens, encontrar imagens quebradas, imagens de contorno, substituir imagens por atributos ALT e várias funções adicionais.
Embora eu possa dedicar várias páginas a todos os recursos que esse complemento oferece, apenas quero abordar algumas outras funções que os web designers acharão especialmente úteis. Estes incluem a capacidade de delinear elementos diferentes (variando de quadros a elementos de nível de bloco), editar HTML e mostrar elementos ocultos .
Firebug
Embora o Web Developer seja o primeiro add-on, eu recomendaria a qualquer designer, Firebug corre um segundo próximo em termos de utilidade para os designers.
Com o Firebug, você recebe instantaneamente a capacidade de editar, depurar ou monitorar qualquer página da web . O Firebug oferece controle total sobre o CSS, HTML e JavaScript de qualquer página que você escolher. O melhor de tudo, cada mudança que você faz é feita ao vivo e instantaneamente , para que você possa testar rapidamente diferentes alterações e ver os resultados dessas mudanças instantaneamente.
Como a maioria dos melhores add-ons para o Firefox, o Firebug vai além de sua funcionalidade básica e fornece uma variedade de opções que facilitam para qualquer usuário personalizar completamente o uso desse complemento. Alguns dos recursos e opções adicionais oferecidos pelo Firebug incluem atalhos de pressionamento de tecla, a capacidade de controlar como e onde a área de edição do Firebug aparece, guias visuais para edição de CSS, análise de atividade de rede e registro personalizável para JavaScript .
Colorzilla
Como web designer, você nunca sabe quando a inspiração vai atingir você enquanto navega pela Internet. Por exemplo, você pode estar vendo um site e se deparar com uma cor de que realmente goste.
Se você quiser uma maneira rápida e eficiente de descobrir o valor exato de HSV e RGB para essa ferramenta, instale o ColorZilla adicionar.
O complemento ColorZilla possui um conta-gotas on-line , o que torna bastante simples obter o valor exato de uma cor específica. Além do conta-gotas on-line, o ColorZilla oferece vários recursos adicionais que a maioria dos web designers achará úteis, como um analisador de cores DOM e um visualizador de paleta on-line . O analisador de cores DOM permite localizar elementos na página que correspondem a uma determinada cor e descobrir as regras CSS que especificam uma determinada cor, enquanto o visualizador de paletas on-line permite que você marque e compartilhe paletas de cores de que você gosta.
Tiro de fogo
Embora o seu sistema operacional tenha, sem dúvida, uma função de captura de tela integrada, isso não significa que a captura de tela padrão tenha todos os recursos necessários.
Por exemplo, a captura de tela padrão de suas partes de captura de sistema operacional de uma página da Web que estão fora da janela do navegador?
Na maioria dos casos, a resposta a essa pergunta será não. Felizmente, há um add-on do Firefox que oferece esse recurso, juntamente com uma variedade de outras funções úteis.
O FireShot é um complemento avançado de captura de tela para o Firefox . Além de dar a você a capacidade de capturar uma página da Web inteira (mesmo quando há partes da página da Web que não são visíveis como resultado das restrições da janela do navegador), o FireShot também permite que você adicione anotações diretamente ao seu site. capturas de tela.
Tiro de fogo oferece várias opções para lidar com as capturas de tela. Não só eles podem ser salvos em uma variedade de formatos de arquivo, mas eles também podem ser salvos em seu computador, enviados por email para outros ou salvos no servidor de hospedagem FireShot livre. Como resultado de sua ampla gama de recursos, esse complemento atraiu mais de cento e cinquenta mil usuários ativos e provou ser inestimável para os web designers e outros profissionais da Internet.
Validador CSS / Validador HTML
Como designer, você quer ter certeza de que todo o seu trabalho árduo pode ser facilmente acessado pelos visitantes e exibido a eles corretamente. Uma das maneiras mais fáceis de garantir que essas duas tarefas sejam cumpridas é validando todo o seu código .
Embora sejam dois complementos separados, o CSS Validator e o HTML Validator devem ser instalados no navegador de qualquer web designer. Depois que os complementos forem instalados, Validador CSS pode ser acessado a partir do menu Ferramentas, enquanto o HTML Validator pode ser acessado na barra de status do Firefox.
Cada um dos complementos valida o código em relação aos padrões apropriados do W3C . Enquanto o CSS Validator simplesmente faz uma validação padrão do código, o HTML Validator fornece alguma funcionalidade adicional.
Ao usar o HTML Validator, você pode optar por validar diretamente no navegador (onde quaisquer erros são mostrados como um ícone da barra de status), mostrar a origem com explicações de erros após a validação ou uma validação com soluções propostas para quaisquer erros.
Resizer da janela do navegador
Como alguém que cria projetos para a Internet, um dos problemas mais frustrantes que você sem dúvida encontra é tentar criar designs que funcionem em vários tamanhos de tela.
Como você não sabe se um visitante visualizará seu trabalho em 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 ou 1600 × 1200, é sua responsabilidade criar designs que funcionem em todas essas resoluções. .
Embora haja várias maneiras de visualizar seu trabalho em diferentes resoluções, descobri que o Navegador Complemento do Window Resizer é a maneira mais eficiente de realizar essa tarefa. Depois de baixar e instalar esse complemento, você poderá redimensionar instantaneamente a janela do seu navegador para qualquer um dos tamanhos de resolução padrão listados acima.
Isso permitirá que você veja se o seu design ficará bem para os visitantes que não estão usando a mesma resolução que você. A melhor coisa sobre este complemento é que, se você estiver usando em conjunto com outros complementos nesta lista (especificamente Firebug), quando você ver que algo não está sendo exibido corretamente, você pode fazer ajustes instantaneamente em seu código. e veja se isso resolve o problema, tudo sem sair da janela atual do navegador.
Conhece outras boas extensões para designers? Sinta-se à vontade para comentar e nos deixar comentários.