quinta-feira, 10 de junho de 2010

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

quinta-feira, 27 de maio de 2010

Criação de Site - LAIFBAC

Mais um site entregue pela w3maker - desta vez, um site com a tecnologia mais atual existente que foi aplicada nos itens, animação, sistema de menus, busca, galeria de imagens e sistema de gerenciamento de conteúdos.

Tudo começou com o site e o blog da w3maker sendo encontrados na busca orgânica, pela nossa cliente Melissa Biehl utilizando o Google.com, com as palavras chave "criação sites rio" em busca feita a partir da cidade de Mississauga - Canadá, onde reside.
Na página de resultados ocupamos com nosso site a primeira posição e com nosso blog a quarta posição.
Contato feito e proposta aprovada, o site foi todo resolvido e desenvolvido à distância, com reuniões virtuais de briefing a partir do Skype e com utilização intensa do Google Docs para o fornecimento do conteúdo de textos.
A proposta foi a de criar um site com visual intenso, uma vez que seu propósito é divulgar um evento inédito no Brasil e na América Latina de pintura Facial e Corporal.
Mensagens diâmicas deveriam ser passadas ao visitante sob a forma de animações informando sobre a convenção - abolimos de imediato o uso do Flash e optamos por utilizar um componente em Javascript Assíncrono, o MooTools que permite transições com efeitos e executa o carregamento das imagens com maior velocidade do que no Flash.
As imagens são armazenadas em uma pasta no servidor e podem ser editadas, ordenadas e gerenciadas a partir da área de administração do site. O componente exibe as imagens sob a forma de slideshow e oferece ainda uma pré-visualização dos slides anterior ou seguinte, caso o usuário deseje retroceder ou avançar as imagens manualmente.
Definido e formatado este componente, o layout do site foi concebido ao seu redor, com grandes imagens de background dos artistas que farão os workshops da convenção.
Este site "precisa" que as imagens "falem", portanto grandes formatos foram adotados, no entanto a preocupação com a rapidez de carregamento não foi deixada de lado - ao término da montagem, todas as imagens foram submetidas ao compactador do Smush It para a maior redução de peso sem perda de qualidade - com isto, alguns megabytes foram poupados.
Toda a estrutura de webdesign foi montada a partir do "Gantry Framework", que é uma estrutura de grade de construção que permite o desenvolvimento do layout dentro das métricas ideais para a utilização do Joomla como gerenciador de conteúdo.
Para os itens do menu de navegação, foi utilizado o componente "fusion.js" que compartilha da mesma biblioteca MooTools da animação. Além disso, como inovação, foram inseridas miniaturas das imagens dos instrutores dos workshops ao lado dos respectivos nomes no submenu de navegação.
O sistema de busca do site é inovador, uma vez que carrega os resultados de busca na própria página em que o usuário se encontra e sem a necessidade de acionar um botão de "buscar", conforme os termos vão sendo digitados no campo de busca os resultados são carregados em uma camada sobre a página. Além disso a busca pode ser local (no conteúdo do site) ou na web via Google.
Para as galerias de imagens que não são poucas no site todo, uma para cada instrutor, além das galerias de boas vindas e das imagens de Búzios, foi utilizado o componente externo "Pirobox" com Ajax, com código aplicado diretamente no editor de artigos do site. As imagens em tamanho maior são exibidas sobre a página em camadas a partir do clique sobre as miniaturas e possuem função de voltar e avançar além de acionar um slideshow automático.
Além das galerias de imagens, outros elementos de comunicação dinâmica foram incorporados ao site:
- Um sistema de abas (tabs) contendo o Mapa de localização de Búzios que se utiliza de uma API do Google Maps; os destaques para os patrocinadores do evento, com janela modal de publicidade e futuramente irá conter um vídeo institucional do evento que será carregado no sistema de abas a partir do Youtube.


