Proposta de Desenvolvimento de Identidade Visual, Material de Comunicação e Website para a Empresa Plena Assessoria Ltda

FACULDADE DE TECNOLOGIA OPET TECNOLOGIA EM PRODUÇÃO MULTIMÍDIA

PROPOSTA DE DESENVOLVIMENTO DE IDENTIDADE VISUAL, MATERIAL DE COMUNICAÇÃO E WEBSITE PARA A EMPRESA PLENA ASSESSORIA LTDA.

CURITIBA

2014

ANDERSON A. DE OLIVEIRA ELIZAEL C. DOS SANTOS JONATAS L. RAMOS JULIANO F. DE LIMA PAULO H. DO CARMO

PROPOSTA DE DESENVOLVIMENTO DE IDENTIDADE VISUAL, MATERIAL DE COMUNICAÇÃO E WEBSITE PARA A EMPRESA PLENA ASSESSORIA LTDA. Trabalho de aplicação tecnológica apresentado à Banca Avaliadora do Programa de Integração com o Mercado (PIM) do segundo semestre de 2014, para a conclusão do Curso de Tecnologia em Produção Multimídia, da Faculdade de Tecnologia Opet. Orientador: Prof. Tersis Hiran Zonato

CURITIBA 2014

RESUMO Devido a popularização da internet, é fundamental que uma empresa possa ser encontrada neste meio, uma vez que esta é uma ferramenta de grande poder para se buscar e trocar informações, e que atualmente é utilizada e acessada das mais diversas formas, seja por meio de um computador ou aparelho celular, o que representa a necessidade de conteúdos que sejam acessíveis aos vários dispositivos existentes ou pelo menos a maior parte deles ou aos mais utilizados. Desta forma, este projeto tem o objetivo de inserir a Plena Assessoria Ltda, neste ambiente que trará maior visibilidade e conceito a empresa. Durante as próximas páginas, serão apresentados problemas que foram constatados e as soluções encontradas para estes. Para encontrar as soluções propostas e desenvolvidas, foram realizadas pesquisas de livros e materiais de autores importantes e reconhecidos em seus meios. Também foi realizada uma pesquisa quantitativa com o público para verificar quais eram as soluções que este, mais utiliza no momento em que necessita pesquisar ou comprar ou contratar algum produto ou serviço. Pelo fato da empresa contratante ser jovem, também serão tratadas neste projeto, as soluções para a falta de outros materiais de comunicação, bem como o desenvolvimento da identidade visual da mesma.

Palavras-chave: comunicação, identidade visual, pesquisa, website.

ABSTRACT

Due to internet popularization, it is essential that a company may be founded on it, once this is a tool of great power to search and share information, and it is currently used and accessed from several ways, through a computer or even mobile device, which represents the needy for acessible contents to many devices or at least most of them, or even the most used. Thus, this project aims to insert the Plena Assessoria Ltda, in this environment that will bring greater visibility and concept to the company. During the next pages, some founded problems will be presented as well as its solutions. To find the solutions proposed and developed, books and research materials of recognized authors were consulted. A quantitative survey was also conducted with the public to understand which were the solutions that these ones usually use when they need to search, buy a product or hire a service. Being a young company, the solutions to the lack of other communication materials as well as the development of the visual identity also were included in this project.

Keywords: comunication, visual identity, research, website.

Em nosso negócio, uma pessoa não consegue fazer muita coisa isoladamente. Você tem de criar um time a seu redor. Steve Jobs

AGRADECIMENTOS Em primeiro lugar agradecemos a Deus que nos deu tudo que precisamos, as nossas famílias que nos apoiaram e estiveram sempre ao nosso lado. Agradecemos também especialmente ao Professor Tersis Hiran Zonato que nos auxiliou e guiou nossos esforços para a conclusão deste projeto, e também a professora Raquel Susin que teve papel muito importante nos orientando no início deste trabalho.

LISTA DE FIGURAS FIGURA 1 - Proprietários da empresa Plena Assessoria. ......................................... 19 FIGURA 2 - Mapa demonstrando a localização da Plena (Fonte: Google Maps). .... 20 FIGURA 3 - Ícone "Empresa". ................................................................................... 30 FIGURA 4 - Nome da página selecionada em destaque no menu. ........................... 30 FIGURA 5 - Ícone "Serviços"..................................................................................... 31 FIGURA 6 - Conjunto de símbolos e ícones formando "fechamento". ...................... 31 FIGURA 7 - A forma como o cérebro interpreta a FIGURA 6. ................................... 31 FIGURA 8 - Forma do "mapa do site" do rodapé do site. ......................................... 32 FIGURA 9 - Mapa do site. ......................................................................................... 32 FIGURA 10 - Áreas agrupadas por semelhança no site. .......................................... 33 FIGURA 11 - Ícone com forma simples utilizado no site. .......................................... 34 FIGURA 12 – Disco de cores (Fonte: Design Culture). ............................................. 34 FIGURA 13 - Escala das cores utilizadas na composição da identidade visual. ....... 35 FIGURA 14 - Tabela de cores Plena. ........................................................................ 37 FIGURA 15 - Evolução da comunicação. (Fonte: Google imagens) ......................... 38 FIGURA 16 - Exemplificação de semiótica (Fonte: Santaella (1983)) ....................... 39 FIGURA 17. - Signo utilizado para compor o logotipo da Plena ................................ 41 FIGURA 18 - Texto utilizado para compor o logotipo da Plena. ................................ 41 FIGURA 19 - Rascunhos do logotipo em papel......................................................... 43 FIGURA 20 - Primeiros estudos da logo em meio digital (no computador). .............. 44 FIGURA 21 – Versão final do logotipo da empresa Plena. ....................................... 44 FIGURA 22 - Aplicações da logo............................................................................... 45 FIGURA 23 - Composição do cartão de visitas da empresa Plena. .......................... 45 FIGURA 24 - Composição do layout da página inicial do website............................. 46 FIGURA 25 – Logo da ferramenta Page Speed (Fonte: Halo Seeker). ..................... 48 FIGURA 26 - Teste de carregamento (Fonte: Google Pagespeed). .......................... 48 FIGURA 27 – Código exibido que comprova a instalação do W3 Total Cache. ........ 49 FIGURA 28 – Mapa do website. ................................................................................ 50 FIGURA 29 – Wireframe (Home do website). ........................................................... 50 FIGURA 30 - Página de Serviços - Vendas. ............................................................. 54 FIGURA 31 - Ferramenta para otimização das imagens do Adobe Photoshop. ....... 58 FIGURA 32 – Menu do website. ................................................................................ 60

FIGURA 33 – Rodapé do website. ............................................................................ 60 FIGURA 34 - Home (página inicial) do website. ........................................................ 61 FIGURA 35 - Página “Empresa”. ............................................................................... 62 FIGURA 36 - Página “Serviços”. ............................................................................... 63 FIGURA 37 – Página “Notícias”. ............................................................................... 64 FIGURA 38 - Notícias página modelo. ...................................................................... 65 FIGURA 39 – Página “Parceiros”. ............................................................................. 66 FIGURA 40 – Página “Contato”. ................................................................................ 67 FIGURA 41 - Sintaxe da linguagem de marcação HTML .......................................... 68 FIGURA 42 - Sintaxe da linguagem de marcação CSS. ........................................... 69 FIGURA 43 - Sintaxe da linguagem de programação PHP. ...................................... 70 FIGURA 44 - Sintaxe da linguagem de programação JavaScript.............................. 70 FIGURA 45 - Linguagem de banco de dados utilizada no MySQL (Parte grifada). ... 71 FIGURA 46 – Botões e tabelas usando estilos Bootstrap (Fonte: Bootstrap). .......... 72 FIGURA 47 - Página do phpMyAdmin. ...................................................................... 74 FIGURA 48 - Painel de escolha de temas do WordPress. ........................................ 75 FIGURA 49 - Página de inclusão de novo post no WordPress. ................................ 76 FIGURA 50 - Janela de inicialização do XAMPP. ..................................................... 77 FIGURA 51 - Painel do Notepad++ com código sendo editado. ............................... 78 FIGURA 52 - Diagrama com as tabelas utilizadas pelos plugins. ............................. 79 FIGURA 53 - Diagrama do banco de dados com as tabelas do WordPress. ............ 80 FIGURA 54 - Página inicial do site. ........................................................................... 83 FIGURA 55 - Fanpage na rede social Facebook....................................................... 85 FIGURA 56 - Modelo do cartão de visitas. ................................................................ 86 FIGURA 57 - Catálogo contendo a relação de serviços oferecidos pela Plena. ....... 87 FIGURA 58 - Modelo de camiseta promocional. ....................................................... 88 FIGURA 59 - Lateral do veículo identificado da empresa. ........................................ 89 FIGURA 60 – Visão frontal e traseira do veículo identificado da empresa. ............... 89 FIGURA 61 - Áreas de busca (Fonte: Manual de otimização do Google). ................ 90 FIGURA 62 - Página no AdWords do Google. .......................................................... 91 FIGURA 63 - Página com informações do Google Analytics. ................................... 92 FIGURA 64 - Título da página. .................................................................................. 93 FIGURA 65 - Tag de descrição do conteúdo da página. ........................................... 93 FIGURA 66 - URL amigável da página de notícias. .................................................. 93

FIGURA 67 - Navegação estrutural do website......................................................... 94 FIGURA 68 - Uso do atributo "alt" nas imagens. ....................................................... 94 FIGURA 69 - Página "em construção" gerada por meio do plugin "Coming soon". 101

SUMÁRIO

1 INTRODUÇÃO ....................................................................................................... 11 1.1 INTRODUÇÃO AO ASSUNTO ............................................................................ 11 1.2 JUSTIFICATIVA .................................................................................................. 12 1.3 OBJETIVOS DA INVESTIGAÇÃO ...................................................................... 13 1.4 PROPOSTA DE SOLUÇÃO ................................................................................ 14 1.5 RESULTADOS ESPERADOS ............................................................................. 16 1.6 HISTÓRICO DO SEGMENTO............................................................................. 16 1.7 DESCRIÇÃO DETALHADA DA EMPRESA ........................................................ 18 2 FUNDAMENTAÇÃO TEÓRICA ............................................................................. 21 3 ESTRATÉGIAS E PROGRAMAS DE AÇÃO ........................................................ 22 3.1 ESTRATÉGIAS DE DESENVOLVIMENTO DO PROJETO ................................ 22 3.2 FERRAMENTAS DE DESENVOLVIMENTO DO PROJETO .............................. 23 3.3 CRONOGRAMA DE DESENVOLVIMENTO ....................................................... 24 3.4 METODOLOGIA .................................................................................................. 26 3.4.1 DEFINIÇÃO DE PÚBLICO-ALVO .................................................................... 28 4 PLANEJAMENTO VISUAL.................................................................................... 29 4.1 GESTALT ............................................................................................................ 29 4.2 TEORIA DA COR ................................................................................................ 34 4.3 TEORIA DA COMUNICAÇÃO ............................................................................. 37 4.4 SEMIÓTICA......................................................................................................... 39 4.5 COMPOSIÇÃO.................................................................................................... 41 5 USABILIDADE E ARQUITETURA DA INFORMAÇÃO ......................................... 47 5.1 VELOCIDADE DE CARREGAMENTO ................................................................ 47 5.2 ESTRUTURA DE INFORMAÇÃO E HIERARQUIZAÇÃO ................................... 49 5.3 ACESSIBILIDADE ............................................................................................... 51 5.3.1 RESPONSIVIDADE.......................................................................................... 51 5.4 FLUXO DA INFORMAÇÃO ................................................................................. 53 5.5 TAXONOMIA ....................................................................................................... 55 5.6 OTIMIZAÇÃO ...................................................................................................... 57 5.7 REDAÇÃO........................................................................................................... 58 5.8 NAVEGAÇÃO E MENUS .................................................................................... 60 6 TECNOLOGIA DE PROGRAMAÇÃO ................................................................... 68

6.1 JUSTIFICATIVA DA LINGUAGEM ...................................................................... 68 6.1.1 HTML................................................................................................................ 68 6.1.2 CSS .................................................................................................................. 69 6.1.3 PHP .................................................................................................................. 69 6.1.4 JAVASCRIPT ................................................................................................... 70 6.1.5 SQL .................................................................................................................. 71 6.1.6 BOOTSTRAP ................................................................................................... 72 6.2 CÓDIGOS ........................................................................................................... 73 6.3 FERRAMENTAS USADAS PARA PROGRAMAÇÃO ......................................... 73 6.3.1 PHPMYADMIN ................................................................................................. 73 6.3.2 WORDPRESS .................................................................................................. 74 6.3.3 XAMPP ............................................................................................................. 77 6.3.4 NOTEPAD++ .................................................................................................... 78 6.4 DIAGRAMA DE BANCO DE DADOS .................................................................. 78 7 AÇÕES PROMOCIONAIS ..................................................................................... 81 7.1 ESTRATÉGIAS DE PROMOÇÃO ....................................................................... 81 7.2 PUBLICIDADE .................................................................................................... 82 7.3 PROMOÇÃO DE MARKETING ........................................................................... 85 7.4 OTIMIZAÇÃO PARA BUSCADORES ................................................................. 92 7.5 PESQUISA DE MERCADO ................................................................................. 95 8 PROPOSTA DE MANUTENÇÃO DO WEBSITE ................................................... 98 8.1 PROJEÇÃO DE MANUTENÇÃO DO PRODUTO ............................................... 98 8.2 CRONOGRAMA .................................................................................................. 98 9 DOCUMENTAÇÃO TÉCNICA ............................................................................. 100 10 CONSIDERAÇÕES FINAIS ............................................................................... 102 REFERÊNCIAS ....................................................................................................... 103 APÊNDICE A – FORMULÁRIO DE PESQUISA DE MERCADO ........................... 112 APÊNDICE B – ESTATÍSTICAS DA PESQUISA DE MERCADO ......................... 115

1 INTRODUÇÃO 1.1 INTRODUÇÃO AO ASSUNTO O projeto tem o objetivo de criar uma campanha de comunicação para a empresa Plena Assessoria, com sede em Curitiba, especializada em assessoria e representação do setor de vendas de seus clientes. A empresa foi criada em 2013, e atualmente atende a empresa Sentinela, empresa do ramo de agronegócios, sediada em Ronda Alta / RS. O universo online1, assim chamado, é o principal meio de compartilhamento de informação, e segundo o dicionário da língua portuguesa Michaelis (2014) partilhar é expor suas ideias para um grupo. É através deste universo que são ditadas as tendências para o mundo atual, sejam elas de tecnologia, de consumo ou de informação. Atualmente, muitos produtos e serviços são lançados ou são testados inicialmente na rede, assim é imprescindível acompanhar essa evolução e fazer uso deste canal. Segundo TORRES (2010), “o mais importante é abraçar as tecnologias ligadas a internet2 e usá-las. Assim você entenderá melhor o que virá pela frente e terá grandes ideias para o seu negócio”. A inclusão digital tal qual a globalização são os maiores indicadores de que uma empresa deve estar inserida em ambiente virtual, e diante desse cenário o escritor FELIPINI (2010) aponta este meio, como uma oportunidade que deve ser agarrada pelos empreendedores. O mundo virtual está presente no cotidiano das pessoas, e nele as pessoas trocam e-mails, buscam informação, lazer, entre outras formas de informação. Para o desenvolvimento deste projeto foram aplicados conhecimentos sobre a teoria de Gestalt3 (será explicada em maiores detalhes no tópico 4.1), de modo que a criação de cada peça obtenha composição e forma segundo a teoria citada. As cores são resultado de estudos baseados no livro “Psicodinâmica das cores” que indicam a alta pregnância, justificando a importância da aplicação deste princípio, desta forma serão obtidos melhores resultados com os materiais confeccionados. 1

Refere-se ao mundo conectado a rede mundial de computadores. Também conhecida como rede mundial de computadores. 3 É uma teoria baseada em estudos psicológicos que trata da forma como as pessoas percebem elementos visuais. 2

11

A principal ferramenta a ser produzida será o website, e será desenvolvida em uma plataforma dinâmica utilizando a ferramenta WordPress4, por ser o CMS5 mais utilizado no mundo, atualmente mais de 200 milhões de pessoas. Os detalhes de como funciona essa plataforma, estão melhor explanadas no item 6.3. Para atender as necessidades do cliente foram analisadas referências que provam a eficácia da comunicação e mais especificamente de uma página na web6. Esta ferramenta será o principal meio de ligação entre a empresa e seus potenciais clientes, seja para aumento de público e também para que a empresa esteja acessível a todo o instante e em qualquer lugar. De acordo com pesquisa realizada pelo Sebrae7 (2013) "nota-se a necessidade de que toda empresa deve estar presente nesse importante sistema chamado internet". Em reflexo a esta situação segundo pesquisa Nielsen (2014), no Brasil mais de 50% dos lares tem acesso a internet paga. SILVA e OLIVEIRA (1997) afirmam que o marketing8 na internet difere do tradicional, porque, no primeiro caso, as empresas buscam definir e atingir seu mercado-alvo, já na internet são os clientes e os prospects9 que se dirigem aos websites das empresas. 1.2 JUSTIFICATIVA Segundo o dicionário online Michaelis (2014), a palavra comunicar significa: fazer saber, participar; por em contato, ligar, unir; tornar comum, transmitir. Desta forma, o um planejamento de comunicação define-se como o que é feito para alcançar um determinado público usando canais de comunicação como internet, rádio, televisão, papelaria, etc. De acordo com MOREIRA (2014), em artigo escrito para a revista digital Techoje, “o ato de comunicar em um projeto é muito mais do que simplesmente o envio de um e-mail esporádico ou uma reunião sem pauta e sem ata.” 4

