Essa classe faz o envio de e-mails em formato de texto ou HTML. Faça o Download da Classe

Agora vamos fazer a inclusão da classe smtp.class.php que vai realizar a conexão e autenticação SMTP para que os e-mails possam ser enviados.

Se você estiver no modo de visualização do projeto mude para o modo de visualização do código.

Dentro do Bloco de código vamos fazer a inclusão da classe smtp.class.php através do comando include

<?php
include ("smtp.class.php");
?>

Com a classe já incluída agora vamos configurar a conexão SMTP que necessita de um endereço de servidor (host), usuário (user), senha (pass) e informar que será ativada a autenticação (debug) para que possa enviar os e-mails corretamente. Para fazer a configuração basta apenas declarar o valor das variáveis utilizada na classe com os seus dados.

<?php
include ("smtp.class.php");

/* Configuração da classe.smtp.php */
$host = “smtp.mail.yahoo.com.br”; /*host do servidor SMTP */
$smtp = new Smtp($host);
$smtp->user = “usuario”; /*usuario do servidor SMTP */
$smtp->pass = “senha”; /* senha dousuario do servidor SMTP*/
$smtp->debug =true; /* ativar a autenticação SMTP*/
?>

Para que a mensagem possa ser enviada ela deve conté um remetente ($from) que é o seu e-mail, um destinario ($to) que vai se o e-mail de quem vai receber, um assunto ($subject), e a mensagem ($msg), e depois devemos chamar a classe SMTP, passar as configurações e mandar enviar.

/* envia uma mensagem */
$from= "seuemail@seusite.com.br"; /* seu e-mail */
$to = "destinario@seusite.com.br"; /* o e-mail cadastrado*/
$subject = "Teste de e-mail utilizando SMTP"; /* assunto da mensagem */
$msg = "Você está recebendo esta mensagem de teste<br>";
$msg .= "Para confirma clique no link abaixo";
$smtp->Send($to, $from, $subject, $msg);/* faz o envio da mensagem */

Esse é apenas um exemplo, no e-mail do destinario você pode colocar uma variavel vinda de um formulario, ou vindo de um banco de dados.

Mais não é somente o Internet Explorer que possui suporte para manipulação de XML, o Firefox e todos os navegadores mais modernos também têm.

Para carregar uma string ou um arquivo XML existem duas formas, uma para o Internet Explorer e outro para os demais navegadores como o Firefox.

Nesse primeiro artigo será realizado apenas a leitura dos nós, atributos e valores, no próximo será realizado manipulações como: criar, inserir, remover e alterar os nós, valore e tributos

Para o Internet Explorer, primeiro devemos criar um novo objeto através do ActiveX, em seguida desativar o método asynchronized, para que o navegador congele a execução do script até o carregamento total do arquivo XML e finalmente iniciar o carregamento do arquivo XML para a mémoria, para carregar um arquivo XML deve-se utilizar o load() e caso seja uma string (texto) utilize o loadXml().

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("documento.xml"); // caso seja uma estring utilize loadXml(string)

Em outros navegadores incluindo o Firefox existem ainda, mais duas formas para se trabalhar com XML, uma é com string e outra é com arquivos XML. A forma para carregar um arquivo XML nesses navegadores é semelhante à anterior, se diferenciado apenas pelos comandos. Primeiroé necessário criar um objeto XML, depois desativar o método asynchronized, pelo mesmo motivo informado na forma anterior e em seguida executar o comando load() para iniciar o carregamento.

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("documento.xml");

Para trabalhar com strings no Firefox e outros navegadores, utilizamos o comando DOMParser() para criar o objeto, e em seguida passamos a string para carregar

parser=new DOMParser();
xmlDoc=parser.parseFromString(string,"text/xml");

Para facilitar o carregamento de um arquivo XML, será criado uma função em JavaScript, utilizando o try e catch, identificando a forma correta de carregar o arquivo XML de acordo com o navegador. Salve esse arquivo em uma página JS, assim quando for utiliza-lo, basta somente incluí-la. Eu salvei com o nome de loadXMLDoc.js.

function loadXMLDoc(docname)
{
try //Tenta com o Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try // Caso de erro tentar com o Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.async=false;
xmlDoc.load(docname);
return(xmlDoc);
}
catch(e) {alert(e.message)}
return(null);
}

Como já foi explicado como carregar o arquivo XML para a memória do navegador, agora éhora de aprender a manipulá-lo. Para manipula-lo será utilizado JavaScript juntamente com DOM. O DOM fornecer um acesso à estrutura e conteúdo do documento.

O arquivo XML é composto por uma estrutura de TAGs, essas TAGs possuem TAGs pai, TAGs filhas, que também possuem, e são TAGs irmãs, como em uma arvore genealógica. Uma TAG pai pode possui diversas TAGs filhas, sendo essas TAGS filhas também irmãs uma das outras. Em DOM essas TAGs são conhecidas como nós, sendo assim, os nós pais podem também possui diversos filhos, tendo assim também irmãos. Sempre que fala em nó estarei falando em TAG.

• Na estrutura de nós, o nó superior é chamado de nó raiz
• Cada nó, exceto o nó raiz, tem exatamente um nó pai
• Um nó pode ter qualquer número de filhos
• Irmãos são os nós que possuem o mesmo pai

