TidBits

Sep 11

Apostila de como desenvolver aplicativos para Orkut, iGoogle e MySpace

Sabe aqueles aplicativos do orkut e do iGoogle? Eles são desenvolvidos utilizando OpenSocial.

O OpenSocial é um serviço que oferece APIs para desenvolver aplicativos para redes sociais, como Orkut, iGoogle, hi5, MySpace entre outros.

Opensocial - api para desenvolver aplicativos para Orkut, iGoogle, MySpace

Apenas com JavaScript e HTML é possível criar aplicativos no OpenSocial.

No momento estou criando um widget e devido a dificuldade de encontrar documentação, juntei tudo que consegui, em português, e montei uma apostila do OpenSocial. São 103 páginas, do documentação disponibilizada pela google, em formato pdf.

Quem for desenvolver alguma coisa, me adiciona do sandbox.
=)

A apostila está disponível aqui.

Sep 10

Yammer, igual ao Twitter, só que útil

Não tem coisa mais chata que o querido diário em doses homeopáticas do Twitter. As lamúrias intermináveis e as notícias que você não quer saber sobre seus amigos. “Chuva aqui”, “Tomando guaraná”, ou qualquer outra ação ou pensamento idiota que passe pela cabeça deles.

Ok, há de se falar que o Twitter tem suas vantagens (desde que você siga as pessoas certas). E ainda assim, as probabilidades de você ler coisas inúteis são perto de 70%.Ok também que o Twitter não tentou dizer que não era o que é: um serviço de microblog pra as pessoas falarem “what are doing”.

De todo jeito, pra quem gosta, ou pra quem não gosta, eu achei que dessa vez encontraram uma aplicação mais interessante pra ferramenta do Twitter: o Yammer. O Yammer é um Twitter corporativo, e ao invés do “O que você está fazendo?” ele pergunta “Em que você está trabalhando?”.

O Yammer fica fechado somente para as pessoas daquela empresa, e torna as coisas mais fluidas. Comunicação corporativa, instântanea, e acessível para todos na empresa de uma forma não hierarquizada me parece uma grande sacada.

Aos freelas de plantão, pode ser uma ótima ferramenta pra se comunicar com o restante da equipee clientes pra evitar os “disse-não-disse” de todo projeto. (A ferramenta é gratuita pra o uso “comum” e só é paga se as empresas quiserem ter funcionabilidades adicionais como o controle de bloquear, deletar usuários e conteúdo).

PS: Apesar de eu ter falado mal do Twitter, já diz o ditado - não pode detê-los, junte se a eles. Tb estamos lá: meu twitter e o do Danilo

Sep 9

O que é JSON, como e quando utilizar?

JSON (JavaScript Object Notation) é uma estrutura de dados em javascript.
Apesar de começarem a falar muito disso recentemente, JSON não é uma tecnologia nova, faz parte do javascript puro e não precisa de nenhum script pra trabalhar.

O JSON pode substituír o XML, e faz isso muito bem na hora de trabalhar com respostas em AJAX.
A estrutura de dados fica mais simples de trabalhar e o tempo de execução de um script lendo dados em JSON é dezenas de vezes mais rápido do que ler um conteúdo XML.

As principais linguagens de programação server side tem suporte pra escrever dados em JSON.

Veja o exemplo da estrutura de dados abaixo

var dados = {
	"aluno" : [
		{"nome":"João", "provas":  [ { "nota":8 }, {"nota":6}, {"nota":10 }, {"nota":2 } ] },
		{"nome":"Maria", "provas": [ { "nota":3}, {"nota":5}, {"nota":8 }, {"nota":1 } ] },
		{"nome":"Pedro", "provas": [ { "nota":7}, {"nota":6}, {"nota":6 }, {"nota":8 } ] },
	]
};

Veja como seria a mesma estrutura de dados em XML:

<?xml version='1.0' encoding='utf-8'?>
<aluno>
	<nome>Danilo</nome>
	<provas>
		<prova nota=8/>
		<prova nota=6/>
		<prova nota=10/>
		<prova nota=2/>
	</provas>
</aluno>
<aluno>
	<nome>Belinha</nome>
	<provas>
		<prova nota=3/>
		<prova nota=5/>
		<prova nota=8/>
		<prova nota=1/>
	</provas>
</aluno>
<aluno>
	<nome>Carla</nome>
	<provas>
		<prova nota=7/>
		<prova nota=6/>
		<prova nota=6/>
		<prova nota=8/>
	</provas>
</aluno>

Apesar do xml ter mais chaves e colchetes, fica mais facil de ler os dados:

var jsonData = eval(dados);

E pronto, bem mais simples que xml!

Depois para obter os dados funciona assim:

document.write(jsonData.aluno[0].nome);
// Escreve o nome do primeiro aluno: "Danilo";

document.write(jsonData.aluno[1].provas.nota[3]);
// Escreve a nota da última prova da Belinha ;

document.write(jsonData.aluno[2].provas.nota[0]);
// Escreve a nota da primeira prova da Carla ;

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
}
// escreve o nome de todos os alunos

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
	for(j=0;j<jsonData.aluno[i].provas.length;j++){
		document.write(jsonData.aluno[i].provas[j].nota);
	}
}
// escreve o nome e todas as notas de todos os alunos

No site JSON.org pode encontrar mais informações, em português.

Sep 9

Circuito Senac de Tecnologia da Informação 2008

Mais um evento interessante - e dessa vez em tempo hábil para assistirmos (piada interna!). Para quem reclama do preço da educação no Brasil, é uma grande oportunidade para fazer um networking, aprender coisas novas a preços bastante acessíveis.

