Publicado em agosto 9, 2010 por Guto Kraft

Nesse post que é o segundo sobre a implementação do site da Produtora musical, abordarei técnicas e ferramentas que utilizo para essa tarefa. O primeiro post dessa série trata de metodologia e posicionamento.

IMAGENS E TEXTURAS
Um dos fatores mais impactantes no peso de uma página são as imagens que serão carregadas. Quando essas fazem parte da estrutura, em menus e backgrounds, por exemplo, tudo se torna mais complexo. Mas, um pouco de experiência aliada as técnicas e ferramentas certas, transformam esse propenso desafio em algo simples.

Geralmente as sombras são o pesadelo de qualquer desenvolvedor, isso por elas sempre estarem sobrepostas a outros elementos. A meu ver sombras bem aplicadas agregam muito ao visual do site, dando profundidade, realismo e muitas vezes ajudando na hierarquia dos elementos. No começo do século era realmente complicado construir um layout com sombras utilizando imagens .gif e tabelas. Porém hoje, com o uso de .png e CSS essa tarefa foi infinitamente facilitada. Todos os browsers modernos lêem sem problemas arquivos .png e para os que não suportam esse formato existe o Pngfix, um plugin de Jquery super leve e fácil de usar. Como imagens .png suportam transparência elas se tornam ideais para se trabalhar sombras, sua desvantagem é que são muito mais pesadas que .gif ou .jpg. Aí entram planejamento e bom-senso. Para se alcançar um bom desempenho, sem perder qualidade é necessário saber onde usar cada formato e também utilizar com eficiência um dos fatores básicos da implementação: a repetição.

Podemos repetir infinitamente uma mesma imagem usando a propriedade background do CSS. Essa propriedade nos permite o uso de imagens e cores, repetição no eixo x e y além de possibilidades de posicionamento de acordo com o elemento HTML relativo. Caso eu esteja falando grego pra você, recomendo o tutorial de CSS da W3schools.com.

Conhecendo os formatos de arquivos de imagem, e as possibilidades que o CSS proporciona, é hora de olhar o layout e pensar de forma “modular”. Imagens que serão repetidas para formar um background, por exemplo, precisam ser transformadas em módulos. É importante prever o comportamento de cada módulo, o tipo de repetição (x ou y) que elementos ele irá sobrepor, se a sua qualidade pode ser mais baixa, de modo a diminuir seu tamanho. No caso das sombras eles certamente iram sobrepor algum outro elemento, por isso a transparência se torna imprescindível.

Observando o layout temos inúmeras formas de resolvê-lo, irei listar as três mais simples:
1 – Criando uma textura única, com a madeira, palha e sua sombra em uma imagem só, formato .jpg, sempre centralizada na página e com repetição no eixo y.
2 – Criar dois módulos, um para a textura da madeira, formato .jpg, com repetição em x e y. E outro para a palha e sua sombra com repetição em y e formato .png uma vez que a sombra deverá sobrepor a textura da madeira.
3 – Criar 3 módulos, um para a madeira em formato .jpg, repetição em x e y. Outro para a sombra em formato .png e repetição em y. O último para a palha que estará sobreposta a tudo em formato .gif ou .png devido a transparência (escolha que irá depender do peso e da qualidade da imagem, só se faz testando e observando) com repetição em y.
A terceira opção é um pouco mais complexa, mas também é a que permite maior flexibilidade. Com ela podemos controlar individualmente cada elemento, sua qualidade, seu peso e seu posicionamento. Sendo assim, vamos usá-la no andamento do post.

Como a sombra lateral se mantém uniforme e possui repetição apenas no eixo y podemos criá-la como um arquivo de 1pixel de altura que se repetirá de acordo com a altura do elemento HTML onde estará inserida utilizando a propriedade background. No entanto é importante observar que este elemento sobrepõe à textura de madeira e está sobreposto pela textura de palha. Resolver isso é bastante simples com CSS.

Um fator primordial é o posicionamento dos elementos HTML, de forma geral colocamos elemento dentro de elemento e isso, naturalmente já causa a sobreposição destes. Em casos específicos atribuímos diferentes tipos de float e utilizamos a propriedade Z-index do CSS que permite sobrepor elementos no layout, assim podemos colocar imagem sobre imagem. É algo bastante simples e bem exemplificado nesse capítulo do tutorial da W3schools.

Os módulos de imagens maiores como o da textura de madeira, devem ser feitos com atenção e, principalmente, capricho. Essas imagens iram estar lado a lado e quanto mais suave for a transição entre elas e menos ficar evidente sua repetição, melhor. Para isso é preciso definir um tamanho adequado para cada módulo, sempre pensando no fator peso. Aqui o Photoshop ou algum programa similar serão fundamentais.

Ainda há como reduzir o tamanho dos arquivos .png do seu site. Uma ferramenta legal que sempre uso é Smush.it do Yahoo. Com ela você pode fazer upload de todas suas imagens e ganhar uma redução valiosa no peso destas sem perder quase nenhuma qualidade.

Espero ter sido esclarecedor, se não fui, sinta-se a vontade para deixar sua pergunta ou comentário. Vou ficando por aqui, no próximo post dessa série falarei um pouco sobre textos, títulos e font-replacement.

Publicado em julho 26, 2010 por Guto Kraft

Montagem, produção, programação… foram muitos os temos que já ouvi, e usei, para definir a construção de um site para web a partir de um layout, geralmente, um arquivo psd. Particularmente o que mais me agrada e conseqüentemente adotei, é implementação. Por ser o termo que define com clareza e sem ambigüidade essa tarefa fundamental na vida de qualquer web-designer.