No XML Document Object Model (DOM), cada nó é um objeto. Objetos possuem métodos (funções) e propriedades (Informação sobre o objeto), que pode ser acessado e manipulado por JavaScript. Vejas os principais atributos na tabela abaixo

As três primeiras propriedades são muito importantes para obter informações sobre os nós. As demais são utilizadas para navegar e obter um nó especifico. Dentre as propriedades acima uma que merece atenção é a nodeType, que retornar o tipo de nó. Ela é muito importante, pois navegadores como Firefox e outros podem reconhecer espaços ou linhas em branco como sendo um nó, então utilizamos o nodeType para testar o nó e descobrir se ele é realmente um nó (elemento) utilizado em arquivos XML.

Propriedade do nodeType

O nodeType especifica o tipo de nó e é somente leitura. O mais importante tipos de nó são:

Alguns métodos para manipular os nós

Dessa tabela de métodos utilizaremos mais o método getElementByTagName(nó). Como o arquivo XML e composto por diversos nós, esse método pegar todos os nós que constam na página e gerar uma array, esses nós são organizado em uma lista onde cada nó receber um índice, esses índices servem para organizar e pode acessar determinado nó, o índice sempre começa com zero, essa lista gerada é conhecida como NodeList. Existem três maneiras de acessar essa lista.

1. Utilizando o getElementByTagName(nó) seguido por um valor do índice, como por exemplo, para acessar o primeiro nó especificamos getElementByTagName[0], ou para acessar o segundo nó getElementByTagName[1].
2. Como todos os nós estão em uma lista, podemos recuperá-lo através de um comando de repetição, como o caso do comando for
3. E ainda usando o getElementByTagName(nó) para pegar um determinado nó e utilizar os atributos que serão citados em uma tabela abaixo para navegar pelos nós, como por exemplos o pegar o segundo filho, ou terceiro pai.

Como já foi criada uma função no inicio para carregar o arquivo XML, é necessário agora inclui essa função dentro da tag HEAD, depois chamá-la passando a localização do documento XML, por questão de segurança o documento XML só será carregado se estiver no mesmo domínio que esta sendo executado o script, caso contrário, ocorrera um erro informando aceso negado.

<script type="text/javascript" src="loadXMLDoc.js">
xmlDoc.load("documento.xml");

Supondo que a estrutura do arquivo XML, armazenado na variável xmlDoc seja:

Para criar o Tag Cloud ou nuvem de tag utilizaremos a classe em php TagCloud Maker, criada pelo Cal Evans (calevans.com) sobre a Licença GPL 2.0. Essa classe faz o processamento de todas as tag, selecionando as mais repetidas e assim gerando a nuvem de tag. A TagCloud Maker mostrar as tag mais importantes (repetidas) com tamanhos diferentes e informando a quantidades de vezes que ela se repete. Mais para ela funcionar necessita de uma array com as tags. Essa array pode ser criada manualmente, onde você pode digitar as tags, ou pode se gerada por um banco de dados.

Download da Classe TagCloud Maker zipada e já com uma página de exemplo.

Criando array para utilização da TagCloud Maker

Para criar a array manualmente, basta apenas substituir a palavra Tag pela tag que você deseja, e acrescentar mais quantas tags você quiser.

$Array = array();
$ Array [ ]='Tag1';
$ Array [ ]=' Tag1';
$ Array [ ]='Tag2';
$ Array [ ]=' Tag2';
$ Array [ ]='Tag3';

Para criar a array através de um banco de dados vamos utilizar o código abaixo:

$hostname_conn = "servidor"; /*Endereço do servidor MySQL */
$database_conn = "database"; /* Nome do banco de dados */
$username_conn = "usuario"; /* Usuario do banco de dados */
$password_conn = "senha"; /* senha do banco de dados */
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_conn, $conn);
$query_rsTagCloud = "SELECT tag FROM tags";
$rsTagCloud = mysql_query($query_rsTagCloud, $conn) or die(mysql_error());
$row_rsTagCloud = mysql_fetch_assoc($rsTagCloud);
$totalRows_rsTagCloud = mysql_num_rows($rsTagCloud);
$Array = array();
do {
$tag = $row_rsTagCloud['tag'];
$ Array []=$tag;
} while ($row_rsTagCloud = mysql_fetch_assoc($rsTagCloud));

Instalação da classe TagCloud Maker

Agora como já temos as tags inseridas em uma Array vamos instalar o TagCloud Marker

<?php
require_once('TagCloud.php'); /* Localização da Classe */
$o = new Cal_TagCloud($Array); /* Chama a classe passando a array com as tag */
$o->setSpacer(" ") /* Elemento que vai separar as tag */
->setMaxTags(25) /* Qunatidade de Tags que serão mostrada */
->setShowScore('score')
->setLink('http://www.marceloramos.blog.br/tutorial/buscar_tag.php?tag=%s') /* Paginá que realizará a busca das tag */
->buildCloud();
?>
<div id="tag_cloud">
<?php echo $o->outputCloud; ?>
</div>

Para exibir as tags em tamanho diferentes basta apenas inserir essa folha de estilo, a classe vai selecionar automaticamente os estilos para cada tag exibida

