HTML5 - Guia rápido

HTML5 é a próxima revisão importante do padrão HTML substituindo HTML 4.01, XHTML 1.0 e XHTML 1.1. HTML5 é um padrão para estruturar e apresentar conteúdo na World Wide Web.

HTML5 é uma cooperação entre o World Wide Web Consortium (W3C) e o Web Hypertext Application Technology Working Group (WHATWG).

O novo padrão incorpora recursos como reprodução de vídeo e arrastar e soltar, que antes dependiam de plug-ins de navegador de terceiros, como Adobe Flash, Microsoft Silverlight e Google Gears.

Suporte para navegador

As versões mais recentes do Apple Safari, Google Chrome, Mozilla Firefox e Opera oferecem suporte a muitos recursos HTML5 e o Internet Explorer 9.0 também terá suporte para algumas funcionalidades HTML5.

Os navegadores da web para celular que vêm pré-instalados em iPhones, iPads e telefones Android têm excelente suporte para HTML5.

Novas características

O HTML5 apresenta uma série de novos elementos e atributos que podem ajudá-lo a construir sites modernos. Aqui está um conjunto de alguns dos recursos mais importantes introduzidos no HTML5.

New Semantic Elements - São como <header>, <footer> e <section>.
Forms 2.0 - Melhorias nos formulários da web HTML em que novos atributos foram introduzidos para a tag <input>.
Persistent Local Storage - Para conseguir sem recorrer a plug-ins de terceiros.
WebSocket - Uma tecnologia de comunicação bidirecional de última geração para aplicativos da web.
Server-Sent Events - HTML5 apresenta eventos que fluem do servidor da web para os navegadores da web e são chamados de eventos enviados pelo servidor (SSE).
Canvas - Suporta uma superfície de desenho bidimensional que você pode programar com JavaScript.
Audio & Video - Você pode inserir áudio ou vídeo em suas páginas da web sem recorrer a plug-ins de terceiros.
Geolocation - Agora os visitantes podem escolher compartilhar sua localização física com seu aplicativo da web.
Microdata - Isso permite que você crie seus próprios vocabulários além do HTML5 e estenda suas páginas da web com semântica personalizada.
Drag and drop - Arraste e solte os itens de um local para outro na mesma página da web.

Compatibilidade com versões anteriores

O HTML5 foi projetado, tanto quanto possível, para ser compatível com os navegadores existentes. Seus novos recursos foram desenvolvidos com base nos recursos existentes e permitem que você forneça conteúdo substituto para navegadores mais antigos.

Sugere-se detectar o suporte para recursos HTML5 individuais usando algumas linhas de JavaScript.

Se você não estiver familiarizado com nenhuma versão anterior de HTML, recomendo que leia nosso HTML Tutorial antes de explorar os recursos do HTML5.

A linguagem HTML 5 tem uma sintaxe HTML "customizada" que é compatível com documentos HTML 4 e XHTML1 publicados na Web, mas não é compatível com os recursos SGML mais esotéricos do HTML 4.

O HTML 5 não tem as mesmas regras de sintaxe do XHTML, onde precisamos de nomes de tags em minúsculas, citando nossos atributos, um atributo deve ter um valor e fechar todos os elementos vazios.

HTML5 vem com muita flexibilidade e suporta os seguintes recursos -

Nomes de tag em maiúsculas.
As cotações são opcionais para atributos.
Os valores dos atributos são opcionais.
Fechar elementos vazios é opcional.

O DOCTYPE

DOCTYPEs em versões anteriores de HTML eram mais longos porque a linguagem HTML era baseada em SGML e, portanto, exigia uma referência a um DTD.

Os autores de HTML 5 usariam uma sintaxe simples para especificar DOCTYPE da seguinte maneira -

<!DOCTYPE html>

A sintaxe acima não faz distinção entre maiúsculas e minúsculas.

Codificação de caracteres

Os autores de HTML 5 podem usar uma sintaxe simples para especificar a codificação de caracteres da seguinte maneira -

<meta charset = "UTF-8">

A sintaxe acima não faz distinção entre maiúsculas e minúsculas.

A tag <script>

É prática comum adicionar um atributo type com um valor de "text / javascript" aos elementos de script da seguinte maneira -

<script type = "text/javascript" src = "scriptfile.js"></script>

O HTML 5 remove as informações extras necessárias e você pode usar simplesmente a seguinte sintaxe -

<script src = "scriptfile.js"></script>

A tag <link>

Até agora, você estava escrevendo <link> da seguinte maneira -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

O HTML 5 remove as informações extras necessárias e você pode simplesmente usar a seguinte sintaxe -

<link rel = "stylesheet" href = "stylefile.css">

Elementos HTML5

Os elementos HTML5 são marcados usando tags de início e tags de finalização. As marcas são delimitadas por colchetes angulares com o nome da marca no meio.

A diferença entre as marcas de início e de fim é que a última inclui uma barra antes do nome da marca.

A seguir está o exemplo de um elemento HTML5 -

<p>...</p>

Os nomes de tag HTML5 não diferenciam maiúsculas de minúsculas e podem ser escritos em maiúsculas ou misturas, embora a convenção mais comum seja manter minúsculas.

A maioria dos elementos contém algum conteúdo como <p> ... </p> contém um parágrafo. Alguns elementos, entretanto, são proibidos de conter qualquer conteúdo e são conhecidos como elementos nulos. Por exemplo,br, hr, link, metaetc.

Aqui está uma lista completa dos elementos HTML5 .

Atributos HTML5

Os elementos podem conter atributos que são usados para definir várias propriedades de um elemento.

Alguns atributos são definidos globalmente e podem ser usados em qualquer elemento, enquanto outros são definidos apenas para elementos específicos. Todos os atributos têm um nome e um valor e se parecem com os mostrados abaixo no exemplo.

A seguir está o exemplo de um atributo HTML5 que ilustra como marcar um elemento div com um atributo denominado class usando um valor de "exemplo" -

<div class = "example">...</div>

Os atributos só podem ser especificados nas tags iniciais e nunca devem ser usados nas tags finais.

Os atributos HTML5 não diferenciam maiúsculas de minúsculas e podem ser escritos em maiúsculas ou misturas, embora a convenção mais comum seja usar minúsculas.

Aqui está uma lista completa de atributos HTML5 .

Documento HTML5

As seguintes tags foram introduzidas para uma melhor estrutura -

section- Esta tag representa um documento genérico ou seção de aplicativo. Ele pode ser usado junto com h1-h6 para indicar a estrutura do documento.
article - Essa tag representa uma parte independente do conteúdo de um documento, como uma entrada de blog ou artigo de jornal.
aside - Esta tag representa uma parte do conteúdo que está apenas ligeiramente relacionado ao resto da página.
header - Esta tag representa o cabeçalho de uma seção.
footer - Esta tag representa o rodapé de uma seção e pode conter informações sobre o autor, informações de direitos autorais, etc.
nav - Esta tag representa uma seção do documento destinada à navegação.
dialog - Esta tag pode ser usada para marcar uma conversa.
figure - Esta tag pode ser usada para associar uma legenda a algum conteúdo incorporado, como um gráfico ou vídeo.

A marcação para um documento HTML 5 seria semelhante à seguinte -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Isso produzirá o seguinte resultado -

Conforme explicado no capítulo anterior, os elementos podem conter atributos que são usados para definir várias propriedades de um elemento.

A seguir está o exemplo de atributos HTML5 que ilustram como marcar um elemento div com um atributo denominado class usando um valor de "exemplo" -

<div class = "example">...</div>

Os atributos só podem ser especificados dentro start tags e nunca deve ser usado em end tags.

Os atributos HTML5 não diferenciam maiúsculas de minúsculas e podem ser escritos em maiúsculas ou misturas, embora a convenção mais comum seja usar minúsculas.

Atributos Padrão

Os atributos listados abaixo são suportados por quase todas as tags HTML 5.

