relatÓrio crÍtico prova de aptidão profissionaldrvg.aesmprojetos.net/relatorio/relatorio.pdf ·...

Escola Básica e Secundária de Salvaterra de Magos

RELATÓRIO CRÍTICO

Prova de Aptidão Profissional

David Lopes Dias Folgado nº5 12º I

Gonçalo André dos Santos Martins nº9 12º I

Ricardo Simão Suissas Júlio nº21 12º I

Vitor Hugo da Silva Mendes nº23 12º I

Curso Profissional Técnico de Multimédia

Projeto e Produção de Multimédia (PPM)

Salvaterra de Magos

3 julho de 2017


DRVG

David Lopes Dias Folgado

Gonçalo André dos Santos Martins

Ricardo Simão Suissas Júlio

Vitor Hugo da Silva Mendes

Sumário

Relatório das actividades do projeto

DRVG, desenvolvido com o requisito

parcial dos módulos curriculares,

supervisionado pela Prof. Alice Pereira,

Teresa Fazenda e o Prof. António

Andrade, no curso Profissional Técnico

de Multimédia.

Professores

Alice Pereira

António Andrade

Teresa Fazenda

Salvaterra de Magos


2016/2017

Dedicatória

Com o final desta etapa tão importante da nossa vida, gostaríamos de agradecer

a algumas pessoas. Em primeiro lugar, os nossos professores em particular ao professor

António Andrade, professora Ana Paquete, professora Teresa Fazenda e à professora

Alice Pereira.

Agradecemos também aos nossos amigos por nos ajudarem nos piores

momentos e estarem sempre lá para nos criticar e congratular enquanto realizávamos o

nosso trabalho, em particular ao João Tavares, Ana Silva, Diana Casaca, Gonçalo Lucas

por ajudar na elaboração do nosso Web Site.

Sem esquecer dos nossos familiares que nos ajudaram nesta etapa que durou três

anos e que também estiveram sempre presentes para nos ajudar nos bons e maus

momentos.

Também as empresas onde estagiámos, nomeadamente a Rádio Marinhais,

Ogilvy e a Benfica TV, por nos terem proporcionado o primeiro contacto com o mundo

do trabalho e nos terem ajudado no nosso crescimento profissional.

Sem todas estas pessoas não conseguiríamos concluir este percurso tão

complicado, mas com estas pessoas tudo se tornou mais fácil.


Índice

Dedicatória: ....................................................................................................................................... 3

Índice ................................................................................................................................................. 4

Introdução: ......................................................................................................................................... 5

Ideia Principal: ................................................................................................................................... 5

Ideias mais importantes: ..................................................................................................................... 5

Expectativas a alcançar: ...................................................................................................................... 5

Como dividimos as tarefas? ................................................................................................................ 5

Estrutura do relatório: ......................................................................................................................... 6

Estado da Arte: ................................................................................................................................... 6

Anteprojeto: ....................................................................................................................................... 6

Apresentação do Projeto: .................................................................................................................... 6

Gantt Project: ..................................................................................................................................... 6

Desenvolvimento ............................................................................................................................... 7

Layouts: ............................................................................................................................................. 7

Conteúdo presente em todas as páginas ............................................................................................... 8

1ª Página: ........................................................................................................................................... 9

2ª Pagina: ......................................................................................................................................... 10

3ª Página: ......................................................................................................................................... 11

4ª Página: ......................................................................................................................................... 12

5ª Página: ......................................................................................................................................... 13

6 - Login .......................................................................................................................................... 13

Editar Perfil...................................................................................................................................... 14

Newsletter ........................................................................................................................................ 15

Mapa do site ..................................................................................................................................... 15

Paypal ................................................................................................. Erro! Marcador não definido.

Informação final ............................................................................................................................... 16

Escolha do Nome: ............................................................................................................................ 16

Ténis 3D: ......................................................................................................................................... 16

