HTML 5/ JQuery

Comandos de voz e a sua app Web

Eu não sei você, mais o mundo da tecnologia encurtou seu paradigma de mudança de 5 anos para 6 meses. E quem melhor se adaptar a isso, conseguirá tirar o máximo de proveito das oportunidades que forem surgindo.
Até um tempo atrás, eu e você tinhamos apenas 2 maneiras de interagir com sua aplicação web, via Teclado e Mouse. Nem só via Web App, mais também aplicações desktop.
Passou e muito o tempo que isso era artigo de luxo, Apple lançando o Magic Mouse, Microsoft e seus maravilhosos teclados série 5000. Hoje temos Tablets, smartphones, smart tvs, Kinect e por ai vai.

Quando você pagou aquela matéria absurda e idiota chamada Interação Homem máquina na faculdade, você mal podia saber que isso seria realidade, caso contrário você seria um Steve Jobs. Pois é, saímos dos 2 dispositivos e entramos no jogo corporal, onde o Dedo interage com a interface e gestos realizam comandos.

Só que existe por outro lado uma revolução acontecendo silenciosamente, essa sim, é uma verdadeira maneira de como interagir com a tecnologia. Acidentalmente ou via mensagem subliminar Hollywood tem nos inspirado a interagir dessa maneira. Ou vai dizer que você nunca assistiu o Homem de ferro falando com o JAVIRS?

Já tem até gente criando algo semelhante, só que no mundo real.

O que eu estou falando é da revolução de comunicar com seu computador via comandos de voz. Quem tem por exemplo um Kinect e um XBOX Slim comprado de Nov/2010 para cá, pode interagir com seu XBOX via comando de voz , ao mesmo tempo que você usa o sistema, você ajuda os engenheiros da Microsoft a criarem um verdadeiro JAVIRS para sua vida pessoal.

E o SIRI da Apple heim? Esqueçeu dele? Pois é, chega de ficar engordurando o teclado, a sua tela, o jeito e a maneira mais legal de se interagir com seu sistema é realmente via comando de voz e quando isso passar a ser um diálogo como o Watsom da IBM, a coisa vai mudar de cenário.

Talvez quando eu e você tiver 40 anos, daqui 1 década, isso vai ser tão comum, como comprar um pendrive de 16GB na esquina. Não é KurzWeil.

Em fim, eu terei que esperar tanto tempo assim para que essa revolução seja real, para que eu tenha um assistente do tipo JAVIRS ou coisa parecida, bom, só o senhor do tempo dirá, mais hoje você pode testar no SIRI se tiver um iphone, XBox, ou usar as tecnologias da NUANCE. Que na verdade, é a única empresa no mundo que tem expertise no assunto e que está por trás do SIRI e do XBOX Kinect voice commands.

Alias, tanto blá blá blá, eu posso usar isso em uma aplicação real? Bom Poder pode, desde que seu cliente ou você use o navegador Google Chrome ou qualquer navegador web que tenha o engine Webkit para mobile. Assim você pode usar comandos de voz para fazer uma pesquisa, criar novos itens e por ai vai.

Um fato importante mencionar é que, como 99% dos navegadores Mobile usam o Webkit, então provavelmente será fácil, fazer funcionar os comandos de voz pelo lado mobile também.

O Google como sempre saiu na frente, e lançou até uma especificação no W3C sobre o assunto. Onde eu acredito fortemente que a semântica da Web terá muito mais dinamismo, já que o futuro de plug-ins em navegadores é incerto.

Na especificação menciona que se você usar o código:

 
x-webkit-speech

Em seu tag de Input, você dará habilidades de apresentar o seguinte resultado abaixo:



O resultado acima, foi feito apenas com o seguinte código.

<form>
      <fieldset>
                   <label>Fale:</label>
                   <input x-webkit-speech type="text" lang="pt_BR"/>
      </fieldset>
</form>

Clique no ícone do microfone e você pode falar em português mesmo do Brasil e ele vai preencher o campo de input com o que ele entendeu de sua fala.

