Um Preview do HTML5
Postado por: Pedro Rogério emAbstrato
A web está em constante evolução. Novos e inovadores sites estão sendo criados todos os dias, acabando com as limitações do HTML em todas as direções. O HTML 4 existe acerca de uma década, e os editores que procuram novas técnicas para fornecer funcionalidades avançadas são barrados devido as limitações da linguagem e browsers.
Para dar aos autores uma maior flexibilidade e interoperabilidade, e permitir que mais interativo e emocionante se tornem os sites e aplicações, HTML 5 introduz e reforça uma vasta gama de funcionalidades, incluindo APIs, multimedia, e estrutura semântica.
O trabalho sobre HTML 5, que começou em 2004, está atualmente a ser realizado em um esforço conjunto entre o W3C HTML WG e o WHATWG. Muitos desenvolvedores estão participando em conjunto com o W3C, incluindo representantes dos quatro principais desenvolvedores de browser: Apple, Mozilla, Opera, e a Microsoft, e uma gama de outras organizações e indivíduos com diversos interesses e conhecimentos.
Note que a especificação é ainda um trabalho em andamento e está muito longe de ser concluído. Como tal, é possível que qualquer característica discutidas neste artigo podem mudar no futuro. Este artigo destina-se a fornecer uma breve introdução a algumas das principais características no atual projeto.
Estrutura
HTML 5 introduz um conjunto de novos elementos que o tornam muito mais fácil para estruturar páginas. A maioria das páginas HTML 4 inclui uma variedade de estruturas comuns, tais como cabeçalhos, rodapés e colunas, e hoje, é bastante comum para marcá-los usando divs, dando a cada um uma característica id ou classe.
Ilustra um esquema típico duas colunas marcadas até usando divs com atributos id e classe. Ela contém um cabeçalho, rodapé, e barra de navegação horizontal abaixo do cabeçalho. O conteúdo principal do artigo e contém uma barra lateral à direita.
O uso de elementos div é em grande parte necessário porque as versões atuais do HTML 4 está ausente a semântica para descrever essas partes mais especificamente. HTML 5 resolve este problema através da introdução de novos elementos para representar cada uma das diferentes seções.
Os elementos div podem ser substituídos pelos novos elementos: header, nav, section, article, aside, e footer.
A marcação do documento sugerido é a seguinte:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Existem várias vantagens de utilizar estes elementos. Quando utilizado em conjunto com os cabeçalhos h1 a h6 todos estes oferecem uma maneira de marcar até seções aninhados com níveis de cabeçalhos, além dos seis níveis possíveis com as versões anteriores do HTML. A especificação inclui um detalhado algorítimo para gerar um esquema que tem a estrutura destes elementos e permanece compatível com versões anteriores. Isto pode ser utilizado por ambas as ferramentas para autoração de código e navegadores para gerar tabelas de conteúdo para ajudar os utilizadores a navegar no documento.
Por exemplo, a seguinte estrutura utiliza marcação aninhada com as tags section e h1:
<section>
<h1>Level 1</h1>
</section><section>
<h1>Level 2</h1>
</section><section>
<h1>Level 3</h1>
</section>
Note que para uma melhor compatibilidade com os atuais navegadores também é possível fazer o uso dos cabeçalhos de nível h2 a h6 apropriadamente no lugar dos elementos h1.
Ao identificar a finalidade de seções na página usando elementos específicos, isso pode ajudar o utilizador a navegar mais facilmente na página. Por exemplo, eles podem facilmente navegar entre seções ou navegar rapidamente a partir de um artigo para o próximo, sem a necessidade dos desenvolvedores fornecerem links para ir ao conteúdo. Isto também beneficia os desenvolvedores porque substitui muitas das divs no documento por vários elementos distintos podendo contribuir para tornar o código fonte mais claro e fácil entendimento.
O elemento header representa o cabeçalho de uma seção, podendo conter mais do que o título da página, mas sim sub-cabeçalhos, informações sobre autores e outros tipos de informação.
<header> <h1>Um Preview do HTML5</h1> <p class="byline">Por Lachlan Hunt</p> </header> <header> <h1>Título de exemplo</h1> <h2>Inserir título aqui.</h2> </header>
O elemento footer representa o rodapé para a seção onde ele se aplica. Normalmente um rodapé contém informações sobre a página, como quem a escreveu, links para documentos relacionados, dados do autor ou coisas do gênero:
<footer>© 2007 Example Inc.</footer>
O elemento nav representa uma seção para navegação através de links. É apropriado para qualquer navegação no site ou para uma tabela de conteúdos:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
O elemento aside é o elemento de conteúdo cujo conteúdo é tangecialmente relacionado com o conteúdo ao redor dele, e normalmente é útil para marcação em sidebars:
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">Setembro 2007</a></li>
<li><a href="/2007/08/">Agosto 2007</a></li>
<li><a href="/2007/07/">Julho 2007</a></li>
</ul>
</aside>
O elemento genérico section representa uma seção de um documento ou aplicativo, como um capítulo por exemplo:
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...</p>
</section>
O elemento article representa uma seção independente de um documento, página ou site. É apropriado para conteúdo como notícias, artigos de blogs, fórum ou comentários individuais:
<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</p></header>
<p>That's another great article!</p>
</article>
Áudio e Vídeo
Nos últimos anos, áudio e vídeo na web tornou-se cada vez mais viável e sites como o YouTube, Viddler, Revver, MySpace, e dezenas de outros estão fazendo com que seja fácil para alguém publicar áudio e vídeo na web. Contudo, uma vez que o HTML carece de recursos atualmente, os meios necessários para inserir multimídia em sites, atualmente é o Flash. Embora seja possível inserir multimídia utilizando vários plug-ins (como o QuickTime, Windows Media Player, etc), o Flash é atualmente o único plugin que proporciona criar aplicações cross-browser.
Tal como evidenciado pelos diversos media players baseados em Flash, os autores estão interessados em fornecer suas próprias interfaces personalizadas, que geralmente permitem aos usuários reproduzir, pausar, parar, procurar, e ajustar o volume. O plano é fornecer essa funcionalidade em navegadores, adicionando suporte nativo para a incorporação de áudio e vídeo e fornecendo DOM API para controlar a reprodução.
Os novos elementos áudio e vídeo tornam isso realmente fácil. A maioria das APIs são partilhadas entre os dois elementos, a única diferença é que elas estão ligadas de forma intrínseca entre mídias visuais e não visuais.
Tanto Opera e WebKit possuem um suporte parcial ao elemento vídeo. Você pode baixar a versão beta do Opera ou a mais recente compilação do WebKit para experimentar estes exemplos. Opera inclui suporte para Ogg Theora e o WebKit suporta todos os formatos que são suportados pelo QuickTime, incluindo codecs de terceiros.
A maneira mais simples de inserir um vídeo é utilizar o elemento video e permitir que o browser proporcione um padrão de interface ao utilizador. Os controles são um atributo booleano e indicam se ou não o autor deseja que a interface esteja ligada ou desligada por padrão.
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
O atributo poster é opcional e pode ser utilizado para especificar uma imagem que será exibida no lugar do vídeo antes de o vídeo iniciar a reprodução. Embora existam alguns formatos de vídeo que suportam os seus próprios frames, como o MPEG-4, isto fornece uma solução alternativa que pode funcionar independentemente do formato video.
É tão simples inserir áudio em uma página com o elemento audio. A maioria dos atributos são comuns entre os elementos audio e video, embora por razões óbvias, no elemento audio não é necessário declarar width e height e poster.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
HTML 5 prevê um elemento source alternativo para especificar arquivos de áudio e vídeo que o navegador pode escolher com base em seu tipo de mídia ou suporte de codecs. O atributo media pode ser utilizado para especificar uma mídia para seleção com base no dispositivo e limitações do atributo para especificar o tipo de mídia e codecs. Note que quando se utiliza o elemento source, o atributo src deve ser omitido dos seus elementos pai audio ou video ou as alternativas dadas pelo elemento source serão ignorados.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
</source><source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
</source><source src="video.mp4" type="video/mp4">
</source></video>
<audio>
<source src="music.oga" type="audio/ogg">
</source><source src="music.mp3" type="audio/mpeg">
</source></audio>
Para os autores que querem um pouco mais de controle sobre a interface do usuário, para que possam torná-lo apto a concepção global da página web, a extensa API fornece vários métodos e eventos para permitir que scripts controlem a reprodução dos meios de comunicação. Os métodos mais simples de usar são os play(), pause() e definindo currentTime para voltar ao início. O exemplo a seguir ilustra seu uso.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"> < <Rewind </button>
Há muitos outros atributos e APIs disponíveis para os elementos de áudio e vídeo que não foram discutidos aqui. Para obter mais informações, você deve consultar a especificação atual do projeto.
Representação do documento
Ao contrário das versões anteriores do HTML e XHTML, que são definidas em termos da sua sintaxe, HTML 5 é definido em termos do Document Object Model (DOM) – a árvore utilizada internamente pelos browsers representa o documento. Por exemplo, considere um documento muito simples que consiste de um título (title), título (h1) e parágrafo. A árvore do DOM poderia ser algo como do tipo:
A árvore DOM inclui um elemento title no cabeçalho e um elemento h1 e um p no corpo da página.
A vantagem de definir HTML5 em termos do DOM é que a linguagem é definida de forma independente da sintaxe. Existem basicamente duas sintaxes que podem ser usadas para representar documentos HTML: serialização do HTML (conhecido como HTML 5) e a serialização do XML (conhecido como XHTML 5).
A serialização do HTML refere-se a sintaxe que é inspirada pela sintaxe SGML das versões anteriores do HTML, mas definida para ser mais compatível com os browsers atuais e as melhores práticas do HTML.
< !DOCTYPE html>
<html>
<head>
<title>Um documento HTML</title>
</head>
<body>
<h1>Exemplo</h1>
<p>Exemplo de documento HTML.</p>
</body>
</html>
Note que como as versões anteriores do HTML, algumas tags são opcionais e são automaticamente implícitas.
O XML serialisation refere-se à sintaxe usando XML 1.0 e namespaces, tal como XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Um documento HTML</title>
</head>
<body>
<h1>Exemplo</h1>
<p>Este é um exemplo de documento HTML.</p>
</body>
</html>
Excluindo as diferenças em branco e a presença do atributo xmlns, estes dois exemplos são equivalentes.
Os navegadores usam o mime/type para distinguir entre os dois. Qualquer documento servido como text/html deve estar em conformidade com os requisitos para o HTML serialisation e qualquer documento XML servido com um tipo MIME, como application/xhtml+xml deve estar em conformidade com os requisitos de serialização do XML.
Os desenvolvedores devem fazer uma escolha consciente de que forma de serialização utilizar, que pode ser dependente de um certo número de fatores diferentes. Os autores não devem ser incondicionalmente forçados a usar um ou o outro, e cada um está otimizado para diferentes situações.
Benefícios no uso do HTML
- Compatível com todos os browsers.
- Desenvolvedores já estão familiarizados com a sintaxe.
- Erros de sintaxe são perdoáveis e não haverá uma “tela amarela da morte” caso algum erro ocorra.
- Permite codificação curta, por exemplo, podem ser omitidas tags e serem atribuidos valores.
Benefícios no uso do XHTML
- Sintaxe rigorosa do XML encoraja os autores a a escrever marcações bem formadas, o que alguns desenvolvedores podem achar difícil de manter.
- Integra diretamente outros vocabulários XML, tais como SVG e MathML.
- Permite a utilização de processamento XML, que alguns desenvolvedores utilizam como parte de sua edição e/ou edição de processos.
Como contribuir
Os trabalhos sobre o HTML 5 estão evoluindo rapidamente, no entanto, ainda é esperado que continue por vários anos. Devido a necessidade de produzir testes e alcançar casos interoperáveis de implementação, as estimativas atuais têm trabalho para cerca de dez a quinze anos. Durante este processo, o feedback de uma vasta gama de pessoas, incluindo, entre outros, web designers e desenvolvedores, CMS e ferramentas de autoria de código, fornecedores e navegadores é vital para garantir o seu sucesso. Todo mundo não só é bem-vindo, mas incentivados a contribuir ativamente com o feedback sobre o HTML 5.
Para além das especificações, existem vários outros esforços destinados a ajudar as pessoas a compreender melhor o trabalho.
- As diferenças de HTML 4 descreve as mudanças que ocorreram desde a versão anterior do HTML.
- O HTML Design Principles discuti os princípios utilizados para ajudar a tomar decisões, e irá ajudá-lo a compreender a lógica por trás de muitas das decisões do design atual.
- The Web Developer’s Guide to HTML 5, que só começou recentemente, está sendo escrito para ajudar web designers e desenvolvedores a compreender tudo o que necessita saber para escrever documentos HTML 5, bem como fornecer orientações e descreve as melhores práticas.
Existem inúmeros locais através do qual você poderá contribuir. Você pode participar do W3C’s HTMLWG e se inscrever/contribuir nas listas de e-mail do HTMLWG ou wiki. Você também pode se inscrever e contribuir para alguma das listas de discussão do WHATWG, participar do fórum do WHATWG, postar comentários ou escrever artigos para o blog do WHATWG.
Este artigo é uma mera tradução do original escrito no: A List Apart – A Preview of HTML 5.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Quando vi o estilo de desenho já saquei que era um artigo do alistapart, adoro os artigos deles, Ótima tradução Pedro.
Obrigado.
Abraços.
vai demorar um tempo ate o HTML5 esta totalmente implantado, mais vale muito a pena esperar…
muito boa a matéria, bem completa apesar de não se ter muitas notícias a respeito , só arruma uma parte do texto que saiu com um grave erro de português “Por exemplo, eles podem facilmente vavegar entre seções ou navegar rapidamente a partir de um artigo para o próximo, sem a necessidade dos desenvolvedores fornecerem links para ir ao conteúdo.” vavegar o certo é navegar
@Samira,
Obrigado pelo toque, nem havia reparado isso. Abraços.
Muito bom o artigo!!!
Excelente tradução!!! PArabéns!!!
Pedro, com sempre, ótimo artigo, parabéns
[...] Um Preview do HTML5 » Pinceladas da Web – XHTML, CSS, JavaScript e WebStandards http://www.pinceladasdaweb.com.br/blog/2009/07/14/um-preview-do-html5 – view page – cached Abstrato A web está em constante evolução. Novos e inovadores sites estão sendo criados todos os dias, acabando com as limitações do HTML em todas as direções. O HTML 4 existe acerca de uma década, e os editores que … — From the page [...]