PLANEJAMENTO DE COMUNICAÇÃO DO INSTITUTO RUDOLF STEINER

FACULDADES OPET TECNOLOGIA EM PRODUÇÃO MULTIMÍDIA

PIM 23 PLANEJAMENTO DE COMUNICAÇÃO INSTITUTO RUDOLF STEINER

Curitiba 2014

ALESSANDRO MIRA ALVES IVAN SEQUEIRA PETRY KETHELLYN SILVEIRA DOS SANTOS MARLON HENRIQUE RODRIGUES

PIM 23 PLANEJAMENTO DE COMUNICAÇÃO INSTITUTO RUDOLF STEINER

PIM (Projeto de Integração com o Mercado), apresentado a Faculdades OPET, como parte das exigências para a obtenção do título de Curso Superior de Tecnologia em Produção Multimídia.

Professora Orientadora: Raquel Susin.

Curitiba, 14 de novembro de 2014.

SUMÁRIO

1

INTRODUÇÃO .................................................................................................. 7

1.1

INTRODUÇÃO AO ASSUNTO ................................................................... 7

1.2

JUSTIFICATIVA .......................................................................................... 7

1.3

ESTRATÉGIAS ........................................................................................... 8

1.4

PROPOSTA DE SOLUÇÃO........................................................................ 8

1.5

RESULTADOS ESPERADOS .................................................................... 9

1.6

HISTÓRICO DO SEGMENTO .................................................................... 9

1.7

DESCRIÇÃO DETALHADA DA EMPRESA .............................................. 10

2

FUNDAMENTAÇÃO TEÓRICA ...................................................................... 11

2.1

MARKETING............................................................................................. 11

2.2

MARKETING DIGITAL .............................................................................. 12

2.3

MARKETING PARA ONGS ...................................................................... 13

2.4

TEORIA DA COMUNICAÇÃO .................................................................. 14

2.5

SEMIÓTICA .............................................................................................. 15

2.6

GESTALT.................................................................................................. 18

2.7

TEORIA DA COR ...................................................................................... 21

3 3.1

FERRAMENTAS DE DESENVOLVIMENTO .................................................. 25 PROGRAMAS E LINGUAGENS UTILIZADAS ......................................... 25

3.1.1

COREL DRAW X6 ................................................................................. 25

3.1.2

ADOBE ILLUSTRATOR CS6 ................................................................ 26

3.1.3

ADOBE PHOTOSHOP CS6 .................................................................. 26

3.1.4

HTML5 ................................................................................................... 27

3.1.5

CSS3 ..................................................................................................... 28

3.1.6

JQUERY ................................................................................................ 28

3.1.7

PHP ....................................................................................................... 29

3.1.8

BANCO DE DADOS MYSQL ................................................................ 30

3.1.9

PHPMYADMIN ...................................................................................... 30

3.1.10

PLATAFORMA WORDPRESS .............................................................. 31

3.1.11

NOTEPAD ++ ........................................................................................ 32

3.1.12

BOOTSTRAP......................................................................................... 32

3.2

CRONOGRAMA ....................................................................................... 33

3.3

METODOLOGIA ....................................................................................... 35

4

AÇÕES PROMOCIONAIS .............................................................................. 38

4.1

WEBSITE .................................................................................................. 38

4.1.1

WIREFRAME ............................................................................................ 39

4.1.1.1.

USABILIDADE E ARQUITETURA DA INFORMAÇÃO .......................... 51

4.1.1.1.1.

TAXONOMIA ......................................................................................... 51

4.1.1.1.2.

OTIMIZAÇÃO ........................................................................................ 52

4.1.2

DESIGN .................................................................................................... 53

4.1.2.1.

TIPOGRAFIA ......................................................................................... 53

4.1.2.2.

CORES .................................................................................................. 54

4.1.2.3

PÁGINAS ............................................................................................... 56

4.1.3

PROGRAMAÇAO ..................................................................................... 65

4.2

FLYERS E CARTAZES............................................................................. 66

4.3

FACEBOOK .............................................................................................. 74

5

CONCLUSÃO ................................................................................................. 76

6

REFÊRENCIAS BIBLIOGRÁFICAS ............................................................... 77

LISTA DE FIGURAS Figura 1 – A tríade..................................................................................................... 16 Figura 2 - Princípio da proximidade de Gestalt ......................................................... 19 Figura 3 - Princípio da semelhança de Gestalt.......................................................... 19 Figura 4 - Princípio da continuidade de Gestalt......................................................... 20 Figura 5 - Princípio da pregnância de Gestalt ........................................................... 20 Figura 6 - Princípio da clausura de Gestalt ............................................................... 21 Figura 7 – Diferença entre CMYK e RGB .................................................................. 24 Figura 8 – Esquema de Escala de Tonalidades RGB e CMYK ................................. 24 Figura 9 – Wireframe da página “Home” ................................................................... 39 Figura 10 – Análise do Wireframe da página “Home” ............................................... 40 Figura 11 - Análise do Wireframe da página “Home” ................................................ 41 Figura 12 – Wireframe da página “O Instituto” .......................................................... 42 Figura 13 – Análise Wireframe da página “O Instituto” ............................................. 43 Figura 14 – Wireframe da página “Antroposofia”....................................................... 44 Figura 15 – Análise do Wireframe da página "Antroposofia" ..................................... 45 Figura 16 – Wireframe da página “Agenda” .............................................................. 46 Figura 17 – Análise do Wireframe da página “Agenda” ............................................. 47 Figura 18 - Wireframe da página “Artigos” ................................................................ 48 Figura 19 - Wireframe da página "Contato" ............................................................... 49 Figura 20 – Análise do Wireframe da página “Contato” ............................................ 50 Figura 21 – Mapa do Site .......................................................................................... 51 Figura 22 – Fonte do Site .......................................................................................... 53 Figura 23 – Fonte do Site .......................................................................................... 54 Figura 24 – Logo do Instituto Rudolf Steiner ............................................................. 54 Figura 25- Paleta de Cores do Site ........................................................................... 55 Figura 26 – Design da página “Home” ...................................................................... 56 Figura 27 – Análise do Design da página “Home” ..................................................... 57 Figura 28 – Análise do Design da “Home” ................................................................ 58 Figura 29 – Design da página “O Instituto” ................................................................ 59 Figura 30 – Análise do Design da página “O Instituto” .............................................. 60 Figura 31 - Design da página “Antroposofia” ............................................................. 61

Figura 32 - Design da página “Agenda” .................................................................... 62 Figura 33 - Design da página “Artigos” ...................................................................... 63 Figura 34 - Design da página “Contato” .................................................................... 64 Figura 35 – Logos das linguagens e frameworks utilizados na programação ........... 65 Figura 36 - "Encontros Preparatórios para formação em Pedagogia Social” ............ 66 Figura 37 - Paleta de cores e código CMYK utilizados na elaboração do flyer. ........ 67 Figura 38 - Flyer “Pintando os tons e Cantando as cores” .................................... 68 Figura 39 - Paleta de cores e código CMYK utilizados na elaboração do flyer ......... 69 Figura 40 – Flyer “Assembleia Geral do Instituto Rudolf Steiner”.............................. 70 Figura 41 - Paleta de cores e código CMYK utilizados na elaboração do flyer ......... 71 Figura 42 - Flyer "Rudolf Steiner e a fundação dos Novos Mistérios Cristãos" ......... 72 Figura 43 - Paleta de cores e código CMYK utilizados na elaboração do flyer ......... 73

1 INTRODUÇÃO

1.1

INTRODUÇÃO AO ASSUNTO Esse trabalho tem como objetivo colocar em prática todos os conhecimentos

adquiridos durante o curso de Tecnologia em Produção Multimídia. Para tanto, uma equipe de quatro alunos foi formada com o objetivo de fazer um plano de comunicação para uma organização. Para a realização desse trabalho foi escolhida a associação Instituto Rudolf Steiner, uma organização sem fins lucrativos, formada por pessoas comprometidas com a Antroposofia, ciência espiritual desenvolvida por Rudolf Steiner, através de ações orientadas para a divulgação dos princípios antroposóficos e da formação, educação, saúde e bem-estar de crianças, jovens, adultos e idosos. Por meio de realização de reuniões com os responsáveis pela associação, será feita uma análise e assim identificadas as necessidades de comunicação que o Instituto requer. Com essas informações, um planejamento de comunicação completo será traçado e efetivado com as técnicas adquiridas durante os dois anos de curso.

1.2

JUSTIFICATIVA Explorar o setor de empresas sem fins lucrativos, colocando em cheque a

implantação de estratégias de marketing com poucos recursos financeiros, bem como o desafio de tentar arrecadar verbas para a associação por meio de ferramentas de comunicação. Visto que o Instituto Rudolf Steiner necessita de pessoas que o mantenham funcionando e que essas só ficam sabendo de eventos, reuniões e novidades se forem comunicadas, podemos afirmar que a essência dele é a comunicação. Portanto, um dos pontos chave para o sucesso de uma associação como essa é uma campanha de comunicação sólida e concisa. Isso é motivacional e desafiador para a realização do trabalho.

7

1.3

ESTRATÉGIAS

Este trabalho tem como objetivo sanar as necessidades do cliente, bem como aprimorar e aplicar técnicas e conhecimentos adquiridos durante o curso de Produção Multimídia. Para cumprir com esses objetivos foram adotadas as seguintes estratégias: refazer website (melhorar o design e a arquitetura de informações); aumentar a receita do Instituto por meio de ferramentas de comunicação; elaborar mailmarketing, cartazes e flyers para divulgação de eventos; enfatizar as redes sociais; desenvolver cartões de visita e folders institucionais novos.

