De todas as interfaces, a mais desejada é a do Mac OS X, com o incrível dock na parte inferior do desktop etc. A próxima versão do Ubuntu, saindo do forno dia 29 de Abril, tornou o sonho de imitar o Mac OS X mais próximo, mudando a localização dos botões das janelas para o lado esquerdo. Mas o que eu não tinha visto ainda era imitar o painel superior do Mac, que muda seus menus conforme a aplicação que está em foco no momento. Foi então que eu descobri o Globalmenu, um applet do gnome que retira os menus das janelas e os coloca no painel onde o applet encontra-se. Instalei-o e eis o resultado:
Globalmenu
Para instalar o globalmenu no Ubuntu, o caminho mais fácil é instalar o Ubuntu Tweak, na barra lateral do Ubuntu Tweak, vá em ‘Source Center’, e na seção Desktop você encontra o PPA do Globalmenu (aproveite e dê uma olhada nos outros PPAs). Adicione o PPA e atualize a lista de pacotes, vá no Ubuntu Software Center e você encontrará a seção ‘PPA for Globalmenu Team’. Instale o pacote ‘gnome-applet-globalmenu’ e em seguida adcione o applet do Globalmenu no painel superior do Gnome. Pode ocorrer os menus das janelas não aparecerem, para resolver o problema reinicie a sessão. Para que não fique uma confusão no painel superior, recomendo trocá-lo pelo applet ‘Main Menu’. Para completar a interface do Mac OS X, remova o painel inferior e adicione uma ‘dock’, existem várias: AWN, Docky, SimDock, Cairo Dock etc. Recomendo o AWN ou o Docky. Por último, em menção honrosa, completamos nosso desktop Mac OS X com um sistema de buscas para o desktop, instalando o ‘tracker’ e o ‘deskbar-applet’, você tem um sistema de indexação e busca adicionando o deskbar-applet no painel do gnome. Não chega aos pés do Spotlight da Apple, mas ajuda no look & feel.
E finalmente (quase) clonamos a interface do Mac OS X.
]]>
Precisaremos de 4 arquivos no nosso exemplo: index.html, ajax.php, jquery.js, exemplo.js. Você pode baixar os arquivos prontos do exemplo: exemploAjax1.zip. No ‘index.html’ ficará o nosso formulário. No ‘ajax.php’ está o script que vai interpretar a requisição para devolver uma resposta. ‘jquery.js’ é o arquivo do Framework Javascript JQuery, que usaremos no nosso exemplo. Finalmente ‘exemplo.js’ é o arquivo onde ficará nosso código JQuery para interagir com o servidor.
Começamos com o ‘index.html’, fazendo referência aos arquivos ‘.js’ e contendo o formulário:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="exemplo.js"></script> <title>Javascript Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form style="font-family: sans-serif; display: none" id="form1"> Nome: <input id="nome" name="nome" type="text"/><br /> Idade: <input id="idade" name="idade" type="text"/><br /> <input id="enviar" name="enviar" type="submit" value="Enviar"/> </form> </body> </html>
Vejam que eu não determinei o ‘action’, nem o ‘method’ do formulário. Ao usar AJAX, estes dois parâmetros não serão necessários, já que a requisição é feita pelo ‘exemplo.js’. O que será necessário é pegar os valores contidos nos ‘input’ do formulário para podermos formar nossa requisição. Então vamos agora para o ‘exemplo.js’. Vamos acrescentar primeiro um pouco de ‘estilo’ ao exemplo:
$(document).ready(function() { $("#form1").fadeIn(1000); });
Adicione o código acima no seu ‘exemplo.js’. Esse ‘$’ pode parecer estranho, mas é um alias para a classe/objeto JQuery. Primeiramente, o documento HTML precisa estar pronto para poder ser manipulado pelo script. ‘$(document).ready()’ significa que o objeto ‘document’ está sendo passado como argumento para o JQuery, e o método ‘.ready()’ indica que o documento está pronto. Vejam que foi passada uma função como argumento do método ‘.ready()’. Isto é chamado de ‘Callback’. ‘Callback’ é uma função que foi passada como parâmetro e é executada após a função que a chamou, o ‘Callback’ é especialmente útil quando queremos fazer uma cadeia de funções. Como parâmetro para ‘.ready()’, eu chamo uma função anônima: ‘function() {}’. Juntos, o ‘Callback’ e as funções anônimas criam uma cadeia de funções, onde cada função passada como parâmetro depende da função que a recebeu como argumento, podendo usar objetos e variáveis da função pai.
Vejam que coloquei no formulário a propriedade CSS ‘display:none’. Isto é necessário para não mostrar o fomulário, pois iremos usar um efeito de ‘Fade In’ para mostrá-lo. Sem esconder o formulário, este apareceria na tela e em seguida teria início o ‘Fade In’. Faça o teste: retire a propriedade e veja como ficaria estranho sem esconder o formulário primeiro. Na próxima linha executamos no formulário o método ‘.fadeIn()’, este recebe como argumento a duração da animação em milissegundos, e ainda por padrão o método aceita como argumento “slow” e “fast”. Execute o código acima e veja como fica o efeito.
O próximo passo será ler os valores inseridos no formulário. Teremos de ler os valores após o usuário clicar no botão enviar, segue o código:
$(document).ready(function() { $("#form1").fadeIn(1000); $("#form1").submit(function(event){ event.preventDefault(); var username = $("#nome").attr("value"); var userage = $("#idade").attr("value"); $('<br /><span>Loading...</span>').appendTo('#form1'); }); });
Selecionando o formulário, executamos o método ‘.submit()’ que recebe um ‘Callback’. Como argumento para ‘.submit()’ escreveremos a função que executará após o envio do formulário. Vejam que na função foi passada um argumento ‘event’, este é um objeto JQuery que usaremos para controlar o comportamento normal do formulário, que faria o browser fazer uma requisição ao servidor, recarregando a página (podemos dar qualquer nome para o argumento ‘event’). Para não recarregar a página, cancelaremos o comportamento normal com ‘.preventDefault’. Em seguida, selecionamos os nossos ‘input’ marcados com ‘id’, pegamos o valor do seu atributo ‘value’ com o método ‘.attr()’, e atribuimos às variáveis (OBS: é recomendado sempre usar ‘var’ antes da variável ao declará-la, senão a variável torna-se global, o que não é bom). O atributo ‘value’ é gerado pelo browser após o usuário digitar algo no formulário. Para dar um feedback para o usuário criamos um trecho HTML e colocamos dentro do formulário. Ao colocar uma string com código HTML dentro de um seletor do JQuery, este cria o elemento passado no código, e com o método .appendTo(‘#form1′) adicionamos o elemento criado no formulário. Este método recebe como argumento um seletor, que no caso é o id do formulário.
Antes de vermos como é feita a requisição AJAX, vamos olhar o código no servidor, ajax.php:
<?php { $idade = $_POST['idade'] + 30; $nome = $nome . " Envelhecido(a)"; } else { $idade = 0; $nome = $nome . " Bebê"; } $resposta = array("nome" => $nome, "idade" => $idade); $resposta = json_encode($resposta); echo $resposta; ?>;
O servidor é bastante simples, feito com PHP puro: ele recebe os dados do ‘POST’, avalia se a idade passada é maior que 1, se sim, envelhece o usuário. Se não, se o usuário não digitou idade assume-se que ele é um bebê com 0 anos de vida (não é muito inteligente, mas serve para o propósito deste tutorial). Então o servidor cria um array associativo com os dados processados, codifica no formato JSON, e envia a resposta. Atenção é dada ao formato JSON e ao envio da resposta. Sabemos que AJAX significa ‘Asynchronous Javascript and XML’, e que precisamos de um formato de dados para trocar informações entre o cliente Javascript e o servidor. Porque o formato JSON? É mais leve, simples de enteder, e mais fácil de gerar interpretadores. Nossa resposta ao cliente Javascript será uma string desse tipo: {“nome”:”Ivan Envelhecido”,”idade”:”51″}. Veja uma comparação entre JSON e XML neste link: JSON – Wikipedia .
Hora de fazer a requisição AJAX! utilizaremos o método ‘.post()’ do JQuery para isso (acho mais seguro e organizado enviar dados sempre pelo POST). Veja a assinatura do método:
JQuery.post(url, data, function(response){}, dataType);
O primeiro parâmetro, ‘url’, indica a URL para qual será feita a requisição, no nosso caso: ajax.php. ‘data’ são os parâmetros a serem passados para o POST, deve obedecer o formato: {variavel : outra_variavel, variavel2 : “string”}. o terceiro parâmetro é a função que será executada após receber a resposta. O argumento ‘response’ vai receber a resposta do servidor, e pode receber qualquer nome, assim como ‘event’. O quarto parâmetro é o tipo de resposta esperada, e pode ser “json” ou “xml”, vamos escolher o “json”. Vejam como vai ficar a requisição, e o resto do script após receber a resposta:
$(document).ready(function(){ $("#form1").fadeIn(1000); $("#form1").submit(function(event){ event.preventDefault(); var username = $("#nome").attr("value"); var userage = $("#idade").attr("value"); $.post('ajax.php', {nome: username, idade: userage}, function(json){ $("#form1").fadeOut("slow",function(){ $('<div></div>', {"id":"para", text: "Seu nome é "+json.nome+" e você tem "+json.idade+" anos."}) .css({backgroundColor: "yellow", fontFamily: "sans-serif"}) .fadeIn("slow").appendTo('body'); }); }, "json"); }); });
Chamamos o método ‘$.post(‘ajax.php’, {nome : username, idade : userage}, function(json){}, “json”). É feita uma requisição POST com os dados passados para o método e esperamos receber uma resposta JSON. O JQuery automaticamente transforma a resposta JSON válida em um objeto Javascript e nos entrega este objeto no argumento ‘json’, que iremos usar para dar o feedback ao usuário. Se houver qualquer texto antes ou depois do JSON, o método do JQuery não vai transformar a resposta em objeto, nesse caso vai ser necessário fazer o parsing da resposta (dá um pouco de trabalho). A primeira coisa que é feita após receber a resposta é esconder o formulário, já não precisamos mais dele. Então é selecionado o formulário e executamos o método ‘.fadeOut()’. O primeiro argumento é a velocidade “slow”, o segundo é uma função, que usaremos para dar a resposta ao usuário depois que o formulário desaparecer. Para criar um elemento na página, usamos ‘$(‘
)’. Podemos escrever todo um documento HTML para o JQuery criar o elemento. Mas vamos usar uma abordagem mais interessante e passar o conteúdo e atributos do parágrafo usando um segundo argumento: ‘$(‘
‘, {“id”:”para”, text: “Texto”})’, poderíamos passar também o CSS escrevendo um atributo ‘”style”:”color:yellow”‘, mas optei por usar o método ‘.css()’ para aplicar o CSS. Após o CSS, aplico o efeito ‘.fadeIn()’, “slow”, para que ele apareça devagar. Por fim, mando acrescentar o elemento ao ‘body’ do documento com o método ‘.appendTo()’. Lembre-se que a cada método chamado sobre um objeto JQuery, é retornado um objeto JQuery, e você pode chamar mais um método e assim por diante.
Terminamos por aqui este simples tutorial sobre AJAX com JQuery e PHP, usando JSON para troca de dados entre cliente e servidor. Lembrem-se de validar os dados vindos de formulários, e usar ‘htmlstriptags()’ para sanar as strings recebidas no PHP. Quaisquer dúvidas, correções e sugestões, por favor, comentem.
]]>
O cobrador levanta, vai até a porta do meio. Meio desajeitado com os botões, demora um pouco para a plataforma descer. Eu observei atentamente tudo isso, desde como a plataforma funcionava, os movimentos mecânicos, prestei atenção na expressão do cobrador, do cadeirante, e das pessoas em volta. As pessoas parecem surpresas, em um misto de não entenderem como aquilo funciona e a surpresa de ‘isso realmente fuciona’. O cobrador mostra-se bem atento e cuidadoso. Mas no rosto do cadeirante, via-se só uma expressão: Satisfação.
E eu também fiquei satisfeito, pois vi um desejo de liberdade, de poder ir e vir, sendo realizado. Poder ir de um lugar a outro sem ter alguém cuidando de você, deve ser a liberdade mais cobiçada por essas pessoas.
Ter ônibus eficientes na rua não sai barato. Cadeirantes não pagam, e o equipamento é caro. Isso para mim é inclusão social. Diferente do governo que cria bolsa família, bolsa escola, bolsa camisinha, esse tipo de inclusão não é dar algo para pessoas, mas sim permitir que as pessoas realizem aquilo que desejam. Ao dar uma ‘bolsa’ para as pessoas está sendo criada uma situação de dependência. O cidadão acostuma-se com a esmola do governo.
O que deve ser feito é permitir e dar meios para que as pessoas se realizem.
Apesar de termos ônibus eficientes na cidade, a situação está longe da ideal. Outro dia havia um cadeirante na parada de ônibus, e o ônibus que veio não era equipado, então eu fui e ele ficou. Então acho justo que todos os ônibus tenham o equipamento de apoio a cadeirantes, já é difícil para quem pega ônibus, imagine quem espera o dobro, o triplo do tempo, aguardando um ônibus eficiente.
]]>
Mas para matar todo mundo de inveja, o reveillon de João Pessoa será um dos melhores do Brasil! Teremos Buena Vista Social Club Stars! Os lendários músicos cubanos que espalharam a música de Cuba para o resto do mundo. É sensacional!
Esse post é especial para minha amiga Vanessa, que não estará em João Pessoa no reveillon! =**
Fiquem com um gostinho de amargo na boca quem não estará em aqui, pois só em João Pessoa você terá isso:
]]>
Nos três dias o evento contará com palestras, mesa-redondas, minicursos e apresentações de trabalhos dos participantes.
E eu estarei lá trabalhando na Comissão Organizadora, fiz o site http://moodle.virtual.ufpb.br/jornadaead, e estou carregando nas costas a responsabilidade técnica para este evento. =)
Infelizmentevenho postar isso tardiamente, pois as inscrições já encerraram…
Até a próxima!
Quando chegamos lá estava tendo uma corrida, é um barulho infernal no galpão. Fiz meu cadastro e moça da recepção me deu o macacão, o capacete, o capuz e a luva. Me troquei, quando eu botei as luvas já estava me achando um piloto! Fomos para o briefing onde foram explicadas as regras de corrida. Após isso, peguei meu capacete e me dirigi ao kart que iria pilotar. O kart é um pouco apertado e nada confortável, mas assim que você senta no banco e coloca os pés nos pedais, já dá vontade de sair andando.
O carinha veio e ligou meu motor, se você não deixar um pouco o pé no acelerador o motor morre, tem que segurar o bixo com o freio p ele não sair atropelando a galera. Tínhamos 5 minutos de treino para a classificação. Saí devagar, para sentir o carro, como eu nunca tinha dirigido nada na vida, fui bem cauteloso mesmo. Depois de uma volta bem devagar, resolvi acelerar na segunda. Caramba! A primeira sensação de velocidade deu medo! No final da primeira reta tem uma curva em alta velocidade que eu vi a hora eu perder o controle e bater nos pneus, mas tirei o pé e controlei o carro.
Com o tempo fui me acostumando e comecei a andar rápido, mas ainda com muito cuidado, acabei girando duas vezes, a galera me ultrapassava, levei uma batida e muitas vezes tocaram no meu kart, dá um medo danado!
Por mais que eu me esforçasse, não estava conseguindo ser rápido, terminei em último, com a pior volta da corrida, 32 segundos, enquanto os líderes fizeram em 24 segundos a melhor volta.
Mesmo perdendo, gostei muito, muito mesmo, e não foi nada fácil aprender a dirigir num kart, foi uma luta o tempo todo para domar o carro. Vou voltar lá, e da próxima, vou dar o máximo que posso, para ver se faço uma volta de pelo menos 25 segundos.
]]>