Essa semana começou bem: renovei minha certificação de Dreamweaver, e agora tenho a Adobe Certified Expert (ACE) em Dreamweaver. A anterior era a de Dreamweaver MX2004 Developer (nem a do 8 eu tinha feito.. hahahaha). Devido a isso vou mostrar algo interessante para vocês…

Essa matéria consiste em explicar da maneira mais simples possível o Find and Replace, um recurso fantástico do Dreamweaver. Bom, na verdade todos os softwares têm esse recurso, mas no Dreamweaver a coisa é fantástica mesmo… principalmente no quesito MANUTENÇÃO!

É simples:

A localização dele é a mesma. Vá em Edit – Find and Replace (Ctrl + F). A caixa de diálogo aparecerá para você.

Primeiramente, vamos analisar as opções que temos de Find And Replace:

Find in:

- Selected Text: Buscará a informação desejada dentro do texto selecionado na página.
- Current Document: Buscará a informação desejada dentro do documento todo.
- Folder…: Buscará a informação desejada dentro do diretório escolhido, em qualquer página.
- Selected Files in Site: Buscará a informação desejada dentro dos arquivos que vierem a ser selecionados com a tecla Ctrl no painel Files do Dreamweaver (F8).
- Entire Current Local Site: Buscará a informação desejada dentro de todo o site especificado nas configurações do Dreamweaver (Site – Manage Sites)

Após selecionar o local de pesquisa, devemos informar o que estamos procurando:

Search:

- Source Code: Realiza a pesquisa de código. Ignora Design. Veja abaixo um exemplo:

- Text: Realiza a pesquisa de texto. Ignora tags e programação. Veja abaixo um exemplo:

- Text (Advanced): Realiza a pesquisa de texto dentro ou fora de tags específicas. Veja abaixo um exemplo:

OBS: Os sinais de + e – refletem a possibilidade de incrementar tal pesquisa com combinação de tags dentro tags ou fora de tags.

- Specific Tag: Realiza a pesquisa de Qualquer coisa. Veja as imagens explicativas abaixo:

A imagem acima reflete a seguinte pesquisa: “Todas as tags td que tiverem o atributo bgcolor com qualquer atributo que seja terão esse atributo removido. De todas as páginas do site” – (ahá… repare na imagem que deixei Entire Current Local Site na opção Find In)

Já a imagem abaixo mostra as possibilidades de pesquisa:

- With Attribute: Pesquisa tags com o atributo especificado.
- Without Attribute: Pesquisa tags sem o atributo especificado.
- Containing: Verifica conteúdo da tag selecionada anteriormente (td, no caso).
- Not Containing: Verifica ausência de conteúdo na tag selecionada anteriormente (td, no caso).
- Inside Tag: A tag selecionada (td, no caso) deve estar dentro de outra tag. Bom, seria mais útil se quiséssemos analisar todos os parágrafos dentro de células… (p inside td).
- Not Inside Tag: A tag selecionada (td, no caso) não deve estar dentro de outra tag. O oposto da explicação anterior.

Veja na imagem abaixo o que podemos fazer após a seleção de caso e pesquisa:

- Replace Tag & Contents: Com essa opção podemos substituir os ítens localizados pelo bloco de códigos que quisermos. Ao selecionarmos essa opção uma caixa de texto se abrirá para a digitação do código.
- Replace Contents Only: Somente o conteúdo das tags localizadas será substituído.
- Remove Tag & Contents: As tags localizadas e seus conteúdos serão removidos.
- Strip Tag: A tag é removida, tanto sua abertura quanto seu fechamento. Ex: <font…>Conteúdo</font> – A tag font é removida, e seu conteúdo permanece.
- Change Tag: Troca uma tag por outra. Ideal para localizar todas as tags <b> e substituí-las por <strong>.
- Set Attribute: Configura um atributo para as tags localizadas. Uma boa prática para se aplicar classes em massa…
- Add Before Start Tag: Adiciona um bloco de códigos antes do início da tag em questão.
- Add After End Tag: Adiciona um bloco de códigos após o fim da tag em questão.
- Add After Start Tag: Adiciona um bloco de códigos após o início da tag em questão.
- Add Before End Tag: Adiciona um bloco de códigos antes do fim da tag em questão.

