Desenvolvimento web moderno

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.

1. Esqueçam o javascript (por agora)

Começo logo pela parte mais importante: esqueçam o Javascript, esqueçam o AJAX e as APIs catitas do HTML5 como localstorage e afins. Eu sei que há pessoas que discordam deste ponto e estão à vontade para o ignorar mas eu pessoalmente acho que é uma boa política apresentar um website capaz de funcionar com o javascript desligado.

Quantas vezes não vos aconteceu tentarem abrir um link numa tab/janela nova e descobrirem que não conseguem? Depois olham para a barra de endereço, vêm algo como

#localização
ou
javascript:...
e mandam uns quantos insultos destinados à mãe do individuo que fez aquele brilhante serviço?

Uma boa forma de garantir isso é trabalharem sempre com o objectivo de colocar tudo a funcionar sem Javascript e só depois irem progressivamente melhorando a experiência com pequenas animações, chamadas AJAX e se forem mesmo porreiros com a nova API do histórico do HTML5 que vos permite alterar a barra de endereço como se de um pedido normal HTTP se tratasse.

A mesma política de melhoramento progressivo aplica-se também a funcionalidades de CSS como transparências ou cantos arredondados. Se desenharmos primeiro sem recurso ás mesmas e mais tarde as adicionarmos com o recurso a ferramentas como o Modernizr (que requer Javascript lembrem-se) garantimos que mesmo browsers mais antigos têm pelo menos uma experiência satisfatória ao visitar o nosso site.

Recomendo no entanto que não se apoiem muito em muletas como o Modernizr e procurem utilizar tanto quanto possível múltiplas declarações explorando o facto de os browsers aplicarem sempre as regras CSS situadas mais tarde na folha de estilos. Um exemplo seria para criar um fundo semi-transparente com uma cor solida de recurso:

#div {
    background: #ff0000;
    background: rgba(255, 0, 0, 0.7);
}

2. Mobile First

Outro muito importante ponto a ter em conta é que os dispositivos moveis com iOS, Android e outros são uma fatia cada vez mais relevante do mercado e que quem já tentou adaptar um site para esses aparelhos sabe que fazer essa adaptação nem sempre é fácil quando a primeira preocupação foi a versão Desktop.

O problema reside no facto de um pixel não ser um pixel o que leva a problemas que podem facilmente ser resolvidos de uma de duas formas: usando a abordagem que defendo aqui e que envolve basear a versão desktop numa evolução da versão móvel com auxilio de media queries ou utilizar um subdomínio com uma versão separada do site e redireccionamento baseado em user agents.

Num mundo ideal a primeira bastava mas por motivos de gestão de custos em sites mais pesados eu pessoalmente acho que compensa utilizar a segunda. Poder-se-iam usar truques como lazy loading the imagens e/ou redimensionamento das mesmas do lado do servidor mas uma depende de termos javascript activo (algo que já mencionei antes não ser esperado) e a outra envolve aumentar ainda que ligeiramente a carga do servidor e/ou o trabalho requerido para publicar o nosso conteúdo.

“Mas porquê começar pelas versões moveis e crescer em vez do oposto?” perguntam agora. Mais uma vez porque um pixel não é um pixel. Se leram o link que coloquei mais atrás (vão ler que eu espero, é importante para quem anda nestas andanças) sabem que os browsers dos telemóveis não nos dão exactamente os pixeis reais mas sim valores predefinidos o que significa que se torna mais previsível usar as media queries para procurar os desktops do que os telemóveis.

Junta-se a isso o facto de alguns telemóveis mais antigos terem comportamentos mais imprevisíveis nessa funcionalidade do CSS3 e vinca-se ainda mais a necessidade de começar pelas versões móveis já que na minha modesta opinião é menos grave em termos de usabilidade oferecer a versão móvel de um site a browsers desktop desactualizados do que oferecer a versão desktop a um dispositivo móvel.

