Relatório Crítico - irison.aesmprojetos.netirison.aesmprojetos.net/relatorio.pdf · Escola...
Transcript of Relatório Crítico - irison.aesmprojetos.netirison.aesmprojetos.net/relatorio.pdf · Escola...
Escola Básica e Secundária de Salvaterra de Magos
Relatório Crítico
Prova de Aptidão Profissional
Tiago Alexandre Lopes Guiomar
Curso Profissional Técnico de Multimédia
12º J Nº10
Salvaterra de Magos
Junho de 2018
IRIS ON
Escola Básica e Secundária de Salvaterra de Magos
Tiago Alexandre Lopes Guiomar
Curso Profissional Técnico de Multimédia
Projeto Produção de Multimédia
12º J Nº10
SUMÁRIO
Relatório das atividades do Projeto, IRIS ON
desenvolvido como requisito parcial dos módulos
curriculares, supervisionado pelos Professores Patrício
Oliveira, Anabela Ferreira, Tereza Fazenda, Maria João
Lucas e António Andrade, do curso Profissional Técnico
de Multimédia.
Salvaterra de Magos
Junho de 2018
Escola Básica e Secundária de Salvaterra de Magos
Agradecimentos
Durante todo o curso tive a oportunidade de receber e partilhar conhecimentos com várias
pessoas, tanto da minha turma, professores ou profissionais do ramo.
Tenho de agradecer aos professores que tive durante todo o percurso escolar que sempre
acreditaram no meu potencial e nunca me deixaram desistir, tinham sempre uma palavra amiga
e um conselho a dar. Estavam sempre prontos a ajudar, a dar ideias e técnicas para poder
ultrapassar os problemas que foram surgindo ao longo da criação e realização do projeto.
Deixo o meu agradecimento aos professores da área técnica, ao professor Patrício Oliveira que
esteve sempre a “puxar” por nós de modo a concluirmos o projeto, dando críticas e ideias na
área visual, à professora Maria João Lucas que esteve pronta para, igualmente, dar críticas e
ideias e à professora Tereza Fazenda, ela que foi a impulsionadora para a criação deste projeto,
dando ideias para o tipo de projeto a realizar.
À turma deixo o meu obrigado por tudo o que fizeram por mim, sempre que podiam e sabiam
estavam prontos a ajudar, seja a nível técnico como a nível visual e auditivo, devo um
agradecimento especial ao meu colega João Dias, que me ajudou na resolução de problemas
com a programação do website, às minhas colegas Andreia Mendes, Ema Completo e Mónica
Miguêns, pelas críticas realizadas a nível visual.
Por último agradeço aos meus pais, eles foram um suporte importante na concretização da PAP,
pelos conselhos dados e pelas críticas realizadas.
Um agradecimento especial a todos.
Escola Básica e Secundária de Salvaterra de Magos
Índice 1 – Resumo .......................................................................................................................... 5
1.A - Abstract .................................................................................................................... 6
2 – Introdução ....................................................................................................................... 7
2.A - Objetivos a atingir ..................................................................................................... 7
2.B - Estruturação do relatório ........................................................................................... 7
2.C - Princípios básicos ..................................................................................................... 8
2.D - Seleção de Informação ............................................................................................. 9
3 - Desenvolvimento ........................................................................................................... 10
3.A - Conceção da Ideia .................................................................................................. 10
3.B - Programas utilizados .............................................................................................. 11
4 - Logótipo do projeto ........................................................................................................ 13
5 - Criação do Website ........................................................................................................ 19
5.A - Template ................................................................................................................. 19
5.B - Homepage .............................................................................................................. 20
5.C Banner Homepage .................................................................................................... 21
5.D - Quem Somos ......................................................................................................... 21
5.E Equipa ...................................................................................................................... 22
5.F - Galeria .................................................................................................................... 22
5.G Serviços ................................................................................................................... 23
5.H - Loja ........................................................................................................................ 23
5.I Orçamento ................................................................................................................. 24
5.J- Contactos ................................................................................................................. 24
5.K Registo ..................................................................................................................... 25
5.L Login ......................................................................................................................... 25
5.M - Pedir reset palavra-passe ...................................................................................... 26
5.N Página Reset Palavra-Passe .................................................................................... 26
5.O - Backoffice ............................................................................................................... 27
5.P Backoffice / Sobre ..................................................................................................... 27
5.Q - Backoffice / Contactos ............................................................................................ 28
5.R - Backoffice / Contabilidade ...................................................................................... 28
5.S - Backoffice / Calendário ........................................................................................... 29
5.T - Perfil ....................................................................................................................... 29
5.U - Rodapé .................................................................................................................. 30
5.V - Fonts Utilizadas ...................................................................................................... 31
7 - Conclusão ...................................................................................................................... 34
8 - Anexos ........................................................................................................................... 35
Anexo I - Anteprojeto ....................................................................................................... 35
Anexo II - Trabalho de Pesquisa ..................................................................................... 37
Anexo III - Gantt .............................................................................................................. 37
Escola Básica e Secundária de Salvaterra de Magos
1 – Resumo
Este relatório retrata todo o procedimento realizado para o desenvolvimento de um projeto
inserido na Prova de Aptidão Profissional, desenvolvido no âmbito do curso Técnico de
Multimédia. Relata todo o processo desde a concessão da ideia, à planificação de tarefas,
pesquisas e por fim o seu desenvolvimento.
O projeto aborda toda a área do design inerente à empresa criada como a criação de um logótipo,
mas também toda a programação do website da empresa, contendo este um frontent e um
backoffice.
Escola Básica e Secundária de Salvaterra de Magos
1.A - Abstract
This report describes the entire procedure carried out for the development of a project inserted
in the “Prova de Aptidão Profissional”, developed under the Multimedia Technician course.
It reports the entire process from the granting of the idea to the planning of tasks, research and
finally its development.
The project reports the whole area of the design inherent to the company created, such as the
creation of a logo, but also the entire programming of the company website, containing one
frontend and one backoffice.
Escola Básica e Secundária de Salvaterra de Magos
2 – Introdução
O projeto que realizei para a Prova de Aptidão Profissional no âmbito do curso Técnico de
Multimédia consiste em uma parceria feita com o colega Luís Beja, aluno do curso Técnico de
Comércio, para a criação de uma empresa Criativa e de Fotografia intitulada Iris On.
O trabalho realizado consiste na criação de todo o Design Gráfico, como a criação de logótipos,
estacionários e publicidade para a mesma e no desenvolvimento de um website.
2.A - Objetivos a atingir
● Criar uma empresa de prestação de serviços multimédia.
● Desenvolver projetos web através das técnicas adquiridas.
● Desenvolver web design.
● Desenvolver design referente à área gráfica de toda a empresa.
● Aplicar competências técnicas adquiridas ao longo do curso
2.B - Estruturação do relatório
O relatório começa com alguns agradecimentos, tanto a professores como colegas e todos
aqueles que me acompanharam durante todo o curso. De seguida apresento, através da
introdução, a ideia projetual, objetivos e noções necessárias para a realização do mesmo,
apresento o desenvolvimento onde relato todo o processo da realização do projeto, desde a
criação da empresa até ao último elemento criado.
Escola Básica e Secundária de Salvaterra de Magos
2.C - Princípios básicos
Para a sua conceção temos de ter em mente alguns princípios.
O Design é um processo criativo para resolver problemas relacionados com a conceção de
objetos, o principal objetivo do Design é resolver o problema colocado inicialmente tendo em
conta todos os fatores que o informam, tais como:
-Fatores Funcionais
Responde às necessidades?
O material adequa-se à utilização?
-Fatores Estéticos
É atrativo em termos de forma e cores?
-Fatores Ergonómicos
É de utilização confortável para o seu utilizador?
As suas áreas de intervenção são bastante diversificadas e por isso podemos organizá-las do
seguinte modo:
– Industrial
Design de equipamento – Moda
Estilismo
– Arquitetónico
Arquitetura /Engenharia Civil
Escola Básica e Secundária de Salvaterra de Magos
Decoração de interiores – Comunicação
Design gráfico
Design multimédia
A área que abordaremos em pormenor será, por isso, a Comunicação com base no Design
Gráfico.
Um website é a junção de várias páginas interligadas entre si, incluindo conteúdos multimédia,
normalmente identificadas por um domínio comum a todo o website e publicadas em, pelo
menos, um servidor. Alguns exemplos disso são sites como o Google, Facebook.
2.D - Seleção de Informação
● Diagramação da página o que é?
● Sistema de navegação/Informação o que é?
● Componentes necessários/relacionados (galerias, formulários...)- que tipo?
● Conceitos?
● Tipografia adequada o que é?
● Paletas/sistemas de cor adequados?
● CSS o que é?
● Que tipo de linguagem de programação tenho à disposição?
● Qual devo usar?
Escola Básica e Secundária de Salvaterra de Magos
3 - Desenvolvimento
3.A - Conceção da Ideia
A criação deste projeto partiu de uma ideia colocada pela professora Teresa Fazenda e pelo
professor Carlos Marques dos cursos Técnico de Multimédia e Técnico de Comércio,
respetivamente, que seria a criação de uma parceria entre colegas de ambos os cursos. Pensei
bem no assunto e fui conferenciar com os colegas de Comércio sobre que tipo de trabalho iriam
desenvolver e se gostariam de fazer uma parceria.
Aí surge o colega Luís Miguel, que apresentou um tema bastante interessante e disponibilidade
para a parceria.
Depois da ideia inicial ter sido aceite, passei à pesquisa, onde pesquisei sobre empresas
semelhantes, de modo a poder recolher o melhor e o pior de cada uma delas. Procurei estilos
de logótipos de empresas criativas e de fotografia, e websites. A este processo dá-se o nome
“Estado da Arte”.
Foi realizado um anteprojeto (Anexo I) que continha toda a informação recolhida até ao
momento, possuindo este os objetivos do projeto, membros, e descrição do mesmo para que
pudesse seguir para o Conselho Pedagógico da escola, de forma a que passasse pelo processo
de aprovação.
Depois de aprovado, realizei um esboço das atividades a realizar e o seu tempo de duração a
fim de ter tudo planificado e posteriormente concluído até à entrega da Prova de Aptidão
Profissional.
Apresentámos as pesquisas anteriormente feitas (Anexo II) e procedemos à criação de um
projeto Gantt (Anexo III) (O diagrama de Gantt é um gráfico usado para ilustrar o avanço das
diferentes etapas de um projeto. Os intervalos de tempo representando o início e fim de cada fase
aparecem como barras coloridas sobre o eixo horizontal do gráfico ) onde foi inserida cada tarefa a
realizar e a sua projeção temporal, como a data de início e de término apresentadas com uma
pequena nota sobre a mesma.
Escola Básica e Secundária de Salvaterra de Magos
Escolhi então, começar pela criação do logótipo para a empresa, pois, este identifica ou
representa uma entidade, e além disso, seria a base para o todo o trabalho futuro, como a escolha
de cores e lettering. Depois do logótipo pude conceber o site e os estacionários, respetivamente.
3.B - Programas utilizados
Para a realização da Prova de Aptidão Profissional fiz uso de vários programas, tanto de edição
de imagem como edição web.
Edição de Imagem
Adobe Photoshop CC 2017
O Adobe Photoshop CC 2017 é um software da Adobe que permite ao seu utilizador a edição
de imagens, criação de elementos e correção de fotografias.
Adobe Illustrator CC 2017
O Adobe Illustrator CC 2017 é um software da Adobe que permite ao seu utilizador a criação
de imagens vetoriais.
Adobe Lightroom CC 2017
O Adobe Lightroom CC 2017 é um software da Adobe que permite ao seu utilizador a edição
e correção de cores, de um modo mais aprofundado comparando com o Adobe Photoshop.
Edição Web
Escola Básica e Secundária de Salvaterra de Magos
Edição de Texto
Sublime Text 3
O Sublime Text é um software de edição de texto.
Laravel
O Laravel é uma framework de desenvolvimento rápido para PHP, livre e de código aberto.
Cujo principal objetivo é permitir ao utilizador trabalhar de forma estruturada e rápida.
Escola Básica e Secundária de Salvaterra de Magos
4 - Logótipo do projeto
Para a criação do logótipo precisamos perceber o nome da empresa.
O seu nome provém de duas palavras distintas que juntas, combinam muito bem. Uma é a
palavra Íris que representa não só o olho, mas também todas as suas cores e a outra é a palavra
“On” que significa ligar e é esta ligação que a empresa pretende dar ao seu cliente, a ligação
daquilo que o olho vê com o sentimento de superação.
Comecei por escrever o nome da empresa (IRIS ON) num papel e fui esboçando de diferentes
formas e feitios, mas achava sempre que não podia ser apenas uma simples logomarca, teria de
ter um ícone, algo que o utilizador pudesse, ao olhar, reconhecer sem grandes dificuldades.
Recorri então ao colega Luís Beja para que pudéssemos discutir ideias e arranjar uma solução
para o problema, surgiu então a ideia usar a palavra “IRIS” como uma logomarca e o ícone da
empresa seria “ON”. Surgiu também a ideia de este conter algo relacionado com uma câmara
fotográfica.
Através de conhecimentos adquiridos durante o curso, e tendo presente que teria de ter uma
parte constituinte de uma câmara fotográfica, pude reconhecer que há algo que todas as câmaras
têm, mas nem sempre são lembradas, os diafragmas.
A peça que possibilita a captura de um momento.
Fiz uma breve pesquisa sobre o funcionamento dos diafragmas e passei então à sua criação
utilizando o Adobe Illustrator. Fui fazendo alguns experimentos até que cheguei ao resultado
que pretendia.
Primeira proposta
Escola Básica e Secundária de Salvaterra de Magos
Proposta final
Depois de ter parte da palavra “ON” feita, procurei encontrar fonts para inserir na palavra
“IRIS”. Comecei por escrever “IRIS” no Adobe Illustrator e ia fazendo scroll até encontrar um
tipo de letra que gostasse. Ao longo de toda a pesquisa que fiz consegui destacar 3 tipos de letra
(Bahnschrift, Microsoft Sans Serif e Swiss 721BT-BlackCondensedItalic).
Fonte Bahnschrift
Fonte Microsoft Sans Serif
Fonte Swiss 721BT-BlackCondensedItalic
Destes 3 tipos de letra, escolhi utilizar “Swiss 721BT-BlackCondensedItalic”, pois, derivado
à sua inclinação dá ao visualizador uma sensação de movimento, emoção.
Escola Básica e Secundária de Salvaterra de Magos
Após juntar o diafragma com a palavra “IRIS” obtive este resultado.
Faltava, assim, criar o “N” para concluir o logótipo. Primeiramente esbocei uma ligação entre
o “O” e o “N”.
Primeira proposta
Segunda Proposta
Escola Básica e Secundária de Salvaterra de Magos
Proposta Final
Tendo já todos os elementos criados, passei à fase da seleção de cores e, em conjunto com o
colega Luís Beja decidimos que, aproveitando a divisão anteriormente feita, iríamos dividir o
logótipo em duas zonas, uma zona monocromática que seria colocada na palavra “IRIS” e uma
zona cromática colocada na palavra “ON”.
Para a zona monocromática e depois de alguns testes de cor, decidi usar como cor principal um
cinzento-escuro, podendo ser, para motivos de leitura, a cor branca.
#231F20 #FFF
Para a zona cromática decidimos utilizar em grande parte o espectro luminoso, com maior
incidência na cor Azul.
A cor azul significa tranquilidade, serenidade e harmonia e é isso que pretendemos demonstrar
aos clientes, a harmonia existente em todos os trabalhos que realizamos.
É possível encontrar igualmente cores como o Amarelo que representa o otimismo e a alegria,
o Verde que representa a natureza e juventude, o Laranja representa a amizade e confiança e
o Rosa que representa o romantismo e ternura.
Escola Básica e Secundária de Salvaterra de Magos
Para obter uma multiplicidade de cores, utilizei uma imagem e fiz “Clipping Mask” ao
diafragma.
Imagem utilizada
Colorização “O”
Para a letra “N” recorri à ferramenta Gradiente.
Colorização “N”
Escola Básica e Secundária de Salvaterra de Magos
Seleção de cores
#FFEF2F #FE8542 #FF4EFF #01FE10
#006699 ->#00B1EF
Logótipos
Sendo este s o s Resultado s Finais .
Escola Básica e Secundária de Salvaterra de Magos
5 - Criação do Website
Para a criação do website decidi estabelecer pontos de procura importantes no website, ou seja,
este teria de conter áreas como “Sobre”, “Equipa”, “Galeria”, “Serviços” e “Contactos”. Decidi
também que para além de uma página comum a todos os utilizadores, teria de haver também
uma área dedicada aos administradores.
5.A - Template
Escolhi procurar templates de websites para servir de base para o meu projeto. Encontrei então
um template muito interessante pois, continha um Backoffice e um Frontend e também
apresentava algumas funcionalidades que tinha em mente.
Backoffice
Escola Básica e Secundária de Salvaterra de Magos
Frontend
5.B - Homepage
O website contém dois tipos de barras de navegação, uma para o utilizador que não realizou o
login e outra onde o utilizador tem o login feito.
Barra de navegação sem login
Barra de navegação com login
Escola Básica e Secundária de Salvaterra de Magos
-
5.C Banner Homepage
Abaixo da barra e navegação é apresentado um banner com o Slogan da empresa.
Banner Homepage
5.D - Quem Somos
Nesta secção da página fazemos uma descrição da nossa empresa.
Quem Somos
Escola Básica e Secundária de Salvaterra de Magos
-
5.E Equipa
Nesta secção é apresentada toda a equipa existente na nossa empresa.
Equipa
5.F - Galeria
Nesta secção são apresentados alguns exemplos de fotografias capturadas pelo nosso fotógrafo.
Galeria
Escola Básica e Secundária de Salvaterra de Magos
-
5.G Serviços
Nesta secção são apresentados alguns dos serviços mais importantes que a nossa empresa
realiza.
Serviços
5.H - Loja
Nesta secção é apresentada a loja da empresa, com produtos para venda direta.
Loja
Escola Básica e Secundária de Salvaterra de Magos
-
5.I Orçamento
Nesta secção são apresentadas algumas noções de orçamentos que a nossa empresa dispõe.
Orçamento
5.J- Contactos
Nesta secção é apresentada todas as formas possíveis para que o nosso cliente nos possa
encontrar.
Contactos
Escola Básica e Secundária de Salvaterra de Magos
-
5.K Registo
Esta é uma área onde o utilizador pode fazer o seu registo.
Página Registo
5.L Login
Esta é uma área onde o utilizador pode fazer o login.
Página Login
Escola Básica e Secundária de Salvaterra de Magos
-
5.M - Pedir reset palavra-passe
Esta é uma área onde o utilizador pode pedir para desfazer a sua palavra-passe
Página pedir reset palavra-passe
5.N Página Reset Palavra-Passe
Nesta página é possível criar uma nova palavra-passe.
Página Reset Palavra-Passe
Escola Básica e Secundária de Salvaterra de Magos
-
5.O - Backoffice
Nesta página é possível alterar informações das bases de dados.
Backoffice-Página Home
5.P Backoffice / Sobre
Nesta página é possível alterar os dados da secção “Sobre” da página inicial.
Backoffice-Página Sobre
Escola Básica e Secundária de Salvaterra de Magos
-
5.Q - Backoffice / Contactos
Nesta página é possível alterar os dados da secção “Contactos” da página inicial.
Backoffice-Página Contactos
5.R - Backoffice / Contabilidade
Nesta página é possível realizar contas, através de uma calculadora.
Backoffice-Página Contabilidade
Escola Básica e Secundária de Salvaterra de Magos
-
5.S - Backoffice / Calendário
Nesta página é possível ver o calendário.
Backoffice-Página Calendário
5.T - Perfil
Nesta página é possível editar o perfil do utilizador
Perfil
Escola Básica e Secundária de Salvaterra de Magos
-
5.U - Rodapé
Nesta secção da página é representado o rodapé do website contendo o logótipo, copyright e
redes sociais.
Rodapé
Escola Básica e Secundária de Salvaterra de Magos
-
5.V - Fonts Utilizadas
A fonte utilizada no website é o Open Sans presente no Google Fonts.
Escola Básica e Secundária de Salvaterra de Magos
6 - Referências
Sites Criativos https://www.awwwards.com/20-extremely-creative-web-layouts.html,
consultado em setembro de 2017
W3Schools www.w3schools.com , consultado em
setembro de 2017;
Wikipédia (PT) – Cascading Style Sheets
https://pt.wikipedia.org/wiki/Cascading_Style_Sheets, consulta em setembro de 2017;
Wikipédia (PT) – Arquitetura de Informação
https://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3, consultado em
setembro de 2017;
Google Fonts www.fonts.google.com, consultado em
janeiro de 2018;
HeidiSQL
https://www.heidisql.com/, consultado em abril de 2018;
Laravel https://laravel.com/ ,consultado em maio
de 2018
Bootstrap www.getbootstrap.com, consultado em
setembro de 2017;
Ideia Magenta www.ideiamagenta.pt, consultado em
novembro de
Escola Básica e Secundária de Salvaterra de Magos
2017; Kriação
www.kriacao.pt, consultado em dezembro de 2017;
Escola Básica e Secundária de Salvaterra de Magos
7 - Conclusão
Chegados ao fim destes três anos de curso consigo perceber que realmente gosto do que faço,
evoluí bastante os meus conhecimentos sobre as matérias lecionadas e técnicas aprendidas, por
isso, pretendo continuar a aprender mais através de um ensino superior.
Para a realização desta Prova de Aptidão Profissional foram precisos utilizar capacidades e
conhecimentos a um nível bastante elevado, o que nem sempre foi fácil pois ocorriam
contratempos que, por vezes ocupavam bastante tempo para serem solucionados.
A Formação em Contexto de Trabalho permitiu-me evoluir não só como profissional, mas
também como pessoa e por isso só tenho a agradecer por todo o apoio e conhecimento que me
foi dado.
Vendo agora a minha Prova de Aptidão Profissional concluída é um orgulho imenso perceber
que todo o esforço, dedicação, horas de sono e stress envolvidos são compensados desta
maneira.
Escola Básica e Secundária de Salvaterra de Magos
8 - Anexos
Anexo I - Anteprojeto
Escola Básica e Secundária de Salvaterra de Magos
Escola Básica e Secundária de Salvaterra de Magos
Anexo II - Trabalho de Pesquisa
Anexo III - Gantt
Escola Básica e Secundária de Salvaterra de Magos
Escola Básica e Secundária de Salvaterra de Magos