Opções

Há também opções complementares às pesquisas, conforme vemos abaixo:

- Match case: Diferencia a pesquisa em maiúsculas e minúsculas. edu é diferente de Edu.
- Match whole word: Analisa a palavra como sendo inteira, e não parte de outra palavra. Nesse caso, Edu não faz parte de Eduardo, por exemplo.
- Ignore whitespace: Com essa opção o Dreamweaver passa a ignorar espaços em branco nas sequências, como o Tab, Enter, por exemplo.
- Use regular expression: Com essa opção habilitada o Dreamweaver passa a permitir o uso de Expressões Regulares (Regex) em suas pesquisas.

Tudo explicado. Basta utilizar de acordo com a necessidade, com os botões Find Next (Localizar próximo), Find All (Localizar Tudo), Replace (Substituir Próximo) ou Replace All (Substituir Tudo).

Salvando Pesquisas

Se você tem a intenção de executar a mesma rotina futuramente, seja ela qual for (retirar tag <font>, remover atributo bgcolor, etc…), fique tranquilo. Você terá a possibilidade de salvar sua pesquisa, e carregá-la quando quiser. Ao salvar, o tipo de arquivo será .dwr. Basta guardar esse arquivo e carregá-lo quando necessário. Veja como fazer:

Para refletir

Atendi um cliente em um desenvolvimento em 2003. O site dele tinha 63 páginas. Em 2008 refiz esse trabalho, com exatos 5.542 códigos a menos!!! E o melhor de tudo: retirados do conteúdo total (que seria utilizado novamente) em quarenta minutos, aproximadamente!!! Como será que consegui isso???

Simples! Analisando todo o código que eu precisava retirar, estudando seus casos (remover bgcolor de td, class de qualquer tag, remover font de todo o site…), salvando cada pesquisa e aplicando tudo com a opção Entire Current Local Site. Simples, não?

Bom, galera… é isso aí! Espero ter explicado com clareza um pouco dessa ferramenta excepcional do Dreamweaver. Até a próxima!

Eduardo Lacorte

www.eduardolacorte.com.br

Pensando no que escrever, me lembrei de algo que eu sempre abordo nos meus treinamentos na Impacta, e por incrível que pareça, o Dreamweaver CS4 (e nem seus antecessores) não faz automaticamente: tratar a borda gerada pela inserção de um link em uma imagem como um estilo CSS.

Então… vamos fazer com que ele trate! Vamos lá:

- Insira uma imagem do seu site no seu arquivo (salvei o arquivo como demo.html).

- Clique nela e vá no painel Properties (Ctrl + F3). Lá coloque um link qualquer na sua imagem e coloque na opção border o valor 0.

- Verifique o código-fonte (modo Code). Você perceberá que o código border=”0? foi inserido no HTML. Até aí tudo bem… mas se tivéssemos 483 imagens na nossa página seriam 483 border=”0? pelo documento… além de border=”0? ser atributo visual, não considerado pelo XHTML 1.0 Strict!!

- Volte para o modo Design, e retire o valor de border. Aproveite e tire os valores de largura e altura da imagem, sob o mesmo conceito de repetição desnecessária de código. Largura e Altura somente devem ser usados em caso de imagens com tamanho que não seja real, o que não é muito comum…

OBS: Nesse momento, ao clicar em algum outro ponto da página, você perceberá que a imagem ficou com a costumeira borda azulada. 

- Acesse o painel CSS (Shift + F11) e crie uma nova regra (New CSS Rule).

- Crie uma regra que será aplicada a todas as imagens da sua página, conforme a figura abaixo.

OBS: Recomendável criar a regra em arquivo css externo, para que você possa controlar todas as imagens do site com uma única regra em um único arquivo.

- Na janela de configuração do CSS, vá à opção Border, e preencha sua largura como zero.

- Clique em Ok, volte ao arquivo. Repare que a borda da imagem sumiu. Vamos ao código:

- Dá para otimizá-lo com uma pequena regra, que pode ser aplicada assim:

