Caixa de busca por voz no Blogger

Em Outubro de 2011 a blogosfera ganhou um recurso interessante: Caixa de busca que reconhece o que você diz. Mais uma revolução da Google direto para o seu blog só que ainda só para a plataforma Blogger. Será que este é o primeiro passo para outras empresas usarem a tecnologia? Confira nas próximas linhas o código para implementação e nosso ponto de vista sobre seu uso.

Está se perguntando por qual motivo mencionei o mês? Simples, foi nessa data que o Blogando com Facilidade fez a postagem mostrando o código e seu feito. Segundo o Tecnoblog a Google internacional (apenas Google.com) ganhou a busca por voz em Junho e ja estava para teste no Google Tradutor e o motivo pelo qual ela ainda não está sendo usada na página inicial do site em outros idiomas é que o software que aprimora a busca tem seus bilhões de palavras apenas no idioma nativo (até o momento).

• Você sabia? O serviço de busca por imagem da Google reconhece uma outra imagem.

Pela convivência com os serviços da Google, há itens que mantem a busca com o ícone de voz e quando eu as usei notei que para palavras únicas o serviço ajuda muito. Cheguei a fazer um teste usando o Google em inglês (é possível mudar o idioma logado no serviço pela página inicial) e verificar que as palavras em inglês são facilmente encontradas e coisas faladas em português não são bem interpretadas, mas é possível ainda assim efetuar testes como CASA ou AMOR. Sempre uso a palavra amor para a maioria das minhas buscas de teste e LOVE foi uma ótima palavra chave na busca em inglês. Não costumo falar mais que uma palavra em inglês por sempre erro em concordância verbal e em nosso foco para o Brasil, a pesquisa por voz inserida em um BLOGGER é parcialmente funcional.

Digo parcialmente funcional pois até o momento, os navegadores não estão todos preparados para HTML5 mesmo que os principais já tenham anunciados que a leitura de HTML5 acontece, inclusive o Internet Explorer se mostrou um bom interpretador de HTML5 mas como sempre, somente alguns códigos pois a busca da Google ele não lê (espero pode atualizar isso em breve).

Imagem: Busca Google em Inglês por voz

 Falei sobre o uso da NavBar do Blogger em seu blog e nela já existe uma busca para seu blog. Esta é uma forma de se manter 'antenado(a)' sobre atualização e/ou uso de voz nas buscas Google.

PONTOS POSITIVOS
A princípio a busca por voz dentro dos blogs agiliza o processo de digitação. No meu teste não tive problemas para reconhecer muitas palavras. De cinco palavras ditas nas buscas apenas uma foi mal interpretada.
Se bem posicionada no blog, a busca se destaca como símbolo de ótima navegação e design dentro do blog.
É feito em HTML5

PONTOS NEGATIVOS
A estrutura do blog ainda não permite uma busca instantânea como são as buscas atuais no Google e nos serviços onde a voz é usado.
Você tem que clicar no ícone de voz, falar e depois clicar em 'buscar'. Ela não é instantânea.
Como o serviço não é totalmente voltado ao Brasil, ele ainda não reconhece todas as palavras que falamos.
Ele só funciona dentro do Blogger e não em outras plataformas.

COMO USAR O CÓDIGO
 O código simples e mais comum de busca é este:

<!-- box de busca -->

<form action='/search' id='searchform' method='get'>

<input id='s' name='q' onblur='if(this.value==&apos;&apos;){this.value=&apos;search site&apos;};' onfocus='if(this.value==&apos;search site&apos;){this.value=&apos;&apos;};' type='text'/>

<input id='searchsubmit' type='submit' value='BUSCAR'/>

</form>       

<!-- fim box busca-->

Você pode usar só o código do formulário direto no blog (passo 7) ou torná-lo mais atraente seguindo as dicas ensinada pelo Iago do Blogando com Facilidade:
1. Logado no Blogger, escolha seu blog (use um blog de testes)
2. Na coluna lateral esquerda, localize MODELO.
3. Agora no blog, clique no botão Editar HTML e na PopUp clique em Prosseguir, depois marque a opção Expandir modelo de widgets.
4. Aperte (para ser mais rápido) CTRL+F para encontrar algo e procure por:
       ]]></b:skin>
5. Acima deste código, cole o seguinte:

#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/AVvXsEjsiMQ-W8StCOqlxB1pbDRSjIgQ9QikDJbNsUfoWlXDKzqBfmVc8rM1JlPfrBWUaqUKtWkMdW-SXQHUuv-kSsCbQVNWlrUEd7a5YT3FmvFACVpE0jgLI2kAN4sVaZO9I_EmzQaml8MAGrA/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/AVvXsEjsiMQ-W8StCOqlxB1pbDRSjIgQ9QikDJbNsUfoWlXDKzqBfmVc8rM1JlPfrBWUaqUKtWkMdW-SXQHUuv-kSsCbQVNWlrUEd7a5YT3FmvFACVpE0jgLI2kAN4sVaZO9I_EmzQaml8MAGrA/h80/buscar.png) 3px 2px no-repeat;}

6. Salve o modelo. Saia da PopUp.
7. Vá em Layout e crie um novo Gadget se você não tiver um especialmente para buscas em seu blog. (lembre-se que se a sua busca não estiver em um gadget, você tem que continuar no modo HTML do seu blog, antes do passo 6) Crie um de HTML/JavaScript. Cole isso dentro dele:

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

8. Se desejar dê um título para seu Gadget e salve.

Há um vídeo no site Blogando com Facilidade caso queira.

CONCLUSÃO

Se voçê gosta de novidade então está no caminho certo. O uso e inserção do código em seu blog não é ruim nem estraga seu código. Ele é tão leve quanto o código simples de busca no Blogger e se bem empregado, os softwares de reconhecimento de voz usado por deficientes não terão problemas (não neste primeiro momento).
Recomendo que use um botão com texto ao lado do campo de busca (campo de inserção de texto) ou se usar uma imagem como o Iago mostra, então insira o conhecimento já repassado: Tag Title (o código disponibilizado neste artigo ja está adaptado).

Não cheguei a fazer nenhuma busca com mais de uma palavra e para alguns blogueiros ou leitores isso pode ser algo ruim. Tenho em mente que quanto menos palavras para fazer uma busca, é melhor.