NonsenseBB

Há coisa de um mês atrás estava eu ligeiramente aborrecido e com vontade de fazer algo criativo mas sem grandes ideias. Não sei muito bem como mas veio-me à cabeça uma única ideia marada de tentar preparar um design com rectângulos. Não sabia para que é que iam servir os rectângulos nem sequer muito bem o aspecto que queria que a coisa tivesse, só sabia mesmo que tinha de ter rectângulos espalhados por todo o lado e atirei-me ao editor de imagem.

O primeiro passo foi escolher umas cores. É engraçado como a cor castanha, que em tempos praticamente declarei como a minha maior inimiga, se tornou ultimamente numa autentica constante em todos os designs que faço. Um sinal da minha evolução nesta arte suponho.

Escolhidas as cores comecei a brincar com vários tipos de conjugações mas faltava sempre uma razão de ser para aquilo. O que iam conter aqueles quadrados? A resposta veio mais tarde quando decidi colocar em dia as minhas séries ao descobrir que o MyTVShows do Ivo estava novamente em baixo: os quadrados vão ter séries!

E assim surgiu o TV Wall: uma “parede” virtual onde se pode colocar as nossas series favoritas. No inicio a ideia era só isto: não havia cá episódios, nem sequer sinopses, apenas as séries e umas imagens bonitas mas o salto para algo mais completo e funcional era fácil de fazer e a API do TheTVDB estava mesmo ali à mão de semear com virtualmente tudo o que é preciso.

   

 
Tinha então uma ideia e o aspecto da mesma, duas partes já por si complicadas, mas faltava coloca-la em prática e acima de tudo saber como o fazer. Em que linguagens? Em que meio? Para mim a resposta foi simples: Javascript, HTML e CSS. Andava já há uns bons 3 anos a prometer a mim mesmo que ia aprender mais de Javascript e esta foi uma oportunidade de ouro para o fazer.

Meti mãos ao trabalho e comecei a desenvolver código javascript para tornar isto funcional. Pelo caminho fui aprendendo a fazer pedidos AJAX, a converter de XML para JSON usando php e até como executar código assíncrono em php. No futuro ainda tenho planeado usar o Local Storage e o Session Storage que vieram com o HTML5 para guardar informações, um interface catita para telemóveis com touchscreen e ligação ao MyTVShows para poder marcar episódios como vistos.

PHP pode parecer uma opção estranha no meio disto tudo mas tem uma razão muito simples: não tenho dinheiro actualmente para um VPS onde montar algo mais catita como Rhyno e CouchDB mas está planeado para um futuro próximo se possível bem como uma forma de tornar isto em algo ainda mais útil do que possam imaginar. Esta ultima porém é uma ideia que pode demorar ainda muito tempo (e dinheiro) a realizar, considerem-se no entanto teased.

Para já fica aqui a minha versão alpha do TV Wall com o código praticamente colado com fita-cola, as engrenagens a funcionarem à base de doses volumosas de WD40 e a exigir Webkit ou Firefox 3.5 (ou superior). Notem no entanto que tenho andado a testar só em Firefox devido ao belo do Firebug que muita dificuldade tenho em largar porém façam favor de me avisar de todos os problemas que encontrem nos comentários deste artigo ou via Twitter. Aguardo com expectativa as vossas opiniões.

Link: TV Wall

…ou quando precisamos de esconder uma API Key dos visitantes e precisamos de criar um pequeno proxy para os nossos pedidos AJAX.

No meu caso precisava de esconder a minha API Key e consequentemente virei-me para o PHP (a linguagem com que estou mais familiarizado) para criar um pequeno proxy para os pedidos (depois veio a tornar-se ainda mais util ao permitir-me criar copias locais das imagens por exemplo).

Mas deixemos-nos de paleio, passemos ao código:

	// The url of the request
	$url = "http://some.host/api/endpoint/request"
	$cacheTimeout = 0 // No cache in this example

	// Create the curl resource
	$ch = curl_init();

	// Set the url in curl
	curl_setopt($ch, CURLOPT_URL, $url);

	// Tell curl to return the reply as a string
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

	// Make the request
	$output = curl_exec($ch);

	// Free the curl resource
	curl_close($ch);

	if (!$output) {
		echo "";
	}

	try {
		//Set the proper headers (there's no cache in this example btw)
		header('Cache-Control: no-cache, must-revalidate');
		header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $cacheTime) . ' GMT');
		header('Content-type: application/json');
		header('Content-Disposition: inline; filename=' . $file . '.json');

		// Process the XML and convert it to JSON. Then output it.
		$xml = new SimpleXMLElement($output);
		echo json_encode(new SimpleXMLElement($xml->asXML(), LIBXML_NOCDATA));
	} catch(Exception $e) {
		echo 'Caught exception: ' .  $e->getMessage() . '\n';
	}

E cá está o código que faz um pedido GET usando o CURL a um serviço que retorna XML. Como bónus o código ainda converte de XML para JSON que IMHO é um formato muito mais jeitosinho de se trabalhar.

Notem que a gestão de erros aqui é praticamente inexistente e que devem sempre limpar o input do utilizador antes de fazer o que quer que seja com ele (mas isso é o ABC de programação web e já todos sabem).

