Caixa de Busca em HTML5 com Reconhecimento de voz

Yo galera, apedido de uma amigo meu, venho trazer esse tutorial muito bom que é a caixa de Busca em HTML5 com Reconhecimento de voz, a principio é muito fácil de usa-lo e também  dá outro nível para o seu site pois a aparência dele é muito boa. Qualquer dúvida deixe um comentário.

1ºAcesse o seu modelo, vá em Editar HTML e Procure por:

</b:skin>

2º E acima cole o código Abaixo:

#busca-html5 {font-size: 13px;width: 80%;border: 1px solid #BFBFBF !important;margin: 0 0 0 0;padding: 5px 5px;height: 20px; font: normal 100% Arial,Helvetica,sans-serif;color: #2f2f2f;background: #FAFAFA;float: left;border: none;display: inline;outline: none;} input#buscar-busca-html5 {display: inline;margin: 0 0 0 0;height: 32px;width: 35px;border: 1px solid #4189C1 !important;color: white;border: none;cursor: pointer;margin-left: 8px !important;background: #58A9E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkA9Ae1cl4pPiNlXEGTdNUuLl-W5rQ_Z9W8d-oc2zyylX9H6IpGpbtJGxzDge1uJcvtitpyVyJPz2C6UcXjKT8YI6t00R6Q7wRuHHVmmuWffWwifj-bWzdNwZVFnTsOOgc3XYAvrOzrs/h80/buscar.png) 3px 2px no-repeat;text-indent: -9999px;} input#buscar-busca-html5:active {background: #71b8ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkA9Ae1cl4pPiNlXEGTdNUuLl-W5rQ_Z9W8d-oc2zyylX9H6IpGpbtJGxzDge1uJcvtitpyVyJPz2C6UcXjKT8YI6t00R6Q7wRuHHVmmuWffWwifj-bWzdNwZVFnTsOOgc3XYAvrOzrs/h80/buscar.png) 3px 2px no-repeat;}

3º Salve

Agora crie uma pagina Html/JavaScript e cole o código abaixo:

<div id="search"><*form action="/search" id="form-busca" method="get"> <input id="busca-html5" name="q" type="text" value="" x-webkit-speech="true" /> <input id="buscar-busca-html5" type="submit" value="BUSCAR" /><*/form></div>

HTML 5 - DEFINIÇÃO

O HTML5 é o sucessor do HTML .4.0.1. Esta nova versão da linguagem de desenvolvimento se mantém na linha da HTML que permitiu a publicação das primeiras páginas da web, mas introduziu uma série de inovações que o tornam uma séria concorrente para o formato Flash desenvolvido pela [/ sites / informações / adobe.com Adobe ]. As especificações da HTML5, realizadas pelo W3C também não são ainda terminadas, apesar de tudo, notamos que navegadores como o Opera ou InternetExplorer 9 já tratam a HTML5.

Novos elementos:

Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento

com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:

Elementos de estrutura:

- cabeçalho da página ou de uma seção (não confundir com a tag );

- cada seção do conteúdo;

- um item do conteúdo dentro da página ou da seção;

- o rodapé da página ou de uma seção;

- o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

- conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

- representa data e/ou hora;

- junto com as tags e criado para formatar um diálogo:

<meter> - utilizado para representar medidas, que podem ser de distância, de armazenagem em disco, etc.


Elementos Retirados:
Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e <noframes>.


Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente.


Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:


target no elemento <a>;
align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;
background em <body>;
bgcolor nos elementos de tabela e no <body>;
border em <table> e <object>;
cellpadding e cellspacing em <table>;
height em <td> e <th>;
width nos elementos <hr>, <table>, <td>, <th> e <pre>;
hspace e vspace em <img> e <object>;
noshade e size em <hr>.