Atributo	Opções	Função
chave de acesso	Usuário definido	Especifica um atalho de teclado para acessar um elemento.
alinhar	direita, esquerda, centro	Alinha tags horizontalmente
fundo	URL	Coloca uma imagem de fundo atrás de um elemento
bgcolor	valores numéricos, hexadecimais, RGB	Coloca uma cor de fundo atrás de um elemento
classe	Usuário definido	Classifica um elemento para uso com folhas de estilo em cascata.
conteúdo editável	verdadeiro falso	Especifica se o usuário pode editar o conteúdo do elemento ou não.
menu contextual	Id do menu	Especifica o menu de contexto para um elemento.
dados-XXXX	Usuário definido	Atributos personalizados. Os autores de um documento HTML podem definir seus próprios atributos. Deve começar com "data-".
arrastável	verdadeiro, falso, automático	Especifica se um usuário tem ou não permissão para arrastar um elemento.
altura	Valor numérico	Especifica a altura das tabelas, imagens ou células da tabela.
escondido	escondido	Especifica se o elemento deve ser visível ou não.
Eu iria	Usuário definido	Nomeia um elemento para uso com folhas de estilo em cascata.
item	Lista de elementos	Usado para agrupar elementos.
itemprop	Lista de itens	Usado para agrupar itens.
verificação ortográfica	verdadeiro falso	Especifica se o elemento deve ter sua ortografia ou gramática verificada.
estilo	Folha de estilo CSS	Especifica um estilo embutido para um elemento.
sujeito	ID de definição do usuário	Especifica o item correspondente do elemento.
tabindex	Número da guia	Especifica a ordem das guias de um elemento.
título	Usuário definido	Título "Pop-up" para seus elementos.
valign	topo, meio, fundo	Alinha tags verticalmente em um elemento HTML.
largura	Valor numérico	Especifica a largura das tabelas, imagens ou células da tabela.

Para obter uma lista completa de tags HTML5 e atributos relacionados, verifique nossa referência a tags HTML5 .

Atributos personalizados

Um novo recurso introduzido no HTML 5 é a adição de atributos de dados personalizados.

Um atributo de dados personalizados começa com data-e seria nomeado com base em suas necessidades. Aqui está um exemplo simples -

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

O código acima será HTML5 perfeitamente válido com dois atributos personalizados chamados datasubject e data-level . Você seria capaz de obter os valores desses atributos usando APIs JavaScript ou CSS da mesma forma que obtém para atributos padrão.

Quando os usuários visitam seu site, eles realizam várias atividades, como clicar em textos, imagens e links, passar o mouse sobre elementos definidos, etc. Estes são exemplos do que o JavaScript chama events.

Podemos escrever nossos manipuladores de eventos em Javascript ou VBscript e você pode especificar esses manipuladores de eventos como um valor de atributo de tag de evento. A especificação HTML5 define vários atributos de evento conforme listado abaixo -

Podemos usar o seguinte conjunto de atributos para acionar qualquer javascript ou vbscript código dado como valor, quando há algum evento que ocorre para algum elemento HTML5.

Cobriríamos eventos específicos de elementos ao discutir esses elementos em detalhes nos capítulos subsequentes.

Atributo	Valor	Descrição
desligada	roteiro	Aciona quando o documento fica offline
Onabort	roteiro	Aciona em um evento de aborto
uma impressão posterior	roteiro	Aciona após o documento ser impresso
onbeforeonload	roteiro	Aciona antes de o documento carregar
na frente da impressão	roteiro	Aciona antes de o documento ser impresso
onblur	roteiro	Aciona quando a janela perde o foco
oncanplay	roteiro	Aciona quando a mídia pode iniciar a reprodução, mas pode ter que parar para armazenamento em buffer
oncanplaythrough	roteiro	Aciona quando a mídia pode ser reproduzida até o fim, sem parar para armazenamento em buffer
em mudança	roteiro	Aciona quando um elemento muda
onclick	roteiro	Dispara com um clique do mouse
oncontextmenu	roteiro	Aciona quando um menu de contexto é acionado
ondblclick	roteiro	Dispara com um clique duplo do mouse
ondrag	roteiro	Aciona quando um elemento é arrastado
ondragend	roteiro	Aciona no final de uma operação de arrastar
Ondragenter	roteiro	Aciona quando um elemento é arrastado para um destino de soltar válido
Ondragleave	roteiro	Aciona quando um elemento deixa um alvo de soltar válido
Ondragover	roteiro	Aciona quando um elemento está sendo arrastado sobre um destino de soltar válido
ondragstart	roteiro	Aciona no início de uma operação de arrastar
ondrop	roteiro	Aciona quando o elemento arrastado está sendo solto
mudança de ondulação	roteiro	Aciona quando o comprimento da mídia é alterado
esvaziado	roteiro	Aciona quando um elemento de recurso de mídia fica vazio repentinamente.
ligado	roteiro	Aciona quando a mídia chega ao fim
onerror	roteiro	Aciona quando ocorre um erro
No foco	roteiro	Aciona quando a janela ganha o foco
onformchange	roteiro	Aciona quando um formulário muda
onforminput	roteiro	Aciona quando um formulário recebe entrada do usuário
onhaschange	roteiro	Aciona quando o documento muda
entrada	roteiro	Aciona quando um elemento obtém entrada do usuário
oninvalid	roteiro	Aciona quando um elemento é inválido
onkeydown	roteiro	Aciona quando uma tecla é pressionada
onkeypress	roteiro	Aciona quando uma tecla é pressionada e liberada
onkeyup	roteiro	Aciona quando uma tecla é liberada
carregando	roteiro	Aciona quando o documento carrega
onloadeddata	roteiro	Aciona quando os dados da mídia são carregados
onloadedmetadata	roteiro	Aciona quando a duração e outros dados de mídia de um elemento de mídia são carregados
onloadstart	roteiro	Aciona quando o navegador começa a carregar os dados de mídia
mensagem	roteiro	Aciona quando a mensagem é acionada
onmousedown	roteiro	Aciona quando um botão do mouse é pressionado
onmousemove	roteiro	Aciona quando o ponteiro do mouse se move
onmouseout	roteiro	Aciona quando o ponteiro do mouse sai de um elemento
no mouse	roteiro	Aciona quando o ponteiro do mouse se move sobre um elemento
onmouseup	roteiro	Aciona quando um botão do mouse é liberado
onmousewheel	roteiro	Aciona quando a roda do mouse está sendo girada
on-line	roteiro	Aciona quando o documento fica offline
onoine	roteiro	Aciona quando o documento fica online
on-line	roteiro	Aciona quando o documento fica online
no couro da página	roteiro	Aciona quando a janela está oculta
onpageshow	roteiro	Aciona quando a janela se torna visível
em pausa	roteiro	Aciona quando os dados de mídia são pausados
em jogo	roteiro	Aciona quando os dados de mídia vão começar a ser reproduzidos
tocando	roteiro	Aciona quando os dados de mídia começam a ser reproduzidos
onpopstate	roteiro	Aciona quando o histórico da janela muda
em progresso	roteiro	Aciona quando o navegador busca os dados de mídia
onratechange	roteiro	Aciona quando a taxa de reprodução dos dados de mídia muda
onreadystatechange	roteiro	Aciona quando o estado de prontidão muda
Onredo	roteiro	Aciona quando o documento executa um refazer
onresize	roteiro	Aciona quando a janela é redimensionada
onscroll	roteiro	Aciona quando a barra de rolagem de um elemento está sendo rolada
procurado	roteiro	Aciona quando o atributo de busca de um elemento de mídia não é mais verdadeiro e a busca termina
em busca	roteiro	Aciona quando o atributo de busca de um elemento de mídia é verdadeiro e a busca começa
onselect	roteiro	Aciona quando um elemento é selecionado
montado	roteiro	Aciona quando há um erro na busca de dados de mídia
no armazenamento	roteiro	Aciona quando um documento é carregado
onsubmit	roteiro	Aciona quando um formulário é enviado
suspender	roteiro	Aciona quando o navegador busca dados de mídia, mas é interrompido antes que todo o arquivo de mídia seja buscado
ontimeupdate	roteiro	Aciona quando a mídia muda sua posição de reprodução
onundo	roteiro	Aciona quando um documento desfaz
onunload	roteiro	Aciona quando o usuário sai do documento
onvolumechange	roteiro	Aciona quando a mídia altera o volume, também quando o volume está definido como "mudo"
esperando	roteiro	Aciona quando a mídia para de reproduzir, mas espera-se que retome

O Web Forms 2.0 é uma extensão dos recursos de formulários encontrados no HTML4. Os elementos e atributos do formulário no HTML5 fornecem um grau maior de marcação semântica do que no HTML4 e nos livram de muitos scripts e estilos tediosos que eram exigidos no HTML4.

O elemento <input> em HTML4

Os elementos de entrada HTML4 usam o type atributo para especificar o tipo de dados. HTML4 fornece os seguintes tipos -

Sr. Não.	Tipo e descrição
1	text Um campo de texto de formato livre, nominalmente livre de quebras de linha.
2	password Um campo de texto de formato livre para informações confidenciais, nominalmente livre de quebras de linha.
3	checkbox Um conjunto de zero ou mais valores de uma lista predefinida.
4	radio Um valor enumerado.
5	submit Uma forma livre de botão inicia o envio do formulário.
6	file Um arquivo arbitrário com um tipo MIME e, opcionalmente, um nome de arquivo.
7	image Uma coordenada, relativa ao tamanho de uma imagem em particular, com a semântica extra de que deve ser o último valor selecionado e inicia o envio do formulário.
8	hidden Uma string arbitrária que normalmente não é exibida para o usuário.
9	select Um valor enumerado, muito parecido com o tipo de rádio.
10	textarea Um campo de texto de formato livre, nominalmente sem restrições de quebra de linha.
11	button Uma forma livre de botão que pode iniciar qualquer evento relacionado ao botão.

