Embed Size (px)
Citation preview
1
Escola Básica e Secundária de Salvaterra de Magos
RELATÓRIO CRÍTICO
Prova de Aptidão Profissional
José Torcato Correia Vitor
Curso Profissional Técnico de Multimédia
12ºI Nº15
Salvaterra de Magos
3 de julho de 2017
2
Escola Básica e Secundária de Salvaterra de Magos
José Torcato Correia Vitor
Curso Profissional Técnico de Multimédia
12ºI Nº15
SUMÁRIO
Relatório das atividades do Projeto
(Website - “JT Media” (José Torcato Media),
desenvolvido como requisito parcial dos módulos
curriculares, supervisionado pelos professores
Alice Pereira, António Andrade, Lisete Teles e
Teresa Fazenda, no curso Profissional Técnico de
Multimédia.
Salvaterra de Magos
3 de julho de 2017
3
Agradecimentos
Dedico este trabalho aos meus pais, sobretudo ao meu pai.
Aos meus professores, por me terem ajudado a superar várias dificuldades.
Em primeiro lugar, quero agradecer à Diretora do Agrupamento de Escolas de
Salvaterra de Magos, Sra. Dr.ª Maria Manuela da Silva Pereira Esménio, por nos ter
apoiado ao longo destes três anos do curso. Agradeço à Diretora de turma, Sra. Drª.
Alice Pereira por me ter dado a oportunidade de concluir este curso.
O meu reconhecimento ao Centro de Formação de Escolas dos Concelhos de
Benavente, Coruche e Salvaterra (Centro Educatis), por me ter proporcionado um
contacto com o mundo do trabalho durante dois anos letivos.
Não posso deixar de agradecer a todos os meus professores em geral, que me
acompanharam ao longo destes três anos.
Finalmente, agradeço aos meus colegas que me ajudaram bastante ao nível da
integração no curso.
4
Í ndice Geral
1. Introdução ....................................................................................................................................................... 5
1.1 Apresentação das ideias mais importantes .................................................................................................. 5
1.2 Objetivos a alcançar ................................................................................................................................... 5
1.3 Estrutura do relatório .................................................................................................................................. 5
1.4 Seleção de informação ................................................................................................................................ 6
1.5 Estado da Arte ............................................................................................................................................ 6
1.6 Apresentação do projeto ............................................................................................................................. 6
1.7 Metodologia projetual ................................................................................................................................ 7
1.8 Anteprojeto ................................................................................................................................................. 7
1.9 Gantt Project ............................................................................................................................................... 7
2. Desenvolvimento ............................................................................................................................................. 8
2.1 Programas utilizados .................................................................................................................................. 8
2.2 Linguagens de Programação ....................................................................................................................... 8
2.3 Disciplinas em contexto do projeto ............................................................................................................ 9
3. Logótipo do projeto ....................................................................................................................................... 10
3.1 Estudo de cor do logótipo ......................................................................................................................... 11
4. Website do projeto ........................................................................................................................................ 12
4.1 Template ................................................................................................................................................... 12
4.2 Homepage ................................................................................................................................................. 12
4.3 Quem Somos ............................................................................................................................................ 13
4.4 O Que Fazemos ........................................................................................................................................ 14
4.5 Portfólio .................................................................................................................................................... 16
4.6 Serviços .................................................................................................................................................... 16
4.7 Contactos .................................................................................................................................................. 19
4.8 Pedir uma proposta ................................................................................................................................... 20
4.9 Fontes utilizadas no website ..................................................................................................................... 21
4.10 Redes Sociais e divulgação ....................................................................................................................... 21
4.11 Bilingue .................................................................................................................................................... 21
5. Referências .................................................................................................................................................... 22
6. Conclusão do projeto ..................................................................................................................................... 24
7. Anexos .......................................................................................................................................................... 25
7.1 Anexo 1 - Anteprojeto .............................................................................................................................. 25
7.2 Anexo 2 - Gantt ........................................................................................................................................ 27
5
1. Íntroduça o
O projeto que escolhi e desenvolvi consiste na simulação de uma pequena empresa de
comércio de serviços de multimédia, dedicada a comercializar produtos de baixo custo,
dada a sua localização geográfica fora dos grandes centros urbanos.
A razão de escolha deste projeto tem por base as aprendizagens que realizei ao longo
destes três anos do curso e tenta focar todos os conhecimentos técnicos que adquiri
neste período.
1.1 Apresentação das ideias mais importantes
A ideia principal tem por objetivo a criação da “jt media” (José Torcato Media) que
compreende um conjunto alargado de serviços relacionados com a fotografia,
programação, design, áudio e vídeo.
1.2 Objetivos a alcançar
Espero superar as expectativas iniciais, desenvolver as minhas capacidades e aptidões
na área da programação e tornar-me num futuro especialista na área da programação de
dispositivos móveis.
1.3 Estrutura do relatório
O meu relatório começa com uma breve dedicatória aos meus pais, professores, colegas
e outras entidades que me acompanharam ao longo do curso. Segue-se uma breve
apresentação do meu projeto, no que respeita à ideia principal, objetivos e
posteriormente, o desenvolvimento específico das várias fases de concretização.
Finalizo com a conclusão e os respetivos anexos.
6
1.4 Seleção de informação
Nesta tarefa, foi-me solicitada a realização de uma seleção de informação dos
componentes que iria usar no projeto:
- O que é a diagramação?
- O que é Sistema de navegação/informação?
- Quais são os Componentes necessários (galerias, formulários...) - que tipo?
- O que são Conceitos?
- Qual é a Tipografia adequada?
- Quais as Paletas/sistemas de cor adequados?
- O que é o CSS?
- Quais os tipos de linguagem de programação que tenho à disposição?
- Qual devo usar?
1.5 Estado da Arte
A segunda tarefa solicitada foi a elaboração de um "Estado da Arte", para o qual realizei
diversas pesquisas:
- Bons exemplos retirados da web;
- Maus exemplos retirados da web.
1.6 Apresentação do projeto
A ideia deste projeto nasceu da necessidade de definir objetivos para a realização da
Prova de Aptidão Profissional. Este projeto visa a promoção e divulgação da “jt media”
(José Torcato Media), que pretende ter como público-alvo todos aqueles que desejam
aceder a uma prestação de serviços relacionados com a fotografia, programação, design
(gráfico, web design, imagens corporativas, etc.), áudio e vídeo.
O conceito tem origem em dois vocábulos: José Torcato e Media. O primeiro relaciona-
se com o meu nome próprio “José Torcato”, definindo-me como o titular do projeto e
reforçando o caráter individual do website. O segundo nome, “Media”, por ser alusivo à
multimédia.
7
1.7 Metodologia projetual
Consiste no faseamento do projeto que se inicia com a definição de uma
necessidade/problema. Neste caso específico, surgiu da necessidade de criar um website
para divulgação dos serviços da jt media.
Iniciei com uma fase de pesquisa, seguindo alguns exemplos de sites existentes no
mercado. Previamente foi necessário criar uma identidade gráfica, cujo processo já foi
descrito.
Seguidamente, selecionei um template (da W3Schools) para a criação do meu website e
comecei a definir os vários aspetos que queria integrar na página.
Numa fase final, preocupei-me com o aspeto visual e estético do site, nomeadamente no
que respeita à escolha do lettering, das imagens e da configuração geral do site.
No final, através de testes, procedi à “avaliação” do meu website.
1.8 Anteprojeto
O anteprojeto foi um documento elaborado com o intuito de ser aprovado em Conselho
Pedagógico do Agrupamento, como pré-requisito para a prova de aptidão profissional.
Neste documento é anunciado o tema, uma descrição sumária e os objetivos a alcançar
na realização do projeto.
1.9 Gantt Project
Gantt Project é um plano criado para descrever as tarefas numa linha temporal que está
dividido em diferentes etapas, baseado no Diagrama de Gantt. Foi utilizado no
desenvolvimento de todo o projeto, estabelecendo objetivos a alcançar, baseados num
cronograma. Esta metodologia facilita o acompanhamento da execução das tarefas e
fases estabelecidas.
8
2. Desenvolvimento
2.1 Programas utilizados
Para esta prova de aptidão profissional utilizei vários programas que foram lecionados
no decorrer do curso, designadamente:
Adobe Dreamweaver CC 2017
O Adobe Dreamweaver é um software desenvolvido para a web que serve para
desenhar sites modernos e responsivos.
Adobe Photoshop CC 2017
O Adobe Photoshop é um software desenvolvido para edição de imagem e criação de
logótipos, correções fotográficas, etc.
2.2 Linguagens de Programação
PHP
PHP significa Personal Home Page, é uma linguagem de programação aberta (de
utilização livre) destinada ao desenvolvimento de páginas de internet.
Tem evoluído nas suas capacidades e funcionalidades e é compatível com a maioria dos
sistemas.
CSS
CSS significa Cascading Style Sheets, é uma linguagem para definir o estilo (cores,
fontes, espaçamentos, fundos, etc.) que definem a apresentação de documentos escritos
numa linguagem de marcação, como HTML, XML e PHP.
Bootstrap
Bootstrap é uma framework front-end que facilita os programadores de criar páginas
na internet, cuja principal vantagem é poder adaptar-se a qualquer dispositivo sem
necessidade de efetuar ajustes específicos e que possui uma diversidade de componentes
9
(plugins) em JavaScript (jQuery) que auxiliam o designer a implementar: tootlip,
menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade,
apenas acrescentando algumas configurações no código, sem a necessidade de criar
scripts e mais scripts, tornando-se uma linguagem universal para todo o tipo de
dispositivos.
Java
Java é uma linguagem de programação em script com orientação a objetos baseados em
protótipos e funções.
2.3 Disciplinas em contexto do projeto
Durante o período do curso profissional tive a oportunidade de frequentar diversas
disciplinas da componente técnica, que foram fundamentais para a aquisição das
competências necessárias para o desenvolvimento deste projeto.
• Técnicas de Multimédia – competências de entendimento e funcionamento
dos softwares (Photoshop, Audition, Illustrator, Premiere Pro, After
Effects, Autodesk 3D Max, Flash);
• Design de Comunicação e Audiovisual – competências em design, layout e
apresentação (InDesign);
• Sistemas de Informação – competências de programação em linguagens web
e bases de dados (Dreamweaver, Bootstrap e PHPMySQL);
• Projeto - competências na metodologia do desenvolvimento do projeto,
relacionado com o desenvolvimento da Prova.
A Formação em Contexto de Trabalho (estágio) permitiu-me adquirir e aplicar os
conhecimentos adquiridos em todas áreas do curso que ao longo do ano aprendi.
10
3. Logo tipo do projeto
Construção
Depois de escolher o nome, decidi proceder ao estudo dos logótipos.
No primeiro, desenhei à mão as siglas de “JT” e depois digitalizei, acrescentei o nome
no Ilustrator. A fonte utilizada neste logótipo é o Azo Sans Regular.
Primeira proposta de logótipo da jt media
No segundo, simplifiquei a forma e usei apenas duas cores para fazer um “degradé” de
azul. Utilizei também uma fonte mais “light” e o nome da fonte é o Radikal Thin.
Segunda proposta de logótipo da jt media
Depois de analisar os logótipos, quanto à sua legibilidade, equilíbrio cromático e
estética, selecionei o segundo por considerá-lo mais apelativo.
11
3.1 Estudo de cor do logótipo
Em relação à cor, decidi utilizar apenas uma cor, o azul, visto que é uma cor primária
que resulta bastante nas impressões com fundos de cor e que se concilia facilmente com
outras. É ainda uma cor apelativa para o cliente, tendo aplicado um degradé do mais
escuro para o claro, para criar uma variação.
O azul corresponde ao código RGB (R=0 G=0 B=255), CMYK (C=1 M=1 Y=0 K=0) e
ao RGB WebSafe #0000FF.
12
4. Website do projeto
4.1 Template
O template escolhido para a criação do website encontra-se no W3Schools e chama-se
“Company”. Foi o que considerei mais adequado para um site de multimédia e também
deve-se ao fato de ter Bootstrap.
4.2 Homepage
A página contém três barras de navegação diferentes, que permitem navegar entre a
página inicial e as restantes.
Este menu de navegação será apresentado na página inicial.
Esta barra de navegação é diferente com exeção dos botões “Quem Somos” e o “O Que
Fazemos”, que se mantêm sendo substituídos por um botão “Voltar á página inicial”,
que estará presente na página dos serviços.
13
Esta barra de navegação estará apenas disponível na página “Pedir uma proposta”.
Na Página de entrada existe um banner a desejar as boas vindas à página.
4.3 Quem Somos
Nesta página apresenta-se a introdução da empresa e os seus objetivos.
14
4.4 O Que Fazemos
Depois as descrições de cada serviço.
Fotografia:
15
Programação:
Design:
Áudio e Video:
16
4.5 Portfólio
Aqui estão apresentados todos os trabalhos realizados na empresa, onde pretendemos
mostrar a qualidade das nossas criações ao nível gráfico, técnico e funcionalidade. Estão
divididos em 4 categorias: “Fotografia”; “Programação”; “Design”; “Áudio e Vídeo”.
4.6 Serviços
Esta é a página onde apresentamos o que a empresa faz. Cada painel apresenta cada tipo de
trabalho que a empresa realiza – Fotografia, Programação, Design e Áudio e Vídeo.
Na página de cada serviço que a empresa realiza será possível ver o portfólio dos
trabalhos que já realizámos.
17
Em Fotografia, as imagens do portfólio estão desfocadas, para evitar a identificação de
pessoas e respeitar a sua privacidade.
Programação:
18
Design:
Áudio e Vídeo:
19
4.7 Contactos
Na página de contactos são apresentadas a morada onde se localiza a empresa.
20
4.8 Pedir uma proposta
Nesta página é possível fazer uma proposta de orçamento. O cliente terá que preencher
os seus dados pessoais, escolher o serviço e poderá ainda explicar mais
pormenorizadamente na caixa de mensagem.
21
4.9 Fontes utilizadas no website
A fonte utilizada no website é o Quicksand do Google Fonts.
4.10 Redes Sociais e divulgação
No rodapé estão indicadas as redes sociais mais utilizadas pela empresa, encontra-se o
copyright e um botão para voltar para o topo da página.
4.11 Bilingue
Este site está disponível em 2 idiomas, em português e em inglês.
22
5. Refere ncias
Portal Educação
www.portaleducacao.com.br/marketing/artigos/51648/o-que-e-diagramacao, consultado
em setembro de 2016;
Wikipédia (PT) – Arquitetura de Informação
www.pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3o, consultado
em setembro de 2016;
Conceito – Página Web
www.conceito.de/pagina-web#ixzz4L5kqxMr4, consultado em setembro de 2016;
Tableless – Cor e Webdesign
www.tableless.com.br/sobre-cor-e-webdesign/, consultado em setembro de 2016;
Wikipédia (PT) – Cascading Style Sheets
www.pt.wikipedia.org/wiki/Cascading_Style_Sheets, consultado em setembro de 2016;
Wikipédia (PT) – Linguagens de Programação
www.pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o, consultado
em outubro de 2016;
Primeiro Filme – Noções básicas
www.primeirofilme.com.br/site/o-livro/nocoes-basicas-da-estrutura-de-um-filme/,
consultado em outubro de 2016;
Wikipédia (PT) – Roteiros
www.pt.wikipedia.org/wiki/Roteiro#Tipos_de_produ.C3.A7.C3.A3o_do_roteiro/,
consultado em outubro de 2016;
Slideshare
www.pt.slideshare.net/ricardobarrosdemiranda/workshop-direo-de-programas-de-tv-2-
parte-28629677/, consultado em outubro de 2016;
Narrativa do Cinema - Elipse
www.narrativadocinema.wordpress.com/glossario/, consultado em outubro de 2016;
You On Group - Raccords
www.youongroup.com/pt/move/o-que-sao-raccords/4-123/, consultado em outubro de
2016;
23
Shot Fotografia
www.shotfotografia.com, consultado em outubro de 2016;
KOBU
www.kobu.pt, consultado em outubro de 2016;
Ideia Magenta
www.ideiamagenta.pt, consultado em outubro de 2016;
Orange Ideias Criativas
www.orangeideiascriativas.com, consultado em outubro de 2016;
DDB
www.ddb.pt, consultado em outubro de 2016;
BrandLine
www.brandline.com.pt, consultado em outubro de 2016;
W3Schools
www.w3schools.com, consultado em janeiro de 2017;
Bootstrap
www.getbootstrap.com, consultado em janeiro de 2017;
Google Fonts
www.fonts.google.com, consultado em fevereiro de 2017;
PHPMailer
www.github.com/PHPMailer/PHPMailer, consultado em maio de 2017;
24
6. Conclusa o do projeto
Durante estes três anos de curso evolui ao nível das competências técnicas na área de
multimédia. Inscrevi-me no curso com o objetivo de seguir programação de dispositivos
móveis, porque é o que quero prosseguir.
A dedicação, esforço e devoção aos estudos foram alguns dos meus requisitos para
obter bons resultados, com o objetivo de me proporcionar um bom futuro. Mesmo que
para muitos o ensino profissional seja visto como um ensino técnico e mais prático,
pretendi demonstrar que gostei de fazer este curso.
Gostei da formação em contexto de trabalho, por me permitir ter uma visão mais
abrangente e esclarecida de como é o mundo do trabalho, incentivando-nos a seguir os
nossos sonhos.
No que se refere ao Projeto de Aptidão Profissional, depois de tanto esforço e stress,
consegui concluir esta prova. Agora, no final, é bastante agradável verificar que o
projeto foi produtivo e que esse esforço foi e é valorizado.
25
7. Anexos
7.1 Anexo 1 - Anteprojeto
AGRUPAMENTO DE ESCOLAS DE SALVATERRA DE MAGOS
ESCOLA BÁSICA E SECUNDÁRIA DE SALVATERRA DE MAGOS
Curso Profissional de Multimédia
Pré-plano de Prova de Aptidão Profissional
Ano: 2016/2017
Identificação do Grupo:
Nº Turma Nome
15 12ºI José Torcato Correia Vítor
Tema
Construção de um website comercial de serviços e desenvolvimento de
conteúdos multimédia.
Objetivos Aplicar os conhecimentos adquiridos ao longo do Curso de Formação Profissional de Técnico de Multimédia.
Promover e divulgar os serviços comercializados através da plataforma do website da empresa. Implementar um plano de desenvolvimento para o respetivo website. Gerir o plano de implementação através de uma ferramenta de planeamento de atividades.
Descrição Sumária
A plataforma do website, vai ter 4 linhas de negócios distintos a saber:
• Fotografia; • Programação; • Design;
26
• Áudio e Vídeo.
Destina-se, à comercialização do grupo de serviços acima descritos, vai ser implementado num prazo nove meses, cuja entrada em produção está prevista para meados de Junho de 2017. As funcionalidades principais da plataforma a desenvolver são:
• Registo de utilizador/cliente; • Área exclusiva e reservada ao utilizador/cliente; • Certificação do endereço de e-mail do cliente; • Multilíngue parametrizável e de acordo com a opção escolhida
pelo utilizador/cliente; • Pedidos de orçamento;
• Demonstrações e portfólios de trabalhos efetuados.
O objetivo da empresa é disponibilizar conteúdos e serviços de multimédia para micro e pequenas empresas fora dos grandes centros urbanos, cujo o acesso a estes serviços e os seus próprios orçamentos, são limitados.
Materiais necessários
Softwares:
• MySQL para base de dados; • Framework com Bootstrap; • Adobe Dreamweaver para edição e desenvolvimento.
Espaços para o desenvolvimento da plataforma:
• Instalações escolares; • Residência do aluno;
Equipamentos físicos:
• Estação de trabalho; • Servidor para as camadas de apresentação, aplicação e base de dados.
Professor responsável (Sugestão) O professor responsável será definido em sede de Conselho de Turma
Salvaterra de Magos, 8 de Novembro de 2016
O Diretor de Curso
27
7.2 Anexo 2 - Gantt
28
29
