HTML 5 – Parte 1 – história e elementos de estrutura

Posted on 12/10/2010

Olá galera, tudo certin?

Nos últimos dias, estive bastante envolvido com um tópico da maior importância para mim: a consolidação de uma comunidade técnica aqui no RS. Se você quer saber mais sobre essa iniciativa, visite o post em que lanço essa idéia ou ainda o blog que construí para essa comunidade.

Sobre o que desejo falar hoje? HTML5. Para mim, esse tópico é extremamente “quente”. Muito se fala sobre as potencialidades dessa tecnologia. Sobre o impacto dela para tecnologias como Flash e Silverlight, sobre a internet como um todo.

Qual é a minha proposta? Fazer uma “viagem” pela tecnologia. Demonstrar seus principais aspectos e possibilidades. Como o tema é extenso, já começo com um “Parte 1”. Não sou especialista em HTML. Estou aprendendo HTML5! Por isso, não espere artigos profundos por enquanto. O que você vai ver será “baby steps”. Quem quiser embarcar comigo, sinta-se a vontade.

Não pretendo construir um guia de referência, no lugar disso, quero mostrar uma série de exemplos e ir me aprofundando a cada exemplo. Se você quer uma referência, considere acessar a especificação no W3C ou a especificação da WHATWG

Sem mais delongas…

Um pouco de história

Em 1998, o W3C havia decidido que a especificação do HTML não avançaria pois eles acreditavam que o futuro “falava XML”. Logo, HTML ficou congelada na versão 4.01 e uma nova especificação, chamada XHTML, foi liberada (HTML com todas as “regras” do XML).

A vinculação da HTML com XML (XHTML) enconrajou os profissionais da área a pensar em construir arquivos válidos, bem estruturados (o que é fantástico). Entretanto, um pequeno grupo não estava convencido de que XML era o futuro para todos os “desenvolvedores” web. Esse grupo, começou um trabalho em paralelo, desenvolvendo uma especificação que, primeiro ficou conhecida como Web Forms 2.0, e, em sequência, foi renomeada para HTML5. Esse grupo foi “chefiado” por Ian Hickson e é conhecido como WHATWG (Web Hypertext Application Technology Working Group).

Em 2006, o W3C reconheceu ter sido um “tantinho” otimista na adoção do XML (e, em consequência, da XHTML 2.0), como pode ser conferido no artigo de Tim Berners-Lee. Depois de um natural conflito de egos, o grupo de especificação do HTML resolveu adotar a versão da WHATWG como base para a nova versão do HTML e teve início um curioso processo onde, uma mesma especificação passou a ser desenvolvida, simultaneamente, pelo W3C e pela WHATWG.

Em 2009, a W3C parou de trabalhar na especificação do XHTML 2.0 e colocou mais recursos para o desenvolvimento da HTML5. Ainda em 2009, Ian Hickson reconheceu a importância do apoio dos desenvolvedores de browsers para a nova especificação, o que não foi tão bem visto pela comunidade.

E a história continua…

Os fundamentos do HTML5

