No início de 2008 o W3C – consórcio de empresas de tecnologia que coordena os padrões da internet quanto a linguagem – anunciou a primeira especificação do HTML5^[9]. O HTML, que é responsável por organizar e formatar as páginas que visitamos na internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, desde 2008 esta ainda é apenas uma versão de testes do HTML5, enquanto a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem:

• Novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais
• Controle embutido de conteúdo multimídia
• Aprimoramento do uso off-line
• Melhoria na depuração de erros

Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash, da Adobe, ao Silverlight, da Microsoft, e ao recente JavaFX, da Sun(Oracle). Recentemente, Shantanu Narayen, diretor executivo da Adobe, disse que o Flash não iria perder mercado, porém a versão 5 do HTML já está sendo chamada de "Flash-killer" (Assassino do Flash)^[10]. Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão populares quanto hoje. Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que "usemos mais o browser do que nunca".

Após dez anos sem atualizações, a forma como se escreve páginas na internet passa por uma boa transformação. O HTML5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, muitos navegadores importantes, como Internet Explorer 9, Opera, Safari 4, Firefox 3.6 e Chrome já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas. Com a evolução da linguagem, os navegadores passam da categoria "mostradores" de páginas para um renderizador de "web software".

Assim como surgiram as app stores para aplicações nativas, existem appstores especificas para apliçações HTML5, os desenvolvedores podem utilizar a audiência das appstores para distribuir seu aplicativo e também fazer cobrança (as appstores oferecem integrações para permitir a cobrança). HTML5 appstores disponíveis: Zeewe - appstore focado para smartphones (iPhone, Android, iPad, tablets), ChromeWeb Store.

A Semântica sempre um dos pontos mais importantes do desenvolvimento com Padrões Web. Algumas iniciativas com o Microformats vieram na tentativa de trazer mais semântica ainda para nossos códigos, com o intuito de novas aplicações e oportunidades pudessem utilizar melhor a informação distribuída na web. Acontece que o resto do HTML não foi a bastante tempo modificado. Por exemplo, como você consegue distinguir de forma automática as informações do “header” (cabeçalho) dos sites? Não consegue. Você não consegue por exemplo, de maneira automatizada, identificar o que é um rodapé ou a parte do layout que está exibindo um artigo, por exemplo.

Todos os dias sites e mais sites são publicados na internet e nenhum deles com um padrão de nomenclatura de classes e ids que possamos utilizar para extrair informação de maneira inteligente. O HTML 4.01 é a versão atual da linguagem básica da Web, e não é atualizado a alguns anos. Esses detalhes de semântica não podem ser supridos para sempre por tecnologias como o Microformats. A versão 5 do HTML tende a suprimir essas necessidades e também atualizar pontos antigos do HTML 4, por exemplo, formulários.

Elemento Canvas

A tela elemento faz parte do HTML5 e permite, dinâmica programável de processamento de formas 2D e bitmap imagens. É um nível baixo, o modelo processual que atualiza um bitmap e não tem um built-in gráfico de cena.

Uso

Tela composta de uma região drawable definido no código HTML com altura, largura e atributos. JavaScript código pode acessar a área através de um conjunto completo de funções de desenho similar aos de outros comuns APIs 2D, permitindo gráficos gerados dinamicamente. Algumas aplicações previstas incluem gráficos de tela de construção, animações, jogos e composição da imagem.

Exemplo

O código a seguir cria um elemento de lona em uma página HTML:

id = "exemplo" width = "200" altura = "200" >

Este texto é exibido se o navegador não oferece suporte a HTML5 Canvas.

< / canvas>

Usando o JavaScript, você pode desenhar na tela:

var exemplo = documento. getElementById ( 'exemplo' ) ;

var quadro = exemplo. getContext ( '2 d ' ) ;

contexto. FillStyle = "rgb (255,0,0)" ;

. contexto fillRect ( 30 , 30 , 50 , 50 ) ;

Este código desenha um retângulo vermelho na tela.

Canvas versus Scalable Vector Graphics (SVG)