O WordPress é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos Padrões Web e na usabilidade. 5 Sistema de Gerenciamento de Conteúdo (do inglês Content Management System - CMS), que facilita a manutenção de websites. 6 Também conhecida como World Wide Web. É um sistema de documentos interligados e executados na internet. 7 Serviço Brasileiro de Apoio às Micro e Pequenas Empresas. 8 “Marketing é o conjunto de atividades humanas que tem por objetivo facilitar e consumar relações de troca”. KOTLER (2006) 9 São os consumidores em potencial, ou seja, aqueles que podem vir a consumir um produto ou serviço. 12

Desta forma, para tornar uma empresa conhecida, faz-se necessário elaborar um planejamento de comunicação. Para tanto é preciso que o comunicador conheça o cliente e seus públicos de forma a investigar o que eles precisam e procuram, bem como o que pode ser feito para auxiliá-los a suprir suas necessidades e carências. Segundo KOTLER (2011), as empresas devem colaborar com seus clientes, ou seja, é preciso conhecer o respectivo público e ouvir o que ele tem a dizer. O planejamento de comunicação deverá ser elaborado com base nas necessidades da empresa contratante, buscando atingir o maior número possível de clientes, com a produção de materiais (website, papelaria e plotagem de veículos, entre outros) que transmitam a identidade da empresa de forma visual e integrada. Segundo artigo publicado no site da agência Oibe Internet Marketing (2014), a identidade visual10 de uma empresa possui fundamental importância para a mesma, de forma que transmita respeito e confiabilidade, fazendo com que ela seja bem posicionada no mercado em que atua.

1.3 OBJETIVOS DA INVESTIGAÇÃO Este trabalho tem por objetivo dar maior visibilidade à empresa por meio de uma campanha de comunicação, que inclui divulgação virtual - website e redes sociais – bem como a criação de materiais gráficos. Considerando que um bom marketing digital pode não só facilitar o contato com clientes e colaboradores, como também influenciar significativamente a imagem do negócio, o atendimento via web por vezes, é um grande facilitador de contato, proporcionando maior comodidade ao público, conforme conta KOTLER (2011). As redes sociais, quando bem administradas inspiram os usuários a ajudarem na divulgação tanto com compartilhamento de informações como comentários. Seria interessante explorar esse cenário virtual, no qual não é necessário grande investimento para começar a gerar resultados. Este, com suas redes de contato dão voz àqueles que querem elogiar o serviço, o atendimento, o funcionário, etc. Até mesmo quando os comentários são reclamações só é possível contorná-los graças

10

É o conjunto de elementos visuais que são utilizados de forma planejada e com determinada frequência, fazendo com que o usuário reconheça a empresa de origem. 13

ao interesse da empresa em utilizar dos mesmos meios para se remediar e reverter o quadro. Esta transparência que o diálogo online traz, por mais informal que possa parecer, é o que traz confiança e credibilidade àqueles que podem se tornar fiéis compradores, engajados com a empresa, e em determinadas circunstâncias, grandes defensores desta. Visando, portanto, maior comodidade e intimidade com o público como principal estratégia, o foco maior será o marketing digital, para assim extrair deste o máximo proveito advindo da propaganda virtual. 1.4 PROPOSTA DE SOLUÇÃO Para apuração das reais necessidades da Plena Representações e elaboração de um planejamento, foram realizadas reuniões para briefing11 com a empresa. Nestas reuniões foram identificados problemas como:  Identidade visual ainda não definida, o que acarreta em problemas de materiais como papelaria e cartão de visita, fazendo com que as peças gráficas não sejam dotadas de um padrão, de forma que o público não tenha referências suficientes para identificá-la. Devido essa ausência de identidade visual, a marca é facilmente esquecida, e por isso uma eficiente comunicação visual auxilia para que os materiais sejam de fácil assimilação, e exerça influência, visando estabelecer laços com o público-alvo.  Ausência de um website. Empresas que não possuem uma página na internet permanecem ocultas para muitos potenciais clientes, podendo acarretar na estagnação do negócio, o que é de sobremaneira preocupante, pois em 2013 o Brasil atingiu a marca de 51% de usuários, isso mostra que cada vez mais pessoas estão conectadas. De acordo com os dados da pesquisa TIC Empresas (2013), que investiga a utilização das tecnologias da informação e comunicação (TIC) no ambiente empresarial, a proporção de empresas brasileiras com acesso à internet que possuem website é de 56%.  Não utilização das redes sociais. Essa é uma renúncia a grandes oportunidades de popularização, impedindo que a empresa se aproxime do público, inviabilizando a relação com futuros clientes usuários, e a propagação de seus 11

É uma coleta de dados passadas em uma reunião para o desenvolvimento de um trabalho, sendo muito utilizadas em Administração, Relações Públicas, Design e na Publicidade. 14

serviços pela internet. Segundo dados da pesquisa TIC Domicílios (2013), conduzida anualmente pelo comitê gestor, 77% dos usuários brasileiros afirmam participar de redes sociais. Isso demonstra que cada vez mais pessoas estão conectadas ao mundo virtual e aderem à esta mídia social.

Diante dos problemas identificados, este projeto propõe uma campanha de comunicação, tendo como foco principal, mas não único, a criação de um website, que tornará o relacionamento cliente/Plena muito mais rápido e amigável. Nesta campanha, para que a Plena seja melhor posicionada, será desenvolvida toda identidade visual da empresa, como: materiais de papelaria (cartão de visita e catálogo), personalização da frota de veículos da empresa e catálogo com produto representado pela Plena atualmente. O site será desenvolvido com a plataforma dinâmica de gerenciamento de conteúdo - a mais usada atualmente - conhecida como WordPress, que possibilita o eficaz desenvolvimento em acessibilidade e usabilidade, como também maior facilidade na publicação e gerenciamento de conteúdo. A Plena também terá acesso a um painel administrativo que permitirá cadastrar notícias, verificar postagens, administrar contas de e-mails ou atualizar informações do site sem depender de um programador. Para uma maior aproximação entre a Plena Representações e o público, uma fanpage12 será criada neste projeto, por meio desta, a referida empresa poderá publicar dicas, orientações, entre outras ações, para os clientes que desejam aumentar suas vendas. Entre essas ações, para novos clientes que contratarem os serviços de representação e assessoria, no ato da efetivação do contrato ganharão uma cortesia, que consistirá na inclusão de sua empresa na página de parceiros do website. Além disso, este cliente ganhará notoriedade na fanpage da contratada, onde constará informações como: breve relato da atividade da empresa, telefone e endereço para contato. Desta forma a Plena, além de ajudar e orientar os interessados, estará estabelecendo maior contato com o público (maiores detalhes nos tópicos 7.2 e 7.3).

12

Fanpage ou Página de fãs é uma página específica dentro de redes sociais, como o Facebook, direcionada para empresas, marcas ou produtos, ou seja, qualquer organização com ou sem fins lucrativos que desejem interagir com os seus clientes por meio deste. 15

Para a realização desta proposta de solução, serão utilizados os conhecimentos e métodos obtidos no curso Tecnológico de Produção em Multimídia. As matérias e conceitos estudados servirão de alicerce no desenvolvimento para alcançar os objetivos e metas pretendidos com este projeto. 1.5 RESULTADOS ESPERADOS Projetar a Plena Representações no mercado atuante, bem como no ambiente online, o que poderá levar a empresa, ótimos negócios. Conforme já mencionado no item 1.4, mais da metade dos brasileiros são usuários de internet, então deduz-se que a competição nela é muito grande, sabendo disso espera-se também desenvolver um website preparado para competir com empresas do ramo de intermediação, no caso os concorrentes. É mencionado competir com concorrentes no sentido de:  Informar os clientes da melhor maneira possível sobre os serviços prestados;  Facilidade no processo de interação com o usuário;  Facilitar e potencializar o acesso de possíveis clientes;  Acessibilidade;  Compatibilidade;  Usabilidade.

1.6 HISTÓRICO DO SEGMENTO Conforme conta ROMANO (2014), desde o início da sociedade não se consegue dizer exatamente quando começou a representação comercial. Antigamente o costume do homem era usar as sobras de sua produção agrícola como troca por outros itens, de acordo com a própria necessidade. Esta prática ficou conhecida como escambo e tornou-se presente na história até mesmo pelo fato de não existir a moeda. Com o passar do tempo e o desenvolvimento da tecnologia, começaram a surgir os primeiros navegantes que utilizavam suas embarcações para atravessar os mares e descobrir regiões novas. Levavam com eles vários artefatos de valor para alguma 16

possível troca (ou escambo). Tinham como missão retornar aos seus representados, no caso, rei ou senhores feudais, com algo novo ou de muito valor. Como pode-se observar, com a evolução do mercado de trabalho a sociedade foi se adaptando às suas necessidades e assim foram surgindo novas profissões, entre elas, a Representação Comercial. Este ofício é responsável por identificar e trazer informações que a empresa cliente precisa para desenvolver seus produtos e serviços, satisfazendo assim as necessidades dos seus clientes e fortalecendo o elo entre o público e o produto. Essa profissão passou por várias reformulações ao longo do tempo, sendo efetivamente regulamentada em 9 de dezembro de 1965, na lei nº 4.886. Art. 1º - Exerce a representação comercial autônoma a pessoa jurídica ou a pessoa física, sem relação de emprego, que desempenha, em caráter não eventual por conta de uma ou mais pessoas, a mediação para a realização de negócios mercantis, agenciando propostas ou pedidos, para transmiti-los aos representados, praticando ou não atos relacionados com a execução dos negócios.

Assim, a representação comercial fica regulamentada por lei, tanto para pessoa jurídica ou a pessoa física, em publicação do Diário Oficial da União, que pode ser visualizada no site JusBrasil (2014). Atualmente, o profissional que desempenha a função de Representante Comercial tornou-se fundamental no desenvolvimento do comércio, sendo requisitado por inúmeras empresas para manter a imagem e o posicionamento da marca através de visitas constantes, manter atualizado o cadastro de clientes, avisar à contratada sobre a qualidade de crédito do contratante, enviar relatórios solicitados nos prazos devidos, encontrar e contatar clientes prospects, potencializar as vendas, fazer recomendações baseadas nas necessidades dos clientes, prever tendências de mercado e desenvolver novas ideias para atrair novos clientes. De acordo com publicação no site do Sebrae SC (2014)13 é fundamental que o Representante Comercial seja honesto, persistente, mantenha o bom relacionamento com os clientes, tenha criatividade e destreza para entender as necessidades do mercado. Desta forma, pode-se afirmar que para que o profissional tenha um bom desempenho nesta profissão ele deve possuir habilidade para as vendas e 13

Sebrae de Santa Catarina. 17

comunicação, saber planejar e gerenciar seu tempo, ser organizado, conheça conceitos básicos de contabilidade e, sobretudo, saiba construir relacionamentos de modo a desenvolver grandes parcerias. Atualmente, com o crescimento do comércio eletrônico e do uso da internet, temse a popularização de uma nova forma de representação comercial, denominada “Representação Comercial Virtual”, conforme conta JORGE (2013) em matéria para o site Criar Negócios Online. Nesta nova forma de representação comercial, o representante utiliza da internet, como principal meio de comunicação, para promover a empresa contratante. Desta forma aquele que representa, realiza a divulgação de seu cliente por meio de anúncios na web, como campanhas no Google, banners em outros websites bastante visitados pelo público-alvo, entre outros.

1.7 DESCRIÇÃO DETALHADA DA EMPRESA

A empresa tem um ano de existência e atua no ramo de assessoria comercial, onde auxilia o setor de vendas de seus clientes. Conta com cinco colaboradores, tendo como perspectiva, ao longo de mais um ano, triplicar o quadro de funcionários. Sua missão é a de desenvolver soluções comerciais capazes de aumentar a competitividade de seus clientes. E tem como visão ser a melhor empresa fomentadora e potencializadora na área de soluções para o setor de vendas no Brasil. O faturamento atual é de 252 mil reais líquidos por ano, receita proveniente apenas de um cliente. Uma empresa com apenas uma fonte de rendimentos não é sustentável, esse problema deverá ser contornado nos próximos meses, com o auxílio das soluções propostas pela equipe. Os principais concorrentes são Megaservice Assessoria Empresarial 14 (http://www.megaservice.com.br), que atua no mercado desde 1994. Também podese

citar

a

empresa

Delafina

Assessoria

de

Vendas

Empresarial15

(http://www.delafina.com.br/delafina/Portugues/), que é a mais experiente, atua desde 1974.

E

a

Previdelli

Representações

e

Consultoria

Empresarial16

(http://previdelli.com.br/), no mercado desde 1996.

14

Empresa que presta serviços de assessoramento nas várias áreas de atuação das empresas contratantes, neste caso com foco no setor comercial. 15 Empresa que presta serviços de assessoramento e treinamento com foco em vendas. 16 Empresa que presta serviços de assessoramento e representação de vendas para seus clientes. 18

A estratégia de vendas dos seus serviços, terá como principal pilar o de que a solução oferecida ao cliente, só será monetizada mediante resultados apresentados para a empresa contratante.

FIGURA 1 - Proprietários da empresa Plena Assessoria.

A empresa, tem como proprietários: Oseas Souza Lima (a direita) e Rhody Elineia Lima (a esquerda).

19

FIGURA 2 - Mapa demonstrando a localização da Plena (Fonte: Google Maps).

Atualmente, a empresa é sediada na Rua Augusto Renoir, 460 – Sobrado 14, bairro Guabirotuba em Curitiba, Paraná (FIGURA 2).

20

2 FUNDAMENTAÇÃO TEÓRICA

A fundamentação teórica deste projeto será realizada de acordo com as necessidades encontradas pela equipe de formandos do curso de Tecnologia em Produção Multimídia da turma de 2014 das Faculdades Opet, e ocorrerá durante o desenvolvimento deste com as orientações do professor Tersis Zonato. O

planejamento

de

comunicação

e

estratégias

de

marketing

serão

desenvolvidos com base nos estudos e experiências relatados nas obras de TORRES (2010), FELIPINI (2010) e KOTLER (2006 e 2011). Principalmente a respeito deste último citado, deverão ser aplicados conceitos do “Marketing 3.0”, o qual defende a ideia de que os produtos e serviços comercializados por uma empresa, devem ter foco no bem estar de todas as pessoas. A obra dos autores FARINA, PEREZ e BASTOS (2006), intitulada “Psicodinâmica das cores em comunicação” será a principal fonte de pesquisa e desenvolvimento da teoria da cor nos materiais de comunicação desenvolvidos para a empresa contratante. Para aplicar conceitos de usabilidade ao website que será construído, o livro “Não me faça pensar!” de KRUG (2008), será a base para a implementação de conceitos que irão facilitar o acesso do usuário às informações disponibilizadas em ambiente virtual17. A semiótica ou, lógica da comunicação, utilizada neste projeto, terá por base os estudos e conhecimentos explicados nas obras de SANTAELLA (1983) e em materiais a respeito dos estudos de PEIRCE (2014). O planejamento visual será desenvolvido de acordo com os princípios de Gestalt citados no livro “Gestalt do objeto” de GOMES FILHO (2000). Durante o desenvolvimento da programação do website, a principal obra consultada será “Desenvolvendo Websites com PHP” do autor NIEDERAUER (2004), por ser um guia completo a respeito da linguagem de programação PHP18.

17 18

Refere-se ao website que será desenvolvido. Linguagem de programação mais utilizada em websites atualmente. 21

3 ESTRATÉGIAS E PROGRAMAS DE AÇÃO 3.1 ESTRATÉGIAS DE DESENVOLVIMENTO DO PROJETO Após apuradas as necessidades da Plena Representações, melhor descritas no item 1.4, será prosseguido com as estratégias a seguir: a) levantar dados do público por meio de pesquisa quantitativa (a pesquisa pode ser conferida no tópico 7.5 deste projeto); b) analisar o mercado, verificar pontos fortes e fracos da concorrência; c) utilizar-se das informações obtidas pela pesquisa do item “A” para melhor entender e satisfazer o público e futuros clientes; d) elaborar identidade visual, visando definir posicionamento da Plena; e) iniciar desenvolvimento do website, baseando-se nas informações pré-obtidas e analisadas no item A e B; f) mostrar à Plena o que o público quer, para melhor entender como este projeto pode e irá ajudá-la, por meio da pesquisa acima citada. A estratégia mais importante para conclusão eficaz deste projeto é a organização e estabelecimento de metas, conforme abaixo: a) realizar reuniões periódicas entre a equipe para estabelecer metas, assim como discutir o que será feito ou melhorado; dividir todas as tarefas do projeto para que sempre trabalhem em conjunto, visando trazer confiança e companheirismo para conclusão de todas as etapas; b) utilizar-se dos encontros realizados com os professores orientadores, para além de verificar e validar o andamento do projeto, avaliar o comprometimento e união do grupo; c) realizar cada etapa de modo integrado, onde todos produzam e façam parte de todos os processos do projeto; d) realizar reuniões com o representante da empresa para torná-lo ciente do andamento do projeto; e) para melhor acompanhamento dos resultados esperados, serão utilizadas ferramentas analíticas na construção do website, para que possamos monitorar o desempenho da página. 22

