Fechando 2011

Correria sempre é um fato nos finais de ano, projetos "pra ontem", presentes de última hora, a roupa branca da passagem de ano, enfim, poucas voltas faltam para o ponteiro bater "meia noite", temos que correr.

Assim, resumimos em uma única postagem 3 em 1, os projetos de criação de sites que fecharam 2011:

MF Consultoria

Site do consultor de marketing farmacêutico, palestrante e especialista em genéricos do Rio de Janeiro - Marcos Ferreira

Com layout personalizado e dirigido pelo Marcos Ferreira, teve o tema (template) desenvolvido com exclusividade para o sistema de gerenciamento de conteúdos - CMS - Joomla.

O site basicamente visa informar sobre as palestras e cursos ministrados pelo consultor.

Visite: http://www.marcosferreiraconsultoria.com.br

Deluy

Site institucional para empresa provedora de créditos que visa apresentar de forma clara e objetiva os produtos e serviços oferecidos no setor financeiro pessoal.

Totalmente construído sobre a plataforma Joomla integra vários componentes e módulos dinâmicos para a comunicação publicitária e ofertas da Deluy.

O site foi estruturado sobre o Gantry Framework que permite grande mobilidade e amplia o número de posições possíveis para os módulos instalados. São 78 posições contra 25 do layout padrão, o que deixa o layout mais livre, dinâmico e com melhor usabilidade.

Integração com as Redes Sociais é um item que não pode faltar hoje em qualquer site que se preze e principalmente que queira interagir com seu público alvo.

Os formulários do site que se abrem na Home a partir da caixa de destaques, são carregados de páginas internas em janelas modais através de Ajax e a validação dos campos foi feita utilizando jQuery.

 

A w3maker assina também a criação do nome, logotipo e toda a comunicação visual para a Deluy.

Visite: http://www.deluy.com.br

Trecos & Pregos

Criação de site para loja de conveniências, ferramentas e materiais para construção no Shopping Rio 2 - Barra da Tijuca - Rio de Janeiro.

Site com layout personalizado com exclusividade para o sistema de gerenciamento de conteúdos - CMS - Joomla.

O site basicamente visa informar sobre os produtos encontrados nas três lojas da rede, duas ainda por inaugurar em 2012.

Visite: http://www.trecosepregos.com.br

-----------

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

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

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/

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.

Trata-se da criação do site para a Laifbac - 1st Latin American International Face & Body Art Convention.

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