Fazendo o design de um blog com HTML5

**G.10** · 3 de Maio 2012

Introdução

Muito do pacote de recursos do HTML5 envolve APIs do JavaScript, que facilitam o desenvolvimento de sites interativos, mas existe uma grande quantidade de novos elementos que permitem que você use semânticas novas nas suas páginas web 1.0 convencionais. Com o objetivo de investigá-los, vamos olhar para a marcação de um blog.

Primeiramente, o que vamos fazer é usar os elementos header, footer, e nav para marcar a estrutura geral da página. Faremos os formulários de comentários do blog muito mais inteligentes, usando os novos tipos de dados e as validações disponíveis dentro de navegadores que suportam o HTML5.

Então faremos um trabalho no núcleo da página, usando elementos article do HTML5, para marcar melhor os posts e comentários do blog e para mostrar como usar elementos section para estruturar melhor as headings acessíveis hierarquicamente nos sites que são orientados pelo CMS. Como os blogs são ordenados cronologicamente, veremos o que o HTML5 nos oferece para representar datas e horários. Então, tire o telefone do gancho e faça uma xícara de chá que vamos começar.

Configurando o DOCTYPE

O HTML5, quando usado como HTML puro em vez do seu irmão XHTML5, não precisa de um DOCTYPE. Mas todos os browsers precisam, caso contrário, eles entram em Quirksmode, o que você não quer: a colisão do HTML5 com o Quirksmode é como o encontro de matéria e anti-matéria, e causará uma inversão de realidade negativa que irá fazer suas roupas de baixo pegarem fogo.

Você foi avisado, então, no topo do seu documento, você precisa da linha <!DOCTYPE html>.

Alguns sites “usam” HTML5, quando na verdade tudo que eles fizeram foi pegar seu código existente e mudar o DOCTYPE. Isso é ok e elegante se você está usando um código válido e semântico, uma vez que o HTML5 é bastante similar ao HTML4.01 válido. Eric Meyer menciona algumas pequenas diferenças, como “não permitir um atributo de valor em um upload de imagem”, e existem pequenas diferenças entre linguagens, resumidas no documento HTML 5 differences from HTML 4.

No entanto, não quero simplesmente usar meu código existente, mas sim alguns dos novos elementos estruturais agora.

Usando alguns dos novos elementos estruturais

O blog do autor – como muitos outros – tem uma header denotada por <div id="header">, um footer <div id="footer">, alguns artigos (armazenados em uma área chamada “content”, <div id="content">) e alguma navegação (armazenada em uma área chamada “sidebar” <div id="sidebar">). A maioria dos sites na web tem construções similares, apesar de que dependendo da sua escolha eles podem ser chamados de "branding" ou "info" ou "menu", ou você pode utilizar as palavras equivalentes em sua própria linguagem.

Apesar de todos terem funções bastante diferentes dentro da página, eles usam o mesmo div genérico na marcação, já que o HTML4 não tem outra maneira de os codificar. O HTML5 tem novos elementos para distinguir essas áreas lógicas: header, nav, footer e friends. (Há mais sobre isso no artigo de Lachlan Hunt: A Preview of HTML 5.)

O principal objetivo é substituir essa estrutura:

Por esta:

É bem simples trocar os divs HTML para os novos elementos. A única dificuldade que o autor teve foi decidir qual elemento usar para marcar o seu sidebar, uma vez que ele também inclui um campo de pesquisa e informações “colophon”, bem como a navegação no site inteiro. Eu decidi contra o elemento aside, pois como o spec diz, ele “representa uma seção da página que consiste em um conteúdo que é tangencialmente relacionado àquele em volta do elemento aside, e que pode ser considerado separadamente daquele conteúdo”, mas é conteúdo, em vez de navegação. Então eu decidiu usar o elemento nav, por se encaixar melhor no que ele queria.

Juntando o conteúdo principal em um elemento section (anteriormente o matinha como um div). Section é definido no spec:

O elemento section representa a section de um documento ou aplicação genérica. Neste contexto, section é um agrupamento temático de conteúdos, tipicamente com um heading, e possivelmente com um footer.

Nota: Eu não recomendo mais envolver toda a área de conteúdo em um elemento section, e sugiro que você use um elemento div. Leia mais sobre como usar section apropriadamente (inglês).

Nesse caso, a “section do documento genérico” é aquela do conteúdo principal.

O autor o manteve uma id para que o recurso skip links funcione, apesar de que espero que, no futuro, a tecnologia assistiva ofereça maneiras automáticas para as pessoas irem para o primeiro section ou article. Seu amigo doutor em HTML5, Remy Sharp, observa que se você retiver o div, o Internet Explorer sem JavaScript irá estilizar o div, mas sem nenhum outro conteúdo, o que deixaria o site bem difícil de ler.

Novas formas de atributos

Bem como o principal item estrutural na página, adicionamos novos atributos aos elementos de entrada no formulário de comentários.

Agora preste bem atenção nessa parte, e repare no que o autor fez:

O HTML5 foi designado para refletir o que os desenvolvedores realmente fazem, em vez de refletir uma filosofia pura, e isso é bastante percebido nos novos atributos, o que significa que o browser faz muito do trabalho atualmente feito pelos desenvolvedores, reinventando rotinas de validações no JavaScript. (Estendendo a funcionalidade de formas foi como o spec do HTML 5 começou).

Então eu anexei o campo de entrada de e-mail nos comentários para input type="email", o que significa que quando o usuário submeter um relatório, um browser de notificação do HTML5 usará rotinas de validação internas para checar se é o formato correto, sem JavaScript. Confira na versão atual do Opera, na qual a única implementação é feita no momento da escrita (junho 2009), e note como ele também adiciona um item “mail” no campo de entrada como uma dica para o usuário.

Existem rotinas de validações de entrada semelhantes acionadas a partir do novo input types, como url (a qual eu uso no campo que pede o endereço web do usuário), number e pattern, que compara o input com uma expressão regular arbitrária.

Um outro bom exemplo é o type="date", que gera o pop up de um widget de calendário/date picker (escolha de datas) quando o usuário está no campo de entrada. Você pode testar o date picker, ou aqui está um screenshot do Opera 9.6:

Eu usei um novo atributo bastante útil em ambos meus campos de entrada para o nome da pessoa que está comentando e seu endereço de e-mail, e na área de texto do comentário foi digitado ="required" , o que gera uma mensagem quando os campos são deixados em branco. Cada localização diferente de browser necessitaria de uma mensagem diferente, e não é (por enquanto), customizado pelo desenvolvedor.

**C£rberus** · 23 de Maio 2012

Sinceramente não entendi, é tutorial ou dúvida ?

**gaabscps** · 23 de Maio 2012

Ausência de créditos.

É necessário se cadastrar para acessar o conteúdo.

.

É necessário se cadastrar para acessar o conteúdo.

Até o título do tópico foi copiado... ¬¬'

G.10, por favor, não se esqueça mais de por os devidos créditos.

**shinob12** · 23 de Maio 2012

Adicione os créditos ou o tópico será fechado.

Quem está por aqui 0 membros estão online

Fazendo o design de um blog com HTML5

Posts Recomendados

G.10 0

Link para o comentário

Compartilhar em outros sites

C£rberus 1

Link para o comentário

Compartilhar em outros sites

gaabscps 2

Link para o comentário

Compartilhar em outros sites

shinob12 77

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante