Atualização Dinâmica com Objetos

 

Manipulação de objetos da biblioteca do Dreamweaver CS3 para efetuar atualizações dinâmicas em websites sem precisarmos conhecer linguagem de programação.

Introdução

Imagine-se desenvolvendo um site simples, mas com muitas páginas (mais ou menos 50) onde, em todas existe um banner full (468×60 px) que precisa ser atualizado semanalmente. O detalhe é que você ainda não sabe programar direito, mas também não quer fazer a atualização individual de cada página, não é verdade?
Então, seus, nossos problemas terminaram. =]
Pouco é falado da biblioteca que o Dreamweaver oferece aos webdesigner’s e webdevelopers. Assim como no Fireworks e Flash, podemos criar objetos que serão utilizados com freqüência no desenvolvimento de nossos projetos web e que requerem uma atualização constante, como imagens, links, vídeos, animações, etc. Como nos Templates, a utilização e atualização dos objetos (Assets) é dinâmica, ou seja, todas as páginas que contiverem um objeto dinâmico, quando ele for atualizado, todas as páginas também receberão as modificações.

Pré-Requisitos

• Facilidade com o manuseio do Dreamweaver CS3
• Saber criar e configurar um novo site no Dreamweaver CS3
• Entendimento sobre o conceito de Templates

Objetivo

• Criar objetos que serão atualizados automaticamente utilizando a Biblioteca (Library) do Painel Assets.

Conceito

Não basta criarmos apenas um trabalho, pois em muitos casos teremos diversas páginas com inúmeros elementos a serem configurados no website. Mas como sabemos, o Dreamweaver foi criado para facilitar a vida dos desenvolvedores, disponibilizando diversos recursos que auxiliam na produtividade do nosso trabalho. E um desses recursos que falarei neste tutorial é Assets.

Conteúdo

Parte 1 - Importação de site de exemplo

Vamos começar criando um novo site no Dreamweaver para facilitar o entendimento das ações abaixo. E pra ficar mais fácil, BAIXE AQUI os arquivos deste tutorial; acesse o menu Site > Manage Sites > Import. Selecione o arquivo Tutorial.STE, clique em abrir e em seguida pressione o botão Done.
Este procedimento faz a configuração automática de um novo site que foi exportado do Dreamweaver.
Ao abrirmos o arquivo index.html temos a seguinde estrutura:

Fig. 01 - Estrutura da página index.html

Topo da página: criaremos um objeto atualizável para inserirmos nas outras páginas.
Barra de menu: links serão criados e inseridos na biblioteca.
Identificação: apenas uma identificação da página. Não sofrerá atualização.
Conteúdo: apenas um conteúdo da página. Não sofrerá atualização.

Parte 2 - Adicionando objeto à biblioteca

Para iniciarmos, precisamos, primeiramente, localizar o Painel Assets. Ele se encontra no Painel Files (F11).

Fig. 02 - Painel Assets

Na lateral esquerda temos os tipos de elementos como imagens, cores utilizadas no site, links, arquivos em flash, etc.
Transformaremos o Topo do site em um objeto, inicialmente. Vamos ver como funciona:
1. Selecionemos a tabela onde se encontra o topo:

Fig. 03 - Selecionando topo do site

2. Com a tabela selecionada, acessemos o menu Modify > Library > Add Object to Library, para adicionarmos o objeto à biblioteca do Dreamweaver.
Após a inserção do topo na biblioteca, na página onde ele está inserido, para sinalizar ao desenvolvedor, fica com um preenchimento amarelo, mas não afeta em nada no layout da página. Sua função é apenas de identificar que se trata de um objeto do paine Assets.

Fig. 04 - Visualização do topo após a inserção na biblioteca

O Dreamweaver também cria automaticamente na raiz do site, uma pasta chamada Library onde todos os objetos são armazanedos.
3. Vamos repetir o mesmo procedimento com a Barra de menu

Fig. 05 - Visualização da barra de menu

Parte 3 - Manipulação do Painel Assets

