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

Novo Site Atnas Engenharia - Estudo de Caso

Empresa

ATNAS ENGENHARIA LTDA iniciou suas atividades em 10 de abril de 1997.  A empresa fundada pelos engenheiros Odílio Márcio Mauad Ferreira e Marco Antonio da Rocha Tristão, ambos com mais de 40 anos de experiência na Petrobras em projetos, planejamento e implantação de empreendimentos, notadamente na área de gasodutos e oleodutos.

Certificada desde 2007 em ISO 9001, ISO 14001 e OSHAS 18001, possui um Sistema de Gestão integrada visando um maior controle e qualidade sócio-ambiental, gerencial e econômico.

Novo site Atnas Engenharia - Niterói - Rio de Janeiro

Web Design e Sistema de Gerenciamento de Conteúdos - w3maker

Visão Geral

Nome da Empresa: Atnas Engenharia Ltda.

Responsável pelo Projeto: Sabrina S. Fernandes Cintra - Gerente de P&D

Representante da Diretoria

Assistente do Projeto: Josi Guimarães - Assistente Administrativa
Site: http://www.atnas.com.br/
Web Design e Desenvolvimento: w3maker

Briefing
Desenvolvimento de novo site, projeto visual, com instalação, customização e configuração de ferramentas de gerenciamento de conteúdo.
Reuniões onde serão passadas as informações e conteúdo que estarão disponibilizados no site.
Carga horária de treinamento na ferramenta de gerenciamento;
Manutenção da ferramenta após a implantação;

Objetivo: construir uma ferramenta onde as áreas possam ter a liberdade de modificar a suas páginas (conteúdo).

- Comunicação com o Controle Global da Empresa onde o funcionário pudesse atualizar seus dados pessoais;
- Campo de Notícias Atuais (link para o site último minuto);
- Página com o Informativo Mensal. Campo onde o funcionário possa enviar sugestões para o informativo;
- Mapa do Brasil com animação, indicando quais estados a Atnas já teve Contrato;
- Página para a área de SMS;
- Links com o Dialogo Diário de Segurança, Meio ambiente e Saúde, Campanhas de SMS, Dicas de utilização de EPI ;
- Página para Eventos. Cronograma de eventos e Treinamento. Notícias atuais da empresa;
- Páginas com serviços realizados (todos os empreendimentos, com data local, serviço executado, cliente);
- Página do Recursos Humanos. Link onde a pessoa poderá preencher o seu currículo com o modelo criado para Atnas (padronização dos currículos), campo para vagas em aberto;
- Página para divulgação das atividades de responsabilidade social responsabilidade (link de projetos públicos).

Mãos à Obra
Uma vez que a w3maker recebeu o resumo das solicitações e analisou em reunião com as responsáveis pelo projeto Sabrina Fernandes e Josi Guimarães, o sistema de gerenciamento de conteúdos Joomla! foi escolhido pois atendia com amplos recursos às necessidades elencadas. Passo seguinte foi verificar e analisar as extensões mais adequadas para complementar as funcionalidades do novo site Atnas Engenharia.
Para criação do site e web design, um "briefing de criação" com perguntas que definiam os estilos, cores e finalidades imaginados foi enviado pela w3maker, para termos certeza de que a comunicação e as informações estavam dentro do entendimento verbal.
Com isso a criação do site foi direto ao ponto, no primeiro layout apresentado, com pequenas modificações solicitadas.

O tema (template) para o Joomla! foi desenhado e projetado com exclusividade para o novo site da Atnas Engenharia. Foram utilizadas as posições padrão do sistema e alguns módulos custom foram instalados para atender a necessidades específicas de edição e posicionamento na estrutura.

Tela de administração de Temas (templates) do Joomla! exibindo o tema

criado e desenvolvido com exclusividade pela w3maker

O que faz a Diferença

Algumas das melhores e imprescindíveis extensões da comunidade de desenvolvedores do Joomla!, testadas e aprovadas pela w3maker foram instaladas para melhorar a performance e atender a necessidades específicas do projeto, são elas:

Componentes:

- Akeeba Backup - http://www.akeebabackup.com/ - imprescindível para fazer backups do site e do banco de dados do sistema.

- File Picker - http://www.webconstruction.ch/ - componente necessário para fazer upload de arquivos em diversos formatos (ai, csv, doc, exe, fla, flv, gif, gz, gzip, htm, html, indd, jpg, mp3, odp, ods, odt, pdf, png, ppt, psd, rtf, swf, tar, ttf, xcf, xhtml, xls, zip) para exibir os respectivos links dentro dos artigos do site.

- JCE Editor - http://www.joomlacontenteditor.net/ - componete e plugin que instalam um Editor mais estável, confiável e com mais recusros que o editor padrão do Joomla! 

- K2 - http://getk2.org/ - componente que, dentre inúmeras funcionalidades, possui um editor de imagens online, o SplashUp, que permite que os administradores do site editem imagens para publicação, sem ter que utilizar os tradicionais programas de tratamento de imagens.

Módulos:

- Hot Image Slider - http://www.hotjoomlatemplates.com/extensions - módulo básico para exibição de imagens em movimento, baseado em jQuery e que foi utilizado para a animação que aparece no cabeçalho das páginas do novo site.