/* Nuvem de Tag */
.tagcloud_1 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .3;
font-size: 8pt;
line-height: 18pt;
}
.tagcloud_2 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .4;
font-size: 9pt;
line-height: 18pt;
}
.tagcloud_3 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .4;
font-size: 10pt;
line-height: 18pt;
}
.tagcloud_4 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .5;
font-size: 11pt;
line-height: 18pt;
}
.tagcloud_5 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .5;
font-size: 12pt;
line-height: 18pt;
}
.tagcloud_6 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .6;
font-size: 13pt;
line-height: 18pt;
}
.tagcloud_7 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .7;
font-size: 14pt;
line-height: 18pt;
}
.tagcloud_8 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .8;
font-size: 15pt;
line-height: 18pt;
}
.tagcloud_9 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .9;
font-size: 16pt;
line-height: 18pt;
}
.tagcloud_10 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
font-size: 17pt;
line-height: 18pt;
}

Qualquer dúvida envie um email para marcelo@marceloramos.blog.br ou acesse meu blog www.marceloramos.blog.br

Coluna Dreamweaver – Boxes e listas arrastáveis com ajax

Introdução

É muito fácil e rápido criar boxes e listas arrastáveis utilizando a biblioteca ToolMan, que foi desenvolvida pelo Tim Taylor e não possui nenhuma restrição a sua utilização. O ToolMan utiliza Java script não-obstrutivo e todos seus arquivos pesam apenas 20Kb. São utilizados para criar boxes e listas; arrastáveis, editáveis e auto-ordenáveis. O Blog BeNLOG adaptou o ToolMan para trocar itens entre listas diferentes, veja um exemplo de listas arrastáveis, boxes arrastáveis e listas arrastáveis que trocam itens.

Conceitos

Para utilizar o ToolMan é necessario: (1º) criar uma variável tendo como valor a identificação do elemento que será arrastado (var nome_da_variável = document.getElementById(“id_da_div“)), (2º) digitar o comando para executar o TollMan, sendo seu valor a variável que foi criada (drag.createSimpleGroup(nome_da_variável_que_você_criou)) e caso queira, (3º) digitar o comando para limitação ou restrição, que pode ser: somente na vertical, horizontal ou entre diversas outras citadas abaixo.

Pré-requisito

Arquivos para os boxes: core.js (1k), events.js (1k), css.js (1k), coordinates.js (4k), drag.js (7k).
Arquivos para as listas: dragsort.js (2k), cookies.js (1k) mais os de cima
Arquivos para as listas que trocam os itens: coordinates.js (3k), drag.js (7k) e dragdrop.js (6k)

Conteúdo

Boxes arrastáveis

Primeiro inclua os arquivos; core.js, events.js, css.js, coordinates.js, drag.js dentro da tag HEAD.

<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/core.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/events.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/css.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/drag.js”></script>

Crie uma função em Java Script para que ao carregar toda a pagina HTML execute o ToolMan. Dentro dessa função vamos carregar três variáveis do ToolMan

<script language=”JavaScript”>
window.onload = function() {
var group
var coordinates = ToolMan.coordinates()
var drag = ToolMan.drag()
}
</script>

Ainda dentro do código Java Script é necessário criar as variáveis de configuração dos boxes. Cada tipo de box requer um configuração, veja abaixo as disponíveis:

Box Drag

O Box Drag fica solto na tela podendo ser arrastado para qualquer lugar. Para utilizá-lo, crie uma variável tendo como valor a identificação do elemento (var boxDrag = document.getElementById(“id_da_div_boxDrag“)) nessa caso a variável vai se chamar boxdrag, digite o comando para executar o ToolMan e coloque como valor desse comando a variável que você criou, ficando assim: drag.createSimpleGroup(boxDrag)

var boxDrag = document.getElementById(“id_da_div_boxDrag“)
drag.createSimpleGroup(boxDrag)

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxDrag”>
<p>Conteúdo</p>
</div>

Box Vertical

O Box Vertical pode se arrastado somente na vertical. Para utilizá-lo, crie uma variável (boxVerticalOnly) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada, e informe a limitação group.verticalOnly(), ou seja, arrasta somente na vertical.

var boxVerticalOnly = document.getElementById(“id_da_div_boxVertical“)
group = drag.createSimpleGroup(boxVerticalOnly)
group.verticalOnly()

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxVertical”>
<p>Conteúdo</p>
</div>

Box Horizontal

O Box Horizontal é o contrario do Box Vertical e poderá se arrastado somente na horizontal. Para utilizá-lo, crie uma variável (boxHorizontalOnly) sendo o seu valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e informe a limitação group.horizontalOnly(), ou seja, arrastar somente na horizontal.

var boxHorizontalOnly = document.getElementById(“id_da_div_boxHorizontal“)
group = drag.createSimpleGroup(boxHorizontalOnly)
group.horizontalOnly()

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxHorizontal”>
<p>Conteúdo</p>
</div>

Box Handle

O Box Handle é semelhante ao Box Drag mais para arrastá-lo é necessário definir uma área dentro do box, onde somente clicando nela será possível arrastá-lo. Crie uma variável (boxHandle) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e a identificação do elemento que será a área que vai arrastá-lo, separados pela virgula (,).

var boxHandle = document.getElementById(“id_da_div_boxHandle“)
group = drag.createSimpleGroup(boxHandle, document.getElementById(“id_da_area_handle”))

Crie uma DIV nome com os IDs sendo igual ao informado na variável

<div id=”id_da_div_boxHandle”>
<div id=”id_da_area_handle”>Área Arrastavel</div>
<p>Box Handle</p>
<p>Clique na área arratavel e arraste para qualquer lugar</p>
</div>

