Berro Visual

” The alignment of elements in a web page is a very important aspect of a good web design. In this info-comic, The Brads illustrate important concepts and best practices for alignment.”

The problem

We were fortunate enough to deserve the trust of our local internet access leaders to do the task of revampimg their internet portal. The implementation of this portal had several recognized problems. These problems doomed its popularity with a clear reflection on the user access statistics. The recognized problems were slowness, unreliability (servers refused to serve pages from time to time), search engine blindness and usability.

Slowness

The portal is used as a main entry point for ISP users to access their account and webmail.Beeing heavy on javascript and images slowed page rendering, which drove users away.The YSlow stats of those days revealed that 149 HTTP requests were necessary to render the page with a total weight of 718KB with an empty cache. That’s heavy! What about with a primed cache? 148 requests and 283Kb. Better, but still very heavy.It loaded 11 javascript files, including several javascript frameworks on the homepage, which slowed rendering.It used 6 stylesheets on the homepage, instead of compressing it to one.It rerely used expires headers.It used no compression.It had 2091 DOM elements on the homepage.It rated an overall YSlow grade of F.

Unreliability

The portal implementation had technical issues that prevented page rendering, from time to time (several times a day), yielding server errors.

Search engine blindness

The portal interaction was mainly based on AJAX popups and lightboxes on top of the homepage itself. There was rarely an link to a new page, every click generated content fetched by AJAX. That’s not a very sound techique for a portal thatis heavy on content, since google and other search engines don’t know how to crawl it.AJAX loading would be fine and dandy if the URL changed dinamically (as gmail does), but this was not the case.

Usability

Another side effect of all this AJAX content loading was that no one could send a link to a friend containing an interesting piece of new, or any other content for that matter.The implementation broke the web. The people that implemented this portal had thrown REST out the window.

Initial goals

Well, the portal by the time had all these problems.So, we needed  to:

• Reduce the load on the homepage (and other pages also, please)
• Make content linkable and crawlable
• Make the service reliable
• Make the rendering faster by following these rules

It would be nice to have:

• Search engine friendly URLs for SEO
• Make the page rendering incredibly fast (at least on the homepage)
• Make the portal navigation friendlier and more useful

The Solution

Early on we decided that we had to redesign te portal so it would be less dependent on images for layout.And since we had to reimplement it (since we did not have the source code), we shoud get rid of the horrendous Microsoft infrastructure.Rails started to seam a good fit for this project, since most of the content is cacheable.The timeframes proposed for the several stages of the project were also tight, which was also a good reason to use Rails.

Search engine and usability optimizationPage URLs

We used a combination of two techniques for creating great search engine friendly URLs for the portal contents:1. Rails routes. Rails really makes it wasy to construct URLs, so a) you don’t have to spread the URL constructing knowledge throughout your code and b) and your controller code gets automatically called.2.Slugs. Slugs are what we call strings like “this-is-the-latest-news-in-the-world”. This slug string can be constructed automatically using model callbacks where you populate the slug attribute (based on the article name, for instance).

Image URLs

We used the same techique for building search engine friendly image URLs in order to increase search engine optimization.We used this great fleximage plugin by Squeegy to store, render and operate on images.

Titles

We never forgot to put a different and meaningful title on the page. Sure, it’s cumbersome if you have many controllers, but worth it for the user and search engine optimization.

Homepage loading and rendering speed – YSlow

The YSlow grade on the new portal homepage was a B. We didn’t get an A because YSlow insisted we used a CDN for our static files, but most of the portal users were inside the ISP, so it was as fast as it could get. Also we had publicity, and YSlow insisted we should cache the javascript calls, which we can’t.Overall, I think a B grade is very good, specially comparing it to the previous F grade and to the C, D, E and F grades of the majority of big portals – feel free to try YSlow on them.

Rails cache and Nginx

We chose to use Nginx as a webserver behind our mongrel cluster instances. Nginx has a very good reputation for handling static content, and since most of our content is page-cacheable, this was a good choice.Later on, when we were doing a simple load testing, the memory and processor profile were amazinlgy quiet – almos no CPU activity…

Nginx and browser cache

We configured Nginx to add cache expire headers to all pages and assets, minimizing the needed HTTP  requests and the page loading time.

nginx compression

Nginx compression configuration is a breeze, and public and cached files were compressed, which saved about 25% on transmission time.

assets.netmadeira.com

Browsers are configured to open two TCP connections to one server. For an application that needs various files (as most web apps do), this can slow page loading and rendering, usually lost on javascript, css and image loading.Rails allows you to do the serving of public static files from a different host name than your server main name. We used this capability, which accelerated assets loading.

Reliability

We are using monit to monitor resources and restart mongrel cluster instances that get too big.

Us and the clients are very pleased with the reliability of the current platform.

Como já devem ter reparado, no passado dia 12 de Maio, o mais importante portal da Madeira surgiu de cara lavada.