1.4

PROPOSTA DE SOLUÇÃO A equipe irá se empenhar em solucionar as necessidades do Instituto, através

de ferramentas específicas: 

Refazer website: usando a plataforma Wordpress, criando um website com design limpo e usabilidade bem trabalhada, seguindo os princípios da arquitetura orgânica. O usuário precisa entrar no site e assimilar facilmente todas as informações expostas nele. Outro diferencial será o design responsivo, ou seja, o site terá visualização adaptada a qualquer tipo de aparelho eletrônico;



Aumentar a receita do Instituto: através de publicidade buscando maneiras de gerar receita sem poluir o site com anúncios inconvenientes.



Elaborar mailmarketing, cartazes e flyers: divulgação de eventos, cartões de visita e folders institucionais novos serão elaborados com a utilização de softwares atualizados, bem como usando princípios de Marketing, Gestalt, Teoria das Cores, Design de Interação, desenvolvendo assim materiais de alta qualidade;



Dar mais ênfase para as redes sociais: reformulação da página do Facebook já existente e gerar conteúdo relevante para atrair usuários. Caso haja necessidade, outras redes sociais serão criadas.

8

1.5

RESULTADOS ESPERADOS O

Planejamento

de

Comunicação

a

ser

elaborado

visa

aumentar

qualitativamente e quantitativamente a eficiência e eficácia da comunicação que o Instituto tem para com seus clientes, ou seja, permitir que o fluxo de informações que a Organização emite seja recebido pelo usuário com o mínimo de ruídos possível. Os outros resultados, que serão consequências desse primeiro, são: aumentar a receita do Instituto diretamente – promovendo a divulgação de prestadores de serviços e parceiros relacionados com a Antroposofia dentro do website, e indiretamente - fazendo com que mais pessoas sejam comunicadas sobre os eventos realizados.

1.6

HISTÓRICO DO SEGMENTO

O Instituto Rudolf Steiner é uma associação, ou seja, segundo Camargo (2001), é um grupo de pessoas que tem algum objetivo em comum, podendo ter fins econômicos ou não, com capital ou sem, mas nunca visando lucro. A associação é um tipo de organização que está inserida no Terceiro Setor, o qual, segundo Fernandes (1995) pode ser definido como um conjunto de organizações não governamentais e sem fins lucrativos que visam praticar a caridade e a filantropia. Para realização desse trabalho é interessante entender o contexto do Terceiro Setor no Brasil, bem como ter a noção da realidade do segmento que será atendido. Em sua maioria, as organizações brasileiras do Terceiro Setor surgiriam dos movimentos sociais que eram contra a ditadura ou foram criadas pra suprir alguma carência social que o Estado não conseguia suprir (VILLAS BOAS NETO, 2003). O Instituto possui uma natureza diferente, explorando um assunto bem específico, a Antroposofia, direcionado a um público de nicho. Mesmo assim, um desafio recorrente nessas organizações também é encontrado no Instituto: como adaptar técnicas administrativas e de comunicação de organizações privadas para organizações sem fins lucrativos com objetivo de tornálas mais profissionais?

9

“A tão falada e difundida “profissionalização do Terceiro Setor” exige muito mais que uma boa contabilidade. Implica em ter uma missão e metas bem definidas; baixar os custos; comunicar e difundir o que se faz; ter clareza e transparência nas ações; planejar; monitorar; avaliar; construir parcerias; enfim, transformar as instituições com metodologias que contribuam para a eficiência dos seus resultados e a sustentabilidade de seus projetos [...] não basta apenas a simples transposição dos conceitos administrativos para as organizações do Terceiro Setor, pois estas carregam particularidades que não podem ser deixadas de lado, já que são intrínsecas à sua gestão.” (VILLAS BOAS NETO, 2003).

Considerando tudo isso, o presente trabalho focará como fundamentação teórica no marketing para o Terceiro Setor, buscando conceitos e técnicas específicas para serem aplicadas nos projetos.

1.7

DESCRIÇÃO DETALHADA DA EMPRESA Registrado em seu estatuto como Associação de base Antroposófica para o

Desenvolvimento Humano e Social (razão social), o Instituto Rudolf Steiner (nome fantasia) é uma associação sem fins lucrativos, que foi constituída em 09 de agosto de 2003 na cidade de Curitiba. Compõe-se de pessoas físicas, comprometidas com a Antroposofia, ciência espiritual desenvolvida por Rudolf Steiner, através de ações orientadas para a divulgação dos princípios antroposóficos e da formação, educação, saúde e bem-estar de crianças, jovens, adultos e idosos. A associação é dirigida por uma equipe gestora, eleita a cada dois anos, composta por 1 Diretor Executivo, 1 Diretor Financeiro, 5 Conselheiros no Conselho Deliberativo e 3 Conselheiros no Conselho Fiscal. Tem atualmente 30 associados ativos. O Instituto Rudolf Steiner é uma instituição independente e não está ligado formalmente a outras organizações. Tem como missão “Fortalecer a Antroposofia através da divulgação de seus conceitos e aplicações voltadas ao desenvolvimento humano e social”.

10

2 FUNDAMENTAÇÃO TEÓRICA

2.1

MARKETING

O marketing é popularmente conhecido como o conjunto de ações realizadas por organizações com o objetivo de convencer seus clientes a consumir seus produtos ou serviços, podendo ser definido como uma área do conhecimento que: “engloba todas as atividades concernentes às relações de troca, orientadas para a satisfação dos desejos e necessidades dos consumidores visando alcançar determinados objetivos de empresas ou indivíduos e considerando sempre o ambiente de atuação e o impacto que essas relações causam no bem estar da sociedade”. (LAS CASAS, 2006 citado por SERRANO, 2010).

O mesmo conceito é definido por Castilho Junior (2014) como “o processo de planejamento e execução do conceito, preço, comunicação e distribuição de ideias, bens e serviços, de modo a criar trocas que satisfaçam objetivos individuais e organizacionais”. Por fim, o conceito que possui maior notoriedade é estabelecido pela AMA (American Marketing Association) que entende marketing como “a atividade, conjunto de instituições e processos para criar, comunicar, distribuir e efetuar a troca de ofertas que tenham valor para consumidores, clientes, parceiros e a sociedade como um todo”. Tomando como base os conceitos citados pelos autores acima, é possível perceber que o sucesso de uma organização está diretamente relacionado à sua estratégia de marketing, e que isso é um forte auxiliador na sobrevivência da organização perante a concorrência e constantes inovações. Neste sentido todos os demais departamentos da organização dependem do departamento de marketing, pois é através deste que se pode determinar o posicionamento da organização, preços compatíveis, possíveis necessidades dos clientes em relação a produtos/serviços, estratégias de divulgação e até mesmo localização da empresa.

11

2.2

MARKETING DIGITAL A evolução das TIC’s (tecnologias da informação e comunicação)

proporcionou ao consumidor uma interação direta com o comprador, obrigando este a pensar no marketing de forma digital. Mckenna (2006) destaca que “todas as mudanças de paradigmas tecnológicos formaram um diferencial no aumento da comunicação, o que levou à

“desmassificação” dos mercados, à segmentação e

ao aumento da

individualidade.”, ou seja, as mudanças tecnológicas citadas pelo autor exigem que as estratégias de marketing adotadas pelas organizações devem adaptar-se conforme as inovações tecnológicas que surgem a todo instante no mercado. Neste sentido o marketing mantém o seu objetivo geral de satisfazer as necessidades futuras dos consumidores. Entretanto, com a inserção da internet e das novas tecnologias no cotidiano dos consumidores, o mercado teve que repensar a forma como a missão básica do marketing que pode ser entendida como a identificação de necessidades dos consumidores, a fim de confeccionar produtos ou oferecer produtos para satisfazê-las é realizada. De acordo com Torres (2010) esta mudança de paradigma torna-se cada vez mais relevante considerando que o marketing digital está se tornando cada dia mais presente nos negócios. Com isso pode-se afirmar que não foi apenas uma questão de evolução na tecnologia, mas uma mudança no comportamento do consumidor, que está utilizando cada vez mais a internet como meio de comunicação, relacionamento e entretenimento. Desta forma, é cada vez mais importante entender as atitudes do consumidor que faz uso de tecnologias, tais como o acesso móvel à web, ecommerce, blogs, páginas na Internet e conectividade em redes sociais. Como principal exemplo deste fato, se pode citar a responsividade¹ em sites da web que atualmente, não é um diferencial de negócio e sim uma exigência dos clientes.

12 ¹ Responsividade: para fins deste documento, entende-se responsividade como o ato do website adaptar-se a qualquer aparelho tais como, smartphones, tablets e afins.

2.3

MARKETING PARA ONGS

Carvalho e Felizola (2009) afirmam que “o marketing e a forma de captação de recursos no Terceiro Setor diferem da forma em que são praticados em empresas, pois o beneficiário dessas entidades quase certamente não é aquele que financiou o bem ou serviço prestado, e mesmo quando os serviços são cobrados do usuário, dificilmente estes são os únicos responsáveis pelo seu custeio.” (CARVALHO E FELIZOLA, 2009).

