RELATÓRIO DE ESTÁGIObdigital.ipg.pt/dspace/bitstream/10314/4583/1/Luís Morgado_500882… · Gesp.010.03 Escola Superior de Educação, Comunicação e Desporto Instituto Politécnico

TPGfolitéenico

1 daiGuardaPolytechnicof Guarda

RELATÓRIO DE ESTÁGIO

Licenciatura em Comunicação Multimédia

Luís Filipe Valente Morgado

novembro 1 2018

Ii

Gesp.010.03

Escola Superior de Educação, Comunicação e Desporto

Instituto Politécnico da Guarda

R E L A T Ó R I O D E E S T Á G I O

LUÍS FILIPE VALENTE MORGADO

RELATÓRIO PARA A OBTENÇÃO DO GRAU DE LICENCIADO

EM COMUNICAÇÃO MULTIMÉDIA

Novembro de 2018

INSTITUTO POLITÉCNICO DA GUARDA

ESCOLA SUPERIOR DE EDUCAÇÃO, COMUNICAÇÃO E DESPORTO

I

Ficha de Identificação

Aluno: Luís Filipe Valente Morgado

Número: 5008821

Instituição de ensino: Instituto Politécnico da Guarda

Unidade orgânica: Escola Superior de Educação, Comunicação e Desporto da Guarda

Curso: Comunicação Multimédia

Docente Orientadora: Profª Maria João Marques Alves Da Costa Pereira

Instituição acolhedora do estágio: Sentido Comum – Soluções de Tecnologia e Marketing

Morada: Rua Dr. Martins das Neves Lote 2 CV Frente, 6300-372 Guarda

Telefone: 271 083 191

Endereço de correio eletrónico: [email protected]

Tutor na instituição: Dr. João Miguel Antunes Fernandes

Grau académico: licenciatura em Comunicação Multimédia no Instituto Politécnico da

Guarda

Duração do estágio curricular: 3 meses

Início e término do estágio curricular: 2 de julho a 28 de setembro de 2018

https://cloud.sysnovare.pt/ipg/funcionarios_geral.FormView?P_CODIGO=422



II

Agradecimentos

Durante a realização do estágio curricular a colaboração de todos aqueles que estavam à

minha volta foi preciosa.

Começo por agradecer ao Engenheiro Francisco Ribeiro e à Dra Sandrina Clara, pela

oportunidade de realizar o estágio na sua empresa, tal como ao meu supervisor João Antunes

por todo o apoio prestado e por me terem orientado neste percurso tão importante para a

conclusão do curso.

Gostaria também de agradecer à orientadora de estágio, Professora Maria João Costa, pela

sua disponibilidade demonstrada e também pelo acompanhamento e dedicação durante a

realização do relatório de estágio.

Também não posso deixar de agradecer à minha família e a toda a gente que de alguma

forma esteve envolvida na realização deste projecto.

A todos eles um muito obrigado.



III

Resumo

O presente relatório pretende descrever as tarefas que foram realizadas durante o estágio.

Este decorreu entre o período do dia 2 de julho de 2018 e 28 de setembro de 2018 na

empresa Sentido Comum – Soluções de Tecnologia e Marketing, sediada na cidade da

Guarda e foi orientado por João Miguel Fernandes Antunes. Durante este período foram

desenvolvidas diversas atividades das quais se destacam o aprofundamento dos

conhecimentos práticos e teóricos adquiridos ao longo dos três anos de curso. Entre as

tarefas realizadas são de destacar a instalação e edição de CMS (Content Management

System); a aquisição de conhecimentos e utilização de gestor de versões; a atualização de

conteúdos nessas mesmas plataformas; a criação de conteúdos multimédia para aplicação

em plataformas CMS, inclusive o tratamento e a vectorização de imagens bitmap, bem como

a criação de ficheiros .svg estáticos e animados; o desenvolvimento e a aplicação de

mecanismos de testes para plataformas CMS; o melhoramento dos conhecimentos em

linguagens de programação. Tudo isto, com uma única e principal finalidade, que consiste

na preparação para uma vida ativa e para um futuro profissional no mercado de trabalho.

PALAVRAS-CHAVE: Plataformas, CMS, Multimédia, SVG, Ficheiros.



IV

Índice

Ficha de Identificação ......................................................................................................... I

Agradecimentos .................................................................................................................. II

Resumo .............................................................................................................................. III

Índice ................................................................................................................................. IV

Índice de Ilustrações ......................................................................................................... VI

Índice de Quadros .......................................................................................................... VIII

Lista de Siglas e Acrónimos ............................................................................................. IX

Glossário de Termos Técnicos ......................................................................................... XI

Introdução ............................................................................................................................ 1

1.1. Estrutura do relatório: ............................................................................................. 2

Capítulo 1 - Designação Social e Localização da Empresa .............................................. 3

1.1. Identificação da empresa ........................................................................................ 4

1.2. Estrutura Orgânica .................................................................................................. 5

1.3. Identidade Visual .................................................................................................... 6

1.3.1. Nome ................................................................................................................... 6

1.3.2. Logotipo .............................................................................................................. 7

1.4. Missão ..................................................................................................................... 8

1.5. Método .................................................................................................................... 8

1.6. Análise SWOT ......................................................................................................... 9

1.6.1. Pontos fortes ...................................................................................................... 11

1.6.2. Pontos fracos ..................................................................................................... 11

1.6.3. Oportunidades ................................................................................................... 11

1.6.4. Ameaças ............................................................................................................ 12

Capítulo 2 - Estágio Curricular ........................................................................................ 13

2.1. Objetivos de estágio ............................................................................................. 14

2.2. Cronograma .......................................................................................................... 14



V

2.3. Instalação de Software .......................................................................................... 16

2.4. Vetorização de imagens bitmap ............................................................................ 17

2.5. Criação de SVG’s animados ................................................................................. 23

2.6. Criação de postais ................................................................................................. 25

2.7. Testes aos websites ............................................................................................... 26

2.8. Tratamento e edição de imagens bitmap .............................................................. 28

2.9. Aprendizagem e aquisição de conhecimentos ...................................................... 30

2.10. Processamento de textos para SEO ...................................................................... 32

2.11. Inserção de vídeos no Youtube ............................................................................. 34

2.12. Redirecionamento de url ....................................................................................... 36

2.13. Recolha e tratamento de dados ............................................................................. 40

2.14. Exploração das funcionalidades do Wordpress .................................................... 42

2.15. Criação de maquetes ............................................................................................. 43

2.16. Assistência técnica ................................................................................................ 48

2.17. Criação do website Clinica CG ............................................................................ 48

2.18. Criação do folheto interativo ................................................................................ 49

2.19. Edição de vídeos ................................................................................................... 50

2.20. Edição de sites ...................................................................................................... 51

2.21. Revisão de sites .................................................................................................... 52

2.22. Conversão de imagens .......................................................................................... 54

2.23. Projeto: A loja dos brinquedos ............................................................................. 55

Reflexão Final .................................................................................................................... 57

Bibliografia ......................................................................................................................... 58

Webgrafia ........................................................................................................................... 60

Anexos



VI

Índice de Ilustrações

Figura 1. Fachada do prédio da sede da empresa .................................................................. 4

Figura 2. Localização exata da empresa................................................................................ 5

Figura 3. Organograma hierárquico da empresa ................................................................... 5

Figura 4. Logotipo da empresa Sentido Comum................................................................... 7

Figura 5. Análise SWOT da empresa ................................................................................... 10

Figura 6. Imagem presente no website da Internorte .......................................................... 18

Figura 7. Logotipo do grupo Tavfer .................................................................................... 19

Figura 8. Logotipo da Tavfer Vinhos .................................................................................. 19

Figura 9. Logotipo da Tavfer Inspeção Auto ...................................................................... 20

Figura 10. Logotipo da Robinil ........................................................................................... 20

Figura 11. Logotipo da Premaq ........................................................................................... 20

Figura 12. Logotipo da Associação para o Desenvolvimento Social do Ramirão .............. 21

Figura 13. Logotipo da empresa Caracol Real .................................................................... 21

Figura 14. Logotipo da marca Tekna .................................................................................. 22

Figura 15. Logotipo da empresa Eurofunghi ...................................................................... 22

Figura 16. Logotipo da empresa Norinstelnor .................................................................... 22

Figura 17. Ícones alojados no website do OPO Hotel Aeroporto ....................................... 23

Figura 18. Ícones alojados no website Seguro de Crédito ................................................... 24

Figura 19. Svg animado ....................................................................................................... 25

Figura 20. Primeiro postal criado no Pixlr Editor ............................................................... 25

Figura 21. Documento Excel com os erros ......................................................................... 27

Figura 22. Exemplo de print screens dos erros ................................................................... 27

Figura 23. Página do centro de inspeção da Figueira da Foz .............................................. 29

Figura 24. Imagem ilustrativa do centro de inpeções automóvel de Alcobaça ................... 29

Figura 25. Fotografia da casa da árvore .............................................................................. 30

Figura 26. Resultado da pesquisa do centro de inspeção da Cima em Alcanena ................ 33

Figura 27. Exemplo do formulário para inserir os textos criados ....................................... 34

Figura 28. Página da conta onde foram inseridos os vídeos ............................................... 35

Figura 29. Site onde se encontravam hospedados os vídeos das outras salas ..................... 35

Figura 30. Vídeos do evento publicados ............................................................................. 36

Figura 31. Exemplo da página inexistente .......................................................................... 37



VII

Figura 32. Documento Excel partilhado .............................................................................. 38

Figura 33. Formulário para redirecionamento url da Robinil ............................................. 38

Figura 34. Site da Premaq ................................................................................................... 39

Figura 35. Formulário para redirecionamento url da Premaq ............................................. 39

Figura 36. Documento Excel com as marcações da Tavfer Inspeção Auto ........................ 40

Figura 37. Gráfico de linhas comparando o número de marcações por mês ...................... 41

Figura 38. Pesquisa do centro de inspeção automóvel no distrito de Aveiro ..................... 41

Figura 39. Secção Plans & Pricing do tema ....................................................................... 42

Figura 40. O antes e depois do website Transpostal em versão desktop ............................. 44

Figura 41. O antes e depois das correções efetuadas no website Transpostal em versão

mobile .................................................................................................................................. 45

Figura 42. Logotipos de cada ramo de atividade da empresa e esboço em papel do website

............................................................................................................................................. 46

Figura 43. Página inicial de um dos ramos de atividade da empresa Open Style ............... 47

Figura 44. Barra de navegação horizontal ........................................................................... 47

Figura 45. Brochura da empresa Transdev e início da sua respetiva edição ....................... 49

Figura 46. Edição e upload das imagens para criação do folheto ....................................... 50

Figura 47. Edição do vídeo no programa Adobe Premiere ................................................. 51

Figura 48. Website da Serralã .............................................................................................. 52

Figura 49. Interface do Visua Studios Code ........................................................................ 52

Figura 50. Exemplo de um dos prints screens captados dos erros encontrados ................. 53

Figura 51. Website da diocese da Guarda ........................................................................... 53

Figura 52. Websites das empresas Bolas e Oxibeiras .......................................................... 54

Figura 53. Página inicial do website A loja dos brinquedos ............................................... 55



VIII

Índice de Quadros

Quadro 1. Cronograma de julho .......................................................................................... 15

Quadro 2. Cronograma de agosto ........................................................................................ 15

Quadro 3. Cronograma de setembro ................................................................................... 15



IX

Lista de Siglas e Acrónimos

AVAC - Aquecimento, Ventilação e Ar Condicionado

CMS - Content Management System

CRM - Customer Relationship Management

DVD - Digital Versatile Disc

EPS - Encapsulated PostScript

HP - Hewlett Packard

HTML - HyperText Markup Language

ISCTE - Instituto Universitário de Lisboa

NET - Network

OCR - Optical Character Reader

PAE - Physical Address Extension

PDF - Portable Document Format

PHP - Hypertext Preprocessor

PRT SC - Print Screen

SEO - Search Engine Optimization

https://pt.wikipedia.org/wiki/Calefa%C3%A7%C3%A3o

https://pt.wikipedia.org/wiki/Ventila%C3%A7%C3%A3o

https://pt.wikipedia.org/wiki/Ar_condicionado

https://www.google.com/search?client=firefox-b&q=print+screen+como+fazer&sa=X&ved=0ahUKEwixtZ3PspHeAhVQXMAKHfaVCfMQ1QIIgwEoAA&biw=1280&bih=686



X

SQL - Structured Query Language

SVG - Scalable Vector Graphics

SWOT - Strengths, Weaknesses, Opportunities and Threats

URL - Uniform Resource Locator

XHTML - EXtensible HyperText Markup Language

XML - eXtensible Markup Language



XI

Glossário de Termos Técnicos

Bitmap - representação de uma imagem na memória do computador através de um conjunto

de bits (dígitos binários).

Browser - É um navegador de Internet.

Combo box - Significa caixa de combinação e é um elemento de interface gráfica

(componente widget).

Download - É um termo que corresponde à ação de transferir dados de um computador

remoto para um computador local.

Feedback - é uma mensagem que responde algo, é uma reação a uma mensagem recebida.

Greyscale - Significa escala de cinza.

Hardware - É um conjunto de elementos físicos de um computador, que engloba o

dispositivo principal e periféricos.

Interface - É um ambiente de interação entre o utilizador e um sistema operativo.

Layout - É um esboço que mostra a distribuição física, tamanhos e pesos de elementos

como texto, gráficos ou figuras num determinado espaço.

Link - É uma ligação entre documentos na Internet.

Logotipo – Forma particular como o nome da marca é representado graficamente.

Loop - repetição automática de uma ocorrência.

Maquete - É uma representação em escala reduzida de um site ou o esboço.

https://pt.wikipedia.org/wiki/Interface_gr%C3%A1fica_do_utilizador

https://pt.wikipedia.org/wiki/Widget