Box Region Constraint

Nesse tipo de box é possível definir uma área limite para arrastar o box. Crie uma variável (boxRegionConstraint)com o valor sendo a identificação do elemento, e digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada.

var boxRegionConstraint = document.getElementById(“id_da_div_boxRegionConstraint“)
group = drag.createSimpleGroup(boxRegionConstraint)

Crie outra variável para delimitação das margim, insira em pixes dentro dos parênteses na primeira linha.

var origin = coordinates.create(0, 0)
group.addTransform(function(coordinate, dragEvent) {

Copie o cole essa variável para delimitação de qual lado poderá ser arrastado.

var originalTopLeftOffset =
dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
return coordinate.constrainTo(origin, originalTopLeftOffset)
})

Crie uma DIV nome com o ID sendo igual ao informado na variável.

<div id=”id_da_div_boxRegionConstraint”>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Box com posição fixa

É possível criar um box com uma posição fixa que se movimente por uma linha na horizontal ou vertical. Crie uma variável tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada e informe como limitação que sua movimentação será somente na horizontal (group.horizontalOnly()) ou vertical (group.verticalOnly()) na terceira linha do código JS.

var boxAbsolute = document.getElementById(“id_da_div_boxAbsolute”)
group = drag.createSimpleGroup(boxAbsolute)
group.verticalOnly()

Agora adicione o código abaixo, que fara o resto

group.addTransform(function(coordinate, dragEvent) {
var scrollOffset = coordinates.scrollOffset()
if (coordinate.y < scrollOffset.y)
return coordinates.create(coordinate.x, scrollOffset.y) var clientHeight = coordinates.clientSize().y
var boxHeight = coordinates._size(boxAbsolute).y
if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
return coordinates.create(coordinate.x,
(scrollOffset.y + clientHeight) – boxHeight)

return coordinate
})

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxAbsolute “>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Listas

Lista auto-ordenáveis

Agora aprenderemos a criar lista arrastáveis e auto-ordenáveis, ou seja, que se arrastam e se encaixam perfeitamente, e o melhor e que ele vai armazenar a seqüência de ordenamento em um cookie. Assim a eqüência será armazenada para visitas futuras do usuário. Para executar essa função é necessário incluir além dos que já foram incluídos anteriormente mais dois arquivos JS: dragsort.js e cookies.js.

<script language=”JavaScript” type=”text/javascript” src=”dragsort.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”cookies.js”></script>

Crie um bloco de código de Java Script e informe a identificação do UL e da LI da lista. Inicie criando as variáveis do ToolMan, só que agora para utilizar o Drag Sort.

<script language=”JavaScript” type=”text/javascript”><!–
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer() //–>
</script>

Ainda dentro do bloco de código crie uma função para que ao carregar toda a pagina html execute o ToolMan Drag Sort. Dentro dessa função vamos carregar as variáveis necessárias. Coloque como valor dos comandos junkdrawer.restoreListOrder e dragsort.makeListSortable do ToolMan a indentificação do UL da lista conforme mostrado abaixo em negrito, para que a posição da lista seja gravada e possa se arrastada.

window.onload = function() {
junkdrawer.restoreListOrder(“id_da_lista“) dragsort.makeListSortable(document.getElementById(“id_da_lista”),
saveOrder)

}

Agora digite essa função responsavel pelo armazenamento e ordenamento da lista

function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute(“id”)
if (id == null) return
group.register(‘dragend’, function() {
ToolMan.cookies().set(“list-” + id,
junkdrawer.serializeList(list), 365)
})
}

E pronto.

Listas auto-ordenáveis que podem ser trocados os itens entre si

Baseado no ToolMan do Tim Taylor o Blog BeNLOG adaptou o script para que os itens das listas se auto-organizem e possam ser trocados de uma lista para outra. Para isso é necessário apenas três arquivos JS que foram atualizado para suporta essa função e pesam apenas 16Kb, e que também não é obstrutivo.

<script language=”JavaScript” type=”text/javascript” src=”coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”drag.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”dragdrop.js”></script>