Considerando esta diferença, o marketing para o Terceiro Setor é classificado por especialistas como marketing social, que por sua vez é definido como: “um modelo de gestão voltada para as transformações sociais com base na mudança de comportamentos e atitudes, individuais e coletivas” (KOTLER, 1978), ou ainda, como a gestão estratégica do processo de mudança social, a partir da aquisição de novos comportamentos, atitudes e práticas, nos âmbitos individual e coletivo, orientados por determinações éticas, fundamentadas nos direitos humanos e na equidade social. “No marketing de patrocínio de projetos sociais as empresas buscam retorno de imagem, promoção da marca e/ou do produto, bem como a fidelização e captação de clientes. É dividido em dois tipos: o patrocínio de projetos de terceiros e de patrocínios de projetos próprios. No primeiro caso as empresas ou instituições atuam em parceria com o governo no financiamento de suas ações sociais. Alguns exemplos: Petrobrás, Fundação Boticário, etc. No segundo caso, as empresas, por meio de seus institutos e fundações sociais, criam seus próprios projetos e os implementam com recursos próprios, como exemplo a Fundação Roberto Marinho, das Organizações Globo.” (CARVALHO E FELIZOLA, 2009).

Com isso é importante ressaltar que o objetivo do marketing e do marketing digital em organizações sem fins lucrativos é transmitir corretamente à sociedade os ideais, ações e resultados, de forma que possam encontrar parceiros dispostos a se envolver em sua causa.

13

2.4

TEORIA DA COMUNICAÇÃO

A comunicação é a primeira tecnologia. Ela deu origem às demais tecnologias que temos ao nosso redor. O desenvolvimento do ser humano só foi possível pela formação de uma sociedade e, consequentemente, de uma cultura própria. Acontece que esses dois elementos só foram possíveis através da comunicação. Após a “conquista” dessa tecnologia, o ser humano aprendeu que poderia realizar tarefas em conjunto e de forma mais eficaz, transformando, constantemente, a realidade de seu mundo. Todas as tecnologias que estão ao nosso redor são frutos da comunicação: desde a escrita, descoberta do fogo e criação da roda até os televisores e computadores mais potentes. A teoria da comunicação é composta por visões distintas e sofre alterações durante o tempo, dependendo, principalmente, da sociedade em que ela se insere. É verdade que a comunicação sofreu um enorme impacto com a chegada da era da informação, na qual surgiram diversos meios novos de interação entre as pessoas. Antes disso, alguns teóricos acreditavam que uma mensagem poderia ser transmitida de maneira integral para uma pessoa, ou seja, a mensagem que um emissor emite é recebida 100% igual por seu receptor. Um desses teóricos foi o americano Claude Elwood Shannon que, durante seus trabalhos na área de criptografia (códigos secretos), formulou algumas hipóteses que fazem parte de sua teoria matemática da comunicação. Essa teoria foi publicada em 1948 e teve sua primeira versão em uma monografia intitulada “The Mathematical Theory of Communication”. Esse estudo propõe um esquema linear do “sistema geral de comunicação”, no qual a mensagem era produzida de um ponto a outro, de maneira que não sofresse nenhuma mutação durante o processo. No ano seguinte, um ex-professor de Shannon, Norbert Wiener, publicou o livro “Cybernetics or Control and Communication in the Animal and Machine”. Nesse livro ele ressalta que a informação faz parte da sociedade e que a comunicação não pode ser “engessada”, ou seja, “ele visualiza a informação livre como uma forma de organização da sociedade de maneira muito mais eficaz” (SILVA, 2011). Segundo

14

Wiener (1965), a informação deve poder circular e que ela só pode existir sob a condição de troca sem barreiras. Por meio dessas duas teorias apresentadas fica clara a evolução que a comunicação sofre ao decorrer do tempo. Hoje em dia, com os inúmeros meios de comunicação existentes, podemos repassar uma mesma mensagem de várias maneiras. Por exemplo: a mensagem que eu falei ao vivo para uma pessoa; pode ser emitida pelo telefone para outra, mandada por texto para uma terceira ou gravada em um vídeo divulgado para várias outras pessoas. A questão é que cada mediação traz uma característica única e isso faz com que o entendimento do receptor seja modificado. Cada vez mais o ser humano descobre novas mediações com características únicas, as quais enriquecem o modo como lidamos com a comunicação e suas consequências. A comunicação faz com que as pessoas sejam cada vez mais completas e bem informadas. Cabe a nós fazer o devido filtro e aproveitamento dessas informações para que essa inovação ininterrupta de tecnologia permaneça e enriqueça nosso mundo.

2.5

SEMIÓTICA

Antes de dar início a explicações teóricas, é necessário esclarecer que o estudo da semiótica foi abordado de maneira diferente por diversos autores. Esse trabalho irá usar como base a teoria semiótica de Charles Sanders Peirce, um matemático, cientista, lógico e filósofo norte-americano. Para Peirce a semiótica é dividia em três vertentes: a lógica crítica – estuda os tipos de interferências, raciocínios ou argumentos que se estruturam através de signos, a metodêutica especulativa – o modo como a pesquisa científica deve ser conduzida e como deve ser comunicada e a gramática especulativa – todos os tipos de signos e forma de pensamento que eles possibilitam. Segundo Santaella (2008), a semiótica é uma teoria geral dos signos, que explora todas suas possíveis espécies, propriedades, comportamentos, modos de

15

significação, denotação e interpretação. Para entender melhor esse conceito é interessante esclarecer o que é um signo. “Um signo, ou representamen, é aquilo que, sob certo aspecto ou modo, representa algo para alguém. Dirige-se a alguém, isto é, cria na mente dessa pessoa, um signo equivalente, ou talvez, um signo mais desenvolvido. Ao signo assim criado, denomino interpretante do primeiro signo. O signo representa alguma coisa, seu objeto [...]”. (PIERCE citado por SANTAELLA, 2004)

Em uma definição mais simplista, Santaella (2008) esclarece que signo é algo que representa alguma coisa para alguém, ou seja, o signo é qualquer coisa de qualquer espécie, desde uma palavra escrita até um objeto qualquer, que representa outra coisa, chamada de objeto do signo, e que produz alguma interpretação.

Figura 1 – A tríade

Fonte: Portal Alexandria (2014)

16

Signos podem ser “verbais, não verbais e naturais: fala, escrita, gestos, sons, comunicação dos animais, imagens fixas e em movimento, audiovisuais, hipermídia etc” (SANTAELLA, 2008), ou seja, a semiótica é importante para nosso trabalho, pois estuda todos os meios pelos quais o homem se comunica. Um signo tenta representar o mais fielmente determinado objeto, mas nunca chega a representá-lo em sua totalidade. Por exemplo, no caso de criações de artes para materiais de comunicação em geral (flyers, websites, folders etc) o designer está querendo passar alguma ideia, algum símbolo ou algum objeto para determinado público. Cabe a esses profissionais fazerem com que a representação desse signo seja percebida pelo interpretante (pessoa que vê o signo) da maneira esperada. Quando um designer consegue conhecer o processo de relação entre objeto e signo, terá uma visão mais complexa para desenvolver suas criações. Outro exemplo simples que esclarece a usabilidade do conceito de semiótica: uma propaganda é signo do produto que ela está anunciando. Há três propriedades fundamentais que fazem com que um signo seja designado signo: “[...]sua mera qualidade, sua existência, quer dizer, o simples fato de existir, e seu caráter de lei. [...] Pela qualidade, tudo pode ser signo, pela existência, tudo é signo, e pela lei, tudo deve ser signo” (SANTAELLA, 2008). No que diz respeito à relação do signo com o objeto, existem três tipos de relações: ícone, índice e símbolo. O ícone é quando há uma semelhança na qualidade do signo com o objeto, como exemplifica Santaella (2008), a cor azul-clara lembra o céu ou os olhos de uma pessoa, pois há uma similaridade na qualidade desse azul com o azul do céu ou dos olhos. O índice indica a existência de algo, por exemplo: fumaça indica fogo, mesmo que não tenham semelhança, há uma conexão estabelecida entre os dois. Por último, o símbolo tem por fundamento a lei, convenções sociais que designam que determinado símbolo significa um determinado objeto. A linguagem escrita usada nesse trabalho se baseia em símbolo, bem como os diversos sinais de trânsito presentes em qualquer cidade. Os conceitos fundamentais sobre semiótica que foram citados nessa parte do trabalho são muito importantes para o desenvolvimento de todos os materiais, pois

17

permite uma visão mais abrangente de como funciona a dinâmica de percepção do público sobre determinada comunicação.

2.6

GESTALT

Gestalt significa “teoria da forma”, é ramo da psicologia que estuda como o ser humano percebe as formas e sua relação com o ambiente ao seu redor. “A palavra tem origem alemã e não possui uma tradução exata para o português” (NUNES, 2013). A Gestalt é aplicada em projetos de comunicação de acordo com alguns princípios descritos por Viana (2009), como: Proximidade (figura 2 ): Os elementos são agrupados de acordo com a distância a que se encontram uns dos outros. Logicamente, elementos que estão mais perto de outros numa região tendem a ser percebidos como um grupo, mais do que se estiverem distante de seus similares. Semelhança (figura 3 ): Eventos semelhantes se agruparão entre si. Essa semelhança se dá por intensidade, cor, tamanho, forma dentre outros. E se dá em igualdade de condições. Continuidade (figura 4): Há uma tendência de a nossa percepção seguir uma direção para conectar os elementos de modo que eles pareçam contínuos ou fluir em uma direção específica. Pregnância (figura 5): A mais importante de todas, possivelmente, ou pelo menos a mais sintética. Diz que todas as formas tendem a ser percebidas em seu caráter mais simples. É o princípio da simplificação natural da percepção. Quanto mais simples, mais facilmente é assimilada. Clausura (figura 6): Ou “fechamento”, o princípio de que a boa forma se completa, se fecha sobre si mesma, formando uma figura delimitada. O conceito de clausura relaciona-se ao fechamento visual, como se completássemos visualmente um objeto incompleto.

18

Figura 2 - Princípio da proximidade de Gestalt Os círculos da esquerda parecem estar agrupados em colunas verticais, enquanto os da direita aparentam estar agrupados em fileiras horizontais.

