Interpretando XML com Jquery

Publicado em Publicado por gserrano

Estudando jQuery para o desenvolvimento de novas ferramentas para o And After (a nova Vitrine Buscapé) resolvi publicar um artigo exemplificando como ler XML com jQuery.

Primeiro devo deixar claro que meu relacionamento com Javascript é bem tímido, o pouco que sei são aprendizados recentes mas o jQuery tem ajudado muito por facilitar bastantes as coisas. Sei que o Chris vai dizer que Prototype apresenta mais vantagens, mas testei rapidamente as duas bibliotecas sem saber quase nada de Javascript e a que teve mais efetividade no desenvolvimento foi jQuery, que optei por estudar.

"Instalando" o jQuery

O primeiro passo para utilizar a biblioteca é fazer com o que o usuário carregue ela, não baixe ela no seu servidor, o Google Ajax Libraries faz isso e traz duas vantagens principais:

  1. Economia de banda no seu servidor
  2. Maior chance de usar o cache do usuário, diminuindo o tempo e carregamento
  3.  
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
//1 - carrega bibliotecas prototype e scriptaculous 
google.load("jquery", "1.2.6");
</script>

 

Biblioteca colocada na página, podemos agora passar para o próximo passo.

 

XML

Aqui está a estrutura do XML que utilizei para o exemplo, utilizei este feed, que exibe os resultados da busca no Twitter pelo meu username (@gserrano), mas poderia ser resultados do Flickr, do Google, do feed do seu blog ou de um relatório de um aplicativo web.

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns:google="http://base.google.com/ns/1.0" xml:lang="en-US" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns="http://www.w3.org/2005/Atom" xmlns:twitter="http://api.twitter.com/">
  <id>tag:search.twitter.com,2005:search/gserrano</id>
  <link type="text/html" rel="alternate" href="http://search.twitter.com/search?q=gserrano"/>
  <link type="application/atom+xml" rel="self" href="http://search.twitter.com/search.atom?q=gserrano"/>
  <title>gserrano - Twitter Search</title>
  <link type="application/opensearchdescription+xml" rel="search" href="http://search.twitter.com/opensearch.xml"/>
  <link type="application/atom+xml" rel="refresh" href="http://search.twitter.com/search.atom?q=gserrano&amp;since_id=1011974184"/>
  <updated>2008-11-18T23:30:00Z</updated>
  <openSearch:itemsPerPage>15</openSearch:itemsPerPage>
  <link type="application/atom+xml" rel="next" href="http://search.twitter.com/search.atom?max_id=1011974184&amp;page=2&amp;q=gserrano"/>
  <entry>
    <id>tag:search.twitter.com,2005:1011974184</id>
    <published>2008-11-18T23:30:00Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011974184"/>
    <title>@chrisloki parab&#233;ns pra ti, #odesenvolvedor com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; parab&#233;ns pra ti, &lt;a href="/search?q=%23odesenvolvedor"&gt;#odesenvolvedor&lt;/a&gt; com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</content>
    <updated>2008-11-18T23:30:00Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011974184.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011941353</id>
    <published>2008-11-18T23:06:02Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/chrisloki/statuses/1011941353"/>
    <title>@gserrano parab&#233;ns o/ uhu!</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; parab&#233;ns o/ uhu!</content>
    <updated>2008-11-18T23:06:02Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/61066338/ble_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011941353.atom"/>
    <author>
      <name>chrisloki (Chris Benseler)</name>
      <uri>http://twitter.com/chrisloki</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011934314</id>
    <published>2008-11-18T23:01:16Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011934314"/>
    <title>a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! http://tinyurl.com/5q8c88</title>
    <content type="html">a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! &lt;a href="http://tinyurl.com/5q8c88"&gt;http://tinyurl.com/5q8c88&lt;/a&gt;</content>
    <updated>2008-11-18T23:01:16Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011925155</id>
    <published>2008-11-18T22:54:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011925155"/>
    <title>um culto ao ego, #andafter teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</title>
    <content type="html">um culto ao ego, &lt;a href="/search?q=%23andafter"&gt;#andafter&lt;/a&gt; teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</content>
    <updated>2008-11-18T22:54:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011912798</id>
    <published>2008-11-18T22:46:14Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011912798"/>
    <title>@gserrano Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</content>
    <updated>2008-11-18T22:46:14Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011912798.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011871230</id>
    <published>2008-11-18T22:17:19Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011871230"/>
    <title>@gserrano Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</content>
    <updated>2008-11-18T22:17:19Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011871230.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011868941</id>
    <published>2008-11-18T22:15:50Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011868941"/>
    <title>@gserrano hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</content>
    <updated>2008-11-18T22:15:50Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011868941.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011861566</id>
    <published>2008-11-18T22:10:40Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011861566"/>
    <title>que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</title>
    <content type="html">que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</content>
    <updated>2008-11-18T22:10:40Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011857210</id>
    <published>2008-11-18T22:07:39Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011857210"/>
    <title>@oPadreVoador que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</title>
    <content type="html">&lt;a href="http://twitter.com/oPadreVoador"&gt;@oPadreVoador&lt;/a&gt; que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</content>
    <updated>2008-11-18T22:07:39Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011857210.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011847664</id>
    <published>2008-11-18T22:01:28Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011847664"/>
    <title>@bpinaud bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</title>
    <content type="html">&lt;a href="http://twitter.com/bpinaud"&gt;@bpinaud&lt;/a&gt; bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</content>
    <updated>2008-11-18T22:01:28Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011847664.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011843370</id>
    <published>2008-11-18T21:58:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011843370"/>
    <title>Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</title>
    <content type="html">Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</content>
    <updated>2008-11-18T21:58:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011820041</id>
    <published>2008-11-18T21:43:32Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011820041"/>
    <title>@gserrano hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</content>
    <updated>2008-11-18T21:43:32Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011820041.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011815993</id>
    <published>2008-11-18T21:40:49Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011815993"/>
    <title>Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</title>
    <content type="html">Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</content>
    <updated>2008-11-18T21:40:49Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011776936</id>
    <published>2008-11-18T21:15:30Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>
    <title>que tal servir aperitivo num ralo pra banheiro? http://tinyurl.com/5obmlo</title>
    <content type="html">que tal servir aperitivo num ralo pra banheiro? &lt;a href="http://tinyurl.com/5obmlo"&gt;http://tinyurl.com/5obmlo&lt;/a&gt;</content>
    <updated>2008-11-18T21:15:30Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011521172</id>
    <published>2008-11-18T18:32:52Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011521172"/>
    <title>@chrisloki "eu sei que n&#227;o, mas vou fazer" &#233; o que diferencia homens de meninos. gogo! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; &amp;quot;eu sei que n&#227;o, mas vou fazer&amp;quot; &#233; o que diferencia homens de meninos. gogo! :D</content>
    <updated>2008-11-18T18:32:52Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011521172.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
