Caixa de busca por voz no Blogger

sábado, 14 de abril de 2012

IMAGEM: Representação de uma busca com ícone de voz
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).

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
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://lh4.googleusercontent.com/-QE1imp0WR7E/ToaJ-T4s_tI/AAAAAAAACJM/OIwx673LHVc/h80/buscar.png) 3px 2px no-repeat;text-indent: -9999px;}
input#buscar-busca-html5:active {background: #71b8ef url(https://lh4.googleusercontent.com/-QE1imp0WR7E/ToaJ-T4s_tI/AAAAAAAACJM/OIwx673LHVc/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.

2 comentários:

  1. Respostas
    1. =D Muito obrigado Fernanda. Pelo que eu notei na web, ela é pouco conhecida ainda.

      Excluir

Use este espaço para perguntar, questionar ou dar algum complemento sobre o artigo em questão. Todos os comentários publicados no Arruma Blog são de inteira responsabilidade dos seus respectivos autores. A finalidade do comentário é proporcionar ao leitor o poder de resposta sobre a postagem apenas. Neste campo não será aprovado comentários para publicar link e/ou material com conteúdo pornográfico de qualquer espécie, discriminatório ou ofensivo de qualquer natureza; que enviar informações sobre atividades ilegais e/ou incitar crimes ou violência. Para finalidades comerciais ou contato direto com o autor damos a opção de 'entrar em contato no topo da página'.

É expressamente proibido utilizar o espaço de comentários para engajar-se em atividades de cunho comercial, como vender produtos, procurar anunciantes e patrocinadores, divulgar informações pessoais de contato, além de veicular banners de qualquer espécie. Também serão apagados comentários de auto-promoção ou que não sejam pertinentes ao artigo em questão.

Todos os comentários são moderados e poderão ser excluídos caso sejam considerados inadequados, ofensivos ou alheios ao objetivo do blog. Este é blog é protegido pela lei de direitos autorais vigente no Brasil.


















 
Arruma Blog © 2009 - 2013 | Desenhado por Bubble Shooter | Direitos reservados | Obrigado pela visita