3 coisas que você talvez não saiba sobre Dreamweaver

Existem muitas boas opções de editores de código para quem trabalha desenvolvendo para web, cada um tem o seu preferido e o defende com unhas e dentes. Dentre eles, um dos mais populares é o Dreamweaver, que eu uso há alguns anos e sempre me atendeu muito bem. Eu não trabalho no modo “layout”, pois gosto de ter controle sobre cada linha do meu código. O Dreamweaver me permite isso e ainda fornece algumas boas ferramentas para me ajudar. Para aqueles que como eu usam o Dreamweaver para escrever seu código, aqui vão 3 boas idéias que podem melhorar ainda mais a sua experiência.

Organização e padronização do código

Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Dreamweaver

Saiba que o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

DreamweaverVocê já deve saber do incrível potencial que a plataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Reader só para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei um atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

Photoshop – Ganhe tempo usando Actions

Apesar de serem um dos recursos mais poderosos do Photoshop, as Actions são bem pouco utilizadas. Ao contrário do que muitos pensam, é extremamente fácil gravar e configurar Actions para as mais variadas tarefas, além disso, engana-se quem acha que não dá para utilizar Actions em trabalhos de criação ou ilustrações, já que existem Actions que adicionam efeitos e detalhes sutis e muito bacanas à imagens e elementos como botões, headers, etc.

O que são Actions?

No Photoshop, uma Action nada mais é que uma ou mais ações executadas automaticamente e em sequência, como se fosse um “passo a passo”. Essas ações são gravadas pelo usuário e podem ser executadas depois em qualquer arquivo ou em vários arquivos ao mesmo tempo.

Também é possível exportar um ou mais Actions e utilizá-las em qualquer computador, assim como fazer download de Actions na Web e usá-las no seu computador.

Ações simples

Vamos supor que você tem uma galeria de fotos no seu site e recebeu várias imagens que devem ser redimensionadas para que caibam na largura da sua galeria. Então o que você precisa é basicamente repetir os mesmos passos para todas elas:
1º – redimensionar a imagem.
2º – aplicar um leve filtro de nitidez (Sharpen) para que ela não fique desfocada.
3º – salvar a imagem em um formato compatível (JPG, GIF ou PNG).

Não é nada complicado de se fazer, mas se a sua galeria tiver 20 fotos você levará um tempo considerável para editar todas as imagens. Veja como essa edição pode ser feita com uma action:

1 – Abra uma das imagens no Photoshop;

null

2 – Clique no menu  Window > Actions para abrir o painel de ações;
Você deve encontrar algumas ações pré-definidas do Photoshop.

null

3 – Clique no botão  “New action” null;

4 – No painel que se abre, dê um nome para a ação e escolha uma tecla de atalho (opcional). Clique em  “Record”;

null

A partir de agora, todos os comandos estão sendo gravados e pertencerão à nova ação. Perceba inclusive que o botão  “Record” null do painel está iluminado indicando a gravação.

5 – Clique no menu  Image > Image Size e altere a largura da imagem para 500px. Clique em OK.

null

6 – Clque no menu  Filter > Sharpen > Unsharp Mask e defina os valores conforme o exemplo:

null

7 – Agora clique em  File > Save for Web… e salve o arquivo como JPG na pasta em que desejar;

null

8 – Finalize a gravação da ação clicando no botão  “Stop” null no painel Actions;

Pronto, sua ação está salva e pode ser utilizada em outros arquivos, Perceba que no painel Actions, abaixo do nome da nova ação, ficaram gravados todos os comandos utilizados.

Utilizando a Action

Agora que já tem a sua action pronta, basta aplicá-la em todas as imagens para as quais você precisa repetir os mesmos passos.
Para aplicá-la em um arquivo de cada vez, basta abrir a imagem no Photoshop e utilizar a tecla de atalho que você definiu para a Action (no meu caso, Ctrl + F12). Para aplicá-la em todos os arquivos de uma só vez, abra todas as imagens, Siga estes passos:
1 – Vá até o menu File > Automate > Batch…;
2 – Na janela que se abrirá, na caixa de seleção “Action”, escolha ação que acaba de criar (no meu caso “Galeria”);
3 – Para “Source” escolha “Opened Files”;
4 – Em “Destination” selecione “None”.

5 – Clique em OK;
Feito. Todas as imagens foram redimensionadas, receberam o filtro de nitidez e foram salvas na pasta que você havia escolhido.

Perceba que este é apenas um exemplo simples. Você pode gravar muitos outros tipos de comandos e criar actions para as mais variadas tarefas do seu dia a dia. Como disse é uma questão de costume, quando você estiver acostumado a usar actions vai perceber várias oportunidades de usá-las e poupar tempo.