Mais rápido, mais amigável e capaz de proporcionar uma melhor experiência aos seus utilizadores, o novo NetMadeira tem muitas novidades:

• Nova Navegação (nas Notícias, na Agenda, nas Webcams, nas Farmácias, no Tempo e nos Voos)
• Webcams no Mapa da Madeira
• Informação sobre as Farmácias de Serviço agora também em Câmara de Lobos, Santa Cruz e Machico
• Pesquisa mais completa e mais fácil

Foi uma grande mudança – e não vai ficar por aqui. Até ao final do ano, vamos continuar a melhorar o NetMadeira. Com novas funcionalidades, novos conteúdos, novas experiências.

Porque queremos chegar mais longe e conquistar novos utilizadores. Mas, sobretudo, porque queremos chegar melhor e mais perto daqueles que já se habituaram a contar com o NetMadeira.

Obrigado à ZON Madeira pelo convite que nos fez e pela confiança que depositou Berro. E obrigado a todos os que continuam a preferir o NetMadeira.

Problems upgrading openx adserver? Getting a blank page when running the upgrade?

You probably have a large database.

Try increasing the memory limit in php.ini, (and, btw, give php enough time to execute the upgrade…).

If anyone could have given me this advise I would have saved a few hours of head-banging.

A fresh Linux install with a good distro, when entropy = 0, a fresh start.

That’s when the caos begins…

Para aqueles que gostam de quebra-cabeças, deixo aqui um que tem dado água pela barba a muita gente…

Você compra 100 kilos de batatas. As batatas são 99% água.
Ao fim de 2 dias, com a evaporação, as batatas são 98% água.
Quanto pesam as batatas ao fim desses 2 dias?

Aceitam-se respostas na caixa dos comentários…

Acabei de ler este excelente livro – RESTful Webservices. Julgo que qualquer pessoa que desenvolve aplicações para web deveria lê-lo.

Já conhecia algumas implicações da filosofia REST, e em particular a Arquitectura Orientada a Recursos (ROA). Abracei algumas delas no desenvolvimento de aplicações e frameworks, mas o siples facto de não usar SOAP e não manter estado no servidor não faz uma aplicação web RESTful. Caía muitas vezes no erro de usar o que o autor chama de RPC-hybrid, que pode ir de encontro à filosofia REST, mas não é Resource-Oriented.

De um modo geral o autor quer que a filosofia simplista da  web humana seja transladada para a implementação de web-services, e que, tal como na web humana, os serviços sejam:

Well-connected: A representação de um recurso deve conter links e forms para outros estados da aplicação, de forma aos clientes dos webservice não tenham de “saber” ou “adivinhar” com antecedência como construir URIs para outros recursos e estados da aplicação.

Addressable: Uma apliaçação deve expor todos os seus recursos através de URIs.

Stateless: O estado da aplicação não deve ser mantido do lado do servidor, mas sim deve estar completamente contido no URI.

Respect a uniform interface: Um recurso deve usar a interface HTTP  e os seus métodos como interface de manipulação. Isto implica usar os métodos menos conhecidos: PUT, DELETE, usar GET só para obter prepresentações e não alterar ou criar recursos, e usar POST só para criar novos recursos.

Só por usar estes princípios, uma aplicação web obtém uma série de vantagens:

• escalabilidade natural da web
• segurança e idempotencia de alguns métodos HTTP (GET, PUT, DELETE)
• expôr-se a uma audiencia de clientes muito mais vasta, pois construirum cliente para um webservice deste tipo é muito mais simples e standard do que construir um cliente SOAP.

Estive às voltas com a configuração de rede de máquinas virtuais a correr em Virtual Box da Sun. Para correr uma VM com NAT é muito simples. A interface de controlo da Virtual Box é muito fácil de utilizar para configurar (quase) todos os parâmetros de uma VM – muito mais simples do que qualquer outra solução de virtualização que eu tenha usado.

Mas para a instalação de servidores em VMs, a rede em NAT não é suficiente. Para isso é necessário configurar o Host Interface Networking. Para isso é necessário criar:

• uma interfaceTUN/TAP em modo de utilizador para cada VM
• uma interface de rede em modo bridge para ligar a interface de rede pública do host com a interfaceTUN

1. Instalar bridge-utils:

> sudo apt-get install bridge-utils

2. Configurar interface de bridging br0

Editar o ficheiro /etc/network/interfaces e introduzir o seguinte:


auto br0
iface br0 inet static
address <endereço-ip-publico-da-interface-host> # exemplo: 192.168.0.10
netmask<netmask> # Exemplo: 255.255.255.0
gateway <endereço-ip-da-gateway>
dns-nameserver <endereço-ip-dns-server>
bridge_ports eth0
pre-up ip link set eth0 promisc on

3. Configurar interface TUN/TAP

