Bruno Silva

Compressão de ficheiros Javascript

Hoje em dia cada vez temos mais Javascript nos sites que produzimos. Existem “milhentas” bibliotecas giras que usamos para produzir experiências teoricamente mais ricas para os visitantes dos web sites. Vê-se de tudo, desde bibliotecas para efeitos visuais, até frameworks de AJAX incluindo também os nosso próprios ficheiros de script.

O download destes ficheiros corresponde a um overhead considerável, e por isso mesmo enquanto estava, recentemente, a trabalhar num site recorrendo à framework Adobe Spry, pesquisei sobre formas de minimar este peso extra no download. Encontrei uma entrada de um blog bastante interessante. Compara algumas abordagens.

A redução do tamanho de um ficheiro de código Javascript pode ser realizada removendo todos os caracteres dispensáveis: comentários, quebras de linha, espaços, etc. O código continua a ser válido, e correctamente interpretado, perdendo apenas a legibilidade. Encontra-se “na moda” haver versões de debug e release para bibliotecas Javascript por esta razão.

Pode-se ainda aproveitar a capacidade de compressão no protocolo HTTP e reduzir ainda mais o tamanho dos ficheiros, tendo sempre em consideração que vai implicar processamento extra no lado do cliente, pois o que foi comprimido tem de ser descomprimido, de forma a poder ser interpretado.

Deixo a comparação entre 2 métodos distintos de redução de tamanho de ficheiros javascript, que dá bem a ideia do compromisso que está em causa.

Para utilizar ficheiros em Javascript “gzipped” basta utilizar uma ferramenta que comprima neste formato, compactar o ficheiro e colocar o ficheiro gzip no atributo src da tag script.

Exemplo: <script type=”text/javascritpt” src=”mylib.js.gz”/>

HTTP Request and HTML Parsing in .NET

I’ve been working in college assignment which goal is to integrate several information systems. One of those is a website where we can see the flight schedules from/to Portuguese airports.

The website URL is http://www.innovata-llc.com/ana/default.asp. Me and a colleague of mine had to write a web service that was used by BizTalk as a wrapper of this web site’s form. It was supposed to send an HTTP request passing some request parameters using POST parameters, and to parse the HTML response in order to extract the flight list for a given destination city and departure date.

First of all lets see the code we used to get the response.

Uri address = new Uri(requestURL);
HttpWebRequest request = WebRequest.Create(address) as HttpWebRequest;
request.Method = “POST”;
request.ContentType = “application/x-www-form-urlencoded”;
StringBuilder data = new StringBuilder();
data.Append(“DPT_Date=” + “17-05-2008″);
data.Append(“&RET_Date=” + “20-05-2008″);
data.Append(“&dpt_station=” + “LIS”);
data.Append(“&arv_station=” + “LHR”);
data.Append(“&non_stops=” + “on”);

// Create a byte array of the data we want to send
byte[] byteData = UTF8Encoding.UTF8.GetBytes(data.ToString());
// Set the content length in the request headers
request.ContentLength = byteData.Length;
// Write data
using (Stream postStream = request.GetRequestStream())
{
postStream.Write(byteData, 0, byteData.Length);
}

// Get response
String htmlResponse;
using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
{
// Get the response stream
StreamReader reader = new StreamReader(response.GetResponseStream());
// Get the response string
htmlResponse = reader.ReadToEnd();
}
After getting the response content is time to use a nice HTML parser helper library. It is called HTML Agility Pack and it is open-source. You can find it at Codeplex.com/htmlagilitypack.

Now it is time to create an HtmlDocument (a class which ships with HTML Agility Pack) and load the response into this new instance. //Load HTML as XHTML
HtmlDocument htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(htmlResponse);
After looking to the HTML source code, we got the right Xpath expressions to extract the flight list.
//Get flight lines
HtmlNodeCollection flights = htmlDoc.DocumentNode.SelectNodes(
“//body/div/table[3]/tr[position()>=4 and position()<last()-1]“);
foreach (HtmlNode flight in flights)
{
//Get attributes
string departureTime = flight.ChildNodes[1].FirstChild.InnerText;
string arrivalTime = flight.ChildNodes[3].FirstChild.InnerText;
//Do some stuff …
}
That’s almost it. The next step was adding the extracted information into some data structures, and returning that data. But these details are out of this post scope.

4º Seminário de Tecnologias Móveis PocketPT

“É com orgulho que vos anuncio que estou a preparar com a minha equipa mais uma edição do nosso evento principal de consumo: a quarta edição do Seminário de Tecnologias Móveis Windows Mobile do PocketPT, sob o tema “Como escolher o equipamento certo para mim…”.

O evento terá lugar no dia 21 de Junho, sendo que decorrerá nos moldes dos nossos eventos anteriores que têm provado ser um enorme sucesso entre os participantes.

Contamos como tem vindo a ser hábito com o apoio da Microsoft Portugal, sendo que iremos ter uma agenda muito rica e cheia de informação para o utilizador final deste tipo de tecnologia.”

Nuno Luz

Estive presente no 1º Seminário de Tecnologias Móveis TI PRO e valeu imenso a pena. Estarei presente em mais este evento com as espectativas em alta.

Inscrevam-se antes que esgote.

My feelings about Forwarded E-mails

Now think twice before forwarding any “funny e-mails” to me.

Popfly Game Creator Alpha

Yesterday Popfly Game Creator was released (at least the alpha version )

It allows you to write a Silverlight-based games, without actually writing any code. Once again, just as I think about the original Popfly, it is hard for non-developers to use this tool, but it can be great to people who lack a lot of advanced knowledge about development but are related to Computer Science (such as students or hobbyists).

One problem about the interface is that it is meant to be used in large resolution monitors. All the buttons are big, and even with a 1280×800 resolution I had some difficulties using the Game Creator.

Here’s a screenshot of the game editor. I like the childish look&feel.

Dan Fernandez has written a nice introduction to this tool on his blog. Take a look at it.

Here’s an example of a template which ships with this tool. It is called Big Race.

''