Planejamento
Na grande maioria dos projetos web, tudo se inicia pela Arquitetura de Informação (UX) e mesmo que talvez esta não seja a sua área, eventualmente organizar e entender um website por inteiro, também possa ser uma necessidade.
Sem considerar todos os argumentos aplicados às melhores metodologias, criar um sitemap* pode ser algo bastante útil então, a dica é, uma das ferramentas online que trabalha bem com esse tipo de documento é o Coggle.it que ainda está em sua versão beta, mas já pode ser usado e aplicado.
*Sitemap: organograma contendo todas as páginas que o site/portal irá conter. Este documento especifica as várias telas. Geralmente é produzido no início do projeto e refinada durante todas as etapas conforme as demandas posteriores. Referência: https://webinsider.com.br
Outra ferramenta para o planejamento de projetos, especial para brainstorms e referências (para os designers de plantão) é o Mural.ly, que além de funcional tem uma interface de fácil uso que te permite, literalmente, arrastar um website para o seu mural de ideias.
Design
Nos dias de inspiração, o design de uma interface simplesmente flui sem paradas e pausas em branco, mas em alguns dias as coisas ficam um pouco mais difíceis e até mesmo escolher as melhores cores, torna-se uma coisa bastante complexa. Pensando nisso a ColorScheme e a ColorSchemer.com são ótimas ferramentas de paletas de cores para seu website. Você insere o código hexadecimal da cor principal e a ferramenta te mostra as demais combinações. Vale a pena.
Além de pensar em interface, com as técnicas de Design Responsivo, é inevitável em algum momento pensar em grids (mesmo que você seja um daqueles contra o uso deles 😉 ). Para isso, existe o Grid Calculator e o Grid Pak onde você insere a medida de largura padrão de seu website e ele cria as medidas das colunas divididas igualmente. Você ainda pode fazer o download do grid em PSD e PNG.
Front-end
Essa talvez seja a etapa de um projeto melhor auxiliada neste quesito ferramentas. Graças ao perfil colaborativos dos Front-Ends do mundo, as possibilidades são quase infinitas (estamos chegando lá :D) e esta fase de transição HTML 4 -> HTML 5 e CSS 2 -> CSS3, proporciona ainda mais que novas ferramentas surjam.
Iniciando pelos auxiliadores de CSS3 :D. Sim! Eles são ótimos e poupam nossa memória em lembrar exatamente como as novas propriedades precisam ser declaradas para gerarem efeitos na interface.
A primeira dica fica para o Create CSS3, que é bastante completo e contém a maior parte das novas características mais usadas. A forma de usá-lo é bem simples: clica no item de seu interesse, configura com os dados necessários para você e voialá, um trecho de propriedades css pronto para ser implementado.
Ainda falando em css, que tal deixar o css feio, bonito? Isso mesmo! O Css Beautifier reorganiza a distribuição de linhas e tabs do seu arquivo css. Basicamente, ele deixa mais agradável a leitura.
Mas, se apenas deixar bonito não resolve e você também quer um css otimizado, no CSS Compressor, você copia, cola e sai um css minimizado e pronto para ser implementado. Aliás, você ainda pode determinar o nível das “facadas” que você dará nas linhas do seu arquivo. 😉
Na mesma linha, porém um pouco mais completo, tem o CSS Minifier que também minimiza, tem API de integração e o bônus de outras 3 ferramentas, Javascript Minifier, PNG Crush (para redução de arquivos png) e o JPG Optimiser (para otimização de arquivos JPEG).
Aproveitando o bônus da ferramenta anterior, outra ferramenta que pode auxiliar na questão de performance de imagens, é o Image Optim, um software de fácil instalação para Mac, que reduz o peso de arquivos de imagens. Caso você não utilize um Mac, sem problema, ele possui uma versão Windows e outra Linux. Vale a pena.
Que tal testar seus códigos antes de implementá-los em seu projeto?
Isso lhe garante a segurança de saber se vai dar tudo certo na execução daquele javascript ou na inserção daquela propriedade no css.
Para isso, lhes apresento o CodePen, um editor de código live que funciona de forma bem direta e de fácil manuseio. Tem muita gente testando por lá ;).
Para os front-ends ligados nas novidades, a ferramenta indicada é o HTML5Please que vai informando quais novas tags e propriedades de HTML5 e CSS3 já podem ser implementadas neste período de transição.
E para fechar, front-end para site responsivo.
Quando um projeto também será responsivo (prática cada vez mais comum e mais profissional) esta estratégia precisa ser planejada antes de sua execução para que ao invés de gerar problemas você consiga gerar códigos bem feitos e o efeito esperado. Para isso, uma das preocupações que aparecerão será com as imagens do seu projeto e como elas responderão aos diferentes dispositivos. Neste aspecto, o Adaptive Images te auxilia detectando a resolução do usuário e apresentando a imagem com a melhor resolução possível ao dispositivo.
Completando a linha responsivo, outra preocupação é questão dos textos e sua adaptação à diferentes tamanhos de telas e neste caso, entra em cena o FitText, um script que fará seu font-size realmente flexível.
Validação
Tudo pronto, tudo certinho, site publicado em ambiente de homologação ou até mesmo em ambiente final, que tal validar seu sites para ver se ele está de acordo com os padrões?
Para web standars tem o já conhecido (e as vezes temido) W3C Validator e outra opção não tão conhecida, mas funcional, o HTML Inspector.
Para os padrões de acessibilidade, você pode utilizar o A Checker que em alguns segundos diz quais padrões não estão sendo seguidos para que seu site seja acessível por navegadores textuais e de audio e ainda indica as melhores práticas para reverter os problemas.
Outra ferramenta importante para quem pensa em validações é a Webmaster Tools da Google, que permite verificar como o robô do buscador está se comportando em seu site, além de dizer quais páginas estão sendo indexadas. Além disso, te possibilita informar mudanças de URL ou até mesmo retorno de sites que foram invadidos. A ferramenta é robusta e de extrema valia. Confere lá!
E você, conhece outras ferramentas? Completa lá nos comentários. 😉
Até a próxima.