https://pt.wikipedia.org/wiki/Escala_(medidas)



XII

Offline - Ausência de conexão a outro computador, podendo ser considerado

temporariamente inativo, sem conexão, desconectada da internet ou fora de linha.

Online - Termo utilizado para descrever a condição de estar conectado a uma rede de

computadores ou outros dispositivos.

Pixel - É considerado como o menor componente de uma imagem digital.

Player - Refere-se a um programa ou aplicação utilizada para a reprodução de músicas,

imagens e vídeos.

Print screen - É uma tecla comum nos teclados dos computadores, no Windows, quando a

tecla é pressionada, captura em forma de imagem como se fosse uma foto, tudo o que está

presente na tela.

Ranking - Posição que algo ou alguém ocupa numa escala que destaca seu mérito em relação

aos demais.

Redesign - É a acção de reformulação do design de algo.

Renderizar - É o processo pelo qual se obtém o produto final de um processamento digital

qualquer.

Software - São programas que comandam o funcionamento de um computador.

Versão Desktop – é feita para se adaptar a computadores de mesa ou portáteis.

Versão Mobile - é feita apenas para se adaptar à tela de smartphones.

Widget - É um tipo de atalho para os aplicativos que, além de agilizar o acesso ao app,

oferece uma interface gráfica inteligente.

Upgrade - Significa “atualização” ou “melhoria”.

https://pt.wikipedia.org/wiki/Design



XIII

Upload – Refere-se à ação de enviar dados de um computador local para um computador ou

servidor remoto, geralmente através da internet.



1

Introdução

Este relatório de estágio resulta da frequência da licenciatura em Comunicação Multimédia,

na Escola Superior de Educação, Comunicação e Desporto do Instituto Politécnico da

Guarda, cujo plano de estudos tem uma duração de seis semestres, dos quais três meses são

referentes à formação em contexto de trabalho.

A finalidade do estágio curricular consiste na aplicação e consolidação dos conhecimentos

adquiridos, bem como na preparação para uma vida ativa e um futuro profissional no

mercado de trabalho. Este é definido de acordo com o projeto pedagógico do curso, cuja

realização é requisito para aprovação e obtenção do grau de licenciado.

Entre uma lista de possíveis instituições/empresas, que exercem funções associadas com as

diversas áreas abrangentes do curso, apresentada pelo GESP (Gabinete de Estágio e Saídas

Profissionais), escolhi como local para realização do meu estágio a empresa Sentido

Comum. O que me motivou a esta escolha foi a ambição de querer adquirir mais

conhecimentos, nomeadamente na área do Webdesign, uma vez que dados atuais mostram

que a taxa de empregabilidade nesta mesma área ainda é bastante considerável.

Para a elaboração deste relatório, foi necessária a pesquisa de conceitos de diferentes

autores, que visam sustentar as técnicas e métodos utilizados para o desenvolvimento das

várias tarefas que ao longo deste percurso me foram atribuídas. A elaboração deste relatório

de Estágio é de extrema relevância por várias razões: primeiro, é um meio complementar

de avaliação para a conclusão da licenciatura, e segundo, ajuda à consolidação dos

conhecimentos, uma vez que é necessária uma pesquisa intensiva sobre vários métodos,

ideias e conceitos. O estágio constitui um tempo de aprendizagem, melhoria e reflexão

sobre as práticas letivas, olhando o que aprendemos nas salas de aula com uma visão

diferente, partilhando saberes com os colegas de estágio, com o supervisor e restantes

elementos da empresa, num caminho desafiante e de construção permanente.



2

1.1. Estrutura do relatório:

Este relatório divide-se em dois capítulos. No primeiro capítulo será apresentado o local de

estágio, a respetiva missão, localização, estrutura orgânica, identidade visual e análise swot

onde se expõem os seus pontos fortes, pontos fracos, oportunidades e forças.

No segundo capítulo, o qual terá como título “Estágio Curricular”, como o nome indica,

serão detalhadamente expostas todas as atividades realizadas dentro da empresa. Mas antes,

serão apresentados sob forma de cronograma as atividades, que anteriormente foram

delineadas no Plano de Estágio (ver Anexo I – Plano de Estágio).

Por último, apresenta-se a Reflexão Final onde será efetuada uma retrospetiva de todos os

aspetos positivos e negativos que marcaram esta etapa final da minha formação académica.

Designação Social

e

Localização da Empresa

Capítulo 1



4

Neste capítulo é apresentada a empresa, desde a sua missão, localização, estrutura orgânica,

identidade visual e análise tendo em conta os seus pontos fortes, pontos fracos,

oportunidades e forças.

1.1. Identificação da empresa

A empresa tem a seguinte designação social: Sentido Comum – Soluções de Tecnologia e

Marketing. É uma empresa portuguesa, que desenvolve soluções de imagem corporativa

para empresas e cria websites adaptados aos objetivos pretendidos. Surgiu com o objetivo

de criar websites de elevada qualidade: mais apelativos, com melhor usabilidade e mais

fáceis de navegar. A figura 1 mostra a fachada do prédio onde se situa a sede da empresa

Sentido Comum.

Figura 1. Fachada do prédio da sede da empresa

Fonte: Google Maps

Nasceu em 2007 com a finalidade de preencher uma lacuna existente nesta área, na cidade

da Guarda uma vez que é especializada na criação de websites, imagem empresarial e

Internet Booking Engine.

Sediada na Guarda, inicialmente no largo São Francisco, onde foi criada em 2007, e

mudando-se depois no ano de 2010 para as atuais instalações, na rua Dr. Martins das

Neves, Lote 2, CV Frente (figura 2).



5

1.2. Estrutura Orgânica

Atualmente, a empresa Sentido Comum é constituída por três elementos: a Dra. Sandrina

Clara, o Eng. Francisco Ribeiro e o João Antunes. Enquanto a Dra. Sandrina é responsável

pelas áreas de Design e Administrativa, o Eng. Francisco é responsável pelas áreas

Comercial e Técnica e o Dr. João é também responsável pela área Técnica. A figura 3

apresenta o organograma hierárquico da empresa.

Figura 3. Organograma hierárquico da empresa

Fonte: Fonte própria

Francisco RibeiroDepartamento Comercial e Técnico

Sandrina ClaraDepartamento de Design e Administrativo

João AntunesDepartamento Técnico

Figura 2. Localização exata da empresa

Fonte: Google Maps



6

1.3. Identidade Visual

A Identidade Visual de uma empresa é composta por itens como: logotipo, símbolo, cores

e tipologia. Esta deve transmitir visualmente os seus valores, tornando também

simultaneamente visível a sua filosofia e permitindo que esta seja reconhecida pelo público.

Uma boa imagem de uma empresa, corretamente construída, deve atender a todos os

requisitos recomendados para a criação da mesma. Obrigatoriamente deve torná-la mais

notória aos olhos de quem a vê, remetendo o público para conceitos relativos à qualidade,

confiança e competência.

“…lo que podria ser una definacion de la Identidad Corporativa Gráfica como la manera

en que los princípios de una identidad corporativa son convertidos en elementos gráficos,

com un valor simbólico que los vincula.” (Gonzalez, 1999, p. 74) O conceito de identidade

pode ser entendido por um conjunto de peças e elementos gráficos que representam

visualmente e de forma sistemática uma idéia, produto ou serviço. Em geral a identidade

das empresas construidas sob a influência de fatores como a decoração, a cor e simbologia,

o profissionalismo e a competência dos seus colaboradores e a qualidade dos seus produtos.

No entanto uma identidade não é só constituída pela representação gráfica, embora

verifiquemos isso na maioria dos autores que incide maioritariamente na descrição dos

suportes físicos de identidade visual (logótipos, cores). Fascioni tem uma ideia diferente

do conceito de identidade corporativa, argumentando que os elementos visuais apenas

traduzem a sua identidade. “Identidade corporativa é o conjunto de características

essenciais que tornam uma empresa única, especial, inigualável (…) A identidade de uma

empresa é a sua essência, seus princípios, crenças, manias, defeitos, qualidades, aspirações,

sonhos, limitações.” (Fascioni, 2006, p. 13)

Assim, fazem parte da identidade visual de qualquer instituição elementos como: nome,

logótipo e slogan. A identidade visual da Sentido Comum, é composta apenas por dois

elementos: o nome e o logótipo, uma vez que não possui slogan.

1.3.1. Nome

O nome completo da empresa - Sentido Comum, Soluções de Tecnologia e Marketing -

fornece informação suficiente para identificar a atividade desenvolvida.



7

Este nome foi escolhido para transmitir a ideia de que a Sentido Comum trabalha no

mesmo “sentido” que a empresa que procura os seus serviços, para alcançar o objetivo

“comum” a todas as empresas, que consiste em expandir a sua marca.

1.3.2. Logotipo

Figura 4. Logotipo da empresa Sentido Comum

Fonte: Sentido Comum

É através desta representação visual (figura 4), constituída pelo nome da empresa, que esta

vai conseguir atingir o público mais assertivamente. Dado que este elemento faz uma

identificação da empresa bastante clara e objetiva.

O logotipo é o primeiro contato do público com a empresa. O logotipo tem o poder de

definir a primeira impressão de um potencial cliente sobre a empresa e, como tal, apresenta

um peso determinante na imagem desta. Os logotipos de sucesso têm o poder de criar uma

identificação imediata com a marca que representam. É observável tal prova quando se

realiza um exercício mental, pois rapidamente nos lembramos de vários logotipos que

fazem a associação imediata à marca que representam. A coca-cola é um exemplo, entre

muitos outros existentes.1

A combinação das cores e formas escolhidas tem um papel muito importante na elaboração

de um logotipo. Num elemento como este, deve ter-se em conta todos os pormenores pois

contêm um significado subentendido. Por exemplo, a utilização de linhas retas, transmitem

seriedade e rigidez, e a utilização de linhas curvas, passam a ideia de flexibilidade. Em

relação às cores utilizadas, existem as cores quentes e as cores frias, e entre elas diversas

representações e significados.

Nomeadamente neste caso, o logotipo da empresa Sentido Comum, é uma identificação

clara da mesma. Neste logotipo são utilizadas duas cores frias, o verde e o azul, para

transmitir a sensação de calma e profissionalismo.

1 https://marketingdeconteudo.com/como-criar-um-logotipo/, consultado em 30 de outubro de 2018.



8

O verde refere-se a “novos começos” e “crescimento”. Neste logotipo é utilizado com o

significado de um novo começo e crescimento que podem ser concedidos a quem recorre

aos seus serviços. O azul refere-se a “calma” e “responsabilidade”. Neste logotipo tem o

intuito de representar a responsabilidade na realização de todos os trabalhos propostos.

Quanto ao tipo de fonte da letra utilizado, particularmente linhas curvas, pretende

transmitir a ideia de flexibilidade em adaptar o trabalho realizado ao pretendido pelo

cliente.

1.4. Missão

Entende-se como o(s) motivo(s) pelo(s) qual(ais) a empresa foi criada. Leva em conta a

visão do cliente, as suas necessidades, a forma que se acredita ser a mais certa para fazer

realizer os projetos. “Segundo, as declarações de missão destacam as principais políticas e

valores que a empresa deseja honrar.” (Kotler, 1998, p.77)

A missão e os objetivos de uma empresa devem estar bem definidos desde a sua criação,

para que seja possível aplicar os seus serviços no segmento de mercado a que se destina.

Assim, a empresa Sentido Comum, tem como missão:

• Ousadia para sugerir, mudar e fazer a diferença;

• Adaptar tecnologia às reais necessidades do cliente;

• Fomentar empatia e objetivos comuns;

• Investigação constante e evolução continua;

• Comportamento eticamente irrepreensível e profissional.

1.5. Método

Para a elaboração de todos os seus projetos, a empresa Sentido Comum, utiliza uma

determinada metodologia, que consiste nos pontos a seguir explicados. Estes por sua vez

ajudam a encontrar as soluções adaptadas às necessidades de cada cliente.

Em suma, a metodologia anteriormente referida consiste nos seguintes cinco pontos:



9

• Análise - ouvimos e analisamos, damos sugestões e trabalhamos em equipa para

encontrar a solução que mais satisfaça as suas necessidades e também as dos seus

clientes.

• Proposta - elaboramos uma proposta tendo como base as caraterísticas e objetivos

idealizados, debatemos a melhor abordagem em conjunto com o cliente.

Elaboramos um cronograma com as diferentes etapas e metas de controlo

definindo as responsabilidades dos agentes intervenientes.

• Criação - usamos a tecnologia adequada para a finalidade pretendida,

parametrizando soluções existentes ou criando de raiz a solução à sua medida.

Desenvolvemos usando as mais diversas tecnologias (.net, php, html, xhtml, xml,

mysql ou sql).

• Teste - no final do desenvolvimento serão realizados testes em termos de design,

codificação e usabilidade. Após estes pequenos ajustes a solução estará pronta a

ser implementada.

• Implementação - a implementação do projeto no prazo definido e com garantia

de sucesso é o nosso compromisso. Atuamos como parceiros para que a evolução

e amadurecimento da solução, represente vantagem competitiva.

1.6. Análise SWOT

A análise SWOT é utilizada para mostrar de uma forma integrada o resultado do processo

de análise estratégica, determinando as oportunidades e ameaças; e avaliando as

competências, descobrindo assim os pontos fortes e fracos da empresa:

• S – Strenghts – pontos fortes;

• W – Weaknesses – pontos fracos;

• O – Opportunities – oportunidades;

• T – Threats – ameaças.



10

A análise SWOT é o relacionamento dos pontos fortes e fracos da empresa com as

principais tendências do seu meio envolvente, isto é, fazer uma análise das ameaças e

oportunidades conjugada com a análise dos pontos fortes e fracos.

“Através da identificação dos pontos fortes, das fraquezas, das oportunidades e das

ameaças, a organização pode construir estratégias em face dos pontos fortes, eliminar as

