eduardo lacorte » Manutenção http://www.eduardolacorte.com.br algo sobre desenvolvimento web Wed, 27 Jul 2011 18:52:27 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Como exportar JavaScript do Dreamweaver para arquivos .js http://www.eduardolacorte.com.br/2011/07/23/como-exportar-javascript-do-dreamweaver-para-arquivos-js/ http://www.eduardolacorte.com.br/2011/07/23/como-exportar-javascript-do-dreamweaver-para-arquivos-js/#comments Sat, 23 Jul 2011 07:05:49 +0000 Eduardo Lacorte http://www.eduardolacorte.com.br/?p=244 Sim, é isso mesmo que você leu! O Dreamweaver exporta seus comandos de JavaScript, criados através do painel Behaviors (assunto para outro post) de uma forma muito simples. Veja abaixo:

As imagens acima demonstram o uso do JavaScript do Dreamweaver. No exemplo acima, um código gerado para o manuseio da visibilidade de elementos (Show/Hide Elements).

A questão é que, por padrão, o código JavaScript do Dreamweaver é gerado no próprio <head></head>, e se formos aprofundar o pensamento, ao duplicar as páginas via Templates ou includes (ou mesmo qualquer outra técnica), esse código será replicado para cada página, tornando as páginas mais pesadas e a manutenção mais complicada por “bobeira”.

O comando em foco na imagem abaixo resolve o problema:

Esse comando é extremamente útil, e ainda por cima te dá duas opções de sequência: exportação de forma simples (arquivo .js apenas) e forma não-obstrutiva (arquivo .js e retirada de todo e qualquer evento aplicado em tags HTML no decorrer do arquivo). Veja as imagens abaixo e seus resultados:

Exportação de JavaScript apenas do <head> (opção 1)

Pela imagem acima nota-se que o Dreamweaver retirou o código JavaScript do <head> e colocou-o em um arquivo .js, que é exportado para o mesmo local do HTML, por padrão. A chamada ao arquivo é inserida, como observado na figura acima.

Exportação total do JavaScript (JavaScript não Intrusivo / Obstrutivo)

Exportação de JavaScript não Intrusivo / Obstrutivo

Definição de IDs para os objetos que usam JavaScript

Perceba que o Dreamweaver solicita a edição de IDs nos links e/ou objetos que utilizam JavaScript em seu arquivo. É um passo extremamente importante, pois é através do ID do objeto que o Dreamweaver viabilizará a utilização do JavaScript de maneira não intrusiva (ou obstrutiva, como alguns também chamam o método).

O resultado da operação será a geração de arquivos externos, conforme as figuras abaixo:

Geração de arquivos .js externos

Criação do diretório SpryAssets(Caso você não tenha o diretório SpryAssets, ao salvar o arquivo o Dreamweaver solicitará a criação do mesmo.)

A maior vantagem com relação a código limpo, obviamente está na segunda opção. Porém, não podemos nos esquecer que o Dreamweaver usará o framework Spry para a conclusão do processo, e como exibido na imagem acima, o arquivo gerado no diretório SpryAssets não é lá muito pequeno…

Veja abaixo um trecho desse arquivo, para que você entenda o que acontece:

Utilização do Framwork Spry para a manipulação do JavaScript de forma não instrusiva / obstrutiva(Chamada do Spry diretamente no arquivo .js gerado)

Resultado Final(Resultado final do HTML, com o link também para o arquivo SpryDOMUtils.js, bem como os IDs inseridos no código HTML)

A manipulação dos eventos ocorre totalmente fora do HTML. Porém, a sua manutenção também, no caso de, por exemplo, a inserção de mais algum elemento que precise da manipulação do Javascript. O Dreamweaver não será mais capaz de manipular o JavaScript criado por ele via painel Behaviors. Porém, o seu código estará mais limpo. Aí é questão de colocar na balança o que vale mais: um código alterável pelo Dreamweaver ou um resultado mais limpo?

É isso aí! Espero ter ajudado quem enfrenta esse problema no Dreamweaver.

Abraços!

PDF Download    Enviar artigo em PDF   
]]> http://www.eduardolacorte.com.br/2011/07/23/como-exportar-javascript-do-dreamweaver-para-arquivos-js/feed/ 0 Find and Replace (Avan̤ado) РComo utilizar? http://www.eduardolacorte.com.br/2009/05/09/find-and-replace-avancado-como-utilizar/ http://www.eduardolacorte.com.br/2009/05/09/find-and-replace-avancado-como-utilizar/#comments Sat, 09 May 2009 18:27:56 +0000 Eduardo Lacorte http://www.eduardolacorte.com.br/?p=175 Dreamweaver Find and ReplaceSalve 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 and Replace - Find in

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:

Find and Replace - Search

Search:

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

Find and Replace - Source Code

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

Find and Replace - Text

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

Find and Replace - Text (Advanced)

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:

Find and Replace - Specific Tag

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:

Find and Replace - Opções de pesquisa em Specific Tag

- 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:

Find and Replace - Ações em Specific Tag

- 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:

Find and Replace - Opções Complementares

- 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:

Find and Replace - Salvando as Queries

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

PDF Creator    Enviar artigo em PDF   
]]> http://www.eduardolacorte.com.br/2009/05/09/find-and-replace-avancado-como-utilizar/feed/ 3