jQuery – Seletores e estilização

Esta matéria tem por finalidade mostrar os fundamentos básicos de seleção e estilização com uso da biblioteca jQuery.

Leia Mais em: Debugando.com

Trabalhando com JSON

A JSON nada mais é do que uma maneira de representar os objetos em JavaScript,ou seja, JSON é JavaScript puro. Para trabalhar com esse formato não é necessário usar DOM ou qualquer Framwork ou Kit específico, embora muitos dos frameworks de hoje em dia dêem algum tipo de suporte à JSON.

Leia Mais em: Debugando.com

Uma aula prática de jQuery

Nomenclatura

Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.

Como começar

Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:

$(document).ready(function() {
    // aqui vai o código específico da sua aplicação
});

Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).

Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.

Leia Mais em: Debugando.com

Uma aula prática de jQuery

Nomenclatura

Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.

Como começar

Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:

$(document).ready(function() {
    // aqui vai o código específico da sua aplicação
});

Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).

Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.

Leia Mais em: Debugando.com

Inserindo dados usando AJAX e jQuery

O jQuery é um framework de Javascript na minha opinião de fácil apreendizado.

Este artigo é composto por um exemplo que aboradará a inserção de dados usando jQuery e AJAX em um formulário simples.

Arquivo exemplo1.js:

/**
$(): utilizado em todas as funções que devem ser referenciadas a jQuery
document: expressão que indica o documento HTML
ready(): associado a leitura do documento enquanto está sendo carregado
*/
$(document).ready(function(){

    // Crio uma variável chamada $forms que pega o valor da tag form
    $forms = $('form');

    // hide(): esconde a div cadastro enquanto carrega o ready()
    $('#cadastro').hide();

    /**
     bind(): é manipulador de evento exemplo submit, click e/ou double click
     a: é a tag <a href>
    */

    $('a').bind('click', function(){
        switch(this.id){
            case 'c':
                $('#cadastro').show(); // show(): mostra div que está oculta (hide()).
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){

        /**
        Crio a variável $button
        attr(): set a propriedade de um atributo, nesse exemplo foi desativado o botão com a tag button
        */
        var $button = $('button',this).attr('disabled',true);

        /**
       Criada a variável params
        serialize(): pega os dados inseridos no formulário
        */
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({

            // Usando metodo Post
            type: 'POST',

            // this.action pega o script para onde vai ser enviado os dados
             url: this.action,

            // os dados que pegamos com a função serialize()
            data: params,

            // Antes de enviar
            beforeSend: function(){
                // mostro a div loading
                $('#loading').show();

                // html(): equivalente ao innerHTML
                $('#loading').html("Carregando...");
            },
            success: function(txt){
                // Ativo o botão usando a função attr()
                $button.attr('disabled',false);

                // Escrevo a mensagem
                $('#loading').html(txt);

                // Limpo o formulário
                self.reset();
            },

            // Se acontecer algum erro é executada essa função
            error: function(txt){
                $('#loading').html(txt);
            }
        })
        return false;
    });
});

CSS:

body{
    font: 12px tahoma,verdana;
    margin:0;padding:0;
}
#loading{
    display: none;
    text-align: center;
}
a,a:active,a:hover {
    text-decoration:none;
    color:#000;
    outline:none;
}
ul {
    margin-left:5px;
}
li {
    list-style:none;
}
li a {
    float: left;
    display:block;
    background:#f1f1f1;
    width:50px;
    padding:3px;
    text-align:center;
    margin-right:1px;
    border:1px solid #555;
}
li a:hover {
    display:block;
    background:#f0f0f0;
}
#main{
    height: 100%;
    border:none;
}
#top {
    height: 50px;
}
#middle{
    margin-top:5px;
}
fieldset {
    padding:8px;
    border:1px solid #999;
}
button {
    background:#ccc;
    padding:0.5px;
}
.border {
    border: 1px solid black;
}

Arquivo index.php:

