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

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

Design Democracy

Portfolio - Criação de Sites com CMS, Joomla e Wordpress - Rio de Janeiro

Portfolio de Sites
Criação de Sites com sistema de gerenciamento "total" de conteúdo.
CMS - Content Management System - utilização do sistema "open source" Joomla, que permite a construção de sites complexos, com diversos recursos tais como, menus dinâmicos e galerias de imagens utilizando tecnologias Ajax e jQuery, que agilizam o carregamento, permitindo inúmeros efeitos de animação.
O sistema torna o conteúdo dos sites totalmente "visível" aos mecanimos de busca para seus "robots" e "spiders", deixando o caminho aberto aos serviços de SEO (Search Engine Optimization) e Posicionamento em Buscadores, através de URL's amigáveis.
Para sites com estruturas básicas o sistema "open source" Wordpress possibilita o desenvolvimento de blogs e sites que permitem ao administrador fazer sua manutenção de qualquer computador conectado à internet - tudo isto sem a necessidade de conhecimentos de código HTML - se você sabe usar o Microsoft Word, vai poder atualizar seu site sem qualquer dificuldade.

Saiba mais em: www.w3maker.com.br

Da Cozinha para a Web

Direto da cozinha de Ethel Kaufmann e Alexandra Alves para a Web, mais precisamente para a "Blogosfera".

Desenvolvido pela w3maker utilizando o CMS - Wordpress, entrou no ar no dia 28/09/09 o blog Petit et Joli. Um canal de comunicação para divulgação dos produtos e eventos realizados pelas sofisticadas "quituteiras" Ethel e Alexandra, que juntas atendem na Petit et Joli.

Totalmente personalizado e com design que segue a tendência do site que está em fase de criação e desenvolvimento o Wordpress foi instalado em diretório "blog" dentro do domínio http://www.petitetjoli.com.br/

Um treinamento básico do backend foi ministrado pela w3maker de forma a permitir que Ethel e Alexandra possam publicar suas novidades e divulgar seus produtos e eventos que realizam no Rio de Janeiro.

A escolha do Wordpress como sistema de gerenciamento de conteúdo se deu, pela facilidade de manuseio e pela rapidez de implantação, que permitiu a sua publicação em 3 dias após a aprovação do layout.

Conheça mais sobre CMS em:

- www.w3maker.com.br/joomla

- www.w3maker.com.br/cms

- www.w3maker.com.br/criacao_sites