escola básica e secundária de salvaterra de magos...
TRANSCRIPT
Escola Básica e Secundária de Salvaterra de Magos
RELATÓRIO CRÍTICO
Prova de Aptidão Profissional
João Paulo Rodrigues Ribeiro
Simão Pedro Lopes Vidigal
Curso Profissional Técnico de Multimédia
12ºI Nº15
12ºI Nº24
Salvaterra de Magos
Julho de 2019
2
Escola Básica e Secundária de Salvaterra de Magos
João Paulo Rodrigues Ribeiro
Simão Pedro Lopes Vidigal
Curso Profissional Técnico de Multimédia
12ºI
Sumário
Relatório das atividades do Projeto “AESM
Sports” desenvolvido como requisito parcial dos
módulos curriculares, supervisionado pelos
Professores Alice Pereira e Teresa Fazenda e
Fátima Ferreira no Curso Profissional Técnico de
Multimédia.
Salvaterra de Magos
Julho de 2019
3
ÍNDICE
Introdução ......................................................................................................................... 5
Desenvolvimento .............................................................................................................. 6
Estrategia de abordagem .................................................................................................... 6
Softwares usados para a elaboração do projeto .......................................................... 6
Conceção da ideia ..................................................................................................................... 7
Logótipo .................................................................................................................................... 8
Paleta cromática ..................................................................................................................... 10
Maqueta do Site ...................................................................................................................... 11
Construção do Site .......................................................................................................... 15
1ªfase – Template ................................................................................................................... 15
2ª fase – Pesquisa ................................................................................................................... 16
3ª fase – Conceção do Site ...................................................................................................... 18
Edição de imagem ................................................................................................................... 23
Resultado Final ........................................................................................................................ 24
vídeo ................................................................................................................................ 29
Edição do vídeo ....................................................................................................................... 29
reformulação ................................................................................................................... 30
Conclusão ........................................................................................................................ 32
Bibliografia ..................................................................................................................... 33
anexos ............................................................................................................................. 34
Carta escrita ao Diretor do Agrupamento .............................................................................. 34
Gantt ....................................................................................................................................... 35
Modelo ante projeto ............................................................................................................... 36
Guião Técnico .......................................................................................................................... 37
4
Agradecimentos
Ao longo do nosso projeto, tivemos a ajuda e a colaboração de várias pessoas que foram
fundamentais e importantes para a concretização do mesmo.
Queremos agradecer especialmente a todos professores de educação física porque foram
as peças fundamentais do nosso projeto, que nos disponibilizavam as informações que
nos eram necessárias e aos participantes do desporto escolar que sem eles o nosso
trabalho não era possível.
Deixamos também o nosso agradecimento ao Sr.Alberto Magalhães Correia, Diretor do
Agrupamento de Escolas de Salvaterra de Magos, assim como ao nosso núcleo de
professores que nos ajudavam quando as dificuldades apareciam.
5
INTRODUÇÃO
Com o nosso projeto de Aptidão Professional pretendemos criar um site que divulgue e
dinamize o desporto escolar no Agrupamento de Escolas de Salvaterra de Magos. Para
dar comprimento ao nosso objetivo, solicitámos autorização ao diretor para criar um site
para divulgar as atividades extracurriculares da escola, nomeadamente no âmbito
desportivo.
Assim, contactámos os professores responsáveis pelo projeto desporto escolar, com o
intuito de obtermos a informação necessária acerca dos grupos-equipa a funcionar, bem
como os respetivos horários, espaços e professores responsáveis. Em seguida
fotografámos o torneio interturmas de final do 1º Período.
Posteriormente, capturámos as imagens que estão pintadas nas paredes do ginásio, para
servir de apoio para a construção do logótipo, que começámos a desenvolver logo de
seguida. Após a conclusão do logótipo, a construção do site revelou-se como uma das
maiores dificuldades do nosso trabalho. Inicialmente, optámos por procurar uma
template e proceder às alterações necessárias. No entanto, verificámos que esta
modalidade nos trazia ainda mais constrangimentos e por isso decidimos construir o site
a partir do zero.
Ao mesmo tempo que íamos desenvolvendo o site, fomos também fazendo capturas de
imagem e vídeo para enriquecer o projeto. Assim, o site apresenta também todas as
modalidades constantes do projeto do desporto escolar, com imagens alusivas, horário
de treinos e professores responsáveis, sendo de fácil acesso e consulta.
6
DESENVOLVIMENTO
Estrategia de abordagem
Recolha de informação em sala de aula;
Elaboração de uma carta ao diretor para solicitar a nossa proposta;
Recolha de imagens e vídeos dos diferentes desportos para o projeto;
Elaboração do logótipo;
Construção de uma maqueta para o design do site;
Concepção do site;
Elaboração do vídeo;
Softwares usados para a elaboração do projeto
Gantt - Onde foi estabelecida toda a calendarização, metas e tarefas.
Microsoft Word - Onde redigimos a carta ao diretor e explicar a nossa ideia de (PAP) e
o nosso relatório final.
Microsoft Ecxel – Onde construimos o Guião Técnico do vídeo.
Adobe Premiere Pro - Edição e montagem de todo o vídeo.
Adobe Illustrator - Onde criamos o logotipo.
Adobe Photoshop - Edição de imagens.
Adobe Dreamweaver – Programa de construção de todo o site.
7
Conceção da ideia
A escolha do tema resultou da decisão dos dois elementos do grupo, que consideraram
importante desenvolver algo relacionado com o desporto escolar, mais concretamente
para a divulgação do mesmo, para que os alunos sentissem motivação em experimentar
as atividades desportivas que a nossa Escola oferece.
Ambos concordámos criar um site sobre o desporto escolar e enriquecê-lo com um
vídeo promocional para que os alunos pudessem ter ideia mais concreta dos treinos e
dos torneios.
Depois da ideia ter sido estabelecida e divulgada, fomos consultar os professores
responsáveis para sabermos que desportos existiam, os espaços que utilizavam, quem os
lecionava e os respetivos horários. Em seguida, começámos a pensar em ideias para
criar um logótipo para o site. Tínhamos como objetivo desenvolver um logótipo que
imprimisse a nossa “marca” e por isso excluímos os já existentes nesta área.
Resolvemos usar as vinhetas desportivas, que estão desenhadas à volta do pavilhão do
Agrupamento, e utilizá-las, de alguma maneira, no nosso logótipo para que houvesse
uma associação maior à escola.
8
Logótipo
Para a elaboração do logótipo começámos por pesquisar na internet alguns logótipos
desportivos. Após muita pesquisa surgiu a ideia de utilizar as vinhetas desportivas
pintadas pelos alunos da nossa escola no pavilhão. Depois de tiradas as fotografias das
vinhetas, limpámos, editámos e vetorizámo-las para não deformarem, caso fosse preciso
utilizar nos mais diversos tamanhos.
Figura 1 - Primeiro Esboço do Logótipo
Figura 2 - Segundo Esboço do Logótipo
9
Figura 3 - Proposta Final do Logótipo
Figura 4 - Logótipo Final
As figura 3 e 4 foram as nossas propostas escolhidas para usarmos como nosso logótipo,
excluindo-se as figuras 1 e 2 por não irem ao encontro do que se procurava, devido à
dificuldade de leitura das mesmas.
Decidimos recriar os anéis do logótipo dos jogos olímpicos, fizemos esta escolha para
que ao ser visto fosse fácil fazer uma associação ao maior evento desportivo do mundo.
Foi colocado o texto “AESM SPORTS” que são as inicias do nosso agrupamento e o
“SPORTS” para que se soubesse que se trata de algo ligado ao desporto, decidimos
escrever em inglês porque pensamos que capta mais a atenção de quem lê e de quem
ouve.
As cores utilizadas foram, mais uma vez, as mesmas do logótipo dos jogos olimpicos,
para que não se perdesse a ligação à área desportiva.
10
Paleta cromática
Logótipo:
#156CA3 – Azul
#FFB20D – Amarelo
#090609 – Preto
#0F7D30 – Verde
#FB0F23 – Vermelho
Site:
#224087 – Azul (Barra de navegação, Rodapé, Botão “voltar ao topo”, Botões das
galerias de imagens)
#686869 – Cinzento (Botão “voltar ao topo” quando o cursor está em cima)
11
Maqueta do Site
12
13
14
O nosso site vai ter a disposição acima apresentada nas imagens. Escolhemos a cor azul
para a barra de navegação e para o rodapé, pois é a que nos foi fornecida, sendo a cor
que iria ser utilizada no site da escola, tal como o tipo de letra (Candara).
A barra de navegação é constituída por três separadores (página inicial, desportos e
informações). Dentro do separador dos desportos podemos encontrar outros oito
separadores dedicados a cada desporto existente na nossa escola lecionados no ano
letivo 2018/2019. Cada separador desportivo contém uma galeria de imagens, onde se
pode ver alguns exemplos de como funcionam os treinos, encontros entre escolas e
torneios, e contém também o professor responsável, horário e local onde é lecionado.
Por fim, encontra-se o separador das informações, que contem mais uma vez uma
galeria, mais generalizada onde podemos encontrar fotografias dos megas fase distrital,
corta mato e interturmas. Inserimos também os responsáveis pelo desporto escolar no
nosso agrupamento (Presidente do Clube do Desporto Escolar e a Coordenadora do
Desporto Escolar).
O rodapé é igual para todos os separadores e possui um botão de ligação ao facebook,
que quando pressionado abre noutro separador a página do facebook da escola; contém
ainda a morada, o telefone e fax do Agrupamento; por fim, encontram-se os logótipos
associados ao projeto(Agrupamento Escolas de Salvaterra de Magos, Desporto Escolar,
Programa 2020, POCH e União Europeia).
15
CONSTRUÇÃO DO SITE
1ªfase – Template
Inicialmente começamos por trabalhar na template que nos foi fornecida pelo professor
José Nunes, template esta que iria ser utilizada no novo site que a escola iria construir,
como tal optámos por tentar utilizá-la também.
Figura 5 - Template Inicial
Avançámos com a template, começamos por modificar a mesma com os dados, mas
após algum tempo começámos a ter algumas dificuldades em conseguir mexer na
template ao nosso gosto. Então acabámos por desistir dela e optámos por avançar com
um site de raiz.
16
Figura 6 - Barra de Navegação
2ª fase – Pesquisa
Após termos encontrado algumas dificuldades na edição da template e termos chegado a
um consenso para construir um site de raiz, fomos procurar componentes para arrancar
com o mesmo.
Iniciámos a pesquisa de todos os componentes necessários para a elaboração do projeto
e fazer com que ficasse o mais semelhante à maqueta apresentada anteriormente.
Figura 7 - Reprodutor de Video
17
Figura 8 - Botão de voltar ao topo da página
Figura 9 - Galeria de Fotos
18
3ª fase – Conceção do Site
Depois de reunirmos todos os componentes necessários, passámos para a edição dos
mesmos.
Figura 10 - Barra de Navegação v.1
Figura 11 - Barra de Navegação v.2
Figura 12 - Barra de Navegação v.3
Figura 13 - Barra de Navegação Final
19
Figura 14 - Galeria v.1
Figura 15 - Galeria v.2
20
Figura 16 - Botão Voltar ao Topo Figura 17 - Botão Voltar ao Topo (Hover)
Figura 18 - Facebook Icon Figura 19 - Download Icon
Figura 20 - Logótipo do Agrupamento Figura 21 - Logótipo Desporto Escolar
21
Figura 22 - Logótipo Programa 2020 Figura 23 - Logótipo POCH
Figura 24 - Logótipo União Europeia
22
Após termos todo o material necessário pronto para a conceção do site, estava na altura
de o programar. Para tal, usámos o Adobe Dreamwaever, tal como já tínhamos referido.
A escolha deste software foi óbvia, por ter sido um dos softwares lecionados durante o
curso, e que ambos os elementos do grupo dominavam melhor. Também nos foi
sugerido que trabalhássemos com o wordpress, mas por falta de conhecimentos do
software não avançámos com essa sugestão.
23
Edição de imagem
Antes de aplicarmos todas as fotografias no site, tivemos o cuidado de redimensionar
todas para o mesmo tamanho (4032 x 3024), para não existir desiquilibrios a quando as
páginas fossem executadas em dispositivos com ecrãs de menores dimensões.
Posteriormente foram todas guardadas em formato de web, para que o todo o site, tenha
um maior desempenho, ou seja, demorar menos tempo a carregar todos os componentes,
para que seja possivel executálo com conexões mais lentas.
24
Resultado Final
Figura 25 - Página Inicial
Figura 26 – Andebol
25
Figura 27 – Badminton
Figura 28 – Boccia
26
Figura 29 – Futsal
Figura 30 – Natação
27
Figura 31 - Natação Adaptada
Figura 32 – Ténis
28
Figura 33 - Ténis de Mesa
Figura 34 – Informações
29
VÍDEO
Com o intuito de enriquecer o nosso projeto, concordámos em realizar um vídeo a
apelar ao desporto escolar. Para tal capturará-mos vídeos das mais diversas atividades
desportivas que se realizaram na nossa Escola (Andebol, Futsal, Tenis de Mesa,
Natação, Badminton, Corta Mato, Boccia e Voleibol).
Para a edição do vídeo usámos o software da Adobe Premiere Pro, software esse que foi
lecionado no decorrer do curso.
Tínhamos como objetivo realizar um vídeo curto, em que se conseguisse mostrar um
pouco de tudo o que se passa na nossa Escola a nível desportivo.
Achámos importante inserir um vídeo no nosso site (página inicial), pois a imagem em
movimento é fundamental para captar a atenção e faz com que o espectador retenha
mais informação.
Edição do vídeo
O vídeo tem uma introdução de 9 segundo, foi editada no Adobe After Effects; devido a
não nos sentirmos à vontade com o programa, optámos por pesquisar intros editáveis,
aplicando posteriormente as alterações necessárias. Segue-se cortes de imagens das
modalidades, com a duração de 1 segundo cada: remates de andebol e futebol, serviço
de ténis de mesa, mergulho e novamente um serviço de badminton; optámos por deixar
o som original da captura no vídeo; após estes pequenos excertos de cada desporto
fizemos um efeito de rewind (ao contrário), copiámos os clips, invertemos a orientação
de reprodução e aplicámos um efeito sonoro de rebobinar para se tornar mais percetível
a ideia. Posteriormente acontece um blackout (um apagão) com a duração inferior a 1
segundo, aparecendo logo excertos de imagens do corta mato, com a duração de 3
segundos, em que também se aplicou o efeito de rewind. Depois veêm-se imagens de
um lançamento de boccia, com 3 segundos de duração, seguidas de excertos de andebol,
de futsal, de ténis de mesa e de voleibol com 1s, 3s e 6s, respetivamente. Neste último
corte aplicou-se um fade out a partir dos 2s de duração. Não foi aplicado qualquer efeito
de transição, simplesmente fizemos os cortes nos sítios certos, para impor mais ritmo ao
vídeo. A musica de fundo é sempre a mesma, tem inicio aos 19 segundos de vídeo,
tendo só um fade out no final. Para acabar o nosso vídeo, encontra-se uma frase “Junta-
te a nós”, com a intenção de apelar a pratica de desporto na nossa Escola. Por fim
exportámos o vídeo no formato f4v (formato de arquivo usado para fornecer vídeo na
Internet)
30
REFORMULAÇÃO
Após o projeto ter passado pela equipa de validação de provas, foi sugerido uma
reformulação ao nosso projeto, seguimos as instruções e colocamo-las em prática tendo
ficado assim o produto final:
Modificámos a cor das letras para a cor azul que estava na barra de navegação e no
rodapé, eliminamo-las tornando-o mais leve e limpo.
Alterámos o menú “Página Inicial” para “Início”. Retificamos todas as imagens que
estavam com barras pretas em seu redor para ter mais equilíbrio e homogeneidade.
31
Por fim criamos um menú para a galeria que estava anteriormente em conjunto com as
informações, ficando o menú informações mais simples e objetivo.
32
CONCLUSÃO
Concluído o Projeto de Aptidão Profissional, olha-mos para trás e vemos todos os
problemas que enfrentámos. Conseguimos comprir com tudo a que nos propusemos,
mesmo com os problemas que foram aparecendo, nomeadamente conseguir com que o
site ficasse responsive (auto ajustar-se ao tamanho dos mais variádos ecrãs). Esperamos
que este projeto venha a ter alguma utilidade para o Agrupamento. É de salientar que
para realizar alguma alteração futura no site, é necessário algum conhecimento de
código html, css e java. Também esperamos ter conseguido transmitir algumas das
competencias adquiridas ao longo do curso. Apesar de no inicio acharmos que o Gantt
não nos iria servir de muito, ao longo do tempo revelou-se um mais valia, pois permitiu
que analisássemos com mais precissão quanto tempo ainda nos restava, e as tarefas que
teriamos que realizar
33
BIBLIOGRAFIA
https://www.w3schools.com/html/html_responsive.asp
https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
https://www.w3schools.com/html/html5_video.asp
https://www.w3schools.com/howto/howto_js_slideshow.asp
https://www.w3schools.com/howto/howto_css_image_responsive.asp
https://br.freepik.com/vetores-gratis/icones-para-redes-sociais-vector-design-
ilustracao_2763311.htm#page=1&index=0&query=facebook
https://designmodo.com/responsive-slider/
https://br.freepik.com/vetores-gratis/abaixo-colecao-seta-icon_837847.htm
https://br.freepik.com/vetores-gratis/colecao-de-setas-coloridas-em-design-
plano_1071006.htm
https://shareae.com/
34
ANEXOS
Carta escrita ao Diretor do Agrupamento
35
Gantt
36
Modelo ante projeto
37
Guião Técnico