3.2 FERRAMENTAS DE DESENVOLVIMENTO DO PROJETO Os documentos trabalhados e elaborados estão sendo produzidos no ambiente Windows, junto ao Microsoft Office19, armazenados no Google Drive20 que promove o compartilhamento instantâneo de documentos, permitindo edição imediata online. Para a criação do Wireframe21, foi utilizado a ferramenta JustInMind, que é gratuita. Neste aplicativo podem ser produzidos protótipos navegáveis e até animados, recursos estes que foram utilizados neste projeto. Será utilizado o Notepad++22, no qual é possível trabalhar com uma variedade de linguagens sincronizando-as, sendo elas HTML23, CSS24, PHP25, jQuery26 e JavaScript27. A ferramenta XAMPP28 nos dá opção de testar e executar alterações diretas num servidor local, nos disponibilizando o Apache29 e MySQL30 para rodar o serviço. Uol Host31 será o servidor contratado pela empresa, por trabalhar com 5 tipos de banco de dados, incluindo o MySQL, que foi utilizado neste projeto, e-mails profissionais, registros e domínios, antivírus32 e suporte técnico. Visando agilidade e confiabilidade, será utilizado o WordPress na criação do site. Já com ferramentas como as disponibilizadas pela Adobe, que dão condições necessárias ao desenvolvimento da identidade visual e ao mesmo tempo concede liberdade ao designer, com um trabalho conjunto entre as ferramentas, sendo elas Adobe Photoshop CS633, Adobe Illustrator CS634 e o Adobe InDesign CS635. Visando a probabilidade de criar e editar várias linguagens, conforme citado anteriormente: HTML, CSS, PHP, jQuery e JavaScript; foi escolhido o Notepad++.

19

Software ou aplicativo para escritório. Serviço de armazenamento, sincronização e apresentação de arquivos online. 21 É um protótipo construído para visualização da estrutura básica de um aplicativo ou website. 22 Editor de texto e código fonte aberto, suportando várias linguagens. 23 Linguagem de marcação. 24 Define a aparência em páginas da internet. 25 Linguagem para desenvolvimento de aplicações web. 26 É uma biblioteca JavaScript. 27 Linguagem de programação muito utilizada na internet. 28 Servidor independente de plataforma. 29 Servidor Web Open Source. 30 É um sistema de gerenciamento de banco de dados. 31 Presta serviço de hospedagem de sites. 32 Programa que avalia, detecta e apaga ameaças para o bom funcionamento do computador. 33 Software de edição de imagens. 34 Software de edição de imagens vetoriais. 35 Software de design gráfico e editoração. 20

23

Por serem de amplo conhecimento e não terem custo algum, foram escolhidas as linguagens HTML, CSS, PHP, jQuery e JavaScript. O código será comentado e detalhado para que qualquer analista possa fazer alterações futuramente. A escolha do WordPress se deu pela usabilidade e por ser a maior plataforma de gerenciamento. Para a criação da identidade visual, criação de objetos e manipulação de imagens é essencial o uso das ferramentas Adobe, no caso o Adobe Photoshop, Adobe Illustrator e InDesign que podem ser trabalhadas em conjunto, o que facilita as criações.

3.3 CRONOGRAMA DE DESENVOLVIMENTO O cronograma foi feito no aplicativo “Wunderlist36” disponível na loja de aplicativos “Google Play”37, “App Store”38, loja do “Windows Phone39” e também para os navegadores40 de internet. A comunicação à distância usada pela equipe foi realizada

por

meio

do

aplicativo

para

smartphones41,

“WhatsApp42”.

O

armazenamento e compartilhamento das informações e arquivos, foi realizado usando o “Google Drive43”.

Atividade

Data limite

Formação da equipe de desenvolvimento

25.04.2014

Escolha do professor orientador

09.05.2014

Escolha da empresa para desenvolvimento do projeto

09.05.2014

Reunião com o cliente

16.05.2014

Inscrição no PIM 23

06.06.2014

Início da criação do logotipo

06.06.2014

36

Aplicativo para gerenciamento de tarefas. Loja de aplicativos para o sistema operacional de smartphones Android da Google. 38 Loja de aplicativos para o sistema operacional de smartphones IOS da Apple. 39 Sistema operacional de smartphones Windows Phone da Microsoft. 40 Refere-se ao programa utilizado para acesso a páginas na internet. 41 Aparelhos celulares com sistemas operacionais muito parecidos com computadores e que permitem conexão com a internet e instalação de vários aplicativos, entre outras funções. 42 Aplicativo para dispositivos móveis que tem a função de troca de mensagens por meio de texto e voz além de envio de vídeos e fotos. 43 Serviço de armazenamento e compartilhamento de arquivos que se baseia no conceito de “computação em nuvem” ou cloud computing, que permite a edição de alguns tipos arquivos (como arquivos de texto), por vários usuários ao mesmo tempo. 37

24

Confecção de material de papelaria

04.07.2014

Início do desenvolvimento da primeira parcial

28.07.2014

Reunião da equipe

28.07.2014

Reunião da equipe

05.08.2014

Reunião com o cliente

08.08.2014

Reunião com professor orientador

12.08.2014

Reunião da equipe

13.08.2014

Reunião com professor orientador e entrega de material

26.08.2014

para revisão Reunião da equipe

27.08.2014

Reunião com o cliente

29.08.2014

Reunião com professor orientador e retorno de material

02.09.2014

para revisão Ajustes finais, impressão, encadernação e entrega da

12.09.2014

primeira parcial Reunião da equipe

16.09.2014

Reunião com o cliente

19.09.2014

Início do desenvolvimento da segunda parcial

19.09.2014

Reunião da Equipe

19.09.2014

Reunião com professor orientador

23.09.2014

Início do desenvolvimento do website

24.09.2014

Reunião da equipe

26.09.2014

Reunião da equipe

08.10.2014

Reunião com professor orientador

08.10.2014

Ajustes finais e impressão da segunda parcial

15.10.2014

Entrega da segunda parcial

17.10.2014

Reunião com professor orientador

20.10.2014

Reunião da equipe

20.10.2014

Reunião com o cliente

21.10.2014

Reunião com professor orientador

10.11.2014

Reunião com o cliente

10.11.2014

Ajustes finais e impressão da versão final da monografia

12.11.2014 25

Entrega final da monografia

14.11.2014

Reunião da equipe

17.11.2014

Reunião com o cliente

19.11.2014

Ajustes finais no website e demais materiais de

20.11.2014

comunicação Entrega do website e demais materiais de comunicação

21.11.2014

Apresentação do trabalho à banca

04.12.2014

Reunião da equipe

08.12.2014

Reunião com o cliente

09.12.2014

Entregas finais pós-banca (Cópia em CD)

10.12.2014

Resultado final

12.12.2014

3.4 METODOLOGIA Para atingir os objetivos propostos foram utilizados os seguintes procedimentos:  Briefing: Ao início da confecção deste trabalho, foi realizada reunião com os diretores da Plena, para coleta de informações, intenções e expectativas do mesmo a respeito do projeto. Desta forma o desenvolvimento dos itens propostos foi realizado com base nas necessidades da empresa contratante. Esta reunião inicial, também serviu para melhorar a comunicação entre equipe de desenvolvimento e a Plena assim como minimizar os erros durante o processo de criação.  Brainstorming44: Para o desenvolvimento do logotipo (que pode ser visualizado no tópico 4.5), após receber algumas orientações do cliente onde ele informou que precisava de uma marca. Um ponto relevante, é que gostaria que a mesma tivesse algum elemento que lembrasse algo como um gráfico. Após esse apontamento, foi feito um brainstorming entre a equipe para que surgissem algumas ideias para apontar caminhos a serem seguidos.  Wireframe: Para a construção do website, foi desenvolvido um protótipo deste (pode ser visualizado no tópico 5.8), para que a empresa contratante, possa visualizar a estrutura básica e saber como e onde as informações serão exibidas

44

Técnica que pode ser realizada em grupo ou individualmente, onde são anatadas todas as palavras e ideias que vem a mente quando se pensa em um determinado assunto ou tema. 26

em cada página. O wireframe, também serve para orientar a equipe de desenvolvimento e facilita possíveis alterações na base do site, uma vez que é mais rápido e prático alterar algum componente no projeto quando este ainda é um protótipo, não tendo a arte ainda desenvolvida.  Pesquisa bibliográfica: trata do levantamento de bibliografias já publicadas e que tenham relação com o tema em estudo. Sua finalidade é colocar o pesquisador em contato direto com aquilo que foi escrito sobre determinados assuntos. Estes documentos permitem ao pesquisador o reforço paralelo na análise de suas pesquisas ou na manipulação de suas informações. Neste projeto, a pesquisa bibliográfica será realizada com base em materiais publicados como livros, documentos, arquivos e também em websites, importantes das áreas de interesse. Os principais autores consultados foram TORRES (2010), FELIPINI (2010), FARINA (2006), KOTLER (2006 e 2011), KRUG (2008) e SANTAELLA (1983).  Pesquisa de campo: aplicação de questionário sobre quais materiais de comunicação o público considera importante que a empresa Plena possua ou disponibilize, afim de sanar as necessidades de comunicação da mesma. A pesquisa foi realizada em ambiente online, por meio de envio de e-mail para o público, contendo o link para o formulário e informando o mesmo a respeito da pesquisa e solicitando a participação deste. A leitura dos dados de respostas foi realizada por meio da ferramenta utilizada, neste caso o “Formulários Google45”. A pesquisa completa pode ser consultada no tópico 7.5  Para avaliar o interesse do público secundário em relação ao tema proposto e justificá-lo, foi enviado um questionário de interesse a 1.000 usuários de ferramentas online. Para isso foram escolhidos aleatoriamente endereços eletrônicos de pessoas físicas residentes em todo o território nacional. Os contatos foram provenientes de uma lista de contatos de um dos integrantes da equipe que já havia realizado uma pesquisa semelhante anteriormente. O resultado desta pesquisa encontra-se no tópico 7.5.

45

É uma ferramenta que permite fazer enquetes rapidamente com um formulário online. Os resultados podem ser conferidos depois em uma planilha que faz parte da ferramenta. 27

Optou-se por essa amostragem por ser o ambiente onde o produto principal deste projeto - o website - irá funcionar. O resultado da pesquisa apontou dados positivos em relação ao interesse dos entrevistados em relação as propostas da mesma.

3.4.1 Definição de público-alvo O projeto tem a intenção de fornecer o material de comunicação que o público considera relevante e útil no momento da necessidade de compra ou pesquisa de um produto ou serviço, evitando assim o “desperdício de recursos” e o “incomodo” dos usuários com materiais “indesejáveis”. Por isso, foi enviado aleatoriamente um questionário de interesse a 1.000 pessoas, distribuídos entre pessoas físicas, usuários de meios eletrônicos e funcionários de área comercial. Optou-se por um público amplo porque o ramo de atividade da empresa contratante (representação comercial), é bastante abrangente. Os resultados das pesquisas (os quais podem ser visualizados em maiores detalhes no tópico 7.5) apontam dados positivos em relação ao interesse dos entrevistados em consultar o tipo de material principal sugerido, o website.

28

4 PLANEJAMENTO VISUAL 4.1 GESTALT

Comunicação é a ferramenta que facilita nossas vidas todos os dias. Neste projeto, foi utilizado dela a todo momento para transmitir mensagens de diversas maneiras, seja ela sonora, visual ou até mesmo comportamental, basicamente esse processo tem quatro elementos para que a mensagem seja transmitida, são eles: emissor, receptor, o meio e o feedback46. Essas ferramentas normalmente são bem articuladas por empresas, que as utilizam para modelar sua imagem no mercado inserido, o design visual é algo extremamente importante para conquistar atenção do consumidor, uma técnica usada para tornar o design visual mais agradável chama-se Gestalt. O Gestaltismo tem origem no termo “gestalt”, uma palavra germânica, que se dá ao nome do estudo de formas ou figuras; de acordo com matéria publicada no site Chocoladesign (2014), relata que esse estudo pertence a uma área da psicologia que foi influenciada por Max Wertheimer, Immanuel Kant, Ernst Mach e Johann Wolfgang von Goethe. Esse conhecimento fala sobre nossa capacidade de visualização de objetos ou cenários, e a interpretação gerada pelo cérebro; o princípio básico gestaltista diz que o inteiro é interpretado de maneira diferente que a soma de suas partes, ou seja, o cérebro entende que qualquer imagem captada pelo olho, são em partes separadas, mas o cérebro passa muito rápido por essa informação e retorna com a conclusão de uma imagem por inteiro e não uma imagem fragmentada. Para facilitar o entendimento da Gestalt, a dividiram em algumas leis, possibilitando a compreensão de como o cérebro humano enxerga formas ou figuras; As definições, de acordo com GOMES FILHO (2000), são as seguintes:  Unidade: “uma unidade formal pode ser identificada em um único elemento, que se encerra em si mesmo, ou como parte de um todo”. Pode-se ver aplicação desse conceito na FIGURA 3, onde as formas do objeto começam e terminam nela mesma, facilitando a visualização e entendimento de um todo.

46

Refere-se a resposta recebida ao ato realizado. 29

FIGURA 3 - Ícone "Empresa".

 Segregação: “segregação significa a capacidade perceptiva de separar, identificar, em um todo compositivo ou em partes deste todo, dentro de relações formais, dimensionais de posicionamento”. Tratando-se de destacar um objeto para a fácil identificação visual, nas opções do menu do projeto, foi aplicado coloração na opção focada com o mouse, deixando as outras opções em segundo plano com uma cor mais “apagada”, conforme FIGURA 4.

FIGURA 4 - Nome da página selecionada em destaque no menu.

 Unificação: “a unificação se verifica quando os princípios de harmonia e equilíbrio visual e, sobretudo, a coerência do estilo formal das partes ou do todo estão presentes em um objeto ou numa composição”. Na FIGURA 5, é praticado esta lei, utilizando várias formas geométricas, que com posicionamento adequado visualiza-se o objeto por completo, concluindo a imagem final como um gráfico.

30

FIGURA 5 - Ícone "Serviços".

 Fechamento: “as forças de organização da forma dirigem-se, de maneira natural, para uma ordem espacial que tende à formação de unidades em todos fechados”. Quando são identificadas demarcações em uma figura, nas várias interpretações geradas pelo cérebro tem-se a conclusão de uma área completa embora as demarcações não estejam interligadas. Como na FIGURA 6, na qual pode-se visualizar um retângulo ao redor das figuras como um todo.

FIGURA 6 - Conjunto de símbolos e ícones formando "fechamento".

Quando observado a FIGURA 6, o cérebro humano interpreta como consta na FIGURA 7.

FIGURA 7 - A forma como o cérebro interpreta a FIGURA 6.

31

 Continuidade: “a Continuidade define-se como a impressão visual de como as partes se sucedem por meio da organização perceptiva da forma de modo coerente, sem quebras ou interrupções na sua trajetória ou na sua fluidez visual”. O modelo do mapa do site foi projetado com base nessa lei. Ele proporciona ao usuário, a continuação de um caminho, auxiliando na escolha em qual tomar, para chegar no objetivo, conforme FIGURA 8.

FIGURA 8 - Forma do "mapa do site" do rodapé do site.

 Proximidade: “elementos ópticos, próximos uns dos outros, tendem a ser vistos juntos e, por conseguinte, a constituírem um todo ou unidades dentro do todo”. Elementos da mesma forma, quando estão próximos uns dos outros, passam ao cérebro a interpretação de um grupo. O rodapé do website, contém o mapa (FIGURA 9), contendo as várias áreas acessíveis do mesmo, demonstradas de maneira hierárquica, segundo essa lei, tem-se a conclusão de três grupos, um grupo com seis opções, outro com três e o ultimo com cinco opções. Os quais são interligados por categorias de informações.

FIGURA 9 - Mapa do site. 32

 Semelhança: “a igualdade de forma e de cor desperta também a tendência de se constituir unidades, isto é, de estabelecer agrupamentos de partes semelhantes”. Formas iguais ou de mesma cor, dão a impressão de grupos se dispostas próximas umas das outras. Na FIGURA 10. As áreas do site, estão agrupadas desta forma. Itens semelhantes estão próximos uns dos outros, para que o usuário tenha a sensação de organização do conteúdo exibido.

FIGURA 10 - Áreas agrupadas por semelhança no site.

 Pregnância da forma: “as forças de organização da forma tendem a se dirigir tanto quanto o permitiram as condições dadas, no sentido da harmonia e no sentido visual”. Também conhecida como lei da simplicidade, ao invés de ver uma variedade de formas tornando uma figura mais complexa, como pode ser visto na FIGURA 11. A imagem contendo vários círculos e uma flecha no centro, é visto a simplificação da imagem, ou seja uma forma só. 33

FIGURA 11 - Ícone com forma simples utilizado no site.

4.2 TEORIA DA COR

SILVA e MARTINS (1996), comentam que, Isaac Newton em um experimento chamado "Nova Teoria sobre Luz e Cores", colocou um pedaço de vidro em um orifício da janela de seu quarto. Nesta experiência Newton com um prisma de vidro triangular, obteve a refração do raio de luz do sol, onde nele são produzidas diversas cores semelhantes às do arco-íris. A princípio ele se divertia com tal fenómeno, mas passado algum tempo ele passou a considerar esse acontecimento e fez um estudo detalhado. Onde, além de detalhar diversas fórmulas que explicam o fato fisicamente, também comprova que a luz branca do Sol ao ser decomposta produzia um espectro que ia do vermelho, passando pelo laranja, o amarelo, o verde e o azul até ao violeta.

