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).
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.
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.
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).
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.
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.
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 
Ivo Gomes tem 32 anos e é licenciado em
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.
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
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.
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!
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?
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.
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.
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
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
Tiago Celestino
1 de Junho de 2007, 15:00
Simplesmente foi show! Curto pra caramba layouts com design clean.
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).
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.
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
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 
Entretanto, na próxima semana vão haver novidades no Planeta *, e com um layout feito por mim
Fiquem atentos!
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)
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
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.
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.
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
Ivo Gomes
14 de Junho de 2007, 11:18
Está tudo dito! Obrigado Levi
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
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.
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