dpw2010: novo tema do desenvolvimento para web

No dia 05/04 foi publicado o artigo “Promoção dpw2010: anuncie grátis no desenvolvimento para web“, que divulgava a promoção na qual o ganhador teria o direito de anunciar grátis no desenvolvimento para web. Esse anúncio grátis se daria para comemorar o novo tema do blog, tema este que foi inaugurado hoje: dpw2010!

Web design, estrutura e usabilidade

O web design foi feito com base na Proporção Áurea, com o objetivo de melhorar a distribuição do conteúdo e proporcionar melhor sensação ao visitante. A fim de dar ainda mais ênfase aos conteúdos, o estilo clean foi reforçado e aprimorado!

Página Inicial

Durante a análise do tema antigo, foi constatado que a página inicial não tinha uma apresentação muito boa. As imagens e demais elementos “incorporados” no texto faziam com que a index demorasse para carregar. Em função do peso, somente 3 artigos eram exibidos por vez e uma paginação era mostrada ao final.

No dpw2010 é diferente: priorizou-se, ao máximo, a performance e o desempenho do site! A página inicial, por exemplo, agora mostra 7 artigos, sendo que somente o mais atual, que recebe destaque, tem uma imagem vinculada sendo exibida. Quer dizer, é possível ao visitante visualizar uma quantidade bem maior de artigos de uma só vez, num tempo de carregamento super otimizado!

Páginas de Artigos

As páginas de artigos também receberam aprimoramentos. Agora vários efeitos visuais acontecem para proporcionar uma melhor experiência e facilitar o uso do site. Mas talvez, devido ao tempo, não tenha sido possível implementar os efeitos para todos os browsers…  ;-)

Por exemplo, clique em “Sumário” e selecione algum dos itens. Uma rolagem suave acontece para levar até a âncora selecionada. Se a tela rolar o suficiente, um botão aparece à direita da tela para levar novamente ao sumário, facilitando a navegação e experiência no site.

Página de Categorias e Busca

Agora as Páginas de  Categorias exibem todos os artigos de uma só vez! Com o novo tema, a questão da paginação pôde ser eliminada de vez, tanto na página inicial, quanto nas páginas de categorias. Já que, agora, as listagens de artigos são mostradas de forma fácil de “escanear” e com apresentação de somente título e descrição, mesmo as categorias que possuem mais artigos ficam leves de serem exibidas/carregadas.

A página de busca segue, basicamente, a mesma estrutura da Página de Categorias: tudo é exibido de uma só vez, com a oportunidade de todos os resultados serem visualizados em uma única página. Para quem faz buscas relativamente específicas, consegue ver o resultado com vários artigos mesmo “antes da dobra”.

Barra de ferramentas

Agora o desenvolvimento para web possui uma barra de ferramentas! Em qualquer lugar do site em que estiver, o visitante pode se valer da barra de ferramentas flutuante, sempre fixa no topo da tela. Opções são mostradas/ocultadas dependendo do tipo da página atual, como as opções de enviar a notícia para um amigo e compartilhar em diversas redes sociais – uma ênfase especial ao exclusivo Sistema DPW para Alteração do Tamanho de Textos ^®!

Análise de performance e desempenho

As diversas modificações no design, estrutura, otimização de função e todas as demais medidas feitas para aumentar a performance e desempenho do blog deram certo.

Gráfico de Peso de Arquivos: Antes

Na página inicial, por exemplo, utilizando o complemento para Firefox YSlow, foi possível notar que o número de requisições HTTP estava bem elevado e, pelo fato de as folhas de estilo e javascripts não estarem compactados, isso também contribuía para um carregamento não muito satisfatório. Depois de otimizar os scripts e CSS e retirar/implementar alguns plugins no WordPress, o ganho de performance é notável!

Gráfico de Peso de Arquivos: Depois

Habilitando o analisador de Rede do Firebug e vendo os resultados, os números não eram, lá, dos melhores…

Velocidade de carregamento: antes

Com os melhoramentos do novo tema do desenvolvimento para web e os já referidos meios para diminuição de requisições HTTP e compactação de scripts e folhas de estilo, as coisas ficaram bem melhores!

Velocidade de carregamento: depois

Na prática, houve uma melhora de quase 300%!

Resultado da promoção dpw2010

Como devidamente explicado no artigo da promoção, infelizmente uma mudança nos critérios de sorteio teve que ser realizada. De qualquer forma, como garantido, aqueles que haviam participado até então não estariam de fora.

A busca do twitter possui “prazo de validade”. Felizmente existem boas ferramentas para o twitter, como o HootSuite, que permitem armazenamento de mensagem definidas por critérios específicos. Com isso, ficou fácil: foi só jogar o nome de todos os participantes em uma planilha e gerar um número aleatório no random.org.

E a vencedora da promoção dpw2010 foi Raquel Oberg (@raqueloberg), da Thema Webdesign! Como vencedora, seu prêmio será um banner na barra lateral do blog que será exibido durante 2 meses.

Parabéns, Raquel, pela promoção e por seus trabalhos na Thema!

Considerações finais

Ocorreu uma mudança importante em relação à participação do desenvolvimento para web nas mídias sociais: a partir de agora, o twitter oficial do blog é @desenvolvweb! Peço aos seguidores do perfil @tarciozemel interessados estritamente em assuntos relativos a desenvolvimento web para seguirem @desenvolvweb, pois os assuntos da área serão tratados neste.

Existem diversos phantom labels no novo tema e diversas funcionalidades/ferramentas em desenvolvimento, que serão publicados em momentos oportunos. A intenção é fazer do blog um espaço cada vez mais agradável e com conteúdo cada vez de mais qualidade para os leitores! Os estudos feitos foram para que os implementos e melhorias no blog facilitem a navegação e garantam uma experiência prática e objetiva.

Fica nosso “Muito obrigado!” aos participantes e leitores, assinantes do feed, seguidores do twitter e para todos que contribuem para que o desenvolvimento para web seja um dos principais blogs sobre desenvolvimento web do Brasil!