Making of do Webinsider

O novo Webinsider está no ar. Meses atrás em conversas pessoais com o Vicente Tardin (editor e criador do Webinsider) a Webroom fez uma proposta de reformulação do site que se concretizou. O resultado final já está publicado e disponível ao leitor. Eu me envolvi diretamente no projeto repensando as adaptações e necessidades editoriais que o Vicente precisava, cuidei do design e da implementação do XHTML e do CSS e o Flávio Kaminisse cuidou da programação e de toda a migração e adaptações necessárias no WordPress. Eu preparei este texto para dar alguns detalhes dos bastidores de produção.

Estou muito satisfeito com o resultado final e considero um dos meus trabalhos mais gratificantes. Foram semanas e semanas pensando em cada detalhe da migração do velho Webinsider, que nunca havia sido refeito, que tinha um código inicial criado antes da existência do XHTML e que sofria benfeitorias eventuais. Esta é a segunda versão do Webinsider em 6 anos, refeita do zero. O WordPress foi uma escolha do Vicente que nos agradou e muito. Para quem não conhece, o WordPress é uma ferramenta de atualização de conteúdo para blogs gratuita e bastante popular.

Todas as novas funcionalidades e adaptações desde o início deveriam seguir cuidadosamente necessidades editoriais que o Webinsider sempre prezou em manter. Por isso que mudanças drásticas de conteúdo não foram feitas. Quando se pensa na migração de um site com muito conteúdo, que foi feito 6 anos atrás e que atrai milhares de pessoas todos os dias, vários detalhes devem ser considerados e alterações não podem ser feitas por empolgação. Essa cautela e cuidado justificou os quase 3 meses de desenvolvimento.

Uma implementação que vinha sendo pedida por vários leitores era a possibilidade de comentar as matérias. Agora os comentários do leitor por artigo podem esquentar e muito as discussõs nos textos mais polêmicos servindo de feedback direto para os colunistas e os outros escritores. Outra novidade interessante é que agora cada escritor possui uma “página” com a listagem em ordem de todos os artigos lá publicados. Isso permite aos leitores acompanhar todos os artigos de um autor independente da coluna em que ele foi publicado e sem muito esforço. Os artigos mais antigos ainda serão reeditados um à um com o tempo para se adaptarem melhor ao novo formato editorial.

A usabilidade também foi toda revista. Desde a navegação até a ordem com que a informação aparece no código fonte. Implementei uma navegação mais intuitiva e que permite ao usuário se localizar dentro de uma seção em qualquer lugar, mesmo dentro de um artigo. A acessibilidade através de um código racional e com técnicas de SEO também foi observada. É possível navegar em todo o site facilmente mesmo desabilitando a folha de estilos.

A reformulação completa do HTML em algo que seguisse mais os padrões web foi observada religiosamente. Ou seja, procurei encontrar as soluções mais elegantes possíveis para receber o conteúdo de um banco de dados antigo. Os resultados foram muito satisfatórios, mais do que eu esperava no início. Mas em alguns trechos que deveria receber conteúdo vindo do banco de dados, é impossível fazer certas adaptações. Nestes casos escolhas quase que “morais” sempre são feitas de forma cuidadosa.