Outra observação é quanto ao Painel Assets. Vejamos quantas informações foram adicionadas à biblioteca:
Images
Nesta seção vemos as imagens que estão associadas ao objeto juntamente com suas propriedades de dimensionamento e peso. As imagens podem ser inseridas nas outras páginas do site, bastando selecioná-las no painel e arrastá-las para a área de edição das páginas.

Fig. 06 - Propriedades da seção image

Colors
Na opção Colors ficam exibidas as cores utilizadas na página onde foi inserido o objeto à biblioteca.

Fig. 07 - Propriedades da seção Colors

O processo de inserção no site é o mesmo: selecionar, arrastar e soltar dentro da página do site. O detalhe é que é preciso ter uma palavra o texto selecionado para que os mesmos absorvam as propriedades da cor.
Library
Na seção Library encontram-se os objetos adicionados. Para utilizá-los basta arrastá-los para a página do site editado.

Fig. 08 - Objetos da biblioteca

Outra maneira de inserir um objeto é através do botão Insert localizado no painel Assets na parte inferior, onde constam outros botões, que são eles, respectivamente da esquerda para direita:

Fig. 09 - Botões da biblioteca

• Refresh Site List: atualiza a lista de objetos editados, excluídos ou inseridos no site
• New Library Item: outra maneira de adicionar um objeto à biblioteca
• Edit: selecionando um objeto, podemos editá-lo clicando neste botão
• Delete: maneira de excluir o objeto da biblioteca

Parte 4 - Criando páginas e utilizando objetos da biblioteca (library)

Agora que criamos os objetos fica simples inseri-los nas novas páginas e editá-los. Como exemplo, vamos inserir o topo e a barra de menu na página abaixo:

Fig. 10 - Nova página sem objetos da biblioteca

Em seguida, vamos arrastar os objetos para a página…

Fig. 11 - Inserção do objeto Topo na página mxstudio.html

… e a mesma deverá ficar como a imagem abaixo:

Fig. 12 - Página mxstudio.html após a inserção dos objetos

Parte 5 - Edição dos objetos da biblioteca

Este procedimento que é o “pulo-do-gato”, a razão de existir dos objetos criados. Ao editarmos qualquer um incluso na biblioteca (library), assim como os Templates, todas as páginas em que o objeto edito esteja inserido, serão atualizadas automaticamente.
Como exemplificação, vamos inverter os logotipos do topo.
1. Selecionemos o objeto Topo e cliquemos no botão Edit ou demos dois cliques sobre o mesmo.
2. Uma área de edição específica será aberta e nela podemos efetuar qualquer alteração. Então vamos inverter os logotipos e também utilizar a mesma vermelha que se encontra no painel Assets como visto na Fig. 07. Lembrando que é preciso selecionar o texto e arrastar a cor para cima da seleção ou clicar no botão Insert. O resultado deve ser o seguinte:

Fig. 13 - Área de edição de objetos

Indicação do objeto que está sendo editado
Área de edição do objeto
Após salvarmos as alterações a seguinte tela surgirá:

Fig. 14 - Janela de confirmação de atualização

3. Clicando em Update, a atualização global será efetuada. Já em Don’t Update, apenas salvará o objeto sem atualizar as páginas que ele está inserido.
Outra maneira de edição é clicar sobre o objeto e no painel Properties, clicarmos no botão Open.

Fig. 15 - Botões de ações de objetos no painel Properties

Considerações Finais

Vale ressaltar que este processo de atualização, praticamente, tem o mesmo efeito que se criássemos uma página template. Contudo, podemos inserir objetos em nossos templates o que otimiza e muito as atualizações das páginas, além de ser mais rápido.
Na prática, recomendo a implantação de objetos para criação de áreas de publicidade como banner’s, onde existe (dependendo do site) uma rotatividade muito grande de imagens e animações.

Mas atenção!
Este processo é indicado para quem não sabe programar em nenhuma linguagem e/ou não quer ter trabalho em atualizar páginas html individualmente, ok?!
Acessem nosso Fórum para postarem dúvidas sobre o artigo e cliquem aqui para sugerirem de novas matérias.
Um grande abraço e até a próxima.
Autor: CarlosHPS Webdesigner - Colunista Dreamweaver do Portal MXSTUDIO
Não deixem de me fazer uma visita em meu Blog - www.carloshps.com.br/blog