FIGURA 12 – Disco de cores (Fonte: Design Culture).

O processo de coloração pode ser mais complexo do que se pode imaginar, segundo FARINA (2006), as cores influenciam o ser humano e seus efeitos, tanto de caráter fisiológico como psicológico, interferem em nossa vida, estimulando alegria ou tristeza, exaltação ou depressão, atividade ou passividade, calor ou frio, equilíbrio ou 34

desequilíbrio, ordem ou desordem, entre outros. As cores podem produzir impressões, sensações e reflexos sensoriais de grande importância, porque cada uma delas representa uma vibração determinada nos sentidos e pode atuar como estimulante ou perturbador na emoção, na consciência e em nossos impulsos e desejos. Olhando por este prisma, FARINA (2006), leva a refletir sobre a importância que as cores têm no processo de comunicação, e entender esta significação da cor, permite que seja alcançado um melhor resultado no decorrer do projeto assim como atingir alta pregnância dos materiais e peças construídas neste projeto. Nos materiais desenvolvidos, foram trabalhadas diversas cores sejam elas em composições distintas e até mesmo em suas respectivas escalas, cada uma delas foi aplicada de maneira a produzir clareza e que produzisse boas reflexões nas mentes dos usuários, seja recebendo um cartão de visita ou mesmo em um veículo personalizado.

FIGURA 13 - Escala das cores utilizadas na composição da identidade visual.

As cores dão singeleza e contraste as formas, elas vão muito além de uma simples definição visual, elas produzem sensações e são sempre carregadas de significados que podem variar dependendo da cultura de cada expectador. Um exemplo é a cor que simboliza o luto, no Brasil é utilizado o preto, já no Japão é utilizada a cor branca. Em estudo sobre a psicologia da cor da Carey Jolliffe Graphic Arts (2013), consta a seguinte frase de Oscar Wilde, poeta irlandês: "mera cor, intocada pelo significado e sem vínculo com forma definida, pode falar com a alma de mil maneiras diferentes". 35

No projeto foi utilizado como base as cores: azul, preto e o branco. Para chegar nestas cores foram estudadas as cores azul noturno, preto, vermelho e amarelo ouro. A partir delas foram desenvolvidas peças como logotipo, cartão de visitas, veículo personalizado e peças digitais. No estudo realizado pela Carey Jolliffe Graphic Arts (2013), chamado “a psicologia das cores”, são concluídos os seguintes significados para essas cores:  Pontos positivos do azul: elétrica, energia, vivas e vibrantes, bandeiras, mexendo sempre, impressionantes, aquático, alto astral, divertida;  Pontos positivos do preto: poderoso, capacitando, elegante, sofisticado, misterioso, pesado, ousado, básico, clássico, forte, cara, invulnerável, mágico, noite, sóbrio, de prestígio, “estiloso” e moderno; Pontos negativos do preto: depressão, morte, luto, submundo, mal, opressão, ameaçando;  Pontos positivos do branco: pura, limpa, pura, virginal, imaculada, inocente, silencioso, leve, arejado, brilhante, nupcial, etéreo, clareza, simplicidade, ártico, eficiente. Pontos negativos do branco: estéril, fria, clínica.

Tratando das cores devemos considerar que elas não são elementos palpáveis, e sim reações químicas, físicas e no caso da utilização web, também são interpretadas por códigos hexadecimais47. Cores luz, que são interpretadas como RGB48 que são aquelas provenientes de monitores, lanternas, televisões entre outros dispositivos. São tratadas com a absorção, dispersão, reflexão e refração. As cores luz são as cores utilizadas na web e em diversos dispositivos móveis que emitem uma certa codificação de luz para que o usuário perceba visualmente qual cor está sendo aplicada, para utilizar essas cores os desenvolvedores fazem uso das cores hexadecimais. Enquanto as cores pigmento CMYK49 são cores que são o resultado de misturas entre elas, são encontradas em objetos impressos, como embalagens, jornais, revistas entre outros. Segundo ARAÚJO (2013), o escritor alemão Johann Goethe faz uma relação entre as cores e os seres humanos: “As cores são ações e paixões da

47

Códigos formados por letras e números utilizados, neste caso, para representar as cores de maneira exata. 48 A sigla vem do inglês “red, green, blue”, respectivamente significam “vermelho, verde e azul”, que representam as cores primárias deste sistema de cores. 49 Vindo do inglês “Cyan, Magenta, Yellow, Black”, que significam “ciano, magenta, amarelo e preto”. Que são as principais cores utilizadas para este sistema. 36

luz”. “A cor é tecla; o olho é o martelo; a alma, o piano de inúmeras cordas”; assim comparava a cor a um instrumento o artista Kandinsky, de acordo com matéria publicada no site Design Culture (2014).

FIGURA 14 - Tabela de cores Plena.

4.3 TEORIA DA COMUNICAÇÃO

No decorrer da existência da humanidade foram surgindo mais e mais necessidades, tal como a necessidade de uma comunicação e transmissão cultural de maneira mais abrangente, exposta na Teoria de Karl Marx. Seguindo esta evolução surge a indústria cultural como ferramenta de comunicação e manipulação de massa. Na sociologia funcionalista a base teórica era o positivismo. Com ela nasceram a mídia e também novas ferramentas de comunicação utilizadas pela democracia moderna. Estes mecanismos foram utilizados pelo estado e com o passar dos anos esses meios tornaram-se suspeitos de violência simbólica. Surge então no decorrer dos anos, um pensamento crítico que nasceu na Europa, mais especificamente na Alemanha. A teoria crítica inaugurada pela escola de Frankfurt norteada pelo marxismo, que mais tarde é dominada pelo partido de Adolf Hitler. De acordo com SOUSA (2006) e ELIENE (2014), a comunicação faz parte da essência dos seres humanos, desde os tempos da pré-história a comunicação está imbuída como uma das principais e mais salientes características da humanidade (FIGURA 15). Por meio desta que inicialmente era apenas uma necessidade básica 37

de cada indivíduo, a comunicação dos dias atuais é uma das formas mais avançadas que o mundo já conheceu. O comunicar da atualidade chegou a um nível de qualidade e eficiência de comunicação que surpreende em todos os aspectos.

FIGURA 15 - Evolução da comunicação. (Fonte: Google imagens)

Considerando-se as ferramentas e meios de comunicação atuais (internet, rádio, televisão, outdoor, material impresso, entre outros), analisando a relação custo benefício, pesquisa mencionada no item 7.5 e autores como KOTLER (2011) que apontam o website como a ferramenta de comunicação mais importante da atualidade, pode-se chegar à seguinte conclusão: a internet é o principal meio de pesquisa que as pessoas utilizam no momento da necessidade de compra de algum item ou contratação de algum serviço. No livro “Publicidade na internet” os autores ZEFF e ARONSON (2000), comprovam que para um grande número de empresas, o primeiro investimento em publicidade das mesmas, é na internet. Isso se deve ao fato da visibilidade que o meio pode trazer à empresa e ao custo, que não é tão elevado quanto o de outros meios de comunicação em massa. Neste projeto, a comunicação se dará, além da web, por outros meios, visando atingir o público de várias formas e ao mesmo tempo, buscando não importuná-lo com materiais indesejáveis. Por este motivo também, foi realizada uma pesquisa de campo 38

(que pode ser visualizada por inteiro no tópico 7.5), para saber quais são os materiais de comunicação que as pessoas costumam consultar no momento da compra ou pesquisa de algum item ou serviço. Este resultado contribui também para o aspecto econômico da Plena, uma vez que será evitado que a mesma disponha de um valor para a confecção de materiais de comunicação que possam muitas vezes, não trazer a visibilidade almejada, pois o público não os utiliza com regularidade. A relação de todos os materiais de comunicação desenvolvidos neste trabalho, pode ser conferido nos tópicos 7.2 e 7.3.

4.4 SEMIÓTICA No livro “O que é Semiótica” de SANTAELLA (1983), a autora cita que a Semiótica tem origem na expressão grega “semeion”, e quer dizer signo. Portanto, é a ciência dos signos. E ao esclarecer a ótica Peirceana sobre o que é signo, Santaella diz: "o signo é uma coisa que representa uma outra coisa". Para explicar esta ideia, segundo a autora, existem três conceitos básicos: primeiridade, é a categoria que dá à experiência sua qualidade distintiva, seu frescor, originalidade irrepetível e liberdade. Não a liberdade em relação a uma determinação física, pois que isso seria uma proposição metafísica, mas liberdade em relação a qualquer elemento segundo; secundidade é aquilo que dá à experiência, seu caráter factual, de luta e confronto; e terceiridade, que aproxima um primeiro e um segundo numa síntese intelectual, corresponde à camada de inteligibilidade, ou pensamento em signos, através da qual representamos e interpretamos o mundo.

FIGURA 16 - Exemplificação de semiótica (Fonte: SANTAELLA (1983)) 39

Em estudos do linguista Ferdinand de Saussure, consultados em material publicado para NUPEA, Núcleo de Pesquisa em Ensino de Arte (2014), onde ele diz que, o signo analisado isoladamente é um elemento hermético, mas quando é aplicado dentro de um contexto, sua significante ganha, além de um significado, a competência de poder significar mais de um significado. Para o estudo e aplicação desta ciência é essencial conhecer os usuários, seja através de pesquisas ou mesmo em um estudo de casos, estas ações darão o norte para o desenrolar do processo em qualquer disciplina ou estudo. Para o desenvolvimento desse trabalho foi feito uso de ambos, e foi através deles e de briefing do cliente que chegou-se aos resultados apresentados. Nos materiais criados para a Plena, estão sendo trabalhados a questão do signo e qual o real significado ele terá para os espectadores, sabendo desse mapa que os receptores são inconscientemente levados a seguir. Também foi realizado a elaboração de um logotipo com cores e formas que induzissem o observador a pensar o que realmente a empresa tem a oferecer. Para que fossem obtidos melhores resultados, na utilização da semiótica nas peças desenvolvidas, buscou-se seguir as regras explicadas por SANTAELLA (1983) e baseadas em estudos publicados no site do NUPEA (2014) a respeito da Semiótica Peirceana. Para inferir no âmbito da primeiridade, inicialmente, foram escolhidas cores que transmitem em um primeiro aspecto segurança, nobreza e clareza, respectivamente azul, preto e branco. No caso da secundidade, analisa-se a reação que o receptor tem ao ser impactado por uma propaganda ou mídia, é um campo que não se pode interferir diretamente, porque é onde cada indivíduo tira suas conclusões a respeito de determinado material, ou seja, ela é a arena da existência cotidiana, consciência reagindo as factualidades do mundo exterior. Ao tratar da terceiridade, percebe-se que ela tem relação de inteligibilidade do receptor e ela está intimamente ligada as outras duas, contudo ela é um compilado que ocorre através da memória e dependem da basicamente da herança cultural. O logotipo da Plena Assessoria representa uma conexão entre o logo que tem relação direta com o crescimento e a palavra "plena", e ele é resultado de estudos que unem conceitos tanto tipográficos quanto conceitos de coloração e elementos visuais. Para que fosse atingido este resultado (que pode ser visualizado no tópico 4.5), foram 40

analisados elementos capturados no brainstorming e conceitos iniciais passados pelo briefing com a empresa contratante. O signo (FIGURA 17) é a imagem com uma seta que demonstra um crescimento, ou mesmo um gráfico que parte de um plano baixo e cresce exponencialmente. Significa a ascensão, o crescimento e mesmo o aumento.

FIGURA 17. - Signo utilizado para compor o logotipo da Plena

O texto (FIGURA 18) é o nome principal "Plena", que remete a algo que tenha plenitude, constância, e mais objetivamente segurança.

FIGURA 18 - Texto utilizado para compor o logotipo da Plena.

Visto que a ideia central deste logotipo é fazer com que o expectador veja através dele, que a empresa representa um crescimento exponencial seja de vendas ou mesmo nas relações comerciais de seu negócio, o conjunto de logo mais o tipo, transmite respectivamente, crescimento com segurança.

4.5 COMPOSIÇÃO

Tendo como base os princípios anteriormente citados: Gestalt, teoria da cor, teoria da comunicação e semiótica, deve-se então ser elaborada a identidade visual, 41

para a construção do layout do website e dos demais materiais de comunicação, aplicando estes conceitos de maneira natural e harmoniosa. Para que o usuário sinta-se confortável e encontre as informações a que necessita de forma rápida e fácil, ao navegar pelo website, é preciso não distraí-lo com outros elementos que possam tirar-lhe a atenção ao que é realmente importante, desta forma os “espaços em branco” passam a ter grande importância também. Segundo WONG (1998), os elementos visuais são formados pelos seguintes elementos: 

Formato - Tudo que pode ser visto possui um formato que proporciona a identificação principal a nossa percepção.



Tamanho - Os formatos, por usa vez possuem tamanho. Esta pode ser uma característica relativa (grande, médio e pequeno), mas que também é mensurável.



Cor - Outra maneira de se diferenciar duas formas iguais é por meio da cor.



Textura - Diz respeito às características da superfície da forma, como áspero ou liso e simples ou decorada. Esta característica pode ser usada para diferenciar uma forma não só no sentido visual, mas também no sentido de tato, porém no caso do projeto em questão, esta característica será restringida ao sentido visual.

Em relação a localização e inter-relação entre as formas, existem os elementos relacionais, descritos por WONG (1998), da seguinte forma: 

Direção - A direção de uma forma depende de como ela está relacionada com o observador, com a moldura a qual este objeto está inserido ou com outras formas próximas a esta.



Posição - É entendida pela sua relação com a moldura ou com a estrutura do desenho ou layout.



Espaço - Todo formato ocupa um determinado espaço, este espaço pode ser preenchido por alguma forma ou ser deixado vazio. Pode também ser plano ou simular profundidade.



Gravidade - Esta característica não é produzida por uma sensação visual, e sim psicológica. Como todos os elementos são atraídos pela gravidade da Terra, tem-se a tendência de atribuir peso, leveza, estabilidade ou instabilidade a formas individuais ou agrupadas. 42

Assim sendo, os elementos visuais e suas características foram constituídas levando em consideração os princípios citados no início deste tópico, para que haja harmonia e o layout transmita unidade entre os elementos, o que contribui também, para uma identidade visual bem definida e marcante. Conforme citado no tópico 3.4, foi feito um brainstorming entre a equipe para que surgissem algumas ideias para apontar caminhos a serem seguidos no desenvolvimento da logo e identidade visual da marca. Algumas das palavras capturadas entre o grupo foram as seguintes:

segurança

confiabilidade

constância

poder

iniciativa

crescimento

topo

subida

foguete

pulo

salto

escada

adiante

aumento

expansão

confiança

melhoria

avanço

alcance

longe

satisfação

turbo

além

evolução

Os resultados dos trabalhos realizados com base neste brainstorming, podem ser visualizados, em seguida:

FIGURA 19 - Rascunhos do logotipo em papel.

43

FIGURA 20 - Primeiros estudos da logo em meio digital (no computador).

FIGURA 21 – Versão final do logotipo da empresa Plena.

44

FIGURA 22 - Aplicações da logo.

FIGURA 23 - Composição do cartão de visitas da empresa Plena.

45

FIGURA 24 - Composição do layout da página inicial do website.

46

5 USABILIDADE E ARQUITETURA DA INFORMAÇÃO 5.1 VELOCIDADE DE CARREGAMENTO Um fator importante, que todos desenvolvedores de webpages50 devem lembrar e dar foco, é a velocidade de carregamento, fator este que tem ligação direta com o usuário, afinal a espera de carregamento pode trazer uma experiência desagradável, impactando na rejeição do site, mas com um tempo de carregamento reduzido, é proporcionado a satisfação. Levando-se em consideração NIELSEN (2010), relata que o carregamento que leva 0.1 segundos, dá a sensação de manipulação, ao utilizador, fazendo parecer que agilidade do acesso foi causada por ele, onde o mesmo tem um raciocínio continuo pelo processo levar 0.1 segundos. Por sua vez, com 10 segundos o usuário sente que o processo depende da máquina, causando o desejo que o processo fosse mais rápido, com esse tempo de espera, o usuário tende a desviar a atenção do conteúdo que está sendo carregado e o leva a procurar outro site. Portanto, atrasos no carregamento podem levar a desistência da conclusão do objetivo a menos que esteja comprometido com o que o usuário deseja encontrar neste website. Tendo em base que a maioria das criações de sites é realizada em Localhost51, o carregamento é imediato, perdendo a referência de tempo que o usuário deve levar para carregar a página vindo de um servidor web. Por este motivo, existem ferramentas online que fazem análise do carregamento e oferecem sugestões de para otimizar52 o carregamento. Neste projeto foi escolhido a ferramenta “Google Pagespeed Insights”, para medir a velocidade de carregamento das páginas do website. Esta ferramenta possui uma versão em plugin para o WordPress, que foi a versão utilizada no projeto. Conforme pode ser visualizado na FIGURA 26, os tempos de carregamento estão satisfatórios, uma vez que, de uma escala de 0 a 100, as páginas do site, estão apresentando médias de 90 para computadores e 89 para dispositivos móveis.