- A linguagem CSS entende 0 como sendo valor absoluto. Você tem 0 pixels, 0 centímetros, 0 reais, 0 moedas… você não tem nada. É tudo 0, portanto a unidade de medida pode ser retirada. E também que podemos generalizar, querendo que TODAS AS BORDAS tenham valor zero.

E assim fica corrigido o problema. Anulamos todos os border=”0″ que poderiam aparecer em virtude da inseração de links em imagens, e implantamos o que deveria ser praxe para o Dreamweaver.

[]’s!

Eduardo Lacorte
http://www.eduardolacorte.com.br

Vou demonstrar nesse tópico algo relativamente simples, mais uma vez voltado para o público iniciante em Dreamweaver e Desenvolvimento Web em geral, mas que já conhece um pouco de XHTML e CSS: como formatar tabelas de dados com CSS.

Muitos desenvolvedores fazem como no Word: selecionam as células da tabela e, através do Painel de Propriedades (CTRL + F3), centralizam os conteúdos das células, ou ainda aplicam cor de fonte, fundo e outras manobras que só fazem com que o código cresça exponencialmente (partindo do princípio que o site pode conter inúmeras tabelas). Embora seja uma manobra errada é a mais aplicada, pela sua comodidade e muitas vezes a falta de conhecimento dos desenvolvedores. E como eu sempre digo: formatar pelo Painel Properties é a pior roubada em que um desenvolvedor pode se meter (a não ser para aplicar regras CSS previamente criadas).

Vamos deixar de blá blá blá e mãos à obra!

Software Utilizado: Adobe Dreamweaver CS4
Requisitos: Conhecer um pouco de XHTML e CSS

Considere a tabela abaixo:

É uma tabela simples, sem formatação alguma, como realmente deve ser. É um grande erro o desenvolvedor gerar conteúdo e formatá-lo ao mesmo tempo. Primeiro faça o básico, depois se preocupe em formatar. =)

- Abra o Painel CSS Styles (Shift + F11)

- Declare uma nova regra CSS (New CSS Rule)

- Preencha a sua caixa de diálogo como mostra a figura abaixo:

OBS: Conforme solicitado um conhecimento mínimo de CSS, nesse exemplo irei colocar a Rule Definition em “This document only” (gerar código CSS para esse documento e nesse documento, em seu cabeçalho), mas fica a critério do desenvolvedor se o CSS deve ser gerado em um arquivo .css (New Style Sheet File), ou mesmo um CSS já existente.

- Defina a regra .dados. Utilizei configurações básicas como exemplo (atenção à última tela da imagem):

- Clique em OK.

- Volte à página, selecione a tabela pelas suas bordas ou pela tag <table> no navegador de tags, e aplique a classe dados, que estará disponível na opção Class no Painel Properties.

O resultado será uma tabela com textos centralizados e fonte Verdana, conforme formatado. Porém, perceba que as bordas não foram atribuídas às células, e sim à tabela apenas, ou as bordas exteriores. Para resolver o problema temos que criar outra regra CSS (Painel CSS Styles novamente – New CSS Rule), com o nome de .dados td, conforme a imagem abaixo:

Explicando:

Todas as tags <td> que estiverem dentro de uma tag tomada pela classe dados serão formatadas de acordo com a regra criada. Veja como podemos eliminar vários códigos, com o auxílio da programação abaixo:

- Ao configurar como a imagem acima, aperte Apply. Você perceberá que todas as células ficaram com suas bordas pretas. Poderiam, por exemplo, ter ficado maiores, caso eu tivesse declarado altura (atributo Height, na categoria Box)…

Assim como o exemplo acima, você também pode criar uma classe para os títulos das tabelas, chamada .dados .titulo (essa classe só funcionará se estiver dentro de um objeto que tenha a classe .dados), aplicar nas primeiras células ou linha da tabela, bem como outra regra chamada .dados .par (para as linhas pares dos dados da tabela) e obter um resultado como o da imagem abaixo:

Questionamento: uma classe ou um identificador?

Simples. Um identificador faria com que essa técnica fosse usada para uma tabela exclusivamente, ao passo que uma classe permite o uso em diversas tabelas ao mesmo tempo, controlando assim o visual dos dados do seu site como um todo.  Eu poderia trocar as cores de todas as tabelas do meu site apenas com essas quatro configurações (desde que elas estivessem escritas em um arquivo .css externo, e não no mesmo arquivo, claro…).

