Introduza o termo a pesquisar e clique Enter.

Tag: ajax

Desenvolvimento web moderno

Jan 12 05

Escrito por Luis Nabais @ 05/01/12 22:01 | 1 Comentário »

Hoje em conversa com um colega meu comecei a descrever a abordagem que tenho tomado quando procuro desenvolver um website em HTML, CSS e Javascript e pensei que se calhar era uma boa ideia partilhar aqui a forma como o faço.

O objectivo é simples: criar pequenos sites que funcionam desde um telemóvel até um Desktop com ou sem Javascript activo e tentando suportar tanto quanto possível browsers ligeiramente mais antigos como o IE8 ou o Firefox 3.6.

No entanto sou o primeiro a admitir que esta abordagem não serve para todos os casos mas na minha modesta opinião é um bom objectivo para quem tem sites mais pequenos e quer dar aquela pequena dedicação extra que permite cobrir sem grande trabalho extra uma grande fatia dos potenciais visitantes.

Se tiverem dicas ou sugestões não se esqueçam de as deixar nos comentários mas antes disso vamos à minha abordagem ao problema.

Continuar a ler esta entrada >>

One small step for me

Nov 10 09

Escrito por Luis Nabais @ 09/11/10 21:11 | 1 Comentário »

TVWall Code Bem isto realmente pode não parecer muito emocionante e até excessivamente lento para a maioria mas a minha vida tem andado tão caótica ultimamente que mesmo este pequeno avanço me deixa bastante entusiasmado.

Como certamente sabem tenho andado a brincar com um pequeno website cujo único factor particularmente distinguível é, perdoem-me a modéstia, o design. Agora este post serve apenas para dizer que dei hoje finalmente os primeiros passos para o rewrite que tenho andado a planear e que deve finalmente tornar a aplicação utilizável no dia a dia.

Ficou finalmente funcional a primeira chamada da futura API do TV Wall (sim, vai existir uma API) e apesar de ainda faltarem alguns detalhes (como por exemplo uma forma de autenticação) é já uma conquista para mim conseguir ter posto a funcionar um pedido a um serviço externo e respectiva cache local em CouchDB.

Com isto tenho vindo a habituar-me ao conceito de programação por eventos o que leva a casos curiosos em que passo um bom bocado a tentar perceber porque é que este código não funciona apesar de ao inspeccionar o objecto o método ser claramente visível.

if (db.table.exists()){}

A resposta é simples quando se começa a compreender a linguagem (se bem que um pouco de documentação teria ajudado neste caso): o método é assíncrono pois vai questionar uma base de dados externa logo a forma correcta de o fazer é deixando um callback que vai ser chamado quando ela responder.

db.table.exists(callback = function(result) {
    if (result) {
        // Exists
    } else {
        // Does not exist
    }
});

Como podem ver isto não é propriamente das coisas mais simples de se usar para programação mais convencional em que estamos dependentes do resultado mas para programar na web onde temos de responder a múltiplos pedidos simultaneamente e estamos dependentes dos mais diversos pontos de latência este tipo de lógica trás teoricamente vantagens interessantes para a performance do sistema.

Node.js não é propriamente simples e está bastante longe de estar maduro mas promete bastante na minha modesta opinião e acho que é uma boa aposta para o futuro próximo da web.

PS: acho que é a primeira vez que mostro aqui o novo logótipo do TV Wall. O que acham?

Javascript no Servidor

Jul 10 06

Escrito por Luis Nabais @ 06/07/10 3:07 | 8 Comentários »

Como tinha dito antes tenho andado a brincar com algo que apelidei de TV Wall e essa brincadeira passa principalmente por usar JavaScript e funcionalidades novas do HTML5…

Pois bem, aplicações web a correrem praticamente só no cliente são muito giras realmente mas infelizmente ainda são precisas algumas coisas do lado do servidor e para essas tenho andado a usar o bom e velho PHP… E php serve, php dá para responder a pedidos, php cumpre a sua função admiravelmente e acima de tudo php funciona de uma maneira que eu compreendo muito bem: eu aponto-lhe um url e ele corre o script que se encontra nesse url. Serve perfeitamente mesmo que não seja a solução mais moderna ou a que escale da melhor forma.