50

Páginas na internet. No próprio computador do desenvolvedor, ou servidor local. 52 Melhorar o desenvolvimento. 51

47

FIGURA 25 – Logo da ferramenta Page Speed (Fonte: Halo Seeker).

FIGURA 26 - Teste de carregamento (Fonte: Google Pagespeed).

48

Para otimização do uso de dados utilizados no acesso às páginas do site, foi utilizado o plugin, W3 Total Cache. Quando uma página é acessada na internet, o computador faz o carregamento dos conteúdos da mesma, e aloca em uma pasta no computador do usuário, chamada “cache”. Este plugin, faz uso desta pasta, de forma que o conteúdo já acessado pelo usuário, portanto que já consta na pasta “cache”, não necessite ser carregado da internet novamente, fazendo uso destes conteúdos arquivados no computador local.

FIGURA 27 – Código exibido que comprova a instalação do W3 Total Cache.

5.2 ESTRUTURA DE INFORMAÇÃO E HIERARQUIZAÇÃO

A boa organização das informações em websites, é fundamental para a boa navegação do usuário, caso contrário ele poderá não encontrar as informações as quais está buscando o que fará com que ele sinta-se perdido e perca a vontade de continuar navegando ou pesquisando neste site, pois de acordo com AMSTEL e JUNGES (2012),” se o menu de navegação não fizer sentido para o usuário, o website estará inutilizável.” Da mesma forma as informações contidas no site, devem estar categorizadas de maneira compreensível para o usuário. Um site com informações bem estruturadas resulta em uma navegação mais simples e segura, os itens pesquisados também são rapidamente encontrados pela pessoa que realiza a busca, fazendo com que esta sinta-se confortável e familiarizada com os conteúdos disponibilizados. Os administradores do website também serão beneficiados com a organização das informações, uma vez que a inclusão de novos conteúdos e o gerenciamento dos mesmos torna-se mais intuitivo.

49

Neste projeto foram criados o mapa do site53 e wireframe (que também serviu para testes de navegação e pode ser conferido com todas as páginas no tópico 5.8) que auxiliaram na estruturação e hierarquização das informações.

FIGURA 28 – Mapa do website.

FIGURA 29 – Wireframe (Home do website).

53

Mapa explicativo contendo as páginas e os caminhos para acessar as áreas de um website. 50

5.3 ACESSIBILIDADE Acessibilidade54 na internet é garantir que seu conteúdo esteja disponível e acessível via web a qualquer hora, local, ambiente, dispositivo de acesso, sistema operacional, navegador e por qualquer tipo de usuário. Um site com uma boa estruturação permite uma boa navegação, e isso possibilita que um grande número de usuários acesse o conteúdo que será oferecido. É por direito de todos ter um conteúdo acessível na internet, é preciso haver uma igualdade nesse aspecto. Os navegadores e dispositivos usados pelos usuários, são os mais diversos, por este motivo o desenvolvimento do website neste projeto foi realizado pensando-se nesta possibilidade. Sendo assim, o site terá suporte a vários navegadores (a listagem de navegadores suportados encontra-se no tópico 9) e a vários tamanhos de tela. Esta última característica citada, é contemplada por meio da responsividade, que será explanada com maiores detalhes em seguida. Em todo o site da Plena Representações serão aplicados padrões de acessibilidade de acordo com as recomendações do órgão que gerencia e regulamenta estes, W3C (2014). Este órgão é conhecido como World Wide Web Consortium (W3C), e serão seguidas as técnicas disponíveis no endereço eletrônico do mesmo. A intenção é proporcionar aos usuários conteúdo acessível na maioria das situações possíveis, com isso evitando haver rejeição ao site.

5.3.1 Responsividade

Tendo em vista o grande número de dispositivos com os quais as pessoas acessam as páginas na internet, torna-se importante que um website, tenha a capacidade de se adaptar aos vários tamanhos de tela e ser acessível, mesmo com a velocidade de conexão do usuário senda baixa. De acordo com ZONATO (2013), as vendas de dispositivos móveis, como celulares e tablets, apresentaram um aumento

54

Condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa portadora de deficiência ou com mobilidade reduzida. 51

expressivo a partir de 2010. Por este motivo, atualmente ter um site responsivo55 é muito importante, para que o mesmo seja acessível por meio de dispositivos móveis. Segundo matéria publicada no site do Terra (2014), “cada vez mais pessoas têm acessado a internet por meio de dispositivos móveis, chegando, inclusive, a efetuar compras por meio deles. Portanto, invista em uma plataforma ágil, garantindo que o seu conteúdo seja facilmente acessado de qualquer dispositivo”. Segundo ZONATO (2013), algumas das vantagens e possibilidades em se construir um website, com design responsivo, são as seguintes:  Imagens flexíveis: as imagens podem mudar de tamanho na exibição em tela, podendo tomar a tela toda ou apenas um pequeno espaço, de acordo com a orientação (horizontal ou vertical, conhecidas como retrato ou paisagem);  Otimização para sites de busca: uma vez que um mesmo site, pode-se ajustar aos vários tamanhos de tela, perde-se a necessidade de se fazer dois ou mais websites, para se ajustar às resoluções e tamanhos de tela diferentes. O que otimiza os serviços de busca, que priorizam os sites que permitem navegação por um único URL;  Layout customizado: as páginas podem ajustar-se aos formatos e tamanhos de tela mais variados, mudando sua composição e ajustando-as como se tivessem sido produzidas nativamente para aquele tamanho de tela e resolução.  Centralizar conteúdo: podendo se adaptar a diversos dispositivos, o website, pode ser único, não necessitando de outras versões para cada tipo de tela e tamanho. Desta forma, o conteúdo torna-se mais fácil de ser gerenciado, por estar todo em apenas um lugar.  Adaptar conteúdo: os elementos, como textos, vídeos e imagens, podem se ajustar à tela de maneira harmônica, para melhor experiência visual e legibilidade.  Experiência do usuário: quando o usuário acessa determinada página e esta se adapta ao seu dispositivo, ele tende a sentir-se satisfeito e a realizar uma navegação mais agradável.

55

Quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, tablet, etc). Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. 52

 Velocidade de carregamento: com a capacidade de ajustar-se ao dispositivo, a velocidade de carregamento tende a ser menor, uma vez que o conteúdo exibido adapta-se ao tamanho e formato da tela do dispositivo.

Por esta razão, o site da Plena será responsivo, o que otimiza o acesso em celulares e tablets56. O usuário não deverá encontrar dificuldade ao acessar o mesmo, por meios desses dispositivos. Com isso a probabilidade de haver rejeição é pequena.

5.4 FLUXO DA INFORMAÇÃO

A informação é um fator muito relevante em um site, é um recurso indispensável, não há como competir sem ter um fluxo de informações eficaz. Quanto mais confiáveis, oportunas e de fluxo continuo forem as informações, existirá mais coesão e competitividade. Para um usuário ao entrar em um site e não encontrar com facilidade as informações que o interessa é angustiante, é frustrante para ele entrar em um sistema web e ficar perdido. O site da Plena Assessoria terá as informações bem organizadas e expostas, para que o usuário acesse e encontre com facilidade o conteúdo desejado, assim evitando que o mesmo se perca. O sistema será simples e objetivo com informações claras e atualizadas.

56

Dispositivos com telas maiores que celulares comuns e que geralmente servem para leitura de livros, acesso à internet e aplicativos, e em alguns casos como ferramenta de trabalho. 53

FIGURA 30 - Página de Serviços - Vendas.

Conforme pode ser visto na FIGURA 30, as áreas estão bem definidas e os conteúdos bem claros, para que o usuário possa visualizar todas as informações com facilidade. O menu a disposição do visitante e os breadcrumbs57 (que será explicado com mais detalhes no tópico 7.4), onde o usuário pode navegar pelo caminho percorrido no website, não só facilitam a navegação como o familiarizam com a estrutura e o fluxo das informações contidas no site.

Princípio de usabilidade e otimização, que na tradução para o português significa “migalhas de pão” e também é conhecido como “Navegação estrutural”. 54 57

5.5 TAXONOMIA

Conforme cita ZONATO (2010): Desde o início da humanidade, sempre fez parte dos costumes, organizar o conhecimento: classificar é parte de como a mente dual do ser humano funciona. Conforme citado no texto do autor, Immanuel Kant afirma que a mente humana organiza o conhecimento do mundo em um sistema taxonômico, de maneira natural. Também conhecida como “taxinomia” ou “taxionomia”. Consta no dicionário Michaelis, a seguinte definição: “Distinção, ordenação e nomenclatura sistemáticas de grupos típicos, dentro de um campo científico.” Em relação a sua aplicação em websites, segundo AMSTEL e JUNGES (2012) significa a união de todas as categorias que serão utilizadas para classificar o conteúdo dentro deste, e tem como principal objetivo a otimização do acesso por parte do usuário às informações presentes no site, seja por meio da navegação nos menus ou pelas ferramentas de busca. Originalmente o conceito de taxonomia tem o objetivo de dividir e categorizar as espécies e tipos de seres-vivos, como mamíferos, aves, répteis, insetos e anfíbios. Neste caso um mesmo animal, não poderia ser classificado em duas categorias de mesmo nível, ao mesmo tempo, pois se o leão é um mamífero, ele não pode ser uma ave ou réptil. Porém, tratando-se do sentido de taxonomia mais abrangente atribuído a palavra e relacionada a websites, um mesmo item pode ser classificado em mais de uma categoria de mesmo nível, e em alguns casos ele deve ser classificado desta forma. Esta observação é importante principalmente em relação aos menus de navegação. Para o usuário, torna-se necessário a construção de categorias e áreas no menu que sejam de fácil entendimento e memorização. De acordo com AMSTEL e JUNGES (2012): “A estrutura de navegação de um website é sua espinha dorsal.” Pois é através deste que o usuário se familiariza com o conteúdo do site e ganha agilidade e confiança ao navegar no mesmo. Em pesquisa realizada pelo Microsoft Research e citada pelos autores acima relacionados, um menu deve ter no máximo 16 itens, pois com mais entradas, ele torna-se difícil de ser memorizado. Porém os autores fazem uma ressalva, exemplificando que, de acordo com antigos dados de pesquisa, a memória de curta duração58, é capaz de armazenar

58

Memória de acesso imediato usada pelo cérebro humano 55

de 5 a 9 itens. Desta forma deve-se usar de objetividade ao categorizar os itens do menu e a classificação dos conteúdos do website, desta forma será mais fácil para o usuário memorizar e entender a estrutura das informações, fazendo com que ele navegue de forma mais rápida e sinta-se mais seguro, encontrando assim de forma mais ágil as informações a que necessita. Neste projeto, foi criado uma hierarquização para os conteúdos de forma que os assuntos de menor abrangência ficaram subordinados ao mais abrangentes, criando uma associação entre os termos e facilitando o entendimento do usuário. Este processo facilita também o cadastro e inclusão de novos conteúdos no site, uma vez que podem ser definidos profissionais com conhecimento para cada categoria, que serão os responsáveis pelo gerenciamento destes materiais. Os nomes das categorias de conteúdos e itens do menu, foram criados a partir do tipo de informação que a empresa contratante tem a oferecer aos seus clientes. Desta forma os itens do menu foram criados com os seguintes nomes:  Home (página principal) - Vem do inglês “casa”, e é forma mais comum de localizar a página inicial de um website, por ser a nomenclatura mais utilizada e pode ser acessada tanto clicando-se no item do menu de mesmo nome ou ao clicar na logo da empresa contratante, presente no canto superior esquerdo do site.  Empresa - Esta página deverá conter as informações sobre a empresa, como histórico e localização.  Serviços - Nesta página consta a relação de serviços oferecidos pela Plena Assessoria em maiores detalhes.  Notícias - Aqui estarão disponíveis notícias e reportagens com exemplos de como conseguir melhorar as vendas e também sobre novidades das empresas representadas.  Parceiros - Neste local existe a relação das empresas parceiras da Plena Assessoria.  Contato - Onde o usuário poderá deixar sugestões, críticas ou solicitar alguma informação da Plena ou dos produtos que ela representa.

56

5.6 OTIMIZAÇÃO

Levando-se em consideração aspectos como a velocidade de carregamento (conforme explicado no tópico 5.1) e o fato do acesso de usuários ao site, por meio de dispositivos móveis e que comumente dispõe de uma conexão à internet mais limitada, faz-se necessário o uso de algumas técnicas para otimização do website, para que este torne-se “mais leve”. Conforme citado no tópico 5.1, foi utilizado o plugin W3 Total Cache, que faz uso da pasta “cache” para que o usuário não precise realizar o download, do conteúdo da página, cada vez que ele realize acesso a mesma. Para haver melhora na leitura dos códigos que compõe as páginas, por parte dos computadores e servidores, foi utilizada uma técnica denominada “minificação de código”, que consiste basicamente, na exclusão dos espaços em branco e quebras de linha “inúteis” nos arquivos de códigos. As próprias ferramentas para desenvolvimento de programação, em sua maioria, oferecem esta opção para que este trabalho não necessite ser realizado manualmente. A ferramenta aqui utilizada foi o Notepad++ (descrita no tópico 6.3). As imagens também podem ser otimizadas ajustando-se à sua resolução e formato, para que o tamanho de seu arquivo seja o menor possível. Algumas ferramentas, como o Adobe Photoshop (citado no tópico 3.2), oferecem opções de exportação das imagens de maneira otimizada para diminuir o tamanho de seu arquivo. No caso do Photoshop existe uma opção, localizada no painel: “File/Save for web” (FIGURA 31), que permite exportar as imagens selecionadas de forma otimizada para internet. Neste projeto, utilizou-se deste recurso para otimização das imagens do website.

57

FIGURA 31 - Ferramenta para otimização das imagens do Adobe Photoshop.

Também no tópico 5.1, é citado a ferramenta Google Pagespeed Insights, que foi utilizada no projeto com o objetivo de medir o desempenho das páginas do website, e certificar que os elementos estão suficientemente otimizados para que haja agilidade durante o carregamento das páginas do site.

5.7 REDAÇÃO

Uma ferramenta poderosa e importante na vida das pessoas é a da comunicação textual, os seres humanos trabalham com esse recurso o tempo todo, para se comunicar ou buscar informações nos mais variados canais em que se pode transmitir mensagens textuais. As pessoas se deparam com diversos textos informativos sejam eles atrativos ou relevantes, em propagandas, jornais, revistas, livros, e a maior vitrine desse recurso no ano de 2014 é a web. Todos esses meios arquitetam suas informações e fazem estudos sobre seus leitores. Aplicando então seus 58

conhecimentos e técnicas adquiridos em seus jobs59, tendo como objetivo alimentar a expectativa de entretenimento e levar conhecimento aos seus leitores. Na maior ferramenta de comunicação que é utilizada nos dias de hoje que é a internet, isso se dá por armazenar um imenso conteúdo de escala mundial. De acordo com FRANCO (2014), uma técnica utilizada em aplicações de textos, é a “Pirâmide Invertida”. Essa tese diz que, para chamar a atenção dos leitores para o texto, teriam que ser estruturados de forma que a informação principal vem em primeiro lugar, logo em seguida decorreria de forma decrescente de importância. Os textos com informações sobre a empresa, notícias, entre outros, foram estruturados dentro das páginas e entre elas, levando-se em consideração esta técnica. Para que as informações mais importantes fossem visualizadas primeiramente pelo usuário e depois as de menor relevância. Em 7 de março de 2014, o Ministro-chefe da Secretaria de Comunicação Social, Thomas Traumann, disponibilizou uma pesquisa feita sobre hábitos de consumo de mídia pela população brasileira, na qual os dados mostram que a internet é um veículo de comunicação que cresce gradativamente no Brasil. O internauta brasileiro fica conectado um bom tempo na internet, mais até do que na frente da televisão, na média de 3 horas e 39 minutos de uso. Essa pesquisa também relata a queda brusca da mídia impressa, 75% dos entrevistados afirmam que não tem mais o hábito de ler jornais; mostrando assim a mudança da mídia. Segundo RIBEIRO (1998) tipografia é definida como “a arte de produzir textos em tipos, isto é, caracteres. Ou ainda a arte de compor e imprimir em tipos”. Desde os tipos móveis até as telas da web, a tipografia atravessa os séculos com presença marcante entre os meios de comunicação, sendo um elemento de grande importância, sem o qual é praticamente impossível transmitir mensagens e trocar informações escritas. Sabendo a importância da tipografia nas telas web, serão utilizadas no site da Plena Assessoria fontes sans-serif, que por não conterem “serifas” facilitam a leitura do usuário. Optou-se pela utilização das fontes Verdana e Arial, por serem fontes padrões e já disponíveis nas máquinas. Dessa forma não forçará o usuário a baixar e instalar uma fonte.

59

Como pequenos trabalhos são chamados principalmente em agências de publicidade. 59

Aplicando as teorias acima citadas juntamente com os princípios de Gestalt, foi realizado um estudo de fontes para a logo da Plena (pode ser visualizado no tópico 4.5), atrelando alguns pontos estudados como similaridade e fechamento. Uma vez que na logo a fonte é convertida em imagem, não ouve a necessidade de utilizar uma fonte que existisse em todos os dispositivos.

5.8 NAVEGAÇÃO E MENUS