suas fraquezas, e explorar as oportunidades para as usar como contra-ameaças”. (Guiné at

al, 2010, p. 102)

Como toda a empresa, a “Sentido Comum”, também partilha este tipo de análise, a qual

será apresentada a seguir, na figura 5. A análise elaborada pela própria empresa. A mesma

foi dividida em análise interna, que consiste nos pontos fortes e os pontos fracos e análise

externa, que consiste nas oportunidades e ameaças. Seguindo esta linha de pensamento,

este exercício permite à empresa verificar e avaliar as estratégias utilizadas

comparativamente a outras empresas do mesmo ramo, definindo melhor as suas

prioridades e corrigindo as suas falhas.

Figura 5. Análise SWOT da empresa


FORÇAS

Qualidade dos serviços prestados

Competência profissional

Reconhecimento do trabalho desenvolvido

FRAQUEZAS

Serviço prestado dispendioso

Recursos humanos limitados

OPORTUNIDADES

Aposta nas novas tecnologias

Localização

AMEAÇAS

Crise económica do país

População envelhecida do país, sem acesso às novas tecnologias

ANÁLISE SWOT



11

1.6.1. Pontos fortes

São vantagens internas da empresa em relação às empresas concorrentes. Neste caso

referem-se a:

• Qualidade dos serviços prestados – a Sentido Comum possui soluções

gráficas e tecnológicas rigorosas, adaptadas às necessidades específicas de

cada cliente.

• Competência profissional – A equipa de trabalho possui habilitações

adequadas ao trabalho desenvolvido.

• Reconhecimento do trabalho desenvolvido – A elevada qualidade do

trabalho desenvolvido permite que este seja reconhecido fora da sua área

geográfica.

1.6.2. Pontos fracos

Designado também por fraquezas, este ponto traduz-se nas desvantagens internas da

empresa em relação às empresas concorrentes. Neste caso referem-se a:

• Serviço prestado dispendioso – Custo elevado do trabalho desenvolvido, o

que pode afastar possíveis clientes.

• Recursos humanos limitados – Apenas três colaboradores.

1.6.3. Oportunidades

São aspetos positivos do meio que envolve a empresa com potencial de lhe trazer vantagem

competitiva e melhorar o seu desempenho. Neste caso referem-se à:

• Aposta nas novas tecnologias – A área de atuação da empresa Sentido

Comum ainda não está muito desenvolvida, o que oferece uma margem de

evolução bastante elevada.

• Localização – Localizada na Guarda, onde a concorrência ainda não é

muito acentuada.



12

1.6.4. Ameaças

São aspetos negativos do meio que envolve a empresa com potencial para comprometer a

vantagem competitiva que ela possui e prejudicar o seu desempenho. Neste caso referem-

se à:

• Crise económica do país – pode levar ao menor investimento nesta área.

• População envelhecida da região – sem acesso às novas tecnologias.

Depois de analisados todos estes pontos relativos à análise Swot efetuada pela empresa,

constatei que se encontra em falta um ponto fraco, ao meu ver, visto que a empresa não se

dá muito a conhecer ao público em geral. Embora tenha vários clientes, sendo alguns deles

grupos empresariais, a empresa não divulga muito o seu nome e seus respetivos serviços.

Portanto eu acrescentaria como uma fraqueza a falta de divulgação da mesma.

Relativamente aos restantes pontos, estou plenamente de acordo com tudo o que foi

apontado.

Estágio Curricular

Capítulo 2



14

Neste capítulo, apresentarei o plano de estágio, bem como os cronogramas. Cada atividade

desenvolvida será detalhadamente especificada também nesta parte do relatório, bem como

os respetivos conceitos relacionados, funcionando assim como textos introdutórios.

2.1. Objetivos de estágio

O estágio é visto como uma aprendizagem que se fundamenta num processo pedagógico de

construção de conhecimentos, desenvolvimento de competências e habilidades sob processo

de supervisão. Como tal durante o período de estágio foram desenvolvidas várias atividades

em que o objetivo prioritário seria o aprofundamento dos conhecimentos práticos e teóricos

adquiridos durante o percurso letivo. No entanto cada uma dessas atividades realizadas

surgiu do pressuposto dos seguintes objetivos específicos:

• Instalação e edição de CMS (Content Management System);

• Aquisição de conhecimentos e utilização de gestor de versões;

• Atualização de conteúdos nessas mesmas plataformas;

• Criação de conteúdos multimédia para aplicação em plataformas CMS;

o Tratamento e vetorização de imagens bitmap;

o Criação de ficheiros svg estáticos e animados;

• Desenvolvimento e aplicação de mecanismos de testes para plataformas CMS;

• Melhoramento dos conhecimentos em linguagens de programação.

2.2. Cronograma

Um cronograma é entendido como um “calendário de atividades”, que tem como função

criar uma melhor gestão das técnicas utilizadas para a realização de atividades e do tempo

de execução atribuído a cada uma, sendo apresentado de forma mais percetível, por meio de

uma tabela.2

2 https://www.significados.com.br/cronograma/, consultado em 6 de outubro de 2018.



15

Recorrendo a um cronograma (Quadro 1, Quadro 2 e Quadro 3) apresento as tarefas

realizadas e a respetiva data em que as mesmas ocorreram, ao longo dos três meses de

estágio. Neste capítulo, mais à frente, descreve-las-ei com mais detalhe.

Quadro 1. Cronograma de julho

Quadro 2. Cronograma de agosto

Quadro 3. Cronograma de setembro



16

2.3. Instalação de Software

Como novo estagiário da empresa, foi-me pedido, tal como a todo o estágiário que chega a

esta instituição, a criação de uma nova conta de email Gmail 3, posteriormente usada para

comunicar com os outros elementos integrantes da empresa.

A maior parte da comunicação, tal como feedbacks ou tarefas a realizar, eram pedidas através

deste meio. Consequentemente, também foi preciso instalar programas no meu portátil, que

me iriam ajudar na realização das atividades pedidas. Uns eram já conhecidos, outros nem

tanto.

Comecei pela Dropbox 4, que me facilitaria a passagem dos ficheiros finais de cada atividade

aos meus superiores e colegas estagiários.

Continuei a instalar o Xamp 5 e o Wordpress, que embora não fossem já imediatamente para

serem utilizados, serviriam para mais tarde realizar atividades relacionadas com a criação ou

edição de sites, tal como o Visual Studios Code, que serviria de suporte para escrever diversas

linguagens de programação para a criação ou edição dos websites.

Depois também instalei o GitHub 6, mas de nada me servia, pois tentei compreendê-lo

aprendendo as suas funcionalidades, chegando assim à conclusão de que todo o esforço feito,

foi em vão, porque durante o período de estágio nunca o cheguei a usar. Isto por uma razão

muito simples. Visto que este programa só foi do meu conhecimento quando cheguei à

empresa, não sabia usá-lo e como este funcionava através de linha comandos, atingia assim

uma das minhas fragilidades, a programação, o que também adicionaria mais dificuldades

ao funcionar com ele.

Concluí esta tarefa, instalando um programa chamado Inkscape, que iria auxiliar-me na

tarefa pedida nesse mesmo dia, consistindo na vetorização de uma imagem.

3 https://www.significados.com.br/gmail/, consultado em 19 de setembro de 2018.

4 https://www.baixaki.com.pt/download/dropbox.htm, consultado em 3 de setembro de 2018.

5 https://tecnofala.com/instalar-o-wordpress-no-seu-computador/, consultado em 3 de setembro de 2018.

6 https://pt.wikipedia.org/wiki/GitHub, consultado em 3 de setembro de 2018.

https://www.significados.com.br/gmail/

https://www.baixaki.com.pt/download/dropbox.htm

https://tecnofala.com/instalar-o-wordpress-no-seu-computador/

https://pt.wikipedia.org/wiki/GitHub



17

Entretanto souberam das minhas habilitações anteriores, em particular da minha obtenção do

curso de especialização tecnológica em Instalação e Manutenção de Redes e Sistemas

Informáticos, equivalente ao nível 5. E propuseram-me instalar num portátil da marca HP,

já antigo, o sistema operativo Linux. Numa primeira fase como não tinha este sistema

operativo armazenado em nenhum suporte (dvd, pen drive ou outro), forçando-me a ir ao site

da Linux e fazer download deste, depois gravá-lo num dvd e testá-lo na máquina. Conclusão,

não foi à primeira que funcionou, o que consequentemente me obrigou a voltar ao site

anteriormente acedido e fazer download de outra versão do sistema operativo, depois gravá-

lo novamente num novo dvd. Ao testar este deu novamente erro. Decidi então pesquisar o

erro em fóruns e foi quando me deparei com a solução. Gravei um terceiro dvd com uma

versão do Linux 7 mais antiga e durante o processo de instalação segui as recomendações que

um utilizador postou numa conversa no fórum, conluindo assim a instalação como bem

sucedida. Finalizando a tarefa, efetuei a instalação dos respetivos drivers e atualizações; e

criei um documento Word com o tutorial sobre como “Instalar o Lubuntu 14.04 num portátil

sem PAE Penthium M” (Anexo II).

2.4. Vetorização de imagens bitmap

Quanto à vetorização de imagens bitmap, esta é definida pela transformação da estrutura

composta em pixeis para uma estrutura composta por linhas e curvas, fáceis de manipular

como objetos individuais. “O pixel é o ponto que carateriza a formação de uma imagem

digital no seu todo. “O desenho vectorial é produzido a partir da conjugação de formas

geométricas geradas através de fórmulas matemáticas, constituidas, na sua maioria, por

texto, poligonos, curvas e elipses.” (Urbano, 2008)

Dado que no momento em que cheguei, a empresa se encontrava a atualizar os seus sites,

surgiu uma oportunidade de demonstrar algum do conhecimento adquirido durante as aulas.

Uma vez que muitas das imagens alojadas nos sites se encontravam em formato png ou jpeg,

foi-me atribuída a minha primeira tarefa, que consistia em redesenhar algumas dessas

imagens e gravá-las no formato svg. O formato svg é um formato gráfico vetorial que em seu

estado normal é inteiramente dedicado a bases vetoriais, que permite aos desenvolvedores

7 https://www.techtudo.com.br/tudo-sobre/lubuntu.html, consultado em 27 de setembro de 2018.

https://www.techtudo.com.br/tudo-sobre/lubuntu.html



18

web e designers ultrapassarem as limitações do HTML e assim fazerem a criação de conteúdo

visível robusto e interativo. O facto deste formato ser responsivo, ou seja, dar a possibilidade

de alterar a escala para qualquer resolução de tela e permitir ser editado por via de

programação, já que a sua formação é baseada em XML, o que também vem a tornar a

acessibilidade de documentos melhor. Ao que parece é bastante vantajoso este tipo de

formato.

A primeira imagem (figura 6) que tive de redesenhar primeiramente no programa sugerido,

cujo mesmo era o Inkscape 8, pertencia ao website da empresa Internorte, que é uma empresa

de transportes rodoviário internacional de passageiros. Para ser mais exato a imagem

encontrava-se no rodapé do website.

Posteriormente atribuí a cor exata da imagem com a ajuda de programação.

Figura 6. Imagem presente no website da Internorte

Fonte: https://www.internorte.pt

Também vetorizei logotipos, ou melhor dizendo, redesenhei logotipos de outras empresas,

com a mesma finalidade. O método utilizado, logo desde de início consistiu em, num

primeiro passo guardar a imagem em formato png ou jpeg no computador, para depois poder

passá-la para uma folha em branco num dos seguintes programas: Inkscape, Adobe

Illustrator ou Corel Draw. De seguida selecionava a opção rastreio rápido, e verificava se a

imagem vetorizada se encontrava igual à inicial. Caso esta não tivesse ficado o mais parecida

possível à original, era obrigado a utilizar as ferramentas dos programas e melhorá-la

manualmente. Por vezes, essa situação também chegava a acontecer na parte da tipografia.

Aí tinha de ser eu a resenhar as letras, porque mesmo procurando o tipo de letra através da

ferramenta WhatTheFont disponibilizada online na web, esta não era fidedigna, encontrando

somente fontes com algumas parecências ou então as fontes eram pagas.

8 https://inkscape.org/pt/acerca-de/visao-geral/, consultado em 4 de setembro de 2018.

https://inkscape.org/pt/acerca-de/visao-geral/



19

Numa primeira fase comecei por experimentar o Inkscape e o Adobe Illustrator, passando

posteriormente a utilizar o Corel Draw 9 quando percebi em que consistiam exatamente as tarefas

deste género. Posto que foi o programa que aprendi a usar durante as aulas e visto conhecer já as

funcionalidades deste, para mim, tornava-se mais prático e fácil fazer o uso deste.

Os logotipos apresentados nas imagens que se seguem dizem respeito ao grupo empresarial

Tavfer (figura 7), que congrega empresas em variados sectores como o turístico, imobiliário ou

metalomecânica, e mais recentemente vinícola (figura 8). É reconhecido no mercado pela TavFer

Inspeção Auto (figura 9), empresa esta que presta o serviço de inspeções automóveis.

Figura 7. Logotipo do grupo Tavfer

Fonte: http://tavfer.com/site/

Figura 8. Logotipo da Tavfer Vinhos


9 https://pt.wikipedia.org/wiki/CorelDRAW, consultado em 4 de setembro de 2018.

https://pt.wikipedia.org/wiki/CorelDRAW



20

Figura 9. Logotipo da Tavfer Inspeção Auto

Fonte: https://www.cima-sa.pt/

O logotipo a seguir representado diz respeito a uma empresa do ramo mobiliário de interiores

designada de Robinil (figura 10). Fabricam e restauram sofás, cadeiras, cabeceiras, somiers

e outros produtos estofados, em todos os estilos e materiais de revestimento.

Figura 10. Logotipo da Robinil

Fonte: http://www.robinil.com/

O logotipo a seguir representado diz respeito a uma empresa designada por Premaq e