Produtos: .......................................................................................................................................... 17

Vídeo Promocional:.......................................................................................................................... 18

Intro: ................................................................................................................................................ 19

Logótipo .......................................................................................................................................... 20

Construção: ...................................................................................................................................... 20

Conclusão ........................................................................................................................................ 22

Referências da internet ..................................................................................................................... 23


Introdução

Ideia Principal De início explorámos o mundo do desporto e, como resultado dessa exploração,

o nosso grupo teve a ideia de criar uma marca de roupa desportiva. Depois,

conseguimos complementar essa ideia ao juntar o gaming (mais conhecido por vídeo

jogos), pois o gaming hoje em dia consegue também ser considerado um desporto.

O nosso público-alvo são indivíduos com idades compreendidas entre os 15 e os

50 anos de idade. Temos como objetivo expandir a nossa marca a nível nacional e

talvez, mais tarde, expandi-la a nível internacional.

Ideias mais importantes: A principal ideia da criação da marca DRVG é a associação de várias vertentes

da multimédia, desde programação, passando pelo design gráfico, design 3D e edição de

vídeo.

Expectativas a alcançar: Com este trabalho pretendemos juntar tudo o que aprendemos, o que cada um

mais gosta na vertente da multimédia e, assim, criarmos uma marca para os praticantes

de desporto e gamers.

Como dividimos as tarefas? No nosso trabalho conseguimos realizar as nossas principais tarefas, as quais

foram divididas pelos quatro elementos do grupo. O Gonçalo Martins ficou responsável

pela construção do Web Site, o Vítor Mendes ficou responsável pela elaboração dos

produtos, o Ricardo Suissas ficou responsável pela criação do tênis 3D e da estrutura do

relatório e o David Folgado ficou responsável pela criação do logotipo, pela construção

do vídeo promocional e da intro. No entanto sempre que necessário houve entreajuda.


Estrutura do relatório: No nosso relatório encontra-se a descrição de como conseguimos realizar a

nossa PAP, bem como os métodos que utilizámos ao longo da sua construção.

Estado da Arte: No Estado da Arte realizámos pesquisas de bons e maus exemplos de website,

retirados da Internet. Podem consultar aqui o nosso estado da arte.

Anteprojeto: O Anteprojeto foi um documento realizado com o intuito de ser aprovado em

Conselho Pedagógico do Agrupamento. Este documento consiste na ideia base da nossa

Prova de Aptidão Profissional, nele tivemos de apresentar o tema, objetivos, descrição

sumária e recursos necessários. Podem consultar aqui o nosso anteprojeto.

Apresentação do Projeto: O nosso projeto visa a criação de uma marca de roupa, que tem como objectivo

criar uma ligação entre o desporto e os vídeo jogos, pelo facto de serem duas áreas com

que nos identificamos e nos sentimos bastante confortáveis.

Gantt Project: É um plano temporal para que as nossas tarefas não sejam esquecidas. Nele

podemos relacionar qualquer tarefa com cada elemento do grupo, tal como a sua

duração de tempo e o seu nome para que o próprio elemento do grupo não se esqueça.

Este programa facilita também o acompanhamento das fases de cada tarefa e da mesma

para cada elemento do grupo. Podem consultar aqui o ficheiro pdf.


Desenvolvimento

Layouts: No início do desenvolvimento do nosso website, decidimos pesquisar vários websites de

compras com diferentes estruturas, como os websites da FNAC/ Pull and Bear/ Berskha/

Vans/ Hitpoint/ Faze shop.

Depois de várias escolhas dos layouts, começámos a criação do nosso próprio layout,

usando várias técnicas de outros layouts anteriormente vistos, começando pelo Índex

(Página Principal) iniciado com duas Navs (barras de navegação) que estarão em todas

as páginas do website, em vários menus (logótipo, roupas, acessórios, contactos, login,

registo, botão de “voltar” para o Índex e o Sobre Nós). Depois veio a criação de um

