7 Ferramentas úteis para auxiliar o desenvolvimento web

Irei hoje passar algumas dicas e ferramentas para quem trabalha com desenvolvimento web front end. São sete ferramentas bastante úteis que selecionei para facilitar você na hora de desenvolver seu site. Com certeza irão lhe ajudar e diminuir seu tempo de desenvolvimento de sites.

Ferramentas online para desenvolvedores

Ferramentas para ajudar e agilizar o desenvolvimento web.

Patterns para backgrounds

Ferramenta: Transparent Textures
Site: http://www.transparenttextures.com/

Esta é uma ferramenta muito útil na hora de escolher seus backgrounds. Ela cria automaticamente um pattern transparente com uma cor de fundo que desejar. É importante notar que o código CSS vem com a URL da ferramenta utilizando a imagem pattern. Então é importante que você baixe e deixe no seu servidor para não ficar dependente de outros sites para fazer seu layout funcionar.

Border Radius

Ferramenta: Border Radius
Site: http://border-radius.com/

Border Radius é um código CSS que utilizamos muito. O Nome já diz. Ele marca a borda dos elementos HTML. Ele gera rapidamente o código já cross-browser para você utilizar em seu layout. É possível escolher quantos pixels você utilizará para cada canto. Muito útil para agilizar seu desenvolvimento web.

Place IMG

Ferramenta: Place Img
Site: https://placeimg.com/

Na hora de desenvolver o site, muitas pessoas pensam somente no Loren Ipsum (gerador de código aleatório). Mas as imagens também são importantes. O legal desta ferramenta é que você escolhe qualquer tamanho. Sim, qualquer tamanho! Põe os pixels que deseja e pimba! Ele gera uma imagem do tamanho certinho que você precisa. Muito bom para você montar seu layout com imagens “reais”, sem simplesmente inserir aqueles blocos de cores, imagens achatadas ou seja lá o que você usava.

Bootstrap 3

Ferramenta: Bootstrap 3
Site: http://getbootstrap.com

O Bootstrap é um excelente framwework CSS para você iniciar seu site ou sistema web. Ele já vem todo pronto com grids, container e totalmente responsivo (adaptável para celulares e aparelhos móveis). Vale a pena investir um tempo estudando esta ferramenta por que irá agilizar e muito seu desenvolvimento. A curva de aprendizado é bastante curta. Você aprende rápido e o que não sabe, eles disponibilizam uma excelente documentação em seu site para lhe auxiliar durante o desenvolvimento. Ele também possui SASS e alguns javascripts para fazer seu site um pouco mais interativo logo de início (como um submenu por exemplo).

O Bootstrap é a ferramenta ideal para agilizar seu desenvolvimento web. Existem outros tipos de bootstrap como o twitter bootstrap e até mesmo o globo.com tem o seu. Mas o mais difundido e utilizado na web é o bootstrap 3. Eu prefiro trabalhar com ele pois o suporte acaba se tornando mais fácil por mais pessoas utilizarem este framework.

Degrade em CSS3 Pronto

Ferramenta: Gradient Editor
Site: http://www.colorzilla.com/gradient-editor/

Esta ferramenta é muito show! Se você não percebeu, este site é o site do plugin para firefox chamado ColorZilla. O plugin põe um marcador no navegador para você pegar qualquer a paleta de cor de qualquer coisa que estiver na tela e já te devolve em hexadecimal. Mas não é sobre isto que irei falar. O site deste plugin também disponibiliza uma ferramenta bastante interessante onde você pode gerar uma paleta de cores em degradê diretamente no CSS. Você tem inclusive alguns padrões prontos para escolher. Se quiser pode criar do zero ou utilizar o padrão e modificar ao seu gosto. A ferramenta de gradiente também te dá o código pronto para diversos navegadores (cross-browser). Muito útil!

Fontello

Ferramenta: Fontello
Site: http://www.Fontello.com/

O Fontello disponibiliza muitos ícones para você melhorar a aparência do seu front end sem pesar muito para o usuário final. Ele transforma os ícones em fontes e você não fará com que seu usuário tenha que abrir uma conexão para baixar a imagem do seu servidor (isso pode fazer com que seu site ante mais rápido. Lembre-se que nos navegadores atuais somente são abertos 8 conexões para baixar informações simultâneas, ou seja, se você tiver no seu front-end mais que 8 arquivos para baixar, entre javascripts, imagens e outros, o navegador criará uma fila. Quanto mais arquivo para baixar, mais lento ficará seu site).

Se você utiliza o bootstrap não precisa utilizar esta ferramenta pois o bootstrap também disponibiliza uma série de ícones iguais a este.

Brackets

Ferramenta: Brackets
Site: http://www.brackets.io/

Brackets é uma ferramenta para você desenvolver propriamente dito sua aplicação. O que ele tem de bom em relação a qualquer outro editor? Ele gera um servidor e atualiza automaticamente assim que você salva o arquivo que está trabalhando. Desta maneira você poderá ter várias telas e verificar em tempo real como está ficando seu front end. Exemplo: Uma televisão, um monitor, um tablet e um celular. Você acessa o seu projeto pelo servidor que o brackets criou e sempre que editar o arquivo ele irá atualizar em todos os dispositivos que estão acessando a tela. Muito bom não é mesmo?

EXTRA – Sprite Cow

Ferramenta: Sprite Cow
Site: http://www.spritecow.com/

Vou inserir uma ferramenta extra que também é muito boa para quem quer fazer sprites no CSS3. Você pode subir sua imagem, selecionar no site cada imagem que quer separar e ele já te devolve o CSS certinho, com todas as posições na imagem. Agiliza demais e você não mais perderá tempo procurando em pixels onde fica exatamente sua imagem. Recomendo você dar um zoom no navegador se quiser ser mais detalhista (acredito que 99% das pessoas que fazem isto, são detalhista). Dando um zoom você conseguirá pegar exatamente a parte da imagem que quiser dentro da sua imagem.

Espero que estas ferramentas lhe auxiliem a ganhar mais tempo e se tornar mais ágil na hora de desenvolver o front-end do seu projeto ou o projeto de algum cliente. Se você conhecer outras ferramentas úteis compartilhe conosco para ajudar outras pessoas também.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *