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
Escola Básica e Secundária de Salvaterra de Magos
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
Escola Básica e Secundária de 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.
Escola Básica e Secundária de Salvaterra de Magos
Í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
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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
Escola Básica e Secundária de Salvaterra de Magos
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
Escola Básica e Secundária de Salvaterra de Magos
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
Escola Básica e Secundária de Salvaterra de Magos
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
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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.
Escola Básica e Secundária de Salvaterra de Magos
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