HTML5 - Básico e Prático - Novos Elementos e Geolocalização - II

Para verificar o nível de suporte que o seu navegador atual dá ao HTML 5 visite o site : http://html5test.com/ e veja quantos pontos obtêm.

Novos elementos estruturais do HTML5

Abaixo temos uma tabela contendo os novos elementos do HTML5 que oferecem uma melhor estrutura:

Novos elementos de mídia

Destacamos dentre esses elementos o elemento <Canvas> que é usado para desenhar gráficos, em tempo real, através de scripts (geralmente JavaScript)

Novos elementos de formulário

Elementos que foram removidos na versão HTML5

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Vejamos um resumo sobre os recursos mais interessantes do HTML5:

Áudio e Vídeo

A Reprodução de arquivos de áudio e vídeo costumava envolver a dependência de componentes e plug-ins de terceiros como Flash, Silverlight, etc. O HTML5 introduz os elementos <audio> e <video> e agora uma página web pode reproduzir arquivos de mídia com facilidade. Este suporte nativo significa que a reprodução de arquivos de mídia não necessita de plug-ins, applets, ou Controles ActiveX. O HTML5 também fornece APIs de áudio e de vídeo para controlar vários aspectos do áudio e vídeo.

Veja exemplo no artigo: HTML5 e .NET - Básico e Prático - I

Canvas

Uma das razões para a popularidade da Web é a interface gráfica oferecida aos usuários finais: imagens, animações, fontes, e outros efeitos interativos fazem um site atraente do ponto de vista de um usuário final. No entanto os desenvolvedores web muitas vezes encontram limitações ao desenhar gráficos em um navegador.

Desenvolvedores usam geralmente plug-ins Flash ou Silverlight para gerar gráficos no lado do servidor e, em seguida, enviá-los para o navegador cliente como imagens. O HTML5 faz um ótimo trabalho de renderização gráfica no lado do cliente oferecendo o elemento <canvas>. Você faz o seu desenho usando apenas a API <canvas>. Algumas das áreas em que a API canvas pode ser útil incluem gráficos em jogos e ferramentas de desenho online.

API History

Antes do advento do HTML5, os desenvolvedores web tinham pouco controle sobre o histórico da sessão e sua manipulação. A API History do HTML5 fornece um meio para realizar tarefas como o mover para a frente e para trás no histórico da sessão, adicionando novas entradas no histórico e sincronizar o conteúdo da página quando o usuário navega dentro do histórico.

A API History é uma maneira padronizada para manipular o histórico do navegador via JavaScript e é especialmente útil em aplicações orientadas a Ajax que não têm um mapeamento um-para-um entre a URL da página e o conteúdo que está sendo exibido em um determinado momento no tempo.

Armazenamento Web (Web Storage)

Como um desenvolvedor ASP.NET, você pode ter usado cookies para armazenar pequenas quantidades de dados no lado do cliente. Uma limitação do uso de cookies é a quantidade de dados que podem ser salvas. Por exemplo, muitos navegadores limitam cada cookie a 4.096 bytes. O armazenamento web do HTML5 permite armazenar mais dados no lado do cliente usando código JavaScript. O armazenamento web vem em dois sabores:

1. Armazenamento local - é mantido no cliente entre as sessões do navegador;
2. Armazenamento de sessão - é mantido apenas para a sessão atual;

Estes armazenamentos são expostos como dois novos objetos JavaScript: localStorage e sessionStorage.

Web Sockets

Se você já programou uma aplicação de chat para desktop, então você provavelmente já conhece a programação de socket.

Sockets são essencialmente interfaces programáveis que se conectam entre si através de uma rede. Uma vez que estão conectados, os dois sistemas podem se comunicar uns com os outros: do cliente para o servidor e do servidor para o cliente.

Por outro lado, as páginas web são baseadas em um modelo request-response (pedido-resposta). Quando um servidor Web envia uma resposta ao cliente, ele não mantém uma conexão constante com o cliente. Assim, se o servidor quer notificar o cliente sobre algo interessante, ele não tem qualquer maneira de o fazer.

Uma maneira popular de contornar isso é periodicamente dar um ping de volta para o servidor usando requisições Ajax. Mas esta técnica não é a muito eficiente devido à possibilidade de existir muitas requisições.

Os Web Soquetes, por outro lado, proporcionam um canal de comunicação de duas vias que permitem que o servidor envie dados para o navegador do cliente. Eles oferecem as capacidades da programação socket para aplicações web.

Geolocalização

A Geolocalização tem o potencial para se tornar um recurso popular do HTML5, pois traz a conscientização de local para aplicações web. Usando a geolocalização, você pode desenvolver aplicativos que são dependentes da localização do usuário (assumindo que o dispositivo em que a página está em execução pode informar a posição).

 Por exemplo, um web site podem oferecer tarifas com desconto ou ofertas especiais para pessoas que vivem em uma localidade específica. Além disso a geolocalização pode ser de grande utilidade em dispositivos móveis, como telefones celulares e tablets.

API File

Tradicionalmente, o código do lado do cliente nunca tinha acesso ao sistema de arquivos local. Mas o HTML5 permite que você leia e encontre informações sobre arquivos locais. Tal característica permite executar o processamento personalizado antes de um arquivo ou seus dados serem enviados para o servidor.

Os recursos arrastar-e-soltar do HTML5 e da API File podem ser utilizados em conjunto para arrastar arquivos da máquina local em uma página da Web e, em seguida, realizar outras ações (por exemplo, fazer o upload do arquivo para o servidor ou mostrar uma miniatura de um arquivo de imagem).