A navegação do site pode ser feita pelo menu ou por links internos que interligam páginas do mesmo. Foi definido para o website as seguintes páginas Home, Empresa, Serviços, Notícias, Parceiros, Contato. Sendo que elementos como o menu e rodapé com seus respectivos links se repetem em todas as páginas, assim o usuário tem acesso às essas informações a qualquer momento.

FIGURA 32 – Menu do website.

Legenda “FIGURA 32 - Menu”: 1) Logo da empresa, link para Home. 2) Menu principal, com links para as páginas Home, Empresa, Serviços, Notícias, Parceiros e Contato. O botão referente a página no menu se destaca de acordo com a página em que o usuário estiver, facilitando o usuário a se localizar.

FIGURA 33 – Rodapé do website.

Legenda “FIGURA 33 - Rodapé”: 3) Mapa do site que mostra onde o usuário está. 4) E-mail de contato ao clicar será levado a página contato. 5) Endereço do escritório, link para página contato e faz scroll até o mapa. 6) Redireciona o usuário para a página de dicas e orientações. 7) Seta para rolagem rápida ao topo da página. 60

FIGURA 34 - Home (página inicial) do website.

Legenda “FIGURA 34 - Home”: 8) Banner do tipo slide automático, setas laterais permitem a navegação para esquerda ou direita. 9) Submenu com ícones grandes, redirecionam para suas respectivas páginas.

61

FIGURA 35 - Página “Empresa”.

Legenda “FIGURA 35 - Empresa”: 10) Barra em destaque informa em que página o usuário está. 11) Texto e imagem que descritivas a respeito da empresa.

62

FIGURA 36 - Página “Serviços”.

Legenda “FIGURA 36 - Serviços”: 12) Submenu serviços separa os tipos de serviços prestados, cada um ao clicar leva a suas respectivas páginas.

63

FIGURA 37 – Página “Notícias”.

Legenda “FIGURA 37 - Notícias”: 13) Filtragem por categoria, permite ao usuário encontrar/visualizar conteúdos de acordo com sua procura. 14) Submenu notícias relaciona todas as notícias existentes para a categoria escolhida na filtragem, cada notícia com link a suas respectivas páginas.

64

FIGURA 38 - Notícias página modelo.

Legenda “FIGURA 38 - Notícias página modelo”: 15) Submenu do tipo galeria com notícias relacionadas, ao clicar a notícia atual mostrada é substituída pela escolhida. 16) Botão voltar, leva à página anterior.

65

FIGURA 39 – Página “Parceiros”.

Legenda “FIGURA 39 - Parceiros”: 17) Imagem do parceiro, ao clicar o usuário será redirecionado ao site/página na web do parceiro (caso parceiro possua alguma).

66

FIGURA 40 – Página “Contato”.

Legenda “FIGURA 40 - Contato”: 18) Formulário de contato elaborado para o usuário, ao preencher os campos corretamente e enviar o responsável da plena receberá um e-mail com as informações. 19) Mapa do endereço da empresa que possibilitará ao usuário navegar, dar zoom60, entre outras funções. Para estas funcionalidades, será utilizado o plugin, “Ready! Google Maps Plugin”.

60

Deixar a imagem com uma visualização maior. 67

6 TECNOLOGIA DE PROGRAMAÇÃO 6.1 JUSTIFICATIVA DA LINGUAGEM

As linguagens mais adequadas que atendem a proposta do projeto são as seguintes: HTML, CSS, PHP, Java Script, jQuery e o banco de dados será MySQL.

6.1.1 HTML

O Hiper Text Markup Language, traduzido para a língua portuguesa como linguagem para marcação de hipertexto, tem como funcionalidade cuidar da estruturação de documentos WEB, essa linguagem é gerada pelo servidor transmitindo aos navegadores do solicitante, onde é interpretada, essa ferramenta se renova ao longo de sua existência, a versão mais atual é HTML5. De acordo com o site W3C (2014) a linguagem de marcação HTML, tem como função descrever a estrutura das páginas web, dá aos designers recursos como: 

Publicação de documentos online.



Alteração de títulos, texto, tabelas, listas, fotos, etc.



Acrescentar nos documentos web, fotos, vídeos, sons e outras aplicações.



Obtém recurso de trabalhar com linguagens diversas que tornam os documentos web, mais dinâmicos, tais como: CSS, JavaScript, jQuery, PHP, ASP, etc.

FIGURA 41 - Sintaxe da linguagem de marcação HTML

68

6.1.2 CSS

A linguagem Cascading Style Sheet (CSS), traduzido para a língua portuguesa como folha de estilo em cascata, é um mecanismo simples que adiciona estilo a documentos web, possibilitando aos profissionais que trabalham com esse tipo de linguagem, tornar uma interface de um documento web mais agradável ao usuário. O site W3C (2014) diz que o CSS é uma linguagem independente, podendo ser utilizada em outras linguagens de marcação, ela permite manipulação das páginas web, podendo acrescentar cores, layout61 e fontes dos mais variados tipos, aumentando gradativamente o poder de criação de um designer62.

FIGURA 42 - Sintaxe da linguagem de marcação CSS.

6.1.3 PHP

O Personal Home Page (PHP) é um código aberto que foi criado em 1995 por Rasmus Lerdorf, essa linguagem passou por várias reformulações ao longo de sua existência, hoje ela possibilita a construção de sites dinâmicos, é uma ferramenta usada também para sincronizar formulários de sites com o banco de dados, o PHP agiliza o carregamento de páginas web e exibe somente HTML puro das páginas para o usuário, tornando-se compatível com todos os Browsers63.

61

A parte visual de um projeto com suas respectivas formas e cores. Profissional da área de criação visual. 63 Programas para navegar na internet. 62

69

De acordo com o site PHP.net (2014), o PHP Tools, concedia ao usuário a opção de gerar interações com o Banco de Dados e gerar aplicações web, os usuários também podiam corrigir bugs64 no código e aperfeiçoá-lo.

FIGURA 43 - Sintaxe da linguagem de programação PHP.

6.1.4 JavaScript

De acordo com o site w3schools.com (2014), o JavaScript é uma linguagem usada para construção de sites dinâmicos, seu código é escrito diretamente no HTML, proporcionando melhorias nas páginas web, um recurso criado por John Resig que agiliza e torna muito mais prático o uso dessa técnica, é a biblioteca de códigos JavaScript, que chama-se jQuery, um estilo inovador e atraente de programar que simplifica o que é mais complicado na referida linguagem.

FIGURA 44 - Sintaxe da linguagem de programação JavaScript.

64

Erro de funcionamento. 70

6.1.5 SQL O SGBD65 é um sistema de gerenciamento de banco de dados, sua função é armazenar dados de maneira estruturada, possibilitando que seus dados estejam a disposição do usuário no caso de uma consulta ou requisição. Tem como seus inventores dois suecos e um finlandês: David Axmark, Allan Larson e Michael Widenius. A Structured Query Language ou na língua portuguesa “Linguagem de consulta estruturada”, e mais conhecida como SQL Neste projeto será utilizado o MySQL, que é gratuito e tem grande compatibilidade com o PHP, que é a linguagem utilizada para desenvolvimento do website O site Oficina da net (2010) relata algumas empresas que se beneficiam e utilizam o banco de dados MySQL. Algumas delas são: NASA, Banco Bradesco, HP, NOKIA, Sony, entre outras.

FIGURA 45 - Linguagem de banco de dados utilizada no MySQL (Parte grifada).

65

Sistema de Gerenciamento de Banco de Dados. 71

6.1.6 Bootstrap

Com ideias como padronização, código aberto e agilidade de criação de conteúdo, em 2011 o Bootstrap foi desenvolvido por Mark Otto e Jacob Thorton, ambos engenheiros do Twitter66. Bootstrap, segundo matéria publicada no site PrestaShop (2014) é um software livre com combinações de HTML, CSS e JavaScript (por meio da biblioteca jQuery), que contém várias funções pré-definidas agilizando na criação. Também obtém atualizações constantemente por vários desenvolvedores, com uma grande gama de recursos. A utilização baseia-se em um “quebra-cabeça” onde suas funções encaixam entre si, de forma que não ocasionam conflito entre elas. Por este motivo, tornou-se uma estrutura muito popular no desenvolvimento Front-end67.

FIGURA 46 – Botões e tabelas usando estilos Bootstrap (Fonte: Bootstrap).

66 67

Rede social para compartilhamento de mensagens curtas. Parte do website que é vista pelo usuário. 72

6.2 CÓDIGOS Todos os códigos serão entregues em CD-ROM68 junto a monografia ao término deste trabalho.

6.3 FERRAMENTAS USADAS PARA PROGRAMAÇÃO

6.3.1 phpMyAdmin

É um aplicativo que funciona a partir do navegador de internet e proporciona a capacidade de interagir com o banco de dados diretamente, de acordo com matéria publicada no site Codex (2014) pode-se ter dimensão das vantagens obtidas ao usar o software phpMyAdmin, possibilita alterações diretamente no banco de dados, agiliza na administração de tabelas, contém suporte para linguagem SQL e também PHP, que fará a ligação do banco de dados com o site. Sua aplicação no projeto junto ao PHP, se dá ao fato dele executar a função que possibilita uma obtenção de dados adquiridos por um formulário na web, esses dados adquiridos do formulário são armazenados em seu banco de dados, constituído por tabelas para melhor organização do conteúdo.

68

Compact Disc, sistema de armazenamento de dados. 73

FIGURA 47 - Página do phpMyAdmin.

6.3.2 WordPress

O WordPress é uma plataforma CMS, ou seja, um sistema de gerenciamento de conteúdo que tem por finalidade facilitar o gerenciamento e a customização sem que o usuário precise saber programar. Ela auxilia na construção de blogs ou sites, possibilita uma customização total, dando aos criadores de sites liberdade para arquitetarem seus projetos, baseados em padrões web e de usabilidade. De acordo com o site da organização WordPress (2014), o software foi construído usando como base PHP E MySQL, e com o propósito de ser um sistema elegante, diferente, baseado em experiência do usuário e respeitando padrões web.

Entre outras funcionalidades do Wordpress, algumas são:  criar páginas dinâmicas;  personalizar páginas de maneira rápida e fácil;  criar e gerenciar posts69;  agendar posts, para que o administrador possa realizar atualizações no site sem estar presente no dia em que desejar deixar o conteúdo visível para os visitantes;

69

Postagens que são feitas no site, com informações e notícias. 74

 criar e gerenciar temas;  utilizar temas prontos, podendo ser gratuitos ou pagos;  incluir vídeos e outras mídias de modo facilitado;  utilizar plugins70.

Exemplo de como escolher um tema: 1. Fazer login71 no WordPress; 2. No menu lateral, encontrar a opção “Aparência”, em seguida opção “Temas”; 3. Escolher o tema; 4. Ativar o tema, clicando no botão correspondente; 5. Para ter acesso a documentação completa do serviço, esta encontra-se disponível em: .

FIGURA 48 - Painel de escolha de temas do WordPress.

70

Pequenos programas com funções que desempenham tarefas específicas e facilitam a geração e gerenciamento de conteúdo. 71 É utilizado para acesso restrito em alguns sites ou serviços. Geralmente é realizado usando um nome de usuário e senha. 75

Exemplo de como realizar uma nova postagem: 1. Fazer login72 no WordPress; 2. No menu lateral, encontrar a opção “Posts”, em seguida opção “Adicionar novo”; 3. Digitar um título para a postagem no campo correspondente; 4. Se desejar incluir algum vídeo ou imagem à postagem, clicar em “Add media”, depois em “Upload Files”, então buscar o arquivo que se deseja; 5. Escrever o texto e formatá-lo com o editor da própria ferramenta; 6. Selecionar uma categoria na aba lateral (direita) para que o post seja encontrado pelo usuário na referida estrutura; 7. Para facilitar a pesquisa do usuário por palavras-chave, alguns termos relacionados podem ser incluídos na aba lateral (direita) “Tags”, separando cada termo por vírgulas. 8. Então, clicar no botão “Publicar”, para que o conteúdo seja visível aos usuários.

FIGURA 49 - Página de inclusão de novo post no WordPress. 72

É utilizado para acesso restrito em alguns sites ou serviços. Geralmente é realizado usando um nome de usuário e senha. 76

6.3.3 XAMPP

O XAMPP fornece um servidor local para teste sem complicações, trazendo com ele os servidores MySQL, Apache73, pode trabalhar com linguagens como PHP e Perl74, se torna ainda mais completa por rodar sistemas como WordPress e Drupal75, de acordo com publicação no site Apache Friends (2014), o XAMPP foi projetado para tornar ágil sua instalação e utilização, as vantagens de usá-lo, se dá ao fato dele ser gratuito, e trazer com sigo servidor MySQL, servidor PHP e Perl, e pode ser executado também em computadores com sistemas operacionais diferentes do Linux76. O projeto precisará de seus recursos para utilização de um servidor local, para criação, simulações e alterações do site e banco de dados; também será fundamental para interpretação da linguagem de programação PHP e a plataforma WordPress.

FIGURA 50 - Janela de inicialização do XAMPP.

73

Servidor HTTP. É uma linguagem de programação especialmente desenvolvida para processamento de textos. 75 Cria sites de comercio eletrônico, ferramenta CMS. 76 Sistema operacional de código aberto e de distribuição gratuita. 74

77

6.3.4 Notepad++

Para edição dos códigos utilizados para estruturar o website, foi utilizado o programa Notepad++. Este é um programa gratuito e pequeno, mas com ótimas funcionalidades como suporte para uma grande variedade de linguagens, principalmente as utilizadas no projeto (citadas no tópico 6.1). No site do distribuidor, Notepad++ (2014), é relatado que esta ferramenta foi construída com base na linguagem de programação C++, que por sua vez, é muito poderosa, podendo-se construir sistemas inteiros com o uso da mesma, o que é muito comum atualmente.

FIGURA 51 - Painel do Notepad++ com código sendo editado.

6.4 DIAGRAMA DE BANCO DE DADOS O diagrama do banco de dados exibe as tabelas e todos os campos contidos no mesmo. O diagrama do banco deste projeto, é baseado no diagrama padrão do WordPress. Além destas tabelas, existem as tabelas de plugins, utilizados no projeto, e estas são de administração dos mesmos, portanto, não necessitando a intervenção dos administradores e da equipe de desenvolvimento deste projeto, para o seu correto funcionamento. Pois ao aplicar um plugin, o mesmo realiza a instalação das tabelas no banco de dados de forma automatizada.

78

Na entrega final em CD-ROM77, contendo todos os arquivos de desenvolvimento deste projeto, será entregue também, cópia dos diagramas (FIGURAS 52 e 53), em alta qualidade, para que todo o esquema, possa ser visualizado com maior definição. Para gerar os diagramas em questão, foi utilizada a ferramenta gratuita: “MySQL Workbench78”. Esta, permite que, se importe o banco de dados, o qual se deseja diagramar, exibindo as tabelas e campos contidos neste.

FIGURA 52 - Diagrama com as tabelas utilizadas pelos plugins. 77 78

Unidade de armazenamento utilizada para guardar arquivos, músicas e vídeos. É um programa gratuito para mapeamento e gerenciamento de estruturas de bancos de dados. 79

FIGURA 53 - Diagrama do banco de dados com as tabelas do WordPress. 80

7 AÇÕES PROMOCIONAIS 7.1 ESTRATÉGIAS DE PROMOÇÃO De acordo com SAAD (2003), definir o que é estratégia relacionado ao campo da administração, é algo complicado, pois é um processo de percepção empresarial totalmente vinculado ao ambiente, ao momento e às pessoas. Ainda segundo a autora, a palavra tem origem na Grécia Antiga com a expressão “strategos”, que designava algum magistrado ou comandante-chefe militar. Até a primeira metade do século XIX, este termo ainda era utilizado vinculado a guerras e ao campo de batalhas. Porém com a consolidação da Segunda Revolução Industrial79, a partir do início do século XX, a expressão começou a ser associada também ao contexto dos negócios. E a partir dos anos 1970, tornou-se um processo-chave para o processo de gestão empresarial. Por sua vez, o conceito de “promoção”, segundo ANDRADE (2010), vem de “promover”, o que dentro do conceito dos 4Ps80, tem o significado de promover a venda ou visibilidade no mercado, de um produto ou serviço. Desta forma, estratégia de promoção, trata do planejamento e da forma como uma empresa deve se comportar para melhor promover e divulgar seus produtos ou serviços (em alguns casos ambos) por meio da comunicação com seu público-alvo. Para a elaboração destas estratégias, foi realizado encontro do representante da equipe com os proprietários da empresa Plena Assessoria Ltda, com o objetivo de reunir o máximo de informações sobre o mesmo e o mercado em que atua, elaborando assim o briefing deste projeto. Por meio desta entrevista, os proprietários informaram que a Plena é uma empresa de abrangência nacional, mas que o foco no momento é a região Sul do Brasil. Os serviços oferecidos pela empresa são: representação comercial, consultoria comercial, treinamentos e terceirização do setor de vendas. Por ser relativamente nova no mercado (fundada em 2013), a Plena tem como representada atualmente, uma empresa do ramo de agronegócios e o principal produto comercializado por meio desta representação são cercas elétricas para proteção de propriedades.

79

Fato histórico que trouxe grandes mudanças no aspecto tecnológico industrial. O início do uso da energia elétrica como fonte de energia na indústria foi um exemplo dessas mudanças. 80 Conceito de marketing, que indica produto, preço, praça e promoção. 81