Ai me veio umas idéias, eu poderia fazer esse mesmo experimento usando alguns eventos do Speech e também usando jQuery para realizar algumas mashups.

A primeira delas é uma App simples de TO-DO-LIST, teste a App abaixo, basta clicar no ícone do microfone e falar.

O código da App acima você pode pegar aqui abaixo:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TO-DO-LIST com comando de voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
 
	form,div {width:400px; margin:0 auto;}
	ul { list-style:none;}
</style>
 
<!-- Código do JQuery para o TO-DO-LIST VIA COMANDO DE VOZ -->
<script type="text/javascript">
	$(document).ready(function(e) {
 
		// escuto a mudança do texto quando for preenchido
		// o campo e executo uma função
        $("#nova_tarefa").live('webkitspeechchange','',function(e){
 
				addTarefa($(this).val());
		});
 
		// limpar todas as tarefas adicionadas
		$("#btnLimpar").click(function(e) {
            	$("#tarefas").html('');
        });
    });
 
		function addTarefa(value){
				$("#tarefas").append('<li><input type="checkbox"/>'+value+'</li>');
				$("#nova_tarefa").val('');
		}
</script>
 
 
</head>
 
<body>
	<form>
    	<fieldset>
        <label>Nova tarefa:</label>
        <input id="nova_tarefa" x-webkit-grammar="builtin:search" lang="pt-BR" type="text" speech x-webkit-speech/>
		 <a href="#" id="btnLimpar">Limpar lista</a>
    	</fieldset>
    </form>
    <div>
    		<ul id="tarefas">
            </ul>
    </div>
</body>
</html>

Para funcionar eu usei uma série de atributos que estão habilitados e não documentos pelo Google, porém se você for analisar o código acima, bem especificadamente nos atributos, verá que tem um built-in search, eu uso o que o Google já possui, um dicionário baseado em SGRL, como especificado no Próprio navegador e seu dicionário de termos.

x-webkit-grammar="builtin:search" lang="pt" type="text" speech x-webkit-speech/

Tudo é possível através do x-webkit-speech, que reconhece todo o trabalho a ser realizado, consultando o serviço do Google, sintetizando a voz, e o retorno disso é um JSON com o termo que ele entendeu baseado no que foi falado, você até pode consultar o código fonte do Chrome aqui.

Ai eu pensei, bom, por que não fazer uma mashup legal, do tipo, pesquisar termos do Twitter, ou postar alguma coisa no twitter falando ao invés de escrevendo.

O código do aplicativo ai acima é esse aqui:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Web e comandos por voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<style type="text/css">
	body{font-family:Verdana, Geneva, sans-serif; font-size:16px;}
	form,div {width:400px; margin:0 auto;}
 
</style>
 
<script type="text/javascript">
    $(document).ready(function(e) {
 
        var URL_SUFIX = "&result_type=mixed";
 
 
        $("#tweettermo").live('webkitspeechchange','',function(e){
             $.getJSON("http://search.twitter.com/search.json?q="+$("#tweettermo").val(),"&callback=?",function(data){
				 $("#resultado").html('');// limpar a cada nova busca
                $.each(data.results, function(i,tweet){
                     // this is where we do what we want with the tweet
                     $("#resultado").append('<p><img src="'+tweet.profile_image_url+'" align="left" />'+tweet.text+'</p><br/>');
                });
             });
 
 
        });
   });
</script>
</head>
 
<body>
<div><img src="twitter_logo.png"/></div>
<form>
<input id="tweettermo"  size="41" autocomplete="off" dir="ltr"
 spellcheck="false" x-webkit-grammar="builtin:search" lang="pt"
 type="text" speech x-webkit-speech>
 </form>
 	<div id="resultado">
 
    </div>
</body>
</html>

Legal não é? Isso abre uma porta absurda para novas implementações, interações com o usuário e você pode até criar seu assistente pessoal JAVIRS combinando strings e comandos.

Até a próxima

