Web standards, arquitetura da informação, usabilidade, acessibilidade, tecnologia, filosofia de buteco (sic), e qualquer coisa em uma casca de noz!

Ir direto para o conteúdo

A revolução do Revolução Etc

Por: Henrique Pereira

Sunday 23 September 2007 às 14:46

Categoria: Pessoal

Se você está lendo estas linhas do seu leitor de feed, dê um pulo aqui para ver as alterações que eu fiz no site. Finalmente está pronto (ou quase), estas alterações deram muito mais trabalho do que qualquer outra feita no passado, e achei o resultado compensador. E você? Bom, como foram muitas as alterações e como eu prometi escrever sobre cada passo do processo de desenvolvimento do site, este texto pretende ser apenas um resumo.

Acessibilidade na veia

O foco principal do redesign foi o usuário, como não poderia ser diferente. Eu o fiz baseado em estatísticas dos últimos 6 meses. Além das implementações de acessibilidade que agora são exploradas em alguns novos contextos. A alteração mais visível é o layout em 3 colunas, explorando melhor o espaço de 90% dos usuários que passam por aqui com resolução de tela igual ou superior a 1024px de largura. Para quem navega em resolução de 800×600 pixels pode alterar para uma folha de estilos mais adequada. E o mais importante, tudo aqui funciona sem javascript. Pode fazer teste!

O site foi testado no Internet Explorer 6 e 7, no Lynx e nas últimas versões do Mozilla Firefox, Opera e Safari para Windows. Não testei no Safari do Mac e não sei se a versão Windows é 100% igual a versão Mac. Alguém tem algo a dizer? Fiz um teste também utilizando o JAWS no Internet Explorer 6 (que é a combinação mais comum entre os usuários) e tudo parece ok . Existe uma folha de estilos com alto contraste, que ainda está inacabada mas que em breve estará finalizada. Mais detalhes sobre ela em breve. Existe também uma opção para o usuário com certo grau de miopia e com dificuldades de visão em relação ao tamanho da fonte padrão. Sendo assim ele pode aumentar o tamanho da letra. Esta implementação foi baseada no artigo “Power to the people: Relative Font Size” publicada no A List Apart , você pode ir lá dar uma olhada e ver como se faz. Usuários com algum tipo de daltonismo (deuteranopia, protanopia e tritanopia) também não terão dificuldades de navegar por aqui. Depois eu falo com detalhes como eu fiz estes testes que são bem simples.

Versão 100% Mobile

A novidade maior é que eu e o Flávio estamos testando o WURFL para gerar uma versão em XHTML-MP do site. Ou seja, não trata-se de uma transformação do site no cliente usando media handheld e sim uma transformação no servidor, que se você estiver acessando o site por algum dispositivo móvel (celular ou PDA), o WURFL identifica e serve uma versão mobile do site usando XHTML-MP. Simples assim. Seria nosso blog o primeiro blog brasileiro em XHTML-MP? Sim, eu sei. Sites já existem e muitos, mas e blogs em WordPress brasileiros? Se souber de alguém me avisem. Como eu disse, estamos “testando”. As coisas podem não estar como deveriam em alguns celulares mas em breve espero que estarão.

Outras coisas mais!

A listagem de tags e o famoso blogroll estão de volta depois de muito tempo longe. Estava sentindo falta destes espaços aqui. Aumentei a quantidade de livros indicados na lateral e coloquei uma lista de bandas que eu ouço como inspiração. Claro que eu não ouço apenas os poucos discos que estão ali, são apenas os representantes deles. Os anúncios também estão explorados de forma diferente. E a procura de anunciantes tem crescido tanto, que agora eu criei uma página chamada “Anuncie aqui“, com detalhes para quem quer investir em anúncios no Revolução Etc.