Aplicações web Off-line

Normalmente, as aplicações web exigem uma conexão com o servidor para funcionar; este comportamento conectado pode criar problemas quando o servidor ficar offline por algum motivo ou a conexão da rede for perdida temporariamente. O recurso de cache do HTML5 aborda estas situações com a ajuda da API de cache para a aplicação offline.

As aplicações offline podem usar um arquivo de manifesto de cache que armazena uma lista de arquivos que estão em cache local. Um manifesto de cache típico inclui uma lista de páginas da web, imagens, folhas de estilo, e arquivos de script. Dessa forma, esses arquivos são acessíveis mesmo se a conexão de rede não está disponível temporariamente. Seu aplicativo também pode usar a API de cache offline para lidar com versões atualizadas de páginas.

Web Workers

A API Web Workers traz o recurso multithreading para aplicativos baseados em navegador. Web Workers essencialmente permitem carregar e executar um código JavaScript em um segmento separado sem afetar a capacidade de resposta da interface de usuário.

Isto significa que o usuário final pode continuar a trabalhar com a interface do usuário, enquanto os web workers executam algum processamento em segundo plano. Quando o processamento é concluído, o usuário é notificado ou a página é atualizada com os resultados do processamento.

Exemplo usando Geolocalização do HTML5

Como exemplo vou destacar o recurso da Geolocalização do HTML em um exemplo bem simples.

Usando um editor de textos simples como o bloco de notas crie um arquivo HTML com o código abaixo:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Geolocalização</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src='js/libs/jquery-1.8.3.min.js'>\x3C/script>")</script>
<script>
  $(document).ready(function () {
           // evento Click do botão
	$('#go').click(function () 
	{
		// teste para a presença da geolocation
		if (navigator && navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(geo_success, geo_error);
		} else {
			error('Geolocation não é suportada.');
		}
   });
 });

 function geo_success(position) 
 {
	printLatLong(position.coords.latitude, position.coords.longitude);
 }
   // O objeto PositionError retornado contém os seguintes atributos:
  // code: a numeric response code
  // PERMISSION_DENIED = 1
  // POSITION_UNAVAILABLE = 2
  // TIMEOUT = 3
  function geo_error(err) 
  {
   if (err.code == 1) {
		error('O usuário negou a requisição para a informação da localização.')
  } else if (err.code == 2) {
		error('Sua informação de localização não esta disponível.')
  } else if (err.code == 3) {
	      error('A requisição para obter a sua localização expirou.')
  } else {
	    error('Um erro desconhecido ocorreu durante o processamento da sua localização.')
  }
}

 // saida da latitude e longitude
 function printLatLong(lat, long) 
 {
   $('body').append('<p>Latitude : ' + lat + '</p>');
   $('body').append('<p>Longitude: ' + long + '</p>');
 }
 function error(msg) 
 {
   alert(msg);
 }
</script>

</head>
<body>
	<input type="button" id="go" value="Clique aqui para obter sua localização" />
</body>
</html> 

O código utiliza o jQuery que esta referenciando usando a distribuição CDN do Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Abrindo o arquivo HTML no navegador Opera 12.15 iremos obter a latitude e longitue da minha localização conforme abaixo:

Podemos aliar os recursos da Geolocalização do HTML5 com o Google Maps e exibir no mapa a localização.

Vamos mostrar isso criando um novo arquivo HTML chamado HTML5_GeoMaps.html usando um editor de texto como o bloco de notas.

Defina o código a seguir neste arquivo:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
   <p id="demo">Clique no botão para obter a sua localização:</p>
   <button onclick="getLocation()">Obter Localização</button>
   <div id="mapholder"></div>
<script>
 var x=document.getElementById("demo");
 function getLocation()
 {
   if (navigator.geolocation)
   {
     navigator.geolocation.getCurrentPosition(showPosition,showError);
   }
    else
   {
      x.innerHTML="Geolocation não é suportada por este navegador.";
   }
  }
 function showPosition(position)
 {
  var latlon=position.coords.latitude+","+position.coords.longitude;
  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
 }

function showError(error)
{
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Usuário negou a requisição para Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Informação de localização não esta disponível."
      break;
    case error.TIMEOUT:
      x.innerHTML="A requisição para localização expirou."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Erro desconhecido..."
      break;
    }
  }
</script>
</body>
</html>

Abrindo arquivo no navegador Opera 12.15 iremos obter o resultado abaixo que exibe a localização no Google Maps com base nas informações de longitude e latitude obtidas via HTML5.

Um recurso poderoso e com muitas possibilidades de utilização.

Acompanhe a terceira parte do curso em : HTML5 - Básico e Prático  -  Exibindo vídeos e ouvindo música com HTML5 e ASP .NET MVC

Pegue os exemplo aqui: HTML5_Geolocalizacao.zip e  HTML5_GeoMaps.zip

Referências:

• Seção VB .NET do Site Macoratti.net
• Super DVD .NET - A sua porta de entrada na plataforma .NET
• Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
• Seção C# do site Macoratti.net
• http://pt.wikipedia.org/wiki/HTML5
• http://dev.w3.org/html5/spec/single-page.html
• http://www.w3schools.com/html/html5_intro.asp
• Seção de Cursos do site Macoratti .net
• HTML5 e ASP .NET - Básico e Prático

José Carlos Macoratti