Mas eu não quero usar php e tenho andado a apaixonar-me cada vez mais com JavaScript. Acima de tudo eu gosto da ideia de que uma aplicação não corre mas sim responde a pedidos. As aplicações não passam variáveis, passam mensagens (e essas mensagens são em JSON no meu caso). O que eu queria mesmo era usar JavaScript em todo o lado e guardar todos os meus dados em JSON.

Guardar os dados já consigo, tenho o belo do CouchDB a deixar-me guardar lá objectos JSON com uma bela api via REST, mas a minha grande duvida é como raios vou usar javascript no servidor…

Temos o Node.js, o Narwall com o Nitro, temos o Ringo e mais uns quantos e a verdade é que eu estou totalmente perdido… Eu não só não sei em qual deles pegar como não faço a mais pálida ideia de como começar a programar o que quero que ele faça… Alguém me consegue dar uma ajudinha?

TV Wall

Jun 10 26

Escrito por Luis Nabais @ 26/06/10 3:06 | 4 Comentários »

Paleta de Cores do TV WallHá 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.

TV Wall - Mockup TV Wall - Mockup de janela modal TV Wall TV Wall - Single

 
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

Quando Javascript não faz tudo

Jun 10 06

Escrito por Luis Nabais @ 06/06/10 0:06 | Sem Comentários »

…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).

Dependência do Google

Mai 10 12

Escrito por Luis Nabais @ 12/05/10 22:05 | 1 Comentário »

É engraçado o quão dependente a internet em geral se está a tornar do google. Acabei de experimentar um pequeno erro temporário na minha ligação à rede (coisa de 5min, nem tanto) em que deixei de conseguir aceder a todos os servidores da google que não o do serviço de pesquisas e consequentemente pude experimentar algo engraçado.

Para além de perder o acesso a coisas de que passei a depender como o GMail e afins notei outra coisa interessante:

  • A maioria dos sites passou a abrir lentamente por não conseguirem carregar o código do google analytics
  • Muitos outros sites abriram igualmente lentamente pois os vídeos do youtube que tinham incorporados não carregavam
  • Muitos dos links partilhados no facebook e twitter não abriam pois passavam primeiro pelo feedburner (da google lá está)
  • Alguns sites a usar coisas como o Google AJAX Libraries API passaram também a deixar de funcionar

Notem que isto foi só aquilo que notei em breves minutos sem acesso ao google… imaginem como seria uma falha mais prolongada no acesso. Assustador hum?

Coisas que eu uso nisso dos sites

Dez 09 13

Escrito por Luis Nabais @ 13/12/09 23:12 | 1 Comentário »

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.

Continuar a ler esta entrada >>

Portefólio novamente

Jun 08 27

Escrito por Luis Nabais @ 27/06/08 21:06 | 5 Comentários »

Há uns tempos atrás disse que andava a renovar o meu portefólio. Disse também que já funcionava e que só faltava colocar-lhe um layer Hijax por cima. Hoje achei que era um bom dia para o colocar “publico” mas só para os leitores aqui do estaminé uma vez que ainda não está pronto.

Portanto o meu novo portefólio pode para já ser encontrado em http://www.blog.nonsensebb.com/portfolio2/ mas ainda tem vários problemas como por exemplo:
 

  • O javascript não funciona nem pouco mais ou menos no Internet Explorer.
  • O CSS ainda não está correcto no Safari.
  • Ainda não testei em Opera mas numa breve vista de olhos pareceu-me funcionar.
  • Ainda só tem meia dúzia de efeitos simples, nada de pedidos assíncronos ou efeitos de mudança de página.

Portanto, e dito isto, cusquem e deixem aqui a vossa opinião (bem como bugs que encontrarem pelo caminho).

pub: