Hot Site para GP's in Rio 2011

Hot sites são projetos em que gostamos muito de trabalhar. Seu aspecto peculiar, como fonte de informação de curta duração, faz com que, via de regra, sejam produzidos de forma rápida, com layout de impacto e conteúdo objetivo.

Hot site, Micro-site ou Mini-site, traduzindo ao pé da letra significa "site quente" elaborado para um momento, voltado para destacar uma ação de comunicação e marketing pontual.
A diferença está apenas na estratégia de comunicação utilizada para concebê-lo. Usualmente os hot sites possuem tempo de vida útil determinado, isto é, são feitos para serem rápidos e são direcionados a uma ação de marketing ou comunicação específica, com duração ligada a esta ação mercadológica, como lançamento de produtos, eventos, novas edições de produtos ou serviços, ações de CRM (Customer Relationship Management), entre outras.
Geralmente os hot sites possuem um apelo visual maior e são mais focados em um público específico, traduzindo a expectativa deste alvo.

Seguindo estes critérios, a w3maker acaba de firmar seu "Apoio Promocional" produzindo o hot site para a 10a. Edição do GP's in Rio - 2011 do PMI Rio - o maior evento de networking profissional para Gerentes de Projeto do Rio de Janeiro.

O hot site foi produzido tendo como base o CMS (Content Management System) Joomla - sistema de gerenciamento de conteúdo - assim, possibilitando rápidas atualizações e inserção de avisos e notícias através do Blog integrado.
O hot site possui uma única página extensa, dividida em quatro painéis; a navegação se dá por um menu superior fixo, que quando "clicado"  faz a página deslizar até o ponto desejado.

No primeiro painel é exibido um resumo dinâmico de todas as atividades do evento e é feita a "chamada à ação" (call-to-action) para a inscrição dos participantes.

Informações adicionais e formulário de inscrição são exibidos em "janelas modais".

Em design de interface gráfica do usuário, uma "janela modal" é uma janela filho que exige interação dos usuários antes que eles possam voltar a operar o aplicativo pai, através de recursos de programação em Ajax ou jQuery o fluxo de trabalho na janela principal do aplicativo é interrompido até que a janela modal seja fechada pelo usuário.

Em web design, janelas modais são úteis pois mantém o usuário na página de um site, exibindo conteúdos, imagens ou alertas flutuantes sobre a página visitada. 

Uma força para o layout - muito além das fontes de sistema

Em um passado não muito distante, a grande limitação de layout tipográfico à qual o web designer estava "amarrado" era a de utilizar apenas as fontes de sistema ou aquelas que vinham com a instalação padrão dos sistemas operacionais - em outras palavras, uma fonte que não estivesse instalada na máquina da pessoa que visitava um site seria imediatamente substituída por uma fonte padrão, comprometendo toda a estética do site.

Foi-se o tempo em que para exibir fontes de letras especiais em um site, era necessário transformá-las em imagens.

A w3maker utilizou o recurso @font-face que permite instalar no servidor de hospedagem, junto com as páginas do site, uma coleção de fontes nos formatos True Type (TTF), Embedded Open Type (EOT) e Scalable Vectorial Graphics (SVG) - desta forma, a partir de declarações na folha de estilos é possível enviar informações ao browser (navegador) de internet do usuário, para que utilize a fonte que o web designer escolheu.

O resultado prático disto é que os títulos e textos passam a responder por detalhes importantos do estilo e design do site.

Para o Hot site do GP's in Rio a w3maker utilizou a fonte "Megalopolis". A fonte "Megalopolis" foi obtida e empregada respeitando a sua licença de uso em

http://www.fontsquirrel.com/license/MEgalopolis-Extra

CMS turbinado

A escolha do CMS Joomla deveu-se não somente ao fato de propiciar atualizações fáceis e rápidas, mas também à possibilidade de instalação de extensões que permitem interação com as redes sociais.
O módulo RokTwittie foi escolhido para publicação na seção de notícias, dos últimos tweets (tuítes) da página do Twitter do Evento.

Novo logotipo do evento

A w3maker assina também a criação do novo logotipo do evento, em comemoração à sua 10. Edição.

Logotipo original que vinha sendo utilizado até a 9a. edição do GP's in Rio.

O primeiro fator considerado na criação do novo logotipo foi a legibilidade e o "apóstrofe" entre as letras "P" e "s" - apesar de este último ser um pequeno detalhe e um elemento que comumente é utilizado no idioma inglês, o evento adotou este formato.

O briefing básico foi "networking", rede de contatos e interação entre os Gerentes de Projeto.