O que vou fazer nos próximos posts será apresentar as técnicas e ferramentas que utilizo atualmente para implementar um site, usando para isso, um layout que fiz a algum tempo. Também darei pinceladas do meu ponto de vista sobre algumas discussões vigentes ao tema. Como meu objetivo nesses dois artigos é ser técnico, não irei me aprofundar em discussões que dariam um belo post, deixa estar que ainda escrevo sobre isso. Então o que temos aqui é, quase, um tutorial.

Desde que implementei meu primeiro site, isso a cerca de 7 anos, as técnicas envolvidas no processo evoluíram de maneira inacreditável. Não é exagero dizer que nos dias atuais cada site que entrego tem diferenças estruturais consideráveis em relação ao seu antecessor. Isso se deve a dois fatores principais: evolução da técnica de escrita do código (linguagem de formatação) semântica e atualização ou surgimento de ferramentas para essa tarefa.

O LAYOUT
Como disse anteriormente esse é um layout que fiz a algum tempo, o cliente pediu alterações e o resultado final é bastante diferente do que mostro aqui, devido a isso optei por usá-lo para o post. Também por ter vários elementos que me permitem apresentar e exemplificar ferramentas importantes que costumo utilizar.

Retirei a marca do cliente (originalmente à esquerda sobre a cortina vermelha) por motivos óbvios e também devo dizer que a foto utilizada é meramente ilustrativa.

Já de cara é possível identificar os elementos que acrescentam complexidade e que, conseqüentemente, serão pontos chave no planejamento da implementação. São eles: cortina vermelha sobre o caderno, violão que “atravessa” o layout e, pra fechar com chave de ouro, um monte de texturas.

DEFINIÇÕES JUNTO AO CLIENTE
Cada profissional faz as coisas do seu jeito, sinceramente não sei dizer se meus métodos são bons ou aplicáveis para qualquer designer ou empresa por essa ser uma questão complexa que envolve diversos fatores. O fato é que são ótimos para mim e, sem dúvida, construtivos para quem possa se interessar.

Esta é uma fase do projeto que vem depois de várias outras de suma importância, como briefing, definição de objetivos, pesquisa de mercado, etc. O que quero dizer é que a fase de apresentação do layout necessita de um background sólido, construído junto ao seu cliente que leva em conta, primordialmente, o cliente dele e a forma de atingi-lo. E isso é algo sobre o qual não vamos falar mais agora

O que faço então é algo que gosto de utilizar como diferencial e que, até hoje, vem dando muito certo. Explico o porquê de cada escolha, de suas vantagens e suas limitações. Deixar tudo claro requer muita paciência e bom senso, mas constrói uma relação de confiança e deixa ambos os lados muito mais preparados para efeitos futuros e isso, não tem preço.

Quando apresento um layout para o cliente já tenho em mente como resolver cada detalhe dele, que tecnologias iram ser úteis e aplicáveis de acordo com nossos objetivos, orçamento e, é claro, público-alvo. Aqui o importante é ser flexível, por exemplo: talvez a otimização do site (SEO) não seja realizada junto com seu lançamento, devido a custos, então deixe tudo preparado e pensado para essa tarefa no futuro e, o principal, diga isso ao cliente, fale das vantagens e do seu planejamento que, com certeza, após o boom do site e dos feedbacks positivos, a otimização será questão de tempo.

IMPACTO VISUAL
Qualquer coisa que falo aqui sempre leva em conta particularidades do projeto, como público-alvo, orçamento e até planejamentos futuros, então não vamos generalizar nada.

No caso da Produtora Musical, a idéia era lançá-la, sobretudo com um conceito forte e imagem impactante. Quase como um artista. Nesse caso há o risco da performance ser prejudicada. Com muitas imagens, texturas e tipografia utilizadas para ilustrar o conceito, torna-se um desafio instigante deixar o site leve. Trocando em miúdos, o que precisávamos era um site que causasse um “ohhhh” e que fixasse a imagem da nova Produtora na cabeça de seus parceiros, sem ser muito pesado. De quebra seria o local para que esses pudessem ter acesso aos eventos mensais. Também planejamos um sistema de RSS, e algumas ações em redes sociais, mas essa é outra história.

Performance é uma das palavras chave para qualquer site de sucesso, sempre foi, hoje o Google já leva em conta o tempo de carregamento das páginas em seu algoritmo. Se o site apresenta várias imagens e texturas, como é o caso, cabe ao desenvolvedor planejar cuidadosamente sua implementação e utilizar ferramentas adequadas. É claro que na seqüência do post vamos fazer isso!

PLANEJAMENTO
Aqui está um fator importante e diferencial. O que posso dizer da minha experiência com planejamento é isso: “indispensável”.

É obrigatório. Você sempre tem que planejar e organizar qualquer coisa que vá fazer antes de por a mão na massa. É um processo trabalhoso e, a princípio, invisível. Por exemplo, se você passar 3 horas planejando e pesquisando a implementação de um site, ao fim desse tempo, na prática você não terá uma linha de código escrita. Mas terá a segurança de saber o que está fazendo, vai conhecer todos seus próximos passos e terá eliminado praticamente toda a chance de erro do projeto. E todos sabem que a pior maneira de perder tempo é com problemas que poderiam ter sido evitados.

Sendo assim quanto melhor seu planejamento menores serão suas dores de cabeça e, no fim das contas, mais tempo você economiza pra pensar em outras coisas legais para implementar em cada projeto.

Por hora é isso. No próximo post irei abordar a parte técnica da implementação e falar de algumas ferramentas marotas que tenho usado.