</feed>
 

 

Interpretar XML com jQuery

 Aqui está o código que ao carregar a página identifica qual XML será lido, busca pelos dados "entry" no XML e gera um loop entre eles, exibindo a mensagem que está no XML.

 

<script type="text/javascript">
        $(function(){
        $("#tweets").fadeOut("fast");
            $.ajax({
                 type: "GET",
                 url: "search.xml",
                 dataType: "xml",
                 success: function(xml) {
                 
                    $(xml).find("entry").each(function(){
                         var link =  $(this).find("link").attr("href");
                         var texto = $(this).find("content").text();
                         $("<li></li>")
                             .html(texto + " <a href=´" + link + "´>Ver tweet</a>")
                             .appendTo("#tweets");
                     }); //close each(
                    $("#tweets").fadeIn("slow");
                }
             }); //close $.ajax(
        });
</script>

 

Neste caso utilizei a requesição utilizando a função ".ajax" do jQuery, em meus testes não consegui fazer retornar direto da busca, portanto seria necessário utilizar programação server-side como ASP ou PHP para gerar o XML para o Javascript. Não é a melhor solução se você precisa ler XML externo. Uma forma melhor de fazer isto é utilizar seu servidor como Proxy através do Isapi Rewrite (para quem utiliza IIS) e acredito que deve ser possível com htaccess. Se alguém tem alguma dica melhor, estou aqui mais para aprender do que para ensinar, comenta aí! 🙂

Talvez uma estudada em XML-RPC resolva este problema para ler o XML externo, se não me engano eu já fiz isso só com jQuery, mas acho que estava utilizando JSON e não XML como resposta.

A função .ajax carrega o arquivo search.xml (o xml que utilizei no exemplo) e chama a função para a leitura. Chamei um loop para cada "entry" encontrado no meu XML, portanto "entry" é cada linha que eu gostaria de ler (no caso, cada tweet retornado pela busca).

Busquei apenas duas variáveis, o link para o tweet original:

var link =  $(this).find("link").attr("href");

Que no XML está como o atributo href, na linha abaixo:

<link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>

E recuperei também o texto do tweet, que são as duas únicas variáveis que utilizei para o exemplo. Dentro do loop eu criei elementos de lista <li></li>, onde adicionei as variáveis e no final utilizei o .appendTo para inserir cada elemento da lista dentro do elemento com ID tweets que deve estar no HTML.

 A função fade é opcional, utilizei apenas porque sou designer para suavizar a visualização no carregamento da lista.

HTML

Como explicado acima, depois de montar a lista o script procura o elemento com o id tweets, portanto a única coisa necessária no HTML do documento é uma lista <ul> ou <ol> com o id correto.

<ol id="tweets"></ol>

É isso, qualquer sugestão ou dúvida comente, como eu disse: estou muito mais apto a aprender do que a ensinar por aqui, mas espero ter ajudado. 🙂

Veja o exemplo funcionando.

Resetando o CSS

Publicado em Publicado por gserrano

Acho que um dos maiores concensos dentro do desenvolvimento de interfaces para web é resetar o CSS padrão antes do início do desenvolvimento.