Iniciaremos criando um bloco de código de Java Script que inicie a função (window.onload) assim que a página for carregada. Crie uma variável (var list) e digite seu valor sendo a identificação da lista (document.getElementById(“id_da_lista”)) e escreva o comando para que seja criado a movimentação das listas (DragDrop.makeListContainer( list );) tendo como valor a variável que foi criada. É possível também executar dois eventos; um quando a lista inicia o arrastamento (list.onDragOver) e outro quando termina (list.onDragOut). Nesse exemplo vamos alterar o cor de fundo (function() { this.style["background"] = “#EEF”; }) quando o usuario for mover a lista. Faça o mesmo na outra lista, crie uma variável (list) e passe a indetificaçãoo da lista (document.getElementById(“id_da_lista2″);), execute o comando para que seja criado a movimentação das listas e adicione outros eventos.

<script language=”JavaScript” type=”text/javascript”><!–
window.onload = function() {
var list = document.getElementById(“id_da_lista“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };

list = document.getElementById(“id_da_lista2“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };
};
//–>
</script>

Considerações Finais

Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO

Qualquer dúvida envie um email para ramos.marcelosouza@gmail.com ou acesse o nosso fórum

]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/boxes_e_listas_arrastaveis/feed/ 1 http://www.mxstudio.com.br/desenvolvimento/dreamweaver/paineis_sanfonados_com_ajax/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/paineis_sanfonados_com_ajax/#comments Mon, 22 Oct 2007 00:00:00 +0000 Marcelo Ramos

Coluna Dreamweaver – Sistema de enquete com ajax e sem banco de dados – Parte 1

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Arquivo js do Spry.Utils.submitForm
Arquivo js do SpryData (opcional)

Conceitos

Esse sistema de enquete utiliza Ajax para envio do formulário e atualização do resultado . Não necessitar de banco de dados, pois será utilizado ficheiro em TXT para armazenar os resultados. E utilizará um cookie para que o usuário vote apenas uma vez. Veja a enquete em funcionamento

Conteúdo

Crie uma nova página e salve com o nome de config.php. Essa página vai armazenar a pergunta e as opções de resposta que serão utilizadas na enquete, assim quando for mudar o tema da enquete, vai ser necessário apenas mudar esse arquivo. Para armazenar as perguntas e opções, utilizaremos a função define()para definir uma constante. Uma constante é um identificador (nome) para um único valor. Como o nome sugere esse valor não pode mudar durante a execução do script. Para utilizar o comando define() é necessário dois argumentos, o primeiro é o nome da constante e o segundo é o valor.
define(NOME_DA_CONSTANTE,? VALOR?)
Então vamos defini a pergunta como ?De onde você acessar o site?? ficando a declaração assim: define(PERGUNTA,? De onde você acessar o site??) e o mesmo para a primeira opção (define(OPCAO1,?Casa?)) e para a segunda opção, terceira e quarta. O Código dessa página desse ser assim:
<?php
define(ERGUNTA,’De onde você acessar o site?’);
define(OPCAO1,’Casa’);
define(OPCAO2,’Trabalho’);
define(OPCAO3,’Escola’);
define(OPCAO4,’Lan House’);
?>
Crie mais uma nova página e salve com o nome de enquete.php. Agora com a página aberta e no modo de visualização no Show Design View, clique na guia Layout e depois no botão Insert Div Tag, para criar uma div.

Na caixa de configuração do Insert Div Tag, coloque apenas a ID da div como enquete

Agora clique na guia Formulários na barra inserir do Dreamweaver.e depois clique no botão Form

No painel de propriedades, localizado na parte inferior do Dreamweaver, coloque como action a página contar_votos.php e o método como POST

Mude o modo de visualização para o modo Show Code View (modo de visualização do código). Dentro da TAG HEAD vamos adicionar o arquivo do Spry SpryUtils.js que será responsável pelo envio do formulário utilizando Ajax.
<script src=”/includes/spry/SpryUtils.js”type=”text/javascript”></script>
Também vamos adicionar o arquivo do Spry SpryData.js para que atualize a enquete com os resultados, sem a necessidade de atualizar a página.
<script src=”/includes/spry/SpryData.js” type=”text/javascript”></script>
Vamos criar uma função chamada updateResponseDiv que será executa após o envio do formulário. Essa função vai atualizar a div carregando o resultado da enquete. A função updateResponseDiv utiliza o Spry.Utils.setInnerHTML que está no arquivo SpryData.js e que já foi incluído anteriormente. Para utilizar o Spry.Utils.setInnerHTML basta apenas informar a div e a requisição
<script type=”text/javascript”>
function updateResponseDiv(req)
{
Spry.Utils.setInnerHTML(‘enquete’, req.xhRequest.responseText);
}
</script>
Dentro da TAG BODY vamos incluir a pagina config.php que contém a pergunta e as opções
<?php include(‘config.php’); ?>
Vamos adicionar a pergunta, para isso basta apenas incluir a constante que está armazenado a pergunta (PERGUNTA).
<?php echo PERGUNTA; ?>
Agora dentro da TAG FORM vamos adicionar quatro Radio Button, um para cada opção da enquete. Primeiro adicione a constante que armazena a primeira opção (OPCAO1).
<?php echo OPCAO1; ?>
Depois adicione o primeiro radio button que deve ter o nome de reponse (name=”reponse” ) e o valor de 0 para a primeira opção(value=”0″).
<input type=”radio” name=”reponse” value=”0″>
E agora consecutivamente adicione a constante que armazena a segunda opção (OPCAO2) e um radio button de valor 1 , a constante com a terceira opção (OPCAO3) e o radio button de valor 2 e a constante com quarta opção (OPCAO4) com radio button de valor 3 . Seu código deve está assim:
<div id=”enquete”>
<?php echo PERGUNTA; ?>
<form id=”form1″ name=”form1″ action=”contar_votos.php” method=”post”>
<?php echo OPCAO1; ?>
<input type=”radio” name=”reponse” value=”0″><br>
<?php echo OPCAO2; ?>
<input type=”radio” name=”reponse” value=”1″><br>
<?php echo OPCAO3; ?>
<input type=”radio” name=”reponse” value=”2″><br>
<?php echo OPCAO4; ?>
<input type=”radio” name=”reponse” value=”3″><br>
</div>
E para finalizar vamos inserir o botão submit para envio do formulário. Só que como vamos enviar o formulário utilizando Ajax, devemos adicionar a chamada da função Spry.Utils.submitForm e passa os três parâmetros de configuração: identificação do formulário, função a ser executada depois do envio e a terceira para opções especiais.
Spry.Utils.submitForm(‘identificacao_do_formulario’, funcao_executada_final, {method:’get’, url:’pagina.php’});
Ficando o botão Submit Assim:
<input name=”Enviar” value=”Enviar” onClick=”Spry.Utils.submitForm(‘form1′, updateResponseDiv, {method:’post’, url:’contar_votos.php’});” type=”button”>
Agora vamos criar um link para que as pessoas possam ver o resultado da enquete
<p style=”cursor:pointer”> <a >Ver resultado</a> ]</p>
Para que os resultados da enquete seja carregado sem a atualização da página vamos utilizar a função Spry.Utils.updateContent, que necessita de dois parâmetros a ID da DIV que será atualizada e a URL da página que vai ser atualizada.
Spry.Utils.updateContent(‘id_da_div’,'pagina.html’);
Como a página que vai armazenar os resultados vai ser chamar resultados.php o link vai ficar assim:
<p style=”cursor:pointer”> [ <a onclick="Spry.Utils.updateContent('enquete','resultado.php');">Ver resultado</a> ]</p>
Na próxima parte continuaremos…

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum ]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/sistema_de_enquete_com_ajax_e_sem_bd___parte_1/feed/ 3 http://www.mxstudio.com.br/desenvolvimento/dreamweaver/envio_de_formulario_com_ajax/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/envio_de_formulario_com_ajax/#comments Fri, 03 Aug 2007 00:00:00 +0000 Marcelo Ramos

