Renovação do website do Jornal Meios & Publicidade

Quinta-feira, 31 de Maio de 2007

Foi hoje lançada a nova versão do website do Jornal Meios & Publicidade. A remodelação foi feita pela log (o layout foi feito por mim) e incluiu a migração do antigo CMS para um novo, mais fácil de utilizar para os jornalistas.

Esta renovação teve por base algumas queixas dos jornalistas relativas ao CMS anterior (Bricolage). O Bricolage é uma ferramenta muito potente, no entanto é também muito difícil de usar para um utilizador comum. As maiores queixas prendiam-se com o facto de se demorar quase um dia inteiro para colocar on-line todas as notícias do jornal. As notícias do jornal são os artigos que são publicados na edição em papel e que estão disponíveis também no site (ao contrário das notícias do dia, que são inseridas todos os dias).

Devido à complexidade do Bricolage, sentiu-se a necessidade de implementar algo mais simples e que permitisse publicar conteúdos de forma rápida e directa (sem passos intermédios). O sistema deveria ocupar-se de tudo o resto automaticamente para que os jornalistas pudessem passar mais tempo a escrever notícias e não a inserir conteúdos tediosamente no CMS.

E assim, foram feitos estudos, identificadas as necessidades dos utilizadores e foi implementado um novo CMS que foi adaptado à medida. Até agora, os resultados com os jornalistas foram muito bons.

Quanto ao layout em si, podia-se ter mantido o anterior, mas conseguimos convencer o cliente que era necessário resolver alguns problemas de usabilidade graves e reduzir o peso total das páginas (chegando por vezes aos 500Kb na homepage).

Meios e Publicidade - versão anterior
Versão anterior do Meios & Publicidade
A versão antiga do site tinha alguns problemas de usabilidade e era demasiado pesada.

Como se pode ver na imagem em cima, na área visível no browser (sem fazer scroll) apenas se conseguia visualizar uma notícia (a notícia de destaque) uma vez que o resto da página estava ocupado com banners, menus e outros elementos gráficos menos importantes.

Na imagem seguinte conseguimos ver a comparação entre o espaço dedicado às notícias no layout anterior e no novo layout.

Meios e Publicidade - antes e depois
Antes e Depois
No novo layout foi dado um destaque maior às notícias. Em vez de uma coluna esguia, foi alargado o espaço e melhorada a disponibilização dos conteúdos. Assim, conseguimos ter mais notícias (usando praticamente a mesma quantidade de scroll do layout anterior) e ocupando um espaço mais largo e visível.

Infelizmente, devido ao tamanho do banner no topo, não se conseguem ver as quatro notícias de destaque sem ter que fazer scroll (como tinha sido planeado no início). Era bom se pudessemos ter feito o site sem tanta publicidade, mas há valores mais altos que se levantam.

E assim nasceu o novo Meios & Publicidade. Conseguimos reduzir bastante o peso das páginas de 67Kb para 18Kb só no HTML e usámos menos imagens. O peso total da página vai depender obviamente das imagens utilizadas nos artigos e nos banners (que agora até são mais do que os que haviam anteriormente), mas mesmo assim, conseguimos manter tudo a um nível aceitável.

Meios e Publicidade - página inicial
Página inicial
Página inicial do novo Meios & Publicidade.

Tal como nos foi pedido pelos jornalistas, num jornal, a importância das notícias é visualizada através do tamanho do título. Numa página com vários títulos conseguimos ver claramente qual é o mais importante e qual a hierarquia existente, só através do tamanho do texto. Na página inicial do site tentámos criar essa hierarquia e em vez de termos todas as notícias com texto igual (como no layout anterior), temos uma com maior destaque, três com um pouco menos de destaque, e depois as restantes notícias (separadas por categoria).

Meios e Publicidade - feeds RSS
Novidades
Feeds RSS