SVG é um padrão mais adiantado para desenhar formas em browsers. No entanto, SVG é um nível superior, fundamentalmente, porque cada forma desenhada é lembrado como um objeto em um gráfico de cena ou Document Object Model , que é posteriormente processado para um bitmap. Isto significa que se os atributos de um objeto SVG são alteradas, o navegador automaticamente re-renderizar a cena.

No exemplo acima, uma vez que o retângulo é desenhado, o facto de ter sido desenhada é esquecido pelo sistema. Se a sua posição fosse mudado, toda a cena teria de ser redesenhado, incluindo quaisquer objetos que possam ter sido coberta pelo retângulo. Mas, no caso equivalente SVG, pode simplesmente mudar a posição atributos do rectângulo e do navegador seria determinar como redesenhar-lo. Existem outras bibliotecas JavaScript que adicionam recursos gráfico de cena para o elemento Canvas. Também é possível pintar uma tela em camadas e, em seguida, recriar camadas específicas.

Imagens SVG são representados em XML , e cenas complexas podem ser criadas e mantidas com ferramentas de edição XML.

O gráfico de cena SVG permite que manipuladores de eventos a ser associados com os objetos, portanto, um retângulo pode responder a um onClick evento. Para obter a mesma funcionalidade com lona, ​​deve-se manualmente jogo as coordenadas do clique do rato com as coordenadas do retângulo desenhado para determinar se ele foi clicado.

Conceitualmente, a lona é um protocolo de nível inferior sobre a qual SVG pode ser construída. [ carece de fontes? ] No entanto, este não é (normalmente) a jurisprudência, que são padrões independentes. A situação é complicada porque existem bibliotecas gráfico de cena para a tela, SVG e tem algumas funcionalidades de manipulação de bitmap.

Reações

No momento da sua introdução no elemento canvas foi recebido com reações diversas pela comunidade web standards. Houve argumentos contra a decisão da Apple de criar um novo elemento de propriedade, em vez de apoiar o SVG padrão. Existem outras preocupações sobre a sintaxe, por exemplo, a ausência de um espaço.

A propriedade intelectual sobre tela

Em 14 de março de 2007, desenvolvedor WebKit Dave Hyatt enviado um e-mail's Senior Patente da Apple Counsel, Helene Plotka Workman, que afirmava que a Apple reservou todos de propriedade intelectual direitos relativos a aplicações Web de WHATWG 1,0 rascunho de trabalho, datado de 24 março de 2005, Seção 10.1, intitulado "Gráficos: A tela de bitmap", mas deixou a porta aberta para licenciamento de patentes devem ser transferidos a especificação de um conjunto de padrões com uma política de patentes formal.

Isso causou muita discussão entre os desenvolvedores web, e as questões levantadas sobre WHATWG é a falta de uma política de patentes em comparação com a World Wide Web Consortium (W3C) é explícito favorecimento de licenças livres de royalties. Apple posteriormente divulgadas as patentes sob W3C livres de licenciamento de patentes termos-o. A revelação significa que a Apple é obrigada a fornecer sem licenciamento royalties da patente, sempre que o elemento Canvas se torna parte de uma recomendação da W3C futuro criado pelo HTML de trabalho grupo.

Suporte

O elemento é suportado pelas versões atuais do Mozilla Firefox, Google Chrome, Internet Explorer, Safari e Opera. Versões anteriores do Internet Explorer não suportam a tela, porém o Google e Mozilla plugins estão disponíveis.

A linguagem que vai revolucionar sua navegação na web

Há 10 anos sem atualização, HTML evolui e abre caminho para browsers auto-suficientes com avanços em multimídia e aplicações offline.


Quebrar as barreiras de compatibilidade na exibição de vídeos via internet, aprimorar o uso offline de aplicações web e exibir gráficos interativos com facilidade no browser estão entre os avanços permitidos pela evolução de uma linguagem que ficou uma década sem atualização, o HTML 5.

A quinta versão da linguagem de desenvolvimento HyperText Markup Language (HTML), responsável por organizar e formatar as primeiras páginas que visitamos na internet, é a grande aposta de empresas como Google, Mozilla, Apple e Opera para levar as aplicações à web. A versão final mais recente da linguagem é o HTML 4.0.1, aprovado em 1999.

