Um site para americano ver

A criação e o design de sites quase nunca seguem padrões.
Criar para web é saber lidar com limites.
Em internet tudo pode, tudo é possível.
Os padrões (web standards) devem ser respeitados para a melhor performance de um site.
Todas estas afirmações são verdadeiras, apesar de contraditórias.
Ué?!? Mas então qual é a verdade? Todas!
Então, me perdi!

A partir destas verdades e mentiras fizemos uma imersão na linguagem de comunicação dos sites americanos e ingleses do segmento de "plumbing & heating" - encanamento e aquecimento - para elaborar a criação do novo site da empresa DCC Plumbing and Heating, de Danbury, Connecticut, USA, de propridade de Ildo Joseph.
O briefing, bem o briefing foi - "preciso de um site campeão, um site pra brigar de igual pra igual com as empresas do segmento".
Nas grandes nevascas do inverno impiedoso americano, a água congela nos encanamentos e estes se quebram como casca de ovos - o número de chamados para consertos e novas instalações de calefação, aumenta exponencialmente nesta época.

Fizemos uma pesquisa de linguagem de comunicação em mais de 30 sites do segmento. Americanos são objetivos, vão direto ao que interessa, firulas de design que desviam a atenção do foco da comunicação, não cabem neste caso.
Americanos querem saber de tradição e bons serviços, "since 1948" - quanto mais antiga a empresa, mais confiável.
Foi a partir destes conceitos que desenvolvemos um site despojado, com design básico e repleto de objetividade - o que fazemos, quais produtos utilizamos e como falar conosco. Simples assim.

 

O fator "Super Herói"

Somado à simplicidade da comunicação adicionamos o fator "super herói". Como todos sabem, os americanos são chegados em um super herói. Partindo do princípio que os super heróis fazem parte da cultura americana e, sabendo que todo americano gostaria de chamar um Super Herói para resolver seus problemas, foi que criamos o "Super DCC", com óbvias características visuais e cromáticas de Super Homem e feições caricatas ao estilo Simpsons.

Temos fortes convicções de que a imagem deste personagem aliada aos bons serviços prestados pela DCC Plumbing & Heating vai gravar na mente dos clientes uma imagem de solução para todos os problemas com encanamento, aquecimento e ar condicionado central - especialidades da empresa.

Este personagem entrou em contraponto com a imagem do "quebra galho"; na animação que aparece abaixo do cabeçalho do site, com chamadas diretas.

 

Por que chamar qualquer um para resolver seus problemas de encanamento?

Chame DCC Solução Total! Fins de semana, à noite e em feriados. Ligue agora 203-650 3137.

E nas cores da bandeira americana, mais subliminar, impossível!

A foto "royalty free" comprada no Dreamstime de um encanador quebra galho com um desentupidor na mão, foi o mote para a criação do banner animado. Eis que surge o "Super DCC" com sua super chave inglêsa na mão para resolver todos os seus probelmas! Você só precisa ligar.

O bom e velho lápis
O personagem, como sempre, foi esboçado com o bom e velho lápis, teve os traços corrigidos e redesenhados com pilot, depois digitalizado com uma câmera de celular e transferido via Bluetooth para o computador, vetorizado e colorizado no Corel Draw (sim, nós usamos o Corel Draw!).
Acompanhe as etapas da criação do personagem:

 

 

 

O site foi construído com o CMS (Content Management System) Joomla, com tema desenvolvido com exclusividade, sobre a estrutura básica de módulos do Joomla, na versão 1.5.23, a mais recente antes da 1.6 - escolha determinada por conta de algumas extensões utilizadas e que ainda não funcionam na nova versão. Hospedado no GoDaddy, utiliza banco de dados MySQL e linguagem PHP. A utilização do Joomla confere ao site a possibilidade de evolução e atualização imediata.

Mostrando as armas
Por trás desta inocente imagem de um site simples e objetivo se escondem poderosas "armas" para o SEO (Search Engine Optimization). O site DCC Plumbing & Heating conta com a instalação do componente JoomSEF comprado da ARTIO. Este componente se encarrega de exibir um completo painel administrativo com ferramentas para otimizar a performance do site junto aos mecanismos de busca. Uma de suas principais características é transformar os endereços de páginas em URLs amigáveis, substituindo as "strings" de código PHP (endereços de arquivos/páginas) por palavras chave que ajudam na indexação das páginas e melhoram o posicionamento do site. Os resultados deverão ser colhidos nos próximos meses.

 

Com relação a facilitar o contato dos visitantes do site foram instalados um módulo gratuito "Rapid Contact" localizado no topo da coluna da direita e um formulário em PHP com validação de campos na página "Contact". O telefone para chamados de serviços aparece em destaque no banner animado e no rodapé do site.

Flash descomplicado

Para as atualizações do banner animado em Flash, não é necessário utilizar o Adobe Flash, SwishMax ou outros para preparar novos banners. Foi comprado e instalado o módulo Smart Flash Header da ProJoom, que simplifica tudo - bastando criar a imagem na dimensão correta e colocar na pasta do módulo no servidor. Não é necessário nem utilizar um programa de FTP (File Transfer Protocol), o módulo vem com um sistema de "upload" para subir as imagens e um completo painel de controle onde é possível definir velocidade de transição entre slides, dimensões, efeitos de animação e muito mais. 

 

 

Por fim, para garantir a integridade do trabalho foi instalado o componente de backup "Akeeba", que faz uma cópia completa do web design do site e do banco de dados, permitindo que o site seja facilmente restaurado em qualquer eventualidade.

O reconhecimento pelo trabalho bem feito veio de imediato, nas palavras do diretor da DCC Plumbing & Heating, Ildo Joseph:

Por tudo isso, podemos afirmar que nossos sites não são simples páginas de exibição de conteúdo, são poderosas ferramentas de relacionamento web, preparadas para evoluir de acordo com as necessidades de crescimento das empresas.

Por último, mas não menos importante, para confirmar uma das verdade do início deste post, o site DCC Plumbing & Heating passou na validação de código XHTML do W3C Markup Validation Service - Veja aqui o resultado.

Para saber mais sobre criação de sites com Joomla visite w3maker

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

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/