Coluna Dreamweaver – Envio de formulário com ajax

Introdução

Salve Pessoal! Tinha prometido que o próximo artigo seria uma galeria de fotos utilizando varios funções do Spry, mais vai ter quer ficar para a próxima, pois achei esse artigo mais importante pois permiter enviar formulário com ajax e é super facíl de utiliza. Veja os exemplo e como funciona clicando aqui

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Arquivo js do Spry.Utils.submitForm
Arquivo js do SpryData (opcional)

Conceitos

Com Framework Spry é possível enviar um formulário sem a necessidade de atualizar a página atual. Isso é possível utilizando a função Spry.Utils.submitForm que necessita apenas da inclusão do arquivo JS e o adicionamento de um comportamento para a chamada da função. O comportamento responsável pela chamada pode ser adicionado no próprio formulário ou utilizado outros elementos HTML.
Com a função Spry.Utils.submitForm é possível realizar cadastro em banco de dados, fazer a requisição dos dados e ainda visualizar o resultado do formulário na própria página sem a necessidade de ser atualizada.
O Spry.Utils.submitForm têm três parâmetros de configuração: identificação do formulário, função a ser executada depois do envio e a terceira para opções especiais. Suporta os métodos POST e GET. Formulários que têm enctype=”multipart/form-data” são submetidos usando default do comportamento do browser. Suporta PHP, ASP e Coldfusion

Conteúdo

Para enviar o formulário faça a inclusão do arquivo SpryUtils.js dentro da TAG Head.

<script src=”/SpryUtils.js”type=”text/javascript”></script>

E depois adicione a chamada da função e pronto.

Spry.Utils.submitForm(‘identificacao_do_formulario’, funcao_executada_final, {method:’get’, url:’pagina.php’});

Veja como ficaria se a chamada fosse adicionada dentro do formulário no evento onClick

<input name=”teste” value=”Enviar” onclick=”Spry.Utils.submitForm(‘form’, updateResponseDiv2, {method:’post’, url:’pagina.php’});” type=”button”>

Veja como ficaria se a chamada fosse adicionada em um link de texto

<a onclick=”Spry.Utils.submitForm(‘form1′, updateResponseDiv, {method:’post’, url:’enviar.php’}); “>Enviar Formulário </a>

Carregar os dados dos formulários na propria página
Para que os dados do formulário sejam carregados dentro da própria pagina, igual ao exemplo vamos criar uma função que será executa após o envio, essa função vai atualizar o conteúdo da DIV (response_form1) com o conteúdo da página (pagina.php) que recebeu os dados do formulário.
A função updateResponseDiv utiliza o Spry.Utils.setInnerHTMLé responsável pelo retorno do dados na própria página sem a necessidade de atualização. Para utilizá-la e necessário incluir o arquivo SpryData.js dentro da tag HEAD

<script src=”.. /SpryData.js” type=”text/javascript”></script>

E depois chamar a função Spry.Utils.setInnerHTML passando dois parametros: a DIV que será atualizada e a função utilizada

<script type=”text/javascript”> function updateResponseDiv(req) { Spry.Utils.setInnerHTML(‘response_form1′, req.xhRequest.responseText); } </script>

Agora vamos chamar a função Spry.Utils.submitForm:

<form name=”form1″ method=”post” action=”pagina.php” onsubmit=”return Spry.Utils.submitForm(this, updateResponseDiv);”>

A chamada da função foi adicionada no onSubmit que realizara o envio do próprio formulário e retornará na própria página os dados que foram submetidos. Para isso foi declarado dois parâmetros, a identificação do formulário que é o próprio (this) e a função updateResponseDiv
Caso você queira somente enviar determinados campos do formulário a chamada deve ser:

Spry.Utils.submitForm(‘identificacao_do_formulario’ funcao_executada_final, {elements: ['id_do_campo1', 'id_do_campo2']});