Eu estava a começar a achar o aspecto aqui do estaminé um bocadinho para o escuro demais e por isso pensei numa forma de lhe dar mais cor e mais vida. A forma que arranjei foi adicionar fotos minhas no cabeçalho do site para animar um bocadinho a coisa.

Porque é que isto é digno de um post? Simples: se não forçarem o refresh o tamanho do cabeçalho vai ficar pequeno demais e não vão poder observar devidamente as belas fotos que eu tiro.

PS: não sou nada convencido não…

Estou seriamente a dar em doido com trabalho. Ora vejamos o que ainda tenho para acabar nos próximos 15 dias:

• Um trabalho complicado da universidade
• Dois sites para terceiros
• Umas alterações para o site da Junitec

Depois, sem tanta prioridade tenho:

• Mockups para o interface do Future Waitress
• O redesign e actualização do software do TekPT (que estão parcialmente feitos e na gaveta há meses)

E por fim há as ideias que tenho e que nunca tenho tempo de meter em marcha:

• Um pequeno site inspirado no Bro Code e que devia estar feito em 3 tempos
• Uma ideia para um blog temático, potencialmente em inglês para atingir uma maior audiência e cuja ideia está na gaveta há mais de um ano.

Dava-me mesmo um jeitão conseguir livrar-me daqueles prioritários no inicio porque são os que tenho mesmo de fazer e para os quais não tenho grande vontade… *sigh*

Ou 25+ links úteis para web design.

Por nenhuma razão em especial achei que era uma ideia engraçada fazer uma pequena listagem de alguns sites que considero essenciais para o decorrer daquele que é o meu principal hobby e que eu não me importava nada que passasse a caminho profissional por muito suicida que dizer isso seja: Web Design/Development (ainda não percebi bem onde ando, algures no meio).

Desde javascript a css sem esquecer HTML5 e editores aqui vão algumas das ferramentas e recursos que eu pessoalmente gosto de usar para os meus projectos. Relembro que ao contrario de muito malta por ai eu não tenho um mac e tenho de me safar com Linux e Windows portanto não esperem encontrar aqui aplicações para mac.

E posto isto aqui vai a lista.

E finalmente está pronto, o revamp ao meu site que eu queria pronto até ao Sapo Codebits 2009 está finalmente pronto!

Como podem ver o titulo do blog mudou (agora é apenas NonsenseBB :: Blog em vez de Stating My Mind) e tenho todo o site correctamente uniformizado, o portefolio actualizado e um CV usando hresume e demais microformatos.

Deixem nos comentários as vossas opiniões e acima de tudo avisem-me de possíveis bugs no site.

Para quem está interessado na parte técnica o site está feito usando HTML5 (e CSS3 q.b.) o que infelizmente causa um efeito secundário chato de tornar o site totalmente impossível de ver para quem tem Firefox 2.0 devido a um bug no motor do mesmo.

Quanto ao Internet Explorer 6 decidi manda-lo ás favas e quem me visitar com ele vê o site mal e porcamente depois de ser avisado para actualizar ou mudar de browser. Desculpem-me mas estamos em 2010 quase e o IE6 saiu em 2001, é um dinossauro no que toca a software e ainda mais no que toca a browsers.

3 dias de workshops, apresentações, quiz show, concerto, conhecer muita gente nova e muita muita diversão (e pizza!) servem como um resumo perfeito para mais uma edição do Sapo Codebits a que eu não pude faltar.

Dia 1
Este ano a malta do Sapo realmente esmerou-se no pack de goodies do evento com uma bolsa para portátil (demasiado grande para o meu mas conta a intenção) recheada com um caderno, caneta, uma luz USB cortesia da Microsoft, uma bolsa da PT Inovação com escova e pasta de dentes, tampões para os ouvidos, mascara para dormir e meias, uma folhinha cheia de autocolantes catitas para qualquer geek que se prese enfeitar o seu portátil, um poster/folheto da Sapo Developers Network e as regras do evento.

Posto isto foi hora de arranjar um local para “acampar” pelo evento e encontrei o @igama e o @n0namedguy acabando por ficar no primeiro dia com eles numa mesa mesmo ao lado da malta da impressora 3D. Consegui falar com bastante gente com quem trabalhei na Caixa Mágica o ano passado bem como muitas outras caras conhecidas do evento do ano passado e do Twitter como o grande Mitch Altman e o seu TV-B-Gone.

EDIT: Faltou mencionar o facto de ter ajudado o @LuRsT a instalar Arch Linux no portatil logo no inicio do evento (algo que eu já não fazia há uns tempos).

Malta, se pedem a alguém para tratar do design do vosso site não é considerado chatear a pessoa pedir para mudar o alinhamento dos textos.

O que é sim chatear e andar a fazer isso tudo usando o editor visual do cms, deixar vários pedaços de código html invalido pelo caminho e no fim ir ter com o gajo encarregue do design porque se enfiaram num buraco de onde não conseguem sair.

A isto os anglo-saxonicos chamam de “over-stepping on someone’s boundaries” ou como eu diria em bom português: andar a meter o nariz onde não se é chamado.

No fim o resultado é um gajo ficar com fama de mal humorado porque fica chateado porque aumentaram o trabalho dele quando não o quiseram chatear…

E posto isto vou finalmente meter-me a ver Dr. Who que já tenho saudades.