Carlos Abel Carvalho Pereira - paginas.fe.up.ptee97112/relatorio_final.pdf · Licenciatura em...

Licenciatura em Engenharia Electrotécnica e de Computadores

Projecto, Seminário ou Trabalho de Fim de Curso

Carlos Abel Carvalho Pereira

Orientador FEUP: Professor João Pascoal Faria ([email protected])

Orientador AMVDN: Eng.º Paulo Noronha ([email protected])

mailto:[email protected]

mailto:[email protected]

Apoio à optimização dos recursos de internet dos municípios de Trás-os-Montes e Alto Douro

Índice 1. Introdução....................................................................................................................... 4

1.1. O projecto Trás-os-Montes Digital.............................................................................. 5 1.2. Objectivos e descrição do trabalho a realizar .............................................................. 7 1.3. Evolução do trabalho ................................................................................................... 8 1.4. Planeamento e historial do projecto ............................................................................ 8

2. Requisitos considerados na construção do site www.amvdn.pt ................................... 10

3. Breve descrição das tecnologias utilizadas................................................................... 11

3.1. HTML........................................................................................................................ 11 3.2. CSS ............................................................................................................................ 11 3.3. JavaScript .................................................................................................................. 13

3.3.1. Java versus JavaScript ........................................................................................ 13 3.3.2. Programas compilados versus interpretados....................................................... 13 3.3.3. Assim, Java é uma linguagem compilada cuja plataforma é independente e a linguagem JavaScript é interpretada............................................................................. 14 3.3.4. Porquê aprender JavaScript? .............................................................................. 14 3.3.5. Considerações sobre JavaScript ......................................................................... 15

3.4. ASP- Active Server Pages ......................................................................................... 15 3.5. Flash .......................................................................................................................... 16 3.6. Ferramentas de software utilizadas............................................................................ 17

4. Desenvolvimento do site www.amvdn.pt..................................................................... 18

4.1 HTML e CSS desenvolvido (alguns exemplos) ......................................................... 19 4.2. JavaScript desenvolvido ............................................................................................ 21

4.2.1. JavaScript comum a todas as páginas (faz parte do ficheiro de template do site)...................................................................................................................................... 21 4.2.2. JavaScript:: wallpaper ........................................................................................ 29 4.2.3. JavaScript:: municípios ...................................................................................... 32 4.2.4. JavaScript:: pesquisa .......................................................................................... 36 4.2.5. JavaScript:: localização ...................................................................................... 37 4.2.6. JavaScript:: panoramas ....................................................................................... 38 4.2.7. JavaScript:: introdução ....................................................................................... 38 4.2.8. JavaScript:: fotos ................................................................................................ 39

4.3. ASP desenvolvido ..................................................................................................... 40 4.3.1. ASP:: Notícias .................................................................................................... 41 4.3.2. ASP:: Agenda ..................................................................................................... 44 4.3.3. ASP:: página inicial ............................................................................................ 44 4.3.4. ASP:: BackOffice ............................................................................................... 45 4.3.5. ASP::BackOffice:: Manutenção ......................................................................... 45 4.3.6. ASP::BackOffice:: Inserir notícia....................................................................... 48 4.3.7. ASP::BackOffice:: Apagar notícia ..................................................................... 52 4.3.8. ASP::BackOffice:: Inserir Evento ...................................................................... 52 4.3.9. ASP::BackOffice:: Apagar Evento..................................................................... 52

4.4. Flash desenvolvido .................................................................................................... 52

2


4.5. Tratamento das imagens ............................................................................................ 53 5. Resultados finais e site visto da perspectiva do utilizador ........................................... 54

5.1. O site.......................................................................................................................... 54 5.2. O backoffice .............................................................................................................. 65

6. C++ Aplicação ADMG (Assistência na doença aos militares da GNR) ...................... 66

6.1. Resultados finais da aplicação ADMG...................................................................... 68 7. Conclusão ..................................................................................................................... 71

8. Bibliografia................................................................................................................... 72

3


1. Introdução

A “auto-estrada da informação” desempenha um papel fundamental na sociedade de hoje

em dia. Sem este fluxo constante de bits seríamos, sem dúvida, remetidos para um estado

subdesenvolvido da nossa existência. Dá que pensar...E esta dependência de bits aumenta

de dia para dia. Dá ainda mais que pensar... O certo, é que a nossa sociedade é uma

sociedade da informação por excelência, com todos os prós e contras que isso acarreta.

Com base nestas premissas, a Internet é um poderoso instrumento e um alicerce

fundamental da nossa sociedade.

O trabalho e estudo desenvolvido por mim vem acrescentar ainda mais conteúdo,

interactividade e multimédia à “nossa rede”, a Internet. Isto numa região que se encontra

em franca expansão neste domínio, a região de Trás-os-Montes e Alto Douro.

Existem inúmeras ferramentas para construção de sites na Internet. Algumas delas com

objectivos idênticos mas de origens diferentes (e.g. ASP, PL/SQL, PHP/mySQL) , outras

universais (e.g. javascript, HTML, CSS), outras ainda mais vocacionadas para multimédia

(e.g. flash, shockwave). Neste trabalho utilizei algumas delas. A saber: HTML, javascript,

ASP e flash. Mais à frente irei referir-me a cada uma das que utilizei.

4


Paralelamente, desenvolvi uma aplicação em C++ que permite o processamento e envio da

facturação de uma qualquer entidade que possua acordo com a ADMG (Assistência médica

dos militares da GNR) para a secção de informática desta última.

1.1. O projecto Trás-os-Montes Digital

Um bom exemplo da expansão em termos de sociedade da informação em que se encontra

Trás-os-Montes, é o projecto em curso e já numa 3ª fase de execução (começou em 2001)

Trás-os-Montes Digital. Este projecto tem como objectivo a informatização de vários

serviços e disponibilização dos mesmos através da internet. Por exemplo colocou on-line as

31 câmaras da zona de Trás-os-Montes e Alto Douro, utilizando a tecnologia ASP como

base para uma fácil actualização dos mesmos por parte das pessoas responsáveis existentes

em cada câmara. Falta ainda reformular os mesmos sites e disponibilizar a parte dos

serviços. O estudo para concretizar esta reformulação foi feito por mim e será apresentado e

discutido com o pessoal de desenvolvimento do projecto Trás-os-Montes Digital sediado na

UTAD (Universidade de Trás-os-Montes e Alto Douro).

A AMTAD e a AMVDN e consequentemente todas as suas câmaras associadas colaboram

estreitamente e financiam parte deste projecto.