Ufa, é isso! Preciso de você para me dizer se nada parece quebrado em algum browser, se tem alguma coisa que não está funcionando, etc. Ah, como eu disse antes, a versão mobile ainda está em fase beta (beta de incompleto e não de infinitamente beta) e estamos testando. Se acessa a web pelo celular, smartphone ou PDA e quiser me dar um feedback, ficarei eternamente agradecido. Queria agradecer o grande amigo Flávio, responsável pelo PHP e pelos infindáveis testes, e que também está de site novo (eu fiz o design) com boa parte das mesmas características que o meu. E queria agradecer a todos que passam por aqui, que assinaram o feed (e os que não assinaram também), e é por causa do público cada vez mais exigente que estou sempre transformando as coisas aqui. E se você quiser um site assim com acessibilidade e uma versão mobile, é só chamar!

Sua crítica também é fundamental. Este foi apenas o resumo do que aconteceu, em breve eu volto com mais detalhes do planejamento de tudo isso. Até breve!

Artigos relacionados:

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!



Existem 35 comentários para “A revolução do Revolução Etc”

# 1° Walmar Andrade Sunday 23 September 2007 às 15:13GMT

Bem legal, Henrique. Mudou, mas manteve a identidade visual. Só uma coisa: lá em cima, o que a pessoa aumenta ou diminui não é o tamanho do texto e sim da letra. O texto vai continuar com seus sete parágrafos, com seus 700 caracteres etc. A letra é que aumenta de tamanho :)

# 2° Marcelo Leite Sunday 23 September 2007 às 15:21GMT

Esse gostei. O outro só via RSS, minha retina não agüentava mais que 10 segundos vendo aquele vermelho intenso.

Uso Safari no Mac, tudo funcionando, nada quebrado.

# 3° Marcelo Leite Sunday 23 September 2007 às 15:33GMT

Navegando pelo site, recebi 3 vezes a mensagem abaixo:

“A script on the page “A revolução do Revolução Etc » Revolução Etc” (http://revolucao.etc.br/archives/a-revolucao-do-revolucao-etc/) is making Safari unresponsive. Do you want to continue running the script, or stop it?”

Que script é esse?

# 4° Pedro Menezes Sunday 23 September 2007 às 16:11GMT

Muito bom, velhinho. Um dia eu ainda faço um design assim. Concordo com o Marcelo, o vermelho do antigo doía os olhos. =x

Que plugin você usa pra Tag Cloud? A referência do Text Link Ads dá dinheiro? Não recebi um centavo quando coloquei no meu…

Um abraço.

# 5° Mark de Souza Costa Sunday 23 September 2007 às 16:45GMT

Excelente trabalho, parabéns!

Saudações,

Mark Costa

# 6° Jorge Sunday 23 September 2007 às 16:46GMT

Caro Henrique,

Parabéns pelo novo visual (assino seu FEED e o apelo para a visita foi irresistível).
Gostaria de uma dica (se não for segredo de estado). Eu acho superinteressante esta forma como expões os livros e em virtude do segmento do meu blog indicar livros é crucial, assim gostaria de saber se é através de plugin que apresentas os livros e CDs e, se positivo, se podes me indicá-lo.
Muito grato e mais uma vez parabéns!

# 7° Mickele Sunday 23 September 2007 às 17:21GMT

Não rolou no Opera Kestrel 9.50 alpha pra Mac, ficou estranho, parece que pegou o estilo pra mobile. Na versão estável do Opera pra Mac não pude testar.

# 8° Henrique Costa Pereira Sunday 23 September 2007 às 15:18GMT

Bem lembrado Walmar! Já está corrigido ;)

# 9° Canha Sunday 23 September 2007 às 15:26GMT

Henrique, tá show de bola o novo visual do site!
Continue com o excelente trabalho que vc anda proporcionando para toda a web.
Abraços.

# 10° Fabrício Marchezini Sunday 23 September 2007 às 18:54GMT

Mais uma vez, muito bom, Henrique. No momento estou num Firefox 1.5 do Linux e está tudo certo. Depois vou acessar nos browsers do Mac e te aviso caso haja algum problema.

Parabéns pelo trabalho!

# 11° Suzan Carla Lopes de Lima Sunday 23 September 2007 às 18:57GMT