3. Aprender a amar unidades relativas

Outra questão que é importante ter em conta é o evitar o uso de pixeis quando fazem o vosso CSS e usar unidades relativas como percentagens ou em com principal ênfase nesta ultima.

As origens disto remontam aos tempos desse nosso querido amigo Internet Explorer 6 e do facto dos browsers da altura pura e simplesmente não escalarem partes da pagina definidas em pixeis o que levava a problemas para aqueles utilizadores que, por exemplo, sofriam de problemas de visão.

É aqui que entram os em. Para quem não sabe os em são uma unidade de medida relativa ao tamanho do texto de um determinado elemento do documento. Por exemplo: se o texto de uma caixa tiver um tamanho de 12 pixeis e eu definir que a caixa tem uma altura de 2em isso significa que a caixa terá uma altura de 2 x 12 pixeis = 24 pixeis. O efeito secundário de definir todos os tamanhos assim era que não só permitia aos browsers redimensionarem-nos usando as suas funcionalidades normais ou utilizando controlos javascript que ao aplicarem uma classe ao

body
ou outro elemento da página faziam esse redimensionar usando algo tão simples como
font-size: 1.2em
.

“Mas o IE6 está finalmente a morrer, tenho mesmo de me preocupar com ele?” é a pergunta desta vez. A resposta na minha opinião é não: que se lixe o sacana do Internet Explorer 6! Mas lembram-se que estamos a trabalhar com telemóveis? E que os tamanhos dos seus ecrãs mudam? Unidades relativas oferecem-nos a mesma flexibilidade do que os web designers do ano 2000 com o bónus de podermos usar media queries para alterar o tamanho do texto conforme o tamanho do dispositivo.

E como bónus podemos ainda utilizar em para nos ajudar a trabalhar com uma grelha (algo que é aparentemente uma boa ideia em design segundo me chegou aos ouvidos). O que eu tenho feito é simples:

body {
    font-size: 10px;
}

Com isto 1em passa a igualar 10 pixeis dando-nos uma bela grelha de 10 pixeis de lado para trabalhar desde que nunca deixemos de nos lembrar que qualquer alteração ao tamanho do texto vai alterar a nossa grelha (basta manterem as mudanças de tamanho limitadas aos elementos de linha tanto quanto possível que ficam bem).

4. Agora sim: Javascript!

Agora que já temos o nosso site todo pronto com versões moveis que crescem para versões desktop e que funciona perfeitamente no mais paranóico dos internautas que teima em desligar o javascript chegou a hora de adicionar javascript.

Se fizeram tudo bem até agora prepararam o vosso servidor para vos devolver os dados de uma página em JSON e/ou XML com uma mudança tão simples como usando um cabeçalho Accepts ou adicionando um parâmetro ao URL pedido permitindo-vos adicionar todas as funcionalidades AJAX que a Web 2.0 nos trouxe mas não se esqueçam de verificar primeiro o que os browsers suportam a funcionalidade usando detecção de objectos.

Se fizeram tudo mesmo bem estão até a usar algo catita como mustache para os vossos templates do lado do servidor e podem simplesmente utilizar os mesmos templates do lado do cliente poupando-vos imenso trabalho e mantendo o vosso website sempre consistente.

E se fizeram tudo mesmo muito bem estão até a usar animações por CSS em vez de animações por Javascript para aproveitarem a aceleração que alguns browsers já oferecem poupando assim os CPUs daqueles tão importantes visitantes em dispositivos móveis (e dos outros também).

Se tiverem estes pontos em mente tenho a certeza que vão conseguir fazer experiências na web que vos vão deixar orgulhosos, que vão querer mostrar aos vossos amigos e quiçá até um dia serem brindados com montes de miúdas giras (ou rapazes giros) por mostrarem ser tão modernos¹.

¹ ok se calhar esta ultima parte é capaz de não ser verdade.