Descrição do projecto (retirado do site http://www.espigueiro.pt/servico_cooperativo/):

5

http://www.espigueiro.pt/servico_cooperativo/


O que é o projecto Trás-os-Montes Digital-SCETAD?

A criação do projecto Trás-os-Montes Digital-SCETAD segue duas linhas orientadoras:

- A emergência da Sociedade de Informação em Portugal;

- A missão da UTAD como instrumento de desenvolvimento da Região de Trás-os-Montes e Alto Douro.

A constituição da Missão para a Sociedade de Informação e a edição, em Maio de 1997, do Livro Verde para a

Sociedade de Informação em Portugal, foram passos decisivos para a modernização da sociedade portuguesa.

O Trás-os-Montes Digital-SCETAD, como um serviço orientado para o cidadão, enquadra-se em quatro medidas

apontadas no Livro Verde, concretamente:

• MEDIDA 1.3 - Promover Programas de Informação ao Cidadão;

• MEDIDA 1.5 - Fomentar Iniciativas de Autarquias Locais para a Democratização do Acesso à Sociedade

da Informação;

• MEDIDA 2.1 - Rumo à Administração Pública Electrónica;

• MEDIDA 2.2 - O Estado Aberto ao Cidadão e à Empresa;

A região transmontana, por vicissitudes diversas, não tem em geral uma agricultura e uma indústria

desenvolvidas. As populações, por vezes parcialmente emigradas, são dispersas e as vias de acessos pobres. O

contacto entre os cidadãos e a administração pública é difícil.

Na perspectiva de Trás-os-Montes e Alto Douro, o projecto Trás-os-Montes Digital-SCETAD enquadra-se nos

objectivos definidos pelo Ministério da Ciência e Tecnologia para a sociedade portuguesa, no âmbito do Programa

"Cidades Digitais": mobilizar e generalizar na sociedade os instrumentos, as técnicas e os modos de organização

da informação e da comunicação, do conhecimento e da acção próprios de sociedades avançadas.

A aplicação de forma integrada de serviços digitais pode, se conduzida com o objectivo da melhoria da qualidade

de vida de todos os cidadãos, ser decisiva para o futuro de muitas cidades. A utilização de tecnologias digitais de

informação e de telecomunicações para a melhoria dos cuidados de saúde, a efectiva redução da burocracia

administrativa, a capacidade de geração de trabalho qualificado e de tele-trabalho, a simplificação e transparência

dos processos de decisão, a qualidade e diversidade da informação recebida ou tratada, a abertura e

reconhecimento dos processos de educação e de formação profissional, a generalização segura do comércio

electrónico, a oferta de novos modos de lazer, o apoio a cidadãos com necessidades especiais, entre muitas outras

dimensões, são elementos constitutivos do modelo da "Cidade Digital" (excerto do discurso do Senhor Ministro da

Ciência e Tecnologia, 10 de Fevereiro de 1998, Aveiro).

6


1.2. Objectivos e descrição do trabalho a realizar

Título do projecto:

Apoio à optimização dos recursos de internet dos municípios de Trás-os-Montes e Alto

Douro.

Instituição onde decorrerá o trabalho :

Com o presente projecto, a decorrer na Associação de Municípios de Trás-os-Montes e Alto

Douro, pretende-se por um lado optimizar a presença dos municípios na internet e por

outro, fomentar no interior dos mesmos o uso das ferramentas da internet.

Responsável local:

Este trabalho será supervisionado localmente pelo Eng.º Paulo Noronha, com o apoio da

equipa do projecto - Serviço Cooperativo de Extensão de Trás-os-Montes e Alto Douro

(SCETAD) -, sediada na UTAD.

O trabalho a realizar será o seguinte:

Análise da estrutura actual das páginas web e proposta de alteração e/ou complemento de

informação a disponibilizar;

Definição da metodologia de obtenção, tratamento e publicação regular da informação

produzida pelos municípios, com especial relevo para a de interferência directa com os

cidadãos (deliberações municipais, licenciamentos, concursos, etc);

7


Implementação da metodologia atrás proposta em locais piloto, com o apoio dos

intermediários do SCETAD que existem nos municípios.

Análise da estrutura orgânica municipal e definição das regras para criação, consulta e

tratamento das mensagens de correio electrónico.

Criação e apoio à configuração do sistema de correio electrónico dos municípios com base

nos servidores de correio disponibilizados ou a criar pelo SCETAD.

Análise dos sistemas de telecomunicações de ligação à internet e sua optimização.

1.3. Evolução do trabalho

Inicialmente o previsto era optimizar e reformular os sites já existentes das entidades

envolvidas (AMVDN, AMTAD e concelhos associados). Trabalhei durante algum tempo

nesse sentido, mais no papel do que propriamente na execução prática. Esse trabalho de

reorganização será mais tarde retomado uma vez que se achou por bem que eu construísse o

novo site da AMVDN de raiz para me familiarizar com as tecnologias envolvidas por forma

a ter outro “à vontade” mais tarde para a dita reformulação.

1.4. Planeamento e historial do projecto

Para fazer é preciso aprender. Em qualquer tipo de trabalho há uma fase de aprendizagem.

A engenharia está, sem dúvida, dentro dos que mais exigem a este nível.

Calendarização do trabalho realizado

8


Setembro Outubro Novembro Dezembro

.Análise da situação

actual dos "sites" das

várias entidades

envolvidas (câmaras e

AMVDN).

.Reuniões com as

pessoas envolvidas na

construção e

desenvolvimento dos

ditos "sites"

(nomeadamente

técnicos da UTAD).

.Elaboração e

desenvolvimento de

possíveis alterações e

secções a adicionarem

aos próprios "sites".

.Desenvolvimento do novo

"site" da AMVDN, utilizando

tecnologias como JavaScript,

HTML, DHTML, ASP, FLASH,

PhotoShop, etc.

.(trabalho paralelo)

Desenvolvimento de uma

aplicação em C++ para

processamento de facturação

de clínicas médicas e

posterior envio dessa mesma

facturação, organizada

segundo parâmetros

específicos e em formato

TXT, por correio electrónico

para a ADMG (Assistência

médica dos militares da

GNR).

.Reunião com a empresa

WireMaze com o objectivo de

definir uma candidatura ao

programa POSI de conteúdos

de banda larga a

disponibilizar pelos sites das

câmaras municipais (se for

aceite a proposta, este

projecto terá um prazo de

execução de 2 anos).



tecnologias como

JavaScript, HTML, DHTML,

ASP, FLASH, PhotoShop,

etc. (continuação).

.Desenvolvimento do "site"

de divulgação do projecto

em curso.

.Instalação da ferramenta

Autodesk MapGuide (Author

e Server) e interface WEB

desenvolvida pela PH

Informática e Medidata, nas

câmaras associadas à

AMVDN para optimização

da impressão de Plantas de

Localização.



tecnologias como JavaScript,

HTML, DHTML, ASP, FLASH,

PhotoShop, etc.

(continuação).

9


2. Requisitos considerados na construção do site

www.amvdn.pt

Fácil navegação.

Cumprimento de algumas normas W3C nomeadamente de acessibilidade

Aspecto gráfico cuidado e agradável.

Motor de pesquisa acessível e disponível em qualquer parte do site.

Fácil actualização e manutenção

Automatização, sempre que possível, dos conteúdos e aspecto do site em relação a

datas, condições de navegabilidade, etc.

Construção de zonas com conteúdos dinâmicos armazenados em base de dados e

respectivo back-office para actualização dessas mesmas áreas.

Interactividade.

Multimédia.

Disponibilização de informação sobre a região e os seus concelhos, nomeadamente

fotografias, divulgação de projectos, notícias, eventos, história, etc.

Possibilitar a recolha de “feedback” do público relativamente a aspectos técnicos e

conteúdos disponibilizados.

10


3. Breve descrição das tecnologias utilizadas

3.1. HTML

HTML significa HyperText Markup Language, subconjunto do Standard Internacional para

a criação de documentos electrónicos designado por SGML(Standard Generalized Markup

Language). A versão HTML 4.0 surgiu em Dezembro de 1997, através da Recomendação

W3C.

O formato da linguagem é constituído por um sistema de códigos lógicos escritos entre

parêntesis(Markup, na terminologia inglesa).

Sem o precioso contributo do HTML, o termo 'surfing the web' significaria antes escalar

montanhas de texto, de uma forma linear e pouco interactiva. Recordo que, com o Hiper

Texto podemos avançar rapidamente através da ligação ('links') entre diversos conteúdos

sobre o mesmo tópico ou assunto.

Não existe nada de mais errado do que pensar que o HTML é uma linguagem complexa ou

criptográfica, é tão só um sistema de códigos simples que permite enviar texto de uma

forma completamente interactiva através da Internet.

3.2. CSS

A utilização criteriosa da técnica de CSS (Cascading Style Sheets) permite modificar a

aparência de centenas de páginas Web, apenas com o uso de um ficheiro. 'Style Sheets'

oferecem muito mais flexibilidade em termos de efeitos na apresentação de páginas Web,

11


propriedades como a cor, fundos, margens, e cercaduras podem ser estendidas a todos os

elementos.

Com Style Sheets, os programadores podem usar a propriedade de text-indent para indentar

texto. As margens do texto podem ser facilmente conseguidas sem o recurso ao uso de

tabelas. A utilização de Style Sheets também reduz a necessidade de procura e substituição

por ficheiros múltiplos; se o autor decide alterar a indentação de todos os parágrafos num

site, apenas tem que alterar uma linha na StyleSheet.

As técnicas utilizando Style Sheets representam um enorme avanço no desenvolvimento de

páginas Web, porque determinam a separação entre os conteúdos e a apresentação, no

fundo entre o HTML e o CSS.

Uma Style Sheet é feita de regras de estilo que informam o 'browser' como deve apresentar

um documento. Existem várias formas de ligar estas regras com os seus documentos HTML

, o método mais simples é usar o elemento de estilo HTML.. Este elemento é colocado na

área HEAD e contém as regras para a página.

Cada regra é feita de um selector - usualmente um elemento de HTML como BODY, P, ou

EM o estilo que deverá ser aplicado ao selector.

Existem numerosas propriedades que poderão ser definidas para um elemento. Cada

propriedade tem um valor, que junto com a propriedade descreve como o selector deverá

ser apresentado.

12


3.3. JavaScript

3.3.1. Java versus JavaScript- Java é uma linguagem compilada extremamente potente

desenvolvida pela empresa Sun Microsystems, o JavaScript foi originalmente desenvolvido

pela Netscape, trata-se de uma linguagem mais leve pertencendo ao tipo de linguagens

interpretadas, tendo sido inicialmente baptizada com o nome de LiveScript. As duas

linguagens não estão relacionadas, no entanto, partilham de algumas similitudes.

3.3.2. Programas compilados versus interpretados

De uma forma geral, em todas as linguagens é necessário escrever comandos em texto

normal (através de um simples editor de texto) coerentes com a sintaxe e estrutura da

própria linguagem, sendo estes comandos vulgarmente designados por código fonte.

Na linguagem interpretada a sintaxe do código e também a sua estrutura é normalmente

mais simples do que a compilada, mas a sua execução torna-se geralmente mais lenta, ou

seja, exige que cada vez que o programa é executado, cada linha de código seja

"interpretado" (interrogado) com base nos fluxos de execução.

As linguagens compiladas requerem uma sintaxe mais complexa e um conhecimento mais

especializado das suas técnicas por parte dos programadores. Após a sua escrita em código

fonte, o programa necessita de ser compilado através de um programa especialmente criado

para o efeito (compilador), produzindo como saída um programa executável em código

binário, sendo estes específicos para trabalhar numa determinada plataforma .

13


3.3.3. Assim, Java é uma linguagem compilada cuja plataforma é independente e a

linguagem JavaScript é interpretada.

Os programas de pesquisa na Internet browsers providenciam uma plataforma independente

para o Java – “Java Virtual Machine” e o interpretador para o JavaScript, é assim

importante o browser para o qual se está a escrever os scripts.

3.3.4. Porquê aprender JavaScript?

O JavaScript é a única linguagem actualmente suportada por todos os 'browsers' mais

populares da Internet, por exemplo, o Netscape Navigator suporta apenas JavaScript

enquanto o Microsoft Internet Explorer suporta o JavaScript e VBScript.

Na minha opinião, o tempo despendido na aprendizagem desta linguagem é um bom

investimento, visto não ter uma dificuldade elevada, face ao proveito que se obtém da sua

utilização no desenvolvimento de páginas web, em conjunto com o conhecimento de

HTML Por outro lado o conhecimento de JavaScript associado com CSS (Cascading Style

Sheets), permite criar páginas DHTML, ou seja, páginas de HTML dinâmicas.

Por fim, ao aprender esta linguagem o limite do desenvolvimento de uma página web

é mesmo a imaginação de cada um.

14


3.3.5. Considerações sobre JavaScript

O JavaScript é uma linguagem interpretada que pode ser inserida numa página HTML.

Interpretada significa que após o carregamento da página pelo browser o código é

executado logo que um evento seja activado. Quando o código é executado é interpretado

linha-a-linha. Existem nesta linguagem um número substancial de eventos que poderão ser

executados, como por exemplo: premir um botão; carregar a página; movimentar o rato,

etc..

Como disse anteriormente, a linguagem JavaScript foi originalmente criada pela Netscape,

mas já se encontra estandardizada pelo ECMA (European Computer Manufactures

Association). Existem actualmente várias versões desta linguagem (1.0, 1.1, 1.2, …) e

continua a ser objecto de desenvolvimento pelas principais empresas de software.

O desenvolvimento da linguagem seguiu de perto o próprio desenvolvimento dos próprios

browsers.

3.4. ASP- Active Server Pages

Páginas escritas com a linguagem ASP são executadas no servidor e geram páginas HTML

dinamicamente. As páginas resultantes são enviadas para o browser e o script original em

ASP fica preservado

A grande vantagem é que todos os browsers se tornam capazes de aceder a páginas que

usam ASP.

15


É possível a partir de uma única rotina, gerar páginas HTML contendo registos de uma base

de dados, por exemplo. Outros exemplos do uso desta linguagem são consultas a bases de

dados, identificação e autenticação de utilizadores, envio e recepção de correio electrónico

via páginas HTML, leitura de arquivos texto, rotação de banners promocionais e muitas

outras.

Numa página em ASP podem ser utilizados em conjunto comandos em VBScript,

JavaScript e HTML.

Citando a Microsoft:

“Microsoft Active Server Pages (ASP) is a server-side scripting environment that you can

use to create and run dynamic, interactive Web server applications. With ASP, you can

combine HTML pages, script commands, and COM components to create interactive Web

pages or powerful Web-based applications, which are easy to develop and modify.”

3.5. Flash

O Macromedia Flash é um software de criação de animações dimensionáveis e interactivas

de alto impacto na Web. Podem ser criados logótipos com animação, componentes de

navegação para sites da Web, animações longas, sites completos em Flash ou aplicações.

O Flash oferece recursos surpreendentes para criar sites abrangentes, atraentes e

interactivos. Os recursos de reprodução aceitam áudio MP3, legendas para um filme criado

16


pelo utilizador,etc. Estas e outras potencialidades permitem criar jogos sofisticados,

formulários, pesquisas, etc.

3.6. Ferramentas de software utilizadas

Da macromedia: dreameaver MX, flash MX e fireworks MX.

Da microsoft: SQL Server 2000

Da borland: borland C++ Builder 6.0

Da adobe: adobe photoshop 7.0

17


4. Desenvolvimento do site www.amvdn.pt

O site passou por várias fases de desenvolvimento. De destacar:

Inicialmente o site consistia de páginas soltas que eram actualizadas (penosamente)

sempre que se efectuava qualquer mudança.

Mais tarde, e após estudar um pouco a ajuda do dreamweaver, criei um template que

associei às várias páginas já existentes. Agora sempre que actualizo o template

todas as páginas são actualizadas.

A parte do back-office foi criada também no dreamweaver após as devidas

configurações do SQL Server e criação do respectivo DSN (Data Source) para que

seja possível aceder à base de dados criada no enterprise manager (programa que

vem junto com o SQL Server 2000.

A base de dados é bastante simples, e consiste de tabelas com informações como as

notícias, agenda, utilizadores permitidos, sugestões, etc.

Não efectuei qualquer estudo de optimização da mesma dada a sua simplicidade.

Mais detalhes sobre a parte ASP do site no capitulo 8.

A parte JavaScript também foi evoluindo, acompanhando evidentemente o evoluir

dos meus conhecimentos na matéria.

Inicialmente, por exemplo, os filmes flash do site tinham uma layer com vários

objectos para efectuar algum zoom de modo a compensar as diferentes resoluções

dos vários utilizadores, mais tarde introduzi algum código JavaScript (capitulo 7)

por forma a detectar o tipo de resolução que cada utilizador está a usar e carregar o

filme flash correspondente a essa resolução.

18

http://www.amvdn.pt/


Na página de municípios todos os textos são controlados por funções JavaScript por

mim escritas. No início existiam várias layers e controlava apenas a sua propriedade

de visibilidade.

Outros pormenores deste género poderão ser vistos um pouco por todo o site.

Procurei com o passar do tempo simplificar o código e optimizá-lo, bem como os outros componentes de todo o site.

4.1 HTML e CSS desenvolvido (alguns exemplos)

Seria incomportável estar aqui a descrever todo o HTML e CSS desenvolvido. Vou apenas

dar alguns exemplos.

Ao nível da acessibilidade da página tenho estado atento a algumas recomendações da

W3C e procurei segui-las sempre que possível, apesar de muito ainda estar por realizar.

Exemplos disso são a descrição do conteúdo das tabelas através do atributo summary (e.g.

<table width="185" border="0" cellspacing="0" cellpadding="0" summmary = "Menu

Principal">), a descrição dos conteúdos das imagens através do atributo alt (e.g.

alt="Fotos de Mesão Frio"). Outras recomendações serão ou não seguidas consoante seja

pedido por parte da direcção da AMVDN.

Existem rumores que todos os sites públicos terão que obedecer a algumas recomendações

da W3C até 2005. Por isso também este site terá, mais cedo ou mais tarde que obedecer a

19


tais normas. Por exemplo a Espanha já se encontra a reformular os sites existentes por

forma a obedecer a estas normas.

Para além do uso de rollover images em algumas partes do site, estudei também a parte de

filtros HTML que permitem melhorar o aspecto e interactividade da página sem obrigar ao

download de outras imagens. Temos um exemplo disso na marquee que faz rolar as

imagens dos concelhos no topo da página:

HTML

<marquee id="slide_topo" class="alpha_img" onMouseOver="this.stop();javascript:this.style.filter = 'alpha(opacity= 100)';" onMouseOut="this.start();javascript:this.style.filter = 'alpha(opacity= 80)';" onClick="popUpWindow('fotos.html', '0', '0', '750', '450')" behavior="scroll" loop="-1" scrollamount="3">

CSS

.alpha_img { filter:alpha(opacity= 80); cursor: hand;

}

Porém estes filtros apenas são visíveis por utilizadores do Internet Explorer ou browsers

baseados neste.

A borda da caixa de texto para executar a procura no site muda de cor quando o evento

onFocus é lançado e retorna à cor anterior quando o evento onBlur. Isto é conseguido com

a introdução da classe boxBlur e boxFocus na folha de estilo principal do site

20


(amvdn_estilo.css) e com o código JavaScript correspondente para efectuar a mudança de

classe da textbox aquando da ocorrência dos eventos.

Código:

<INPUT class="boxBlur" onFocus="this.className='boxFocus'" onBlur="this.className='boxBlur'" TYPE=text name=q size=12 maxlength=255 value="">

4.2. JavaScript desenvolvido

Dada a dimensão de todo o código JavaScript envolvido, nomeadamente, o código

importado, e o código desenvolvido, vou apenas explicar a fundo as funções mais

importantes.

4.2.1. JavaScript comum a todas as páginas (faz parte do ficheiro de template do site)

<script language="javascript" type="text/javascript"> function visivel(visibilidade,nome_layer){ document.all[nome_layer].style.visibility = visibilidade; return; } </script>

Esta função recebe dois parâmetros, o estado de visibilidade pretendido e a id do objecto ao

qual se pretende alterar a propriedade de visibility, passando este a estar ou não visível

consoante o parâmetro recebido.

21


Fu

me

es

e S

Fu

alg

<!

<script language="javascript" type="text/javascript"> function painel_som(){ if(document.all['som_ambiente'].hidden == 'true'){ document.all['som_ambiente'].hidden = 'false'; document.all['som_ambiente'].Play(); } else {document.all['som_ambiente'].hidden = 'true'; document.all['som_ambiente'].Stop(); } return; } </script>

nção desenvolvida para controlar a visibilidade do painel de som e também o estado do

smo. É mais um procedimento do que uma função. Se o painel do som de ambiente

tiver escondido fica visível ou vice-versa. O mesmo se aplica para a propriedade de Play

top do mesmo objecto.

<script language="javascript" type="text/javascript"> var popUpWin=0; function popUpWindow(URLStr, left, top, width, height) { if(popUpWin) { if(!popUpWin.closed) popUpWin.close(); } popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+''); } </script>

nção importada a partir do dreamweaver. Serve para abrir uma janela pop-up com

umas propriedades recebidas como parâmetro e outras definidas na própria função.

--script para controlar os adereços-->

23


{

//document.write("Inverno");

visivel('visible','Inverno');

visivel('hidden','outono2');

visivel('hidden','outono');

visivel('hidden','Primavera');

visivel('hidden','Primavera1');

visivel('hidden','Verao');

if((dia >= 21 && mes == 11) || (dia<=6 && mes ==0)){

visivel('visible','Natal');

}

}

//Primavera

if((dia >= 21 && mes == 2) || mes== 3

|| mes ==4 ||(dia<21 && mes ==5))

{

//document.write("Primavera");

visivel('visible','Primavera');

visivel('visible','Primavera1');



25


visivel('hidden','Inverno');


}

//Verão

if((dia >= 21 && mes == 5) || mes== 6 || mes ==7 ||(dia<22 && mes ==8))

{

//document.write("Verão");

visivel('visible','Verao');






}

//Outono

if((dia >= 22 && mes == 8) || mes== 9 || mes ==10 ||(dia<21 && mes ==11))

{

//document.write("Outono");

26


visivel('visible','outono');

visivel('visible','outono2');





}

</script>

Procedimento que controla os adereços que aparecem no site de acordo com a altura do

ano. Utilizei para o efeito o objecto Date() criando uma instância do mesmo(data_hoje) e a

partir daí instâncias para o mês e dia que serviram para os vários testes efectuados para

definir as várias janelas temporais.

<script language="JavaScript" type="text/JavaScript"> var actualizada; actualizada=document.lastModified document.write("Esta página foi actualizada pela última vez em: "+actualizada) </script>

Procedimento que escreve no ecrã a data da última vez que o ficheiro foi actualizado. Esta

informação obtém-se, como se pode perceber, a partir da propriedade do objecto

27


documento lastModified que retorna uma string com a informação que o servidor fornece

sobre a data em que o ficheiro foi pela última vez modificado. Document.write escreve a

string escolhida no ecrã.

Para melhorar a sensação de “mouse over” em imagens utilizei o filtro alpha (apenas

visível em Internet Explorer). Aqui fica um exemplo:

<img class="alpha_img" onMouseOver="javascript:this.style.filter = 'alpha(opacity= 100)';" onMouseOut="javascript:this.style.filter = 'alpha(opacity= 80)';" src="../images/logo_3d.gif" alt="Logotipo da Associação de Munícipios do Vale do Douro Norte (Clique para voltar à página inicial)" width="107" height="62" border="0">

Nota: de salientar a aplicação directa do filtro (sem recurso a funções) através da partícula

this que acede directamente ao objecto em utilização sem recurso a document.all ou

getElementById. Esta possibilidade é utilizada em todo o site várias vezes e também aqui

se vê a versatilidade permitida pelo JavaScript.

Exemplos de utilização de JavaScript directamente associado ao evento em questão:

<th scope="col" onMouseOver="this.background='menu/menu_over.gif';" onMouseOut="this.background='';”></th>

<img onClick="javascript:alert('Versão inglesa ainda não disponível :: English version not avaiable')" alt="Bandeira inglesa (click to enter english version of our site)" src="../images/botao_ingles.gif" width="33" height="21" border="0" onMouseOver = "this.src = 'images/UK_peq_animada.gif'" onMouseOut = "this.src = 'images/botao_ingles.gif'">

28


<marquee id="slide_topo" class="alpha_img" onMouseOver="this.stop();javascript:this.style.filter = 'alpha(opacity= 100)';" onMouseOut="this.start();javascript:this.style.filter = 'alpha(opacity= 80)';" onClick="popUpWindow('fotos.html', '0', '0', '750', '450')" behavior="scroll" loop="-1" scrollamount="3">

this.stop(); pára a marquee quando o rato se encontra por cima da mesma. this.start() faz o inverso.

4.2.2. JavaScript:: wallpaper <script language="javascript">

function mes(){

var mes_actual=new Date();

switch(mes_actual.getMonth()) {

case 0:

document.write("Janeiro");

break

case 1:

document.write("Fevereiro");

break

case 2:

document.write("Março");

break

29


case 3:

document.write("Abril");

break

case 4:

document.write("Maio");

break

case 5:

document.write("Junho");

break

case 7:

document.write("Agosto");

break

case 8:

document.write("Setembro");

break

case 9:

return "Outubro";

break

case 10:

return "Novembro";

break

case 11:

30


return "Dezembro";

break

}

}

var ano_actual=new Date();

function ano(){

return

ano_actual.getFullYear().toString();

}

</script>

Estas funções (mes e ano) permitem que a parte do wallpaper mensal da página seja

praticamente automática. Sendo apenas necessário criar os respectivos directórios e

ficheiros para cada mês. Desta forma a página pode ser estática (HTML) não sendo

necessário recorrer à base de dados SQL Server também implementada e da qual falarei

mais à frente.

Para o efeito criei uma instância do objecto Date() em cada uma das funções (mes e ano).

Na função mes, usei um switch para o inteiro de 0 a 11 retornado por getMonth(). Este

switch vai retornar o mês actual em forma de string.

A função ano retorna o ano actual, transformado em string pela função de sistema

toString().

31


O caminho da imagem apresentada como thumbnail e o href de cada imagem para

wallpaper dependem destas funções criadas. Por exemplo:

<script language="javascript">document.write("<a class='topodireito' href='images/wallpaper/"+ano()+"/"+mes()+"/"+mes()+"_"+ano()+"_800_600.jpg' target = '_blank'>800 x 600</a>") </script>

4.2.3. JavaScript:: municípios <script language="JavaScript" type="text/JavaScript">

function conteudo(concelho){

switch(concelho) {

case "alijo":

document.getElementById('brasao').src

='images/municipios/brasoes/alijo.gif';

var node =

document.getElementById('conteudo_direito1').firstChild;

try {

node.replaceData(0, 400,

"ALIJÓ, com uma área de 297,4 km2, 14 021 habitantes e 19 freguesias, é

um dos 14 municípios distrido de VILA REAL feriado municipal em 2003-11-

11 .");

}

catch(err) {

handleError(err)

}

32


catch(err) {

handleError(err)

}

var node =


try {


"JOAO LUIS TEIXEIRA FERNANDES, Presidente da Câmara Municipal.");

}

catch(err) {

handleError(err)

}

break

case "regua":

document.write(concelho);

break

case "sabrosa":


break

case "mesao_frio":


break

34


case "santa_marta":


break

case "vila_real":


break

}

return;

}

</script>

Esta função permite controlar os conteúdos que aparecem numa tabela ao lado do mapa

referentes a cada um dos concelhos. Conforme a posição do rato em cima do mapa HTML,

esta função (conteúdo) é chamada e é-lhe enviada o parâmetro “concelho” com o nome do

respectivo concelho. A função, por sua vez, escreve no ecrã o texto correspondente ao

concelho através da função node.replaceData. As imagens são trocadas com recurso à

mudança da source da tag IMG.

35


4.2.4. JavaScript:: pesquisa

<script language="javascript"> //alert(screen.height); if(screen.height>=960){ //alert("1280x960 ou superior"); document.getElementById("pesquisa_google").width= 960; } else if(screen.height>600 && screen.height<=960){ //alert("resolução entre 800x600 e 1280x960"); document.getElementById("pesquisa_google").width= 800; } else if(screen.height<=600){ //alert("800x600 ou inferior"); document.getElementById("pesquisa_google").width= 580; } </script>

Procedimento que dimensiona a <iframe> contida nesta página (pesquisa.html) de acordo

com a resolução do monitor do utilizador. Pesquisa_google é o id da <iframe>. A largura

da <iframe> é atribuída conforme o valor retornado por screen.height (o objecto screen

contém informações sobre a resolução do monitor).

<script> //document.write(location.search); document.getElementById("pesquisa_google").src="http://google.pt/custom"+location.search; </script>

Procedimento que permite ir buscar o parâmetros URL da própria página (e que foram

enviados pela página anterior) que se seguem a “?” (location.search). Estes parâmetros são

36


por sua vez enviados à <iframe>. Desta forma é possível efectuar a pesquisa dentro do site

www.amvdn.pt sem ter que sair do próprio site.

4.2.5. JavaScript:: localização

Nesta página utilizei um applet Java da anything3D.com com um planisfério do planeta

terra à noite. Mudei alguns parâmetros e coloquei um hotspot (<param name=hotspot0

value=" x1160 y340 q n'AMVDN' u'norte.html' t'_self' ">) para que seja possível entrar na

página seguinte.

<APPLET alt="Mapa do planeta terra, à noite, visto do espaço" code="a3d.ImageRenderApplet.class" archive="apvp.zip" codebase="." name="apv" width=550 height=400 ALIGN="center" ID=Applet1 VIEWASTEXT> <param name="file" value="localizacao/earth_at_night.jpg"> <param name="barcolor" value="8FC5CB"> <param name=hotspot0 value=" x1160 y340 q n'AMVDN' u'norte.html' t'_self' "> <param name=pan value="190"> <param name=tilt value="50"> <param name=regkey value="9701100121011101000000000"> </APPLET>

A página seguinte (norte.html), foi feita em macromedia fireworks e todo o código

JavaScript é gerado pela aplicação. Usa funções para trocar as imagens depois de as

carregar para a cache através da função MM_preloadImages Esta função constrói um

objecto das imagens na memória (e.g.através de: var image1= new Image; image1.src =

37

http://www.amvdn.pt/


“nome_do_ficheiro”). Desta forma não há qualquer “lag” entre o decorrer do evento e o

carregamento da imagem associada a esse mesmo evento.

4.2.6. JavaScript:: panoramas

Tal como na primeira página de localização, também aqui foi usado um applet Java da

anything3D. Tirei as fotografias e o programa processa-as de forma a ficarem encaixadas

em sequência é então gerado um ficheiro JPEG, ficheiro este que é associado ao applet.

4.2.7. JavaScript:: introdução

<script language="javascript"> //alert(screen.height); if(screen.height>=960){ //alert("1280x960 ou superior"); window.moveTo(0,0); window.resizeTo(1280,960); location.href= "amvdn_intro_1280_960.html"; } else if(screen.height>600 && screen.height<=960){ //alert("resolução entre 800x600 e 1280x960"); window.moveTo(0,0); window.resizeTo(1024,768); location.href= "amvdn_intro_1024_768.html"; } else if(screen.height<=600){ //alert("800x600 ou inferior"); window.moveTo(0,0); window.resizeTo(800,600); location.href= "amvdn_intro_800_600.html"; } </script>

38


Este script tem como objectivo detectar a resolução do monitor e, em conformidade,

carregar a página de introdução (flash) mais adequada à resolução em causa. Esta

informação é dada pela propriedade height (e width) do objecto screen.

4.2.8. JavaScript:: fotos O código JavaScript das páginas relacionadas com a exibição de fotografias dos concelhos

associados à AMVDN encontra-se orientado à detecção do tamanho do ecrã e controlo do

carregamento da versão flash ou HTML para a visualização das respectivas fotografias.

Código:

<script> if(confirm("Qual a versão que pretende ver? Flash=OK; HTML=Cancel")==true) location.replace("foto_ecra.html"); else location.replace("fotos_html.html") </script>

O método confirm() (que pertence ao objecto window) mostra uma caixa de diálogo que

pergunta ao utilizador que versão pretende. É feito um teste (if) que irá ditar qual o

endereço a seguir (location.replace (“ ”)).

Para a versão flash é ainda executado um código similar ao da introdução que detecta o

tamanho do ecrã, carrega a versão adequada à resolução e maximiza a janela em questão.

39

4.3. ASP desenvolvido

As partes dinâmicas do site, ou seja, aquelas que mudam consoante o conteúdo de uma base

de dados, foram desenvolvidas em ASP (Active Server Pages). Comecei por desenvolver

esta parte do site em PHP/mySQL, mas como a UTAD (Universidade de Trás-os-Montes e

Alto Douro) tem um contrato com a Microsoft que possibilita o uso do ASP, optei então

por ASP, uma vez que, por exemplo, a actualização da BD se torna mais directa com a

possibilidade do uso de Server Behaviors.

Para o efeito, criei uma base de dados no SQL server com as várias tabelas necessárias.

Para além disso foi necessário criar um DSN (Data Source Name) de sistema que faz a

“ponte” entre a base de dados e os programas que irão aceder à mesma. Este DSN inclui a

base de dados AMVDN (nome da base de dados criada).

Todas as páginas criadas usam o ASP em conjunto com JavaScript. O cabeçalho do

ficheiro ficou da seguinte forma:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> 

O ficheiro em include contém a connection string usada com o DSN e nome de utilizador,

como se pode ver a seguir.

40


<% // FileName="Connection_odbc_conn_dsn.htm" // Type="ADO" // DesigntimeType="ADO" // HTTP="false" // Catalog="" // Schema="" var MM_base_dados_STRING = "dsn=amvdn;uid=sa;" %>

4.3.1. ASP:: Notícias Esta página possibilita a leitura das notícias dos vários concelhos pertencentes à AMVDN e

armazenadas na BD.

<% var Recordset1__MMColParam = "1"; if (String(Request.QueryString("concelho")) != "undefined" && String(Request.QueryString("concelho")) != "") { Recordset1__MMColParam = String(Request.QueryString("concelho")); } %>

Este pedaço de código permite ir buscar os parâmetros ao URL enviados pela página que

acedeu às notícias (e.g. noticias.asp?concelho=vila_real). O parâmetro recebido, se válido,

é então atribuído a Recordset1_MMColParam, o que vai definir o tipo de query a executar

na BD.

41


<% var Recordset1 = Server.CreateObject("ADODB.Recordset"); Recordset1.ActiveConnection = MM_base_dados_STRING; Recordset1.Source = "SELECT * FROM dbo.noticias WHERE concelho = '"+ Recordset1__MMColParam.replace(/'/g, "''") + "' ORDER BY data DESC"; Recordset1.CursorType = 0; Recordset1.CursorLocation = 2; Recordset1.LockType = 1; Recordset1.Open(); var Recordset1_numRows = 0; %>

Aqui criei um objecto com o nome Recordset1 que permite fazer o query à BD.

Esse query depende, como já referi, do valor recebido como parâmetro pela página e é

ordenado por ordem descendente de data.

<% var amvdn;

switch(Recordset1.Fields.Item("concelho").Value) {

case "AMVDN":

Response.Write("Notícias da

Associação");

break

case "alijo":

Response.Write("Notícias de

Alijó");

break

42


case "murca":


Murça");

break

case "regua":

Response.Write("Notícias do Peso

da Régua");

break

case "sabrosa":


Sabrosa");

break

case "mesao_frio":


Mesão Frio");

break

case "santa_marta":


Santa Marta de Penaguião");

break

case "vila_real":

Response.Write("Notícias de Vila

Real");

break

}

%>

43


Este switch transforma o parâmetro recebido pela página com o nome do concelho num

texto elucidativo do tipo de notícia que estamos a ler.

Por forma a percorrer todas as notícias existentes sobre determinado concelho, criei uma

repeat region. Consiste num ciclo while que executa enquanto não chegarmos ao fim do

“recordset” e enquanto houver linhas. O código HTML e ASP dentro deste while ,é

também, como é óbvio, executado resultando na apresentação das várias notícias ao longo

da página.

Por fim o “recordset” é fechado.

4.3.2. ASP:: Agenda Esta página é idêntica à das notícias, diferindo apenas no conteúdo e tabela a pesquisar.

4.3.3. ASP:: página inicial A página inicial em termos de ASP é também muito parecida à página de notícias. Difere

apenas na apresentação das mesmas, que neste caso dentro de uma marquee e em

movimento

44


4.3.4. ASP:: BackOffice O BackOffice serve para os utilizadores com privilégios de administradores do site

(username e password contidas na tabela de passwords da base de dados criada) possam

alterar toda a área dinâmica do site.

4.3.5. ASP::BackOffice:: Manutenção

Esta é a página de login para a área do BackOffice. É constituída por:

• Uma tabela pertencente à BD criada com os utilizadores registados

• Um form HTML para que o utilizador possa escrever o seu username e

password

• Um server behavior que vai confirmar se o username e password introduzidos

são válidos

Se o utilizador estiver autorizado, é criada uma variável de sessão de duração limitada e que

permitirá que o utilizador navegue pelas diferentes páginas de manutenção sem ser

necessário introduzir continuamente o login e password.

<%

// *** Validate request to log in to this site.

var MM_LoginAction = Request.ServerVariables("URL");

if (Request.QueryString!="") MM_LoginAction += "?" +

Server.HTMLEncode(Request.QueryString);

var MM_valUsername=String(Request.Form("username"));

45


if (MM_valUsername != "undefined") {

var MM_fldUserAuthorization="";

var MM_redirectLoginSuccess="noticias_inserir.asp";

var MM_redirectLoginFailed="password_errada.html";

var MM_flag="ADODB.Recordset";

var MM_rsUser = Server.CreateObject(MM_flag);

MM_rsUser.ActiveConnection = MM_base_dados_STRING;

MM_rsUser.Source = "SELECT username, password";

if (MM_fldUserAuthorization != "") MM_rsUser.Source += "," +

MM_fldUserAuthorization;

MM_rsUser.Source += " FROM dbo.utilizadores WHERE username='" +

MM_valUsername.replace(/'/g, "''") + "' AND password='" +

String(Request.Form("password")).replace(/'/g, "''") + "'";

MM_rsUser.CursorType = 0;

MM_rsUser.CursorLocation = 2;

MM_rsUser.LockType = 3;

MM_rsUser.Open();

if (!MM_rsUser.EOF || !MM_rsUser.BOF) {

// username and password match - this is a valid user

Session("MM_Username") = MM_valUsername;

if (MM_fldUserAuthorization != "") {

Session("MM_UserAuthorization") =

String(MM_rsUser.Fields.Item(MM_fldUserAuthorization).Value);

} else {

Session("MM_UserAuthorization") = "";

}

if (String(Request.QueryString("accessdenied")) != "undefined" &&

false) {

MM_redirectLoginSuccess = Request.QueryString("accessdenied");

46


}

MM_rsUser.Close();

Response.Redirect(MM_redirectLoginSuccess);

}

MM_rsUser.Close();

Response.Redirect(MM_redirectLoginFailed);

}

%>

Cada página de manutenção contém um server behavior que restringe o acesso à página

(Restrict Access To Page). Este server behavior testa a validade ou não da variável de

sessão. Em caso de erro o utilizador é redireccionado para uma página de erro (i.e.

password_errada.html).

<% // *** Restrict Access To Page: Grant or deny access to this page var MM_authorizedUsers=""; var MM_authFailedURL="password_errada.html"; var MM_grantAccess=false; if (String(Session("MM_Username")) != "undefined") { if (true || (String(Session("MM_UserAuthorization"))=="") || (MM_authorizedUsers.indexOf(String(Session("MM_UserAuthorization"))) >=0)) { MM_grantAccess = true; } } if (!MM_grantAccess) { var MM_qsChar = "?"; if (MM_authFailedURL.indexOf("?") >= 0) MM_qsChar = "&"; var MM_referrer = Request.ServerVariables("URL"); if (String(Request.QueryString()).length > 0) MM_referrer = MM_referrer + "?" + String(Request.QueryString()); MM_authFailedURL = MM_authFailedURL + MM_qsChar + "accessdenied=" + Server.URLEncode(MM_referrer); Response.Redirect(MM_authFailedURL); }

%>

47


4.3.6. ASP::BackOffice:: Inserir notícia

Esta página permite introduzir notícias na base de dados. Para tal criei um Insert Record

behavior. Basicamente, são criadas variáveis para albergar os valores escritos no formulário

e uma frase sql com esses valores para executar na BD. Tal como as outras páginas de

manutenção, esta página tem um server behavior que restringe o acesso à mesma.

<%

// *** Insert Record: set variables

if (String(Request("MM_insert")) == "form1") {

var MM_editConnection = MM_base_dados_STRING;

var MM_editTable = "dbo.noticias";

var MM_editRedirectUrl = "";

var MM_fieldsStr =

"data|value|concelho|value|cabecalho|value|corpo|value|imagem|value";

var MM_columnsStr =

"data|',none,NULL|concelho|',none,''|cabecalho|',none,''|corpo|',none,''|

imagem|',none,''";

// create the MM_fields and MM_columns arrays

var MM_fields = MM_fieldsStr.split("|");

var MM_columns = MM_columnsStr.split("|");

// set the form values

48


for (var i=0; i+1 < MM_fields.length; i+=2) {

MM_fields[i+1] = String(Request.Form(MM_fields[i]));

}

// append the query string to the redirect URL

if (MM_editRedirectUrl && Request.QueryString &&

Request.QueryString.Count > 0) {

MM_editRedirectUrl += ((MM_editRedirectUrl.indexOf('?') == -

1)?"?":"&") + Request.QueryString;

}

}

%>

<%

// *** Insert Record: construct a sql insert statement and execute it

if (String(Request("MM_insert")) != "undefined") {

// create the sql insert statement

var MM_tableValues = "", MM_dbValues = "";

for (var i=0; i+1 < MM_fields.length; i+=2) {

var formVal = MM_fields[i+1];

var MM_typesArray = MM_columns[i+1].split(",");

var delim = (MM_typesArray[0] != "none") ? MM_typesArray[0] : "";

var altVal = (MM_typesArray[1] != "none") ? MM_typesArray[1] : "";

var emptyVal = (MM_typesArray[2] != "none") ? MM_typesArray[2] : "";

if (formVal == "" || formVal == "undefined") {

formVal = emptyVal;

} else {

if (altVal != "") {

49


formVal = altVal;

} else if (delim == "'") { // escape quotes

formVal = "'" + formVal.replace(/'/g,"''") + "'";

} else {

formVal = delim + formVal + delim;

}

}

MM_tableValues += ((i != 0) ? "," : "") + MM_columns[i];

MM_dbValues += ((i != 0) ? "," : "") + formVal;

}

MM_editQuery = "insert into " + MM_editTable + " (" + MM_tableValues +

") values (" + MM_dbValues + ")";

if (!MM_abortEdit) {

// execute the insert

var MM_editCmd = Server.CreateObject('ADODB.Command');

MM_editCmd.ActiveConnection = MM_editConnection;

MM_editCmd.CommandText = MM_editQuery;

MM_editCmd.Execute();

MM_editCmd.ActiveConnection.Close();

if (MM_editRedirectUrl) {

Response.Redirect(MM_editRedirectUrl);

}

}

}

%>

<%

50


var Recordset1 = Server.CreateObject("ADODB.Recordset");

Recordset1.ActiveConnection = MM_base_dados_STRING;

Recordset1.Source = "SELECT * FROM dbo.noticias ORDER BY data DESC";

Recordset1.CursorType = 0;

Recordset1.CursorLocation = 2;

Recordset1.LockType = 1;

Recordset1.Open();

var Recordset1_numRows = 0;

%>

Criei algum código também para automatizar a introdução da data e hora quer nas notícias,

quer nos eventos. Criei uma instância do objecto Date() e a partir daí construí uma string de

forma adequada para que seja possível a sua introdução na BD.

<input type="text" name="data" value="<% var data_hoje=new Date(); Response.Write(data_hoje.getDate()+'-'+(data_hoje.getMonth()+1)+'-'+data_hoje.getYear()); %>" size="15">

51


4.3.7. ASP::BackOffice:: Apagar notícia

Esta página permite apagar notícias na base de dados. É praticamente igual à página

anterior (Inserir noticia) apenas difere no tipo de frase sql a executar na BD, que desta feita

é um comando de delete.

4.3.8. ASP::BackOffice:: Inserir Evento

Página que possibilita a introdução de eventos na agenda. É também semelhante em termos

de código ASP à página de Inserir Notícia. Mudam as tabelas da BD, e os campos das

tabelas.

4.3.9. ASP::BackOffice:: Apagar Evento

Página que permite apagar eventos da agenda. Semelhante em termos de código ASP às

páginas anteriores.

4.4. Flash desenvolvido

A introdução é toda ela em flash. Existe algum código ActionScript envolvido. Este serve

para controlar paragens, comportamento dos botões, etc. O resto é o controle de

apresentação das várias layers, quer no tempo quer no espaço. O tweening é usado em

flash para animar os sprites. Essa animação tomar várias formas consoante a vontade do

52


criador. Não é possível entrar em grandes detalhes, uma vez que é um ambiente de

desenvolvimento muito próprio e essencialmente gráfico.

No site, existem também alguns objectos flash, não desenvolvidos por mim, mas tratados

de forma conveniente para que sejam apresentados da melhor forma (e.g. o relógio foi todo

ele “reconstruído” e adicionada a função da data através de algum código ActionScript, em

tudo parecido com a manipulação de datas que também fiz em JavaScript).

4.5. Tratamento das imagens

O tratamento das imagens foi realizado tanto em photoshop como em fireworks, conforme

conveniente. São ferramentas de edição de imagem muito poderosas e que permitem uma

grande liberdade no tratamento de imagem. Todos os gifs e jpgs foram optimizados em

termos de compressão para que demorem o mínimo tempo a carregar.

O gif animado do aerogerador que existe no menu da Agência Regional de Energia do Vale

do Douro Norte (AREVDN) foi elaborado por mim para poder adquirir alguns

conhecimentos também a este nível.

53


5. Resultados finais e site visto da perspectiva do

utilizador

5.1. O site

Todo o site foi construído tendo em vista uma fácil navegabilidade e leitura dos conteúdos.

Em baixo temos a introdução do site. A versão carregada depende da resolução do monitor.

Os adereços são controlados por uma função javascript criada para o efeito.

Existe sempre à disposição do “cibernauta” um texto com a indicação da localização actual

e páginas relacionadas.

54


Mudando a data para o Inverno, por exemplo, e dentro da época natalícia temos uma

animação flash com neve e adereços a condizer.

A agenda e as notícias são dinâmicas e baseadas na base de dados SQL desenvolvida.

Existe, como já foi dito, um backoffice para a introdução dos dados na base de dados.

Podemos utilizar também o formulário para efectuar uma procura dentro do site e

recorrendo ao motor de busca “google”.

55


Temos também um relógio em flash que aumenta de tamanho quando o rato se encontra em

cima do mesmo.

O menu também feito em javascript, está relacionado com a página onde nos encontramos e

possuí vários efeitos que detectam a posição do rato no ecrã, para além, é claro, dos

respectivos links.

Em baixo do menu temos uma ligação directa para uma vista panorâmica da avenida

Carvalho Araújo.

Incluí também dados sobre a última actualização da página, morada e contactos.

56


No topo da página temos um “slideshow” de fotografias de todos os concelhos associados à

a página abaixo podemos temos um applet em Java que nos permite ver a zona da sede da

AMVDN, nas quais podemos “clicar” para aceder à zona de visualização das fotografias. O

“slideshow” pára quando o rato se encontra em cima.

N

AMVDN em 360º horizontais

57


Na figura seguinte temos a página de sugestões/comentários. As sugestões são guardadas

na base de dados SQL para que depois possam ser lidas por um administrador na zona de

backoffice.

58


Dentro da zona dinâmica do site temos as notícias e a agenda. Toda a informação é retirada

da base de dados. A página cresce consoante o número de notícias ou eventos contidos na

BD. Cada figura que aparece junto de cada notícia está relacionada com o tipo de notícia

em questão.

59


Temos também uma zona com um “álbum fotográfico” da região. Existem duas versões,

uma flash e outra html. O utilizador pode escolher uma das duas. O conteúdo é o mesmo,

apenas muda a forma de apresentação. O flash é carregado em função da resolução do

monitor.

60


Nas páginas de localização temos um applet Java com o planeta terra à noite e um

“hotspot” para nos aproximar-mos do mapa da região. As páginas seguintes, com efeitos

“mouse over”, levam-nos até uma fotografia aérea da cidade de Vila Real com

possibilidade de mexer no zoom e posição dessa mesma fotografia (página realizada em

flash).

61


Existe também uma página onde os utilizadores podem descarregar um wallpaper mensal

com um calendário incluído. Estão disponíveis para o efeito imagens em três resoluções

(800x600, 1024x768, 1280x960).

62


A seguir temos a página de entrada para as descrições dos municípios. O município onde o

rato se encontra aparece com uma cor diferente destacando-se dos restantes. Ao carregar

com o rato somos “transportados” para páginas com maior descrição sobre os concelhos da

AMVDN. Nesta página podemos ver adereços de primavera que aparecem em função da

data do sistema.

63


Na página da Agência Regional de Energia do Vale do Douro Norte (AREVDN) temos um

gif animado que aparece quando se abre o menu e as várias páginas relacionadas com a

agência.

64


5.2. O backoffice

O backoffice tem como finalidade a introdução e edição de dados na base de dados. É uma

ferramenta que possibilita modificar a BD através de uma interface Web. Só estará

disponível para as pessoas que irão poder alterar e actualizar o site. Isto é realizado através

de uma autenticação (login e password) existente para a área de manutenção.

Este, em particular, permite introduzir ou apagar notícias, eventos, e visualizar os

comentários ao site.

65


6. C++ Aplicação ADMG (Assistência na doença aos

militares da GNR)

Paralelamente ao trabalho directamente relacionado com o projecto, criei uma aplicação em

Borland C++ para processamento e envio por email de facturação de clínicas médicas ou

médicos particulares que possuem acordos com a ADMG.

O objectivo principal desta aplicação é criar um ficheiro de texto com todos os detalhes da

facturação mensal de um determinado médico que tenha acordo com a ADMG. Este

ficheiro obedece, necessariamente, a determinadas regras para que possa ser posteriormente

introduzido na aplicação informática da ADMG. Essas regras, resumidamente, são:

tamanhos fixos para os campos em questão, alfanuméricos ou numéricos, contagens de

consultas, soma de valores das consultas, a própria formatação final do ficheiro, etc.

Esta aplicação assenta numa base de dados em disco paradox. Os dados são introduzidos

nas várias textbox e editbox e automaticamente entram na base de dados. As tabelas (duas,

uma para os beneficiários e outra para os detalhes das consultas) foram criadas na aplicação

Database Desktop também da Borland mais uma vez com base nos requisitos pedidos pela

secção de informática da ADMG.

Há um botão para apagar toda a base de dados e começar um novo mês.

66


Este botão pergunta ao utilizador se quer apagar todos os registo e começar a introdução de

novos valores para o mês seguinte.

Em caso afirmativo, são abertas as tabelas para acesso e de seguida executado o

procedimento EmptyTable() para cada uma delas.

O botão Actualizar Valores é talvez o que realiza mais “trabalho”, uma vez que percorre

toda a base de dados e preenche um Memo com os valores já certos em termos de dígitos e

posicionamento dentro da estrutura pedida.

À medida que vai percorrendo a base de dados, é processada cada entrada da tabela de

beneficiários e dentro de cada entrada destas são processadas todas as suas consultas

(tabela detalhes) (muito semelhante a um ciclo for dentro de outro).

O texto resultante (Memo1) é depois guardado num ficheiro de texto com um nome que

depende do número de beneficiário do médico ou clínica e da filial em questão.

Para o envio do ficheiro final por email utilizei um componente do Borland C++ (criado

pela da NetMasters) chamado NMSMTP. Preenchendo as várias propriedades deste objecto

com os dados pretendidos é possível enviar emails por SMTP, incluindo anexos.

Esta aplicação levou bastante tempo a ser finalizada mas enriqueceu (e muito!) os meus

conhecimentos de C++. Valeu a pena.

67


6.1. Resultados finais da aplicação ADMG

A interface com o utilizador desta aplicação consiste em vários “forms” com os vários

campos que interagem com a base de dados criada para gravar os dados sobre as várias

consultas efectuadas.

Em baixo podemos ver o ecrã principal da aplicação...

Cada recibo (em cima, do lado direito) encontra-se relacionado com as várias consultas que

podem ser realizadas a um determinado paciente (em baixo, lado direito).

68


Do lado esquerdo do ecrã podemos ver e introduzir os detalhes relativos à factura mensal

que irá conter o resumo de todos os recibos passados durante o mês em questão.

Para passar à fase seguinte, que diz respeito ao processamento de todos os dados e à

criação de um ficheiro TXT com parâmetros bem definidos, é necessário pressionar o botão

“Actualizar Valores” e de seguida o botão”Ver/Enviar/Guardar”.

Aqui podemos ver o ficheiro construído com base nos valores introduzidos na BD. Para

além disso, em baixo temos dois botões que permitem guardar o ficheiro ou enviá-lo por

email.

69


A janela aberta após carregar no botão “Email” contém todos os dados necessários para o

envio do email. Para tal é necessário estar ligado à Internet, preencher os campos

correctamente, carregar no botão “Ligar/Desligar” (realiza uma ligação SMTP via porta 25

com o servidor de email do ISP ao qual estamos ligados) e finalmente carregar no botão

“Enviar email” para, como o próprio nome indica, enviar o email. O ficheiro anexado por

defeito é o ficheiro com que estivemos a trabalhar.

70


7. Conclusão

Este trabalho permitiu-me adquirir fortes e sólidos conhecimentos ao nível das tecnologias

relacionadas com a Internet e de desenvolvimento de software (C++).

O futuro passa pela Internet e torna-se cada vez mais necessário haver pessoas capazes de

desenvolver para a Internet.

Este desenvolvimento passa pela utilização e optimização das tecnologias disponíveis em

função do objectivo final de cada projecto.

Todo o site, como quase todos os sites, passou por várias versões, trabalhosas, mas

necessárias para obter o resultado final pretendido.

O programa para o envio de facturação à ADMG que desenvolvi em C++ também teve

alguns entraves porque grande parte do trabalho foi também de estudo e adaptação a

algumas particularidades do software da Borland. Depois de algumas dificuldades iniciais

tudo correu da melhor forma.

A linguagem C já cá está há bem mais tempo, mas nem por isso se encontra “fora de

moda”. Pelo contrário “está de boa saúde e recomenda-se”. Na minha opinião, JavaScript e

C serão aquelas linguagens que resistirão à passagem do tempo. A ver vamos.

71


8. Bibliografia

Internet

Danny Goodman, JavaScript Bible, Hungry Minds

O´Reilly HTML Reference (Dreamweaver)

O´Reilly JavaScript Reference (Dreamweaver)

O´Reilly CSS Reference (Dreamweaver)

O´Reilly SQL Reference (Dreamweaver)

Wrox ASP 3.0 Reference

72

Carlos Abel Carvalho Pereira - paginas.fe.up.ptee97112/relatorio_final.pdf · Licenciatura em...

Documents

Transcript of Carlos Abel Carvalho Pereira - paginas.fe.up.ptee97112/relatorio_final.pdf · Licenciatura em...