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.

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):

• div;
• p;
• form etc.

Em linha (inline):

• a;
• span;
• strong etc.

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>

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.

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.

A Get Made desenvolve estratégias de Marketing Digital que geram visibilidade na web, criando oportunidades efetivas de negócio com uma metodologia de trabalho focada em resultado.

Contam com profissionais qualificados na gestão de campanhas de link patrocinado, mídia online, SEO, mídias sociais, e-mail marketing, mobile marketing, além do desenvolvimento de web sites e hotsites promocionais.

A GetMade é parceira exclusiva da canadense iRISEmedia, referência em Marketing Digital na América do Norte.

Serviços prestados: HTML 5, CSS, jQuery

Seu programa não só suporta os padrões estatais, mas oferece uma abordagem única ligando seus colégios proporcionando um conhecimento especifico e habilidades dominadas pelos alunos em cada área temática de cada nível.

Serviços prestados: WordPress, xHTML, CSS, jQuery

Em mais de 37 mil edições, O Fluminense mantém a postura que o fez crescer: defesa da integridade, da soberania e das aspirações populares. Assim, O Fluminense é um dos jornais mais importantes do cenário político nacional.

As páginas de O Fluminense revelaram alguns dos mais talentosos nomes da nossa literatura, como Euclides da Cunha, Oliveira Vianna, Olavo Bilac, Rubem Braga e Irineu Marinho.

Em 1954, O Fluminense passou a ser administrado pelo advogado, político e jornalista Alberto Torres. Quarenta e quatro anos mais tarde, O Fluminense foi transformado em um moderno veículo de comunicação. Alberto Torres promoveu o reaparelhamento das oficinas, a construção da atual sede e a expansão da empresa.

Atualmente, o Grupo Fluminense de Comunicação é administrado por Nina Rita Torres e Alexandre Torres, filha e neto de Alberto Torres.

Serviços prestados: xHTML, CSS, jScript

Serviços prestados: WordPress, xHTML, CSS, jScript