Juntamente com o redesign, vieram novas funcionalidades. Já é possível comentar nos artigos e passou a existir um Feed RSS oficial (Carlos, actualiza aí o Destakes). A versão online do jornal Meios & Publicidade passou também a ter vídeos e a possibilidade de navegar pelas edições anteriores do jornal (ao contrário de poder consultar apenas a última).

Em relação às notícias propriamente ditas, vão passar a ter tags (se os jornalistas se lembrarem de as indicar). Vai também passar a haver uma lista de notícias relacionadas (da mesma categoria) e um top das notícias mais comentadas e mais lidas.

Meios e Publicidade - página de notícia
Página de notícia
Aspecto da página de uma notícia.

Uma vez que se trata de uma revista, a versão para impressão das notícias em papel passou a ter um aspecto mais parecido com uma página da revista e não tanto como uma página web, apesar de termos mantido o layout bastante simples.

Meios e Publicidade - versão para impressão
Versão para impressão
Versão optimizada da notícia para ser impressa numa folha A4.

Uma nota adicional para a acessibilidade: apesar dos menus usarem JavaScript, são totalmente acessíveis através do teclado (usando a tecla TAB) e mesmo sem JavaScript activado, é possível aceder a todas as secções do site, uma vez que todas as páginas interiores têm links para as suas sub-secções.

No global, conseguimos manter um nível de acessibilidade aceitável em todo o site. O peso das páginas também é muito menor, comparado com o layout anterior e a legibilidade também é melhor.

Espero que gostem :)

25 Comentários

