A proposta e o desafio lançados pela Marcella Freitas - Diretora de Marketing, foram: Criar um site com linguagem de comunicação para o público jovem, estudantes que usam cadernos escolares e universitários e ao mesmo tempo um site que atendesse aos distribuidores e lojistas, mostrando de forma clara os produtos da Kajoma; sendo que a ênfase maior da criação do site seria a comunicação com o público jovem.
Assim sendo, partimos para a criação do site, começando pelo estudo de usabilidade e dos recursos que seriam utilizados. Há muito tempo, pesquisamos e aplicamos tecnologias ao design de sites e, um dos recursos que mais nos permite arrojar na construção de planos e sobreposições com o sistema de tableless, é o uso de imagens em formato PNG (Portable Network Graphics). Sabemos que o peso em Kbytes deste formato é na maioria das vezes, um pouco maior do que o GIF ou o JPG. Mesmo assim, norteamos a criação deste site, contando com a qualidade dos elementos de transparência que este formato permite.
O primeiro “gadget” que nosso diretor de criação, Marcio Goldzweig, sacou do fundo de uma pilha de CDs de backup, foi uma “pérola” escrita em javascript, guardada desde 2001 e que permite a troca de imagens no “background” da página, o “Change BGImage” fornecido graciosamente pelo site www.codebelly.com.
A idéia foi criar um dispositivo com tecnologia JQuery, que permitisse ao usuário do site, escolher e modificar o plano de fundo da página (são 18 opções), tornando a navegação mais divertida e personalizada, permitindo um passeio virtual pelos padrões de fundo das capas dos cadernos Kajoma.
O passo seguinte na criação do site, foi aplicar um elemento cognitivo que indicasse ao usuário, de que o conteúdo do site se trata de – “CADERNOS” – desta forma, quem entrar no site da Kajoma, não terá dúvidas. Para isto foi utilizada uma fotografia em alta resolução de um caderno espiral. A imagem teve seus contornos recortados e salvos em partes no formato PNG, permitindo a visão do “background” da página ao seu redor e entre as voltas da espiral, com efeitos de sombras.
Mesmo sendo de nosso conhecimento que o Internet Explorer versão 6, não dá suporte de visualização ao formato PNG com transparência e que, de 35 a 40% dos usuários de Internet Explorer ainda usam esta versão, resolvemos comprar esta briga. Para resolver este problema de desenvolvimento do site, “sacamos da manga” outra “pérola” que os puristas do código perfeito execram – o famigerado “Hack” – neste caso adotamos uma função em Javascript, o “PNGFix”, que corrige o problema de visualização e permite que usuários do site com a versão 6 do Internet Explorer consigam ver a transparência destas imagens.
Definido o layout básico, foi apresentada uma proposta à Kajoma, que aprovou com entusiasmo a idéia e autorizou o desenvolvimento da programação do site. Houveram alguns pedidos da Marcella:
- As capas dos cadernos deveriam ser exibidas no site em tamanho grande, dentro de janelas pop-ups.
- Uma imagem representando um Post It® deveria ser colocada em algumas páginas do site, chamando para a página de “Coleção 2009”.
Para o primeiro pedido, optamos por um recurso não-obstrutivo que impede o acionamento dos bloqueadores de pop-ups a partir do site e que proporciona um efeito similar aos recursos do Flash – o Fancy Zoom, um conjunto escrito em AJAX que aciona uma janela modal para exibição de imagens sobre a página, mostrando a capa do caderno e seu texto explicativo.
Ainda na linha de raciocínio de elementos não obstrutivos no site, optamos por exibir páginas de conteúdo que seriam internas da Área do Revendedor, em janelas modais, para isto a escolha foi pelo conjunto, também em AJAX, do Greybox.
Para o segundo pedido (Post It®) foi criada uma imagem em PNG com sombra e que foi posicionada através de CSS nas páginas indicadas do site.
E, “last but not least”, queríamos que o site tivesse um menu de navegação visível para os buscadores, com a possibilidade de abertura de sub-menus, para isto foi utilizado um conjunto de CSS mais Javascript.
Daí em diante o desafio foi fazer conviver no site, harmonicamente e com interoperabilidade de navegadores, 14 conjuntos de funções em Javascript, mais 6 arquivos com declarações de estilos em CSS.
Foram 3.658 linhas de código em Javascript e CSS, algo em torno de 15.900 linhas de código em HTML e perto de 300 imagens, que levaram pouco mais de 3 meses para ficarem prontas.
Nos orgulhamos muito da criação de mais este site e da confiança que a Kajoma depositou em nossa capacidade profissional.
Veja o resultado em:
- www.w3maker.com.br
- www.kajoma.com.br
Nenhum comentário:
Postar um comentário
Comentários e críticas serão sempre bem vindos.