<html>
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="exemplo1.js"></script>
</head>
<body>
<div id="main">
    <div id="loading"></div>
    <div id="top">
          <ul>
            <li><a href="" id="c">Cadastro</a></li>
          </ul>
    </div> <!-- top -->
    <div id="middle">
          <div id="cadastro">
              <form action="insert.php">
                  <fieldset>
                  <legend>Cadastro usando jQuery</legend>
                  <label>Nome</label><br/>
                  <input type="text" name="nome" size="31" maxlength="30" class="border"/><br />
                  <label>Telefone</label><br/>
                  <input type="text" name="telefone" size="31" maxlength="11" class="border" /><br/>
                  <label>E-mail</label><br/>
                  <input type="text" name="email" size="31" maxlength="100" class="border" /><br/>
                <button>Cadastrar</button>
                </fieldset>
              </form>
          </div> <!-- cadastro -->
    </div> <!-- middle -->
</div> <!-- main -->
</body>
</html>

Arquivo insert.php:

<?php
$nome = strip_tags(trim($_POST['nome']));
$telefone = strip_tags(trim($_POST['telefone']));
$email = strip_tags(trim($_POST['email']));
if(empty($nome) || empty($telefone) || empty($email)){
        echo"Você deve preencher todos os campos!";
        die();
}

$conn = mysql_connect("SERVIDOR", "USUÁRIO", "SENHA");
mysql_select_db("BANCO");

$sql = "INSERT INTO cadastro (nome, telefone, email) VALUES ('".$nome."', '".$telefone."', '".$email."')" or die(mysql_error());
mysql_query($sql);
mysql_close($conn);
echo"Cadastro realizado com sucesso!";
?>

Espero que o exemplo acima ajude e que incentive o uso da jQuery.

Site Debugando.com

Venho anunciar que o debugando agora esta com site novo com mais conteudo visite agora mesmo e ajude o debugando a crescer mais ainda em conteudo a sua ajuda ira ajudar outros programadores.

www.debugando.com

Como o Google entende seu texto

Se você gosta de Web Writer, essa é uma boa hora para conhecer como os mecanismos de busca processam o seu texto, e como você pode escrever um bom texto entendendo essa lógica. Esses conceitos são conhecidos por poucas pessoas aqui no Brasil, então sinta-se privilegiado ao final da leitura.

Não serei muito técnico para não deixar o texto cansativo, todos os conceitos que explicarei abaixo vou dar exemplos práticos como influem diretamente no seu HTML.

Para começar você deve saber o que é IR (Information retrieval) ou Recuperação da Informação para nós. É uma área da Ciência da Informação que está por trás do tratamento e busca por dados e meta dados em documentos.

É de fundamental importância que analistas SEO e SEM entendam os princípios básicos de IR para não bolarem teorias mirabolantes sem base técnica, como acontece e muito nos Estados Unidos. Muitos profissionais de Marketing sem conhecimento de Ciência da Informação bolam teorias de SEO com base em testes, só que montar uma teoria somente por percepção abre uma grande brecha para erros e dupla interpretação.

Etapas de Representação de dados de um Site pelos Mecanismos de Busca

Indexação

Durante o processo de Arquivamento da página (ou indexing) esse documento é preparado para uso por um sistema de IR. O site está todo cru para o sistema, cheio de tags, metatags, caracteres especiais, pontuações etc. Os sistemas precisam do conteúdo todo limpo para poder entender o que a sua página está falando. Então ele transforma o seu documento em uma representação de texto. Nesse processo ele cria duas bibliotecas: uma para expressões regulares e outra para stop words (palavras comuns, ex: que, de, etc.). Também seta alguns filtros e parsers (processadores).

Passos da Indexação

Linearização do Documento

É o processo onde o documento é reduzido somente a termos em minúsculo e sem pontuação. O sistema remove todas as tags HTML, toda a pontuação e acentuação, caracteres especiais e espaços.

O processo onde o texto é tratado após a remoção da marcação é conhecido como Tokenização.Na tokenização o computador é instruído a entender que aquela seqüência de bytes é uma palavra separada da outra. Alguns usam hífen, outros não.