Para enviar o formulário com variáveis terceiro parâmetro deve ser adicionado a string ‘additionalData’ informando as variaveis ‘variavel=valor’ assim:

Spry.Utils.submitForm(‘identificacao_do_formulario’ , funcao_executada_final, {url:’pagina.php’, additionalData:’ajaxSubmit=true&from=samples’

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br ou acesse o nosso fórum ]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/envio_de_formulario_com_ajax/feed/ 3 http://www.mxstudio.com.br/desenvolvimento/dreamweaver/auto_sugestao/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/auto_sugestao/#comments Wed, 25 Jul 2007 00:00:00 +0000 Marcelo Ramos

Coluna Dreamweaver – Auto Sugestão

Introdução

Salve Pessoal! Nesse tutorial vamos aprender a utilizar o Auto Sugestão do Framework Spry e no próximo vamos fazer uma galeria de fotos utilizando tudo que vimos até agora. Para ver um exemplo clique aqui.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui, e os arquivos SpryAutoSugestão.js , SpryAutoSugestão.css e products.xml

Conceitos

O Spry.Widget.AutoSuggest permite que seja visualizado uma sugestão de nomes conforme o usuário for preenchendo um formulário. Para configura o Spry.Widget.AutoSuggest são necessário quatro valores e mais um adicional para opões especiais como por exemplo limitar a quantidade de resultado exibidos e ou, ativar o auto sugestão somente quando digitado um mínimo de caracteres.

Conteudo

Criando um XML Data Set
Crie e salve uma nova página, pode ser em qualquer formato, não se esqueça de fazer o download do arquivos XML. Com a página aberta e salva clique na Guia Spry da Barra Inserir do dreamweaver, e depois clique no botão Spry XML Data Set, e uma nova janela se abrirá para que seja configurado o XML Data Set.

Configuração do Spry XML Data Set:
Data Set Name: Nome do conjunto de dados (Data Set), vamos dar o nome de dsAutoSugestao.
XML Source: Local onde está salvo o arquivo XML, clique no botão Browse para localizar o arquivo.
Botão Get schema: Botão para extrair a estrutura do arquivo XML e exibir na caixa Row element, clique nele.
Caixa Row element: Caixa para exibir a estrutura do arquivo XML, onde poderá ser selecionada as tags que serão utilizadas, em nosso exemplo vamos selecionar a tag product que esta dentro da tag principal também chamada products.
XPath: exibir o caminho da tag selecionada, clique no botão Preview para visualizar os dados que estão dentro dentro da tag selecionada, em nosso exemplo deve está products/product
Data Set columns: Exibir as colunas que estão dentro da tag selecionada e qual o tipo de dados das colunas, para alterar o tipo de dados utilize a caixa Data type
Data type: Classifica os tipo de dados podendo ser, uma string, um numero, uma data o um link de imagen.
Pronto Clique no botão OK para fachar a janela

Vamos criar uma DIV onde será colocado o formulário. Na Barra Inserir do Dreamweaver, selecione a Guia Layout e depois no botão Insert Div Tag,

Na janela de configuração da DIV coloque como ID o nome autosugetao

Agora dentro da DIV vamos adicionar o formulário. Na Barra Inserir selecione a Guia Formulario e clique no botão Form

Agora na Barra Inserir clique no Botão Text Field, e a janela de configuração do campo Text Field vai se abrir

Na janela de configuração coloque a ID eo Label com o nome de produto

No painel Application clique na Guia Bindings e veja se o Data Set dsAutoSugestao esta aberto exibindo as colunas, caso não esteja clique no sinal de mais que esta a direita do Data Set dsAutoSugestao para que seja mostrada as colunas. Clique na coluna name que esta armazenando os nomes dos software da adobe e arraste para dentro do formulario

Selecione o {name} que foi acabado de ser adicionado no formulário e na Barra Inserir selecione a Guia Spry e clique no botão Spry Region, para inserir uma região do Spry, e a janela de configuração do Spry Region vai se abrir.

Container: Local onde será inserido a região, escolha a opção Div ou seja a região ficará dentro da div
Type: Tipo de região, escolha a opção Region
Spry Data Set: Data Set de onde será extraído os dados, selecione o Data Set dsAutoSugestao
Selecione novamente o campo {name} e na Barra Inserir do dreamweaver selecione a Guia Spry e clique no botão Spry Repeat, para inserir uma região de repetição do Spry, mostrando assim todos os nomes que estão no arquivo XML, e a janela de configuração do Spry Repeat vai se abrir.

Container: Local onde será inserido a região de repetição, escolha a opção Div ou seja a região ficará dentro da div
Type: Tipo de região, escolha a opção Repeat
Spry Data Set: Data Set de onde será repetido os dados, selecione o Data Set dsProducts
Agora mude a visualização para o modo de visualização do código, e a partir daqui vai ser tudo na unha. Vamos primeiro adiciona o arquivo JSpryAutoSuggest.js dentro da tag Head
<script language=”JavaScript” type=”text/javascript” src=”./includes/spry/SpryAutoSuggest.js”></script>
Ainda com o Dreamweaver no modo de visualização do código, localize a div criada para adicionar a região e acrescente a tag ID com o valor de regiao_dataset e depois na DIV criada para repetição adicione o comando spry:suggest e como valor coloque o campo {name}
<div id=”autosugestao”>
<form id=”form1″ name=”form1″ method=”Post” action=”">
<label>Produto</label>
<input type=”text” name=”Produto” id=”Produto” tabindex=”1″ />
<div id=”regiao_dataset” spry:region=”dsAutoSugestao”>
<div spry:repeat=”dsAutoSugestao” spry:suggest=”{name}”>{name}</div>
</div>
</form>
</div>
Dentro da DIV de repetição tem o campo {name}, coloque ele dentro de outra DIV com a classe list
<div id=”autosugestao”>
<form id=”form1″ name=”form1″ method=”Post” action=”">
<label>Produto</label>
<input type=”text” name=”Produto” id=”Produto” tabindex=”1″ />
<div id=”regiao_dataset” spry:region=”dsAutoSugestao”>
<div spry:repeat=”dsAutoSugestao” spry:suggest=”{name}”><div class=”list”>{name}</div></div>
</div>
</form>
</div>
Agora vamos criar uma variável que vai ser reponsável de chamar o Spry.Widget.AutoSuggest e lhe passar os valores de configuração. Inicie um novo bloco de código para JavaScript e adicione uma nova variável (var) de nome as1 (as1) e com o valor igual (=) a uma nova (new) Spry.Widget.AutoSuggest e com o seu valor sendo primeiro a ID da DIV onde está armazenado o formulario (autosugestao), depois a ID da DIV onde está a regiao do DataSet do Spry (regiao_dataset), depois o nome do Data Set Xml (dsAutoSugestao) e por ultimo o nome do campo que será repetido (name)
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’);
</script>
Para limitar o resultado exibidos pelo Spry.Widget.AutoSuggest acrescenter como ultimo valor o comando {containsString: true, maxListItems: 3}, ou seja será mostrado somente 3 resultados
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’, {containsString: true, maxListItems: 3});
</script>
Para ativar o auto sugestão somente quando for digitado uma certa quantidade de caracters acrescenter como ultimo valor o comando {containsString: true, minCharsType: 3}, ou seja será mostrado somente quando forem digitado no minimo 3 caracteres
<script type=”text/javascript”>
var as1 = new Spry.Widget.AutoSuggest(‘autosugestao’, ‘regiao_dataset’, ‘dsAutoSugestao’, ‘name’, {containsString: true, minCharsType: 3});
</script>

