Relatório da PAP sobre execução de projetos reais

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

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


Agradecimentos

3


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.

4


Índice

5


Í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

6


Introdução

7


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-

8


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.

9


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

10


Desenvolvimento

11


Componente Teórica

12


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

13


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

14


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.

15


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.

16


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.

17


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”.

18


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

19


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.

20


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

21


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.

22


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)

23


Apresentação
de Projectos

24


Projecto 1

25


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.

26


Briefing

27


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.

28


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.

29


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/

30


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

31


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

32


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

33


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

34


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

35


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.

36


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

37


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

38


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

39


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

40


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

41


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

42


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.

43


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

44


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.

45


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 */

46


background:transparent;
position:absolute;/*posicao absoluta*/
left:50%;
margin-left:-500px;
}
/*Fim Div Tudo*/

/*TOPO*/
#cimafloriado {
height:91px;/*medida */
width:auto;
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;

47


background:url(imagens/centro_esquerda.png) repeat-x #FFFFFF;
-webkit-box-shadow: 0px 0px 40px #888;
position:relative;
float:left;
}
#centrobig {
width:930px;
height:auto;
position:relative;
float:left;
}
#centrohome {
width:570px;
height:auto;

48


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;
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;
}

49


#direitahome {
width:285px;
height:490px;
color:#6B717C;
border:1px solid #AA5112;
background-color: #F1DAC9;
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;
}

50


/*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;
font-style:normal;
float:left;
}
/*Aqui entre a CLASS dos LIVROS */
.livro {
width:530px;
height:auto;
background:#EAEAEA;
position:relative;
float:left;
font-family:”Trebuchet MS”, Arial, Helvetica, Verdana, sans-serif;
font-size:16px;
font-weight:bold;

51


color:#47281A;
text-align:center;
}
/*Aqui entre a CLASS dos LIVROS e imagens*/
.imagemtexto a {
background: #E3CDB7;
text-align: center;
outline:none;
float:left;
}
.imagemtexto a:hover {
background:#e3ba90;
float:left;
}
/*Actividade LINK*/
.textoactividade {
font-size:12px;
color: #333333;

52


text-indent:15pt;
}
.actividadenegrito {
font-size: 13px;
color: #47281A;
font-weight: bold;
text-align:left;
}
.actividade {
font-size: 12px;
text-align: left;
font-style:normal;
color: #333333;
}
/*Fim Actividade*/

53


/*Aqui entre o texto da ALA DIREITA */
.textodireito {
font-size:12px;
color: #5C5248;
font-style:normal;
font-variant:normal;
float:left;
}
.textodireito a {
font-size:12px;
color: #5C5248;
text-align: center;
background:#E3CDB7;
font-style:normal;
text-decoration: none;

54


float:right;
outline:none;
}
.textodireito a:hover {
font-size:12px;
color:#47281A;
margin:0px 18x 0px 0px;
text-decoration: underline;
float:right;
}
h3 {
color:#47281A;
font-family:”Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
text-align:left;
font-style:normal;
}

55


/*Aqui entre a CLASS dos Direitos de Autor */
.direitos {
font-size:10px;
color: #FFFFFF;
text-align:center;
border-left:5px ridge #FFFFFF;
border-right:5px groove #FFFFFF;
margin: 5px 0px 0px 30px;
width:560px;
height:auto;
background:#BA6F35;
font-style:normal;
float:left;
}
.direitos a {
color:#FFFFFF;
outline:none;
}
.direitoshome {

56


font-size:10px;
color: #FFFFFF;
text-align:center;
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;
width:590px;
float:left;
}

57


#header a {
text-decoration: none;
font-weight:normal;
font-size:15px;
outline:none;
color: #533920;
}
#header a:hover {
color:#533920;
}
#menu {
padding: 0px 0px 0px 0px;
list-style-type: none;
}
#menu li {
float: left;
width: 96px;
border-right: 1px solid #533920;
}
#menu a {
display: block;

58


height: 50px;
line-height:50px;
outline:none;
background:url(imagens/botao.png) no-repeat;
padding: 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 */

59


/* logo da fundação */
.imagemlogo {
width:90px;
height:90px;
background: url(imagens/logo.png) no-repeat;
position:absolute;
left: 1020px;
top: 59px;
}
.identidadelogo {
width:200px;
height:20px;
color: #FFFFFF;
font-size:16px;
background:transparent;
position:absolute;
text-align:right;
left: 820px;
top: 91px;
}

60


/* Galeria LINKS */
#galeria {
width:860px;
height:700px;
position:relative;
float:left;
}
#galeria a {
outline:none;
}
#galeria img {
border:1px solid #B55E0F;
outline:none;
}
.irtopo img {
bottom:10px;
position:fixed;
right:160px;
outline:none;
border:none;
}

61


/*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;
}

62


#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;
}

63


#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;
}

64


#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;
}

65


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;
}

66


Ginásio OXYGYM

Ginásio OXGGYM

67


Ginásio OXYGYM
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.

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.

68


Ginásio OXYGYM

Briefing

69


Ginásio OXYGYM

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.

70


Ginásio OXYGYM
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.

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/

71


Ginásio OXYGYM
Layout antigo
Anteriormente o layout da página do ginásio encontrava-se nesta situação:

Fig. 19 – Layout

72


Ginásio OXYGYM
ç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.

73


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.

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.

74


Freguesia maximinos

75


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.

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.

76


Briefing

77



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.

78


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.

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/

79


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

80


çar a criar o layout no Ilustrator CS3.
A construção do primeiro layout foi realizada já com cores. O resultado foi o seguinte:


81


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:


82


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:


83


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.

84


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

85


Orgaõs
Este link principal é constituído por vários submenus, que seguem sempre o mesmo padrão.

Fig. 26 – Orgaõs

86


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

87


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

88


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

89


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

90


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.

91


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.

92


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.

93


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>

94


<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

95


Mostrar dados
Este código selecciona todos os dados da tabela noticias da base de dados.

noticiasmain.php
<?php
require ‘verifica.php’;
?>
<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>

96


<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);

97


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>

98


<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>

99


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
?>

100


<head>



</head>
<body>
<div id=”tudo”>

</div>


101


</div>

</div>
<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”>

102


></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>
</body>
</html>

103


adic1.php

<?php
?>
<head>



</head>
<body>
<div id=”tudo”>


104


</div>


</div>

</div>
<?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’)”;
$reg_ins=mysql_affected_rows();

105


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”;
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’];

106


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>
</body>
</html>

107

Relatório da PAP sobre execução de projetos reais

Relatório da PAP sobre execução de projetos reais

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Relatório da PAP sobre execução de projetos reais

Ähnlich wie Relatório da PAP sobre execução de projetos reais (17)

Relatório da PAP sobre execução de projetos reais