Fonte: Souza (2009)

Figura 3 - Princípio da semelhança de Gestalt Itens que são similares tendem a ser visualizados como formando um grupo. Na imagem acima, a maioria das pessoas vê colunas verticais de círculos e quadros.

Fonte: Souza (2009)

19

Figura 4 - Princípio da continuidade de Gestalt As linhas são vistas seguindo o caminho mais suave. Na imagem acima, o ramo superior é visto como continuando o primeiro segmento da linha. Isto nos permite ver as coisas como um fluxo suave, sem romper a linha de cima em múltiplas partes.

Fonte: Souza (2009)

Figura 5 - Princípio da pregnância de Gestalt A realidade é organizada ou reduzida à forma mais simples possível. Por exemplo, nós vemos a imagem acima preferivelmente como uma série de círculos, ao invés de uma forma muito mais complexa.

Fonte: Souza (2009)

20

Figura 6 - Princípio da clausura de Gestalt Objetos colocados juntos são vistos como um todo. Nós tendemos a ignorar lacunas e completar linhas de contorno. Na imagem acima não há triângulos ou círculos, mas nossas mentes completam as informações faltantes para criar formas e imagens familiares.

Fonte: Souza (2009)

No tópico quatro deste documento, onde serão abordadas as ações promocionais realizadas durante o projeto, será percebido de que forma os princípios da Gestalt foram aplicados nos materiais elaborados para realizar o planejamento de comunicação do Instituto Rudolf Steiner.

2.7

TEORIA DA COR

A comunicação visual torna-se praticamente impossível sem a existência das cores. Elas são utilizadas para qualquer tipo de manifestações artísticas e até mesmo para a representação de uma palavra. Por exemplo, o verde do semáforo que representa, “vá em frente” ou o vermelho, “parar”. Segundo Farina (1986), “a cor é indiscutível e seu potencial tem a capacidade de liberar as reservas de imaginação criativa do homem, e permite a quem receba a comunicação visual criar ações de impressionar e construir”, ou seja, cada indivíduo

21

interpreta de uma maneira diferente cada informação visual seja por sua experiência vivida ou por sensações e emoções apresentadas no momento. Definindo o significado, Pedrosa (2006) afirma que “a palavra cor tanto designa a sensação cromática, como o estímulo (a luz direta ou o pigmento capaz de refleti-la) que a provoca. Mas, a rigor, esse estímulo denomina-se matiz, e a sensação provocada por ele é que recebe o nome de cor e por ser uma sensação, toda cor é fisiológica e subjetiva”. (PEDROSA, 2006)

De fato as cores carregam consigo sensações, essas provocadas por nossas heranças

culturais

e

amplamente

exploradas

no

ramo

da

comunicação

complementando, Guimarães (2000) diz que “a cor é uma informação visual, causada por um estímulo físico, percebido pelos olhos e decodificada pelo cérebro, classificando a cor “como recurso de linguagem nos discursos da mídia”. Com base nisso pode-se então concluir que a cor além do aspecto físico também está presente no aspecto emocional e assim provoca reações em nosso organismo, além de atuarem sobre a emotividade humana, as cores produzem uma sensação de movimento, uma dinâmica envolvente e compulsiva. Desta forma, segundo Fornasaro (2007) “a relação entre a cor e o tema ajuda a construir a mensagem recebida, que passa por associações inconscientes e aumentam ou diminuem seu entendimento bem como a assimilações e sensações obtidas pelos leitores” (FORNASARO, 2007),

por este fator o estudo da teoria das cores deve ser escolhido para atuar ao decorrer da concepção do projeto. Devido cada cor representar sensações e emoções diferentes, afirmar que a cor vermelha representa amor e fúria é um equívoco, pois as sensações e emoções despertadas por ela são subjetivas e, para que seja corretamente aplicada deve-se estudar friamente o ambiente cultural do indivíduo ou público- alvo. Da mesma forma Damasceno (2003) complementa esse pensamento dizendo que “uma mesma cor tende a adquirir diversos significados nas sociedades ocidentais, por exemplo, o

22

branco tem simbolismo oposto (vida) ao apresentado nas sociedades orientais (morte)” e ressalta os efeitos psicológicos da cor dizendo 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 e relaciona-se diretamente com os sentimentos humanos e, por isso, também influi fisicamente no organismo” (DAMASCENO, 2003)

Neste projeto serão utilizadas cores definidas pelo RGB (red, green, blue) ou cor-luz onde cada letra recebe valores de 0 a 255 que são utilizadas para a variação de tonalidade e são aplicadas em monitores de computador, televisão e câmeras digitais, formadas pela combinação de tons primárias que formam palhetas secundárias, e que combinadas formam matiz terciárias e assim por diante. Já as cores CMYK que são formadas por pigmentos primários (Cyan, Magenta, Yellow, Black) recebem valores para cada letra de 0 a 100 e são utilizadas para impressões, desta forma o usuário configura seu programa para usar as cores CMYK ou RGB dependendo de sua necessidade, para criar um banner que será exibido em um site poderá usar as RGB, já para impressão de um flyer as CMYK garantindo assim que as cores vistas no monitor sejam as mais próximas possíveis do trabalho final. Para criação do design do site será utilizada as cores com valores hexadecimal, representada pelas letras de A a F e de 0 a 9 formando assim uma combinação de 6 dígitos para cada cor, por exemplo #FF0000 que é o vermelho. A aplicação de cada código e cada cor será demonstrada e explicada durante o projeto, lembrando que para cada processo exige uma nova análise para que as cores sejam definidas de forma que transmitam harmonia e sensações para quem a interpreta.

23

Figura 7 – Diferença entre CMYK e RGB

Fonte: Estampa Web (2014)

Figura 8 – Esquema de Escala de Tonalidades RGB e CMYK

Fonte: Printi (2014)

24

3 FERRAMENTAS DE DESENVOLVIMENTO

3.1

PROGRAMAS E LINGUAGENS UTILIZADAS

Para o desenvolvimento de todos os jobs, será necessário o uso de diversos softwares, principalmente no que diz respeito ao projeto do website. Cada programa tem funções específicas, podendo se complementar no desenvolvimento dos jobs. Abaixo segue uma lista detalhada da função de cada software utilizado durante o processo de criação:

3.1.1 COREL DRAW X6

O CorelDraw X6 é um software de desenho vetorial que produz arquivos para utilização digital ou para serem impressos, seu lançamento ocorreu em 1989,

sendo

aprimoramento

considerado de

uma

técnicas

e

revolução

em

ferramentas

soluções dá-se

a

gráficas cada

cujo biênio,

aproximadamente. Esse programa permite criar desenhos para todos os fins, trabalhar com diversas unidades de medidas de pixels a centímetros. A partir do CorelDraw X6 é possível criar banners para internet, ícones web, Wireframes, botões de ação, cartões de visitas, panfletos, cartazes, etc. Possui uma diversidade de paletas de cores, sendo as principais CMYK e

RGB, oferece

suporte ao usuário para criar novas tabelas de cores conforme a necessidade. A funcionalidade desse programa permite criar atalhos para aplicação de efeitos e outras funções, demandando um melhor desempenho para criação de uma arte com opções de ferramentas de texto e diagramação, com variadas fontes; tamanhos de fontes; espaçamento; texto em caminho, em objeto, e área de texto. O CorelDraw X6 possui ferramentas para manipulação de imagens (bitmaps) nas quais podem ser aplicadas efeitos de vetor; conversão e exportação de diversos formatos (png, jpg, pdf) (COREL CORPORATION BRASIL, 2014). Neste projeto, o CorelDraw foi usado para fazer o "fechamento" dos arquivos

25

impressos, ou seja, a "retirada" de todos os efeitos e a conversão de todas as cores para CMYK. Atualmente as gráficas trabalham somente com o CorelDraw como meio de comunicação entre computador e impressora, portanto a arte foi criada no Adobe Illustrator e no Corel os efeitos foram "retirados" e convertidos para bitmap, as fontes convertidas em curvas e cores RGB foram passadas para CMYK, as imagens otimizadas na resolução apropriada para impressão definida por padrão em 300dpi, deixando assim o arquivo pronto para impressão e na extensão CDR (arquivo padrão CorelDraw).

3.1.2 ADOBE ILLUSTRATOR CS6

Assemelhado ao CorelDraw, o Adobe Illustrator CS6, desenvolvido e comercializado pela Adobe Systems, traz muitas funcionalidades e ferramentas que permitem a criação de qualquer desenho, formas, curvas, efeitos, porém seu maior benefício é usar efeitos e filtros advindos do Adobe Photoshop CS6. Neste projeto, o software foi utilizado na criação das peças gráficas como os panfletos e cartazes usados nos eventos e palestras do Instituto. Nos materiais foram explorados efeitos de sombreamento e transparência, e as ferramentas de desenho permitiram a livre manipulação dos objetos para que pudessem ser aplicadas também as fundamentações teóricas que são essenciais na composição visual da arte.

3.1.3 ADOBE PHOTOSHOP CS6

Software de edição e manipulação de imagens para internet e para processos de pré-impressão, rico em efeitos, filtros, shapes e demais tecnologias com as quais permitem trabalhar os objetos em camadas, manipulação em 3d, interface amigável, rapidez no processamento, e geração de imagens em diversas resoluções, também conta com fórum de dúvidas e tutoriais de aprendizado que pode ser acessados em seu site oficial. O Adobe Photoshop CS6 também dispõe de recursos para criação de

26