trabalha no ramo do comércio de equipamentos industriais.

Figura 11. Logotipo da Premaq


O logotipo a seguir representado (figura 12) pertence à Associação para o Desenvolvimento

Social do Ramirão. Localizada na Freguesia de Casal Vasco, situando-se apenas a 5 minutos

da vila de Fornos de Algodres.

Esta associação promove a integração social do idoso, mobilizando condições que lhe

permitam uma crescente autonomia e independência nas atividades de vida diária, na



21

capacidade de escolha, valorizando a pessoa mais velha, como veículo de aprendizagem e

conhecimento da nossa história, das nossas tradições, da nossa identidade.

Figura 12. Logotipo da Associação para o Desenvolvimento Social do Ramirão

Fonte: http://www.apdsramirao.pt/

O logotipo representado na figura 13 pertence a uma empresa especializada no fabrico de

caracóis prontos a comer, que comercializa, com grande sucesso, no País e no estrangeiro.

Esta empresa dá-se pelo nome de Caracol Real e situa-se na Cerdeira do Côa. é uma

referência no sector, tendo sido pioneira no ramo.

Figura 13. Logotipo da empresa Caracol Real

Fonte: https://www.caracolreal.com/

O logotipo a seguir mostrado na figura 14, representa uma marca líder no mercado de

máquinas de processamento de extrusões de alumínio e denomina-se por Tekna. Este



22

logotipo foi meramente utilizado de forma a fazer referência à marca e não para identificar

o website, ao contrário dos restantes logotipos cuja essa era a sua principal função.

Figura 14. Logotipo da marca Tekna

Fonte: http://www.premaq.pt/tekna

O logotipo a seguir mostrado na figura 15 diz respeito a uma empresa do ramo da

comercialização e transformação de cogumelos. Designa-se por Eurofunghi e a sua sede em

Portugal situa-se no Alto de Pêga.

Figura 15. Logotipo da empresa Eurofunghi

Fonte: http://www.eurofunghi.pt/

Por último, encontra-se representado na figura 16, o logotipo da Norinstelnor. É uma

empresa que se dedica ao projeto e instalação de AVAC (Aquecimento, Ventilação e Ar

Condicionado), complementando a sua atividade com a execução de Instalações de Águas e

Esgotos.

Figura 16. Logotipo da empresa Norinstelnor




23

Para finalizar o processo, cada um destes logotipos depois de concluídos eram guardados no

formato svg e partilhados pela dropbox ou enviado via email.

2.5. Criação de SVG’s animados

Como já foi explicado no ponto anterior, o formato svg traz inúmeras vantagens. Assim

sendo, neste ponto, a tarefa que me foi passada consistia na criação ou replicação de ícones

no formato antes mencionado. Os passos efetuados foram semelhantes aos da atividade

anterior, uma vez que a atividade era idêntica, apenas mudava o facto destas imagens serem

ícones e não logotipos. Uma das diferenças nos procedimentos efetuados nesta atividade,

deveu-se à procura de imagens vetoriais já criadas e partilhadas no site Flaticon 10. Este

mecanismo, facilitou e simplificou praticamente o processo todo porque após o uso deste

apoio apenas tinha que ajustar as imagens descarregadas ao tamanho ideal e fixá-las a um

plano de fundo já criado antecipadamente no editor em forma de quadrado.

Figura 17. Ícones alojados no website do OPO Hotel Aeroporto

Fonte: https://www.opohotel.com/pt

É de referir que alguns destes ícones não foram precisos qualquer tipo de alterações, como

foi o caso do ícone “Proibido a animais de estimação”.

10 https://www.flaticon.com/about, consultado em 21 de setembro de 2018.

https://www.flaticon.com/about



24

Estes oito ícones representados na figura 17, encontram-se alojados no website do OPO

Hotel Aeroporto.

Escusado será dizer que as próximas imagens partilham do mesmo processo de criação que

os ícones anteriores. Estes seis ícones representados na figura 18, encontram-se alojados no

website de Seguro de Crédito. O programa usado para a edição destas imagens e ícones foi

o Adobe Illustrator 11.

Figura 18. Ícones alojados no website Seguro de Crédito

Fonte: https://www.segurodecredito.com.pt/

A imagem que segue (figura 19) foi o meu primeiro svg animado. Tinha-me sido pedido de

forma a substituir um outro alojado no website Espaço Visual. Para criá-lo recorri ao site

Flaticon e editei-o no Adobe Illustrator. Depois para atribuir a animação utilizei o programa

Svgator 12 que é uma ferramenta online e gratuita. Para utilizá-la basta carregar uma imagem

em formato SVG e depois criar a animação usando o ambiente gráfico do serviço. Inseri

então, recursos como a opacidade e a escala e ativei a opção Loop para que este quando

publicado começa-se sozinho sem tê-lo de iniciar manualmente a todo o momento.

11 http://www.webapostilas.com.br/apostilas/illustrator/973, consultado em 4 de setembro de 2018.

12 https://www.fciencias.com/2018/01/10/svg-animation-creator-criador-animacoes-vetoriais/, consultado em

6 de setembro de 2018.

http://www.webapostilas.com.br/apostilas/illustrator/973

https://www.fciencias.com/2018/01/10/svg-animation-creator-criador-animacoes-vetoriais/



25

Figura 19. Svg animado


2.6. Criação de postais

Relacionado com o cliente do website Seguro de Crédito, foi-me pedido que criasse um

postal de aniversário com o propósito de este depois de aprovado pelo cliente, ser enviado

aos seus próprios clientes. Numa primeira fase comecei a elaborar o postal num editor de

imagens online, o Pixlr 13.

Mais tarde, não estando satisfeito o resultado do primeiro postal (figura 20), decidi criar um

segundo, com novas ideias, mas desta vez com o apoio do programa Corel Draw. A minha

ideia principal centrou-se em criar um postal em forma de um cartão de multibanco. Ainda

assim, depois de concluído o segundo, acabei por criar outras duas versões iguais à anterior,

mas em outra cor. No Anexo III encontram-se as restantes sugestões criadas.

Figura 20. Primeiro postal criado no Pixlr Editor


13 http://aprendercomtecnologias.ie.ulisboa.pt/ferramenta/pixlr/, consultado em 21 de setembro de 2018.

http://aprendercomtecnologias.ie.ulisboa.pt/ferramenta/pixlr/



26

2.7. Testes aos websites

Produzir um website é um processo muito amplo e por vezes demorado. Geralmente, para

um professional de webdesign esse processo subdivide-se nas seguintes cinco fases:

planeamento, análise, desenho, desenvolvimento e manutenção.

“Antes mesmo de se ter uma ideia sobre como será o aspecto do site, é necessário fazer todo

o planeamento adequado.” (Figueiredo, 2004, p. 39) O planeamento é a fase em que

definimos os objetivos da criação do website, ou seja, definimos o seu propósito, a sua

audiência e que informação vamos dispor.

“O conteúdo é o rei.” (Rodriguez, 2008, p. 39) Na análise averiguamos o conteúdo que temos

e o modo como iremos disponibilizá-lo e organizá-lo. A existência desta fase é fundamental

para a criação de um bom processamento de palavras-chave ou SEO, assunto que abordarei

num outro ponto mais á frente. É ainda nesta etapa que é feita a árvore de navegabilidade do

website.

“O design determina forma. E a forma deve seguir a função. A dos objectos à sua função de

uma forma esteticamente agradável é a base do design.” (Figueiredo, 2000, p. 47) Na etapa

do desenho, como o próprio nome declara, refere-se à ilustração do website. É nesta etapa

que é definido o seu layout e a sua estrutura.

“… esta é a etapa activa final de um Web Designer até ao sítio Web ficar totalmente pronto

e disponível ao utilizador final.” (Santos, 2009, p. 41) Embora todas as fases sejam

importantes para todo um processo de criação de um website, o desenvolvimento é uma fase

crucial. É no desenvolvimento que começamos a dar “formas” ao que criámos na fase

anterior. O que está no papel passa tudo para o computador por meio de codificação.

Por fim, segue-se a fase da manutenção. Fase esta onde são feitos inúmeros testes ao website

depois de concluído, para descobrir possíveis erros e corrigi-los. Também são feitas

alterações ou atualizações de novas versões consoante a evolução das novas tecnologias.

Esta tarefa obrigou-me a utilizar o meu sentido de observação, atenção e percepção em

simultâneo. Enquanto revia e testava ao mesmo tempo botões, hiperligações, entre outras

funcionalidades existentes no website da TavFer Inspecção Auto, quer numa versão desktop

quer numa versão mobile, à medida que ia encontrando erros ia apontando-os num



27

documento Excel (figura 21), partilhado pelo Google Drive 14, conjuntamente com print

screens do erro (figura 22), para posteriormente serem corrigidos.

Figura 21. Documento Excel com os erros


Figura 22. Exemplo de print screens dos erros


14 https://pt.wikipedia.org/wiki/Google_Drive, consultado em 21 de setembro de 2018.

https://pt.wikipedia.org/wiki/Google_Drive



28

2.8. Tratamento e edição de imagens bitmap

Uma outra tarefa que tive de desempenhar incidiu no tratamento de imagens bitmap. Tratar

uma imagem consiste em corrigi-la e retocá-la, removendo imperfeições nela ou então

ajustando a sua cor, alterando propriedades como o equilíbrio de brancos, matiz, saturação e

brilho, nitidez ou então adicionando filtros. Redimensionar uma imagem significa aumentar

ou diminuir o seu tamanho físico alterando o número de pixels que ela contém.

Ocorreram três situações em que tive de recorrer a este método. As duas primeiras com o

propósito de serem inseridas no website da TavFer Inspecção Auto. E uma terceira com o

propósito de serem inseridas no website Encostas do Côa. Numa dessas situações a minha

tarefa a desenvolver consistia em procurar imagens de centros de inspeção automóvel

através do Google Maps com objetivo de preencher o espaço em branco, lugar este em que

supostamente deveriam ser apresentadas fotografias dos centros. Os centros de inspeção

automóvel que conseguisse encontrar e me permitissem obter as imagens destes, efetuava

uma captura de ecrã premindo a tecla “Prt Sc”, presente no teclado do portátil e mais tarde

editava-as e redimensionava-as para o mesmo tamanho das imagens (695 x 280) que já se

encontravam no site a ilustrar os restantes centros de inspeção, tudo isto com a ajuda do

programa Adobe Photoshop 15.

Como exemplo de uma dessas imagens apresento a figura 23. Ao todo encontravam-se

quatro centros de inspeção automóvel sem imagem, respetivamente o centro correspondente

à Alcobaça, Figueira da Foz, Marinha Grande e Tomar.

15 https://pt.wikipedia.org/wiki/Adobe_Photoshop, consultado em 24 de setembro de 2018.

https://pt.wikipedia.org/wiki/Adobe_Photoshop



29

Figura 23. Página do centro de inspeção da Figueira da Foz


A outra situação aconteceu dado não ter conseguido obter na situação anterior, uma imagem

correspondente ao centro de inspeções automóvel de Alcobaça. Assim, tive de retirar uma

imagem não repetida de um dos centros da Cima, aleatoriamente, no Google. Editei-a de

modo a que não se percebesse que era uma imagem dos outros centros. Transformei-a em

pintura e adicionei-lhe o efeito greyscale, convertendo-a no resultado final que pode ser

observado na figura 24.

Figura 24. Imagem ilustrativa do centro de inpeções automóvel de Alcobaça




30

A terceira situação baseia-se unicamente no redimensionamento de fotografias, tal como a

que se encontra na figura 25. Essas imagens depois de redimensionadas para o tamanho 1280

x 720, tem como objetivo serem inseridas no website das Encostas do Côa.

As Encostas do Côa 16 são um empreendimento de turismo rural, situado na aldeia de Quinta

Nova, concelho de Pinhel. Dispõe de uma casa na árvore, que funciona como alojamento, a

seis metros de altura, bungalows e de um parque de campismo/caravanismo.

Figura 25. Fotografia da casa da árvore

Fonte: http://www.encostasdocoa.pt

2.9. Aprendizagem e aquisição de conhecimentos

A aprendizagem traduz-se num processo de aquisição de conhecimentos, habilidades,

valores e atitudes, possibilitado através do estudo, do ensino ou da experiência. Este ponto

não se considera bem uma tarefa, mas sim algo que este estágio veio adicionar à minha

sabedoria, nomeadamente conhecimentos úteis, quem sabe, num futuro profissional

próximo. “Ninguém é tão ignorante que não tenha algo a ensinar. Ninguém é tão sábio que

não tenha algo a aprender.” (Pascal)

16 https://www.revistasauda.pt/noticias/Pages/Um-negocio-de-familia.aspx, consultado a 10 de outubro de

2018.

https://www.revistasauda.pt/noticias/Pages/Um-negocio-de-familia.aspx



31

Comecei assim por adquirir conhecimentos relativamente ao Drupal 17. Este sistema é o mais

utilizado pela empresa. Enquanto visualizava os passos que o meu tutor da empresa dava ao

desenvolver um website, ao mesmo tempo ia relatando em voz alta esses mesmos passos e

explicava quais os procedimentos mais corretos a realizar num projeto deste tipo. Para a sua

criação, ele guiava-se por uma maquete já desenhada, pela profissional da empresa

responsável pela parte do design, a Drª Sandrina e já aprovada pelo cliente.

Já num outro dia, observei e aprendi com o Engenheiro Francisco a realizar procedimentos

necessários relativamente a CRM.

“CRM é uma série continua de interacções cujo objectivo é incrementar o valor a longo prazo

do cliente para a organização, desenvolvendo e retendo clientes através do incremento da

satisfação e lealdade.” (Sindell, 2000) O CRM (Customer Relationship Management) é o

conjunto de práticas, estratégias e tecnologias que uma empresa utiliza focada no cliente.18

Pretende gerir, de forma integrada todos os pontos de contato e relações/comunicações de