Parabéns Henrique. Ficou excelente o seu novo Layout.
Este novo vermelho ficou show. Muito bom mesmo!
[]s.

# 12° Raphael Rodrigues Sunday 23 September 2007 às 20:49GMT

Muito boa a nova versão! Funcionando perfeitamente no FF 2.0.0.7 e resolução 1280 x 800 px no Windows Vista! Infelizmente não posso testar em pda ou similares :(

Dicas excelentes também, já tinha pensado em desenvolver algo parecido para aumentar letra! =)

# 13° Alessandra Mazzariolli Sunday 23 September 2007 às 23:03GMT

Olá Henrique,

Adorei a tonalidade que você usou no novo layout e como eu já comentei no artigo do Flávio, gostei muito das funcionalidades que vocês implementaram.

O fato de pensarem em todos os detalhes para os diferentes tipos de usuários foi o grande diferencial que você e o Flávio tiveram com essa nova interface.

Parabéns! Muito mais sucesso…

:D

# 14° Rochester Sunday 23 September 2007 às 23:42GMT

Nossa cara, gostei muito. Eu nao tinha problemas com o vermelho anterior, gosto de sites fortes e o vermelho fica bem marcado na memória.

Uma coisa que sempre me atormenta é Layout Elástico X Layout estático x layout liquido. Ainda acho que o elástico seria melhor, nao sei sinceramente se a opção de diminuir a resolução foi uma boa.

No geral gostei muito do site. Mas o melhor foi a honra de estar em um blogroll ao lado de grandes nomes :)

[]‘s

# 15° Alexandre Monday 24 September 2007 às 01:23GMT

Ótimo design, embora um pouco poluído. Enfim, é o preço a se pagar por anúncios =)

Quanto a acessibilidade, ficou muito bom no w3m (navegador via terminal padrão no debian, similar ao links2), mas há como melhorar muito ainda. Colocar links ocultos via css de “próximo post” e “post anterior” nas chamadas da página principal e uma maneira melhor de explicar que o título leva ao artigo completo tornariam tudo muito melhor.

# 16° Camilo Monday 24 September 2007 às 02:30GMT

Ficou bacana, usou melhor o espaço. Mas como visual, o anterior era tão bom que sacrificá-lo é um crime :).

Algumas coisas só que eu acho que podiam melhorar:

1) Na barra de menu, o fundo preto grande parece estranho, passando em cima do logotipo. Não se é possível uma transparência (ou uma imagem), mas acho que podia dar uma atençãozinha pra essa parte. Gostava também das flechinhas no mouse-over.

2) Entre o número de assinantes e o ícone do feed há um ‘traço’ vermelho claro. Sei que é um pedaço do logotipo, mas com o banner do Bluehost no meio do caminho, esse pedaço parece estar perdido.

3) Um pouco abaixo, em “Sobre o Revolução Etc”, com o texto alinhado à direita (e sua foto também) ficou com um alinhamento meio irregular. Entendo que vai ficar algo parecido com isso, mas talvez uma editada no texto podia melhorar isso. Talvez tirar a borda do lado direito da foto também ajudasse um pouco, o que desalinha a foto do alinhamento que você estabeleceu.

4) Na coluna da direita (OPML), o Elcio tinha dado uma dica que quem usa Bloglines podia linkar para o arquivo OPML que o próprio Bloglines gera. Não lembro do link, só lembro da dica :) e como você era um dos que mais falava bem do serviço, imagino que ainda o use e não precise ficar atualizando o arquivo de tempos em tempos.

5) Na seção anúncios, embaixo do banner da Dreamhost, o ‘mouse-over’ no texto “Mais detalhes do hosting aqui” deixa o texto em preto, o que fica com difícil leitura. Você podia deixar o link da mesma forma que deixa os links no Sobre o Revolução (Cursos da Visie, Webinsider, Leia Mais) na cor amarela, sem mouse-over.

6) Aqui no meu computador, o link para o “topo” (que fica do lado inferior direito) deixa aparecer um filete vermelho do fundo (Windows XP/Firefox/1024×768).