materiais de qualidade sendo eles tanto para fins fotográficos, impressão, web e outros. Neste projeto, o Adobe Photoshop CS6 foi utilizado para criar o layout da página do website. Após a criação da estrutura dos Wireframes, chegou a vez de implementar o design, as cores, as imagens e fazer o modelo piloto do projeto final. O software permitiu a criação de todas as páginas do website, para que fossem apresentadas ao cliente antes que iniciasse o processo de desenvolvimento da estrutura que funcionaria no navegador, possibilitando a visualização do design e o apontamento das devidas correções e alterações.

3.1.4 HTML5

O HTML5 é uma linguagem de marcação para a estruturação de toda página e subpágina da web. Ela é o primeiro passo para a construção de um website, sendo responsável por toda estrutura apresentada na página. Esta, não está visível, pois está "mascarada" com estilos advindos da linguagem CSS3 responsável por implementar a formatação dos elementos. A versão atual foi aprimorada com novas tags que podem otimizar o tempo de construção e ofertar uma consistência maior à pagina como as tags estruturais , , , , suporte para navegadores antigos exceto para IE8 e compatibilidade com os novos browsers. No site oficial da linguagem estão disponíveis todos os novos elementos presentes, elementos para formulários e seus campos, novas sintaxes, gráficos e mídias (HTML5 SEMANTIC ELEMENTES, 2014). Neste projeto, o HTML5 foi usado para a construção de todas as páginas do website, pois, por mais que a extensão seja PHP, a estrutura e o recipiente onde se encontram os textos são tags do HTML. A estrutura de menu foi determinada pela tag e os formulários contém atributos HTML com os quais se verifica se todos os campos do formulário foram preenchidos. Não só no quesito formulário, mas o HTML5 está presente em 100% do website e todos os outros elementos estão ordenados pelo HTML.

27

3.1.5 CSS3

É uma linguagem criada para dar estilo as páginas HTML, para as quais o CSS introduz a referência. Esse recurso revolucionou e modernizou a web desde o seu lançamento e ao apresentar efeitos como sombreamento, cantos arredondados, efeitos de transição, efeitos gradiente e colunas, os quais permitem um

desenvolvimento

mais

amplo

e

um

visual

mais

atraente.

Toda

a

documentação, tutoriais e suporte sobre a versão atual, encontram-se no site oficial (CSS TUTORIAL, 2014). No site do Instituto Rudolf Steiner, o CSS e o CSS3 "montam" todo o visual da página, das imagens com cantos arredondados, fundo da interface, estilo e tamanho das fontes, espaçamento entrelinhas, tamanhos das imagens, cores, bordas, alinhamentos dos objetos, tamanhos dos elementos, formulários de contato e newsletter, visual das galerias de imagens e da galeria de clientes, ícones de download e links, efeitos de transição, formatação do logotipo, campos de busca e rodapé. A evolução desta linguagem não parou na versão três, mas se estendeu e se adaptou as novas tecnologias móveis, como os tablets e smartphones, ainda utilizando do recurso oferecido por esta linguagem, o CSS também foi utilizado para definir os tamanhos adequados para que o website seja adaptável a celulares e tablets, sendo assim um site com responsividade. Pode se dizer que assim como HTML, o CSS está presente em 100% do website.

3.1.6 JQUERY

JQuery é uma biblioteca JavaScript avançada, eficaz em seu tamanho e rico em recursos. Ele faz efeitos como os do HTML5, leitura de documentos externos, manipulação de eventos e animações geralmente feitas com a linguagem Ajax, porém, muito mais simples e com uma API fácil de usar que funciona em muitos browsers. Com uma combinação de versatilidade e

28

capacidade de extensão, jQuery mudou a

maneira que milhões de pessoas

escrevem JavaScript. O seu objetivo é simplificar os scripts que interagem com as páginas em HTML cujos efeitos e funções podem ser aplicados nas páginas a fim de simplificar o desenvolvimento de aplicações web de grande complexidade (JQUERY, 2014). O Jquery, biblioteca JavaScript avançada, com recursos eficazes como a transição

de efeitos,

manipulações

e

animações

conhecidas

da

linguagem Ajax, foi necessário para tornar este projeto mais dinâmico tornando as páginas mais versáteis com uma navegabilidade mais prática para o usuário e visualmente com efeitos muito agradáveis. É possível perceber sua existência na navegação das galerias de imagens, na página inicial, presente na navegação do bloco no canto direito "áreas" e na galeria de parceiros. Na página "o Instituto", foi inserido na "linha do tempo".

3.1.7 PHP

PHP é uma linguagem de script que é especialmente adequada para o desenvolvimento web. Rápido e flexível, é muito utilizado para criação de blogs e sites institucionais simples e complexos. O PHP trabalha no núcleo não visível do website com o tráfego de informações via código e servidor. Sua ação só pode ser vista no website quando o usuário faz alguma requisição de informação que necessita de consulta ao banco de dados. Quando o alerta "Sua mensagem foi

enviada com sucesso" for exibido,

significa

que

o

PHP

armazenou a informação inserida no formulário em sua variável e retornou o resultado com a mensagem definida no corpo do script (PHP DOCUMENTATION, 2014). Por ser uma linguagem de programação de intensa usabilidade, o PHP foi utilizado neste projeto, pois é rápido e flexível, facilitando o processo de implementação do site como um todo. O PHP trabalha na conversação com o banco de dados, quando o usuário entra na página artigos, e procura por um texto, seja pelo título ou categoria no campo de busca, o PHP faz o serviço de

29

consultar no banco todos os dados que foram requisitados através da categoria selecionada e retornar com o resultado impresso na tela. Em 100% do site o PHP se faz presente, seja no formulário de contato, newsletter, as páginas em si são de extensão PHP e possuem diversas funções que chamam arquivos externos e executam ações que foram determinadas no código fonte.

3.1.8 BANCO DE DADOS MYSQL

MySQL é um software de banco de dados open source muito popular no mundo inteiro, com mais de 100 milhões de cópias baixadas ou distribuídas em toda a sua história. Com sua velocidade superior, confiabilidade e facilidade de uso, o MySQL se tornou a escolha preferida para Web, Web 2.0, SaaS, ISV, empresas de telecomunicações e com visão de futuro gerentes corporativos de TI, pois elimina os principais problemas associados com o tempo de inatividade, manutenção e administração para os modernos, aplicações online (MYSQL, 2014). Neste projeto o MySQL é responsável por armazenar todo o conteúdo que está presente no site do Instituto, todas as informações que estão sendo vistas no site, bem como texto e imagens, estão armazenadas nas tabelas deste banco de dados. O Wordpress por sua vez, cria as tabelas automaticamente e faz o armazenamento das informações inseridas em seu painel administrativo. Portanto, não seria possível inserir o conteúdo sem o banco de dados. Também é válido afirmar que o MySQL utiliza a linguagem de consulta estruturada SQL como interface, com fornecimento de diversas ferramentas de gerenciamento. Funciona apenas com servidor, podendo ser online ou offline (MYSQL, 2014).

3.1.9 PHPMYADMIN

PhpMyAdmin é uma ferramenta de software livre escrito em PHP , que se destina a lidar com a administração do MySQL através da web. Ele suporta uma ampla gama de operações como gerenciar bancos de dados, tabelas, colunas,

30

relações, índices, usuários, permissões, opções de importação e exportação de tabelas e bancos, permite incluir manualmente os comandos SQL, entre outras. O gerenciador traz também a documentação contendo tutoriais, manual e outras informações sobre a manipulação da ferramenta, ações realizáveis através da interface do usuário, enquanto se tem a capacidade de executar diretamente qualquer instrução SQL (PHPMYADMIN, 2014). Neste projeto, o phpmyadmin foi usado como gerenciador do banco de dados e das tabelas usadas pelo Wordpress tornando todo o conteúdo visível no site, como história do Instituto, imagens, notícias sobre eventos, artigos, agenda e demais páginas, dinâmicos, e que estão armazenados nas tabelas, podendo ser manipuladas por este gerenciador.

3.1.10 PLATAFORMA WORDPRESS

O WordPress é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos padrões web e na usabilidade, é considerada a maior plataforma de

Gerenciamento de Conteúdo do mundo. Sua versão

atual, 4.0, oferece gratuidade e uma documentação de suporte ao usuário disponibilizando um fórum de dúvidas, informações sobre instalação, links de outros sites feitos com Wordpress, e muitas outras informações que auxiliam na manipulação da ferramenta, os quais foram desenvolvidos para programadores e usuários que não têm conhecimento de programação, permitindo-lhes a criação fácil e prática de blogs e sites institucionais (WORDPRESS, 2014). Neste projeto, o Wordpress foi usado para a implementação do tema do site agregando agilidade e gerenciamento ao desenvolvedor e ao usuário. Em outras palavras, o site foi construído com as linguagens de programação HTML, CSS, PHP, jQuery e BOOTSTRAP e implementados na plataforma, pois é a equipe tem conhecimento e o cliente, já está familiarizado com a ferramenta. Além disso, é possível o gerenciamento de conteúdos ainda mais eficiente dispensando a contratação de serviços mensais de atualizações, pois

a

plataforma possui um painel administrativo de fácil entendimento do usuário, seja

31

ele, desenvolvedor ou não.

3.1.11 NOTEPAD ++

Notepad++ é um editor livre de código-fonte e substituição que suporta várias línguas cuja escrita em C e usando API Win32 pura e STL garante uma maior velocidade de execução e menor tamanho do programa, com comandos práticos que facilitam e reduzem o tempo de desenvolvimento (NOTEPAD++, 2014). Este editor foi utilizado em toda a criação do código fonte do web site. Começando com o arquivo index.php até o arquivo footer.php. Sua utilização foi indispensável pois sua leveza, otimiza o desenvolvimento, separando as linhas de códigos por cores, evitando erros de escrita. Além dos arquivos em linguagem PHP, foi criado os arquivos em linguagem HTML5, CSS e jQuery.