Isso porque cada browser tem os seus próprios valores padrão para margens, paddings, bordas, etc… dos elementos do CSS.

Todo mundo tem o seu método de fazer isso. Eu, há algum tempo, uso uma folha de estilos separada – normalmente chamada reset.css – com o código abaixo, e a chamo como primeiro include nos htmls:

 

 

*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
    font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

 

SEO: siga o bom-senso, e não as fórmulas prontas

Publicado em Publicado por gserrano

SEO é sem sombra de dúvidas um dos assuntos mais recorrentes nos blogs hoje em dia. Ter um site bem colocado nos mecanismos de busca faz com que a viabilidade de qualquer projeto esteja bem encaminhada.

Sou muito contra a maioria dos posts que vejo por aí, e também muito contra um monte de empresas que ganham em cima de SEO: já vi muita coisa que é puro achismo. Como, por exemplo, regras que são ditas, como:

  • o título da sua página deve ter de 3 a 5 palavras
  • a meta-tag description deve ter até 160 palavras
  • você deve usar entre 5 a 10 palavras-chaves na meta-tag keywords

A última regrinha dessas, que vi, é a seguinte para calcular o peso de uma palavra-chave:

  • x: quantidade de palavras da palavra-chave
  • y: quantidade de vezes que este palavra-chave tem dentro da descrição
  • z: quantidade de palavras da descrição
  • Peso= x*y/z*100%

Tendo calculado o peso, estima-se que ele deve ser maior do que 4%.

Agora… de onde vem isso? De onde alguém tirou essa regra? Já vi empresas cobrando fortunas, do tipo R$30 mil, para fazer a avaliação de um projeto de médio porte, usando um monte dessas regras inventadas por não-sei-quem.

 

Eu ainda sou um defensor do bom-senso; SEO está ligado a coisas como, por exemplo:

  • uso correto da semântica do html (conteúdo no html, layout no CSS)
  • webwritting bem feito (textos sucintos, que vão direto ao ponto)
  • escolha correta das keywords (poucas, mas bem escolhidas), tentando pegar as que aparecem na description, título da página e conteúdo (só isso já dá um peso grande para cada keyword)

Quero ler o livro que o Google lançou sobre SEO; mas eu dúvido que lá eles dêem o how-to de como são calculados os fatores do Page Rank e afins. Aposto que devem falar muito mais sobre conceitos, bom-senso e boas práticas na construção do seu website do que dar formulateas prontas para calcular índices na sua página.

Sugiro uma lida nesse texto sobre SEO e como o Google posiciona os resultados de busca; nada de regrinhas, formulinhas prontas. O bom-senso e a boa construção de um projeto, mais a utilização de técnicas não-invasivas – ou blackhat SEO – são a chave.

Via6 – mostre o número de votos que seu post recebeu

Publicado em Publicado por gserrano

O Via6 é um sistema tupiniquim que tem tudo para ser uma espécie de Digg brasileiro. Nesse sistema, dentre muitas funcionalidades, a mais usada é de longe a de indicar posts de blogs (ou páginas de sites) e categorizá-los; a partir daí, os outros usuários podem votar nesse post e começa, a partir daí,  a ser criado um ranking dos mais bacanas.

Eu vi perdido em algum blog (não me lembro qual agora) que o publicador deixou disponível o número de votos que cada post dele recebeu. Achei bem bacana, porque além de tudo ele tinha um link que ia direto para o sistema do Via6 e fui procurar como fazer. Achei vários plug-ins para vários gerenciadores (Blogger, WordPress, etc…).

Mas, achei um bem melhor, que não necessita de instalação alguma de plug-in ou programação. E é disponibilizado pelo próprio Via6.
O que é necesário fazer é inserir uma chamada javascript a uma URL, passando o endereço do seu post como parâmetro.
Por exemplo:

<script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=https://andafter.org" type="text/javascript"></script>

Existe uma página com exemplos diversos. Passe por lá 🙂

Semântica no html – impasse?

Publicado em Publicado por gserrano

Escrevi outro dia sobre semântica no html: alguns conceitos, uma idéia macro e um exemplo prático de como escrever um html dessa forma.

Mas, nem tudo é maravilha… estava agora pouco escrevendo um html quando me deparo com um layout que era algo como esse (procurei na web alguma coisa parecida, já que layout do cliente não pode ser exposto):

A dúvida é a seguinte: isso é uma tabela (table), com um cabeçalho (header) e os dados abaixo, ou uma lista (ul) que tem um título (h1, h2, etc…) antes?
Conversei com um dos meus assistentes, e ele de prima falou que faria uma tabela. Já, eu, imaginei que fosse ser uma lista com um título antes. Sinceramente, não dá pra chegar numa conclusão definitiva sobre isso. Não acho que exista um certo ou errado para esse c&oacuteoacute;digo; ambos fariam sentido, pois pode ser uma tabela de dados ou uma lista de valores.

Como você escreveria?

Ah, indico esse post do Diego Eis sobre tabelas semânticas!