Atualmente o público-alvo são industrias e comércio voltado ao agronegócio, porém por ser uma empresa de representações e consultoria, o público-alvo pode e deve mudar de acordo com os ramos de atividades das empresas que a plena passar a representar no futuro. Pelo fato da Plena ser uma empresa jovem, ainda não foram feitos materiais de divulgação, o que aponta como um ponto negativo em relação aos concorrentes da mesma, uma vez que todos os analisados possuem identidade visual e website. Porém um fato encontrado ao analisar os sites das empresas concorrentes, é que os mesmos estão defasados em relação aos padrões atuais de acesso à internet, uma vez que nenhum deles era responsivo, o que tem grande importância atualmente, devido ao fato do grande número de pessoas que utilizam de dispositivos móveis para acesso à internet. Desta forma, ter um website que seja adaptável às telas menores, será um diferencial para a Plena. Em vista destes dados, foi realizado um planejamento de comunicação para melhor posicionar e dar visibilidade maior para a empresa contratante em seu mercado de atuação, o qual será melhor explanado nos próximos tópicos deste projeto.

7.2 PUBLICIDADE Publicidade é uma técnica de comunicação em massa, tem a finalidade de fornecer informações sobre produtos ou serviços para fins comerciais. É um importante meio de comunicação que tem o propósito de condicionar a mesma ao ato da compra. Como o objetivo de toda empresa é vender seus produtos e serviços, quanto mais conhecida, melhor. É difícil alcançar esse objetivo sem algum tipo de divulgação, portanto, para divulgar a marca da Plena Assessoria consiste a criação do website. Conforme mencionado no item 7.5, foi realizada uma pesquisa quantitativa por meio de questionário enviado ao público em geral, com o objetivo de averiguar se é realmente relevante que uma empresa possua um website, e também verificar quais são os materiais de comunicação que as pessoas costumam consultar no momento em que necessitam adquirir, contratar ou pesquisar sobre algum produto ou serviço. A pesquisa apontou que 50% das pessoas preferem comprar pela internet e 90% marcaram “página na internet” como material de comunicação que costuma consultar 82

no momento em que necessita comprar algo. Esses resultados confirmam a real importância de uma empresa obter um site. No mesmo, serão utilizadas algumas técnicas de otimização para alcançar um bom posicionamento nos mecanismos de pesquisa, conforme mencionado no item 7.4.

FIGURA 54 - Página inicial do site.

Ao acessar o site, o usuário facilmente saberá o que a Plena oferece, através da página inicial. Nela conterá um breve resumo sobre a história da empresa, informações sobre os serviços prestados, notícias do setor e quais os parceiros da empresa. A intenção é fazer com que os usuários rapidamente identifiquem o que a Plena Assessoria oferece. Além disso, terá o campo “Assine e receba nossas notícias”, nele os usuários vão inserir os seus nomes e e-mails para receberem notícias da Plena. Assim haverá uma interação com o público assinante (FIGURA 54).

83

Outra ferramenta importante empregada para promover a comunicação entre a Plena e o seu público, é a fanpage81, criada no Facebook. Foi escolhida esta rede social pois, segundo matéria publicada no site Olhar Digital (2014), o Facebook é a rede social mais acessada no Brasil. KOTLER (2011), também faz menção às redes sociais como uma poderosa ferramenta de comunicação para as empresas. Neste projeto, a fanpage, terá o papel de aproximar a Plena ao seu público. Assim como o objetivo de divulgar as parcerias existentes e as futuras que a empresa venha a negociar. Cada vez que a Plena fechar uma nova parceria, os dados desta nova parceira, serão disponibilizados aos usuários como forma de divulgação da mesma, aumentando assim a visibilidade da mesma em ambiente virtual. Também será um meio onde serão divulgadas as linhas de produtos das empresas representadas pela Plena e que servirá para promover um reengajamento entre a Plena e suas representadas juntamente aos seus potenciais clientes compradores. Uma vez que as redes sociais são um meio de fácil acesso para que clientes e usuários venham a deixar comentários e opiniões, esclarecer dúvidas e saber das novidades a respeito da empresa e seus parceiros.

81

É uma página criada por empresas, organizações ou pessoas físicas, para fins comerciais ou não, dentro de redes sociais, como o Facebook. 84

FIGURA 55 - Fanpage na rede social Facebook.

7.3 PROMOÇÃO DE MARKETING Promoção de marketing compreende as atividades que envolvem a divulgação da marca, da empresa, ou dos produtos e serviços. Existem vários tipos de promoção, no qual para a Plena foram desenvolvidos alguns materiais impressos como cartão de visita e catálogo, assim como um modelo de camiseta para ser oferecida como brinde para os clientes da empresa. Além disso, foi feita a plotagem do veículo Saveiro. Os materiais impressos e a plotagem seguem no mesmo padrão do website, no que diz respeito a ser objetivo, direto e em questão das cores utilizadas, para que a identidade visual da marca seja transmitida de forma marcante. Na parte da frente do cartão de visitas contém a logo da Plena, o slogan82 e o endereço do site. Na parte de trás foi empregado informações de contato, que no caso o cartão é para quem já conhece pelo menos um pouco da empresa e se por ventura, precise entrar em contato, tenha em mãos o cartão com as informações. Também foi 82

É uma palavra ou frase curta para fácil memorização, comumente utilizada para fins de propaganda comercial. 85

empregado o uso de QR Code83, para acesso via dispositivos móveis com câmera e aplicativo apropriado instalado, assim o usuário, ao apontar a câmera do seu smartphone, para a figura (que é um quadrado composto por pequenas formas em preto e branco), é redirecionado ao website da Plena (FIGURA 56).

FIGURA 56 - Modelo do cartão de visitas.

No catálogo além de conter as mesmas informações que constam no cartão de visitas, estão inseridas também, informações dos serviços prestados pela empresa. A principal função do catálogo é para quem ainda não conhece a empresa, tenha conhecimento do que a mesma oferece e veja o detalhamento de cada serviço prestado (FIGURA 57). Desta forma, o público-alvo para qual o catálogo foi desenvolvido, são as empresas que buscam pelos serviços que a Plena tem a oferecer, como: representação, assessoria, treinamento e terceirização do setor de vendas.

83

Funciona como um código de barras, que por meio da câmera de um celular com aplicativo necessário instalado, redireciona o acesso a páginas e vídeos na internet. 86

FIGURA 57 - Catálogo contendo a relação de serviços oferecidos pela Plena.

A camiseta deverá servir de brinde para que a Plena possa dar aos seus clientes e parceiros. Para o desenvolvimento da mesma foi pensado em algo discreto e que destacasse bem o logo, assim como alguma informação de como entrar em contato com a empresa de maneira fácil e rápido. Por este motivo foi colocado o QR Code, também presente no cartão de visitas. Conforme explanado anteriormente, com este item o usuário consegue acessar de maneira bastante ágil o site da empresa. Também foi escolhido o QR Code, pelo fato dele transmitir certo grau de sofisticação e modernidade à empresa, que por meio de uma camiseta (FIGURA 58) e sem dizer uma palavra, pode levar o usuário a acessar sua página na internet. Conforme dito anteriormente, o website será otimizado também para acesso via smartphones.

87

FIGURA 58 - Modelo de camiseta promocional.

A plotagem do veículo Saveiro foi baseada no mesmo padrão visual do site e dos materiais impressos, contendo a logo da empresa juntamente com o slogan. No veículo também contém um gráfico, que transmite a ideia de crescimento, pois a Plena oferece serviços de como melhorar as vendas fazendo com que os seus clientes cresçam em volume de vendas (FIGURAS 59 e 60).

88

FIGURA 59 - Lateral do veículo identificado da empresa.

FIGURA 60 – Visão frontal e traseira do veículo identificado da empresa.

89

Foi criado também uma conta no Adwords84, com uma campanha já formatada para aparecer no resultado pago (links patrocinados) do Google. Por exemplo, quando um usuário digitar na busca do Google: “como vender mais”, poderá aparecer o link para o website da Plena, juntamente com uma “chamada” para atrair o internauta, buscando fazer com que o mesmo clique e acesse a página. Dessa forma, com o site tendo cliques através do resultado pago, automaticamente irá

ganhando

posicionamento no resultado orgânico (FIGURA 61).

FIGURA 61 - Áreas de busca (Fonte: Manual de otimização do Google).

A campanha ficou em pausa e será liberada quando o site estiver no ar, e assim fazer fluir os acessos ao mesmo (FIGURA 62).

84

É um serviço da Google que consiste em anúncios em forma de links encontrados principalmente nos sites de busca relacionados às palavras-chave que o internauta está procurando no motor de busca da página. 90

FIGURA 62 - Página no AdWords do Google.

Para que a Plena consiga ver quantas sessões possui em seu site, quantas visualizações de página, duração média da sessão, entre outras informações, foi criado uma conta no painel do Analytics85, que também já foi confirmado na tela “Site em construção”. Por meio do painel, podem ser tirados relatórios das regiões mais acessadas, de qual dispositivo foi mais acessado, e com isso definir estratégias para conseguir clientes e melhorar seu website (FIGURA 63).

85

Ferramenta de análise digital avançada para qualquer pessoa ou empresa com presença na web, seja grande ou pequena. Ele é uma das mais eficientes soluções de análise digital disponíveis e é gratuito para qualquer um usar. 91

FIGURA 63 - Página com informações do Google Analytics.

7.4 OTIMIZAÇÃO PARA BUSCADORES A otimização do site para sistemas de busca na internet é essencial, pois aparecer na primeira página do Google, que é o site de buscas mais utilizado pelos internautas, ou até mesmo nas primeiras posições no resultado da busca, consequentemente aumentará o número de visitas, tornando-o mais conhecido e com possibilidade de adquirir novos clientes potenciais. O site Terra (2014), publicou uma notícia que diz “Para que sua loja virtual ganhe ainda mais visibilidade no mercado digital, é importante investir em estratégias eficazes que potencializem e melhorem o posicionamento de sua página nos resultados que aparecem em sites de busca”. Esse conceito está ligado à famosa sigla SEO – Search Engine Optimization, que nada mais é do que “otimização para mecanismos de buscas” ou “otimização de sites”. No manual do Google (2014), “Otimização de sites para Mecanismos de Pesquisa (SEO) – Guia do Google para iniciantes”, diz que a otimização para mecanismos de pesquisa pode, muitas vezes se resumir a pequenas modificações em partes do website. Quando vistas isoladamente, essas mudanças podem parecer como uma pequena melhoria, mas quando combinadas com outras otimizações,

92

podem representar um impacto significativo na experiência do usuário e no desempenho nos resultados de pesquisa orgânica. Sabendo a importância da otimização, o site será otimizado de acordo com alguns padrões básicos do guia do Google, acima citado. Neste projeto foram utilizadas as seguintes técnicas no website da Plena Assessoria:  título único e preciso para cada página (FIGURA 64): estes são utilizados pelos mecanismos de busca para encontrar os conteúdos relacionados às pesquisas;

FIGURA 64 - Título da página.

 uso da meta tag de descrição (FIGURA 65): este conteúdo também é utilizado pelos mecanismos de busca na procura de assuntos relacionados. Estas informações também são exibidas aos usuários no retorno do resultado às pesquisas realizadas pelos mesmos.

FIGURA 65 - Tag de descrição do conteúdo da página.

 URLs fáceis e simpáticas (FIGURA 66): Além de facilitar o reconhecimento do conteúdo por parte do usuário, esta técnica também contribui para uma melhor indexação do conteúdo nos serviços de pesquisa;

FIGURA 66 - URL amigável da página de notícias.

 navegação estrutural: de acordo com MEMORIA (2014), a navegação age “possibilitando que as pessoas tenham controle sobre sua localização, possam pular etapas e tenham uma visualização da forma como a informação está estruturada no website”. Desta forma ela serve para facilitar a navegação do 93

usuário, deixando-a mais ágil. Além de contribuir para que o mesmo compreenda como as informações estão estruturadas dentro do site, também auxiliando os mecanismos de busca. Para aplicação deste conceito no projeto, foi aplicado o recurso de breadcrumbs (FIGURA 67), que é uma área que exibe o caminho percorrido pelo usuário dentro do website, podendo este voltar às áreas anteriores, clicando no nome da área exibido neste caminho;

FIGURA 67 - Navegação estrutural do website.

 página de erro 404 útil: caso o usuário, por algum motivo, seja redirecionado para alguma área inexistente dentro do site, é necessário que exista uma página padrão que seja exibida a ele neste momento. Nesta página é importante que conste mensagem indicando a ele sobre este erro (que a página procurada não existe), que tenha um link, que o redirecione para a página principal e um campo de pesquisa, caso ele queira buscar novamente, por algo específico dentro do website;  uso adequado de tags86 de cabeçalho: os sites de busca, como o do Google, utilizam deste conteúdo para buscar por palavras-chave dentro dos websites. Desta forma, seu uso contribui para que o site, seja melhor posicionado nas pesquisas relacionadas ao seu conteúdo.  inserção do atributo “alt” nas imagens (FIGURA 68): este atributo funciona como uma descrição das imagens, que também são lidos pelos mecanismos de busca.

FIGURA 68 - Uso do atributo "alt" nas imagens.

86

Palavras-chave utilizadas por mecanismos de busca na procura de conteúdo. 94

As técnicas utilizadas foram de acordo com o manual “Otimização de sites para Mecanismos de Pesquisa (SEO) - Guia do Google para iniciantes” (2014). 7.5 PESQUISA DE MERCADO

Para que uma empresa consiga atingir e comunicar-se com seu público, faz-se necessário a elaboração de um planejamento de comunicação, pois é por meio deste que é possível elucidar a real intensão da empresa anunciante e identificar qual público, esta pretende atingir, pois de acordo com KOTLER et al (2011), as empresas devem colaborar com seus clientes, e para tanto, faz-se necessário conhecer o público, e para isso é preciso estuda-lo e saber o que ele deseja e necessita. Para auxiliar na realização desta tarefa, existem as pesquisas. Segundo KOTLER e KELLER (2006): “Para a coleta de dados primários, os pesquisadores de marketing dispõem de três importantes instrumentos de pesquisa: questionários, pesquisa qualitativa e instrumentos mecânicos.” Dados primários, são os dados coletados diretamente com o público, por meio dos instrumentos citados acima. Dados secundários, por sua vez, são as informações obtidas por meio de pesquisas que foram realizadas anteriormente e podem ser reaproveitadas, pois tratam do mesmo assunto ou quesitos, ao que se faz necessário a apuração neste momento. A respeito dos instrumentos de pesquisa citados por KOTLER e KELLER (2006), para a coleta de dados primários, os autores apresentam as seguintes definições:  Questionários: Consiste em um conjunto de perguntas que são feitas aos entrevistados. As perguntas podem ser fechadas, ou seja, com alternativas predefinidas para que o entrevistado marque a opção que melhor traduz sua opinião; ou abertas, que significa que os campos de resposta são livres para que o entrevistado descreva sua opinião a respeito do assunto com suas próprias palavras e de acordo com seus pensamentos;  Pesquisa qualitativa: São formas de questões que permitem possibilidades de resposta bastante vastas. São meios criativos de acompanhar e identificar as reações dos participantes, e que de outras formas, seriam difíceis de identificar, pois nem sempre as ações correspondem a respostas que um entrevistado daria ao participar de um questionário. Dois exemplos, das técnicas deste instrumento de pesquisa são a observação das pessoas utilizando determinado produto e as 95

análises narrativas, em que os consumidores são motivados a contar suas experiências de consumo com o produto ou serviço em questão.  Instrumentos mecânicos: São equipamentos que mensuram determinadas características apresentadas pelos consumidores ao entrar em contato com determinado anuncio ou imagem, como por exemplo o Galvanômetro, que mede o interesse ou as emoções do consumidor, quando este tem contato com determinado material de comunicação. O audimetro (que serve para medir quando um equipamento de televisão está ligado e qual canal está sintonizado) também é um exemplo de instrumento mecânico utilizado em pesquisas. Para aplicação neste projeto, foi determinado como instrumento de pesquisa, o questionário, por ser a forma mais utilizada e flexível de coleta de dados. Portanto, foi realizado uma pesquisa quantitativa87 por meio de questionário enviado ao público em geral, uma vez que a Plena é uma empresa de representações, assessoria e consultoria e seu público primário e secundário, pode variar de acordo com as representações que esta possuir. A participação dos entrevistados, deu-se por meio da internet, por ser este o meio que melhor se aplica a pesquisa em relação ao seu objetivo principal, que é o de averiguar se é realmente relevante que uma empresa possua um website, além de verificar quais são os materiais de comunicação que as pessoas costumam consultar no momento em que necessitam adquirir, contratar ou pesquisar sobre algum produto ou serviço. O modelo do formulário utilizado nesta pesquisa encontra-se no final deste trabalho (Apêndice A). Com a participação de 137 pessoas, os resultados da pesquisa são os seguintes:  99% - Possui acesso à internet em casa, na escola ou local de trabalho;  61% - Costuma realizar compras pela internet até uma vez por mês;  50% - Prefere comprar pela internet;  49% - Costumam comprar pela internet por encontrarem preços melhores em comparação a lojas físicas;  12% - Dos que costumam comprar em lojas físicas, afirmam não ter confiança em comprar pela internet;  62% - Costuma passar 4 horas ou mais conectado à internet durante o dia;