carousel, ou seja um slider, com as dimensões de 1900 x 1080 px (Pixels), com imagens

que destacam o mais importante da nossa marca, como por exemplo as novas coleções

que irão ser lançadas.

Noutra secção, junto aos produtos em destaque, irão aparecer outros artigos menos

relevantes, como os produtos mais vendidos e os produtos em saldo.

Por cima do footer irá aparecer a newsletter que é uma caixa de texto cuja função é

permitir o utilizador inserir o seu contacto eletrónico para receber uma mensagem com a

informação de determinadas campanhas que estão a decorrer sem ser necessário fazer

registo.

O footer é onde surge a informação dos contactos da empresa.

A loja é uma galeria, onde aparecem vários artigos da nossa marca para que o utilizador

possa visualizar as características dos artigos, o preço, o número de vendas e o botão

para “comprar”. A loja irá ter outro submenu para o utilizador navegar mais facilmente

dentro das secções e terá ainda um filtro de pesquisa por preços.

Nas respetivas secções existem vários parâmetros, tais como o tamanho do artigo, o seu

valor, quantidade, cor e a sua descrição.

Para efectuar registo temos que introduzir o primeiro e último nomes, e-mail, password

e a verificação da password.


Em relação aos produtos, conseguimos criar produtos com base no desporto nos quais

usámos o nosso logótipo e imagens relacionadas com o desporto e o gaming.

Criámos vários produtos como calças de fato treino, t-shirts, camisolas com capuz,

camisolas sem capuz e calções. No entanto, decidimos acrescentar alguns acessórios

como canecas, óculos de sol, capas para telemóvel e chapéus.

Conteúdo presente em todas as páginas O Website foi feito com recurso ao bootstrap que

é um framework front-end que facilita a vida dos criadores web a criar sites com

tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS para “fazer e

acontecer”. Não é por acaso que o termo “Bootstrap” em inglês significa

“inicialização”, algo que possui um ponto de partida.

Todas as páginas irão ter dois elementos fixos que são a nav e o footer. A nav é o menu

de navegação que é constituída por DRVG (e o botão para voltar a índex), Quem

Somos, Roupa, Acessórios, Contactos, Carinho, Registar, Entrar.

Roupas e acessórios têm um drop down e uma caixa, que se nós selecionarmos algumas

das opções, vai deixar uma caixa com mais opções (links).

O outro elemento, o footer, serve para ver informações do website como o mapa do

mesmo e os termos de uso do site.

Nav

Drop Down


1ª Página: A página inicial terá um layout completamente diferente das restantes partes do site. O

objetivo dessa página consiste em ser um cartão de entrada para o utilizador devido à

parte gráfica ser muito atrativa, por ter um carrossel que ocupa a parte inicial do site e as

nossas novas coleções e assim incentivar o utilizador a dar scroll para ver o resto e

navegar no nosso website.

Carousel

Footer


2ª Pagina: “Quem somos” é uma secção do website que terá um Vídeo Promocional e que servirá

como uma breve apresentação da marca DRVG.

Depois, apresenta os objetivos da marca e o que é a marca DRVG. Terá ainda uma

fotografia de cada criador da marca.

Making off


3ª Página: Na Galeria dos produtos estará o layout, simples e bem organizado, que disponibilizará

uma certa área para cada produto onde o utilizador poderá obter as mesmas informações

que os produtos de destaque (nome, preço...). Tem ainda um submenu de navegação, no

lado esquerdo, que facilita a navegação por parte do utilizador.

Produto Menu


4ª Página: Quando selecionamos na galeria um produto vamos ter à página individual do produto,

que irá ter a categoria do produto do lado esquerdo em cima, terá as informações sobre

o mesmo tais como nome, descrição, preço, tamanho, quantidade e o botão para

comprar do lado direito e uma imagem do mesmo.