A seguir está um exemplo simples de uso de rótulos, botões de opção e botões de envio -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

O elemento <input> em HTML5

Além dos atributos mencionados acima, os elementos de entrada HTML5 introduziram vários novos valores para o typeatributo. Eles estão listados abaixo.

NOTE - Experimente todos os exemplos a seguir usando a versão mais recente do Opera navegador.

Sr. Não.	Tipo e descrição
1	data hora Uma data e hora (ano, mês, dia, hora, minuto, segundo, frações de segundo) codificados de acordo com ISO 8601 com o fuso horário definido para UTC.
2	datetime-local Uma data e hora (ano, mês, dia, hora, minuto, segundo, frações de segundo) codificados de acordo com ISO 8601, sem informações de fuso horário.
3	encontro Uma data (ano, mês, dia) codificada de acordo com ISO 8601.
4	mês Uma data que consiste em um ano e um mês codificado de acordo com ISO 8601.
5	semana Uma data que consiste em um ano e um número de semana codificado de acordo com ISO 8601.
6	Tempo Um tempo (hora, minuto, segundos, segundos fracionários) codificado de acordo com ISO 8601.
7	número Aceita apenas valores numéricos. O atributo step especifica a precisão, padronizando para 1.
8	alcance O tipo de intervalo é usado para campos de entrada que devem conter um valor de um intervalo de números.
9	o email Aceita apenas o valor do email. Este tipo é usado para campos de entrada que devem conter um endereço de e-mail. Se você tentar enviar um texto simples, será necessário inserir apenas o endereço de e-mail no formato [email protected].
10	url Aceita apenas valores de URL. Este tipo é usado para campos de entrada que devem conter um endereço URL. Se você tentar enviar um texto simples, será necessário inserir apenas o endereço URL no formato http://www.example.com ou no formato http://example.com.

O elemento <output>

HTML5 introduziu um novo elemento <output> que é usado para representar o resultado de diferentes tipos de saída, como saída escrita por um script.

Você pode usar o foratributo para especificar um relacionamento entre o elemento de saída e outros elementos no documento que afetaram o cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo for é uma lista separada por espaço de IDs de outros elementos.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Isso produzirá o seguinte resultado -

O atributo placeholder

HTML5 introduziu um novo atributo chamado placeholder. Este atributo nos elementos <input> e <textarea> fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do espaço reservado não deve conter retornos de carro ou avanços de linha.

Aqui está a sintaxe simples para o atributo placeholder -

<input type = "text" name = "search" placeholder = "search the web"/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Isso produzirá o seguinte resultado -

O atributo autofocus

Este é um padrão simples de uma etapa, facilmente programado em JavaScript no momento do carregamento do documento, com foco automático em um campo de formulário específico.

HTML5 introduziu um novo atributo chamado autofocus que seria usado da seguinte forma -

<input type = "text" name = "search" autofocus/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

O atributo obrigatório

Agora você não precisa ter JavaScript para validações do lado do cliente, como uma caixa de texto vazia nunca seria enviada porque o HTML5 introduziu um novo atributo chamado required que seria usado da seguinte forma e insistiria em ter um valor -

<input type = "text" name = "search" required/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

SVG significa Scalable Vector Graphics e é uma linguagem para descrever gráficos 2D e aplicativos gráficos em XML e o XML é então renderizado por um visualizador SVG.

SVG é mais útil para diagramas de tipo vetorial, como gráficos de pizza, gráficos bidimensionais em um sistema de coordenadas X, Y etc.

SVG se tornou uma recomendação W3C em 14 de janeiro de 2003 e você pode verificar a versão mais recente da especificação SVG em SVG Specification .

Visualização de arquivos SVG

A maioria dos navegadores da web pode exibir SVG da mesma forma que exibe PNG, GIF e JPG. Os usuários do Internet Explorer podem ter que instalar o Adobe SVG Viewer para poder visualizar o SVG no navegador.

Incorporando SVG em HTML5

HTML5 permite a incorporação de SVG diretamente usando <svg>...</svg> tag que tem a seguinte sintaxe simples -

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

O Firefox 3.7 também introduziu uma opção de configuração ("about: config") onde você pode habilitar HTML5 usando as seguintes etapas -

Tipo about:config na barra de endereço do Firefox.
Clique no botão "Terei cuidado, prometo!" na mensagem de aviso que aparece (e certifique-se de segui-lo!).
Tipo html5.enable na barra de filtro no topo da página.
Atualmente, ele estaria desativado, então clique nele para alternar o valor para verdadeiro.

Agora seu analisador de HTML5 do Firefox deve estar habilitado e você deve ser capaz de experimentar os exemplos a seguir.

HTML5 - Círculo SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia um círculo usando a tag <circle> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - Retângulo SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia um retângulo usando a tag <rect> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - Linha SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia uma linha usando a tag <line> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

Você pode usar o style atributo que permite definir informações adicionais de estilo, como cores de traço e preenchimento, largura do traço, etc.

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - Elipse SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia uma elipse usando a tag <ellipse> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - polígono SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia um polígono usando a tag <polygon> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - polilinha SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia uma polilinha usando a tag <polyline> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - Gradientes SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia uma elipse usando a tag <ellipse> e usaria a tag <radialGradient> para definir um gradiente radial SVG.

Da mesma forma, você pode usar a tag <linearGradient> para criar gradiente linear SVG.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

HTML5 - estrela SVG

A seguir está a versão HTML5 de um exemplo SVG que desenharia uma estrela usando a tag <polygon>.

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Isso produziria o seguinte resultado na versão mais recente do Firefox habilitada para HTML5.

A sintaxe HTML do HTML5 permite que os elementos MathML sejam usados dentro de um documento usando tags <math> ... </math>.

A maioria dos navegadores da web pode exibir tags MathML. Se seu navegador não oferece suporte a MathML, sugiro que você use a versão mais recente do Firefox.

Exemplos MathML

A seguir está um documento HTML5 válido com MathML -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

Isso produzirá o seguinte resultado -

Usando caracteres MathML

Considere, a seguir está a marcação que faz uso dos caracteres & InvisibleTimes; -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

Isso produziria o seguinte resultado. Se você não conseguir ver o resultado adequado, como x ² + 4x + 4 = 0, use o Firefox 3.5 ou uma versão superior.

Isso produzirá o seguinte resultado -

Exemplos de apresentação de matriz

Considere o seguinte exemplo que seria usado para representar uma matriz 2x2 simples -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

Isso produzirá o seguinte resultado -

Isso produziria o seguinte resultado. Se você não conseguir ver o resultado adequado, use o Firefox 3.5 ou uma versão superior.

O HTML5 apresenta dois mecanismos, semelhantes aos cookies de sessão HTTP, para armazenar dados estruturados no lado do cliente e para superar as seguintes desvantagens.

Os cookies são incluídos em cada solicitação HTTP, tornando seu aplicativo da web mais lento ao transmitir os mesmos dados.
Os cookies são incluídos em cada solicitação HTTP, enviando dados não criptografados pela Internet.
Os cookies são limitados a cerca de 4 KB de dados. Não é suficiente para armazenar os dados necessários.

Os dois armazenamentos são session storage e local storage e eles seriam usados para lidar com diferentes situações.

As versões mais recentes de praticamente todos os navegadores suportam armazenamento HTML5, incluindo o Internet Explorer.

Armazenamento de Sessão

O Armazenamento de Sessão é projetado para cenários onde o usuário está realizando uma única transação, mas pode estar realizando várias transações em janelas diferentes ao mesmo tempo.

Exemplo

Por exemplo, se um usuário estiver comprando passagens aéreas em duas janelas diferentes, usando o mesmo site. Se o site usasse cookies para rastrear qual ingresso o usuário estava comprando, conforme o usuário clicasse de uma página a outra em ambas as janelas, o ingresso atualmente comprado "vazaria" de uma janela para a outra, potencialmente fazendo com que o usuário compre duas passagens para o mesmo vôo sem realmente perceber.

HTML5 introduz o atributo sessionStorage que seria usado pelos sites para adicionar dados ao armazenamento da sessão, e será acessível a qualquer página do mesmo site aberto naquela janela, ou seja,session e assim que você fechar a janela, a sessão será perdida.

A seguir está o código que definiria uma variável de sessão e acessaria essa variável -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -

Armazenamento Local

O armazenamento local é projetado para armazenamento que abrange várias janelas e dura além da sessão atual. Em particular, os aplicativos da Web podem desejar armazenar megabytes de dados do usuário, como documentos inteiros de autoria do usuário ou a caixa de correio de um usuário, no lado do cliente por motivos de desempenho.

