FACULDADE DE ENGENHARIA DA UNIVERSIDADE DO PORTO YWeb — Plataforma de Criação de Templates para Marketing Online José Carlos Calhau Pinto Mestrado Integrado em Engenharia Informática e Computação Orientador: João Correia Lopes Co-orientador: David de Oliveira Rego 24 de Julho de 2017 YWeb — Plataforma de Criação de Templates para Marketing Online José Carlos Calhau Pinto Mestrado Integrado em Engenharia Informática e Computação Aprovado em provas públicas pelo Júri: Presidente: Pedro Souto Arguente: Christophe Soares Orientador: João Correia Lopes 24 de Julho de 2017 Resumo Nos dias de hoje, qualquer negócio necessita de ter uma grande envolvência a nível de marke- ting online para singrar no mercado. O crescimento tecnológico constante nesta área levou a um desenvolvimento exponencial da utilização de páginas web como principal meio de marketing de uma empresa ou serviço no mundo digital. Contudo este canal tem sido explorado até à exaustão, dando origem a uma proliferação de páginas web de qualidade duvidosa, muitas vezes já tecnolo- gicamente ultrapassadas e que acabam por ter como consequência o contrário ao motivo que levou à sua criação, que é a atração e captação de potenciais novos clientes. De forma a ultrapassar este problema de marketing contraproducente, a empresa YMedia iden- tificou a oportunidade de fornecer, a uma empresa, serviços completos de marketing online, tra- tando da criação de páginas web de qualidade, gestão de conteúdos e a sua integração com redes sociais como forma de divulgação de negócio. Este serviço é prestado recorrendo à plataforma yWeb, ferramenta desenvolvida pela YMedia, que oferece a possibilidade de criar templates de forma independente em relação ao conteúdo necessário para formar a página web. O objetivo desta dissertação consiste na implementação de novas funcionalidades que permi- tam trazer valor acrescentado à plataforma yWeb, de forma a simplificar o processo de geração de templates de forma automatizada, seguindo as normas da empresa YMedia. A validade do sistema desenvolvido será testada em ambiente empresarial, servindo como caso de estudo a satisfação da empresa YMedia e dos seus clientes. O produto final é uma melhoria relativamente à plataforma yWeb, tornando-a muito mais com- pleta. Contudo, o seu propósito final reside num objetivo mais idealista de alterar a forma como as empresas abordam as suas operações de marketing online e do crescimento do canal online, não apenas de uma forma quantitativa, mas predominantemente qualitativa, de forma simplificada e padronizada, através da implementação de métodos otimizados para o marketing digital. Para tal ser possível, foram efetuadas sugestões de trabalho futuro a realizar e funcionalidades neces- sárias a acrescentar para que a empresa YMedia possa disponibilizar a aplicação desenvolvida a programadores externos à empresa. Keywords: marketing, online, yweb, template i ii Abstract Nowadays, any business needs to have a big impact in online marketing to be able to achieve greatness in the market. The constant technological growth in this area has lead to an exponential growth in the use of web pages as the main marketing channel of a company or service in the digital world. However, this channel has been overexploited until saturation, creating a prolife- ration of web pages of dubious quality, many times already technologically outdated, leading to consequences that turn out to be the exact opposite of the reason that lead to their creation, which is the ability to attract and secure potential new clients. To surpass this counterproductive marketing problem, the portuguese company YMedia has identified the opportunity to supply to other companies full marketing online services, dealing with the creation of quality web pages, content management and their integration with social media as means of promoting the business. This service is supported with the use of the yWeb platform, which is a framework developed by YMedia, and offers the possibility to create templates in a independent way relating to the content necessary to develop a web page. The purpose of this dissertation consists in the implementation of new functionalities that allows to bring increased value to the yWeb platform, simplifying the process of template genera- tion in an automatic way, according to the rules and norms previously established by the YMedia corporation. The validation of the developed system will be tested in an corporate environment, serving its purpose as a case study of the satisfaction degree of the company YMedia and their clients. The final product is an improvement of the yWeb platform, making it more complete. However the final objective of this dissertation lies in a more idealistic purpose to alter the way companies approach their online marketing operations and to help in the growth of the online channel not only in quantity, but mostly according to quality, in a simplified and standardized manner, by implementating optimal practices of digital marketing. To make this possible, future work and needed features suggestions were made so that YMedia can distribute the application to external developers. Keywords: online, marketing, yweb, template iii iv Agradecimentos Gostaria de agradecer ao meu orientador Adão Viana Pinto por ter confiado e apostado em mim para desenvolver este projeto ambicioso e por me oferecer todas as condições necessárias para o conseguir. Agradeço também, ao meu orientador na Faculdade, o professor João Correia Lopes, por todo o apoio, compreensão e dedicação que teve para mim. Para sempre estimarei a ajuda que me prestou e gostaria de um dia poder retribuir de algum modo a importância que teve para mim. Gostaria de agradecer também a todos os meus colegas e amigos que ao longo deste período sempre me apoiaram e acreditaram em mim, mesmo quando eu próprio já não o fazia. Foram todos muito importantes para mim e sem eles não teria conseguido chegar onde cheguei. Uma palavra especial para o meu colega, amigo e orientador David Rego, por me ter proporcionado esta oportunidade e pelo incansável apoio, paciência e amizade. Obrigado também a todos os elementos da YMedia, por me terem acolhido tão bem e por me fazerem sentir em família. E por fim, mas não menos importante, à minha família, em especial aos meus pais, pelo apoio incondicional, pela força e motivação que me deram ao longo dos anos. Um obrigado a todos. José Pinto v vi “I never lose. I either win or learn.” Nelson Mandela vii viii Conteúdo 1 Introdução1 1.1 Contexto e Enquadramento . .1 1.2 Problema . .2 1.3 Motivação . .2 1.4 Objetivos . .3 1.5 Estrutura da Dissertação . .4 2 Marketing5 2.1 Introdução ao Marketing . .5 2.2 Estratégia de Marketing . .6 2.2.1 Segmentação de Mercado . .6 2.2.2 Marketing Mix . .6 2.3 Marketing Digital . .7 2.3.1 Importância do Marketing Digital . .8 2.3.2 Os 8 P’s . 10 2.3.3 Canais de Distribuição . 12 2.4 Considerações Finais . 15 3 Revisão Tecnológica 17 3.1 HTML e CSS . 17 3.2 Linguagens de Programação Web . 18 3.3 Linguagens de Criação de Templates . 19 3.4 Base de Dados . 20 3.5 Controlo de Versões . 21 3.6 Frameworks para Desenvolvimento de Aplicações Multiplataforma . 22 3.7 Considerações Finais . 23 4 A Plataforma YWeb 25 4.1 Criação de Templates . 25 4.1.1 Introdução ao Sistema de Templates . 26 4.1.2 Tipos de Web Design . 27 4.1.3 Qualidade Global de um Template . 30 4.1.4 Criação de Templates no YWeb . 31 4.2 Base de Dados da Aplicação . 32 4.3 Cliente de Gestão de Conteúdo . 33 4.4 Considerações Finais . 35 ix CONTEÚDO 5 Plataforma de Criação de Templates para Marketing Online 37 5.1 Visão Geral . 37 5.2 User Stories ..................................... 38 5.3 Requisitos Não-Funcionais . 39 5.4 Arquitetura . 39 5.5 Tecnologias a Utilizar . 41 5.6 Considerações Finais . 42 6 Implementação da Aplicação 43 6.1 Interface Gráfica . 43 6.2 Módulos . 44 6.3 Build ......................................... 44 6.4 Produto Viável Mínimo (MVP) . 45 6.4.1 Autenticação . 45 6.4.2 Servir Template . 46 6.4.3 Criar Novo Template . 46 6.4.4 Push Template . 47 6.4.5 Publicar Template . 47 6.4.6 Listar Negócios . 47 6.4.7 Listar Templates . 48 6.5 Resultados e Avaliação . 48 7 Conclusões e Trabalho Futuro 53 7.1 Considerações Finais . 53 7.2 Trabalho Futuro . 53 Referências 55 x Lista de Figuras 2.1 Diferenças entre marketing de massas (esq.) e marketing segmentado (dir.) . .6 2.2 Os 4 P’s do Marketing Mix . .7 2.3 Matriz de Pesquisa Online, Compra Offline (ROPO) . .8 2.4 Exemplo de modo de funcionamento de uma Ad Network . 15 4.1 Processo simples de um sistema de template web . 26 4.2 Layout Holy Grail .................................. 28 4.3 Exemplo de uma página web responsiva . 29 4.4 Modelo das dimensões de qualidade de um website . 30 4.5 Página gerada através do YWeb . 33 4.6 Pré-visualização da página com os dados de um negócio . 34 4.7 Templates disponíveis para integrar com os conteúdos do negócio . 34 4.8 Página antes de ser efetuada a alteração de cor . 35 4.9 Página após ser efetuada a alteração de cor . 36 5.1 Arquitectura da Solução Proposta . 40 6.1 Menu de autenticação . 45 6.2 Menu de servir template . 46 6.3 Menu de criar template . 47 6.4 Push de um template . 48 6.5 Menu de publicar um template . 49 6.6 Menu de listar negócios . 50 6.7 Menu de listar templates . 51 xi LISTA DE FIGURAS xii Lista de Tabelas 2.1 Execução online de diferentes ferramentas comunicacionais . 11 5.1 Requisitos Não-Funcionais . 39 xiii LISTA DE TABELAS xiv Abreviaturas e Símbolos AMA American Marketing Association API Application Programming Interface CSS Cascading Style Sheets EJS Embedded Javascrip HTML Hypertext Markup Language MVP Minimum Viable Product OVP Online Value Proposition PHP PHP: Hypertext Preprocessor PPC Pay-Per-Click PPV Pay-Per-View PSD Photoshop Data RWD Responsive Web Design SEM Search Engine Marketing SEO Search Engine Optimization XML eXtensible Markup Language xv Capítulo 1 Introdução As pessoas têm tentado influenciar as outras desde o início dos tempos, utilizando para tal todos os recursos que têm à sua disposição.