Escreva o seu comentário!
  1. Gravatar

    Carlos Jorge Andrade

    31 de Maio de 2007, 23:25

    Gostei… muito bom mesmo. Parabens!

    Só tenho uma queixa e é sempre a mesma quando “renovações” destas acontecem.
    Pq é que não mantêm os links anteriores ? Sim, mudaram de CMS mas uma linha ou duas, se é que migraram os conteúdos anteriores, resolviam o problema. Assim, tudo o que é link por esta web fora para o site antigo… puf, não funciona. :-(

  2. Gravatar

    Rui Moura

    31 de Maio de 2007, 23:29

    Fantástco, e então a nível de cores está muito bom mesmo.

    Belo trabalho :)

  3. Gravatar

    José Carlos

    31 de Maio de 2007, 23:51

    Parabéns pelo layout Ivo. Está muito bom.
    Parabéns também à restante equipa da log pelo trabalho final, gosto bastante do site, é agradável e está tudo muito bem estruturado e disposto, facilitando a navegabilidade.

    Não posso deixar de concordar com o Carlos na questão dos links para os conteúdos anteriores se manterem acessíveis.

  4. Gravatar

    João Antunes

    1 de Junho de 2007, 01:42

    Um bom exemplo de como o WordPress pode ser usado para mais do que blogs.
    Parabéns!

  5. Gravatar

    Mario

    1 de Junho de 2007, 08:53

    Excelente trabalho na renovação da página.

    Sempre defendi que as pessoas têm a ideia errada do wordpress, que não serve apenas para blogs visto que é um CMS com bastantes recursos até.

    Foi facil a conversão do bricolage para wordpress? Quanto tempo demorou este projeto a ser concretizado?

  6. Gravatar

    Ivo Gomes

    1 de Junho de 2007, 09:01

    A migração dos conteúdos é sempre um problema. A estrutura dos links foi mantida em todos os outros sites migrados (Publituris, Construir e Hipersuper). No Meios&Publicidade estamos ainda a tratar disso, e posso assegurar que os links se vão manter como no site anterior. Quanto à passagem do Bricolage para WordPress, não foi fácil devido à quantidade de tabelas que o Bricolage usa, mas conseguimos desenvolver um script bastante eficiente para migrar os conteúdos a 100%.

    Supostamente o novo site só deveria ter ido para o ar no fim-de-semana, mas os DNS propagaram-se de imediato ontem. Por isso ainda há alguns problemas em determinadas áreas que serão resolvidos nas próximas horas.

  7. Gravatar

    Ivo Gomes

    1 de Junho de 2007, 09:09

    Esqueci-me de mencionar que a área de administração do WordPress foi bastante alterada e foram adicionadas muitas funcionalidades, tais como:
    - separação de escrita de notícias do dia e notícias do jornal;
    - escrita de dossiers ou especiais (grupo de notícias);
    - gestão separada das notícias do dia, notícias do jornal e dossiers;
    - gestão da página inicial;
    - gestão de vídeos e associar vídeos a notícias;
    - pesquisa de imagens enviadas;

    …entre outros…

    Vou ver se faço um post aqui com alguns screenshots, se puder.

  8. Gravatar

    Dextro

    1 de Junho de 2007, 10:36

    Só há uma coisa que não gostei (e eu sou muita piegas neste ponto): É impressão minha ou a resolução “minima” do site é 1024×768? Eu sei que hoje em dia já existem muitos ecrãs com tamanhos superiores a este mas nem todos. (eu por exemplo costumo ter o browser sem estar maximizado e só disponho de 1024×768).

    Anyway o layout está muito agradável e consegui rapidamente encontrar todos os conteúdos que poderia procurar no jornal, os meus parabéns :)

  9. Gravatar

    Paulo

    1 de Junho de 2007, 14:06

    Boas, é a primeira vez que comento um artigo deste blog.Nos últimos tempos tenho tentado acompanhar das mais diversas formas o evoluir da Internet a nível de usabilidade/acessibilidade, etc. É com alguma supresa minha que vejo que a resolução mínima do site é 1024×768, e por exemplo no Internet Explorer, não é possível aumentar ou diminuir o tamanho dos textos.
    Não tenho a certeza da importância destas minhas obervações, de qualquer maneira acho que é sempre bom ter esses dois aspectos em consideração.
    Quanto ao Layout, acho que está simpático, bem agradável até.

    Parabéns ;)

  10. Gravatar

    Tiago Celestino

    1 de Junho de 2007, 15:00

    Simplesmente foi show! Curto pra caramba layouts com design clean. :D

  11. Gravatar

    Ivo Gomes

    1 de Junho de 2007, 15:10

    Segundo as estatísticas do Meios&Publicidade, apenas 8% dos utilizadores tinham uma resolução de ecrã inferior a 1024px de largura. Foi por isso que optámos por aproveitar melhor o espaço na página.

    Quanto ao tamanho do texto, foram usados valores relativos (em’s) em todo o site, incluindo a largura da página e todos os “containers”. Um CTRL+ aumenta não só o texto, mas também a largura da página, o que, em ecrãs com uma resolução alta, é muito bom.

    Quanto ao IE6, o facto dele não redimensionar os textos tinha a ver com o uso de um tamanho absoluto no BODY (em pixels), que permitia depois definir todos os outros elementos usando valores relativos. Já corrigi e já funciona em IE. (Obrigado Paulo pelo aviso).

  12. Gravatar

    André

    1 de Junho de 2007, 16:41

    Bolas, tive que me esforçar para encontrar alguma coisa a apontar…

    Apesar do DTD do site ser HTML 4.0 strict(yay), as tags do elemento LINK (CSS) do Democracy Plugin estão a ser fechados com uma barra na tag de abertura (self-closed), como se fosse XHTML. E pronto, também não valida na W3C (picuínhisses, só daqueles erros que não interessam nem ao menino Jesus).

    Uma coisa que reparei… parece que não estão a adicionar Tags às notícias. Foi só nas que eu vi? lol Se eles não usarem, a funcionalidade foi em vão.. :(

    E no Linux, o último item do menu muda de linha.

    Mais? Não vi mais nada. Até aguenta 3 graus de aumento do tamanho do texto. Genial, Ivo. Parabéns.

  13. Gravatar

    Levi Figueira

    2 de Junho de 2007, 00:39

    Bem…

    Como apreciador de webdesign, nomeadamente standard-compliant e simplista (NOT simplório :p) fico deveras contente por perceber que no panorama nacional encontram.se bons valores neste campo!

    O facto de optares por HTML 4.0 strict revela uma certa “actualização” em relação ao que é blogado por aí (ainda não consegui largar o XHTML 1.1 desde que o comecei a usar… eu sei, eu sei, tá errado… :( mas é o hábito :p) e o teu estilo de design é dos que aprecio!

    Não (te) conhecia e cheguei aqui pelo planeta* e voltarei cá mais vezes.

    Já agora uma nota: gostei do facto de seres bastante aberto em relação às tuas opções: estou farto de designers “cocky” que têm a mania de que não podem revelar “o segredo do negócio” (como se técnicas usas fossem segredo algum, para quem as sabe procurar!).
    Fico a aguardar por screenshots da admin do wordpress :)

    Abraço e até outra vez,
    ~Levi Figueira aka EinZteiN

  14. Gravatar

    Ivo Gomes

    2 de Junho de 2007, 14:21

    @André: As tags só passaram a existir para os artigos publicados a partir do dia 31 de Maio, por isso, tudo o que está para trás não tem tags. Quanto aos erros de validação, o WordPress tem um problema: todo o código que ele gera automaticamente é XHTML e por vezes isso torna-o incompatível com o HTML 4 Strict. No entanto, são erros menores e sem importância.

    @Levi: Bem-vindo ao blog :) Vou ver se consigo obter autorização para meter aqui a admin do WordPress, mas se calhar só o posso fazer daqui a 2 semanas, quando voltar de férias :D
    Entretanto, na próxima semana vão haver novidades no Planeta *, e com um layout feito por mim :D
    Fiquem atentos!

  15. Gravatar

    André

    3 de Junho de 2007, 02:02

    Concordo contigo Ivo. Realmente creio que seria mais grave teres um DTD de XHTML e pores tags de HTML (por exemplo, não as fechares). Podia dar azo a algum erro duns parsers menos robustos.

    E boa! Não sabes o quanto me agrada saber que finalmente o asterisco vai ter cara nova.
    O conteúdo é e sempre será Rei, mas lá pelo conteúdo ser bom não quer dizer que o aspecto tenha obrigatóriamente que ser mau. LoL

    Fico à espera. (busy bee, tu) :D

  16. Gravatar

    Levi Figueira

    3 de Junho de 2007, 17:32

    Ivo,

    Boas férias ;) hehe

    Quanto a mostrares a admin, esse ponto (a autorização) foi a primeira coisa que pensei! Se conseguires, óptimo; se não, compreende-se :)

    Abraço e bom “relax” ;)

    ~Levi Figueira aka EinZteiN

  17. Gravatar

    Rafael Dourado

    4 de Junho de 2007, 04:43

    Gostei! Não se preocupe quanto ao banner no topo, o AdBlock resolve isso. hehehe
    Gostaria muito se fossem disponibilizados screenshots das telas da administração. Uso WordPress em quase todos os sites que produzo e fiquei curioso para saber como ficou.

  18. Gravatar

    dinis correia

    13 de Junho de 2007, 00:57

    Caro Ivo,

    Uma dúvida sincera: porquê a utilização de HTML em vez de XHTML?

    Tenho trabalhado com XHTML por estar habituado, mas tenho consciência que o futuro da web pode não passar pleo XHTML.

  19. Gravatar

    Levi Figueira

    14 de Junho de 2007, 00:16

    @dinis

    That’s the million dollar question!!

    Here’s a tip:
    http://www.hixie.ch/advocacy/xhtml

    Abraço,
    ~Levi Figueira aka EinZteiN

  20. Gravatar

    Ivo Gomes

    14 de Junho de 2007, 11:18

    Está tudo dito! Obrigado Levi :)

  21. Gravatar

    Levi Figueira

    15 de Junho de 2007, 04:08

    heheheNo prob, glad to help!

    PS: Mas ainda nem interiorizei bem essa cena :p Ainda vivo no “hype” XHTML… 1.1 ;)

    Abraço,
    ~Levi Figueira aka EinZteiN

  22. Gravatar

    André Luís

    15 de Junho de 2007, 18:08

    Sempre que se fala sobre HTML vs XHTML aparece esse documento do Dixie.

    O XHTML é um formato utópico. Era tão giro que todos o respeitassem e cuspissem as páginas como deve de ser. O pior é que o futuro do formato está condicionado pelos browsers, não só pelos webdevelopers. Se até o Chris Wilson, líder da equipa do IE7, disse que foi uma opção consciente não suportar o mime type correcto… tudo isto não adivinha bons dias para o formato.

    O problema é que não é argumentável que vamos usar o XHTML “puro” num projecto grande.. principalmente numa plataforma de publicação! Se houver um problema que seja, todo o documento fica ilegível. É a sua vantagem, mas também a sua cruz. haha

    Mas deixa que o HTML5 também tem os seus “quês”. :-\ O importante, por agora, é usar um DTD strict e respeitar as camadas de separação.. tudo o resto são balelas/hype. :)

  23. Gravatar

    João Pereira

    28 de Junho de 2007, 11:41

    Grande trabalho. Parabéns! Agora sim apetece consultar e ler. Acabaram-se os grandes porcos e feios botões cinzentos na barra de navegação. O preto dá seriedade e credibilidade à temática e ao projecto. A cor como elemtento funcional e de comunicação e não tanto estético e disparatado. Uma correcta analise e hierarquização da informação e a sua colocação como elemento principal do site e não como adorno, com parecia acontecer no outro site. Eramos tão inundados por publicidade de todas as formas que nem conseguiamos ler os artigos.

    Mais uma vez parabéns!

    João Pereira – Designer mxmnmx@gmail.com

