RELATÓRIO CRÍTICO Prova de Aptidão Profissional João Vitorino, João Tavares e Miguel Gonçalves Curso Profissional Técnico de Multimédia Turma I e números 13, 14 e 19 Salvaterra de Magos Julho de 2017
João Vitorino, João Tavares e Miguel Gonçalves Curso Profissional Técnico de Multimédia Turma I e números 13, 14 e 19 SUMÁRIO Relatório das atividades do Projeto Associação Teatral Revisteiros desenvolvido como requisito parcial dos módulos curriculares, supervisionado pelo Prof. António Andrade, Prof. Alice Pereira e Prof. Teresa Fazenda, no curso Profissional Técnico de Multimédia. Salvaterra de Magos Julho de 2017
Escola Básica e Escola Básica e Secundária de Salvaterra de Magos Agradecimentos
Escola Básica e Escola Básica e Secundária de Salvaterra de Magos Desde já gostaríamos de agradecer ao professor António Andrade, professora Alice Pereira e professora Teresa Fazenda que nos apoiaram neste Projeto de Aptidão Profissional. E também à professora Ana Paquete que nos ajudou na escrita para que não cometêssemos erros ortográficos. Gostaríamos também de agradecer ao nosso amigo Ricardo Bucho, que nos deu umas dicas para a realização do nosso site. 4
Índice Introdução... 6 Desenvolvimento... 8 Pesquisa... 9 Planeamento do Site... 9 AnteProjeto... 10 Primeira Proposta de Logótipo... 10 Reformulação do Projeto de Aptidão Profissional... 11 Primeira Proposta de Logótipo... 11 Segunda Proposta de Logótipo... 14 Desenvolvimento do Site... 16 Criação da Base de Dados... 31 Criação de uma Intro... 33 Conclusão... 35 Sítios na internet... 37 5
Introdução 6
Este relatório reflete o trabalho desenvolvido no nosso site intitulado Associação Teatral Revisteiros. Tivemos várias ideias para desenvolver o nosso projeto a partir de um tema relativo a um jogo chamado Counter-strike: Global Offensive onde obtivemos um cliente que, mais tarde, nos deixou de responder. Reformulámos a nossa ideia de site e obtivemos a oportunidade de fazer um site para a Associação Teatral Revisteiros que é o nosso atual cliente. Este site permitirá aceder a informações sobre a Associação Teatral Revisteiros, as suas peças e as datas de exibição das mesmas. Permitirá ainda ter acesso a uma galeria de imagens e possibilitará inscrições para as pessoas introduzirem os seus dados pessoais ( nome, e-mail e número de telefone) para obterem informações sobre as novidades promovidas pela Associação Teatral Revisteiros. 7
Desenvolvimento 8
Pesquisa De início, fizemos uma série de pesquisas, tais como a Tipologia do projeto, no nosso caso na área da web, seguido do Estado da Arte, uma pesquisa sobre os bons e maus exemplos relacionados com o nosso plano de site. Ambas as pesquisas foram apresentadas a toda a turma. Planeamento do Site Ao acabarmos as pesquisas, começámos a planear o nosso projeto. No início, pensámos fazer uma aplicação informativa para telemóvel Android. Tinha como tema o jogo Counter-strike: Global Offensive e tinha como objetivos mostrar os resultados obtidos por equipas profissionais em torneios oficiais, mostrar as equipas e futuros jogos que iriam decorrer. Como segunda hipótese, pensámos realizar um site com o mesmo objetivo da app, mostrar resultados de jogos feitos por equipas profissionais em torneios oficiais. Na terceira hipótese e escolhida, falámos com uma organização portuguesa que organiza torneios de Counter-strike: Global Offensive, era o nosso cliente, iriamos realizar um site de torneios onde as equipas se podiam inscrever, colocaríamos informações dos resultados, tabelas de pontuação e stream s (um sistema para ver os jogos do torneio em direto), mas ocorreu um problema de comunicação e o nosso cliente deixou de responder, por isso tivemos de fazer uma reformulação. 9
AnteProjeto Realizámos o preenchimento de um documento sobre a identificação do grupo, o tema, os objetivos do projeto, a descrição sumária e os materiais necessários para a realização do projeto a fim de passar pelo processo de aprovação por parte do Conselho Pedagógico. Primeira Proposta de Logótipo Começámos por realizar a parte gráfica do site, o logótipo, elaborando a primeira proposta. Este logótipo foi criado e trabalhado no photoshop, usámos alguns elementos no logótipo, tais como um brasão e taças para simbolizar o torneio, um homem com uma arma para simbolizar o jogo. As cores usadas no logótipo foram inspiradas também no jogo derivado da equipa azul e laranja. 10
Reformulação do Projeto de Aptidão Profissional Devido à ausência de comunicação com o antigo cliente, reformulámos o tema do site. Quando um membro do nosso grupo iniciou o seu estágio na Associação Teatral Revisteiros, surgiu a ideia de fazer um site. Como a Associação não tinha nenhum, oferecemo-nos para realizar um. Passou assim a ser um site dirigido à Associação Teatral Revisteiros. Primeira Proposta de Logótipo Começámos este logótipo no photoshop. Criámos uma circunferência e focámo-nos mais na cor azul (r-38, g-107, b-116), que representa a vivacidade com que são representadas as peças de teatro pelos atores, daí ser uma cor mais fria. 11
Separámos as palavras do nome da Associação, cada uma com um tipo de letra. O primeiro tipo de letra, Neou, foi usado na palavra Associação que levou uma barra de cor branca (r-241, g-218, b-219) por trás para ficar com mais destaque. O segundo tipo de letra, LEIXO, foi usado na palavra Teatral com a mesma cor branca da barra já mencionada. O terceiro e final tipo de letra, Neo-Writer, foram usados na palavra Revisteiros. Inserimos máscaras para simbolizar o teatro. 12
E assim finalizámos a nossa primeira proposta de logótipo, adicionando setas em forma de L para destacar a palavra teatral. 13
Segunda Proposta de Logótipo Como no primeiro logótipo, começámos este logótipo no photoshop. Como base do nosso primeiro logótipo usámos uma circunferência com um Drop Shadow de sombra azul (r-19, g-187, b-189) voltamos a utilizar uma máscara para simbolizar o teatro. Desta vez um azul mais claro, mas a representar o mesmo. 14
Para o primeiro tipo de letra foi usado o Flexure, aplicámos um efeito de Drop Shadow de sombra azul no texto também de cor azul, a mesma cor usada na circunferência. Já no segundo tipo de letra usámos o NEOTERIC Bold. Como resultado final da segunda proposta, inserimos esta disposição dos elementos acima referidos, acrescentando uma linha com Drop Shadow de sombra azul, separando as iniciais do nome completo da Associação Teatral Revisteiros. Usámos este logótipo como escolha final. 15
Desenvolvimento do Site No início da realização do site, chegámos à conclusão de que, hoje em dia, as pessoas usam os seus telefones para aceder à internet. Então, começámos a realizar o nosso site em bootstrap que é um framework front-end, que facilita a vida dos programadores a criar sites com tecnologia móvel. Utilizamos como template para o nosso site o template chamado Company. Na página inicial do nosso site aparece a proposta de logótipo que escolhemos para ser o logótipo oficial, usámos uma navbar que nos permite navegar pelo site e tem também uma imagem do palco da Associação, o nome da Associação e um pequeno slogan. 16
Clicando no menu História, o site move-se mostrando a secção da história da Associação. Seguido dos Projetos fixos da Associação onde existe uma pequena informação sobre cada um, a qual se divide por: Carnaval 17
Animação Infantil / Teatro Infantil Galas Show Moda 18
E por último a Passerelle d ouro. Indo ao menu de Galeria de imagens, vamos encontrar várias categorias de imagens. Em Tudo vamos encontrar as imagens de todos os Projetos fixos dinamizados pela Associação assim como nas outras categorias. 19
Carnaval Categoria Teatro/Animação infantil 20
Galas Show Moda 21
E por fim Passerelle d ouro. Por último, na página inicial, encontramos os contactos. Clicando no menu Contactos, vamos obter o endereço e os contactos da Associação Teatral Revisteiros. 22
Realizámos um sistema de lógin. Na página de inscrição inserimos um formulário, ligando-o à base de dados, permitindo assim que a pessoa se torne membro do nosso site introduzindo o seu nome, e-mail, palavra-passe e número de telemóvel. Ao realizar a inscrição, irá aparecer uma mensagem informando que a conta foi criada com sucesso. 23
Criada a conta, o usuário poderá iniciar a sua sessão utilizando o seu e-mail e palavrapasse. Poderá ocorrer um engano nos dados no início de sessão. Nesse caso irá aparecer uma mensagem dizendo que o início da sessão falhou. 24
Iniciada a sessão, o usuário entra numa página de saudação. O usuário poderá navegar no site com a sua sessão iniciada, clicando no menu Página Inicial. 25
E poderá consultar tudo o que precisa de saber dentro da sua conta. Assim, estando registado, os administradores do site poderão ver as informações dos membros. Caso o utilizador precise mudar os seus dados pessoais, pode aceder ao menu Perfil. Atualizando o seu perfil verá aparecer uma mensagem informando que o seu perfil foi atualizado com sucesso. 26
Onde vai poder editar o seu perfil e até adicionar uma imagem sua pela resolução de 200 por 200 px. Criámos também contas para administradores onde o que muda em relação aos membros são apenas as permissões, indo ao menu Administração. Clicando no botão Membros o administrador encontra o que precisa de saber acerca dos usuários. 27
O administrador encontrará lá os seus dados, de outros administradores e dos membros (nome, e-mail e telemóvel). Poderá também selecionar os membros, se são administradores do site ou não. Poderá também remover utilizadores do registo. 28
O administrador têm também o poder de criar o próximo evento que irá decorrer futuramente indo ao menu Administrador clicando no botão Adicionar Evento. Clicando no botão, o administrador entra numa página onde consegue criar o novo evento. 29
Criado o evento, quando o utilizador entrar na sua conta poderá ver os eventos que irão decorrer futuramente, clicando no menu Eventos. O administrador também consegue aceder a esse menu. 30
Criação da Base de Dados 31
Criámos a base de dados e demos-lhe o nome de pap_login. Criámos uma única tabela. Na estrutura da base de dados, insere-se o campo imagem que permite ao utilizador colocar uma imagem sua no seu perfil, o nome, e-mail, palavra-passe e telemóvel que permite a pessoa registar-se no nosso site, o número de utilizador, que é o número de identificação oculto a cada membro registado com um sistema auto-increment, e finalmente o campo administrador. Aí, quando o seu número é 0, a pessoa é um membro mas quando o número é 1 já passa a administrador. 32
Criação de uma Intro 33
Criámos uma intro com o logótipo escolhido. Usámos uma transição chamada card wipe aparecendo pedaços do logótipo e, no fim da transição, o logótipo junta-se, concluindo a intro com um efeito CC Light Sweep que dá um efeito de luz de cima para baixo na diagonal do logótipo, isto tudo acompanhado com uma música sincronizada. 34
Conclusão 35
Com a finalização do projeto, concluímos que conseguimos desenvolver as capacidades técnicas e estéticas exigidas para este nível de ensino e aplicá-las na nossa Prova de Aptidão Profissional. No entanto, também nos deparámos com algumas dificuldades/obstáculos na realização do projeto, nomeadamente na implementação dos códigos e automatismos necessários para que o sistema de login funcionasse. 36
Sítios na internet 37
https://www.youtube.com/watch?v=ueo_nlnytp0 https://www.w3schools.com/ https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp https://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp https://www.w3schools.com/bootstrap/bootstrap_navbar.asp https://www.w3schools.com/bootstrap/bootstrap_forms.asp https://www.youtube.com/watch?v=nmk6b5mwek4 https://www.youtube.com/watch?v=rh4vdbjyy9q https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp 38
Anexos Escola Básica e Secundária de Salvaterra de Magos
Manual de Normas do Logótipo Final
Gantt Para nos guiarmos com o tempo utilizámos a ferramenta Gantt para distribuirmos as tarefas e gerir bem o nosso tempo.