• 1. Relatório da Prova de Aptidão Profissional « Execução de Projectos Reais » Nome do autor: Cesário Rafael Baía Alves Nome do professor acompanhante: João Delgado Curso Técnico de Desenho Gráfico Junho, 2009
  • 2. Curso Técnico de Desenho Gráfico Execução de projectos reais Escola Profissional de Braga Gerir Formação, Gerar Mundança Execução de Projectos Reais “Componente escrita da PAP – Projecto pessoal e integrador de todos os saberes e capacidades desenvolvidos ao longo da formação, realizado de acordo com a Portaria 550-C / de 21 de Maio de 2004, consiste na apresentação e defesa, perante um júri, de um projecto, consubstancio num produto, material ou intelectual, numa intervenção ou numa actuação, bem como respectivo relatório final de realização e apreciação crítica, demonstrativo de saberes e competências profissionais, ad- quiridos ao longo da formação e estruturante do futuro profissional. A PAP será realizada na Escola Profissional de Braga, na 1ª chamada da época normal de 2008/2009, através do qual se obterá o diploma de qualificação profissional de nível III do Curso Técnico de Desenho Gráfico.” Cesário Rafael Baía Alves 2
  • 3. Curso Técnico de Desenho Gráfico Execução de projectos reais Agradecimentos Cesário Rafael Baía Alves 3
  • 4. Curso Técnico de Desenho Gráfico Execução de projectos reais Agradecimentos Durante a elaboração da Prova de Aptidão Professional qualquer ajuda é importante portanto a colaboração de todos aqueles que estão à nossa volta é preciosa. Começo por agradecer ao pro- fessor Acompanhante João Delgado, João Teixeira por todo o apoio prestado e por me ter orientado neste percurso tão importante para a conclusão do curso. Gostaria também de agradecer à Professora de Português Teresa Machado por se disponibilizar a corrigir o relatório e por me ter guiado neste caminho tão importante para o fim do curso. Para a realização de todo o projecto não posso deixar de agradecer à minha família, amigos e a toda a gente que de alguma forma esteve envolvida na realização deste projecto. A todos eles o meu muito obrigado. Cesário Rafael Baía Alves 4
  • 5. Curso Técnico de Desenho Gráfico Execução de projectos reais Índice Cesário Rafael Baía Alves 5
  • 6. Curso Técnico de Desenho Gráfico Execução de projectos reais Índice 1. Introdução 07 3. Conclusão 162 2. Desenvolvimento 11 4. Referências Bibliográficas 164 2.1 Componete Teórica 12 5. Anexos 166 2.1.1 Software Utilizado 13 5.1 Anexo A - Catálogo 167 2.1.1 Linguagens de Programação 19 5.2 Anexo B - Websites 169 5.3 Anexo C - Suportes Publicitários 188 2.2 Apresentação de Projectos 24 5.4 Anexo D - Defenição do Projecto 192 2.2.1 Projecto 1 5.5 Anexo E - Portfolio 194 FUNDAÇÃO BRACARA AUGUSTA 25 2.2.2 Projecto 2 GINÁSIO OXY GYM 67 2.2.3 Projecto 3 JUNTA DE FREGUESIA MAXIMINOS 75 2.2.4 Projecto 4 SUPORTES PUBLICITÁRIOS 155 Cesário Rafael Baía Alves 6
  • 7. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Cesário Rafael Baía Alves 7
  • 8. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Enquadramento legal da prova (Portaria 550C/2004 de 21 de Maio de 2004) Como Aluno Finalista da Escola Profissional de Braga, do curso Técnico de Desenho Gráfico, é obri- gatória a apresentação do projecto final de curso. Com este projecto pretende-se que se mostre autonomia, criatividade e capacidade de resolver problemas que possam surgir. O tema “Execução de projectos reais” foi uma proposta dada pelo coordenador de curso João Pau- lo Teixeira, onde aceitei-a plenamente. Devido à minha experiência em estágio, pareceu-me que a realização de um projecto desta natureza poderia constituir uma mais valia à minha formação e ao desenvolvimento da minha Prova de Aptidão Profissional, pois terei a oportunidade de debater ideias com um cliente real e resolver situações a nível das exigências do mercado de trabalho. Assim, considero que este tema será um género de espaço que abrange uma grande área do Design Gráfico, dado que, futuramente sei que vai ser útil para a minha carreira, uma vez que trabalhamos constantemente neste tipo de projectos. Deste modo, os principais objectivos que pretendo alcançar a nível pessoal e profissional, será apli- car e desenvolver as minhas competências adquiridos ao longo do triénio de formação, adequando as novas situações de aprendizagem e de execução prática de soluções ligadas à área do design, melhorando as minhas competências como designer gráfico. O facto de realizar projectos com a em- Cesário Rafael Baía Alves 8
  • 9. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução presa que tenham reconhecimento na área do Design Gráfico, Design Digital, Design Produto poderão ser um desafio importante para as metas que me proponho alcançar. Os locais utilizados para a execução do projecto foram a Escola Profissional de Braga e principal- mente a minha casa. No que diz respeito aos recursos utilizei, designadamente, Windows XP e Vista, Microsoft Office Word 2007, Microsoft Office PowerPoint 2007, Adobe Dreamweaver CS3, Adobe Flash CS3 Professional, Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe InDesign CS3, Adobe Premiere Pro CS3, FileZilla, Internet Explorer 7.0, Mozilla Firefox 3.0, Safari 3.1. Utilizei também várias linguagens de programação, nomeadamente, HTML, CSS, JavaScript, ActionScript, MySQL, PHP. Quanto aos recursos humanos foi indispensável o apoio mútuo entre mim e os meus colegas que pou- co a pouco, fomos aprendendo uns com os outros resultando desta entreajuda os nossos projectos. Devo também agradecer ao professor João Delgado, João Teixeira e professora Teresa Machado que para além de terem demonstrado um domínio enorme na matéria sempre mostraram interesse no meu projecto, assim como se mostraram disponíveis para me ajudar. No que diz respeito à metodologia, ao longo deste projecto articulei e desenvolvi os três projectos a que me propus simultaneamente embora desse prioridade àqueles que mereceram maior complexidade em termos de execução e aprendizagem. Cesário Rafael Baía Alves 9
  • 10. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Quanto ao parecer da equipa pedagógica, esta deu o seu parecer favorável à realização do meu projecto. Passo, de seguida a apresentar o cronograma / elencos de tarefas Elenco de Tarefas Calendarização Briefing/Pesquisa Até Dezembro Realização dos Projectos Até Março Catálogo impresso e em formato digital Até Junho Cesário Rafael Baía Alves 10
  • 11. Curso Técnico de Desenho Gráfico Execução de projectos reais Desenvolvimento Cesário Rafael Baía Alves 11
  • 12. Curso Técnico de Desenho Gráfico Execução de projectos reais Componente Teórica Cesário Rafael Baía Alves 12
  • 13. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Microsoft Windows O Windows XP é um sistema operativo muito popular. Utilizei a versão XP SP3 porque se trata de uma versão de confiança e onde ocorre a maioria das aplicações que utilizei para elaboração deste projecto. Microsoft Word 2007 O Word é um processador de texto da Microsoft, que permite criar diver- sos documentos de texto, modelos, e várias maneiras de formatar um docu- mento com os diferentes tipos de esti- los. Permite que os documentos sejam editados e escritos para páginas de Internet bem como interagir com outros programas. Na minha Prova de Aptidão Profissional utilizei o Word para a edição e cria- ção de textos, para o relatório e diário da PAP, cronograma e, em parte, para o Website. Fig. 1 – Microsoft Word 2007 Cesário Rafael Baía Alves 13
  • 14. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Microsoft PowerPoint 2007 A Microsoft PowerPoint, é um programa que permite a criação e exibição de apresentações, cujo objectivo é informar sobre um determinado tema, podendo usar imagens, sons, textos e vídeos, que podem ser animados de diferentes maneiras, é uma ferramenta que ajuda a mostrar informações e ideias de uma forma organizada e, de certa forma, apelativa. Na minha Prova de Aptidão Profissional utilizei o Microsoft PowerPoint para a criação de uma breve apresentação do projecto PAP. Adobe Dreamweaver CS3 O Adobe Dreamweaver serve para desenvolver e editar ficheiros direccionados à Web, com dife- rentes tipos de extensões, para páginas dinâmi- cas e estáticas. Podem ser utilizadas por diversos tipos de aplicações. Na minha Prova de Aptidão Profissional utilizei o Adobe Dreamweaver para edição de todos os Websites, criação e edição das páginas. Fig. 2 – Adobe Dreamweaver CS3 Cesário Rafael Baía Alves 14
  • 15. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Adobe Photoshop CS3 Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição típicas dos editores vectoriais) desenvol- vido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais, assim como o programa de facto para edição profissional de imagens digitais e trabalhos de pré-impressão. Esta ferramenta foi-me bastante útil na criação de imagens, tratamento de fotografias, tratamento dos logotipos das instituições. Fig. 3 – Adobe Dreamweaver CS3 Adobe Illustrator CS3 O Illustrator, um poderoso programa para criação e edição de imagens vectoriais da Adobe. Na minha Prova de Aptidão Profissional utilizei o Adobe Illustrator para a criação dos layouts das páginas Web. Cesário Rafael Baía Alves 15
  • 16. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Adobe InDesign CS3 Programa com a principal função de paginar jornais, catálogos, Desdobráveis e Revistas. Este programa foi-me útil na criação do catálogo e na paginação deste relatório. Adobe Premiere Pro CS3 Este software é utilizado para a edição e criação de vídeos. Na minha Prova de Aptidão Profissional utilizei o Adobe Premiere para editar o vídeo para a Funda- ção Bracara Augusta. Adobe Flash CS3 Professional O Flash é um programa gráfico vectorial utilizado para a criação de animações interactivas. Os ar- quivos executáveis gerados pelo Flash, chamados ”SWF”, podem ser visualizados numa página Web usando um navegador Web. Na minha Prova de Aptidão Profissional utilizei o Adobe Flash para fazer a apresentação no início do vídeo para a Fundação Bracara Augusta. Cesário Rafael Baía Alves 16
  • 17. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Internet Explorer 7 O Internet Explorer (IE) é um software para navegar podendo, assim, fazer todas as pesquisas neces- sárias e também testar os conflitos no Web Site. Na minha Prova de Aptidão Profissional utilizei Internet Explorer para fazer as pesquisas necessárias e para testar o Web Site. Mozilla Firefox 3.0.1 O Mozilla Firefox é um software com a função idêntica ao Internet Explorer, possibilita a navegação na Internet, podendo fazer pesquisas e testar o Web Site. Na minha Prova de Aptidão Profissional utilizei o Mozilla Firefox para fazer as pesquisas necessárias e para testar o Web Site. Cesário Rafael Baía Alves 17
  • 18. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado FileZilla 3.2. 3.1 FileZilla é uma aplicação de FTP gratuito e livre. É muito bom devido à compatibilidade com muitos servidores e comete poucos erros de transferências de ficheiros. Usei esta aplicação de FTP para fazer a transferência de ficheiros para o servidor. Apache 1.5 O Apache ou Servidor Apache, é um servidor web gratuito e actualmente um dos melhores. O Servidor Apache suporta o protocolo http V.1.1. É muitas vezes utilizado para a criação de base de dados MySQL, e a linguagem de programação mais utilizada é o PHP. Este software foi-me útil para criar um servidor localmente (no próprio computador), para poder testar localmente todos os ficheiros “.php”. Cesário Rafael Baía Alves 18
  • 19. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação HTML A linguagem de programação HTML (Hipertext Markup Language), é uma linguagem de marcação, para a criação de páginas Web. É a linguagem standard da WWW ( Word Wide Web ), e a mais utilizada para quem inicia a criação de páginas de internet. Na minha Prova de Aptidão Profissional utilizei esta linguagem de programação para a criação/edi- ção de páginas que continham HTML. CSS CSS (Cascading Style Sheets), é uma linguagem de programação direccio- nada à Web. Utilizei esta linguagem de programa- ção CSS para a formatação, criação e edição de estilos de praticamente todo o Website. Fig. 4 – CSS Cesário Rafael Baía Alves 19
  • 20. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação MySQL O MySQL é um software de criação e gestão de Base de Dados, que utiliza a linguagem SQL. Actualmente, o MySQL é conhecido pelo seu excelente desempenho e es- tabilidade sendo um dos sistemas de Base de Dados mais usados no mundo. Esta aplicação foi-me útil na criação de base de dados para a administra- ção/gestão de utilizadores, painel de notícias e agenda. Fig. 5 – Programação MySQL Javascript O JavaScript é uma linguagem de programação desenvolvida pela Netscape, que no princípio se chamava LiveScript, e tinha como finalidade a validação de formulários e interactividade com a pá- gina. É um tipo de linguagem que não precisa ser compilada, é interpretada automaticamente pelo browser. Possui ferramentas padrão para listagens muito boas. Esta junta-se às CSS na criação dinâ- mica de estilos numa página em HTML. Usei esta linguagem de programação para fazer aumentar as imagens carregadas. Cesário Rafael Baía Alves 20
  • 21. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação ActionScript O ActionScript é a linguagem de programação utilizada pelo Adobe Flash. Tive oportunidade de aprender as bases de ActionScript no curso que tirei na Escola Profissional de Braga. Esta aprendizagem possibilitou-me fazer a animação no vídeo da Fundação Bracara Augusta. PHP O PHP é uma linguagem de programação, esta aplicação é muito utilizada para gerar conteúdo di- nâmico na web. Usei esta aplicação que me permite adicionar notícias na base de dados e no site da Junta de freguesia Maxi- minos Fig. 6 – Programação PHP Cesário Rafael Baía Alves 21
  • 22. Curso Técnico de Desenho Gráfico Execução de projectos reais Disciplinas influentes no projecto Ao longo dos meus três anos de formação tive várias disciplinas teóricas /técnicas, todas com conte- údos diferentes e essenciais para a aprendizagem na área de programação. As disciplinas que tiveram maior influência na concepção da minha PAP foram principalmente: Formação e Contexto de Trabalho Aprendi as seguintes matérias, HTML, CSS, Photoshop, Illustrator. Nesta disciplina pude tirar dúvidas sobre Design e CSS com o professor João Teixeira e João Delgado. Oficina Gráfica Aprendi HTML, CSS, Photoshop, Illustrator, Flash, ActionScript, Indesign. Nesta disciplina pude tirar dú- vidas com o professor João Teixeira. Desenho Gráfico Aprendi Photoshop, Illustrator, Indesign, JavaScript, PHP, MySQL. Nesta disciplina pude tirar dúvidas com o professor João Delgado. Língua Portuguesa Aprendi as regras para a elaboração do meu relatório PAP. Cesário Rafael Baía Alves 22
  • 23. Curso Técnico de Desenho Gráfico Execução de projectos reais Disciplinas influentes no projecto Tive a oportunidade de aprender as seguintes matérias: Adobe Illustrator, Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, Adobe Premiere, Adobe Indesign, HTML, CSS, JavaScript, PHP, MySQL, ActionScript, Microsoft Office (Word, Power Point) Cesário Rafael Baía Alves 23
  • 24. Curso Técnico de Desenho Gráfico Execução de projectos reais Apresentação de Projectos Cesário Rafael Baía Alves 24
  • 25. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto 1 Cesário Rafael Baía Alves 25
  • 26. Curso Técnico de Desenho Gráfico Execução de projectos reais Contacto com o Cliente Desde o início do mês Outubro fui contactando a Doutora Maria do Céu, que desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. Desde então tive reuniões periodicamente, essas reuniões serviram para mostrar ao cliente o progres- so do site, assim como discutir todos os seus aspectos, isto é, os links do menu, o conteúdo de cada página, o público-alvo do site, quais seriam as cores do site e que mensagem pretendia-mos mostrar a cada cidadão, etc. O contacto com o cliente foi também marcado por vários e-mails, onde o cliente teve a oportunidade de me facultar vários conteúdos do site e onde pudemos também debater outros assuntos. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pela Fundação Bracara Augusta e pelo professor Américo Rodrigues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pela Doutora Maria do Céu e pelo Professor Américo Rodrigues. Cesário Rafael Baía Alves 26
  • 27. Curso Técnico de Desenho Gráfico Execução de projectos reais Briefing Cesário Rafael Baía Alves 27
  • 28. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto: Redesign da Página Web e reorganização de conteúdos. História: A Fundação Bracara Augusta foi fundada em 18 de Março de 1996 pela Câmara Municipal de Braga, a Universidade do Minho, a Universidade Católica Portuguesa e o Cabido Metropolitano e Primacial de Braga e tem como finalidade realizar e/ou apoiar iniciativas de carácter cultural e social no concelho de Braga. Localização: A Fundação localiza-se em Braga junto à Biblioteca Lúcio Craveiro da Silva na Rua StºAntónio das Travessas. Serviços e produtos: Fomentar o aparecimento de novas ideias e novos projectos, reforçando por um lado, o diálogo com as instituições e agentes culturais da comunidade e por outro, contribuindo para a criação de espaços culturais menos convencionais, potenciando a criatividade, o debate, o aparecimento de novos valores e contactos com novas tendências estéticas e novas linguagens. Estimular e desenvolver em Braga, em colaboração com outras instituições locais, iniciativas que di- vulguem o vasto património histórico e cultural e que afirmem Braga como centro com personalidade cultural. Estabelecer redes de cooperação e colaboração com outras instituições nacionais com intervenção cultural de qualidade, permitindo descentralizar os circuitos de divulgação cultural e realizar em Bra- ga eventos culturais, quer de âmbito nacional quer internacional. Cesário Rafael Baía Alves 28
  • 29. Curso Técnico de Desenho Gráfico Execução de projectos reais Estimular uma dinâmica de reflexão e de debate, mediante a organização anual de um ciclo de con- ferências sobre temas actuais de interesse para os cidadãos. Influências: A realização de iniciativas culturais de forma integrada continuam a ser uma aposta as- sumida pela Fundação Bracara Augusta. Aspectos positivos: A organização anual de um ciclo de conferências sobre temas actuais de in- teresse para a cidade e para os cidadãos, a fim de estimular uma dinâmica de crítica e debate de ideias. Aspectos negativos: O público-alvo não englobar os jovens pois não existe actividades que os cativem. Público-alvo: Toda a população da freguesia de Braga especialmente a mais culta. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica. Limitações de Prazo: Pretendo finalizar o projecto para fins de Fevereiro. Cesário Rafael Baía Alves 29
  • 30. Curso Técnico de Desenho Gráfico Execução de projectos reais Equacionar o problema No início de Novembro fui contactado pelo Professor João Paulo Teixeira, coordenador do curso Téc- nico de Desenho Gráfico que a Fundação Bracara Augusta desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. A fundação destina-se a toda a população da cidade de Braga, e a todo o mudo que pretenda visualizar o website. A sua função é divulgar as suas actividades e os seus últi- mos projectos lançados. O aspecto negativo é que a fundação não consegue cativar os mais jovens devido aos temas propostos não lhes chamar tanta a atenção, apesar disso os temas têm sempre um carácter actual para estimular uma dinâmica de crítica e debate de ideias. Análise de soluções já existentes Depois de já ter contactado a cliente e já ter uma ideia do que ele pretendia, comecei por efectuar uma pesquisa na Internet sobre websites relacionados sobre história, cultura, eventos e encontrei al- guns com um design muito interessante. Para iniciar uma estrutura tive que fazer várias pesquisas na Internet, a nível de design, estrutura de conteúdos, cores, aprofundar ideias da área da programação, entre outros. http://www.theatrocirco.com/ http://www.cm-braga.pt/ http://www.energie.pt/ http://www.bragadigital.pt/ http://www.gasminho.com/ http://www.fastforwardportugal.com/ http://www.historiadomundo.com.br/ http://www.coffeeteawine.com/ Cesário Rafael Baía Alves 30
  • 31. Curso Técnico de Desenho Gráfico Execução de projectos reais Layout antigo Anteriormente o layout da página da Fundação Bracara Augusta utilizava um tipo de letra que dificul- tava um pouco a leitura, os menus estavam muito grandes e existia muita falta de conteúdo, a página Web encontrava-se nesta situação: Fig. 7 – Layout antigo Cesário Rafael Baía Alves 31
  • 32. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Illustrator CS3. A construção do primeiro layout foi realizada sem cores nem imagens. O resultado foi o seguinte: Fig. 8 – Layout 1º Opção Cesário Rafael Baía Alves 32
  • 33. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout O Layout deve respeitar os princípios da estética, da funcionalidade e da utilidade sobretudo de- vemos ter atenção ao público-alvo, por estes motivos, ao criar o Website tive sempre muito cuidado com o design do layout. Como eu não achava o menu e o banner muito atraentes e depois de uma opinião do meu professor acompanhante decidi-o mudar e o resultado foi o seguinte: Fig. 9 – Layout 2ª Opção Cesário Rafael Baía Alves 33
  • 34. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de já ter decidido o layout foi definir as cores que o site devia conter optei por escolher tons de castanho. Também desenhei as formas que a página ia ter e assim criei um banner com um floriado que foi retirado da digitalização dos livros da Fundação Bracara Augusta. Fig. 10 – Livro da Fundação Cesário Rafael Baía Alves 34
  • 35. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de um grande trabalho e de muitas opiniões dadas pelos meus professores e amigos o layout ficou com um aspecto mais atractivo assim o resultado final foi o seguinte: Fig. 1 – Layout proposta final 1 Cesário Rafael Baía Alves 35
  • 36. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Cores A utilização da cor castanha é devido à Fundação estar ligada à história de Braga, o que leva às pessoas a imaginarem essa cor como predilecta. Depois de a página estar graficamente concluída, contactei o meu cliente para saber a sua opinião e para saber se poderia continuar o meu trabalho. Nas reuniões marcadas fala-mos que tipo de conteúdo se ia colocar e assim decidiu-se que o menu ia ficar composto por seis links: > Home > Actividade > Galeria > Destaques > Livros > Contactos O menu principal é um elemento fundamental na navegação de qualquer página Web. Por este moti- vo, a presença do menu é indispensável para o sucesso de um Website. O menu principal do meu Website é horizontal, simples e discreto. Nele só existe uma mudança de cor quando o cursor passa por cima, e fica seleccionado quando carregamos. Cesário Rafael Baía Alves 36
  • 37. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Home Na página inicial destaquei a informação que achei mais relevante, por isso coloquei do lado direito os últimos projectos da Fundação. Neste link podemos ler um pequeno texto onde explica como surgiu a Fundação Bracara Augusta e quais os seus objectivos. Fig. 12 – Home Cesário Rafael Baía Alves 37
  • 38. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Actividade Esta página é constituída por um texto que refere quando a fundação foi criada, quais as pessoas que já fizeram parte dela e que tipo de actividades é que a fundação realiza. Fig. 13 – Actividade Cesário Rafael Baía Alves 38
  • 39. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Galeria Neste link encontramos uma pequena galeria sobre actividades que foram feitas desde conferências, cartazes de eventos e algumas imagens retiradas dos livros já lançados. Esta página contém um script, Lightbox v2.04 que foi criado por Lokesh Dhakar - http://www.huddleto- gether.com/projects/lightbox2/ para visualização das imagens. Fig. 14 – Galeria Cesário Rafael Baía Alves 39
  • 40. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Destaques Esta página apresenta os desdobráveis de todas as conferências realizadas desde o ano 2000 data inicial das conferências. Fig. 15 – Destaques Cesário Rafael Baía Alves 40
  • 41. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Livros Nesta página encontramos livros lançados desde o ano 2000 onde se pode visualizar as capas e algumas imagens, desses livros. Esta página contém um script, Lightbox v2.04 que foi criado por Lokesh Dhakar - http://www.huddleto- gether.com/projects/lightbox2/ para visualização das imagens. Fig. 16 – Livros Cesário Rafael Baía Alves 41
  • 42. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Contactos No link contactos podemos encontrar todos os contactos da Fundação Bracara Augusta como ex: morada, telefone, fax. Também podemos encontrar um mapa em que se pode descobrir facilmente a sua localização. Este mapa é totalmente grátis. http://maps.google.com.br/ Fig. 17 – Contactos Cesário Rafael Baía Alves 42
  • 43. Curso Técnico de Desenho Gráfico Execução de projectos reais Conteúdo do Site Primeiro comecei por contactar o cliente, onde fiz uma marcação de uma data, para saber o que ela desejava. Depois de saber o que o cliente queria realizei o Briefing onde defini os objectivos da Fun- dação. Os conteúdos do site foram-me todos fornecidos pela Fundação Bracara Augusta, no entanto alguns dos conteúdos iniciais tiveram que ser alterados. Depois do Briefing comecei por fazer o design da página Web e enviei-o para saber se ele ficava aprovado, depois de fazer uns certos ajustes e comecei com a programação em HTML, CSS, JavaS- cript. Todas as imagens fornecidas pela fundação foram totalmente ajustadas e redimensionadas para dois tamanhos, isto é, uma pequena e uma grande, visto ter implementado a possibilidade de clicar em qualquer imagem e esta ser aberta, mostrando a foto em tamanho grande para serem visualizadas na Internet. Toda a informação foi-me entregue em formato digital, mas a fundação desejou colocar todos os seus trabalhos já lançados por isso tive de perder muito tempo na digitalização das capas dos livros e dos desdobráveis das conferências. A fundação também me pediu que eu lhe fizesse o tratamento da sua última conferência para depois colocar o filme na Internet. Coloquei-o online e por final enviei um pequeno questionário sobre a página Web, para saber uma opinião do público-alvo, pois acho que assim deu para retirar as dúvidas e fazer umas pequenas al- terações que foram importantes para a definição final.Em modo geral toda gente gostou da proposta final. Cesário Rafael Baía Alves 43
  • 44. Curso Técnico de Desenho Gráfico Execução de projectos reais Vídeo da VIII Ciclo de Conferências Para a realização de um filme não é só preciso saber filmar, mas sim também sabê-lo editar, saber fa- zer os cortes das etiquetas num local preciso e exacto para que fique perfeito. Este tipo de edições costuma demorar muitas horas e muitos dias. O vídeo da Fundação Bracara Augusta tem a duração de 3 minutos e 55 segundos e o vídeo apre- senta um resumo sobre “VIII Ciclo de Conferências” com o tema “Globalização: Desafios para século XXI” a duração deste vídeo é pequena devido a ter como objectivo principal a publicação na Web. O vídeo já se encontra online na página da Fundação Bracara Augusta em http://fbracaraaugusta. org/. A música que acompanha o filme tem como nome “Eurythmics - I Saved The World Today” esta mú- sica está completamente encaixada com o tema da conferência, pois como capa do desdobrável expõem o ataque terrorista de 11 de Setembro de 2001 e a música fala exactamente como as pessoas se sentiam nesse dia. Algumas situações encontradas na música: “Há uma coisa triste e do- lorosa dentro de mim”, “Eu estou a sofrer”, este tipo de mensagens deixadas na música vêem a coincidir com o vídeo. Apesar de tudo a solução final ficou muito engraçada e a página da funda- ção ficou mais atractiva. Fig. 18 – Vídeo Cesário Rafael Baía Alves 44
  • 45. Curso Técnico de Desenho Gráfico Execução de projectos reais Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram sem dúvida, o desenvolvimento de JavaScript para carregar as imagens. Digitalizar grandes quantidades de livros e de desdobráveis. Dificuldade em colocar o formulário a funcionar pois não dava para enviar o e-mail para a Funda- ção. Algumas incompatibilidades com os browsers, ou seja, por vezes funcionava no Mozilla Firefox e Safari e o mesmo não acontecia com o Internet Explorer. Tratamento do filme no programa Premiere, a edição do vídeo foi uma tarefa muito trabalhosa. Cesário Rafael Baía Alves 45
  • 46. Curso Técnico de Desenho Gráfico Execução de projectos reais Programação do website Esta é, sem dúvida, a parte mais aliciante deste projecto, mas também a mais complexa. Para concluir a realização deste projecto tive que utilizar algumas linguagens de programação, no- meadamente com Adobe DreamWeaver CS3 o HTML e as CSS. Folha de Estilos (CSS) estilos.css Esta folha de estilos contém todos os estilos que utilizei no website. /*Documento CSS Página - Fundação Bracara Augusta */ body { margin:0px 0px 0px 0px;/*pagina geral */ text-align:center; background: url(imagens/body.png) repeat-x #AA5112; } /*Div Tudo*/ #tudo { width:1000px;/*Caixa geral */ height:auto; margin:0px 0px 0px 0px; padding:0px 0px 60px 0px; border: 0px solid #3C3C3C;/*cor castanha */ Cesário Rafael Baía Alves 46
  • 47. Curso Técnico de Desenho Gráfico Execução de projectos reais background:transparent; position:absolute;/*posicao absoluta*/ left:50%; margin-left:-500px; } /*Fim Div Tudo*/ /*TOPO*/ #cimafloriado { height:91px;/*medida */ width:auto; margin:0px 0px 0px 0px; background: url(imagens/floriado.png) repeat-x; border-bottom:1px solid #FFFFFF; position:relative; text-align: center; } /*FIM TOPO*/ /*Aqui entra o centro*/ #centro { width:570px; height:auto; Cesário Rafael Baía Alves 47
  • 48. Curso Técnico de Desenho Gráfico Execução de projectos reais background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; margin:20px 0px 0px 30px; position:relative; float:left; } #centrobig { width:930px; height:auto; background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; margin:20px 30px 0px 30px; position:relative; float:left; } #centrohome { width:570px; height:auto; background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; Cesário Rafael Baía Alves 48
  • 49. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:20px 30px 0px 0px; position:relative; float:right; } /*Fim do centro*/ /*Aqui entre a ALA Direita*/ #direita { width:285px; height:auto; color:#6B717C; border:1px solid #AA5112; background-color: #F1DAC9; padding:30px 5px 0px 5px; margin:20px 30px 0px 0px; border-top:10px solid #AA5112; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius:7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; position:relative; float:right; } Cesário Rafael Baía Alves 49
  • 50. Curso Técnico de Desenho Gráfico Execução de projectos reais #direitahome { width:285px; height:490px; color:#6B717C; border:1px solid #AA5112; background-color: #F1DAC9; padding:30px 5px 0px 5px; margin:20px 0px 0px 30px; border-top:10px solid #AA5112; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius:7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; position:relative; float:left; } /*Fim da ALA Direita*/ /*Imagens*/ img { border:0px;/*sem borda*/ outline:none; } Cesário Rafael Baía Alves 50
  • 51. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre a CLASS TEXTO*/ .texto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } /*Aqui entre a CLASS dos LIVROS */ .livro { width:530px; height:auto; background:#EAEAEA; padding:5px 5px 5px 5px; margin:10px 0px 10px 15px; position:relative; float:left; font-family:”Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:16px; font-weight:bold; Cesário Rafael Baía Alves 51
  • 52. Curso Técnico de Desenho Gráfico Execução de projectos reais color:#47281A; text-align:center; } /*Aqui entre a CLASS dos LIVROS e imagens*/ .imagemtexto a { background: #E3CDB7; text-align: center; margin:20px 15px 25px 15px; outline:none; padding:5px 5px 13px 5px; float:left; } .imagemtexto a:hover { background:#e3ba90; margin:20px 15px 25px 15px; padding:5px 5px 13px 5px; float:left; } /*Actividade LINK*/ .textoactividade { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; Cesário Rafael Baía Alves 52
  • 53. Curso Técnico de Desenho Gráfico Execução de projectos reais font-weight: normal; text-align: justify; text-indent:15pt; margin:15px 15px 15px 15px; } .actividadenegrito { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size: 13px; color: #47281A; font-weight: bold; text-align:left; margin:0px 0px 0px 0px; } .actividade { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size: 12px; font-weight: normal; text-align: left; font-style:normal; margin:0px 0px 0px 0px; color: #333333; } /*Fim Actividade*/ Cesário Rafael Baía Alves 53
  • 54. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre o texto da ALA DIREITA */ .textodireito { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #5C5248; font-weight: normal; text-align: justify; margin:10px 0px 15px 15px; font-style:normal; font-variant:normal; float:left; } .textodireito a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #5C5248; font-weight: normal; text-align: center; margin:0px 18px 0px 0px; padding:5px 5px 5px 5px; background:#E3CDB7; font-style:normal; text-decoration: none; Cesário Rafael Baía Alves 54
  • 55. Curso Técnico de Desenho Gráfico Execução de projectos reais font-variant:normal; float:right; outline:none; } .textodireito a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color:#47281A; text-align: justify; margin:0px 18x 0px 0px; text-decoration: underline; font-variant:normal; float:right; } h3 { color:#47281A; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:5px 0px 5px 15px; font-size:18px; font-weight: bold; text-align:left; font-style:normal; } Cesário Rafael Baía Alves 55
  • 56. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre a CLASS dos Direitos de Autor */ .direitos { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:10px; color: #FFFFFF; font-weight: normal; text-align:center; border-left:5px ridge #FFFFFF; border-right:5px groove #FFFFFF; margin: 5px 0px 0px 30px; padding:0px 5px 0px 5px; width:560px; height:auto; background:#BA6F35; font-style:normal; float:left; } .direitos a { color:#FFFFFF; outline:none; } .direitoshome { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; Cesário Rafael Baía Alves 56
  • 57. Curso Técnico de Desenho Gráfico Execução de projectos reais font-size:10px; color: #FFFFFF; text-align:center; margin: 5px 30px 0px 30px; padding:0px 5px 0px 5px; width:570px; height:auto; background:#BA6F35; float:right; } .direitoshome a { color:#FFFFFF; outline:none; } /* top menu */ #header { height: 56px; background-color:transparent; border-left: 1px solid #533920; margin:0px 0px 0px 30px; width:590px; float:left; } Cesário Rafael Baía Alves 57
  • 58. Curso Técnico de Desenho Gráfico Execução de projectos reais #header a { text-decoration: none; font-weight:normal; font-size:15px; outline:none; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color: #533920; } #header a:hover { color:#533920; } #menu { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } #menu li { float: left; width: 96px; border-right: 1px solid #533920; } #menu a { display: block; Cesário Rafael Baía Alves 58
  • 59. Curso Técnico de Desenho Gráfico Execução de projectos reais height: 50px; line-height:50px; outline:none; background:url(imagens/botao.png) no-repeat; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px; border-bottom: 6px solid #533920; } #menu a:hover { border-bottom: 6px solid #B55E0F; line-height:50px; background:url(imagens/botaoselecionado.png) no-repeat; background-color: #E9D6AE; } #menu li a.selecionado { background:url(imagens/botaoselecionado.png) no-repeat; color: #533920; line-height:50px; font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; border-bottom: 6px solid #B55E0F; background-color: #E9D6AE; } /* FIM top menu */ Cesário Rafael Baía Alves 59
  • 60. Curso Técnico de Desenho Gráfico Execução de projectos reais /* logo da fundação */ .imagemlogo { width:90px; height:90px; background: url(imagens/logo.png) no-repeat; padding:0px 0px 0px 0px; position:absolute; left: 1020px; top: 59px; } .identidadelogo { width:200px; height:20px; color: #FFFFFF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:16px; background:transparent; padding:0px 0px 0px 0px; position:absolute; text-align:right; left: 820px; top: 91px; } Cesário Rafael Baía Alves 60
  • 61. Curso Técnico de Desenho Gráfico Execução de projectos reais /* Galeria LINKS */ #galeria { width:860px; height:700px; margin:20px 0px 30px 30px; position:relative; float:left; } #galeria a { outline:none; } #galeria img { margin:5px 5px 5px 5px; border:1px solid #B55E0F; outline:none; } .irtopo img { bottom:10px; position:fixed; right:160px; outline:none; border:none; } Cesário Rafael Baía Alves 61
  • 62. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Efeito nas Imagens JAVASCRIPT */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox img { width: auto; height: auto; } #lightbox a img { border: none; } #outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } Cesário Rafael Baía Alves 62
  • 63. Curso Técnico de Desenho Gráfico Execução de projectos reais #imageContainer { padding: 10px; } #loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav { left: 0; } Cesário Rafael Baía Alves 63
  • 64. Curso Técnico de Desenho Gráfico Execução de projectos reais #hoverNav a { outline: none; } #prevLink, #nextLink { width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; } #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } Cesário Rafael Baía Alves 64
  • 65. Curso Técnico de Desenho Gráfico Execução de projectos reais #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; line-height: 1.4em; overflow: auto; width: 100%; } #imageData { padding:0px 10px; color: #666; } #imageData #imageDetails { width: 70%; float: left; } #imageData #caption { font-weight: bold; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; } Cesário Rafael Baía Alves 65
  • 66. Curso Técnico de Desenho Gráfico Execução de projectos reais Fundação Bracara Augusta #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; outline: none; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } Cesário Rafael Baía Alves 66
  • 67. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Ginásio OXGGYM Cesário Rafael Baía Alves 67
  • 68. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Contacto com o Cliente No início do mês Novembro contactei o Doutor José Domingues, para lhe fazer um Redesign da Página Web e a reorganização de conteúdos. Mas infelizmente ele raramente estava no ginásio por isso as várias vezes que eu fui lá só o encontrei uma vez, além disso ele não se mostrou muito interessado para lhe modificar a página Web. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pelo professor Américo Rodrigues e pelo Doutor José Domingues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pelo Doutor José Domin- gues e pelo Professor Américo Rodrigues. Cesário Rafael Baía Alves 68
  • 69. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Briefing Cesário Rafael Baía Alves 69
  • 70. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Projecto: Redesign da Página Web e reorganização de conteúdos. Localização: O Ginásio localiza-se em Braga na Praça das Fontainhas em S.Vicente. Caracterização: O Ginásio encontra-se num local agradável, em boas condições com um design interior muito apelativo e com materiais de exercício em excelente estado. Serviços e produtos: A empresa tem como modalidades o Kick boxing, karate, GAP, mega boxing, Capoeira, Danças. Influências: O ginásio contém modalidades para todas as classes etárias. O que é uma mais-valia para a empresa. Aspectos positivos: O ginásio é muito dinâmico os trabalhadores estão sempre prontos para mostrar as suas actividades, preocupam-se muito com os clientes tanto fisicamente como psicologicamente. Também costumam mostrar à população de Braga na avenida encontros de capoeira. Público-alvo: Toda a população da freguesia de Braga. Concorrência: Existir em Braga Ginásios com preços mais competitivos. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica, pois visualmente o website encon- tra-se muito clássico. Cesário Rafael Baía Alves 70
  • 71. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Equacionar o problema No início de Novembro fui contactado pelo professor Américo Rodrigues e pelo professor João Paulo Teixeira, coordenador do curso Técnico de Desenho Gráfico que o ginásio OXYGYM desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. O ginásio destina-se a toda a população da cidade de Braga. A sua função é divulgar o ginásio na Internet, para dar a conhecer as instalações, condi- ções, modalidades, eventos e preços. Análise de soluções já existentes Depois de já ter contactado a cliente, comecei por efectuar uma pesquisa na Internet sobre websites relacionados sobre ginásios e encontrei alguns com um design agradável. http://www.solinca.pt http://www.aditshukla.com/ http://www.ginasiocontraste.com/ http://www.elielcezar.com http://www.holmesplace.pt/ http://www.apple.com/ http://www.equilibrio-ginasio.pt/ http://www.idealsign.com/ Cesário Rafael Baía Alves 71
  • 72. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Layout antigo Anteriormente o layout da página do ginásio encontrava-se nesta situação: Fig. 19 – Layout Cesário Rafael Baía Alves 72
  • 73. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Ilustrator CS3. O resultado foi o seguinte: Fig. 20 – Redesign do layout Cores A utilização da cor laranja tem o principal objectivo de apresentar energia, movimento e dinamismo. Depois de já ter decidido o layout e as cores do website, a mudança de cor para laranja é devido a pretender mostrar mais força. Cesário Rafael Baía Alves 73
  • 74. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Conteúdo do Site Comecei por contactar o cliente, onde fiz uma marcação de uma data, para saber o que ela dese- java. Apesar de ele não se ter interessado pelo meu projecto tentei ao máximo dar o meu melhor, mas depois de lhe mostrar como se estava a desenvolver, fiquei à espera que me desse alguma notícia, mas não me deu. Passando algum tempo o website foi alterado para outro layout e como o cliente nunca mais me dava nenhuma informação, nem nunca mais me contactou não passei para a programa- ção pois não tinha a sua confirmação para prosseguir o projecto. Tive pena de não poder continuar pois era uma área que abrangia varias actividades interessantes. Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram sem dúvida, contactar o cliente pois não se mostrou muito interessado pelo projecto. Perceber como o Software Joomla funcionava. Cesário Rafael Baía Alves 74
  • 75. Curso Técnico de Desenho Gráfico Execução de projectos reais Freguesia maximinos Cesário Rafael Baía Alves 75
  • 76. Curso Técnico de Desenho Gráfico Execução de projectos reais Contacto com o Cliente Desde o início do mês Abril fui contactando pelo Professor Américo Rodrigues, que desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. Desde então, tive reuniões periodicamente, essas reuniões serviram para mostrar ao cliente o progres- so do site, assim como discutir todos os seus aspectos, isto é, os links do menu, o conteúdo de cada página, o público-alvo do site, quais seriam as cores do site e que mensagem pretendia-mos mostrar a cada cidadão, etc. O contacto com o cliente foi também marcado por vários e-mails, onde o cliente teve a oportunidade de me facultar vários conteúdos do site e onde pudemos também debater outros assuntos. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pelo Doutor José Manuel Magalhães e pelo pro- fessor Américo Rodrigues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pelo professor Américo Rodrigues. Cesário Rafael Baía Alves 76
  • 77. Curso Técnico de Desenho Gráfico Execução de projectos reais Briefing Cesário Rafael Baía Alves 77
  • 78. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto: Redesign da Página Web e reorganização de conteúdos. Localização: Maximinos é uma freguesia portuguesa do concelho de Braga, com 1,76 km² de área e 10 030 habitantes (2001). Densidade: 5 698,9 hab/km². Público-alvo: Toda a população da freguesia de Braga. Aspectos positivos: Cooperação e solidariedade com as pessoas mais desfavorecidas. Coope- ração e solidariedade com empresas, escolas e outras instituições e com todas as pessoas de boa vontade que tenham a ambição de serem protagonistas da construção de uma freguesia dinâmica, activa, onde convivem núcleos urbanos e rurais. Serviços e Produtos: A diversidade de funções que desempenham, desde a gestão administrativa, com especial incidência na procura de melhoria dos serviços a prestar aos cidadãos, a gestão de recursos humanos, a relação com outros organismos autárquicos e nacionais, permite-os considerar que o desenvolvimento pessoal, social, cultural e económico que pretendem para Maximinos atinge- se, sobretudo, na base dos princípios da cooperação e da solidariedade. Influências: A realização de iniciativas culturais de forma integrada continuam a ser uma aposta as- sumida pela Freguesia de Maximinos. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica, pois visualmente o website encon- tra-se muito clássico. Cesário Rafael Baía Alves 78
  • 79. Curso Técnico de Desenho Gráfico Execução de projectos reais Equacionar o problema No início de Maio fui contactado pelo Professor João Paulo Teixeira, coordenador do curso Técnico de Desenho Gráfico que a Junta de Freguesia Maximinos desejava que eu fizesse um Redesign da Pá- gina Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. A Junta de Freguesia destina-se a toda a população da cidade de Braga. Análise de soluções já existentes Depois de já ter contactado a cliente e já ter uma ideia do que ele pretendia, comecei por efectuar uma pesquisa na Internet sobre websites relacionados com a área envolvente encontrei alguns com um design muito interessante. Para iniciar uma estrutura tive que fazer várias pesquisas na Internet, a nível de design, estrutura de conteúdos, cores, aprofundar ideias da área da programação, entre outros. http://www.juntasvictor.pt/ http://www.freguesiamontalegre.net/ http://www.jf-lamacaes.pt/ http://www.jf-real.com/index.html http://www.jf-ferreiros.pt/ http://www.jf-saovicente.com/main.htm http://www.jf-esporoes.pt/ http://www.freguesiadepanoias.com/ Cesário Rafael Baía Alves 79
  • 80. Curso Técnico de Desenho Gráfico Execução de projectos reais Layout antigo Anteriormente o layout da página da Freguesia de Maximinos os menus estavam muito confusos e exis- tia muita falta de conteúdo a página Web, o tipo de letra tornava a página muito cansativa de se ler antes encontrava-se nesta situação: Fig. 21 – Layout antigo Cesário Rafael Baía Alves 80
  • 81. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Ilustrator CS3. A construção do primeiro layout foi realizada já com cores. O resultado foi o seguinte: Fig. 22 – Layout 1ª Opção Cesário Rafael Baía Alves 81
  • 82. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout O layout deve respeitar os princípios da estética, da funcionalidade e da utilidade sobretudo de- vemos ter atenção ao público-alvo, por estes motivos, ao criar o Website tive sempre muito cuidado com o design do layout. Como eu não achava muito atraente o layout decidi-o mudar a níveis gráficos e depois de muitos estudos o resultado foi o seguinte: Fig. 23 – Layout 2ª Opção Cesário Rafael Baía Alves 82
  • 83. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de já ter decidido o layout foi definir as cores do site, que conteúdo iria colocar na página principal. Depois de um enorme trabalho e de muitas opiniões dadas pelos meus professores e amigos o layout ficou com um aspecto mais atractivo assim o resultado final foi o seguinte: Fig. 24 – Layout 2ª Opção Cesário Rafael Baía Alves 83
  • 84. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Cores A utilização dos tons azuis estão relacionados com a confiança, e profissionalismo que a Freguesia de Maximinos pretende representar. Depois de a página estar graficamente concluída, contactei o meu cliente para saber a sua opinião e para saber se poderia continuar o meu trabalho. Nas reuniões marcadas conversamos que tipo de conteúdo se ia colocar e assim decidiu-se que o menu ia ficar composto por sete links: » Início » Orgãos » Autarquia » Freguesia » Utilidades » Turismo & Lazer » Portal do Cidadão O menu principal é um elemento fundamental na navegação de qualquer página Web. Por este moti- vo, a presença do menu é indispensável para o sucesso de um Website. O menu principal do meu Website é horizontal, simples e discreto. Nele só existe uma mudança de cor quando o cursor passa por cima, e fica seleccionado quando carregamos. Cesário Rafael Baía Alves 84
  • 85. Curso Técnico de Desenho Gráfico Execução de projectos reais Início Na página inicial destaquei a informação que achei mais importante, por isso coloquei do lado direito os as notícias da freguesia. Nesta página aparece de entrada um slideshow de 8 imagens da freguesia de maximinos. Coloquei também no lado direito a hora de funcionamento da junta. Fig. 25 – Início Cesário Rafael Baía Alves 85
  • 86. Curso Técnico de Desenho Gráfico Execução de projectos reais Orgaõs Este link principal é constituído por vários submenus, que seguem sempre o mesmo padrão. Fig. 26 – Orgaõs Cesário Rafael Baía Alves 86
  • 87. Curso Técnico de Desenho Gráfico Execução de projectos reais Freguesia Uma página extremamente elegante e muito requintada nestes submenus podemos encontrar todo o tipo de informação que um cidadão possa desejar, desde a mensagem do Presidente, à localização da junta de freguesia. Fig. 27 – Freguesia Cesário Rafael Baía Alves 87
  • 88. Curso Técnico de Desenho Gráfico Execução de projectos reais Utilidades Esta página também acho que vai ser a mais importante para os cidadãos bracarenses porque nes- tes submenus podemos encontras uma lista de transportes, a farmácia disponível, contactos úteis de outras instituições, etc. Fig. 28 – Utilidades Cesário Rafael Baía Alves 88
  • 89. Curso Técnico de Desenho Gráfico Execução de projectos reais Turismo e Lazer Esta página é das mais relaxantes também devido ao conteúdo de que se trata, pois quem quiser passar umas férias não há nada do que passar uma vista pelo submenu alojamento e restaurantes. Fig. 29 – Turismo e Lazer Cesário Rafael Baía Alves 89
  • 90. Curso Técnico de Desenho Gráfico Execução de projectos reais Portal do Cidadão Este link foi criado para todo o tipo de pedidos de informação que o cidadão deseja comunicar. Fig. 30 – Portal do Cidadão Cesário Rafael Baía Alves 90
  • 91. Curso Técnico de Desenho Gráfico Execução de projectos reais Conteúdo do Site Quando recebi este projecto em mãos reparei na sua grandiosidade por isso dediquei-me 100% neste trabalho para além disso como era época de eleições desejavam que a página fosse feita o mais rápido possível. Inicialmente comecei por contactar o cliente, onde marcou-se uma reunião com o cliente, com o Doutor José Magalhães e o Professor Américo Rodrigues. Depois de saber o que o clien- te queria realizei o briefing onde defini os objectivos. E seguidamente comecei por visualizar páginas já existentes. Os conteúdos do site foram-me todos fornecidos pelo Doutor José Magalhães e o Professor Américo Rodrigues, no entanto alguns dos conteúdos iniciais tiveram que ser alterados. Desenvolvi o layout da página Web e enviei-o por e-mail para saber se ele ficava aprovado. Depois de ter a confirmação do Professor Américo Rodrigues desenvolvi logo a página principal ou seja o INDEX lá defini visualmente como a página Web ia ficar, comecei por criar uma nova base de dados com uma nova programa- ção e um novo design muito mais apelativo e muito mais fácil de navegar para o utilizador que queira publicar as notícias. Depois de ter a Base de Dados quase finalizada desenvolvi o resto das páginas foi substituir os links e coloca-los online. Foi aberto também um questionário e com os erros encontrados desenvolvi-o para ser adaptável a cada cidadão bracarense assim foi mais fácil desenvolver com os erros que encon- traram. Em modo geral toda gente adorou a proposta final, pois os resultados foram muito positivos. O passo seguinte foi desenvolver melhor as páginas Web restantes a nível visual e acabei a progra- mação da Base de Dados. Cesário Rafael Baía Alves 91
  • 92. Curso Técnico de Desenho Gráfico Execução de projectos reais Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram, o desenvolvimento das folhas de estilo com PHP e o próprio PHP. Após muita pesquisa e muito estudo desta área da programação consegui ultrapassar as dificuldades encontradas apesar de ter perdido muito tempo no desenvolvimento desse tipo de sistema. Dificuldade em trabalhar nos menus e submenus pois apareciam alguma incompatibilidades com alguns browsers, pois funcionava no Mozzilla Firefox e no Safari, mas o mesmo não acontecia no Internet Ex- plorer devido a ele ser mais franco do que os outros, tudo isto foi devido à utilização das Z-Index. Problemas no desenvolvimento da programação da Base de Dados pois neste tipo de área é preciso estar muito concentrado pois em algumas situações perdia-se muito tempo devido a esquecermo-nos de colocar um “;” ou outro tipo de caracteres. Cesário Rafael Baía Alves 92
  • 93. Curso Técnico de Desenho Gráfico Execução de projectos reais Programação do website Esta é, sem dúvida, a parte mais aliciante deste projecto, mas também a mais complexa. Para concluir a realização deste projecto tive que utilizar algumas linguagens de programação, no- meadamente com Adobe DreamWeaver CS3 o HTML, CSS, MYSQL e PHP. Criação da Base de dados Comecei por criar a base de dados em MySQL. A Base de Dados vai conter as seguintes tabelas: » admin » noticias » agenda Área do Administrador (BackOffice) Esta área é reservada ao administrador, cujo objectivo é conseguir ver, adicionar, alterar e apagar notícias e datas da agenda. É constituída por três links: » Notícias » Agenda » Administração Em seguida vou mostrar alguns exemplos de como adicionar, mostrar, eliminar e alterar em PHP que utilizei no meu Website. Cesário Rafael Baía Alves 93
  • 94. Curso Técnico de Desenho Gráfico Execução de projectos reais Sistema Login <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> <link href=”estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”imagens/icone.ico” type=”image/x-icon”> <title>Back Office Freguesia de Maximinos</title> </head> <body> <div class=”login”> <form action=”login_vai.php” method=”post”> <div class=”dados”> <p class=”titulo”>Sistema de Login</p> <p>Login:<br><input type=”text”name=”login”style=”background-color:e6f6ff;border:1px solid #93cced;” ></p> Cesário Rafael Baía Alves 94
  • 95. Curso Técnico de Desenho Gráfico Execução de projectos reais <p>Password:<br> <input type=”password” name =”password” style=”background-color:e6f6ff; border: 1px solid #93cced;”></p> <input name=”Submit” class=”botao”type=”submit” value=”Login” /> </form> </div> <img src=”imagens/maximino.png”alt=”Maximinos” width=”163” height=”191” class=”imagemfreguesia” /></div> </body> </html> Fig. 31 – Sistema Login Cesário Rafael Baía Alves 95
  • 96. Curso Técnico de Desenho Gráfico Execução de projectos reais Mostrar dados Este código selecciona todos os dados da tabela noticias da base de dados. noticiasmain.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> Cesário Rafael Baía Alves 96
  • 97. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php $ligacao=mysql_connect(“localhost”,”admin”,”freguesia”); if (!$ligacao) { print (“Problemas na ligação ao servidor Mysql”); } $sql=”select * from noticias”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); Cesário Rafael Baía Alves 97
  • 98. Curso Técnico de Desenho Gráfico Execução de projectos reais if ($resultado){ print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Título</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutó- rio</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)) { $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; print(“<tr> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Titulo</ font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Autor</ font></td> Cesário Rafael Baía Alves 98
  • 99. Curso Técnico de Desenho Gráfico Execução de projectos reais <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Data</ font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$textointrodut orio</font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Noticia</ font></td> </tr>”); } echo (“</table>”); } else { print (“Não há registos”); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 99
  • 100. Curso Técnico de Desenho Gráfico Execução de projectos reais Adicionar dados O código adicionar dados, permite-nos adicionar dados específicos. O código contém 2 ficheiros, o adic.php e o adic1.php. O primeiro ficheiro é um formulário que contém todos os campos, excepto o id vazios, para que se pos- sa inserir os dados da nova Noticia. O administrador insere os dados e carrega no botão Adicionar registo e então abre a página adic1.php. O adic1.php mostra os dados inseridos em uma tabela e apresentar uma mensagem que refere que foi inserido com sucesso. Fig. 32 – Adicionar registo adic.php <?php require ‘verifica.php’; ?> Cesário Rafael Baía Alves 100
  • 101. Curso Técnico de Desenho Gráfico Execução de projectos reais <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> Cesário Rafael Baía Alves 101
  • 102. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <form method=”POST” action=”adic1.php”> <table border=0 width=60%> <b>Adição de registo/notícia:</b> <tr><td width=30%>Título</td><td> <input type=”text” name=”Titulo” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> </td></tr> <tr><td width=30%>Autor</td><td> <input type=”text” name=”Autor” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> </td></tr> <tr><td width=30%>Data</td><td> <input type=”text” name=”Data” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> Cesário Rafael Baía Alves 102
  • 103. Curso Técnico de Desenho Gráfico Execução de projectos reais ></td></tr> <tr><td width=30%>textointrodutorio</td><td> <input type=”text” name=”textointrodutorio” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”></td></tr> <tr><td width=30%>Notícia</td><td> <textarea name=”Noticia” style=”background-color:e6f6ff; border: 1px solid #93cced;” cols=”50” rows=”8”></textarea></td></tr> </table> <p align=”left”><input type=”submit” class=”click“value=”Adicionar registo”> <input type=”reset” class=”click” value=”Limpar ecrã”> <p align=”center”></p> </p> </form> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 103
  • 104. Curso Técnico de Desenho Gráfico Execução de projectos reais adic1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> Cesário Rafael Baía Alves 104
  • 105. Curso Técnico de Desenho Gráfico Execução de projectos reais </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php if ($Noticia){ mysql_connect(“localhost”,”admin”,”freguesia”) or die (“Problema na ligação ao servidor MySQL”); $sql=”insert into noticias(Noticia, Autor, Titulo,textointrodutorio, Data) values (‘$Noticia’,’$Autor’,’$Titul o’,’$textointrodutorio’,’$Data’)”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $reg_ins=mysql_affected_rows(); Cesário Rafael Baía Alves 105
  • 106. Curso Técnico de Desenho Gráfico Execução de projectos reais echo “$reg_ins registo inserido com sucesso <p>”; echo “Dados actuais da base de dados”; if ($resultado){ $sql=”select Noticia, Autor, Titulo, Data, textointrodutorio from noticias”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado) { print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</ b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></ font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)){ $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; Cesário Rafael Baía Alves 106
  • 107. Curso Técnico de Desenho Gráfico Execução de projectos reais print (“<tr><td>$Titulo</td><td>$Autor</td><td>$Data</td><td>$textointrodutorio</ td><td>$Noticia</td></tr>”); } echo(“</table>”); }else{ print (“Não há registos”); } mysql_free_result ($resultado); }else{ echo”Por favor preencha o campo”; echo”<p></p>”; } } ?> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 107
  • 108. Curso Técnico de Desenho Gráfico Execução de projectos reais Alterar dados A alteração de dados consiste num código que contém três páginas, alterando os dados da notí- cia. O código contém 3 ficheiros, o alter.php, o alter1.php e alter2.php. O alter.php vai buscar os campos à base de dados e cria uma tabela onde os campos são apresen- tados. O título de cada notícia aparece com uma hiperligação que, ao ser carregada, abre o ficheiro alter1.php. O alter1.php é um formulário que contém todos os campos excepto o id, que nunca pode ser modifi- cado. O administrador modifica, carrega no botão Alterar e então abre a página alter2.php. O alter2.php só irá mostrar uma mensagem que concluiu com sucesso e os novos dados. alter.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> Cesário Rafael Baía Alves 108
  • 109. Curso Técnico de Desenho Gráfico Execução de projectos reais <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> Cesário Rafael Baía Alves 109
  • 110. Curso Técnico de Desenho Gráfico Execução de projectos reais <b> Edição de registo</b> <br>Escolha um registo para alterar <?php $ligacao=mysql_connect(“localhost”,”admin”,”freguesia”); if (!ligacao) { print (“Problema na ligação ao servidor Mysql”); } $sql=”select * from noticias”; $resultado = mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado){ print (“<table width=”90%” align=center border=1 >”); print (“<tr><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutó- rio</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)) { $id=$registo[“id”]; $Titulo=$registo[‘Titulo’]; Cesário Rafael Baía Alves 110
  • 111. Curso Técnico de Desenho Gráfico Execução de projectos reais $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; print (“<tr><td align=center> <a href=”alter1.php?identif=$id&Noticia=$Noticia&textointrodutorio=$textointrodutorio&Autor=$Aut or&Titulo=$Titulo&Data=$Data”>$Titulo</a></td><td align=left>$Autor</td><td align=left>$Data</ td><td align=left>$textointrodutorio</td><td align=left>$Noticia</td></tr>”); } echo (“</table>”); }else{ print (“Não há registos”); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 111
  • 112. Curso Técnico de Desenho Gráfico Execução de projectos reais alter1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> Cesário Rafael Baía Alves 112
  • 113. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <p><b>Edição de registo</b> <br>Registo seleccionado <form method=”post” action=”alter2.php”> Nº de id - <?php echo “ $id”;?> <br> <table border=0 width=60%> <tr><td width=30%>Titulo</td><td> <input type=”text” name=”Titulo” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Titulo”;?>”></td></tr> <tr><td width=30%>Autor </td><td> <input type=”text” name=”Autor” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Autor”;?>”></td></tr> <tr><td width=30%>Data</td><td> Cesário Rafael Baía Alves 113
  • 114. Curso Técnico de Desenho Gráfico Execução de projectos reais <input type=”text” name=”Data” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Data”;?>”></td></tr> <tr><td width=30%>Texto introdutório</td><td> <input type=”text” name=”textointrodutorio” size=”50” style=”background-color:e6f6ff; border: 1px so- lid #93cced;”value=”<?php echo “$textointrodutorio”;?>”></td></tr> <tr><td width=30%>Noticia</td><td> <textarea name=”Noticia” cols=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;;”rows=”8”><?php echo “$Noticia”;?></textarea></td></tr> </table><br> <input type=”submit” class=”click” value=”Alterar”> <input type=”hidden” name=”id” value=”<?php echo”$identif”;?>”> </form> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </html> Cesário Rafael Baía Alves 114
  • 115. Curso Técnico de Desenho Gráfico Execução de projectos reais alter2.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> Cesário Rafael Baía Alves 115
  • 116. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php /*script alter2.php*/ ?> <?php mysql_connect(“localhost”,”admin”,”freguesia”) or die (“impossivel ligar a servidor MYSQL <p>”); $sql=”update noticias set Titulo=’$Titulo’, Autor=’$Autor’,Data=’$Data’,textointrodutorio=’$textointrod utorio’,Noticia=’$Noticia’ where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_afect=mysql_affected_rows(); if($resultado) { print(“Alteração de $num_afect registo efectuado com sucesso.<p>”); print(“O registo alterado passa a possuir os seguintes dados: <p>”); $sql=”select Titulo, Autor, Data, textointrodutorio,Noticia from noticias where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_campos=mysql_num_fields($resultado); $num_reg=mysql_num_rows($resultado); print (“<table width=60% border=1>”); Cesário Rafael Baía Alves 116
  • 117. Curso Técnico de Desenho Gráfico Execução de projectos reais for ($coluna=0;$coluna<$num_campos;$coluna++) { $field=mysql_field_name ($resultado, $coluna); $campo=mysql_result ($resultado,0,”$field”); print(“<tr><td align=center bgcolor=”#7CC1E7”><b>$field</b></td><td>$campo</td></tr>”); } print(“</table>”); }else{ print (“Ocorreu um erro, repita a operação”); } mysql_free_result($resultado); mysql_close(); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </html> Cesário Rafael Baía Alves 117
  • 118. Curso Técnico de Desenho Gráfico Execução de projectos reais Eliminar dados O código eliminar dados, tal como o nome indica, permite-nos eliminar dados da base de dados. O código contém 2 ficheiros, o elim.php e o elim1.php. O elim.php vai buscar os campos à base de dados e cria uma tabela onde os campos são apresen- tados. O ID de cada notícia aparece com uma hiperligação que, ao ser carregada, abre o ficheiro elim1.php. O elim1.php irá apresentar uma mensagem a perguntar se deseja eliminar aquela notícia. Se carregar no Ok eliminará a notícia da respectiva base de dados. elim.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> Cesário Rafael Baía Alves 118
  • 119. Curso Técnico de Desenho Gráfico Execução de projectos reais <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php mysql_connect(“localhost”,”admin”,”freguesia”) or die (“Impossivel ligar à base de dados”); Cesário Rafael Baía Alves 119
  • 120. Curso Técnico de Desenho Gráfico Execução de projectos reais $sql=”select * from noticias order by id asc”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if($resultado){ print(“<b>Seleccione o registo que pretende eliminar<p></b>”); print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”5%” align=center bgcolor=”#7CC1E7” ><font face=”Trebuchet MS”<font color=”#333333”><b>ID</b></font></td><td width=”5%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></ font></td><td width=”20%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></ font></td></tr>”); while($registo=mysql_fetch_array($resultado)){ $id=$registo[“id”]; $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; Cesário Rafael Baía Alves 120
  • 121. Curso Técnico de Desenho Gráfico Execução de projectos reais print(“<td><align=center> <a href=”elim1.php?Noticia=$Noticia&textointrodutorio=$textointrodutorio&Autor=$Autor&Titulo=$Tit ulo&Data=$Data&id=$id”>$id</a> </td><td align=left>$Titulo</a></td><td align=left>$Autor</td><td align=left>$Data</td><td align=left>$textointrodutorio</td><td align=left>$Noticia</td></tr>”); } print(“</table>”); }else{ print(“Não há registos “); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 121
  • 122. Curso Técnico de Desenho Gráfico Execução de projectos reais elim1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> Cesário Rafael Baía Alves 122
  • 123. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php mysql_connect(“localhost”,”admin”,”freguesia”)or die (“Impossivel ligar à base de dados”); $sql=”select * from noticias where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado){ print(“Eliminação do registo com id=$id vai ser executada”); print (“<table width=”100%” align=center border=1 >”); print (“<tr><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</ b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” Cesário Rafael Baía Alves 123
  • 124. Curso Técnico de Desenho Gráfico Execução de projectos reais font color=”#333333”><b>Notícia</b></font></td></tr>”); while ($registo=mysql_fetch_array($resultado)){ $Noticia=$registo[‘Noticia’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Autor=$registo[‘Autor’]; $Titulo=$registo[‘Titulo’]; $Data=$registo[‘Data’]; $id=$registo[“id”]; print (“<tr> <td>$Titulo</td> <td>$Autor</td> <td>$Data</td> <td>$textointrodutorio</td ><td>$Noticia</td> </tr>”); } print(“</table>”); if ($submit) { $sql=”delete from noticias where id=’$id’ and Noticia=’$Noticia’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_del=mysql_affected_rows(); if ($num_del>0){ print (“<p>Eliminação do registo executada com sucesso”); } }else{ ?> <form method=”post” action=”<?php echo $PATH_INFO?>”> <p>Confirma a Eliminação? Cesário Rafael Baía Alves 124
  • 125. Curso Técnico de Desenho Gráfico Execução de projectos reais <input type=”submit” class=”click” name=”submit” value=”OK”> <input type=”hidden” name=”id” value=”<?php echo “$id”;?>”> </form> <?php } }else{ print (“Não há registos”); } mysql_close(); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 125
  • 126. Curso Técnico de Desenho Gráfico Execução de projectos reais Folha de Estilos (CSS) estilos.css Esta folha de estilos contém todos os estilos que utilizei no website. /*Documento CSS Freguesia de Maximinos */ body { margin:0px 0px 0px 0px;/*pagina geral */ text-align:center; background: url(imagens/bg.png) repeat #006AB2; } #tudo { width:1004px;/*Caixa geral */ height: auto; margin:auto; border-left: 8px solid #D4CFBB; border-right: 8px solid #D4CFBB; background:#FFFFFF;/*cor branca*/ position:absolute;/*posicao absoluta*/ left:50%; margin-left:-502px; z-index:1; Cesário Rafael Baía Alves 126
  • 127. Curso Técnico de Desenho Gráfico Execução de projectos reais } #topo { height:211px;/*medida */ width:auto; background: #FFFFFF; border:1px solid #000000; margin:15px 30px 0px 30px; padding:5px 0px 0px 0px; position:relative; text-align: center; -moz-border-radius: 8px;/*cantos arredondados por todas as divs */ -webkit-border-radius: 8px; -webkit-box-shadow: 1px 1px 40px #888; } #banner { height:170px;/*medida */ width:auto;/*medida */ background: url(imagens/banner.png) no-repeat #00AFF0;/*#00AFF0 Azul */ border:0px solid transparent; margin:0px 7px 7px 7px; position:relative; text-align: center; -moz-border-radius-topleft:8px; Cesário Rafael Baía Alves 127
  • 128. Curso Técnico de Desenho Gráfico Execução de projectos reais -webkit-border-top-left-radius:8px; -moz-border-radius-topright:8px; -webkit-border-top-right-radius:8px; } #menu { width:auto;/*medida */ height:34px;/*medida */ font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; background: url(imagens/menu.png) #0066CC;/*#00578AAzul */ border:0px solid transparent; margin:0px 7px 7px 7px; position:relative; float:left; z-index:300; text-align: center; } #centro { height:auto;/*medida #F8F8F8*/ width:635px; background: transparent; margin:32px 0px 15px 15px; text-align: center; Cesário Rafael Baía Alves 128
  • 129. Curso Técnico de Desenho Gráfico Execução de projectos reais float:left; z-index:1; } #agenda { height:120px;/*medida */ width:580px; background: url(imagens/agenda.png) no-repeat; border:0px solid transparent; margin:0px 0px 40px 43px; padding:5px 15px 5px 20px; text-align: center; float:left; } .agenda1 { height:100px;/*medida */ width:570px; background:transparent; border:0px solid transparent; -moz-column-count: 1; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 1; -webkit-column-gap: 1em; Cesário Rafael Baía Alves 129
  • 130. Curso Técnico de Desenho Gráfico Execução de projectos reais -webkit-column-rule: 1px solid black; margin:0px 0px 40px 0px; text-align: center; float:left; } .agendatitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 15px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; font-size:11px; color: #A13B12; font-weight: normal; text-align: left; font-style:normal; } .agendahora { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 15px; Cesário Rafael Baía Alves 130
  • 131. Curso Técnico de Desenho Gráfico Execução de projectos reais font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#00578A; font-weight: normal; text-align: left; font-style:normal; } .agendaproximo { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 5px; position:relative; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align:center; font-style:normal; } #direita { height: auto;/*medida */ width:305px; Cesário Rafael Baía Alves 131
  • 132. Curso Técnico de Desenho Gráfico Execução de projectos reais background: #F2F2F2; margin:32px 15px 15px 0px; border:1px solid #DDDDDD; text-align: center; float:right; z-index:1; } /*Noticias*/ #noticias { height:auto;/*medida #b8dff3, 0065b0 */ width:265px; background: #D0ECF9; margin:15px 15px 15px 15px; padding:5px 5px 5px 5px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; border-top:18px solid #008ACC; text-align: center; float:right; } h4 { color: #00578A; Cesário Rafael Baía Alves 132
  • 133. Curso Técnico de Desenho Gráfico Execução de projectos reais font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 5px 5px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } h2 { color: #00578A; font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 0px 15px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } h6 { color: #00578A; font-family:”Arial”, Helvetica, sans-serif; margin:0px 0px 3px 5px; font-size:18px; Cesário Rafael Baía Alves 133
  • 134. Curso Técnico de Desenho Gráfico Execução de projectos reais font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .noticiastitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; text-transform: uppercase; font-size:11px; color: #006AB2; font-weight: normal; text-align: left; font-style:normal; } .noticiastexto { height:auto;/*medida*/ width:auto; background:transparent; Cesário Rafael Baía Alves 134
  • 135. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; font-style:normal; } .noticiashora { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align: left; font-style:normal; } .noticiasproximo { height:auto;/*medida*/ width:auto; Cesário Rafael Baía Alves 135
  • 136. Curso Técnico de Desenho Gráfico Execução de projectos reais background:transparent; margin:5px 5px 0px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align:center; font-style:normal; } /*Noticias Fim*/ hr { color: #CCCCCC; } /*Incicio de Serviço*/ #servico { height:105px;/*medida #c1cf73, #71a107*/ width:265px; background:#D6E299; margin:15px 15px 15px 15px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; Cesário Rafael Baía Alves 136
  • 137. Curso Técnico de Desenho Gráfico Execução de projectos reais border-top:18px solid #97BE0D; padding:5px 5px 5px 5px; text-align: center; float:right; } h5 { color: #71A81D; font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 5px 5px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .servicotitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; font-size:11px; Cesário Rafael Baía Alves 137
  • 138. Curso Técnico de Desenho Gráfico Execução de projectos reais color: #71A81D; font-weight: normal; text-align: left; text-transform:uppercase; font-style:normal; } .servicotexto { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; font-style:normal; } /*Fim de Serviço*/ /*inicio horario*/ #horario { height:105px;/*medida #c1cf73, #71a107*/ Cesário Rafael Baía Alves 138
  • 139. Curso Técnico de Desenho Gráfico Execução de projectos reais width:265px; background:#FFFFFF; margin:15px 15px 15px 15px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; border-top:18px solid #86AFB0; padding:5px 5px 5px 5px; text-align:left; float:right; } .horariotitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; text-transform:uppercase; font-size:11px; color: #006AB2; font-weight: normal; text-align: left; Cesário Rafael Baía Alves 139
  • 140. Curso Técnico de Desenho Gráfico Execução de projectos reais } .horariotexto { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: left; font-style:normal; } /*fim horario*/ .direitos { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:10px; color:#333333; font-weight: normal; text-align:center; margin: 5px 50px 0px 180px; Cesário Rafael Baía Alves 140
  • 141. Curso Técnico de Desenho Gráfico Execução de projectos reais padding:0px 5px 0px 5px; width:600px; height:auto; background:#F2F2F2; font-style:normal; float: left; } .direitos a { color:#333333; text-decoration:underline; outline:none; } .texto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } #caixa { Cesário Rafael Baía Alves 141
  • 142. Curso Técnico de Desenho Gráfico Execução de projectos reais height:auto;/*medida*/ width:610px; background:transparent; border-bottom:1px dashed #00AFF0; margin:0px 5px 5px 15px; float:left; } .caixatexto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } .caixatexto a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; Cesário Rafael Baía Alves 142
  • 143. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:2px 15px 0px 15px; font-style:normal; float:left; outline:none; } .caixatexto a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; margin:2px 15px 0px 15px; font-style:normal; float:left; outline:none; } .caixatextocentro { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; width:635px; height:auto; font-weight: normal; Cesário Rafael Baía Alves 143
  • 144. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:10px 15px 15px 15px; font-style:normal; float:left; } .caixatextocentro a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: center; margin:2px 15px 0px 15px; font-style:normal; outline:none; } .caixatextocentro a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: center; margin:2px 15px 0px 15px; font-style:normal; outline:none; Cesário Rafael Baía Alves 144
  • 145. Curso Técnico de Desenho Gráfico Execução de projectos reais } h3 { color: #3399FF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:5px 0px 5px 15px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .imagemfoto { background: transparent; margin:0px 15px 0px 0px; outline:none; border:1px solid #CCCCCC; padding:5px 5px 5px 5px; float:left; } #slideshow { display:block; float:left; width:606px; Cesário Rafael Baía Alves 145
  • 146. Curso Técnico de Desenho Gráfico Execução de projectos reais height:306px; background:transparent; text-align: center; margin:2px 0px 50px 15px; padding:0px 0px 0px 0px; z-index:1; } #slides { width:606px; height:306px; z-index:1; } #slideshow .nav { display:block; position:relative; bottom:55px; right:-250px; z-index:3000; } #slideshow .nav a { text-decoration:none; outline:none; color:#fff; Cesário Rafael Baía Alves 146
  • 147. Curso Técnico de Desenho Gráfico Execução de projectos reais font-weight:bold; font-size:28px; font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; } #slideshow .nav a:hover { text-decoration:none; color:#333; } .clear:after { content:”.”; height:0; visibility:hidden; display:block; clear: both; } #menus-1 { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; list-style:none; width:100%; height:34px;/*medida */ font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; Cesário Rafael Baía Alves 147
  • 148. Curso Técnico de Desenho Gráfico Execução de projectos reais z-index:10; } #menus-1 li { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; display:block; float:left; position:relative; height:auto; width:154px; z-index:10; } #menus-1 li a:link, #menus-1 li a:visited { padding:8px 0px 0px 0px; display:block; text-align:center; text-decoration:none; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; background: url(imagens/menu.png); color:#ffffff; z-index:10; border-left:1px dotted #00AFF0; Cesário Rafael Baía Alves 148
  • 149. Curso Técnico de Desenho Gráfico Execução de projectos reais border-right:1px dotted #00AFF0; width:154px; outline:none; height:26px;/*medida */ } #menus-1 li:hover a, #menus-1 li a:hover, #menus-1 li a:active { padding:8px 0px 0px 0px; margin:0px 0px 0px 0px; display:block; text-align:center; text-decoration:none; background: url(imagens/menuselecionado.png); color:#ffffff; z-index:10; width:154px; height:26px;/*medida */ } #menus-1 li ul.menus-2 { margin:0px 0px 0px 0px; padding:1px 1px 0px 0px; list-style:none; display:none; z-index:10; Cesário Rafael Baía Alves 149
  • 150. Curso Técnico de Desenho Gráfico Execução de projectos reais background:url(imagens/menus.png); width:135px; height:auto; position:absolute; top:34px; left:-1px; border-top:none; } #menus-1 li:hover ul.menus-2 { display:block; } #menus-1 li ul.menus-2 li { clear:left; height:auto; display:block; margin:0px 0px 0px 0px; position: relative; z-index:10; width:151px; } #menus-1 li ul.menus-2 li a:link, #menus-1 li ul.menus-2 li a:visited { clear:left; background: url(imagens/menu.png); Cesário Rafael Baía Alves 150
  • 151. Curso Técnico de Desenho Gráfico Execução de projectos reais padding:3px 5px 3px 10px; margin:0px 0px 0px 0px; width:135px; height:auto;/*medida */ border:none; border-bottom:1px solid #000000; border-left:1px dotted #00AFF0; border-right:1px dotted #00AFF0; position:relative; text-align:left; z-index:10; } #menus-1 li ul.menus-2 li:hover a, #menus-1 li ul.menus-2 li a:active, #menus-1 li ul.menus-2 li a:hover { clear:left; background: url(imagens/menuselecionado.png); padding:3px 5px 3px 10px; width:135px; border-bottom:1px solid #000000; border-left:1px dotted #00AFF0; border-right:1px dotted #00AFF0; position:relative; z-index:10; height:auto;/*medida */ Cesário Rafael Baía Alves 151
  • 152. Curso Técnico de Desenho Gráfico Execução de projectos reais } #menus-1 li ul.menus-2 li ul.menus-3 { display:none; margin:0px; padding:0px; list-style:none; position:absolute; left:150px; top:0px; margin:0px 0px 0px 0px; padding:1px 1px 0px 1px; border:none; background: #0066CC; z-index:10; } #menus-1 li ul.menus-2 li:hover ul.menus-3 { display:block; z-index:10; } #menus-1 li ul.menus-2 li ul.menus-3 li a:link, #menus-1 li ul.menus-2 li ul.menus-3 li a:visited { background: url(imagens/menu.png); z-index:10; } Cesário Rafael Baía Alves 152
  • 153. Curso Técnico de Desenho Gráfico Execução de projectos reais #menus-1 li ul.menus-2 li ul.menus-3 li:hover a, #menus-1 li ul.menus-2 li ul.menus-3 li a:hover, #menus-1 li ul.menus-2 li ul.menus-3 li a:active { background: url(imagens/menuselecionado.png); z-index:10; } #menus-1 li ul.menus-2 li a span { position:absolute; top:3px; left:135px; font-size:13px; z-index:10; color: #0099FF; #menus-1 li ul.menus-2 li:hover a span, #menus-1 li ul.menus-2 li a:hover span { position:absolute; top:3px; left:135px; font-size:13px; color:#ffffff; } h1 { color: #FFFFFF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:-5px 0px 0px 0px; Cesário Rafael Baía Alves 153
  • 154. Curso Técnico de Desenho Gráfico Execução de projectos reais Junta de Freguesia Maximinos background: url(imagens/menu.png); padding:0px 5px 0px 5px; font-size:12px; text-align:center; border-left:1px solid #00AFF0; border-right:1px solid #00AFF0; border-bottom:1px solid #00AFF0; font-variant:normal; font-weight: normal; text-align:left; font-style:normal; } Cesário Rafael Baía Alves 154
  • 155. Curso Técnico de Desenho Gráfico Execução de projectos reais pROJECTOS 4 Cesário Rafael Baía Alves 155
  • 156. Curso Técnico de Desenho Gráfico Execução de projectos reais Os suportes publicitários como elemento principal pretendem divulgar um produto. O meu objectivo é divulgar sobre os projectos que executei ao longo deste ano lectivo. Comecei por pensar quais os suportes publicitários a utilizar e quais os seus formatos. A decisão ficou sobre a construção de um catálogo em formato A 4 , um desdobrável em formato A 3 , um cartão cliente e uma embalagem de CD’S. Capa do Catálogo sobre os projectos tratados ao longo da PAP. Cesário Rafael Baía Alves 156
  • 157. Curso Técnico de Desenho Gráfico Execução de projectos reais Exemplo de uma capa do catálogo Exemplo de uma das páginas do catálogo Cesário Rafael Baía Alves 157
  • 158. Curso Técnico de Desenho Gráfico Execução de projectos reais C M Y CM MY CY CMY K Capa da embalagem do CD - lado exterior. cd.pdf 04-06-2009 00:42:29 Execução de Projectos Reais Capa da embalagem do CD - lado interior. C M Cesário Rafael Baía Alves 158 Y CM MY CY CMY K
  • 159. Curso Técnico de Desenho Gráfico Execução de projectos reais Este CD foi criado com o objectivo de ser um anexo a esta Prova de Aptidão Profissional, onde contém todos os dados realizados desta prova. Cesário Rafael Baía Alves 159
  • 160. Curso Técnico de Desenho Gráfico Execução de projectos reais Desdobrável em Memórias formato A 3 , onde contém como Empresa ACIB com o tema ”Barcelos em Acção” Logo usado para identificar os meus trabalhos. Discoteca fictícia para relembrar os anos 80/90. principal função divulgar o trabalho realizado ao lon- go desta PAP e ao 30sixty design uma empresa na área do cinema Logo da empresa AECOPS Cartaz A3 tema: Solidariedade logo deste curso. Cartaz A3 tema: Festa de Natal na EPB Cartaz A3 tema: Concurso Nacional de Leitura Cartaz A3 tema: Feira do Empreendimento Cartaz A3 tema: Uma realidade diferente Cartaz A3 tema: Alcoolismo e os Jovens Cartaz A3 tema: I Jornadas de Design Gráfico Cartaz A3 tema: Mostra de Escolas 2008 Cartaz A3 tema: Dia Mundial do Ambiente Cartaz A3 tema: Dia Mundial do Ambiente Cesário Rafael Baía Alves 160
  • 161. Curso Técnico de Desenho Gráfico Execução de projectos reais CARTAOFRENTE.pdf 06-06-2009 03:25:18 CARTAOTRAS.pdf 19-05-2009 0:09:50 Cartão-de-cliente produzido com a finalidade de entre- gar a cada respon- sável do projecto. C M Y CM MY CY Cesário Rafael Baía Alves 161 CMY K
  • 162. Curso Técnico de Desenho Gráfico Execução de projectos reais Conclusão Conclusão Cesário Rafael Baía Alves 162
  • 163. Curso Técnico de Desenho Gráfico Execução de projectos reais Conclusão A Prova de Aptidão Profissional é o projecto mais marcante de todo o curso, pois permite-nos demons- trar as variadíssimas capacidades e conhecimentos teóricos e técnicos adquiridos na aprendizagem dos três anos, ou seja é um reflexo de todas as aprendizagens adquiridas ao longo do curso. O meu projecto consistiu na “execução de projectos reais”, para conseguir concluir este projecto foi preciso ter uma grande capacidade de autonomia e persistência, aspectos esses que se foram desen- volvendo à medida em que concebia, planeava e executava os projectos que me foram propostos. A execução da PAP envolveu um grande esforço e dedicação. Para além das competências técnicas e diversas capacidades que a prova exigiu, penso que foi benéfico para mim a nível profissional e a nível social, uma vez que no futuro irei enfrentar outros projectos tão ou mais importante que este. É com grande satisfação que vejo o meu projecto a terminar e, sobretudo ter conseguido realizar um projecto com aplicação real e prática que é uma mais valia para entidades envolvidas. Naturalmente que, no decorrer da realização da PAP senti diversas dificuldades, das quais só pu- deram ser ultrapassadas com a capacidade de trabalho que foi envolvido em mim, com o apoio do professor acompanhante e da colaboração das instituições envolvidas. O balanço que faço do desenvolvimento da Prova de Aptidão Profissional é positivo, uma vez que, o resultado final encontra-se num servidor online – no endereço http://freguesiamaximinos.pt/ e http:// fbracaraaugusta.org/. Quanto ao curso de Desenho Gráfico a minha opinião é igualmente positiva, pois ganhei muitos co- nhecimentos tanto a nível profissional, como a nível pessoal. Para além de sair da escola “mais madu- ro”, aprendi bastaste a todos os níveis. Fiz ainda muitas e boas amizades. Cesário Rafael Baía Alves 163
  • 164. Curso Técnico de Desenho Gráfico Execução de projectos reais Referências Bibliográficas Cesário Rafael Baía Alves 164
  • 165. Curso Técnico de Desenho Gráfico Execução de projectos reais Referências Bibliográficas Disponível em: http://www.maujor.com/ [Junho 09] Disponível em: http://www.theatrocirco.com/ [Junho 09] Disponível em: http://www.cm-braga.pt/ [Junho 09] Disponível em: http://www.energie.pt/ [Junho 09] Disponível em: http://forum.imasters.uol.com.br/ [Junho 08] Disponível em: http://www.w3schools.com/ [Junho 09] Disponível em: http://www.gasminho.com/ [Junho 09] Disponível em: http://www.fastforwardportugal.com/ [Junho 09] Disponível em: http://www.bragadigital.pt/ [Junho 09] Disponível em: http://www.historiadomundo.com.br/ [Junho 09] Disponível em: http://www.jf-lamacaes.pt/ [Junho 09] Disponível em: http://www.freguesiamontalegre.net/ [Junho 09] Disponível em: http://designshack.co.uk/ [Junho 09] Disponível em: http://www.criarweb.com/ [Junho 09] Disponível em: http://www.fprovidencia.com/site.html/ [Junho 09] Disponível em: http://www.dstype.com/ [Junho 09] Disponível em: http://www.vanarchiv.com// [Junho 09] Disponível em: https://w3-markup.com/order/ [Junho 09] Disponível em: http://www.13styles.com/ [Junho 09] Disponível em: http://www.noupe.com [Junho 09] Cesário Rafael Baía Alves 165
  • 166. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 166
  • 167. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexo A Cesário Rafael Baía Alves 167
  • 168. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 168
  • 169. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexo B Cesário Rafael Baía Alves 169
  • 170. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 170
  • 171. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 171
  • 172. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 172
  • 173. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 173
  • 174. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 174
  • 175. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 175
  • 176. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 176
  • 177. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 177
  • 178. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 178
  • 179. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 179
  • 180. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 180
  • 181. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 181
  • 182. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 182
  • 183. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 183
  • 184. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 184
  • 185. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 185
  • 186. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 186
  • 187. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 187
  • 188. Curso Técnico de Desenho Gráfico Execução de projectos reais Questionário online sobre o website da Fundação Questionário online sobre o website da Junta de Freguesia Maximinos mais Bracara Augusta mais informações em: http://sprea- informações em: http://spreadsheets.google.com/viewform?formkey=cmtzc2c dsheets.google.com/viewform?formkey=cGhuaXpYM wZmlEdUd3alhRTC1QOUMwN1E6MA.. G5hc2ZNLTlwZklyMDhlT0E6MA.. Cesário Rafael Baía Alves 188
  • 189. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos B Anexo C Cesário Rafael Baía Alves 189
  • 190. cd.pdf 04-06-2009 00:42:29 Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 190
  • 191. Curso Técnico de Desenho Gráfico Execução de projectos reais Execução de Projectos Reais Cesário Rafael Baía Alves 191
  • 192. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos C Anexo D Cesário Rafael Baía Alves 192
  • 193. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 193
  • 194. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos D Anexo E Cesário Rafael Baía Alves 194
  • 195. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 195
  • 196. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 196
  • 197. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 197
  • 198. Curso Técnico de Desenho Gráfico Execução de projectos reais 2 O Diário Quarta-feira 5 de Dezembro 2007 Destaque BANCA Maior banco privado tenta virar a página depois de renúncia do fundador Saída de Jardim Gonçalves não garante a paz no BCP O fundador está de saída. Mas a composição do próximo conselho de administração continua a ser motivo de tensão no banco Cristina Ferreira Jardim Gonçalves Foi um dia de reuniões e algumas fric- cujo desfecho não permitiu a clarificação o de António Rodrigues, o actual CFO, seduzido por Pinhal. Mas Pinhal é um ções no Banco Comercial Português. O dia do poder dentro do banco. e o de Luís Gomes, chefe de gabinete de líder a prazo, o que faz com que a sua lista já se adivinhava longo, depois da anun- Jardim, contestados pelo grupo de Be- tenha carácter transitório. Com 61 anos ciada decisão de Jorge Jardim Gonçalves Pacificação? rardo. cada, Pinhal e de Beck têm surgido asso- de colocar um ponto final à sua presença Um sinal de que Jardim abandona o ciados aos eventuais “perdões de divida” no banco que fundou há 22 anos. E assim Já Filipe Pinhal começou por lembrar: BCP numa situação de fragilidade e sem aos accionistas de referência. foi. “O que hoje fizemos ao longo do dia foi capacidade para influenciar o seu futuro, Por outro lado, a nova administração Pela manhã reuniu o Conselho Geral e uma tentativa de nos libertarmos de um apesar dos apoios accionistas que ainda começará a trabalhar numa conjuntura de Supervisão (CGS), onde Jardim apre- passado que incomoda, em benefício de tem.O fundador conseguiu apenas, e para económica desfavorável e os objectivos sentou a sua renúncia com efeitos a partir um futuro que tem todas as razões para já, travar a subida ao poder do grupo de de aceleração do crescimento serão mais de 31 de Dezembro. Já depois de almoço, ser auspicioso”. “É uma tentativa de voltar Joe Berardo. Mas não tem garantias de difíceis de atingir. Mas se a lista de Pinhal o mesmo sucedeu no Conselho Superior, uma página”, disse o presidente do CAE, que Filipe Pinhal não venha mais tarde a for aprovada (necessita de maioria sim- também presidido pelo líder histórico que em Setembro sucedeu a Teixeira Pin- aceitar que estes assumam um papel mais ples) na próxima AG, então o grupo de do BCP. Este órgão integra alguns ac- to. Mas há sinais de que a pacificação da relevante no banco.Pinhal comunicou que Berardo, Fino e Moniz da Maia perderá cionistas contestatários de Jardim, o que instituição não será automática e que a a sua lista à administração tem o apoio da a margem para continuar a contestar a fez prolongar a discussão sobre aspectos saída de Jardim dificilmente estabilizará maioria do Conselho Superior. gestão do BCP. jurídicos relacionados com a convocatória o grupo. Tudo indica que se está a camin- E embora seja aceite pelos accionistas da próxima assembleia geral. har para uma guerra entre duas listas que alinhados com Jardim (cerca de 22 por A decisão de Jardim Gonçalves, de 71 se vão confrontar na próxima assembleia cento do capital), não é totalmente do anos, renunciar às funções que desem- geral, entre 15 e 20 de Janeiro. De um lado seu agrado, pois estes sabem que o CEO penha no banco ocorre num quadro de di- aparece Filipe Pinhal a liderar uma pro- é hoje sobretudo um homem de confiança visão dos accionistas e da gestão. Ontem, posta para o CAE, onde apenas consta o da Teixeira Duarte, que tem tido um com- na sua intervenção de despedida, lembrou nome de um gestor da sua equipa, Cristo- portamento sinuoso no processo (com que 2007 trouxe alturas de “instabilidade” pher de Beck. Pinhal convidou ainda três apenas 5,7 por cento do capital, ajudou ao banco, mas este “sempre soube superar altos quadros do banco, Miguel Maya, a travar as negociações para a fusão com as dificuldades e o momento seu chefe o BPI e que eram desejadas por 33 por actual não é excepção.” “É de gabi- cento do capital do banco). A construtora 22% tempo de pôr fim à incerteza nete, José tem revelado ter uma agenda própria, e marcar um rumo definido”, João Guil- pois tem interesses muito relacionados notou o fundador do BCP, herme, com o grupo - é accionista, tem créditos, acrescentando que, “depois da banca e quer poder decidir sobre os 10 por cento de muito ponderar”, enten- É a percentagem de capital dos ac- de inves- que o BCP possui na Cimpor. Ao avançar deu que deveria renunciar às cionistas alinhados com Jardim que timento, com uma lista que pretende que seja uma suas funções.Isto, para ajudar agora apoiam a lista à administração e Paulo terceira via (não a de Jardim, não a de Be- a pacificar a instituição. apresentada e liderada por Filipe M o i t a rardo), o CEO pisca um olho aos investi- Mas deixou claro que se Pinhal Macedo dores que vinham reclamando a saída do manterá vigilante. “Não ex- (ex-direc- fundador.Como acaba de acontecer. Boas Festas e ercerei funções no banco, tor geral Depois de nos últimos dias tercriticado mas não saio.” Instado a esclarecer a sua dos impostos e director-geral do banco), Filipe Pinhal pelo facto de este ter assi- declaração, lembrou: “Sou cliente e ac- como prova de que o BCP tem capacidade nado os créditos e os perdões (30 milhões cionista.” A guerra no BCP já levou à de gerar competências. Fora do grupo de euros) a Goes Ferreira, Berardo foi Feliz Ano Novo saída do ex-presidente executivo Paulo foi buscar Rui Horta e Costa, da UBS, e Teixeira Pinto, no final da última reunião Alves Monteiro, ex-presidente da Bolsa. de accionistas (AG), realizada no Verão, e Pinhal deixou cair vários nomes, como ontem saudar a saída de Jardim, alegando que o poder deve ser entregue ao CAE. Uma indicação de que poderá ter sido já Cesário Rafael Baía Alves 198
  • 199. Curso Técnico de Desenho Gráfico Execução de projectos reais Requisitos do Sistema Microsoft Windows ® Computador/Sistema Operacional Windows Vista®/XP/Pro/Home/ Obtenha a con abilidade da tecnologia óptica por Media Center Edition/Tablet PC um preço baixo. Com uma conveniente roda e design 1 confortável e moderno, este rato de alto desempenho Edition/Windows 2000 SP4 ou superior agrega um alto valor. Espaço no Disco Rígido Espaço livre de 45 MB (100 MB para Tecnologia óptica Microsoft instalação) O rato mais rápido e mais preciso do mercado incor Outros porando a tecnologia óptica. Rastreamento superior resulta em movimento preciso do cursor e exatidão. Observação O software IntelliPoint fornece drivers e suporte para os recursos 2 de personalização. Macintosh Computador/Sistema Operacional Mac OS X v10.1x–10.4x (excluindo Mac OS X v10.0) Espaço no Disco Rígido Espaço livre de 30 MB (15 MB para 1. instalação) 2. Rato Óptico Outros Cesário Rafael Baía Alves 199
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

