Projeto Site e Blog Prepona

Nova versão do site e reformulação do Blog da empresa de sertificações digitais, Prepona
Inicio | Portfolio | Prepona
Detalhes do projeto

Cliente: Prepona

Data: 05-2018

Online: www.prepona.com

Um dos meus favoritos, uma single page com blog adicional, com sistema de tradução multilinguagens, um CMS detalhadíssimo e muita interação animada, esse é o resultado desse projeto que em 60 dias foi ao ar com esse visual de conceito original e "clean"

Diferenciais

CMS personalizado

Design Limpo

Mapa SVG interativo

Pagina de Blog

Responsivo

Sistema de Tradução

Estudo de caso

A versão anterior do site prepona.com era construida completamente em wordpress o que infelizmente apesar de ser um site de qualidade trazia algumas limitações a programação impossibilitando que o cliente aplicasse suas novas ideias, que era trazer um maior entendimento do que a empresa fazia e como ela atuava ao redor do mundo. Na primeira reunião com o cliente sobre o conteúdo do site um dos sócios da empresa me apresentou uma ideia inovadora: Construir um mapa mundi interativo que indicasse aos clientes os países e estados, distritos ou províncias onde a Prepona atuava. Esse mapa deveria ter informações de todos os países para que o visitante ao manter o mouse sobre um país fosse informado de como a Prepona estava presente ali, em quantos estados distritos ou províncias ela havia instalado seus centros de testes e ao clicar sobre um país o visitante pudesse visualizar detalhes sobre cada estados e como a Prepona atuava no mesmo, mostrando o número de testes aplicados no estado e o número de centros instalados.

O primeiro desafio era construir esse mapa com essa grande quantidade de informações, que não ficasse pesado para ser carregado em máquinas que não tem uma internet de alta velocidade. Assim optamos por construir um mapa em SVG, uma forma de imagem construída através de códigos que foi desenvolvida especialmente para uso na web. O mapa foi montado como uma espécie de "quebra cabeças" onde cada país era uma peça constituída por um conjunto de códigos que eram interpretados como imagem pelo navegador, esses códigos foram distribuídos em um banco de dados e carregados dinamicamente no site via consulta pelo PHP. Cada país tem no banco de dados as informações de forma, cor, nome um ID único e a sua posição nesse "quebra cabeças", assim quando essas informações são combinadas e mostradas na tela, cada país tem sua forma e posição exatas formando um mapa mundi e cada país continha em si outro quebra cabeças formando seus estados. Depois de conseguir uma construção visual através das informações extraídas do banco de dados o próximo desafio era desenvolver uma forma de interatividade com, para isso usamos Jquery para mapear a área da imagem e identificar cada país através do seu ID único e com Ajax trazer as informações desse país quando o visitante passava o mouse sobre ele e assim respectivamente ao visualizar seus estados Sendo assim nenhuma informação é carregada até que o visitante passe o mouse sobre o país, fazendo com que o carregamento das informações e a página não fiquem pesados.

Depois do mapa construído agora teríamos de manter essa mesma qualidade no restante do site, ter um site dinâmico com o mesmo visual simples e limpo, tudo isso sem perder a seriedade mostrando de forma clara e objetiva as informações sobre da prepona no mundo todo. Pensando nisso investimos em animações também com uso de imagens SVG, animações em CSS e interatividade construída com Jquery e HTML5, criando elementos com os quais os visitantes possam interagir assim como no mapa, onde eles possam receber as informações sem que fique massante. Outro ponto importante foi manter o blog ativo assim o visitante que se interessar e quiser entender e se aprofundar mais nos assuntos apresentados pode acessar o blog onde os eles são abordados de forma mais detalhada e explicativa.

Comentários

Portfólio

Abaixo uma galeria do que já foi entregue, criado, e publicado, serviços e estudos desenvolvidos nos últimos anos

CONTATO

Me ligue
+55 (11) 9.40681880
Faça uma visita.
Rua Jorge S. Macedo 23
Mande um e-mail.
raphael@perriollat.com.br
Todos os campos são obrigatórios