Apache Flex/ Flex

Novidades sobre o Apache Flex

apache_flex

Algumas mudanças tímidas porém de grande impacto ocorreram na o projeto Apache Flex, segue uma lista delas.

Mudanças de 01 de Janeiro a 30 de Janeiro de 2012.

* Já temos uma logo oficial como mostrar acima a logo escolhida para o novo projeto e a nova cara do framework que será publicado sob o dominio da fundação Apache.
* O código fonte do SDK já está quase pronto para ser migrado para o SVN do projeto Apache. A demora é em relação a conteúdo protegido por direitos autorais, o que acarreta em um grande volume de mudanças a serem realizadas.

* Nossa lista de mensagens já ultrapassa a marca de 3.5k e-mails trocados nesse período, mais e mais desenvolvedores estão vindo para o projeto.

* O novo compilador já estará junto ao SDK, ele vai compilar 2x ou 3x mais rápido que o compilador atual, e sua função de auto increment está incrível.

* Um blog já está montado e será um canal de comunicação dos PPMC para o pessoal que acompanha o projeto.

Teremos mais novidades no segundo trimestre desse ano, quando soltaremos algumas especificações novas e documentação já sob dominio da fundação Apache.

Apache Flex

Flex é aceito na fundação Apache

Uffa! No apagar das luzes de 2011, a fundação Apache aprovou o pedido da Adobe para incubar o Flex como projeto open-source.

Eu sou o único brasileiro no meio do SDK que irá ajudar a manter organizado o SDK daqui para frente, você também pode se tornar um colaborador, enviando bugs, criticas na página oficial do projeto que entrará no ar ainda nesse trimestre.

Tem muito trabalho pela frente, mover código para o SVN da fundação apache, arquivos de ajuda, documentação, a idéia é de fato ter um SDK 100% open-source, fora das garras de uma unica empresa.

Em contra partida, aproveito a ocasião para pedir para vocês assinarem a lista de discussão na fundação Apache.

Basta enviar um e-mail para flex-dev-subscribe@incubator.apache.org e você já está dentro da lista.

O que eu vejo daqui para frente?

Novos componentes estão sendo preparados pela própria Adobe, para ser a primeira contribuição em massa para o SDK, sob o controle da fundação Apache.

Notícias/ Pessoal

Seja criativo em 2012

Feliz 2012 rapaziada. Como é bom estar vivo e com saúde para escrever o primeiro post de 2012 para vocês.

Adoraria cagar várias regras, listas de resoluções e conselhos infundados que muita gente coloca no blog como forma de falar “Olha eu aqui!”, porém como toda virgula em um paragrafo tem o sentido de completar ou desmificar o que foi escrito antes dela, quero só dizer duas palavras. QUEM, REINVENTE-SE.

QUEM – Quem você quer ser afinal de contas na sua vida? Você já fez essa pergunta? Não importa a resposta, siga sua intuição, seja VOCÊ. Quando você descobri aquilo que você quer ser, lute esse ano para isso valer a pena.

REINVENTE-SE, em 2011 eu comecei a re inventar o que seria de mim nesse ano. Como você, meu saco da satisfação é longo e demora encher, eu nunca fui de me acomodar com aquilo que eu vivo diariamente, sempre investigo, dando foco no que me dará resultado, seja financeiro ou intelectual.

Eu li 3 livros em 2011 sobre a vida, eu assisti mais videos no youtube sobre cosmo, astronautas do que estudei. Eu aprendi a programar em Javascript, eu misturei problemas comuns em grandes desafios, visitei 4 países diferentes. E Ainda tenho 3 aplicativos para programar que vem se arrastando desde 2010. Eu ainda tenho tanta coisa para viver.

E nesse ano vou colocar em prática o que eu me preparei ano passado.

Viva esse ano do seu jeito. Curta bastante suas decisões e escolhas, se errar, não se sinta culpado, merda acontece toda hora e você não é tão perfeito assim para não errar, agora será burro se cometer novamente.

Feliz 2012++