Web Design #2: O que muda com o HTML 5?

by Jomar on Feb.23, 2010, under HTML, Semana do Web Design, Web

Depois de dez anos sem atualizações, a forma como se escreve páginas na Internet esta mudando. O novo HTML 5 oferece uma experiência web totalmente diferente para usuários e muita coisa vai mudar.

Mas, o que é que muda com o HTML 5? Confira neste post

1. O que é?

O HTML 5 é o sucessor do HTML 4.0.1, a versão final mais recente da linguagem que foi aprovado em 1999. O código introduz novos elementos semânticos na construção de páginas da web, organizando assim a “farra” de divs que temos hoje.

Segundo IDGNow, “O HTML 5 ainda está em testes – sua versão mais recente foi apresentada em janeiro deste ano pelo World Wide Web Consortium (W3C), grupo responsável por desenvolver tecnologias que sejam compatíveis para promover a evolução da web. A versão final do HTML 5 está prevista para 2012, mas a comunidade de desenvolvimento trabalha com o W3C para adiantar o cronograma”.

2. O que muda para o programador?

Nos primórdios da internet os sites eram basicamente “diagramados” em tabelas, o que os deixava muito pesados. Durante os anos, o CSS tomou conta da customização dos sites, deixando para o HTML apenas a função do conteúdo. Entretanto, não há um padrão sobre como organizar esse conteúdo e cada programador faz do jeito que for mais conveniente, espalhando diversas div´s pela página.

O HTML 5 chega para acabar com essa “zona”, introduzindo tag´s com funções específicas, como <header>, <footer>, <article>, <section>, <aside>, <hgroup> (agrupamento de <h1>, <h2>, etc.) e <figure> (agrupamento de imagens e legendas), além das novas funções que acabam com a necessidade de plugins, como a tag <video> e outras que falaremos mais abaixo.

2.1. Repaginada no Esqueleto

Atualmente as páginas são escritas utilizando HTML 4 + CSS e seu código, de maneira geral, é algo parecido com isto:

<body>
<div id=”header”>…</div>
<div id=”menu”>…</div>
<div>…</div>
<div id=”sidebar”>…</div>
<div id=”rodape”>…</div>
</div>
</body>

jbtutos

Na atualização da linguagem, seria organizado desta maneira, substituindo esse monte de divs, por elementos que cumprem as mesmas funções:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
…
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

jbtutos

<Section> pode conter um <header> e também um <footer> se preciso.

O blog Tableless levantou uma questão interessante e que vale a pena ser citada:

“Uma dúvida comum entre os desenvolvedores é como fazer a estruturação e distribuição das tags de títulos (h1 até h6). Por exemplo, se eu utilizei já a tag H1 no logo do site, poderei utilizar para o título do artigo? Se repetirmos muitas vezes as mesmas tags de títulos, a importância que cada título tem sobre o outro se perderá. O Google poderá indexar de forma diferente e etc.

No HTML 5 esse problema ser resolverá, porque cada section que você inicia, você poderá começar novamente uma nova ordem de títulos.”

2.2. Hasta la vista plugins

Além da estrutura, o HTML5 promete preencher uma lacuna na linguagem, que é a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun.

//Tag Canvas: Facilita a fazer pequenas edições e criar imagens a partir de JavaScript. Segundo o Baixaki, a tag canvas é especializadas em renderizar imagens em bitmap, é será específica para a edição breve de imagens através de APIs ou JavaScript. Esse tipo de edição acontece pura e exclusivamente de maneira muito similar a outros geradores de imagem em duas dimensões (2D). Além disso, as Canvas Tags são compatíveis com as folhas CSS. Já estão disponíveis na web, exemplos de canvas em gradiente e até da utilização da tag com vídeos. Sim, por mais fumado esse gatinho do vídeo possa parecer, isso abre uma enorme de uma janela para a criatividade dos desenvolvedores!

//Tag de Vídeo: Colocar um vídeo em uma página será tão simples quanto colocar uma imagem. Para incorporar vídeos em uma página, agora você não precisa mais utilizar o “embed”, é só digitar como se estivesse colocando uma imagem:

<img src=HTTP://enderecodaimagem.com/imagem.jpg>

Será possível ainda indicar a altura (“height”) e a largura (“width”) do vídeo, diretamente no código. Você pode ver um exemplo da tag clicando aqui.

O YouTube já esta testando essa tecnologia e, dependendo do seu navegador, você já pode testá-lo

//Geolocalização: A princípio isso pode ser motivo de pânico e, para os mais aficionados, levantar uma questão sobre o vigilantismo da internet, mas não tem nada a ver [pelo menos a princípio hehe]. Com a nova função de geolocalização ele saberá onde você esta, permitindo assim fornecer informações mais próximas da sua realidade. Acredito que este recurso será mais útil com a internet móvel, porque na demonstração disponível eles erraram, e feio, onde eu estava.

//Caching de aplicações: “Agora, com o HTML 5 os aplicativos web poderão ser acessados offline via cache. De acordo com a publicação provisória da W3C, o arquivamento desses aplicativos será feito via URL em que cada uma delas possui uma categoria diferente. As entradas mestre são aqueles documentos que foram adicionados ao cache por um contexto de navegação indicado por um atributo de manifesto. Já o manifesto é a fonte da URL indicada na Entrada mestre do HTML. Esses arquivamentos ainda podem ser agrupados ou não”, explica Luísa Barwinski. O HTML 5 monitora automaticamente o status da sua conexão, sabendo se você está on ou offline, como você pode ver neste exemplo.

