ajax
TRANSCRIPT
AJAX = Asynchronous JavaScript e XML.
Pergunta: Ajax é uma linguagem de programação?
Resposta: Não. AJAX não é uma nova linguagem de programação, mas uma nova maneira de usar padrões
existentes.
AJAX é a arte de trocar dados com um servidor, e atualizar partes de uma página da web – sem recarregar a página
inteira.
Pergunta: Ajax é fácil de aprender ?
Resposta: Sim. Ajax é uma técnica , que em poucos dias pode ser dominada , pois basea-se em padrões existentes.
O Ajax é baseado nos seguintes padrões de Web Standards
Javascript
Xml
Html
Css
Uma pessoa que já possui conhecimentos básicos de php , html ,xml, css e claro javascript dominarão o ajax
facilmente. Contudo , se você não possui conhecimentos destas tecnologias aconselho que visite ascategorias
relacionadas aqui do site ou visite nosso Campus Online clicando aqui.
Ajax é independente da plataforma. Os padrões Web Standards usados em Ajax são suportados pelos principais
browsers.
A ae vamos começar nosso curso de ajax ?
Aguardo vocês na próxima aula , onde iremos falar sobre o Objeto XMLHttpRequest. Mas o que esse objeto faz carlos
? Ele é responsável por enviar a resposta para o servidor sem o carregamento da página [...]
Curso Ajax – Aula 02 – O objeto XMLHTTP e o Objeto XMLHttpRequestCARLOSCX ALBERT 6 DE SETEMBRO DE 2012 3
Como fazer um pedido HTTP?
Para se fazer um pedido HTTP ao servidor usando JavaScript, você precisa de uma instância, ou seja, uma classe que
disponibiliza essa funcionalidade.
Tal classe foi primeiro introduzida no Internet Explorer sob a forma de um Objecto ActiveX ( para IE5 e IE6 =
ActiveXObject ) chamado XMLHTTP.
Então o IE7 +, Firefox, Chrome, Safari e Opera seguiram-se, implementando uma classe de
nomeXMLHttpRequest que suportava os métodos e as propriedades do Objecto ActiveX original da Microsoft
{ ActiveXObject(“Microsoft.XMLHTTP”) }.
Agora que vocês entenderam como funciona o pedido HTTP , vamos criar nossa primeira instância multiplataforma:
1 <script type="text/javascript">
2 if (window.XMLHttpRequest) { // IE7+,Mozilla, Safari,Chrome ...
3 xmlhttp = new XMLHttpRequest();
4 } else if (window.ActiveXObject) { // IE5 ou IE6
5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
6 }else{
7 alert ("Seu navegador não tem suporte para ajax.");
8 }
9 </script>
Explicando: Com o código acima estou verificando se meu navegador suporta o XMLHttpRequest , caso contrário ele
verifica se é Internet explorer versão 5 ou 6 , e tenta utilizar o objeto ActiveX (ActiveXObject) , contudo se passa
também desta verificação é alertado para o usuário que o navegador do próprio não suporta o ajax.
Observação: Algumas versões de alguns browsers Mozilla não irão funcionar bem se a resposta do servidor não
possuir um cabeçalho mime-type XML. Para satisfazer isto, você pode usar uma chamada extra a um método para
ultrapassar o cabeçalho enviado pelo servidor, só no caso de o formato recebido não ser do tipo text/xml.
Exemplo:1 <script type="text/javascript">
2 xmlhttp = new XMLHttpRequest();
3 xmlhttp .overrideMimeType('text/xml');
4 </script>
Para aqueles que fugiram da aula de inglês o nome já diz.
override = ultrapassar
Ou seja, ultrapassarMimeType. Isso faz com que o navegador ignore , caso o formato do mime não seja text/xml.
A próxima coisa a ser feita é decidir o que quer fazer após receber a resposta do servidor ao seu pedido. Nesta etapa
só precisa de dizer ao objeto HTTP que a função JavaScript irá processar a resposta. Isto é feito definindo a
propriedade onreadystatechange do objeto ao nome da função JavaScript que pretende utilizar, tipo assim:
1 <script type="text/javascript">
2 xmlhttp .onreadystatechange = nome_da_funcao;
3 </script>
Note-se no exemplo abaixo que não existem nomes chaves após a chamada da função e também não são passados
parâmetros. Em vez de dar um nome a uma função, você pode usar a técnica JavaScript de definir funções “à pressão”
e definir as ações que vão processar a resposta logo, ficaria assim:
1 <script type="text/javascript">
2 xmlhttp .onreadystatechange = function(){
3 // execução do código aqui
4 };
5 </script>
De seguida, após ter declarado o que vai acontecer você deve receber a resposta, você precisa de finalizar o pedido.
Precisa de chamar os métodos open() e send() da classe XMLHTTP.
Curso Ajax – Aula 03 – Enviando uma solicitação para o servidor Open() e Send()CARLOSCX ALBERT 6 DE SETEMBRO DE 2012 0
Para enviar uma solicitação para um servidor, usamos os métodos do objeto XMLHttpRequest open () e send ().
Veja o exemplo:
1 <script type="text/javascript">
2 var valor_nome = document.getElementById("nome").value;
3xmlhttp.open("GET", "http://www.escolacompleta.com/arquivo_teste.php?nome="+valor_nome , true);
4 xmlhttp.send();
5 </script>
1 – O primeiro parâmetro da chamada do método open() é o método pedido HTML – GET, POST, HEAD ou outro
método qualquer que queira usar e que seja suportado pelo seu servidor. Mantenha o nome do método em maiúsculas
para obedecer às normas HTTP , caso contrário certos browsers (como o Firefox) podem não processar o pedido.
Para obter mais informação sobre os possíveis métodos de pedido HTTP você pode dar uma olhada emW3C specs.
2 – O segundo parâmetro é a URL da página que está a enviar os dados. Como medida de segurança, não pode
efetuar pedidos de páginas de domínios externos.
Certifique-se que usa o nome exato do domínio em todas as suas páginas ou irá receber um erro de “Permissão
Negada” quando efetuar uma chamada open(). Um erro comum é utilizar o seudominio.com ao mesmo tempo que
tenta chamar páginas com www.seudominio.com
3 – O terceiro parâmetro define se o pedido é assíncrono. Se TRUE, a execução da função JavaScript irá continuar
enquanto que a resposta do servidor ainda não foi recebida. Isto é o A de AJAX.
O parâmetro do método send() pode ser constituido por quaisquer dados que pretenda enviar ao servidor.
Para enviar pedidos com o método (POST) os dados devem ser armazenados a uma variável mestra( essa variável irá
funcionar como um array por exemplo).
exemplo:
1 <script type="text/javascript">
2 var valor_nome = document.getElementById("nome").value;
3 var valor_sobrenome= document.getElementById("sobrenome").value;
4 var campos = "nome="+valor_nome+"&sobrenome="+valor_sobrenome;
5 </script>
Note-se que para enviar dados com o método (POST) você deve alterar o tipo MIME do pedido usando a seguinte
linha:
1xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Caso contrário o servidor irá ignorar os dados enviados via método (post).
Exemplo de utilização do RequestHeader:
1 <script type="text/javascript">
2 var valor_nome = document.getElementById("nome").value;
3xmlhttp.open("POST", "http://www.escolacompleta.com/arquivo_teste.php", true);
4xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');/*linha chave para o método POST*/
5 xmlhttp.send("nome="+valor_nome);
6 </script>
Fica a pergunta. Qual eu devo utilizar ? GET ou POST?
GET é mais simples e mais rápido do que o POST, e pode ser utilizado na maioria dos casos.
No entanto, sempre use solicitações POST quando:
1 – Quando arquivo em cache não é uma opção. Ex: atualizar o banco de dados do servidor
2 – O envio de uma grande quantidade de dados para o servidor (POST não tem limitações de tamanho, já o GET
tem.)
3 – Envio de dados do usuário (que pode conter caracteres privados como senha ou código de algum produto), o
POST é mais robusto e seguro do que o GET
Bom.. este foi o final deste tópico pessoal. No decorrer do curso veremos individualmente como utilizar os
métodos POST E GET.
Curso Ajax – Aula 04 – Obtendo Resposta do ServidorCARLOSCX ALBERT 6 DE SETEMBRO DE 2012 1
Para obter a resposta de um servidor, use o a propriedade responseText ou a propriedade responseXMLdo objeto
XMLHttpRequest.
Resultado e diferenças:
responseText – retorna os dados de resposta como uma string
responseXML - retorna os dados de resposta como um XML de dados
Continuando apartir de nosso curso [...] Lembre-se que quando estava a enviar o pedido, você providenciou o nome de
uma função JavaScript que é criada para lidar com a resposta.
veja como ficou na aula passada:
1 <script type="text/javascript">
2 xmlhttp.onreadystatechange = function(){
3 }
4 </script>
Vamos ver o que esta função deve fazer. Primeiro, a função precisa de verificar o estado do pedido. Se o estado
possui o valor 4, isso significa que a totalidade da resposta do servidor foi recebida e que pode continuar a processá-la
à vontade.
Exemplo:
1 <script type="text/javascript">
2 xmlhttp.onreadystatechange = function(){
3 if (xmlhttp.readyState == 4) {
4 /*tudo certo, a resposta foi recebida com sucesso. Continua a executar o script aqui.*/
5 } else {
6 /*ainda não está pronto, a resposta ainda não foi recebida. É alertado um error para o usuário!*/
7 }
8 }
9 </script>
A lista completa dos valores readyState é a seguinte:
0 = não iniciada
1 = iniciando conexão
2 = conexão estabelecida
3 = em atividade (algum dado foi recebido)
4 = completa
A próxima etapa a verificar é o código do estado da resposta HTTP do servidor. Todos os códigos possíveis estão
listados na página W3C. Para os nossos objetivos nós só estamos interessados na resposta “200″ que é igual a “OK”.
Exemplo:
01 <script type="text/javascript">
02 xmlhttp.onreadystatechange = function(){
03 if (xmlhttp.readyState == 4) {
04 /*tudo certo, a resposta foi recebida com sucesso.*/
05 if (xmlhttp.status == 200) {
06 // perfeito! resposta = ok
07 } else {
08 // houve um problema com o pedido,
09 // por exemplo, a resposta pode ser um 404 (não encontrado)
10 // ou 500 (Internal Server Error) códigos de resposta
11 }
12 } else {
13 /*ainda não está pronto, a resposta ainda não foi recebida.*/
14 }
15 }
16 </script>
Depois de verificar o estado do pedido e o código do estado HTTP da resposta, compete-lhe a si fazer aquilo que quer
fazer com os dados que o servidor lhe enviou.
Você tem duas opções para receber esses dados:
xmlhttp.responseText – irá devolver a resposta do servidor como uma linha de texto(string)
xmlhttp.responseXML – irá devolver a resposta do servidor como um objecto XMLDocument que pode ser percorrido
utilizando as funções DOM do JavaScript.A propriedade responseText
Se a resposta do servidor não é XML, use a propriedade responseText.
A propriedade responseText retorna a resposta como uma string, e você pode ser utilizado em conformidade.
Exemplo:
1 <script type="text/javascript">
2document.getElementById("div_mostra_resposta").innerHTML=xmlhttp.responseText;
3 </script>
A propriedade responseXML
Se a resposta do servidor é XML, e pretende analisá-lo como um objeto XML, use a propriedade responseXML.
Exemplo:
Iremos retornar dados de um documento XML semelhante ao padrão listado abaixo:
DOCUMENTO.XML
01 < ?xml version="1.0" encoding="ISO-8859-1"?>
02 <!--Editado por CarlosCX® -->
03 <catalogo>
04 <cd>
05 <titulo>Empire Burlesque</titulo>
06 <artista>Bob Dylan</artista>
07 <localidade>USA</localidade>
08 <companhia>Columbia</companhia>
09 <preco>10.90</preco>
10 <ano>1985</ano>
11 </cd>
12 <cd>
13 <titulo>Coração escondido</titulo>
14 <artista>Tim coook Pire</artista>
15 <localidade>UK</localidade>
16 <companhia>ACB Records</companhia>
17 <preco>9.90</preco>
18 <ano>1988</ano>
19 </cd>
20 <cd>
21 <titulo>Grandes Noites</titulo>
22 <artista>Petter Jonh</artista>
23 <localidade>USA</localidade>
24 <companhia>RLO</companhia>
25 <preco>9.90</preco>
26 <ano>1982</ano>
27 </cd>
28 <cd>
29 <titulo>Os locais do azul</titulo>
30 <artista>Gory Moore</artista>
31 <localidade>UK</localidade>
32 <companhia>UTOF records</companhia>
33 <preco>10.20</preco>
34 <ano>1990</ano>
35 </cd>
36 <cd>
37 <titulo>Montanha de ouro</titulo>
38 <artista>Aros marrone</artista>
39 <localidade>BR</localidade>
40 <companhia>HYU</companhia>
41 <preco>9.90</preco>
42 <ano>1997</ano>
43 </cd>
44 </catalogo>
Em nosso ajax ficaria assim:
01 <script type="text/javascript">
02 documentoXML = xmlhttp.responseXML;
03 texto = "";
04 qtd_artistas = documentoXML.getElementsByTagName("ARTISTA");
05 for (i=0;i<qtd_artistas .length;i++)
06 {
07 texto = texto+qtd_artistas[i].childNodes[0].nodeValue + "<br />";
08 }
09 document.getElementById("div_mostra_resposta").innerHTML=texto ;
10 </script>
Viram como é fácil trabalhar com respostas no ajax ?
Curso Ajax – Aula Bonus – Tabela de Métodos e PropriedadesCARLOSCX ALBERT 6 DE SETEMBRO DE 2012 1
Nesta aula bônus listarei alguns métodos e propriedades junto as suas descrições. Farei também uma breve revisão de
pontos importantes do Ajax.
XMLHttpRequest
1 – Objeto JavaScript
2 – Adotado pelos navegadores modernos
• Primeira implementação nativa no Mozilla 1.0 (Ano de 2002)
– A World Wide Web Consortium publicou uma
especificação como “Working Draft” em 5 de abril de
2006
– No Internet Explorer versão 5 e 6 é um controle ActiveX chamado
MSXML
• O IE7+ já suporta o objeto XMLHttpRequest de forma nativa
• XMLHttpRequest
Comunica-se
com o servidor utilizando requisições
HTTP comuns: GET/POST
– Permite comunicação assíncrona
– Funciona ao fundo
• Não interrompe a operação do usuário
– O tipo da resposta (ContentType)
pode ser:
• text/xml
• text/plain
• text/json
• text/javascript
Métodos do XMLHttpRequest
Método Descrição
open(“metodo”, “URL”, “assincrono)”)
Especifica o método, a URL e outros atributos opcionais de uma requisição.O parâmetro “método” pode ser GET, POST ou PUT.O parâmetro URL pode ser uma url relativa ou completa.O parâmetro assíncrono informa se a requisição será assíncrona ou síncrona:true significa que o script continuará após a execução do
método send; falsesignifica que o script ficará esperando a resposta do servidor no método send.
setRequestHeader(“campo”,”valor”)Adiciona um par de (nome_campo/valor_campo) ao cabeçalho http a ser enviado
send(postdata) Executa a requisição HTTP.
getAllResponseHeaders()Retorna a coleção de cabeçalhos do http como uma String
getResponseHeader(label) Retorna o cabeçalho HTTP associado ao label
abort()Interrompe uma requisição que está sendoprocessada.
send(conteudo) Envia a requisição
Propriedades do XMLHttpRequest
Propriedade Descrição
onreadystatechange
Informa a função JavaScript que deve ser chamadaa cada mudança de estado
readystate
Estado atual da requisição, pode ser:
0 = não iniciada1 = iniciando conexão2 = conexão estabelecida3 = em atividade (algum dado foi recebido)4 = completa
status
Retorna o estado HTTP da requisição como um número. ex:
200 = OK403 = Forbidden = proibido404 = Not Found = Não encontrado500 = Internal Error = Erro internoetc …
responseText Retorna a resposta como uma string
responseXMLRetorna a resposta como um XML (que pode ser tratada como um W3CDOM)
statusTextRepresentação textual (string) do status HTTPrecebido do servidor (OK, Not Found, etc)
Curso Ajax – Aula 05 – Utilizando o Método GETCARLOSCX ALBERT 6 DE SETEMBRO DE 2012 1
Fala pessoal beleza ? Nesta aula iremos aprender a enviar dados com ajax utilizando o método GET , que por si envia
os dados pela URL.
O metódo pode ser utilizado tranquilamente para uma rápida atualização no banco de dados , ou envio rápido de
mensagens como um CHAT.
Veja os exemplos a seguir:
Primeiramente iremos criar nosso documento index.php junto ao formulário para envio dos dados.
Veja o código abaixo:
index.php01 < !doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>Ajax - Trabalhando com o Método GET</title>
06 </meta></head>
07 <body>
08 <div id="resposta_do_servidor"></div>
09 <form
name="form_teste"id="form_teste" action="">
10 Nome: <input
type="text"id="nome" /><br />
11 Email:
<input type="text"id="email" />
12 <input
type="button"onclick="acao()" value="enviar" />
13 </form>
14
15 </body>
16 </html>
Veja que criamos um simples documento php , e que o formulário possui algumas características comuns. Observe
também que para o botão utilizei o tipo “button” , pois não pretendo dar refresh na página , deixando-a mais dinâmica ,
e leve. Lembre-se que o ajax faz com que atualizemos parte de uma página sem dar refresh na própria.
Devemos ficar atentos que os pontos mais importantes no formulários são os id’s , pois apartir dos id’s iremos resgatar
os dados enviados.
Veja que para o botão utilizei a chamada de uma função chamada “acao()”. Está função será chamada sempre que eu
clicar no botão. Para isso utilizei a ação “onclick”.
Após ter criado nosso documento index.php , iremos implementar nosso ajax no head de nosso documento
index.php. O
código ficaria semelhante ao exemplo abaixo:
01 < !doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>Ajax - Trabalhando com o Método GET</title>
06 <script type="text/javascript">
07 function acao(){
08 var xmlhttp;
09 if(window.XMLHttpRequest){
10 xmlhttp = new XMLHttpRequest();
11 }else{
12 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
13 }
14
15 xmlhttp.onreadystatechange = function(){
16 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
17 document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;
18 }
19 }
20 var nome = document.getElementById("nome").value;
21 var email = document.getElementById("email").value;
22
23
24 xmlhttp.open("GET","processar.php?nome="+nome+"&email="+email,true);
25 xmlhttp.send();
26 }
27 </script>
28 </meta></head>
29
30 <body>
31 <div id="resposta_do_servidor"></div>
32 <form
name="form_teste"id="form_teste" action="">
33 Nome: <input
type="text"id="nome" /><br />
34 Email:
<input type="text"id="email" />
35 <input
type="button"onclick="acao()" value="enviar" />
36 </form>
37
38 </body>
39 </html>
Vejam que não utilizei nada que você não tenha aprendido neste curso.
Por etapas: instanciamos nosso xmlhttp criamos nossa função “acao()”, e verificamos se o navegador tem suporta
a XmlHttpRequest ou ActiveXObject. Logo após verificamos os estados e status do servidor referente a resposta.
Veja que fiz uma verificação da resposta , e informei que se existesse algum header HTTP , ele atribuísse o valor ao id
“resposta_do_servidor” , que é referente a div de resposta logo acima de nosso formulário.
Logo depois recuperei os dados enviados pelo formulário , resgantando estes dados pelo “id”.
Veja:
1 var nome = document.getElementById("nome").value;
2 var email = document.getElementById("email").value;
Depois de resgatado os dados , e atribuído os próprios as suas referentes variáveis. Fiz a chamada dos próprios com
método open() , logo depois enviei com o método send().
Veja abaixo:1 xmlhttp.open("GET","processar.php?nome="+nome+"&email="+email,true);
2 xmlhttp.send();
Veja que os dados são enviados para o arquivo “processar.php”, que iremos criar logo logo.. [...] Como os dados estão
sendo enviados via GET , passei os parâmetros pela url.
Veja:
“GET”,“processar.php?nome=”+nome+”&email=”+email,true
No javascript para concatenar variáveis utilizamos o sinal de soma ( + ).
Assim, fiz a concatenação das strings referentes a URL , e atribui os valores junto as variáveis.
Feito todas as etapas acima , devemos criar nosso arquivo processar.php e recuperar estas variáveis com a
variável GLOBAL GET($_GET). O funcionamento será normal. Imagine que utilizamos o método comum do form com
method=”GET”.
Veja o arquivo processar.php abaixo:
1 < ?php
2
3 $nome = $_GET['nome'];
4 $email = $_GET['email'];
5
6 echo Seu nome é: ".$nome. " e seu email é: " .$email ;
7 ?>
Viram como é simples trabalhar com ajax + php?
Fica a pergunta: Poderíamos trabalhar isso com banco de dados ?
Resposta: Sim! tranquilamente.. depois de passado os dados com ajax para o documento processar.php, basta tratar
os dados normalmente , com phpOO ou PDO , ou até mesmo o modo primitivo do php utilizando a
função mysql_query() diretamente.
Curso Ajax – Aula 06 – Utilizando o Método POSTCARLOSCX ALBERT 6 DE SETEMBRO DE 2012 0
DOWNLOAD DO ARQUIVO DE APOIO CRIADO NA VÍDEO AULA
Fala pessoal beleza ? Nesta aula iremos utilizar o método POST para o envio de nossos dados , como prometido na
última aula.
A utilização de método POST , não é muito diferenciada do método GET , contudo existem vantagens encima deste
método.
Vamos relembrar estar vantagens ?
GET é mais simples e mais rápido do que o POST, e pode ser utilizado na maioria dos casos.
No entanto, sempre use solicitações POST quando:
1 – Quando arquivo em cache não é uma opção. Ex: atualizar o banco de dados do servidor
2 – O envio de uma grande quantidade de dados para o servidor (POST não tem limitações de tamanho, já o GET
tem.)
3 – Envio de dados do usuário (que pode conter caracteres privados como senha ou código de algum produto), o
POST é mais robusto e seguro do que o GET
E ae lembrou as vantagens da utilização do método POST?
Se lembrou, vamos ao trabalho!
Primeiramente vamos criar nosso arquivo index.php
Veja o exemplo:
01 < !doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>Ajax - Trabalhando com o Método POST</title>
06 </meta></head>
07 <body>
08 <div id="resposta_do_servidor"></div>
09 <form name="form_post" id="form_post" action="">
10 Nome: <input type="text" id="nome" /><br />
11 Email: <input type="text" id="email" />
12 <input
type="button" onclick="acao()" value="enviar" />
13 </form>
14 </body>
15 </html>
Vejam que como na aula passada, criei um exemplo semelhante , acho que até idêntico.
Etapas: Criamos nosso formulário html simples , atribuímos um botão do tipo “button” para não haverrefresh na
página , e claro atribuímos também nossa função javascript “acao()”, que será chamada no click no button, ação
“onclick”.
Agora iremos criar nosso ajax junto ao head de nosso documento index.php
Veja o exemplo abaixo:
01 < !doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>Ajax - Trabalhando com o Método POST</title>
06 <script type="text/javascript">
07 function acao(){
08 var xmlhttp;
09 if(window.XMLHttpRequest){
10 xmlhttp = new XMLHttpRequest();
11 }else{
12 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
13 }
14
15 xmlhttp.onreadystatechange = function(){
16 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
17 document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;
18 }
19 }
20 var nome = document.getElementById("nome").value;
21 var email = document.getElementById("email").value;
22
23 var campos = "nome="+nome+"&email="+email;
24
25 xmlhttp.open("POST","processar.php",true);
26 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
27 xmlhttp.send(campos);
28 }
29 </script>
30 </meta></head>
31 <body>
32 <div id="resposta_do_servidor"></div>
33 <form name="form_post" id="form_post" action="">
34 Nome: <input
type="text" id="nome" /><br />
35 Email: <input type="text" id="email" />
36 <input
type="button" onclick="acao()" value="enviar"/>
37 </form>
38
39 </body>
40 </html>
Opa! a partir daqui a estrutura do ajax já mudou comparado com o método GET. Nossa estrutura teve pequenas
modificação , contudo a estrutura básica foi mantida, como a verificação do xmlHttp do navegador , e a verificação
da resposta do servidor.
Vocês devem ter observado que para recuperar os valores dos campos, eu utilizei uma variável mestra que terá a
função semelhante de um array.
Veja:
1 var nome = document.getElementById("nome").value;//campo1
2 var email = document.getElementById("email").value;//campo2
3
4 var campos = "nome="+nome+"&email="+email;/*todos os campos em apenas uma variável*/
Para trabalharmos com o método POST devemos recuperar todos os nossos dados dessa forma. Semelhante a
recuperar dados por URL não ?
A variável campos será a chave que entrará no método send , ou seja , no documento processar.phpque criaremos
logo adiante , iremos recuperar os dados do conjunto apartir da variavel passada “campos” que terá a função de um
conjunto de dados.
Vendo desta forma parece que, o que mudou no código foi apenas isso né ?
Errado! incrementamos ainda mais uma linha chave para o envio de dados utilizando o método POST.
Veja a linha chave abaixo:
1xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Essa linha faz com que os dados sejam apropriados para o envio de formulários com o método POST. Contudo em
certos casos isso faz com que seus dados cheguem truncados(incompletos).
Uma solução para este problema é setarmos então um novo header chamado: “Content-length”.
Desta forma nosso código ganha mais uma linha.
Veja :
1xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Setando Content-type
2xmlhttp.setRequestHeader("Content-length", campos.length); // Comprimento do conteúdo=comprimento dos dados a enviar
O resultado então de todo nosso código ficaria assim:01 < !doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>Ajax - Trabalhando com o Método POST</title>
06 <script type="text/javascript">
07 function acao(){
08 var xmlhttp;
09 if(window.XMLHttpRequest){
10 xmlhttp = new XMLHttpRequest();
11 }else{
12 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
13 }
14
15 xmlhttp.onreadystatechange = function(){
16 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
17 document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;
18 }
19 }
20 var nome = document.getElementById("nome").value;
21 var email = document.getElementById("email").value;
22
23 var campos = "nome="+nome+"&email="+email;
24
25
26 xmlhttp.open("POST","processar.php",true);
27 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Setando Content-type
28 xmlhttp.setRequestHeader("Content-length", campos.length); // Comprimento do conteúdo=comprimento dos dados a enviar
29 xmlhttp.send(campos);
30 }
31 </script>
32 </meta></head>
33 <body>
34 <div id="resposta_do_servidor"></div>
35 <form name="form_post" id="form_post" action="">
36 Nome: <input
type="text" id="nome" /><br />
37 Email: <input type="text" id="email" />
38 <input
type="button" onclick="acao()" value="enviar"/>
39 </form>
40
41 </body>
42 </html>
Tudo certo. Já estamos enviando corretamente nossos dados com ajax via método POST. Contudo , em certos casos
o método POST faz com que os dados cheguem com problemas de caracteres especiais.
Para isso em nosso arquivo processar.php , devemos fazer alguns tratamentos.
Veja:
processar.php
1 < ?php
2header("Content-type: text/html; charset=utf8");/*Tratamento para o Header*/
3 $nome = utf8_encode($_POST['nome']);//funcao para forcar o utf8
4 $email = utf8_encode($_POST['email']);//funcao para forcar o utf8
5
6 echo Seu nome é: ".$nome. " e seu email é: " .$email ;//exibicao da mensagem.
7
8 ?>
Vejam que setei o tipo do header no documento , dizendo que o tipo é “utf-8″ , e para forçar a conversão utilizei a
função “utf8_encode” , pois a maioria dos banco de dados utilizam estes tipos de caracteres.
Observação: Em certos casos não é necessário fazer estas conversões. Lembrando que você pode utilizar os tipos
ISO também.
Veja um exemplo de header do tipo ISO-8859-1:1 header("Content-type: text/html; charset=iso-8859-1");
Simples não ?
Com está aula finalizamos nosso curso. Incrível como o ajax é tão fácil , e é uma matéria tão curta. Claro, as
necessidades do conhecimento de linguagens específicas faz o conjunto.
Curso SEO (Aula 01) – IntroduçãoCARLOSCX ALBERT 24 DE FEVEREIRO DE 2012 1
O que é SEO? O termo SEO origina-se do inglês Search Engine Optimization, que significa otimização de sites para mecanismos de busca.
Otimização de Sites, ou simplesmente SEO (Search Engine Optimization), refere-se a um conjunto de estratégias com o objetivo de potencializar o posicionamento de um site nos resultados naturais (orgânicos/links não patrocinados) nos sites de busca.
Para que uma página tenha acessos, ela precisa primeiro ser encontrada nos buscadores.
Através da otimização de sites, são grandes as chances de ficar entre os primeiros resultados do Google, Yahoo ,MSN e Outros . Consequentemente, atrair mais acessos para seu site.
Em outras palavras, é a arte de entender o funcionamento dos algoritmos dos buscadores, de forma que você possa adequar seu site(deixar nos padrões), fazendo com que ele atenda a todos os critérios importantes que farão seu site ser considerado, naturalmente, um dos melhores sites para o termo pesquisado, alcançando as primeiras posições nos resultados de busca que não sofrem influências comerciais (links patrocinados).
Lembrando , que nem sempre , o melhor uso de seo será priorizado, pois em certos pontos , um site que não possui técnicas de seo . Pode ter um tráfego melhor que o seu, porém com a utilização de seo , você garante sua vaga nos melhores resultados de busca.
Um projeto profissional de SEO prevê diversas alterações técnicas e estratégicas para um web site, e muitas vezes leva pelo menos de 4 a 6 meses para se obter resultados satisfatórios.
Algumas Vantagens da Utilização de SEO em seu Site Aumento gradativo em visitas, podendo alcançar até 6000% de crescimento;
É a forma mais econômica de atingir clientes potenciais;
Posiciona o site nos resultados naturais (orgânicos) dos sites de busca, que têm a preferência de cliques dos internautas;
Traz um tráfego de alta qualidade, segmentado;
Possui alto índice de conversão, cinco vezes maior do que uma visita gerada por um banner.
Curso SEO (Aula 02) – Palavra-ChaveCARLOSCX ALBERT 24 DE FEVEREIRO DE 2012 1
Escolhendo e otimizando palavras-chave de forma correta
SEO – Search Engine Optimization (em português, em português, otimização de sites para mecanismos de busca)
trata-se do processo de otimizar uma ou mais páginas de um site a fim de que estas possam ficar bem posicionadas na
lista dos resultados de pesquisas feitas em sites como Google e Yahoo. A página que apresenta os resultados para
uma busca é chamada de SERP – Search Engine Results Page.
A idéia é bem simples: faça uso das melhores práticas de SEO para que seu site fique bem posicionado nos
mecanismos de busca e, desta forma, fazer com que as pessoas cheguem até você ao realizarem suas buscas na
Internet. É sobre estas práticas e como as utilizar que vamos falar no decorrer deste curso.
Vamos agora a um exemplo bastante didático a respeito de quais são os primeiros passos a seguir quando se cria um
site, independente do qual seja o assunto.
Em nosso primeiro exemplo, vamos criar um site que oferece Cursos de Java. Antes de começar a produzir conteúdo para colocar no site, precisamos realizar primeiro uma pesquisa sobre palavras-chave. Esta etapa é bastante importante e não deve ser pulada. Para realizar este levantamento, vamos visitar alguns sites.
O 1º deles deve ser https://adwords.google.com/select/KeywordToolExternal .
Figura 1: Ferramenta de Palavra-chave do Google
Esta ferramenta do Google nos possibilita descobrir palavras-chave relacionadas ao conteúdo que nosso site aborda,
bem como saber qual o volume de pesquisas e a concorrência existente no Google AdWords para cada uma delas.
Digitando o termo “curso java” e clicando no botão “Obtenha sugestões de palavras-chave” (mantenha a opção “Use
sinônimos” selecionada), você pode notar, na figura 2, que o KeywordTool do Google retorna uma lista de termos
relacionados à palavra-chave em questão. Por padrão(default), são mostradas 3 colunas.
A 1º coluna, “Concorrência do anunciante”, mostra a disputa pelo ranking de posições para a palavra-chave no
AdWords.
A coluna do meio apresenta o volume de buscas realizadas no mês anterior , e a coluna “Volume de pesquisa
mediano” representa a quantidade de buscas que cada palavra-chave recebeu nos últimos 12 meses no Google.
Figura 2: Resultado pesquisa palavras-chave
Essa etapa é muito importante, pois temos que saber se existe mercado para qualquer coisa que escolhemos vender
ou falar sobre, assim como qual é o tamanho da procura pelas palavras-chave relacionadas ao nosso site.
Essa ferramenta irá dizer rapidamente se as pessoas estão procurando, ou seja, se há demanda no mercado, para o
que estamos pretendendo trabalhar.
Uma outra ferramenta do Google para avaliar a procura por palavras é o Google Trends . Com ele, podemos avaliar
diversas situações: Sinônimos: quando uma palavra-chave possui um ou mais sinônimos, como saber qual é o mais buscado?
Exemplo: carro x automovel. Neste caso, podemos observar que a procura por “carro” é bem superior ao seu sinônimo “automovel”.
Plural: a mesma dúvida pode surgir com relação a uma palavra-chave e sua forma no plural.Exemplo: gatinha x gatinhas. Aqui, o termo no plural possui uma quantidade de buscas maior.
Sazonalidade: algumas palavras possuem uma certa sazonalidade em relação a sua quantidade de pesquisas realizadas.Exemplo: carnaval, eleições, pascoa.
Não comece a otimização pelas palavras-chave mais procuradas!
Por que? – Você deve estar perguntando… Se escolhermos as palavras mais procuradas, maior será a quantidade de
pessoas visitando o meu site, não? Bem, na maioria dos casos, isso é mera ilusão.
Quanto maior a procura, maior também é a concorrência pelas palavras-chave. Definitivamente, não é uma coisa que
você deve procurar enfrentar no inicio. Para um site novo ou que esteja em fase inicial de otimização, é melhor que
sejam selecionadas frases mais específicas, chamadas de “long tail keywords”.
Além de possuírem uma concorrência menor, produzem tráfego mais “qualificado”. Falaremos disso mais adiante.
A seguir, temos um exemplo de concorrência por palavras-chave muito disputadas:
Vamos dar uma olhada rápida no Google para ver quantos sites estão competindo pela palavra-chave “java”.
Figura 3: Concorrência da palavra java no Google
Caso você esteja querendo otimizar seu site para esta palavra-chave, vai estar concorrendo com cerca de 502 milhões
de outros sites! Esta parece não ser uma tarefa tão humilde para começar um trabalho.
Importante: No final deste curso, você estará apto a brigar em casos de palavras onde a disputa é mais acerrada, porém é sempre melhor começar com palavras-chave que possuam menor competição. Obtenha acessos com essas palavras primeiramente e depois passe a tentar as mais disputadas.
Além disso, quem procura pela palavra “java” não necessariamente está querendo se matricular em um curso de java.
A pessoa pode estar procurando a documentação da linguagem, um exemplo de código-fonte ou simplesmente saber
mais sobre a história desta tecnologia.
As chances de uma pesquisa por palavra-chave “curso java” resultam em um alunos que estão procurando
por cursos java , diferente da palavra-chave “java” , que abre um mundo sobre a tecnologia java.
Ou seja, otimizando seu site para o 1º caso, você estará recebendo visitantes que estão realmente procurando por
um curso de java, aumentando assim a taxa de conversão. Essa taxa corresponde ao número de matrículas
efetuadas em relação ao total de visitantes do seu site.
Portanto, temos um exemplo de tráfego qualificado: o visitante procura por alguma coisa relacionada ao conteúdo de
seu site e consegue chegar até ele – neste caso, através de uma boa otimização para mecanismo de buscas.
Bem, uma vez escolhidas de 2 a 4 palavras-chave que descrevem bem o que nosso site aborda, precisamos voltar ao
Google e ver como anda a concorrência para estas palavras, a fim de avaliar o grau de dificuldade que terá o nosso
trabalho de otimização.
Para o exemplo de site com que estamos trabalhando nessas aulas, podemos ficar com “curso java” e “treinamento
java“.
Uma vez escolhidas nossas palavras-chave, vamos agora analisar como se comportam os sites melhores colocados
relacionados a essas palavras.
A seguir, descrevemos um estudo para uma busca feita por “curso java“.
Como podemos ver, o site que ocupa a 1º posição no ranking para “curso java”
é:http://www.dm.ufscar.br/~waldeck/curso/java/.
Figura 4: Resultado Google para a palavra "curso java"Importante: estes rankings das engines de busca não são constantes e é possível que este não seja mais o 1º lugar. Isto pode acontecer caso algum concorrente tenha realizado uma otimização melhor para a palavra-chave em questão.
O fato do 1º lugar no Google ser uma subpágina, isto é, não é uma homepage, é uma boa notícia para nós. Isso
porque temos uma imediata vantagem caso otimizemos uma página principal (ex: www.seusite.com.br) para a palavra-
chave em questão.
Por enquanto, tome isso como uma verdade. Posteriormente, será mostrado com mais detalhes porque é mais fácil
conseguir uma boa posição para uma homepage do que para qualquer outra página interna de um site.
Podemos notar também que o site possui PageRank 2, conforme a figura 5.
Figura 5: PageRank
Importante: aqui vai uma rápida definição do que é PageRank. PageRank é uma forma que o Google usa para atribuir um valor discreto, que pode variar de 0 a 10, para medir a popularidade de uma página web. É baseado na quantidade e na “qualidade” do número de links que outros sites possuem para o seu(ligação de outros sites com o seu).
Para saber mais sobre PageRank, visite http://pt.wikipedia.org/wiki/PageRank.
Para saber qual é o PageRank do seu site, assim como de qualquer outro, baixe e instale o Google Toolbar em seu
computador.
É também uma boa notícia para nós o fato do site que ocupa a 1º colocação possuir um PageRank 2, já que isto não é
uma tarefa muito difícil de se obter. Lembre-se: a única forma de aumentar o PageRank de um site é conseguindo links
de outros sites para ele.
Na próxima aula, vamos fazer uma análise das técnicas de SEO utilizadas por este site, que ocupa a 1º posição, para
uma pesquisa feita com os termos “curso java” para saber se é possível superá-lo.
Curso SEO (Aula 03) – Seo OnPageCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 0
Otimização Interna - SEO OnPage
Nesta aula, vamos fazer uma análise de Search Engine Optimization do
site http://www.dm.ufscar.br/~waldeck/curso/java/ , o qual ocupa o 1º lugar no Google para um busca feita com as
palavras-chave “curso java”, como mostramos na aula anterior.
Analisando código-fonte
Primeiramente, temos que ver o código-fonte do site selecionando. Para isso, vá até o menu do seu navegador, clique no o item “Exibir” e depois em “Código-fonte”, como é mostrado na figura 1. Também é possível clicar com o botão direito do mouse no site e escolher o item “Código-fonte”.
Figura 1: Exibindo o código-fonte de um siteObservação 1: Código-fonte é o código que foi usado para criar a página. Você não precisa entender HTML, que é a linguagem mais usada na criação de sites. Basta saber o que procurar quando for analisar o código.
Isso irá abrir um arquivo texto no qual vamos dar uma olhada para saber se esse site está atualmente otimizado para
os chamados ”Fatores de Otimização Onpage” com relação à palavra-chave “curso java”.
Observação 2: Existem dois tipos de otimização: interna (onpage) e externa (offpage).
A otimização interna se refere aos fatores relacionados ao próprio site, como URL, título, conteúdo, tempo de
carregamento, dentre outros.
Já a otimização externa diz respeito a como os outros sites se relacionam com o seu. Neste caso, os fatores são
quantidade de links apontando para o site, o texto desses links, Page Rank dos sites que apontam e etc. Falaremos
deste segundo tipo de otimização mais a diante no curso.
Ao analisarmos o código HTML do site em questão, temos que avaliar alguns itens:
Título – <title>
Talvez seja o fator de otimização interna mais importante. Caso você tenha tempo apenas para realizar uma única
ação de SEO em seu site, gaste este tempo criando bons títulos para cada página dele.
Cada página deve possuir um título diferente, contendo as principais palavras-chave, sendo que essas também devem
aparecer no corpo da página.
Com relação ao site analisado:
Estão usando a principal palavra-chave na tag <title> do site?
Nesse caso, eles estão usando uma das palavras no título: Java. Esta é uma das razões de estarem bem posicionados
no ranking para “curso java”. O título é “Tutorial de Programação Java” e o código HTML correspondente
é: <title>Tutorial de Programação Java</title>.
Heading Tags – <h1> até <h6>
Ótimo para organização do conteúdo da página. Insira suas principais palavras-chave no texto destas tags (<h1>…
<h6>), porém cuidado com seu uso em excesso.
Com relação ao site analisado:
Estão sendo usadas heading tags do tipo <h1>…<h6> e a palavra-chave “curso java” está contida nessas tags?
Nesse caso, a palavra-chave não está presente, pois o site não está nem usando heading tags. Boa notícia para nós!
Meta Keywords – <meta>
Nesta tag, liste as principais palavras-chave de cada página, separando-as por vírgula. Não coloque palavras-chave
que não estejam também presentes no texto da página e também não as repita mais de uma vez dentro da tag (não
faça spam).
Estão utilizando “curso java” na meta tag keywords?
Neste caso, as duas palavras, “curso” e “java”, estão presentes na meta tag keywords. Bom para ele!
Meta Description – <meta>
Escreva uma ou duas frases que descrevam bem a página. Mais uma vez, para cada página, utilize uma descrição
única. Muitas vezes esse texto é o que descreve a sua página nos resultados de alguma busca, ou seja, utilize-a para
conseguir conquistar o clique do usuário.
Estão utilizando “curso java” na meta tag description?
Este exemplo não faz uso dessa meta tag. Mais um ponto negativo.
Palavras-chave em negrito, itálico ou sublinhadas – <b><strong> <i> <u>
Utilize-se desse recurso para dar ênfase as suas principais palavras-chave no decorrer do texto, porém seja moderado
e não aplique esta técnica a todas as ocorrências das palavras.
Estão utilizando “curso” e/ou “java” em negrito, itálico ou sublinhado em algum lugar no corpo da página?
Outra boa notícia: nenhum dos casos acima acontece no site em questão.
URL
Utilize URLs diferentes para cada página e introduza a principal palavra-chave da página em sua respectiva URL.
Tente utilizar o menor número de caracteres possíveis, bem como a quantidade de separadores “/”. Se a palavra-chave
for composta por mais de uma palavra, como Curso Java, separe-as com traço “-” (ex: curso-java). Utilize suas
principais palavras-chave também para nomear pastas e arquivos no servidor.
As palavras-chave estão presentes na URL do site?
Neste caso, tanto a palavra “curso” como “java” estão presentes na URL da página. Porém, seria melhor se fosse
http://www.dm.ufscar.br/curso-java
Image Tags – Atributo Alt
Importantíssimo para os rankings de busca por imagens. Se a imagem possuir link, o texto presente no atributo <alt>
atuará similarmente ao anchor text de um link em texto. Tente combinar suas palavras-chave com a descrição de cada
imagem para compor o texto a ser colocado nestas tags.
Estão utilizando tags de imagens contendo o atributo <alt> e colocando a palavra-chave “curso java” no texto dele?
Neste caso, estão usando novamente parte da palavra-chave “curso java”. O atributo <alt> possui o texto
“Programação Java”. Com relação aos nomes das imagens, utilize nomes contendo nossas palavras-chave também.
Por exemplo, poderíamos criar uma imagem e chamá-la de “inscricao-curso-java.jpg”.
Utilizando palavras-chave no texto
Sempre escreva conteúdo para o visitante. Porém, tente encaixar suas principais palavras-chave ao longo do texto,
mantendo-o coerente e de agradável leitura. Além disso, tente posicionar suas palavras-chave logo no início do site,
bem como perto do fim. Faça uso de plurais e de termos relacionados às suas palavras-chave.
Com relação ao site:
A nossa última verificação é se estão utilizando a palavra-chave no começo do site assim como perto do fim e se há
um número razoável de ocorrências das palavras “curso” e “java” no decorrer do texto da página.
Nesse caso, há 5 ocorrências da palavra “java” no texto sendo que uma aparece logo no começo e outra está perto da
porção inferior direita da página. Já a palavra “curso” é citada apenas uma vez. Neste quesito, eles poderiam estar
melhor.
Agora que já fizemos uma análise dos fatores de otimização interna do site que está em 1º lugar, podemos ver que não
será uma tarefa difícil ultrapassá-lo no ranking dos resultados para uma busca feita para “curso java”. A razão pela qual
podemos superá-lo se dá pelos seguintes itens negativos que encontramos ao analisarmos o site:
O site não está usando a palavra-chave “curso java” em tags de cabeçalho <h1> ou <h2>;
O site não utiliza image tags com o atributo <alt> contendo “curso java”;
Não há uso da meta tag description;
O site possui um Page Rank 2, o qual pode ser rapidamente batido. Podemos atingir facilmente um Page Rank 2 ou maior. Nas próximas aulas, estaremos explicando como;
O site é rankeado para uma subpágina. Otimizando nossa página principal para a palavra-chave em questão, levaremos vantagem;
O título do site somente possui a palavra “java”. A utilização de “curso java” faria uma enorme diferença para nós;
A palavra “curso” ocorre só uma vez em todo o site e, assim como a palavra “java”, em nenhum momento aparece sublinhada, em negrito ou em itálico;
A palavra “java” é citada poucas vezes na página, ou seja, o site apresenta uma baixa densidade desta palavra com relação ao total de palavras presentes no texto.
Ok, então tínhamos selecionado 2 palavras-chave:
Curso Java
Treinamento Java
Perceba que todas as palavras-chave contêm “Java”. Isso tornará nosso trabalho um pouco mais fácil quando
começarmos a otimizacação offpage, a qual estaremos abordando mais a frente.
Vamos à otimização.
A primeira coisa que devemos fazer é escolher um Título para nosso site.
Adicionando Título
O título da página deve incluir APENAS nossas principais palavras-chave. Quanto menor for o número de palavras no
tag title, maior será o peso que o Google atribuirá a cada uma delas. A única exceção é com relação a Home de um
site, a qual deve apresentar o nome da empresa também no título.
importante: quando falamos em “Google”, estamos nos referindo as maiores engines de busca (Google, Yahoo e MSN). Porém, falamos Google, pois esse é o sistema de busca ao qual você deve priorizar sua otimização, já que representa mais da metade das buscas feitas na internet.
Ao criar um título para seu site, ele não deve se parecer com:
Seja bem-vindo ao nosso site!
Código HTML usado para criar esse título: <title> Seja bem-vindo ao nosso site!</title>
Ele também não deve parecer com o exemplo seguinte, o qual contém nossas palavras-chave, porém apresenta um
número desnecessário de palavras.
Curso de Java e Treinamento em Java
Código HTML usado para criar esse título: <title> Curso de Java e Treinamento em Java </title>
Mesmo esse título não sendo tão horrível e contendo todas as nossas palavras-chave, devemos fazer algumas coisas
para reduzir a quantidade de palavras usadas.
Esse poderia ser um título perfeito para nossa página:
Curso Java | Treinamento Java
Código HTML usado para cirar esse título: <title> Curso Java | Treinamento Java </title>
Veja o que fizemos:
Retiramos termos conectores como “e” e “em”;
Substituímos cada “e” pelo caracter “|”.
Sempre combine suas palavras-chave no título de suas páginas!
Quando o Google olhar para nosso título, ele verá todas as nossas palavras-chave. Combinar palavras-chave para
reduzir a quantidade total de palavras no título é uma boa maneira de aumentar o peso de cada uma delas e, dessa
forma, ajuda a melhorar o ranking de nosso site.
Adicionando heading tag <h1>
Vamos precisar adicionar uma heading tag <h1> e colocar nela nossa principal palavra-chave.
Esta tag deve ficar o mais próximo possível do topo da página. Quando o Google lê uma página web, ele começa a
varredura pelo lado superior esquerdo e termina no canto inferior direito.
Importante: Segue uma ferramenta que permite que você veja como os robôs de busca lêem seu
site: http://www.webmaster-toolkit.com/search-engine-simulator.shtml.
Dessa forma, é melhor posicionar sua tag de cabeçalho <h1> no canto superior esquerdo ou na parte superior central.
Podemos pensar na tag <h1> como sendo um título para qualquer conteúdo presente no site.
Por exemplo, a tag <h1> para esta aula poderia ser:
“Curso SEO”
E o código HTML correspondente seria: <h1> Curso SEO </h1>
Adicionando tags de cabeçalho <h2>
Agora, vamos à criação da tag de cabeçalho <h2>. Esta tag pode ser considerada como um subtítulo de nossa página.
Você deve colocar sua segunda mais importante palavra-chave nesta tag. A tag <h2> deve ficar localizada na metade
superior de sua página.
Uma tag <h2> apropriada para essa aula seria:
<h2> Otimização Interna | Onpage SEO </h2>
Feito isso, devemos agora criar o conteúdo de nossa página. Ao escrever o conteúdo, tente espalhar suas principais
palavras-chave ao longo do site. Porém, não exagere de forma alguma.
Tente mencionar cada palavra-chave de uma maneira natural conforme vai escrevendo o texto. Mas fique atento a
incluir pelo menos uma palavra-chave a cada 1 ou 2 parágrafos, dependendo da largura de sua página.
Dica: Tenha certeza de ter mencionado sua principal palavra-chave na parte superior esquerda assim como na porção
inferior direita do seu site. Um truque que geralmente usamos é incluí-la na linha de informação de copyright, no final
da página. Para nosso exemplo, um bom rodapé seria:
© 2008 copyright www.dominio.com.br – O melhor em Treinamento Java
Desta forma, a palavra-chave se encaixou sem problemas.
Utilizando Negrito<strong> ou <b>, itálico<i> e sublinhado<u>
Após ter construído o conteúdo do site, devemos seguir a diante e colocar em negrito, itálico ou sublinhado algumas
palavras-chave, uma vez cada uma, no máximo. Somente faça uma vez para cada palavra-chave ou isso poderá
acabar prejudicando mais do que ajudando. Este procedimento não é crucial, mas é bom fazê-lo para algumas de suas
palavras-chave.
Incluindo atributos <alt> corretamente
Por fim, selecione a imagem mais próxima do topo de seu site (geralmente, essa imagem é o seu header) e inclua um
atributo <alt> utilizando o texto “curso java header”. Escolha mais duas imagens presentes na página e coloque sua
outra palavra-chave, adicionando palavras extras como “grafico” ou “imagem”. Por exemplo, poderíamos usar “gráfico
treinamento java” ou “imagem treinamento java”. Desta forma, o Google não enxergará isso como spam.
Exemplificando, se tivermos uma imagem em nosso site chamada “figura1-treinamento-java.jpg”, o código HTML usado
para inserir esta imagem seria assim:
<img src=”figura1-treinamento-java.jpg” border=”0″>
Agora, se fôssemos colocar uma imagem com o atributo <alt> contendo a frase “Inscrição Treinamento Java”, o código
ficaria desta forma:
<img src=”figura1-treinamento-java.jpg” border=”0″ alt=”Inscrição Treinamento Java”>
Curso SEO (Aula 04) – Aparecer Rápido no Google | Indexação ImediataCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 0
Como ser indexado em menos de 48h
Você já deve ter se deparado com gente reclamando sobre a demora em conseguir ser indexado pelo Google(aparecer
nas buscas do google). Ao que parece, quase todas as pessoas, principalmente as que postam em fóruns, dizem que
ter um site indexado pelos robôs de busca em 48 horas é uma façanha que só pode ser conquistada através de algum
grande segredo de marketing ou uma avançada técnica de otimização.
Bem, a verdade sobre isso é:
Ser indexado no Google em menos de 2 dias é realmente fácil!
Primeiramente, vamos falar sobre o que NÃO devemos fazer. Após ler essa aula, não gaste seu tempo fazendo as
coisas a seguir. Repetindo: não perca seu tempo com o que vamos mostrar agora.
A URL a seguir deve parecer familiar para você:
http://www.google.com/addurl.html
Esse é o site do Google para submissão de URLs. Eles afirmam que você pode utilizar este formulário para enviar seu
site ao sistema de busca. Porém, seu site não será indexado imediatamente. Primeiramente, ele ficará numa espécie
de “freezer”, chamado de Google SandBox e permanecerá lá por volta de 3 meses até que seja realmente incluído no
resultado das pesquisas.
Eu não sei a seu respeito, mas esperar 3 meses para ter um site incluído nos resultados de buscas é praticamente
inviável, ainda mais quando se trata de obter top rankings.
Jamais utilize o Formulário de Submissão de URL do Google!
Você nunca deve usar este formulário de submissão ou qualquer outro pertencente aos principais engines de busca
para submeter seu site. As principais engines compreendem Google, Yahoo, MSN, Altavista, etc.
Então, como estar presente na indexação em menos de 48 horas?
Existem muitas maneiras, mas para alguém que acabou de lançar um site e não possui outros mais antigos já
indexados pelo Google, sugerimos duas formas para que este seja listado rapidamente nos mecanismos de pesquisa.
Método 1
Antes de começar a aprender como ser indexado rapidamente, você deve saber como os robôs de busca encontram
os sites na Internet. É bastante simples.
Os mecanismos de busca encontram os sites da seguinte forma: eles visitam uma página já presente em seus índices
e, a partir dessa página, visitam os links presentes nela, chegando assim a outros sites. Nesses outros sites, repete-se
o mesmo processo: os robôs de busca procuram por links e visitam os sites apontados e assim por diante. Esse
processo é chamado de “crawling”.
No exemplo abaixo, se o Google visitasse essa página, ele iria percorrer todos os links presentes a fim de encontrar
outros sites.
Figura 2: Exemplo de Crawling
Neste caso, alguns links que o Google iria encontrar seriam:
www.aprex.com.br
www.boo-box.com
www.descolando.com.br
Etc.
Ok. Vamos pensar um pouco sobre isso… Vamos supor que tenhamos criado um novo site:
www.MinhaBolsaDeValores.com. Ele não está indexado por nenhum mecanismo de busca, ou seja, as engines de
busca não sabem que este site existe e, conseqüentemente, ninguém consegue chegar até ele, para qualquer que seja
a busca.
Então, como fazer para que este site seja encontrado pelo Google e cia? Fácil! Eles precisam achá-lo percorrendo links
em outras páginas já indexadas. Não faz sentido?
Tudo bem, agora que já sabemos disso, tudo o que temos que fazer é procurar sites que já estão indexados no Google
e fazê-los apontar para o nosso.
Até então, tudo muito bom e perfeito, porém não deve ser tão trivial conseguir que outros sites apontem para nós, caso
não tenham algum incentivo para fazer isso.
Sem problemas. Basta usar o método que já iremos ensinar a você para que consiga links de vários websites e em
pouco tempo.
Tudo o que você terá que fazer é escrever um artigo baseado no conteúdo presente em seu site. Como nosso suposto
site é www.MinhaBolsaDeValores.com, vamos escrever um artigo intitulado “10 passos para se tornar um investidor de
sucesso”. No topo ou no final de nosso artigo, colocaremos um link para nosso site:
http://www.MinhaBolsaDeValores.com.
Uma vez feito isso, vamos agora visitar os mais populares sites de diretórios de artigos na Internet e submeter nosso
artigo a esses diretórios. Sendo nosso artigo adicionado e agora existindo um link para nossa página, os robôs de
busca irão visitar estes sites e varrer todos os links neles existentes. Um desses links será exatamente o que aponta
para nós e pronto! Estamos indexados pelo mecanismo de busca.
Quanto maior for o número de diretórios aos quais submetermos nosso artigo, mais links apontando para nosso site
teremos e maior também será o número de vezes que os robôs de busca visitarão nosso site. Quanto mais links
conseguidos, mais facilmente seremos indexados.
Parece simples, não é? Pois é, é realmente simples!
Abaixo, segue uma lista de sites de diretórios de artigos:
http://www.goarticles.com
http://www.ezinearticles.com/
http://www.articlecity.com/
http://www.certificate.net/wwio/
http://www.amazines.com/
http://www.article-directory.net/
http://www.submityourarticle.com/articles/
http://www.magportal.com/
http://www.isnare.com/
http://www.article-hangout.com/
http://www.webarticles.com/
http://www.articlecube.com/
http://www.article-buzz.com/
http://www.free-articles-zone.com/
http://www.newarticlesonline.com/
http://www.articletogo.com/
http://www.articleworld.net/
http://www.impactarticles.com/
http://www.articlealley.com/
http://www.directorygold.com/
http://www.content-articles.com/
http://www.softwaremarketingresource.com/marketing-article-directory.html
http://www.niche-article-directory.com/
http://www.jogena.com/articles/articleform.htm
http://news.collectors.org/
http://superpublisher.com/
http://www.articlecentral.com
http://www.article-directory.net
http://www.ideamarketers.com
Perceba que a lista acima possui somente sites estrangeiros. No Brasil, não existem muitos sites a respeito de
submissão de artigos e os que existem possuem Page Rank baixo, falam apenas de um assunto específico ou são
versões dos sites americanos para a língua portuguesa. Abaixo, seguem alguns exemplos dos que fazem este tipo de
serviço por aqui:
http://www.artigonal.com/
http://www.brpoint.net/arquivo/ego-trip/envie-seu-artigo-anuncie-participe.html
http://www.diretoriodeartigos.com/
http://www.artigosbrasil.net/
http://www.eletronica.org/modules.php?name=Submit_News
http://www.gomeshp.com/maxpt/article.asp
http://www.soartigos.com/
http://www.artigocientifico.com.br/
http://www.webartigos.com/
http://www.artigos.com/Importante: procure sempre escrever e postar artigos de acordo com o conteúdo de seu site. Não vá escrever um artigo sobre plantas sendo que seu site trata de tecnologia, apenas para conseguir mais um link. Se isso acontecer muitas vezes, pode até ser visto como uma prática negativa de SEO e pode ser penalizada pelos mecanismos de busca.
E isso é o que temos que fazer para estar indexado pelo Google em menos de 48 horas. Agora, vamos ao outro
método para ser listado nas engines de pesquisa rapidamente também.
Método 2
Vamos voltar ao nosso site sobre Curso de Java da aula passada. Primeiro:
Vá até o Google e digite a principal palavra-chave que você acha relacionada ao seu site. Neste exemplo, será a palavra “curso java”. Feito isso, você verá a lista de resultados do Google;
Entre em cada site e preste atenção ao Page Rank de cada um deles;
Então, tente encontrar sites que tenham Page Rank 3 ou maior;
Uma vez encontrando estes sites, procure pela seção de Fale Conosco deles;
A partir daí, mande email ou preencha o formulário de Fale Conosco perguntando se é possível uma troca de links entre ele e você, ou seja, seu site apontaria pra o dele e vice-versa. Se você fizer profissionalmente e corretamente, eles o responderão a respeito da troca de links.
Observação 1: Obviamente, para convencer alguém a colocar um link para seu site você deve oferecer uma boa razão para isso. Pensando nisto, sempre procure sites que estejam mais relacionados com o seu (é mais bem visto pelo Google) e pense em uma maneira de oferecer alguma coisa que contribuísse para os visitantes dele, caso ele apontasse para você.
Observação 2: O tópico “Curso Java” utilizado nestas aulas não é muito bom para exemplificar essa troca de links através de formulários de Fale Conosco, pois a maioria dos sites que retornarão da busca feita com as palavras-chave “curso java” serão prováveis concorrentes nossos, isto é, empresas que também oferecem cursos de Java. Talvez, seja melhor procurar por “Java” e encontrar blogs ou outros tipos de sites relacionados à tecnologia para tentar a troca de links.
Caso você consiga um link proveniente de um site com Page Rank 5, provavelmente estará indexado em menos de 3
dias. Se conseguir um Page Rank 6 apontando para você, estará listado nos resultados de pesquisa em 24h, como na
maioria dos casos.
Curso SEO (Aula 05) – Otimização Externa | SEO OffPageCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 1
OffPage SEO – Otimização Externa
É extremamente prazeroso ver nossos sites recém-criados bem posicionados no Google rapidamente. Grandes saltos
no ranking são conseguidos principalmente devido ao processo denominado OffPage SEO ou Otimização Externa.
Até aqui, citamos 2 tipos de otimização:
Otimização Interna (OnPage SEO)
Otimização Externa (OffPage SEO)
Já discutimos a Otimização Interna nas aulas anteriores. Então, vamos agora nos concentrar na Otimização Externa,
que é o principal fator que fará a diferença no ranking do seu site.Importante! Um planejamento adequado para OffPage SEO será o responsável por fazer seu site pular de uma posição 900 para os primeiros das pesquisas.
Então, o que é Otimização Externa realmente? OffPage SEO basicamente consiste em todos os fatores OffPage de um
site, ou seja, aqueles que estão fora dele, mas que influenciam em sua posição no Google. Dentre eles, podemos citar
alguns como:
O número de sites que apontam para o seu;
Quais sites apontam para você;
O Page Rank de cada site apontador;
Há quanto tempo seu site está sendo apontado;
O título das páginas que têm links para seu site;
O texto usado no link e ao redor dele;
A quantidade e a qualidade dos links que apontam para o site que aponta para você;
O total de Outbound Links (explicado mais adiante) que o site apontador possui;
O endereço IP dos sites que apontam para você;
E mais algumas outras coisas que veremos em seguida…
Voltando ao exemplo utilizado até este momento, para otimizarmos nosso site com relação à palavra-chave “curso
java”, devemos analisar a estratégia de links dos 10 sites melhores rankeados para esta palavra.
Porém, vamos agora fugir um pouco do nosso tema e analisar os sites melhores colocados para a palavra-chave
“hospedagem”, a qual possui uma concorrência muito maior do que “curso java”. Desta forma, podemos ilustrar melhor
que tipo de OffPage SEO você poderá precisar para conseguir atingir top rankings nos mecanismos de busca.
Assim, para começo de análise, precisamos ir ao Google e digitar a palavra-chave “hospedagem”. Devemos visitar os
10 primeiros colocados na pesquisa para esta palavra-chave e coletar as informações listadas anteriormente.
Sites Apontando
São os sites que apontam para www.kinghost.com.br, o qual é o 1º resultado no Google para uma pesquisa feita para o
termo “hospedagem”. Existe uma dezena de maneiras para encontrar os links que apontam para este site. A mais
comum é ir até o Google e fazer um busca desta forma: link:www.kinghost.com.br, como podemos ver a seguir.
Figura 1: Pesquisa de links no Google
Uma vez feito isso, é retornada uma lista contendo os links que apontam para o site pesquisado. Como podemos ver
na figura 2, o Google contabilizou um pouco mais de 6000 links para www.kinghost.com.br.
Figura 2: Resultado busca de links no GoogleObs: Há algum tempo, o Google vem cortando o número de links que são mostrados na pesquisa como a feita acima. Uma alternativa é utilizar o Yahoo. Neste caso, a pesquisa ficaria da seguinte forma: link:http://www.kinghost.com.br e, provavelmente, retornaria um número maior de links. Repare que para pesquisar no Yahoo é necessário digitar o “http://” para realizar a busca.
Agora que temos a lista de todos esses sites, devemos analisar a qualidade de cada um deles:
Texto dos Links (Anchor Text)
É o texto propriamente dito presente no link que aponta para um site. Por exemplo, no link abaixo, o anchor text é
“Ferramenta SEO”.
Ferramenta SEO
Observação: Anchor Text é um dos principais fatores de Otimização Externa. Ao conseguir um link para seu site, sempre tente colocar suas principais palavras-chave no texto dele.
Analisando o resultado da busca que retornou os links que apontam parawww.kinghost.com.br, podemos ver que o 1º
deles vem do sitehttp://www.sephiroth.it/firefox/. Entrando neste site e procurando pelo link, podemos observar que o
seu texto é “Hospedagem de Site”, conforme mostra a figura 3:
Figura 3: Anchor Text para King Host
Código-fonte:
<a href=”http://www.kinghost.com.br”>Hospedagem de Site</a>
Observe que no texto do link está presente a palavra “hospedagem” – exatamente a palavra-chave usada em nossa
busca e que retornou o site www.kinghost.com.br em 1º lugar. Fique atento a isso!
Page Rank
Continuando com o nosso exemplo, é o Google Page Rank da página que contém link para www.kinghost.com.br. Para
saber qual é o Page Rank de um site, é necessário instalar a barra de ferramentas do Google, que pode ser obtida
gratuitamente emhttp://toolbar.google.com.
Visitando novamente o 1º site que aponta para www.kinghost.com.br, podemos constatar que ele possui um Page
Rank 6, o que é excelente, conforme ilustra a figura 4:
Figura 4: Exemplo de Google Page Rank
Popularidade dos Links
A popularidade de um link se refere ao número de links que apontam para ele. Você pode encontrar esses números da
mesma forma que fizemos no item “Sites Apontando”. Ou seja, digitando para cada link, o seguinte comando de
pesquisa no Google:link:www.NomeDoSite.com. Depois é só contar o total de resultados que é retornado. Outra
alternativa é ir a um site como www.linkpopularity.com, que também faz esse tipo de busca para Yahoo e MSN.
Fazendo uma pesquisa digitando “link:www.sephiroth.it/firefox” no Google, vemos que esta página possui um total de
211 links apontando para ela.
Figura 5: Exemplo de Popularidade de Link
Outbound Links
São os links externos de uma página. No caso do site www.sephiroth.it/firefox, são os links que não apontam para
nenhuma página pertencente ao domínio www.sephiroth.it, ou seja, são os links que referenciam outros sites.
Analisando os links existentes na página www.sephiroth.it/firefox, podemos perceber que o número de outbound links
chega a 17.
Quantidade de Links
Representa a quantidade total de links existentes em uma página, o que inclui o número de Outbound Links, bem como
os links que apontam para páginas do próprio site, chamados de Internal Links (links internos).
Neste caso, o número total de links encontrados em www.sephiroth.it/firefox foi de 85.
Importante: quanto menor for a quantidade total de links presentes numa página que possui link para seu site, melhor será a qualidade desse link.
Título da Página
É o título do site que está apontando para www.kinghost.com.br. Neste caso, o título, “Firefox extensions – sephiroth.it”,
não contém nenhuma das palavras-chave para as quais o site www.kinghost.com.br está tentando se otimizar, como
“hospedagem” e “hospedagem de sites”.
Importante: obter links de sites que possuam em seus títulos alguma de nossas principais palavras-chave é extremamente importante e poderoso e, além disso, é uma coisa que as pessoas geralmente não percebem e acabam não fazendo.
Endereço IP
Quanto maior for o número de sites que apontam para você provenientes de endereços IP diferentes, melhor para seu
site.
Para descobrir o endereço IP de um site, vamos precisar de uma ferramenta auxiliar. Podemos usar esta , veja o link:
http://www.webrankinfo.com/english/tools/class-c-checker.php
Com ela, podemos digitar a URL dos sites desejados e obter os respectivos endereços IP rapidamente.
Comparando os dois primeiros sites que possuem links para www.kinghost.com.br, podemos ver que eles possuem IPs
diferentes.
Figura 6: Verificando endereço IP
Ok. Então, até aqui temos os seguintes dados:
Existem cerca de 6090 páginas listadas pelo Google que possuem links para www.kinghost.com.br;
O Page Rank de uma destas páginas (www.sephiroth.it/firefox) é 6;
O Anchor Text do link proveniente desta página é “Hospedagem de Site”;
O título da página é “Firefox extensions – sephiroth.it”;
O número de links apontando para a página em questão (www.sephiroth.it/firefox) é 211;
A quantidade de outbound links é 17;
Número total de links presentes na página: 85;
O endereço IP da página é 64.13.207.73.
Nosso próximo passo é criar uma planilha no Excel, ou em qualquer outro programa do gênero, para guardar todos
esses dados. Cada item listado acima deve ser representado por uma coluna. Repare que todo esse processo foi para
analisar somente o link proveniente de www.sephiroth.it/firefox.
Considerando todos os links que apontam para www.kinghost.com.br, vamos precisar calcular:
O percentual de sites que contém as palavras-chave “hospedagem” ou “hospedagem de sites” em seus títulos;
O percentual de sites que contém as palavras-chave “hospedagem” ou “hospedagem de sites” no texto dos links que apontam para www.kinghost.com.br;
O percentual de sites que possuem endereços IP diferentes;
Além de outras estatísticas…
E também armazenar esses dados em colunas na planilha.
Feito isso, passemos agora para o próximo link listado pelo Google, conforme mostra a figura 7, para realizarmos
novamente toda a análise que fizemos para www.sephiroth.it/firefox.
Figura 7: Continuação da Pesquisa de Links
Terminada a coleta de todas as informações do 2º link e dos 6088 restantes, podemos ver agora qual é exatamente a
estratégia de links (Link Building) do site www.kinghost.com.br.
Pois é, temos alguns problemas aqui: A não ser que você disponha de uma força tarefa com dezenas de pessoas, coletar todas essas informações com relação a 6000 links é
manualmente impossível;
Só para lembrar, ainda estamos no 1º resultado da busca feita para “hospedagem”, isto é, restam ainda 9 sites a terem suas estratégias de links analisadas.
Bem, talvez seu site não tenha concorrentes que possuam uma estratégia de links muito vasta. Neste caso, a análise
sugerida nesta aula torna-se possível de ser realizada.
Lembre-se: é extremamente importante ter noção de como é o Link Building de seus concorrentes. Desta forma, podemos saber de onde vêm seus links, que trabalho (tempo + dinheiro) teremos para atingir melhores posições, possíveis fontes de links e várias outras coisas.
Curso SEO (Aula 06) – Black Hat SEO | Técnicas incorretas de SEOCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 0
Uma simples pergunta: você está pedindo ao Google para ter seu site penalizado?
Tenho certeza de que está pensando: “Bem, é óbvio que não!”
Todos os dias, acompanhamos pessoas reclamando em fóruns sobre SEO a respeito de seus sites terem sido banidos
pelo Google. Essas pessoas dizem não ter feito nada de errado assim como não possuem a mínima noção do motivo
do Google ter agido dessa forma com seus sites.
O propósito dessa aula é ensinar a você uma coisa muito importante:
O que NÃO fazer quando estiver otimizando os fatores onpage e offpage em seu site.
Como saber se seu site foi banido?
Primeiro, vamos mostrar a você se seu site foi realmente banido do Google. Muitas vezes, as pessoas acham que
foram banidas, mas na verdade seus sites simplesmente despencaram no ranking e não são mais encontrados
facilmente no resultado de uma busca. Essa perda de ranking pode ser gerada por uma punição dada pelo Google ou
pela não manutenção de SEO em seu site. A otimização de sites para mecanismos de busca é um processo contínuo,
não adianta fazer uma vez e parar daqui a dois meses.
Para saber se seu site foi banido, acesse o Google e digite o prefixo site: seguido da URL completa do seu site na
caixa de pesquisa. Por exemplo, digite site:http://www.exemplo-nome-dominio.com.br e clique em “Pesquisar”.
Perceba que o Google diz não ter informações a respeito desta URL. Isto significa que ela não está presente em suas
bases de dados.
Há duas explicações para esse fato ocorrer: ou é um site recém-criado e que ainda não foi indexado pelos robôs de
busca (neste caso, essa mensagem aparecerá até o site ser indexado) ou é um site que foi banido pelo Google.
Agora, já sabemos como identificar se nosso site foi banido ou não.
O que pode levar seu site a ser banido?
Existem diversos fatores de otimização onpage bem como fatores offpage que podem levar o Google a penalizar seu
site com perda de posições no ranking ou até mesmo retirá-lo de seus índices. Iremos abordar nessa aula alguns
desses fatores que podem ser causas dessas punições.
Antes de começar, você deve ficar ciente de que existem muitos sites que estão impunes mesmo realizando estas
práticas. Elas não ajudam no ranking do seu site e são uma completa perda de tempo. Nunca as utilize! Mais cedo ou
mais tarde o Google irá encontrá-las e o seu site receberá uma punição. Não vale a pena correr o risco com coisas que
não lhe ajudam muito a melhorar o posicionamento do seu site. O conjunto dessas técnicas maliciosas e não éticas é
chamado de “Black Hat SEO” e, fazendo uma comparação direta, seria o mesmo que o Spam é para o E-mail
Marketing.
A seguir, vamos explicar com mais detalhes algumas dessas técnicas de Black Hat SEO.
Textos Hidden
Textos hidden (escondidos) são textos que os visitantes não conseguem ver ao entrar em um site. Alguns webmasters
fazem isto com a intenção de adicionar palavras-chave no decorrer da página sem deixar tal conteúdo visível a quem
visita o site, já que esteticamente ficaria feio. Porém, estes textos, mesmo estando escondidos dos visitantes, são lidos
pelos robôs de busca.
Por exemplo, vamos supor que seu site tenha um fundo branco. Caso você desejasse esconder algum tipo de texto,
poderia simplesmente fazer a cor do seu texto ser igual à cor do fundo da sua página: branco. Dessa forma, os
visitantes não perceberiam a existência do texto adicionado.
Vamos a um exemplo real: http://www2.uol.com.br/guiamaua/hoteis/55.htm
Este é o 1º site do resultado da pesquisa realizada no Google para as a seguintes palavras: “pousadas em visconde de
maua”.
Figura 2: Site Black Hat no Google
Visitando o site, não percebemos onde está o texto escondido.
Figura 3: Site Black Hat – O texto está escondido
Porém, basta apertar as teclas “ctrl + a” do seu teclado para que a farsa apareça. Esse comando irá selecionar todo o
texto da página e, até mesmo, textos hidden.
Figura 4: Site Black Hat – Texto hidden revelado
Esse texto hidden contém algumas das palavras-chave para as quais o site está bem posicionado no ranking do
Google. Porém, este não é o principal motivo deste site possuir a 1ª colocação no ranking. Caso viessem a retirar
esses textos escondidos, certamente continuariam com a mesma posição, além de acabar com a possibilidade de ser
penalizado ou banido pelo Google.
Alt Image Tag Stuffing
Essa é uma outra maneira que as pessoas tentam usar para inserir palavras-chave em seus sites, visando a leitura dos
robôs de busca, porém sem deixar que os visitantes percebam qualquer diferença.
A seguir, temos um exemplo de um site que gostaria de possuir um bom ranking para os termos “cabbage soup diet”. O
que eles fizeram foi inserir uma figura de um repolho (cabbage, em inglês). Quando um visitante entra no site e passa o
mouse sobre a figura, aparece um pequeno popup.
Figura 5: Exemplo de Alt Image Tag Stuffing
Repare quantas vezes ele repetiu as palavras “cabbage soup” e “cabbage”. Não há outra explicação para isto, a não
ser querer inserir o maior número de palavras repetidas possíveis em sua página.
O propósito real do atributo <alt> de uma tag de imagem é mostrar o texto presente neste atributo caso um usuário
entre no site e a imagem não seja carregada. Este artifício é usado para auxiliar pessoas que possuem problemas de
visão.
Alt tag Spam é uma coisa da qual você deve manter distância. O uso do atributo <alt> em tags de imagem é
aconselhável, sendo até recomendado, e um exemplo adequado de texto para o atributo <alt> neste caso seria:
cabbage soup diet graphic.
Meta Tag Stuffing
Neste tópico falamos de pessoas que enchem de palavras-chave, e às vezes até palavras repetidas, as meta tags
description e keywords.
Por exemplo, o uso da tag abaixo se refere a um site que deseja obter um bom ranking para as palavras-chave “livro
de anatomia”:
<meta name=”keywords” content=”LIVRO DE ANATOMIA, livros de anatomia, Livros de Anatomia, ANATOMIA,
LIVROS, Livros de ANATOMIA, LIVRO DE ANATOMIA, LIVRO ANATOMIA, ANATOMIA, Livro de Anatomia, LIVROS
de ANATOMIA, ANATOMIA, LIVROS LIVROS ANATOMIA, LIVRO anatomia livros de anatomia, anatomia anatomia,
ANATOMIA, Livro Anatomia”/>
Isto é realmente ridículo. O Google não faz uso de meta tags para construir seu ranking de sites. Além disso, este site
será penalizado.
Fique longe dessa técnica também.
Title Tag Stuffing
Abaixo, temos um exemplo de Title Tag Stuffing:
Figura 6: Exemplo de Title Tag Stuffing
Não faça isto.
Você não deve repetir palavras-chave no título de seu site. Deve-se incluir as palavras-chave escolhidas apenas uma
vez. Qualquer quantidade a mais irá diminuir o peso atribuído a cada uma delas e, no caso de spam, como no exemplo
acima, o site certamente será penalizado.
Doorway
Uma “doorway page” é uma página criada especificamente para conseguir um bom posicionamento nos mecanismos
de busca. Porém, sua principal função é levar o visitante a outras páginas. Geralmente não possuem conteúdo algum
destinado ao internauta, são extremamente otimizadas para determinadas palavras-chave e possuem links para outras
páginas. Em alguns casos, há inclusive redirecionamento automático para outros sites através de JavaScript ou meta
refresh.
O Google e os demais mecanismos de busca condenam o uso desta técnica, já que o visitante não é levado para onde
ele realmente clicou e desejava ir, ou seja, ele esta sendo enganado!
Cloaking
Só pra lembrar, os robôs de busca atualizam suas bases de dados e formulam seus rankings visitando cada site
presente em seus índices, bem como cada link presente em cada site visitado e assim por diante. Cloaking consiste em
apresentar um conteúdo para o robô de busca e outro completamente diferente para o visitante.
A página apresentada ao robô não apresenta nenhum conteúdo útil. Ela é construída em função da leitura do crawler
(robô de busca) a fim de se conseguir uma boa posição no ranking. Geralmente é inflacionada com palavras-chave e
não possui uma leitura seqüencial lógica para um ser humano.
Isso fere algumas das diretrizes do Google, que preza conteúdo de qualidade e feito para o visitante. Portanto, não
utilize essa artimanha também.
Essas são apenas algumas coisas que as pessoas continuam a fazer. São técnicas que eventualmente acabam em
banimento e que não o ajudarão a se posicionar bem nas pesquisas. Realmente não vale a pena desperdiçar seu
tempo em algo que não traz resultados e que pode ainda acarretar em prejuízos a seu site.
Resumindo, fique sempre longe dessas técnicas chamadas de Black Hat SEO. Há muita gente trabalhando para que
os crawlers não sejam enganados. Mais cedo ou mais tarde você será descoberto e seu site será penalizado.
Definitivamente, não vale a pena!
Links “maus” podem prejudicar meu site?
Com relação à obtenção de links, não participe de link farms e mantenha distância de sites suspeitos ou que utilizem
deliberadamente técnicas de Black Hat SEO. Se o Google detectar links de sites maliciosos apontando para a sua
página, seu site pode ser penalizado.
Porém, existem vários fatores que o Google utiliza para analisar a situação antes de efetuar uma punição desse tipo.
Senão, imagina quantas pessoas iriam simplesmente adicionar sites concorrentes em link farms ou então inserir links
em páginas maliciosas apontando para as páginas de seus concorrentes? Sem dúvida, haveria muitos casos de
sabotagem.
Para evitar que sites sejam punidos injustamente, o Google considera fatores como o tamanho e a idade do site, sua
autoridade, verifica se os links provenientes de sites black hat e link farms são otimizados ou se são somente links
aleatórios. Mesmo assim, seu site ainda pode ser punido injustamente por uma ação eficiente de sabotagem da
concorrência.
Caso isso ocorra, trate de identificar quais são os sites maliciosos que apontam para a sua página, acesse
imediatamente as Ferramentas para Webmasters do Google e faça umpedido de reconsideração. Afirme que você
não se interessa e nem apóia os links provenientes dos sites black hat identificados e peça para eles simplesmente
desconsiderarem tais links, eliminando qualquer crédito ou descrédito que eles possam estar passando para a sua
página. Assim, o Google deverá remover a punição.
Outra maneira de ter seu site penalizado pelo Google é conter em suas páginas alguma referência (link) para sites
“maus”, como:
Links Farms
Sites penalizados pelo Google
Você deve estar achando que é fácil manter seu site fora desses casos, certo? Errado!
Tome este caso como exemplo: suponha que nós temos um site e trocamos links com o seu site. Até o presente
momento, tudo certo. Somos dois sites de boa qualidade, com conteúdos relacionados e com Page Rank 4. É uma
troca de links perfeita.
Passados alguns meses, começamos a fazer uso de algumas técnicas de Black Hat SEO. Percorrido mais algum
tempo, o Google descobre nossas técnicas maliciosas e decide banir nosso site.
Portanto, não estamos mais presentes nos índices de sites do Google e, consequentemente, nos resultados de suas
pesquisas.
Até agora, nenhum problema com relação ao seu site, certo? Errado!
Veja só, você ainda continua apontando para nosso site, o qual agora, é considerado “mau” por utilizar técnicas não
éticas para enganar os algoritmos do Google. E, por causa disso, seu site também será severamente penalizado. E
isso tudo mesmo sem você ter mudado uma linha de código do seu site!
Para e pense nisso por alguns instantes…
Seu site pode perder centenas de posições no ranking sem mesmo você saber o motivo!
Portanto, é muito importante manter o controle dos links presentes no seu site. De tempos em tempos, sempre
verifique os sites para os quais está apontando para saber se eles foram de alguma forma penalizados pelo Google ou
até mesmo banidos.
Curso SEO (Aula 07) – Ponto Crítico do SEOCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 1
Nas aulas anteriores, foram mostradas diferentes estratégias de otimização. Além disso, foram apresentadas também
as diferenças entre otimização onpage e offpage.
Revisão rápida
Otimização onpage se refere às modificações que você deve fazer no código do seu site, tais como: Title tag
Header tag
Negrito, itálico e sublinhado
Tags de imagem alt
Meta tags
Distribuição de palavras-chaves
Etc.
Otimização offpage se resume aos sites que estão apontando para o seu e como estão fazendo isso. São
considerados os seguintes fatores: Texto usado no link
Título da página que possui o link para você
Page Rank do site que o aponta
O assunto abordado pelo site que possui link para o seu
Etc.
A otimização onpage DEVE ser realizada em seu site, contudo são os fatores offpage que farão a diferença entre estar
ou não no topo dos resultados das buscas.
Vamos a um exemplo
Neste exemplo, iremos analisar o 1º lugar para uma busca feita no Google para a palavra-chave “clique aqui”.
Figura 1: busca no Google para a palavra-chave "clique aqui"
Como você pôde ver na figura 1, o 1º colocado é o site www.adobe.com.
Mas surge a pergunta: porque adobe.com é o 1º colocado para uma busca com esses termos?
Seria mais razoável se fosse para as seguintes palavras:
Programas de design gráfico
Criação de documentos para impressão
Programas para web design
E outras palavras relacionadas aos produtos que eles vendem…
Algumas coisas que você deve notar na figura acima:
1) A palavra “clique aqui” não está presente no título da página.
2) A palavra “clique aqui” não está presente na URL.
3) A palavra “clique aqui” não está presente nem na descrição mostrada no Google.
Agora, vamos voltar ao resultado da busca e entrar no site.
Abaixo, segue um print da página que estamos analisando:
Figura 2: página da Adobe.com
Observando a figura 2, percebemos que a palavra “clique aqui” não aparece nenhuma vez no site!
Se todos os fatores de otimização onpage que muitas empresas e pessoas julgam mais importantes fossem verdade,
você não acha que o 1º lugar do ranking para estes termos deveria ser outro site?
Fatores de otimização como:
Densidade de palavra-chave
Palavras em negrito, itálico e sublinhadas
Tags de imagem <alt> e cabeçalho <h1>, <h2>
Etc.
Não são fatores críticos em relação a se posicionar bem para certas palavras-chaves.
SIM, você deve distribuir sua palavra-chave pelo decorrer de sua página e realizar todas as outras estratégias de
otimização onpage que mencionamos nas aulas anteriores. Isso fará a diferença na hora do Google determinar o
posicionamento do seu site em relação ao seu concorrente de Page Rank parecido com o seu. Mas queremos que
aprenda uma coisa: é a otimização offpage que irá melhorar drasticamente seu posicionamento nas engines de
busca, principalmente Google, Yahoo e MSN.
Vamos mostrar então porque adobe.com é o 1º colocado para a palavra-chave “clique aqui”.
Esse resultado é devido aos links que apontam para ele. Mais especificamente quem está apontando e como estão
fazendo.
Vamos ver na prática:
Primeiro, devemos ir até o Google e fazer uma busca com o termo
link:http://www.adobe.com/br/products/acrobat/readstep2.html. Esta busca irá retornar os links que apontam para o site
da adobe.com, o qual é o 1º colocado para “clique aqui”.
Figura 3: busca no Google por páginas que linkam para a Adobe.com
Como podemos observar na figura 3, o Google nos retornou um número de aproximadamente 5600 links, o que é uma
quantidade muita boa. Além disso, observando com um pouco mais de calma, vemos que os sites que apontam para o
adobe.com são sites importantes e com Page Rank elevado. Dentre eles, podemos citar: Unibanco, IBM, TVE, sites do
poder público como Detran, Tribunais de Justiça, Universidades, etc.
Um outro aspecto interessante é com relação ao anchor text utilizado pelos sites que apontam para o nosso 1º
colocado.
Na figura 4 é mostrado o link presente no site do Greenpeace Brasil. Repare que nossa palavra “clique aqui” está
presente no texto do link. E isso também acontece nos links de vários outros sites.
Figura 4: link com a palavra-chave clique aqui
As duas principais razões para que adobe.com esteja em 1º lugar no rank para a palavra-chave “clique aqui”:
1. Os sites que possuem links para adobe.com possuem Page Rank alto.
2. Os sites que possuem links para adobe.com utilizam as palavras-chaves “clique” e “aqui” nos textos dos links.
Existem mais alguns fatores de otimização offpage que possam estar contribuindo para o site adobe.com estar
rankeado na 1º posição. Porém, essas duas são as principais razões.
Espero que você tenha percebido o poder e a importância da otimização offpage.
Curso SEO (Aula 08) – Como aumentar o Page Rank de suas páginas internasCARLOSCX ALBERT 25 DE FEVEREIRO DE 2012 2
Agora que aprendemos como fazer para que nossa homepage (index.html, por exemplo) possua uma boa posição no
ranking dos mecanismos de busca, vamos passar a focar nas técnicas para melhorar o posicionamento das páginas
internas (inner pages) de um site.
Apesar de parecer pouco importante, o que vamos ensinar nesta aula pode fazer a diferença em relação à busca por
certas palavras-chave, tendo em vista que a maioria dos sites não possui uma boa estrutura de links internos. Esses
links são usados para apontar para outras páginas do próprio site.
De acordo com o que foi visto nas aulas anteriores, é de suma importância a presença de suas principais palavras-
chave no texto dos links que apontam para seu site. Anchor Text é o fator offpage mais relevante para estar bem
rankeado nas engines de busca. Você não só deve conseguir links de outros sites contendo suas palavras-chave mais
importantes no texto, como também deve utilizar uma estrutura interna de links, na qual também faz uso de suas
principais palavras-chave no anchor text destes.
Para explicar melhor como moldar seus links internos, vamos utilizar dois exemplos de sites. O primeiro possui uma
boa estrutura de links internos, no qual você pode se basear. O segundo mostra o que não se deve fazer.
Vamos ao 1º exemplo: http://www.marketingdebusca.com.br/, que é mostrado na Figura 1.
Este é um site que, como o próprio nome já diz, é relacionado ao tema marketing de busca, ou seja, um dos vários
termos usados em português para “traduzir” SEO. O marketingdebusca.com.br foi criado pelo Paulo Rodrigo Teixeira,
que é consultor do MBA-GETI de uma universidade e especialista em marketing na Internet. Também mantém blogs e
escreve artigos para revistas e portais nesta área.
Figura 1: Página MarketingdeBusca.com.br
Se dermos uma olhada rápida no site, podemos notar que existe na coluna da esquerda uma série de links para várias
outras páginas do mesmo site. Observe também, que o texto dos links contém as palavras-chave que ele deseja
otimizar para cada página interna correspondente.
Por exemplo, ele otimizou muitas de suas páginas internas para vários termos relacionados a SEO:
Marketing de Busca
Mercado SEO
Números SEO
Figura 2: Exemplos de Otimização Interna
Vamos analisar uma dessas páginas. Se clicarmos no link “Mercado SEO”, vamos ser direcionados para uma página
que foi otimizada para a palavra-chave “Mercado SEO”.
Você pode notar que o Paulo Rodrigo utilizou várias técnicas de otimização onpage que já foram abordadas em aulas
anteriores.
A primeira delas é inserir a palavra-chave “Mercado SEO” na URL da página:
http://www.marketingdebusca.com.br/tag/mercado-seo/
Ele também utilizou as palavras-chave em questão no início do título da página, conforme mostra a figura 3.
Figura 3: Título Otimizado
Apesar de não possuir o termo “Mercado SEO” na tag de cabeçalho <h1>, este está presente na tag <h2> e
posicionado perto da porção superior esquerda do site, como mostra a figura 4.
Figura 4: Utilização da Tag
Na figura 5, podemos notar o resultado do uso da tag <h2>.
Figura 5: Visualização da tagna página
“Mercado SEO” também aparece várias vezes no decorrer da página, principalmente nas tags que classificam os posts
do blog, como podemos ver na figura 6.
Figura 6: Distribuição da keyword "Mercado SEO" pelo site
Porém, em nenhuma das ocorrências, a palavra aparece em negrito, em itálico ou sublinhada, o que poderia melhorar
ainda mais sua otimização onpage.
Mas lembre-se: estratégias de otimização onpage são coisas que você deve fazer, contudo sozinhas não levarão seu
site ao topo dos resultados dos mecanismos de busca. São os links que impulsionarão o seu ou qualquer outro site no
ranking das pesquisas.
Vamos agora analisar o anchor text dos links que apontam para este site.
Visitando o Google e digitando o texto
link:http://www.marketingdebusca.com.br/tag/mercado-seo/
obtemos os links que apontam para o site marketingdebusca.com.br/tag/mercado-seo , como mostra a figura 7.
Figura 7: Links para o site Marketing de Busca
Como podemos observar na figura acima, existem 26 links apontando para o site pesquisado. E percorrendo todas as
páginas do resultado da pesquisa, percebemos que TODOS os links são provenientes do próprio site! Realmente
nosso amigo Paulo conseguiu realizar um bom internal linking (termo em inglês para estrutura de links internos).
Agora, voltemos novamente ao Google e vamos fazer uma pesquisa com o termo “mercado seo”.
Veja o resultado na figura 8:
Figura 8: Resultado da Busca pelo termo "Mercado SEO"
Deixando o espanto de lado, em uma busca que traz 474.000 resultados, o site que estamos analisando aparece nas
duas primeiras posições do Google. E o motivo principal deste fato é a utilização de links do próprio site!
Internal Linking é definitivamente uma estratégia a ser usada.
Como mencionamos anteriormente, Paulo Rodrigo é um especialista em Marketing e SEO e seu
site http://www.marketingdebusca.com.br possui uma ótima estrutura interna de links, na qual você pode
tranquilamente se basear.
Agora, vamos ao exemplo do que você não se deve fazer. Neste caso, apesar do site estar em inglês, o que queremos
ensinar é facilmente compreensível.
Nosso exemplo negativo é: http://www.marketopsinc.com.
Este é um típico site bonitinho que provavelmente não consegue muitos acessos e é difícil de ser encontrado nos
mecanismos de busca para qualquer que seja a palavra-chave.
Figura 9: Página www.marketopsinc.com
Será que você consegue observar algumas coisas erradas que eles estão fazendo?
O título da página é www.marketopsinc.com – Apesar de ser o nome da empresa, isto não tem propósito algum. Ninguém irá procurar por este termo nos mecanismos de busca.
Não existem tags de cabeçalho <h1>, tags de imagem <alt>, palavras em negrito, em itálico ou sublinhadas.
A maior parte do texto do site está em uma figura imensa.
E muitas outras coisas…
Analisando a estrutura interna de links, percebemos que seus links não são textos! Eles estão presentes em figuras!
Este fato não o ajuda em nada, pois os mecanismos de busca como o Google não conseguem ler as figuras.
Simplesmente está deixando de conseguir alguns “votos” para o Page Rank de suas próprias páginas internas.
Caso este site não possua uma boa quantidade e qualidade de links externos, não temos nenhuma dúvida em afirmar
que ele não aparecerá nas pesquisas para as palavras-chave presentes em seu Menu, que devem estar entre os
termos de busca mais importantes para o site em questão. São elas:
Consulting Services
Business Products
Strategic Sourcing
Etc.
Se formos ao Google ou a qualquer outro mecanismo de busca e colocarmos as palavras acima na pesquisa, vamos
perceber que o site www.marketopsinc.com não aparece nunca nas primeiras páginas dos resultados das pesquisas.
Diante deste fato, podemos claramente perceber o que não deve ser feito.
Lembre-se: se você puder “votar” para uma página interna de seu site utilizando sua principal palavra-chave no anchor
text no link, SEMPRE faça isso. Como pudemos ver no caso do www.marketingdebusca.com.br , essa técnica pode
ajudar a levar seu site para o topo do ranking dos sites de busca.
Plágio e Direitos de Autor na Internet – Prevenção e Combate – Guia Completo
Finalmente, vamos ver os métodos e ferramentas que podem ser utilizados na prevenção e no combate ao plágio.
Antes de continuar, pegue um café ou uma cerveja, pois este texto vai ser longo. No entanto, creio que o esforço de
me acompanhar até o final valerá a pena; afinal, se você não proteger seu trabalho, quem o fará?
1 – Para Começar – Informe-se
Em primeiro lugar, você precisa saber do que está falando; o que é plágio e quais são seus direitos como autor de uma
obra/texto/post original, o que é correto ou errado, e quais são as limitações dos direitos de autor. Leia:
Plágio e Direitos de Autor nos Blogs – Legislação Aplicável – Como a lei de direitos de autor se aplica aos blogs? Links
para o texto integral da lei.
7 Mitos Sobre Plágio – mitos comuns sobre o plágio.
Cópias na Internet: Nem Tudo é Plágio – conheça os diferentes tipos de cópia que você pode encontrar.
Como Usar Imagens no Seu Blog, Sem Ferir os Direitos de Autor Sobre Imagens – A lei de direito autoral também
protege imagens (e vídeos, e qualquer tipo de criação, aliás).
Copyright Office Basics – Seção de conceitos básicos do Site Oficial de Copyright do Governo dos EUA; em inglês ou
espanhol.
Plagiarism Today – Site sobre plágio, roubo de conteúdo e direitos autorais online. Em inglês.
2 – Prevenção – Escolha sua licença
Agora que você já está “por dentro” de tudo, é hora de pensar em prevenção. Para isso, você deve decidir que
restrições e/ou permissões você vai determinar para seu trabalho. Existem várias opções, mas as mais usadas são:
1 – Copyright – Todos os Direitos Reservados
Essa é a licença do direito autoral tradicional; o que significa na prática é que nenhuma parte do seu trabalho pode ser
utilizada sem a sua permissão expressa. Quem opta por esta licença – como eu – não permite cópia ou redistribuição
de seu material, nem mesmo nos casos em que a fonte/autor é indicada.
Por exemplo: você não pode copiar meus posts e publicá-los em sua página, mesmo que coloque um link
indicando de onde retirou o material. A menos que eu lhe dê permissão para fazê-lo, isso constitui violação de direitos
autorais (contrafação).
2 – Creative Commons – Alguns Direitos Reservados
” O Creative Commons disponibiliza opções flexíveis de licenças que garantem proteção e liberdade para artistas e
autores. Oferecer sua obra sob uma licença Creative Commons não significa abrir mão dos seus direitos autorais.
Significa oferecer alguns dos seus direitos para qualquer pessoa, mas somente sob determinadas condições.”
Se você optar por distribuir seu conteúdo sob uma licença Creative Commons, você pode optar entre vários critérios,
que vão desde permitir somente a reprodução fiel do original para uso não comercial, até permitir que sua obra seja
reproduzida, modificada, remixada, etc; inclusive para fins comerciais.
O único elemento que todas as licenças têm em comum é a Atribuição – a citação da autoria da obra original. Mais
informações:
Conheça as Licenças
Escolhendo uma Licença
Por exemplo: o Manoel Netto, do Tecnocracia, usa uma licença CC que permite que você copie, distribua, e
crie obras derivadas de seus posts, para uso não comercial (isso exclui sites monetizados); desde que você lhe dê
crédito pela obra original e que qualquer obra criada em derivação seja distribuida sob a mesma licença.
3 – Divulgando sua Licença
Uma parte importante da prevenção é deixar claro quais são os usos permitidos ou restritos de seu conteúdo. Não
adianta muito ter a licença, e colocá-la escondida no rodapé da sua página. É extremamente improvável que um
plagiador vasculhe o blog à procura das políticas de uso.
É aconselhável colocar links para sua licença em um lugar bem visível; acima da dobra é o ideal. Adicione um pequeno
texto, explicando de que se trata o link (muita gente nem sequer ouviu falar de Creative Commons). O mesmo é válido
caso você opte por “Todos os direitos reservados”; esclareça aos visitantes de forma educada e clara qual é sua
política de uso. Em lugar visível!
4 – Como Descobrir que Estou Sendo Plagiado?
Ninguém vai passar o dia vasculhando a Internet, à procura de plágio. No entanto, muitas vezes o plágio vem até nós.
Por exemplo: em muitos casos dos quais fui vítima fiquei sabendo porque uma pessoa teve a bondade de me avisar.
Em outros casos, é possível que alguém denuncie ser vítima de plágio, e você acabe descobrindo que também foi
roubado pelo mesmo FDP.
A burrice dos plagiadores muitas vezes joga a nosso favor. Também é possível descobrir o roubo de seu conteúdo
através destas ferramentas:
Contador de Visitas – Estatísticas
É comum que o imbecil que rouba conteúdo não edite links que o autor tenha colocado no texto; sejam links para
outros blogs, para o próprio, ou até mesmo links de programas de afiliados.
Além disso, é possível que não se trate de plágio mas de uso do seu conteúdo, sem permissão. Nesse caso, o
contrafator costuma colocar um link para a fonte do material – o autor.
Em qualquer dos dois casos, é provável que você receba visitas vindas dessas referências. Portanto, fique atento às
suas estatísticas, verifique qualquer referência suspeita ou desconhecida.
Feeds do Google
Lembram dos feeds que eu sugeri como solução para a carência de trackbacks do Blogger? Eles são muito úteis na
descoberta de plágio.
Você pode criar feeds com sua URL, o nome do seu blog, expressões ou palavras únicas – por exemplo, resultados de
“Nospheratt” certamente estão falando de mim. Outra opção é fazer buscas com trechos específicos de posts que já
foram plagiados várias vezes, ou que você acha que são “isca” para os plagiadores.
O mesmo pode ser feito com os Alertas do Google.
Se você quer manter uma vigilância ativa ao invés de esperar que os casos de plágio caiam na sua cabeça, você tem
duas opções:
Este método dá uma trabalheira danada, mas é altamente efetivo. Consiste simplesmente em procurar no Google por
trechos específicos e incomuns de seu texto. Não use o título; geralmente o ladrão muda o título, e conserva o corpo
do post. Agora, você vai ter que checar os resultados, para descobrir se alguém está roubando seu conteúdo.
Por exemplo, para procurar plágios do meu post “Os 7 Pecados Capitais que os Blogueiros Cometem“, eu usaria um
parágrafo assim: “qualidade dos contatos. Então dispara spam“. A busca revela vários links; apenas dois são meus. E
esta mensagem:
Para mostrar os resultados mais relevantes, omitimos algumas entradas bastante semelhantes às 8 já exibidas. Se
quiser, você pode repetir a consulta, incluindo os resultados omitidos.
Quando você estiver procurando por plágio deve repetir a consulta; aí é que se encontram os plagiadores. Também é
importante realizar a busca não só no Google.com.br mas no Google.com; este último lista também as páginas que
não estão no Brasil – caso dos Blogspot, por exemplo.
Copyscape
O Copyscape permite que você insira uma URL, e ele procura páginas com conteúdo altamente semelhante. Ele
mostra os resultados, com opção de ver a página com o seu conteúdo ressaltado, ou ver o cachê da página. No
serviço grátis o número de resultados é limitado; você pode ober no máximo 20.
Eles oferecem serviço Premium, com resultados ilimitados, e um serviço de monitoração e alerta – oCopySentry – que
suponho que deve funcionar mais ou menos como os feeds ou os Alertas do Google. Maisinformação sobre o
Copyscape aqui.
5 – Vá com Calma
Plágio e roubo de conteúdo são duas coisas que incomodam muito. Mas é fundamental não ficar obcecado com isso.
Lamentavelmente, essas duas coisas acontecem todos os dias. Evite gastar todo o seu tempo disponível procurando
infratores – você vai acabar ficando louco e com a pressão alta.
Claro que não estou dizendo com isso que você não deve dar importância ao assunto. O plágio não deve ser tolerado;
mas é preciso encarar esse assunto com cordura e sensatez, e não deixar que arruine seu humor ou pior: que ocupe o
tempo que você deveria usar para criar mais conteúdo (que será posteriormente roubado ).
6 – O Que Fazer Quando Descobrir Que Estou Sendo Plagiado?
Como bem disse o autor do Plagiarism Today:
A única coisa mais chata que procurar plágios de seu trabalho, é encontrar um.
Quando isso acontece, estes são os passos que você deve dar:
Recolher Informação
Primeiro que nada, salve a página (ou páginas) no seu computador ou no Evernote.
Se a página já tiver sido retirada do ar, procure o cache e salve. Anote a URL do site/blog e procure pela informação
disponível na página sobre o plagiador: nome, nick, email, IM, redes sociais… todo e qualquer dado pode vir a ser útil.
Além disso, é recomendável (se estiver disposto) que você escolha aleatóriamente outros posts – além dos seus – e
procure descobrir, no Google ou no Copyscape, se são textos roubados de outras pessoas. Geralmente, quem plagia
um, plagia todos; não raro, você descobrirá blogs feitos pura e exclusivamente de plágios.
Em caso afirmativo, você pode entrar em contato com essas pessoas, avisando do ocorrido e oferecendo a
possibilidade de coordenar esforços na luta contra o plagiador. Quanto mais gente se unir para dar os próximos passos
, maiores são as probabilidades de sucesso.
Outra coisa importante é descobrir onde o blog infrator está hospedado.No caso de blogs hospedados em serviços grátis, é simples: Wordpress.com, Blogger, UOL, etc. Se o blog não está
hospedado num servidor grátis, a coisa se complica um pouco, mas não é impossível descobrir o host. Procure por
informação na própria página; se não houver nada – banners, links, publicidade – use o método descrito nesta
página: Finding the Host.
Confrontar o plagiador
Depois de reunir toda a informação possível, é hora de confrontar o infrator diretamente. Aqui você pode escolher entre
“entrar de sola”, agressivamente (como eu mesma já fiz em alguns casos) ou procurar primeiro resolver o problema de
forma “amigável”.
Depois de pesquisar e ler bastante sobre o assunto, cheguei à conclusão de que a segunda opção é melhor – apesar
da raiva e da frustração que se sente ao descobrir a “apropriação indevida” de seu trabalho. Por dois motivos:
É possível que você consiga resolver o problema rapidamente, e economize dores de cabeça;
É possível que a pessoa não tenha plagiado seu trabalho diretamente, mas sim copiado o texto de outro lugar.
Por exemplo, é comum ver textos plagiados postados em fóruns, de onde são novamente plagiados – com ou sem
permissão expressa do, digamos, “plagiador original”. Sim, muitos desses ladrões sem-noção, não só roubam seu
conteúdo, como permitem e encorajam outros a fazer o mesmo.
Por isso, é melhor confrontar o plagiador de forma educada; se você for agressivo, pode perder a chance de descobrir
outra violação de seus direitos.
Agora, ser educado não quer dizer que você não deva ser firme e claro. Experimente, como primeiro contato, deixar
um comentário no post-plágio, explicando que você é o autor do texto em questão, que suas políticas de uso
estabelecem que (insira os termos apropriados), e que espera que o problema seja corrigido até o dia (especifique
prazo). Também pode ser aconselhável incluir um questionamento sobre onde ele obteve o material: diretamente do
seu site ou de alguma outra fonte (que seria outro caso de plágio).
Na maioria dos casos, o plagiador simplesmente deletará o post em questão, seja essa sua exigência ou não. Muitas
vezes ele preferirá deletar o post antes que creditar a fonte. Ele não responderá seu comentário nem mencionará o
assunto onde quer que seja; seu óbvio desejo é que esse episódio escabroso simplesmente desapareça. Tudo isso só
mostra que ele sabia estar fazendo algo errado, e que o fez na esperança-quase-certeza de não ser descoberto.
Caso ele retire seu conteúdo do ar, você já pode deixar o assunto morrer. Se você for informado de que o material foi
retirado de outro lugar – blog, fórum, etc; – seria momento de tomar providências quanto ao outro caso.
Se o plagiador não remover o conteúdo roubado (ou creditar a fonte, depende das suas exigências) e não responder
ao seu comentário, ou se ele responder de forma negativa – “Vá se phoder” ou “Não sei do quê você está falando” ou
qualquer resposta que não satisfaça suas exigências, você pode…
Enviar uma Notificação Extra-Judicial
Em inglês, “Cease and Desist Letter”. Em português, segundo o Portal do Administrador:
Embargo de Ação: Intimação ou aviso judicial dirigido a um indivíduo, empresa ou sindicato, para deixar de
violar a lei ou as regras e regulamentos estabelecidos por um órgão administrativo do governo. É uma espécie de aviso
que antecede uma ação legal para o caso em vista.
Claro que um “aviso judicial” seria enviado através de um advogado; no entanto, para a maioria dos casos uma
notificação extra-judicial escrita – em tom formal e incisivo – pelo próprio blogueiro servirá. Se você tem um advogado
que possa lhe auxiliar a escrevê-la, tanto melhor; se não, o site Plagiarism Today oferece umapequena guia dos
elementos que a notificação usualmente deve conter, a qual traduzo aqui:
1 - Toda a informação pertinente à infração, incluido quais são as peças em questão (textos,
fotos, etc.), onde elas estão (no seu site e no dele), e por que o uso em questão infringe suas políticas de uso/direitos
de autor;
2 - Uma lista de coisas que você quer que ele faça – por exemplo, creditar corretamente a
fonte do material ou removê-lo completamente; uma exigência de que ele lhe informe (por email) que a correção foi
feita, informação de onde ele obteve o material (diretamente de seu site, ou de outro plagiador?), etc;
3 - Um prazo para que o infrator satisfaça suas exigências;
4 - O que acontecerá se ele não satisfizer essas exigências (incluindo uma possível ação legal, denúncias
ao serviço de hospedagem e aos programas de monetização, etc.).
É aconselhável incluir no texto a informação que você tenha sobre ele, desde o nome até as provas de que disponha.
Diga também (se for o caso) que você está ciente de que ele plagiou outros sites e irá denunciá-lo às outras vítimas.
Antes de enviar a notificação, você deve estar preparado para levar a cabo as ações prometidas. Não se assuste; a
ação legal dificilmente terá que ser iniciada. Principalmente tratando-se de blogs, é bastante provável que o plagiador
desista muito antes de chegar à esse ponto.
No entanto, assegure-se de ter suas políticas de uso especificadas claramente, em lugar visível, em todas as páginas
que contenham seu conteúdo. Como eu já expliquei antes, isso auxiliará não só a evitar futuros casos de
plágio/violação de direitos de autor, como será útil como argumento caso você se veja envolvido em uma ação legal.
Um exemplo de notificação, adaptado do site Webmaster Techniques:
__________________________________________Notificação Extra-Judicial – Violação de Políticas de UsoSão Paulo,15 de Junho de 2007
Sr. (nome/nick do infrator):
Estou ciente de que o Sr. está republicando/redistribuindo conteúdo de minha autoria, originalmente publicado no (URL
do seu conteúdo/post), no seu blog/site, neste endereço: (URL do plágio/violação).
O uso não autorizado (ou não creditado) de material original retirado de (URL do seu blog) viola os termos de uso
especificados no meu blog/site, e constitui contrafação – violação de direitos autorais – conforme a Lei nº 9.610/98 – a
Lei de Direitos Autorais.
Em decorrência da violação, exijo:
1 – A remoção imediata do conteúdo não autorizado de seu site/blog (ou “que seja creditada de forma correta e
imediata a autoria do conteúdo em questão”);
2 – Ser informado se o conteúdo em questão foi copiado diretamente de (URL do seu conteúdo/post) ou obtido de
outra fonte, que pode ter sido autorizada por mim ou não;
3 – Ser notificado através deste endereço – (endereço do seu email) – da remoção do conteúdo não autorizado (ou “de
que o conteúdo foi devidamente creditado”).
O Sr. tem prazo até o dia (data) para corrigir a violação acima descrita, e enviar-me a informação/notificação requerida.
Caso o Sr. ignore esta notificação, ou persista na violação, me verei obrigado a tomar as seguintes providências:
- Denunciá-lo ao (serviço de hospedagem: Wordpress.com, Blogger, empresa de hospedagem, etc;);
- Denunciá-lo ao (programas de monetização que se apliquem: Adsense, etc;);
- Dar início à uma ação legal contra o Sr., visando proteger meus direitos.
Esta notificação constitui o último aviso que lhe enviarei, antes de tomar providências mais sérias.
Atenciosamente,
(seu nome/nick) – (URL do seu site/blog)
____________________________________________Espere até o final do prazo que você estipulou. A violação continua? É hora de…
Entrar em Contato com a Hospedagem
A maioria dos provedores de hospedagem oferecem um endereço específico onde você pode denunciar abusos e
conteúdo ilegal dos sites hospedados. Para serviços grátis:
Wordpress.com: Preencha este formulário de contato. Informe claramente qual é a violação e inclua a URL
do post original e do plágio. Explique que você tem provas de suas acusações, e deixe um email válido onde o time do
WP possa entrar em contato com você.
- Blogger/Blogspot: Aconselho que você leia os Termos de Serviço e a Política de Conteúdo do Blogger.
Depois disso, siga os passos do formulário para enviar um pedido de remoção de conteúdo do Google.
Importante: Não tome esta medida de forma leviana. A Google avisa que você pode ser
condenado a pagar danos e prejuízos se não tiver razão em sua notificação. Certifique-se de que sua reclamação é
justa, antes de enviar o formulário e siga o procedimento indicado por eles de forma correta.
Outros serviços grátis: procure por “denunciar abuso” no TOS, na ajuda, no FAQ ou na página “Sobre”.
Siga o procedimento indicado.
Hospedagens pagas: a maioria delas conta com um email do tipo [email protected]. Você pode
descobrir o email correto no whois do domínio do infrator, ou na página da própria hospedagem.
Caso a hospedagem esteja localizado nos EUA, ela está obrigada a ater-se ao Digital Millennium Copyright
Act (DMCA). No entanto, antes de enviar uma notificação DMCA formal, envie um email educado explicando seu caso.
Inclua as URLs em questão, um email de contato e a notificação extra judicial que você enviou anteriormente ao
infrator, informando que suas exigências não forma atendidas.
Um email semelhante deve ser enviado às hospedagens brasileiras ou localizadas no exterior, fora dos EUA. A
questão é que nestes casos o DMCA geralmente não se aplica; ou seja, você depende da boa vontade da empresa.
Portanto, seja sempre educado, amigável e paciente. Não faça ameaças contra a empresa, não envie 10 mensagens
seguidas exigindo solução, não responda de forma agressiva se a empresa requerir mais informação ou informação
em outro formato.
Lembre-se, você precisa da ajuda da empresa. Transformá-la em inimiga não vai lhe servir de nada. Na maioria dos
casos – grátis ou pagos – a empresa suspenderá a conta do infrator – sempre e quando sua queixa seja justificada.
Denunciar o Infrator aos Programas de Monetização
Se você chegou ao ponto de contatar a hospedagem para que o blog do infrator seja suspenso, isso significa que o
cidadão em questão não está disposto a colaborar. Então, não tenha pena: ataque onde mais lhe doerá, no bolso.
Se o infrator participa de programas de monetização como Adsense e afins, denuncie-o. Certamente ele verá sua
conta ser suspendida.
Para denúncias ao Adsense, a Google também se atém ao DMCA. Na mesma página de remoção de conteúdo
do Google que se usa para denunciar infrações em todos os produtos Google.
Para outros programas de monetização, procure por informação de contato no site da empresa.
E se o infrator não usa monetização e a hospedagem não colabora? Você pode tentar…
Excluir o Blog/site dos Motores de Busca
Se nenhuma tentativa de tirar o site infrator do ar funcionar, você pode enviar uma notificação DMCA aos motores de
busca (Google, Yahoo, MSN, etc;) requisitando a exclusão do site em questão dos resultados de busca. O Google
inclusive publica cópias das DMCA no site Chilling Effects. Veja um exemplo aqui:KaZaA Owner Complains to Google
(#5).
Excluir o site do infrator dos motores de busca provavelmente acabará com a motivação que o filho da mãe possa ter
para persistir na violação; não lhe servirá de muito manter seu site cheio de material roubado, se não tiver visitantes
que o elogiem por esse trabalho, ou que cliquem em seus anúncios. E todo o mundo sabe que os motores de busca
são a principal fonte de visitantes de qualquer site.
Tenha em mente que uma notificação DMCA é uma medida séria, que não deve ser tomada de forma leviana. Não se
arrisque a denunciar “fair use” como violação de direitos de autor.
O que é “Fair Use”?Traduzido do site Chilling Effects:
“A defesa mais comúm contra uma denúncia de infração é o argumento de “uso apropriado” (fair use), uma
doutrina que permite às pessoas o uso não autorizado de material original (copyrighted material) em certas situações,
como por exemplo citações de trechos de livros, em resenhas sobre o livro. Para avaliar o uso apropriado de material
original, a Corte (nos EUA) considera 4 fatores:
1. O propósito e características do uso;
2. A natureza do material original;
3. A quantidade e substância da cópia;
4. O efeito no mercado.
O fator mais significativo nesta análise é o quarto, efeito no mercado. Se uma cópia suplanta a demanda pelo trabalho
original, então será muito difícil para o copiador argumentar como defesa o “uso apropriado”. Por outro lado, se a cópia
não compete com o original, por exemplo por ser uma sátira, paródia, crítica ou notícia informativa, é mais provável que
seja permitida como uso apropriado.”
Para saber mais leia sobre Fair Use na Wikipédia.
Comento: como eu costumo dizer, a citação (quote) de uma pequena porção do texto, com crédito/link para a
fonte original, é uma prática completamente aceitável. Mesmo que seja de sites que usem o “Copyright – Todos os
Direitos Reservados”, como os meus blogs.
Leve em consideração que se você plagiar ou reproduzir sem permissão (ou sem o crédito apropriado) um post
original, e a sua cópia aparecer melhor posicionada do que o original nos rankings de busca, você não só estará
incorrendo em notória e flagrante infração como não poderá utilizar a doutrina de “uso apropriado” como defesa, caso
tenha que enfrentar uma ação legal.
Evite problemas: respeite os direitos autorais e as políticas de uso, sempre.7 – Não desista ainda!
Se todos os métodos anteriores se mostrarem infrutíferos, ainda existem algumas outras táticas que podem ser
empregadas.
Entre em Contato com Outra Vítimas do Mesmo Infrator
Láááááá em cima, onde eu falei sobre “Reunir Informação”, mecionei que seria útil descobrir se o infrator
está violando direitos autorais de outras pessoas, além de você próprio. Em caso afirmativo, e caso você não tenha
entrado em contato com as outras vítimas somente por caridade cristã, deveria fazê-lo agora.
Informe os outros sobre a violação e proponha ações conjuntas: desde confrontar o infrator, até enviar uma DMCA ao
ao Google. Inclusive, se a hospedagem do infrator não lhe deu atenção antes, é bem possível que seja mais atencioso
com uma queixa assinada por várias pessoas ou várias queixas enviadas contra o mesmo infrator.
Seja Chato, Muito Chato… Muito chato mesmo!
Dependendo da gravidade do assunto, de quanto você esteja sendo prejudicado pelo infrator e de quão longe você
esteja disposto a ir, a insistência e a encheção de saco podem ser táticas válidas.
Você pode deixar comentários de forma contínua no blog do infrator, persisitindo até que ele prefira retirar seu
conteúdo do ar antes que continuar deletando comentários. Pode procurar pelo perfil dele no Facebook ou Twitter,
descobrir de que fóruns e listas de discussão ele participa, e espalhar em vários lugares que ele frequenta a notícia
sobre a violação.
Outras opções: postar sobre o assunto em fóruns e sites sobre plágio e direitos autorais; criar uma página ou
um mini-site sobre a violação. Neste último caso, se você trabalhar para que a página esteja bem-posicionada nos
motores de busca, pode conseguir que ele apareça quando alguém realizar uma busca pela pessoa ou site do infrator.
Importante: Não seja agressivo nem mal-educado, não faça ameaças nem falte com a verdade. Não emita
juízos ou opiniões sobre a pessoa do infrator, seu procedimento ou seus sites; limite-se ESTRITAMENTEaos
fatos dos quais você tenha provas. Não dê ao infrator a mínima possibilidade de acusá-lo de difamação, calúnia, injúria
ou ameaça. Na dúvida, consulte com um advogado antes de publicar qualquer coisa.
Nada disso deu resultado? Mas que infrator filho da mãe #$%&#$! A última alternativa é…
8 – Ação Legal
Entrar com um processo legal contra um contrafator (violador de direitos autorais) é uma medida muito séria. Implica
em custos financeiros, e sempre há a possibilidade de perder, por pequena que seja. Na maioria dos casos é uma
opção simplesmente inviável, especialmente em casos de jurisdição internacional.
O site Plagiarism Today menciona a possibilidade de que você peça para um amigo advogado (se tiver um, claro) que
redate e assine formalmente as cartas que você enviará ao infrator e à empresa de hospedagem. De ser possível,
envie essas cartas por correio certificado; como segunda opção, por fax. Isso, assim como uma carta redatada em
termos legais e assinada por um advogado, demonstra mais seriedade do que um simples email.
Se você conta com essa opção, aproveite. Como o autor do site diz, as pessoas ignoram suas mensagens porque não
acreditam que seja um assunto sério. Se você lhes demonstra a gravidade e seriedade do problema, geralmente eles
recuarão rapidamente.
De última, só você pode decidir se finalmente entrará na Justiça com um processo legal. Leve em conta as provas de
que dispõe e os custos que isso implicará; bem como se realmente o prejuízo que está sendo causado pela
contrafação justifica empreender esse caminho. Consulte com um advogado de confiança, e se assessore antes de
qualquer ação.
Você tentou tudo o que esteve ao seu alcance, mas não conseguiu resolver o problema? Infelizmente…
9 – Não Se Pode Ganhar Sempre
Pelo que eu li por aí, é realista esperar resolver a maioria dos casos de violação de seus direitos de autor que você
encontrar. Fato que indica claramente que por vezes você vai perder. Ou seja, eventualmente você pode se defrontar
com um caso de violação que continuará no ar a despeito de todos os seus esforços.
No entanto, se isso acontecer, não se mate. Não se desespere, nem perca o sono. O importante é que você lute contra
todos os casos que chegarem ao seu conhecimento, e resolva todos os que lhe forem possíveis. Isso minimiza em
grande medida o dano que as violações podem causar ao seu site/blog, e cria bases sólidas sobre as quais demonstrar
– a quem quer que seja – quem é o verdadeiro e legítimo autor de seu trabalho.
Afinal, pior do que aceitar as derrotas ocasionais seria não fazer nada nunca, e deixar que os infratores ganhem
sempre. O conteúdo é seu, e você é o único que pode protegê-lo.
10 – A propósito…
Este texto não pode ser reproduzido em lugar nenhum sem contar previamente com minha permissão expressa – excetuando o que possa ser considerado “fair use” ou “uso apropriado”, conforme o
que já foi estabelecido anteriormente neste mesmo texto.
E se você acha que é ridículamente desnecessário fazer esse esclarecimento, saiba que já fui vítima de plágio e
contrafação… já roubaram e plagiaram meus textos sobre plágio e contrafação!!!
Plágio é atestado de burrice!
Por essas e outras (que eu conto em outra ocasião), estou aderindo à campanha
da Tuka Pereira:
Plágio é atestado de burrice, sim senhor!Se quiser aderir, sinta-se livre para exibir a imagem no seu blog – depois de fazer um upload ao seu serviço preferido
de hospedagem de imagens, claro.
O que eu acho mais triste é que a luta contra o plágio está prejudicando os blogs e seus leitores.
Para achar o post da Tuka, por exemplo, tive a maior trabalheira. Aparentemente ela desabilitou uma quantidade de
funções no blog com a intenção de evitar a cópia. O problema é que é difícil fazer isso sem desabilitar coisas úteis,
como a busca do blog. Isso prejudica enormemente a navegação e a usabilidade de um blog excelente. Estou certa de
que a Tuka deve estar bastante chateada por se ver obrigada (devido aos plagiadores) a tomar esse tipo de medida. E
ela não é a única.
Pra você ver que plágio é coisa séria. Como se diz por aqui, “é uma falta de tudo um pouco”!
Plágio é uma prática nociva que deve ser combatida, em vez de ser aceita como uma inevitabilidade do destino.
Faça a sua parte: proteja seu conteúdo e lute por seus direitos.
Accordionza 1.1 P L U G I N J Q U E R Y p o r G E E R T D E D E C K E R E
C O M P R E A G O R A
Incorporação de vídeo também é possível? Claro. Os slides podem conter qualquer código HTML que você
deseja. Bom, hein?
▲ # accordion1slideshow clássico
Como você pode ver a partir destas demos, Accordionza é plugin jQuery muito flexível. Ao fornecer uma base de código acordeão sólida, deixa-lhe a liberdade para criar um acordeão do jeito que você quiser.
Algumas das características mais notáveis: Autoplaying funcionalidade com a opção de fazer uma pausa
em foco e autorestart , efeitos personalizáveis e velocidade , legendas dobráveis , navegação pelo
teclado , e mais .como fundo no quarto slide acima
M A I S I N F O R M A Ç Õ E S
EsportesLorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer. Leia mais →
TecnologiaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer. Leia mais →
PolíticaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer. Leia mais →
DinheiroLorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer. Leia mais →
Instalação
Passo 1 · Carregar o script
Para começar, você incluir os arquivos javascript necessários na <head> do seu documento HTML.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"> </ script> <- opcional - ><script type="text/javascript" src="path/to/your/jquery.accordionza.min.js"> </ script>Note-se que no trecho acima, eu estou carregando um hospedada jQuery Google cópia. Você pode
hospedá-lo a si mesmo também. Além disso, estou a carregar o jQuery Plugin Flexibilização para efeitos
de flexibilização adicionais. Este arquivo é opcional. Finalmente, você carregar o Plugin Accordionza. Lembre-se de mudar o src caminho para coincidir com a localização do arquivo no seu
servidor.
Passo 2 · Criar o seu acordeão
O Plugin Accordionza é muito flexível. Como você pode ver a partir das demos, ele permite que você crie
seu acordeão do jeito que você quiser. Ao fazê-lo, obviamente, requer um pouco de HTML e CSS
habilidades, no entanto, as três demos estão totalmente incluídos e pronto para ser facilmente "copiado
e colado".
HTML
O HTML para cada acordeão demo pode ser encontrada nos demos autônomos:
Demo # accordion1
Demo # accordion2
Demo # accordion3
A base de cada acordeão é uma lista HTML simples ( <ul> ), com cada item da lista ( <li> ) sendo um
slide. A partir daí, você está livre para projetar o acordeão como quiser. Basta ter em mente existem
algumas classes CSS predefinidos para certas partes dos slides. Via as opções que você pode renomear
cada classe, se você precisar.
CSS
O CSS para cada acordeão demo pode ser encontrada aqui:
O CSS para # accordion1
O CSS para # accordion2
O CSS para # accordion3
Se você estiver usando diferentes acordeões na mesma página, você pode querer combinar o CSS em um único arquivo. Em qualquer caso, não se esqueça de ligar para o seu estilo no <head> do seu
documento HTML.<link rel="stylesheet" type="text/css" href="path/to/your/style.css" />
Passo 3 · Showtime!
JavaScript
O JavaScript para cada acordeão demo pode ser encontrada aqui:
O JavaScript para # accordion1
O JavaScript para # accordion2
O JavaScript para # accordion3
Finalmente, tudo o que resta a fazer é ligar o seu acordeão com o Plugin Accordionza. Acrescente o seguinte pedaço de javascript para o <head> do seu arquivo HTML. Alternativamente, você pode movê-
la para um arquivo externo.<script type="text/javascript">$ (Document). Ready (function () {
$ ('# Your_accordion). Accordionza ({/ / Define as opções aqui
autoPlay: true,slideDelay: 4000/ / ...
});
});</ Script>Sinta-se livre para olhar para a fonte desta página se você quiser um exemplo completo e ao
vivo. Divirta-se!
OpçõesOpções listadas em ordem alfabética
autoPlay
boolean · Padrão: falseSet a verdade para iniciar automaticamente a reprodução da apresentação.Você pode definir o atraso entre cada slide através
do slideDelay opção.
autoRestartDelay
boolean · Padrão: falseSe autoPlay está habilitado, eo usuário aciona um slide manualmente,
você pode definir após quantos milisegundos (por exemplo 10000 ), a apresentação deve reiniciar a reprodução automaticamente novamente. Note-
se que o slideDelay valor é adicionado a este valor. Definido para falsepara não reiniciar Autoplaying.
captionDelay
integer · Padrão: 0A quantidade de tempo (em milissegundos) para aguardar a legenda para
aparecer. Um valor de 0 fará com que a legenda simultaneamente com o slide de abertura.
captionEasingcorda · Padrão: 'balanço'A função de atenuação para usar a animação legenda.
captionHeightinteger · Padrão: 50A altura da legenda (em pixels).
captionHeightClosedinteger · Padrão: 0A altura da legenda quando está fechada (em pixels).
captionSpeedinteger · Padrão: 500A duração (em milissegundos) da animação legenda.
classCaptioncorda · Padrão: 'slide_caption'A classe CSS usada para a legenda.
classCaptionCollapsed
corda · Padrão: 'slide_caption_collapsed'A classe CSS que será adicionado a uma legenda em colapso.
classCaptionTogglecorda · Padrão: 'slide_caption_toggle'A classe CSS usada para o link que se esconde / mostra a legenda.
autoPlay
boolean · Padrão: falseSet a verdade para iniciar automaticamente a reprodução da apresentação.Você pode definir o atraso entre cada slide através
do slideDelay opção.
classHandle
corda · Padrão: 'slide_handle'A classe CSS usada para o slide alças, ei da parte de cada slide que fica visível quando ela é fechada.
classSlideOpenedcorda · Padrão: 'slide_opened'A classe CSS usada para o slide atualmente aberto.
navKey
boolean · Padrão: falseSet de verdade para permitir a navegação por teclado básico através do acordeão. Os esquerda e direita teclas setas permitem acionar o slide anterior e seguinte.
onSlideClose
callback · Padrão: nuloCallback que é disparado quando um novo slide fica aberto. O slide de
fechamento está disponível como este na sua função de retorno.
onSlideOpen
callback · Padrão: nuloCallback que é disparado quando um novo slide fica aberto. O slide de
abertura está disponível como este na sua função de retorno.
pauseOnHover
boolean · Padrão: falseSet a verdade para pausar a apresentação de slides quando o usuário passa o mouse sobre o acordeão. Aplicável somente se autoPlay está habilitado.
slideDelay
integer · Padrão: 5000A quantidade de tempo (em milissegundos) para exibir cada slide. Aplicável
somente se autoPlay está habilitado.
slideEasingcorda · Padrão: 'balanço'A função de atenuação para usar a animação slide.
slideSpeedinteger · Padrão: 500A duração (em milissegundos) da animação slide.
slideTrigger
corda · Padrão: 'click'O evento que aciona um slide para ser aberto. Normalmente definido
como'click' ou 'mouseover' .
slideWidthClosed
inteiro ou falsa · Padrão: falsoA largura de um slide fechado (em pixels). Um
valor falso automaticamente tentará recuperar a largura correta, olhando para a largura da alça de um slide fechado.
startSlide integer · Padrão: 1Disponível desde v1.1. O número do slide que precisa abrir pela primeira vez
autoPlay
boolean · Padrão: falseSet a verdade para iniciar automaticamente a reprodução da apresentação.Você pode definir o atraso entre cada slide através
do slideDelay opção.
quando a página é carregada.
Padrões globais
Você pode facilmente mudar os valores padrão para as opções listadas acima. Basta incluir o seguinte
javascript. Isso só precisa ser chamado uma vez. Claro, você pode configurar todas as opções para o que
quiser.
$. Fn.accordionza.defaults = {captionEasing: 'easeOutBounce', / / a partir da Plugin
FlexibilizaçãoslideTrigger: 'mouseover'/ / Etcetera
}
Ganchos de evento
accordionza_slide
Dispara quando um novo slide fica aberto, ao mesmo tempo,
osonSlideClose e onSlideOpen callbacks são executados.
Você pode anexar seus próprios manipuladores para esses eventos usando jQuery . bind () método.
$ ('# Foo'). Bind ('accordionza_slide', function () {console.log ('Abrindo outro slide ...');
});
Desenvolvimento Web
Português
English
BUSCAR NESTE SITE:
OUT092009
10 Plugins Indispensáveis jQueryA biblioteca jQuery dispensa introduções e rapidamente tornou-se a
biblioteca de javascript mais usada. Apesar de ser poderosíssima por si só,
é comum e prático usar pluginspara estender o jQuery. Ao longo dos quase
2 anos em que conheço o jQuery usei inúmeros plugins, até criei alguns e
hoje possuo um pequeno arsenal de plugins que acabo usando
frequentemente.
Estes são 10 dos que mais uso e gosto, espero que seja útil!
Buscar
Cycle
Simplesmente sensacional! Este plugin (também disponível tanto na
versão lite, sem efeitos adicionais) permite criar slideshows usando vários
efeitos diferentes para transições. Ele possui várias opções e é muito
customizável. É muito fácil adicionar botões para controlar o slideshow ou
miniaturas das fotos que ganham foco quando elas aparecem no slideshow.
É o plugin que usei na apresentação do meu portfólio.
Link: Cycle
Colorbox
Outro que dispensa introduções, o lightbox é prático, elegante e resolveu
de uma vez por todas a questão de popups no javascript. É aquela famosa
técnica de escurecer toda a janela do navegador e dar destaque a uma foto
ou outro conteúdo.
Quem meche com javascript há alguns anos com certeza já usou algumas
das várias iterações tanto do lightbox original, escrito pelo Lokesh Dhakar,
quanto dos inúmeros clones, entre os quais o Thickbox se destacou
bastante.
O plugin que mais tenho usado ultimamente para estes fins é o Colorbox,
porque ele é leve e simples, além de oferecer uma API bem compreensiva
para ser estendido. Todas os prompts dojogo de memória que fiz foram
usando o colorbox.
Link: Colorbox
Datepicker
Outro plugin das quais existem várias variações, foi originalmente criado
por Marc Grabanski e, posteriormente, oficialmente anexado ao jQuery UI.
A versão standalone do plugin que não requer o jQuery UI é mantida por
Keith Wood, um co-autor do plugin original.
É um pequeno calendário popup que facilita demais a escolha de datas no
preenchimento de formulários. Ele é fácil de customizar usando CSS e
também de traduzir trocando as variáveis no código javascript.
Link: Datepicker
Easing
Um dos plugins mais subestimados na minha opinião, permite
adicionar easing às animações do jQuery. O que isto quer dizer?
Simplesmente, permite "ajudar" as animações customizadas, modificando-
as de várias maneiras. O jeito mais fácil de entender realmente é olhando
osexemplos. O easing é tipicamente utilizado em conjunto com outros
plugins.
Se quiser saber mais, escrevi um tutorial sobre como utilizar efeitos easing
para animaçõs com o jQuery.
Link: Easing
Easytip
É um tooltip alternativo em vez daquele amarelo padrão da maioria dos
navegadores. Incialmente usa o atributo title do elemento é muito fácil de
customizar. Este plugin é do tipo "instalar e esquecer " e é muito útil
quando se quer esta funcionalidade mas não há tempo para desenvolver
algo mais elaborado.
Link: Easytip
Hoverintent
Outro plugin na mesma categoria do Easing; é um que não faz uma
diferença gritante imediata mas acrescenta aquela coisa sutil a mais que
agrega bastante valor ao trabalho. O que este plugin faz é tentar adivinhar
o que o usuário pretende fazer com o mouse (no bom sentido).
Ele é derivado do método hover() do jQuery mas permite um grau bastante
fino de customização. Serve para suavizar eventos do
tipo mouseOver e mouseOut ao calcular a velocidade do movimento do
mouse para determinar se está apenas passando pelo elemento ou se de
fato parou em cima.
Link: Hoverintent
jqwysiwyg
Este plugin com nome quase impronunciável é utilizado para criar caixas
de texto editáveis com controles de edição. Pense nele como
um TinyMCE ou CK/FCKEditor lite. O plugin é leve e prático para quando
se quer dar mais liberdade para o usuário editar um campo mas não
precisa necessariamente de algo tão complexo quanto os dois editores
mencionados.
Link: jqwysiwyg
LiveQuery
Sem dúvida o plugin mais revolucionário e útil que já encontrei! Ele
permite delegar eventos a elementos que ainda não existem no DOM. Ou
seja, é particularmente útil quando está lidando com elementos criados
dinamicamente ou com elementos que são removidos e depois adicionados
de volta à pagina. Você pode estar se perguntando qual a utilidade deste
plugin já que a partir da versão 1.3 o jQuery introduziu o método live() que
faz exatamente isto... Em primeiro lugar o método live foi baseado neste
plugin! E em seguindo lugar o live() permite apenas um subconjunto dos
métodos do jQuery e também não permite delegar um callback que não
seja um evento.
Complicou? Fique tranquilo, é bem mais simples do que parece! Só
mantenha em mente quando lidando com elementos dinâmicos que se o
live() não funcionar como esperando, o LiveQuery pode ser a solução! Usei
este plugin bastante nos jogos de memória e campo minado que fiz.
Link: LiveQuery
prettyPhoto
O que! Mais um clone de lightbox?? Pois é! A razão pela qual uso tanto este
quanto o Colorbox e o motivo de incluir ambos nesta lista é simples: cada
um se adequa melhor a uma tarefa específica. O Colorbox é melhor para
diálogos modais e pode ser estendido facilmente, já o prettyPhoto, como
indica o nome, é ideal para mostrar fotos (e vídeos, flash, etc).
O prettyPhoto é um plugin mais bonito e possui efeitos legais que agregam
valor neste contexto.
Link: prettyPhoto
Superfish
De longe o melhor plugin para criar menus que já usei. Ele facilita demais a
criação de menusdrop-down que funcionam em qualquer navegador. O
plugin é muito flexível e pode ser usado em conjunto com o HoverIntent
(descrito acima), SuperSubs (para submenus de larguras variáveis) e
também o bgiframe para evitar problemas de z-index no Internet Explorer
6.
Porém, o plugin não faz mágicas e é necessário criar o HTML e CSS direito
para que funcione perfeitamente, mas como há vários exemplos no site do
plugin, fica fácil!
Link: Superfish
É isso!
Estes são alguns dos plugins que eu mais uso, e você, quais plugins
considera indispensáveis?
Categoria: Efeitos
A biblioteca jQuery fornece várias técnicas para adicionar animação a uma página web. Estes incluem simples animações, padrão que são usados com freqüência, ea capacidade de criar efeitos personalizados sofisticados.
Também em: Efeitos > Personalizado
.animate()Realize uma animação personalizada de um conjunto de propriedades CSS.Também em: Efeitos > personalizados | Dados | Utilities
.clearQueue()Remover da fila todos os itens que ainda não foram executados.Também em: Efeitos > Personalizado
.delay()Definir um temporizador para atrasar a execução dos itens subseqüentes na fila.Também em: Efeitos > personalizados | Dados | Utilities
.dequeue()Executa a próxima função na fila para os elementos correspondentes.Também em: Efeitos > desvanecimento
. fadeIn ()Exibir os elementos combinados gradualmente até ficarem opacos.Também em: Efeitos > desvanecimento
. fadeOut ()Esconder os elementos combinados gradualmente até ficarem transparentes.Também em: Efeitos > desvanecimento
. fadeTo ()Ajuste a opacidade dos elementos emparelhados.Também em: Efeitos > desvanecimento
. fadeToggle ()Exibir ou ocultar os elementos combinados animando sua opacidade.Também em: Efeitos > Personalizado
.finish()Parar a animação atualmente em execução, remova todas as animações na fila, e completar todas as animações para os elementos correspondentes.Também em: Efeitos > Basics
.hide()Esconder os elementos combinados.Também em: Efeitos > Personalizado | Propriedades > Propriedades do jQuery objeto global
jQuery.fx.intervalA taxa (em milissegundos) em que animações fogo.Também em: Efeitos > Personalizado | Propriedades > Propriedades do jQuery objeto global
jQuery.fx.offGlobalmente desativar todas as animações.Também em: Efeitos > personalizados | Dados | Utilities
.queue()Mostrar ou manipular a fila das funções a serem executadas sobre os elementos combinados.Também em: Efeitos > Basics
. show ()Exibir os elementos combinados.Também em: Efeitos > deslizante
. slideDown ()Exibir os elementos combinados com um deslizamento.Também em: Efeitos > deslizante
. slideToggle ()Exibir ou ocultar os elementos combinados com um deslizamento.Também em: Efeitos > deslizante
. slideUp ()Esconder os elementos combinados com um deslizamento.Também em: Efeitos > Personalizado
.stop()Parar a animação atualmente em execução nos elementos combinados.Também em: Efeitos > Basics
.toggle()Exibir ou ocultar os elementos combinados.
Categoria: Eventos
Esses métodos são usados para registrar os comportamentos a ter efeito quando o usuário interage com o navegador, e para manipular ainda mais esses comportamentos registrados.
Também em: Eventos > Evento Handler Anexo
.bind()Anexe um manipulador para um evento para os elementos.Também em: Eventos > Formulário Eventos | Formas
.blur()Vincular um manipulador de eventos para o "borrão" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Formulário Eventos | Formas
.change()Vincular um manipulador de eventos para o evento "change" JavaScript, ou gatilho que o evento em um elemento.
Também em: Eventos > Eventos de mouse
.click()Vincular um manipulador de eventos para o "clique" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de mouse
.dblclick()Vincular um manipulador de eventos para o "dblclick" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Evento Handler Anexo
.delegate()Anexar um manipulador de um ou mais eventos para todos os elementos que correspondem ao selector, agora ou no futuro, com base em um conjunto específico de elementos de raiz.Também em: Deprecated > Deprecated 1.7 | Eventos > Evento Handler Anexo | Removido
.die()Remover manipuladores de eventos anexados anteriormente usando. Live () dos elementos.Também em: Eventos > Navegador de Eventos | Obsoleto > Deprecated 1,8
.error()Vincular um manipulador de eventos para o "erro" evento JavaScript.Também em: Eventos > Objeto Evento
event.currentTargetO atual elemento DOM na fase subida do evento.Também em: Eventos > Objeto Evento
event.dataUm objeto opcional de dados passados para um método de evento quando o atual manipulador de execução é obrigado.Também em: Eventos > Objeto Evento
event.delegateTargetO elemento que se encontra o chamado actualmente manipulador evento jQuery foi anexado.Também em: Eventos > Objeto Evento
event.isDefaultPrevented ()Retorna se event.preventDefault () nunca foi chamado a este objeto de evento.Também em: Eventos > Objeto Evento
event.isImmediatePropagationStopped ()Retorna se Event.stopImmediatePropagation () nunca foi chamado a este objeto de evento.Também em: Eventos > Objeto Evento
event.isPropagationStopped ()Retorna se event.stopPropagation () nunca foi chamado a este objeto de evento.Também em: Eventos > Objeto Evento
event.metaKeyIndica se a tecla META foi pressionado quando o evento disparado.Também em: Eventos > Objeto Evento
event.namespaceO namespace especificado quando o evento foi disparado.Também em: Eventos > Objeto Evento
event.pageXA posição do rato em relação à borda esquerda do documento.Também em: Eventos > Objeto Evento
event.pageYA posição do rato em relação à borda superior do documento.Também em: Eventos > Objeto Evento
event.preventDefault ()Se este método for chamado, a ação padrão do evento não será acionado.Também em: Eventos > Objeto Evento
event.relatedTargetO outro elemento DOM envolvidos no evento, se houver.Também em: Eventos > Objeto Evento
event.resultO último valor retornado por um manipulador de eventos que foi desencadeada por este evento, a menos que o valor foi definido.Também em: Eventos > Objeto Evento
Event.stopImmediatePropagation ()Mantém o resto dos manipuladores de ser executado e impede que o evento de subida na árvore DOM.Também em: Eventos > Objeto Evento
event.stopPropagation ()Impede que o evento de subida até a árvore DOM, evitando quaisquer manipuladores pais sejam notificados do evento.Também em: Eventos > Objeto Evento
event.targetO elemento DOM que iniciou o evento.Também em: Eventos > Objeto Evento
event.timeStampA diferença em milissegundos entre o momento em que o navegador criou o evento e 1 de Janeiro de 1970.Também em: Eventos > Objeto Evento
event.typeDescreve a natureza do evento.Também em: Eventos > Objeto Evento
event.whichPara chaves ou mouse eventos, esta propriedade indica a chave ou botão específico que foi pressionado.
Também em: Eventos > Formulário Eventos | Formas
.focus()Vincular um manipulador de eventos para o "foco" do evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de Formulário
. focusIn ()Vincular um manipulador de eventos para o evento "focusIn".Também em: Eventos > Teclado Eventos | Eventos > Eventos de mouse
. focusOut ()Vincular um manipulador de eventos para o "focusOut" evento JavaScript.Também em: Eventos > Eventos de mouse
.hover()Vincular um ou dois manipuladores para os elementos correspondentes, a serem executados quando o ponteiro do mouse entra e sai dos elementos.Também em: Eventos > Evento Handler Anexo | Utilities
jQuery.proxy ()Tem uma função e retorna um novo que terá sempre um contexto particular.Também em: Eventos > Teclado Eventos
. keyDown ()Vincular um manipulador de eventos para o "KeyDown" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Teclado Eventos
. keypress ()Vincular um manipulador de eventos para o "keypress" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Teclado Eventos
. keyup ()Vincular um manipulador de eventos para o "keyup" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Deprecated > Deprecated 1.7 | Eventos > Evento Handler Anexo | Removido
. Live ()Anexar um manipulador de eventos para todos os elementos que combinam com o selector atual, agora e no futuro.Também em: Deprecated > Deprecated 1.8 | Eventos > Documento Loading
.load()Vincular um manipulador de eventos para o "load" evento JavaScript.Também em: Eventos > Eventos de mouse
. mousedown ()Vincular um manipulador de eventos para o "mousedown" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de mouse
. mouseenter ()Vincular um manipulador de evento a ser disparado quando o mouse entra um elemento, ou um gatilho que manipulador em um elemento.Também em: Eventos > Eventos de mouse
. mouseleave ()Vincular um manipulador de evento a ser disparado quando o mouse deixa um elemento, ou um gatilho que manipulador em um elemento.Também em: Eventos > Eventos de mouse
. mousemove ()Vincular um manipulador de eventos para o "mousemove" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de mouse
. mouseout ()Vincular um manipulador de eventos para o "mouseout" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de mouse
. mouseover ()Vincular um manipulador de eventos para o "mouseover" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Eventos de mouse
. mouseup ()Vincular um manipulador de eventos para o "mouseup" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Evento Handler Anexo
. off ()Remover um manipulador de eventos.Também em: Eventos > Evento Handler Anexo
. on ()Anexar uma função de manipulador de eventos para um ou mais eventos para os elementos selecionados.Também em: Eventos > Evento Handler Anexo
. one ()Anexe um manipulador para um evento para os elementos. O manipulador é executado no máximo uma vez por cada elemento.Também em: Eventos > Documento Loading
.ready()Especificar uma função a ser executada quando o DOM está totalmente carregada.Também em: Eventos > Navegador Eventos
.resize()Vincular um manipulador de eventos para o "redimensionamento" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Navegador Eventos
.scroll ()Vincular um manipulador de eventos para o "scroll" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Formulário Eventos | Formas
.select ()Vincular um manipulador de eventos para o "select" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Eventos > Formulário Eventos | Formas
.submit ()Vincular um manipulador de eventos para o "enviar" evento JavaScript, ou gatilho que o evento em um elemento.Também em: Deprecated > Deprecated 1.8 | Eventos > Eventos de mouse | Removido
.toggle()Vincular dois ou mais manipuladores para os elementos correspondentes, a serem executadas em cliques alternados.Também em: Eventos > Evento Handler Anexo
.trigger ()Executar todos os manipuladores e comportamentos ligados aos elementos combinados para o determinado tipo de evento.Também em: Eventos > Evento Handler Anexo
.triggerHandler ()Executar todos os manipuladores anexados a um elemento para um evento.Também em: Eventos > Evento Handler Anexo
.unbind()Remover um manipulador de eventos previamente anexado a partir dos elementos.Também em: Eventos > Evento Handler Anexo
.undelegate ()Remover um manipulador do evento para todos os elementos que combinam com o selector atual, com base em um conjunto específico de elementos de raiz.Também em: Deprecated > Deprecated 1.8 | Eventos > Documento Loading
.unload()Vincular um manipulador de eventos para o "descarregar" evento JavaScript.
easing para animações com jQueryEu já havia mencionado o "Easing" em outro artigo, e me perguntaram
estes dias como se usa o plugin para controlar melhor animações, então
resolvi escrever um artigo rápidinho para esclarecer e mostrar o poder do
easing.
Preparação
Se já não o tiver feito, vá para o site e baixe o plugin. Vamos utilizar uma
página bem simples em HTML:
1234567891011121314151617181920212223242526
<html><head><title></title><style type="text/css">#target { background-color: red; width: 200px; height: 200px; position: relative;}</style><script src="http://www.google.com/jsapi"></script><!-- não é estritamente necessário usar a última versão do jQuery poiso easing funciona com todas as versões desde o 1.1 --><script type="text/javascript">google.load("jquery", "1.4.4");</script><script type="text/javascript" src="jquery.easing.1.3.js"></script><script type="text/javascript"> // nosso código irá aqui</script></head><body> <div id="target"></div> </body></html>
Até aqui sem novidades, agora vamos fazer uma animação simples:
12345678
jQuery(document).ready(function($){ $('#target').click(function(){ $(this).animate( { left : 100 }, 1000 ); });});
Beleza, quando clicamos no div anima a sua propriedade left até 100 em
um intervalo de 1000ms.
E agora, para dar uma variada, vamos usar um pouco de easing!
123456789
jQuery(document).ready(function($){ $('#target').click(function(){ $(this).animate( { left : 100 }, 1000, 'easeOutElastic' // adicionamos um efeito elastico ); });});
Legalzinho né?
Bom, é isso ae, como viram não tem segredo!
O terceiro parâmetro (opcional) do método animate() do jQuery permite
especificar uma função de easing para as animações.
Além de fornecer maior controle sobre as animações ele também pode ser
combinado com vários outros plugins por exemplo o Cycle para criar
efeitos customizados bem legais.
O site do plugin possui alguns exemplos mas é meio confuso, recomendo
dar uma olhada aquipara ver não só quais os efeitos disponíveis como
também exatamente o que faz cada um.
Até mais!
5 erros comuns na hora de cobrar um serviço20 de maio de 2013 / escrito por Guilherme Dantas
Dicas
O pagamento é a recompensa por um serviço prestado. É nessa hora que é finalizado o vínculo entre contratante e contratado, e ambas as partes saem satisfeitas pelo ótimo relacionamento construído.
Mas nem tudo é um mar de rosas, e muitos ainda pecam na hora de cobrar. Veja abaixo 5 principais erros na hora de fazer a cobrança:
1) Ter vergonha de cobrar
Todo mundo gosta de dinheiro, mas alguns deixam de receber porque se sentem envergonhados na hora de cobrar dívidas atrasadas de seus clientes, talvez imaginando que isso irá ofendê-los.
A situação fica ainda mais complicada quando o serviço é feito para um amigo achegado ou alguém da própria família. Quando a pessoa não paga o valor devido, muitas vezes o profissional prefere “deixar pra lá”, para evitar abalar o relacionamento entre as partes. É a clássica situação “Você finge que pagou e eu finjo que recebi”.
Como resolver?
Principalmente para quem está iniciando como freelancer, a hora de cobrar os primeiros clientes pode ser desafiadora. Mas lembre-se que você é um profissional e tem direito à remuneração sobre o serviço prestado.Saber os valores exatos, e os dias combinados para o pagamento (se possível em contrato), ajuda na hora da cobrança. Talvez seja melhor dar o primeiro aviso via e-mail, e somente depois falar com o cliente por telefone sobre aquela cobrança que ele deixou de pagar.
2) Aceitar parcelamentos absurdos
Muitos clientes abusam da boa vontade de alguns profissionais e propõem parcelamentos que não foram previamente combinados, geralmente após o término do serviço. “Podemos parcelar o saldo restante em 24 vezes?” – pergunta o cliente.Como resolver?É possível que o cliente esteja passando por uma dificuldade momentânea e queira negociar a dívida, mas também é provável que ele esteja apenas “jogando verde para colher maduro”. Você deverá perceber qual a intenção real do cliente antes de dar uma reposta.Ter um contrato com as cláusulas de pagamento pode lhe ajudar a ser firme na decisão de não aceitar nada além do que foi assinado, caso perceba má-fé por parte do cliente. Mas é sempre importante achar um equilíbrio. Talvez o cliente lhe peça para dividir o saldo restante em duas ou três vezes, pois ficou sem capital. A decisão de aceitar a proposta é sua. A decisão de cobrar ou não juros sobre a negociação, também.
3) Ser inflexível
A falta de comunicação pode ser uma grande inimiga entre as duas partes de um serviço. Muitos profissionais podem sentir-se tentados a “chutar o balde” logo no dia seguinte ao atraso do pagamento. E o “chutar o balde” inclui desde retirar o site do cliente do ar até protestar um título vencido ou um cheque que voltou.
Como resolver?Comunicação. A maioria das pessoas já atrasaram pagamentos. Você provavelmente também já fez isso. Os motivos são inúmeros, e muitas vezes a intenção de atrasar nem existia.
No caso de um cliente que não pagou o que devia, o primeiro passo seria entrar em contato com ele para ver o que pode ter acontecido. Muitas vezes é feito um pedido de desculpas e uma promessa de que “até amanhã o dinheiro estará na conta”. Se isso resolver, ótimo. Se mesmo assim o pagamento não vir, é sempre melhor se comunicar primeiro antes de acionar a justiça ou tomar outras providências igualmente sérias.
Ser inflexível demais pode fechar as portas de um relacionamento de muitos anos com um cliente, talvez só porque naquele mês ele esqueceu de pagar aquela parcela. Evite isso.
4) Ser bonzinho demais
Porém, do outro lado da moeda existem aqueles que são bonzinhos demais. Após centenas de ligações e dezenas de promessas de pagamento, o profissional bonzinho diz que “não tem problema” e que “essas coisas acontecem…”
Como resolver?Desenvolva a arte de ser mau. No bom sentido, é claro. Ser bonzinho todo o tempo faz com que certas pessoasse aproveitem da bondade e empurrem com a barriga suas responsabilidades.É importantíssimo traçar um limite para sua paciência e saber exatamente quando esse limite for ultrapassado.
A malícia é conquistada aos poucos, geralmente após alguns calotes. Após um tempo, o profissional freelancer percebe aqueles que querem fazê-lo de bobo. Nesses casos, deixe a bondade de lado e seja firme com o caloteiro. Estabeleça prazos e diga que tomará providências caso este não seja cumprido. E caso não for, aja à altura das suas palavras.
5) Esquecer de enviar a cobrança
Assim como existem aqueles que esquecem de pagar, existem aqueles que não lembram de cobrar. Os esquecidos perdem dinheiro por falta de organização. Não se lembram quanto cobraram, nem a data combinada para o pagamento. E quando se lembram, geralmente após vários dias da data prevista, voltam ao primeiro item dessa lista e sentem vergonha de cobrar.
Como resolver?Organização é a chave para mentes esquecidas e avoadas. Ter uma planilha com todas as cobranças pode ser útil. Existem sites gratuitos que são ótimos aliados. Falamos de um deles, o Zero Paper, neste post, lembra-se?Cobrar pode ser desafiador, mas é uma parte da vida profissional de qualquer freelancer. Afinal, são pelas cobranças que entra a tão aguardada recompensa pelo trabalho árduo, o dinheiro. Boas cobranças para vós.