todos os elementos da empresa com os seus atuais ou potenciais clientes para benefício de

ambas as partes envolvidas. Vem determinar também que setores, como o de vendas,

marketing, atendimento e pesquisa; e outros esforços da empresa estejam voltados para o

relacionamento e acompanhamento do cliente.

Para José Duarte Santos na obra intitulada de CRM – Offline & Online 19, o CRM não é a

existência do produto ou o serviço do mês, mas sim a procura constante de formas de

construir experiências positivas para o cliente. Este relacionamento baseia-se sempre em

pessoas, sendo, portanto, necessário que, por detrás de todo um conjunto de tecnologia que

permita chegar ao cliente, esteja um ser humano com quem o consumidor possa dialogar. O

CRM apresenta-se assim, como um dos pilares do marketing moderno, apoiando-se nas

novas tecnologias.

17 https://pt.wikipedia.org/wiki/Drupal, consultado em 6 de setembro de 2018.

18 https://www.pipedrive.com/pt/crm, consultado em 11 de outubro de 2018.

19 SANTOS, J. D. (2006). CRM offline & online. (s./e.), Vila Nova de Gaia.

https://pt.wikipedia.org/wiki/Drupal

https://www.pipedrive.com/pt/crm



32

2.10. Processamento de textos para SEO

Continuando a descrever as atividades realizadas ao longo destes três meses, o

processamento de textos para criar um bom SEO foi também uma delas.

SEO significa Search Engine Optimization que traduzido para português significa

otimização para mecanismos de busca. Trata-se de um conjunto de técnicas de otimização

para sites e páginas na web. Essas otimizações visam alcançar bons rankings orgânicos

criando tráfego e autoridade para um site. Quando as empresas investem no marketing

digital, um dos seus maiores objetivos incide em alcançarem os primeiros lugares nos

mecanismos de busca, obtendo deste modo mais cliques e visitas no seu site. Para tal a

empresa deve investir numa estratégia específica de maneira a otimizar os resultados e

garantir um bom posicionamento no google ou outros motores de busca.

Para uma melhor e correta otimização de sites, de modo a obter um bom mecanismo de

busca, devemos guiar-nos pelas seguintes ideias:

- Definir boas palavras-chave;

- Disponibilizar conteúdo com alta credibilidade, tornando o acesso ao site numa

experiência incrível;

- Definir um bom título SEO, devendo conter de 55 a 65 caracteres e se possível a

palavra-chave escolhida, compilando a ideia principal do conteúdo do site;

- Diminuir o tempo de carregamento das páginas do site;

- Ser responsivo;

- Criar URLs simples, curtas e que contenham a palavra-chave foco;

- Respeitar as regras gerais de acessibilidade e usabilidade;

- Definir um texto-âncora de qualidade.20 21

Passo a descrever em que consistiu esta minha tarefa. Dispondo do exemplo de uma empresa

concorrente, guiei-me assim pela Controlo Auto, para o processamento de textos para SEO,

respetivamente a integrar no site na empresa TavFer Inspeções Auto ou também designada

20 https://blog.hotmart.com/pt-br/o-que-e-seo/, consultado em 12 de outubro de 2018.

21 https://static.googleusercontent.com/media/www.google.com/pt-PT//intl/pt-BR/webmasters/docs/guia-

otimizacao-para-mecanismos-de-pesquisa-pt-br.pdf, consultado em 12 de outubro de 2018.

https://blog.hotmart.com/pt-br/o-que-e-seo/

https://static.googleusercontent.com/media/www.google.com/pt-PT/intl/pt-BR/webmasters/docs/guia-otimizacao-para-mecanismos-de-pesquisa-pt-br.pdf

https://static.googleusercontent.com/media/www.google.com/pt-PT/intl/pt-BR/webmasters/docs/guia-otimizacao-para-mecanismos-de-pesquisa-pt-br.pdf



33

por Cima. Durante o desenvolvimento da produção desses textos, tive de ter em consideração

a limitação do máximo de 230 carateres e as seguintes palavras-chave: centro de inspeções,

centro de inspeção, inspeção automóvel e IPO. Exemplo: “Marque a sua inspeção automóvel

no centro de Alcanena (Santarém) e escolha o melhor horário no centro de inspeções mais

próximo de si. Garantimos o melhor atendimento, prioritário.”. A figura 26 é uma

representação do resultado final do centro de inspeções de Alcanena.

Figura 26. Resultado da pesquisa do centro de inspeção da Cima em Alcanena


Estes textos serviriam à posteriori para localizar no motor de busca cada centro de inspeção

da empresa, daí ter de os especificar detalhadamente. Para que esta tarefa fosse concluída

com sucesso foi necessária uma pesquisa da localização exata de cada um destes centros,

tendo por vezes que referenciar com exatidão algumas das empresas que os rodeavam,

procurando não publicitar estas mesmas. Estes textos deviam transmitir uma mensagem clara

e objetiva para o cliente. Os mesmos passaram por várias revisões e correções até chegarem

à fase de conclusão e serem publicados no site (figura 27). Os textos criados para o

processamento de SEO encontram-se no Anexo IV.



34

Figura 27. Exemplo do formulário para inserir os textos criados


2.11. Inserção de vídeos no Youtube

Entre as atividades já descritas e outras por descrever, refiro mais uma. Esta diz respeito a

um evento designado por Drupal Developer Days Lisbon 2018 organizado pela comunidade

Drupal que reúne pessoas de todo o mundo que contribuem para o progresso do Drupal.

Aconteceu pela sua primeira vez em Lisboa, no ISCTE, de 2 a 6 de julho de 2018.

Primeiramente, uma vez que já se encontravam alguns vídeos na conta relacionada com o

evento, apenas tive que ordená-los, inserir uma breve descrição com: nome do(s) orador(es)

juntamente com o(s) respectivo(s) link(s) da(s) sua(s) página(s) pessoal(ais), nome da(s)

palestra(s); e o título do video (nome e data do evento e numero da parte do vídeo). Estes

vídeos eram correspondentes ao Acquia Auditorium (figura 28).



35

Figura 28. Página da conta onde foram inseridos os vídeos


Depois de publicados os vídeos anteriores, fui também incumbido de fazer download dos

restantes vídeos, referentes às sessões das outras salas (figura 29).

Figura 29. Site onde se encontravam hospedados os vídeos das outras salas




36

Depois de já ter na minha posse os vídeos, fiz o upload dos mesmos na conta do Youtube 22

do evento e segui o mesmo procedimento que efetuei nos vídeos anteriores, com uma

pequena diferença em relação ao título dos vídeos seguintes. O título destes era constituído

pelo nome e data do evento mais o nome da palestra à qual correspondia cada vídeo.

Verificamos o procedimento explicado anteriormente na figura 30. Em seguida sucede-se a

publicação dos vídeos, que se encontrarão disponíveis para o público que não teve

oportunidade de assistir presencialmente.

Figura 30. Vídeos do evento publicados


2.12. Redirecionamento de url

Redirecionamento url é entendido como uma forma de encaminhar os utilizadores de um

determinado site, bem como os mecanismos de pesquisa para um url diferente do que eles

solicitaram originalmente.23

22 https://www.tecmundo.com.br/youtube/118500-historia-youtube-maior-plataforma-videos-do-mundo-

video.htm, consultado em 26 de setembro de 2018.

23 https://sitechecker.pro/pt/301-redirect/, consultado em 11 de outubro de 2018.

https://sitechecker.pro/pt/search-engines/

https://sitechecker.pro/pt/what-is-url/

https://www.tecmundo.com.br/youtube/118500-historia-youtube-maior-plataforma-videos-do-mundo-video.htm

https://www.tecmundo.com.br/youtube/118500-historia-youtube-maior-plataforma-videos-do-mundo-video.htm

https://sitechecker.pro/pt/301-redirect/



37

Atualmente a empresa Sentido Comum encontra-se a fazer upgrade das versões dos seus

websites, sabendo-se que as versões antigas deixaram de funcionar. Então seguindo este

raciocínio, e a pensar nos clientes que têm a tendência a guardar páginas de websites nos

seus favoritos, pensou-se em criar um redirecionamento de urls para que eles não perdessem

os seus favoritos ou tivessem de repetir todo um processo de procurá-los e guardá-los outra

vez.

O processo de redirecionamento de url referente tanto à empresa Robinil, como à empresa

Premaq foi idêntico. Baseando-me num documento Excel testava os endereços presentes

neste e inseria-os no browser. Se o endereço inserido não fosse a ter à página que era suposta,

devia testar um segundo endereço que supostamente seria o correto e atual, mas podia

acontecer a página deixar de estar disponível, tal como a figura 31 apresenta, pois, com este

novo website alguns artigos deixaram de existir por ordem do cliente.

Figura 31. Exemplo da página inexistente


Passo a explicar melhor todo o procedimento anteriormente mencionado, nas figuras

seguintes:

Como é possível observar na figura 32, dou como exemplo o “Berço”, este partilha de dois

endereços, nomeadamente o “/sofas/silvie-0” que pertencia ao antigo site e “/node/10” que

pertence ao site atual.



38

Figura 32. Documento Excel partilhado


Se o endereço já apresentado no formulário (figura 33) não fosse o correto, era necessário

substituir o mesmo, no campo “Para”, pelo endereço do site atual (localizado na 2º fila de

endereços no documento do Excel). Para isso bastava escrever, por exemplo, “/node/10” ou

até mesmo o nome do artigo, “Silvie”, (localizado na 3ª fila – “Site Novo” no documento do

Excel). Depois de escrito o nome do artigo no local apropriado, apareceriam possíveis

sugestões em forma de lista, parecendo-se esta funcionalidade com uma combo box.

Figura 33. Formulário para redirecionamento url da Robinil




39

Na Premaq (figura 34), também tinha como apoio um documento de Excel partilhado

comigo para executar a tarefa, tal como executei no processo ligado à Robinil. Tive que

copiar os links do browser e colá-los um a um no campo “Ligação” no típico formulário

(figura 35). Para testar se os links ainda existiam, fazia o processo contrário, ou seja, copiava

os links que já se encontravam no campo “Ligação” e colava num browser.

Figura 34. Site da Premaq


Figura 35. Formulário para redirecionamento url da Premaq




40

2.13. Recolha e tratamento de dados

Outra tarefa desenvolvida no âmbito do estágio foi relativa à recolha de dados de uma base

de dados com marcações dos clientes da empresa Tavfer Inspeções Auto e Inspecentro

(antigo site antes do Upgrade para a versão atual). O exercício que tinha de fazer, consistia

em copiar a marcação de cada cliente e colá-la num documento de Excel (figura 36)

partilhado comigo. Nessas marcações constavam informações como o nome do cliente, o

centro de inspeções a que se proponham e a data do envio da marcação.

Figura 36. Documento Excel com as marcações da Tavfer Inspeção Auto


As marcações compreendiam o período de janeiro de 2017 até à data atual, 16 de julho de

2018. Esta recolha de marcações foi efetuada com a intenção de depois ser criado um gráfico

de linhas (figura 37) através da contagem do número de marcações relativa a cada mês. A

seguir, com os valores obtidos pretendia-se fazer uma comparação para mostrar ao cliente a

contrapartida e os bons resultados obtidos na transformação do site para versão mobile.



41

Figura 37. Gráfico de linhas comparando o número de marcações por mês


Pesquisei e recolhi também dados relativos ao posicionamento do website da Cima no motor

de busca da Google 24 25. Para isso utilizei palavras-chave como “Inspeção Automóvel”

seguido dos diferentes “distritos”. Para representar esse exemplo temos a figura 38.

Figura 38. Pesquisa do centro de inspeção automóvel no distrito de Aveiro


24 http://www.i-tecnico.pt/motor-de-busca-o-que-e/, consultado em 24 de setembro de 2018.

25 https://www.significados.com.br/google/, consultado em 24 de setembro de 2018.

http://www.i-tecnico.pt/motor-de-busca-o-que-e/

https://www.significados.com.br/google/



42

A minha função era recolher dados relativos tanto ao posicionamento de pesquisa dos sites

apresentados como ao posicionamento no google maps 26.

Criei então uma tabela, para apresentar ao engenheiro Francisco e ao meu orientador, de

forma simplificada e organizada os resultados finais. Como complemento para desenvolver

esta tarefa ainda fiz prints screens (Anexo V).

2.14. Exploração das funcionalidades do Wordpress

Depois de criada uma base de dados e instalado o wordpress dei início à tarefa proposta.

Uma das funcionalidades do wordpress é a alternativa de poder alterar o tema. Assim sendo

foi-me passado um tema pago, que tem por nome Nimble, para ajudar a descobrir uma forma

de desenvolver uma das aplicabilidades ineirentes no tema (figura 39) durante a elaboração

do website do projeto Valor Criança. Esta empresa trata-se de uma creche situada na cidade

da Guarda.

Figura 39. Secção Plans & Pricing do tema


26 https://tecnoblog.net/sobre/google-maps/, consultado em 24 de setembro de 2018.

https://tecnoblog.net/sobre/google-maps/



43

Explorei as funcionalidades do tema e procurei no google informação sobre como haveria

de construir a secção intitulada de Plans & Pricing, mostrada na figura anterior. A

informação encontrada explicava que para a criação desta secção deveria recorrer aos atalhos

presentes na barra de ferramentas disponível no formulário do artigo criado. Testei e

expliquei ao meu orientador para que ele implementasse no site.

2.15. Criação de maquetes

Previamente a ser desenvolvido um website, este tem de ser bem planeado. Deve ser criado

um desenho através duma maquete ilustrativa, que mostrará como vai ficar o website depois

de concluído. Depois de mostrado ao cliente, este decidirá que o aprova ou reprova. Se o

cliente o reprovou, poderá vir a sugerir possiveis alterações, de maneira que o website fique

a seu gosto.

Este processo é muito importante, quer para quem desenvolve o website, quer para o cliente.