//Arraste e solte: Muito mais do que clicar, você poderá arrastar os textos e qualquer outra coisa na página ;D Não acredita? Clica aqui então ou aqui.

Tá, você pode até falar: “Nossa, isso ia ficar muito ridículo em um site”, mas estas são apenas demostrações do que esses novos elementos podem fazer. A criatividade de como usá-los é com vocês!

3. O que muda para o usuário?

Ganha em velocidade, ganha em criatividade (já vimos que as tags abrem uma janela enorme para a criatividade), ganha em facilidade. Será muito mais fácil colocar vídeos no seu blog e você receberá informações, por exemplo, de qual a melhor pizzaria na região em que você está!

Uma das tendências é a convergência. Com o HTML 5 estaremos cada vez mais perto disto!

4. O que muda nos navegadores?

Com a evolução da linguagem, na opinião dos especialistas ouvidos pelo IDGNow, os navegadores passam da categoria de meros mostradores de páginas para completos ambientes de desenvolvimento. Podendo levantar uma dúvida sobre a real necessidade de sistemas operacionais em futuros gadgets!

Mas, restringindo-se a um futuro mais próximo, os browsers já estão se atualizando e, por incrível que pareça, até o Internet Explorer já está fazendo as devidas modificações! Muitos navegadores importantes, como o Opera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas. Cabe abrir um parêntese aqui para dizer que o You Tube com HTML 5 ainda não funciona no Firefox 3.5 =/

5. O que muda para os grandes desenvolvedores?

Nada, pelo menos por enquanto. Isto é o que indicam as declarações que eles deram para a IDGNow e que estão transcritas abaixo:

“O HTML 5 ainda é um padrão em fase de progresso. Ainda é muito cedo para fazer qualquer comparação”, afirma um porta-voz da Microsoft. “O Silverlight ainda será necessário já que oferece mais funções avançadas – como modelos de programação mais ricos e rápidos (C#), 3D, e funções de acesso fora do browser.”
Para o vice-presidente de ferramentas de desenvolvimento da Adobe, Dave Story, o “HTML 5 enfrenta muitos desafios” tendo em vista que o mercado de browsers ainda é fragmentado e as incompatibilidades entre os navegadores ainda prevalecem. “O cronograma do HTML 5 mostra que ainda levará pelo menos uma década para que os esforços em torno do HTML 5 e do CSS 3 sejam finalizados e implantados nos browsers. Neste período, a plataforma Flash continua oferecendo uma plataforma consistente que oferece experiências mais ricas aos usuários” defende Story.
James Gosling, vice-presidente da Sun e considerado o pai da linguagem Java, diz que o JavaFX “tem renderização (processo de carregamento da página), performance e comportamentos muito mais avançados do que o HTML 5.”

A Microsoft investiu pesado no Silverlight, mas acabou de incrementar o seu navegador para o HTML 5. Será que todo investimento foi em vão?? Agora é esperar para ver como os grandes desenvolvedores se sairão com essa novidade!

6. O que já mudou?

Falamos e falamos das atualizações com um ar de que isto só vai acontecer realmente em 2012 [quando o mundo poderá estar acabando hehe], mas a mudança já esta acontecendo!

O HTML 5 Gallery possui uma lista com sites que já estão atualizados para a nova linguagem. Entre eles estão o blog de tutoriais The Design Superhero, o site da TV Brasil, o portal português Sapo.pt, entre muitos outros.

O site Yes, You Can Use HTML 5 Today! ensina você a criar o criar o seu site seguindo o novo código da linguagem HTML!

Agora é esperar para ver

Referências:

http://www.baixaki.com.br/info/2254-o-que-e-html-5-.htm

http://www.tableless.com.br/html5-estrutura-semantica

http://pt.wikipedia.org/wiki/HTML_5

http://idgnow.uol.com.br/internet/2009/06/16/html-5-ameaca-linguagens-como-flash-e-silverlight-dizem-especialistas/

http://idgnow.uol.com.br/internet/2009/06/16/html-5-conheca-a-linguagem-que-vai-revolucionar-sua-navegacao-na-web/

http://html5gallery.com/

http://html5demos.com/

http://www.w3c.br/palestras/2009/W3C_Latinoware.pdf

http://dev.w3.org/html5/spec/Overview.html

Gostou? Compartilho e divirta-se :)

:Adobe, google, HTML 5, novidades, Online, Otimização, Plugin, Search, web 3.0, Web Design, youtube

4 Comments for this entry

Alan Correa
February 24th, 2010 on 00:39
primeiro o texto está muito bom jow, parabéns.

agora o html5 é uma tristeza, você viu quanto tempo levamos para largar o IE6 (tá, nem largamos ele direito ainda) tendo em vista que o IE7 é o mais usado e não chega nem perto de atender aos padrões do HTML5 creio que ficaremos apenas no estudo, assim como o CSS3 por muito tempo ainda
Jomar
February 24th, 2010 on 11:52
realmente o que vai atrapalhar é o browser que o pessoal usa =/

os sites vão ter que fazer uma ofensiva igual estão fazendo ao IE6, simplesmente não funcionar nele.
Danilo Ramos
March 10th, 2010 on 00:57
CSS3 + HTML5 = web designer feliz

^___^ Bela postagem sobre HTML5.
Rafael M.
March 17th, 2010 on 15:10
Mal posso esperar pra ver como será quando a web toda estiver funcionando com HTML 5!