"Por isso o frisson em relação ao HTML 5. A linguagem ficou muito tempo sem evoluir e as pessoas adotaram maneiras alternativas de resolver os problemas de programação na web", afirma o professor do departamento de Ciência da Computação do Instituto de Matemática e Estatística (IME) da Universidade de São Paulo (USP), Marco Aurélio Gerosa.

A evolução do HTML influi na forma como os navegadores fazem a leitura dos códigos de programação e montam as páginas web para o int rnauta.

Apesar de o HTML não ter mudado desde 1999, já passamos por uma boa e recente transformação na forma como escrevemos páginas Web, conta Rodrigo Leme, coordenador de projetos web da agência Espiral Interativa. “Há aproximadamente quatro anos, praticamente todos os sites eram ‘diagramados’ com a utilização do recurso de tabelas do HTML. Com a demanda por páginas mais leves, mais rápidas e com mais recursos, passamos a usar apenas a linguagem Cascading Style Sheet (CSS) para cuidar da parte visual de um site, deixando assim o HTML apenas com o conteúdo estruturado”, explica.

HTML 5 ameaça padrões web como Flash e Silverlight, dizem especialistas

volução da linguagem padrão para web pode eliminar necessidade de plug-ins para aplicações multimídia em navegadores.

O HTML 5, evolução da linguagem padrão da web, pode mudar o jogo do desenvolvimento de aplicações multimídia e tornar obsoletos padrões estabelecidos no mercado como as tecnologias Flash, da Adobe, Silverlight, da Microsoft, e JavaFX, da Sun.

A nova versão da linguagem proposta pelo consórcio World Wide Web (W3C), responsável por desenvolver tecnologias compatíveis para a evolução da web, se volta ao desenvolvimento de aplicações online que não foram bem resolvida nas encarnações anteriores do HTML, reconhece o W3C. Agora, o HTML 5 volta para preencher as lacunas que ficaram a cargo de linguagens como Flash, Silverlight e JavaFX.

"O HTML 5 é a segunda onda da web” afirma Dion Almaer, co-diretor de ferramentas de desenvolvimento da Mozilla, criadora do browser Firefox. A nova especificação, segundo ele, inclui funções para atender a oferta de vídeos e gráficos na web, além de um conjunto de interfaces de programação de aplicações (APIs na sigla em inglês).

Na avaliação de Ben Galbraith, co-diretor de ferramentas da Mozilla e co-fundador do site Ajaxian ao lado de Almaer, tecnologias viabilizadas pelo HTML 5 como o Canvas - para desenhos 2D -, o armazenamento de conteúdos no desktop permitirão que “usemos mais o browser do que nunca”.

As aplicações web ficarão mais divertidas, opina o gerente de projetos do browser Chrome, do Google, Ian Fette. “Elas serão mais rápidas e vão oferecer uma experiência melhor ao usuário, fazendo com que não exista uma diferença entre aplicações online e offline.”

Após cinco anos de trabalho, uma versão de testes do HTML 5 foi finalizada no início deste ano, mas a versão final está prometida para 2012.

A especificação já é compatível com browsers como Chrome, Safari, da Apple, e Internet Explorer 8, da Microsoft, e em versões que estão por vir, como o Firefox 3.5, da Mozilla, e Opera 10, da Opera.

Fim dos add-ons
Enquanto Adobe, Microsoft, e Sun disputam a oferta de suas tecnologias para o desenvolvimento de aplicações multimídia na web, o HTML 5 tem potencial para arrasar os concorrentes por oferecer experiências de web baseadas em um padrão da indústria.

Uma das vantagens do HTML 5 é deixar de lado tecnologias proprietárias na web como Flash, Silverlight e JavaFX, afirma Ian Hickson, co-editor da especificação HTML 5 e funcionário do Google – o co-editor do HTML 5 trabalha na Apple.

"É sempre um problema quando você fica preso a um único fornecedor de software – especialmente se eles decidem abandonar o produto que você está usando, ou cobrar por ele. Com uma plataforma aberta não há tal risco" afirma Hickson.

