Intel XDK New

É recompensador quando a tecnologia cumpre a sua função e nos mostra resultados no tempo esperado.

“The Intel® XDK NEW development system is designed for developers who want to use their HTML5 expertise to build hybrid HTML5 apps for mobile devices (e.g., phones and tablets) and other platforms that host HTML5 web apps (such as a Google Chrome* extension or a mobile web site).”

No caso deste Intel XDK New demorou mais uns minutos: embora a interface de instalação (install_GUI.sh) diga que apenas o Ubuntu 12.04 é suportado, no arquivo vem um rpm.

O download pode ser feito no site oficial. Depois de descomprimir o arquivo, encontrarão o rpm no directório “rpm” (será qualquer coisa como intel-xdk-0154-2.0-0.x86_64.rpm, sendo que o nome do arquivo depende da versão)

A instalação decorrerá sem problemas: basta executar na linha de comandos

$ sudo yum install intel-xdk-0154-2.0-0.x86_64.rpm

Depois disto são precisos mais dois pequenos truques:

  1. corrigir permissões:
    $ sudo chmod 0755 /opt/intel/XDK/
  2. corrigir o symlink libudev.so.0: no meu caso a correcção passou por
    $ sudo unlink libudev.so.0; sudo ln -s /usr/lib64/libudev.so.1 /opt/intel/XDK/libudev.so.0

Depois disto, a oferta da Intel cumpriu.
Arrancou
interface principal do Intel(R) XDK Newe em poucos minutos deu frutos (Sapo A5)

Screenshot da aplicação a correr num Sapo A5

Uma abordagem suave aos objectos em JavaScript

Nota introdutória: este texto foi escrito para um público alvo muito específico, sendo o objectivo principal o de introduzir o paradigma OO em JavaScript. Muita da beleza do paradigma e até da própria linguagem serão eventualmente matéria de desenvolvimento mais adiante.

A Programação Orientada a Objectos (do inglês Object-Oriented Programming – OOP) é um paradigma relativamente recente, introduzido no início dos anos 60.

Na génese deste paradigma está a noção do universo compostos por objectos que interagem entre si. Como o software visa resolver problemas do “mundo real”, a programação por objectos pretende simplificar a representação da realidade onde os objectos têm características (propriedades) e acções (métodos) que são capazes de realizar.
Continue reading

opensocial e shindig

The web is better when it’s social.

É com este slogan que se apresenta o projecto opensocial.org:

“Friends are fun, but they’re only on some websites. OpenSocial helps these sites share their social data with the web. Applications that use the OpenSocial APIs can be embedded within a social network itself, or access a site’s social data from anywhere on the web.”

Numa altura em que as redes sociais se multiplicam diariamente, os que já estavam presentes na internet precisam encontrar o equilibro no seu modelo de negócio aproximando os utilizadores do(s) seu(s) perfil social, concedendo aos seus sites áreas de interacção social.

Quando os grandes se juntam e aceitam falar a mesma língua tudo se simplifica.
O ilustre quadro de directores da OpenSocial (fundação sem fins lucrativos) assim o comprova:

  • Mike Jones, MySpace
  • Ramu Yalamanchi, hi5
  • David Glazer, Google
  • Joe Greenstein, Flixster
  • Sam Pullara, Yahoo!
  • Jay Parikh, Community Representative
  • Joseph Smarr, Community Representative

O resultado é notório e para quem conhece e/ou já experimentou o iGoogle ainda mais.
A especificação opensocial tem como princípio o acesso/partilha do perfil social dos utilizadores por toda a internet, disponibilizando uma API robusta para o efeito.

O meu contacto com esta tecnologia deveu-se à necessidade de implementar o conceito de widget/gadget. Não pretendendo reinventar a roda, este trabalho conjunto dos gigantes da web pareceu-me o caminho ideal a seguir.
No próximo passo a necessidade de alojar localmente os gadgets e a solução Shindig da Apache Software Foundation.