Novamente, os cookies não lidam bem com esse caso, porque eles são transmitidos com cada solicitação.

Exemplo

HTML5 introduz o atributo localStorage que seria usado para acessar a área de armazenamento local de uma página sem limite de tempo e este armazenamento local estará disponível sempre que você usar essa página.

A seguir está o código que definiria uma variável de armazenamento local e acessaria essa variável toda vez que esta página for acessada, mesmo na próxima vez, quando você abrir a janela -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -

Excluir armazenamento da web

Armazenar dados confidenciais na máquina local pode ser perigoso e pode deixar uma brecha de segurança.

Os dados de armazenamento da sessão seriam excluídos pelos navegadores imediatamente após o encerramento da sessão.

Para limpar uma configuração de armazenamento local, você precisaria ligar localStorage.remove('key'); onde 'chave' é a chave do valor que você deseja remover. Se você quiser limpar todas as configurações, você precisa ligarlocalStorage.clear() método.

A seguir está o código que limparia o armazenamento local completo -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -

A API de banco de dados Web SQL não é realmente parte da especificação HTML5, mas é uma especificação separada que apresenta um conjunto de APIs para manipular bancos de dados do lado do cliente usando SQL.

Presumo que você seja um ótimo desenvolvedor da web e, se for esse o caso, sem dúvida, você conhece bem os conceitos de SQL e RDBMS. Se você ainda deseja ter uma sessão com SQL, pode seguir nosso Tutorial de SQL .

O banco de dados Web SQL funcionará na versão mais recente do Safari, Chrome e Opera.

Os Métodos Básicos

Seguem os três métodos principais definidos na especificação que irei abordar neste tutorial -

openDatabase - Este método cria o objeto de banco de dados usando o banco de dados existente ou criando um novo.
transaction - Este método nos dá a capacidade de controlar uma transação e realizar o commit ou rollback com base na situação.
executeSql - Este método é usado para executar uma consulta SQL real.

Abrindo banco de dados

O método openDatabase se encarrega de abrir um banco de dados se ele já existe, este método irá criá-lo se ele já não existir.

Para criar e abrir um banco de dados, use o seguinte código -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

O método acima tomou os seguintes cinco parâmetros -

Nome do banco de dados
Número da versão
Descrição do texto
Tamanho do banco de dados
Callback de criação

O último e quinto argumento, callback de criação, será chamado se o banco de dados estiver sendo criado. Sem esse recurso, no entanto, os bancos de dados ainda estão sendo criados dinamicamente e com as versões corretas.

Executando consultas

Para executar uma consulta, você usa a função database.transaction (). Esta função precisa de um único argumento, que é uma função que realmente executa a consulta da seguinte maneira -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

A consulta acima criará uma tabela chamada LOGS no banco de dados 'mydb'.

Operação INSERT

Para criar entradas na tabela, adicionamos uma consulta SQL simples no exemplo acima da seguinte forma -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

Podemos passar valores dinâmicos ao criar a entrada da seguinte forma -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

Aqui e_id e e_log são variáveis externas e executeSql mapeia cada item no argumento da matriz para os "?" s.

Operação READ

Para ler os registros já existentes, usamos um retorno de chamada para capturar os resultados da seguinte forma -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Exemplo Final

Então, finalmente, vamos manter este exemplo em um documento HTML5 completo como a seguir e tentar executá-lo com o navegador Safari.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

Isso produzirá o seguinte resultado -

Os aplicativos da web convencionais geram eventos que são despachados para o servidor da web. Por exemplo, um simples clique em um link solicita uma nova página do servidor.

Os tipos de eventos que fluem do navegador da web para o servidor da web podem ser chamados de eventos enviados pelo cliente.

Junto com HTML5, WHATWG Web Applications 1.0 apresenta eventos que fluem do servidor da web para os navegadores da web e são chamados de eventos enviados pelo servidor (SSE). Usando o SSE, você pode enviar eventos DOM continuamente do seu servidor da web para o navegador do visitante.

A abordagem de streaming de eventos abre uma conexão persistente com o servidor, enviando dados ao cliente quando novas informações estão disponíveis, eliminando a necessidade de pesquisa contínua.

Os eventos enviados pelo servidor padronizam a forma como transmitimos os dados do servidor para o cliente.

Aplicativo da Web para SSE

Para usar eventos enviados pelo servidor em um aplicativo da web, você precisa adicionar um elemento <eventsource> ao documento.

o src O atributo do elemento <eventsource> deve apontar para uma URL que deve fornecer uma conexão HTTP persistente que envia um fluxo de dados contendo os eventos.

A URL apontaria para um PHP, PERL ou qualquer script Python que se encarregaria de enviar dados do evento de forma consistente. A seguir está um exemplo simples de aplicativo da web que espera o tempo do servidor.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Script do lado do servidor para SSE

Um script do lado do servidor deve enviar Content-typeheader especificando o tipo text / event-stream como segue.

print "Content-Type: text/event-stream\n\n";

Depois de definir o tipo de conteúdo, o script do lado do servidor enviaria um Event: tag seguida do nome do evento. O exemplo a seguir enviaria Server-Time como nome de evento encerrado por um caractere de nova linha.

print "Event: server-time\n";

A etapa final é enviar dados do evento usando Data: tag que seria seguida por um número inteiro de valor de string terminado por um caractere de nova linha, como segue -

$time = localtime();
print "Data: $time\n";

Finalmente, a seguir está ticker.cgi completo escrito em Perl -

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Lidar com eventos enviados pelo servidor

Vamos modificar nosso aplicativo da web para lidar com eventos enviados pelo servidor. A seguir está o exemplo final.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

Antes de testar os eventos enviados pelo servidor, eu sugiro que você verifique se o seu navegador da web suporta esse conceito.

WebSockets é uma tecnologia de comunicação bidirecional de última geração para aplicativos da web que opera em um único soquete e é exposta por meio de uma interface JavaScript em navegadores compatíveis com HTML 5.

Depois de obter uma conexão Web Socket com o servidor web, você pode enviar dados do navegador para o servidor chamando um send() método e receber dados do servidor para o navegador por um onmessage manipulador de eventos.

A seguir está a API que cria um novo objeto WebSocket.

var Socket = new WebSocket(url, [protocal] );

Aqui, o primeiro argumento, url, especifica o URL ao qual se conectar. O segundo atributo, protocolo, é opcional e, se presente, especifica um subprotocolo que o servidor deve suportar para que a conexão seja bem-sucedida.

Atributos WebSocket

A seguir estão os atributos do objeto WebSocket. Supondo que criamos o objeto Socket conforme mencionado acima -

Sr. Não.	Atributo e descrição
1	Socket.readyState O atributo readonly readyState representa o estado da conexão. Pode ter os seguintes valores - Um valor 0 indica que a conexão ainda não foi estabelecida. Um valor de 1 indica que a conexão foi estabelecida e a comunicação é possível. Um valor 2 indica que a conexão está passando pelo handshake de fechamento. Um valor de 3 indica que a conexão foi fechada ou não pôde ser aberta.
2	Socket.bufferedAmount O atributo readonly bufferedAmount representa o número de bytes de texto UTF-8 que foram enfileirados usando o método send ().

Eventos WebSocket

A seguir estão os eventos associados ao objeto WebSocket. Supondo que criamos o objeto Socket conforme mencionado acima -

Evento	Manipulador de Eventos	Descrição
abrir	Socket.onopen	Este evento ocorre quando a conexão de soquete é estabelecida.
mensagem	Socket.onmessage	Este evento ocorre quando o cliente recebe dados do servidor.
erro	Socket.onerror	Este evento ocorre quando há algum erro de comunicação.
Fechar	Socket.onclose	Este evento ocorre quando a conexão é fechada.

Métodos WebSocket

A seguir estão os métodos associados ao objeto WebSocket. Supondo que criamos o objeto Socket conforme mencionado acima -

Sr. Não.	Método e Descrição
1	Socket.send() O método send (data) transmite dados usando a conexão.
2	Socket.close() O método close () seria usado para encerrar qualquer conexão existente.

Exemplo WebSocket

Um WebSocket é um soquete TCP bidirecional padrão entre o cliente e o servidor. O soquete começa como uma conexão HTTP e então "atualiza" para um soquete TCP após um handshake HTTP. Após o handshake, qualquer um dos lados pode enviar dados.

Código HTML e JavaScript do lado do cliente

No momento em que este tutorial foi escrito, havia apenas alguns navegadores da web com suporte para a interface WebSocket (). Você pode tentar o exemplo a seguir com a versão mais recente do Chrome, Mozilla, Opera e Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Instalar pywebsocket

Antes de testar o programa cliente acima, você precisa de um servidor que suporte WebSocket. Baixe mod_pywebsocket-xxxtar.gz de pywebsocket que visa fornecer uma extensão Web Socket para Apache HTTP Server e instale-o seguindo estas etapas.

