Viva! Eu estava criando a identidade visual do meu novo site e aproveitei pra dar uma desenferrujada no HTML e CSS. Eu Optei por usar o WordPress e trabalhar com HTML5 e CSS3 para fazer uma interface responsiva. Conforme fui pesquisando outros sites para ajudar a desenvolver ideias de design, me deparei com uma série de ferramentas online que resolvi compilar num grupo de sete ferramentas que considerei bem úteis. Aqui estão elas no meu primeiro top sete “qualquer coisa”. 😛

1. HTML5Test (teste o suporte do seu navegador)

   Você sabe se seu navegador está pronto para todos os recursos do HTML5? Com o HTML5 Test é possível testar o suporte do seu navegador para o HTML5 e te dá uma nota junto com um relatório. O navegador que eu uso é o Chrome versão 44.0.2 para o Windows 8.1 e ele recebeu 521 pontos. Você já sabe qual é a nota do seu?

2. Liveweave (edite códigos HTML5, CSS3 e JavaScript)

   O Liveweave é um editor de códigos HTML5, CSS3 e JavaScript com uma interface bem simples. Conforme você vai alterando o código, na interface é apresentado como a página está ficando. Você ainda pode trabalhar de forma colaborativa com outros desenvolvedores e salvar seus projetos.

3. Initializr (crie um site HTML5 a partir de um modelo)

   Você quer criar um site do zero em HTML5? O Initializr permite gerar um modelo em HTML5 baseado no Boilerplate. Em alguns segundos, você gera um conjunto de arquivos HTML, CSS e JavaScript iniciando com pé direito seu projeto HTML5.

4. CSS3Gen (gere código CSS3 de diferentes tipos de efeitos)

   O CSS3Gen é uma ferramenta bem simples para gerar código CSS3 de diferentes tipos de efeitos. Você consegue fazer, de forma rápida e fácil: efeitos de botões, cantos arredondados, sombras, gradientes, opacidade, efeitos 3D, dentre outros. Eu gostei muito!

5. CSS3Generator (gere código CSS3 ao seu gosto)

   O CSS3 Generator é uma ferramenta simples e poderosa que permite gerar códigos CSS3 de acordo com escolhas que você faz no site. Conforme o preenchimento dos valores das propriedades CSS, a interface apresenta uma visualização de como está ficando o formato do elemento. Ela ainda mostra quais as versões dos principais navegadores têm suporte para o efeito CSS3 que você escolheu.

6. Onlymega Banner Maker (faça animações com HTML5 e JavaScript)

   Uma ótima ferramenta de animação HTML5. É possível fazer sliders e banners responsivos com animações de textos e de imagens próprias ou a partir de uma biblioteca online. Se você não quiser criar animações a partir do zero, é possível usar modelos prontos.

7. GSAP (faça animações robustas com HTML5 e JavaScript)

   Um conjunto de ferramentas robusto para fazer animações para web. É possível fazer animações complexas de forma eficiente, bem além das transições e transformações simples.

Como eu sou um cara bacana, vou transformar esse top 7 em top 10. Aqui vão mais três sites úteis que podem ajudar na criação de seus sites. Estas ferramentas não são específicas de CSS3 ou HTML5, mas são uma mão na roda. 🙂

1. Moqups (desenhe wireframes, mockups, protótipos e mais)

   O Moqups é um ferramenta para você criar wireframes, mockups, protótipos ou conceitos de interfaces com usuários. Ele funciona a partir de stencils que você pode alterar ao seu gosto.

2. CleanCSS (organize melhor seus códigos)

   O Clean CSS é uma ótima ferramenta que organiza seu CSS, HTML, JavaScript, PHP, JSON e vários outros tipos de formatos. Com esta ferramenta você pode deixar o código mais limpo facilitando a sua manutenção posteriormente. No site ainda tem vários outros recursos bem interessantes e úteis.

3. CSSLint (teste seu código CSS)

   O CSS Lint é um ferramenta que permite encontrar diversos tipos de erros e avisos importantes no seu código CSS. Ele ainda permite que você escolha quais os tipos de erros e avisos que você deseja testar.

Se você conhece outras ferramentas úteis, por favor deixe nos comentários.

Ah! Já ia me esquecendo. Caso você seja muito curioso e tenha se perguntado por quê eu escolhi o número sete para esta postagem, aguarde que eu explicarei em breve.

Inté!