A ver posts de Abril de 2012

SASSPara finalizar esta série sobre o mjamado.com, falta falar sobre o que é, para mim, a tecnologia mais útil que aprendi no último ano: SASS, um superset da linguagem CSS, juntamente com Compass, uma biblioteca de mixins para usar com SASS (mixins é o termo convencionado para referir o que não são mais que pequenas funções).

Não vou alongar-me sobre todas as vantagens do SASS (estão aí os links, é dar uma voltinha), mas vou focar quatro pontos que me são caros.

Antes de mais nada, um pedido de desculpas às 10 pessoas que visitaram o mjamado.com com o Internet Explorer 8 até sexta-feira: como estou a usar as novas tags semânticas do HTML5, devem ter ficado a olhar para um grande espaço de... nada. Acontece que os IE abaixo do 9 não reconhecem as novas tags e, pior do que isso, não lhe dão sequer um estilo básico (podiam definir todas as tags desconhecidas como block, por exemplo); para adicionar insulto à injúria, definir um estilo na CSS também não chega, porque as tags nem são inseridas na DOM.

Quando publiquei esqueci-me desse problema, mas já está controlado, através do HTML5 Shiv (um excelente pedaço de história sobre a evolução desta solução pode ser encontrada aqui).

Com isso fora do caminho, existiam dois grandes problemas, que eu tinha debaixo de olho desde o início.

O primeiro era relacionado com as CSS Transitions, das quais já falei aqui. Desde o início do projecto que assumi a opção da degradação graciosa, que o transforma num não-problema. Quem usa o IE não vê a transição entre os dois estados, mas não perde nenhuma de experiência intrínseca, tendo acesso a ambos; só que a transição é abrupta. Como já disse nesse post, é relativamente fácil forçar o comportamente consistente com meia dúzia de linhas JS, mas não compensa o esforço; sobretudo, à luz do lançamento próximo do IE10.

O outro era muito mais bicudo e está relacionado com a conjugação de gradientes CSS e cantos redondos. Aliás, nem sequer é a primeira vez que os cantos redondos me vêm morder no rabo. Desde essa altura, o IE9 passou a suportar cantos redondos e até o Chrome, culpado por esse post, melhorou bastante o cálculo do corte do background.

Apesar de não suportar gradientes CSS, o IE (para aí desde o 6) suporta gradientes lineares definidos através de filtros DirectX. É uma questão de incluir esses filtros, e o IE, não reconhecendo a sintaxe CSS3 dos gradientes, irá usá-los. Porreiro, certo? O problema é quando se atiram os cantos redondos para cima.

Continuando com coisas-que-ainda-não-tinha-experimentado-a-sério, usei no mjamado.com duas web fonts do directório da Google (Cantata One para os títulos e Imprima para corpo). Já tinha usado uma ou outra nalguns projectos comerciais (e por "usado" entenda-se que a empresa tinha usado – o design não é exactamente a minha praia), mas queria ver "ao perto" o que se podia fazer com isto.

O processo é trivial e croquetes, mais ainda se aceitarmos os métodos mais simples que a própria Google recomenda. Só embati numa pequena irritação, que ainda por cima não tem solução – ironicamente, afecta outro produto da Google, o Chrome, mas apenas em Windows.

O problema é este:

Ao construir o mjamado.com, evitei ao máximo usar animações por Javascript, preferindo usar CSS Transitions. O motivo óbvio é o desempenho: uma animação ser controlada pelo renderer interno dos browsers será sempre mais rápida e leve do que pelo motor de JS.

Um motivo menos claro é a separação de responsabilidades: cabe ao HTML mostrar os dados, ao JS controlar as acções sobre esses dados (acções apresentacionais - qualquer acção que altere os dados deve ser server side) e às CSS controlar como são apresentados os dados. Uma transição entre visualizações de dados é, claramente, uma responsabilidade apresentacional – logo, uma responsabilidade de CSS.

As CSS Transitions são novinhas em folha; pertencem à especificação CSS3, ainda estão em estado de working draft na W3C, mas o suporte já é sólido: segundo o caniuse.com, e corroborado pelos meus testes, apenas o Opera Mini, usado nalguns telemóveis menos potentes, e o (sem surpresa) Internet Explorer (até à versão actual, a 9) não as suportam. Todos os outros browsers tem suporte, pelo menos, há 5 gerações.

As transições funcionam de um estilo para outro, seja como for que esse estilo varie (por estados, mudança de classe ou id, directo ou indirecto), e podem animar qualquer valor passível de ser interpretado como numérico – cores, por exemplo, podem ser declaradas como nomes, mas têm um valor intrínseco numérico. São parametrizadas por quatro valores: a propriedade a animar, a duração, o nome de uma função de animação e o tempo de atraso de início de animação.

Tal como tinha dito aqui, está na altura do mjamado.com passar à iteracção seguinte. Já passou tempo que chegue, espero que todos os parceiros de negócios do Sr. Messias tenham actualizado os seus contactos e até o site das Páginas Amarelas já retirou o link.

Nesta iteracção, contém um misto de currículo e portfólio e, provavelmente, manter-se-á neste formato a médio prazo.

Aproveitei que era um projecto relativamente simples (meia dúzia de canais, autenticação de utilizadores de back-office básica) para usar um conjunto de tecnologias com que tenho andado a brincar (Yii, SASS e Compass), assim como várias técnicas que ainda não tinha usado em projectos ao vivo (media queries, CSS transitions).

Nos próximos dias farei mais alguns posts sobre algumas das técnicas que usei e os percalços que encontrei.

Comentários Nenhum comentário Continuar a ler Continuar a ler »
 Categorias
 Arquivo
 Projectos em Destaque
 Últimas Postas no Blog
 Últimos Comentários do Blog