Refreshed

Sexta-feira, 5 de Agosto de 2005

Como já devem ter reparado, hoje estreio um novo layout aqui no site. Além das alterações gráficas profundas, há também alterações ao nível das funcionalidades. No entanto, a grande alteração está relacionada com a aplicação da tecnologia AJAX.

AJAX

Há pouco tempo falei sobre a tecnologia da moda, o AJAX, e desde esse dia fiquei com vontade em experimentar algumas coisas e ver como funcionavam. No fundo, a maior parte das coisas feitas com o AJAX são basicamente código JavaScript+CSS. Com esta remodelação do site tive a oportunidade de implementar algumas novidades!! Aqui vão alguns exemplos:

Pesquisa em Directo

Experimentem usar o motor de busca no topo da página. Ao mesmo tempo que escrevem a palavra para pesquisar, os resultados vão sendo mostrados sem ser necessário clicar num botão “pesquisar” e sem ter de carregar uma nova página.
Em termos de experiência do utilizador isto pode não causar grande impacto porque a maioria dos utilizadores experientes escreve a palavra a pesquisar e carrega na tecla ENTER logo a seguir. No entanto, a pesquisa funciona das duas formas: directa e normal.

Para implementar esta técnica usei o tutorial do Fernando Graphicos que indica como instalar o LiveSearch no WordPress.

FAT (Fade Anything Technique)

Há uns tempos atrás a 37Signals apresentou a YFT (Yellow Fade Technique) que é uma técnica de salientar alguma mensagem importante numa página através de uma alteração da cor de fundo gradual de amarelo para branco. Podem encontrar um bom exemplo da aplicação desta técnica na Ta-Da List.

Inspirado pela inovação da 37Signals, o Adam Michela criou a FAT (Fade Anything Technique) que permite alterar gradualmente a cor de fundo de qualquer objecto numa página com a possibilidade de se poder escolher a cor (sem estar restrito apenas ao amarelo). Podem ver um exemplo do funcionamento da FAT nesta demonstração ou aqui mesmo nas mensagens de erro do site.

Nice Forms

Nos formulários usei a técnica do Lucian Slatineanu (mais conhecido como badboy). Basicamente, esta técnica permite alterar o layout dos formulários para um design mais atraente. No entanto, tem algumas limitações porque alguns browsers não suportam bem estas alterações, por isso só apliquei em alguns elementos dos formulários.

Ajuda nos formulários

Se experimentarem clicar nas caixas de texto do formulário de comentários ou no formulário de contacto verão que para cada caixa existe um texto de ajuda. Esta é uma técnica simples de implementar e que dá muito jeito para não sobrecarregar o ecrã com informações que só são relevantes em determinado contexto. neste caso, as informações são importantes apenas para quem vai escrever um comentário ou enviar uma mensagem e não valia a pena estarem a ocupar espaço denecessáriamente no ecrã.

Plugins

Além da implementação do AJAX, foram também adicionados alguns plugins ao WordPress. O WordPress é o sistema de gestão de conteúdos que permite escrever artigos no blog e manter as páginas do site.

Novo menu

Foram também efectuadas alterações ao menu e à navegação no site. Foram criadas duas novas áreas: usabilidade e CSS&webstandards. Em “Usabilidade” vou colocar algumas definições do tema, links para artigos, etc. Em CSS&Webstandards vou colocar alguns pedaços de código CSS que tenho espalhados pelo meu disco rígido e que por vezes fazem falta e não sei onde estão. Desta forma vou tentar criar uma pequena base de dados de exemplos e dicas de CSS e webdesign.
Nota: Estas duas áreas ainda não estão online.

Compatibilidade

Este site foi testado em Firefox (Mac e Win), Safari (Mac), Internet Explorer 6 (Win) e Internet Explorer 5.2 (Mac). Algumas coisas não funcionavam, lá muito bem no Internet Explorer 6 para Windows (grande surpresa…), mas com algumas alterações consegui que ficasse razoavelmente bom. Quanto ao Internet Explorer 5.2 para Mac, ainda não consegui endireitar o site e parece que a pesquisa em directo não funciona… Mas também… quem é que usa o IE no Mac?
No Firefox e no Safari está tudo a funcionar lindamente (excepto o Nice Forms no Safari porque este browser não permite a customização das caixas de texto e botões).

Além destas incompatibilidades, ainda há alguns bugs que tenho que resolver quando tiver tempo. Entretanto, vou colocar isto tudo online para que me possam ajudar a identificar alguma falha

Conclusão

Agora já sabem a razão de não ter publicado muita coisa nos últimos tempos! É que, com o trabalho, as experiências com AJAX, o pouco tempo disponível e as dores de cabeça com as incompatibilidades entre browsers, não sobrou muito tempo para fazer esta renovação do layout…
Espero que gostem!