Agradeço o Vicente pela amizade e compreensão em todas as horas de trabalho gastas pelo Skype e ao meu fiel amigo e escudeiro Flávio Kaminisse por seguir todas as adaptações sugeridas e que pareciam ser o caminho mais longo e que acabou sendo o mais eficiente. Saúde e longa vida ao Webinsider!

  • http://www.tuliofaria.net Tulio Faria

    Parabéns Henrique,

    as mudanças realizadas no Webinsider ficaram excelentes.

    Um detalhe que notei, nas url's, acho que ficariam mais elegantes sem /index.php/ .

    Parabéns mesmo…

    Abraços…

  • http://dirceu.info/ Dirceu Pereira Tiegs

    Olá Henrique,

    Muito legal o novo Webinsider! Meus sinceros parabéns a todos os envolvidos. Só a adição de comentários já é uma mudança estravagantemente boa.

    Só uma dúvida? Se eu tinha um link apontando para um artigo da versão antiga do Webinsider, esse link ainda funciona? Vocês fizeram algum rewrite de URLs ou coisa do tipo? Não tenho nenhum link antigo em mãos, portanto não posso testar.

    De qualquer forma, parabéns e um abraço!

  • Bruno Alves

    Parabéns, ficou muito bom.

    Cada dia que passa, fico mais impressionado com o que é possível fazer com o WordPress.

    Abraço

  • http://danillonunes.com Marcus Danillo

    Belo trabalho! Eu sempre gostei muito dos textos do Webinsider, mas nunca quis assinar. Achava meio desorganizado. Agora já está no meu OPML :D

    Só um detalhe: Não sei quem cuida da parte "escritica" do site, mas vai ae um toque: "Os feeds é uma opção à newsletter do Webinsider"[…]

  • http://revolucao.etc.br/ Henrique Costa Perei

    @Dirceu:

    Sim, todas as URL antigas funcionam normalmente e possuem um redirect no servidor que as encaminha para a mesma matéria.

  • Thomaz Leite

    Ficou excelente. Só não achei legal a combinação de cores. Esse marrom não me agradou muito, mas é pessoal.

    Até mais!

  • Felipe Ranieri

    Mesmo comentário que eu escrevi por lá: Parabéns a você e ao Flávio pelas modificações, ficou um trabalho nota 10!!

    Abraços!!

  • http://fatorw.com/ Walmar Andrade

    Parabéns Henrique. Agora alguém comentou lá sobre o lance da Folksonomia, realmente eu acho que você se equivocou. Só porque se usam tags isso não quer dizer que é Folksonomia.

  • felipe

    po, o visual poderia ser um pouco melhor, nao sei de onde veio o bege ali, mas o conteudo ta show.

  • Bu

    é sempre um prazer poder acompanhar a evolução da web, e de vocês.

    parabéns!

  • Thalis Valle

    Gostei,

    Ano passado entrei em contato com o Vicente, propondo um novo layout para o Web Insider. Ná época, ele gostou dos trabalhos que realizei, pelo portifólio da agência, e pediu para continuarmos mantendo contato.

    Como eu era (e ainda sou) leitor do Web Insider, mais do que pegar um serviço, eu tinha um desejo de visitar o site e poder ver um layout novo. Acabou não dando certo, pois creio que o Vicente já estava negociando com outra agência.

    Agora, ao saber da notícia do novo layout, visitei o site e gostei. Estava precisando, mesmo! Parabéns.

    Abraços

  • http://www.xmlbr.com.br Willian

    Parabéns à todos envolvidos no projeto!

    Eu sempre visito o Webinsider, e realmenteo layout melhorou muito. Aquele amarelo era muito cansativo!

    É muito bom poder ver um portal (não blog) realmente usando WebSatandards e implementando Web 2.0.

    Abraços,

  • http://rodrigomuniz.com Rodrigo Muniz

    Nosso síndico Walmar falou ai e realmente houve um engano no termo, mas isso é um detalhe no anúncio de um trabalho tão bom.

    Parabéns a você, ao Vicente e ao Flavio, e vida longa ao nosso "ALA com comentários".

    :)

  • Mariana

    Nossa, ficou muito muito melhor!!

    Gostei.

    ;-)

  • http://virgulaimagem.redezero.org/ Marcelo Terça

    Oi Henrique,

    Parabéns pelo trabalho! Ficou bem legal!

    abraços,

    Marcelo

  • Zephon

    Só tem um detalhe que poderia melhorar a visualização: A cor de fundo. Não é um problema aquela cor, mas é quase do mesmo tom das colunas. Aquele banner no topo, a primeira vista eu pensei que fosse um problema do banner que deveria estar em outro lugar mas que acabou "flutuando", por causa do fundo. Abrindo a página em uma resolução maior que 800×600, parece um tanto estranho… Sugiro pelo menos "sombra" ou bordas escuras ao redor das colunas ou melhor, um fundo mais claro.

  • http://cirofeitosa.com.br/ Ciro Feitosa

    Como comentei no blog do Flávio, parabéns pelo trabalho de toda a equipe. Minhas sugestões comentei no próprio Post no Webinsider. Abraço Henrique!

  • http://www.inovastudio.com/home/ Rael B. Riolino

    ué….. aqui deu essa mensagem:

    Bad Gateway

    The proxy server received an invalid response from an upstream server.

  • Fred“

    Tudo muito bom, exceto o nome de algumas classes que contradizem a idéia de flexibilidade de layout só pelo css: "sub_right", "sub_left", "left_side", "right_side"…

  • http://www.santhus.com/ Jonathan Santos

    Olá Henrique,

    Não sei se o comentário ainda é pertinente…

    1. Quando fui enviar a notícia, tem dois campos de E-MAIL DOS DESTINATÁRIOS no formulário.

    2. Quando clico em enviar, a tela "congela". Acho que seria legal dar um feedback ao usuário enquando estás sendo feita a requisição no servidor.

    3. Depois de enviada a mensagem quando eu torno a clicar em "Enviar" aparece a tela de sucesso, ao invés do formulário.

    Era isso…

    Dicou muto bo o site.

    Abraços