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

Onda Azul - Parte I

É engraçado observar como as coisas coincidem.
Como diz a letra da música:
"A vida vem em ondas
Como um mar
Num indo e vindo infinito"
Dentre os projetos mais recentes que a w3maker está desenvolvendo, quatro deles chamam a atenção por um pedido em comum feito nos briefings de nossos clientes - "usar a cor azul".

O primeiro deles, trata-se da criação do hot site para o 17th International Microscopy Congress que será realizado no Rio de Janeiro de 19 a 24 de setembro de 2010.

O evento tem a organização de logística da Sarah Tur, que na pessoa do Sr. Hamilton Carrilho, nos encomendou o hotsite.

Como atrativo e ferramenta de destaque para os conteúdos do site, foi utilizado logo abaixo do menu de navegação um componente escrito em jQuery, o Easy Slider que faz deslizar da direita para a esquerda, imagens e informações importantes para os que pretendem participar do evento.

Aliás, não é um mero evento, será um congresso para 3.000 cientistas e pesquisadores de vários lugares do mundo e que tem como chairman o Prof. Dr. Guillermo Solórzano - DEMa - PUC-Rio - Departamento de Engenharia de Materiais. O evento é realizado a cada quatro anos com apoio da Federação Internacional de Sociedades da Microscopia (IFSM) é o fórum mundial da microscopia nas fronteiras de pesquisa e aplicações em Ciências de Materiais e em Ciências de Vida. A Sociedade Brasileira de Microscopia e Microanálise (SBMM) é a organizadora oficial do congresso

O hotsite criado pela w3maker foi aprovado de primeira pelos Sr. Hamilton Carrilho e Prof. Dr. Guillermo Solórzano.

Para ajudar na criação e sugerir a ambientação apropriada, foram adquiridas fotografias no Dreamstime. A imagem principal, de um microscópio, foi utilizada no cabeçalho da página e na barra lateral direita.

A cidade do Rio de Janeiro deveria ser evidenciada no layout, então uma silhueta do Corcovado foi desenhada no formato de ilustração vetorial e aplicada como marca d'água na barra de títulos das páginas.

Uma característica importante que foi levada em conta na elaboração da programação, foi a criação de um código totalmente amigável aos mecanismos de busca e que passou na Validação do W3C.

Feito isto, o conteúdo interno foi desenvolvido a partir das informações fornecidas pela Sarah Tur.

Página de "Local Tours"

Uma das solicitações que o projeto contempla é um extenso formulário de reserva de hotel, passeios turísticos e demais eventos paralelos ao congresso.

Página de "Reservations"

Por se tratar de um evento de grande porte, hospedar 3.000 pessoas é uma tarefa que exige uma grande oferta de quartos em diversos hotéis que atendam a um padrão compatível com a magnitude do evento.

Para isso foi criada uma seção no hot site com ofertas de outros hotéis na cidade, além do Windsor Barra Hotel que sediará o evento e hospedará alguns de seus participantes.

Nesta seção, chamada "Other Hotels" o desafio da w3maker foi o de integrar uma tabela de preço de 17 opções de hotéis, com um pequeno resumo com foto de cada um dos hotéis oferecidos.

A solução encontrada, novamente passou pelo jQuery e, neste caso utilizamos o componente Clue Tip 1.0.6 que permite a abertura de uma página externa em estilo pop up, a partir do link no nome de cada hotel, com as respectivas informações.

As páginas são ativadas com o passar do mouse sobre os links e permanecem abertas até que o usuário clique no botão de fechar. O componente tem sua interface totalmente controlada via CSS e o seu funcionamento pelos scripts do jQuery.

O hot site tem uma arquitetura da informação clara e objetiva, no sentido de facilitar e promover o acesso a todo o seu conteúdo.

Para visitar o hot site - CLIQUE AQUI

E, como foi dito no começo deste post, mais três outros projetos de sites na cor azul estão vindo por aí, mas isto á assunto para Onda Azul - Parte II, Parte III...

Para saber mais sobre hot sites- Visite w3maker

w3maker entre as feras do CSS

Acabamos de receber a notícia de que o site da w3maker foi contemplado com a Menção Honrosa do CSS Awards! Estamos entre as feras mundiais do CSS!
E o que é melhor, concorrendo ao "Site do Dia".