Tive oportunidade de fazer alguns testes mas quando o assunto é comunicar com Facebook, Twitter, GMail e afins, a coisa complica-se.
Daí a utilização desta combinação ficar, por enquanto, relegada para o plano experimental.

Se por aqui passar algum utilizador, fã ou mesmo fanático desta solução a caixa de comentários está aberta e eu interessado em partilhar conhecimento.

Guardar JSON num cookie

Nada de mais: guardar JSON num cookie.
Esta ideia surgiu dada a necessidade de guardar as preferências do utilizador numa determinada janela. Pareceu-me razoável  e desenvolvi um protótipo (se repararam no negrito não preciso explicar mais).

À partida a performance será sempre melhor do que fazer parsing de strings uma vez que JSON é um subset de JavaScript (neste teste a média é de 12ms mas o cookie é muito “simples”).

Ainda assim restam algumas preocupações:

  1. dependendo da complexidade das estruturas a armazenar incorremos no risco de extrapolar a capacidade do cookie (4096 bytes num limite de 20 cookies por cada host ou domínio);
  2. fazer o eval do conteúdo do cookie não é seguro até garantirmos a sua autenticidade (a não violação do mesmo);

(mais sobre cookies no RFC 2109 – HTTP State Management Mechanism)

Deixando as preocupações para uma próxima etapa, segue o código fonte

