5 de agosto de 2010
A alguns dias atrás estive a procura de soluções simples e práticas para se ler as informações de um arquivo xml a partir do jQuery. Sabendo da dificuldade de se achar conteúdos relevantes em nossa lingua nativa para os que não entendem lhufas de inglês, resolvi escrever esse artigo em prol de facilitar o entendimento de todos, então chega de conversa e vamos ao que interessa.
Para início de conversa, nada do que eu escrever abaixo irá funcionar se você, caro usuário, não importar a biblioteca do jQuery em seu código e a melhor maneira para se fazer é pela API do Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Feito o passo acima, vamos agora para o xml.
Iremos criar um xml bem simples para que possamos entender o seu funcionamento. Se você não esta familiarizado com xml, veja um artigo sobre as regras de syntax de um xml.
<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
<site>
<nome>Site do fulano</nome>
<url>http://sitedofulano.com.br</url>
</site>
<site>
<nome>Site do ciclano</nome>
<url>http://sitedociclano.com.br</url>
</site>
</sites>
Agora que já importamos a biblioteca do jQuery em nossa página e temos conhecimento do xml gerado, podemos iniciar as instruções em jQuery.
Primeiro passo é iniciar o jQuery
$(function() {
});
A partir de agora é onde tudo faz sentido, iniciaremos a requisição ajax do jQuery para ler o arquivo xml. A requisição em ajax possui 4 parâmetro: type, url, dataType e success, sendo o mais importante deles o parâmetro success onde iremos ‘setar’ uma função para receber os dados do xml.
$.ajax({
type: 'GET',
url: 'sites.xml',
dataType: 'xml',
success: function(xml) {
}
});
A diversão começa aqui! Agora que já estamos acessando o arquivo xml, é preciso encontrar os dados gravados nele e fazer alguma coisa. Começamos pela leitura dos dados retornados e usando o método find para obter todos os nós que correspondem ao texto que fornecemos (neste caso, ‘site’), e depois usar a função de loop para localizar os nós.
$(xml).find('site').each(function() {
});
Tudo o que resta é fazer com que os dados a partir desse seja impresso na página, para isso utilizaremos a função find para encontrar e obter o texto dos nós. Para o exemplo, irei simplificar retornando apenas os dados do usuário e do conteúdo do twit.
var nome = $(xml).find('nome').text();
var url = $(xml).find('url').text();
$('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');
Pronto! Nosso código final, completo, deve ser algo como o abaixo:
$(function() {
$.ajax({
type: 'GET',
url: 'sites.xml',
dataType: 'xml',
success: function(xml) {
$(xml).find('site').each(function() {
var nome = $(xml).find('nome').text();
var url = $(xml).find('url').text();
$('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');
});
}
});
});
Você pode ver o exemplo funcionando ou fazer o download do código fonte.
tags: Ajax, jQuery, XML
29 de julho de 2010
Depois de anos trabalhando como desenvolvedor de front-end, lendo livros e estudando sobre os padrões W3C, resolvi postar aqui no blog uma lista dos 10 erros mais comuns na hora de desenvolver um site seguidos de dicas que incluem uma escrita válida, semântica e sem as conhecidas tags depreciadas.
Sem mais delongas, vamos a lista:
01. Elementos “bloco” (block) dentro de elementos “em linha” (inline)
Antes de mais nada, vamos entender o que significa elementos de bloco e em linha. Elementos em “bloco” são todas aquelas tags xhtml que, quando utilizadas, ocupam por padrão toda uma linha horizontal impossibilitando que outro elemento se posicione ao seu lado. Já os “em linha”, ocupam apenas o espaço necessário para a visualização de seu conteúdo, permitindo que outros elementos em linha se posicionem ao seu lado.
Bloco (block):
Em linha (inline):
Agora que entendemos o funcionamento dessas tags, podemos chegar a conclusão que elementos block não podem ser inseridos dentro de elementos em linha.
Errado:
<a href="javascript:void(0)"><h1>nome_do_site</h1></a>
Correto:
<h1><a href="javascript:void(0)">nome_do_site</a></h1>
02. Imagens sem o atributo ALT (texto alternativo)
O atributo alt é um de uso obrigatório para todas as imagens exibidas em seu site. Sua funcionalidade é de fornecer uma descrição da imagem quando a mesma não for carregada e também, e mais importante, para o uso em leitores de tela onde esse atributo será lido. Caso a imagem seja apenas de caráter decorativo, utilizar um alt vazio: alt=” “.
Errado:
<img src="minha_imagem.jpg" />
Correto:
<img src="minha_image.jpg" alt="descrição_da_imagem" />
03. Não utilizar listas quando necessário
Confeso que já perdi a conta de quantos sites eu já vi que não fazem o uso das listas quando necessário.
As tags de lista foram criadas para serem usadas, assim como todas as outras tags do xhtml. E para que servem as listas?
Menus de navegação, lista de links, passo-a-passo de uma receita de bolo, as famosas listas de objetivos no para o próximo ano etc, tudo isso deve ser escrito dentro das tags de lista.
Lista desordenada <ul>, ordenada <ol> ou de definição <dl>, todas elas devem ser utilizadas quando necessário e é claro, sem exceção.
Errado:
<p>
Verde<br />
Amarelo<br />
Azul<br />
Branco
</p>
Correto:
<ul>
<li>Verde</li>
<li>Amarelo</li>
<li>Azul</li>
<li>Branco</li>
</ul>
04. Uso de <b> e <i> para negrito e itálico
O desenvolvedor que até hoje não sabe que as tags <b> e <i> foram depreciadas do xhtml, por favor, precisa se atualizar rapidamente.
A muito tempo atrás, todas as tags com objetivos apenas visual foram eliminadas da nova especificação do xhtml e substituidas por tags de valor semântico como o <strong>, para a tag <b>, e o <em>, para o <i>. As funções de apresentação das antigas tags podem ser utilizadas via CSS utilizando font-weight e/ou font-style.
Errado:
<b>Playstation 3</b> é melhor que o <i>Xbox 360</i>
Correto:
<strong>Playstation 3</strong> é melhor que o <em>Xbox 360</em>
05. Uso excesivo de <br />
Nesse ponto eu vou ser rápido e direto pois não tem muito o que explicar.
Utilize o <br /> apenas para quebrar a linha. Para adicionar outro parágrafo, utilize o <p> pois ele foi feito para isso.
Errado:
<p>Lorem ipsum dolor sit amet,<br /><br />
consectetur adipisicing elit,<br /><br />
sed do eiusmod tempor incididunt</p>
Correto:
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt</p>
06. Mau uso das tags <strike> e <s>
Mais duas tags que foram depreciadas do xhtml. Sua utilização era feita apenas para adicionar um tachado – linha horizontal – sob a palavra/frase.
Hoje em dia, é correto e bem mais amigável a utilização de <del> e <ins>.
A seleção brasileiro <del>vence</del><ins>perdeu</ins> a copa do mundo 2010
07. Uso de estilo in line
Todo mundo já esta careca de saber que devemos separar o conteúdo da apresentação e é para isso que existe o arquivo .css!
<a href="javascript:void(0)" style="text-decoration:none">link_externo</a>
08. Adicionar ou remover borda de imagens no xhtml
Mais uma vez entramos no critério conteúdo/apresentação, e a apresentação é parte do CSS. Logo, semanticamente devemos utilizar do borde:0 em nosso arquivo de CSS para remoção de bordas.
<img src="minha_imagem.jpg" border="0" alt="minha_imagem" />
09. Não utilizar as tags de título
Eu costumo dizer para os que me perguntam a respeito que o xhtml é como se fosse um livro, por isso, devemos ter título, subtítulos e paragrafos.
Já viram algum livro sem título? São os títulos <h1>, <h2> etc, que vão compor a estrutura do seu documento xhtml.
<h1>titulo</h1>
<h2>sub_titulo</h2>
...
<h6>sub_titulo_nivel_5</h6>
10. O indescritível uso do <blink> ou <marquee>
Curto e grosso. Se você usa essas tags, se mata! 
<marquee>clique aqui</marquee>
tags: Artigos, CSS
27 de julho de 2010
Esses dias me enviaram o ppt abaixo a respeito da média, máximo e mínimo dos salários e cargos no Brasil feita pela Abradi e estou compartilhando com todos vocês. Deem uma olhada, achem seus cargos e me respondam: você ganha compatível com essa tabela? Se alguém conhecer uma empresa que esteja compatível com essas tabelas, por favor avisem pois é coisa rara 
tags: Pesquisa
24 de julho de 2010
Todos os dias, uma formiga chegava cedinho ao escritório e pegava duro no trabalho. A formiga era produtiva e feliz. O gerente marimbondo estranhou a formiga trabalhar sem supervisão. Se ela era produtiva sem supervisão, seria ainda mais se fosse supervisionada.
E colocou uma barata, que preparava belíssimos relatórios e tinha muita experiência, como supervisora. A primeira preocupação da barata foi a de padronizar o horário de entrada e saída da formiga.
Logo, a barata precisou de uma secretária para ajudar a preparar os relatórios e contratou também uma aranha para organizar os arquivos e controlar as ligações telefônicas.
O marimbondo ficou encantado com os relatórios da barata e pediu também gráficos com indicadores e análise das tendências que eram mostradas em reuniões.
A barata, então, contratou uma mosca, e comprou um computador com impressora colorida. Logo, a formiga produtiva e feliz, começou a se lamentar de toda aquela movimentação de papéis e reuniões!
O marimbondo concluiu que era o momento de criar a função de gestor para a área onde a formiga produtiva e feliz, trabalhava. O cargo foi dado a uma cigarra, que mandou colocar carpete no seu escritório e comprar uma cadeira especial.
A nova gestora cigarra logo precisou de um computador e de uma assistente (sua assistente na empresa anterior) para ajudá-la a preparar um plano estratégico de melhorias e um controle do orçamento para a área onde trabalhava a formiga, que já não cantarolava mais e cada dia se tornava mais chateada.
A cigarra, então, convenceu o gerente marimbondo, que era preciso fazer um estudo de clima. Mas, o marimbondo, ao rever as cifras, se deu conta de que a unidade na qual a formiga trabalhava já não rendia como antes e contratou a coruja, uma prestigiada consultora, muito famosa, para que fizesse um diagnóstico da situação. A coruja permaneceu três meses nos escritórios e emitiu um volumoso relatório, com vários volumes que concluía: “Há muita gente nesta empresa!”
Então o marimbondo mandou demitir a formiga porque ela andava muito desmotivada e aborrecida.
tags: Bloguices
Depois de alguns meses abandonado e sem nenhuma atualização meu site está de volta, agora com um novo layout (sem ser aqueles mais ou menos que eu fazia)!
Tentarei mantê-lo ao máximo atualizado possível com meus mais recentes projetos, tanto da empresa que trabalho quanto os freelancers, e artigos para podermos compartilhar informações.
tags: Bloguices