3.1.12 BOOTSTRAP

Essa compilação de códigos CSS foi criado no Twitter por @mdo e @fat utiliza LESS CSS, compilação via node e é gerenciado pelo GitHub. Assim como algumas linguagens que receberam contribuições para o seu crescimento através de desenvolvedores do mundo inteiro, o Bootstrap também está sendo aprimorado, a cada versão, seu pacote o torna mais completo. O Bootstrap permite o desenvolvedor trabalhar com grids, o que facilita e muito na construção do layout, pois utiliza funções CSS pré-definidas dispensando o risco de páginas serem construídas com uma formatação incorreta. Além disso, o Bootstrap possui várias outras funções pré-definidas como: galeria de imagens, grupos de botões, menus, submenus, paginação, tipografia, imagens miniatura, alertas, barra de progressos, suporte ao Javascript para a implementação de transições, janelas modal, dentre outros e variados efeitos que podem ser encontrados na documentação do site oficial. O download da versão mais atual pode ser feita gratuitamente pelo site oficial da ferramenta, tutoriais explicativos, orientam sua instalação no projeto, e contém em seu site, informações, dicas e

32

exemplos de códigos que exemplificam a implementação dos efeitos oferecidos (GLOBO BOOTSTRAP, 2014). O Bootstrap foi implementado no website do Instituto otimizando o tempo de desenvolvimento. O layout navegável foi construído muito mais rápido que o esperado, pois a linguagem permitiu total eficácia neste processo sem limitações, ou seja, o layout desenhado no Adobe Photoshop CS6, teve 100% de êxito no momento da implementação para a linguagem Bootstrap dando total liberdade de criação. Nos dias atuais o mundo está conectado na internet através dos celulares e outros dispositivos, por este motivo, sua utilização foi imprescindível, pois permitiu a responsividade do website, tornado o adaptável nestas novas tecnologias.

3.2

CRONOGRAMA

17/05 – Reunião com o cliente 01/06 – Elaboração do Briefing com base nas anotações da reunião 11/08 – Elaboração da Introdução 12/08 – Elaboração da Introdução 15/08 – Desenvolvimento de Flyer 18/08 – Elaboração da Fundamentação Teórica 19/08 – Elaboração da Fundamentação Teórica 27/08 – Orientação 30/08 – Desenvolvimento de Flyer 29/08 – Elaboração das Estratégias e Programas de Ação

33

01/09 – Elaboração das Estratégias e Programas de Ação 04/09 – Orientação 06/09 – Ajustes e formatação 09/09 – Orientação 15/09 – Desenvolvimento do Website 21/09 – Desenvolvimento de Flyer 23/09 – Desenvolvimento do Website (Wireframe) 24/09 – Desenvolvimento do Website (Wireframe) 07/10 – Reunião com o cliente 14/10 - Orientação 15/10 – Desenvolvimento do Website (Design) 20/10 – Desenvolvimento do Website (Design) 22/10 – Desenvolvimento do Website (Design) 24/10 – Desenvolvimento do Website (Programação) 25/10 – Desenvolvimento do Website (Programação) 28/10 – Desenvolvimento do Website (Programação) 01/11 - Desenvolvimento do Website (Programação) 04/11 - Desenvolvimento do Website (Programação)

34

05/11 - Desenvolvimento do Website (Programação) 11/11 – Orientação

3.3

METODOLOGIA

A fim de atingir os objetivos propostos, a equipe utilizou algumas metodologias com o intuito de auxiliar na elaboração dos jobs e, consequentemente, no cumprimento das estratégias e objetivos estabelecidos. As metodologias consistem em: Pesquisa bibliográfica: levantamento de bibliografias já publicadas e que tenha relação com os temas envolvidos no projeto, visando adquirir consistência teórica nas tarefas realizadas. A pesquisa bibliográfica será realizada com base em materiais

publicados

como,

livros,

documentos,

arquivos

e

imagens.

Coleta de dados: reunir o maior número de dados possíveis sobre o Instituto e seus clientes. Esses dados serão obtidos através de reuniões com o responsável pela organização, banco de dados já formulados anteriormente pela associação e dados obtidos pelo Histats, contador de acesso que fornece diversas informações sobre os usuários que entram no site do Instituto. Esses dados serão analisados e utilizados no processo de criação de cada job, o que nos dá maior probabilidade de sucesso no que diz respeito ao alcance dos objetivos estabelecidos. Com objetivo de obter informações que auxiliam na organização de cada etapa do projeto, a equipe se reuniu com o cliente e, por meio do briefing², conseguiu

conhecer

e

entender

a

história

do

Instituto

Rudolf

Steiner.

Dessa maneira, identificamos suas necessidades para, posteriormente aplicarmos as devidas soluções. Cada job³ solicitado ou sugerido será processado de uma maneira padrão, seguindo nossa estratégia de desenvolvimento abaixo:

² Briefing (do inglês): diretrizes ou informações de um cliente à agência de propaganda ³ Job (do inglês): pedido de serviço gerado a partir do Briefing.

35

:

36

37

4 AÇÕES PROMOCIONAIS

Nessa etapa do trabalho serão apresentados todos os materiais feitos para o Instituto Rudolf Steiner, sendo a maior parte deles flyers e cartazes de divulgação de eventos. Será incluído também o website novo completo feito em Wordpress e uma proposta de layout para a capa e perfil da página do Facebook. Durante o trabalho, o cliente avaliou que não há necessidade atual de fazer cartões de visita e folders institucionais novos. É necessário ressaltar que todos os materiais foram feitos seguindo a metodologia já especificada nesse trabalho no tópico 3.3.

4.1 WEBSITE

Para o desenvolvimento do website foi utilizado um método de três etapas acompanhadas pelo cliente e professores da área com o intuito de aperfeiçoar o projeto. Ao longo do processo de criação, o site sofreu alteração até chegar ao resultado final. As etapas foram:

Wireframe

Design

Programação

Desenvolvimento do Wireframe do website, ou seja, um protótipo que serve para definir a hierarquia de informação

Elaboração do Design no Photoshop com auxílio de dados obtidos no briefing e feedback direto do cliente

Programação feita em HTML, CSS, JavaScript e PHP utilizando os frameworks Wordpress e Bootstrap

É importante ressaltar ainda que o website é a principal forma de comunicação do Instituto com os seus colaboradores. Desta forma deve-se considerar ainda a possibilidade deste colaborar para o aumento da receita do Instituto através da divulgação de profissionais da área de Antroposofia.

38

4.1.1 WIREFRAME

O Wireframe é um protótipo do website que visa definir a estrutura e hierarquia de informação do projeto, em outras palavras, é um esqueleto do site. Esse guia visual está muito relacionado com os conceitos de taxonomia e otimização que serão abordados abaixo. O software utilizado para o desenvolvimento dos Wireframes foi o Corel Draw X6.

Figura 9 – Wireframe da página “Home”

39

A logo está localizada no meio, pois divide o menu em duas partes: uma institucional e a outra informacional;

Esse slider irá apresentar os posts de maior destaque do website;

Dois blocos com informações de maior importância: Eventos – apresenta os eventos mais recentes realizados pelo Instituto e Serviços – apresenta as áreas em que a Antroposofia atua;

Um pequeno formulário de cadastro que visa captar email de pessoas interessadas nas informações do Instituto, com o intuito de formar uma lista de emails para divulgação; Nos Wireframes o rodapé foi dividido em três blocos horizontais: 1) Contatos: contendo o número e endereço do cliente 2) Parceiros: logo dos parceiros que mantém o Instituto 3) Facebook: painel padrão para curtir a Fan Page;

Figura 10 – Análise do Wireframe da página “Home”

40

A lupa trás a noção de ícone, conceito abordado na Semiótica. Ela representa para o usuário a possibilidade de pesquisar algo no site. Ao clicar nessa lupa aparece um campo de busca; O conceito de proximidade se aplica nesse caso, no qual há vários blocos com semelhança, que podem ser identificados como do mesmo assunto por estarem próximos e manterem um mesmo padrão; Outra característica percebida nesse bloco é a continuidade, há uma tendência natural para leitura de cima para baixo, seguindo a orientação da flecha pontilhada;

A simplicidade do formulário e seus elementos demonstra que há alta pregnância para o usuário do site; Figura 11 - Análise do Wireframe da página “Home”

41

Figura 12 – Wireframe da página “O Instituto”

42

Novamente é percebido o conceito de ícone da Semiótica; Linha do tempo, na qual o usuário poderá navegar pelos anos de existências do Instituto, visualizando os principais acontecimentos daquele ano;

Figura 13 – Análise Wireframe da página “O Instituto”

43

Figura 14 – Wireframe da página “Antroposofia”

44

Uso da interação Cover Flow, que permite que o usuário visualize e navegue pelas várias áreas que a Antroposofia possui; Figura 15 – Análise do Wireframe da página "Antroposofia"

45

Figura 16 – Wireframe da página “Agenda”

46

Sistema de busca pensando na usabilidade, no qual o usuário pode pesquisar por algum tópico específico; A tabela foi utilizada, pois se mostrou a maneira mais prática de organizar as informações, além de atender uma solicitação do cliente;

Figura 17 – Análise do Wireframe da página “Agenda”

47

Figura 18 - Wireframe da página “Artigos”

48

Figura 19 - Wireframe da página "Contato"

49

Um ícone representando o telefone para entrar em contato com o Instituto, caso o usuário prefira falar ao vivo ao invés de mandar um email. Mapa do Google Maps que possui alta pregnância, bem como é uma maneira de fornecer a localização do Instituto para seus usuários.

