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 1
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 2
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. 3
Í 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 4
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. 5
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 relacionase 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. 6
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. 7
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 8
(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. 9
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. 10
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. 11
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. 12
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. 13
4.4 O Que Fazemos Depois as descrições de cada serviço. Fotografia: 14
Programação: Design: Áudio e Video: 15
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. 16
Em Fotografia, as imagens do portfólio estão desfocadas, para evitar a identificação de pessoas e respeitar a sua privacidade. Programação: 17
Design: Áudio e Vídeo: 18
4.7 Contactos Na página de contactos são apresentadas a morada onde se localiza a empresa. 19
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. 20
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. 21
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; 22
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; 23
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. 24
7. Anexos 7.1 Anexo 1 - Anteprojeto AGRUPAMENTO DE ESCOLAS DE SALVATERRA DE MAGOS ESCOLA BÁSICA E SECUNDÁRIA DE SALVATERRA DE MAGOS Identificação do Grupo: Curso Profissional de Multimédia Pré-plano de Prova de Aptidão Profissional Ano: 2016/2017 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; 25
Á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 26
7.2 Anexo 2 - Gantt 27
28
29