Quem o desenvolve, baseia-se no desenho para a sua criação. O cliente tem uma ideia do

resultado final e certezas se o investimento vai valer a pena ou não, não perdendo dinheiro,

nem tempo desnecessário, esperando que o resultado final seja aquele que desejou.

Dispondo como guia, o esboço do website da empresa Transdev, foram-me solicitadas duas

tarefas: a primeira fundamentava-se no acréscimo e substituição do logotipo principal pelo

logotipo da empresa Digital Pass Graduate, passando assim o anterior para um género de

logotipo secundário numa escala mais reduzida; e na eliminação do menu secundário

apresentado sob um fundo cinza (figura 40).



44

Figura 40. O antes e depois do website Transpostal em versão desktop


A segunda, fundamentava-se na transformação da tarefa efetuada anteriormente numa versão

mobile. Foram feitas duas versões em que as diferenças não foram muitas (figura 41). Apenas

foram retirados o logotipo da Transpostal da imagem, pois, o mesmo já se encontra no

cabeçalho e os quatro círculos do cabeçalho que se situavam do lado esquerdo do ícone

correspondente ao menu principal.



45

Figura 41. O antes e depois das correções efetuadas no website Transpostal em versão mobile


A Transdev assume-se como um dos principais players do setor rodoviário de passageiros

no país. A atividade da empresa incide nos setores rodoviário e fluvial, detendo onze

empresas, bem como participações na Internorte, Intercentro, Rede Nacional de Expressos,

Renex e Rodoviária do Tejo.27 Este website referente à Transpostal deve-se ao aparecimento

do novo serviço de despachos de encomendas.

Tanto o uso do programa Photophop como do Adobe Illustrator foram uma grande e

importantíssima ferramenta na execução destas tarefas.

No fim desta atividade ainda criei uma apresentação (Anexo VI) para o cliente, onde são

explicadas a funcionalidades dos botões ou o caminho das hiperligações que as imagens

contêm.

No website da empresa Open Style tive de gerar algo semelhante ao gerado anteriormente.

27 http://www.transdev.pt/quem-somos/transdev, consultado em 14 de outubro de 2018.

http://www.transdev.pt/quem-somos/transdev



46

O ramo de atividade da empresa Open Style está ligado à produção de culturas agrícolas e

animais combinadas, produção e comercialização de eletricidade de origem eólica, solar,

geotérmica, maremotriz e de outras fontes energéticas, ao comércio por grosso e a retalho de

café, chá, cacau e especiarias e ao comércio a retalho de artigos de madeira, cortiça, vime e

material para uso doméstico.28

Foi através das imagens apresentadas na figura 42 que iniciei este trabalho. Para tal utilizei

o programa Adobe Photoshop. Baseando-me nos rascunhos apresentados nas imagens que

se seguem fui criando a maquete.

Figura 42. Logotipos de cada ramo de atividade da empresa e esboço em papel do website


Comecei por tirar um print screen da página principal do site atual da empresa.

Seguidamente recortei cada um dos logotipos que me foram facultados, removendo o seu

fundo e pintando-os de branco, cuja cor que seria visível na maquete uma vez que o fundo

do site é preto. Depois com cada um já editado comecei por criar cada página principal que

estaria ligada a cada um dos logotipos apresentados. Esta seria composta pelo logotipo

28 https://www.infoempresas.com.pt/Empresa_OPEN-STYLE-SABUGAL.html, consultado em 14 de outubro

de 2018.

https://www.infoempresas.com.pt/Empresa_OPEN-STYLE-SABUGAL.html



47

principal da empresa seguido de um logotipo secundário, em escala menor, e respetivo menu

correspondente a cada ramo de atividade; e no centro da página teria também como imagem,

mas numa escala maior, o logotipo ligado ao ramo de atividade. Para ilustrar o exemplo da

página inicial mostro a figura 43.

Figura 43. Página inicial de um dos ramos de atividade da empresa Open Style


Depois passei para a criação de uma barra horizontal (figura 44) com destino ao rodapé, que

serviria para ao passar o mouse sobre cada imagem imposta nela, se prévisualiza-se a página

inicial ligada ao site de cada ramo de atividade. Esta era constituída por miniaturas das

páginas iniciais contornadas por uma linha branca tal como o limite da barra. Ao passar o

mouse sobre cada uma das miniaturas também mediante em qual se encontrava, o mesmo

aumenta um pouco, dando a ideia de zoom e informando melhor o utilizador qual a página

selecionada.

Figura 44. Barra de navegação horizontal




48

Finalizei este trabalho ao juntar as imagens da página inicial e a barra, e guardar no disco

local para depois criar uma apresentação num documento Power Point (Anexo VII) com as

respetivas legendas.

2.16. Assistência técnica

Segundo o dicionário português, assistência técnica é um serviço de apoio especializado,

geralmente em relação a equipamentos fabricados ou sentidos por uma entidade, ou

utilizados para o fornecimento de um serviço.29

Esta minha experiência consistiu em ensinar a um cliente da empresa como aceder e interagir

com o seu email, facebook; como fazer download de filmes e vídeos disponibilizados no

Youtube ou outros; fazer download e adicionar bibliotecas no Atom (editor de texto de código

aberto) para programar o arduíno (plataforma de prototipagem eletrónica de hardware livre);

a transferir ficheiros de um computador para um portátil utilizando como dispositivo de

armazenagem um pen drive. Alguns destes processos, passei-os para o “papel”, servindo

assim depois de tutorial ao cliente para quando ele estivesse sozinho, praticar os

ensinamentos que lhe transmiti.

2.17. Criação do website Clinica CG

Como já expliquei num ponto anterior o processo da criação de um é um processo amplo,

constituído por cinco etapas.

Para dar início a esta tarefa instalei o usb webserver 30 e o wordpress 31.

O site que devia replicar, sim porque este já existia, a minha função foi mesmo só o copiar

dizia respeito à Clínica CG. A Clínica CG é uma clínica multidisciplinar que disponibiliza

serviços nas áreas de reabilitação oral, terapia da fala e psicologia.

29 https://dicionario.priberam.org/assist%C3%AAncia%20t%C3%A9cnica, consultado em 14 de outubro de

2018. 30 https://www.baixaki.com.pt/download/usbwebserver.htm, consultado em 4 de setembro de 2018. 31 https://wp-portugal.com/sobre-o-wordpress/, consultado em 6 de setembro de 2018.

https://dicionario.priberam.org/assist%C3%AAncia%20t%C3%A9cnica

https://www.baixaki.com.pt/download/usbwebserver.htm

https://wp-portugal.com/sobre-o-wordpress/



49

Comecei por procurar um tema o mais parecido possível para começar a fazer e estruturar a

página inicial. Recolhi imagens do site antigo para usar neste meu e comecei a inseri-las ao

mesmo tempo que copiava as informações que as acompanhavam. Mas, no entanto, não era

exatamente a tarefa pretendida e fui obrigado a começar tudo de novo.

Ao que parece o tema tinha de ser criado de raiz, então para isso apoiem-me num tema

disponibilizado no site https://underscores.me/. Consegui criar ainda a página inicial, dando

por inacabado este projeto, pois, o mesmo já estava a ser criado pelo meu orientador.

2.18. Criação do folheto interativo

A criação de um folheto interativo para ser disponibilizado no site da Transdev foi mais um

trabalho que se sucedeu. Neste tive como apoio uma brochura da empresa (figura 45). O meu

trabalho foi apenas recortar as páginas no Adobe Photoshop e gravá-las isoladamente, de

forma a que estas ficassem com boa qualidade. Depois converti-as para o formato pdf cada

uma e fiz o upload das mesmas, ordenadamente no Flipsnack 32 (figura 46). O resto já a

ferramenta fazia por si mesma. No fim partilhei o link do folheto por email.

Figura 45. Brochura da empresa Transdev e início da sua respetiva edição


32 https://www.techtudo.com.br/tudo-sobre/flipsnack.html, consultado em 27 de setembro de 2018.

https://underscores.me/

https://www.techtudo.com.br/tudo-sobre/flipsnack.html



50

Figura 46. Edição e upload das imagens para criação do folheto


2.19. Edição de vídeos

Dado que os vídeos publicados do evento Drupal Dev Days Lisbon 2018 não se encontravam

na sua melhor qualidade de resolução de imagem nem de áudio, foi-me ordenado que

experimentasse a editar um desses vídeos à minha escolha. Fazendo o uso do programa

Audacity 33 tentei eliminar o ruído de fundo ou apaziguá-lo, aumentando os decibéis e

silenciando partes do áudio.

Por conseguinte, depois de guardado, abri-o novamente no programa Adobe Premiere 34

(figura 47) para o juntar ao vídeo e editá-los em simultâneo de modo a estes ficarem

sincronizados. Depois de renderizar o video, guardei-o na qualidade máxima que o programa

me permitia.

33 https://pt.wikipedia.org/wiki/Audacity, consultado em 28 de setembro de 2018.

34 https://www.techtudo.com.br/tudo-sobre/adobe-premiere.html, consultado em 27 de setembro de 2018.

https://pt.wikipedia.org/wiki/Audacity

https://www.techtudo.com.br/tudo-sobre/adobe-premiere.html



51

Figura 47. Edição do vídeo no programa Adobe Premiere

Fonte: Fonte propria

2.20. Edição de sites

Como já referi em pontos anteriores a este, uma das fases constituintes das etapas da criação

de um site segundo um webdesigner é a fase da manutenção. A fase da manutenção tanto

pode ocorrer só no momento em que se finaliza o site, como pode ocorrer até que o site saia

do ar, ou seja, deixe de estar online.

Nesta atividade tive que aceder ao tema do website da Serralã (figura 48) e através do visual

studios code 35 (figura 49), eliminar todo o código que possuísse flash e alguns outros

detalhes do website; e corrigir os caminhos de todas as imagens que supostamente deviam

abrir num outro separador em tamanho maior.

A Serralã é uma fábrica de cobertores, onde a produção começa desde a preparação de

matérias-primas, passando pela fiação, tecelagem, cardação, laminagem e acabamentos.

35 https://www.devmedia.com.br/introducao-ao-visual-studio-code/34418, consultado em 3 de setembro de

2018.

https://www.devmedia.com.br/introducao-ao-visual-studio-code/34418



52

Figura 48. Website da Serralã

Fonte: Serralã

Figura 49. Interface do Visua Studios Code


2.21. Revisão de sites

Testar sites e rever os textos e palavras incluídos nestes, foi mais uma atividade que me foi

designada a desenvolver. Nomeadamente, no site da Internorte, o texto não se encontrava

corretamente traduzido. Verifiquei página a página, li textos linha por linha e detetei algumas



53

falhas. Apontei-as criando prints screens, como o exemplo que é apresentado em baixo na

figura 50.

Figura 50. Exemplo de um dos prints screens captados dos erros encontrados

Fonte: Internorte

No website da paróquia da Guarda (figura 51) também me foi pedido que revisse os horários

da catequese referente ao ano 2018/2019. Comparei os horários com um documento que me

havia sido facultado. Foi então que reparei que havia um ano de catequese em que o horário

não coincidia tanto no documento como no site, chegando à conclusão de que o horário

inserido neste último estava incorreto.

Figura 51. Website da Paróquia da Guarda

Fonte: Paróquia da Guarda



54

Por último, também comparei os folhetos que o website da empresa Oxibeiras

disponibilizava com os folhetos que o website do Bolas disponibilizava (figura 52).

Apontando quais eram os folhetos que estavam em falta no primeiro site e deviam ser lá

inseridos.

A Oxibeiras é uma empresa situada na Guarda que tem como atividade a comercialização

de gases industriais GASIN, máquinas e ferramentas.

Figura 52. Websites das empresas Bolas e Oxibeiras

Fonte: Oxibeiras e Bolas

2.22. Conversão de imagens

Converter imagens é por vezes um trabalho obrigatório, para que programas de edição ou

programas com outra qualquer funcionalidade, permitam aos utilizadores abrirem-nas e

editá-las. Logo, solicitaram-me que convertesse o logotipo da empresa Caracol Real para o

formato eps; o logotipo da empresa Randstad do formato eps em formato pdf.

Foi ainda no âmbito desta tarefa que tomei conhecimento de um conversor online gratuito

designado por OCR, que possibilita converter imagens em texto simples.



55

2.23. Projeto: A loja dos brinquedos

De forma a consolidar e colocar em prática mais um pouco da teoria adquirida no curso, foi-

me proposto um projeto prioritário. O projeto baseava-se na remodelação do website A loja

dos brinquedos (figura 53). Para se tornar mais desafiante e adquirir novos conhecimentos

foi-me proposto desenvolver este projeto em linguagem markdown 36.

Como o próprio nome sugere, A loja dos brinquedos, é uma loja online de brinquedos

didáticos e imaginativos para crianças e bébés.

Figura 53. Página inicial do website A loja dos brinquedos

Fonte: A loja dos brinquedos

O projeto (Anexo X) foi dividido por pontos. Numa primeira instância, através dos sites da

concorrência ou com uma atividade semelhante a esta, fiz o levantamento dos erros

encontrados ou possíveis melhorias, segundo a minha opinião.

No ponto seguinte criei uma listagem de sites internacionais e nacionais, sendo da área ou

não, que podiam servir para o redesign do layout.

36 https://canaltech.com.br/software/Voce-sabe-o-que-e-Markdown/, consultado em 3 de outubro de 2018.

https://canaltech.com.br/software/Voce-sabe-o-que-e-Markdown/



56

No penúltimo ponto, através da gravação do ecrã capturei interações com o cliente,

recorrentes em diversos sites. Por exemplo: o processo de compra, a ampliação do artigo,

entre outros.

No último ponto, pesquisei e sugeri ideias de elementos gráficos a inserir no site. Por

exemplo: o ícone do carrinho de compras, o ícone da conta, e o ícone dos contactos.