Durante a linearização o CSS é removido. Logo, você percebe que se o seu HTML não estiver em ordem, o buscador vai ter em um primeiro momento uma informação desconexa e poderá entender errado o seu texto. Se você fez pirotecnia no css, mandando um texto que está em primeiro no HTML para o rodapé do site, já está no caminho errado. Por isso a importância do envolvimento de todas as áreas de desenvolvimento no trabalho de SEO.Se você tem um fluxo de informação coerente no seu HTML, na hora que o sistema de IR deixar “pelado” o seu site você estará tranqüilo, pois o carregamento da informação se dará de forma correta. Com os temas das informações sendo coerentes com tópicos e sub tópicos. O posicionamento do texto no seu carregamento na linearização se dá pela sua marcação HTML.

Quando há erros nesse fluxo o índice é avaliado erroneamente, alguns buscadores simplesmente ignoram os erros e você perde peso nessas determinadas áreas da sua página.

Filtragem

Neste processo o sistema faz a escolha dos termos que irão “representar” o seu documento, descrevendo o conteúdo e diferenciando a sua página das demais já arquivadas no banco de dados.

É nessa hora que as stop words são ignoradas da representação do texto, pois elas são palavras muito comuns presentes em milhares de textos, se elas fossem levadas em consideração a relevância seria afetada, porque elas não trazem a maior densidade de informação. Essa remoção se dá de forma padronizada, no começo da indexação o sistema cria uma biblioteca de termos muito usados e só os ignora nas representações posteriores como na Filtragem.

Deixando os talos

Aqui os termos irão ser reduzidos aos “talos”. O sistema detona as variações. Exemplo: as palavras “pensamos”, “pensais” e “pensam” vão virar somente “pensa”. Nem todos os sistemas usam o mesmo tipo de algoritmo para redução de termos.

Os mecanismos de busca fazem isso para economizar espaço, é uma maneira de reduzir o processamento e indexar mais páginas rapidamente. Existem várias complicações para esse processo que eu particularmente desconheço.E se você está se perguntando: e o que acontece com as variações? Lembre que é só uma representação do seu texto.

Pesos e Rankeamento

Esse é o último passo na maioria de sistemas IR da representação de texto da sua página, é onde os termos “talos” recebem pesos que podem ser atribuídos de diferentes formas, e é exatamente aqui que muitos analistas SEO e SEM começam a “chutação” com teorias mirabolantes como a de Keyword Density.

Quanto mais peso nos elementos on-page mais chances de posicionar o seu site em primeiro lugar nos buscadores, como o Google. Pois alguns fatores e elementos você não pode controlar, agora esses elementos é mais que seu dever como desenvolvedor fazer um bom trabalho.Nos próximos artigos aqui no iMasters vou abordar o que realmente sabemos sobre esses pesos e é nesse ponto que a coisa começa a ficar interessante para escrevermos textos competitivos e com grande densidade de peso nos elementos na página.

Referências:

Mi is lita

Information Retrieval

Cadastrando, Listando e Deletando com AJAX / ASP

Esse artigo não é para entrar em detalhes sobre AJAX, e sim para descrever sua interação com ASP. Desenvolvi um código usando ASP com base de linguagem o JavaScript (onde poderia usar o VBScript), usei claramente AJAX e o banco de dados MySQL, que não é o objetivo, e nem será, evidenciado abaixo.

Bom, primeiramente vamos começar a fazer nossa página AJAX com todas as funções necessárias para a nossa aplicação. Começamos com um bloco de código necessário para toda aplicação que envolve o AJAX, que é reconhecer se o browser (sendo um Objeto específico para o IE e outro para os demais browsers) suporta AJAX ou não:

function GetXMLHttp() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
}
catch(ee) {
try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e) {
xmlHttp = false;
}
}
}
return xmlHttp;
}

Finalizando a construção do nosso código para verificar o browser, vamos agora criar um código para CADASTRAMENTO, usando a variável criada “xmlHttp”:

function CadastrarDados() {
var Nome = document.getElementById(“Nome”);
var EMail = document.getElementById(“EMail”);

var URL = “Cadastro.asp?Cadastrar=Ok&Nome=”+Nome.value+”&EMail=”+EMail.value+”";
Enviar.open(“GET”, URL, true);
Enviar.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
document.getElementById(“Resposta”).innerHTML = “Cadastrado com Sucesso!!!”;

Nome.value = “”;
EMail.value = “”;

Enviar.send(null);
Enviar.onload = lerTexto;
}