<html>
	<head>
		<title>coockie demo</title>
		<script type="text/javascript">
			function getCookie()
			{
				var data;
				if (document.cookie.length == 0)
					return false;
 
				var startPos = document.cookie.indexOf('tempo=');
				if (startPos != -1) //we have cookie
				{
					startPos = startPos + 6; //go ahead
 
					//find end of data
					var endPos = document.cookie.indexOf('}',startPos);
 
					if (endPos != -1) //cookie is ok and we have data
					{
						data = document.cookie.substring(startPos,endPos+1);
						data = eval('('+ data +')');
						console.log(unescape(data.city));
 
						return true;
					}
					else{
						//cookie is not ok so lets rewrite it!
						return false;
					}
				}
			}
 
			function setCookie(name)
			{
				var expDate = new Date();
				expDate.setDate(expDate.getDate()+ 365);
				document.cookie = "tempo={'city':'"+ escape(name) +"'};expires="+ expDate.toGMTString();
			}
			function run()
			{
				if (!getCookie())
				{
					var name = prompt('Your city name here!');
 
					setCookie(name);
				}
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			console.time('getCookie');
			run();
			console.timeEnd('getCookie');
		</script>
	</body>
</html>

Safari Web developer tools

Apesar do post onde relato a excelente experiência com Opera Unite, enquanto developer contínuo a lidar com os vários browsers: Firefox, Safari e agora Opera.

O  Firebug é um add-on para Firefox imprescindível para qualquer developer que permite a edição, debug e monitorização de CSS, HTML e JavaScript em tempo real e em qualquer página.

Usando o Firefox como referência no desenvolvimento, o Firebug é a ferramenta perfeita (ou muito perto disso) particularmente para debug de JavaScript.

No entanto quando lidamos com implementações particulares de JavaScript, como é o caso do objecto XMLHttpRequest, surge a necessidade de analisar o comportamento do nosso código nos vários browsers. Portanto pretendemos algo semelhante ao Firebug para Safaria e Opera.

Para o primeiro, Safari, o caso é simples: o pessoal da Apple deixou um mimo “escondido”. Para o activar basta abrir um terminal e executar o seguinte comando (todas as instâncias do Safari devem ser fechadas):
defaults write com.apple.Safari IncludeDebugMenu 1
A partir daqui ficará disponível um novo menu: “Develop”, com um vasto leque de opções incluindo o debugger de JavaScript.

No caso do Opera Unite não é necessário qualquer tipo de mágica: basta aceder aos menus Tools > Advanced > Developer Tools.

Safari Developer Tools

Safari Developer Tools

Opera Developer Tool

Opera Developer Tool

Reescrever variáveis de URL

Para possivelmente vos poupar 20min (isto se googlarem antes de meter mãos à obra), deixo abaixo um pedaço de código em JavaScript que permite reescrever as variáveis passadas pelo URL.
O Princípio é básico: doURL recebe uma string no formato variavel1=valor1&variavel2=valor2 (com um número variável de variáveis) actualizando aquelas que existirem no URL da página onde é executado e adicionando as demais. Formado o novo URL o browser é redireccionado com a nova query string.
Continue reading

AntiSpamMath

A propósito de uma necessidade específica que sentimos em forum.semmais.com escrevi este pequeno módulo em JavaScript, tendo como objectivo diferenciar entre computadores e humanos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/*
Script Name: 	AntiSpamMath
Script Version:	1.1
Script Date:	28/March/2009
Author Name: 	Paulo A. Silva
Author Email:	pauloasilva[at]gmail[dot]com
Author Website: http://www.pauloasilva.com
*/
 
function ASMath(ApplyTo)
{
	this.FormID = ApplyTo;
 
	this.operand1 = null;
	this.operand2 = null;
 
	this.answer = null;
 
 
	this.SetOperands();
	this.SetAnswer();
	this.SetForm();
}
 
ASMath.prototype.SetOperands = function()
{
	this.operand1 = Math.floor(Math.random() * 11);
	this.operand2 = Math.floor(Math.random() * 11);
 
	this.answer = this.operand1 + this.operand2;
}
 
ASMath.prototype.SetAnswer = function()
{
	var bits = [];
	var dividend = parseInt(this.answer);
	var remainder = 0;
 
	while (dividend >= 2) {
		remainder = dividend % 2;
		bits.push(remainder);
		dividend = (dividend - remainder) / 2;
	}
	bits.push(dividend);
	bits.reverse();
 
	this.answer = bits.join("");
	document.getElementById("ASMathA").value = this.answer;
}
 
ASMath.prototype.VerifyAnswer = function()
{
	var Answer = document.getElementById("ASMathQ");
 
	return Answer.value == this.operand1 + this.operand2;
}
 
ASMath.prototype.SetForm = function()
{
	var Form = document.getElementById(this.FormID);
	var Field = document.getElementById("ASMathQ");
 
	var Me = this;
 
	Field.value = Me.operand1 +' + '+ Me.operand2 +' = ?';
 
 
	Form.onsubmit = function()
	{
		if (!Me.VerifyAnswer())
		{
			alert("Are you sure you're human?\nDon't be shy, use your fingers!");
			return false;
		}
 
		return true;
	}
 
	Field.onfocus = function()
	{
		this.value = "";	
	}
 
	Field.onblur = function()
	{
		if(this.value == "")
		{
			Me.SetOperands();
			Me.SetAnswer();
			Field.value = Me.operand1 +' + '+ Me.operand2 +' = ?';
		}
	}
}

A integração num form HTML é bastante simples, merecendo mesmo assim um exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
	<head>
		<title>Demo</title>
 
		<script language="JavaSript" type="text/javascript" src="AntiSpamMath_V2.js">
		</script>
	</head>
	<body>
 
		<form id="ASMathF" name="demo" action="demo" method="post">
			<input id="ASMathQ" type="text" name="ASMathQ" />
			<input id="ASMathA" type="hidden" name="ASMathA" />
			<input id="ASMathB" type="submit" name="Submit" value="Ok" />
		</form>
		<script type="text/javascript">
			var ASMath = new ASMath('ASMathF');
		</script>
	</body>
</html>

O código está disponível ao abrigo da licença Creative Commons by-nc-sa 2.5 Portugal podendo fazer o download a partir daqui: AntiSpamMath

Nota: Embora funcional, o campo “ASMathA” não estava a ser preenchido pelo que o código fonte foi actualizado.