Prova de Aptidão Profissional

by cesarioalves8

on

Report

Category:

Technology

Download: 0

Comment: 0

126,136

views

Comments

Description

Apresentação do Projecto Final
Download Prova de Aptidão Profissional

Transcript

  • 1. Relatório da Prova de Aptidão Profissional « Execução de Projectos Reais » Nome do autor: Cesário Rafael Baía Alves Nome do professor acompanhante: João Delgado Curso Técnico de Desenho Gráfico Junho, 2009
  • 2. Curso Técnico de Desenho Gráfico Execução de projectos reais Escola Profissional de Braga Gerir Formação, Gerar Mundança Execução de Projectos Reais “Componente escrita da PAP – Projecto pessoal e integrador de todos os saberes e capacidades desenvolvidos ao longo da formação, realizado de acordo com a Portaria 550-C / de 21 de Maio de 2004, consiste na apresentação e defesa, perante um júri, de um projecto, consubstancio num produto, material ou intelectual, numa intervenção ou numa actuação, bem como respectivo relatório final de realização e apreciação crítica, demonstrativo de saberes e competências profissionais, ad- quiridos ao longo da formação e estruturante do futuro profissional. A PAP será realizada na Escola Profissional de Braga, na 1ª chamada da época normal de 2008/2009, através do qual se obterá o diploma de qualificação profissional de nível III do Curso Técnico de Desenho Gráfico.” Cesário Rafael Baía Alves 2
  • 3. Curso Técnico de Desenho Gráfico Execução de projectos reais Agradecimentos Cesário Rafael Baía Alves 3
  • 4. Curso Técnico de Desenho Gráfico Execução de projectos reais Agradecimentos Durante a elaboração da Prova de Aptidão Professional qualquer ajuda é importante portanto a colaboração de todos aqueles que estão à nossa volta é preciosa. Começo por agradecer ao pro- fessor Acompanhante João Delgado, João Teixeira por todo o apoio prestado e por me ter orientado neste percurso tão importante para a conclusão do curso. Gostaria também de agradecer à Professora de Português Teresa Machado por se disponibilizar a corrigir o relatório e por me ter guiado neste caminho tão importante para o fim do curso. Para a realização de todo o projecto não posso deixar de agradecer à minha família, amigos e a toda a gente que de alguma forma esteve envolvida na realização deste projecto. A todos eles o meu muito obrigado. Cesário Rafael Baía Alves 4
  • 5. Curso Técnico de Desenho Gráfico Execução de projectos reais Índice Cesário Rafael Baía Alves 5
  • 6. Curso Técnico de Desenho Gráfico Execução de projectos reais Índice 1. Introdução 07 3. Conclusão 162 2. Desenvolvimento 11 4. Referências Bibliográficas 164 2.1 Componete Teórica 12 5. Anexos 166 2.1.1 Software Utilizado 13 5.1 Anexo A - Catálogo 167 2.1.1 Linguagens de Programação 19 5.2 Anexo B - Websites 169 5.3 Anexo C - Suportes Publicitários 188 2.2 Apresentação de Projectos 24 5.4 Anexo D - Defenição do Projecto 192 2.2.1 Projecto 1 5.5 Anexo E - Portfolio 194 FUNDAÇÃO BRACARA AUGUSTA 25 2.2.2 Projecto 2 GINÁSIO OXY GYM 67 2.2.3 Projecto 3 JUNTA DE FREGUESIA MAXIMINOS 75 2.2.4 Projecto 4 SUPORTES PUBLICITÁRIOS 155 Cesário Rafael Baía Alves 6
  • 7. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Cesário Rafael Baía Alves 7
  • 8. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Enquadramento legal da prova (Portaria 550C/2004 de 21 de Maio de 2004) Como Aluno Finalista da Escola Profissional de Braga, do curso Técnico de Desenho Gráfico, é obri- gatória a apresentação do projecto final de curso. Com este projecto pretende-se que se mostre autonomia, criatividade e capacidade de resolver problemas que possam surgir. O tema “Execução de projectos reais” foi uma proposta dada pelo coordenador de curso João Pau- lo Teixeira, onde aceitei-a plenamente. Devido à minha experiência em estágio, pareceu-me que a realização de um projecto desta natureza poderia constituir uma mais valia à minha formação e ao desenvolvimento da minha Prova de Aptidão Profissional, pois terei a oportunidade de debater ideias com um cliente real e resolver situações a nível das exigências do mercado de trabalho. Assim, considero que este tema será um género de espaço que abrange uma grande área do Design Gráfico, dado que, futuramente sei que vai ser útil para a minha carreira, uma vez que trabalhamos constantemente neste tipo de projectos. Deste modo, os principais objectivos que pretendo alcançar a nível pessoal e profissional, será apli- car e desenvolver as minhas competências adquiridos ao longo do triénio de formação, adequando as novas situações de aprendizagem e de execução prática de soluções ligadas à área do design, melhorando as minhas competências como designer gráfico. O facto de realizar projectos com a em- Cesário Rafael Baía Alves 8
  • 9. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução presa que tenham reconhecimento na área do Design Gráfico, Design Digital, Design Produto poderão ser um desafio importante para as metas que me proponho alcançar. Os locais utilizados para a execução do projecto foram a Escola Profissional de Braga e principal- mente a minha casa. No que diz respeito aos recursos utilizei, designadamente, Windows XP e Vista, Microsoft Office Word 2007, Microsoft Office PowerPoint 2007, Adobe Dreamweaver CS3, Adobe Flash CS3 Professional, Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe InDesign CS3, Adobe Premiere Pro CS3, FileZilla, Internet Explorer 7.0, Mozilla Firefox 3.0, Safari 3.1. Utilizei também várias linguagens de programação, nomeadamente, HTML, CSS, JavaScript, ActionScript, MySQL, PHP. Quanto aos recursos humanos foi indispensável o apoio mútuo entre mim e os meus colegas que pou- co a pouco, fomos aprendendo uns com os outros resultando desta entreajuda os nossos projectos. Devo também agradecer ao professor João Delgado, João Teixeira e professora Teresa Machado que para além de terem demonstrado um domínio enorme na matéria sempre mostraram interesse no meu projecto, assim como se mostraram disponíveis para me ajudar. No que diz respeito à metodologia, ao longo deste projecto articulei e desenvolvi os três projectos a que me propus simultaneamente embora desse prioridade àqueles que mereceram maior complexidade em termos de execução e aprendizagem. Cesário Rafael Baía Alves 9
  • 10. Curso Técnico de Desenho Gráfico Execução de projectos reais Introdução Quanto ao parecer da equipa pedagógica, esta deu o seu parecer favorável à realização do meu projecto. Passo, de seguida a apresentar o cronograma / elencos de tarefas Elenco de Tarefas Calendarização Briefing/Pesquisa Até Dezembro Realização dos Projectos Até Março Catálogo impresso e em formato digital Até Junho Cesário Rafael Baía Alves 10
  • 11. Curso Técnico de Desenho Gráfico Execução de projectos reais Desenvolvimento Cesário Rafael Baía Alves 11
  • 12. Curso Técnico de Desenho Gráfico Execução de projectos reais Componente Teórica Cesário Rafael Baía Alves 12
  • 13. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Microsoft Windows O Windows XP é um sistema operativo muito popular. Utilizei a versão XP SP3 porque se trata de uma versão de confiança e onde ocorre a maioria das aplicações que utilizei para elaboração deste projecto. Microsoft Word 2007 O Word é um processador de texto da Microsoft, que permite criar diver- sos documentos de texto, modelos, e várias maneiras de formatar um docu- mento com os diferentes tipos de esti- los. Permite que os documentos sejam editados e escritos para páginas de Internet bem como interagir com outros programas. Na minha Prova de Aptidão Profissional utilizei o Word para a edição e cria- ção de textos, para o relatório e diário da PAP, cronograma e, em parte, para o Website. Fig. 1 – Microsoft Word 2007 Cesário Rafael Baía Alves 13
  • 14. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Microsoft PowerPoint 2007 A Microsoft PowerPoint, é um programa que permite a criação e exibição de apresentações, cujo objectivo é informar sobre um determinado tema, podendo usar imagens, sons, textos e vídeos, que podem ser animados de diferentes maneiras, é uma ferramenta que ajuda a mostrar informações e ideias de uma forma organizada e, de certa forma, apelativa. Na minha Prova de Aptidão Profissional utilizei o Microsoft PowerPoint para a criação de uma breve apresentação do projecto PAP. Adobe Dreamweaver CS3 O Adobe Dreamweaver serve para desenvolver e editar ficheiros direccionados à Web, com dife- rentes tipos de extensões, para páginas dinâmi- cas e estáticas. Podem ser utilizadas por diversos tipos de aplicações. Na minha Prova de Aptidão Profissional utilizei o Adobe Dreamweaver para edição de todos os Websites, criação e edição das páginas. Fig. 2 – Adobe Dreamweaver CS3 Cesário Rafael Baía Alves 14
  • 15. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Adobe Photoshop CS3 Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição típicas dos editores vectoriais) desenvol- vido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais, assim como o programa de facto para edição profissional de imagens digitais e trabalhos de pré-impressão. Esta ferramenta foi-me bastante útil na criação de imagens, tratamento de fotografias, tratamento dos logotipos das instituições. Fig. 3 – Adobe Dreamweaver CS3 Adobe Illustrator CS3 O Illustrator, um poderoso programa para criação e edição de imagens vectoriais da Adobe. Na minha Prova de Aptidão Profissional utilizei o Adobe Illustrator para a criação dos layouts das páginas Web. Cesário Rafael Baía Alves 15
  • 16. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Adobe InDesign CS3 Programa com a principal função de paginar jornais, catálogos, Desdobráveis e Revistas. Este programa foi-me útil na criação do catálogo e na paginação deste relatório. Adobe Premiere Pro CS3 Este software é utilizado para a edição e criação de vídeos. Na minha Prova de Aptidão Profissional utilizei o Adobe Premiere para editar o vídeo para a Funda- ção Bracara Augusta. Adobe Flash CS3 Professional O Flash é um programa gráfico vectorial utilizado para a criação de animações interactivas. Os ar- quivos executáveis gerados pelo Flash, chamados ”SWF”, podem ser visualizados numa página Web usando um navegador Web. Na minha Prova de Aptidão Profissional utilizei o Adobe Flash para fazer a apresentação no início do vídeo para a Fundação Bracara Augusta. Cesário Rafael Baía Alves 16
  • 17. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado Internet Explorer 7 O Internet Explorer (IE) é um software para navegar podendo, assim, fazer todas as pesquisas neces- sárias e também testar os conflitos no Web Site. Na minha Prova de Aptidão Profissional utilizei Internet Explorer para fazer as pesquisas necessárias e para testar o Web Site. Mozilla Firefox 3.0.1 O Mozilla Firefox é um software com a função idêntica ao Internet Explorer, possibilita a navegação na Internet, podendo fazer pesquisas e testar o Web Site. Na minha Prova de Aptidão Profissional utilizei o Mozilla Firefox para fazer as pesquisas necessárias e para testar o Web Site. Cesário Rafael Baía Alves 17
  • 18. Curso Técnico de Desenho Gráfico Execução de projectos reais Software Utilizado FileZilla 3.2. 3.1 FileZilla é uma aplicação de FTP gratuito e livre. É muito bom devido à compatibilidade com muitos servidores e comete poucos erros de transferências de ficheiros. Usei esta aplicação de FTP para fazer a transferência de ficheiros para o servidor. Apache 1.5 O Apache ou Servidor Apache, é um servidor web gratuito e actualmente um dos melhores. O Servidor Apache suporta o protocolo http V.1.1. É muitas vezes utilizado para a criação de base de dados MySQL, e a linguagem de programação mais utilizada é o PHP. Este software foi-me útil para criar um servidor localmente (no próprio computador), para poder testar localmente todos os ficheiros “.php”. Cesário Rafael Baía Alves 18
  • 19. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação HTML A linguagem de programação HTML (Hipertext Markup Language), é uma linguagem de marcação, para a criação de páginas Web. É a linguagem standard da WWW ( Word Wide Web ), e a mais utilizada para quem inicia a criação de páginas de internet. Na minha Prova de Aptidão Profissional utilizei esta linguagem de programação para a criação/edi- ção de páginas que continham HTML. CSS CSS (Cascading Style Sheets), é uma linguagem de programação direccio- nada à Web. Utilizei esta linguagem de programa- ção CSS para a formatação, criação e edição de estilos de praticamente todo o Website. Fig. 4 – CSS Cesário Rafael Baía Alves 19
  • 20. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação MySQL O MySQL é um software de criação e gestão de Base de Dados, que utiliza a linguagem SQL. Actualmente, o MySQL é conhecido pelo seu excelente desempenho e es- tabilidade sendo um dos sistemas de Base de Dados mais usados no mundo. Esta aplicação foi-me útil na criação de base de dados para a administra- ção/gestão de utilizadores, painel de notícias e agenda. Fig. 5 – Programação MySQL Javascript O JavaScript é uma linguagem de programação desenvolvida pela Netscape, que no princípio se chamava LiveScript, e tinha como finalidade a validação de formulários e interactividade com a pá- gina. É um tipo de linguagem que não precisa ser compilada, é interpretada automaticamente pelo browser. Possui ferramentas padrão para listagens muito boas. Esta junta-se às CSS na criação dinâ- mica de estilos numa página em HTML. Usei esta linguagem de programação para fazer aumentar as imagens carregadas. Cesário Rafael Baía Alves 20
  • 21. Curso Técnico de Desenho Gráfico Execução de projectos reais Linguagens de Programação ActionScript O ActionScript é a linguagem de programação utilizada pelo Adobe Flash. Tive oportunidade de aprender as bases de ActionScript no curso que tirei na Escola Profissional de Braga. Esta aprendizagem possibilitou-me fazer a animação no vídeo da Fundação Bracara Augusta. PHP O PHP é uma linguagem de programação, esta aplicação é muito utilizada para gerar conteúdo di- nâmico na web. Usei esta aplicação que me permite adicionar notícias na base de dados e no site da Junta de freguesia Maxi- minos Fig. 6 – Programação PHP Cesário Rafael Baía Alves 21
  • 22. Curso Técnico de Desenho Gráfico Execução de projectos reais Disciplinas influentes no projecto Ao longo dos meus três anos de formação tive várias disciplinas teóricas /técnicas, todas com conte- údos diferentes e essenciais para a aprendizagem na área de programação. As disciplinas que tiveram maior influência na concepção da minha PAP foram principalmente: Formação e Contexto de Trabalho Aprendi as seguintes matérias, HTML, CSS, Photoshop, Illustrator. Nesta disciplina pude tirar dúvidas sobre Design e CSS com o professor João Teixeira e João Delgado. Oficina Gráfica Aprendi HTML, CSS, Photoshop, Illustrator, Flash, ActionScript, Indesign. Nesta disciplina pude tirar dú- vidas com o professor João Teixeira. Desenho Gráfico Aprendi Photoshop, Illustrator, Indesign, JavaScript, PHP, MySQL. Nesta disciplina pude tirar dúvidas com o professor João Delgado. Língua Portuguesa Aprendi as regras para a elaboração do meu relatório PAP. Cesário Rafael Baía Alves 22
  • 23. Curso Técnico de Desenho Gráfico Execução de projectos reais Disciplinas influentes no projecto Tive a oportunidade de aprender as seguintes matérias: Adobe Illustrator, Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, Adobe Premiere, Adobe Indesign, HTML, CSS, JavaScript, PHP, MySQL, ActionScript, Microsoft Office (Word, Power Point) Cesário Rafael Baía Alves 23
  • 24. Curso Técnico de Desenho Gráfico Execução de projectos reais Apresentação de Projectos Cesário Rafael Baía Alves 24
  • 25. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto 1 Cesário Rafael Baía Alves 25
  • 26. Curso Técnico de Desenho Gráfico Execução de projectos reais Contacto com o Cliente Desde o início do mês Outubro fui contactando a Doutora Maria do Céu, que desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. Desde então tive reuniões periodicamente, essas reuniões serviram para mostrar ao cliente o progres- so do site, assim como discutir todos os seus aspectos, isto é, os links do menu, o conteúdo de cada página, o público-alvo do site, quais seriam as cores do site e que mensagem pretendia-mos mostrar a cada cidadão, etc. O contacto com o cliente foi também marcado por vários e-mails, onde o cliente teve a oportunidade de me facultar vários conteúdos do site e onde pudemos também debater outros assuntos. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pela Fundação Bracara Augusta e pelo professor Américo Rodrigues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pela Doutora Maria do Céu e pelo Professor Américo Rodrigues. Cesário Rafael Baía Alves 26
  • 27. Curso Técnico de Desenho Gráfico Execução de projectos reais Briefing Cesário Rafael Baía Alves 27
  • 28. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto: Redesign da Página Web e reorganização de conteúdos. História: A Fundação Bracara Augusta foi fundada em 18 de Março de 1996 pela Câmara Municipal de Braga, a Universidade do Minho, a Universidade Católica Portuguesa e o Cabido Metropolitano e Primacial de Braga e tem como finalidade realizar e/ou apoiar iniciativas de carácter cultural e social no concelho de Braga. Localização: A Fundação localiza-se em Braga junto à Biblioteca Lúcio Craveiro da Silva na Rua StºAntónio das Travessas. Serviços e produtos: Fomentar o aparecimento de novas ideias e novos projectos, reforçando por um lado, o diálogo com as instituições e agentes culturais da comunidade e por outro, contribuindo para a criação de espaços culturais menos convencionais, potenciando a criatividade, o debate, o aparecimento de novos valores e contactos com novas tendências estéticas e novas linguagens. Estimular e desenvolver em Braga, em colaboração com outras instituições locais, iniciativas que di- vulguem o vasto património histórico e cultural e que afirmem Braga como centro com personalidade cultural. Estabelecer redes de cooperação e colaboração com outras instituições nacionais com intervenção cultural de qualidade, permitindo descentralizar os circuitos de divulgação cultural e realizar em Bra- ga eventos culturais, quer de âmbito nacional quer internacional. Cesário Rafael Baía Alves 28
  • 29. Curso Técnico de Desenho Gráfico Execução de projectos reais Estimular uma dinâmica de reflexão e de debate, mediante a organização anual de um ciclo de con- ferências sobre temas actuais de interesse para os cidadãos. Influências: A realização de iniciativas culturais de forma integrada continuam a ser uma aposta as- sumida pela Fundação Bracara Augusta. Aspectos positivos: A organização anual de um ciclo de conferências sobre temas actuais de in- teresse para a cidade e para os cidadãos, a fim de estimular uma dinâmica de crítica e debate de ideias. Aspectos negativos: O público-alvo não englobar os jovens pois não existe actividades que os cativem. Público-alvo: Toda a população da freguesia de Braga especialmente a mais culta. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica. Limitações de Prazo: Pretendo finalizar o projecto para fins de Fevereiro. Cesário Rafael Baía Alves 29
  • 30. Curso Técnico de Desenho Gráfico Execução de projectos reais Equacionar o problema No início de Novembro fui contactado pelo Professor João Paulo Teixeira, coordenador do curso Téc- nico de Desenho Gráfico que a Fundação Bracara Augusta desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. A fundação destina-se a toda a população da cidade de Braga, e a todo o mudo que pretenda visualizar o website. A sua função é divulgar as suas actividades e os seus últi- mos projectos lançados. O aspecto negativo é que a fundação não consegue cativar os mais jovens devido aos temas propostos não lhes chamar tanta a atenção, apesar disso os temas têm sempre um carácter actual para estimular uma dinâmica de crítica e debate de ideias. Análise de soluções já existentes Depois de já ter contactado a cliente e já ter uma ideia do que ele pretendia, comecei por efectuar uma pesquisa na Internet sobre websites relacionados sobre história, cultura, eventos e encontrei al- guns com um design muito interessante. Para iniciar uma estrutura tive que fazer várias pesquisas na Internet, a nível de design, estrutura de conteúdos, cores, aprofundar ideias da área da programação, entre outros. http://www.theatrocirco.com/ http://www.cm-braga.pt/ http://www.energie.pt/ http://www.bragadigital.pt/ http://www.gasminho.com/ http://www.fastforwardportugal.com/ http://www.historiadomundo.com.br/ http://www.coffeeteawine.com/ Cesário Rafael Baía Alves 30
  • 31. Curso Técnico de Desenho Gráfico Execução de projectos reais Layout antigo Anteriormente o layout da página da Fundação Bracara Augusta utilizava um tipo de letra que dificul- tava um pouco a leitura, os menus estavam muito grandes e existia muita falta de conteúdo, a página Web encontrava-se nesta situação: Fig. 7 – Layout antigo Cesário Rafael Baía Alves 31
  • 32. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Illustrator CS3. A construção do primeiro layout foi realizada sem cores nem imagens. O resultado foi o seguinte: Fig. 8 – Layout 1º Opção Cesário Rafael Baía Alves 32
  • 33. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout O Layout deve respeitar os princípios da estética, da funcionalidade e da utilidade sobretudo de- vemos ter atenção ao público-alvo, por estes motivos, ao criar o Website tive sempre muito cuidado com o design do layout. Como eu não achava o menu e o banner muito atraentes e depois de uma opinião do meu professor acompanhante decidi-o mudar e o resultado foi o seguinte: Fig. 9 – Layout 2ª Opção Cesário Rafael Baía Alves 33
  • 34. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de já ter decidido o layout foi definir as cores que o site devia conter optei por escolher tons de castanho. Também desenhei as formas que a página ia ter e assim criei um banner com um floriado que foi retirado da digitalização dos livros da Fundação Bracara Augusta. Fig. 10 – Livro da Fundação Cesário Rafael Baía Alves 34
  • 35. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de um grande trabalho e de muitas opiniões dadas pelos meus professores e amigos o layout ficou com um aspecto mais atractivo assim o resultado final foi o seguinte: Fig. 1 – Layout proposta final 1 Cesário Rafael Baía Alves 35
  • 36. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Cores A utilização da cor castanha é devido à Fundação estar ligada à história de Braga, o que leva às pessoas a imaginarem essa cor como predilecta. Depois de a página estar graficamente concluída, contactei o meu cliente para saber a sua opinião e para saber se poderia continuar o meu trabalho. Nas reuniões marcadas fala-mos que tipo de conteúdo se ia colocar e assim decidiu-se que o menu ia ficar composto por seis links: > Home > Actividade > Galeria > Destaques > Livros > Contactos O menu principal é um elemento fundamental na navegação de qualquer página Web. Por este moti- vo, a presença do menu é indispensável para o sucesso de um Website. O menu principal do meu Website é horizontal, simples e discreto. Nele só existe uma mudança de cor quando o cursor passa por cima, e fica seleccionado quando carregamos. Cesário Rafael Baía Alves 36
  • 37. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Home Na página inicial destaquei a informação que achei mais relevante, por isso coloquei do lado direito os últimos projectos da Fundação. Neste link podemos ler um pequeno texto onde explica como surgiu a Fundação Bracara Augusta e quais os seus objectivos. Fig. 12 – Home Cesário Rafael Baía Alves 37
  • 38. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Actividade Esta página é constituída por um texto que refere quando a fundação foi criada, quais as pessoas que já fizeram parte dela e que tipo de actividades é que a fundação realiza. Fig. 13 – Actividade Cesário Rafael Baía Alves 38
  • 39. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Galeria Neste link encontramos uma pequena galeria sobre actividades que foram feitas desde conferências, cartazes de eventos e algumas imagens retiradas dos livros já lançados. Esta página contém um script, Lightbox v2.04 que foi criado por Lokesh Dhakar - http://www.huddleto- gether.com/projects/lightbox2/ para visualização das imagens. Fig. 14 – Galeria Cesário Rafael Baía Alves 39
  • 40. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Destaques Esta página apresenta os desdobráveis de todas as conferências realizadas desde o ano 2000 data inicial das conferências. Fig. 15 – Destaques Cesário Rafael Baía Alves 40
  • 41. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Livros Nesta página encontramos livros lançados desde o ano 2000 onde se pode visualizar as capas e algumas imagens, desses livros. Esta página contém um script, Lightbox v2.04 que foi criado por Lokesh Dhakar - http://www.huddleto- gether.com/projects/lightbox2/ para visualização das imagens. Fig. 16 – Livros Cesário Rafael Baía Alves 41
  • 42. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Contactos No link contactos podemos encontrar todos os contactos da Fundação Bracara Augusta como ex: morada, telefone, fax. Também podemos encontrar um mapa em que se pode descobrir facilmente a sua localização. Este mapa é totalmente grátis. http://maps.google.com.br/ Fig. 17 – Contactos Cesário Rafael Baía Alves 42
  • 43. Curso Técnico de Desenho Gráfico Execução de projectos reais Conteúdo do Site Primeiro comecei por contactar o cliente, onde fiz uma marcação de uma data, para saber o que ela desejava. Depois de saber o que o cliente queria realizei o Briefing onde defini os objectivos da Fun- dação. Os conteúdos do site foram-me todos fornecidos pela Fundação Bracara Augusta, no entanto alguns dos conteúdos iniciais tiveram que ser alterados. Depois do Briefing comecei por fazer o design da página Web e enviei-o para saber se ele ficava aprovado, depois de fazer uns certos ajustes e comecei com a programação em HTML, CSS, JavaS- cript. Todas as imagens fornecidas pela fundação foram totalmente ajustadas e redimensionadas para dois tamanhos, isto é, uma pequena e uma grande, visto ter implementado a possibilidade de clicar em qualquer imagem e esta ser aberta, mostrando a foto em tamanho grande para serem visualizadas na Internet. Toda a informação foi-me entregue em formato digital, mas a fundação desejou colocar todos os seus trabalhos já lançados por isso tive de perder muito tempo na digitalização das capas dos livros e dos desdobráveis das conferências. A fundação também me pediu que eu lhe fizesse o tratamento da sua última conferência para depois colocar o filme na Internet. Coloquei-o online e por final enviei um pequeno questionário sobre a página Web, para saber uma opinião do público-alvo, pois acho que assim deu para retirar as dúvidas e fazer umas pequenas al- terações que foram importantes para a definição final.Em modo geral toda gente gostou da proposta final. Cesário Rafael Baía Alves 43
  • 44. Curso Técnico de Desenho Gráfico Execução de projectos reais Vídeo da VIII Ciclo de Conferências Para a realização de um filme não é só preciso saber filmar, mas sim também sabê-lo editar, saber fa- zer os cortes das etiquetas num local preciso e exacto para que fique perfeito. Este tipo de edições costuma demorar muitas horas e muitos dias. O vídeo da Fundação Bracara Augusta tem a duração de 3 minutos e 55 segundos e o vídeo apre- senta um resumo sobre “VIII Ciclo de Conferências” com o tema “Globalização: Desafios para século XXI” a duração deste vídeo é pequena devido a ter como objectivo principal a publicação na Web. O vídeo já se encontra online na página da Fundação Bracara Augusta em http://fbracaraaugusta. org/. A música que acompanha o filme tem como nome “Eurythmics - I Saved The World Today” esta mú- sica está completamente encaixada com o tema da conferência, pois como capa do desdobrável expõem o ataque terrorista de 11 de Setembro de 2001 e a música fala exactamente como as pessoas se sentiam nesse dia. Algumas situações encontradas na música: “Há uma coisa triste e do- lorosa dentro de mim”, “Eu estou a sofrer”, este tipo de mensagens deixadas na música vêem a coincidir com o vídeo. Apesar de tudo a solução final ficou muito engraçada e a página da funda- ção ficou mais atractiva. Fig. 18 – Vídeo Cesário Rafael Baía Alves 44
  • 45. Curso Técnico de Desenho Gráfico Execução de projectos reais Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram sem dúvida, o desenvolvimento de JavaScript para carregar as imagens. Digitalizar grandes quantidades de livros e de desdobráveis. Dificuldade em colocar o formulário a funcionar pois não dava para enviar o e-mail para a Funda- ção. Algumas incompatibilidades com os browsers, ou seja, por vezes funcionava no Mozilla Firefox e Safari e o mesmo não acontecia com o Internet Explorer. Tratamento do filme no programa Premiere, a edição do vídeo foi uma tarefa muito trabalhosa. Cesário Rafael Baía Alves 45
  • 46. Curso Técnico de Desenho Gráfico Execução de projectos reais Programação do website Esta é, sem dúvida, a parte mais aliciante deste projecto, mas também a mais complexa. Para concluir a realização deste projecto tive que utilizar algumas linguagens de programação, no- meadamente com Adobe DreamWeaver CS3 o HTML e as CSS. Folha de Estilos (CSS) estilos.css Esta folha de estilos contém todos os estilos que utilizei no website. /*Documento CSS Página - Fundação Bracara Augusta */ body { margin:0px 0px 0px 0px;/*pagina geral */ text-align:center; background: url(imagens/body.png) repeat-x #AA5112; } /*Div Tudo*/ #tudo { width:1000px;/*Caixa geral */ height:auto; margin:0px 0px 0px 0px; padding:0px 0px 60px 0px; border: 0px solid #3C3C3C;/*cor castanha */ Cesário Rafael Baía Alves 46
  • 47. Curso Técnico de Desenho Gráfico Execução de projectos reais background:transparent; position:absolute;/*posicao absoluta*/ left:50%; margin-left:-500px; } /*Fim Div Tudo*/ /*TOPO*/ #cimafloriado { height:91px;/*medida */ width:auto; margin:0px 0px 0px 0px; background: url(imagens/floriado.png) repeat-x; border-bottom:1px solid #FFFFFF; position:relative; text-align: center; } /*FIM TOPO*/ /*Aqui entra o centro*/ #centro { width:570px; height:auto; Cesário Rafael Baía Alves 47
  • 48. Curso Técnico de Desenho Gráfico Execução de projectos reais background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; margin:20px 0px 0px 30px; position:relative; float:left; } #centrobig { width:930px; height:auto; background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; margin:20px 30px 0px 30px; position:relative; float:left; } #centrohome { width:570px; height:auto; background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF; -webkit-box-shadow: 0px 0px 40px #888; padding:40px 5px 0px 5px; Cesário Rafael Baía Alves 48
  • 49. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:20px 30px 0px 0px; position:relative; float:right; } /*Fim do centro*/ /*Aqui entre a ALA Direita*/ #direita { width:285px; height:auto; color:#6B717C; border:1px solid #AA5112; background-color: #F1DAC9; padding:30px 5px 0px 5px; margin:20px 30px 0px 0px; border-top:10px solid #AA5112; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius:7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; position:relative; float:right; } Cesário Rafael Baía Alves 49
  • 50. Curso Técnico de Desenho Gráfico Execução de projectos reais #direitahome { width:285px; height:490px; color:#6B717C; border:1px solid #AA5112; background-color: #F1DAC9; padding:30px 5px 0px 5px; margin:20px 0px 0px 30px; border-top:10px solid #AA5112; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius:7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; position:relative; float:left; } /*Fim da ALA Direita*/ /*Imagens*/ img { border:0px;/*sem borda*/ outline:none; } Cesário Rafael Baía Alves 50
  • 51. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre a CLASS TEXTO*/ .texto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } /*Aqui entre a CLASS dos LIVROS */ .livro { width:530px; height:auto; background:#EAEAEA; padding:5px 5px 5px 5px; margin:10px 0px 10px 15px; position:relative; float:left; font-family:”Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:16px; font-weight:bold; Cesário Rafael Baía Alves 51
  • 52. Curso Técnico de Desenho Gráfico Execução de projectos reais color:#47281A; text-align:center; } /*Aqui entre a CLASS dos LIVROS e imagens*/ .imagemtexto a { background: #E3CDB7; text-align: center; margin:20px 15px 25px 15px; outline:none; padding:5px 5px 13px 5px; float:left; } .imagemtexto a:hover { background:#e3ba90; margin:20px 15px 25px 15px; padding:5px 5px 13px 5px; float:left; } /*Actividade LINK*/ .textoactividade { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; Cesário Rafael Baía Alves 52
  • 53. Curso Técnico de Desenho Gráfico Execução de projectos reais font-weight: normal; text-align: justify; text-indent:15pt; margin:15px 15px 15px 15px; } .actividadenegrito { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size: 13px; color: #47281A; font-weight: bold; text-align:left; margin:0px 0px 0px 0px; } .actividade { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size: 12px; font-weight: normal; text-align: left; font-style:normal; margin:0px 0px 0px 0px; color: #333333; } /*Fim Actividade*/ Cesário Rafael Baía Alves 53
  • 54. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre o texto da ALA DIREITA */ .textodireito { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #5C5248; font-weight: normal; text-align: justify; margin:10px 0px 15px 15px; font-style:normal; font-variant:normal; float:left; } .textodireito a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #5C5248; font-weight: normal; text-align: center; margin:0px 18px 0px 0px; padding:5px 5px 5px 5px; background:#E3CDB7; font-style:normal; text-decoration: none; Cesário Rafael Baía Alves 54
  • 55. Curso Técnico de Desenho Gráfico Execução de projectos reais font-variant:normal; float:right; outline:none; } .textodireito a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color:#47281A; text-align: justify; margin:0px 18x 0px 0px; text-decoration: underline; font-variant:normal; float:right; } h3 { color:#47281A; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:5px 0px 5px 15px; font-size:18px; font-weight: bold; text-align:left; font-style:normal; } Cesário Rafael Baía Alves 55
  • 56. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Aqui entre a CLASS dos Direitos de Autor */ .direitos { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:10px; color: #FFFFFF; font-weight: normal; text-align:center; border-left:5px ridge #FFFFFF; border-right:5px groove #FFFFFF; margin: 5px 0px 0px 30px; padding:0px 5px 0px 5px; width:560px; height:auto; background:#BA6F35; font-style:normal; float:left; } .direitos a { color:#FFFFFF; outline:none; } .direitoshome { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; Cesário Rafael Baía Alves 56
  • 57. Curso Técnico de Desenho Gráfico Execução de projectos reais font-size:10px; color: #FFFFFF; text-align:center; margin: 5px 30px 0px 30px; padding:0px 5px 0px 5px; width:570px; height:auto; background:#BA6F35; float:right; } .direitoshome a { color:#FFFFFF; outline:none; } /* top menu */ #header { height: 56px; background-color:transparent; border-left: 1px solid #533920; margin:0px 0px 0px 30px; width:590px; float:left; } Cesário Rafael Baía Alves 57
  • 58. Curso Técnico de Desenho Gráfico Execução de projectos reais #header a { text-decoration: none; font-weight:normal; font-size:15px; outline:none; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color: #533920; } #header a:hover { color:#533920; } #menu { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } #menu li { float: left; width: 96px; border-right: 1px solid #533920; } #menu a { display: block; Cesário Rafael Baía Alves 58
  • 59. Curso Técnico de Desenho Gráfico Execução de projectos reais height: 50px; line-height:50px; outline:none; background:url(imagens/botao.png) no-repeat; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px; border-bottom: 6px solid #533920; } #menu a:hover { border-bottom: 6px solid #B55E0F; line-height:50px; background:url(imagens/botaoselecionado.png) no-repeat; background-color: #E9D6AE; } #menu li a.selecionado { background:url(imagens/botaoselecionado.png) no-repeat; color: #533920; line-height:50px; font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; border-bottom: 6px solid #B55E0F; background-color: #E9D6AE; } /* FIM top menu */ Cesário Rafael Baía Alves 59
  • 60. Curso Técnico de Desenho Gráfico Execução de projectos reais /* logo da fundação */ .imagemlogo { width:90px; height:90px; background: url(imagens/logo.png) no-repeat; padding:0px 0px 0px 0px; position:absolute; left: 1020px; top: 59px; } .identidadelogo { width:200px; height:20px; color: #FFFFFF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:16px; background:transparent; padding:0px 0px 0px 0px; position:absolute; text-align:right; left: 820px; top: 91px; } Cesário Rafael Baía Alves 60
  • 61. Curso Técnico de Desenho Gráfico Execução de projectos reais /* Galeria LINKS */ #galeria { width:860px; height:700px; margin:20px 0px 30px 30px; position:relative; float:left; } #galeria a { outline:none; } #galeria img { margin:5px 5px 5px 5px; border:1px solid #B55E0F; outline:none; } .irtopo img { bottom:10px; position:fixed; right:160px; outline:none; border:none; } Cesário Rafael Baía Alves 61
  • 62. Curso Técnico de Desenho Gráfico Execução de projectos reais /*Efeito nas Imagens JAVASCRIPT */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox img { width: auto; height: auto; } #lightbox a img { border: none; } #outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } Cesário Rafael Baía Alves 62
  • 63. Curso Técnico de Desenho Gráfico Execução de projectos reais #imageContainer { padding: 10px; } #loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav { left: 0; } Cesário Rafael Baía Alves 63
  • 64. Curso Técnico de Desenho Gráfico Execução de projectos reais #hoverNav a { outline: none; } #prevLink, #nextLink { width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; } #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } Cesário Rafael Baía Alves 64
  • 65. Curso Técnico de Desenho Gráfico Execução de projectos reais #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; line-height: 1.4em; overflow: auto; width: 100%; } #imageData { padding:0px 10px; color: #666; } #imageData #imageDetails { width: 70%; float: left; } #imageData #caption { font-weight: bold; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; } Cesário Rafael Baía Alves 65
  • 66. Curso Técnico de Desenho Gráfico Execução de projectos reais Fundação Bracara Augusta #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; outline: none; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } Cesário Rafael Baía Alves 66
  • 67. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Ginásio OXGGYM Cesário Rafael Baía Alves 67
  • 68. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Contacto com o Cliente No início do mês Novembro contactei o Doutor José Domingues, para lhe fazer um Redesign da Página Web e a reorganização de conteúdos. Mas infelizmente ele raramente estava no ginásio por isso as várias vezes que eu fui lá só o encontrei uma vez, além disso ele não se mostrou muito interessado para lhe modificar a página Web. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pelo professor Américo Rodrigues e pelo Doutor José Domingues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pelo Doutor José Domin- gues e pelo Professor Américo Rodrigues. Cesário Rafael Baía Alves 68
  • 69. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Briefing Cesário Rafael Baía Alves 69
  • 70. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Projecto: Redesign da Página Web e reorganização de conteúdos. Localização: O Ginásio localiza-se em Braga na Praça das Fontainhas em S.Vicente. Caracterização: O Ginásio encontra-se num local agradável, em boas condições com um design interior muito apelativo e com materiais de exercício em excelente estado. Serviços e produtos: A empresa tem como modalidades o Kick boxing, karate, GAP, mega boxing, Capoeira, Danças. Influências: O ginásio contém modalidades para todas as classes etárias. O que é uma mais-valia para a empresa. Aspectos positivos: O ginásio é muito dinâmico os trabalhadores estão sempre prontos para mostrar as suas actividades, preocupam-se muito com os clientes tanto fisicamente como psicologicamente. Também costumam mostrar à população de Braga na avenida encontros de capoeira. Público-alvo: Toda a população da freguesia de Braga. Concorrência: Existir em Braga Ginásios com preços mais competitivos. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica, pois visualmente o website encon- tra-se muito clássico. Cesário Rafael Baía Alves 70
  • 71. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Equacionar o problema No início de Novembro fui contactado pelo professor Américo Rodrigues e pelo professor João Paulo Teixeira, coordenador do curso Técnico de Desenho Gráfico que o ginásio OXYGYM desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. O ginásio destina-se a toda a população da cidade de Braga. A sua função é divulgar o ginásio na Internet, para dar a conhecer as instalações, condi- ções, modalidades, eventos e preços. Análise de soluções já existentes Depois de já ter contactado a cliente, comecei por efectuar uma pesquisa na Internet sobre websites relacionados sobre ginásios e encontrei alguns com um design agradável. http://www.solinca.pt http://www.aditshukla.com/ http://www.ginasiocontraste.com/ http://www.elielcezar.com http://www.holmesplace.pt/ http://www.apple.com/ http://www.equilibrio-ginasio.pt/ http://www.idealsign.com/ Cesário Rafael Baía Alves 71
  • 72. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Layout antigo Anteriormente o layout da página do ginásio encontrava-se nesta situação: Fig. 19 – Layout Cesário Rafael Baía Alves 72
  • 73. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Ilustrator CS3. O resultado foi o seguinte: Fig. 20 – Redesign do layout Cores A utilização da cor laranja tem o principal objectivo de apresentar energia, movimento e dinamismo. Depois de já ter decidido o layout e as cores do website, a mudança de cor para laranja é devido a pretender mostrar mais força. Cesário Rafael Baía Alves 73
  • 74. Curso Técnico de Desenho Gráfico Execução de projectos reais Ginásio OXYGYM Conteúdo do Site Comecei por contactar o cliente, onde fiz uma marcação de uma data, para saber o que ela dese- java. Apesar de ele não se ter interessado pelo meu projecto tentei ao máximo dar o meu melhor, mas depois de lhe mostrar como se estava a desenvolver, fiquei à espera que me desse alguma notícia, mas não me deu. Passando algum tempo o website foi alterado para outro layout e como o cliente nunca mais me dava nenhuma informação, nem nunca mais me contactou não passei para a programa- ção pois não tinha a sua confirmação para prosseguir o projecto. Tive pena de não poder continuar pois era uma área que abrangia varias actividades interessantes. Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram sem dúvida, contactar o cliente pois não se mostrou muito interessado pelo projecto. Perceber como o Software Joomla funcionava. Cesário Rafael Baía Alves 74
  • 75. Curso Técnico de Desenho Gráfico Execução de projectos reais Freguesia maximinos Cesário Rafael Baía Alves 75
  • 76. Curso Técnico de Desenho Gráfico Execução de projectos reais Contacto com o Cliente Desde o início do mês Abril fui contactando pelo Professor Américo Rodrigues, que desejava que eu fizesse um Redesign da Página Web e a reorganização de conteúdos. Desde então, tive reuniões periodicamente, essas reuniões serviram para mostrar ao cliente o progres- so do site, assim como discutir todos os seus aspectos, isto é, os links do menu, o conteúdo de cada página, o público-alvo do site, quais seriam as cores do site e que mensagem pretendia-mos mostrar a cada cidadão, etc. O contacto com o cliente foi também marcado por vários e-mails, onde o cliente teve a oportunidade de me facultar vários conteúdos do site e onde pudemos também debater outros assuntos. Aquisição de conteúdos Os conteúdos presentes no site foram-me facultados pelo Doutor José Manuel Magalhães e pelo pro- fessor Américo Rodrigues. Esses conteúdos foram-me entregues pessoalmente ou enviados por e-mail pelo professor Américo Rodrigues. Cesário Rafael Baía Alves 76
  • 77. Curso Técnico de Desenho Gráfico Execução de projectos reais Briefing Cesário Rafael Baía Alves 77
  • 78. Curso Técnico de Desenho Gráfico Execução de projectos reais Projecto: Redesign da Página Web e reorganização de conteúdos. Localização: Maximinos é uma freguesia portuguesa do concelho de Braga, com 1,76 km² de área e 10 030 habitantes (2001). Densidade: 5 698,9 hab/km². Público-alvo: Toda a população da freguesia de Braga. Aspectos positivos: Cooperação e solidariedade com as pessoas mais desfavorecidas. Coope- ração e solidariedade com empresas, escolas e outras instituições e com todas as pessoas de boa vontade que tenham a ambição de serem protagonistas da construção de uma freguesia dinâmica, activa, onde convivem núcleos urbanos e rurais. Serviços e Produtos: A diversidade de funções que desempenham, desde a gestão administrativa, com especial incidência na procura de melhoria dos serviços a prestar aos cidadãos, a gestão de recursos humanos, a relação com outros organismos autárquicos e nacionais, permite-os considerar que o desenvolvimento pessoal, social, cultural e económico que pretendem para Maximinos atinge- se, sobretudo, na base dos princípios da cooperação e da solidariedade. Influências: A realização de iniciativas culturais de forma integrada continuam a ser uma aposta as- sumida pela Freguesia de Maximinos. Objectivo: Pretendo conceber uma imagem mais suave e dinâmica, pois visualmente o website encon- tra-se muito clássico. Cesário Rafael Baía Alves 78
  • 79. Curso Técnico de Desenho Gráfico Execução de projectos reais Equacionar o problema No início de Maio fui contactado pelo Professor João Paulo Teixeira, coordenador do curso Técnico de Desenho Gráfico que a Junta de Freguesia Maximinos desejava que eu fizesse um Redesign da Pá- gina Web e a reorganização de conteúdos. O meu objectivo era conceber uma imagem mais suave, atractiva e dinâmica. A Junta de Freguesia destina-se a toda a população da cidade de Braga. Análise de soluções já existentes Depois de já ter contactado a cliente e já ter uma ideia do que ele pretendia, comecei por efectuar uma pesquisa na Internet sobre websites relacionados com a área envolvente encontrei alguns com um design muito interessante. Para iniciar uma estrutura tive que fazer várias pesquisas na Internet, a nível de design, estrutura de conteúdos, cores, aprofundar ideias da área da programação, entre outros. http://www.juntasvictor.pt/ http://www.freguesiamontalegre.net/ http://www.jf-lamacaes.pt/ http://www.jf-real.com/index.html http://www.jf-ferreiros.pt/ http://www.jf-saovicente.com/main.htm http://www.jf-esporoes.pt/ http://www.freguesiadepanoias.com/ Cesário Rafael Baía Alves 79
  • 80. Curso Técnico de Desenho Gráfico Execução de projectos reais Layout antigo Anteriormente o layout da página da Freguesia de Maximinos os menus estavam muito confusos e exis- tia muita falta de conteúdo a página Web, o tipo de letra tornava a página muito cansativa de se ler antes encontrava-se nesta situação: Fig. 21 – Layout antigo Cesário Rafael Baía Alves 80
  • 81. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de terminar a pesquisa, iniciei o esquema mais ou menos em papel para posteriormente come- çar a criar o layout no Ilustrator CS3. A construção do primeiro layout foi realizada já com cores. O resultado foi o seguinte: Fig. 22 – Layout 1ª Opção Cesário Rafael Baía Alves 81
  • 82. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout O layout deve respeitar os princípios da estética, da funcionalidade e da utilidade sobretudo de- vemos ter atenção ao público-alvo, por estes motivos, ao criar o Website tive sempre muito cuidado com o design do layout. Como eu não achava muito atraente o layout decidi-o mudar a níveis gráficos e depois de muitos estudos o resultado foi o seguinte: Fig. 23 – Layout 2ª Opção Cesário Rafael Baía Alves 82
  • 83. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Depois de já ter decidido o layout foi definir as cores do site, que conteúdo iria colocar na página principal. Depois de um enorme trabalho e de muitas opiniões dadas pelos meus professores e amigos o layout ficou com um aspecto mais atractivo assim o resultado final foi o seguinte: Fig. 24 – Layout 2ª Opção Cesário Rafael Baía Alves 83
  • 84. Curso Técnico de Desenho Gráfico Execução de projectos reais Concepção do Layout Cores A utilização dos tons azuis estão relacionados com a confiança, e profissionalismo que a Freguesia de Maximinos pretende representar. Depois de a página estar graficamente concluída, contactei o meu cliente para saber a sua opinião e para saber se poderia continuar o meu trabalho. Nas reuniões marcadas conversamos que tipo de conteúdo se ia colocar e assim decidiu-se que o menu ia ficar composto por sete links: » Início » Orgãos » Autarquia » Freguesia » Utilidades » Turismo & Lazer » Portal do Cidadão O menu principal é um elemento fundamental na navegação de qualquer página Web. Por este moti- vo, a presença do menu é indispensável para o sucesso de um Website. O menu principal do meu Website é horizontal, simples e discreto. Nele só existe uma mudança de cor quando o cursor passa por cima, e fica seleccionado quando carregamos. Cesário Rafael Baía Alves 84
  • 85. Curso Técnico de Desenho Gráfico Execução de projectos reais Início Na página inicial destaquei a informação que achei mais importante, por isso coloquei do lado direito os as notícias da freguesia. Nesta página aparece de entrada um slideshow de 8 imagens da freguesia de maximinos. Coloquei também no lado direito a hora de funcionamento da junta. Fig. 25 – Início Cesário Rafael Baía Alves 85
  • 86. Curso Técnico de Desenho Gráfico Execução de projectos reais Orgaõs Este link principal é constituído por vários submenus, que seguem sempre o mesmo padrão. Fig. 26 – Orgaõs Cesário Rafael Baía Alves 86
  • 87. Curso Técnico de Desenho Gráfico Execução de projectos reais Freguesia Uma página extremamente elegante e muito requintada nestes submenus podemos encontrar todo o tipo de informação que um cidadão possa desejar, desde a mensagem do Presidente, à localização da junta de freguesia. Fig. 27 – Freguesia Cesário Rafael Baía Alves 87
  • 88. Curso Técnico de Desenho Gráfico Execução de projectos reais Utilidades Esta página também acho que vai ser a mais importante para os cidadãos bracarenses porque nes- tes submenus podemos encontras uma lista de transportes, a farmácia disponível, contactos úteis de outras instituições, etc. Fig. 28 – Utilidades Cesário Rafael Baía Alves 88
  • 89. Curso Técnico de Desenho Gráfico Execução de projectos reais Turismo e Lazer Esta página é das mais relaxantes também devido ao conteúdo de que se trata, pois quem quiser passar umas férias não há nada do que passar uma vista pelo submenu alojamento e restaurantes. Fig. 29 – Turismo e Lazer Cesário Rafael Baía Alves 89
  • 90. Curso Técnico de Desenho Gráfico Execução de projectos reais Portal do Cidadão Este link foi criado para todo o tipo de pedidos de informação que o cidadão deseja comunicar. Fig. 30 – Portal do Cidadão Cesário Rafael Baía Alves 90
  • 91. Curso Técnico de Desenho Gráfico Execução de projectos reais Conteúdo do Site Quando recebi este projecto em mãos reparei na sua grandiosidade por isso dediquei-me 100% neste trabalho para além disso como era época de eleições desejavam que a página fosse feita o mais rápido possível. Inicialmente comecei por contactar o cliente, onde marcou-se uma reunião com o cliente, com o Doutor José Magalhães e o Professor Américo Rodrigues. Depois de saber o que o clien- te queria realizei o briefing onde defini os objectivos. E seguidamente comecei por visualizar páginas já existentes. Os conteúdos do site foram-me todos fornecidos pelo Doutor José Magalhães e o Professor Américo Rodrigues, no entanto alguns dos conteúdos iniciais tiveram que ser alterados. Desenvolvi o layout da página Web e enviei-o por e-mail para saber se ele ficava aprovado. Depois de ter a confirmação do Professor Américo Rodrigues desenvolvi logo a página principal ou seja o INDEX lá defini visualmente como a página Web ia ficar, comecei por criar uma nova base de dados com uma nova programa- ção e um novo design muito mais apelativo e muito mais fácil de navegar para o utilizador que queira publicar as notícias. Depois de ter a Base de Dados quase finalizada desenvolvi o resto das páginas foi substituir os links e coloca-los online. Foi aberto também um questionário e com os erros encontrados desenvolvi-o para ser adaptável a cada cidadão bracarense assim foi mais fácil desenvolver com os erros que encon- traram. Em modo geral toda gente adorou a proposta final, pois os resultados foram muito positivos. O passo seguinte foi desenvolver melhor as páginas Web restantes a nível visual e acabei a progra- mação da Base de Dados. Cesário Rafael Baía Alves 91
  • 92. Curso Técnico de Desenho Gráfico Execução de projectos reais Obstáculos deste Projecto As maiores dificuldades por mim sentidas foram, o desenvolvimento das folhas de estilo com PHP e o próprio PHP. Após muita pesquisa e muito estudo desta área da programação consegui ultrapassar as dificuldades encontradas apesar de ter perdido muito tempo no desenvolvimento desse tipo de sistema. Dificuldade em trabalhar nos menus e submenus pois apareciam alguma incompatibilidades com alguns browsers, pois funcionava no Mozzilla Firefox e no Safari, mas o mesmo não acontecia no Internet Ex- plorer devido a ele ser mais franco do que os outros, tudo isto foi devido à utilização das Z-Index. Problemas no desenvolvimento da programação da Base de Dados pois neste tipo de área é preciso estar muito concentrado pois em algumas situações perdia-se muito tempo devido a esquecermo-nos de colocar um “;” ou outro tipo de caracteres. Cesário Rafael Baía Alves 92
  • 93. Curso Técnico de Desenho Gráfico Execução de projectos reais Programação do website Esta é, sem dúvida, a parte mais aliciante deste projecto, mas também a mais complexa. Para concluir a realização deste projecto tive que utilizar algumas linguagens de programação, no- meadamente com Adobe DreamWeaver CS3 o HTML, CSS, MYSQL e PHP. Criação da Base de dados Comecei por criar a base de dados em MySQL. A Base de Dados vai conter as seguintes tabelas: » admin » noticias » agenda Área do Administrador (BackOffice) Esta área é reservada ao administrador, cujo objectivo é conseguir ver, adicionar, alterar e apagar notícias e datas da agenda. É constituída por três links: » Notícias » Agenda » Administração Em seguida vou mostrar alguns exemplos de como adicionar, mostrar, eliminar e alterar em PHP que utilizei no meu Website. Cesário Rafael Baía Alves 93
  • 94. Curso Técnico de Desenho Gráfico Execução de projectos reais Sistema Login <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> <link href=”estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”imagens/icone.ico” type=”image/x-icon”> <title>Back Office Freguesia de Maximinos</title> </head> <body> <div class=”login”> <form action=”login_vai.php” method=”post”> <div class=”dados”> <p class=”titulo”>Sistema de Login</p> <p>Login:<br><input type=”text”name=”login”style=”background-color:e6f6ff;border:1px solid #93cced;” ></p> Cesário Rafael Baía Alves 94
  • 95. Curso Técnico de Desenho Gráfico Execução de projectos reais <p>Password:<br> <input type=”password” name =”password” style=”background-color:e6f6ff; border: 1px solid #93cced;”></p> <input name=”Submit” class=”botao”type=”submit” value=”Login” /> </form> </div> <img src=”imagens/maximino.png”alt=”Maximinos” width=”163” height=”191” class=”imagemfreguesia” /></div> </body> </html> Fig. 31 – Sistema Login Cesário Rafael Baía Alves 95
  • 96. Curso Técnico de Desenho Gráfico Execução de projectos reais Mostrar dados Este código selecciona todos os dados da tabela noticias da base de dados. noticiasmain.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> Cesário Rafael Baía Alves 96
  • 97. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php $ligacao=mysql_connect(“localhost”,”admin”,”freguesia”); if (!$ligacao) { print (“Problemas na ligação ao servidor Mysql”); } $sql=”select * from noticias”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); Cesário Rafael Baía Alves 97
  • 98. Curso Técnico de Desenho Gráfico Execução de projectos reais if ($resultado){ print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Título</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutó- rio</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)) { $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; print(“<tr> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Titulo</ font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Autor</ font></td> Cesário Rafael Baía Alves 98
  • 99. Curso Técnico de Desenho Gráfico Execução de projectos reais <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Data</ font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$textointrodut orio</font></td> <td><font style=”text-align:left” face=”Trebuchet MS” size=”2” color=”#000000”>$Noticia</ font></td> </tr>”); } echo (“</table>”); } else { print (“Não há registos”); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 99
  • 100. Curso Técnico de Desenho Gráfico Execução de projectos reais Adicionar dados O código adicionar dados, permite-nos adicionar dados específicos. O código contém 2 ficheiros, o adic.php e o adic1.php. O primeiro ficheiro é um formulário que contém todos os campos, excepto o id vazios, para que se pos- sa inserir os dados da nova Noticia. O administrador insere os dados e carrega no botão Adicionar registo e então abre a página adic1.php. O adic1.php mostra os dados inseridos em uma tabela e apresentar uma mensagem que refere que foi inserido com sucesso. Fig. 32 – Adicionar registo adic.php <?php require ‘verifica.php’; ?> Cesário Rafael Baía Alves 100
  • 101. Curso Técnico de Desenho Gráfico Execução de projectos reais <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> Cesário Rafael Baía Alves 101
  • 102. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <form method=”POST” action=”adic1.php”> <table border=0 width=60%> <b>Adição de registo/notícia:</b> <tr><td width=30%>Título</td><td> <input type=”text” name=”Titulo” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> </td></tr> <tr><td width=30%>Autor</td><td> <input type=”text” name=”Autor” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> </td></tr> <tr><td width=30%>Data</td><td> <input type=”text” name=”Data” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”> Cesário Rafael Baía Alves 102
  • 103. Curso Técnico de Desenho Gráfico Execução de projectos reais ></td></tr> <tr><td width=30%>textointrodutorio</td><td> <input type=”text” name=”textointrodutorio” style=”background-color:e6f6ff; border: 1px solid #93cced;” size=”50”></td></tr> <tr><td width=30%>Notícia</td><td> <textarea name=”Noticia” style=”background-color:e6f6ff; border: 1px solid #93cced;” cols=”50” rows=”8”></textarea></td></tr> </table> <p align=”left”><input type=”submit” class=”click“value=”Adicionar registo”> <input type=”reset” class=”click” value=”Limpar ecrã”> <p align=”center”></p> </p> </form> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 103
  • 104. Curso Técnico de Desenho Gráfico Execução de projectos reais adic1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> Cesário Rafael Baía Alves 104
  • 105. Curso Técnico de Desenho Gráfico Execução de projectos reais </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php if ($Noticia){ mysql_connect(“localhost”,”admin”,”freguesia”) or die (“Problema na ligação ao servidor MySQL”); $sql=”insert into noticias(Noticia, Autor, Titulo,textointrodutorio, Data) values (‘$Noticia’,’$Autor’,’$Titul o’,’$textointrodutorio’,’$Data’)”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $reg_ins=mysql_affected_rows(); Cesário Rafael Baía Alves 105
  • 106. Curso Técnico de Desenho Gráfico Execução de projectos reais echo “$reg_ins registo inserido com sucesso <p>”; echo “Dados actuais da base de dados”; if ($resultado){ $sql=”select Noticia, Autor, Titulo, Data, textointrodutorio from noticias”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado) { print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</ b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></ font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)){ $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; Cesário Rafael Baía Alves 106
  • 107. Curso Técnico de Desenho Gráfico Execução de projectos reais print (“<tr><td>$Titulo</td><td>$Autor</td><td>$Data</td><td>$textointrodutorio</ td><td>$Noticia</td></tr>”); } echo(“</table>”); }else{ print (“Não há registos”); } mysql_free_result ($resultado); }else{ echo”Por favor preencha o campo”; echo”<p></p>”; } } ?> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 107
  • 108. Curso Técnico de Desenho Gráfico Execução de projectos reais Alterar dados A alteração de dados consiste num código que contém três páginas, alterando os dados da notí- cia. O código contém 3 ficheiros, o alter.php, o alter1.php e alter2.php. O alter.php vai buscar os campos à base de dados e cria uma tabela onde os campos são apresen- tados. O título de cada notícia aparece com uma hiperligação que, ao ser carregada, abre o ficheiro alter1.php. O alter1.php é um formulário que contém todos os campos excepto o id, que nunca pode ser modifi- cado. O administrador modifica, carrega no botão Alterar e então abre a página alter2.php. O alter2.php só irá mostrar uma mensagem que concluiu com sucesso e os novos dados. alter.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> Cesário Rafael Baía Alves 108
  • 109. Curso Técnico de Desenho Gráfico Execução de projectos reais <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> Cesário Rafael Baía Alves 109
  • 110. Curso Técnico de Desenho Gráfico Execução de projectos reais <b> Edição de registo</b> <br>Escolha um registo para alterar <?php $ligacao=mysql_connect(“localhost”,”admin”,”freguesia”); if (!ligacao) { print (“Problema na ligação ao servidor Mysql”); } $sql=”select * from noticias”; $resultado = mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado){ print (“<table width=”90%” align=center border=1 >”); print (“<tr><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutó- rio</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></font></td> </tr>”); while ($registo=mysql_fetch_array($resultado)) { $id=$registo[“id”]; $Titulo=$registo[‘Titulo’]; Cesário Rafael Baía Alves 110
  • 111. Curso Técnico de Desenho Gráfico Execução de projectos reais $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; print (“<tr><td align=center> <a href=”alter1.php?identif=$id&Noticia=$Noticia&textointrodutorio=$textointrodutorio&Autor=$Aut or&Titulo=$Titulo&Data=$Data”>$Titulo</a></td><td align=left>$Autor</td><td align=left>$Data</ td><td align=left>$textointrodutorio</td><td align=left>$Noticia</td></tr>”); } echo (“</table>”); }else{ print (“Não há registos”); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 111
  • 112. Curso Técnico de Desenho Gráfico Execução de projectos reais alter1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> Cesário Rafael Baía Alves 112
  • 113. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <p><b>Edição de registo</b> <br>Registo seleccionado <form method=”post” action=”alter2.php”> Nº de id - <?php echo “ $id”;?> <br> <table border=0 width=60%> <tr><td width=30%>Titulo</td><td> <input type=”text” name=”Titulo” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Titulo”;?>”></td></tr> <tr><td width=30%>Autor </td><td> <input type=”text” name=”Autor” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Autor”;?>”></td></tr> <tr><td width=30%>Data</td><td> Cesário Rafael Baía Alves 113
  • 114. Curso Técnico de Desenho Gráfico Execução de projectos reais <input type=”text” name=”Data” size=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;”value=”<?php echo “$Data”;?>”></td></tr> <tr><td width=30%>Texto introdutório</td><td> <input type=”text” name=”textointrodutorio” size=”50” style=”background-color:e6f6ff; border: 1px so- lid #93cced;”value=”<?php echo “$textointrodutorio”;?>”></td></tr> <tr><td width=30%>Noticia</td><td> <textarea name=”Noticia” cols=”50” style=”background-color:e6f6ff; border: 1px solid #93cced;;”rows=”8”><?php echo “$Noticia”;?></textarea></td></tr> </table><br> <input type=”submit” class=”click” value=”Alterar”> <input type=”hidden” name=”id” value=”<?php echo”$identif”;?>”> </form> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </html> Cesário Rafael Baía Alves 114
  • 115. Curso Técnico de Desenho Gráfico Execução de projectos reais alter2.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> Cesário Rafael Baía Alves 115
  • 116. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php /*script alter2.php*/ ?> <?php mysql_connect(“localhost”,”admin”,”freguesia”) or die (“impossivel ligar a servidor MYSQL <p>”); $sql=”update noticias set Titulo=’$Titulo’, Autor=’$Autor’,Data=’$Data’,textointrodutorio=’$textointrod utorio’,Noticia=’$Noticia’ where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_afect=mysql_affected_rows(); if($resultado) { print(“Alteração de $num_afect registo efectuado com sucesso.<p>”); print(“O registo alterado passa a possuir os seguintes dados: <p>”); $sql=”select Titulo, Autor, Data, textointrodutorio,Noticia from noticias where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_campos=mysql_num_fields($resultado); $num_reg=mysql_num_rows($resultado); print (“<table width=60% border=1>”); Cesário Rafael Baía Alves 116
  • 117. Curso Técnico de Desenho Gráfico Execução de projectos reais for ($coluna=0;$coluna<$num_campos;$coluna++) { $field=mysql_field_name ($resultado, $coluna); $campo=mysql_result ($resultado,0,”$field”); print(“<tr><td align=center bgcolor=”#7CC1E7”><b>$field</b></td><td>$campo</td></tr>”); } print(“</table>”); }else{ print (“Ocorreu um erro, repita a operação”); } mysql_free_result($resultado); mysql_close(); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </html> Cesário Rafael Baía Alves 117
  • 118. Curso Técnico de Desenho Gráfico Execução de projectos reais Eliminar dados O código eliminar dados, tal como o nome indica, permite-nos eliminar dados da base de dados. O código contém 2 ficheiros, o elim.php e o elim1.php. O elim.php vai buscar os campos à base de dados e cria uma tabela onde os campos são apresen- tados. O ID de cada notícia aparece com uma hiperligação que, ao ser carregada, abre o ficheiro elim1.php. O elim1.php irá apresentar uma mensagem a perguntar se deseja eliminar aquela notícia. Se carregar no Ok eliminará a notícia da respectiva base de dados. elim.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> Cesário Rafael Baía Alves 118
  • 119. Curso Técnico de Desenho Gráfico Execução de projectos reais <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php mysql_connect(“localhost”,”admin”,”freguesia”) or die (“Impossivel ligar à base de dados”); Cesário Rafael Baía Alves 119
  • 120. Curso Técnico de Desenho Gráfico Execução de projectos reais $sql=”select * from noticias order by id asc”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if($resultado){ print(“<b>Seleccione o registo que pretende eliminar<p></b>”); print (“<table width=”100%” align=center border=1 >”); print (“<tr> <td width=”5%” align=center bgcolor=”#7CC1E7” ><font face=”Trebuchet MS”<font color=”#333333”><b>ID</b></font></td><td width=”5%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></ font></td><td width=”20%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Notícia</b></ font></td></tr>”); while($registo=mysql_fetch_array($resultado)){ $id=$registo[“id”]; $Titulo=$registo[‘Titulo’]; $Autor=$registo[‘Autor’]; $Data=$registo[‘Data’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Noticia=$registo[‘Noticia’]; Cesário Rafael Baía Alves 120
  • 121. Curso Técnico de Desenho Gráfico Execução de projectos reais print(“<td><align=center> <a href=”elim1.php?Noticia=$Noticia&textointrodutorio=$textointrodutorio&Autor=$Autor&Titulo=$Tit ulo&Data=$Data&id=$id”>$id</a> </td><td align=left>$Titulo</a></td><td align=left>$Autor</td><td align=left>$Data</td><td align=left>$textointrodutorio</td><td align=left>$Noticia</td></tr>”); } print(“</table>”); }else{ print(“Não há registos “); } mysql_free_result ($resultado); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 121
  • 122. Curso Técnico de Desenho Gráfico Execução de projectos reais elim1.php <?php require ‘verifica.php’; ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <link href=”../estilos.css” type=”text/css” rel=”stylesheet” /> <link media=”screen” rel=”shortcut icon” href=”../imagens/icone.ico” type=”image/x-icon”> <title>BackOffice - Junta Freguesia Maximinos</title> </head> <body> <div id=”tudo”> <div class=”topo”> <img src=”../imagens/maximino.png” alt=”Maximinos” width=”128” height=”148” /> </div> <div class=”titulobem-vindo”>BackOffice - Junta Freguesia Maximinos</div> <div class=”menucima”> <?php include(‘noticiasmenu.inc’);?></div> <div class=”barraesquerda”> Cesário Rafael Baía Alves 122
  • 123. Curso Técnico de Desenho Gráfico Execução de projectos reais <div class=”barraesquerdatopo”>Notícias</div> <div class=”menu”> <?php include(‘menu.inc’);?> </div> <div class=”sair”><br /><br /> <a href=”../logout.php” class=”sair”>Sair</a></div> </div> <div class=”centro”> <?php mysql_connect(“localhost”,”admin”,”freguesia”)or die (“Impossivel ligar à base de dados”); $sql=”select * from noticias where id=’$id’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); if ($resultado){ print(“Eliminação do registo com id=$id vai ser executada”); print (“<table width=”100%” align=center border=1 >”); print (“<tr><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Titulo</b></font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Autor</b></ font></td><td width=”10%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Data</b></font></td><td width=”15%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” font color=”#333333”><b>Texto introdutório</ b></font></td><td width=”50%” align=center bgcolor=”#7CC1E7”> <font face=”Trebuchet MS” Cesário Rafael Baía Alves 123
  • 124. Curso Técnico de Desenho Gráfico Execução de projectos reais font color=”#333333”><b>Notícia</b></font></td></tr>”); while ($registo=mysql_fetch_array($resultado)){ $Noticia=$registo[‘Noticia’]; $textointrodutorio=$registo[‘textointrodutorio’]; $Autor=$registo[‘Autor’]; $Titulo=$registo[‘Titulo’]; $Data=$registo[‘Data’]; $id=$registo[“id”]; print (“<tr> <td>$Titulo</td> <td>$Autor</td> <td>$Data</td> <td>$textointrodutorio</td ><td>$Noticia</td> </tr>”); } print(“</table>”); if ($submit) { $sql=”delete from noticias where id=’$id’ and Noticia=’$Noticia’”; $resultado=mysql_db_query(“bdfreguesiamaximinos”,$sql); $num_del=mysql_affected_rows(); if ($num_del>0){ print (“<p>Eliminação do registo executada com sucesso”); } }else{ ?> <form method=”post” action=”<?php echo $PATH_INFO?>”> <p>Confirma a Eliminação? Cesário Rafael Baía Alves 124
  • 125. Curso Técnico de Desenho Gráfico Execução de projectos reais <input type=”submit” class=”click” name=”submit” value=”OK”> <input type=”hidden” name=”id” value=”<?php echo “$id”;?>”> </form> <?php } }else{ print (“Não há registos”); } mysql_close(); ?> </div> <div class=”baixo”> Junta Freguesia Maximinos - 2009 |Sistema de Notícia Desenvolvido por: <a href=”mailto:cesarioalves8@gmail.com”>Cesário Alves</a></div> </div> </body> </html> Cesário Rafael Baía Alves 125
  • 126. Curso Técnico de Desenho Gráfico Execução de projectos reais Folha de Estilos (CSS) estilos.css Esta folha de estilos contém todos os estilos que utilizei no website. /*Documento CSS Freguesia de Maximinos */ body { margin:0px 0px 0px 0px;/*pagina geral */ text-align:center; background: url(imagens/bg.png) repeat #006AB2; } #tudo { width:1004px;/*Caixa geral */ height: auto; margin:auto; border-left: 8px solid #D4CFBB; border-right: 8px solid #D4CFBB; background:#FFFFFF;/*cor branca*/ position:absolute;/*posicao absoluta*/ left:50%; margin-left:-502px; z-index:1; Cesário Rafael Baía Alves 126
  • 127. Curso Técnico de Desenho Gráfico Execução de projectos reais } #topo { height:211px;/*medida */ width:auto; background: #FFFFFF; border:1px solid #000000; margin:15px 30px 0px 30px; padding:5px 0px 0px 0px; position:relative; text-align: center; -moz-border-radius: 8px;/*cantos arredondados por todas as divs */ -webkit-border-radius: 8px; -webkit-box-shadow: 1px 1px 40px #888; } #banner { height:170px;/*medida */ width:auto;/*medida */ background: url(imagens/banner.png) no-repeat #00AFF0;/*#00AFF0 Azul */ border:0px solid transparent; margin:0px 7px 7px 7px; position:relative; text-align: center; -moz-border-radius-topleft:8px; Cesário Rafael Baía Alves 127
  • 128. Curso Técnico de Desenho Gráfico Execução de projectos reais -webkit-border-top-left-radius:8px; -moz-border-radius-topright:8px; -webkit-border-top-right-radius:8px; } #menu { width:auto;/*medida */ height:34px;/*medida */ font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; background: url(imagens/menu.png) #0066CC;/*#00578AAzul */ border:0px solid transparent; margin:0px 7px 7px 7px; position:relative; float:left; z-index:300; text-align: center; } #centro { height:auto;/*medida #F8F8F8*/ width:635px; background: transparent; margin:32px 0px 15px 15px; text-align: center; Cesário Rafael Baía Alves 128
  • 129. Curso Técnico de Desenho Gráfico Execução de projectos reais float:left; z-index:1; } #agenda { height:120px;/*medida */ width:580px; background: url(imagens/agenda.png) no-repeat; border:0px solid transparent; margin:0px 0px 40px 43px; padding:5px 15px 5px 20px; text-align: center; float:left; } .agenda1 { height:100px;/*medida */ width:570px; background:transparent; border:0px solid transparent; -moz-column-count: 1; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 1; -webkit-column-gap: 1em; Cesário Rafael Baía Alves 129
  • 130. Curso Técnico de Desenho Gráfico Execução de projectos reais -webkit-column-rule: 1px solid black; margin:0px 0px 40px 0px; text-align: center; float:left; } .agendatitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 15px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; font-size:11px; color: #A13B12; font-weight: normal; text-align: left; font-style:normal; } .agendahora { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 15px; Cesário Rafael Baía Alves 130
  • 131. Curso Técnico de Desenho Gráfico Execução de projectos reais font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#00578A; font-weight: normal; text-align: left; font-style:normal; } .agendaproximo { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 5px; position:relative; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align:center; font-style:normal; } #direita { height: auto;/*medida */ width:305px; Cesário Rafael Baía Alves 131
  • 132. Curso Técnico de Desenho Gráfico Execução de projectos reais background: #F2F2F2; margin:32px 15px 15px 0px; border:1px solid #DDDDDD; text-align: center; float:right; z-index:1; } /*Noticias*/ #noticias { height:auto;/*medida #b8dff3, 0065b0 */ width:265px; background: #D0ECF9; margin:15px 15px 15px 15px; padding:5px 5px 5px 5px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; border-top:18px solid #008ACC; text-align: center; float:right; } h4 { color: #00578A; Cesário Rafael Baía Alves 132
  • 133. Curso Técnico de Desenho Gráfico Execução de projectos reais font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 5px 5px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } h2 { color: #00578A; font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 0px 15px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } h6 { color: #00578A; font-family:”Arial”, Helvetica, sans-serif; margin:0px 0px 3px 5px; font-size:18px; Cesário Rafael Baía Alves 133
  • 134. Curso Técnico de Desenho Gráfico Execução de projectos reais font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .noticiastitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; text-transform: uppercase; font-size:11px; color: #006AB2; font-weight: normal; text-align: left; font-style:normal; } .noticiastexto { height:auto;/*medida*/ width:auto; background:transparent; Cesário Rafael Baía Alves 134
  • 135. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; font-style:normal; } .noticiashora { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 0px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align: left; font-style:normal; } .noticiasproximo { height:auto;/*medida*/ width:auto; Cesário Rafael Baía Alves 135
  • 136. Curso Técnico de Desenho Gráfico Execução de projectos reais background:transparent; margin:5px 5px 0px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:11px; color:#3A9DCE; font-weight: normal; text-align:center; font-style:normal; } /*Noticias Fim*/ hr { color: #CCCCCC; } /*Incicio de Serviço*/ #servico { height:105px;/*medida #c1cf73, #71a107*/ width:265px; background:#D6E299; margin:15px 15px 15px 15px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; Cesário Rafael Baía Alves 136
  • 137. Curso Técnico de Desenho Gráfico Execução de projectos reais border-top:18px solid #97BE0D; padding:5px 5px 5px 5px; text-align: center; float:right; } h5 { color: #71A81D; font-family:”Arial”, Helvetica, sans-serif; margin:5px 0px 5px 5px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .servicotitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; font-size:11px; Cesário Rafael Baía Alves 137
  • 138. Curso Técnico de Desenho Gráfico Execução de projectos reais color: #71A81D; font-weight: normal; text-align: left; text-transform:uppercase; font-style:normal; } .servicotexto { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; font-style:normal; } /*Fim de Serviço*/ /*inicio horario*/ #horario { height:105px;/*medida #c1cf73, #71a107*/ Cesário Rafael Baía Alves 138
  • 139. Curso Técnico de Desenho Gráfico Execução de projectos reais width:265px; background:#FFFFFF; margin:15px 15px 15px 15px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999; border-top:18px solid #86AFB0; padding:5px 5px 5px 5px; text-align:left; float:right; } .horariotitulo { height:auto;/*medida #b8dff3, 0065b0 */ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; text-decoration:underline; text-transform:uppercase; font-size:11px; color: #006AB2; font-weight: normal; text-align: left; Cesário Rafael Baía Alves 139
  • 140. Curso Técnico de Desenho Gráfico Execução de projectos reais } .horariotexto { height:auto;/*medida*/ width:auto; background:transparent; margin:5px 5px 5px 5px; font-family: “Arial”, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: left; font-style:normal; } /*fim horario*/ .direitos { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:10px; color:#333333; font-weight: normal; text-align:center; margin: 5px 50px 0px 180px; Cesário Rafael Baía Alves 140
  • 141. Curso Técnico de Desenho Gráfico Execução de projectos reais padding:0px 5px 0px 5px; width:600px; height:auto; background:#F2F2F2; font-style:normal; float: left; } .direitos a { color:#333333; text-decoration:underline; outline:none; } .texto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } #caixa { Cesário Rafael Baía Alves 141
  • 142. Curso Técnico de Desenho Gráfico Execução de projectos reais height:auto;/*medida*/ width:610px; background:transparent; border-bottom:1px dashed #00AFF0; margin:0px 5px 5px 15px; float:left; } .caixatexto { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; margin:10px 15px 15px 15px; font-style:normal; float:left; } .caixatexto a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: justify; Cesário Rafael Baía Alves 142
  • 143. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:2px 15px 0px 15px; font-style:normal; float:left; outline:none; } .caixatexto a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: justify; margin:2px 15px 0px 15px; font-style:normal; float:left; outline:none; } .caixatextocentro { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; width:635px; height:auto; font-weight: normal; Cesário Rafael Baía Alves 143
  • 144. Curso Técnico de Desenho Gráfico Execução de projectos reais margin:10px 15px 15px 15px; font-style:normal; float:left; } .caixatextocentro a { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #666666; font-weight: normal; text-align: center; margin:2px 15px 0px 15px; font-style:normal; outline:none; } .caixatextocentro a:hover { font-family: “Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif; font-size:12px; color: #333333; font-weight: normal; text-align: center; margin:2px 15px 0px 15px; font-style:normal; outline:none; Cesário Rafael Baía Alves 144
  • 145. Curso Técnico de Desenho Gráfico Execução de projectos reais } h3 { color: #3399FF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:5px 0px 5px 15px; font-size:18px; font-variant:normal; font-weight: bold; text-align:left; font-style:normal; } .imagemfoto { background: transparent; margin:0px 15px 0px 0px; outline:none; border:1px solid #CCCCCC; padding:5px 5px 5px 5px; float:left; } #slideshow { display:block; float:left; width:606px; Cesário Rafael Baía Alves 145
  • 146. Curso Técnico de Desenho Gráfico Execução de projectos reais height:306px; background:transparent; text-align: center; margin:2px 0px 50px 15px; padding:0px 0px 0px 0px; z-index:1; } #slides { width:606px; height:306px; z-index:1; } #slideshow .nav { display:block; position:relative; bottom:55px; right:-250px; z-index:3000; } #slideshow .nav a { text-decoration:none; outline:none; color:#fff; Cesário Rafael Baía Alves 146
  • 147. Curso Técnico de Desenho Gráfico Execução de projectos reais font-weight:bold; font-size:28px; font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; } #slideshow .nav a:hover { text-decoration:none; color:#333; } .clear:after { content:”.”; height:0; visibility:hidden; display:block; clear: both; } #menus-1 { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; list-style:none; width:100%; height:34px;/*medida */ font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; Cesário Rafael Baía Alves 147
  • 148. Curso Técnico de Desenho Gráfico Execução de projectos reais z-index:10; } #menus-1 li { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; display:block; float:left; position:relative; height:auto; width:154px; z-index:10; } #menus-1 li a:link, #menus-1 li a:visited { padding:8px 0px 0px 0px; display:block; text-align:center; text-decoration:none; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; font-size:13px; background: url(imagens/menu.png); color:#ffffff; z-index:10; border-left:1px dotted #00AFF0; Cesário Rafael Baía Alves 148
  • 149. Curso Técnico de Desenho Gráfico Execução de projectos reais border-right:1px dotted #00AFF0; width:154px; outline:none; height:26px;/*medida */ } #menus-1 li:hover a, #menus-1 li a:hover, #menus-1 li a:active { padding:8px 0px 0px 0px; margin:0px 0px 0px 0px; display:block; text-align:center; text-decoration:none; background: url(imagens/menuselecionado.png); color:#ffffff; z-index:10; width:154px; height:26px;/*medida */ } #menus-1 li ul.menus-2 { margin:0px 0px 0px 0px; padding:1px 1px 0px 0px; list-style:none; display:none; z-index:10; Cesário Rafael Baía Alves 149
  • 150. Curso Técnico de Desenho Gráfico Execução de projectos reais background:url(imagens/menus.png); width:135px; height:auto; position:absolute; top:34px; left:-1px; border-top:none; } #menus-1 li:hover ul.menus-2 { display:block; } #menus-1 li ul.menus-2 li { clear:left; height:auto; display:block; margin:0px 0px 0px 0px; position: relative; z-index:10; width:151px; } #menus-1 li ul.menus-2 li a:link, #menus-1 li ul.menus-2 li a:visited { clear:left; background: url(imagens/menu.png); Cesário Rafael Baía Alves 150
  • 151. Curso Técnico de Desenho Gráfico Execução de projectos reais padding:3px 5px 3px 10px; margin:0px 0px 0px 0px; width:135px; height:auto;/*medida */ border:none; border-bottom:1px solid #000000; border-left:1px dotted #00AFF0; border-right:1px dotted #00AFF0; position:relative; text-align:left; z-index:10; } #menus-1 li ul.menus-2 li:hover a, #menus-1 li ul.menus-2 li a:active, #menus-1 li ul.menus-2 li a:hover { clear:left; background: url(imagens/menuselecionado.png); padding:3px 5px 3px 10px; width:135px; border-bottom:1px solid #000000; border-left:1px dotted #00AFF0; border-right:1px dotted #00AFF0; position:relative; z-index:10; height:auto;/*medida */ Cesário Rafael Baía Alves 151
  • 152. Curso Técnico de Desenho Gráfico Execução de projectos reais } #menus-1 li ul.menus-2 li ul.menus-3 { display:none; margin:0px; padding:0px; list-style:none; position:absolute; left:150px; top:0px; margin:0px 0px 0px 0px; padding:1px 1px 0px 1px; border:none; background: #0066CC; z-index:10; } #menus-1 li ul.menus-2 li:hover ul.menus-3 { display:block; z-index:10; } #menus-1 li ul.menus-2 li ul.menus-3 li a:link, #menus-1 li ul.menus-2 li ul.menus-3 li a:visited { background: url(imagens/menu.png); z-index:10; } Cesário Rafael Baía Alves 152
  • 153. Curso Técnico de Desenho Gráfico Execução de projectos reais #menus-1 li ul.menus-2 li ul.menus-3 li:hover a, #menus-1 li ul.menus-2 li ul.menus-3 li a:hover, #menus-1 li ul.menus-2 li ul.menus-3 li a:active { background: url(imagens/menuselecionado.png); z-index:10; } #menus-1 li ul.menus-2 li a span { position:absolute; top:3px; left:135px; font-size:13px; z-index:10; color: #0099FF; #menus-1 li ul.menus-2 li:hover a span, #menus-1 li ul.menus-2 li a:hover span { position:absolute; top:3px; left:135px; font-size:13px; color:#ffffff; } h1 { color: #FFFFFF; font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; margin:-5px 0px 0px 0px; Cesário Rafael Baía Alves 153
  • 154. Curso Técnico de Desenho Gráfico Execução de projectos reais Junta de Freguesia Maximinos background: url(imagens/menu.png); padding:0px 5px 0px 5px; font-size:12px; text-align:center; border-left:1px solid #00AFF0; border-right:1px solid #00AFF0; border-bottom:1px solid #00AFF0; font-variant:normal; font-weight: normal; text-align:left; font-style:normal; } Cesário Rafael Baía Alves 154
  • 155. Curso Técnico de Desenho Gráfico Execução de projectos reais pROJECTOS 4 Cesário Rafael Baía Alves 155
  • 156. Curso Técnico de Desenho Gráfico Execução de projectos reais Os suportes publicitários como elemento principal pretendem divulgar um produto. O meu objectivo é divulgar sobre os projectos que executei ao longo deste ano lectivo. Comecei por pensar quais os suportes publicitários a utilizar e quais os seus formatos. A decisão ficou sobre a construção de um catálogo em formato A 4 , um desdobrável em formato A 3 , um cartão cliente e uma embalagem de CD’S. Capa do Catálogo sobre os projectos tratados ao longo da PAP. Cesário Rafael Baía Alves 156
  • 157. Curso Técnico de Desenho Gráfico Execução de projectos reais Exemplo de uma capa do catálogo Exemplo de uma das páginas do catálogo Cesário Rafael Baía Alves 157
  • 158. Curso Técnico de Desenho Gráfico Execução de projectos reais C M Y CM MY CY CMY K Capa da embalagem do CD - lado exterior. cd.pdf 04-06-2009 00:42:29 Execução de Projectos Reais Capa da embalagem do CD - lado interior. C M Cesário Rafael Baía Alves 158 Y CM MY CY CMY K
  • 159. Curso Técnico de Desenho Gráfico Execução de projectos reais Este CD foi criado com o objectivo de ser um anexo a esta Prova de Aptidão Profissional, onde contém todos os dados realizados desta prova. Cesário Rafael Baía Alves 159
  • 160. Curso Técnico de Desenho Gráfico Execução de projectos reais Desdobrável em Memórias formato A 3 , onde contém como Empresa ACIB com o tema ”Barcelos em Acção” Logo usado para identificar os meus trabalhos. Discoteca fictícia para relembrar os anos 80/90. principal função divulgar o trabalho realizado ao lon- go desta PAP e ao 30sixty design uma empresa na área do cinema Logo da empresa AECOPS Cartaz A3 tema: Solidariedade logo deste curso. Cartaz A3 tema: Festa de Natal na EPB Cartaz A3 tema: Concurso Nacional de Leitura Cartaz A3 tema: Feira do Empreendimento Cartaz A3 tema: Uma realidade diferente Cartaz A3 tema: Alcoolismo e os Jovens Cartaz A3 tema: I Jornadas de Design Gráfico Cartaz A3 tema: Mostra de Escolas 2008 Cartaz A3 tema: Dia Mundial do Ambiente Cartaz A3 tema: Dia Mundial do Ambiente Cesário Rafael Baía Alves 160
  • 161. Curso Técnico de Desenho Gráfico Execução de projectos reais CARTAOFRENTE.pdf 06-06-2009 03:25:18 CARTAOTRAS.pdf 19-05-2009 0:09:50 Cartão-de-cliente produzido com a finalidade de entre- gar a cada respon- sável do projecto. C M Y CM MY CY Cesário Rafael Baía Alves 161 CMY K
  • 162. Curso Técnico de Desenho Gráfico Execução de projectos reais Conclusão Conclusão Cesário Rafael Baía Alves 162
  • 163. Curso Técnico de Desenho Gráfico Execução de projectos reais Conclusão A Prova de Aptidão Profissional é o projecto mais marcante de todo o curso, pois permite-nos demons- trar as variadíssimas capacidades e conhecimentos teóricos e técnicos adquiridos na aprendizagem dos três anos, ou seja é um reflexo de todas as aprendizagens adquiridas ao longo do curso. O meu projecto consistiu na “execução de projectos reais”, para conseguir concluir este projecto foi preciso ter uma grande capacidade de autonomia e persistência, aspectos esses que se foram desen- volvendo à medida em que concebia, planeava e executava os projectos que me foram propostos. A execução da PAP envolveu um grande esforço e dedicação. Para além das competências técnicas e diversas capacidades que a prova exigiu, penso que foi benéfico para mim a nível profissional e a nível social, uma vez que no futuro irei enfrentar outros projectos tão ou mais importante que este. É com grande satisfação que vejo o meu projecto a terminar e, sobretudo ter conseguido realizar um projecto com aplicação real e prática que é uma mais valia para entidades envolvidas. Naturalmente que, no decorrer da realização da PAP senti diversas dificuldades, das quais só pu- deram ser ultrapassadas com a capacidade de trabalho que foi envolvido em mim, com o apoio do professor acompanhante e da colaboração das instituições envolvidas. O balanço que faço do desenvolvimento da Prova de Aptidão Profissional é positivo, uma vez que, o resultado final encontra-se num servidor online – no endereço http://freguesiamaximinos.pt/ e http:// fbracaraaugusta.org/. Quanto ao curso de Desenho Gráfico a minha opinião é igualmente positiva, pois ganhei muitos co- nhecimentos tanto a nível profissional, como a nível pessoal. Para além de sair da escola “mais madu- ro”, aprendi bastaste a todos os níveis. Fiz ainda muitas e boas amizades. Cesário Rafael Baía Alves 163
  • 164. Curso Técnico de Desenho Gráfico Execução de projectos reais Referências Bibliográficas Cesário Rafael Baía Alves 164
  • 165. Curso Técnico de Desenho Gráfico Execução de projectos reais Referências Bibliográficas Disponível em: http://www.maujor.com/ [Junho 09] Disponível em: http://www.theatrocirco.com/ [Junho 09] Disponível em: http://www.cm-braga.pt/ [Junho 09] Disponível em: http://www.energie.pt/ [Junho 09] Disponível em: http://forum.imasters.uol.com.br/ [Junho 08] Disponível em: http://www.w3schools.com/ [Junho 09] Disponível em: http://www.gasminho.com/ [Junho 09] Disponível em: http://www.fastforwardportugal.com/ [Junho 09] Disponível em: http://www.bragadigital.pt/ [Junho 09] Disponível em: http://www.historiadomundo.com.br/ [Junho 09] Disponível em: http://www.jf-lamacaes.pt/ [Junho 09] Disponível em: http://www.freguesiamontalegre.net/ [Junho 09] Disponível em: http://designshack.co.uk/ [Junho 09] Disponível em: http://www.criarweb.com/ [Junho 09] Disponível em: http://www.fprovidencia.com/site.html/ [Junho 09] Disponível em: http://www.dstype.com/ [Junho 09] Disponível em: http://www.vanarchiv.com// [Junho 09] Disponível em: https://w3-markup.com/order/ [Junho 09] Disponível em: http://www.13styles.com/ [Junho 09] Disponível em: http://www.noupe.com [Junho 09] Cesário Rafael Baía Alves 165
  • 166. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 166
  • 167. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexo A Cesário Rafael Baía Alves 167
  • 168. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 168
  • 169. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexo B Cesário Rafael Baía Alves 169
  • 170. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 170
  • 171. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos Cesário Rafael Baía Alves 171
  • 172. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 172
  • 173. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 173
  • 174. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 174
  • 175. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 175
  • 176. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 176
  • 177. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 177
  • 178. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 178
  • 179. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 179
  • 180. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 180
  • 181. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 181
  • 182. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 182
  • 183. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 183
  • 184. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 184
  • 185. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 185
  • 186. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 186
  • 187. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 187
  • 188. Curso Técnico de Desenho Gráfico Execução de projectos reais Questionário online sobre o website da Fundação Questionário online sobre o website da Junta de Freguesia Maximinos mais Bracara Augusta mais informações em: http://sprea- informações em: http://spreadsheets.google.com/viewform?formkey=cmtzc2c dsheets.google.com/viewform?formkey=cGhuaXpYM wZmlEdUd3alhRTC1QOUMwN1E6MA.. G5hc2ZNLTlwZklyMDhlT0E6MA.. Cesário Rafael Baía Alves 188
  • 189. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos B Anexo C Cesário Rafael Baía Alves 189
  • 190. cd.pdf 04-06-2009 00:42:29 Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 190
  • 191. Curso Técnico de Desenho Gráfico Execução de projectos reais Execução de Projectos Reais Cesário Rafael Baía Alves 191
  • 192. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos C Anexo D Cesário Rafael Baía Alves 192
  • 193. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 193
  • 194. Curso Técnico de Desenho Gráfico Execução de projectos reais Anexos D Anexo E Cesário Rafael Baía Alves 194
  • 195. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 195
  • 196. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 196
  • 197. Curso Técnico de Desenho Gráfico Execução de projectos reais Cesário Rafael Baía Alves 197
  • 198. Curso Técnico de Desenho Gráfico Execução de projectos reais 2 O Diário Quarta-feira 5 de Dezembro 2007 Destaque BANCA Maior banco privado tenta virar a página depois de renúncia do fundador Saída de Jardim Gonçalves não garante a paz no BCP O fundador está de saída. Mas a composição do próximo conselho de administração continua a ser motivo de tensão no banco Cristina Ferreira Jardim Gonçalves Foi um dia de reuniões e algumas fric- cujo desfecho não permitiu a clarificação o de António Rodrigues, o actual CFO, seduzido por Pinhal. Mas Pinhal é um ções no Banco Comercial Português. O dia do poder dentro do banco. e o de Luís Gomes, chefe de gabinete de líder a prazo, o que faz com que a sua lista já se adivinhava longo, depois da anun- Jardim, contestados pelo grupo de Be- tenha carácter transitório. Com 61 anos ciada decisão de Jorge Jardim Gonçalves Pacificação? rardo. cada, Pinhal e de Beck têm surgido asso- de colocar um ponto final à sua presença Um sinal de que Jardim abandona o ciados aos eventuais “perdões de divida” no banco que fundou há 22 anos. E assim Já Filipe Pinhal começou por lembrar: BCP numa situação de fragilidade e sem aos accionistas de referência. foi. “O que hoje fizemos ao longo do dia foi capacidade para influenciar o seu futuro, Por outro lado, a nova administração Pela manhã reuniu o Conselho Geral e uma tentativa de nos libertarmos de um apesar dos apoios accionistas que ainda começará a trabalhar numa conjuntura de Supervisão (CGS), onde Jardim apre- passado que incomoda, em benefício de tem.O fundador conseguiu apenas, e para económica desfavorável e os objectivos sentou a sua renúncia com efeitos a partir um futuro que tem todas as razões para já, travar a subida ao poder do grupo de de aceleração do crescimento serão mais de 31 de Dezembro. Já depois de almoço, ser auspicioso”. “É uma tentativa de voltar Joe Berardo. Mas não tem garantias de difíceis de atingir. Mas se a lista de Pinhal o mesmo sucedeu no Conselho Superior, uma página”, disse o presidente do CAE, que Filipe Pinhal não venha mais tarde a for aprovada (necessita de maioria sim- também presidido pelo líder histórico que em Setembro sucedeu a Teixeira Pin- aceitar que estes assumam um papel mais ples) na próxima AG, então o grupo de do BCP. Este órgão integra alguns ac- to. Mas há sinais de que a pacificação da relevante no banco.Pinhal comunicou que Berardo, Fino e Moniz da Maia perderá cionistas contestatários de Jardim, o que instituição não será automática e que a a sua lista à administração tem o apoio da a margem para continuar a contestar a fez prolongar a discussão sobre aspectos saída de Jardim dificilmente estabilizará maioria do Conselho Superior. gestão do BCP. jurídicos relacionados com a convocatória o grupo. Tudo indica que se está a camin- E embora seja aceite pelos accionistas da próxima assembleia geral. har para uma guerra entre duas listas que alinhados com Jardim (cerca de 22 por A decisão de Jardim Gonçalves, de 71 se vão confrontar na próxima assembleia cento do capital), não é totalmente do anos, renunciar às funções que desem- geral, entre 15 e 20 de Janeiro. De um lado seu agrado, pois estes sabem que o CEO penha no banco ocorre num quadro de di- aparece Filipe Pinhal a liderar uma pro- é hoje sobretudo um homem de confiança visão dos accionistas e da gestão. Ontem, posta para o CAE, onde apenas consta o da Teixeira Duarte, que tem tido um com- na sua intervenção de despedida, lembrou nome de um gestor da sua equipa, Cristo- portamento sinuoso no processo (com que 2007 trouxe alturas de “instabilidade” pher de Beck. Pinhal convidou ainda três apenas 5,7 por cento do capital, ajudou ao banco, mas este “sempre soube superar altos quadros do banco, Miguel Maya, a travar as negociações para a fusão com as dificuldades e o momento seu chefe o BPI e que eram desejadas por 33 por actual não é excepção.” “É de gabi- cento do capital do banco). A construtora 22% tempo de pôr fim à incerteza nete, José tem revelado ter uma agenda própria, e marcar um rumo definido”, João Guil- pois tem interesses muito relacionados notou o fundador do BCP, herme, com o grupo - é accionista, tem créditos, acrescentando que, “depois da banca e quer poder decidir sobre os 10 por cento de muito ponderar”, enten- É a percentagem de capital dos ac- de inves- que o BCP possui na Cimpor. Ao avançar deu que deveria renunciar às cionistas alinhados com Jardim que timento, com uma lista que pretende que seja uma suas funções.Isto, para ajudar agora apoiam a lista à administração e Paulo terceira via (não a de Jardim, não a de Be- a pacificar a instituição. apresentada e liderada por Filipe M o i t a rardo), o CEO pisca um olho aos investi- Mas deixou claro que se Pinhal Macedo dores que vinham reclamando a saída do manterá vigilante. “Não ex- (ex-direc- fundador.Como acaba de acontecer. Boas Festas e ercerei funções no banco, tor geral Depois de nos últimos dias tercriticado mas não saio.” Instado a esclarecer a sua dos impostos e director-geral do banco), Filipe Pinhal pelo facto de este ter assi- declaração, lembrou: “Sou cliente e ac- como prova de que o BCP tem capacidade nado os créditos e os perdões (30 milhões cionista.” A guerra no BCP já levou à de gerar competências. Fora do grupo de euros) a Goes Ferreira, Berardo foi Feliz Ano Novo saída do ex-presidente executivo Paulo foi buscar Rui Horta e Costa, da UBS, e Teixeira Pinto, no final da última reunião Alves Monteiro, ex-presidente da Bolsa. de accionistas (AG), realizada no Verão, e Pinhal deixou cair vários nomes, como ontem saudar a saída de Jardim, alegando que o poder deve ser entregue ao CAE. Uma indicação de que poderá ter sido já Cesário Rafael Baía Alves 198
  • 199. Curso Técnico de Desenho Gráfico Execução de projectos reais Requisitos do Sistema Microsoft Windows ® Computador/Sistema Operacional Windows Vista®/XP/Pro/Home/ Obtenha a con abilidade da tecnologia óptica por Media Center Edition/Tablet PC um preço baixo. Com uma conveniente roda e design 1 confortável e moderno, este rato de alto desempenho Edition/Windows 2000 SP4 ou superior agrega um alto valor. Espaço no Disco Rígido Espaço livre de 45 MB (100 MB para Tecnologia óptica Microsoft instalação) O rato mais rápido e mais preciso do mercado incor Outros porando a tecnologia óptica. Rastreamento superior resulta em movimento preciso do cursor e exatidão. Observação O software IntelliPoint fornece drivers e suporte para os recursos 2 de personalização. Macintosh Computador/Sistema Operacional Mac OS X v10.1x–10.4x (excluindo Mac OS X v10.0) Espaço no Disco Rígido Espaço livre de 30 MB (15 MB para 1. instalação) 2. Rato Óptico Outros Cesário Rafael Baía Alves 199
Fly UP