Formulário de contato padrão com os campos Nome, Email, Assunto e Mensagem para o usuário completar com suas informações.

Figura 20 – Análise do Wireframe da página “Contato”

50

4.1.1.1.

USABILIDADE E ARQUITETURA DA INFORMAÇÃO

A estruturação da informação é a etapa na qual todas as informações são classificadas e organizadas para dar direcionamento por meio da definição de um roteiro que o usuário deverá percorrer. Esta fase foi planejada considerando à navegação, o fluxo de informação, o design, à interatividade e à praticidade de uso (“usabilidade”). Para este fim foram utilizados conceitos de taxonomia e otimização descritos nos próximos tópicos. O resultado pode ser visualizado na figura 8.

Figura 21 – Mapa do Site

4.1.1.1.1. TAXONOMIA

A taxonomia vem do grego taxis=ordem e onoma=nombre, derivou-se de um dos ramos da Biologia que trata da classificação lógica e científica dos seres vivos. “Porém, apesar de serem derivadas da Biologia, passaram a ser aplicadas nos ambientes digitais” (VITAL, 2012), devido ao crescente número de informações, consequente dos avanços tecnológicos, robotização e automação das empresas, que trouxeram grandes modificações nos ambientes organizacionais. Com isso, surgiu a necessidade de meios automatizados de pesquisa e filtragem de informação, com o uso de taxonomias, quem tem o objetivo de “[...] representar conceitos através de termos, agilizar a comunicação entre especialistas e outros públicos; encontrar o consenso; propor formas de controle da diversidade de

51

significação e oferecer um mapa de área que servirá como guia em processo de conhecimento.” (TERRA, 2005 citado por VITAL, 2012) As estruturas taxonômicas, aplicadas em ambientes corporativos, podem ser aplicadas em três tipos, de acordo com o objetivo a ser alcançado: taxonomia descritiva, de navegação e taxonomia para gerenciamento de dados (CONWAY E SLIGAR, 2002 citado por VITAL, 2012). No entanto, a taxonomia aplicada ao desenvolvimento do site descrito no trabalho esta restrita a taxonomia de navegação que segundo o autor, “é baseada nos modelos mentais de organização das informações. A estruturação das informações fica visível ao usuário final, pois o objetivo é que a descoberta das informações aconteça na navegação. E, com base na observação desse comportamento de busca, a taxonomia vai modificandose; conhecer o usuário nesse tipo de taxonomia é fundamental. As relações entre os termos precisam fazer sentido para os usuários dessa taxonomia, sem necessariamente apresentarem as subordinações lógicas.” (CONWAY E SLIGAR, 2002 citado por VITAL, 2012).

O planejamento do site da organização em estudo segue rigorosamente a aplicação de taxonomias, devido ao padrão de classificação de informações adotado e aplicado desde a construção dos Wireframes.

4.1.1.1.2. OTIMIZAÇÃO

A otimização em sites pode ser entendida como a melhoria de vários elementos para permitir um posicionamento privilegiado em sistemas de busca (Bing, Yahoo, Google e etc). O marketing na internet tratado no tópico “2.2 Marketing Digital” utiliza vários métodos para realizar a otimização. Os aspectos a serem melhorados num site vão desde a mudança do domínio ou linguagem de programação, passando pela otimização do layout, imagens, textos e outros. Todos os aspectos tratados no tópico “2 Fundamentação Teórica”, assim como as linguagens de programação escolhidas para o desenvolvimento do site do Instituto Rudolf Steiner foram aplicadas como o objetivo melhorar sua otimização comparada a antiga versão que já é monitorada. Considerando principalmente que o Instituto se trata de uma ONG e o site é uma das suas principais formas de

52

comunicação com o público a otimização é de suma importância para a organização, pois pode trazer benefícios que vão desde o aumento de receita até a disseminação dos conceitos de Antroposofia.

4.1.2 DESIGN

Os conceitos fundamentais sobre Semiótica, Gestalt e Teoria da Cor citados no

tópico

“2

Fundamentação

Teórica”

foram

muito

importantes

para

o

desenvolvimento do website, pois permitiram uma visão mais abrangente de como funciona a dinâmica de percepção do público sobre determinada comunicação. O software utilizado para o desenvolvimento do design do site foi o Adobe Photoshop.

4.1.2.1.

TIPOGRAFIA

A fonte utilizada foi a Josefin Sans, pois sua estética é semelhante ao que o Instituto Rudolf Steiner transmite: bordas arredondadas, sem formas geométricas exatas e com suavidade e leveza. Segundo o autor da fonte, Santiago Orozco, ela reflete o design sueco e a paixão sueca por um bom estilo de vida (GOOGLE FONTS, 2014). A Suécia é um dos países mais praticantes da Antroposofia no mundo, portanto a fonte se encaixa perfeitamente no contexto do site.

Figura 22 – Fonte do Site

53

Figura 23 – Fonte do Site

4.1.2.2.

CORES

As cores utilizadas no website foram baseadas no logo do Instituto, o qual já existia antes desse plano ser elaborado. Essas cores já estão bem presentes no imaginário de todos os associados e contribuintes do Instituto, o que torna de fácil identificação com a instituição. As cores escolhidas mantém a ideia de um design clean, preservando a leveza e simplicidade.

Figura 24 – Logo do Instituto Rudolf Steiner

54

Figura 25- Paleta de Cores do Site

55

4.1.2.3

PÁGINAS

Figura 26 – Design da página “Home”

56

Aqui é percebido o conceito de clausura, pois há uma percepção de fechamento na área pontilhada. Outro conceito percebido é o de continuidade, no qual o usuário segue seu olhar de acordo com a flecha pontilhada;

Todas as imagens possuem bordas arredondadas, reforçando a estética da Antroposofia;

O botão Cadastrar está com uma cor chamativa, o que dá alta pregnância ao usuário;

Figura 27 – Análise do Design da página “Home”

57

A parte “Áreas”, antes nomeada “Serviços”, foi agrupada de uma maneira diferente para facilitar a visualização do usuário. Agora os tópicos estão organizados em abas que revelam seu conteúdo ao serem clicadas;

O logo dos parceiros, que antes estava no rodapé do site, agora ficam acima do rodapé em um slider rotativo. Isso dá mais visibilidade aos parceiros que mantém o Instituto;

O rodapé previsto no Wireframe não estava encaixando com a proposta de leveza do design. O novo rodapé está mais discreto e harmonizando com o restante do design da página, trazendo as mesmas informações: telefone, endereço e Facebook. Figura 28 – Análise do Design da “Home”

58

Figura 29 – Design da página “O Instituto”

59

Esse é o cabeçalho padrão de todas as páginas, dando ênfase à imagem e novamente com bordas arredondadas. O título está destacado por estar em maiúsculo e com tamanho de fonte maior;

Há um grande cuidado com o alinhamento de todas as páginas.

Figura 30 – Análise do Design da página “O Instituto”

60

Figura 31 - Design da página “Antroposofia”

61

Figura 32 - Design da página “Agenda”

62

Figura 33 - Design da página “Artigos”

63

Figura 34 - Design da página “Contato”

64

4.1.3 PROGRAMAÇAO

A programação foi feita com o uso das linguagens HTML5, CSS3, PHP, JavaScript e JQuery e dos frameworks Wordpress e Bootstrap. As características de que cada uma dessas ferramentas já foi abordada no trabalho anteriormente, no tópico 3.1 Programas e Linguagens Utilizadas. É interessante ressaltar que o uso do Bootstrap, que é um framework que possibilita o desenvolvimento ágil e com qualidade do CSS do website, foi utilizado pela proposta de layout profissional e condizente com o design desenvolvido pela equipe para o site do Instituto Rudolf Steiner. O Wordpress é atualmente a plataforma mais utilizada para websites com gerencialmente de conteúdo e, visto que o cliente já usava essa ferramenta anteriormente, foi optado por mantê-la. O Wordpress permite que o usuário tenha domínio total sobre o conteúdo que está exposto no site.

Figura 35 – Logos das linguagens e frameworks utilizados na programação

65

4.2

FLYERS E CARTAZES

Assim como o design do website, os flyers e cartazes também foram desenvolvidos de acordo com os conceitos apresentados na fundamentação teórica presente neste documento.

Figura 36 - "Encontros Preparatórios para formação em Pedagogia Social”

66

No flyer apresentado (figura 36) há destaque nas informações como data, horário e local que aparecem em fonte negritada e superior ao restante da peça, direcionando a visão do usuário diretamente para estes dados de maior relevância. As demais cores utilizadas (figura 37) foram baseadas no logo que foi enviado pelo cliente. O princípio da semelhança, que vem da teoria da Gestalt pode ser notado no formato das fotos que apresentam cantos arredondados. A proximidade pode ser observada entre a foto e o texto, que tendem a ser visto como um único elemento. A continuidade pode ser notada na forma com as informações são apresentadas, ou seja, uma foto do palestrante, abaixo seu “mini curriculum” e ao lado uma pequena sinopse da palestra.

Figura 37 - Paleta de cores e código CMYK utilizados na elaboração do flyer.

67

Figura 38 - Flyer “Pintando os tons e Cantando as cores”

68

Neste segundo flyer (figura 38), a tabela de cores utilizada (figura 39) apresenta relação com a imagem enviada pelo cliente. Novamente a destaque nas informações de maior relevância onde também pode ser notado o princípio da continuidade, na forma como estas informações foram apresentadas. O fechamento também pode ser observado nesta parte do flyer, onde apesar da existência de apenas uma linha vertical, a tendência é que sejam visualizados como um quadrado, formando um bloco de informações semelhantes. É importante ressaltar ainda, que este flyer, foi o que apresentou maior dificuldade na elaboração, devido ao excesso de texto exigido pela palestrante.