87

Que mede a quantidade de pessoas que optam por determinados modos ou preferências. 96

 90% - Marcaram “página na internet” como material de comunicação que costuma consultar no momento em que necessita comprar algo;  61% - Marcaram que é importante constar o endereço da empresa no site da mesma.  55% - Dos participantes é do sexo masculino;  74% - Das pessoas que informaram a idade, tem entre 25 e 65 anos; Desta forma, pode-se perceber que é realmente importante que uma empresa possua um website, pois mesmo que nesta pesquisa, as respostas apontem que 50% das pessoas entrevistadas prefiram realizar as compras em lojas físicas e 12% apontem que não costumam comprar pela internet por não confiar neste meio, 90% costuma consultar a internet, quando necessita comprar algo, o que permite observar que mesmo que não comprem por este meio, a grande maioria das pessoas que participaram da pesquisa, costumam consultar e buscar informações sobre lojas e produtos por meio da internet. Assim sendo, ainda mais importante que disponibilizar os produtos para venda diretamente pela internet, é disponibilizar a empresa e seus produtos e serviços para que estes possam ser consultados neste meio, pois mesmo quem não realiza compras diretamente neste ambiente, o utiliza para buscar e consultar produtos e serviços para depois realizar sua contratação ou aquisição por telefone ou pessoalmente. As estatísticas completas do resultado da pesquisa encontram-se ao final deste trabalho (Apêndice B).

97

8 PROPOSTA DE MANUTENÇÃO DO WEBSITE 8.1 PROJEÇÃO DE MANUTENÇÃO DO PRODUTO

Sendo aprovado o website, principal proposta de desenvolvimento deste projeto, será realizado treinamento presencial com os responsáveis pela atualização e postagem de conteúdos no mesmo. Este treinamento será adaptado ao grau de conhecimento de computação do cliente e terá o objetivo de ensinar as ferramentas administrativas do site, por meio do WordPress. Em virtude disso, foi utilizado no projeto, a ferramenta gratuita Google Analytics (descrita no tópico 7.3), que monitora todas as visitas realizadas no site e regiões percorridas dentro

dele.

Ao

adquirir

estes dados dos usuários,

gera-se

automaticamente gráficos, a respeito dos acessos e navegações realizadas por visitantes, dando ao administrator informações importantes do andamento de seu produto, podendo assim atacar e otimizar suas áreas mais críticas, de acordo com estas estatísticas. O treinamento proposto, contemplará também o uso desta ferramenta para fins de monitoramento, por parte da empresa. O projeto foi elaborado na plataforma WordPress, que possibilita vários tipos de alterações e cadastros de novas notícias e informações, no momento do cadastro ou de forma agendada, tornando a tarefa de atualização do site mais fácil e versátil, planejando o custo benefício e a otimização do tempo necessário para a manutenção das informações do mesmo, atendendo assim, aos requisitos do projeto. Foi realizado um contrato com a empresa de hospedagem UOL Host88, onde o custo será de R$ 214,80 anuais onde o primeiro ano de domínio é grátis. O treinamento presencial e suporte por 30 dias (conforme será explanado no tópico 8.2), serão oferecidos gratuitamente, como parte do projeto. 8.2 CRONOGRAMA Além dos serviços de manutenção descritos no tópico anterior, a Plena Assessoria terá suporte por parte de toda da equipe de desenvolvimento deste projeto pelo prazo de 30 dias, a partir da data de entrega do website completo.

88

Hospedagem de sites. 98

O site e os arquivos dos demais materiais de comunicação, deverão ser entregues até o dia 15 de dezembro de 2014, e se possível antes, dependendo da disponibilidade dos mesmos. Ocorrendo desta forma, o encerramento do suporte para manutenção, por parte da equipe, dar-se à em 14 de janeiro de 2015.

99

9 DOCUMENTAÇÃO TÉCNICA A documentação final do website conterá um CD-ROM, onde constará os códigos e toda estrutura do website assim como a cópia em formato PDF deste trabalho escrito, e os arquivos dos demais materiais de comunicação produzidos neste projeto. A entrega deste disco será realizada juntamente com a finalização do projeto. O site, foi desenvolvido visando o acesso do mesmo por meio de vários dispositivos e navegadores. Os navegadores testados e que portanto, o website, oferece suporte são os seguintes:  Microsoft Internet Explorer 9;  Google Chrome 21;  Mozilla Firefox 3.5;  Apple Safari 6;  Opera 9;  Dispositivos móveis (celulares e tablets) com Sistema operacional Google Android, Apple IOS ou Microsoft Windows Phone, com acesso à internet e um dos navegadores citados acima em versão móvel instalados.

Versões mais novas dos navegadores citados também possuem suporte, assim como suas respectivas versões para dispositivos móveis. As versões dos navegadores devem oferecer suporte ao HTML5 e ao CSS3, por serem as linguagens utilizadas na construção do website. Portanto, outros navegadores com suporte às estas linguagens, também devem acessar às páginas do site da Plena de maneira correta. Plugins O Coming Soon que pode ser usado com qualquer tema WordPress e serve como página de aviso que o site acessado está em construção ou manutenção, foi utilizado neste projeto para, caso algum usuário acesse a página da empresa, que ainda estava em desenvolvimento, já possa ter acesso às principais informações de contato da mesma, como endereço, telefone e link para a fanpage. Uma outra funcionalidade utilizada nesta página, é o cadastro da pessoa, caso ela assim desejar, para que ela seja informada quando o site estiver finalizado. Também os 100

desenvolvedores puderam tirar proveito da possibilidade de trabalhar online, ou seja, diretamente no servidor de hospedagem do site, sem que os internautas vejam as alterações feitas, por meio da utilização deste plugin.

FIGURA 69 - Página "em construção" gerada por meio do plugin "Coming soon".

101

10 CONSIDERAÇÕES FINAIS

O objetivo deste projeto foi a inserção da Plena Assessoria em ambiente online, que atualmente, figura como um dos meios de comunicação mais importantes para o meio empresarial. Por este motivo foi criado um website para a empresa contratante, pois a mesma, ainda não possuía um até o momento, o que a deixava com pouca visibilidade por parte de seu público-alvo e consequentemente tornava-a menos competitiva no mercado. Devido a empresa ainda ser nova, a mesma não possuía uma identidade visual, assim, este projeto comtemplou também o desenvolvimento do logotipo, e além do website, o desenvolvimento de outros materiais de comunicação. O estudo realizado necessitou de total engajamento, tanto dos orientadores e alunos, assim como dos empresários também, que se envolveram com o planejamento como um todo, compartilhando seus conhecimentos para facilitar o entendimento do mercado atuante. O grupo em comum acordo com os empresários, puderam perceber o potencial benéfico e em constante expansão do ambiente virtual e da importância de se ter uma identidade visual definida, o que é comprovado com os estudos e pesquisas realizadas durante o desenvolvimento deste projeto. O desenvolvimento do website para a empresa Plena Assessoria, teve como base os princípios de usabilidade, teoria das cores, gestalt, teoria da comunicação, semiótica e conhecimentos adquiridos e aperfeiçoados pelos orientadores e professores durante o desenvolvimento deste projeto e no percorrer do curso. Estes conhecimentos tiveram importância não só para a realização das ações e estudos relatados neste trabalho, mas também para vida profissional e acadêmica de todos os envolvidos neste trabalho.

102

REFERÊNCIAS

Adobe Systems (2014). Disponível em: (acesso em 10 nov. 2014)

ANDRADE, Carlos Frederido de. MARKETING O que é? Quem faz? Quais as tendências?. 2. ed. Curitiba: Editora IBPEX, 2010.

Apache Friends (2014). XAMPP, Servidor local. Disponível em: (acesso em 10 set. 2014)

ARAÚJO, Leonardo Carneiro de (2013). A Teoria das Cores de Goethe. Disponível em: (acesso em 5 dez. 2014)

Brasil 247 (2014). IBOPE: Internet Dispara, Jornais Impressos Afundam. Disponível em: (acesso em 20 set. 2014)

Bootstrap (2014). Disponível em: (acesso em 12 nov. 2014)

Carey Jolliffe Graphic Arts (2013). THE PSYCHOLOGY OF COLOR (A Psicologia da cor) Disponível em: (acesso em 5 out. 2014)

Cetic.br (2014). Panorama setorial da internet. Disponível em: (acesso em 6 set. 2014)

103

CHAMUSCA, Marcello; CARVALHAL, Márcia (2011). Comunicação e Marketing Digitais - conceitos, práticas, métricas e inovações. Disponível em: (acesso em 17 ago. 2014)

CHERRY, Kendra (2014). About.com. Max Wertheimer Biography (1880 - 1943). Disponível em: (acesso em: 10 out. 2014)

CHOCOLA DESIGN (2014). Gestalt do Objeto. Disponível em: (acesso em 10 set. 2014)

CLINTON e GORE (2004). O composto de marketing sob a ótica da internet. Disponível em: (acesso em: 31 ago. 2014)

Codex (2014). Gerenciador de Banco de Dados. Disponível em: (acesso em 10 set. 2014)

Design Culture (2014) - MONTEIRO, Gisele - As Cores falam. Disponível em: (acesso em 5 dez. 2014)

Dicionário Informal (2014). Significado de partilhar. Disponível em: (acesso em: 6 set. 2014) ELIENE (2014) – Mundo Educação. Sociabilidade e Socialização. Disponível em: (acesso em 6 dez. 2014)

FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodinâmica das cores em comunicação. 5. ed. São Paulo: Edgard Blucher Ltda., 2006.

FELIPINI, Dailton. EMPREENDEDORISMO e as novas oportunidades de negócios trazidas pela internet. 1. Ed. São Paulo: LeBooks, 2010. 104

FERNANDES, Maria Eduarda D’Amil Sales (2001). Comunicação visual. Disponível em: (acesso em 10 set. 2014)

FRANCO, Guillermo (2014). Como escrever para a WEB. Disponível em: (acesso em 20 set. 2014)

GOMES FILHO, João. Gestalt do objeto. 6 ed. São Paulo: Escrituras Editora, 2000.

Google Developers (2014). Make the Web Faster (PageSpeed Tools). Disponível em: (acesso em 10 nov. 2014)

Google user content (2014). Otimização de sites para Mecanismos de Pesquisa (SEO) - Guia do Google para iniciantes. Disponível em: (acesso em 25 out. 2014)

HALO SEEKER. Imagem da logo do Google Page Speed. Disponível em: (acesso em 4 nov. 2014) JORGE, Eurípedes – Criar Negócios Online (2013). Representante Comercial Virtual. Disponível em: (Acesso em 5 dez. 2014)

jQuery (2014). Linguagem de programação jQuery. Disponível em: (acesso em 6 set. 2014)

JUNGES, Edyd B.; AMSTEL, Frederick Van (2012). Arquitetura da informação. Instituto Faber Ludens. www.faberludens.com.br.

105

JusBrasil (2014). O reconhecimento do Representante comercial no Brasil pela Lei. Disponível em: (acesso em 6 set. 2014)

JustInMind (2014). Disponível em: (acesso em 10 nov. 2014) KOTLER, Phillip; KARTAJAYA, Hermawan; SETIWAN, Iwan. Marketing 3.0. 1 ed. Lisboa, Portugal: Actual Editora, 2011. KOTLER, Phillip; KELLER, Kevin Lane – Administração de Marketing. 12 ed. São Paulo: Prentice Hall Brasil, 2006. KRUG, Steve. Não me faça pensar – Uma abordagem de bom senso à usabilidade na web. 2. ed. Rio de Janeiro: Alta Books, 2008.

MACHADO, Geraldo Magela (2014), INFOESCOLA. História da comunicação humana. (acesso em: 5 out. 2014)

MEMORIA, Felipe Ferraz Pereira (2014). Usabilidade de Interfaces e Arquitetura da Informação: Navegação Estrutural. Disponível em: (acesso em 12 nov. 2014) Michaelis, dicionário online (2014): Disponível em: http://michaelis.uol.com.br/ (acesso em: 23 ago. 2014)

MySQL (2014). Disponível em: (acesso em 10 nov. 2014)

NIEDERAUER, Juliano. Desenvolvendo websites com PHP. 5. ed. São Paulo: Novatec Editora Ltda, 2004.

Nielsen (2014). Disponível em: (acesso em 6 set. 2014) 106

NIELSEN, Jacob (2010). Website Response Times. Disponível em: (acesso em 4 nov. 2014)

Notepad++ (2014). Disponível em: (acesso em 10 nov. 2014)

NOVAFAP, Faculdade (2010). Da teoria à terapia o jeito de ser gestalt. Disponível em: (acesso em: 17 ago. 2014)

NUPEA - Núcleo de Pesquisa em Ensino de Arte (2014).

Semiótica Peirciana.

Disponível em: (acesso em 5 out. 2014) Oficina da net (2010). MySQL – o que é?. Disponível em: (acesso em 9 out. 2014) Oibe Internet Marketing (2014). A importância da identidade visual no seu negócio. Disponível em: (acesso em 9 ago. 2014) Olhar Digital (2014). Veja a lista das redes sociais mais acessadas no Brasil. Disponível em: (acesso em 10 nov. 2014)

PACIEVITCH, Thais (2014). INFOESCOLA. Marxismo. Disponível em: (acesso em 5 out. 2014)

PHP (2014). História do PHP e objetos relacionados. Disponível em: (acesso em: 6 set. 2014)

107

phpMyAdmin (2014). Disponível em: (acesso em 10 nov. 2014)

PrestaShop (2014). Disponível em: (acesso em 4 nov. 2014)

RIBEIRO, Milton. Planejamento Visual Gráfico. 7. ed. Brasília: Linha Gráfica Editora, 1998.

ROMANO, Renato Salmão (2014). Representação Comercial: Autonomia e Independência Laboral. Disponível em: (acesso em 12 nov. 2014) SAAD, Beth. Estratégias 2.0 para a mídia digital – Internet, informação e comunicação. 2. ed. São Paulo: Editora Senac, 2003.

SANTAELLA, Lucia. O que é Semiótica. 1. ed. São Paulo: Editora Brasiliense, 1983.

Sebrae SP, Conexão (2013). EMPREENDEDOR DIGITAL. Disponível em: (acesso em 17 ago. 2014) Sebrae SC (2014). Representante comercial – Necessidades do mercado. Disponível em: (acesso em: 6 set. 2014)

SILVA, J. A. R.; OLIVEIRA, L. C. V. de. O marketing na Intemet.BR: uma avaliação da presença empresarial na World Wide Web. XXI ENANPAD Encontro Nacional dos Programas de Pós-Graduação em Administração. 21 a 24 de setembro de 1997, Rio das Pedras (RJ): Anais eletrônicos, 1997.

108

SILVA, Cibelle Celestino; MARTINS, Roberto de Andrade. SBF – Sociedade Brasileira de Física (1996). A “Nova Teoria sobre Luz e Cores” de Isaac Newton: Uma tradução comentada. Disponível em: (acesso em 10 set. 2014)

SOUSA, Jorge Pedro (2006). Elementos de Teoria e Pesquisa da Comunicação e dos Media – 2ª Edição revista e ampliada. Disponível em: (acesso em 5 dez. 2014)

Techtudo (2012). O que é e como usar o MySQL?. Disponível em: (acesso em 23 ago. 2014) MOREIRA, Marcus Vinícius Raydan - techoje, revista digital (2014). Importância do Planejamento de Comunicação no Gerenciamento de Projetos. Disponível em: (acesso em: 23 ago. 2014)

Terra (2014). Sabe o que é SEO? Conheça 10 dicas de otimização de buscas. Disponível em: (acesso em 8 nov. 2014) TORRES, Cláudio (2010). Guia Prático de Marketing na Internet para Pequenas Empresas. Disponível em: (acesso em 17 ago. 2014)

TURBAN, Efraim; KING, David. Comércio eletrônico: estratégia e gestão. 1. ed. São Paulo: Prentice-Hall, 2004.

109

Universidad de Palermo (2008). A importância da tipografia na história e na comunicação. Disponível em: (acesso em 20 set. 2014) UOL Educação (2009). Teoria crítica – primeira geração Abordagem marxista e multidisciplinar. Disponível em: (acesso em: 5 out. 2014)

UOL Host (2010). Top 5 : Melhores gerenciadores de conteúdo da web. Disponível em: (acesso em 17 ago. 2014)

W3C (2014). Padrões WEB. Disponível em: (acesso em 6 set. 2014)

w3schools (2014). JavaScript Introduction. Disponível em: (acesso em 6 dez. 2014)

WONG, Wucius. Princípios de forma e desenho. 1. ed. São Paulo: Martins Fontes, 1998.

WORDPRESS (2014). Criação de sites. Disponível em: (acesso em: 10 set. 2014)

ZEFF, Robbin Lee; ARONSON, Brad. Publicidade na internet. 2. ed. Rio de Janeiro: Editora Campus, 2000.

ZONATO, Tersis Hiran (2010). Da ordem: reflexões sobre a classificação. Disponível em: (acesso em 12 nov. 2014)

110

ZONATO, Tersis Hiran (2013). Responsive web design: reprojetando o site tersis.com.br. Disponível em: (acesso em 12 nov. 2014)

111

Apêndice A – Formulário de pesquisa de mercado

112

113

114

Apêndice B – Estatísticas da pesquisa de mercado

115

116

117

118