Profissionais TI - Pra quem respira informação

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.