A divulgação deste site e da convenção será feita através das redes sociais e para tanto um componente de disseminação viral foi instalado para ajudar nesta tarefa, o AddThis.
O gerenciamento de conteúdo é todo feito com o Joomla e, para tornar as URLs geradas pelo PHP amigáveis aos mecanismos de busca, foi instalado o componente Joomla SEF (Search Engine Friendly) que transforma as "strings" do endereçamento das páginas, em URLs com palavras chave úteis ao serviço de SEO implantado no site.
O site conta ainda com as ferramentas de análise Google Analytics e Webmaster Tools para avaliação das ações de SEO e posicionamento.
Por fim, cabe destacar que o site está preparado para receber ampliação de conteúdo e evoluir conforme a data do evento for se aproximando.

Para saber mais sobre sites com gerenciamento de conteúdos - w3maker.com.br

quarta-feira, 19 de maio de 2010

Logomarca para "International Association of Yoga & Ayurveda - IAYA"

Criação de Logomarca ou Logotipo hoje, é uma seara complexa - todo mundo é designer, todo mundo tem milhares de fontes em seus computadores e, escolher uma fonte bacana não basta para criar uma logomarca.
Logomarca é um neologismo usado de forma empírica e genérica, para designar logotipo, símbolo ou marca, sem que haja consenso nem precisão absoluta ao que ele se refere, se apenas ao símbolo, ao logotipo ou ao sinal misto (combinação de ambos). O seu uso está popularizado no Brasil e o termo consta do dicionário Aurélio e é considerado correto pela Linguística. No entanto, o termo é visto como inadequado por diversos designers por não possuir a necessária precisão. (Fonte: Wikipedia)
Logotipo, refere-se à forma particular como o nome da marca é representado graficamente, pela escolha ou desenho de uma tipografia específica. É um dos elementos gráficos de composição de uma marca, algumas vezes é o único, tornando-se a principal representação gráfica da mesma. (Fonte: Wikipedia)

Vamos ao que importa: A w3maker foi contratada para criar a logomarca da "International Association of Yoga & Ayurveda - IAYA" - entidade credenciada internacionalmente com certificação dos maiores mestres do Yoga e Ayurveda da Índia.
Um projeto no mínimo com inúmeras variáveis e envolvimentos místicos cuja imagem final, deveria transmitir através de seu símbolo, diversos aspectos da espiritualidade.
O "briefing" enviado pela diretora no Brasil da Associação, Sheila Quinttaneiro, considerava especificações desde cores e suas simbologias, até imagens que possuem forte significado para o hinduísmo.
Optamos por fazer nossas pesquisas sobre as simbologias, de forma isenta e imparcial. Cada pesquisa feita foi apresentada e discutida com a Sheila, para definição de qual caminho seguir na linha gráfica.
Dois elementos foram eleitos para a criação do símbolo:
- A Flor de Lótus - representa a espiritualidade e a evolução; ela nasce no lodo e resplandesce com a beleza da sua flor;
- Om - símbolo de Deus, representa o som cósmico de Deus no Universo.
Uau! Por onde começar?
O caminho mais óbvio foi fazer algumas montagens com os elementos para testar o equilibrio e a harmonia da combinação das formas.
A segunda opção se mostrou a mais equilibrada mas faltava alguma coisa que juntasse tudo, como numa "associação". O símbolo de "Om" apesar de seu aspecto gestual, ainda estava graficamente representado em sua forma mais comum. Fizemos então um estudo para suavizar suas formas e torná-lo mais orgânico, por assim dizer.
A "Flor de Lótus" precisava de um eixo e foi aprimorada para ganhar mais imponência.
Voltamos então a juntar os dois elementos, mas ainda faltava alguma coisa que os unisse, que os envolvesse, como numa associação.
Foi então que surgiu a idéia de envolver o símbolo de "Om" com um coração estilizado, como se fosse o bulbo da "Flôr de Lótus". A simbologia estava completa, "Deus no Coração"!
As cores escolhidas seguiram os preceitos e significados hinduístas:
- Lilás na Flôr de Lótus - é a cor que representa a consciência cósmica;
- Azul Marinho no Om dentro do Coração - é a cor que representa a interiorização da consciência.
Para compor a logomarca, o nome da associação foi escrito todo em caixa alta com a fonte MS Candara, com variação de pesos, Normal e Bold e espacejamento entre letras de 20%.
Atualmente uma logomarca precisa ser pensada para aplicações que vão além dos tradicionais itens de papelaria, uniformes, frota, etc. Ela tem que atender às diversas aplicações do mundo virtual, ícones de desktop, ícones da barra de navegação, patterns, backgrounds, cabeçalhos de documentos eletrônicos e por aí adiante.