Pegamos via DOM os objetos de formulário de nome e e-mail que ainda serão criados. Criamos uma variável “URL” para o envio via GET dos arquivos para a página “Cadastro.asp”, seguida da querystring “Cadastrar=Ok” que receberá os campos. Em seguida temos a ação com o objeto “open”, mandando a resposta para a div “Resposta”. Para finalizar, limpamos os campos para nada guardar – evitando assim a duplicagem – e o usuário saberá que foi cadastrado:

Com bloco abaixo vamos apresentar e deletar o registro:

// Início – Carregar Página
function lerTexto() {
var URLler = “Ler.asp”;
Enviar.onreadystatechange = stateChanged;
Enviar.open(“GET”, URLler, true);
Enviar.send(null);
}

function stateChanged() {
if (Enviar.readyState==4) {
document.getElementById(“ler_Dados”).innerHTML = Enviar.responseText;
}
}

window.onload = lerTexto;
// Final – Carregar Página

// Início – Deletar
function apagar(id, rowIndex) {
    if (confirm(´Tem certeza que deseja excluir este registro?´)) {
        document.getElementById(“tabela”).deleteRow(rowIndex);

        Enviar.open(“POST”,´Cadastro.asp?Deletar=Ok&id=´+ id, false);
Enviar.send(null);
    }
}
// Final – Deletar

Com a simples linha Enviar.open(“GET”, URLler, true), carregamos a página “Ler.asp”, que estará no arquivo .zip no final do artigo para ler as informações do banco.

O deletar segue a mesma idéia do Cadastrar, mas utilizamos o método POST para isso, e passando a ID do registro.

E por final, a prática, criando “Cadastro.asp” com todas as funcionalidades necessárias, e o AJAX é claro, que acessa as ID´s das tags HTML´s

<%@ Language=”JavaScript” %>
<%
var Conexao;
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=banco; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Cadastrar</title>
<script language=”javascript” src=”ajaxCarregar.js”></script>
</head>
<body>
<div id=”Resposta”></div><br>
<form id=”Form”>
Nome: <input type=”text” id=”Nome” name=”Nome” value=”"><br>
    E-Mail: <input type=”text” id=”EMail” name=”EMail” value=”"><br>
    <input type=”button” id=”Cadastrar” value=”Cadastrar” name=”Cadastrar” onClick=”CadastrarDados();”>
</form><br>
<br>
<br>
<div id=”ler_Dados”></div>
</body>
</html>
<%
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (´”+Request.QueryString(“Nome”)+”´, ´”+Request.QueryString(“EMail”)+”´)”);
Response.Write(“”);
}

if (Request.QueryString(“Deletar”) == “Ok”) {
Conexao.Execute(“Delete From Teste Where Codigo = ´”+Request.QueryString(“id”)+”´”);
Response.Write(“”);
}
%>

Arquivo ConteudoAJAX_ASP.zip

Botões de voltar e avançar funcionando com JQuery

Sabemos que fazer requisições assíncronas ao servidor é muito bom, mas às vezes tem seus custos. Uma das coisas que acontecem e muitas vezes atrapalham o usuário que não está acostumado é a perda do histórico de navegação dos botões de voltar avançar do navegador.

A forma de contornar isso, descrita abaixo, é usando o plugin do JQuery jquery.history

Primeiramente, precisamos adicionar a biblioteca JQuery na lista de scripts:

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

Depois disso temos que adicionar o plugin jquery.history

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

Agora vamos cadastrar a função que tem o poder de adicionar histórico ao browser:

<script type=”text/javascript”>
function pageload(hash) {

if(hash) {

$(“#load”).load(hash + “.html”);
} else {
$(“#load”).empty();
}
}

$(document).ready(function(){

$.historyInit(pageload);

$(“a[@rel=´imasters´]“).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, ´´);
$.historyLoad(hash);
return false;
});
});
</script>

A função $.historyInit(pageload) permite que a função que está dentro do parâmetro, ou seja, pageLoad, adicione os históricos de navegação, lembrando que a função pageLoad poderá ser modificada de acordo com as necessidades do projeto – pois ela está bem simples no exemplo – e está apenas carregando páginas html de acordo com o parâmetro, mas serve para o entendimento do artigo, que é deixar funcionando os botões de voltar e avançar do navegador.