HTML 5 é vantagem no Internet Exprorer 9

O HTML 5 é um dos temas mais comentados atualmente. Provavelmente essa nova linguagem de programação estará presente em toda a internet em um futuro próximo. Em simples palavras, o HTML fará com que os sites se comportem de maneira similar aos próprios aplicativos desenvolvidos para web (como jogos e aplicativos de redes sociais, por exemplo).

Os demais navegadores do mercado também já vinham incorporando os novos padrões de programação em seu desenvolvimento, mas agora com o Internet Explorer 9 a Microsoft passou a liderar essa discussão ao lado do instituto W3C, que testa e valida oficialmente todas essas novidades.

Enquanto que milhares de padrões e recursos novos vem sendo usados pelos navegadores do mercado, o Internet Explorer 9 incorporou apenas aqueles homologados pelo instituto, para evitar retrabalho da comunidade técnica ao incorporar e abandonar recursos abrindo brechas de segurança aos usuários. Por essas e outras foi eleito o browser mais seguro do mercado segundo o instituto de pesquisa NSS Labs.

Benefícios do HTML 5

Vídeo H.264: Através do HTML 5 os sites podem reproduzir vídeos sem que o usuário tenha que instalar nenhum plugin. É provável que o HTML 5 acabe com o Flash no futuro, oferecendo sites mais interativos e menos pesados.

Áudio: O HTML 5 permite que sites incorporem áudio sem a necessidade de plugin, da mesma maneira que acontece com os vídeos. O Internet Explorer 9 agora suporta os formatos MP3 e AAC, ampliando as possibilidades dos sites desenvolvidos em HTML5.

SVG: Este recurso permite que os usuários ampliem, ou reduzam as imagens, sem que elas percam a qualidade. No Internet Explorer 9 elas são exibidas como vetores e não como imagens, garantindo imagens mais vivas e bem definidas.

CSS3: O CSS é a maneira pela qual a Internet é formatada. O IE9 tem o suporte ao CSS 3 mais padronizado que inclui seletores, cores, valores, planos de fundo, fontes e bordas. Resumindo, é uma ótima escolha para os desenvolvedores e oferece uma plataforma completa de soluções e suporte.

Não é apenas um exibidor de paginas

Com a chegada do HTML 5, o gerente de projetos ainda destaca a oferta de interfaces de programação de aplicações (APIs, na sigla em inglês) para o desenvolvimento de aplicações no browser como acesso offline, recursos gráficos 2D – por meio da tecnologia Canvas - e para áudio e vídeo. “Elas vêm para quebrar o paradigma de que o browser é simplesmente um ‘exibidor de páginas’”, afirma.

"O HTML 5 oferece uma experiência de web mais rica para usuários e ferramentas adicionais a desenvolvedores, que podem criar aplicações mais complexas com base em um conjunto de padrões abertos", explica Alejandro Villanueva, responsável pelo relacionamento com comunidades de desenvolvedores do Google na América Latina, em entrevista ao IDG Now!. 

Tags Existentes e tags que foram removidas do HTML 5

Tags linguagem HTML