Parabéns pela mudança, os outros blogueiros podiam fazer mais dessas coisas! Gostei bastante da forma como usou a borda das imagens, com um vermelho BEM escuro, dando a impressão de sombra. Legal ter o blogroll de volta, espero estar um dia por lá ;) U2 é um som que agrada muito!

Abraço

# 17° Rodrigo Fante Monday 24 September 2007 às 09:43GMT

Bom agora sim, perfeito!
O vermelho de fundo antes chamava demais atenção, cansava muito a vista.
Ficou muito melhor, sem falar na acessibilidade.
Parabéns, agora sim um layout a altura do blog.

# 18° Erick Wilder Monday 24 September 2007 às 11:54GMT

Bem, eu gostava do visual antigo e sinceramente a única coisa que me desaponta são as propagandas (talvez a que mais incomode é o banner da bluehost, enorme como sempre) e infelizmente (sim, digo infelizmente mesmo) criei filtros do seu site aqui no adblockplus!
Acho muito legal a iniciativa de poder dar aos diferentes tipos de usuários a chance de acompanhar um blog/site. Seria bacana se os sites “públicos” (leia-se “do governo”) tivessem uma preocupação assim.
Navegando pelo site do Senado ou até mesmo sites menos visitados que são de responsabilidade do governo (federal, estadual ou o que quer que seja) existe um certo descaso quanto promover a acessibilidade. A coisa que mais encontro é javascript completamente obstrusivo (ou programação orientada a javascript – href=javascript:;) e fontes que ao serem aumentadas inutilizam o layout.
Talvez isso seria um bom tema apra ser discutido aqui, já que você está sempre um passo a frente no que diz respeito a acessibilidade na web brasileira. Quem sabe discutindo apontando os problemas as empresas que adminsitram os sites não resolvem botar a mão na massa?

Parabéns pela reforma!

# 19° Aguinelo Pedroso Monday 24 September 2007 às 12:31GMT

Henrique, muito bom, testei no FF e IE e está perfeito, vou testar o mobile e te dou um feedback, a identidade visual foi mantida e está bem acessivel e usável, você continua sendo um icone da Web brasileira. Parabéns

# 20° Arthur Monday 24 September 2007 às 13:22GMT

Estou acessando o site atraves do meu smartphone nokia e61 utilizando o navegador nativo e acredito que nao estou visualizando a versao para dispositivos moveis, mas sim a mesma versao que vejo no firefox no pc. A navegacao pelo smartphone ficou um pouco cansativa, mas funciona perfeitamente

# 21° Julian Monday 24 September 2007 às 16:29GMT

Parabéns pelo site novo, Henrique! Ficou muito foda!

Um pequeno problema quase insignificante que encontrei, foi que o CSS não carregou direito na primeira visita. Deu isso no FF, IE6 e Opera, pra mim pelo menos. Depois de um refresh, volta tudo ao normal.

De novo, parabéns, cara. Ficou tudo muito bom. Queria ter um PDF/smartphone pra acessar e ver como ficou.

SHOW!

# 22° Julio Fragoso Monday 24 September 2007 às 18:02GMT

cara, uma vez eu li em algum canto que todos nós devemos ter ídolos, por que além de nos tornarmos humildes, eles servem de montanha, para chegarmos até lá ao alto.

sou teu fã, estou sempre acessando teu site/blog/o que seja, para ver coisas sobre acessibilidade e tudo mais que você escreve.

parabéns pelas mudanças visando todos, parabén mesmo !!

desejar sucesso pra tu, acho que nunca é demais !

# 23° Diego Monday 24 September 2007 às 18:33GMT

Henrique passo aqui pra dizer: Sem comentários… parabéns pelo investimento em estudo e pesquisas e de se importar com o próximo, isso é responsabilidade social, estou preparando um revolução para o modelando também, espero contar com sua ajuda, mas quando for ai vai ser pra valer. Abraço.

# 24° Rodrigo Fante Monday 24 September 2007 às 19:20GMT

