· · 2

Bastidores do Novo Site: Parte 1

Após alguns meses de trabalho intenso, está no ar o meu novo site! Nesta série de posts, vou detalhar um pouco o processo criativo e de desenvolvimento, além de ideias futuras, já que o site está publicado com apenas metade dos recursos planejados inicialmente.

Com todo redesign de site, sempre é interessante pesquisarmos e utilizarmos novas tecnologias, a fim de melhorarmos nossas ferramentas de desenvolvimento e aprimorarmos nosso conhecimento. Para o meu site, este redesign, que já é o quinto, implicou em repensar vários aspectos, visuais e estruturais.

O Fim do Wordpress

Eu não queria mais usar Wordpress para controlar o blog. Apesar do Wordpress ser um ótimo sistema, com bastante versatilidade e capacidade de expansão, nunca consegui me acostumar com seus métodos. Para os meus fins, o Wordpress era apenas mais um sistema pesado no meu site, com vulnerabilidades de segurança e que apenas estava controlando a parte de posts e comentários. Além disso, o seu código fonte é muito tumultuado e confuso perto de uma arquitetura MVC, por exemplo. Cada mudança que precisava fazer no tema ou em algum plugin me dava calafrios!

Apesar de não publicar posts no meu site sobre PHP e CodeIgniter, trabalho com este sistema diariamente. Resolvi assumir o compromisso de refazer completamente o sistema gerenciador do meu site com este framework PHP. Apesar de cada novo recurso que quero necessitar de mais tempo e capacidade de desenvolvimento, por outro lado possuo controle total sobre o que o sistema pode fazer ou não. O meu objetivo final é ter um site leve e funcional, com apenas as funções que preciso. Apesar do sistema de blog aqui desenvolvido ser bem mais simples que o Wordpress, a ideia de que posso expandi-lo de acordo com o que preciso é muito mais confortante.

Como resultado, agora o site tem um sistema integrado de blog com comentários, além de uma nova área de cursos online, sistema de cadastro e de pedidos (veja a seção Ensino), entre outros sistemas mais simples de gerenciamento (como seção Portfolio).

A Web Responsiva

O responsive webdesign está aqui para ficar. Apesar das críticas (com razão) e das discussões correntes na comunidade, esta técnica faz parte do presente e do futuro do desenvolvimento para a web. Outros sites também já "entraram na dança", como A List Apart e até a própria Microsoft (trabalho excelente do estúdio Paravel — veja o post no site do co-fundador Trent Walton sobre o assunto).

Já usava um pouco da técnica no meu site anterior, mas de forma muito rudimentar. Apesar do CSS de adaptação deste novo site ainda não estar 100% completo, os benefícios são claros. Utilizei a abordagem mobile first e planejei o site primeiro para as telas menores. Em seguida, fui expandindo o layout e o incrementando de acordo.

O código CSS do site também utiliza poucos pontos de mudança de resolução (break points), pois queria manter as coisas simples. Basicamente, algumas regras para telas menores que 768px (ainda vão entrar, mais algumas regras para telas de celulares), e outras específicas para telas maiores, aumentando o tamanho de fonte e colocando alguns outros efeitos.

@media only screen and (max-width: 768px) {
	/* código aqui */
}

@media only screen and (min-width: 769px) {
	/* código aqui */
}

@media only screen and (min-width: 1281px) {
	/* código aqui */
}

@media only screen and (min-width: 1680px) {
	/* código aqui */
}

Todas as dimensões do site estão ou em em, ou em porcentagem. Isso dá uma flexibilidade muito grande ao layout, onde apenas uma mudança de font-size na tag body já diminui ou aumenta o site inteiro. Com as grades flexíveis com porcentagem, as colunas também se adaptam de acordo.

Porém, este "encolhe e estica" do layout traz alguns problemas, principalmente com os ícones que vinha usando para demarcar comentários, carrinho de compras e etc. Isso foi resolvido utilizando uma das mais recentes tendências, chamada de icon fonts (mais sobre isso em um futuro post).

Recursos e HTTP Requests

A web está caminhando novamente para uma fase mais minimalista, em termos de design e código, principalmente para blogs e sites pessoais. Além disso, o lançamento do Windows 8 e sua linguagem visual simples com linhas retas e cores sólidas (sem degradês) também tem sido muito influente. Isto tem uma razão simples: cada vez mais pessoas entram em sites usando celulares e tablets.

Por isso, além das técnicas de responsive webdesign, tentei usar o mínimo de imagens, scripts e CSS possível para evitar carregar demais a página. Perceba que este site utiliza poucas imagens, e que as imagens utilizadas para ilustrar cada seção do site estão bem desfocadas, um efeito útil para diminuir o tamanho geral do arquivo.

Resultado da análise feita pela extensão Web Developer
Resultado da análise feita pela extensão Web Developer

Em termos de peso total da página e pedidos HTTP, há muitas melhorias que ainda serão feitas. Uma análise pode ser vista na figura ao lado, através de uma das funções da barra Web Developer.

Na análise, vemos que o peso total da Home está em 485kb (talvez um pouco mais por causa das fontes carregadas do Google, o que não parece estar constando corretamente aqui). Quase metade do peso da página está vindo do plugin do Facebook! Tudo isso apenas para um botão "Like"… Por isso, um dos planos futuros é tentar utilizar algumas alternativas que têm surgido ultimamente, como o Social Count, para remediar isto.

Um Ponto de Partida

Apesar do site estar no ar, é claro que isto é apenas o começo. Muitas novidades ainda estão por vir (assim que conseguir um tempo para desenvolvê-las!), entre elas:

  • Laboratório HTML / CSS / JavaScript
  • Recomendações de Livros
  • Novos Tutoriais, Screencasts e Cursos Online

Deixe também seus comentários e sugestões abaixo!


2 Comentários

  1. Gravatar
    camiLLa

    Muito bom! E fico pensando o que mais vem por aí com a "parte 2" dos bastidores haha :]

    O mais bacana é ver o site novo no ar - porque às vezes quem desenvolve se prende a tantos pormenores que, no fim, não lança nada. Fico curiosa quanto aos recursos e outras ideias que ficaram pelo caminho para que o site pudesse vir ao ar. Mas enfim, o cuidado com todos os âmbitos da página está espetacular e inspirador :D Tem até icon fonts por aqui!

    1. Gravatar Guilherme Müller

      Valeu Camilla! Sim, a parte de icon fonts é uma das mais interessantes, estou preparando um post sobre isso.
      Muitos recursos sempre ficam para depois e, com a correria, as coisas estão em stand by. Mas Tenho algumas seções complementares em mente, além de melhorias gerais no sistema do site.

Comente