Leandro Lima

HTML5: Insira uma pesquisa por voz

Por | Comentários: 7

Que HTML5 é revolucionário, isso não da pra negar. E é bem divertido as novas interações que ele nos proporciona.

Neste post vou colocar uma dica bem legal para quem quer deixar seu site mais interativo. Trata-se do atributo de HTML5 speech que faz com que um usuário possa preencher um formulário usando um comando de voz.

Por enquanto, o atributo funciona apenas no Chrome, mas acredito que em breve poderemos ver em todos os browsers. Ele também só serve para o elemento <inpup> com o type definido para text, number, tel ou search.

Browsers que não suportam, mostrarão apenas um campo de formulário comum.

Eu achei muito bom, e vejo inúmeras utilidades futuras para isso: facilitar o preenchimento de formulários para usuários de smartphones ou tablets, para usuários com mobilidade reduzida que não conseguem utilizar um teclado com rapidez ou para usuários que, por algum motivo, estão sem seus teclados.

Para aplicar, basta adicionar a linha x-webkit-speech no seu input:

E agora um exemplo de aplicação (clique no ícone do microfone dentro do formulário e fale para que o seu texto seja reconhecido):


Bom, esta é uma dica pra todo mundo que, assim como eu, está maravilhado com as novas possibilidades que o HTML5 pode trazer! =)

Tags: > ,

Leandro Lima

Leandro Lima

Designer, palestrante, nerd e co-fundador da PopUp junto com a Dani Guerrato. É apaixonado por criatividade e tecnologia. Trabalha com UX Design e Design de Interfaces há mais de 8 anos. Adora jogar xadrez, é fã do Rubens Barrichello e acredita que o universo tem 10 ou 11 dimensões.

Você pode achar o Leandro por aqui: Facebook - Twitter - - Instagram - LinkedIn

  • http://www.popupdesign.com.br/ Leandro Lima

    HTML5 FTW! =D

  • http://www.facebook.com/maykel.esser Maykel Esser

    Demais!

  • http://www.facebook.com/sarasscarvalho Sara Souza

    Show!

  • Thales Medeiros

    No meu não deu certo. Atualizei o Chrome e mesmo assim nada.

  • Gustavo Bathu Paulus

    para text area não tem como?

  • Jamper Opps

    ola leandro, me chamo marcelo e se nao fosse pedir demais gostaria muito de uma resposta sua. na faculdade fazia o comando acima e dava certo, porem agora nao aparece o microfone mais, sabe me dizer o porquê…? acho que seja essa nova atualizaçao do google, se for sabe o que fazer…? obrigado desde ja.

  • Jamper Opps

    Pessoal quem poder me ajudar nisso, prfv meu email: marcelo_09mendes@hotmail.com grato!

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.