Desde o início, houve concordância sobre quais deveriam ser os fundamentos do HTML5 (consulte http://www.w3.org/TR/html-design-principles/). Resumidamente, podemos listar estes pilares como:

Tornar o comportamento dos diversos browsers interoperáveis (funcionar da mesma forma, em todo browser) – Muitos dos recursos que utilizamos para desenvolver sites, atualmente, são recursos pouco documentados incluídos nos browsers. Por exemplo, todo o suporte para AJAX foi oferecido, primeiramente no IE e repois adicionado em outros browsers. Isso precisa ser padronizado e documentado.
Definir como o tratamento de erros deverá ser realizado – Como os browsers devem reagir a markup inválido? Essa, por incrível que pareça, também é uma questão que foi deixada em aberto até o HTML5.
Melhorar a linguagem, porém, sem sacrificar a facilidade da criação para conteúdo WEB;

HTML5 é XML?

Resposta simples: não! Conteúdo HTML5 deve ser distribuído sob a MIME text/html. Entretanto, se for necessária compatibilidade com XML, existe uma serialização do do formato chamada XHTML5. Ela permite as mesmas funcionalidades do HTML5, porém, requer um controle mais rígido da sintaxe. Ou seja, se optar por XHTML5, precisará se preocupar em prover um XML bem formado e ele precisará ser provido sob a MIME do XML.

Importante destacar que XHTML5, sob sua MIME correspondente, não encontram qualquer suporte com IE8 e suas versões anteriores.

Suporte para HTML5

HTML5 é um “buzzz”. Graças a isso, tem recebido suporte muito rapidamente. Embora a especificação não esteja finalizada ainda, podemos perceber que os browsers já adicionaram “algum” suporte para HTML5.

Embora ainda encontremos browsers com mais suporte que outros, essa diferença vem sendo reduzida dia após dia, o que é uma coisa muito boa.

Nosso primeiro documento em HTML5

Eis nosso mini-primeiro documento em HTML5. Observe:

1 doctype html> 2 <meta charset=utf-8> 3 <title>My Blogtitle> 4 <p>This is my first page using HTML5p>

Analisando linha por linha… Smiley piscando

DOCTYPE:

Primeiro temos a declaração do doctype. Repare que não há URLs (acabou o pesadelo do copiar e colar). Também não há numero de versão. O que está ali é suficiente.

META:

Ma linha 2, defino o encoding da página. Dizem que não fazer isso pode resultar em um . Observe que nossa tag está bem diferente do que estamos habituados a ver:

Repare que esse formato ainda é válido, mas não é mais necessário. Repare também que optei por não usar aspas no valor do atributo charset. Nem tomei cuidado por fechar o nodo com um “/>”. Por quê? Como já foi dito, HTML5 não é uma linguagem derivada de XML, logo, as seguintes sintaxes seriam igualmente válidas:

Importante, entretanto, observar que embora possamos ser “relaxados” com a forma como escrevemos nossos documentos HTML5, deveríamos tomar o cuidado de utilizar sempre um padrão.

Título e conteúdo:

Aproveitando que estamos escrevendo um documento html com certo descaso, vamos “chutar o balde”! Repare as linhas 3 e 4 do HTML que escrevi. Adicionei marcações de cabeçalho (</em>) e de corpo (<em><p></em>) sem usar as tags adequadas (<em><html>, <header></em> e <em><body></em> respectivamente). E esse documento é válido! Por quê? Simples, esses são todos elementos opcionais, pois os browsers assumem que eles estão lá, de alguma forma. Uma rápida olhada no visualizador da estrutura do documento, das ferramentas para desenvolvedores, do IE9, confirma isso:</p> <p><a href="http://elemarjr.files.wordpress.com/2010/10/image6.png"><img style="background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;" title="image" border="0" alt="image" src="http://elemarjr.files.wordpress.com/2010/10/image_thumb6.png?w=369&h=277" width="369" height="277"></a></p> <p>como os browsers fazem isso, HTML5 não necessita dessas tags!</p> <h2>Validando documentos HTML5</h2> <p>Atualmente, estou utilizando um validador on-line para meus documentos html5 (lembre-se que ainda estou estudando essa tecnologia). Para acessar esse documento, acesse: <a href="http://html5.validator.nu/">http://html5.validator.nu/</a>. Abaixo um screenshot desse validador atuando sobre nosso primeiro documento html5:</p> <p><a href="http://elemarjr.files.wordpress.com/2010/10/image7.png"><img style="background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;" title="image" border="0" alt="image" src="http://elemarjr.files.wordpress.com/2010/10/image_thumb7.png?w=547&h=375" width="547" height="375"></a></p> <p> </p> <p>Mas pensemos juntos, dado que podemos utilizar uma sintaxe mais relaxada, esquecendo, por exemplo das tags <em><html>, <head></em> e <em><body></em> e, mais importante, como HTML5 define um modelo consistente (DOM) para qualquer markup mal-feito, fica a questão: Ainda é importante validar documentos HTML5? Provavelmente sim, mas por razões diferentes:</p> <ol> <li>Antes de qualquer coisa, validação é uma ferramenta, o que significa que serve a um propósito maior não sendo um objetivo em si mesma. Isso significa que, ao meu ver, devemos primar pela clareza semântica do documento. Assim, nada de usar tables (argh!), ou divs, ou spans para representar semânticamente alguma coisa;</li> <li>Validação é mais uma garantia de qualidade. Deve ser aplicada, ao meu ver, antes de um “code reiew”. É uma grande forma de garantir que nossos documentos representam aquilo que desejamos que representem. Afinal de contas, browsers podem até conseguir montar uma estrutura (DOM) consistente para um documento mal-formado, mas isso não significa que essa estrautura represente aquilo que desejamos.</li> </ol> <h2>HTML5 torna nossos documentos semanticamente mais claros</h2> <p>Uma das grandes “melhorias” do HTML5, embora pouco ressaltada, ao meu ver é uma melhoria semântica. Ou seja, ficou mais fácil entender o significado de nossos documentos pois foram incluídas na especificação da linguagem um rico conjunto de marcadores.</p> <p>Considere o seguinte documento HTML:</p> <div style="display:inline;float:none;margin:0;padding:0;" id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:25e68e18-a582-4921-990d-fac57c441dc9" class="wlWriterEditableSmartContent"> <pre style="width:569px;height:363px;background-color:White;white-space:pre-wrap;word-wrap:break-word;overflow:visible;"> </pre> <div> <span style="color:#0000FF;"><</span><span style="color:#800000;">div</span> <span style="color:#FF0000;">id</span><span style="color:#0000FF;">="header"</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h1</span><span style="color:#0000FF;">></span><span style="color:#000000;">Demo</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h1</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">div</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">div</span> <span style="color:#FF0000;">id</span><span style="color:#0000FF;">="sidebar"</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Menu</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">ul</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page1.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page2.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page3.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 3</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">ul</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">div</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">div</span> <span style="color:#FF0000;">class</span><span style="color:#0000FF;">="post"</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Content 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span><span style="color:#000000;">Some Content for Content 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">div</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">div</span> <span style="color:#FF0000;">class</span><span style="color:#0000FF;">="post"</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Content 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span><span style="color:#000000;">Some Content for Content 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">div</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">div</span> <span style="color:#FF0000;">class</span><span style="color:#0000FF;">="footer"</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">><</span><span style="color:#800000;">small</span><span style="color:#0000FF;">></span><span style="color:#000000;">Copyright info...</span><span style="color:#0000FF;"></</span><span style="color:#800000;">small</span><span style="color:#0000FF;">></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">div</span><span style="color:#0000FF;">></span> </div> <pre> </pre> <p></p> </div> <p>O que definimos?</p> <ol> <li>definimos uma classe para nosso cabeçalho;</li> <li>criamos uma div (identificada) para nosso menu lateral;</li> <li>definimos uma classe para representar nosso conteúdo;</li> <li>definimos uma classe para representar nosso rodapé.</li> </ol> <p>Repare que não há nada errado com o que foi escrito aqui. Esse documento é válido e funciona (e vai continuar funcionando sob html5)</p> <p>Quais são os problemas com essa abordagem? Gostaria de descrever três:</p> <ol> <li>Repare também que o browser não sabe absolutamente nada a respeito do significado desse conteúdo. Consequentemente, poderia nos ajudar muito pouco aqui;</li> <li>O código ficou mais “carregado” do que o necessário;</li> <li>Não há padrões! Uma vez que cabe ao programador definir o nome das classes, ou ids, que serão adotadas …</li> </ol> <p>HTML5 define um conjunto totalmente novo de tags para que possamos tornar mais evidente o que queremos representar nesse documento. A mesma página, utilizando esses novos elementos, deveria ser descrita assim:</p> <div style="display:inline;float:none;margin:0;padding:0;" id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:34487716-d178-44e5-8df6-b782bdf4daec" class="wlWriterEditableSmartContent"> <pre style="width:569px;height:411px;background-color:White;white-space:pre-wrap;word-wrap:break-word;overflow:visible;"> </pre> <div> <span style="color:#0000FF;"><!</span><span style="color:#FF00FF;">doctype html</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">title</span><span style="color:#0000FF;">></span><span style="color:#000000;">Demo!</span><span style="color:#0000FF;"></</span><span style="color:#800000;">title</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">header</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h1</span><span style="color:#0000FF;">></span><span style="color:#000000;">Demo</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h1</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">header</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">nav</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Menu</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">ul</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page1.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page2.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">li</span><span style="color:#0000FF;">><</span><span style="color:#800000;">a</span> <span style="color:#FF0000;">href</span><span style="color:#0000FF;">="page3.html"</span><span style="color:#0000FF;">></span><span style="color:#000000;">Page 3</span><span style="color:#0000FF;"></</span><span style="color:#800000;">a</span><span style="color:#0000FF;">></</span><span style="color:#800000;">li</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">ul</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">nav</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">article</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Content 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span><span style="color:#000000;">Some Content for Content 1</span><span style="color:#0000FF;"></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">article</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">article</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span><span style="color:#000000;">Content 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">h2</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span><span style="color:#000000;">Some Content for Content 2</span><span style="color:#0000FF;"></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">article</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">footer</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"><</span><span style="color:#800000;">p</span><span style="color:#0000FF;">><</span><span style="color:#800000;">small</span><span style="color:#0000FF;">></span><span style="color:#000000;">Copyright info...</span><span style="color:#0000FF;"></</span><span style="color:#800000;">small</span><span style="color:#0000FF;">></</span><span style="color:#800000;">p</span><span style="color:#0000FF;">></span> <span style="color:#000000;"></span><span style="color:#0000FF;"></</span><span style="color:#800000;">footer</span><span style="color:#0000FF;">></span> </div> <pre> </pre> <p></p> </div> <p> </p> <p>Nosso documento não ficou mais limpo? Pior que ficou!</p> <p>Bem, por hoje, era isso!</p> <p>Cadê os efeitos impressionantes? Cadê as animações, vídeos, interatividade? Bem, tudo isso partindo de nosso próximo encontro… Até a parte 2</p> <p><img style="border-style:none;" class="wlEmoticon wlEmoticon-winkingsmile" alt="Smiley piscando" src="http://elemarjr.files.wordpress.com/2010/10/wlemoticon-winkingsmile2.png?w=594"></p> <div class="sharedaddy sd-like-enabled sd-sharing-enabled"> <div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"> <h3 class="sd-title">Share this:</h3> <div class="sd-content"> <ul> <li class="share-email"> <span></span> </li> <li class="share-digg"> </li> <li class="share-reddit"> </li> <li class="share-twitter"> </li> <li class="share-facebook"> </li> <li class="share-stumbleupon"> </li> <li class="share-print"> <a rel="nofollow" class="share-print sd-button share-icon no-text" href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#print" title="Click to print"><span></span></a> </li> <li class="share-end"> </ul> <div class="sharing-clear"></div> </div> </div> <div id="wpl-likebox" class="sd-block sd-like"> <h3 class="sd-title">Like this:</h3> <div class="sd-content"> <div id="wpl-button"> <span>Like</span> </div> <div id="wpl-count" class="sd-like-count"> <span>2</span> bloggers like this post. </div> <ul id="wpl-avatars" class="sd-like-gravatars"> <li> <a href="http://gravatar.com/jalbertomonteiro" title="Alberto Monteiro" class="wpl-liker"><img src="http://1.gravatar.com/avatar/d06d124220720d3bbf1d9c867c75c673?s=30&d=identicon&r=G" class="avatar avatar-30" alt="Alberto Monteiro" width="30" height="30"></a> </li> <li> <a href="http://gravatar.com/rodrigoelias" title="rodrigoelias" class="wpl-liker"><img src="http://1.gravatar.com/avatar/1790621d6f58871752c2081bec0b49c0?s=30&d=identicon&r=G" class="avatar avatar-30" alt="rodrigoelias" width="30" height="30"></a> </li> </ul> </div> </div> </div> <div class="tags"> Etiquetado:<em><a href="/tag/html5/" rel="tag">html5</a></em> </div> <div class="categories"> Posted in: <em>Sem categoria</em> </div> </div> <div id="nav-below" class="navigation"> <div class="nav-previous"> ← Nasce a DotNetRS – Comunidade .NET do Rio Grande do Sul </div> <div class="nav-next"> HTML 5 – Parte 2 – Semântica para todos! → </div> </div> <div class="fix"></div> </div> <div class="fix"></div> <div id="comments"> <div class="commh2"> 13 Responses “HTML 5 – Parte 1 – história e elementos de estrutura” → </div> <ol class="commentlist snap_preview"> <li class="comment even thread-even depth-1 wrap highlander-comment" id="comment-274"> <div class="meta-left"> <div class="meta-wrap"> <img alt="" src="http://1.gravatar.com/avatar/b3fd4b1229f5d3c43dac302c6ab7c3b7?s=48&d=identicon&r=G" class="avatar avatar-48" height="48" width="48"><br> <p class="authorcomment"><a href="http://denmartins.spaces.live.com" rel="external nofollow" class="url">Denis Martins</a><br></p> <p><small><a href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#comment-274">12/10/2010</a></small></p> </div> </div> <div class="text-right"> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_274"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>Muito boa iniciativa e parabéns pelos posts.</p> </div> <span class="comm-reply">Responder</span> <div class="fix"></div> </li> <li class="comment odd alt thread-odd thread-alt depth-1 wrap highlander-comment" id="comment-276"> <div class="meta-left"> <div class="meta-wrap"> <img alt="" src="http://0.gravatar.com/avatar/69cfcd83f19c911617ebebf88a11e3bd?s=48&d=identicon&r=G" class="avatar avatar-48" height="48" width="48"><br> <p class="authorcomment">Miguel Bordallo<br></p> <p><small><a href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#comment-276">12/10/2010</a></small></p> </div> </div> <div class="text-right"> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_276"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>“Manda ver” Elemar.<br> Estou acompanhando.<br> Abraço.</p> </div> <span class="comm-reply">Responder</span> <div class="fix"></div> </li> <li class="comment even thread-even depth-1 wrap highlander-comment" id="comment-576"> <div class="meta-left"> <div class="meta-wrap"> <img alt="" src="http://1.gravatar.com/avatar/381c45d56041af5a743345c30c74c599?s=48&d=identicon&r=G" class="avatar avatar-48" height="48" width="48"><br> <p class="authorcomment"><a href="http://www.franklinjavier.com.br" rel="external nofollow" class="url">Franklin</a><br></p> <p><small><a href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#comment-576">28/02/2011</a></small></p> </div> </div> <div class="text-right"> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_576"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>Cara, existe uma tag chamada “menu”. No lugar de “nav > ul > li”<br> basta usar “nav > menu > li”</p> <p>abcs</p> </div> <span class="comm-reply">Responder</span> <div class="fix"></div> <ul class="children"> <li class="comment odd alt depth-2 wrap highlander-comment" id="comment-655"> <div class="meta-left"> <div class="meta-wrap"> <img alt="" src="http://1.gravatar.com/avatar/7bb85b0a49e610043be414385b18e4a6?s=48&d=identicon&r=G" class="avatar avatar-48" height="48" width="48"><br> <p class="authorcomment"><a href="http://johnylab.net/" rel="external nofollow" class="url">João</a><br></p> <p><small><a href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#comment-655">02/05/2011</a></small></p> </div> </div> <div class="text-right"> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_655"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>irado isso</p> <p>mas será que vai pegar? ou a pergunta certa talvez seja “até quando vai pegar?”</p> </div> <span class="comm-reply">Responder</span> <div class="fix"></div> </li> </ul> </li> </ol> <div class="commh2"> 9 Trackbacks For This Post </div> <ol class="trackbacklist snap_preview"> <li class="alt" id="trackback-275"> <cite><a href="http://topsy.com/elemarjr.wordpress.com/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/?utm_source=pingback&utm_campaign=L2" rel="external nofollow" class="url">Tweets that mention HTML 5 – Parte 1 – história e elementos de estrutura « Elemar DEV -- Topsy.com</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-275" title="">outubro 12th, 2010 → 1:52</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_275"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] This post was mentioned on Twitter by Rafael Amorim, Elemar Júnior. Elemar Júnior said: HTML 5 – Parte 1 – história e elementos de estrutura <a href="http://bit.ly/b9Bk6N" rel="nofollow">http://bit.ly/b9Bk6N</a> [...]</p> </li> <li class="" id="trackback-277"> <cite><a href="http://elemarjr.wordpress.com/2010/10/12/html-5-parte-2-semntica-para-todos/" rel="external nofollow" class="url">HTML 5 – Parte 2 – Semântica para todos! « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-277" title="">outubro 12th, 2010 → 17:28</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_277"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] post de ontem, comecei a falar um pouquinho sobre HTML5. Hoje, pretendo dar seqüência nesse assunto. Pretendo [...]</p> </li> <li class="alt" id="trackback-281"> <cite><a href="http://elemarjr.wordpress.com/2010/10/14/html5-parte-3-novos-elementos-para-formulrios/" rel="external nofollow" class="url">HTML5 – Parte 3 – Novos elementos para formulários « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-281" title="">outubro 14th, 2010 → 2:57</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_281"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="" id="trackback-286"> <cite><a href="http://elemarjr.wordpress.com/2010/10/15/html-5-parte-4-vdeo-e-udio/" rel="external nofollow" class="url">HTML 5 – Parte 4 – Vídeo e Áudio « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-286" title="">outubro 15th, 2010 → 0:05</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_286"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="alt" id="trackback-296"> <cite><a href="http://elemarjr.wordpress.com/2010/10/18/html-5-parte-5-armazenando-dados-com-web-storage/" rel="external nofollow" class="url">HTML 5 – Parte 5 – Armazenando dados com Web Storage « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-296" title="">outubro 18th, 2010 → 0:05</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_296"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="" id="trackback-301"> <cite><a href="http://elemarjr.wordpress.com/2010/10/19/html-5-parte-6-armazendando-dados-com-web-sql-databases/" rel="external nofollow" class="url">HTML 5 – Parte 6 – Armazendando dados com Web SQL Databases « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-301" title="">outubro 19th, 2010 → 1:33</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_301"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="alt" id="trackback-307"> <cite><a href="http://elemarjr.wordpress.com/2010/10/20/html-5-parte-7-suporte-para-offline/" rel="external nofollow" class="url">HTML 5 – Parte 7 – Suporte para offline « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-307" title="">outubro 20th, 2010 → 0:13</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_307"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="" id="trackback-325"> <cite><a href="http://elemarjr.wordpress.com/2010/10/23/html-5-parte-8-messaging/" rel="external nofollow" class="url">HTML 5 – Parte 8 – Messaging « Elemar DEV</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-325" title="">outubro 23rd, 2010 → 19:44</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_325"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] HTML5 – Parte 1 – história e elementos de estrutura [...]</p> </li> <li class="alt" id="trackback-883"> <cite><a href="http://saulocarvalho.net/2011/09/06/html/" rel="external nofollow" class="url">HTML « Códigos, linguagens e agilidade</a></cite> →<br> <small class="commentmetadata"><a href="#trackback-883" title="">setembro 9th, 2011 → 13:14</a></small> <div class="pd-rating sd-content" id="pd_rating_holder_2454067_comm_883"></div> <script type="text/javascript" charset="UTF-8"> <![CDATA[//><!]]> </script> <p>[...] Um post inspirador do Elemar [...]</p> </li> </ol> <div id="respond"> <h3 id="reply-title">Deixar uma Resposta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/#respond" style="display:none;">Cancelar resposta</a></small> </h3> </div> <div style="clear: both"></div> </div> </div> <div class="sidebar sidebar_right"> <div id="search-3" class="widget widget_search"> <h3 class="hl">Pesquisa</h3> </div> <div id="image-3" class="widget widget_image"> <h3 class="hl">Siga-me no twitter</h3> <div style="overflow:hidden;"> </div> </div> <div id="image-5" class="widget widget_image"> <h3 class="hl">O que acha de ler um “Post aleatório”</h3> <div style="overflow:hidden;"> <img src="http://elemarjr.files.wordpress.com/2011/11/sorteio.png?w=224&h=159" class="aligncenter" width="224" height="159"> </div> </div> <div id="image-4" class="widget widget_image"> <h3 class="hl">Conheça o Void Podcast</h3> <div style="overflow:hidden;"> <a href="http://voidpodcast.com"><img src="http://elemarjr.files.wordpress.com/2011/11/voidpodcast.png?w=225&h=216" alt="Void podcast" title="Void Podcast" class="aligncenter" width="225" height="216"></a> </div> </div> <div id="top-posts" class="widget widget_stats_topposts"> <h3 class="hl">Posts mais acessados nas últimas horas</h3> <ul> <li> <a href="/2011/11/27/voc-incompetente/">Você é (in)competente?</a> </li> <li> <a href="/2011/11/27/afinal-por-que-odiamos-gerentes-e-por-que-no-deveramos/">Afinal, por que odiamos gerentes? (e por que não deveríamos)</a> </li> <li> Melhorando a responsividade de aplicações Web com RxJS </li> <li> <a href="/2010/10/29/canvas1/">HTML 5 – Parte 9 – Começando a mexer com Canvas</a> </li> <li> <a href="/2010/12/03/html-5-parte-10-animao/">HTML 5 – Parte 10 – Animação</a> </li> <li> <a href="/2011/11/21/reactive-extensions-for-javascript-rxjs-framework/">Reactive Extensions for Javascript (RxJS Framework)</a> </li> <li> <a href="/elemarjr/">ElemarJR</a> </li> <li> <a href="/2011/02/22/vamos-aprender-xna-parte-1-back-to-basics/">Vamos aprender XNA? – Parte 1 – Back to Basics</a> </li> <li> Functional Programming (Map e Reduce) com JavaScript </li> <li> <a href="/2011/07/24/grandes-administradores-douglas-mcgregor-e-suas-teorias-x-y-e-z/">Grandes Administradores – Douglas McGregor e suas Teorias X, Y e .. Z</a> </li> <li> <a href="/2010/10/12/html-5-parte-1-histria-e-elementos-de-estrutura/">HTML 5 – Parte 1 – história e elementos de estrutura</a> </li> <li> Method Chaining em JavaScript </li> </ul> </div> <div id="calendar-3" class="widget widget_calendar"> <h3 class="hl">Calendário de posts</h3> <div id="calendar_wrap"> <table id="wp-calendar"> <caption> outubro 2010 </caption> <thead> <tr> <th scope="col" title="segunda-feira">S</th> <th scope="col" title="terça-feira">T</th> <th scope="col" title="quarta-feira">Q</th> <th scope="col" title="quinta-feira">Q</th> <th scope="col" title="sexta-feira">S</th> <th scope="col" title="sábado">S</th> <th scope="col" title="domingo">D</th> </tr> </thead> <tfoot> <tr> <td colspan="3" id="prev"> <a href="/2010/09/" title="Ver posts de setembro 2010">« set</a> </td> <td class="pad"> </td> <td colspan="3" id="next"> <a href="/2010/11/" title="Ver posts de novembro 2010">nov »</a> </td> </tr> </tfoot> <tbody> <tr> <td colspan="4" class="pad"> </td> <td> 1 </td> <td> 2 </td> <td>3</td> </tr> <tr> <td>4</td> <td> 5 </td> <td>6</td> <td>7</td> <td> 8 </td> <td>9</td> <td> 10 </td> </tr> <tr> <td>11</td> <td> 12 </td> <td>13</td> <td> 14 </td> <td> 15 </td> <td>16</td> <td>17</td> </tr> <tr> <td> 18 </td> <td> 19 </td> <td> 20 </td> <td> 21 </td> <td> 22 </td> <td> 23 </td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td> 27 </td> <td>28</td> <td> 29 </td> <td> 30 </td> <td>31</td> </tr> </tbody> </table> </div> </div> <div id="wp_tag_cloud" class="widget wp_widget_tag_cloud"> <h3 class="hl">Tags</h3> <div style="overflow:hidden"> <a href="/tag/3d/" class="tag-link-2131" title="20 tópicos" style="font-size: 15.587096774194pt;">3D</a> <a href="/tag/arquitetura/" class="tag-link-24789" title="30 tópicos" style="font-size: 17.122580645161pt;">Arquitetura</a> <a href="/tag/aspnetmvc/" class="tag-link-4236303" title="4 tópicos" style="font-size: 9.9870967741935pt;">AspNetMvc</a> <a href="/tag/aviso/" class="tag-link-137324" title="12 tópicos" style="font-size: 13.690322580645pt;">Aviso</a> <a href="/tag/azure/" class="tag-link-335778" title="2 tópicos" style="font-size: 8pt;">Azure</a> <a href="/tag/bitboards/" class="tag-link-48538488" title="12 tópicos" style="font-size: 13.690322580645pt;">Bitboards</a> <a href="/tag/boo/" class="tag-link-11646" title="4 tópicos" style="font-size: 9.9870967741935pt;">Boo</a> <a href="/tag/c-2/" class="tag-link-1634593" title="10 tópicos" style="font-size: 13.058064516129pt;">C++</a> <a href="/tag/c-101/" class="tag-link-7020643" title="9 tópicos" style="font-size: 12.696774193548pt;">C++ 101</a> <a href="/tag/carreira/" class="tag-link-71362" title="13 tópicos" style="font-size: 14.051612903226pt;">carreira</a> <a href="/tag/cloud-computing/" class="tag-link-1715866" title="4 tópicos" style="font-size: 9.9870967741935pt;">Cloud Computing</a> <a href="/tag/codeasdata/" class="tag-link-40983742" title="17 tópicos" style="font-size: 15.045161290323pt;">CodeAsData</a> <a href="/tag/compiladores/" class="tag-link-177051" title="3 tópicos" style="font-size: 9.0838709677419pt;">compiladores</a> <a href="/tag/dbc/" class="tag-link-106422" title="2 tópicos" style="font-size: 8pt;">DbC</a> <a href="/tag/dica/" class="tag-link-205369" title="4 tópicos" style="font-size: 9.9870967741935pt;">dica</a> <a href="/tag/dlr/" class="tag-link-506570" title="8 tópicos" style="font-size: 12.245161290323pt;">DLR</a> <a href="/tag/dsl/" class="tag-link-58204" title="6 tópicos" style="font-size: 11.341935483871pt;">DSL</a> <a href="/tag/emitting/" class="tag-link-3903804" title="12 tópicos" style="font-size: 13.690322580645pt;">Emitting</a> <a href="/tag/expressions/" class="tag-link-36236" title="5 tópicos" style="font-size: 10.709677419355pt;">Expressions</a> <a href="/tag/fluentil/" class="tag-link-50823174" title="14 tópicos" style="font-size: 14.322580645161pt;">FluentIL</a> <a href="/tag/fractals/" class="tag-link-69836" title="9 tópicos" style="font-size: 12.696774193548pt;">fractals</a> <a href="/tag/hlsl/" class="tag-link-4467667" title="9 tópicos" style="font-size: 12.696774193548pt;">HLSL</a> <a href="/tag/html5/" class="tag-link-53242" title="28 tópicos" style="font-size: 16.851612903226pt;">html5</a> <a href="/tag/il-101/" class="tag-link-39726494" title="10 tópicos" style="font-size: 13.058064516129pt;">IL 101</a> <a href="/tag/imageprocessing/" class="tag-link-13566713" title="5 tópicos" style="font-size: 10.709677419355pt;">ImageProcessing</a> <a href="/tag/intermediate-language/" class="tag-link-2347294" title="30 tópicos" style="font-size: 17.122580645161pt;">Intermediate Language</a> <a href="/tag/javascript/" class="tag-link-457" title="23 tópicos" style="font-size: 16.129032258065pt;">JavaScript</a> <a href="/tag/jquery/" class="tag-link-203308" title="15 tópicos" style="font-size: 14.503225806452pt;">JQuery</a> <a href="/tag/management/" class="tag-link-4236" title="5 tópicos" style="font-size: 10.709677419355pt;">management</a> <a href="/tag/mock/" class="tag-link-155377" title="12 tópicos" style="font-size: 13.690322580645pt;">Mock</a> <a href="/tag/msbuild/" class="tag-link-331716" title="6 tópicos" style="font-size: 11.341935483871pt;">MSBuild</a> <a href="/tag/paralelismo/" class="tag-link-2101944" title="9 tópicos" style="font-size: 12.696774193548pt;">Paralelismo</a> <a href="/tag/patterns/" class="tag-link-5604" title="5 tópicos" style="font-size: 10.709677419355pt;">Patterns</a> <a href="/tag/post/" class="tag-link-1187" title="107 tópicos" style="font-size: 22pt;">Post</a> <a href="/tag/powershell/" class="tag-link-178495" title="3 tópicos" style="font-size: 9.0838709677419pt;">Powershell</a> <a href="/tag/proxy/" class="tag-link-9628" title="12 tópicos" style="font-size: 13.690322580645pt;">Proxy</a> <a href="/tag/pruning/" class="tag-link-946255" title="2 tópicos" style="font-size: 8pt;">pruning</a> <a href="/tag/ps/" class="tag-link-141669" title="2 tópicos" style="font-size: 8pt;">PS</a> <a href="/tag/rest/" class="tag-link-15314" title="5 tópicos" style="font-size: 10.709677419355pt;">REST</a> <a href="/tag/rx/" class="tag-link-108740" title="5 tópicos" style="font-size: 10.709677419355pt;">Rx</a> <a href="/tag/silverlight/" class="tag-link-984139" title="2 tópicos" style="font-size: 8pt;">Silverlight</a> <a href="/tag/t4/" class="tag-link-831174" title="2 tópicos" style="font-size: 8pt;">T4</a> <a href="/tag/uncategorized/" class="tag-link-1" title="2 tópicos" style="font-size: 8pt;">Uncategorized</a> <a href="/tag/xadrez/" class="tag-link-170578" title="14 tópicos" style="font-size: 14.322580645161pt;">Xadrez</a> <a href="/tag/xna/" class="tag-link-299868" title="23 tópicos" style="font-size: 16.129032258065pt;">XNA</a> </div> </div> <div id="twitter-3" class="widget widget_twitter"> <h3 class="hl"></h3> <ul class="tweets"> <li>Galera, estou agradecido e honrado por todas as menções e feedbacks para meus últimos posts. </li> <li>POST: Você é (in)competente? <a href="http://t.co/uby1WYaF" rel="nofollow">http://t.co/uby1WYaF</a> </li> <li>POST: Afinal, por que odiamos gerentes? (e por que não deveríamos) <a href="http://t.co/yQzv0tYa" rel="nofollow">http://t.co/yQzv0tYa</a> </li> <li>O tal planejamento ... Comic for November 26, 2011 <a href="http://t.co/lU4TiYR9" rel="nofollow">http://t.co/lU4TiYR9</a> </li> <li>:-) // Tempo ideal do banho. <a href="http://t.co/KG9f7aqQ" rel="nofollow">http://t.co/KG9f7aqQ</a> </li> <li>Por hoje, chega! Boa noite para quem fica. </li> <li>POST: Melhorando a responsividade de aplicações Web usando RxJS <a href="http://t.co/egCBtK48" rel="nofollow">http://t.co/egCBtK48</a> </li> <li>POST: Fractals and Tiles (com html5) - Parte 8 - Julia set <a href="http://t.co/Rt5gG4sJ" rel="nofollow">http://t.co/Rt5gG4sJ</a> </li> <li>.. em casa, finalmente. </li> <li>.. pronto. Agora, subir a serra! </li> </ul> </div> </div> <div class="footer footer_left"> <div class="fl"> <a href="http://pt-br.wordpress.com/?ref=footer" rel="generator">Blog no WordPress.com</a>. </div> <div class="fr"> Theme: <a href="http://theme.wordpress.com/themes/inuit-types/">Inuit Types</a> by <a href="http://bizzartic.com" rel="designer">BizzArtic</a>. </div> <div class="fix"></div> </div> </div> </div> <div class="fix"></div> <script type="text/javascript" src="http://s.gravatar.com/js/gprofiles.js?aa&ver=MU"></script> <script type="text/javascript"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <noscript> <div style="display: none;"></div> </noscript> <script type="text/javascript"> /* <![CDATA[ */ jQuery(document).ready( function($) { $('#wpl-button > a.like').click( function(e) { e.preventDefault(); $('#wpl-mustlogin').remove(); $.post( 'https://elemarjr.net/wp-admin/admin-ajax.php', { 'action': 'wpl_record_stat', 'stat_name': 'loggedout_like_click' } ); var tenMins = new Date(); tenMins.setTime( tenMins.getTime() + 600000 ); document.cookie = 'wpl_rand=92fe1b262c; expires=' + tenMins.toGMTString() + '; domain=wordpress.com; path=/;'; $('#wpl-count').after( '\ <div id="wpl-mustlogin"> \ <div id='bsub-credit'> <a href="http://wordpress.com">Powered by WordPress.com <script type='text/javascript' src='http://s2.wp.com/wp-content/mu-plugins/post-flair/sharing/sharing.js?m=1315610377g&ver=0.2'></script> <div id="sharing_email" style="display: none;"> </div> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-twitter' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcom-twitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); }); </script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-facebook' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcom-facebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); }); </script> <script type="text/javascript" src= " "></script> <script type="text/javascript"> try{COMSCORE.beacon({c1:2,c2:7518284});}catch(e){} </script> <noscript> <p class="robots-nocontent"></p> </noscript> <script type="text/javascript"> // <![CDATA[ (function() { try{ if ( window.external &&'msIsSiteMode' in window.external) { if (window.external.msIsSiteMode()) { var jl = document.createElement('script'); jl.type='text/javascript'; jl.async=true; jl.src='/wp-content/plugins/ie-sitemode/custom-jumplist.php'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jl, s); } } }catch(e){} })(); // ]]> </script> <noscript></noscript> </body> </html>