Uma vez concluído, enviei por email ao engenheiro Francisco que não se pronunciou a este.



57

Reflexão Final

Dado por terminado este percurso de três meses, importa refletir sobre o seu impacto no meu

futuro académico e profissional. A realização deste possibilitou-me o contato com uma

realidade diferente da que estava acostumado. Tanto passei por momentos bons, como menos

bons.

Este estágio obrigou-me a conseguir ultrapassar várias dificuldades sentidas, enquanto

desenvolvia as mais variadas tarefas.

Durante o meu período de estágio, foram poucas as vezes em que consegui pôr em prática

grande parte dos conhecimentos teóricos aprendidos.

Senti uma pressão semelhante à que se diz sentir no mundo do trabalho. Recebi demasiadas

críticas construtivas. Mas o facto de muitas das tarefas me terem sido pedidas via email,

fizeram talvez, com que eu não conseguisse entender quais os seus propósitos finais. Isto

levava a que, na maior parte das vezes, começasse as tarefas recorrendo à minha própria

metodologia. Chegava deste modo, a um resultado que não era o pedido. Este processo todo,

levava a que tivesse de refazer a tarefa, começando do início.

Quer tenha sido por falta de comunicação entre os elementos da empresa, quer por falta de

motivação da minha parte, devido a não me encontrar a fazer e a aprender o que gostaria,

esta experiência ficará na minha memória como uma lembrança menos boa.

Senti também que havia ali um grande desinteresse por parte da entidade em querer ensinar,

uma vez que era obrigado a assistir a tutoriais para fazer outras atividades não ligadas à área

relacionada com o meu curso.

Não querendo estar a dar desculpas, ou tentar arranjar explicações para o meu desempenho,

acho que parte do mesmo também se deveu à falta de recursos materiais, visto que eu tinha

de levar o meu instrumento de trabalho (portátil) todos os dias para a empresa, não tendo

acesso e nem condições suficientes aos softwares e hardwares imprescindíveis para o

desenvolvimento das tarefas com sucesso.

Contudo, durante este período retive um elevado crescimento profissional e também pessoal.



58

Bibliografia

ALMEIDA, M. R. e PEREIRA, J. M. (2014). Marketing de Serviços. Edições Sílabo, Lda,

1ª Edição, Lisboa.

ARAÚJO, M. (2010). Introdução ao Audacity: Criação de Podcasts. Associação Ensino

Livre e OpenLab ESEV, Montemor-o-Velho.

BATISTA, A. (2008). Arte Digital – Técnicas de Ilustração Digital. FCA – Editora de

Informática, Lisboa.

CRAVENS D. W. e PIERCY N. F. (2007). Marketing Estratégico., Globaltec – Artes

Gráficas Ltda., 8ª Edição, São Paulo.

DIONÍSIO, P. et. Al (2009). b-Mercator – Blended Marketing. Publicações Dom Quixote,

1ª Edição, Alfragide.

FASCIONI, L. (2008). Método para definição da identidade corporativa. Anais do 8º

Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Paulo.

FIGUEIREDO, B. (2000). Web Design – Estrutura, concepção e produção de sites web.

FCA – Editora de Informática, Lisboa.

GUINÉ, R. et al. (2010). Análise Swot à Produção da Pêra Passa de Viseu. Millenium,

Revista do Instituto Politécnico de Viseu.

GONZÁLEZ, P. (2010). Teoría y práctica de la publicidad impresa. Valencia: Campgráfic.

KOTLER, P. (2000). Administração de Marketing. 10ª Ed. São Paulo: Prentice Hall.

KOTLER, P. (1995). Princípios de Marketing. 7.ª Edição, Prentice Hall.

LENDREVIE, J. et. al. (2000). Mercator – Teoria e Prática do Marketing. Publicações

https://www.google.pt/search?hl=pt-PT&tbo=p&tbm=bks&q=bibliogroup:%22Teor%C3%ADa+y+pr%C3%A1ctica+de+la+publicidad+impresa%22&source=gbs_metadata_r&cad=3



59

D. Quixote, 10ª Edição, Lisboa.

PEREIRA, P. M. C. (2013). Relatório de Estágio. (s./e.), Guarda.

RODRIGUES, L. M. V. (2001). Projecto de Fim de Curso - Estratégia de Marketing para

Seguromóvel – Telecomunicações, Lda. (s./e.), Guarda.

SANTOS, E. (2009). Web Design: uma reflexão conceptual. Revista de Ciências da

Computação, nº4.

SANTOS, J. D. (2006). CRM offline & online. (s./e.), Vila Nova de Gaia.

TORQUATO, G. (1992). Cultura, poder, comunicação e imagem: fundamentos da nova

empresa. Pioneira Thomson, São Paulo.

VALENTE, M. J. A. P. (2015). Apoio E-Marketing. (s./e.), Guarda.



60

Webgrafia

❖ Dropbox (2018). Consultado em 3 de setembro de 2018.

https://www.dropbox.com/pt_BR/help/files-folders/share-file-or-folder

❖ Baixaki (2018). Consultado em 3 de setembro de 2018.


❖ Wikipédia (2018). Consultado em 3 de setembro de 2018.

https://pt.wikipedia.org/wiki/Visual_Studio_Code

❖ DevMedia (2016). Consultado em 3 de setembro de 2018.


❖ TecnoFala (2018). Consultado em 3 de setembro de 2018.


❖ Techtudo (2012). Consultado em 3 de setembro de 2018.

https://www.techtudo.com.br/dicas-e-tutoriais/noticia/2012/02/o-que-e-xampp-e-

para-que-serve.html



❖ Baixaki (2018). Consultado em 4 de setembro de 2018.


❖ Ubuntued (2012). Consultado em 4 de setembro de 2018.

http://ubuntued.info/inkscape-uma-ferramenta-completa-para-desenho-vetorial

❖ Inkscape (2018). Consultado em 4 de setembro de 2018.




❖ FCiências (2018). Consultado em 6 de setembro de 2018.

https://www.fciencias.com/2018/01/10/svg-animation-creator-criador-animacoes-

vetoriais/

https://www.dropbox.com/pt_BR/help/files-folders/share-file-or-folder


https://pt.wikipedia.org/wiki/Visual_Studio_Code



https://www.techtudo.com.br/dicas-e-tutoriais/noticia/2012/02/o-que-e-xampp-e-para-que-serve.html

https://www.techtudo.com.br/dicas-e-tutoriais/noticia/2012/02/o-que-e-xampp-e-para-que-serve.html



http://ubuntued.info/inkscape-uma-ferramenta-completa-para-desenho-vetorial







61

❖ Apikiblog (2017). Consultado em 6 de setembro de 2018.

https://blog.apiki.com/2017/06/13/wordpress-4-8-widgets/

❖ Apikiblog (2016). Consultado em 6 de setembro de 2018.

https://blog.apiki.com/2016/06/29/plugins-wordpress/

❖ Tudo para WP (2016). Consultado em 17 de setembro de 2018.

https://tudoparawp.com.br/dicas-wordpress/wordpress-seguro/

❖ Tudo sobre hospedagem de sites (2018). Consultado em 17 de setembro de 2018.

https://tudosobrehospedagemdesites.com.br/wordpress/

❖ Wordpress Portugal (2016). Consultado em 6 de setembro de 2018.


❖ Br-mac.org (2018). Consultado em 6 de setembro de 2018.

https://br-mac.org/2013/09/o-que-e-markdown.html

❖ Canal Tech. Consultado em 3 de setembro de 2018.



https://pt.wikipedia.org/wiki/Poedit

❖ WPlang (2015). Consultado em 8 de setembro de 2018.

https://pt.wplang.org/traduzir-tema-plugin-wordpress/

❖ Hostnet (2000). Consultado em 8 de setembro de 2018.

https://www.hostnet.com.br/info/conceitos-iniciais-do-drupal/



❖ Significados (2018). Consultado em 19 de setembro de 2018.


❖ Flaticon (2018). Consultado em 21 de setembro de 2018.




https://blog.apiki.com/2017/06/13/wordpress-4-8-widgets/

https://blog.apiki.com/2016/06/29/plugins-wordpress/

https://tudoparawp.com.br/dicas-wordpress/wordpress-seguro/

https://tudosobrehospedagemdesites.com.br/wordpress/


https://br-mac.org/2013/09/o-que-e-markdown.html


https://pt.wikipedia.org/wiki/Poedit

https://pt.wplang.org/traduzir-tema-plugin-wordpress/

https://www.hostnet.com.br/info/conceitos-iniciais-do-drupal/







62

❖ Lidia – Literacia Digital de Adultos (2018). Consultado em 21 de setembro de 2018.




❖ Softonic (2018). Consultado em 24 de setembro de 2018.

http://artigos.softonic.com.br/tudo-sobre-photoshop


https://pt.wikipedia.org/wiki/Bootstrap_(framework_front-end)#cite_note-v4.0.0-

alpha-release-7

❖ Bootstrap (2011). Consultado em 24 de setembro de 2018.

https://getbootstrap.com.br/

❖ W3Schools (2018). Consultado em 24 de setembro de 2018.

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

❖ Tecnoblog (2018). Consultado em 24 de setembro de 2018.



https://www.techtudo.com.br/tudo-sobre/what-the-font.html


https://pt.wikipedia.org/wiki/Microsoft_Word

❖ I-Técnico (2018). Consultado em 24 de setembro de 2018.


❖ Significados (2018). Consultado em 24 de setembro de 2018.






http://artigos.softonic.com.br/tudo-sobre-photoshop

https://pt.wikipedia.org/wiki/Bootstrap_(framework_front-end)#cite_note-v4.0.0-alpha-release-7

https://pt.wikipedia.org/wiki/Bootstrap_(framework_front-end)#cite_note-v4.0.0-alpha-release-7

https://getbootstrap.com.br/

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp


https://www.techtudo.com.br/tudo-sobre/what-the-font.html

https://pt.wikipedia.org/wiki/Microsoft_Word






63




https://pt.wikipedia.org/wiki/Google_Calendar

❖ Slideshare (2013). Consultado em 27 de setembro de 2018.

https://pt.slideshare.net/pressurecode/adobe-premier-pro-tutorial-base-1-18367107





❖ APDS RAMIRÃO, Associação para o desenvolvimento Social do Ramirão (2018).

Consultado em 9 de outubro de 2018.

http://www.apdsramirao.pt/

❖ Awutek (2018). Consultado em 9 de outubro de 2018.

http://awutek.fi/portfolio/tekna-s-r-lalumiinintyostokoneet?lang=en

❖ Pipedrive (2018). Consultado em 11 de outubro de 2018.


❖ Priberam (2018). Consultado em 14 de outubro de 2018.


❖ Serralã (2006). Consultado em 14 de outubro de 2018.

http://www.serrala.pt/

❖ E-Informa Portugal – Diretório de Empresas. Consultado em 14 de outubro de 2018.


❖ Transdev. Consultado em 14 de outubro de 2018.


❖ Drupal Dev Days Lisbon (2018). Consultado em 12 de outubro de 2018.

https://lisbon2018.drupaldays.org/


https://pt.wikipedia.org/wiki/Google_Calendar

https://pt.slideshare.net/pressurecode/adobe-premier-pro-tutorial-base-1-18367107



http://www.apdsramirao.pt/

http://awutek.fi/portfolio/tekna-s-r-lalumiinintyostokoneet?lang=en



http://www.serrala.pt/



https://lisbon2018.drupaldays.org/



64

❖ Hotmart/Blog (2018). Consultado em 12 de outubro de 2018.


❖ Revista Saúda (2016). Consultado em 10 de outubro de 2018.


❖ Facebook (2018). Consultado em 9 de outubro de 2018.

https://www.facebook.com/pg/Norinstelnor-SA-Instala%C3%A7%C3%B5es-

Especiais-468398056593913/about/

❖ Eurofunghi (2018). Consultado em 9 de outubro de 2018.

http://www.eurofunghi.pt/

❖ Venda de Caracóis. Consultado em 9 de outubro de 2018.

http://vendadecaracois.blogspot.com/2013/11/cerdeira-do-coa-fornece-caracois-

para-o.html

❖ FTP Vinhos (2018). Consultado em 9 de outubro de 2018.

https://www.ftpvinhos.com/pt/apresentacao

❖ Marketing de Conteúdo (2018). Consultado em 30 de outubro de 2018.

https://marketingdeconteudo.com/como-criar-um-logotipo/



https://www.facebook.com/pg/Norinstelnor-SA-Instala%C3%A7%C3%B5es-Especiais-468398056593913/about/

https://www.facebook.com/pg/Norinstelnor-SA-Instala%C3%A7%C3%B5es-Especiais-468398056593913/about/

http://www.eurofunghi.pt/

http://vendadecaracois.blogspot.com/2013/11/cerdeira-do-coa-fornece-caracois-para-o.html

http://vendadecaracois.blogspot.com/2013/11/cerdeira-do-coa-fornece-caracois-para-o.html

https://www.ftpvinhos.com/pt/apresentacao

https://marketingdeconteudo.com/como-criar-um-logotipo/

Anexos

Índíce de anexos

Anexo I Plano de estágio

Anexo II Tutorial de como instalar o Lubunto

Anexo III Postais Seguro de Crédito

Anexo IV Textos para processamento para SEO

Anexo V Fotos sobre o posicionamento da TavFer Inspeção Auto

Anexo VI Maquete do site Transpostal

Anexo VII Maquete do site Open Style

Anexo VIII Site Clínica CG

Anexo IX Folheto Interativo

Anexo X Projeto: A loja dos brinquedos

Anexo I – Plano de estágio

Anexo II – Tutorial de como instalar o Lubunto

Instalação do Lubuntu 14.04 (32-bits)

Para instalar o sistema operativo Linux (Ubuntu 12.04.5 e 14.04 (ou posterior)) somente no

Pentium M:

• O Ubuntu 12.04.5 e o 14.04 suportam uma opção ("forcepae") para ativar o PAE em