Por fim, para quem olha esta logomarca pronta, não imagina que tantos conceitos e estudos de forma foram necessários para um resultado final. Para os que desconhecem a simbologia hinduísta, esta pode parecer apenas uma simples logomarca, mas para os que conhecem, seu símbolo tem muito a dizer e, com certeza trará boa sorte à esta associação.

Para saber mais sobre criação de logomarcas: w3maker.com.br

Criação de Anúncio - Shiva Studio

Nossa formação original remonta aos tempos em que atuávamos na publicidade, desde 1995 caímos na rede e este serviço ficou em "standby". Vira e mexe os clientes pedem para a gente fazer um anúncio, é quando então a veia publicitária pulsa forte.

Foi o caso deste anúncio para o Shiva Studio de Yoga e Ayurveda, com o Curso de Imersão em Yoga que será realizado em Búzios - RJ.

O anúncio é veiculado na revista Prana Yoga Journal nas edições 39 e 40, uma das publicações mais importantes do Yoga no Brasil.
Para este anúncio, usamos a técnica do "alltype" para transmitir toda a informação sobre o curso, no título do anúncio, evitando assim o tradicional texto de apoio ao título.
Com variações de corpo de letra e uso de cores, escolhemos a Myriad Pro - Open Type, destacamos em amarelo as informações principais. As demais informações receberam a tonalidade de verde e bege para criar um segundo plano. Foi definida uma largura e tudo foi alinhado de forma justificada.
A escolha das fotos fornecidas pela Sheila Quinttaneiro foi decisiva na força de comunicação do layout do anúncio. A imagem principal, uma variação da posição do Guerreiro, sugere toda a linha de ação e dirige o olhar de quem vê o anúncio, para as informações. Foi feito um corte na foto para deixar o espaço necessário para o texto à esquerda.
Fotos complementares menores, de outras posições de Yoga, reforçaram a mensagem do anúncio.

Saiba mais sobre criação de anúncios - w3maker.com.br

terça-feira, 18 de maio de 2010

Revista Forças Armadas - Relatorio SEO 18.05.2010

Primeira página do Google - Metas atingidas, com o posicionamento do site da Revista Forças Armadas na primeira página de resultados de busca orgânica do Google. Um aumento significativo de 78% no número de visitantes únicos foi registrado no 3o. bimestre, desde a implantação do SEO.

segunda-feira, 17 de maio de 2010

LA&CCC 2010 - Sucesso total

Realizado no Sheraton Hotels & Resorts Rio de Janeiro entre os dias 4 e 6 de maio de 2010 o LA&CCC 2010 da SES World Skies, teve sua comunicação visual desenvolvida pela w3maker.

Além da criação do Hot Site para o evento que funcionou para divulgação e inscrições/reservas para o evento, a w3maker cuidou de toda a comunicação visual, sob a coordenação do Sr. Hamilton Carrilho da empresa SarahTur, organizadora do evento.

Do crachá ao painel de 4.00 x 2.80 m para o salão de convenções, foram diversas peças seguindo os padrões do manual de identidade corporativa da SES World Skies, utilizando uma imagem de vista aérea do Rio de Janeiro.
O destaque dos itens de comunicação, foi o Manual do Evento, que serviu de apresentação da conferência, com uma carta da vice-presidente de vendas para a América Latina e Caribe, Dolores Martos; portfolio de boas vindas ao Rio de Janeiro e Agenda de todo o evento.
Seguindo a mesma linha gráfica, foram desenvolvidas placas e banners de sinalização para o saguão do Sheraton, área de recepção dos participantes e restaurante.

A comunicação visual do LA&CCC 2010 teve a direção de arte e produção das artes finais digitais a cargo de Marcio Goldzweig da w3maker.

E, para fechar com chave de ouro, o reconhecimento pelo "great job" da Gerente de Marketing para a América Latina e Caribe, Maria-Marta Andrade.
Para saber mais sobre comunicação visual e hot sites visite w3maker.com.br