O CSS Awards é uma galeria dos sites de maior prestígio no mundo, criados com CSS - para quem não sabe, CSS é a sigla em inglês de "Cascading Style Sheet" ou "Folha de Estilos em Cascata", que é um conjuto de comandos que definem os estilos para todos os elementos da montagem e do layout de um site.

Um júri internacional composto pelos mais renomados designers, agências de internet e blogueiros julgam e premiam os melhores sites feitos com CSS.

O diferencial do layout do site da w3maker é que foi concebido e construído como uma "landing page" (página de aterrissagem), fugindo completamente dos padrões de um site convencional. Exibindo explicitamente o conteúdo "criação de sites".

Um dos destaques da criação do site w3maker é o menu de navegação, totalmente desenhado usando declarações de CSS para a tipografia e o alinhamento dos elementos gráficos. Composto de duas listas simples, com declarações individuais para cada elemento de texto.

A chamada principal do site, inspirada no estilo dos layouts publicitários "all type", foi construída com variações de tamanhos de fontes, cores e com o uso de capitulares para destacar cada palavra; também foram utilizadas as "tags" H1 e H2 que funcionam como "chamarizes" para os robôs de busca. No mais, uma sutil sobreposição de camadas e posicionamentos, conferiram movimento para um elemento que a maioria dos designers só consegue no Photoshop, gerando uma imagem do texto.

Simples assim, mas com forte relacionamento de recursos de CSS.

O elemento de apoio, uma ilustração de um balão de quadrinhos sobreposto a uma colagem de códigos HTML, cumpre a função de informar sobre a experiência da w3maker com criação de sites, que vem desde os primórdios da Internet comercial no Brasil, no entanto o texto, que parece fazer parte da ilustração, é outra montagem comandada pelo CSS.

 Por se tratar do site de portfolio da w3maker, não poderia deixar de apresentar uma galeria de imagens com os sites desenvolvidos para seus clientes. Utilizando o componete "Lightbox" que igualmente é todo definido e montado a partir de declarações em CSS.

Agora fica a nossa torcida para que o site da w3maker seja eleito o site do dia do CSS Awards e com isso ganhe evidência entre os melhores do CSS mundial.

In CSS we trust!

Para saber mais sobre criação de sites com CSS e conhecer nosso portfolio viste: w3maker

Novo site Petit et Joli é "crossbrowser"

Entrou em funcionamento hoje o novo site da Petit et Joli - Gastronomia & Charme.

Mais uma criação da w3maker - totalmente desenvolvido em XHTML, Tableless e CSS é um site "crossbrowser". O site foi testado de forma intensiva e teve seu código adaptado para a correta exibição nos 5 principais navegadores:
- Internet Explorer 7
- Internet Explorer 8
- Firefox 3.5.3
- Opera 10.01
- Google Chrome 3.0
- Safari 4.0.2

 
Quando o design fala mais alto e os pedidos do cliente exigem um site com um visual diferenciado, surge a necessidade do uso de comentários condicionais para que a aparência seja a mesma em todos os navegadores.
 

A criação do site partiu de um princípio básico, o portfolio de canapés, doces e ramequins da Petit et Joli deveria ser mostrado na cor "rosa" a preferida da Alexandra Alves, que juntamente com Ethel Kaufmann formam a dupla de produtoras dos mais apetitosos buffets da cidade do Rio de Janeiro.

Para as galerias de fotos dos produtos foi utilizado o Lightbox, um recurso em Ajax (javascript assíncrono) que agiliza o carregamento das imagens, criando uma camada virtual intermediária entre o visitante do site e o servidor de hospedagem. O Lightbox permite ainda a configuração de efeitos de abertura das imagens que não ficam devendo nada aos recursos do Flash e, o melhor disto tudo é que tudo fica "amigável e visível" para os robos de busca.

Na galeria apresentada na seção "Quem Somos" do site, foi utilizada a tecnologia jQuery, um javascript muito mais enxuto e que igualmente possui efeitos de movimento e transparências bastante elegantes.

Para o menu de navegação a w3maker utilizou um recurso simples que integra CSS com uma pequena função em javascript que aciona os submenus na seção de fotos dos produto no site.

A linha geral da criação deste site foi a simplicidade, com linhas curvas, que deixaram o visual mais orgânico e integrado com a proposta de apresentar os produtos da Petit et Joli com muito charme.

Saiba mais sobre criação de sites no Rio de Janeiro