Se colocarmos o seguinte código html no conteúdo da página:

<a href=”#1″ rel=”imasters”>página 1</a><br />
  <a href=”#2″ rel=”imasters”>página 2</a><br />
  <a href=”#3″ rel=”imasters”>página 3</a><br />

  <hr />
  Conteúdo:<br />

  <div id=”load”></div>

Poderemos ver que o site funcionará como se estivéssemos mudando de página a cada link, mas estamos na verdade mudando apenas o conteúdo da div <div id="load"></div> , que é exatamente o que queremos.

Pronto! Agora podemos utilizar o AJAX na página como quisermos e o histórico de navegação será automaticamente adicionado ao navegador.

Para ver o exemplo acima funcionando acessem o link http://www.alantiel.com/~file/jqueryhistory

Ordenar tabelas no navegador com técnicas javascript

Olá, a todos! Vou demonstrar uma ótima ferramenta para complementar o trabalho de renderização de dados no cliente. A única dependência é a utilização do framework de desenvolvimento JQuery.

Renderizar dados com tabelas é uma técnica muito antiga e largamente utilizada. Tabelas são muito úteis para gerar relatórios e visualização dos dados de forma prática. Com o crescimento do fluxo de dados na web, e o surgimento de novas necessidades dos usuários da web em busca de informações úteis, foi preciso criar formas para ordenação de dados, pois isso facilita bastante no processo de busca da informação, pois tendo a possibilidade de deixar os dados ordenados pela coluna de nome ou de data de modificação, por exemplo, temos bastante controle dos dados, e hoje em dia já é bem comum ver sites que fazem esse tipo de tratamento.

A solução trivial que muitos sites utilizam é para cada click em determinado título de coluna, fazemos requisições para o servidor e trazemos os dados novamente para o browser. Essa técnica funciona, mas não é uma solução viável para um sistema com muitos dados, e até mesmo para poucos dados não precisamos deixar o usuário esperando essa recarga quando temos soluções melhores.

Vamos à prática!

Temos a seguinte tabela para ordenar:

<table id=”tablesorter-imasters”>
<thead>
<tr>
    <th>Codigo</th>
    <th>Nome</th>
    <th>Idade</th>
    <th>E-mail</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>João Pereira dos Santos Neto</td>
    <td>28</td>
    <td>jpdsn_emailteste@gmail.com</td>
    <td>http://www.jpdnteste.com</td>
</tr>
<tr>
    <td>2</td>
    <td>Maria Antonia da Silva Filho</td>
    <td>37</td>
    <td>madsf_emailteste@gmail.com</td>
    <td>http://www.madsfteste.com</td>
</tr>
<tr>
    <td>3</td>
    <td>José da Costa Souza Junior</td>
    <td>19</td>
    <td>jdcasj_emailteste@gmail.com</td>
    <td>http://www.jdcasjteste.com</td>
</tr>

</tbody>
</table>

Essa é uma tabela html comum nos padrões W3C, com as tags “thead” para definir a área dos títulos e a “tbody” para definir onde está o corpo da tabela. Essa tabela pode perfeitamente vir de um banco de dados, xml, json… whatever, só depende da imaginação.

Para deixarmos essa tabela ordenável diretamente pelo cliente, é bem simples, precisamos importar a bilblioteca do JQuery e do JQuery table para a página:

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

Essas bibliotecas estão no link de download no final do artigo, junto com um arquivo de css para uma estilização visual da tabela.

Agora que temos a biblioteca e seus recursos em nossa página, basta definir o comportamento para a tabela. No nosso caso temos a tabela com id = tablesorter-imasters.

Basta adicionarmos a instrução no comportamento com sistaxe JQuery, abaixo dos imports citados acima, assim:

<script type=”text/javascript”>
$(function() {
            //aqui podem ter todas as outras instruções JQuery do site, sem perda
$(“#tablesorter-imasters”).tablesorter();
            //aqui podem ter mais instruções JQuery, não importa a ordem
});
</script>

Pronto, agora temos uma tabela com dados ordenáveis de maneira bem simples…

Para quem quiser ver o exemplo completo, acesse este link.