Tag	Description
<!--...-->	Define um comentário
<!DOCTYPE>	Define o tipo de documento
<a>	Define um hiperlink
<abbr>	Define uma abreviação
<acronym>	Não suportado em HTML5.
<address>	Define um elemento de endereço
<applet>	Não suportado em HTML5.
<area>	Define uma área dentro de um mapa de imagem
<article>New	Define um artigo
<aside>New	Define o conteúdo, além do conteúdo da página
<audio>New	Define o conteúdo de som
<b>	Define o texto em negrito
<base>	Define uma URL base para todos os links em uma página
<basefont>	Não suportado em HTML5.
<bdo>	Define a direção da exibição do texto
<big>	Não suportado em HTML5.
<blockquote>	Define uma citação longa
<body>	Define um elemento do corpo
<br>	Insere uma quebra de linha única
<button>	Define um botão
<canvas>New	Define gráficos
<caption>	Define uma legenda da tabela
<center>	Não suportado em HTML5.
<cite>	Define uma citação
<code>	Define o texto do código de computador
<col>	Define atributos para as colunas da tabela
<colgroup>	Define os grupos de colunas da tabela
<command>New	Define um botão de comando
<datalist>New	Define uma lista suspensa
<dd>	Define a descrição de uma definição
<del>	Define o texto excluído
<details>New	Define detalhes de um elemento
<dfn>	Define um termo Definição
<dir>	Não suportado em HTML5.
<div>	Define uma seção em um documento
<dl>	Define uma lista de definição
<dt>	Define um termo Definição
<em>	Define o texto enfatizado
<embed>New	Define o conteúdo interativo ou plugin externo
<fieldset>	Define um conjunto de campos
<figcaption>New	Define a legenda de um elemento de valor
<figure>New	Define um grupo de conteúdo de mídia, e sua legenda
<font>	Não suportado em HTML5.
<footer>New	Define um rodapé de uma seção ou página
<form>	Define um formulário
<frame>	Não suportado em HTML5.
<frameset>	Não suportado em HTML5.
<h1> to <h6>	Define o cabeçalho de um cabeçalho de 6
<head>	Define informações sobre o documento
<header>New	Define um cabeçalho de uma seção ou página
<hgroup>New	Define informações sobre uma seção em um documento
<hr>	Define uma linha horizontal
<html>	Define um documento HTML
<i>	Define o texto em itálico
<iframe>	Define uma janela de sub inline (frame)
<img>	Define uma imagem
<input>	Define um campo de entrada
<ins>	Define o texto inserido
<keygen>New	Define uma chave gerada de forma
<kbd>	Define o texto do teclado
<label>	Define um rótulo para um controle de formulário
<legend>	Define um título em um fieldset
<li>	Define um item de lista
<link>	Define a referência a um recurso
<map>	Define um mapa de imagem
<mark>New	Define o texto marcado
<menu>	Define uma lista de menu
<meta>	Define meta-informação
<meter>New	Define a medição dentro de um intervalo pré-definido
<nav>New	Define links de navegação
<noframes>	Não suportado em HTML5.
<noscript>	Define uma seção noscript
<object>	Define um objeto incorporado
<ol>	Define uma lista ordenada
<optgroup>	Define um grupo de opção
<option>	Define uma opção em uma lista drop-down
<output>New	Define alguns tipos de saída
<p>	Define um parágrafo
<param>	Define um parâmetro para um objeto
<pre>	Define o texto pré-formatado
<progress>New	Define o progresso de uma tarefa de qualquer tipo
<q>	Define uma citação curta
<rp>New	Usado em anotações de rubi para definir o que mostrar navegadores que não suportam o elemento de rubi.
<rt>N	Define a explicação ruby ​​anotações.
<ruby>New	ruby anotações Define
<s>	Define o texto que não é mais correto
<samp>	Define o código de computador de amostra
<script>	Define um script
<section>New	Define uma seção
<select>	Define uma lista selecionável
<small>	Define texto pequeno
<source>New	Define os recursos de mídia
<span>	Define uma seção em um documento
<strike>	Não suportado em HTML5.
<strong>	Define texto forte
<style>	Define uma definição de estilo
<sub>	Define o texto subscrito
<summary>New	Define o cabeçalho de um "detalhe" elemento
<sup>	Define o texto sobrescrito
<table>	Define uma tabela
<tbody>	Define o corpo de uma tabela
<td>	Define uma célula de tabela
<textarea>	Define uma área de texto
<tfoot>	Define o rodapé de uma tabela
<th>	Define o cabeçalho de uma tabela
<thead>	Define o cabeçalho de uma tabela
<time>New	Define uma data / hora
<title>	Define o título do documento
<tr>	Define uma linha de tabela
<tt>	Não suportado em HTML5.
<u>	Não suportado em HTML5.
<ul>	Define uma lista não ordenada
<var>	Define uma variável
<video>New	Define um vídeo
<wbr>New	Define uma possível quebra de linha
<xmp>	Não suportado em HTML5

Tag que foram inclusas e exclusas

Clique para aumentar