5 ferramentas online úteis para desenvolvedores web

AGRADEÇA AO AUTOR COMPARTILHE!

Quem atua no desenvolvimento para plataforma web sabe a infinidade de coisas que devemos aprender e nos preocupar para a criação de trabalhos decentes. HTML, CSS, Javascript, imagens, performance, responsividade e etc e etc e etc. Isso, claro, tratando somente de frontend. Se fôssemos nos aprofundar em tecnologias server-side, teríamos mais uma pancada de coisas.

Desenvolver para web é show simplesmente por termos que lidar com este monte de coisas ao mesmo tempo o tempo todo. Há quem diga que é um saco e que é complicado. Eu prefiro dizer que se não existisse o IE, tudo seria perfeito! :)

Brincadeiras à parte, realmente desenvolver para web, principalmente no quesito frontend, é um pouco complexo. São variadas versões de navegadores, sistemas operacionais, resoluções de tela, navegabilidade, usabilidade, beleza, rapidez e etc.

Para quem atua no desafio diário de entregar projetos “Picas das Galáxias“, eu selecionei algumas ferramentas online que me ajudam bastante. Vamos à elas:

Ultimate CSS Gradient Generator (ColorZilla)

Esta ferramenta é perfeita pra quem precisa criar efeitos degradês para botões, barras, caixas e etc. O melhor de tudo é que você cria tudo visualmente, em formatos variados, e no final tem um código CSS prontinho compatível com todos os navegadores modernos (esqueça IE 6, 7 e 8). Você ainda tem a possibilidade de importar uma imagem com degradê para gerar o CSS desejado. Pensa num troço legal :)

Acesse e veja com seus próprios olhos! http://www.colorzilla.com/gradient-editor/

CSS Border Radius Generator

A evolução visual da web pode ser comparada à evolução dos carros. Antigamente os carros eram predominantemente quadrados. Com linhas retas, sem emoção e sem muitas frescuras, assim como a web. Agora, os veículos mais modernos recebem linhas curvas suaves, painéis cheios de opções, cores e etc, assim como a “nova web”. Pois bem, elaborei este blá blá blá todo apenas para dizer que elementos web não precisam mais ser predominantemente quadrados! Pra quem acha complicado ficar lembrando como criar bordas arredondadas no CSS, basta acessar http://border-radius.com/, preencher os valores de arredondamento das bordas e copiar o código gerado. Simples assim!

Font2Web

Sabe aquela fonte bonitona que o designer usou no projeto e que o cliente não abre mão? Se fosse pra usar somente as fontes padrões do sistema operacional, possivelmente você não conseguiria usá-la e arrumaria uma baita dor de cabeça. A dica é transformar a fonte usada no projeto em uma fonte web para ser incorporada via CSS, e para isso, o Font2Web (http://www.font2web.com/) quebra um galhão. Basta selecionar a fonte desejada e mandar converter. O sistema retorna um zip com vários tipos de fontes (TTF, EOT, OTF, SVG, WOFF) para que a compatibilidade com navegadores seja maior. Para saber como chamar a fonte no CSS, os prós e contras, cuidados com fontes pagas e outras informações, leia o artigo do Diego Eis no Tabless.

SpriteMe

Performance é essencial em projetos web. Nada mais chato que acessar um site ou aplicação e ficar aguardando um tempão para navegar. Uma das técnicas aplicadas para a melhoria de performance é chamada de CSS Sprites, onde imagens são colocadas todas num único arquivo a fim de reduzir a quantidade de requisições ao servidor. Este arquivo de imagens depois é mapeado via CSS para exibir cada imagem no seu devido lugar. Quem usa a técnica, sabe o quanto é chato e trabalhoso montar um arquivo sprite na mão, através de Photoshop ou similar. Eis, então, que surge a ferramenta SpriteMe para reduzir o trabalho quase a zero. A ferramenta pega todas as imagens do seu projeto, monta num único arquivo, permite baixar a imagem e ainda dá o CSS prontinho, até indicando onde você deve trocar as regras.

Para não ser repetitivo, leia o artigo completo do Maujor sobre CSS Sprites e o uso da ferramenta SpriteMe. É ou não é uma “mão na roda”? :)

Color Picker

Essa não tem muito o que explicar. Precisou pegar uma cor qualquer e não tem um plugin no browser ou um editor qualquer em mãos? Acesse http://www.colorpicker.com/ e navegue numa infinidade de cores.

ConvertCase

Recebeu um texto todo em “caixa alta”? Não perca tempo redigitando! Acesse http://www.convertcase.net/, cole o texto e escolha o tipo de case. Você pode colocar tudo em minúsculo, somente a primeira letra de cada palavra em maiúsculo e outras opções.

Estas são apenas algumas ferramentas úteis para desenvolvedores web. Se você usa alguma ferramenta legal e que te ajuda de alguma forma, deixe seu comentário para criarmos outra versão deste artigo.

AGRADEÇA AO AUTOR COMPARTILHE!

4 Comentários

Abraão Alves
1

Algumas Dicas:

http://www.nattyware.com/pixie.php:
Plugin para captar cores de qualquer lugar do sistema operacional, afinal quem trabalha sabe que não podemos depender só de ferramentas web. Além de capturar qualquer cor em qualquer canto, ele fornece zoom infinito de qualquer pixel de qualquer lugar, além de fornecer atalhos para copiar o código hexadecimal correspondente.

Com relação ao ConvertCase, tem coisa em CCS que resolve esse problema facinfacin:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
‘text-trasform’ é uma propriedade do CSS que pode transformar o texto para: capitalise, uppercase ou lowercase.
Puro código !

http://jsbeautifier.org/ e http://cssbeautify.com/:
Para que lida com códigos minificados. Os ninjas entenderam sua utilidade.

E para finalizar: http://jsbin.com/ ou http://jsfiddle.net/
São ótimos para pedir ajuda online em fóruns ou mesmo em um chat com o amigo.
ex: “Cara fiz um CSS/javascript aqui que não está funcionando, ajuda ai: jsbind.com/[link]”
O legal desses caras é que eles versionam os códigos por usuário, dai você pode comparar as soluções de maneira muito mais simples através da versão.
E lembre, mandar zip por email para a forum/comunidade ajudar é pedir para levar chulipa!

Ah, só mais um bônus para a galera que gosta de produtividade: http://tin.cr/ . Depois dele você nunca mais irá fazer um site sem livereload.

Inté+ galera.

Jackson CasetJackson Caset Autor do Post
2

Olá Abraão,

Sobre o ConvertCase, a ideia é usar onde não é possível aplicar uma regra única de CSS. Mas concordo contigo que com CSS é fácil estilizar.

Sobre as outras dicas, são ótimas. Vou deixar tudo anotado e criar outra versão do artigo! ;-)

Abraço

Caio Alves
3

E caso esteja disposto a pagar por uma ferramenta extremamente boa, aconselho o dreamweaver, com ele é possível gerenciar seu site de maneira facilitada, além de criar conexões com banco de dados e também de criar templates para o site, o que facilitou em mais de 20% no processo de desenvolvimento do meu projeto. Então fica ae a dica!

Deixe seu comentário

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

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">