Descompacte e descompacte o arquivo baixado.
Ir para dentro pywebsocket-x.x.x/src/ diretório.
$ python setup.py build
$ sudo python setup.py install
Em seguida, leia o documento por -
- $ pydoc mod_pywebsocket

Isso o instalará em seu ambiente Python.

Inicie o servidor

Vou ao pywebsocket-x.x.x/src/mod_pywebsocket pasta e execute o seguinte comando -

$sudo python standalone.py -p 9998 -w ../example/

Isso iniciará o servidor ouvindo na porta 9998 e usará o handlers diretório especificado pela opção -w onde nosso echo_wsh.py reside.

Agora, usando o navegador Chrome, abra o arquivo html que você criou no início. Se o seu navegador oferecer suporte a WebSocket (), você receberá um alerta indicando que seu navegador oferece suporte a WebSocket e, finalmente, ao clicar em "Executar WebSocket", você receberá uma mensagem de adeus enviada pelo script do servidor.

O elemento HTML5 <canvas> oferece uma maneira fácil e poderosa de desenhar gráficos usando JavaScript. Pode ser usado para desenhar gráficos, fazer composições de fotos ou fazer animações simples (e não tão simples).

Aqui está um elemento <canvas> simples que possui apenas dois atributos específicos width e height além de todos os principais atributos HTML5, como id, nome e classe, etc.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Você pode encontrar facilmente esse elemento <canvas> no DOM usando o método getElementById () da seguinte maneira -

var canvas = document.getElementById("mycanvas");

Vejamos um exemplo simples de como usar o elemento <canvas> em um documento HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Isso produzirá o seguinte resultado -

O contexto de renderização

O <canvas> está inicialmente em branco e, para exibir algo, um script primeiro precisa acessar o contexto de renderização e desenhar nele.

O elemento canvas tem um método DOM chamado getContext, usado para obter o contexto de renderização e suas funções de desenho. Esta função tem um parâmetro, o tipo de contexto2d.

A seguir está o código para obter o contexto necessário, juntamente com uma verificação se seu navegador oferece suporte ao elemento <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Suporte para navegador

Todas as versões mais recentes do Firefox, Safari, Chrome e Opera suportam canvas HTML5, mas o IE8 não suporta canvas nativamente.

Você pode usar ExplorerCanvas para ter suporte de tela por meio do Internet Explorer. Você só precisa incluir este JavaScript da seguinte maneira -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Exemplos de tela HTML5

Este tutorial cobre os exemplos a seguir relacionados ao elemento <canvas> HTML5.

Sr. Não.	Exemplos e descrição
1	Desenho de retângulos Aprenda a desenhar retângulo usando o elemento <canvas> HTML5
2	Traçando caminhos Aprenda a fazer formas usando caminhos no elemento <canvas> HTML5
3	Desenho de linhas Aprenda a desenhar linhas usando o elemento <canvas> HTML5
4	Desenho Bézier Aprenda a desenhar a curva de Bézier usando o elemento <canvas> HTML5
5	Desenho Quadrático Aprenda a desenhar uma curva quadrática usando o elemento <canvas> HTML5
6	Usando imagens Aprenda a usar imagens com o elemento <canvas> HTML5
7	Criar gradientes Aprenda a criar gradientes usando o elemento <canvas> HTML5
8	Estilos e Cores Aprenda a aplicar estilos e cores usando o elemento <canvas> HTML5
9	Texto e fontes Aprenda a desenhar textos incríveis usando diferentes fontes e seus tamanhos.
10	Padrão e sombra Aprenda a desenhar diferentes padrões e sombras projetadas.
11	Estados da tela Aprenda como salvar e restaurar estados da tela ao fazer desenhos complexos em uma tela.
12	Tradução de tela Este método é usado para mover a tela e sua origem para um ponto diferente na grade.
13	Rotação da Tela Este método é usado para girar a tela em torno da origem atual.
14	Dimensionamento da tela Este método é usado para aumentar ou diminuir as unidades em uma grade de tela.
15	Canvas Transform Esses métodos permitem modificações diretamente na matriz de transformação.
16	Composição da Tela Este método é usado para mascarar certas áreas ou limpar seções da tela.
17	Animação em tela Aprenda a criar animação básica usando tela HTML5 e JavaScript.

Os recursos do HTML5 incluem suporte nativo para áudio e vídeo sem a necessidade de Flash.

As tags HTML5 <audio> e <video> simplificam a adição de mídia a um site. Você precisa definirsrc atributo para identificar a fonte de mídia e incluir um atributo de controles para que o usuário possa reproduzir e pausar a mídia.

Incorporando Vídeo

Esta é a forma mais simples de incorporar um arquivo de vídeo em sua página da web -

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

A especificação de rascunho HTML5 atual não especifica quais formatos de vídeo os navegadores devem suportar na tag de vídeo. Mas os formatos de vídeo mais comumente usados são -

Ogg - Arquivos Ogg com codec de vídeo Thedora e codec de áudio Vorbis.
mpeg4 - Arquivos MPEG4 com codec de vídeo H.264 e codec de áudio AAC.

Você pode usar a tag <source> para especificar a mídia junto com o tipo de mídia e muitos outros atributos. Um elemento de vídeo permite vários elementos de origem e o navegador usará o primeiro formato reconhecido -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Especificação de atributo de vídeo

A tag de vídeo HTML5 pode ter diversos atributos para controlar a aparência e várias funcionalidades do controle -

Sr. Não.	Atributo e descrição
1	autoplay Este atributo booleano, se especificado, o vídeo começará a ser reproduzido automaticamente assim que puder, sem parar para terminar de carregar os dados.
2	autobuffer Este atributo booleano, se especificado, o vídeo começará a ser armazenado em buffer automaticamente, mesmo se não estiver configurado para reproduzir automaticamente.
3	controls Se este atributo estiver presente, permitirá ao usuário controlar a reprodução do vídeo, incluindo volume, busca e pausar / retomar a reprodução.
4	height Este atributo especifica a altura da área de exibição do vídeo, em pixels CSS.
5	loop Este atributo booleano, se especificado, permitirá que o vídeo retorne automaticamente ao início após chegar ao final.
6	preload Este atributo especifica que o vídeo será carregado no carregamento da página e estará pronto para ser executado. Ignorado se a reprodução automática estiver presente.
7	poster Este é o URL de uma imagem para mostrar até que o usuário reproduza ou busque.
8	src O URL do vídeo a ser incorporado. Isso é opcional; em vez disso, você pode usar o elemento <source> dentro do bloco de vídeo para especificar o vídeo a ser incorporado.
9	width Este atributo especifica a largura da área de exibição do vídeo, em pixels CSS.

Incorporando Áudio

HTML5 suporta tag <audio> que é usada para embutir conteúdo de som em um documento HTML ou XHTML como segue.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

O rascunho da especificação HTML5 atual não especifica quais formatos de áudio os navegadores devem suportar na tag de áudio. Mas os formatos de áudio mais comumente usados sãoogg, mp3 e wav.

Você pode usar <source & ggt; tag para especificar a mídia junto com o tipo de mídia e muitos outros atributos. Um elemento de áudio permite vários elementos de origem e o navegador usará o primeiro formato reconhecido -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Especificação de Atributo de Áudio

A tag de áudio HTML5 pode ter uma série de atributos para controlar a aparência e várias funcionalidades do controle -

Sr. Não.	Atributo e descrição
1	autoplay Este atributo booleano, se especificado, o áudio começará a reproduzir automaticamente assim que puder, sem parar para terminar de carregar os dados.
2	autobuffer Este atributo booleano, se especificado, o áudio começará a ser armazenado em buffer automaticamente, mesmo se não estiver configurado para reproduzir automaticamente.
3	controls Se este atributo estiver presente, permitirá ao usuário controlar a reprodução de áudio, incluindo volume, busca e pausar / retomar a reprodução.
4	loop Este atributo booleano, se especificado, permitirá que o áudio retorne automaticamente ao início após atingir o final.
5	preload Este atributo especifica que o áudio será carregado no carregamento da página e estará pronto para ser executado. Ignorado se a reprodução automática estiver presente.
6	src O URL do áudio a ser incorporado. Isso é opcional; em vez disso, você pode usar o elemento <source> dentro do bloco de vídeo para especificar o vídeo a ser incorporado.

Tratamento de eventos de mídia

A tag de áudio e vídeo HTML5 pode ter vários atributos para controlar várias funcionalidades do controle usando JavaScript -