Blogs que "linkam" para aqui (Trackbacks e Pingbacks )

  1. ENGRENAGEM - Media e Tecnologia: blog sobre jornalismo, citizen journalism, blogosfera e novas tecnologias | 1 de Junho de 2007, 02:55
  2. » CNN prestes a lançar novo website - IvoGomes.com | 18 de Junho de 2007, 16:54

Comente!

Preencha o seu nome para assinar o comentário. O preenchimento deste campo é obrigatório.

Os comentários são as suas ideias ou opiniões em relação ao artigo que acabou de ler. Assine o seu comentário para dar a conhecer o seu ponto de vista. 
O seu endereço de e-mail não será publicado. O preenchimento deste campo é obrigatório.

Este site suporta a utilização de gravatars. Caso o seu endereço de e-mail esteja registado em gravatar.com, irá aparecer a sua imagem ao lado do comentário. 
Se tiver um website, este é um bom local para o publicitar.

Sempre que alguém ler o seu comentário, irá ver um link para o seu site. Se o seu comentário for relevante para os outros utilizadores, com certeza eles quererão saber mais sobre si e visitarão o seu site. 
Este formulário permite o uso de algumas tags em XHTML. As tags permitidas são as seguintes:

<a href="" title="">
<abbr title="">
<acronym title="">
<b> <blockquote cite="">
<code> <em> <i> <strike>
<strong>
 

 

Sobre o Autor...

Ivo GomesIvo Gomes tem 32 anos e é licenciado em Ergonomia pela FMH. Durante o curso especializou-se em Ergonomia de Sistemas de Informação e actualmente trabalha do Departamento de Usabilidade e Qualidade do Portal SAPO.

É sócio da Associação Portuguesa de Ergonomia, da Usability Professionals Association, e sócio fundador e membro do Conselho Directivo da Associação Portuguesa de Profissionais de Usabilidade.

Categorias do Blog

Arquivo

Consulte o arquivo para procurar algum artigo específico ou use o motor de busca.

|

Subscreva

Se preferir pode subscrever os artigos deste site via RSS para poder estar sempre actualizado.

O que são Feeds RSS e como as posso subscrever?