No Circuito, as oficinas e workshops vão custar apenas 10 reais, e a entrada nas palestras é com 1 kg de alimento não perecível ou 2 produtos de higiene pessoal. Bom motivo para levantar a bunda da frente do computador e acrescentar uns itens interessantes no currículo e na massa cinzenta.

Os temas do circuito vão abranger Aplicativos, Computação Gráfica, Desenvolvimento de Sistemas, Gestão de TI, Infra-estrutura de redes e Web. O evento acontece entre setembro e outubro, e tem datas que variam conforme as unidades do Senac.

Maiores informações no hotsite do Circuito.

Sep 8

DockMenu igual ao MAC em JavaScript

Script bem leve (2kb) que faz um menu igual ao mac e não precisa de nenhum framework como Jquery, Mootols, Prototype.

A estrutura dele é simple e fácil de ser implementada.

Coloque Insira o css:

div#container_dock { height: 96px; position: relative; width: 450px; }
div#dock {text-align: center; position: absolute; left: 0; bottom: 0;  width: 450px;}
div#dock a img{ width: 0px; }
div#legend { text-align: center; font-weight: bold; font-size: 12px; }

Chame o JavaScript e faça a chamada para o dock

<script type="text/javascript" src="_scripts/dockMenu.js"></script>
<script type="text/javascript">
	window.onload = function(){
		// os 3 parâmetros são id do menu, largura mínima e máxima do ícone
		dock = new dock("dock", 40, 96);
	}
</script>

Em seguida faça o HTML :

<div id="dock">
	<a href="http://www.tidbits.com.br/como-usar-jquery-junto-com-prototype-ou-mootols" target="_blank"><img src="http://www.tidbits.com.br/download/_images/Home.gif" alt="Jquery"> </a>
	<a href="http://www.tidbits.com.br/gerador-de-lorem-ipsum-para-ubiquity" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/MyComputer.gif" alt="Lorem Ipsum"> </a>
	<a href="http://www.tidbits.com.br/google-chrome-e-a-guerra-dos-browsers" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Books.gif" alt="Chrome"> </a>
	<a href="http://www.tidbits.com.br/mobiemobz-orkut-e-a-web-para-o-mundo" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Applications.gif" alt="MobieMobz"></a>
	<a href="http://www.tidbits.com.br/first-child-e-last-child-cross-browser-usando-css-condicional" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Chat.gif" alt="Pseudo Classes"> </a>
	<a href="http://www.tidbits.com.br/a-interface-do-usuario-do-futuro-em-3-etapas" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/SoundApp.gif" alt="Interface"></a>
	<a href="http://www.tidbits.com.br/plugin-de-mascara-para-jquery-masked-input" target="_blank"><img src="http://www.tidbits.com.br/download/_images/Printers.gif" alt="Máscara"></a>
	<a href="http://www.tidbits.com.br/nao-torturem-os-usuarios-com-captcha" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Help.gif" alt="Captcha"> </a>
</div>
<div id="legend"></div>

Repare que todos estão com target=”_blank” pra abrir em outra página, mas isso não é necessário.

E o resultado é esse.

Repare também que o alt da imagem é o que aparecerá na legenda.

Tradução / adaptação do mestre Gerard Ferrandez do www.dhteumeuleu.com.

Sep 7

Não torturem os usuários com CAPTCHA

Normalmente, todos esses sistemas de CAPTCHA são realmente chatos - principalmente porque eles costumam vir acompanhados de formulários gigantes.

Pra quem não sabe, o CAPTCHA (Completely Automated Public Turiing−test to Tell Computers and Humans Apart, ufa!), serve para evitar os temidos spans, enchendo de dados inúteis as bases de dados e formulários. No geral, são sempre umas letras horríveis e ilegíveis (e o pesadelo dos usuários).

Modelo de Captcha fora de controle

Como na maioria dos casos, eles realmente não podem ser evitados, de um tempo pra cá algumas pessoas têm buscado alternativas para os CAPTCHAS. Uma opção é o ReCAPTCHA - um sistema de pronto de CAPTCHA que pode ser utilizado para sites e blogs (incluindo Wordpress). Ao invés de letras, ele traz palavras; apesar das palavras estarem ligeiramente distorcidas, a proposta deles é interessante: os dados preenchidos pelos usuários, são aproveitados para digitalizar palavras que os programas digitalizadores não entenderam.

Modelo do ReCAPTCHA

Nesse caso, como o sistema não sabe qual é a resposta certa para aquela palavra, são utilizadas 2 palavras para o reconhecimento de usuário humano: uma associada a uma resposta correta para o sistema, e a outra para decifrar a palavra desconhecida.

Segundo o site do ReCAPTCHA, o número de CAPTCHAS preenchidos diariamente é em torno de 60 milhões, o que significa que somadas são gastas 150mil horas diárias com preenchimento de CAPTCHAS. Por isso, o uso do ReCAPTCHA seria converter essas horas em uma tarefa realmente útil: digitalizar livros. Infelizmente a iniciativa só abrange livros em inglês.

Uma outra alternativa, mais acessível é um modelo de CAPTCHA mais inteligente, onde os usuários precisam dar respostas certas para perguntas lógicas e simples, como por exemplo “Quanto é 3+2?”. A resposta é única, simples, e os robôs são incapazes de compreender o sentido semântico da questão.

Além de serem menos irritantes, esse tipo de recurso é infinitamente mais acessível, pois a pergunta é escrita em html, e pode ser lida pelos leitores de telas para cegos ou bem visualizados por pessoas de baixa visão, já que o texto pode ser ampliado.(Para Wordpress, a dica é esse plugin).

« Pr�ximo 1 2...10 11 12 13 14 15 16 17 18 192021 22 Anterior »