As duas técnicas geram o mesmo resultado, com a diferença de ID ser destinado a uma região apenas. Aí vai de você definir… se será necessário aplicar a técnia em várias tabelas ao mesmo tempo (considerando mais de uma por página) ou se haverá apenas uma tabela por página. No primeiro caso a classe é o melhor modo. Já no segundo o identificador (ID) atende melhor, considerando até mesmo implantação de AJAX e menor uso de regras CSS.

É isso aí. Tópico simples de aplicar, e espero que simples de entender. Principiantes, mãos à obra! =)

Eduardo Lacorte
http://www.eduardolacorte.com.br

Como primeiro artigo, nada melhor do que falar sobre o gerenciamento de sites no Dreamweaver CS3. Tema este, aliás, indispensável para qualquer desenvolvedor que utilize o Dreamweaver como ferramenta de trabalho.

O local a ser acessado para a realização das configurações chama-se Site Definition, e para acessá-lo existem algumas maneiras, dentre elas:

1. Acessar a opção Dreamweaver Site na tela de boas-vindas do software (Welcome Screen)
2. Acessar o menu Site – New Site
3. Acessar o menu Site – Manage Sites, e dentro de sua caixa de diálogo o botão New – Site
4. No painel Files (F8), no menu drop down de acesso à unidades do computador, a opção Manage Sites, e dentro de sua caixa de diálogo o botão New – Site

Para dar sequência ao artigo, escolhi a opção 2, conforme a imagem abaixo:

Neste artigo abordarei a aba Basic da tela Site Definition, passo a passo.

Passo 1 - Informe o nome do cliente, e o endereço http, caso o tenha (esta opção não é obrigatória, porém pode ser usada para checagens futuras referentes a links, feitas pelo Dreamweaver.

Passo 2 - Defina se utilizará uma tecnologia de servidor (sim, se você é programador!!!), seguindo uma das imagens abaixo. Caso não seja, informe que não usa uma tecnologia de servidor. Caso seja, informe inclusive qual tecnologia.

Passo 3 - Informe agora se irá trabalhar localmente em sua máquina para então fazer o upload dos arquivos para um servidor (recomendado) ou se já trabalha em rede (ambiente corporativo), bem como o diretório onde encontram-se os arquivos do seu site ou onde você irá criá-los.

Passo 4 - Como você se conectará ao servidor remoto? Rede e FTP são as opções mais comuns, sendo que rede (Local/Network) basta apontar o local onde o site estará armazenado. Já a opção FTP depende basicamente de três configurações disponibilizadas pelo seu provedor de hospedagem, que são:

FTP Address: (ex: ftp.ellemento.com.br)
FTP Login: (ex: ellemento)
FTP Password: (ex: ***** … hehehe, senha é senha!)

IMPORTANTE: Ainda há a possibilidade de não se conectar ao servidor remoto, supondo que você esteja apenas realizando algum trabalho individual. Basta deixar a opção None como padrão. Caso a opção de conexão ao servidor remoto seja mantida, aparecerá ainda outra tela com informações sobre Check in e Check out, voltadas para um ambiente de desenvolvimento em grupo, que não serão abordadas nesse momento.

Passo 5 – Aparecerá o resumo de toda a operação. Basta clicar em Finish.

Observe que, no Painel Files, o seu site estará devidamente montado, e os diretórios estarão verdes. Sinal de que tudo deu certo, e o Dreamweaver nesse momento simula um servidor, considerando o seu diretório raiz como a raiz de todo o seu trabalho.

Caso alguma alteração deva ser feita na configuração, basta acessar o menu Site – Manage Sites, e na caixa de diálogo subsequente escolher o site recém-configurado e editar suas configurações através do botão Edit, repetindo todos os passos com as novas configurações.

É isso aí! Espero ter ajudado aos que não sabiam configurar o Dreamweaver. Na próxima semana abordarei a aba Advanced da configuração de sites, finalizando assim o assunto.

Um grande abraço a todos!