CPUs Pentium M (onde ele é desativado por padrão). Para habilitá-lo:

• Inicialize o instalador do Ubuntu (ou Xubuntu etc.) de 32 bits

• Quando a imagem do teclado e o homenzinho no círculo aparecerem, pressione a

tecla Tab

• Aparece o pop-up "Escolha seu idioma". Use as teclas do cursor e pressione a tecla

Enter para escolher o seu idioma

• Pressione F6 e um menu cinza irá aparecer com algumas opções de inicialização

• Pressione a tecla ESC para fechar a janela

• Você verá agora uma linha que diz:

Boot Options file=/cdrom/preseed/ubuntu.seed boot=casper initrd=/casper/initrd.lz

quiet splash --

Edite esta linha e adicione o parâmetro forcepae com espaços duas vezes ao redor -- do

final:

Boot Options file=/cdrom/preseed/ubuntu.seed boot=casper initrd=/casper/initrd.lz

quiet splash -- forcepae -- forcepae

• Nota: forcepae é necessário duas vezes porque define os parâmetros de

inicialização para duas inicializações de kernel diferentes - o kernel que é

executado como parte do instalador (à esquerda --) e o kernel que é executado no

sistema instalado (à direita de --).

• Aperte a tecla Enter e o Ubuntu irá inicializar e o resto da sua instalação será bem-

sucedida. Se você tem problemas gráficos com o Unity, ou simplesmente ache

lento, tente uma distribuição mais leve como o Xubuntu.

Anexo III – Postais Seguro de Crédito

Anexo IV – Textos para processamento para SEO

Alcanena

Marque a sua inspeção automóvel no centro de inspeções de Alcanena (Santarém) e

escolha o melhor horário para si. A sua segurança é a nossa prioridade.

Alcobaça

Precisa de ir com o seu veículo ao centro de inspeções mais próximo? Não perca tempo e

faça a sua inspeção automóvel no centro de inspeções de Alcobaça (Santarém), na zona

industrial do Casal da Areia. Almeirim

Para uma maior comodidade e sem tempos de espera, faça já a sua marcação no centro de

inspeção automóvel de Almeirim (Santarém), situado na zona industrial. Amadora

Se preferir um serviço eficiente e rápido, marque já a sua inspeção automóvel no centro

de inspeções da Amadora (Lisboa), junto ao posto de combustível Cepsa. Aveiro

Com a garantia do melhor serviço e com todo o conforto, realizamos a sua inspeção

automóvel no centro de inspeções de Aveiro, na zona industrial da Tabueira, perto da

empresa Jovagro. Basta marcar a sua inspeção online aqui.

Caldas da Rainha

Não perca tempo e marque já a sua inspeção automóvel no centro de inspeções de Caldas

da Rainha (Leiria), junto às empresas Sodicel e Quick box. Castelo de Paiva

Faça aqui a sua marcação de forma rápida e cómoda no centro de inspeção automóvel de

Castelo de Paiva (Aveiro), na zona industrial de Felgueiras - Sobrado, na estrada em

direção ao Ecocentro. Escolha eficiência e rapidez! Coimbra

Necessita de fazer a inspeção do seu veículo? Efetue a sua marcação online aqui no centro

de inspeções de Coimbra, localizado à entrada da freguesia de Taveiro.

Covilhã

Para um melhor e atencioso atendimento, faça a marcação da inspeção do seu veículo no

centro de inspeções da Covilhã, situado na zona industrial do Canhoso. Elvas

Marque a sua inspeção automóvel no centro de Elvas (Portalegre) e escolha o melhor

horário para si. A sua satisfação é a nossa prioridade.

Estremoz


inspeção automóvel de Estremoz (Évora) ao lado do posto de combustível Repsol. Faro


Faro, no Sítio do Perna de Pau – Campinas de Faro, ao longo da estrada nacional nº 2

rumo a São Brás de Alportel. Escolha eficiência e rapidez!

Felgueiras Se preferir um serviço eficiente e rápido, marque já a sua inspeção automóvel no centro

de inspeções de Felgueiras (Porto), próximo à empresa Solpré. Figueira da Foz


automóvel no centro de inspeções da Figueira da Foz (Coimbra), na zona industrial. Basta

marcar a sua inspeção online aqui. Guarda

Necessita de fazer a inspeção do seu veículo? Não perca tempo e faça a sua marcação já

aqui no centro de inspeções da Guarda, na zona industrial da cidade.

Lamego

Marque a sua inspeção automóvel no centro de inspeções de Lamego (Viseu) e escolha o

melhor horário para si. A sua segurança é a nossa prioridade.

Poço do Bispo

Prefira um serviço eficiente e rápido, marque já a sua inspeção automóvel no centro de

inspeções do Poço do Bispo (Lisboa), ao longo da Av. Infante Dom Henrique.

Prior Velho

Prefira um serviço eficiente e rápido, marque já a sua inspeção automóvel no centro de

inspeções de Prior Velho (Lisboa), junto do edifício Joca.

Marinha Grande


centro de inspeções da Marinha Grande (Leiria), situado na zona industrial da Embra. Meirinhas


Meirinhas (Leiria), à distância de 16.3 km de Leiria. Escolha eficiência e rapidez! Montemor-o-Novo

Necessita de fazer a inspeção do seu veículo? Não perca tempo e faça a sua marcação no

centro de inspeções de Montemor-o-Novo (Évora), na zona industrial da Adua.

Montijo

Faça aqui a sua marcação de forma rápida e cómoda no centro de inspeção automóvel do

Montijo (Setúbal), nos arredores da cidade, junto ao Arquivo Municipal e próximo ao

forúm. Escolha eficiência e rapidez!

Odivelas


de inspeções de Odivelas (Lisboa), junto às empresas Adrimar e Micau. Oeiras


centro de inspeções de Oeiras (Lisboa), situado na freguesia de Porto Salvo, próximo ao

Mercado Municipal. Oliveira do Bairro


Oliveira do Bairro (Aveiro), na zona industrial Oiã. Escolha eficiência e rapidez! Pombal


inspeção automóvel de Pombal (Leiria), ao longo da estrada nacional nº 1, na freguesia de

Redinha. Ponte de Lima


de inspeções de Ponte de Lima (Viana do Castelo), junto à empresa Bosh.

Portimão


automóvel no centro de inspeções de Portimão (Faro), no Chão das Donas. Basta marcar

a sua inspeção online aqui.

Santa Maria da Feira

Marque a sua inspeção automóvel no centro de inspeções de Santa Maria da Feira (Aveiro)

e escolha o melhor horário para si. A sua segurança é a nossa prioridade.

Sardoal


automóvel no centro de inspeções do Sardoal (Santarém), na zona industrial. Basta marcar

a sua inspeção online aqui.

Seia


Seia (Guarda), próximo ao Pingo Doce. Escolha eficiência e rapidez! Sines Necessita de fazer a inspeção do seu veículo? Não perca tempo e faça a sua marcação no

centro de inspeções de Sines (Setúbal), na zona industrial da cidade.

Tábua

Não perca tempo e marque já a sua inspeção automóvel no centro de inspeções de Tábua

(Coimbra), junto às empresas Lumitab e Intergran. Tavira


centro de inspeções da Tavira (Faro), situado no Sítio S. Pedro. Tomar

Marque a sua inspeção automóvel no centro de inspeções de Tomar (Santarém) e escolha

o melhor horário para si. A sua segurança é a nossa prioridade.

Valongo


Valongo (Porto), junto ao posto de abastecimento Repsol. Escolha eficiência e rapidez!

Viana Castelo D’Arque


automóvel no centro de inspeções de Viana Castelo D’Arque (Viana Castelo - Norte), no

parque industrial D’Arque. Basta marcar a sua inspeção online aqui. Viana do Castelo Neiva


inspeção automóvel de Viana Castelo Neiva (Viana Castelo - Sul), na zona industrial.

Anexo V – Fotos sobre o posicionamento da TavFer Inspeção Auto

Anexo VI – Maquete do site Transpostal

Anexo VII – Maquete do site Open Style

Anexo VIII – Site Clínica CG

Anexo IX – Folheto Interativo

Anexo X – Projeto: A loja de brinquedos

#Remodelação do site A loja dos brinquedos

##Problemas ou Melhorias:

- Design responsivo

- Número de elementos por página para venda é muito extenso, fazendo com que

o utilizador faça **scroll em demasia**, podendo se cansar. Deveria ter uma

opção para o cliente optar por uma vista por galeria ou lista e outra opção

para limitar a visualização do número de artigos por página (20/30).

- O texto"Portes grátis em compras superiores a 40€" mal situado e pouco

destacado. Tal como o "Compre já e receba até: Quinta, 13 de Setembro".

- Opção para pesquisar por: **Organizar/classificar por: o mais vendido, o

preço mais baixo, etc.**

- Menu: Missão - Categorias (dropdown) - Contactos

- Destacar o número de contacto e passar para o cabeçalho, de modo a torná-

lo mais vísivel.

- Adicionar icones aos menu. Colocando um ícone atrás de cada palavra ou

substuindo as palavras por icones com uma legenda.

- Trocar a sidebar para baixo do menu. Ficando numa posição horizontal e a

passar num slideshow.

- Descrição do produto mais detalhada.

- Dinamismo ao passar o mouse pela imagem do produto, fazendo com que o

produto seja ampliado ou a sua visualização mude de ângulo (360º).

- Cabeçalho fixo.

- Falta de congruência no tipo de letra.

##Sites para redesign:

- [Rihappy](https://www.rihappy.com.br/)

- [Toyboy](https://www.toyboy.com.br/)

- [Eurekakids](https://www.eurekakids.pt/)

- [Toymania](https://www.toymania.com.br/)

- [Autobrinca](https://www.autobrinca.com/)

-

[Jumbo](https://www.jumbo.pt/Frontoffice/brinquedos_e_videojogos/brinquedos)

- [Ludicenter](https://www.ludicenter.pt/)

-

[Science4you](https://brinquedos.science4you.pt/?gclid=Cj0KCQjww8jcBRDZARIsA

JGCSGvKX-Q8TNf70VnPePgrijAG-NF07mwsDtFkpt_eebVJy9_RCCy_g6gaAiJzEALw_wcB)

##Interações do site com com cliente:

- [Product gallery with blur and progressive

enhancement](https://codepen.io/wwwebneko/pen/oLxmVo)

- [Product item additions info](https://codepen.io/vistar/pen/EjLOXw)

- [Ecommerce animations](https://codepen.io/RSH87/pen/RagqEv)

- [Sweet image zoom effects](https://codepen.io/samarkandiy/pen/AzGkx)

- [Product Zoom](https://codepen.io/kratos6753/pen/KNWgMG)

- [360 Degree View With Code](http://cssdeck.com/labs/xzg3szlj)

- [lupa](videos/lupa.mp4)

- [lupa2](videos/lupa2.mp4)

- [galeria](videos/galeria.mp4)

- [efeitopassarmouse](videos/efeitopassarmouse.mp4)

- [efeitopassarmouse2](videos/efeitopassarmouse2.mp4)

##Elementos Gráficos:

-

[Carrinho](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=

&cad=rja&uact=8&ved=2ahUKEwjNlO-

Fp7jdAhUO3RoKHQlvDasQjRx6BAgBEAU&url=http%3A%2F%2Fwww.clker.com%2Fclipart-

red-shopping-

cart.html&psig=AOvVaw0_zT7JI3TYJSH68T6GWlip&ust=1536937769099008)

-

[Telefone](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=

&cad=rja&uact=8&ved=2ahUKEwjNlO-

Fp7jdAhUO3RoKHQlvDasQjRx6BAgBEAU&url=http%3A%2F%2Fwww.clker.com%2Fclipart-

red-shopping-

cart.html&psig=AOvVaw0_zT7JI3TYJSH68T6GWlip&ust=1536937769099008)

-

[Login](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ca

d=rja&uact=8&ved=2ahUKEwivhOKGqLjdAhWnyIUKHWGeDqgQjRx6BAgBEAU&url=https%3A%2

F%2Fwww.kisspng.com%2Fpng-computer-icons-login-user-gestures-vector-

1283166%2Fdownload-

png.html&psig=AOvVaw2v0rgtoCAW9SY3viwBGEQU&ust=1536939516597112)

-

[Missão](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&c

ad=rja&uact=8&ved=2ahUKEwj66NfinrrdAhUHrxoKHb4vA0YQjRx6BAgBEAU&url=https%3A%

2F%2Fctcaminholuz.com.br%2Fhome%2Ficone-

missao%2F&psig=AOvVaw2O9IsOBDQGdhoxtJbfMVlu&ust=1537005755068745)

-

[Contactos](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd

=&cad=rja&uact=8&ved=2ahUKEwifptbwobrdAhVSyRoKHXDPAVoQjRx6BAgBEAU&url=https%

3A%2F%2Ficon-icons.com%2Fpt%2Ficone%2Fsms-email-

carta%2F52477&psig=AOvVaw0TCcStIWKcgs_3xDwxGp6A&ust=1537006585083194)

-

[categorias](https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&c

d=&cad=rja&uact=8&ved=2ahUKEwjkw7fpzbrdAhXCxIUKHXkIAKMQjRx6BAgBEAU&url=https

%3A%2F%2Fpt.dreamstime.com%2Filustra%25C3%25A7%25C3%25A3o-stock-

%25C3%25ADcone-circular-do-gr%25C3%25A1fico-%25C3%25ADcone-da-carta-

elemento-para-o-projeto-infographic-

image81797747&psig=AOvVaw2lIlpFv28zlrcPXRodw_tw&ust=1537010480585097)

Documents

RELATÓRIO DE ESTÁGIObdigital.ipg.pt/dspace/bitstream/10314/4583/1/Luís Morgado_500882… · Gesp.010.03 Escola Superior de Educação, Comunicação e Desporto Instituto Politécnico