O footer tem uma divisão onde vão aparecer outros produtos da mesma categoria que o

utilizador poderá selecionar.


5ª Página: Se o utilizador quiser fazer a compra de um produto terá que criar uma conta de modo a

efectuar as compras em segurança e receber no seu e-mail as informações da nossa

marca.

O utilizador para criar a conta terá que preencher vários campos, esses dados

introduzidos serão armazenados numa base de dados

Os campos serão os seguintes (Email, Password, Nome, Data de Nascimento ,Morada,

Código postal, localidade, Nr de contribuinte, Nib, Nr telefone, sexo) algum destes

campos vão ser encriptados para proteger o cliente do site.

6 - Login O login (Entrar) é onde o utilizador pode entrar na conta para efectuar as suas compras.


Editar Perfil Uma vez que o utilizador cria a conta e faz login ele vai ter uma opção de Editar o

perfil, na opção de “editar o perfil”, o utilizador do site vai poder mudar as suas

informação e personalizar a sua imagem de perfil.


Newsletter O newsletter é uma ferramenta onde um utilizador que não queira criar uma conta, pode

registar o seu e-mail e receberá todas as novidades da marca. Dessa maneira o utilizador

poderá receber toda a informação da marca sem ter feito o devido registo.

Mapa do site O mapa do site é um componente onde o utilizador poderá navegar mais facilmente

dentro do website, onde aparece a importância dos artigos por categorias.

ADMINISTRADOR: A aba dos administradores, serve como a manutenção do website, corrigimos bug´s que

poderão existir no website e iremos desenvolver o website a partir desses erros, afinal,

todos aprendem e evoluem com os seus erros. Adicionaremos ainda mais produtos para

o desenvolvimento do website. Para aceder a esta página que está num link escondido,

teremos que digitar no url (drvg.aesmprojetos.net/storeadmin) o user é drvg e a

password é 1234.


Informação final Para a criação deste website foi utilizado o Programa Dreamweaver, a linguagem html

para a construção do código base, php para fazer a ligação ao mysql, css é uma

linguagem que ajuda a criação de um layout esteticamente mais agradável para o

website e o MySQL é onde se guarda os dados dos clientes.

Escolha do Nome: O nosso grupo decidiu escolher o nome DRVG pois constitui as iniciais de todos os

nomes dos elementos do grupo (David, Ricardo, Vitor e Gonçalo).

Desde o início que o nosso grupo concordou que o nome da nossa marca fosse DRVG,

pois como engloba todos os elementos do grupo, nós pensamos que iria ajudar-nos a

relembrar que todos nós participámos juntos numa etapa tão importante como esta.

Ténis 3D: Decidimos criar um ténis 3D como um produto da nossa marca, pois a criação do ténis

foi uma ideia dos quatro elementos do grupo desde o início do projeto.

Desenvolvemos um modelo em 3D de um site chamado “Clara.io” no blender. O

blender é um programa que utilizamos para trabalhar em modelagem, animação, textura,

renderização e edição de vídeo.

Alterámos a origem do ténis, colocámos o nosso logótipo em duas partes (etiqueta e

parte de trás) diferentes do nosso ténis e fizemos estudos de cores. A partir do programa

blender4web conseguimos extrair do blender para linguagem HTML para poder coloca-

lo no site. Criamos também mais uma secção onde podemos visualizar o ténis no

website. Também pode ver o ténis de todos os ângulos possíveis dentro do website.

Aqui estão alguns modelos e estudos de

cores.


Produtos: Começámos por retirar algumas ideias de t-shirts que vimos em sites semelhantes ao

nosso.

Estudámos protótipos de t-shirts simples da Internet. Após esses estudos, decidimos

aplicar num modelo simples o nosso logótipo que ficaria ao centro. Achámos que ficaria

muito vazio, mas não desvalorizando, guardámos esses primeiros esboços. De seguida,