Estudos preliminares foram feitos a lápis, em seguida serviram para o início do processo de vetorização no Corel Draw. Alguns layouts foram apresentados, em dois deles procuramos manter em comum com o logotipo anterior o grafismo do Pão de Açúcar. As letras da sigla foram criadas e desenhadas com exclusividade.
Em três das opções apresentadas, o apóstrofe foi substituido pela sobreposição de parte das letras "P" e "s", ficando a cargo da área de interseção formar de modo estilizado o apóstrofe. Assim obtivemos uma limpeza visual maior, com a eliminação deste caractere.

 

 

Mais um projeto concluído e no final recebemos os comentários, enviados pelo coordenador do evento Daniel Fucs, da equipe à qual o site foi submetido antes da publicação:

 Para saber mais sobre a criação de Hot Sites acesse: www.w3maker.com.br

4 em 1

Nos aqui da w3maker costumamos parafrasear o velho ditado: "Em casa de web designer, portfolio desatualizado."
Atender aos clientes, criar sites, desenhar logotipos, reciclar os conhecimentos, estudar a nova versão do Joomla 1.6, instalar a nova versão 1.6.1 com correções de segurança, mergulhar na nova estrutura de iframe do Facebook e aprender os macetes para criar sites de empresas, observar as mudanças nos resultados de busca do Google com o novo recurso "Google Instant", avaliar o quanto isto afeta o processo de otimização de sites... Com tantos afazeres, acaba não sobrando tempo para cuidar da nossa imagem, fazendo com que deixemos de lado o portfolio da w3maker, os posts neste Blog, nossa página no Facebook... a gente se sente como aqueles equilibristas de pratos. :-(

Por isso então resolvemos publicar este 4 em 1 para mostrar os últimos projetos de sites desenvolvidos para nossos clientes:
- Acesso / Via4
- Cargomar / Via4
- EsEqEx - Escola de Equitação do Exército
- EmpreiteiraPCh

Os sites desenvolvidos para Acesso e Cargomar tem em comum a criação e o layout desenvolvidos pela Via4 - Agência de Comunicação e Marketing para seus clientes. A w3maker desenvolveu os templates para Joomla e toda a programação e produção destes dois projetos.
Para o site Acesso foi utilizado o Gantry framework para estruturação dos módulos e atender com a maior fidelidade aos requisitos do layout.
Já para o site da Cargomar, trabalhamos desenvolvendo um tema (template) personalizado, utilizando a estrutura padrão de posições de módulos do Joomla. Neste caso, destaque especial para os módulos "customizados" para exibição de Cotação do Dólar e Hora Mundial.

Os sites desenvolvidos para nossos clientes EsEqEx - Escola de Equitação do Exército e EmpreiteiraPCh ambos em Joomla, coincidentemente seguem o mesmo esquema dos anteriores.

Optamos pelo Gantry framework para o site da EmpreiteiraPCh, por se tratar de um site com estrutura pequena, poucas páginas e com diagramação mais livre, deste caso, destaque para a utilização do módulo RokStories para exibição dinâmica de imagens e conteúdo, baseado na biblioteca javascript Mootools.
No site da EsEqEx - Escola de Equitação do Exército, novo layout para um site com uma grande estrutura de links divididos em dois menus de navegação, optamos por desenhar o tema personalizado de modo a ampliar ao máximo o aspecto de usabilidade e facilitar a experiência do usuário.
Este site teve uma enquete inicial instalada para saber o que mais agradou aos usuários e, 38,9% votaram no layout. Este projeto também teve uma especial atenção no aspecto de acessibilidade, visando reduzir ao máximo as barreiras para deficientes visuais, apenas dois controles imprescindíveis em javascript nos deixaram abaixo da nota máxima.

Para saber mais sobre criação de sites em Joomla, visite: w3maker

Look Site para Lançamento da Nova Coleção dos Relógios da marca Ferrari no Brasil

LookSite
O que diferencia a criação deste site dos demais, é um conceito. Mais do que um site de produtos, trata-se de um "LookSite". O termo foi cunhado a partir do seu similar mais conhecido, usualmente impresso em papel - trata-se dos "LookBooks" de lançamento das coleções de grifes de moda, onde tendências, estilo e design são apresentados.
O "LookSite" de lançamento da nova coleção dos Relógios da marca Ferrari no Brasil, segue o conceito de apresentação das novas tendências, estilo e design para relógios de pulso.

Totalmente desenvolvido utilizando o CMS (Content Management System) - Sistema de Gerenciamento de Conteúdos de código aberto - Joomla!

Estruturada sobre o "framework" para plataformas web Gantry, a construção do site seguiu um padrão modular, onde todas as peças se encaixam com precisão. A utilização deste "framework" serviu para facilitar e controlar a integração dos vários componentes e extensões necessários à produção do website.

Identificação imediata

Nós da w3maker, temos por princípio que um site deve "dizer logo de cara" de que se trata o seu conteúdo e por isso, estampamos no primeiro slide da animação em Flash um relógio esportivo, juntamente com o slogan da campanha de lançamento. O Flash utilizado é um módulo localizado e não interfere no fornecimento de informações para posicionamento do site em mecanismos de busca.

Impacto visual

O pedido único e principal do briefing de criação do site, feito pelo diretor e representante exclusivo da marca de Relógios Ferrari no Brasil, Sr. Gabriel Schwatrz foi: "Quero um site de impacto, dinâmico e com a cor vermelha de fundo".

Briefing melhor impossível! Ou seja, quase nenhuma limitação para a criação - o sonho de todo designer!

O processo criativo

A crição de um site na w3maker normalmente começa de trás para frente ou seja, pensamos e desenvolvemos primeiro a imagem de background para depois passar às camadas superiores da interface. Desta forma os estudos e formas são mais livres e podemos exercitar um layout mais abrangente.

Com uma câmera digital de 3.2 Megapixels do celular Sony 510a, registramos imagens dentro de um carro em movimento na Rua Voluntários da Pátria e nos corredores do metrô, na estação Botafogo no Rio.

As imagens foram selecionadas, levando em conta o critério de sugestão de movimento e dinâmica da composição. Definição e foco pouco importaram, uma vez que aplicamos efeitos de desfoque e filtragem com a cor vermelha em camadas no modo multiply no editor de imagens Gimp. O resultado passo a passo pode ser visto nas imagens abaixo:

As três imagens resultantes foram suficientes para a criação de fundos para o site, banners, slides para o Flash e outros detalhes do layout. 

Para que o site não tivesse apenas a cor vermelha, empregamos elementos na cor grafite para as áreas de textos corridos e ainda utilizamos um padrão de fundo modular (azulejo) de estilo "grunge" que foi baixado da seção de texturas grátis do site Photoshop Roadmap.

A seguir o resultado da combinação de dois elementos de background dispostos em camadas e contorlados pela CSS (Cascading Style Sheet) - Folha de Estilos em Cascata.

A tecnologia embarcada

Para o catálogo dos relógios, as galerias de imagens foram instaladas utilizando o módulo RokBox compatível com o Joomla!, que é baseado na biblioteca MooTools em Javascript - este recurso propicia a criação de uma camada virtual intermediária entre o servidor do site e a máquina do usuário, para onde as imagens são previamente carregadas, agilizando e diminuindo drasticamente o tempo de exibição das fotografias dos produtos.

Muito além das fontes de sistema

Em um passado recente, a grande limitação de layout tipográfico à qual o web designer estava "amarrado" era a de utilizar apenas as fontes de sistema ou aquelas que vinham com a instalação padrão do sistema operacional - em outras palavras, uma fonte que não estivesse na máquina da pessoa que visitava um site seria imediatamente substituída por uma fonte padrão, comprometendo toda a estética do site.

Foi-se o tempo em que para exibir fontes de letras especiais em um site, era necessário transformá-las em imagens.

A w3maker utilizou o recurso @font-face que permite instalar no servidor de hospedagem, junto com as páginas do site, uma coleção de fontes nos formatos True Type (TTF), Embedded Open Type (EOT) e Scalable Vectorial Graphics (SVG) - desta forma, a partir de declarações na folha de estilos é possível enviar informações ao browser (navegador) de internet do usuário, para que utilize a fonte que o web designer escolheu.

O resultado prático disto é que os títulos e textos passam a responder por detalhes importantos do estilo e design do site.
Para o LookSite dos Relógios Ferrari a w3maker optou pela família de fonte Aller nas versões Light e Regular. A fonte Aller foi obtida e empregada respeitando a sua licença de uso em http://www.fontsquirrel.com/license/Aller

De forma simples o objetiva, foi publicado pela w3maker, o LookSite da marca de Relógios Ferrari no Brasil, onde mais de 100 modelos podem ser vistos em detalhes.

Para saber mais sobre criação de sites e desnvolvimento de LookSites visite w3maker.com.br

w3maker apoia o 9o. GP's in Rio

A w3maker apoia a realização do 9o. GP's in Rio, evento de networking para Gerentes de Projeto do PMI-Rio (Project Management Institute), coordenado por Daniel Fucs.
Nosso apoio se deu através da criação e construção do Hot Site para divulgação do evento.
O "briefing" do projeto pedia a criação de uma página simples, com as principais informações sobre o evento e um "call-to-action" para o formulário de pré inscrições para o evento.

Totalmente desenvolvido em XHTML, Tabeless e CSS o hot site deu especial atenção aos itens de Redes Sociais que apoiam a divulgação do evento através do posicionamento com destaque para os ícones das comunidades do Twitter, LinkedIn, Facebook e Ning.

Para a exibição do mapa de localização do evento foi utilizado o componente "ClearBox3" versão 3.02 -  um "javascript" baseado em bibliotecas jQuery que permite a exibição em camada de imagens, galeria de imagens, Flash, Quicktime, Windows Media, HTML, conteúdos internos do site, páginas externas e, no nosso caso o Google Map.

O "call-to-action" foi estratégicamente posicionado próximo à área inicial de leitura do hot site, ao lado direito da logomarca do evento e da tag do título do primeiro parágrafo - desta forma, exibindo claramente o objetivo de comunicação do hot site.

Utilizando um dos princípios heurísticos de usabilidade, o "call-to-action" foi estratégicamente repetido de forma auxiliar, no texto (sob a forma de botão) e no rodapé do hot site (como link de texto).

Feito isto, só nos restou correr 'pro' abraço e receber os cumprimentos do Daniel Fucs pela criação do hot site.

Para saber mais sobre criação de sites, hot sites, landing pages e promoção de eventos, visite o site w3maker

Da bolha da internet à Web 3.0

obrevivemos à bolha da internet, nada mais poderá nos abater!

Do original em inglês "dot-com bubble" - movimento especulativo que foi de 1995 a 2000, com seu clímax em Março de 2000, quando a NASDAQ atingiu seu índice máximo de 5132.52 - ontem (09/06/10) a NASDAQ fechou em 2158.85

Relembrando os idos de 1999/2000/2001, analisamos o que era "a criação de sites" na virada do milênio. Estamos falando de uma era "Pré Firefox". Até 1998, o Netscape Navigator era sinônimo de navegação na internet, até o Tio Bill (não confundir com Kill Bill) começar a oferecer, em esquema 0800, o seu Internet Explorer junto com o Windows 98.
Então, para que você faria download do Netscape com sua linha discada e seu modem de 56K?

Os webdesigners sofriam apenas para fazer os sites funcionar no Netscape e no Internet Explorer. As resoluções dos monitores eram de 640x480 pixels e os novíssimos monitores de 14 polegadas como o Samsung Syncmaster 3 (quem não teve um?) já vinham de fábrica ajustados para a resolução de 800 x 600 pixels - as pessoas reclamavam que nesta resolução as letras ficavam muito pequenas!

Descontada a altura da barra de navegação, sobravam míseros 640 x 435 pixels para soltarmos nossa criatividade no mundo virtual.

Em 1999 criamos o site para o Centro de Educação em Informática do SENAC-SP, onde uma das exigências era, resolução 640x480, e assim foi!

Para se ter uma idéia do que esta resolução representa, fizemos uma comparação com a resolução média dos Notebooks de 1280x800 - a área destacada, era o espaço onde TODO o site devia ser desenvolvido, era a área visível quando o site carregava na tela.

As limitações não paravam por aí, no que diz respeito aos menus de navegação, ainda não tínhamos as abençoadas CSS (Cascading Style Sheet - só surgiram em 1994), mais de um javascript na mesma página era o caos, se fazia necessário um terceiro javascript específico para apaziguar os ânimos e fazer tudo coexistir com harmonia e funcionar.

Trabalhávamos com tabelas e declarações de estilos inline, ou seja, todos os estilos ficavam embutidos no código HTML, deixando os sites lentos - uma contradição por si só, numa época onde as conexões também eram lentas. Soluções inteligentes em DHTML ajudavam bastante na criação de sub menus de navegação, mas muitas vezes obrigavam os webdesigners a fazer duas versões do mesmo site, uma para o Netscape, outra para o Internet Explorer e, os clientes é claro, não queriam pagar pelo trabalho dobrado.
Estávamos em plena "Guerra dos Browsers" - as duas facções disputavam a tapa os usuários.

Mesmo assim a galera da w3maker se divertiu e aprendeu muito com estas limitações, ganhamos até o prêmio iBest do júri popular por dois anos consecutivos com o site de culinária Luzinete Veiga - abaixo alguns exemplos de sites produzidos entre 1999 e 2001, por favor sem risadas!




É desta época e merece destaque, o Vovó Erótica!
O iG passava pelo seu auge de popularidade, por ser o primeiro provedor do Brasil a distribuir emails de graça. Com esta estratégia o público que circulava pelo portal iG era enorme para os padrões da época - surgiram vários sub portais de conteúdo, um deles o Red Sex; foi lá que o Vovó Erótica nasceu, teve seus momentos de glória e implodiu (RIP) junto com a bolha da internet.

Chegamos ao limiar da segunda onda da internet, rumo à Web 3.0 - revendo tudo isso, é possível perceber o quão primitiva era a internet de 10 anos atrás (primeira onda). Discutir Web 3.0 é tema para outro post, segundo muitos é algo que nem existe ainda.

A Web 3.0 pretende ser a organização e o uso de maneira mais inteligente de todo o conhecimento já disponível na Internet (fonte: Wikipedia).

Pensamento do dia:

"Talento não se acha no computador" - Jorge Sunao Koto
Para saber mais sobre ciração de sites: w3maker