19:48:11

As novas características do HTML5

As novas característica da versão 5 estão ligadas diretamente as necessidades de suporte independente aos novos formatos de conteúdos multimídia, as novas funcionalidades de semânticas e acessibilidade.

São elas:

Inclusão do elemento canvas para desenho.

O elemento canvas foi incluído para permitir desenhar gráficos em uma página web, tarefa essa que atualmente só é possível com a utilização de plugins externos.

O canvas é uma área retangular onde o usuário, via JavaScript, vai poder controlar todos os pixels, além de desenhar vários elementos gráficos como círculo, retângulo, elipse, linha, texto, imagens, etc. Para usar um elemento canvas no documento, além da inclusão da tag, temos que manipular o elemento via JavaScript:

Inclusão da tag:

<canvas id="myCanvas" width="400" height="400"></canvas>

Manipulação do elemento com JavaScript:

<script type="text/javascript">
 var myCanvas = document.getElementById("myCanvas");
 var canvas = myCanvas.getContext("2d");
 canvas.fill#FF0000";
 canvas.fillRect(0,0,100,100);
 </script>

Inclusão dos elementos vídeo e áudio para reprodução multimídia

Outro motivo para integrar plugins externos é o uso de áudio e vídeo nas páginas web. Com a inclusão de tags específicas para este fim, a HTML5 dá suporte nativo para a reprodução de áudio e vídeo sem a necessidade de utilizar mecanismos externos. Para usar o elemento áudio ou vídeo, basta incluir a tag específica no documento.

Elemento vídeo:

<video width="100" height="100" controls="controls">
 <source src="video.mp4" type="video/mp4" />
 <source src="video.ogg" type="video/ogg" />
 O seu navegador não suporta o formato.
</video>

Elemento audio:

<audio controls="controls">
    <source src="audio. mp3" type=" audio/mpeg " />
    <source src="audio.ogg" type=" audio/ogg " />
    O seu navegador não suporta o formato.
</audio>

Melhor suporte para armazenamento local

O HTML5 oferece 2 novos objetos para armazenar dados localmente:

sessionStorage: Armazena dados durante uma sessão ativa.

<script type="text/javascript">
sessionStorage. sobreNome ="Botelho";
document.write(sessionStorage. sobreNome);
</script>

localStorage: Armazena dados sem limite de tempo.

<script type="text/javascript">
localStorage.sobreNome="Botelho";
document.write(localStorage. sobreNome);
</script>

Inclusão de novos elementos de conteúdo específico

Muitos elementos da versão 4.0.1 foram excluídos da nova versão, uns por nunca terem sido usados, outros por estarem obsoletos e outros por serem usados indevidamente. A nova versão trás novos elementos para proporcionar aos usuários uma melhor estrutura, desenho e conteúdo multimídia.

A seguir uma relação dos novos elementos com sua descrição:

Tag	Descrição
<article>	Especifica um artigo qualquer
<aside>	Relaciona um conteúdo ao redor.
<bdi>	Para texto que não esteja diretamente vinculado ao elemento pai.
<command>	Um botão, radioButton ou checkBox.
<details>
<summary>	Uma legenda ou resumo dentro do elemento detalhe.
<figure>	Para agrupamento de uma sessão de conteúdo stand-alone.
<figcaption>	Legenda para um elemento figura.
<footer>	Para um rodapé de um documento ou sessão.
<header>	Para uma introdução de um documento ou sessão.
<hgroup>	Para uma sessão de cabeçalhos usando h1 para h6.
<mark>	Para textos que são destaques.
<meter>	Para uma medição. Deve-se conhecer o valor máximo e mínimo.
<nav>	Para uma sessão de navegação.
<progress>	Para mostrar o progresso de uma execução.
<ruby>	Para anotação rubi.
<rt>	Para explicar uma anotação rubi.
<rp>	Mostra os navegadores que não suportam anotação rubi.
<section>	Para uma sessão de um documento como capítulos, cabeçalhos, rodapés, etc.
<time>	Para definir um tempo e/ou data.
<wbr>	Quebra de linha.

Inclusão de novos controles para formulário

Uma carência da versão 4.0.1 e a escassa quantidade de controles para formulário fazendo com que os desenvolvedores recorram as famosas bibliotecas JavaScript, muitas vezes incompatíveis com determinados navegadores.

Na versão 5 novos controles de formulário foram incluídos para facilitar a vida dos desenvolvedores.

São eles:

Tag	Descrição
<datalist>	Uma lista de opções de entrada.
<keygen>	Gera chaves para autenticação de usuários.
<output>	Para diferentes tipos de saídas, como a geradas por scripts.

Um dos remanescentes da versão 4.0.1, o elemento input, ganhou novos valores para o atributo type, fazendo com que o desenvolvedor ganhe maior controle sobre a entrada de dados pelo usuário.

São os eles:

Type	Descrição
tel	A entrada é um número de telefone.
search	A entrada é um campo de busca.
url	A entrada é uma URL.
email	A entrada é um ou mais endereço de email.
datetime	A entrada é uma data e/ou hora.
date	A entrada é uma data
month	A entrada é um mês.
week	A entrada é um dia da semana.
time	A entrada é uma hora.
datetime-local	A entrada é uma data e hora local.
number	A entrada é um número.
range	A entrada é uma faixa de valores.
color	A entrada é uma cor em haxadecimal como #FF00FF.
placeholder	Especifica uma dica rápida que descreve o valor esperado em um campo de entrada.

Total suporte ao CSS3

Para dar ainda mais liberdade à criatividade dos usuários o HTML5 dá total suporte a mais nova versão das famosas Cascading Style Sheets, ou simplesmente CSS. Com essa integração as páginas webs podem receber os mais variados tipos de estilos como sombra nos textos e quadros, efeitos de transição, quadro com cantos arredondados e vários recursos novos que o CSS3 oferece.

Comentários: 0