> sudo apt-get install uml-utilities

> sudo gpasswd -a <nome-do-utilizador-que-corre-a-vm> uml-net

Editar /etc/network/interfaces para introduzir definição da interface tap0

auto tap0
iface tap0 inet manual
up ifconfig $IFACE 0.0.0.0 up
down ifconfig $IFACE down
tunctl_user <nome-do-utilizador-que-corre-a-vm>

É necessário uma interface tap para cada VM que corre. Por convenção deverá nomeá-las tap0, tap1, tap2, etc.

Acrescentar o nome da interface à linha bridge-ports da definição de interface br0:

bridge_ports eth0 tap0

Se tiver mais de uma interface tap (por ter mais de uma VM a correr com Host Interface Nwtworking),  deverá ter:

bridge_ports eth0 tap0 tap1 tap2 ...

4.Restart à rede

> sudo /etc/init.d/networking restart

Deverá ficar com uma configuração de rede semelhante a:

> ifconfig

br0       Link encap:Ethernet  HWaddr 00:18:F3:DD:BA:76
inet addr:192.168.0.120  Bcast:192.168.0.255  Mask:255.255.255.0
inet6 addr: fe80::218:f3ff:fedd:ba76/64 Scope:Link
UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
RX packets:1144602 errors:0 dropped:0 overruns:0 frame:0
TX packets:595651 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:0
RX bytes:1647445064 (1.5 GB)  TX bytes:57500452 (54.8 MB)


eth0      Link encap:Ethernet  HWaddr 00:18:F3:DD:BA:76
inet6 addr: fe80::218:f3ff:fedd:ba76/64 Scope:Link
UP BROADCAST RUNNING PROMISC MULTICAST  MTU:1500  Metric:1
RX packets:1174407 errors:0 dropped:0 overruns:0 frame:0
TX packets:655186 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000
RX bytes:1661980816 (1.5 GB)  TX bytes:145231117 (138.5 MB)
Interrupt:16 Base address:0x8000

lo        Link encap:Local Loopback
inet addr:127.0.0.1  Mask:255.0.0.0
inet6 addr: ::1/128 Scope:Host
UP LOOPBACK RUNNING  MTU:16436  Metric:1
RX packets:75837 errors:0 dropped:0 overruns:0 frame:0
TX packets:75837 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:0
RX bytes:54544819 (52.0 MB)  TX bytes:54544819 (52.0 MB)

tap0      Link encap:Ethernet  HWaddr 00:FF:6F:96:74:C5
inet6 addr: fe80::2ff:6fff:fe96:74c5/64 Scope:Link
UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
RX packets:181 errors:0 dropped:0 overruns:0 frame:0
TX packets:6596 errors:0 dropped:6 overruns:0 carrier:0
collisions:0 txqueuelen:500
RX bytes:12118 (11.8 KB)  TX bytes:488804 (477.3 KB)

tap1      Link encap:Ethernet  HWaddr 00:FF:AE:A1:1C:EC
inet6 addr: fe80::2ff:aeff:fea1:1cec/64 Scope:Link
UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
RX packets:65140 errors:0 dropped:0 overruns:0 frame:0
TX packets:41841 errors:0 dropped:6 overruns:0 carrier:0
collisions:0 txqueuelen:500
RX bytes:92085763 (87.8 MB)  TX bytes:3358812 (3.2 MB)

5. Configurar rede guest

No guest configurar endereço IP estático igual ao endereço IP público que deseja.

Tenho andado a investigar um pouco sobre as linguagens, frameworks e infra-estruturas necessárias para a próxima geração de produtos web-based da Berro. Nesse sentido tenho investigado as linguagens: javascript, python e Ruby.

Até agora, pelo que vi, fiquei impressionado com a eficiência do Python.

Adoro Ruby, mas a infra-estrutura necessária para produção (Apache + Mongrel, etc.) arrefece-me um pouco.

Frameworks:

Fiquei entusiasmado com o Jaxer, que permite fazer um pós-processamento das páginas ainda no servidor, utilizando, por exemplo, jquery, fazer manipulação DOM do documento no servidor antes de enviá-la para o cliente. Poderoso…

Estou a acabar de ler o Dive into Python, e depois vou investigar o Django, e ver de que forma ele responde às nossas necessidades de:

• Componentização
• ORM
• MVC
• Integração jquery
• Integração com framework actual PHP (ACT2)

The Chicago Manual of Style Online is the indispensable online reference for those who work with words.

Podem começar por atacar directamente na secção de perguntas Perguntas e Respostas.

Aqui fica um exemplo:

Q. My colleagues are divided in their opinions about “storing data in a computer” versus “storing data on a computer.” Which is correct? Thanks.

A. You can do either, but I would store the data in the computer. It used to be easy to store stuff on a computer, but now with flat screens and laptops it tends to slide off.