S.No.	Descrição do Evento
1	abort Este evento é gerado quando a reprodução é abortada.
2	canplay Este evento é gerado quando dados suficientes estão disponíveis para que a mídia possa ser reproduzida.
3	ended Este evento é gerado quando a reprodução é concluída.
4	error Este evento é gerado quando ocorre um erro.
5	loadeddata Este evento é gerado quando o primeiro quadro da mídia termina de carregar.
6	loadstart Este evento é gerado quando o carregamento da mídia começa.
7	pause Este evento é gerado quando a reprodução é pausada.
8	play Este evento é gerado quando a reprodução é iniciada ou reiniciada.
9	progress Este evento é gerado periodicamente para informar o andamento do download da mídia.
10	ratechange Este evento é gerado quando a velocidade de reprodução muda.
11	seeked Este evento é gerado quando uma operação de busca é concluída.
12	seeking Este evento é gerado quando uma operação de busca começa.
13	suspend Este evento é gerado quando o carregamento da mídia é suspenso.
14	volumechange Este evento é gerado quando o volume do áudio muda.
15	waiting Este evento é gerado quando a operação solicitada (como reprodução) é atrasada enquanto se aguarda a conclusão de outra operação (como uma busca).

A seguir está o exemplo que permite reproduzir o vídeo fornecido -

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Configurando servidores para tipo de mídia

A maioria dos servidores não fornece, por padrão, mídia Ogg ou mp4 com os tipos MIME corretos, então você provavelmente precisará adicionar a configuração apropriada para isso.

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

A API de localização geográfica HTML5 permite que você compartilhe sua localização com seus sites favoritos. Um JavaScript pode capturar sua latitude e longitude e pode ser enviado para um servidor da web de back-end e fazer coisas extravagantes de localização, como encontrar empresas locais ou mostrar sua localização em um mapa.

Hoje, a maioria dos navegadores e dispositivos móveis oferece suporte à API de geolocalização. As APIs de geolocalização funcionam com uma nova propriedade do objeto navegador global, isto é. Objeto de geolocalização que pode ser criado da seguinte forma -

var geolocation = navigator.geolocation;

O objeto de geolocalização é um objeto de serviço que permite que os widgets recuperem informações sobre a localização geográfica do dispositivo.

Métodos de Geolocalização

O objeto de geolocalização fornece os seguintes métodos -

Sr. Não.	Método e Descrição
1	getCurrentPosition () Este método recupera a localização geográfica atual do usuário.
2	watchPosition () Este método recupera atualizações periódicas sobre a localização geográfica atual do dispositivo.
3	clearWatch () Este método cancela uma chamada watchPosition em andamento.

Exemplo

A seguir está um código de exemplo para usar qualquer um dos métodos acima -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

Aqui, showLocation e errorHandler são métodos de retorno de chamada que seriam usados para obter a posição real conforme explicado na próxima seção e para tratar erros, se houver algum.

Propriedades de localização

Os métodos de geolocalização getCurrentPosition () e getPositionUsingMethodName () especificam o método de retorno de chamada que recupera as informações de localização. Esses métodos são chamados de forma assíncrona com um objetoPosition que armazena as informações de localização completas.

o Positionobjeto especifica a localização geográfica atual do dispositivo. A localização é expressa como um conjunto de coordenadas geográficas junto com informações sobre rumo e velocidade.

A tabela a seguir descreve as propriedades do objeto Posição. Para as propriedades opcionais, se o sistema não puder fornecer um valor, o valor da propriedade será definido como nulo.

Propriedade	Tipo	Descrição
coords	objetos	Especifica a localização geográfica do dispositivo. A localização é expressa como um conjunto de coordenadas geográficas junto com informações sobre rumo e velocidade.
coords.latitude	Número	Especifica a estimativa de latitude em graus decimais. O intervalo de valores é [-90,00, +90,00].
coords.longitude	Número	Especifica a estimativa da longitude em graus decimais. O intervalo de valores é [-180,00, +180,00].
coords.altitude	Número	[Opcional] Especifica a estimativa da altitude em metros acima do elipsóide WGS 84.
coords.accuracy	Número	[Opcional] Especifica a precisão das estimativas de latitude e longitude em metros.
coords.altitudeAccuracy	Número	[Opcional] Especifica a precisão da estimativa da altitude em metros.
coords.heading	Número	[Opcional] Especifica a direção atual do movimento do dispositivo em graus, no sentido horário em relação ao norte verdadeiro.
coords.speed	Número	[Opcional] Especifica a velocidade de solo atual do dispositivo em metros por segundo.
timestamp	encontro	Especifica a hora em que as informações de localização foram recuperadas e o objeto Posição criado.

Exemplo

A seguir está um código de exemplo que faz uso do objeto Position. Aqui, o método showLocation é um método de retorno de chamada -

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Tratamento de erros

A geolocalização é complicada e é muito necessária para detectar qualquer erro e tratá-lo com elegância.

Os métodos de geolocalização getCurrentPosition () e watchPosition () usam um método de retorno de chamada do manipulador de erros que fornece PositionErrorobjeto. Este objeto tem duas propriedades a seguir -

Propriedade	Tipo	Descrição
código	Número	Contém um código numérico para o erro.
mensagem	Corda	Contém uma descrição legível do erro.

A tabela a seguir descreve os possíveis códigos de erro retornados no objeto PositionError.

Código	Constante	Descrição
0	ERRO DESCONHECIDO	O método falhou ao recuperar a localização do dispositivo devido a um erro desconhecido.
1	PERMISSÃO NEGADA	O método falhou ao recuperar a localização do dispositivo porque o aplicativo não tem permissão para usar o Serviço de Localização.
2	POSITION_UNAVAILABLE	A localização do dispositivo não pôde ser determinada.
3	TEMPO ESGOTADO	O método não conseguiu recuperar as informações de localização dentro do intervalo de tempo limite máximo especificado.

Exemplo

A seguir está um código de exemplo que faz uso do objeto PositionError. Aqui, o método errorHandler é um método de retorno de chamada -

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Opções de posição

A seguir está a sintaxe real do método getCurrentPosition () -

getCurrentPosition(callback, ErrorCallback, options)

Aqui o terceiro argumento é o PositionOptions objeto que especifica um conjunto de opções para recuperar a localização geográfica do dispositivo.

A seguir estão as opções que podem ser especificadas como terceiro argumento -

Propriedade	Tipo	Descrição
enableHighAccuracy	boleano	Especifica se o widget deseja receber a estimativa de localização mais precisa possível. Por padrão, isso é falso.
tempo esgotado	Número	A propriedade timeout é o número de milissegundos que seu aplicativo da web está disposto a esperar por uma posição.
maximumAge	Número	Especifica o tempo de expiração em milissegundos para informações de localização em cache.

Exemplo

A seguir está um código de amostra que mostra como usar os métodos mencionados acima -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

Microdados é uma forma padronizada de fornecer semântica adicional em suas páginas da web.

Microdata permite definir seus próprios elementos personalizados e começar a incorporar propriedades personalizadas em suas páginas da web. Em um nível superior, os microdados consistem em um grupo de pares nome-valor.

Os grupos são chamados items, e cada par nome-valor é um property. Itens e propriedades são representados por elementos regulares.

Exemplo

Para criar um item, o itemscope atributo é usado.
Para adicionar uma propriedade a um item, o itemprop atributo é usado em um dos descendentes do item.

Aqui existem dois itens, cada um deles com a propriedade "nome" -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

As propriedades geralmente têm valores que são strings, mas podem ter os seguintes tipos de dados -

Atributos Globais

Microdata apresenta cinco atributos globais que estariam disponíveis para qualquer elemento usar e fornecem contexto para máquinas sobre seus dados.

Sr. Não.	Atributo e descrição
1	itemscope Isso é usado para criar um item. O atributo itemscope é um atributo booleano que informa que há Microdados nesta página e é aqui que ele começa.
2	itemtype Este atributo é um URL válido que define o item e fornece o contexto para as propriedades.
3	itemid Este atributo é o identificador global do item.
4	itemprop Este atributo define uma propriedade do item.
5	itemref Este atributo fornece uma lista de elementos adicionais para rastrear para encontrar os pares nome-valor do item.

Tipos de dados de propriedades

As propriedades geralmente têm valores que são strings conforme mencionado no exemplo acima, mas também podem ter valores que são URLs. O exemplo a seguir tem uma propriedade, "imagem", cujo valor é um URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

As propriedades também podem ter valores que são datas, horas ou datas e horas. Isso é conseguido usando otime elemento e seu datetime atributo.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

As propriedades também podem ser grupos de pares nome-valor, colocando o atributo itemscope no elemento que declara a propriedade.

Suporte para API de microdados

Se um navegador oferecer suporte à API de microdados HTML5, haverá uma função getItems () no objeto de documento global. Se o navegador não suportar microdados, a função getItems () será indefinida.

function supports_microdata_api() {
   return !!document.getItems;
}

O Modernizr ainda não oferece suporte à verificação da API de microdados, portanto, você precisará usar a função como a listada acima.

