irei folitécuicobdigital.ipg.pt/dspace/bitstream/10314/2570/1/rúdi... · studiobox, que se...

IREI4

folitécuico1 daGuardal’oly(echnicof Guarda

RELATÓRIO DE ESTÁGIO

Licenciatura em Comunicação Multimédia

Rúdi Samuel Fernandes

dezembro 1 2015

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

RÚDI SAMUEL FERNANDES

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

EM COMUNICAÇÃO MULTIMÉDIA

DEZEMBRO 2015

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

Instituto Politécnico da Guarda

I

FICHA TÉCNICA

Aluno: Rúdi Samuel Fernandes

Número: 5007722

Curso: Comunicação Multimédia

Ano: 2015

Instituição de ensino: Escola Superior de educação, comunicação e desporto

Morada: Av. Dr. Francisco Sá Carneiro, 50 – 6300-559 Guarda

Telefone: +351 271220 100

Fax: +351 271 222 690

E-mail: [email protected]

Orientador de estágio: Carlos Brigas

Empresa: StudioBox

Morada: Rua Alexandre Herculano, 291 3510-038 Viseu

Telefone: +351232 435 131

Telemóvel: +351 968 405 494

E-mail: [email protected]

Site: www.studiobox.pt

Supervisor na Organização: Bruno Esteves

Duração do Estágio: 1 de Setembro a 1 de Dezembro

mailto:[email protected]

mailto:[email protected]

http://www.studiobox.pt/

II

Agradecimentos

Em primeiro lugar gostaria de agradecer ao Instituto Politécnico da Guarda e à

Escola Superior de Educação, Comunicação e Desporto por terem contribuído para a

minha formação académica.

Ao Prof. Dr. Carlos Brigas por ter aceitado ser o meu orientador e principalmente

pela disponibilidade e apoio fornecidos.

A todos os docentes do curso de Comunicação Multimédia, pelo apoio e pela

partilha de conhecimentos ao longo destes três anos.

À empresa StudioBox, por me terem acolhido e me terem feito sentir “um membro

da família” e por depositarem em mim confiança nas minhas capacidades, para levar a

cabo a realização das diferentes tarefas.

À minha família, pelo apoio que me deram e por todos os sacrifícios feitos para

eu puder realizar a licenciatura.

Aos meus amigos/as por todos os momentos e experiências que passamos juntos

ao longo destes três anos.

III

Resumo

O relatório de estágio é um elemento fundamental para a finalização da

licenciatura em Comunicação Multimédia, este tem como objetivo caracterizar a empresa

em que realizei o meu estágio e descrever, pormenorizadamente, todas as atividades

realizadas ao longo dos três meses de estágio curricular na empresa StudioBox, situada

em Viseu, Portugal

O relatório encontra-se dividido em dois capítulos. O primeiro capítulo tem como

objetivo descrever a empresa e os serviços prestados e a sua estrutura organizacional onde

o estágio foi realizado. Onde segundo capítulo, são apresentada todas as atividades

desenvolvidas na empresa, acompanhadas pelo respetivo enquadramento teórico.

Para finalizar, é realizada uma reflexão final das experiências vividas no estágio

como também uma opinião pessoal do estagiário sobre a sua primeira experiência no

mundo do trabalho.

Palavras-Chave: Website; CMS; Design de interface;

IV

Índice Geral

FICHA TÉCNICA ....................................................................................................................... I

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

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

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

Índice de Figuras ........................................................................................................................ VI

Índice de Tabelas ....................................................................................................................... VII

Lista de acrónimos e siglas ...................................................................................................... VIII

Glossário...................................................................................................................................... IX

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

Capítulo I – StudioBox ................................................................................................................ 3

1.1 – Apresentação da empresa acolhedora – StudioBox ........................................................ 4

1.2 – Missão, Valores e Visão ..................................................................................................... 4

1.2.1 – Missão da StudioBox ................................................................................................... 4

1.2.2 – Valores da StudioBox .................................................................................................. 5

1.2.3 – A visão da StudioBox .................................................................................................. 6

1.3 – Estrutura Organizacional .................................................................................................. 6

1.4 – Serviços ................................................................................................................................ 8

1.5 – Comunicação ...................................................................................................................... 8

1.5.1 – Comunicação Interna .................................................................................................. 9

1.5.2 – Comunicação Externa ................................................................................................. 9

1.5.2.1 – Contacto Pessoal ................................................................................................... 9

1.5.2.2- Correiro Electrónico ............................................................................................ 10

1.5.2.3 – Redes Sociais ....................................................................................................... 10

1.5.2.4 – Website ................................................................................................................ 11

1.6 – Identidade Visual da StudioBox ...................................................................................... 12

1.6.1 - Nome ........................................................................................................................... 13

1.6.2 – Símbolo ....................................................................................................................... 13

1.6.3 – Logótipo ..................................................................................................................... 14

1.7 – Análise SWOT .................................................................................................................. 14

Capítulo II – Trabalhos Desenvolvidos ................................................................................... 17

2.1 – Objetivos do estágio ......................................................................................................... 18

V

2.2 – Plano de estágio ................................................................................................................ 18

2.3 – Cronograma ...................................................................................................................... 19

2.4 – Software utilizado ............................................................................................................. 21

2.5 – Enquadramento teórico ................................................................................................... 22

2.5.1 – Webdesign .................................................................................................................. 22

2.5.2 – Design de Interface para dispositivos móveis ......................................................... 23

2.6 – Projetos realizados ........................................................................................................... 26

2.7 – Casas do Prior .................................................................................................................. 27

2.7.1 – Conceção (Planeamento, Análise e Desenho) .......................................................... 27

2.7.2 – Implementação (Desenvolvimento, Testes e Alojamento) ..................................... 31

2.8 – Stramus ............................................................................................................................. 33

2.8.1 - Conceção (Planeamento, Análise e Desenho) .......................................................... 34

2.8.2 – Implementação (Desenvolvimento, testes e alojamento) ........................................ 37

2.9 – Grão Vás Confraria ......................................................................................................... 39

2.9.1 - Conceção (Planeamento, Análise e Desenho) .......................................................... 39

2.9.2 - Implementação (Desenvolvimento, testes e alojamento) ........................................ 43

2.10 – Clube de Futebol Os Viriatos ........................................................................................ 45

2.11 –Lima Limão Online ......................................................................................................... 45

2.12 – My Rally Car .................................................................................................................. 46

2.13 – NS Eletricidade ............................................................................................................... 46

2.14 – Transportes360 ............................................................................................................... 46

2.15 – Fadista Mara Pedro ....................................................................................................... 47

2.16 – Design de interfaces para dispositivos móveis ............................................................. 48

Reflexão Final ............................................................................................................................ 51

Bibliografia ................................................................................................................................ 53

Anexos ........................................................................................................................................ 54

Listagem de anexos ................................................................................................................... 55

VI

Índice de Figuras

Figura 1 – Estrutura Organizacional da Empresa .......................................................................... 7

Figura 2 – Página de Facebook da StudioBox .............................................................................. 11

Figura 3 – Website da StudioBox ................................................................................................ 12

Figura 4 – Marca da StudioBox ................................................................................................... 13

Figura 5 – Símbolo ....................................................................................................................... 13

Figura 6 – Logótipo ...................................................................................................................... 14

Figura 7 – Análise SWOT ............................................................................................................. 15

Figura 8 - Estrutura Principal de navegação website Casas Do Prior .......................................... 29

Figura 9 - Wireframe da homepage do website Casas Do Prior ................................................. 30

Figura 10 - Template Hotel Master ............................................................................................. 31

Figura 11 - Website Final (Casas Do Prior) .................................................................................. 33

Figura 12 - Estrutura principal de navegação website Stramus .................................................. 36

Figura 13 - Wireframe da homepage do website Stramus ......................................................... 37

Figura 14 - Template Natural Shop ............................................................................................. 38

Figura 15 - Website Final (Stramus) ............................................................................................ 39

Figura 16 - Estrutura principal de navegação website Grão Vás Confraria ................................. 41

Figura 17 - Wireframe da homepage do website Grão Vás Confraria ........................................ 42

Figura 18 - Template Interface .................................................................................................... 43

Figura 19 – Website Final (Confraria Grão Vás) .......................................................................... 44

Figura 20 - Edição do vídeo, Fadista Mara Pedro ........................................................................ 48

Figura 21 - Estrutura principal de navegação das aplicações móveis ......................................... 49

Figura 22 - Wireframe da aplicação móvel do Grupo Desportivo De Chaves ............................. 50

VII

Índice de Tabelas

Tabela 1 - Cronograma de atividades do mês de setembro ....................................................... 20

Tabela 2 - Cronograma de atividades do mês de outubro .......................................................... 20

Tabela 3 - Cronograma de atividades do mês de novembro ...................................................... 21

VIII

Lista de acrónimos e siglas

CSS – Cascading Style Sheets;

CMS – Content Management System;

DJ – Disc Jokey;

FTP – File Transfer Protocol;

HTML – Hypertext Markup Language;

HTTP – HyperText Transfer Protocol;

PDF – Portable Document Format;

PHP – Hypertext Preprocessor;

SQL – Structured Query Language;

SWOT – Strengths, Weaknesses, Opportunities And Threats;

URL – Uniform Resource Locator;

VOIP – Voice Over Internet Protocol.

IX

Glossário

Browser – É um programa informático que permite os utilizadores navegarem na internet.

Check-in/ Check-out – É um estrangeirismo de uma palavra inglesa, que remete o ato

de dar entrada/saída.

Child-Theme – É um processo que permite alterar o estilo e as funções de um template

sem alterar os arquivos originais do mesmo.

Designer – É um profissional que desempenha atividade de carácter técnico-científico,

criativo para elaboração de projetos de design.

E-mail – Também conhecido por correio eletrónico, permite editar, enviar e receber

mensagens através de sistemas eletrónicos de comunicação.

Facebook – É uma rede social gratuita, que permite os seus utilizadores publicarem

fotografias e lista de interesses pessoais.

Layout – Posicionamento de elementos gráficos e texto para dar aparência a uma página.

Pixéis – Um pixel, é o menor ponto que forma uma imagem digital, sendo que o conjunto

de milhares de pixéis formam uma imagem inteira.

Plugin – Os plugins são ferramentas utilizadas para expandir as funcionalidades já

existentes no wordpress, existem plugins gratuitos, estes podem ser adquiridos no

diretório de plugins do wordpress (www.wordpress.org/plugins/) e plugins pagos.

Slider – Um slider é uma ferramenta audiovisual e fotográfica, é uma exposição

sequencial de fotografias em um dispositivo eletrónico.

Software – É um conjunto de instruções digitais armazenadas em discos ou qualquer

outro suporte físico de dados digitais, são essencialmente programas informáticos

utilizados para realizarem determinadas tarefas.

Template – Os templates são ficheiros responsáveis pelo controlo do aspeto e pelo

funcionamento do website na word wide web. Estes ficheiros retiram informação da base

http://www.wordpress.org/plugins/

X

de dados do wordpress e geram o código em HTML que é enviado para os diferentes

browser’s disponíveis.

User-friendly – Software ou elemento informático fácil de perceber e usar pelo utilizador.

Website – Agrupamento de páginas web, visualizado num browser, que permite ao

utilizador o contacto com empresas, indivíduos ou locais online.

Widget – Tal como os plugins, os widgets são ferramentas utilizadas para expandir as

funcionalidades, mas ao contrário dos plugins, maior parte dos widgets existentes no

mercado podem apenas ser utilizados em secções específicas dos websites, definidas pela

equipa responsável pela criação e programação do template.

Wordpress – É uma plataforma CMS de sistema informático que permite o

gerenciamento de conteúdos nos websites.

Youtube – É um website que permite que os seus utilizadores façam upload e partilhem

os seus vídeos digitais.

1

Introdução

O presente relatório de estágio curricular surge no âmbito da licenciatura de

Comunicação Multimédia da Escola Superior de Educação, Comunicação e Desporto do

Instituto Politécnico da Guarda, este marca a conclusão da licenciatura que se iniciou em

setembro de 2012.

O estágio curricular marca o início de uma nova etapa na vida do aluno, pois

permite ao aluno um primeiro contacto com o mercado do trabalho, onde tem a

oportunidade de pôr em prática todos os conhecimentos, teóricos e práticos adquiridos ao

longo do curso assim como adquirir novas competências e conhecimentos.

Este relatório é fruto da permanência de três meses de estágio na empresa

Studiobox, que se encontra localizada na cidade de Viseu.

A StudioBox, localizada em Viseu, foi a entidade acolhedora para a realização do

estágio curricular. Trata-se de uma empresa que presta serviços de design e branding em

projetos de publicidade, web design e marketing. Posto isto, os conhecimentos que foram

obtidos durante os três anos de licenciatura poderiam ser em grande parte aplicados no

decorrer deste estágio curricular e, também, a oportunidade de adquirir novas aptidões

através dos profissionais que a representam. Esse foi o principal fator de escolha para a

realização do estágio nesta empresa. Posteriormente foi elaborado um plano de estágio

em conjunto com o supervisor da empresa, de modo a identificar quais os objetivos a

atingir com a realização do estágio, por parte do aluno, assim como as tarefas que este

iria realizar ao longo dos três meses de estágio (Anexo I).

Este relatório encontra-se dividido em dois capítulos. O primeiro capítulo contém

a caracterização pormenorizada da StudioBox, contemplando assim aspetos como a sua

história, visão e valores, a sua missão, as subsidiárias que constitui a empresa como um

todo, a sua equipa de trabalho, como a empresa funciona no seu quotidiano e uma análise

SWOT, que determina o porquê da StudioBox, ser uma empresa de sucesso com cerca de

onze anos de atividade a nível mundial.

2

O segundo capítulo está relacionado com o estágio realizado pelo estudante e a

todas as atividades desenvolvidas sempre acompanhadas pelos seus procedimentos e

estudos realizados para a sua concretização, neste capítulo também é apresentado o

enquadramento teórico sobre o design de interfaces e web design. Por fim, é apresentado

uma reflexão final do relatório, escrita na primeira pessoa sobre as experiências vividas

com o estágio e qual a sua importância a nível académico, pessoal e profissional.

3

Capítulo I – StudioBox

Apresentação da empresa acolhedora

Missão, Valores e Visão

Estrutura Organizacional

Serviços

Comunicação

Identidade Visual

Análise SWOT

4

Neste capítulo é feita uma apresentação e descrição pormenorizada da empresa

StudioBox, das atividades que desenvolve, a sua história, a sua estrutura organizacional,

entidade visual e a sua missão e valores.

1.1 – Apresentação da empresa acolhedora – StudioBox

A StudioBox foi fundada em 2004, é uma empresa especializada na criação de

estratégias de comunicação, na planificação de meios e consultoria de imagem,

desenvolve entidade corporativas, também é responsável pelo desenvolvimento de web

design, hosting e multimédia. Também participa na realização de eventos sociais,

profissionais e desportivos, para complementar todos esses eventos, despõem de um

agenciamento artístico (músicos, DJ’s, modelos, promotores, entertainers, entre outros).

A StudioBox conta com várias parcerias para dar resposta aos diversos trabalhos

solicitados pelos seus clientes.

A empresa StudioBox possui várias subsidiárias não só a nível nacional, como

também a nível mundial, marcando a sua presença em Portugal, na cidade de Lisboa e na

cidade de Viseu, no Brasil, no estado de Santa Catarina e brevemente na capital de Angola

em Luanda.

1.2 – Missão, Valores e Visão

A missão, visão e valores são os principais fatores responsáveis pela determinação

da imagem favorável ou desfavorável de uma empresa. Esta é avaliada segundo a opinião

dos diferentes públicos (Magdalena, 2012).

1.2.1 – Missão da StudioBox

Segundo Valadares (2002), a missão de uma empresa é a explicação da existência

da empresa e quais os seus objetivos e estratégias. Esta deve ser clara, objetiva e da

compreensão de todos os elementos da organização. O autor defende ainda que a missão

deve refletir a filosofia do trabalho, sem qualquer preocupação com afirmações

quantitativas.

Concluindo, a missão define o papel da entidade empresarial dentro da sociedade

5

em que está envolvida. Ela é responsável por determinar qual o seu negócio, e de que

forma ela atua neste.

A missão da StudioBox consiste em auxiliar os seus clientes a desenvolverem um

processo de comunicação válido para com os seus públicos-alvo. Cada cliente é analisado

de forma única, com o objetivo de definir a melhor estratégia de comunicação, a fim de

propor um plano de ações a desenvolver de forma aos melhores resultados serem

atingidos.

1.2.2 – Valores da StudioBox

Segundo Ribeiro (2008), os valores básicos constituem a ideologia central da

empresa e são relativamente constantes. Os valores básicos são alguns conceitos centrais

de uma empesa. Estes representam os valores fundamentais para a existência da

organização e são independentes do tipo de atividade em que a organização se encontra.

A StudioBox rege-se através de um conjunto de valores simples, no entanto

essenciais que definiu o sucesso da empresa ao longo destes quase onze anos de

existência. Esses valores assentam em:

Respeito – Tratamento gentil para com os seus clientes, promovendo assim a

harmonia e também a motivação no ambiente de trabalho da empresa;

Criatividade – A empresa está preparada para ouvir e também aconselhar os seus

clientes de forma a atingir o sucesso nos seus projetos, isto graças ao facto de

possuir uma equipa de profissionais altamente qualificados;

Rigor – Realizar todos os projetos com o maior profissionalismo e dentro dos

prazos estipulados para com o seus clientes;

Ética – Em todas as propostas que são apresentadas ao cliente, a empresa torna-

as flexíveis, para que toda a valorização do sucesso do projeto seja focado na

opinião do cliente, pois o projeto será sempre produzido ao gosto do cliente.

Excelência – Não só satisfazer os clientes, mas como também, exceder as suas

expectativas.

6

1.2.3 – A visão da StudioBox

A visão entende-se como uma orientação da empresa para o seu futuro, não

fugindo á realidade em que a empresa se encontra no presente, no entanto esta deve ter

um carácter desafiante com o objetivo de criar motivação para com os seus colaboradores

a alcançarem esses objetivos. “A visão é um quadro de um estudo futuro desejado, uma

descrição de como seria daqui a alguns anos, a partir de agora. É um quadro dinâmico do

futuro. É mais do que um sonho ou um conjunto de esperanças: é um compromisso” (Scott

et al., 1998).

A StudioBox mantém a visão com qual começou, esta acredita que um bom resultado

é obtido através de uma colaboração com os seus clientes.

1.3 – Estrutura Organizacional

Segundo Wagner (2011) a estrutura organizacional é simplesmente uma

ferramenta para atingir as situações almejadas pela empresa e deve ser elaborada de

acordo com os objetivos e as estratégias estabelecidas pela mesma. Para obter uma

organização da empresa adequada, deve ter-se em consideração a estrutura

organizacional, as rotinas e os procedimentos administrativos da mesma.

Apresenta-se a estrutura organizacional da StudioBox (Figura 1).

7

Figura 1 – Estrutura Organizacional da Empresa

Fonte: Estagiário

A estrutura organizacional da StudioBox encontra-se dividida em dois grupos

(Figura 1), no primeiro grupo encontra-mos o topo hierárquico, onde se destaca o diretor

da entidade empresarial, Bruno Esteves, que para além da direção, atua como comercial

no contacto com os clientes da empresa e como também na aquisição de novos clientes.

O segundo grupo encontra-se subdividido em dois departamentos diferentes que se

encontram no mesmo nível hierárquico:

Departamento Criativo – Este departamento é formado pelos designers, Susana

Esteves (web designer), responsável pela criação e manutenção dos websites,

Patrícia Belo (designer gráfico) é responsável pela criação de wireframes,

logomarcas, cartões-de-visita e cartazes e por fim Beto Barreto (Editor) é

responsável pela edição pela revista StudioBox (edição Portuguesa) e pela revista

Valeu! (edição Brasileira).

Departamento Comercial – Este departamento é constituído por João de

Almeida Moreira e também pelo Bruno Esteves (diretor da empresa), estes são

Director

Bruno Esteves

Departamento Criativo

Susana Esteves (webdesigner)

Patrícia Belo (Designer)

Beto Barreto (editor)

Departamento Comercial

João de Almeida Moreira

8

responsáveis por executar contactos telefónicos diariamente com o objetivo de

obter novos clientes e também de apresentar os serviços da entidade empresarial.

1.4 – Serviços

A StudioBox é uma empresa multisserviços e oferece aos seus clientes uma lista muito

diversificada de serviços tendo como especialidade o design comunicacional.

Desenvolvimento de produtos para a web – Webdesign, lojas e-comerce,

newsletters e aplicações interativas.

Desenvolvimento de Identidades corporativas – Marca/identidade, linha

gráfica, packaging, naming e campanhas publicitárias.

Gestão de conteúdos – A StudioBox realiza introdução e gestão de conteúdos

para os diversos websites dos seus clientes.

Correspondência – Receção e envio de correspondência, registando-as em papel

ou digitalmente. Distribuição da documentação às respetivas subsidiárias da

empresa.

Correio eletrónico – Envio periodicamente de e-mails com campanhas

publicitárias.

Certificação de qualidade – Análise de produtos já existentes no mercado,

informando assim uma análise SWOT dos seus produtos, aconselhando assim o

que deverá ser feito para obter melhores resultados.

WebHosting – A StudioBox disponibiliza serviços de hospedagem para os

websites realizados pela mesma, garantido assim uma melhor segurança dos

dados dos clientes e também realizando Backups desses dados regularmente em

caso de falha informática.

1.5 – Comunicação

A comunicação entende-se por todas as formas que foram desenvolvidas por uma

determinada organização com a intenção de fazer com que os seus colaboradores se

relacionem e interagem com os seus públicos.

9

Bahia (1995) defende que a comunicação empresarial é um conjunto de métodos,

recursos, técnicas, meios, etc. Pelo qual a empresa se dirige ao público interno

(funcionários da entidade empresarial) e ao público externo (os clientes da mesma). Após

a análise e compreensão da definição de públicos feita por Bahia, podemos então

considerar que existem aqui dois tipos de comunicação, a comunicação interna e a

comunicação externa.

1.5.1 – Comunicação Interna

A comunicação interna é direcionada para os funcionários e colaboradores da

empresa, esta define-se como um conjunto de atos de comunicação que se produzem no

interior da empresa (Lindon et al., 2011).

Na StudioBox, a comunicação interna é informal, pois maior parte da comunicação

é feita pessoalmente sempre que possível, quando necessário efetua-se a comunicação

através de telefonemas, mensagens ou até mesmo através de plataformas voip, tais como

o Skype.

1.5.2 – Comunicação Externa

A comunicação externa inclui toda a veiculação de informação e todos os

comunicados emitidos pela organização empresarial para um público ou uma opinião

pública fora dos limites internos. Em geral, o uso que a empresa faz dos meios de

comunicação para o fim de tornar conhecidas as suas mensagens (Bahia, 1995).

A StudioBox tem os seguintes meios para distribuir a sua mensagem:

1.5.2.1 – Contacto Pessoal

Visto que a opinião do cliente é valorizada, a StudioBox tenta manter o contacto

pessoal com os seus clientes o mais frequentemente possível, toma em consideração todos

os pontos e opiniões que os clientes fazem em relação ao trabalho que a empresa está a

desenvolver, tomando assim em consideração a ideia do cliente e analisar se essa é uma

mais-valia para o projeto ou não. Desta forma o cliente tem uma participação regular no

10

desenvolvimento do projeto e também deposita um voto de confiança na empresa para a

realização do mesmo.

1.5.2.2- Correiro Electrónico

O contacto efetuado através do serviço de correio eletrónico é o principal meio de

comunicação entre a entidade empresarial e os seus clientes, este é utilizado com o

principal objetivo de transferir documentos de pequena dimensão, normalmente

documentos em word e imagens dos trabalhos que estão a ser realizados, quando é

necessário enviar o trabalho final ao cliente a empresa recorre ao serviço WeTransfer para

enviar ficheiros de grande dimensão.

1.5.2.3 – Redes Sociais

Com a evolução das novas tecnologias, as comunicações a nível global tornaram-

se não só possíveis como também de fácil acesso a qualquer pessoa, este tipo de

comunicações quebra barreiras do espaço e do tempo da comunicação, desta forma não

existem fronteiras e a comunicação pode chegar a qualquer lugar do mundo.

Para ter uma boa comunicação com clientes a longa distâncias (normalmente fora

de Portugal) a StudioBox fornece aos seus clientes as versões dos trabalhos que realizou

até esse ponto, utilizando principalmente o facebook (Figura 2), mas também recorrendo

a outras redes socias, por exemplo, utilizando o youtube, quando o trabalho pedido pelo

cliente envolva edição de vídeo, obtendo facilmente o feedback do cliente.

11

Figura 2 – Página de Facebook da StudioBox

Fonte: www.facebook.com/design.by.studiobox - acedido a 15/10/2015

1.5.2.4 – Website

O website da StudioBox (Figura 3) existe para dar a conhecer aos seus clientes

quais os serviços que a entidade empresarial presta, também serve como uma forma de

repositório de todos os trabalhos efetuados pela mesma, ou seja, um portfólio organizado

de forma a dar a conhecer aos clientes os trabalhos que já foram efetuados ao longo dos

http://www.facebook.com/design.by.studiobox

12

anos, também possui um formulário para contactar a empresa, como também um

formulário para pedir um orçamento à empresa, este website pode ser acedido em

www.studiobox.pt, este possui um layout simples e de fácil utilização, para que seja

possível a todos os seus públicos o consultarem sem qualquer tipo de dificuldade.

Figura 3 – Website da StudioBox

Fonte: www.studiobox.pt – acedido a 15/10/2015

1.6 – Identidade Visual da StudioBox

Segundo Lindon et al. (2011), a marca designa-se sob um conjunto de signos,

formas, cores e em alguns casos em sons. De forma a captar a atenção dos consumidores

na marca, para facilitar o processo da sua identificação e atribuição. A marca de uma

entidade corporativa é composta por um conjunto de elementos que têm o objetivo de

representar um nome, um produto, um serviço, uma empresa, uma instituição ou até

mesmo uma ideia. A marca gráfica normalmente é constituída pelo logótipo e um símbolo

e em alguns casos pode ser complementada com um slogan ou uma assinatura. A marca

gráfica da StudioBox (Figura 4), é apenas constituída pelo logótipo e pelo símbolo.



13

Figura 4 – Marca da StudioBox

Fonte: Arquivo da StudioBox

1.6.1 - Nome

O nome StudioBox, designado da língua inglesa, representa uma entidade

empresarial de origem Portuguesa onde todos os seus colaboradores comunicam entre si

em língua Portuguesa, o nome designa-se da língua inglesa pelo facto de esta língua ser

uma das principais línguas universais, o que fará com que o nome desta entidade

empresarial seja interpretado por maior parte do público externo.

1.6.2 – Símbolo

O símbolo da StudioBox (figura 5), representa os dois valores principais da

empresa: excelência e criatividade, complementando assim a logomarca graficamente.

Figura 5 – Símbolo

Fonte: StudioBox

14

1.6.3 – Logótipo

Dentro dos componentes existentes na marca de uma entidade empresarial, o

logótipo (Figura 6) representa graficamente o nome da entidade empresarial, em certos

casos é a única identificação da empresa, como por exemplo a marca do Google, Sony,

Panasonic, que não possuem outros componentes para além do logótipo. O logótipo é

responsável por dar o reconhecimento à organização, identificando assim as suas

respetivas características de atividade, produto ou serviço dentro do mercado ou para o

público externo.

Figura 6 – Logótipo

Fonte: StudioBox

1.7 – Análise SWOT

SWOT é um acrónimo de quatros focos de análise de uma entidade empresarial,

strenghts (forças), weaknesses (fraquezas), opportunities (oportunidades) e por fim

threats (ameaças). Uma força é um fator positivo, é uma característica que permite a uma

entidade empresarial aumentar a sua competitividade no mercado, uma fraqueza é algo

que se encontra em falta nessa entidade empresarial, é algo negativo, o que cria uma

desvantagem na empresa em relação à sua concorrência. Quando os pontos fortes de uma

entidade empresarial superam os fracos a empresa torna-se competitiva no mercado.

Este é um modelo de análise que possibilita a perceção das características internas

das organizações como também o ambiente externo. Depois da análise destes quatro focos

mencionados acima, as determinadas empresas podem tomar decisões de forma a

diminuir danos devidos a estratégias mal feitas.

15

Para Daychouw (2007) a análise SWOT é um instrumento fundamental para

qualquer tipo de entidade, seja esta com ou sem fins lucrativos. Este modelo permite fazer

uma análise precisa da situação em que a entidade se encontra, isto permite definir

decisões estratégicas que possam ser tomadas no presente e futuro da entidade. Este

modelo tem a sua importância no apoio à formulação de estratégias e tem a capacidade

de promover um conforto entre as variáveis internas e externas existentes, facilitando

assim escolhas e estratégias alternativas.

A análise SWOT da StudioBox (Figura 7), foi baseada em informações que foram

obtidas através de conversas informais entre o responsável da empresa e o estagiário, mas

também pelas experiências obtidas dentro da empresa.

Figura 7 – Análise SWOT

Fonte: Estagiário

16

No ambiente interno, os pontos fortes da empresa reconhecem-se pelo vasto

conhecimento profissional dos trabalhadores que constituem a entidade empresarial, desta

forma pode garantir uma maior gama de serviços que a empresa pode prestar, não

esquecendo que todos os projetos são realizados com o mesmo grau de exigência e de

profissionalismo. Outro ponto forte da empresa é a fidelização dos clientes, muitos dos

clientes que a empresa possui estão com ela desde que esta abriu os seus serviços ao

público, o facto de a empresa estar situada no centro de Viseu é bastante vantajoso, isto

faz com que a empresa seja facilmente visível como também reduz a deslocação do

colaborador com o cliente.

Em relação aos pontos fracos destaca-se o facto de a empresa não possuir

máquinas de impressão nem servidores para alojar os websites feitos pela mesma. Estes

são os maiores problemas da empresa, pois maior parte dos seus serviços contratados à

StudioBox são para impressão, cartões-de-visita, cartazes, flyers, etc.

Surgem as oportunidades para a empresa e tentar ganhar mais terreno no mercado.

A StudioBox está a desenvolver uma loja e-commerce para vender diversos produtos

relacionados com a figura histórica Viriato (Viriatvs), t-shirts, camisolas, canecas, etc.

Em contra partida existem diferentes ameaças à sustentabilidade da empresa

devido à presente crise económica. Para além desta crise económica existem várias

empresas que prestam os mesmos serviços que a StudioBox, com preços mais acessíveis

para os clientes.

17

Capítulo II – Trabalhos Desenvolvidos

Objetivos do estágio

Plano de Estágio

Cronograma

Software Utilizado

Enquadramento Teórico

Projetos Realizados

18

Neste segundo capítulo do relatório de estágio são apresentados os objetivos de

estágio, o plano de estágio, os cronogramas das tarefas realizadas no decorrer dos três

meses de estágio curricular, e por fim, é apresentada a descrição da metodologia e tarefas

realizados pelo estagiário na StudioBox.

2.1 – Objetivos do estágio

No início do estágio curricular tive como principal objetivo aperfeiçoar e

aprofundar todos os conhecimentos adquiridos ao longo dos três anos da licenciatura de

Comunicação Multimédia. Outro dos objetivos que tive foi o de realizar, com sucesso,

todas as tarefas propostas, principalmente aquelas que estavam referidas no plano de

estágio, como também contribuir para os projetos da empresa e ver o meu trabalho ser

valorizado, queria principalmente conseguir trabalhar numa das áreas que mais gosto que

é web design, com esperança de adquirir mais conhecimentos para ter uma maior

experiência profissional.

2.2 – Plano de estágio

Após ter sido aceite na empresa StudioBox e antes do estágio curricular começar,

foi efetuado um plano de estágio curricular com o principal objetivo de definir e planear

todas as possíveis tarefas que deveriam ser realizadas durante o decorrer do mesmo

(Anexo I). Foram planeadas as seguintes tarefas:

Design e criação gráfica de logotipos e estacionários;

Webdesign;

Layouts (Mockups) para aplicativos móveis;

Pesquisa de dados na internet;

Promoção de redes sociais;

Registo Fotográfico;

Tratamento de imagens;

Elaboração de estratégia de marcas para produtos (Ex: Viriatvs)

19

O plano de estágio estipulado pelo supervisor de estágio na organização foi cumprido

com sucesso, incluindo todos os trabalhos realizados nos prazos estipulados, fazendo com

que a equipa da empresa considerasse que o estagiário dominava todas as ferramentas

utilizadas.

2.3 – Cronograma

Para Heldman (2005) o cronograma detalha todas as atividades de um projeto num

formato que lista o trabalho pretendido do início ao fim. Nas tabelas seguintes descrevem

de uma forma resumida as atividades realizadas pelo estagiário na empresa, durante os

meses de 1 Setembro e 1 Dezembro (Tabela 1, Tabela 2, Tabela 3).

O cronograma está subdividido em várias atividades que são as seguintes:

Pesquisa e edição de vídeo – Todas as tarefas em que o estagiário necessitou de

utilizar ferramentas para edição de vídeo, como também efetuou pesquisas de

elementos audiovisuais para inserir nesses projetos.

Web design – Atividades que estavam relacionadas com a criação e modificação

da estrutura e do design de páginas web, estas tarefas normalmente envolvem

pesquisa de informação, registo fotográfico e pesquisa e tratamento de imagens.

Design Gráfico – São atividades em que o estagiário recorre normalmente a

programas como o Adobe Illustrator ou CorelDraw para a criação de desenhos

vetoriais, como por exemplo: Logotipos, cartões-de-visita, criação de wireframes

e papel timbrado.

Registo Fotográfico – Todas as atividades em que o estagiário necessitou

catalogar todos os produtos que seriam inseridos nos websites de e-commerce,

para desempenhar esta tarefa com sucesso, foi necessário que o estagiário

fotografa-se todos os produtos, preocupando-se com a iluminação e ângulo em

que essas fotografias eram tiradas e também que regista-se o nome do modelo do

produto com também as suas correspondentes referências.

Pesquisa e tratamento de imagens – Tarefas em que foi solicitado ao estagiário

a pesquisa e também o tratamento de imagens para serem aplicadas em websites

e em redes sociais.

20

Outros – Todas as tarefas elaboradas pelo estagiário com o fim de auxiliar os

colaboradores da empresa, como por exemplo: Entrega dos produtos utilizados

para os registos fotográficos aos respetivos clientes, entrega de projetos finais aos

clientes, introdução de conteúdos em websites, gestão de redes sociais dos

respetivos clientes da empresa.

Atividades Semanais de Setembro 1 a 4 7 a 11 14 a 18 21 a 25 28 a 30

Pesquisa e edição de vídeo

Web design

Design Gráfico

Registo Fotográfico

Pesquisa e tratamento de imagens

Outros

Tabela 1 - Cronograma de atividades do mês de Setembro

Atividades Semanais de Outubro 1 a 2 5 a 9 12 a 16 19 a 23 26 a 30


Web design

Design Gráfico



Outros

Tabela 2 - Cronograma de atividades do mês de Outubro

Atividades Semanais de Novembro 2 a 6 9 a 13 16 a 20 23 a 27 30


Web design

21

Design Gráfico



Outros

Tabela 3 - Cronograma de atividades do mês de Novembro

2.4 – Software utilizado

Para elaborar as tarefas propostas durante o estágio curricular, pela entidade

empresarial, o estagiário teve de utilizar diversos programas informáticos para a

realização desses projetos. A maior parte desses programas foram lecionados durante os

três anos de licenciatura de Comunicação Multimédia. Os programas em que o estagiário

não tinha qualquer tipo de formação para a sua utilização teve uma leve explicação de

como funcionam por parte dos colaboradores da entidade empresarial e também

realizando diversas pesquisas sobre o seu funcionamento, adquirindo assim novos

conhecimentos. O estagiário utilizou os seguintes programas informáticos:

Adobe Photoshop – Este é um programa informático utilizado para a edição de

imagens bitmap, ou seja, editar e manusear todo o tipo de fotografias. Desde o seu

tamanho, texturas, cor, filtros, etc.

Adobe Illustrator – Este é um software utilizado para desenho vetorial, este

programa informático permite que o utilizador crie e edite vários produtos, como

por exemplo: papel timbrado, cartões-de-visita, logomarcas, cartões-de-visita,

cartazes, etc.

Adobe Acrobar XI Pro – Este programa informático permite a criação e edição

de documentos com o formato PDF, este programa permite que o utilizador crie

documentos interativos, como por exemplo: Criação de formulários, caixas de

textos e imagens com as formatações que o designer deseja, não danificando

assim a estrutura do documento.

Adobe Première – Este software é utilizado para a criação e edição de vídeo, este

oferece muitas opções como efeitos de transição e filtros de imagem.

22

Filezilla – Software FTP open-source, este programa informático é utilizado para

fazer upload de diferentes tipos de ficheiros para servidores remotos.

WampServer – Este programa informático é usado para instalar rapidamente no

computador os softwares PHP, MySQL e Apache, ou seja, simula um servidor

local no computador do utilizador.

Sublime Text 2 – Este programa informático é um editor de texto, direcionado

para linguagens de programação, tais como: HTML, PHP, JavaScript, CSS, etc.

Poedit – É um programa informático que permite a edição de ficheiros em formato

po e pot, essencialmente permite a tradução de website sem modificar o código

original.

Camtasia Studio 8 – É um programa informático que permite a gravação do

ambiente de trabalho do utilizador, este tem também funcionalidades muito

limitadas de edição de vídeo.

2.5 – Enquadramento teórico

2.5.1 – Webdesign

Para a criação deste website realizado durante o estágio curricular, teve-se por

base a estratégia e fundamentos de Santos (2009):

A primeira etapa trata da conceção, esta tem como objetivo identificar as

informações e o conteúdo que o website deverá conter; as funcionalidades a

implementar; a informação que este irá processar com também as restrições

exigentes.

A segunda etapa trata da implementação, em que o objetivo é identificar o

processo de criação do website, aqui irão se definidas e produzidas as estruturas

de dados, testes e alojamento e compra do domínio, nesta etapa o website está

finalizado e funcional.

A terceira e última etapa trata da manutenção, esta envolve todas as modificações

que tenham sido realizadas após a aceitação do website por parte do cliente, estas

23

modificações podem tratar de adicionar novas funcionalidades, correção de erros,

ou introdução de novos conteúdos.

No entanto as etapas mencionadas anteriormente, podem dividir-se em sete tarefas:

Planeamento – Nesta tarefa o web designer aglomera ideias e tem que reconhecer

as necessidades gerais do website, geralmente, isso inclui as respostas às

perguntas: “Qual o propósito da empresa?”, “Qual a intenção com a existência do

website?”, “Quais os objetivos principais”, “Qual é o público-alvo?”, “Quais as

principais características do público-alvo?” e “Que informações disponibilizar?”;

Análise – Esta tarefa trata-se do reconhecimento detalhado de todas as funções

existentes no website, englobando assim a pesquisa, bem como a classificação de

matérias, para determinar que informação será colocada e onde;

Desenho – esta tarefa destina-se ao desenho da navegação do website, através de

wireframes, um esquema do protótipo para dar uma ideia do website final ao

cliente;

Desenvolvimento – Nesta tarefa o web designer trata da programação, execução

e produção dos diferentes tipos de conteúdos para o website;

Teste – Esta tarefa destina-se á verificação de todas as funcionalidades do website

com o objetivo de alcançar aceitação do utilizador;

Domínio/Alojamento – Trata-se de disponibilizar o website na world wide web,

de forma a ser publicado para o utilizador final;

Manutenção – Todas as alterações que tenham que ser efetuadas após a

publicação do website.

2.5.2 – Design de Interface para dispositivos móveis

À medida que o tempo passa, existem cada vez mais utilizadores nos meios de

comunicação tecnológicos, estes meios necessitam de uma simplicidade de

procedimentos e facilidade de acesso para com o utilizador, existindo assim necessidade

de existir design interface, esta área é extremamente importante na comunicação entre o

utilizador e a máquina.

24

Apesar de o design de interface ser um processo que envolve a integração de

métodos que permitam a satisfação do utilizador final, a realidade é que nem sempre se

criam interfaces amigáveis aos utilizadores, o objetivo de um interface é ser centrado no

utilizador, ou seja, simples, user-friendly e operacional.

Existem várias metodologias que asseguram um bom design de interface:

Análise de tarefas – Esta etapa é um processo de aprendizagem sobre os

utilizadores, é aconselhável realizar uma análise de tarefas o mais cedo possível

num projeto, especialmente antes do design de interface, tem como objetivos

observar esses utilizadores em tempo real (na utilização da aplicação), perceber

em detalhe como eles realizam as suas tarefas e cumprem os seus objetivos,

determinar a diversidade dos utilizadores (pessoal, social e cultural), para ajudar

a finalização da tarefa, de que forma os utilizadores são influenciados pelo

ambiente físico e que tipo de conhecimento e experiência estes já tinham

adquirido no passado.

Teste de usabilidade – Esta etapa refere-se a efetuar uma avaliação da aplicação

e testá-la através de utilizadores, durante o teste os participantes completam

determinadas tarefas comuns enquanto os responsáveis pelo teste observam o seu

desempenho, o objetivo trata-se de identificar qualquer problema com a

usabilidade da aplicação, adquirindo assim dados qualitativos e quantitativos de

forma a determinar a satisfação do participante com a aplicação. Um teste de

usabilidade oferece muitos benefícios para os responsáveis pelo desenvolvimento

da aplicação, tais como: aprender se os participantes são capazes de completar

tarefas específicas, identificar o tempo que estes demoram a efetuar as tarefas,

identificar o nível de satisfação dos participantes para com a aplicação e por fim,

identificar mudanças necessárias para melhorar o desempenho de acordo com os

objetivos de usabilidade.

Avaliação heurística – Nesta etapa os responsáveis pelo desenho e

desenvolvimento da aplicação comparam os resultados de acordo com os

princípios de usabilidade aceites na generalidade, esta etapa normalmente resulta

em uma lista de potenciais problemas na usabilidade de uma aplicação, a

avaliação heurística apresenta diversas vantagens, tais como: os responsáveis

25

pelo desenvolvimento da aplicação recebem um feedback cedo, durante o

processo de design, pode ajudar a sugerir abordagens mais corretas para corrigir

o design da aplicação e ajuda a prever possíveis problemas que possam ser

encontrados no futuro. No entanto realizar esta avaliação também pode apresentar

algumas desvantagens, tais como: especialista na área de usabilidade podem ser

difíceis de encontrar, é aconselhável usar vários especialistas e analisar os

diferentes resultados e por fim a avaliação heurística é realizada para encontrar

pequenos erros na aplicação.

De acordo com o Nielsen Norman Group1 existem dez princípios gerais para design

de interfaces:

Visibilidade do estatuto do sistema – O sistema deve manter os utilizadores

sempre informados sobre tudo o que está a acontecer.

Manter o sistema próximo do mundo real – O sistema deve falar a mesma

língua do utilizador, com palavras e conceitos familiares ao utilizador, para que a

informação seja disponibilizada numa ordem natural e lógica.

Liberdade e controlo do utilizador – Regularmente os utilizadores escolhem

funções do sistema por engano, quando isto acontece os utilizadores têm que ter

a opção de sair rápido sem qualquer tipo de diálogo.

Consistência e padrões – Os utilizadores não devem ponderar se palavras

diferentes, situações ou ações significam a mesma coisa.

Prevenção de erros – Ter um design cuidadoso que evite futuros problemas ou

até mesmo mensagens de erros.

Reconhecimento em vez de lembrança – Minimizar a necessidade de memória

do utilizador, deixando os objetos, ações e opções visíveis para fácil navegação.

Estética minimalista do design – Diálogos não devem conter informação que é

irrelevante ou raramente necessitada.

1 Adaptado e traduzido pelo estagiário. Fonte: https://www.nngroup.com/articles/ten-

usability-heuristics/ - acedido a 06/01/2016

https://www.nngroup.com/articles/ten-usability-heuristics/

https://www.nngroup.com/articles/ten-usability-heuristics/

26

Ajudar os utilizadores a reconhecerem, diagnosticar e recuperar erros –

Mensagens de erros devem ser exprimidos em línguas reconhecíveis pelos

utilizadores (sem qualquer tipo de código).

Ajuda e documentação – Mesmo sabendo que os melhores sistemas podem ser

usados sem qualquer tipo de documentação, poderá ser necessário algum tipo de

ajuda, portanto será sempre útil deixar alguma documentação caso os utilizadores

precisem de ajuda.

Flexibilidade e eficiência de utilização – Elementos que não são reparados pelos

utilizadores inexperientes, mas normalmente aceleram a interação do utilizador

experiente.

2.6 – Projetos realizados

Durante os três meses de estágio, o aluno realizou tarefas propostas pela

StudioBox, cumprido maioritariamente a função de web designer mas, tendo também

colaborado em projetos de edição de vídeo e também de design gráfico. A entidade

empresarial deu a oportunidade ao estagiário de participar num grande número de projetos

nas diversas áreas de multimédia:

Casas do Prior;

Stramus;

Grão Vás Confraria;

Clube de Futebol Os Viriatos;

Lima Limão Online;

My Rally Car;

NS Eletricidade;

Transportes360;

Nos próximos pontos são descritas as tarefas e o processo criativo de alguns projetos

em que o aluno participou.

27

2.7 – Casas do Prior

Casas do prior é uma instituição de alojamento situada em Trevões, Viseu, foi

pedido à empresa que se realiza-se um website para a instituição em causa.

O cliente solicitou que este website contivesse as mesmas características que um

website de um hotel, ou seja, que existisse uma forma de os clientes puderem efetuar o

check-in/check-out e que o responsável pela instituição recebesse a correspondente

notificação, o website também deveria conter informação sobre a instituição, como

também uma biblioteca multimédia sobre a mesma.

2.7.1 – Conceção (Planeamento, Análise e Desenho)

A criação de todos os websites desenvolvidos durante o estágio curricular

decorreram do seguinte modo:

Planeamento – Antes de passar à construção do website, é necessário efetuar um

planeamento, ou seja, reunir o máximo de conteúdos ou informações que vão influenciar

determinados aspetos e comportamentos do website final, foram respondidas várias

questões, mencionadas no ponto (2.51):

1. Qual o propósito da empresa?

A empresa Casas do Prior tem como objetivo fornecer alojamento rural aos seus

clientes, oferecendo assim a tranquilidade e isolamento e conforto aos seus clientes.

2. Qual a intenção da existência do website?

O website Casas do Prior tem a intenção de transmitir aos seus utilizadores a

localização e os contactos da instituição como também disponibilizar uma biblioteca

multimédia da mesma e ao mesmo tempo facilitar o método de reserva para os seus

clientes.

28

3. Quais os objetivos principais?

O principal objetivo das Casas do Prior é de despertar o interesse dos seus

utilizadores em efetuarem uma reserva na instituição, recorrendo a vários elementos

visuais para despertar esse interesse.

4. Qual o público-alvo?

O público-alvo da instituição Casas do Prior engloba indivíduos na faixa etária

entre os vinte cinco e sessenta anos de idade.

5. Quais as principais características do público-alvo?

As características do público-alvo podem variar de pessoa para pessoa, mas a

instituição aponta para pessoas que têm necessidade de procurar tranquilidade e conforto

para a sua estadia, a instituição também oferece disponibilidade a alojar crianças,

expandindo assim o seu público-alvo não só para casais mas também para famílias.

6. Que informação disponibilizar?

As informações a disponibilizar no website serão apenas as necessárias, tais como:

uma biblioteca de imagens, todos os contactos da instituição, o número de quartos

disponíveis para alugar, como também as características de cada um deles e ser possível

de verificar no website se esse quartos estão disponíveis na data que os utilizadores

desejam efetuar a sua reserva.

Análise – Durante esta fase foi sugerido pelo supervisor na organização, Bruno

Esteves, que realiza-se uma breve pesquisa de websites já existentes nesta área de forma

a ter uma base inicial como exemplo, após essa pesquisa ter sido realizada, as informações

que foram obtidas, foram refletidas e de seguida propostas ao cliente (Casas do Prior)

foram as seguintes:

Foi decidido juntamente com o cliente e com a colaboradora Susana Esteves que

o menu seria constituído com apenas um nível, pelo facto de não haver

necessidade para mais, visto que a homepage disponibiliza muita informação

importante, seguindo esta decisão foi construído então o modelo do menu

29

principal (Figura 8 e Anexo II), disposto do seguinte modo: “home”, “quartos”,

“galeria”, “booking.com”, “sobre nós”, “pontos de interesse” e “contactos”.

Figura 8 - Estrutura Principal de navegação website Casas Do Prior

Fonte: Estagiário

Desenho – O cliente desejava um website com um design “limpo”, de boa

apresentação, objetivo, simples com boa usabilidade e com fácil interação. Posto isto, a

plataforma CMS que foi utilizada foi o wordpress, pois é nesta plataforma que a

StudioBox constrói todos os seus websites, dos clientes.

No cabeçalho da homepage é apresentada a morada por extenso e um plugin pedido

por parte do cliente para traduzir o website para todas as línguas utilizadas na web, como

também uma ligação para o facebook da entidade. A secção número um é constituída por

um slider interativo de imagens, todas estas imagens têm uma dimensão de mil

novecentos e vinte pixéis por setecentos e quarenta pixéis (1920px x 740px), a secção

número dois é constituída por mais um slider, mas este com um propósito diferente do

que o slider que se encontra na secção número um, este tem como objetivo mostrar ao

utilizador os quartos disponíveis que as casas do prior têm para oferecer aos seus clientes,

a secção número três possibilita ao utilizador que este faça uma reserva, indicando assim

em que dia ele deseja fazer o seu check-in/check-out e descrever quantos pessoas irão

com esse utilizador (adultos e crianças), a secção número quatro está constituída por uma

pequena galeria das casas do prior e também testemunhos de clientes que já visitaram esta

instituição, por fim, a secção número cinco é o footer do website, com determinadas

informações consideradas importantes tanto para o cliente como para o estagiário, após

estas informações foi desenhado pelo estagiário um wireframe do website final (Figura 9

e Anexo III).

30

Figura 9 - Wireframe da homepage do website Casas Do Prior

Fonte: Estagiário

Juntamente com o cliente foi decidido que informação foi disponibilizada em cada

página do website, desta forma o estagiário realizou wireframes correspondentes a cada

página de forma a estas apropriarem-se às necessidades do cliente, na página “Quartos”

estão expostos todos os quartos que a entidade tem para oferecer com as correspondentes

informações a cada um deles, na página “Galeria” estão disponíveis dois slideshows, o

primeiro slideshow contém apenas imagens do exterior da entidade, o segundo slideshow

é constituído por imagens do interior da entidade, a página “Booking.com” disponibiliza

um plugin do website Booking (www.booking.com) para que os clientes consigam fazer

a sua reserva através do site Booking, na página “Sobre Nós” foi introduzida informação

em relação à entidade, a página “Pontos de Interesse” é constituída por pontos turísticos

da zona rural de Trevões de forma a complementar a experiência dos clientes da entidade,

por último na página de “Contactos” é apresentado ao utilizador um formulário de envio

de mensagem que irá diretamente para o e-mail da entidade e informações como o

contacto telefónico, o e-mail por extenso (caso o utilizador não queira utilizar o

formulário) e também a morada da entidade.

http://www.booking.com/

31

2.7.2 – Implementação (Desenvolvimento, Testes e Alojamento)

Desenvolvimento – Na realização desta etapa de desenvolvimento do website da

entidade Casas do Prior, recorreu-se à utilização de tecnologias, como HTML, e a folhas

de estilo CSS. Ao utilizar estas tecnologias torna-se possível alterar a estrutura e o aspeto

de todo o website. Para efetuar estas alterações, recorreu-se ao software mencionado no

ponto (2.4), sublime text 2.

Nesta fase de criação do website, foi criado então o menu principal do website,

referido no subponto (2.7.1), foram selecionadas as cores do website, como também a

instalação do template e os plugins/widgets que serão necessários em algumas áreas do

website, tendo como objetivo satisfazer todas as necessidades e assim obter um resultado

com sucesso.

No website em questão foi utilizado o template denominado por: Hotel Master (Figura

10), desenvolvido pela empresa GoodLayers (www.goodlayers.com/).

Figura 10 - Template Hotel Master

Fonte: http://demo.goodlayers.com/?theme=hotelmaster – acedido a 06/01/2016

Para a realização deste website foram utilizados os seguintes plugins:

Booking.com Affiliate Plugin – Este plugin tem como objetivo adicionar a

qualquer website criado em wordpress o módulo do website Booking.com;

http://www.goodlayers.com/

http://demo.goodlayers.com/?theme=hotelmaster

32

Contact Form 7 – Este plugin permite a criação de formulários de forma rápida

e flexível;

Easy Columms – Este plugin permite facilmente a criação de colunas em páginas

ou artigos de wordpress;

Goodlayers Hotel plugin – Este plugin é nativo do template, permite que os

utilizadores façam a reserva dos quartos, pedindo ao utilizador o dia em que ele

fará o check-in e o check-out como também para quantas pessoas o utilizador

pretende efetuar a reserva;

GTranslate – Este plugin permite que os utilizadores mudem o idioma do

website;

Simple Maintenance Mode – É um plugin que permite ao web designer criar

uma página de manutenção, desta forma enquanto ele cria ou modifica o website

os utilizadores não poderão observar o website;

WP Google Map Plugin – Este plugin permite adicionar google maps em páginas

ou artigos do website;

One-Click Child Theme – Este plugin permite facilmente a criação de um child-

theme;

Page Link To – É um plugin que permite reencaminhar os hyperlinks de páginas

ou artigos, para URL’s externos;

Master Slider Pro – Este plugin permite a criação de um slider, para qualquer

página ou artigo no website.

Para a realização deste website foram utilizados os seguintes widgets:

Menu personalizado – Este é um widget nativo do wordpress, permite ao web

designer criar um menu secundário no website.

Goodlayers Recent Room Widget – É um widget nativo do template, que efetua

um loop dos últimos quartos adicionados ao website.

Texto – Este é um widget nativo do wordpress, permite ao web designer adicionar

informação em formato de HTML a uma área específica do website.

33

WP Google Map Widget – É um widget externo, ou seja, não é nativo ao

wordpress nem ao template em questão, permite ao web designer adicionar google

maps a uma área específica do website.

Após a implementação de todos os plugins, widgets e modificações maioritariamente

efetuadas no documento style.css o website foi concluído com sucesso (Figura 11). O

trabalho está publicado na página das Casas do Prior (http://www.casasdoprior.com/).

Figura 11 - Website Final (Casas Do Prior)

Fonte: http://www.casasdoprior.com/ - acedido a 06/01/2016

Teste e alojamento – Após a conclusão da etapa de desenvolvimento do website,

foram realizados diversos testes com a finalidade de verificar se todos os parâmetros

solicitados pelo cliente estavam em conformidade com o planeamento do website, foi

testada também a navegação e a usabilidade do website de forma a verificar se esta, está

fácil e acessível ao utilizador. Após a aprovação dos colaboradores e dos clientes, foi

efetuado o upload, dos ficheiros para os servidores da StudioBox.

2.8 – Stramus

A instituição stramus é responsável pela venda de joalharia, foi pedido á empresa

acolhedora do estagiário, que desenvolve-se uma loja online (e-commerce). O cliente

solicitou que este website permite-se aos seus clientes efetuarem a compra dos seus

produtos online, para isso o website tem que ser constituído por várias características que

http://www.casasdoprior.com/

http://www.casasdoprior.com/

34

permitissem os utilizadores efetuarem esse processo, foi também solicitado pelo cliente

que o website conte-se diversas informações sobre a instituição.

2.8.1 - Conceção (Planeamento, Análise e Desenho)

Planeamento – Tal como no subponto (2.7.1), o planeamento foi efetuado

seguindo a metodologia referida no subponto (2.51):


A instituição Stramus tem como propósito a venda e distribuição de joalharia,

dando a conhecer aos seus clientes as novas coleções das suas marcas como também

oferecendo a possibilidade de estes adquirirem esses produtos, sejam eles destinados para

revenda ou para uso pessoal.


O website da instituição stramus tem a intenção de dar a conhecer aos seus clientes

os novos produtos que entram no mercado como também a possibilidade de os adquirir.


O principal objetivo da instituição stramus é vender e distribuir os seus produtos.


O público-alvo da instituição stramus engloba indivíduos em praticamente todas

as faixas etárias.


A instituição stramus procura um público-alvo abrangente, não limita o seu

público-alvo com a sua faixa etária, oferece produtos para todas as idades.

6. Que informações disponibilizar?

A informação a disponibilizar no website da instituição stramus é a necessária, ou

seja, tem como obrigação disponibilizar aos utilizadores o catálogo de produtos

disponível, como também os seus preços e características adicionais de cada um do

produto, uma breve descrição com a visão, missão e valores da empresam como também

35

a sua história, informações em relação às localizações físicas das lojas também irão ser

disponibilizadas no website, tal como os contactos de cada uma das suas lojas.

Análise – Durante esta etapa, foi solicitado por para do Bruno Esteves, que o

estagiário realizasse uma pesquisa em relação a websites da concorrência já existentes na

web, desta forma existe uma melhor perceção do tipo de conteúdo e da forma como este

irá ser apresentado ao cliente. Após finalizar a pesquisa e as necessidades do cliente terem

sido analisadas, as informações que foram propostas ao cliente (stramus) foram as

seguintes:

A homepage, é constituída por um slider interativo, com imagens selecionadas

pelo cliente, uma secção para disponibilizar produtos em destaque ao utilizador

como também uma secção para disponibilizar as diferentes categorias de produtos

existentes no website ao utilizador, e por fim um rodapé interativo com os diversos

testemunhos dos clientes.

Juntamente com o cliente, e com a colaboradora Susana Esteves foi decidido que

os diferentes produtos iriam estar disponíveis nas suas respetivas categorias, de

forma a melhorar a experiência de navegação dos utilizadores do website, foi

assim realizada uma estrutura de navegação para o website (Fixura 12 e Anexo

IV), disposto do seguinte modo: “home”, “sobre nós”, “contactos” e “loja”, no

segundo nível de navegação do hyperlink “loja”, poderemos encontrar todas as

categorias dos produtos que se poderão adquirir no website, tais como: “anéis”,

“brincos”, “colares”, “relógios”, “alianças”, “pulseiras”, “barras”, “medalhas e

alfinetes” e “gourmet”, inseridos nos submenus: “colares”, “relógios” e

“pulseiras” poderemos encontrar as marcas que o website disponibiliza aos seus

clientes.

36

Figura 12 - Estrutura principal de navegação website Stramus

Fonte: Estagiário

Desenho - O cliente desejava um website com um design “limpo”, de boa

apresentação, clara, objetiva, simples com boa usabilidade e com fácil interação.

Posto isto, a plataforma CMS utilizada foi o wordpress, pois é nesta plataforma que a

StudioBox realiza todos os seus websites.

No cabeçalho da homepage, está disponibilizado um link para o facebook da

entidade em questão, como também os controlos “A minha conta”, “Check-in/Check-out”

e o “carrinho de compras”, estes controladores têm como objetivo indicar ao utilizador

quantos produtos selecionaram na sua visita ao website, na secção número um foi

implementado um slider interativo com dimensões de mil novecentos e vinte pixéis por

seiscentos pixéis (1920 px x 600px), a secção número dois foi construída de forma a

disponibilizar uma pequena quantidade de produtos em destaque (entre quatro a oito

37

produtos), na secção número três foram disponibilizadas as categorias principais de

produtos que a entidade oferece ao seu público, que são as seguintes: anéis, brincos,

colares, relógios, alianças, pulseiras, gourmet, medalhas, alfinetes e barras, na seção

número quatro foi inserido um slider interativo contendo os testemunhos dos diversos

clientes da entidade, no final do website foi inserido um footer onde poderá ser encontrada

a mensagem de copyright como também as ligações para as redes sociais da instituição.

Após estas informações foi desenhado pelo estagiário um wireframe do website final

(Figura 13 e Anexo V).

Figura 13 - Wireframe da homepage do website Stramus

Fonte: Estagiário

2.8.2 – Implementação (Desenvolvimento, testes e alojamento)

Desenvolvimento – Na realização desta etapa de desenvolvimento do website foi

utilizada a mesma metodologia mencionada no subponto (2.7.2).

No website em questão foi utilizado o template denominado por: Natural Shop

(Figura 14), desenvolvido pela empresa quitenicestuff.

38

Figura 14 - Template Natural Shop

Fonte: http://themeforest.net/item/natural-shop-responsive-woocommerce-theme/full_screen_preview/11047108 - acedido a 06/01/2016

Para a realização de este website foram utilizados os seguintes plugins:

Contact Form 7 – Plugin mencionado no subponto (2.7.2.1).

Gold price plugin – Este é um plugin que disponibiliza o preço constante de

determinados metais, tal como: ouro, platina e prata.

Newsletter sign-up – Plugin que permite adicionar diversas formas dos

utilizadores do website subscreverem-se á sua mailinglist.

Simple Maintenance Mode - Plugin mencionado no subponto (2.7.2.1).

WooCommerce – É um plugin que adiciona opções de e-commerce a qualquer

website produzido em wordpress.

Para a produção deste website não ocorreu a necessidade da utilização de widgets.

Após a implementação de todos os plugins e modificações maioritariamente efetuadas

no documento style.css o website foi concluído com sucesso (Figura 15). O trabalho está

publicado na página da entidade stramus (www.stramus.pt).

http://themeforest.net/item/natural-shop-responsive-woocommerce-theme/full_screen_preview/11047108

http://www.stramus.pt/

39

Figura 15 - Website Final (Stramus)

Fonte: http://stramus.pt/ - acedido a 06/01/2016

Teste e alojamento - Na realização desta etapa de desenvolvimento do website foi


2.9 – Grão Vás Confraria

A Confraria Grão Vás é uma entidade sem fins lucrativos que ao longo dos seus

treze anos de atividade tem vindo a desenvolver principalmente iniciativas na vertente

cultural.

O cliente solicitou à entidade acolhedora que produzisse um website com o

objetivo de transmitir notícias da confraria para os seus membros, ou seja, um website

com características de blog, onde os seus utilizadores possam obter informações sobre as

ultimas atividades realizadas pela confraria.

2.9.1 - Conceção (Planeamento, Análise e Desenho)

Planeamento - Tal como no subponto (2.7.1 e 2.8.1), o planeamento foi efetuado

seguindo a metodologia referida no subponto (2.51):

http://stramus.pt/

40


A Confraria Grão Vás é uma instituição sem fins lucrativos com o principal

objetivo de desenvolver iniciativas na vertente cultural.


O website da instituição Confraria Grão Vás tem como intenção partilhar com os

seus utilizadores/membros todas as iniciativas que a instituição realiza, como também

espalhar as mensagens da mesma.


Os objetivos principais do website da instituição é informar os atuais membros da

instituição tal como apresentar esta instituição a novos utilizadores do website.


O público-alvo da instituição Confraria Grão Vás engloba indivíduos que se

encontram na faixa etária dos vinte cinco aos sessenta anos de idade.


As principais características do público-alvo da instituição engloba indivíduos que

residam na cidade de Viseu, maior parte dos seus membros encontram-se com diversas

profissões e têm um rendimento estável, classe social média e partilham o gosto pela

cultura Portuguesa.

6. Que informações disponibilizar?

A informação a disponibilizar no website da instituição Confraria Grão Vás será

variada, para além de ser necessário transmitir todas as atividades realizadas pela

instituição, também será necessário transmitir novas alterações aos regulamentos já

existentes na instituição, tendo em conta que também irá conter informações básicas tal

como a morada, contacto telefónico, correio eletrónico, etc.

Análise – Durante esta etapa, foi solicitado por parte do Bruno Esteves, que o

estagiário realizasse uma pesquisa em relação a websites da concorrência já existentes na

41

web. Após finalizar a pesquisa e as necessidades do cliente terem sido analisadas, as

informações que foram propostas ao cliente (Grão Vás Confraria) foram as seguintes:

A homepage, foi construída com um slider interativo, com imagens de

determinados eventos realizados pela instituição, no corpo do website foram

disponibilizadas os últimos artigos sobre os eventos da confraria por ordem de

criação, ou seja, á medida que estes são produzidos irão automaticamente para a

homepage.

Juntamente com o cliente, e com a colaboradora Susana Esteves foi estudada e

decidida a estrutura do menu principal do website. O menu principal é constituído

por seis hyperlinks diferentes, que são os seguintes: “confraria”, “publicações”,

“Galeria”, “comissão instaladora”, “blog” e “contactos”. O item “confraria”

contém três subitens, estes são os seguintes: “história”, “órgãos sociais” e

“protocolos” e por fim o item “galeria” contém também três subitens, que são os

seguintes: “galeria de imprensa”, “vídeos” e “entronizações”. Após estas

informações foi realizada uma estrutura de navegação para o website (Figura 16 e

Anexo VI).

Figura 16 - Estrutura principal de navegação website Grão Vás Confraria

Fonte: Estagiário

42

Desenho – O cliente desejava um website com um design “simples”, de boa

apresentação, com uma usabilidade e com fácil iteração. Posto isto, a plataforma CMS

utilizada foi o wordpress.

No cabeçalho da homepage, podemos encontrar o logótipo da entidade, juntamente

com o menu principal estruturado na figura 16, podemos encontrar também um slider

interativo com dimensões de mil trezentos e quarenta nove pixéis por quatrocentos e

sessenta pixéis (1349 px x 460px), constituído pelos artigos mais recentes ou

considerados os mais importantes da confraria, esses artigos são constituídos por uma

imagem de destaque com as dimensões de seiscentos pixéis por trezentos pixéis (600px x

300px), para além da imagem de destaque estes artigos também disponibilizam um breve

resumo sobre o seu conteúdo. O website foi construído de forma a ter uma sidebar no

lado direito da página, contendo informações como as categorias disponíveis no website

como também os diferentes parceiros da instituição. Após estas informações foi

desenhado pelo estagiário um wireframe do website final (Figura 17 e Anexo VII).

Figura 17 - Wireframe da homepage do website Grão Vás Confraria

Fonte: Estagiário

43

2.9.2 - Implementação (Desenvolvimento, testes e alojamento)

Desenvolvimento - Na realização desta etapa de desenvolvimento do website foi utilizada

a mesma metodologia mencionada no subponto (2.7.2).

No website em questão foi utilizado o template denominado por: Interface (Figura

18), desenvolvido pela empresa Theme Horse.

Figura 18 - Template Interface

Fonte: http://themehorse.com/preview/interface/ - acedido a 06/01/2016

Para a produção de este website foram utilizados os seguintes plugins:

Contact Form 7 - Plugin mencionado no subponto (2.7.2.1 e 2.8.2.1).

Font Awesome Icons – Este é um plugin que adiciona uma biblioteca de ícones

para serem utilizados em um website wordpress.

Huge IT Image Gallery - Este é um plugin que permite uma criação rápida de

galaria de fotos, disponibiliza também vários layouts para os utilizadores

selecionarem.

Page Link To – Plugin mencionado no subponto (2.7.2.1).

http://themehorse.com/preview/interface/

44

Mashshare Share Buttons – Pluglin que permite adicionar aos artigos botões

para partilhar nas diversas redes sociais.

Optimize Images Resizing – Plugin que permite redimensionar imagens para

melhorar o espaço ocupado no servidor.

Page Builder by SiteOrigin – Este plugin tem como objetivo construir layouts

de páginas e artigos de forma visual, sem recorrer á utilização de qualquer tipo de

código.

Wordpress Ad Widget – Este plugin permite ao utilizador adicionar anúncios de

uma forma fácil no website.

Para a produção do website em questão foram utilizados os seguintes widgets:

Procurar – Este é um widget nativo do wordpress, permite ao web designer

adicionar uma search bar ao website.

Categorias – É um widget nativo do wordpress, que disponibiliza todas as

categorias utilizadas no website.

Layout Builder – Este widget é instalado em conjunto com o plugin, page builder

by site origin, permite que o web designer construa um layout numa área

específica do widget.

Após a implementação de todos os plugins, widgets e modificações maioritariamente

efetuadas no documento style.css o website foi concluído com sucesso (Figura 19). O

trabalho está publicado na página da Confraria Grão Vás (www.confrariagraovasco.com).

Figura 19 – Website Final (Confraria Grão Vás)

http://www.confrariagraovasco.com/

45

Fonte: http://www.confrariagraovasco.com/ - acedido a 06/01/2016

Teste e alojamento - Na realização desta etapa de desenvolvimento do website foi


2.10 – Clube de Futebol Os Viriatos

Foi solicitado à StudioBox que esta realizasse um website para a instituição Clube

de Futebol Os viriatos, este website tem como objetivos transmitir aos seus utilizadores

as últimas novidades desta instituição, como também disponibilizar aos seus utilizadores

uma lista de contactos da instituição.

Para a produção deste website foram seguidas as metodologias referidas nos

pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi

utilizado o template denominado por Braxton. A construção da estrutura principal de

navegação e do wireframe encontram-se no Anexo VIII e Anexo IX. O trabalho está

publicado na página do Clube de Futebol Os Viriatos (www.cfv.pt).

2.11 –Lima Limão Online

Foi solicitado à StudioBox que realizasse um website para a empresa Lima Limão

Online. Este tem como objetivo a venda de produtos relacionados com a época balnear

da Figueira da Foz, e disponibiliza produtos neste tema como também as características

de cada uma deles acompanhado com o respetivo preço, dando assim a oportunidade aos

utilizadores adquirem os produtos que desejarem, também será possível que o utilizador

observe uma biblioteca multimédia com o objetivo de promover a praia de Quiaios, por

fim será também disponibilizado todos os contactos da instituição.



utilizado o template denominado por Natural Shop. A construção da estrutura principal

de navegação e do wireframe encontram-se no Anexo X e Anexo XI. O trabalho está

publicado na página Lima Limão Online (www.limalimaoonline.com).

http://www.confrariagraovasco.com/

http://www.cfv.pt/

http://www.limalimaoonline.com/

46

2.12 – My Rally Car

Foi solicitado pelo cliente à StudioBox que realizasse um website direcionado para

o tema de rally, o website tem como objetivo permitir aos seus utilizadores publicarem

anúncios relacionados com este tema, tomando em consideração que será necessário criar

limitações nesses anúncios, tais como: o tempo que estes ficam disponibilizados no

website e se este será destacado na homepage ou não, será disponibilizado aos utilizadores

escolherem planos de pagamento para esses anúncios.



utilizado o template denominado por Classified Engine. A construção da estrutura

principal de navegação e do wireframe encontram-se no Anexo XII e Anexo XIII. O

trabalho está publicado na página My Rally Car (www.myrallycar.com).

2.13 – NS Eletricidade

Foi solicitado à StudioBox que realizasse um website para a instituição NS

Eletricidade, o website tem como objetivo principal transmitir aos clientes que tipos de

serviços a empresa realiza, disponibiliza uma folha de orçamento, como também uma

lista de contactos para facilitar a comunicação entre os clientes e o diretor da empresa

em questão.



utilizado o template denominado por Interface. A construção da estrutura principal de

navegação e do wireframe encontram-se no Anexo XIV e Anexo XV. O trabalho está

publicado na página NS Eletricidade (www.nselectricidade.com).

2.14 – Transportes360

Foi solicitado pelo cliente à StudioBox que realizasse um website direcionado para

o tema de transportes, o website tem como objetivo permitir aos utilizadores publicarem

http://www.myrallycar.com/

http://www.nselectricidade.com/

47

anúncios relacionados com este tema, todos os anúncios na fase inicial serão gratuitos

com o intuito de atrair novos utilizadores.



utilizado o template denominado por ClassiAds. A construção da estrutura principal de

navegação e do wireframe encontram-se no Anexo XVI e Anexo XVII. O trabalho está

publicado na página Transportes360 (www.transportes360.pt).

2.15 – Fadista Mara Pedro

A fadista Mara Pedro solicitou à StudioBox a criação de um vídeo sobre as suas

atuações artísticas, para hospedar da plataforma youtube. O vídeo tinha quer ter uma

duração máxima de dez minutos e a dimensão do vídeo seria de oitocentos pixéis por

seiscentos pixéis (800px x 600px).

O cliente entregou um conjunto de elementos multimédia, entre eles encontram-

se: vídeos da artista a atuar em várias cidades da Lituânia (Kaunas, Palanga, Siauliu e

Vilnius) com também uma atuação em Penalva e várias faixas de som (.mp3). O cliente

solicitou que o vídeo deveria conter um pouco das filmagens de cada um dos elementos

audiovisuais entregues pelo mesmo e que estes deveriam estar propriamente identificados

com os nomes das cidades em que cada uma das filmagens decorreu. O estagiário foi

encarregue de selecionar os elementos multimédia que foram entregues pelo cliente e daí

procedeu a criação do vídeo, recorrendo ao software mencionado no ponto (2.4), adobe

premiere (Figura 20).

http://www.transportes360.pt/

48

Figura 20 - Edição do vídeo, Fadista Mara Pedro

Fonte: Estagiário

Após a edição ser concluída o vídeo ficou com uma duração total de oito

minutos e quinze segundos, e nos títulos que identificam as cidades foi utilizado o tipo

de letra Regular century Schoolbook.

2.16 – Design de interfaces para dispositivos móveis

A StudioBox solicitou ao estagiário que este realizasse um conjunto de

wireframes para aplicações móveis, com o objetivo de fazer propostas a futuros clientes

da empresa acolhedora, como também mostrar as potencialidades que estas aplicações

podem ter nas empresas desses clientes, estes wireframes foram desenvolvidos com o

propósito de serem inseridos no contexto do desporto, para ser mais exato foram

desenvolvidas para equipas de futebol, estas foram realizadas no software adobe

illustrator mencionado no ponto (2.4). Foram desenhadas várias wireframes para as

diversas equipas, todas elas foram produzidas com o mesmo layout, modificando apenas

o conteúdo delas, foram realizadas wireframes para as seguintes equipas:

Grupo Desportivo De Chaves;

Lusitano Futebol Clube;

Santa Clara Açores Futebol;

49

Sporting Clube Farense;

Sport Clube De Freamunde.

Antes de começar a desenhar as wireframes foi realizada a estrutura do menu para

as aplicações (Figura 21 e Anexo XIX), esta foi estruturada da seguinte forma: “home”,

este ecrã trata-se do ponto de partida do utilizador, aqui ele pode navegar para todas as

páginas disponíveis na aplicação, “clube”, nesta página o utilizador poderá encontrar a

história do clube em questão, “equipa”, esta página disponibiliza informação em relação

a equipa técnica do clube como também o seu plantel, sendo “equipa técnica” e “plantel”

dois submenus do botão “equipa”, “bilhetes”, nesta página será possível que o utilizador

reserve ou compre um bilhete para um evento que ele quererá assistir no futuro,

“noticias”, esta página será responsável por disponibilizar todas as noticias relacionadas

com a equipa para os seus utilizadores, “loja online”, esta página será responsável por

disponibilizar aos utilizadores todos os produtos relacionados com o clube em questão,

para que estes possam reserva-los ou até mesmo compra-los diretamente na aplicação,

“patrocinadores”, esta página será responsável por disponibilizar informações sobre os

patrocinadores do clube, “calendário”, esta página será responsável por disponibilizar

informações tais como, o calendário de futuros jogos que a equipa irá realizar como

também a sua classificação, sendo “jogos” e ”classificação” dois submenus do botão

“calendário”, “Clube TV”, será a página responsável pela publicação de vídeos sobre a

equipa e por fim a página “contactos”, esta página será responsável por disponibilizar

informações como, o contacto telefónico, morada, redes sociais e o website do clube.

Figura 21 - Estrutura principal de navegação das aplicações móveis

Fonte: Estagiário

50

Após a realização da estrutura do menu (Figura 21 e Anexo XIX), foi efetuado o desenho

para as aplicações em questão (Figura 22 e Anexo XX), a estrutura de menu principal que

foi selecionada foi a Springboard2, pois esta permite uma navegação limpa e fácil, porque

apenas existem nove botões principais para o menu.

Figura 22 - Wireframe da aplicação móvel do Grupo Desportivo De Chaves

Fonte: Estagiário

2 Springboard – Layout para aplicações que apresenta os ícones de navegação em

grelha.

51

Reflexão Final

O estágio curricular é uma etapa muito importante no percurso académico da

licenciatura de Comunicação Multimédia, integrada na Escola Superior de Educação,

Comunicação e Desporto, do instituto Politécnico da Guarda. Esta etapa é a primeira

oportunidade para aplicar em prática todos os conhecimentos adquiridos ao longo dos três

anos da licenciatura e a possibilidade de aperfeiçoar as competências já adquiridas como

também de adquirir novos conhecimentos.

Selecionei a StudioBox para realizar o meu estágio por várias razões: É uma

empresa instalada neste mercado já há onze anos, isto faz com que ela tenha um grande

número de clientes, aumentando assim o número de trabalhos em que poderia participar,

é uma empresa com várias subsidiárias espalhadas à volta do mundo, dando-me assim

uma ideia aprofundada de como elas trabalham em longas distâncias, antes de mandar a

proposta de estágio realizei uma pesquisa do portfólio da empresa, para ter uma noção

em que tipos de áreas esta empresa trabalha, chegando assim à conclusão que um dos

pontos mais fortes da empresa é a produção de websites, o que fez com que eu me torna-

se bastante interessado em estagiar nesta entidade empresarial, pois deu-me a

oportunidade de trabalhar e aprofundar os meus conhecimentos numa das minhas áreas

preferidas de multimédia.

A formação em Comunicação Multimédia fez com que eu aprofundasse os meus

conhecimentos em Multimédia, como também adquiresse novos conhecimentos na

vertente da comunicação.

Agradeço ao Instituto Politécnico da Guarda e a todos os seus docentes da

licenciatura de Comunicação Multimédia, por todos os conhecimentos que foram capazes

de transmitir e também pela disponibilidade e iniciativa de me ajudarem.

Ao longo dos três meses do estágio curricular, trabalhei maioritariamente como

web designer, no entanto também realizei projetos na área de design gráfico e edição de

vídeo. No início do estágio comecei com trabalhos de design gráfico, produzindo apenas

layouts para dispositivos móveis, no entanto após realizar esses projetos, O diretor Bruno

Esteves começou a entregar-me projetos de web design para realizar, fiquei entusiasmado

52

por estar a trabalhar nesta área que se refletiu no meu desempenho, após ter realizado o

primeiro projeto de web design as propostas por parte do diretor para realizar websites

foram efetuadas até ao fim do estágio, fazendo outros projetos pelo decorrer do estágio,

tais como: edição de vídeo, registo fotográfico, etc.

O plano de estágio proposto pelo diretor da entidade empresarial acolhedora foi

realizado com sucesso. Os projetos realizados pelo estagiário foram entregues nas datas

propostas, para além do plano de estágio realizado inicialmente o estagiário participou

em vários projetos que foram surgindo ao longo do período do estágio. Todos os projetos

efetuados ao longo do estágio foram realizados autonomamente, recorrendo várias vezes

a diversas pesquisas como suporte educacional para os realizar.

Esta etapa foi sem dúvida essencial para pôr em prática todos os conhecimentos

transmitidos pelos docentes do instituto Politécnico da Guarda que serão essenciais para

o meu futuro profissional.

53

Bibliografia

Bahia, Juarez (1995). Introdução à Comunicação Empresarial. Rio de Janeiro: MAUAD

Daychouw, Merhi (2007). 40 Ferramentas e Técnicas de Gerenciamento. Rio de Janeiro:

Brasport.

Heldman, Kim (2005). Gerência de Projetos - Fundamentos. São Paulo: Campus-RJ

Lindon, D., Lendrevie, J., Lévy, J., Dionísio, P. e Rodrigues, J.V. (2011). Mercator XXI:

Teoria e Prática do Marketing (14ª ed.). Alfragide: Publicações Dom Quixote.

Magdalena, V. (2012). Avaliar o atendimento ao cliente do instituto beleza natural através

da pesquisa de satisfação. Monografia para obtenção do grau de especialista em Gestão

Empresarial. Universidade Cândido Mendes, Rio de Janeiro, Brasil.

Ribeiro, Renato Vieira (2008). Estratégia Empresarial E de Recursos Humanos. Curitiba:

IESDE Brasil S.A.

Santos, E. (2009). Web Design: uma reflexão conceptual. Revista de Ciências da

Computação, nº4.

Scott, C. D., Jaffe, D. T., Tobe, G. R. (1998). Visão, Valores e Missão organizacional:

construindo a organização do futuro. Rio de Janeiro: Qualitymark.

Valadares, M.C.B. Planeamento Estratégico Empresarial. QualityMark, Rio de Janeiro,

2002.

Wagner, Luiz Marques (2011). Recursos Humanos: Conhecendo a admissão do seu

colaborador. Paraná: Wazgner Luiz Marques.

54

Anexos

55

Listagem de anexos

Anexo I – Plano de Estágio

Anexo II - Estrutura principal de navegação (Casas Do Prior)

Anexo III - Wireframe (Casas Do Prior)

Anexo IV - Estrutura principal de navegação (Stramus)

Anexo V - Wireframe (Stramus)

Anexo VI - Estrutura principal de navegação (Grão Vás Confraria)

Anexo VII - Wireframe (Grão Vás Confraria)

Anexo VIII - Estrutura principal de navegação (Clube de Futebol Os Viriatos)

Anexo IX - Wireframe (Clube de Futebol Os Viriatos)

Anexo X - Estrutura principal de navegação (Lima Limão Online)

Anexo XI - Wireframe (Lima Limão Online)

Anexo XII - Estrutura principal de navegação (My Rally Car)

Anexo XIII - Wireframe (My Rally Car)

Anexo XIV - Estrutura principal de navegação (NS eletricidade)

Anexo XV - Wireframe (NS eletricidade)

Anexo XVI - Estrutura principal de navegação (Transportes 360)

Anexo XVII – Wireframe (Transportes 360)

Anexo XVIII – Vídeo Fadista Mara Pedro

Anexo XIX - Estrutura principal de navegação (Grupo Desportivo De Chaves)

Anexo XX - Wireframe (Grupo Desportivo De Chaves)

56

Anexo I

Plano de Estágio

58

Anexo II

Estrutura principal de navegação (Casas Do Prior)

60

Anexo III

Wireframe (Casas Do Prior)

61

Wireframe – “Homepage”

62

Wireframe – Página “Quartos”

63

Wireframe – Página “Galeria”

64

Wireframe – Página “Pontos de Interesse”

65

Wireframe – Página “Contactos”

66

Anexo IV

Estrutura principal de navegação (Stramus)

68

Anexo V

Wireframe (Stramus)

69


70

Wireframe – Página “Artigo”

71

Anexo VI

Estrutura principal de navegação (Grão Vás Confraria)

73

Anexo VII

Wireframe (Grão Vás Confraria)

74


75


76


77

Anexo VIII

Estrutura principal de navegação (Clube de Futebol Os Viriatos)

79

Anexo IX

Estrutura principal de navegação (Clube de Futebol Os Viriatos)

80


81


82

Anexo X

Estrutura principal de navegação (Lima Limão Online)

84

Anexo XI

Wireframe (Lima Limão Online)

85


86

Wireframe – Página “Estadia”

87

Anexo XII

Estrutura principal de navegação (My Rally Car)

89

Anexo XIII

Wireframe (My Rally Car)

90


91


92

Anexo XIV

Estrutura principal de navegação (NS Eletricidade)

94

Anexo XV

Wireframe (NS Eletrecidade)

95


96


97

Anexo XVI

Estrutura principal de navegação (Transportes 360)

99

Anexo XVII

Wireframe (Transportes 360)

100


101

Wireframe – Página “Criar Anúncio”

102

Wireframe – Página “Perfil”

103

Anexo XVIII

Vídeo Fadista Mara Pedro

105

Anexo XIX

Estrutura principal de navegação (Clube Desportivo de Chaves)

107

Anexo XX

Wireframe (Grupo Desportivo De Chaves)

108

Wireframe – Página Inicial

109

Wireframe – Página de informação do clube

110

Wireframe – Página de informações da equipa

111

Wireframe – Página de bilhetes

112

Wireframe – Página de notícias

113

Wireframe – Página da loja

114

Wireframe – Página dos patrocinadores

115

Wireframe – Página do calendário

116

Wireframe – Página Clube TV

117

Wireframe – Página dos contactos

irei folitécuicobdigital.ipg.pt/dspace/bitstream/10314/2570/1/rúdi... · studiobox, que se...

Documents