Figura 39 - Paleta de cores e código CMYK utilizados na elaboração do flyer 69

Figura 40 – Flyer “Assembleia Geral do Instituto Rudolf Steiner”

70

No flyer a paleta de cores utilizada (figura 41) apresenta cores relacionadas à aquarela, que esta intimamente relacionada à Antroposofia. A data e o horário, assim como nos flyers já apresentados mantém a fonte negritada e superior ao restante da peça. Nos números utilizados para enfatizar as pautas a serem discutida seguem a ideia de continuidade e fechamento, considerando que tendem a ser vistos como um bloco único de informações. A frase do rodapé também merece destaque, considerando que o flyer trata de uma assembleia interna da organização.

Figura 41 - Paleta de cores e código CMYK utilizados na elaboração do flyer

71

Figura 42 - Flyer "Rudolf Steiner e a fundação dos Novos Mistérios Cristãos"

72

Neste último flyer (figura 42) novamente há destaque nas informações de maior relevância. A paleta de cores (figura 43) mantém relação com a imagem enviada pelo cliente. O princípio do fechamento pode ser notado na mudança de cores entre o rodapé/ cabeçalho do restante da peça, destacando a relação entre a imagem que está intimamente relacionada com a Antroposofia e as informações dispostas abaixo. Com isso se pode perceber que ambos os flyers não seguem um padrão, pois tratam de eventos distintos, mas cria-se uma identidade visual própria da organização.

Figura 43 - Paleta de cores e código CMYK utilizados na elaboração do flyer

73

4.3

FACEBOOK

Por ser uma rede social mundial o Facebook apresenta alguns critérios de layout pré-determinados, por isso, na primeira página da Fan Page do Instituto Rudolf Steiner foi utilizada uma imagem de fundo, bem como um box na margem inferior esquerda com o logo e o nome da organização. Desta forma, é possível encontrar certa semelhança em algumas páginas existentes nesta rede específica, que demonstram design de alta pregnância, "blocos" que transmitem a sensação de unificação e a continuidade percebida desde o início das páginas, fazendo com que o usuário se identifique com o layout, com o qual já está familiarizado. Contudo, o objetivo principal da equipe é poder orientar o cliente de como potencializar esse canal, através da reformulação do design, disponibilizando dicas para um acesso mais eficiente, sugestão para melhores horários e tamanhos das postagens, assim como apresentar ferramentas que auxiliam a comunicação para uma divulgação mais precisa dentro da rede. Uma dessas ferramentas será o Facebook Adwords, que tem como uma das funções a opção “Promover Posts”, onde cada publicação contará com um botão “Promover”, que quando clicado apresenta uma sequência de telas para que seja definido o público da campanha, valor investido e método de pagamento, atingindo um número maior de usuários tornando a publicação mais visível.

74

Modelo Atual:

Figura 19 – Modelo atual de capa e foto de perfil do Facebook

Modelo Proposto:

Figura 20 – Modelo proposto de capa e foto de perfil do Facebook

75

5 CONCLUSÃO

O trabalho foi um grande aprendizado para toda equipe, pois mostrou na prática como a teoria aprendida durante o curso pode ser aplicada na vida profissional e vice-versa. Percebemos a necessidade de diversas adaptações durante o processo de criação para adequar as expectativas do cliente com os conhecimentos sobre Produção Multimídia, e isso acrescentou muito para o conhecimento técnico e mercadológico dos integrantes da equipe. Todas as estratégias propostas foram efetivadas, com exceção do desenvolvimento de cartões de visita e folders institucionais, que o cliente avaliou que não seriam necessários no momento atual. Por fim, vale ressaltar que o desenvolvimento de um plano de comunicação e a efetivação do mesmo é algo bem trabalhoso, porém a visualização de todo o material desenvolvido somado à satisfação do cliente faz com que todo o trabalho tenha valido a pena e enriquecido a formação dos membros da equipe.

76

6 REFÊRENCIAS BIBLIOGRÁFICAS  

              

  

  



ARMAND, MATTERLART MICHÉLE. História das Teorias da Comunicação : III - A teoria da informação: 1.Informação e sistema - O modelo formal de Shannon, 2. A referência cibernética - a entropia. CANTO, Guilherme Cardoso do. Marketing digital em redes sociais nas empresas de assessoria e consultoria de comunicação: NAS EMPRESAS DE ASSESSORIA E CONSULTORIA DE COMUNICAÇÃO. 2012. Disponível em: . Acesso em: 29 jul. 2014. CARVALHO, C M S; FELIZOLA, M P M. A Importância do Marketing na Captação de Recursos para o Terceiro Setor. Universidade Tiradentes, UNIT, SE. Intercom –Sociedade Brasileira de Estudos Interdisciplinares da Comunicação. XI Congresso CARVALHO, Nelly. A Terminologia da Publicidade. Disponível em: . Acesso em: 11 agosto 2014. CASTILHO JUNIOR, Newton Corrêa. Conceitos de Marketing. Curitiba, 2014. Corel Corporation Brasil. 2014. Disponível em: . Acesso em: 07 dez. 2014. CSS Tutorial. 2014. Disponível em < http://www.w3schools.com/css/>. Acesso em 06 dez. 2014. DAMASCENO, Anielle. Webdesign: teoria e prática. Florianópolis: Visual Books, 2003. Desenvolvendo Websites com PHP de Juliano Niederauer Estampa Web – Diferença entre CMYK e RGB?. 2014. Disponível em . Acesso em 09 dez. 2014. FARINA, Modesto. Psicodinâmica das cores e comunicação. São Paulo: Edgar Blücher, 1986. Globo Bootstrap. 2014. Disponível em . Acesso em 08 dez. 2014. Google Fonts – Josefin Sans. 2014. Disponível em: < https://www.google.com/fonts/specimen/Josefin+Sans>. Acesso em: 09 dez. 2014. GUIMARÃES, Luciano. A cor como informação: a construção biofísica, lingüística e cultural da simbologia das cores. São Paulo: Annablume, 2000. HTML5 Semantic Elements. 2014. Disponível em < http://www.w3schools.com/html/html5_semantic_elements.asp>. Acesso em 08 dez. 2014. jQuery. 2014. Disponível em . Acesso em 07 dez. 2014. LENGLER, Fernando Ramos; CRUZ, Ricardo de Lima Caiubi; JACOBSEN, Alessandra de Linhares. Captação de recursos pelo terceiro setor: a importância de um intermediário como canal de comunicação entre doador e tomador. 2010. Disponível em: . Acesso em: 20 ago. 2014. LIQUORI, Ester. The Close Relationship Between Gestalt Principles and Design.2011. Disponível em: . Acesso em: 10 set. 2014. MELCHOR, Paulo. Associação e fundação. Disponível em: . Acesso em: 28 agosto 2014. MORAIS, Rodrigo. O poder e a importância do Marketing nas organizações: Marketing nas organizações: Aspecto essencial.. 2012. Disponível em: . Acesso em: 15 jul. 2014. MySQL. 2014. Disponível em . Acesso em 06 dez. 2014. Notepad++. 2014. Disponível em . Acesso em 08 dez. 2014. OKADA, SionaraIoco; SOUZA, Eliane Moreira Sá de. Estratégias de marketing digital na era da busca. Remark – Revista Brasileira de Marketing, Sao Paulo, v. 10, p.46-72, Não é um mês valido! 2011. Disponível em: . Acesso em: 19 jul. 2014 PEDROSA, Israel. O universo da cor. Rio de Janeiro: Senac, 2006.

77

          

     

PHP Documentation. 2014. Disponível em . Aceso em 08 dez. 2014. phpMyAdmin. 2014. Disponível em . Acesso em 08 dez. 2014. Portal Alexandria – Filosofia, História e Artes.Disponível em: Acesso em out. 2014. Printi – Utilização do Sistema de Cores RGB. Disponível em < http://www.printi.com.br/blog/utilizacao-do-sistema-de-cores-rgb >. Acesso em 09 dez. 2014. SAMY SILVA, Mauricio. CSS3: Desenvolva aplicações web profissionais com o uso dos poderosos recursos de estilização das CSS3 SAMY SILVA, Mauricio. HTML5:A Linguagem de Marcação que Revolucionou a Web SANT’ANNA, A. Propaganda: teoria, técnica e prática. São Paulo: Pioneira, 1996. SANTAELLA, Lucia. A Teoria Geral dos Signos. 1. ed. São Paulo: Pioneira Thomson Learning, 2004 SANTAELLA, Lucia. Semiótica Aplicada. 1. ed. São Paulo: CengageLeraning, 2008 SERRA PAULO, Manual da Teoria da Comunicação: cap 9 - 9.2 As visões utópicas sobre a Internet. SERRANO, Daniel Portillo. O que é Marketing? O Marketing e suas principais definições. Disponível em: . Acesso em: 17 maio 2014. SILVA, Sandro Takeshi Munakata da. Teorias da comunicação nos estudos de relações públicas. 2011. SOUSA, Joselson. Exemplificações sobre as leis da Gestalt. 2009. Disponível em: . Acesso em: 07 dez. 2014 VIANA, Iury. Gestalt Leis da Gestalt.2006. Disponível em: . Acesso em: 06 out. 2014. VILLAS BOAS NETO, Antônio. 2003. Gestão de marketing para organizações do terceiro setor. WIENER, Norbert. 1965. Cybernetics Or Control and Communication in the Animal and the Machine. Wordpress. 2014. Disponível em . Acesso em 08 dez. 2014.

78