Nao acredito que tem gente que reclama de propagandas em blogs!!

Povo ingrato, recebe conteudo de graça no conforto de sua casa e ainda reclama de um bannerzinho.

Dou cada vez mais razao ao Daniel do Pontos no I nesse artigo:
http://www.pontosnoi.com/2007/09/23/fuga-de-cerebros-20-chega-vez-dos-blogs/

# 25° Carlos Monday 24 September 2007 às 20:32GMT

site ta bugado no FF e to vendo com 1152×864

# 26° Micael Monday 24 September 2007 às 18:08GMT

Curti cara, ficou bem bacana

Soh achei meio poluido la em cima, mas ficou bem legal.

# 27° Dirceu Jr. Tuesday 25 September 2007 às 00:33GMT

Legal.
Fica ai a dica p/ vc testar mais fácil em vários navegadores:
http://browsershots.org/

# 28° Yuri Almeida Tuesday 25 September 2007 às 13:35GMT

Então, Henrique… O novo visual está muito bom. Muito bom mesmo, mas acho que você deveria ter continuado com os ícones dos microformatos. Em um artigo – que não procurei – você fala sobre o uso dos ícones.

No mais, gostei mesmo do visual. Inspiração pra todos nós.

# 29° Elyézer Mendes Rezende Saturday 29 September 2007 às 17:13GMT

Sempre achei o visual do Revolução etc muito interessante, mas este realmente me surpreendeu. Gosto muito de transparência e efeitos com gradiente.

Está nota 10. Assim como o conteúdo.

Parabéns.

Abraço

# 30° Eliel Monday 01 October 2007 às 14:12GMT

Olá e parabéns pela precupação com a acessibilidade. A idéia do layout específico para os poucos usuários do 800×600 foi show de bola. Vou implementar no site tb! =)

# 31° Lino Tuesday 02 October 2007 às 01:52GMT

Vi, vi e gostei. Como leio pelo RSS não vi as mudanças antes, mas agora que as vi, aprovo.

# 32° Anthenor Aguiar Saturday 06 October 2007 às 21:03GMT

Sinceramente… Achei poluído

# 33° Hilder Santos Monday 08 October 2007 às 06:12GMT

Uau, Henrique…

Cada vez mais você se supera, cara! Está muito legal o novo design, gostei pra caramba, brother.

E o jabazinho no texto caiu como luva, hein? :)

Mas tá é certo, quem sabe, faz o ao vivo.

Ficou muito show, parabéns, meu velho. Quando crescer, quero ser igual a você. :D

Grande abraço, e sucesso!

# 34° Reginaldo Saturday 05 April 2008 às 01:46GMT

Muito bom seu layout, mesmo eu não tendo visto seu anterior (é a primeira vez que te visito, obrigado pela amigabilidade do site).

Também gostaria de dar meus parabéns pelo seu trabalho! Não é sempre que vejo um webdesigner se preocupando com questões como websemântica, acessibilidade e, principalmente, conteúdo inteligente e estimulante!

Rasgação de seda à parte, mãos à obra, meu amigo! Ainda há muito trabalho pela frente na blogosfera! rsrs

Um abraço,

Nepomucký

# 35° @lesilva Monday 15 March 2010 às 09:25GMT

Ficou Show de bola – pena que eu tenho o costume de ler pelo gReader e não dê pra visitar sempre a interface do seu blog – mas tá de parabéns :)

Deixe um comentário

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

Informações de Contato

Sobre o Revolução Etc

Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Publicidade

  • Banner
  • Banner

Henrique Costa Pereira - Revolução Etc - (CC) Alguns Direitos Reservados - Powered by WordPress

O conteúdo deste site de autoria de Henrique Costa Pereira está sob a licença de Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil. Permissões e/ou restrições além do escopo desta licença podem ser vistas e/ou requeridas na minha página de licença.

Nenhum conteúdo deste site pode ser copiado e reproduzido em outro site sem autorização do autor! Mais detalhes aqui!

Powered by WordPress