pesquisámos temas que relacionassem o gaming com o desporto, para podermos

encontrar uma composição que ficasse bem nas nossas t-shirts.

Acabámos por ter mais ideias e criamos mais produtos como, camisolas com capuz,

camisolas sem capuz, bonés, canecas e óculos de sol.

Criámos camisolas simples, umas pretas e outras brancas, com o nosso logótipo

centrado também criámos umas canecas com o nosso logótipo centrado, tanto na

horizontal como na vertical. Criámos também bonés e óculos de sol com o nosso

logótipo e também com um símbolo que representa a nossa marca.

Todos estes produtos foram criados e editados no Adobe Illustrator CS5.1 e no Adobe

Photoshop CS5.1.

No caso das t-shirts, temos mais variedade de produtos. Temos t-shirts simples com o

nosso logótipo, com uma variedade de cores. Produzimos também uma t-shirt com a

estampagem de ondas, que simboliza o desporto do Surf, disponível em duas cores.

Temos ainda outra t-shirt que tem um logótipo da nossa marca, que está representado no

nosso logótipo, que é uma bola com um comando de vídeo jogo no seu interior,

representa o desporto ligado ao vídeo jogo.


Criámos as canecas, não tanto ligadas ao desporto, mas para favorecer a nossa loja e

termos mais produtos disponíveis.

Criámos calções de fato treino e calças de fato treino, com o nosso logótipo, umas

calças práticas e simples, indicadas para o desporto e até para o conforto a jogar vídeo

jogos.

Vídeo Promocional: Começámos por pesquisar vários vídeos de marcas desportivas, como a Adidas e a

Nike, para retirarmos exemplos, do que queríamos e não queríamos fazer. Após a

pesquisa, decidimos criar o nosso vídeo, que consiste em várias pessoas se

transformarem nos seus jogadores preferidos de futebol. Nós decidimos fazer um vídeo

com cada elemento do grupo a praticar um determinado desporto, neste caso, futebol,

ténis, elevações e crossfit, e no final cada um desaparece e aparecemos todos juntos a

jogar videojogos. Realizámos as filmagens no complexo desportivo de Marinhais e na

casa de um dos elementos. Apresenta-mos aqui o guião do projeto.

Referindo-nos agora à edição do vídeo, utilizámos o Sony Vegas Pro 14 que é um

software da MAGIX, dedicado à edição de vídeo. Para dar um efeito mais cinemático,

usámos as black bars. Utilizámos somente dois tipos de transições, o hyperzoom e o

pincushion, mas para fazer estas transições utilizámos vários efeitos de vídeo, entre os

quais o, Warp Fish Eye, Blur Mo Curves, Time Warp RGB e o Brightness and Contrast,

sendo que os três primeiros, pertencem a um pack gratuito do software Saphire Flare

Designer. Por fim, usámos o Gausian Blur para aplicar o efeito de desfoque, no vídeo,

enquanto aparecia o logótipo da marca.

Fizemos um making of do nosso vídeo promocional, ou seja, o que estava por de trás

das câmaras, a união do grupo e os “happy moments” do nosso grupo, disponível no

nosso canal de YouTube.


Intro: Resolvemos fazer uma intro, para o início do nosso vídeo promocional. Mais uma vez,

fizemos várias pesquisas e decidimos usar um template para a nossa intro. Editámos

esse template ao nosso gosto no Adobe After Effects, um software da Adobe, para

criação de gráficos com movimento e efeitos visuais. Fizemos edições da forma do

logótipo e mudámos a cor do brilho de fundo para azul.


Logótipo

Construção: Depois de escolhermos o nome, decidimos avançar para um estudo, para saber a melhor

forma de como deveria ficar o nosso logótipo.

Primeiro, pesquisámos vários tutoriais para aprender como fazer um logótipo, de

seguida partimos para a prática e realização, utilizando o Adobe Photoshop CS6, um