Considerações Finais

Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum ]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/auto_sugestao/feed/ 0 http://www.mxstudio.com.br/desenvolvimento/dreamweaver/animacoes_com_o_effects_do_framework_spry/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/animacoes_com_o_effects_do_framework_spry/#comments Thu, 05 Jul 2007 00:00:00 +0000 Marcelo Ramos

Coluna Dreamweaver – Framework Spry: Effects

Introdução

Salve Pessoal! Recebi alguns e-mail querendo algo mais complexo, que possa integrar as varias funções do Spry. Mais para que possamos fazer isso devemos conhecer antes todas as funções do Spry. Vale ressalta também a dificuldade em encontrar documentação sobre a utilização do Spry pelo Dreamweaver. Então nesse tutorial vamos conhecer o Effects do Spry, fiz alguns exemplos que podem ser visto clicando aqui.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui

Conceitos

O Effects é um conjunto de efeitos visuais do Frameworks Spry, que pode ser adicionado em diversos elementos do HTML. No Dreamweaver os efeitos podem ser adicionados no modo Design, sem a necessidade de trabalhar diretamente com código, falicitando ainda mais a adição desses efeitos. O Effects fica localizado no Painel de Behaviors (Windows > Behaviors) como um comportamento normal, podendo ser ativado com diversos eventos.

Conteúdo

Appear/ Fade

Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela. Pode usar este efeito com todos os objetos do HTML exceto o applet, body, iframe, tr, tbody, ou th.Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Appear/Fade. A janela de configuração do efeito fade ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milissegundos.
Effect: Tipo de efeito podendo ser o Fade onde a camada vai sumindo aos poucos, ou Appear onde a camada vai aparecendo.
From: Tamanho da camada em porcentagem quando o efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito terminar

Blind

Esse efeito faz a camada selecionada subir ou descer lentamente semelhante a uma cortina que sendo aberta ou fechada. Pode ser usado somente com estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, ou pré. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Blind. A janela de configuração do efeito Blind vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou Blind Down aonde a camada vai descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.

Grow/ Shrink

Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, o pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Grow/ Shrink. A janela de configuração do efeito Grow/ Shrink vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou Shrink aonde a camada vai diminuir na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
To: Para que local a camada deve ir quando o efeito for selecionado podendo ser ao centro ou a esquerda superior.

Shake

Esse efeito faz o elemento selecionado dar uma tremida. Você pode usar este efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, ou table. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Squish

Esse efeito faz o elemento selecionado desaparecer. Você pode usar este efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Squish. A janela de configuração do efeito Squish vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Slide

Esse efeito faz uma transição podendo ser para cima ou para baixo. Você pode usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or cente. Esse efeito requer uma única tag ID e os efeitos dentro do elemento com tag ID. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos
Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide Down aonde a camada vai descendona tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar

Highlight

Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado com todos os objetos do HTML exceto o applet, body, frame, frameset, ou noframes. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Highlight. A janela de configuração do efeito Highlight ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente durante a duração do efeito

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum ]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/animacoes_com_o_effects_do_framework_spry/feed/ 0