- Custom Content - http://joomlacode.org/gf/project/ - módulo que permite exibir artigos em posições de módulos, com isso é possível inserir código HTML em qualquer lugar da página.

Algumas solicitações de funcionalidades específicas foram feitas:

- Webmail - Na página inicial o Webmail deveria estar disponível para  que os funcionários em serviços externos possam acessar seus E-Mails. Para isto um módulo wrapper foi utilizado para inclusão do código do formulário de autenticação do provedor.

- Área Restrita - Uma área restrita deveria permitir o acesso apenas daqueles funcionários com permissão para vizualizar documentos e normas da empresa. Para isso o módulo de login do Joomla! foi utilizado. Futuramente este módulo será modificado para exibição dos contra-cheques dos mais de 500 funcionários da empresa. 

Validação do Projeto no W3C:

Um aspecto muito importante, que a maioria dos clientes desconhece e via de regra não dão valor, é um código fonte bem escrito. Um site pode funcionar visualmente bem, com código bem escrito ou mal escrito.

"O que o olho não vê o robô de busca sente".

A importância de um código bem escrito está diretamente ligada ao quanto as páginas do site serão amigáveis, acessíveis, facilmente identificadas e indexadas pelos mecanismos de busca e seus robôs e spiders.

No caso do novo site da Atnas Engenharia, tanto o código XHTML que define a estrutura das páginas quanto o CSS, que é a folha de estilos em cascata que confere o posicionamento dos elementos na página, define a família de fontes e as cores dentre outros, passaram na validação do W3C.

O serviço de validação do W3C é um software livre criado pelo W3C para auxiliar web designers e desenvolvedores web na verificação de seus códigos de programação. A ferramenta não só é capaz de comparar uma folha de estilo com as especificações para as CSS, apontando erros, grafia incorreta ou uso impróprio das CSS, mas também alertará você para potenciais riscos à usabilidade. 

Treinamento

Por fim, antes da publicação do novo site da Atnas Engenharia, um treinamento presencial de 5 horas foi ministrado nas dependências da empresa e contou com a participação de quatro funcionárias que ficarão encarregadas inicialmente da manutenção do website.

Considerações Finais

Como a w3maker vem trabalhando com o CMS - Joomla! desde suas primeiras versões, pudemos oferecer à Atnas Engenharia, a criação de um site literalmente dinâmico e flexível.

Ao longo dos anos a w3maker aprendeu a tirar o maior proveito da grande variedade de funcionalidades oferecidas pela comunidade do Joomla!.

Poucos são os sistemas de gerenciamento de conteúdo open source que oferecem tanta versatilidade, enquanto preservam a boa usabilidade, funcionalidade e segurança.

Com tudo isto, a w3maker entregou à Atnas Engenharia um produto adequado e expansível, que qualquer pessoa poderá administrar.

Para saber mais acesse 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

Um site que começou a ser criado há 39 anos atrás

Estamos exatamente há um mês sem postar nada aqui no blog - "casa de webdesigner mensagem por fax"... uma atitude inconcebível na blogosfera.
Mas tem uma música dos Beatles que define com precisão o nosso momento:
A Hard Day's Night.

Trabalhando feito cães e sem poder dormir como uma tora! :-(

Nosso mais recente projeto de criação de site foi para os Relógios Superatic. Seria este mais um site para o  portfolio, não fôsse uma curiosidade histórica.
Tudo começou há 39 anos atrás, em 1971 quando o nosso diretor de criação, Marcio Goldzweig, ganhou de presente de seu pai, um relógio automático da marca Superatic. Relógios automáticos eram o grande barato da época, não precisavam de corda, bastava sacudir o pulso para acionar um rotor perpétuo, que mantinha o relógio em funcionamento.

Obviamente o garoto de 13 anos, não podia imaginar que 39 anos depois, teria o site da w3maker descoberto em uma busca orgânica do Google (criação de sites rio), feita pelo Gabriel Schwartz diretor de marketing da Superatic e que seria contratado para criar o site da marca Superatic, em linguagem PHP, utilizando o CMS (Content Management System - Sistema de Gerenciamento de Conteúdo) open source do Joomla com o Gantry Framework, totalmente em Tableless (sem o uso de tabelas) com CSS (Cascading Style Sheets - Folhas de Estilos em Cascata), com MooTools 1.2.4 baseado em Ajax para elaboração do menu de navegação e utilizando o componente Pirobox com jQuery 1.4.2 para a criação das galerias de imagens dos relógios.

O garoto que em 1971 tinha acabado de viver as emoções da conquista do Tri pela seleção Canarinho na Copa de 70 no México, também não podia supor que 39 anos mais tarde, faria a fotografia dos relógios Superatic utilizando uma câmera digital e um mini estúdio portátil.
De lá pra cá, muita coisa mudou, o relógio Superatic automático que tinha os ponteiros e os números em ouro, hoje funciona com mecanismo a Quartz. A televisão à válvula em preto e branco que transmitia os jogos da Copa de 70, hoje funciona com Chips e Leds. Os computadores da época eram grandes mainframes e o mais famoso era o HAL 9000 do filme do Stanley Kubrick, 2001 uma Odisséia no Espaço, hoje com um notebook, o site da Superatic foi criado e programado diretamente no servidor de hospedagem.

Para saber mais sobre criação de sites com Joomla visite: http://www.w3maker.com.br/

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