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 meu blog – 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 eu tive foi decidir qual elemento usar
para marcar o meu 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 decidi usar o elemento nav, por se encaixar melhor no que eu
queria.
Eu juntei
o conteúdo principal em um elemento section
(anteriormente eu 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.
Eu mantive
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. Meu 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, eu adicionei novos atributos aos elementos
de entrada no formulário de comentários.
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.
?
Texto original disponível em http://html5doctor.com/designing-a-blog-with-html5/
De 0 a 10, o quanto você recomendaria este artigo para um amigo?