Genérico Detentor Referência Classe Terapeutica Concentração
Desenvolvimento de Identidade Visual e Website para a Empresa Classe Sistemas de Aquecimento
84
FACULDADE DE TECNOLOGIA OPET TECNOLOGIA EM PRODUÇÃO MULTIMÍDIA DESENVOLVIMENTO DE IDENTIDADE VISUAL E WEBSITE PARA A EMPRESA CLASSE SISTEMAS DE AQUECIMENTO CURITIBA 2014
-
Upload
faberludens -
Category
Documents
-
view
0 -
download
0
Transcript of Desenvolvimento de Identidade Visual e Website para a Empresa Classe Sistemas de Aquecimento
FACULDADE DE TECNOLOGIA OPET
TECNOLOGIA EM PRODUÇÃO MULTIMÍDIA
DESENVOLVIMENTO DE IDENTIDADE VISUAL E WEBSITE PARA A
EMPRESA CLASSE SISTEMAS DE AQUECIMENTO
CURITIBA
2014
CARLOS JUNIOR PAIVA
CAROLINE ALVES FUKUOKA
HALYSON RODRIGO GUERRA
MARCO ANTONIO CHAURAIS FILHO
PRISCILA KOWALSKI IZABEL
VANESSA RODRIGUES DE OLIVEIRA
DESENVOLVIMENTO DE IDENTIDADE VISUAL E WEBSITE PARA A
EMPRESA CLASSE SISTEMAS DE AQUECIMENTO
Trabalho de aplicação tecnológica apresentado à Banca Avaliadora do Programa de Integração com
o Mercado (PIM), 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 do uso da internet atualmente, as empresas procuram
meios de se modernizarem. Hoje, a internet é uma ferramenta poderosa para
encontrar e compartilhar informações. Visto isso, esse projeto tem o intuito de inserir
a empresa Classe Climatização nesse cenário, a fim de promovê-la e posicioná-la
diante de seus concorrentes.
No decorrer desse trabalho, será descrito os problemas que a empresa
apresentava e mostrado as soluções para os mesmos. Os problemas foram
analisados e as soluções foram elaboradas baseando-se nos estudos de alguns
autores, apresentados no decorrer do trabalho.
Além das falhas apresentadas pelo website antigo da empresa, foram
identificados problemas na comunicação da mesma com os seus clientes, e para
isso foram propostas soluções de divulgação a fim de melhorar a maneira como a
empresa é vista.
ABSTRACT
Due to the popularity of the internet today, companies are seeking ways to
modernize them. Today, the internet is a powerful tool for finding and sharing
information. Seen it, this project aims to put the company Classe Climatização in this
scenario, in order to promote and position it in front of their competitors.
Throughout this paper, it was described the problems that the company had
shown and the solutions to them. The problems were analyzed and solutions were
prepared based on the studies from some authors, presented in this work.
In addition to the problems presented by the old company’s website, it was
identified communication problems between the company and their clients, and about
that it has been proposed divulgation solutions in order to improve the way the
company is seen.
LISTA DE FIGURAS
Figura 1 - Página inicial da Classe ............................................................................ 12
Figura 2 - Hipocausto sob o piso em Vila Romana ................................................... 15
Figura 3 - Esquema de um Sistema de Aquecimento Central ................................... 16
Figura 4 - Exemplo de Piso Radiante ........................................................................ 17
Figura 5 - Foto de um duto de ar sujo ....................................................................... 18
Figura 6 - Botão "Solicite um Orçamento" ................................................................. 26
Figura 7- Texto dos Produtos .................................................................................... 27
Figura 8 - Verso do cartão de visita ........................................................................... 27
Figura 9 - Exemplo de unificação .............................................................................. 28
Figura 10 - Exemplo de Proximidade ........................................................................ 28
Figura 11 - Menu do website ..................................................................................... 28
Figura 12 - Serviços na página inicial ........................................................................ 29
Figura 13 - Serviços no folheto .................................................................................. 29
Figura 14 - Gerenciamento dos banners ................................................................... 30
Figura 15 - Nova logo proposta ................................................................................. 30
Figura 16 - Página de produtos ................................................................................. 31
Figura 17 - Experimento de Newton .......................................................................... 32
Figura 18 - Cores quentes e cores frias .................................................................... 33
Figura 19 - Nova logo para a empresa Classe .......................................................... 34
Figura 20 - Cores conforme sistemas RGB e CMYK................................................. 34
Figura 21 - Botão Saiba Mais .................................................................................... 36
Figura 22 - Semiótica de Pierce ................................................................................ 37
Figura 23 - Interpretação da Semiótica ..................................................................... 38
Figura 24 - Direcionador de Ar .................................................................................. 39
Figura 25 - Destaque na página inicial ...................................................................... 41
Figura 26 - Visão geral da página inicial.................................................................... 42
Figura 27 - Página Sobre a Classe ........................................................................... 43
Figura 28 - Página Produtos ...................................................................................... 44
Figura 29 - Página Contato ....................................................................................... 45
Figura 30 - Gerenciamento do Banner ...................................................................... 46
Figura 31 - Gerenciamento dos Produtos.................................................................. 47
Figura 32 - Gerenciamento dos Usuários .................................................................. 48
Figura 33 - Código Minificado .................................................................................... 50
Figura 34 - Código Normal ........................................................................................ 50
Figura 35 - Imagem para o site ................................................................................. 51
Figura 36 - Exemplo de Media Query ........................................................................ 53
Figura 37 - Fluxograma do website ........................................................................... 54
Figura 38 - Catálogo de Produtos ............................................................................. 55
Figura 39 - Título utilizando tag H1 ........................................................................... 56
Figura 40 - Uso de listas em menus .......................................................................... 57
Figura 41 - Uso de texto alternativo .......................................................................... 57
Figura 42 - Uso de tags IMG ..................................................................................... 57
Figura 43 - Textos e botão Saiba Mais ...................................................................... 58
Figura 44 - Página de Contato .................................................................................. 59
Figura 45 - Tela do Adobe Dreamweaver.................................................................. 63
Figura 46 - Painel de controle do Xampp .................................................................. 64
Figura 47 - Tela inicial do PhpMyAdmin .................................................................... 65
Figura 48 - Papel Timbrado ....................................................................................... 68
Figura 49 - Pasta ....................................................................................................... 69
Figura 50 - Cartão de Visitas ..................................................................................... 70
Figura 51 - Folheto .................................................................................................... 71
Figura 52 - Os 4 Ps do Marketing .............................................................................. 74
Figura 53 - Cadastro de Banners .............................................................................. 77
Figura 54 - Cadastro de Produtos ............................................................................. 78
Figura 55 - Cadastro de Usuários ............................................................................. 79
SUMÁRIO
RESUMO ..................................................................................................................... 3
ABSTRACT ................................................................................................................. 4
1 INTRODUÇÃO ....................................................................................................... 10
1.1 INTRODUÇÃO AO ASSUNTO ............................................................................ 10
1.2 JUSTIFICATIVA .................................................................................................. 11
1.3 OBJETIVOS DA INVESTIGAÇÃO....................................................................... 11
1.4 PROPOSTA DE SOLUÇÃO ................................................................................ 13
1.5 RESULTADOS ESPERADOS ............................................................................. 14
1.6 HISTÓRICO DO SEGMENTO ............................................................................. 14
1.6.1 Climatização na antiguidade ............................................................................ 14
1.6.2 Aquecimento de ambientes .............................................................................. 16
1.6.3 Ventilação e Condicionamento de Ar ............................................................... 18
1.6.4 Setor de climatização do Brasil na atualidade .................................................. 19
1.7 DESCRIÇÃO DETALHADA DA EMPRESA ........................................................ 20
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 DESCRIÇÃO E JUSTIFICATIVA DAS FERRAMENTAS UTILIZADAS ............... 22
3.2.1 Briefing ............................................................................................................. 22
3.2.2 Brainstorming ................................................................................................... 23
3.3 CRONOGRAMA DE DESENVOLVIMENTO ....................................................... 24
3.4 METODOLOGIA .................................................................................................. 25
4 PLANEJAMENTO VISUAL .................................................................................... 26
4.1 GESTALT ............................................................................................................ 26
4.2TEORIA DA COR ................................................................................................. 31
4.3 TEORIA DA COMUNICAÇÃO ............................................................................. 35
4.4 SEMIÓTICA ......................................................................................................... 37
4.5 COMPOSIÇÃO .................................................................................................... 39
.................................................................................................................................. 42
.................................................................................................................................. 43
.................................................................................................................................. 45
.................................................................................................................................. 46
5 USABILIDADE E ARQUITETURA DA INFORMAÇÃO ......................................... 49
5.1 VELOCIDADE DE CARREGAMENTO ................................................................ 49
5.2 ESTRUTURA DE INFORMAÇÃO E HIERARQUIZAÇÃO ................................... 51
5.3 ACESSIBILIDADE ............................................................................................... 52
5.3.1 Design Responsivo........................................................................................... 53
5.4 FLUXO DA INFORMAÇÃO ................................................................................. 54
5.5 TAXONOMIA ....................................................................................................... 54
5.6 OTIMIZAÇÃO ...................................................................................................... 56
5.7 REDAÇÃO ........................................................................................................... 58
5.8 NAVEGAÇÃO E MENUS .................................................................................... 59
6 TECNOLOGIA DE PROGRAMAÇÃO ................................................................... 61
6.1 JUSTIFICATIVA DA LINGUAGEM ...................................................................... 61
6.1.1 Linguagem PHP ............................................................................................... 61
6.1.2 Linguagem JavaScript ...................................................................................... 61
6.1.3 SQL .................................................................................................................. 62
6.2 CÓDIGOS E DIAGRAMA DE BANCO DE DADOS ............................................. 62
6.3 FERRAMENTAS USADAS PARA PROGRAMAÇÃO ......................................... 63
6.3.1 Adobe Dreamwaver .......................................................................................... 63
6.3.2Xampp ............................................................................................................... 64
6.3.3 MySQL ............................................................................................................. 65
6.3.4 PhpMyAdmin .................................................................................................... 65
7 AÇÕES PROMOCIONAIS ..................................................................................... 66
7.1 ESTRATÉGIAS DE PROMOÇÃO ....................................................................... 66
7.2 PUBLICIDADE E PROMOÇÃO DE MARKETING ............................................... 67
8 PROPOSTA DE MANUTENÇÃO........................................................................... 72
8.1PROJEÇÃO DE MANUTENÇÃO DO PRODUTO ................................................ 72
8.2 CRONOGRAMA .................................................................................................. 73
8.3 PLANO DE MARKETING .................................................................................... 73
8.4 PLANO DE AÇÃO DA EMPRESA CLASSE ........................................................ 74
8.4.1 Análise Interna ................................................................................................. 74
8.4.2 Análise de Mercado .......................................................................................... 74
8.4.3 Analise da Concorrência .................................................................................. 75
8.4.4 Análise do Público ............................................................................................ 75
8.4.5 Problemas ........................................................................................................ 75
8.4.6 Objetivos .......................................................................................................... 75
8.4.7 Posicionamento ................................................................................................ 75
8.4.8 Estratégia ......................................................................................................... 75
8.4.9 Proposta de Plano de Ação .............................................................................. 75
9 DOCUMENTAÇÃO TÉCNICA ............................................................................... 76
9.1 MANUAL DO USUÁRIO DO SITE....................................................................... 76
10 CONSIDERAÇÕES FINAIS ................................................................................. 80
10
1 INTRODUÇÃO
1.1 INTRODUÇÃO AO ASSUNTO
Desde o início do uso comercial da internet, quando usuários comuns
começaram a acessá-la em 1990, houve um grande crescimento desta ferramenta,
visto sua agilidade em encontrar informações e a facilidade que oferece na
comunicação entre as pessoas. Dos meios de comunicação existentes atualmente,
ela foi a que teve a mais rápida difusão (PINHO, 2000).
O avanço em tecnologia permitiu que o acesso a essa ferramenta se tornasse
mais barato, mais eficaz e globalizado. Segundo PINHO (2000), essas mudanças “a
transformaram em um negócio altamente profissional e rendoso”. Por ser uma
maneira rápida de se encontrar e distribuir informação, ela tem se tornado muito
popular. Hoje é possível encontrar websites1 que tratam dos mais diversos assuntos,
cada um com sua finalidade. Devido a este fato, ela tem sido utilizada por
empresários que desejam expandir seus negócios, divulgando suas atividades, seus
serviços e produtos, a fim de obterem espaço no mercado e se posicionarem em
relação à concorrência.
Visto o poder dessa tecnologia, este projeto tem o intuito de estudar e aplicar
meios de inserir a empresa Classe, atuante no segmento de climatização, no
ambiente virtual web2, melhorando a maneira como ela se comunica com seus
clientes e a imagem que precisa transmitir.
Além disso, a empresa apresenta falhas de comunicação com seus clientes,
que fazem com que sua marca não seja bem divulgada. A falta de materiais de
divulgação e a identidade visual desatualizada da empresa reforçam esses
problemas. No decorrer deste projetos serão apresentadas propostas de soluções
para esses problemas.
1 Páginas acessíveis na internet através de um endereço. 2 Também conhecida como World Wide Web. É um sistema de documentos interligados e executados na internet.
11
1.2 JUSTIFICATIVA
“A rapidez das informações faz com que as exigências dos profissionais sejam
cada vez maiores, tornando o tempo insuficiente para adequar as respostas que o
trabalho exige.” (BHERING, 2013).
Devido à falta de tempo, conforme citado por BHERING (2013), as pessoas
têm buscado meios de obterem resultados mais rapidamente, e a internet tem
proporcionado essa facilidade. Várias empresas ao redor do mundo já veem a
internet como mais uma opção para reforçar a presença de suas marcas.
Em 2011, mais de 215 milhões de domínios na rede mundial de computadores
foram registrados, sendo que o Brasil foi um dos países que mais teve aumento
nesse período (COMPUTERWORLD, 2011). Isso mostra que o uso da internet tem
crescido consideravelmente nos últimos anos. Assim, surge a necessidade da
Classe em marcar presença também nesse ambiente.
Criar um website tem se tornado uma tarefa cada vez mais fácil e barata de
transmitir uma mensagem a um público, porém nem sempre as empresas têm
conhecimento da melhor forma para transmiti-la. Portanto faz-se necessário um
planejamento, envolvendo o público-alvo que a empresa deseja atingir, a imagem
que transmitirá a seus clientes e os objetivos que deseja alcançar: seja conquistar
mais clientes, fidelizar os mesmos ou aumentar seu lucro.
1.3 OBJETIVOS DA INVESTIGAÇÃO
A Classe, hoje, possui um website com apenas uma página estática e com
praticamente nenhuma informação sobre quem são e o que fazem. Sua logo3 e
slogan4 não apontam corretamente a amplitude dos serviços que oferecem. Seu
cartão de visita não apresenta o endereço eletrônico.
3 Conjunto formado por letras ou imagens para identificar uma entidade. Também conhecido como logotipo ou logomarca. 4 É uma frase que resume características de um produto, serviço ou até mesmo pessoa ou empresas.
12
De acordo com Felipini (2003) um site eficaz é:
[...] aquele que possui uma definição clara dos produtos oferecido se mostra isso logo na primeira página; que oferece uma navegação objetiva que leva rapidamente o visitante a realizar a compra, ou outra ação desejada; e que possua um bom texto e uma boa apresentação visual (FELIPINI, 2003).
A falta de informações online5 sobre os produtos com que trabalham e suas
especificações técnicas, sobre o histórico da empresa, segmento de atuação e
serviços que prestam, formas de entrar em contato com a empresa e solicitar
orçamentos pelo website, fazem com que a Classe não atenda uma grande fatia do
mercado que utiliza a internet como ferramenta de busca, deixando-a para seus
concorrentes.
De acordo com os proprietários da Classe, a maioria dos novos clientes a
conhecem através de indicações. Também notou-se que os novos contratantes
lembram mais dos proprietários da empresa do que da marca em si, o que sugere
uma deficiência na sua identidade visual.
5 Aquilo que é acessível através da internet.
Figura 1 - Página inicial da Classe
Fonte: <http://www.classeaquecimento.com.br>. Acesso em 1 mar. 2014.
13
Esse trabalho tem o objetivo posicionar a Classe na web, propor melhorias na
sua identidade visual para que transmita aquilo que oferecem e melhorar a
comunicação entre a empresa e seus clientes.
1.4 PROPOSTA DE SOLUÇÃO
A fim de melhorar a comunicação externa, será feito um novo website contendo
informações relevantes sobre a empresa, seu histórico no mercado, produtos e
serviços que oferecem. As páginas dos produtos funcionarão como um catálogo
online, contendo fotos e especificações técnicas. Preços não serão divulgados uma
vez que, visto que esses valores variam frequentemente, a empresa não dispõe no
momento de funcionários focados apenas na atualização dessas informações.
Porém, foi solicitado a possibilidade dos próprios funcionários da empresa inserirem
novos produtos ao catálogo, o que será feito através de um gerenciador de
conteúdo6 online. Outra solução proposta é a possibilidade do visitante solicitar um
orçamento diretamente através do website, sem ter que enviar e-mails7.
A logo da empresa sofrerá uma reestilazação para que transmita melhor a
gama de serviços que a empresa oferece. Hoje, a logo passa a impressão que a
Classe trabalha apenas com sistemas de aquecimento, o que não é verdade.
Nas primeiras reuniões com os clientes, onde a Classe oferece sua proposta,
não há material institucional impresso para apresentarem. Portanto, a identidade
visual da empresa não será trabalhada apenas no ambiente virtual, mas também no
físico. Será então desenvolvida a papelaria da empresa de forma que reforce a
marca.
6 Plataforma que permite adicionar, editar e remover conteúdos de páginas da web com maior facilidade. 7 Forma de correio através de meios eletrônicos.
14
1.5 RESULTADOS ESPERADOS
Levantadas as necessidades do cliente, a conclusão e implantação deste
projeto visam o reposicionamento e reconhecimento da empresa Classe, que apesar
de inserida no mercado não tem seus serviços associados à marca, trazendo
melhores resultados e aumentando a visibilidade da empresa.
O desenvolvimento de um novo website facilitará o acesso dos clientes às
informações dos produtos e serviços, uma vez que 80% dos internautas busca
informação através da web (Felipini, 2004). Além disso, a possibilidade de solicitar
orçamentos online ampliará a carteira de clientes da empresa, resultando num
possível aumento das vendas.
Com a reestilização da identidade visual da marca não passará a impressão
que trabalha apenas com sistemas de aquecimento, visto que seu segmento é mais
amplo.
1.6 HISTÓRICO DO SEGMENTO
1.6.1 Climatização na antiguidade
De acordo com o dicionário online da língua portuguesa Priberam8,
climatização é o “conjunto de meios que permitem manter, em recinto fechado, um
grau de umidade e uma temperatura desejados”. Para isto, faz-se necessário o uso
de algumas tecnologias.
Desde a antiguidade o homem tem a necessidade de alterar a temperatura do
ambiente em que vive para obter mais conforto, seja queimando madeira no interior
de uma caverna ou utilizando-se de sistemas mais avançados de calefação
(QUIRINO, 2002).
Na Roma Antiga, por exemplo, já havia construções com sistema de
aquecimento sob o piso e pelas paredes (FAGAN, 1996). O chão era construído
sobre uma câmara, sustentado por pilares. Ligado a essa câmara havia uma
8 Disponível em <http://www.priberam.pt>. Acesso em 3 mar. 2014.
15
fornalha que aquecia o ar. O ar quente passava por entre os pilares aquecendo o
espaço abaixo do piso e subindo através de dutos por entre as paredes da
construção. Desta forma o ar dentro do ambiente a ser aquecido não se misturava
com a fumaça produzida pela fornalha. Esse sistema de aquecimento central foi
chamado de Hipocausto9.
Figura 2 - Hipocausto sob o piso em Vila Romana Fonte: <http://en.wikipedia.org/wiki/Hypocaust>. Acesso em 3 mar. 2014.
Ainda na Roma desse período, em algumas casas existiam aquedutos10 entre
as paredes. A água que circulava por eles tinha o propósito de arrefecer o ar do
ambiente em épocas quentes do ano11.
Com o passar dos séculos os sistemas de climatização evoluíram, e essa
evolução foi acompanhada pela Revolução Industrial, quando novos meios para
criação de sistemas mais eficientes e baratos surgiram.
9 Disponível em <http://www.pages.drexel.edu/~jpm55/AE390/A5/hypocaust.htm>. Acesso em 3 mar. 2014. 10 Canal ou galeria com a finalidade de conduzir água. 11 Disponível em <http://pt.wikipedia.org/wiki/Condicionamento_de_ar>. Acesso em 3 mar. 2014.
16
1.6.2 Aquecimento de ambientes
Dentre os diversos tipos de sistemas para aquecimento de edificações o mais
conhecido é o Aquecimento Central. Esse tipo de sistema é semelhante ao usado na
Roma Antiga, já que fica em local separado do cômodo que se deseja aquecer, onde
o calor gerado é distribuído através de dutos ou canos12. Ele normalmente é
composto por fornalhas, caldeiras e bombas de calor, mas pode ser usado em
conjunto com outros sistemas, como o aquecimento solar, por exemplo.
Figura 3 - Esquema de um Sistema de Aquecimento Central Fonte: <http://www.tt-lda.pt/idx/produtoservico,24,1,0>. Acesso em 3 mar. 2014.
O condutor de calor mais comum nesses sistemas é a água. Ela é aquecida em
uma central e então bombeada para o resto da construção através de canos até
chegar aos radiadores, que se encarregam de dissipar o calor no ambiente em que
foram instalados (US NAVY, 2005). A água então retorna ao ponto inicial formando
assim um ciclo. Uma forma de obter uma distribuição de calor mais equilibrada no
ambiente é instalando pisos radiantes13 ao invés de radiadores. Dessa forma, a água
quente circula por mangueiras distribuídas por todo o chão, sob o acabamento do
piso.
12 Disponível em <http://doctorallergy.wordpress.com/2010/01/04/home-allergy-tips-forced-air-heating/>. Acesso em 3 mar. 2014, 13 Funcionam como radiadores embutidos no piso do cômodo.
17
Figura 4 - Exemplo de Piso Radiante Fonte: <http://econexao.com.br/site/piso-aquecido/>. Acesso em 3 mar. 2014.
Pode-se juntar a um sistema de aquecimento painéis solares14, a fim de
economizar energia. Estes painéis ficam comumente no topo do edifício onde
recebem grande incidência de luz solar. Atrás destes painéis, corre a água do
sistema através de canos, que é então aquecida. Ela pode ser armazenada em um
reservatório, diminuindo assim a quantidade de energia necessária para atingir a
temperatura desejada15.
Há também os sistemas de aquecimento que usam o ar ao invés de água.
Nesses sistemas, os dutos que transportam o ar quente para os ambientes também
podem ser usados para levarem ar frio, fazendo deste um sistema que serve tanto
no inverno quanto no verão. O ar transportado normalmente é tratado por filtros a fim
de não levar poeira ou pólen para os ambientes.
Outra forma de obter calor é através de corrente elétrica, que passa por fios de
alta resistência (SAY, 2004). Esse tipo de fonte de calor é bastante usada em
sistemas de aquecimento portáteis, conhecidos apenas como aquecedores.
14 Dispositivos que absorvem a energia do sol e transformam em calor. 15 Disponível em <http://www.paineissolaresfotovoltaicos.com/como-funcionam-os-paineis-solares-termicos/>. Acesso em 3 mar. 2014.
18
1.6.3 Ventilação e Condicionamento de Ar
A climatização envolve também a troca de ar do ambiente. Em edifícios com
poucas janelas, principalmente os de grande dimensão, é necessário um sistema de
ventilação central, responsável pela troca do ar. Essa troca é importante para
renovação do oxigênio, eliminação de odores e umidade, remoção de bactérias e
também para controle da temperatura.
Os equipamentos de ventilação também exigem manutenção regular16. Os
filtros de ar devem ser trocados em dados períodos e os dutos devem ser selados, já
que ao acumularem sujeira, resíduos ou bactérias, esses equipamentos apresentam
um risco a saúde respiratória, espalhando ar contaminado ao invés de ajudando a
eliminá-lo.
Figura 5 - Foto de um duto de ar sujo Fonte: <http://www.stellaar.com/>. Acesso em 5 mar. 2014.
Os aparelhos de ar condicionado também servem para renovação e
movimentação do ar17. Além disso eles possuem mais funções: aquecimento,
arrefecimento e umidificação.
O processo de condicionamento mecânico do ar foi inventado em 1902 pelo
engenheiro norte-americano Willys Carrier18. Ele inicialmente criou uma máquina
16 Disponível em <http://www.stellaar.com/#!limpeza-de-dutos/c11xg>. Acesso em 5 mar. 2014. 17 Disponível em <http://www.ehow.com.br/definicao-sistemas-ventilacao-forcada-predios-residenciais-info_115360/>. Acesso em 5 mar. 2014.
19
que fazia o ar circular por dutos resfriados artificialmente com o intuito de reduzir a
umidade do ar de uma empresa em Nova Iorque. Atualmente, com a inovação das
indústrias desse ramo, os sistemas de ar condicionado evoluíram.
Os sistemas desse tipo que usam apenas ar como condutor de calor, e que
possuem uma unidade central, são normalmente instalados em construções
modernas. Como os dutos de ar ocupam um bom espaço, esses sistemas não são
facilmente instalados em construções que não foram preparadas para recebê-los.
Edifícios com ar condicionado normalmente possuem as janelas seladas já que, se
fossem abertas, a entrada do ar externo prejudicaria o sistema em manter as
condições do ar interno.
1.6.4 Setor de climatização do Brasil na atualidade
O setor de climatização tem obtido crescimento no último ano de acordo com a
Associação Brasileira de Refrigeração, Ar-condicionado, Ventilação e Aquecimento
(ABRAVA)19. O crescimento é acompanhado por diversos fatores como o aumento
do poder aquisitivo do brasileiro, por exemplo. Com a Copa do Mundo de 2014 e as
Olimpíadas no Rio de Janeiro em 2016, mais e mais obras vem surgindo ao redor do
Brasil, estimuladas por esses eventos. Devido ao aumento da construção civil,
surgem parcerias entre as construtoras e as empresas que trabalham com
instalação de ar condicionado e outros serviços relacionados à climatização.
Não apenas para instalações em residências ou escritórios, esses aparelhos
também ajudam na fase de construção dos edifícios. Desumidificadores de ar
auxiliam na pintura dos cômodos retirando a humidade do ar. Outra aplicação nesta
etapa do projeto é o uso de ares condicionados temporários, principalmente no
verão. Estes, reduzem a temperatura do ambiente proporcionando um conforto
térmico aos operários e estimulando o trabalho.
18 Disponível em <http://www.arcondicionado.ind.br/historia_ar_condicionado.asp>. Acesso em 5 mar. 2014. 19 Informação obtida em <http://classificados.folha.uol.com.br/imoveis/2013/09/1344302-setor-de-ar-condicionado-estima-crescimento-de-8-neste-ano.shtml>. Acesso em 5 mar. 2014.
20
1.7 DESCRIÇÃO DETALHADA DA EMPRESA
A Classe Sistemas de Aquecimento é uma microempresa que foi fundada no
mês de junho do ano de 2008 na cidade de Curitiba no estado do Paraná, uma
sociedade entre Bruno Rodrigues e Luani Miranda sua respectiva esposa, com o
propósito de atender seus clientes de forma diferenciada, personalizada e fidelizada.
As principais regiões de atuação da empresa são Curitiba, Ponta Grossa e São
Paulo, competindo com fortes concorrentes como 3b Aquecedores, Rei dos
Aquecedores, Aquamec entre outros, buscando um meio de crescer e se destacar.
Trata-se de uma empresa que oferece aquecimento solar, a gás, ar
condicionado e refrigeração de ambientes.
A empresa atua a mais de cinco anos no mercado, com dois funcionários fixos
e cinco terceirizados. Profissionais de muita experiência na área, que sempre
buscam aperfeiçoamento e novos conhecimentos.
A Classe teve um crescimento recorde entre o ano de 2012 e 2013. Ano em
que conseguiram fidelizar vários clientes, como a academia Companhia Atlética de
Curitiba, Hospital Municipal de Araucária, Hospital Municipal de Pinhais, Artes
Arquitetura e algumas filiais do salão de cabeleireiros e estética Lady Lord, o que
também rendeu um bom faturamento.
A Classe tem como objetivo conquistar o melhor lugar no mercado nesse ramo,
pois não trabalham apenas com aquecimentos e sim com todo tipo de climatização,
que é um diferencial da empresa.
a) Missão da empresa: “Investir em energia limpa para proporcionar o conforto e
a satisfação de seus clientes e estar buscando sempre soluções inteligentes”.
b) Visão da empresa: “Alcançar a liderança no mercado como provedora de
soluções alternativas de aquecimentos e atingir o mercado de climatização”
21
2 FUNDAMENTAÇÃO TEÓRICA
Conforme indicação do professor Tersis Zonato, orientador desta equipe, a
fundamentação teórica deste projeto será apresentada no decorrer do seu
desenvolvimento.
22
3 ESTRATÉGIAS E PROGRAMAS DE AÇÃO
3.1 ESTRATÉGIAS DE DESENVOLVIMENTO DO PROJETO
Buscando conhecimento da empresa e das necessidades existentes,
inicialmente foi realizado um Briefing20 com os proprietários. Coletados os dados, a
equipe de desenvolvimento do trabalho participou de um Brainstorming21 para definir
as particularidades do projeto e repassar à empresa as propostas de soluções.
Definido as soluções viáveis, seguiu-se para o desenvolvimento tendo em vista
os seguintes processos:
c) reestilização da marca para dar nova identidade visual à empresa,
principalmente nas cores utilizadas;
d) criação do layout22 do novo website que tornará melhor a divulgação dos
produtos e o relacionamento com clientes;
e) reunião com os proprietários da Classe para aprovação da nova logo e layout;
f) elaboração do banco de dados;
g) desenvolvimento da programação do website;
h) criação do material impresso de apresentação da empresa;
i) reunião dos desenvolvedores para definição da finalização do trabalho.
3.2 DESCRIÇÃO E JUSTIFICATIVA DAS FERRAMENTAS UTILIZADAS
3.2.1 Briefing
Briefing é um método para obter informações relevantes que possibilitem a
resolução de um problema. É comumente utilizado por empresas para transmitir os
pensamentos do cliente para a equipe que executará uma tarefa ou serviços para o
mesmo.
20 Dossiê ou conjunto de informações coletados em uma reunião a fim de desenvolver um trabalho. 21 É uma técnica de dinâmica em grupo realizada com a intenção de explorar a potencialidade criativa de uma pessoa ou grupo. Também conhecido como “tempestade de idéias”. 22 Esboço que contém os elementos de uma revista, jornal ou página da internet.
23
Este documento deve ter a maior quantidade possível de dados, que serão
repassados para outros setores, não podendo haver enganos, uma vez que há
perda de tempo em ficar contatando o cliente várias vezes para tirar dúvidas que
não foram sanadas na primeira reunião.
Para qualquer processo de comunicação, o briefing deve ser construído, fundamentado e compartilhado a partir dos objetivos estratégicos, metas e indicadores de sucesso. Caso contrário, a solicitação resultará em desperdício de esforços e recursos (CORREA, 2009, p.60).
Essa forma de planejamento foi utilizada para entender melhor a Classe, saber
sua visão e objetivos, analisar seus recursos e necessidades.
3.2.2 Brainstorming
Uma boa tradução para o substantivo brainstorm, do inglês, seria “tempestade
de ideias”, onde brainstoming seria uma ação. Essa técnica criativa utilizada
principalmente em fases de planejamento de tarefas se popularizou na década de 50
(STONE, 1992).
Ela consiste basicamente de uma reunião. Nela é convocado um grupo de
pessoas da empresa que buscará soluções para um problema, e eventualmente
outras pessoas criativas, normalmente distribuídas ao redor de uma mesa. Uma
pessoa do grupo é escolhida para anotar as ideias que surgirão. Tendo isso é então
definido o foco da reunião, que geralmente é o problema que visa solução. Após
esta etapa, e de maneira organizada, cada pessoa compartilha suas ideias, e estas
então são anotadas.
No brainstorming é mais importante a quantidade de ideias lançadas do que a
qualidade que apresentam. Nada dito deve ser julgado nem questionado para que
não se interrompa o processo criativo. Quando o intervalo entre cada palavra dita vai
ficando maior pode-se arbitrariamente encerrar esta etapa.
Após este processo todas as ideias anotadas são lidas para o grupo. Uma a
uma elas são avaliadas para ver se estão de acordo com o foco definido
previamente. As ideias que estão em desacordo são então riscadas. As que serão
utilizadas são agrupadas por semelhança e a partir delas é possível se traçar as
soluções encontradas (MEIRELES, 1949).
24
O interessante no brainstorming é o estímulo da criatividade do grupo e o
tempo curto em que se obtêm ideias. Mesmo que de início algumas pareçam sem
sentido, ou até mesmo contrárias ao foco definido, elas podem ser úteis para, por
exemplo, saber o que não deve ser feito.
3.3 CRONOGRAMA DE DESENVOLVIMENTO
Atividade Outubro Novembro Dezembro Data
Formação da Equipe
Escolha do Orientador
Escolha da Empresa
Primeira Reunião com o Cliente
Inscrição do PIM
Janeiro Fevereiro Março Data
Segunda Reunião com o Cliente
Reunião com o Coordenador
Definição de Desenvolvimento 1ª Parcial
Introdução
Fundamentação Teórica
Estratégias e Programa de Ação (Cronograma)
Reunião da Equipe
Entrega da 1ª Parcial 7/3/14
Março Abril Maio Data
Devolução da 1ª Parcial 14/3/14
Reunião da Equipe
Correção da Parcial Anterior
Identidade Visual
Usabilidade e Arquitetura da Informação
Tecnologia da Informação
Reunião da Equipe 28/3/14
Aprovação da Identidade Visual 31/3/14
Entrega da 2ª Parcial 7/4/14
Devolução da 2ª Parcial
Reunião da Equipe
Correção da Parcial Anterior
Reunião da Equipe
25
Março Abril Maio Data
Ações Promocionais
Proposta de Manutenção do Site
Documentação Técnica
Conclusão
Entrega Final do Trabalho e Códigos 4/5/14
Devolutiva da Ficha de Avaliação dos Alunos
Resulta para Apresentação da Banca
Apresentação à Banca 17/5/14
Entrega do Formulário de Autor. da Empresa 22/5/15
Resultado da Banca no Aluno Online 23/5/14
Entrega do Trabalho em CD (Código e PDF) 26/5/14
3.4 METODOLOGIA
Inicialmente foi feito um levantamento sobre os principais dados referentes à
empresa Classe, compreendendo o segmento de mercado onde atua bem como
seus concorrentes, serviços prestados, divulgação da marca e repercussão que a
divulgação atual traz. Esses dados estão inseridos no item 8 deste trabalho.
Após isto, os dados foram analisados por parte da equipe de desenvolvimento
do projeto, sendo esta uma etapa indispensável. Juntos identificaram os problemas
da empresa, as possíveis soluções e definiram o plano de ação, que contém as
etapas a serem realizadas para a conclusão das soluções propostas. Após definidas
as ações e selecionadas as ferramentas a serem utilizadas, o desenvolvimento das
soluções foi iniciado.
Após a conclusão do desenvolvimento, será dado um treinamento aos
funcionários da Classe. Nele, será explicado como atualizar o novo website e como
utilizar a marca. Juntamente ao treinamento, um manual de apoio será entregue a
fim de facilitar as atualizações e manutenções posteriores.
26
4 PLANEJAMENTO VISUAL
4.1 GESTALT
Gestalt é um estudo de psicologia que trata da percepção das formas como um
todo. A palavra “Gestalt” é de origem alemã e sua tradução mais próxima seria
“forma” ou “configuração”.
Quando se fala nesse termo, não se pode deixar de citar os três principais
pesquisadores, são eles: Kurt Koffka, Wolfgang Köhler e Marx Wertheimer.
Baseados em estudos sobre forma e percepção, iniciaram suas pesquisas tentando
entender os processos psicológicos das ilusões de ótica e o movimento aparente
dos objetos23.
A teoria Gestalt baseia-se na percepção dos estímulos vindos do meio e a
resposta da pessoa que os recebe para estudar o comportamento do homem.
Quando se vê uma figura, ou uma forma, cada indivíduo a percebe de uma maneira
diferente. Isto ocorre devido a forças internas e externas. A partir daí pode-se
observar o todo de uma forma como a soma das partes.
De acordo com Gomes Filho (2004) as forças internas “são as forças de
organização que estruturam a forma numa ordem determinada” a partir das forças
externas. Essas forças internas estão subordinadas à certas regras, vejamos
algumas delas:
A unidade é notada quando um objeto começa e termina nele mesmo, sendo
visto claramente e entendido como um todo ou de uma forma mais ampla como
parte de um todo ainda maior. Podemos definir cada botão de “solicite orçamento”
como uma unidade, ou então como uma subunidade dentro da unidade “Site”,
conforme a Figura 6.
Figura 6 - Botão "Solicite um Orçamento"
23 Disponível em <http://www.psicologiamsn.com/2013/03/a-psicologia-da-gestalt.html>. Acesso em 6 abr. 2014.
27
De maneira contrária, a segregação é quando um elemento pode ser
facilmente separado do todo ou quando passa a sensação de que um elemento não
faz parte de um conjunto e pode ser claramente distinguido dos demais, seja por cor,
tamanho, volume ou qualquer elemento que o diferencie. Na proposta de site para a
Classe foi aplicado essa teoria nos títulos dos textos, que são segregados por
tamanho, tomando destaque (Figura 7).
Figura 7- Texto dos Produtos
No verso do cartão de visitas (Figura 8) percebe-se também que os textos de
contato são visualizados como uma unidade por serem semelhantes e o QR Code
como uma unidade a parte, por estar distante e não ser semelhante.
Figura 8 - Verso do cartão de visita
Tem-se uma unificação quando os objetos ou o campo visual produzem
estímulos semelhantes. Pode-se notar essa unificação por proximidade ou
semelhança dos objetos que geram o estímulo visual.
28
Na Figura 9 percebe-se a unificação devido a semelhança das elipses e a
simetria nos eixos que a figura apresenta.
A proximidade é uma regra que mostra que elementos próximos tendem a ser
vistos como um todo, o que se acentua se eles forem semelhantes entre si. A
semelhança se dá quando os estímulos têm proporções próximas “seja por forma,
cor, tamanho, peso, direção, e outros” (GOMES FILHO, 2004, p.35).
Observa-se claramente a explicação de Gomes Filho na Figura 10, onde as
teclas brancas do teclado, por estarem próximas umas das outras, fazem com que o
observador as interprete como um único objeto.
No layout do novo website da empresa Classe nota-se a unificação no menu
localizado no topo (Figura 11) por semelhança e proximidade. O menu é notado
como um único elemento, uma vez que a tipografia utilizada tem mesmo tamanho,
cor e os elementos se encontram próximos uns dos outros.
Na página inicial (Figura 12) e no folheto (Figura 13) os três blocos que ilustram
os serviços que a empresa oferece possuem o mesmo tamanho e formato, sendo
semelhantes entre si, o que faz com que sejam notados como um único bloco de
Figura 10 - Exemplo de Proximidade Fonte: Gestalt do Objeto (GOMES FILHO, 2004, p. 34)
Figura 9 - Exemplo de unificação Fonte: Gestalt do Objeto (GOMES FILHO, 2004, p. 31)
Figura 11 - Menu do website
29
informações. O mesmo acontece com os produtos em destaque. Isso faz com que o
visitante da página encontre informações de maneira mais organizada, já que
assuntos semelhantes estão agrupados.
Figura 12 - Serviços na página inicial
Figura 13 - Serviços no folheto
Na teoria do fechamento tem-se o preenchimento visual de lacunas, dando
continuidade aos elementos agrupados e formando então, a unidade. Pode-se notar
a aplicação dessa teoria no painel administrativo do site (Figura 14), onde os
registros de cadastro de imagens do banner parecem formar um quadro.
30
A continuidade existe quando há entre o início e o fim de um objeto uma
harmonia entre as formas, seja por disposição física, cor ou tamanho. Isto permite a
quem visualiza traçar uma trajetória, preencher espaços, conectar os elementos,
buscando sempre a visualização da forma mais completa do objeto. Pode-se notar
esta teoria na proposta de logo da empresa (Figura 15), onde foi aplicado de cima
para baixo vermelho, laranja e azul remetendo à transição do quente para o frio,
mantendo a mesma forma e alinhamento de cima para baixo, o que torna a
composição harmoniosa.
A pregnância da forma possui um grau de avaliação que pode ser definido
como alto, médio ou baixo. O grau de pregnância de um objeto está diretamente
relacionado com a facilidade de compreendê-lo através de sua organização visual e
sua estruturação. No novo layout da Classe pode-se localizar e distinguir facilmente
os equipamentos com os quais trabalham na página de produtos (Figura 16). Isso
porque estão organizados de modo que o usuário saiba a qual produto pertence as
informações disponíveis, possuindo alta pregnância.
Figura 14 - Gerenciamento dos banners
Figura 15 - Nova logo proposta
31
4.2TEORIA DA COR
A cor é uma interpretação do cérebro a partir de um sinal recebido pelos
olhos24. O olho envia esse sinal ao cérebro ao receber luz que foi reemitida de um
objeto. Essa luz é emitida inicialmente por uma fonte luminosa através de ondas
eletromagnéticas.
Isaac Newton em seus estudos intitulados “Nova Teoria da Luz e Cores” de
1672 propunha que a luz é formada pela mistura de raios de diferentes
refratabilidades.
Em seu experimento ele dispôs um prisma que recebia um feixe circular
luminoso, ao ser atravessado pelo feixe, o prisma refratava a luz interiormente e do
outro lado deixava sair um espectro de várias cores (Figura 17). Essas cores eram
então recebidas por outro prisma que as “transformava” novamente no feixe de luz
original, assim provando que não era o prisma que coloria a luz.
24 Disponível em <http://pt.wikipedia.org/wiki/Teoria_das_cores>. Acesso em 7 mar. 2014.
Figura 16 - Página de produtos
32
Por ser um sinal que o olho envia ao cérebro, gerado através de um estímulo, a
cor pode ser percebida de diferentes maneiras por indivíduos diferentes, o que a
caracteriza como um fenômeno fisiológico25. Pelo menos é o que o diz a teoria de
Johann Wolfgang von Goethe publicada em 1810.
Goethe acreditava que as cores vão muito além de apenas ondas
eletromagnéticas como afirmava Newton. Em seu estudo ele explica que as cores
são ações e paixões da luz. O estímulo que o olho recebe da está intimamente
ligado com o indivíduo que a recebe, mexendo com seus sentidos, passando uma
mensagem ou trazendo lembranças à mente, como afirma Farina (1986): “Derivando
de hábitos sociais estabelecidos durante longo espaço de tempo, fixam-se atitudes
psicológicas que orientam inconscientemente inclinações individuais”.
Os pensamentos de Goethe e Farina ainda são reforçados por Damasceno
(2003) ao dizer que “O modo como a cor chega a nossos olhos, inevitavelmente, faz
com que o cérebro ainda perceba significados inconscientes que ela muitas vezes
transmite”.
Os estudos sobre teoria da cor serviram também para classificar as cores em
cores quentes e frias (Figura 18) cada uma remetendo a certas sensações em
diferentes culturas. O vermelho por exemplo, é uma cor mais estimulante,
normalmente remetendo a fogo, calor, paixão. Já o azul por exemplo passa uma
sensação de calma, lembrando do céu e mar por exemplo.
25 Disponível em <http://www.antroposofy.com.br/wordpress/a-teoria-das-cores-de-goethe/>. Acesso em 7 mar. 2014.
Figura 17 - Experimento de Newton Fonte: <http://conteudo.imasters.com.br/3617/02.jpg>. Acesso em 3 mar. 2014
33
As cores opostas ou complementares são aquelas que quando usadas muito
próximas passam uma sensação de choque, uma vez que não combinam, são as
que geram maior contraste.
Como mostrado anteriormente na Figura 1, o antigo website da Classe mostra
apenas um fundo vermelho bem expressivo que remete principalmente ao calor.
Essa cor, associada a logo da empresa que mostra um sol ao fundo, transmite a
ideia errônea de que a empresa oferece apenas soluções de aquecimento.
Figura 18 - Cores quentes e cores frias
Fonte: <http://www.blogdabah.com/2012/11/curso-de-makeup.html>. Acesso em 25 mai. 2014.
34
Para a criação da nova logo da empresa (Figura 19), foi utilizado o conceito de
cores quentes e frias juntamente a fim de transmitir o fato de a empresa trabalhar
com arrefecimento e aquecimento de ambientes. As cores azuis foram adicionadas
para remeter ao frio, uma vez que a empresa trabalha com aparelhos de ar
condicionado. Já o vermelho e o amarelo, que são cores quentes, foram utilizadas
pois a empresa trabalha com aquecedores. As cores utilizadas percorrem o círculo
cromático, indo do azul, passando pelo amarelo e chegando ao vermelho.
O website desenvolvido para a empresa também segue o mesmo esquema de
cores utilizadas na nova logo.
Baseado nos sistemas de cores RGB (utilizado por aparelhos eletrônicos que
emitem a luz) e no sistema de cores CMYK (utilizado por impressoras), pode-se
obter as cores da logo conforme mostrado na Figura 20.
Figura 19 - Nova logo para a empresa Classe
Figura 20 - Cores conforme sistemas RGB e CMYK
35
4.3 TEORIA DA COMUNICAÇÃO
De acordo com Melvin (1993) o homem primitivo já se comunicava, antes
mesmo de ter inventado as primeiras ferramentas, através de ruídos e com
movimentos do corpo. Após diversas eras, o corpo humano foi evoluindo o que
possibilitou a ele produzir diferentes sons permitindo a fala. Com a fala, surgiu a
linguagem e suas regras, isto permitiu ao homem um grande salto no aprendizado e
interação.
Em resumo, a mudança para a fala e a comunicação através de linguagem possibilitou modificações empolgantes da existência humana na medida em que sociedades em várias partes do mundo realizaram a transição de um estilo de vida de caça e coleta para a criação das grandes civilizações clássicas (DEFLEUR, 1993, p. 32).
Com o passar dos séculos, a escrita fonética surgiu. As mensagens
começavam então a serem transmitidas para outros indivíduos através de pedras
gravadas com símbolos e formas. Como esse não era um meio muito prático de se
transmitir mensagens devido a mobilidade, novos meios foram então desenvolvidos
a medida que a tecnologia avançava.
Com o surgimento dos computadores e as diversas mídias disponíveis, a
informação pode ter formatos muito mais atrativos. Hoje é possível armazenar
centenas de milhares de textos, imagens e vídeos em pequenos dispositivos.
A facilidade de transmissão de dados através da internet também provocou
sérias mudanças na forma como o ser humano se comunica atualmente. Wurman
(2005) afirma: “A internet neutraliza barreiras de classe social e econômica, de etnia
e de idade”.
Visto que a internet possibilita pessoas de vários locais do mundo acessarem
informações, independentemente da idade ou classe social, percebe-se a
importância da Classe Climatização em atingir esse público. Assim, uma vez que o
antigo website da empresa não continha informações relevantes para os internautas,
foi necessário refazer o website e preenche-lo com conteúdo.
Os textos para o site procuram explicar o que a Classe oferece aos seus
clientes, de maneira resumida, indo direto ao ponto, para que o internauta não perca
tanto tempo na leitura. As imagens escolhidas para o site são para exemplificar os
36
serviços que a empresa oferece, já que as imagens também são formas de transmitir
uma mensagem.
Na página inicial do website, foi feito um resumo de tudo que a empresa
oferece: serviços, produtos e um contato. Esse resumo serve para localizar a pessoa
que está acessando o site, com poucas, porém relevantes informações. O usuário
que deseja adquirir mais informações pode clicar no link “Saiba mais” conforme
mostrado na figura 21. Ele será então direcionado para uma página com mais
conteúdo específico.
Figura 21 - Botão Saiba Mais
37
4.4 SEMIÓTICA
Ao analisar a Semiótica de Pierce, Ugo Volli (2007) afirma ser perceptível que
Semiótica nada mais é que o estudo dos signos. Segundo Pierce seguido de Ugo,
signo é “algo que, para alguém, equivale a alguma coisa sob algum aspecto ou
capacidade”. É relacionado por três trilogias inseridas nessa percepção o
Representamem, o Signo e Interpretamem. Como mostrado na Figura 22:
Para Ugo (2007) o Representamem “Está no lugar de um conceito qualquer de
homem”. Ele defende que o Representamem é equivalente a qualquer objeto, mas
não se refere a todas as características, sendo segregado a partir do “desenho” do
objeto.
O Interpretante por sua vez é um pouco mais parecido, o que difere das
informações ditas anteriormente.
Seguindo essa explicação, um objeto só é considerado um signo de outra coisa
se o elemento observado signifique algo para quem o observa, não sendo possível
essa situação sem que exista a carga de conhecimento do observador. Segundo
Pierce (1993), essa explicação referente aos signos se dá a partir de três situações
que se distinguem entre Icônicas, Indicativas, e Simbólicas.
Um signo é Icônico (primeiridade) quando há semelhança entre os elementos
observados, podendo ser classificado como parte de um determinado grupo. O signo
Indicativo é quando o mesmo tem uma conexão física com o significado.
Signo Indicativo (secundidade) é bem próximo daquilo que representa, porém
ainda sem exatidão. “Entre outras palavras, o índice é um signo física ou
causalmente ligado ao próprio objeto [...]” (UGO, 2007).
Figura 22 - Semiótica de Pierce
38
Segundo Ugo (2007), signo Simbólico (terceiridade) “É o tipo de relação sígnica
mais importante e característico [...]”. O que ele quis dizer é que nesta fase da
semiótica é onde o observador já sabe identificar todas as questões referentes ao
que está sendo observado, bem como os detalhes e a classe a qual ele pertence.
A interpretação da Semiótica na mente humana funciona basicamente como
pode-se analisar na Figura 23. A Primeiridade se dá logo que observa-se o objeto
(neste caso distingue-se que é uma rosca). A Secundidade se dá a partir do
momento em que o olho começa a passar a informação ao cérebro de como é esse
objeto. Já a Terceiridade acontece quando o observador identifica esse objeto
apresentado (o cérebro já entende do que se trata e distingue a sensação que o
mesmo traz ao observador).
Figura 23 - Interpretação da Semiótica
A Semiótica de Pierce foi aplicada na criação do layout do website da Classe
Climatização primeiramente ao ser definido a logo da empresa. Foi pensado na
identificação fácil a partir de experiências passadas do usuário. Por ser um elemento
simples com fontes de traçados finos, passa-se a impressão de uma empresa séria
e que preza pela classe. O elemento colorido da logo foi desenvolvido com a
intenção de remeter a parte frontal de um aparelho ar condicionado, mais
especificamente o direcionador do ar, como mostrados na Figura 24.
39
No restante do layout, foram utilizados os mesmos padrões do logo, seja nas
formas ou nas cores, procurando sempre manter a padronização da página inicial
nas demais páginas, apresentadas no item a seguir.
4.5 COMPOSIÇÃO
“O processo de composição é o passo mais crucial na solução dos problemas visuais. Os resultados das decisões compositivas determinam o objetivo e o significado da manifestação visual e têm fortes implicações com relação ao que é recebido pelo espectador.” (DONDIS, 1999, p. 29)
Composição visual diz respeito a maneira como elementos visuais são
dispostos de forma a atingir um objetivo, transmitir uma mensagem ou até mesmo
passar uma sensação.
De acordo com Luciano Moreno (2008), no ambiente web, onde se faz
necessário transmitir uma mensagem ao usuário que visita a página, a organização
é essencial. Uma forma de garantir que as informações contidas em uma página
sejam captadas é hierarquizar seu conteúdo.
Moreno (2008) ainda diz que, no primeiro momento em que uma pessoa visita
uma página da web, ela primeiro enxerga o conteúdo como um todo, distinguindo
apenas formas e cores. Num segundo momento ela começa a distinguir as partes do
todo e se atenta ao que mais a interessa.
O ponto de partida para a criação da composição da página foi o sentido
habitual de leitura do visitante, ou seja, da esquerda para a direita, de cima para
Figura 24 - Direcionador de Ar
40
baixo, com base no artigo de Luciano Moreno: “O design equilibrado. A hierarquia
visual”26. Assim, a logo da empresa foi colocada logo no canto superior esquerdo do
site e, seguindo o sentido de leitura, os menus foram dispostos em ordem de
importância. A intenção é que o usuário navegue pelos menus de forma que saiba o
que a Classe faz, logo depois conheça os produtos com os quais trabalham, e
finalmente entre em contato a empresa a fim de solicitar um orçamento.
Pelo fato do menu não ser o elemento mais chamativo na composição do site,
perdendo força para o banner logo abaixo dele, é esperado, ainda seguindo a ideia
do sentido de leitura, que o usuário role a página em busca de mais conteúdo que
desprenda sua atenção. Novamente a ordem dos assuntos do menu se segue
também no decorrer da página.
Outro fator importante na composição é o uso das cores a fim de dar destaque
em algum assunto, com o intuito de chamar atenção. Porém, de acordo com Luciano
Moreno, “[...] há que ter cuidado com não abusar destas cores "fortes", destinando-
as somente a pequenas zonas especiais, já que sobrecarregam em excesso a vista
[...]”. Portanto, na página inicial, esse recurso foi utilizado apenas uma vez, a fim de
destacar o texto referente ao diferencial da empresa (Figura 25).
26 Disponível em <http://www.criarweb.com/artigos/design-equilibrado-hierarquia-visual.html>. Acesso em 6 abr. 2014.
41
Dessa forma espera-se obter uma fluidez na navegação do usuário de forma
que este obtenha toda a informação que necessita a respeito da empresa.
A Figura 26 mostra uma visão geral da página inicial do site, sendo que as
imagens do banner são apenas ilustrativas. A Figura 27 mostra a página Sobre a
Classe. A Figura 28 mostra a página Produtos e a 29 mostra a página Contato.
Figura 25 - Destaque na página inicial
42
Figura 26 - Visão geral da página inicial
43
Figura 27 - Página Sobre a Classe
44
Figura 28 - Página Produtos
45
Figura 29 - Página Contato
46
As figuras a seguir mostram as páginas do painel administrativo. Nesse painel
é possível gerenciar o conteúdo do site, como as fotos do Banner (Figura 30) da
página inicial e os produtos do catálogo (Figura 31), bem como gerenciar os
usuários que tem acesso a esse painel (Figura 32).
Figura 30 - Gerenciamento do Banner
47
Figura 31 - Gerenciamento dos Produtos
48
Figura 32 - Gerenciamento dos Usuários
49
5 USABILIDADE E ARQUITETURA DA INFORMAÇÃO
5.1 VELOCIDADE DE CARREGAMENTO
A velocidade de carregamento do website tem impacto direto na forma como o
usuário navega pelo site, até mesmo em seus fatores psicológicos e fisiológicos.
Além disso, sites com carregamento muito demorado fazem com que o usuário
desista de acessar a página e busque outro lugar, assim diminuindo índices de
venda ou impactando de forma negativa o intuito da criação da página27.
Para garantir que o visitante do site da Classe Climatização obtenha o melhor
desempenho de carregamento, as seguintes técnicas foram utilizadas:
a) Os códigos JavaScript e css utilizados foram minificados. Isto significa que
todas as partes do código que não geram impacto na sua execução foram
retiradas, como os espaços desnecessários, os parágrafos, linhas de
comentário, entre outros. Essa técnica pode parecer economizar poucos
bytes, mas ajuda no carregamento das páginas. A Figura 33 mostra um
arquivo JavaScript utilizado no website sem estar minificado e a Figura 34
mostra o mesmo arquivo, porém minificado. Nesse exemplo teve-se uma
diminuição de 27% no tamanho do arquivo.
27 De acordo com o artigo de Sérgio Lopes, disponível em <http://sergiolopes.org/tweetables-performance-web-otimizacoes/>. Acesso em 6 abr. 2014.
50
b) As imagem das páginas foram otimizadas. Removendo informações
desnecessárias dos arquivos de imagens, diminuindo suas resoluções sem
perder qualidade e jamais alterando suas dimensões diretamente no código,
garante uma incrível diminuição no seu tamanho em disco, diminuindo o
tempo de carregamento das páginas. A Figura 35 mostra uma imagem usada
no site. A imagem original tinha as seguintes dimensões em pixels: 4438 de
Figura 33 - Código Minificado
Figura 34 - Código Normal
51
largura por 3074 de altura, com uma resolução de 300 pontos por polegada.
Ela ocupa um espaço em disco de 2.867.574 bytes. Utilizar essa imagem
como está implicaria consideravelmente no carregamento da página. Porém
ela será utilizada no site com as seguintes dimensões em pixels: 400 de
largura por 277 de altura, com uma resolução de 72 pontos por polegada.
Reduzindo suas dimensões e removendo todas as informações
desnecessárias do arquivo, a imagem final ficou com apenas 20.215 bytes,
uma redução de mais de 70%.
5.2 ESTRUTURA DE INFORMAÇÃO E HIERARQUIZAÇÃO
A fim de garantir uma navegação objetiva as informações do website da Classe
foram divididas de forma a atender dois principais públicos: Os que chegam à página
através de buscadores e os que chegam a página através de indicação.
Normalmente o usuário que usa um serviço de busca digita palavras chave que
levam a diversos resultados. Algumas palavras que levariam um usuário ao site da
Classe seriam: climatização, ar condicionado, aquecimento, instalação de ar
condicionado. Em outras palavras, são pessoas que buscam um serviço específico,
seja para si ou para suas empresas, e que desconhecem a Classe, não tendo ainda
nenhuma credibilidade ou confiança nela.
No outro caso, pessoas que já foram atendidas pela Classe Climatização
podem indicar seus serviços a terceiros. Até mesmo através do cartão de visitas da
empresa, a pessoa pode encontrar o website. Nesse caso, o visitante já conhece,
Figura 35 - Imagem para o site
52
pelo menos em parte, os serviços que a empresa oferece, tendo como necessidade,
por exemplo, de saber os produtos com que trabalham.
Tomando como base esses dois públicos a informação foi dividida em duas
grandes partes: Informações à respeito da empresa e informações sobre seus
produtos. Assim, os menus foram organizados para atenderem esses públicos,
apresentando inicialmente a Home, que é a página que resume o conteúdo das
demais. Depois a página Quem Somos, que mostra informações a respeito da
empresa e aquilo que oferece, de maneira simples e direta. Após isso a página
Produtos, que mostra um catálogo de todos os produtos que a empresa trabalha,
com informações relevantes para a aquisição. E por último, a página contato, que
tem a finalidade de atrair esses dois públicos visitantes à entrar em contato com a
empresa, seja solicitando um orçamento ou sanando alguma dúvida.
5.3 ACESSIBILIDADE
A acessibilidade em páginas da web garante que pessoas com algum tipo de
deficiência que interfira na navegação possa acessar a página e obter as
informações que necessitam. Algumas das deficiências que dificultam o acesso ao
site são: “cegueira e baixa visão, surdez e baixa audição, dificuldades de
aprendizagem, limitações cognitivas, limitações de movimentos, incapacidade de
fala, foto sensibilidade e suas combinações”28.
Para garantir o acesso ao maior grupo possível de pessoas ao website da
Classe Climatização as seguintes medidas foram tomadas:
a) Todas as imagens relevantes e não-decorativas do site apresentam uma
alternativa em texto.
b) Fonte dos textos que contenham informações relevantes são de fácil leitura e
de grande contraste.
c) Os títulos das páginas possuem textos que descrevem brevemente o seus
conteúdos.
28 De acordo com artigo disponível em <http://www.ilearn.com.br/TR/WCAG20/>. Acesso em 6 abr. 2014.
53
d) As páginas foram programadas de maneira a funcionarem igualmente nas
versões atuais dos navegadores Internet Explorer8 e 9, Mozilla Firefox 29.0.x
e Google Chrome 34.0.x.
e) O website tem uma boa visualização em telas de desktops, notebooks, tablets
e smartphones, conforme o conceito de design responsivo descrito no item
5.3.1.
5.3.1 Design Responsivo
Design Responsivo é um conceito que tem como objetivo apresentar um
website de forma visualmente confortável em vários dispositivos, como desktops,
tablets, smartphones e seus variantes.
Largrone (2013) afirma que websites com características responsivas são
atraentes para públicos da atualidade, tendo em vista a forte introdução de novos
aparelhos com acesso à internet no mercado. Visto o interesse em atingir esse
público, o novo website da Classe foi desenvolvido de maneira responsiva.
Para que um website seja responsivo é necessário inserir Media Queries no
código CSS. Esses atributos servem para informar ao navegador quais estilos ele
deve utilizar em determinadas resoluções de tela.
Figura 36 - Exemplo de Media Query
O texto em destaque na Figura 36 mostra o uso de Media Query no código CSS do
website desenvolvido. Neste caso o parâmetro “max-width: 1024px” restringe ao
54
navegador utilizar os estilos entre as chaves caso a tela do usuário tenha uma
largura de no máximo 1024 pixels.
5.4 FLUXO DA INFORMAÇÃO
O fluxo das informações no site segue como na Figura 37:
5.5 TAXONOMIA
O que normalmente ocorre na questão taxonômica na web é baseado “em
duas unidades, os links, que apontam para algo, e as tags29, um apanhado de
links”30. Utilizados para organizar e classificar o conteúdo, neste caso, do site, e para
filtrar a busca dentro do mesmo.
29 Tradução do inglês: Etiquetas. São links comumente usados para levar o leitor do site a outras páginas que tratam do mesmo tema. 30 Disponível em <http://www.shirky.com/writings/ontology_overrated.html> (nossa tradução). Acesso em 6 abr. 2014.
Figura 37 - Fluxograma do website
55
Sendo assim, segundo Maria Luiza e Hagar Gomes31, há a dependência de,
basicamente três fatores:
a) Vocabulário-Padrão;
b) Critérios pré-estabelecidos para os termos a serem atribuídos;
c) Adequação ao veículo para o qual será desenvolvido, como os navegadores
de computadores e dispositivos móveis.
As taxonomias, ainda segundo os autores32, se caracterizam por conter uma
lista estruturada de conceitos e termos, organizados hierarquicamente,
possibilitando assim a recuperação de informação através da navegação.
A utilização desta forma de organização intelectual no site da empresa Classe
se deu principalmente por meio da classificação dos produtos na seção do catálogo.
Nela é possível filtrar os produtos por tipo. Na Figura 38 é possível ver os botões de
filtro. Ao clicar nos botões, a lista de produtos mostra apenas os produtos daquela
categoria. As seguintes categorias foram criadas: Aquecedor, Aquecedor de
Ambiente, Ar Condicionado, Boiler, Bomba e Placa Solar.
Figura 38 - Catálogo de Produtos
31 Artigo disponível em <http://www.dgz.org.br/ago08/Art_01.htm>. Acesso em 6 abr. 2014. 32Frederick van Amstel e Ernesto Gaia
56
5.6 OTIMIZAÇÃO
SEO (SearchEngineOptimization) ou Otimização para Mecanismos de Busca, é
o processo de melhorias necessárias, em uma página da web, para que ela seja
facilmente localizada por robôs de busca.
Este processo inclui a adição de palavras-chave, meta tags, imagem tags e a
otimização dos componentes de um site para que o mesmo seja acessível as
buscas e, por consequência, tenha uma melhor chance de indexação33.
Técnicas de SEO também incluem a otimização de scripts, HTML, CSS para
um carregamento mais rápido34.
No website da Classe foram utilizadas as seguinte técnicas:
a) Concentração no titulo da página através da tag H1 conforme Figura 39;
Figura 39 - Título utilizando tag H1
33 Inserção do site nos resultados da busca dos usuários de um mecanismo de busca 34 Disponível em <http://www.webopedia.com/TERM/W/website-optimization.html> (nossa tradução). Acesso em 6 abr. 2014
57
b) Utilização de listas ordenadas para listas e menus conforme Figura 40;
Figura 40 - Uso de listas em menus
c) Optimização de imagens com inserção de texto alternativo como mostrado na
Figura 41;
Figura 41 - Uso de texto alternativo
d) Utilização de tags IMG para imagens no corpo do site, como na Figura 42.
Figura 42 - Uso de tags IMG
Como essas técnicas devem ser feitas a nível de programação dos códigos,
todas elas serão apresentadas em partes propícias dos mesmos, devidamente
comentadas e entregues em CD juntamente com este projeto.
58
5.7 REDAÇÃO
Como o intuito do novo website da Classe Climatização é informar os serviços
oferecem, e com isso atrair novos clientes que solicitem um orçamento, o texto das
páginas deve ser claro e objetivo, como sugere Nielsen (2000): “Seja sucinto. Não
escreva mais que 50% do texto que escreveria para tratar do mesmo assunto em
uma publicação impressa”.
Krug (2006) reforça essa ideia chamando o texto desnecessário de “papo
bobo”:
“Papo bobo” é como papo furado – sem conteúdo, basicamente apenas uma forma de ser sociável. Porém, a maioria dos usuários Web não tem tempo para papo furado; eles querem ir direto ao que interessa. Você pode – e deve – eliminar tanto “papo bobo” quanto possível (KRUG, 2006, p. 46)
Os títulos também devem ser sugestivos e estar sempre destacados do texto a
fim de direcionar melhor a navegação do usuário. Ainda de acordo com Nielsen
(2000) os usuários do site precisam encontrar a informação que buscam
rapidamente, ou não permanecerão no site por muito tempo, o que torna menores as
chances de solicitar um orçamento.
No site da Classe, logo na página inicial encontram-se os serviços que ela
oferece escritos de forma sucinta. Caso o usuário queira mais informações sobre
serviços específicos, ele pode clicar no botão “Saiba mais” (Figura 43) e será
encaminhado para a página de serviços.
Figura 43 - Textos e botão Saiba Mais
59
5.8 NAVEGAÇÃO E MENUS
Os menus para o website da Classe foram feitos visando praticidade e
objetividade. O usuário não deve perder tempo tendo dúvidas à respeito do que é,
ou não, um botão que leva à outra página. Steve Krug enfatiza:
Outra fonte desnecessária de questionamentos são links e botões que não sejam óbvios. Como usuário, nunca devo gastar um milissegundo sequer pensando se alguma coisa pode ser clicada – ou não (KRUG, 2006, p.14)
O menu selecionado permanece em branco, informando o usuário a página
atual que se encontra, como mostrado na Figura 44. Os textos dos botões é curto e
objetivo, transmitindo de maneira concisa para qual página o usuário irá ao clicar
neles.
Na página de contato (Figura 44), onde é possível solicitar um orçamento, o
botão “Enviar” se destaca em relação ao texto e aos campos do formulário, pois ele
possui um contorno e cor diferenciada dos demais elementos da página.
Figura 44 - Página de Contato
60
A página inicial foi feita para permitir que o usuário chegue em todas as outras
páginas do website, baseado no pensamento de Krug à respeito desse assunto:
Páginas iniciais são – comparativamente – locais fixos. Quando você está em um site, a página inicial é como a estrela do norte. Ser capaz de clicar e voltar até ela lhe dá um novo recomeço (KRUG, 2006, p.58).
Krug (2006) ainda fala a respeito da padronização do site para que o usuário
saiba sempre o que esperar, permitindo que ela “aprenda” a usar o site logo da
primeira vez. Portanto todas as páginas foram feitas seguindo um padrão, onde o
menu aparece no topo e logo abaixo o conteúdo em um bloco único no centro.
61
6 TECNOLOGIA DE PROGRAMAÇÃO
6.1 JUSTIFICATIVA DA LINGUAGEM
6.1.1 Linguagem PHP
PHP (Hypertext Preprocessor) é uma linguagem server-side, ou seja,
executada apenas no servidor, de código aberto e popular em desenvolvimento de
sistemas web. Com ela o desenvolvedor pode coletar dados de formulários, criar
websites com conteúdo dinâmico e criar diversas outras operações.
O PHP também possui acesso a diversos tipos de bancos de dados. Assim o
desenvolvedor pode criar suas operações e optar por conectar a várias bases de
dados compatíveis com PHP.
Segundo o site www.phpmais.com35:
A linguagem PHP é uma das melhores e mais usadas linguagens de programação voltadas para internet. Apesar de parecer uma linguagem de segunda, a linguagem php pode ser usada em projetos pequenos como sites ou até em projetos grandes como portais, sistemas Web e gerenciadores de conteúdo.
Algumas de suas vantagens é seu rápido tempo de resposta, flexibilidade e
possuir uma linha de aprendizado relativamente tênue.
6.1.2 Linguagem JavaScript
JavaScript é uma linguagem de scripts para web que pode ser aplicada a
páginas HTML. Permite a execução de comandos do cliente, ou seja, em termos do
navegador e não do servidor web.
Através da linguagem JavaScript pode-se criar funções para executar
comandos dentro de formulários ou determinados campos em uma página web,
como por exemplo verificar se o preenchimento de um formulário está correto.
35 Disponível em <http://www.phpmais.com/linguagem-php-porque-escolher>. Acesso em 6 abr. 2014.
62
Para Pedro Mariano, “JavaScript é uma linguagem bastante poderosa. Duas
características notáveis da linguagem são a orientação a protótipos, e a
possibilidade de tratar funções como argumento ou resposta de métodos."36
6.1.3 SQL
SQL é sigla inglesa de “Structured Query Language” e em português significa
Linguagem de Consulta Estruturada. É uma linguagem de gerenciamento de banco
de dados.
A linguagem é um conjunto de comandos criado para interagir com os
principais bancos de dados do modelo relacional, entre eles o MySQL, SQL Server,
Oracle, Firebird, Microsoft Access, PostgreSQL e HSQLDB. Oferece ao usuário a
possibilidade de incluir, excluir, modificar e pesquisar informações com rapidez37.
A linguagem SQL foi utilizada nesse projeto pois o banco de dados escolhido
foi o MySQL, que possui uma ótima compatibilidade com PHP.
6.2 CÓDIGOS E DIAGRAMA DE BANCO DE DADOS
Conforme orientado pelo professor orientador deste projeto, todos os códigos,
devidamente comentados, e o diagrama do banco de dados serão entregues em CD
juntamente com este trabalho em arquivo PDF.
36 Disponível em <http://www.infoq.com/br/news/2010/10/javascript-server-side/>. Acesso em 6 abr. 2014. 37 Disponível em <http://www.w3schools.com/sql/>. Acesso em 6 abr. 2014.
63
6.3 FERRAMENTAS USADAS PARA PROGRAMAÇÃO
6.3.1 Adobe Dreamwaver
O Adobe Dreamwaver proporciona ao desenvolvedor web mais rapidez, junto a
uma interface simples, ferramentas com diversos recursos de edição de código e
modo design, que permite pré-visualizar a página em desenvolvimento. A ferramenta
também permite que o usuário desenvolva seus projetos seguindo os padrões atuais
da web.
Ele é um software de criação e edição de conteúdos para web que oferece
recursos para desenvolvimento em diversas linguagens de programação tais como:
HTML38, XSLT39, CSS40, JavaScript, XML41, ASP42, JSP43, PHP44, entre outras.
O software tem como principal característica oferecer mais flexibilidade e
rapidez no desenvolvimento de conteúdos web.
Figura 45 - Tela do Adobe Dreamweaver Fonte: Disponível em <http://img.ibxk.com.br/51502/153632.jpg>. Acesso em 20 mai. 2014.
38 Abreviação de Hyper Text Markup Language. 39 Abreviação de eXtensible Stylesheet Language for Transformation. 40 Abreviação de Cascade Style Sheet. 41 Abreviação de eXtensible Markup Language. 42 Abreviação de Active Server Pages. 43 Abreviação de Java ServerPages. 44 Abreviação de Hypertext Preprocessor, anteriormente conhecido como Personal Home Page.
64
6.3.2Xampp
O Xampp é uma ferramenta gratuita, que integra um servidor de aplicação
Apache45e ferramentas gerenciadoras de bancos de dados. Utiliza as linguagens
script PHP, Perl e consiste principalmente na base de dados MySQL.
O nome Xampp foi criado a partir da abreviação de X (para qualquer sistema
operacional), Apache, MySQL, PHP, Perl. A ferramenta é gratuita, fácil de usar e
está disponível para os sistemas operacionais Windows, GNU/Linux, Solaris e
MacOS X(Apple).
Figura 46 - Painel de controle do Xampp Fonte: Disponível em <http://www.freetrialdownloads.com/cdn/images/283-image-XAMPP.jpg>.
Acesso em 20 mai. 2014
45 É um dos mais conhecidos e bem sucedidos servidores web de código livre.
65
6.3.3 MySQL
O MySQL é um banco de dados de código aberto, compatível com a maioria
dos sistemas operacionais como Windows, Linux, Unix, FreeBSD e Mac OS X
Server e outros. Além de possuir uma interface simples, a ferramenta trabalha com a
linguagem SQL46, e pode ser utilizado em aplicações com grandes volumes de
dados.
Segundo o site oficialda ferramenta47, o MySQL é “[...] o banco de dados de
código aberto mais popular do mundo. [...] o MySQL pode ajudá-lo a oferecer alto
desempenho em aplicações de banco de dados escaláveis”48.
6.3.4 PhpMyAdmin
O phpMyAdmin é uma ferramenta software livre escrito em PHP que permite
administrar um banco de dados MySQL através de um navegador web. Possui uma
interface amigável e oferece ao usuário a possibilidade de criar operações SQL,
além de suportar diversas operações.
A ferramenta é ideal para o gerenciamento de banco de dados MySQL e para
integração com sistemas web programados em linguagem PHP. Além disso a
ferramenta é de código livre e permite ao usuário criar e alterar bases de dados,
tabelas e registro de forma simples e de fácil utilização.
Figura 47 - Tela inicial do PhpMyAdmin
46 Abreviação de Structured Query Language. Em português: Linguagem de Consulta Estruturada. 47 Disponível em <http://www.mysql.com>. Acesso em 6 abr. 2014. 48 Disponível em<http://www.mysql.com/products/>(Nossa tradução). Acesso em 6 abr. 2014.
66
7 AÇÕES PROMOCIONAIS
7.1 ESTRATÉGIAS DE PROMOÇÃO
Segundo Maria de Fátima (2006), estratégias de promoção dizem respeito “à
maneira como a empresa deverá comportar-se no sentido de melhor comunicar-se
com os seus clientes, tanto internos como externos”.
Para atingir esse objetivo, é necessário uma análise da empresa para saber
como ela se encaixa no mercado em relação a concorrência, qual é seu público-alvo
e o que seus clientes esperam dela. Dessa forma, foi realizado entrevistas com os
proprietários da empresa a fim de obter informações relevantes sobre a área que
atuam.
Segundo os proprietários da empresa, a Classe é uma empresa de pequeno
porte que atua principalmente em Curitiba e região metropolitana. De acordo com
eles, a empresa foca atualmente em clientes de médio e grande porte, como
construtoras, e deixando de focar no cliente residencial que deseja apenas comprar
aparelhos de ar condicionado ou aquecedor. Assim foi definido esse como o público-
alvo: empresas de médio e grande porte que necessitam de grandes instalações e
projetos de climatização. Muitas vezes são construtoras que já têm um projeto e
procuram uma empresa que possa executar os serviços de venda e instalação dos
produtos de climatização e, em alguns casos, prestar serviços de manutenção
posterior.
Como resultado da entrevista, notou-se carência de divulgação da marca da
empresa, exceto pelo site, porém este trazia praticamente nenhuma informação
relevante aos visitantes. Isto prejudica a relação da empresa com seus clientes, pois
estes acabam não a conhecendo, diminuindo a credibilidade que ela passa.
Para melhorar a imagem da empresa diante seu público alvo e para tentar
posicioná-la melhor no mercado em que atua, foram tomadas algumas ações de
publicidade apresentadas nos itens subsequentes.
67
7.2 PUBLICIDADE E PROMOÇÃO DE MARKETING
Gilmar Santos (2005) afirma que publicidade é:
[...] todo o processo de planejamento, criação, produção, veiculação e avaliação de anúncios pagos e assinados por organizações específicas (públicas, privadas ou do terceiro setor). Nessa acepção, as mensagens têm a finalidade de predispor o receptor a praticar uma ação específica (por exemplo, comprar um produto, abrir conta em um determinado banco, reciclar embalagens etc.) (SANTOS, 2005, p. 17).
A publicidade é uma parte que compõe o marketing. Após identificado área de
atuação da empresa, seus concorrentes diretos e público-alvo, é então tomado
algumas providencias para melhorar a relação empresa-cliente.
Uma das ações tomadas pela equipe para divulgar a marca da empresa à seus
clientes consiste na criação do website novo. De acordo com o artigo de Vinícius
Gonçalves49, a melhor forma de divulgar uma empresa na internet é “investindo em
um site com os serviços prestados, cartela de clientes, endereço e telefone”.
Gonçalves reforça a importância da clareza e objetividade do conteúdo e da
possibilidade de se solicitar um orçamento através da página. Ele justifica: “o mundo
hoje em dia é bastante informatizado e a maioria das pessoas dispensa um
orçamento por telefone ou fax, preferindo receber a proposta por e-mail”.
Portanto, na página inicial o visitante do site tem a sua disposição um resumo
de tudo o que a empresa oferece. É mostrado inicialmente seus serviços, uma breve
apresentação da empresa e posteriormente algumas marcas com as quais
trabalham. A ideia é que o internauta, em suas buscas pela internet, não perca tanto
tempo para identificar o que a Classe Climatização tem a oferecer.
Em praticamente todas as páginas do site, em que o usuário tem acesso, foi
inserido um botão “Solicite um Orçamento”. Essa atitude foi tomada devido ao
público-alvo da empresa, definido anteriormente. Uma vez que o público definido
não é o usuário residencial, que compra pequenas quantidades de equipamentos, os
preços dos produtos foram omitidos. As informações que foram dadas destaque são
principalmente as relacionadas aos serviços.
49 Disponível em < http://www.novonegocio.com.br/marketing/como-divulgar-uma-empresa-de-servicos-e-prospectar-clientes/>. Acesso em 6 abr. 2014.
68
Empresas de construção civil que encontrarem o website da Classe, vão poder
logo de início saber os serviços que ela presta, e então ir à página de contato para
solicitar um orçamento para seus projetos.
Outra ação tomada pela equipe foi a produção do material impresso para a
Classe com a intenção de reforçar na mente do consumidor, a marca da empresa.
Dados os recursos disponíveis, foi criado apenas um modelo de Pasta, Papel
Timbrado, Folheto e Cartão de Visitas, cada um explicado a seguir.
Todo material impresso foi criado tendo como base o mesmo conceito do
website. Ou seja, ser conciso e direto, utilizando as mesmas cores da logo para se
criar um padrão de fácil memorização por parte dos clientes.
O representante comercial, e proprietário da Classe, imprime a proposta de
orçamento em várias folhas e leva ao cliente na visita agendada. Essa foi uma boa
oportunidade encontrada para reforçar a marca. Com a criação do papel timbrado
(Figura 48), cada folha utilizada leva em si a logo impressa.
Figura 48 - Papel Timbrado
69
Além disso, pode-se colocar a proposta impressa dentro da pasta (Figura 49)
que foi desenvolvida, juntamente com o folheto, o que garante uma melhor
apresentação do material nas visitas ao cliente.
A pasta contém informações sobre a empresa na parte de trás, juntamente com
um QR Code50 que contém um link para visualizar o endereço da Classe no mapa
online da Google.
A última solução de publicidade apresentada para a empresa foi a criação do
cartão de visitas (Figura 50). Ele contém as principais informações para entrar em
contato com a Classe, o que estreita o relacionamento da empresa com o cliente.
50 QR Code é um código de barras bidimensional. Ele pode ser convertido em texto por qualquer aparelho celular com câmera que interprete esses códigos.
Figura 49 - Pasta
70
No cartão de visitas também foi empregado um QR Code, porém esse possui
outra finalidade. O cliente que possui um smartphone com câmera pode apontá-lo
para o código no cartão e verá na tela do aparelho as informações de contato da
Classe. Dessa forma o dispositivo permite armazenar essas informações como um
Novo Contato no aparelho, sem que o usuário tenha que digitá-las manualmente.
Figura 50 - Cartão de Visitas
71
O folheto (Figura 51) foi feito pensando nos novos clientes. Ele divulga de
maneira breve o que a Classe oferece, bem como os meios de contato, podendo ser
entregue em uma primeira visita a um cliente.
Figura 51 - Folheto
72
8 PROPOSTA DE MANUTENÇÃO
8.1PROJEÇÃO DE MANUTENÇÃO DO PRODUTO
O website desenvolvido para a Classe permite a inserção de novos produtos no
catálogo e alteração das fotos do banner da página inicial. Isso faz com seja
necessário manutenção do website.
A equipe de desenvolvimento adicionará alguns produtos de exemplo no
catálogo e algumas imagens de exemplo no banner do site. A inserção dos demais
produtos e futuras imagens do banner são de responsabilidade da empresa Classe.
Será agendado com a empresa uma data em comum acordo, na qual será
oferecido um treinamento de até 3 horas com o quadro de funcionários da empresa
que manterá o site. Esse treinamento inclui: uma apresentação do website e sua
finalidade; instruções de como inserir novos cadastros; esclarecimento de dúvidas
gerais.
Juntamente com o treinamento ofertado, será entregue um manual impresso
que contém informações para o uso correto do painel administrativo do website.
Os custos de impressão dos materiais de divulgação da empresa – sendo
estes: Cartão de Visita, Papel Timbrado, Folheto e Pasta – bem como seu uso é de
total responsabilidade da Classe. Todos os arquivos dos materiais de divulgação
serão entregues à empresa para futuras impressões.
Além disso, será oferecido suporte por até 30 dias corridos, contados a partir
da data de entrega do website. Esse suporte inclui correção de erros consequentes
de falhas no desenvolvimento e esclarecimento de dúvidas quanto ao uso do
website.
Decorridos os 30 dias, a Classe poderá entrar em contato com a equipe para
contratação de serviços, seja para alteração do website, inserção de novas
funcionalidades, ou suporte, após avaliados os custos envolvidos.
73
8.2 CRONOGRAMA
Como descrito no item anterior, será oferecido suporte à empresa Classe por
até 30 dias corridos, contados a partir da data de entrega do website.
O website, juntamente com os arquivos dos materiais de divulgação e manual
impresso, serão entregues no dia 01 de Junho de 2014 ou antes, mediante
disponibilidade. Portanto, o prazo para o suporte oferecido se encerrará no dia 30 de
Junho de 2014.
8.3 PLANO DE MARKETING
O Plano de marketing serve para identificar as ameaças, fraquezas, forças e
oportunidade que o mercado proporciona ao Empreendedor. Com ele a empresa
pode se posicionar de uma forma mais segura e melhor em relação à concorrência.
Segundo Philip Kotler (2002) o plano de marketing torna a empresa menos
vulnerável às crises, pois a permite prever algumas situações adversas. Soluções
para problemas como falta de capital, falta de clientes e poucas vendas também
podem surgir de um planejamento coerente e consistente (KOTLER, 2002).
Independente do empreendimento a reformulação do plano tem que ser feita
anualmente, e as considerações são baseadas nos 4 Ps do marketing (Figura 52)
definidos pelo Prof. Jerome McCarthy, no início dos anos 60.
74
Figura 52 - Os 4 Ps do Marketing
8.4 PLANO DE AÇÃO DA EMPRESA CLASSE
8.4.1 Análise Interna
A Classe tem como objetivo conquistar o melhor lugar no mercado nesse ramo,
pois não trabalham apenas com aquecimentos e sim com todo tipo de climatização,
que é um diferencial da empresa.
8.4.2 Análise de Mercado
A empresa Classe está inserida no ramo de climatização.
75
8.4.3 Analise da Concorrência
A Classe tem como concorrência três principais empresas, são elas:
3b Aquecedores, Aquamec e Rei dos Aquecedores.
8.4.4 Análise do Público
O público alvo são empresas de médio e grande porte, como construtoras.
8.4.5 Problemas
Falta de divulgação da empresa, em sites, em panfletos, cartão de visita, Pasta
de orçamento, Papel timbrado a empresa ainda não tem uma identidade corporativa.
8.4.6 Objetivos
Direcionar seu planejamento para atingir clientes maiores em longo prazo.
8.4.7 Posicionamento
A empresa prioriza o atendimento, possuindo funcionários com grande
conhecimento sobre o produto de venda e localizados em uma avenida principal.
8.4.8 Estratégia
Foi investido principalmente na web e em material impresso.
8.4.9 Proposta de Plano de Ação
O prazo estipulado para o plano de ação é de 3 meses, podendo ou não ser
renovado, à critério do cliente. Este plano propõe oferecer os seguintes itens:
76
a) Identidade Corporativa: Tela de descanso, Crachá, Tapete, Fachada,
Uniforme.
b) Promocionais: Brinde, folheto, cartões de aniversários para cliente e
colaboradores, cartão de boas vindas.
c) Publicidade: Jornal, revistas, rádios, outdoor.
d) Internet: Alteração de site, gerenciamento de conteúdo, banner virtual, folheto
eletrônico, redes sociais.
e) Marketing: Programas de fidelidade.
9 DOCUMENTAÇÃO TÉCNICA
A documentação do website comtempla o manual de uso da ferramenta. Este
manual terá sua versão digital em PDF entregue em. A versão impressa do manual
será entregue à empresa juntamente com o website e demais materiais.
9.1 MANUAL DO USUÁRIO DO SITE
O Manual do Usuário do site tem o intuito de auxiliar um usuário a utilizar o
sistema, ou até mesmo sanar dúvidas que possam aparecer durante a utilização.
Este manual conta com páginas específicas e detalhadas de cada um dos itens
que podem ser alterados. A Figura 53 mostra a página de alteração das fotos do
banner rotativo da página inicial do site.
77
Para alterar um banner é necessário clicar no botão editar, representado pela
figura de um lápis, conforme visto na Figura 53. Os dados referentes ao banner
então aparecem nos seus respectivos campos, onde o usuário pode fazer as
alterações e depois clicar no botão “Alterar” para confirmar.
Figura 53 - Cadastro de Banners
78
A Figura 54 mostra a página de cadastro de produtos.
Figura 54 - Cadastro de Produtos
79
Na janela de cadastro de produtos os campos “Imagem do Produto”, “Nome do
Produto”, “Categoria do Produto”, “Recomendações”, “Descrição Breve” e “Descrição
Detalhada” são campos obrigatórios. Isto significa que se o usuário não os
preencher ele não conseguirá cadastrar, ou até mesmo alterar, um produto.
Nessa tela, o botão editar, representado pela figura de um lápis, permite alterar
informações de algum produto. O botão excluir, representado por uma lata de lixo,
permite excluir um produto da lista.
Finalizando com a página de Usuários (Figura 55), que permite o cadastro dos
usuários do sistema. Os campos “Nome do Usuário”, “Usuário” e “Senha”, são
campos de preenchimento obrigatório, seja para um cadastro novo ou para alteração
de um cadastro. Para se alterar um registro, o usuário clica no botão editar,
representado pela figura do lápis. Para se excluir um registro, é necessário clicar no
botão excluir, representado pela figura de uma lata de lixo.
Figura 55 - Cadastro de Usuários
80
10 CONSIDERAÇÕES FINAIS
O intuito do desenvolvimento desse projeto visava a inserção da empresa
Classe na web de maneira competitiva perante seus concorrentes. O website
anterior apresentava falhas quanto à comunicação entre a empresa e seus clientes.
Com o novo site, a empresa atinge a parcela de clientes que utiliza a internet
como ferramenta de busca de informações. Agora o internauta pode se informar
sobre os serviços que a empresa oferta, bem como os produtos com os quais
trabalha.
Além disso, ao usuário que interessar, poderá ser solicitado um orçamento
diretamente através do website, o que era até então impossível, já que nem mesmo
havia um e-mail para contato divulgado na página antiga.
Espera-se com o painel administrativo do website uma maior facilidade dos
funcionários da empresa em atualizar o conteúdo do catálogo de produtos. Dessa
forma, se a empresa deixar de trabalhar com um produto, ou começar a trabalhar
com uma nova marca, seus clientes poderão saber.
Como não havia material de publicidade, notou-se também uma falha da marca
em ser fixada entre os clientes. Muitos dos clientes eram apenas contatos de
indicação, e lembravam da empresa pelos proprietários e não pela marca em si.
Com a criação do material impresso, os proprietários e representantes da empresa
poderão divulgar a marca em visitas aos clientes, deixando seu cartão de visita ou
folheto. O uso do papel timbrado em nos documentos impressos também auxiliará
nessa tarefa.
81
REFERÊNCIAS
BHERING, Marcia Maria, Gestão Eficiente do Tempo - Aprenda como gerenciá-lo a seu favor. Minas Gerais. AS Sistemas, 2013.
CORREA, Jacinto. Marketing - a Teoria Em Pratica. Rio de Janeiro: Senac Nacional, 2009.
DAMASCENO, Anielle. Webdesign: teoria e prática. Florianópolis: Visual Books, 2003.
DEFLEUR, Melvin Lawrence. Teorias da Comunicação de Massa. Rio de Janeiro: Zahar, 1993.
DONDIS, Donis A. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1999.
FAGAN, Garrett G. SergiusOrata: Inventor of the Hypocaust? Phoenix: Classical Association of Canada, 1996
FARINA, Modesto. Psicodinâmica das cores e comunicação. São Paulo: Edgar Blücher, 1986.
GOMES FILHO, João. Gestalt do Objeto. São Paulo: Escrituras Editora, 2004.
KOTLER, Philip. Marketing Places. New York: The Free Press, 2002.
KRUG, Steve. Não me Faça Pensar! Rio de Janeiro: Editora Alta Books, 2006.
MEIRELES, Manuel. Ferramentas Administrativas para Identificar, Observar e Analisar Problemas: Organizações com Foco no Cliente. São Paulo: Arte & Ciência, 2001.
NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Elsevier, 2000.
NÓBREGA BARBOSA, Maria de Fátima. Introdução ao marketing para empresa de pequeno porte. Edição Eletrônica, 2006.
82
PIERCE, SharlesSanders. Semiótica e Filosofia. São Paulo: Cutix, 1993.
PINHO, José Benedito. Publicidade e vendas na internet: técnicas e estratégias. São Paulo. Summus Editorial, 2000.
QUIRINO, Waldir Ferreira. Utilização Energética de Resíduos Vegetais. LBF/IBAMA, 2002.
SANTOS, Gilmar. Princípios da publicidade. Belo Horizonte: Editora UFMG, 2005.
SAY, M. G. Eletricidade Geral - Dispositivos e Aplicações. Hemus, 2004
STONE, Bob. Marketing Direto. São Paulo: Nobel, 1992.
US NAVY. Construção Civil Teoria e Prática 2. Hemus, 2005.
VOLLI, Ugo. Manual de Semiótica. 2007.
WURMAN, Richard Saul. Ansiedade de Informação 2. São Paulo: Editora de Cultura, 2005.
Adobe. Disponível em <http://www.adobe.com>. Acesso em 5 mar. 2014.
Adobe. Disponível em <http://www.adobe.com/br/products/photoshop.html>. Acesso em 5 mar. 2014.
AMSTEL, Frederick van. Taxonomia em Websites. Disponível em <http://pt.slideshare.net/usabilidoido/taxonomia-em-websites>. Acesso em 7 abr. 14.
Apache Friends. Disponível em <http://www.apachefriends.org/pt_br/about.html>. Acesso em 5 mar. 2014.
CAMPOS e GOMES, Maria Luiza de Almeida e Hagar Espanha. Taxonomia e Classificação: o princípio de categorização. Disponível em <http://www.dgz.org.br/ago08/Art_01.htm>. Acesso em 7 abr. 14.
83
COMPUTER WORLD. Internet alcança 215 milhões de domínios em todo mundo. Disponível em <http://computerworld.com.br/telecom/2011/09/26/internet-alcanca-215-milhoes-de-dominios-em-todo-mundo/>. Acesso em 4 abr. 2014.
FELIPINI, Dailton. Oportunidades de negócios na Internet. 2003, Disponível em <http://www.e-commerce.org.br/artigos/oportunidades_negocios.php>. Acesso em 4 abr. 2014.
FELIPINI, Dailton. A evolução dos sites de busca. 2004, Disponível em <http://www.e-commerce.org.br/artigos/evolucao_sites_de_busca.php>. Acesso em 4 abr. 2014.
Folha UOL. Setor de ar-condicionado estima crescimento de 8% neste ano. Disponível em <http://classificados.folha.uol.com.br/imoveis/2013/09/1344302-setor-de-ar-condicionado-estima-crescimento-de-8-neste-ano.shtml>. Acesso em 5 mar. 2014.
GAIA, Ernesto. Taxonomia no mundo Web. Disponível em<http://matchboxtech.wordpress.com/2011/02/16/taxonomia-no-mundo-web/>. Acesso em 7 abr. 14.
Javascript - Introdução à linguagem Javascript. Disponível em <http://pt.kioskea.net/faq/2680-javascript-introducao-a-linguagem-javascript>. Acesso em 6 abr. 14.
Manual do PHP. Disponível em <www.php.net>. Acesso em 6 abr. 14.
MORENO, Luciano. O design equilibrado. A hierarquia visual. Disponível em <http://www.criarweb.com/artigos/design-equilibrado-hierarquia-visual.html>. Acesso em 6 abr. 2014.
OLIVEIRA, Priscila. Adobe Dreamweaver: conheça todas as vantagens deste software revolucionário. Disponível em <http://www.freewords.com.br/adobe-dreamweaver-conheca-todas-as-vantagens-deste-software-revolucionario>. Acesso em 5 mar. 2014
PhpMyAdmin. Disponível em <http://www.phpmyadmin.net/home_page/index.php>. Acesso em 5 mar. 2014.
Porque escolher a linguagem PHP? Disponível em <http://www.phpmais.com/linguagem-php-porque-escolher/>. Acesso em 6 abr. 14.
84
Priberam. Disponível em <http://www.priberam.pt>. Acesso em 3 mar. 2014.
REYES, Richard. Definição de sistemas de ventilação forçada em prédios residenciais. Disponível em <http://www.ehow.com.br/definicao-sistemas-ventilacao-forcada-predios-residenciais-info_115360/>. Acessoem 3 mar. 2014
SHIRKY, Clay. Ontology is Overrated: Categories, Links, and Tags. Disponível em <http://www.shirky.com/writings/ontology_overrated.html>. Acesso em 7 abr. 14.
Stellaar. Disponível em <http://www.stellaar.com/#!limpeza-de-dutos/c11xg>. Acesso em 5 mar. 2014.
TEIXEIRA, José Ricardo. Introdução ao MySQL. Disponível em <http://www.devmedia.com.br/introducao-ao-mysql/27799>. Acesso em 5 mar. 2014.
VAZ, Marcela. Faça o download do Adobe Photoshop CC, um editor de imagens completo. Disponível em <http://www.techtudo.com.br/tudo-sobre/s/adobe-photoshop.html>. Acesso em 5 mar. 2014.
VAZ, Michelle. A psicologia da gestalt. Disponível em <http://www.psicologiamsn.com/2013/03/a-psicologia-da-gestalt.html>. Acesso em 5 abr. 2014.
Wikipedia. Disponível em <http://pt.wikipedia.org/wiki/AVAC>. Acesso em 3 mar. 2014.
Wikipedia. Disponível em <http://en.wikipedia.org/wiki/Hypocaust>. Acesso em 3 mar. 2014.