O padrão de microdados HTML5 inclui marcação HTML (principalmente para mecanismos de pesquisa) e um conjunto de funções DOM (principalmente para navegadores).

Você pode incluir a marcação de microdados em suas páginas da web, e os mecanismos de pesquisa que não entendem os atributos de microdados simplesmente os ignorarão. Mas se você precisar acessar ou manipular microdados por meio do DOM, será necessário verificar se o navegador oferece suporte à API DOM de microdados.

Definindo o Vocabulário de Microdados

Para definir o vocabulário de microdados, você precisa de um URL de namespace que aponta para uma página da web em funcionamento. Por exemplo, https://data-vocabulary.org/Person pode ser usado como o namespace para um vocabulário pessoal de microdados com as seguintes propriedades nomeadas -

name - Nome da pessoa como uma string simples
Photo - Um URL para uma foto da pessoa.
URL - Um site pertencente à pessoa.

O uso de cerca de propriedades de microdados de uma pessoa pode ser o seguinte -

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

O Google oferece suporte a microdados como parte de seu programa Rich Snippets. Quando o rastreador da web do Google analisa sua página e encontra propriedades de microdados que estão em conformidade com o vocabulário http://datavocabulary.org/Person, ele analisa essas propriedades e as armazena junto com o restante dos dados da página.

Você pode testar o exemplo acima usando a ferramenta de teste de rich snippets usando http://www.tutorialspoint.com/html5/microdata.htm

Para mais desenvolvimento em Microdados, você pode sempre consultar Microdados HTML5 .

Arrastar e soltar (DnD) é um poderoso conceito de interface de usuário que torna fácil copiar, reordenar e deletar itens com a ajuda de cliques do mouse. Isso permite que o usuário clique e segure o botão do mouse sobre um elemento, arraste-o para outro local e solte o botão do mouse para soltar o elemento lá.

Para alcançar a funcionalidade de arrastar e soltar com o HTML4 tradicional, os desenvolvedores teriam que usar programação JavaScript complexa ou outras estruturas JavaScript como jQuery etc.

Agora o HTML 5 veio com uma API Drag and Drop (DnD) que traz suporte nativo a DnD para o navegador, tornando-o muito mais fácil de codificar.

HTML 5 DnD é compatível com todos os principais navegadores como Chrome, Firefox 3.5 e Safari 4, etc.

Arrastar e soltar eventos

Existem vários eventos que são disparados durante vários estágios da operação de arrastar e soltar. Esses eventos estão listados abaixo -

Sr. Não.	Eventos e Descrição
1	dragstart Dispara quando o usuário começa a arrastar o objeto.
2	dragenter Disparado quando o mouse é movido pela primeira vez sobre o elemento de destino enquanto ocorre um arrasto. Um ouvinte para este evento deve indicar se um drop é permitido neste local. Se não houver ouvintes, ou se os ouvintes não executarem nenhuma operação, um descarte não será permitido por padrão.
3	dragover Este evento é disparado quando o mouse é movido sobre um elemento quando um arrasto está ocorrendo. Na maior parte do tempo, a operação que ocorre durante um ouvinte será a mesma do evento dragenter.
4	dragleave Este evento é disparado quando o mouse sai de um elemento enquanto um arrasto está ocorrendo. Os ouvintes devem remover todos os marcadores de realce ou inserção usados para feedback de queda.
5	drag Dispara sempre que o mouse é movido enquanto o objeto está sendo arrastado.
6	drop O evento de soltar é disparado no elemento onde o soltar ocorreu no final da operação de arrastar. Um ouvinte seria responsável por recuperar os dados que estão sendo arrastados e inseri-los no local de soltar.
7	dragend Dispara quando o usuário libera o botão do mouse enquanto arrasta um objeto.

Note- Observe que apenas eventos de arrastar são disparados; eventos de mouse, como mousemove, não são disparados durante uma operação de arrastar.

O objeto DataTransfer

Os métodos de ouvinte de evento para todos os eventos de arrastar e soltar aceitam Event objeto que tem um atributo somente leitura chamado dataTransfer.

o event.dataTransfer retorna DataTransfer objeto associado ao evento da seguinte forma -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

O objeto DataTransfer contém dados sobre a operação de arrastar e soltar. Esses dados podem ser recuperados e definidos em termos de vários atributos associados ao objeto DataTransfer, conforme explicado abaixo -

Sr. Não.	Atributos do DataTransfer e sua descrição
1	dataTransfer.dropEffect [ = value ] Retorna o tipo de operação atualmente selecionada. Este atributo pode ser definido para alterar a operação selecionada. Os valores possíveis são none, copy, link e move.
2	dataTransfer.effectAllowed [ = value ] Retorna os tipos de operações que devem ser permitidas. Este atributo pode ser definido para alterar as operações permitidas. Os valores possíveis são none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
3	dataTransfer.types Retorna um DOMStringList listando os formatos que foram definidos no evento dragstart. Além disso, se algum arquivo estiver sendo arrastado, um dos tipos será a string "Arquivos".
4	dataTransfer.clearData ( [ format ] ) Remove os dados dos formatos especificados. Remove todos os dados se o argumento for omitido.
5	dataTransfer.setData(format, data) Adiciona os dados especificados.
6	data = dataTransfer.getData(format) Retorna os dados especificados. Se não houver esses dados, retorna a string vazia.
7	dataTransfer.files Retorna uma FileList dos arquivos sendo arrastados, se houver.
8	dataTransfer.setDragImage(element, x, y) Usa o elemento fornecido para atualizar o feedback de arrasto, substituindo qualquer feedback especificado anteriormente.
9	dataTransfer.addElement(element) Adiciona o elemento fornecido à lista de elementos usados para renderizar o feedback do arrasto.

Processo de arrastar e soltar

A seguir estão as etapas a serem realizadas para implementar a operação de arrastar e soltar -

Etapa 1 - Tornando um objeto arrastável

Aqui estão as etapas a serem seguidas -

Se você deseja arrastar um elemento, você precisa definir o draggable atribuir a true para esse elemento.
Definir um ouvinte de evento para dragstart que armazena os dados sendo arrastados.
O ouvinte do evento dragstart irá definir os efeitos permitidos (copiar, mover, vincular ou alguma combinação).

A seguir está o exemplo para tornar um objeto arrastável -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Etapa 2 - Soltando o objeto

Para aceitar uma queda, o alvo da queda precisa ouvir pelo menos três eventos.

o dragenter, que é usado para determinar se o alvo de descarte deve aceitar ou não o descarte. Se a entrega for aceita, este evento deve ser cancelado.
o dragover, que é usado para determinar qual feedback deve ser mostrado ao usuário. Se o evento for cancelado, o feedback (normalmente o cursor) será atualizado com base no valor do atributo dropEffect.
finalmente, o drop evento, que permite que a queda real seja realizada.

A seguir está o exemplo para soltar um objeto em outro objeto -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Isso produzirá o seguinte resultado -

JavaScript foi projetado para ser executado em um ambiente de thread único, o que significa que vários scripts não podem ser executados ao mesmo tempo. Considere uma situação em que você precisa lidar com eventos de IU, consultar e processar grandes quantidades de dados da API e manipular o DOM.

JavaScript irá travar seu navegador em situações onde a utilização da CPU é alta. Vamos dar um exemplo simples em que o JavaScript passa por um grande loop -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

Isso produzirá o seguinte resultado -

Quando você clica no botão Big Loop, ele exibe o seguinte resultado no Firefox -

O que são Web Workers?

A situação explicada acima pode ser tratada usando Web Workers que fará todas as tarefas computacionalmente caras sem interromper a interface do usuário e normalmente executará em threads separados.

Os Web Workers permitem scripts de longa execução que não são interrompidos por scripts que respondem a cliques ou outras interações do usuário e permitem que tarefas longas sejam executadas sem ceder para manter a página responsiva.

Web Workers são scripts de segundo plano, são relativamente pesados e não devem ser usados em grandes números. Por exemplo, seria inapropriado lançar um trabalhador para cada pixel de uma imagem de quatro megapixels.

Quando um script está sendo executado dentro de um Web Worker, ele não pode acessar o objeto de janela da página da web (window.document), o que significa que os Web Workers não têm acesso direto à página da web e à API DOM. Embora os Web Workers não possam bloquear a IU do navegador, eles ainda podem consumir ciclos de CPU e tornar o sistema menos responsivo.

Como funcionam os Web Workers?

Os Web Workers são inicializados com a URL de um arquivo JavaScript, que contém o código que o worker executará. Este código define ouvintes de eventos e se comunica com o script que o gerou na página principal. A seguir está a sintaxe simples -

var worker = new Worker('bigLoop.js');

