Eae! Tudo bele?
No dia a dia, ao desenvolvermos qualquer tipo de projeto, efetuamos uma série de tarefas que podem ser otimizadas, né Galucho?
Nós podemos melhorar nossa produtividade economizando tempo em certas tarefas através de ferramentas existentes, pagas ou free.
Então, nesse artigo eu listarei apenas algumas das milhares de ferramentas disponíveis na web. 🙂
Basicamente as ferramentas que listarei aqui são para profissionais que “coda” a parte da visual do site (FrontEnd e Web Designer), mas essas ferramentas também podem auxiliar alguns Designers e Desenvolvedores.
E também para utilização de algumas das ferramentas a seguir é importante ter um conhecimento sobre HTML, CSS, JavaScript, etc .
Para acessar os links basta clicar nos títulos ou nas imagens. Vamos conferir?
Foundation
Foundation é um framework front-end. Nada mais é que um conjunto de arquivos/ferramentas criadas para facilitar o desenvolvimento FrontEnd de interfaces e sistemas web.
Construído com o pré-processador CSS Sass (que veremos mais adiante), HTML5 e JavaScript. Ele agiliza o processo de desenvolvimento, deixando-o muito mais rápido e fácil a criação de interfaces web.
Outras opções similares:
Uikit (usa Less)
LESS
O LESS é pré-processador de CSS. Ele é chamado de pré-processador porque ele utiliza uma linguagem diferente baseada em CSS, porém um pouco diferente com mais opções, mas no final gera um CSS compilado para o Browser ler.
Você cria e escreve em um arquivo com extensão “.less " , mas no final vai usar um compilado com extensão “.css “. Para compilar utilizá-lo você usará um comando JavaScript ou algum programa auxiliar (veremos mais abaixo).
Na prática com o LESS podemos inserir variáveis, mixins, cálculos matemáticos, entre outras coisas, dentro do CSS (não literalmente, claro). Se você começar a usar, dificilmente vai parar.
Outras opções similares:
Koala
Cada pré-processador utiliza uma forma para compilar os arquivos gerando o CSS, basta ler a documentação. Mas também existem programas que podem ajudar nessa função. Como o Koala que compila os arquivos de alguns pré-processadores.
Outras opções:
CSS BEAUTIFIER
Transforma um arquivo CSS minificado em um limpo e organizado.
Outras opções:
CSS Minifier
Esse faço o contrário do anterior. Ele compacta um arquivo CSS.
Outras opções:
Primer
É só copiar e colar o html dentro do Prime que ele identifica todas as IDs e CLASSs do HTML, gerando um CSS.
FitText.js é um plug-in jQuery que força os seus títulos serem responsivos, ou seja, ele se adaptará a qualquer resolução.
Aplicativo Web que permite a edição de imagens online. Pode ser útil se o seu photoshop travar :P.
Outras opções:
JSlint
Cole seu código e veja se está dentro dos padrões. É praticamente um validador de JavaScript.
The Toolbox
Uma coleção de componentes. Existem componentes de tudo que é tipos, pagos e gratuitos.
Codepen
Uma biblioteca de componentes e com código disponível para você ver na hora como se faz. Com isso você pode criar, editar livremente. Muito útil para o aprendizado.
CSS3 Click Chart
Um gerador de CSS3. Crie box sizing, text shadow, border radius, etc, em poucos segundos. Existem vários na internet iguais a esse.
Outras opções:
W3C Validaton
O serviço de validação do consórcio que regem e zelam pelo padrões web: o W3C.
Valide seus arquivos HTML e CSS e verifique se você utilizou os padrões web, senão esqueceu de fechar alguma coisa, etc.
Outras opções: Existem, mas a do W3C é a melhor.
Ferramenta de teste de dados estruturados
Serviço do Google para testar os dados estruturados do seu site.Verifique os Microdados e Microformatos dos seu site.
XML Sitemaps
Um gerador online de sitemaps para o seu site.
CSS Modal
O nome já diz tudo: ele cria para você um modal com CSS.
Font Dragr
Arraste suas fontes e veja como ela ficaria no navegador.
JPEGmini
Compressores online de imagens.
Imagens png: http://pnggauntlet.com/
DaSilva
Avaliadores de Acessibilidade. Veja como está a acessibilidade do seu site.
Outras opções:
http://achecker.ca/checker/index.php
Breaking the Mobile Web
Emuladores para testes de sites em ambientes móveis.
View Like Us
Teste a sua interface em várias resoluções.
Outras opções:
PageSpeed Insights
Análise a velocidade e performance do seu site.
Conclusão
Existe muito conteúdo bom disponível na web para auxiliar no seu cotidiano. Existem muito mais ferramentas espalhadas por aí, milhares, de todos os gostos e tipos e essas só foram algumas…
Com certeza mais para frente irei compartilhar outras ferramentas com você. Porque no dia a dia é muito mais prático fazer só a roda girar ao invés de criá-la novamente.
E você também pode ver outro artigo que fiz sobre softwares e ferramentas de web designer clicando aqui.
E você usa alguma dessas ferramentas? Conhece outras? Você pode deixar o seu comentário e a sua opinião abaixo, não é? 🙂
Forte Abraço!
Até mais!
