Salve galera!

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
Adobe Certified Expert – Dreamweaver

Send post as PDF to

Especificamente nesse post vou deixar a educação de lado, e dizer que passei num prova fudida da Adobe sobre o Dreamweaver CS3 (ainda não tem o CS4).

Eu já havia rodado uma vez, mas isso não importa. O que importa é que consegui passar, e posso voltar a exibir um título de Certified (a primeira certificação de Dreamweaver foi na versão MX 2004). A sensação é boa, principalmente quando aparece a palavra “Congratulations” no sistema.

Fiz a prova na New Horizons, o centro autorizado VUE mais próximo que encontrei. E a história é foda…

Era para eu ter feito a prova no dia 29 de Abril, não fosse o Agnaldo (MCT, MCSE, MCTS, MCSEILAOQUE…) marcar a prova errada! Saí de casa concentrado, preparado, me preparei psicologicamente, fui para o computador, a menina cadastrou tudo, botou a prova pra rodar, e pasmem… carregou a prova de PHOTOSHOP!!! Eu queria matar o Mineiro, sinceramente!!! O foda foi ir pra Paulista em um dia que eu não precisava ter ido, dar essa merda, voltar pra casa e ver um e-mail dele pedindo desculpas… é um asno mesmo! hahaha.

Brincadeiras à parte, o Agnaldo é um grande amigo meu, e agradeço por ele ter me ajudado a marcar a prova e deixar tudo certinho pra mim. Mas enfim, voltando ao “causo”…

Com essa confusão toda 100 dólares foram pro saco, e a prova teve que ser remarcada, para 04 de Maio, segunda-feira, 17:15h. Pela segunda vez, mais 100 doletas…

Passado todo o feriado, lá vou eu dar aula de Dreamweaver CS3 segunda de manhã. Peguei uma turma bacana, e o dia foi todo assim, totalmente descontraído. Almocei com o Mineiro e outro amigo dele, falei muita besteira, dei muita risada, até dar a hora da prova. Mas nessa eu tinha que passar, de qualquer jeito.

O resumo da ópera: 71 questões, 140 minutos, muitas pegadinhas, e tudo em INGREIS! Foda, muito foda!

Como na primeira prova eu interpretei demais as questões e acabaram ficando umas 20 para responder nos 10 últimos minutos, optei por uma tática diferente, onde decidi responder o que eu sabia, marcar o que eu não tinha certeza e responder também o que eu não sabia (não sei, não perco tempo). Mas acima de tudo, marcar as questões que eu não sabia no papel, relacionadas por assunto. Algo como (5 – Manage Sites, 6 – Bindings), e então, ao final da prova, responder as questões sabendo previamente seus assuntos. Querem saber? Foi uma boa tática, pois terminei o exame com mais de 10 minutos de folga.

Saí de lá com uma sensação vitoriosa, realmente muito feliz. Saí de lá, e fui dar o treinamento de Dreamweaver com acesso a banco de dados, o meu primeiro como ACE.

A certificação ainda não chegou, mas já posso usar o título da Adobe. Então, até a próxima!

Send post as PDF to

Olá, pessoal!

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!

Send post as PDF to

Olá, pessoal.

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! =)

Send post as PDF to