Webdesign Workflow: Parte 2 – As ferramentas

Antes de avançar para a parte prática, cortando e organizando o design, gostaria de falar um pouco sobre as ferramentas que eu uso no desenvolvimento.

Muitas vezes já me perguntaram o que eu uso para fazer sites, geralmente quem pergunta espera que eu responda: “Ah! Dreamweaver é claro!” e não fica muito satisfeito quando eu respondo: Bloco de Notas e Photoshop.

Numa rodinha de amigos da faculdade:
(Colega Minha) _Pootz… To pegando aula de Dreamweaver… é um saco, muito complexo ><
_XD Daniel, conta pra ela o que vc usa pra fazer sites!!! conta conta!
_… =x Bloco de Notas e Photoshop
_… QUEE???

É claro que é uma simplificação da resposta, mas basicamente, é isso. Um editor de texto leve e preciso e um software de edição de imagem. (Não que seja necessário, pode-se fazer belissimos designs sem nenhuma imagem… Mas… whatever xD)

Atualmente, no mac, tive que encontrar outros aplicativos para substituir os que eu utilizava antes. O que me surpreende é que todos os softwares que encontrei não somente fazem o que os anteriores faziam como torna tudo muito mais fácil.

textmateComo editor de texto, eu não vivo mais sem o TEXTMATE. Ele possui em si as funções básicas de programas da sua categoria (Sintax Highlighting; Histórico de Clipboard; Search and Replace; Código expansível e etc.), mas o que eu mais gostei no Textmate foi a habilidade dele de lidar com Snippets. Depois que conheci esse recurso a minha velocidade de desenvolvimento aumentou muito. Em uma explicação básica, eu digito o inicio do código que quero (ou uma palavra chave pré-configurada), aperto TAB e o programa auto-completa o código, deixando o ponteiro já onde preciso digitar a próxima informação (Por exemplo <di-aperto tab- vira <div class=’ponteiro-do-texto-aqui‘> ). O melhor é que além dos snippets que já vem com o programa, ele permite também que eu crie os meus próprios. O que é muito útil quando vou fazer menus ou coisas onde determinados pedaços de código se repetem.

csseditPara o CSS em especifico eu não uso o TextMate. Para o CSS faço uso de um outro programa, o CSSEdit. O CSSEdit é fantástico, tem muito mais funções do que eu vou descrever aqui. Ele possui um browser integrado, que ao ser usado para acessar websites online ou offline, e permite que editemos o CSS livremente, vendo os resultados das nossas edições em tempo real no browser. Fora Snippets, Debugging e etc. Ele possui também um Inspetor que realiza praticamente um Raio X no site, podemos passar o mouse vendo cada Div do site, podendo clicar para ver quais regras de CSS se aplicam sobre ela, desde as regras que repercutem no site todo, como as de body, até as regras com seletores mais restritivos. Vale também citar que o CSSEdit torna o processo de Debugging muito mais fácil, propiciando um CSS Valido com poucos cliques.

imagem6Vale também citar o Plugin FIREBUG do Firefox. Ele possui uma funcionalidade similar ao inspetor do CSSEdit. Infelizmente não exporta o CSS editado (Pelo menos não de forma satisfatória). Uso muito enquanto navego para testar algumas idéias e mudanças pequenas, além de estudar o CSS de outros sites (Ver como outros webdesigners fazem a divisão de suas imagens e etc.).

Acho que não preciso falar da produção de imagens… Photoshop, creio que ele dispensa apresentações.

yummyftpPor último, mas não menos importante, o cliente FTP. Meu cliente preferido é o YummyFTP. Ele possui um visual simples e elegante, combinando bem com o OSX. Uma das funções que eu mais uso é a capacidade de editar arquivos remotamente com o editor que eu desejar. Abro os arquivos no próprio servidor usando o TextMate, faço minhas edições no textmate, e com um simples [Cmd + S] (Salvar), o arquivo já está online no servidor. Ele possui também muitas outras funcionalidades interessantes, como por exemplo a sincronização de pastas (Manter o conteúdo de uma pasta local sincronizado com o de uma pasta remota, o que acaba com os problemas de sem querer editar um arquivo mais antigo pensando que é o mais recente…) e muitos outros.

É isso, a minha workflow passará basicamente por estes programas. Amanhã darei continuidade ao projeto e postarei aqui a medida que for avançando, tentando ao máximo explicar os meus passos.

Tags: , , , ,

Leave a Reply