editor de imagem do leque de programas que a Adobe Collection CS6 nos oferece.

Embora não seja o indicado, utilizámos este software unicamente para testes.

Primeiro, fizemos este logótipo, no Adobe Photoshop, mas decidimos não avançar com

este, pois não tem nada a ver com o conceito da nossa marca.


Seguidamente, desenvolvemos este logótipo, e este sim, levámos para a frente.

Utilizámos a fonte Batman Forever, fizemos uns pequenos cortes nas letras para dar um

ar mais computorizado, mas como também não tínhamos algo que ligasse a marca,

decidimos avançar com este, mas inserir algo que ligasse o logótipo à marca, ou seja o

joystick com a bola à volta.

Como surge na imagem acima, fizemos vários estudos para determinar com qual

logótipo avançar até chegarmos todos a um consenso e escolhermos o definitivo.

Decidimos escolher este como logótipo para a nossa marca, agora com um elemento que

liga a nossa marca ao nosso logótipo, o joystick que simboliza os videojogos e o círculo

à volta, simboliza o desporto, pois a maior parte dos desportos coletivos, utiliza uma

bola. Fizemos um manual de normas que pode consultar aqui.


Conclusão

Todo o nosso trabalho foi realizado por gosto e vontade, demorou alguns meses a ser

realizado mas conseguimos. Algumas tarefas demoraram um pouco mais de tempo do

que prevíamos, mas nada disso nos impediu de concluir este trabalho, pois empenhamo-

nos muito e no final conseguimos realizar esta tarefa tão importante da nossa vida.

O logótipo foi o mais complicado, pois como o grupo é constituído por quatro

elementos, precisávamos de estar todos de acordo. Trabalhámos individualmente para

cada tarefa que nos foi dada, mas no final concluímos o trabalho que ficou do agrado de

todos.

Após tudo concluído, olhamos para todo o trabalho desenvolvido e vemos que

realmente não foi fácil, mas foi um trabalho positivo que, mais uma vez, serviu para

desenvolver não só as nossas capacidades individuais como as nossas capacidades de

trabalho em equipa. Podemos dizer que, por vezes, o grupo se desentendeu, mas esses

desentendimentos acontecem, pois os nervos começam a aumentar e as pessoas ficam

impacientes. No entanto, nada nos impediu de concluir esta etapa da nossa vida com

sucesso.


Referências da internet Site:

http://www.fnac.pt/

https://www.pullandbear.com/pt/

https://www.bershka.com/pt/

https://www.vans.eu/

http://www.hitpoint.tv/

https://fazeclanstore.com/

https://www.paypal.com/us/selfhelp/article/Where-do-I-find-the-PayPal-code-to-link-and-confirm-my-debit-or-credit-card-FAQ1948

Ténis 3D:

https://clara.io/

Intro:

https://www.youtube.com/watch?v=71GOmuUllok

Vídeo Promocional:

https://www.youtube.com/watch?v=9qQAn-wmUDM

https://www.youtube.com/watch?v=pCVF0CSRTYA

https://www.youtube.com/watch?v=iH_E3FFEYlY

https://www.youtube.com/watch?v=Nn-OPKb9wWM

http://www.fnac.pt/

https://www.pullandbear.com/pt/

https://www.bershka.com/pt/

https://www.vans.eu/

http://www.hitpoint.tv/

https://fazeclanstore.com/



https://clara.io/

https://www.youtube.com/watch?v=71GOmuUllok

https://www.youtube.com/watch?v=9qQAn-wmUDM

https://www.youtube.com/watch?v=pCVF0CSRTYA

https://www.youtube.com/watch?v=iH_E3FFEYlY

https://www.youtube.com/watch?v=Nn-OPKb9wWM

relatÓrio crÍtico prova de aptidão profissionaldrvg.aesmprojetos.net/relatorio/relatorio.pdf ·...

Documents