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!
Ivo Gomes tem 29 anos e é licenciado em
Ciro Feitosa
5 de Agosto de 2005, 16:18
Parabéns Ivo. Muito bom as novas funcionalidades: AJAX, Nice Forms, Fade nos “blocks”. Um excelente trabalho. Sucesso!
Carlos Jorge Andrade
5 de Agosto de 2005, 17:20
Clap! Clap! Clap!
Jorge Laranjo
6 de Agosto de 2005, 14:53
Espero que não te importes de eu ir usar algumas destas novas técnicas num site que estou a desenvolver.
Parabéns!
E já agora, o teu site funciona às mil maravilhas no Camino versão 2005080408 (v0.9a2+)
Jorge Laranjo
6 de Agosto de 2005, 16:31
Ah! Já agora, pelo menos no Safari que eu tenho (1.3 v312) o site http://www.badboy.ro/assets/articles/niceforms/niceforms.html funciona bem e o teu também parece estar a funcionar correctamente…
MarcoGomes
6 de Agosto de 2005, 18:48
Cara, como sempre sendo dos desbravadores de novos recursos da Web.
Seu site está formidável, quem sabe algum dia eu implemente algumas ferramentas parecidas no meu website.
Já conhece o Y!Q? trata-se de uma ferramenta de pesquisa contextual do Yahoo, muito legal.
Parabéns, até mais.
Ivo Gomes
7 de Agosto de 2005, 10:56
Jorge:
No meu Safari (v2.0) as caixas de texto e os botões não são alteráveis e aparecem sempre com o aspecto default, tanto no meu site como no badboy.ro… Quanto às técnicas utilizadas, podes usar à vontade, não fui eu que as criei e elas são de uso livre porque estão disponíveis para download nos sites dos seus criadores.
Marco:
Conheço o Y!Q, mas optei por não utilizar porque já começava a ser código a mais. Sei de um blog que usa o LiveSearch + Y!Q, mas aqui optei por usar apenas o LiveSearch.
A todos os outros:
Obrigado por visitarem o site e pelos elogios!!
Pedro Custódio
8 de Agosto de 2005, 10:26
5 estrelas IVO!
Está super porreiro o novo layout.
Gustavo Moura
9 de Agosto de 2005, 17:27
Oi Ivo,
Seu novo layout ficou muito bom, também sou um grande “fã” do verde! Parabéns.
Só uma coisa que me chamou atenção, quando vi as palavras auto-explicativas, com o cursor do mouse sobre aparece uma hint explicando o significado das mesmas, elas me pareceram links e cheguei a clicar em algumas e o comportamento que eu esperava do browser não aconteceu, só aí pude observar melhor e enteder a idéia do hint explicativo.
Mas será que elas não estão muito parecidas com links? Você já tentou usar outra configuração? eu acho que derrepente um subilhado pontilhado poderia ser uma solução, fica a sugestão..
Abraços,
Gustavo
http://www.gmoura.com
Ivo Gomes
10 de Agosto de 2005, 15:53
Olá Gustavo!
As palavras auto-explicativas, ou acrónimos e abreviações, têm o sublinhado pontilhado. Que browser usou para navegar no site?
Este tipo de configuração já é usado em muitos outros sites. Quanto à confusão com os links, eles são sempre verdes enquanto que os acrónimos são da cor do texto com sublinhado pontilhado.
Concordo que o utilizador que veja algo sublinhado associe a um link, mas ainda não encontrei melhor forma de dar destaque a este tipo de conteúdos.
Alguma sugestão?
Gustavo Moura
10 de Agosto de 2005, 17:48
Então esté explicado, acessei o site com o FireFox, e o subilinhado ficou contínuo
Jorge Laranjo
10 de Agosto de 2005, 18:11
Então Gustavo, actualize a sua cópia do Firefox.
Eu estou a usar a 1.0.6 para Mac OS X e o pontilhado fica pontilhado. Não fica contínuo.
Ivo Gomes
10 de Agosto de 2005, 18:14
Eu penso que só o IE é que ainda não suporta pontilhados nem tracejados e substitui por uma linha contínua…
Sérgio Jardim
30 de Setembro de 2005, 19:13
Ivo, você pode usar a borda superior para demarcar os acrônimos. Ou mesmo, uma cor de fundo bem clara, e com um ícone de informação (um ! por exemplo) à direita do termo.
Apenas sugestão. Não vejo problemas neste aspecto já que você já usa o cursos em forma de ?.
Abraços.
Wallace
10 de Outubro de 2005, 08:44
Muito bom!
No bem caminho da vanguarda do AJAX!
Bravo.
Ivo Gomes
10 de Outubro de 2005, 09:12
Para quem quiser ter um blog concebido em Ruby e AJAX, pode testar o Typo. Tem aqui um demo.
wallace
10 de Outubro de 2005, 10:12
A dica que me dá é insuficiente.
Não tem mais?
Agradecia dicas variadas.
Ivo Gomes
10 de Outubro de 2005, 10:53
Não sei que mais dicas posso dar em relação a este tema.
A maior parte das funcionalidades que o AJAX permite fazer estão disponíveis gratuitamente na Internet sem necessidade de ter conhecimentos muito avançados de programação. No entanto, para um conhecimento mais aprofundado do uso do AJAX sugiro que comece a estudar programação Ruby (há quem diga que o Ruby é a linguagem de programação mais usável de sempre).
Apesar de haver uma enorme euforia com a introdução do AJAX, não nos podemos esquecer que isso pode implicar vários problemas de usabilidade porque há situações em que o utilizador espera determinados comportamentos típicos do ambiente web e o AJAX pode tornar a experiência completamente diferente. Para tal é sempre necessário dar “feedback” ao utilizador do que está a acontecer.
Num ambiente web, quando se clica em algo, espera-se que seja carregada uma nova página com as alterações. Com o AJAX não aconcete esse novo carregamento da página e como tal é necessário informar o utilizador que algo mudou em consequência do seu clique.
Mais informações sobre Ruby no site Ruby on Rails