Se o arquivo javascript especificado existir, o navegador irá gerar um novo thread de trabalho, que é baixado de forma assíncrona. Se o caminho para seu trabalhador retornar um erro 404, o trabalhador falhará silenciosamente.

Se seu aplicativo tiver vários arquivos JavaScript de suporte, você pode importá-los importScripts() método que leva o (s) nome (s) de arquivo (s) como argumento separado por vírgula da seguinte forma -

importScripts("helper.js", "anotherHelper.js");

Depois que o Web Worker é gerado, a comunicação entre o Web Worker e sua página pai é feita usando o postMessage()método. Dependendo do seu navegador / versão, postMessage () pode aceitar uma string ou um objeto JSON como seu único argumento.

A mensagem passada pelo Web Worker é acessada usando onmessageevento na página principal. Agora, vamos escrever nosso exemplo bigLoop usando Web Worker. Abaixo está a página principal (hello.htm) que irá gerar um web worker para executar o loop e retornar o valor final da variávelj -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

A seguir está o conteúdo do arquivo bigLoop.js. Isso faz uso depostMessage() API para passar a comunicação de volta para a página principal -

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

Isso produzirá o seguinte resultado -

Parando Web Workers

Os Web Workers não param sozinhos, mas a página que os iniciou pode pará-los chamando terminate() método.

worker.terminate();

Um Web Worker encerrado não responderá mais às mensagens nem realizará cálculos adicionais. Você não pode reiniciar um trabalhador; em vez disso, você pode criar um novo trabalhador usando o mesmo URL.

Tratamento de erros

A seguir, um exemplo de função de tratamento de erros em um arquivo Web Worker JavaScript que registra erros no console. Com o código de tratamento de erros, o exemplo acima seria o seguinte -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Verificando o suporte do navegador

A seguir está a sintaxe para detectar um suporte de recurso do Web Worker disponível em um navegador -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

Isso produzirá o seguinte resultado -

O indexeddb é um novo conceito HTML5 para armazenar os dados dentro do navegador do usuário. indexeddb é mais poderoso do que armazenamento local e útil para aplicativos que requerem o armazenamento de grande quantidade de dados. Esses aplicativos podem ser executados com mais eficiência e carregar mais rápido.

Por que usar indexeddb?

O W3C anunciou que o banco de dados Web SQL é uma especificação de armazenamento local obsoleta, portanto, o desenvolvedor da web não deve mais usar essa tecnologia. indexeddb é uma alternativa para banco de dados SQL da web e mais eficaz do que as tecnologias mais antigas.

Características

ele armazena valores de pares de chaves
não é um banco de dados relacional
API IndexedDB é principalmente assíncrona
não é uma linguagem de consulta estruturada
tem suporte para acessar os dados do mesmo domínio

IndexedDB

Antes de entrar em um indexeddb, precisamos adicionar alguns prefixos de implementação conforme mostrado abaixo

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Abra um banco de dados IndexedDB

Antes de criar um banco de dados, temos que preparar alguns dados para o início do banco de dados. Vamos começar com os detalhes do funcionário da empresa.

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

Adicionando os dados

Aqui, adicionando alguns dados manualmente aos dados, conforme mostrado abaixo -

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Recuperando Dados

Podemos recuperar os dados do banco de dados usando com get ()

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

Usando com get (), podemos armazenar os dados no objeto em vez de armazenar os dados no cursor e recuperar os dados do cursor.

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

Removendo os dados

Podemos remover os dados de IndexedDB com remove (). Aqui está como o código se parece

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

Código HTML

Para mostrar todos os dados, precisamos usar o evento onClick, conforme o código abaixo -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

O código final deve ser como -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

Ele produzirá a seguinte saída -

O sistema de mensagens da Web é a capacidade de enviar mensagens em tempo real do servidor para o navegador do cliente. Ele substitui o problema de comunicação entre domínios em diferentes domínios, protocolos ou portas

Por exemplo, você deseja enviar os dados de sua página para um recipiente de anúncio que é colocado em iframe ou voz-versa; neste cenário, o navegador lança uma exceção de segurança. Com as mensagens da web, podemos passar os dados como um evento de mensagem.

Evento de Mensagem

Os eventos de mensagem disparam mensagens entre documentos, mensagens de canal, eventos enviados pelo servidor e web sockets.it descritos pela interface Message Event.

Atributos

Sr. Não.	Atributos e descrição
1	data Contém dados de string
2	origin Contém nome de domínio e porta
3	lastEventId Contém identificador exclusivo para o evento de mensagem atual.
4	source Contém uma referência à janela do documento de origem
5	ports Contém os dados que são enviados por qualquer porta de mensagem

Enviando uma mensagem entre documentos

Antes de enviar uma mensagem entre documentos, precisamos criar um novo contexto de navegação na web criando um novo iframe ou uma nova janela. Podemos enviar os dados usando postMessage () e tem dois argumentos. Eles são como -

message - A mensagem a enviar
targetOrigin - Nome de origem

Exemplos

Enviando mensagem do iframe para o botão

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Receber uma mensagem entre documentos no documento de recebimento

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Canal de mensagens

A comunicação bidirecional entre os contextos de navegação é chamada de mensagem de canal. É útil para comunicação entre origens múltiplas.

Os objetos MessageChannel e MessagePort

Ao criar messageChannel, ele cria internamente duas portas para enviar os dados e encaminhá-los para outro contexto de navegação.

postMessage() - Publique o canal de lançamento de mensagem
start() - Envia os dados
close() - Fecha as portas

Neste cenário, estamos enviando os dados de um iframe para outro iframe. Aqui, estamos invocando os dados em função e passando os dados para o DOM.

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

O código acima está pegando os dados da porta 2, agora vai passar os dados para o segundo iframe

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Agora, o segundo documento trata os dados usando a função portMsgHandler.

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Cross-origin resource sharing (CORS) é um mecanismo que permite os recursos restritos de outro domínio no navegador da web.

Por suponha, se você clicar em HTML5- player de vídeo nas seções de demonstração html5. vai pedir permissão à câmera. se o usuário permitir a permissão, apenas ele abrirá a câmera ou não abrirá a câmera para aplicativos da web.

Fazendo uma solicitação CORS

Aqui, Chrome, Firefox, Opera e Safari usam o objeto XMLHttprequest2 e o Internet Explorer usa o objeto XDomainRequest semelhante, objeto.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

Identificadores de eventos no CORS

Sr. Não.	Manipulador de eventos e descrição
1	onloadstart Inicia o pedido
2	onprogress Carrega os dados e envia os dados
3	onabort Abortar o pedido
4	onerror pedido falhou
5	onload pedido de carregamento com sucesso
6	ontimeout o tempo limite aconteceu antes que a solicitação pudesse ser concluída
7	onloadend Quando a solicitação é concluída com sucesso ou falha

Exemplo de evento onload ou onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Exemplo de CORS com manipulador

O exemplo abaixo mostrará o exemplo de makeCorsRequest () e manipulador onload

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Web RTC introduzido pelo World Wide Web Consortium (W3C). Isso suporta aplicativos de navegador para navegador para chamadas de voz, bate-papo com vídeo e compartilhamento de arquivos P2P.

Se você quiser experimentar? Web RTC disponível para Chrome, Opera e Firefox. Um bom lugar para começar é o aplicativo simples de bate-papo por vídeo aqui . O Web RTC implementa três APIs conforme mostrado abaixo -

MediaStream - tenha acesso à câmera e ao microfone do usuário.
RTCPeerConnection - obter acesso ao recurso de chamadas de áudio ou vídeo.
RTCDataChannel - obter acesso à comunicação ponto a ponto.

MediaStream

O MediaStream representa fluxos sincronizados de mídia, por exemplo, clique no player de vídeo HTML5 na seção de demonstração HTML5 ou então clique aqui .

O exemplo acima contém stream.getAudioTracks () e stream.VideoTracks (). Se não houver faixas de áudio, ele retornará um array vazio e verificará o fluxo de vídeo, se a webcam estiver conectada, stream.getVideoTracks () retorna um array de um MediaStreamTrack representando o stream da webcam. Um exemplo simples são os aplicativos de bate-papo, um aplicativo de bate-papo obtém stream da câmera da web, câmera traseira, microfone.

Amostra de código de MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Captura de tela

Também é possível no navegador Chrome com mediaStreamSource e requer HTTPS. Este recurso ainda não está disponível no Opera. Amostra de demonstração disponível aqui

Controle de sessão, informações de rede e mídia

O Web RTC exigia comunicação ponto a ponto entre navegadores. Esse mecanismo exigia sinalização, informações de rede, controle de sessão e informações de mídia. Os desenvolvedores da Web podem escolher diferentes mecanismos de comunicação entre os navegadores, como SIP ou XMPP ou qualquer comunicação bidirecional. Um exemplo de amostra de XHR está aqui .

Código de amostra de createSignalingChannel ()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};