DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET...

58
0 UNIVERSIDADE TUIUTI DO PARANÁ Paulo Gustavo Marquetti DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET PARA O GERDS CURITIBA 2004

Transcript of DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET...

Page 1: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

0

D

UNIVERSIDADE TUIUTI DO PARANAacute

ESENN

Paulo Gustavo Marquetti

VOLVIMENTO DE UM SITE DINAcircMICO

A INTERNET PARA O GERDS

CURITIBA 2004

1

PAULO GUSTAVO MARQUETTI

DESENVOLVIMENTO DE UM SITE DINAcircMICO NA INTERNET PARA O GERDS

Monografia apresentada como requisitoparcial a obtenccedilatildeo do tiacutetulo deespecialista em Desenvolvimento Web daFaculdade de Ciecircncias Exatas e deTecnologia da Universidade Tuiuti doPranaacute

Orientador Prof Roberto Neacuteia Amaral

CURITIBA

2004

2

SUMAacuteRIO

1 INTRODUCcedilAtildeO 6 2 TECNOLOGIAS UTILIZADAS8

21 LINGUAGEM8 211 HTML - HyperText Markup Language8 212 PHP - Personal Home Page 12 213 Javascript16

22 PROGRAMAS 17 221 Fireworks 17 222 Dreamweaver17

23 BANCO DE DADOS 18 231 MySQL18

3 DESIGN DO SITE 20 31 DEFINICcedilAtildeO DAS CORES 20

311 A Teoria das Cores 20 312 O Disco Cromaacutetico20 313 Cores Anaacutelogas 21 314 Cores Complementares 21 315 Cores X Idade22 316 Cores utilizadas no Site 22

32 PRINCIacutePIOS DO DESIGN 22 321 Proximidade22 322 Alinhamento22 323 Repeticcedilatildeo23 324 Contraste 23

33 FRAMES 25 331 Cabeccedilalho25 332 Menu25 333 Principal 26 334 Login 26 335 Rodapeacute 26

34 PAacuteGINAS VISIacuteVEIS 27 341 Home 27 342 Cadastro de Pesquisas28 343 Alteraccedilatildeo de Pesquisas 29 344 Cadastro de Artigos 30 345 Alteraccedilatildeo de Artigos31 346 Cadastro de Notiacutecias 32 347 Alteraccedilatildeo de Notiacutecias33 348 Objetivos34 349 Estatuto35 3410 Participantes 36 3411 Colaboradores 37 3412 Visualizar Pesquisas38 3413 Visualizar Artigo 39

3

3414 Visualizar Notiacutecia 40 3415 Mural41 3416 Exclusatildeo do Mural 42 3417 Administraccedilatildeo 43 3418 Cadastro de Usuaacuterios 44 3419 Alteraccedilatildeo de Usuaacuterio 45

35 PAacuteGINAS NAtildeO VISIacuteVEIS 47 351 Conexatildeophp47 352 deleta_artigophp 47 353 deleta_muralphp 47 354 deleta_noticiaphp47 355 deleta_pesquisaphp47 356 deleta_usuaacuteriophp 47 357 grava_alteracaoartigophp 47 358 grava_alteracaonoticiaphp48 359 grava_alteracaopesquisaphp48 3510 grava_alteracaousuariophp 48 3511 grava_artigophp 48 3512 grava_notiacuteciaphp 48 3513 grava_pesquisaphp48 3514 grava_muralphp 48 3515 grava_usuaacuteriophp 48 3516 loginphp 48

4 COacuteDIGO FONTE 49 5 CONCLUSAtildeO 50 REFEREcircNCIAS52 ANEXOS 54

4

LISTA DE FIGURAS FIGURA 1 - DISCO CROMAacuteTICO 21 FIGURA 2 - REPRESENTACcedilAtildeO DOS FRAMES 25 FIGURA 3 - HOME 27 FIGURA 4 - CADASTRO DE PESQUISAS 28 FIGURA 5 - ALTERACcedilAtildeO DE PESQUISAS 29 FIGURA 6 - CADASTRO DE ARTIGOS 30 FIGURA 7 - ALTERACcedilAtildeO ARTIGOS 31 FIGURA 8 - CADASTRO DE NOTIacuteCIAS 32 FIGURA 9 - ALTERACcedilAtildeO DE NOTIacuteCIAS 33 FIGURA 10 - OBJETIVOS 34 FIGURA 11 - ESTATUTO 35 FIGURA 12 - PARTICIPANTES 36 FIGURA 13 - COLABORADORES 37 FIGURA 14 - VISUALIZAR PESQUISAS 38 FIGURA 15 - DETALHE DA PESQUISA 38 FIGURA 16 - VISUALIZAR ARTIGO 39 FIGURA 17 - DETALHE DO ARTIGO 39 FIGURA 18 - VISUALIZAR NOTIacuteCIA 40 FIGURA 19 - DETALHE DA NOTIacuteCIA 40 FIGURA 20 - MURAL 41 FIGURA 21 - EXCLUSAtildeO DO MURAL 42 FIGURA 22 - ADMINISTRACcedilAtildeO 43 FIGURA 23 - CADASTRO DE USUAacuteRIOS 44 FIGURA 24 - PESQUISA USUAacuteRIOS 45 FIGURA 25 - ALTERACcedilAtildeO DE USUAacuteRIOS 46

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 2: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

1

PAULO GUSTAVO MARQUETTI

DESENVOLVIMENTO DE UM SITE DINAcircMICO NA INTERNET PARA O GERDS

Monografia apresentada como requisitoparcial a obtenccedilatildeo do tiacutetulo deespecialista em Desenvolvimento Web daFaculdade de Ciecircncias Exatas e deTecnologia da Universidade Tuiuti doPranaacute

Orientador Prof Roberto Neacuteia Amaral

CURITIBA

2004

2

SUMAacuteRIO

1 INTRODUCcedilAtildeO 6 2 TECNOLOGIAS UTILIZADAS8

21 LINGUAGEM8 211 HTML - HyperText Markup Language8 212 PHP - Personal Home Page 12 213 Javascript16

22 PROGRAMAS 17 221 Fireworks 17 222 Dreamweaver17

23 BANCO DE DADOS 18 231 MySQL18

3 DESIGN DO SITE 20 31 DEFINICcedilAtildeO DAS CORES 20

311 A Teoria das Cores 20 312 O Disco Cromaacutetico20 313 Cores Anaacutelogas 21 314 Cores Complementares 21 315 Cores X Idade22 316 Cores utilizadas no Site 22

32 PRINCIacutePIOS DO DESIGN 22 321 Proximidade22 322 Alinhamento22 323 Repeticcedilatildeo23 324 Contraste 23

33 FRAMES 25 331 Cabeccedilalho25 332 Menu25 333 Principal 26 334 Login 26 335 Rodapeacute 26

34 PAacuteGINAS VISIacuteVEIS 27 341 Home 27 342 Cadastro de Pesquisas28 343 Alteraccedilatildeo de Pesquisas 29 344 Cadastro de Artigos 30 345 Alteraccedilatildeo de Artigos31 346 Cadastro de Notiacutecias 32 347 Alteraccedilatildeo de Notiacutecias33 348 Objetivos34 349 Estatuto35 3410 Participantes 36 3411 Colaboradores 37 3412 Visualizar Pesquisas38 3413 Visualizar Artigo 39

3

3414 Visualizar Notiacutecia 40 3415 Mural41 3416 Exclusatildeo do Mural 42 3417 Administraccedilatildeo 43 3418 Cadastro de Usuaacuterios 44 3419 Alteraccedilatildeo de Usuaacuterio 45

35 PAacuteGINAS NAtildeO VISIacuteVEIS 47 351 Conexatildeophp47 352 deleta_artigophp 47 353 deleta_muralphp 47 354 deleta_noticiaphp47 355 deleta_pesquisaphp47 356 deleta_usuaacuteriophp 47 357 grava_alteracaoartigophp 47 358 grava_alteracaonoticiaphp48 359 grava_alteracaopesquisaphp48 3510 grava_alteracaousuariophp 48 3511 grava_artigophp 48 3512 grava_notiacuteciaphp 48 3513 grava_pesquisaphp48 3514 grava_muralphp 48 3515 grava_usuaacuteriophp 48 3516 loginphp 48

4 COacuteDIGO FONTE 49 5 CONCLUSAtildeO 50 REFEREcircNCIAS52 ANEXOS 54

4

LISTA DE FIGURAS FIGURA 1 - DISCO CROMAacuteTICO 21 FIGURA 2 - REPRESENTACcedilAtildeO DOS FRAMES 25 FIGURA 3 - HOME 27 FIGURA 4 - CADASTRO DE PESQUISAS 28 FIGURA 5 - ALTERACcedilAtildeO DE PESQUISAS 29 FIGURA 6 - CADASTRO DE ARTIGOS 30 FIGURA 7 - ALTERACcedilAtildeO ARTIGOS 31 FIGURA 8 - CADASTRO DE NOTIacuteCIAS 32 FIGURA 9 - ALTERACcedilAtildeO DE NOTIacuteCIAS 33 FIGURA 10 - OBJETIVOS 34 FIGURA 11 - ESTATUTO 35 FIGURA 12 - PARTICIPANTES 36 FIGURA 13 - COLABORADORES 37 FIGURA 14 - VISUALIZAR PESQUISAS 38 FIGURA 15 - DETALHE DA PESQUISA 38 FIGURA 16 - VISUALIZAR ARTIGO 39 FIGURA 17 - DETALHE DO ARTIGO 39 FIGURA 18 - VISUALIZAR NOTIacuteCIA 40 FIGURA 19 - DETALHE DA NOTIacuteCIA 40 FIGURA 20 - MURAL 41 FIGURA 21 - EXCLUSAtildeO DO MURAL 42 FIGURA 22 - ADMINISTRACcedilAtildeO 43 FIGURA 23 - CADASTRO DE USUAacuteRIOS 44 FIGURA 24 - PESQUISA USUAacuteRIOS 45 FIGURA 25 - ALTERACcedilAtildeO DE USUAacuteRIOS 46

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 3: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

2

SUMAacuteRIO

1 INTRODUCcedilAtildeO 6 2 TECNOLOGIAS UTILIZADAS8

21 LINGUAGEM8 211 HTML - HyperText Markup Language8 212 PHP - Personal Home Page 12 213 Javascript16

22 PROGRAMAS 17 221 Fireworks 17 222 Dreamweaver17

23 BANCO DE DADOS 18 231 MySQL18

3 DESIGN DO SITE 20 31 DEFINICcedilAtildeO DAS CORES 20

311 A Teoria das Cores 20 312 O Disco Cromaacutetico20 313 Cores Anaacutelogas 21 314 Cores Complementares 21 315 Cores X Idade22 316 Cores utilizadas no Site 22

32 PRINCIacutePIOS DO DESIGN 22 321 Proximidade22 322 Alinhamento22 323 Repeticcedilatildeo23 324 Contraste 23

33 FRAMES 25 331 Cabeccedilalho25 332 Menu25 333 Principal 26 334 Login 26 335 Rodapeacute 26

34 PAacuteGINAS VISIacuteVEIS 27 341 Home 27 342 Cadastro de Pesquisas28 343 Alteraccedilatildeo de Pesquisas 29 344 Cadastro de Artigos 30 345 Alteraccedilatildeo de Artigos31 346 Cadastro de Notiacutecias 32 347 Alteraccedilatildeo de Notiacutecias33 348 Objetivos34 349 Estatuto35 3410 Participantes 36 3411 Colaboradores 37 3412 Visualizar Pesquisas38 3413 Visualizar Artigo 39

3

3414 Visualizar Notiacutecia 40 3415 Mural41 3416 Exclusatildeo do Mural 42 3417 Administraccedilatildeo 43 3418 Cadastro de Usuaacuterios 44 3419 Alteraccedilatildeo de Usuaacuterio 45

35 PAacuteGINAS NAtildeO VISIacuteVEIS 47 351 Conexatildeophp47 352 deleta_artigophp 47 353 deleta_muralphp 47 354 deleta_noticiaphp47 355 deleta_pesquisaphp47 356 deleta_usuaacuteriophp 47 357 grava_alteracaoartigophp 47 358 grava_alteracaonoticiaphp48 359 grava_alteracaopesquisaphp48 3510 grava_alteracaousuariophp 48 3511 grava_artigophp 48 3512 grava_notiacuteciaphp 48 3513 grava_pesquisaphp48 3514 grava_muralphp 48 3515 grava_usuaacuteriophp 48 3516 loginphp 48

4 COacuteDIGO FONTE 49 5 CONCLUSAtildeO 50 REFEREcircNCIAS52 ANEXOS 54

4

LISTA DE FIGURAS FIGURA 1 - DISCO CROMAacuteTICO 21 FIGURA 2 - REPRESENTACcedilAtildeO DOS FRAMES 25 FIGURA 3 - HOME 27 FIGURA 4 - CADASTRO DE PESQUISAS 28 FIGURA 5 - ALTERACcedilAtildeO DE PESQUISAS 29 FIGURA 6 - CADASTRO DE ARTIGOS 30 FIGURA 7 - ALTERACcedilAtildeO ARTIGOS 31 FIGURA 8 - CADASTRO DE NOTIacuteCIAS 32 FIGURA 9 - ALTERACcedilAtildeO DE NOTIacuteCIAS 33 FIGURA 10 - OBJETIVOS 34 FIGURA 11 - ESTATUTO 35 FIGURA 12 - PARTICIPANTES 36 FIGURA 13 - COLABORADORES 37 FIGURA 14 - VISUALIZAR PESQUISAS 38 FIGURA 15 - DETALHE DA PESQUISA 38 FIGURA 16 - VISUALIZAR ARTIGO 39 FIGURA 17 - DETALHE DO ARTIGO 39 FIGURA 18 - VISUALIZAR NOTIacuteCIA 40 FIGURA 19 - DETALHE DA NOTIacuteCIA 40 FIGURA 20 - MURAL 41 FIGURA 21 - EXCLUSAtildeO DO MURAL 42 FIGURA 22 - ADMINISTRACcedilAtildeO 43 FIGURA 23 - CADASTRO DE USUAacuteRIOS 44 FIGURA 24 - PESQUISA USUAacuteRIOS 45 FIGURA 25 - ALTERACcedilAtildeO DE USUAacuteRIOS 46

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 4: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

3

3414 Visualizar Notiacutecia 40 3415 Mural41 3416 Exclusatildeo do Mural 42 3417 Administraccedilatildeo 43 3418 Cadastro de Usuaacuterios 44 3419 Alteraccedilatildeo de Usuaacuterio 45

35 PAacuteGINAS NAtildeO VISIacuteVEIS 47 351 Conexatildeophp47 352 deleta_artigophp 47 353 deleta_muralphp 47 354 deleta_noticiaphp47 355 deleta_pesquisaphp47 356 deleta_usuaacuteriophp 47 357 grava_alteracaoartigophp 47 358 grava_alteracaonoticiaphp48 359 grava_alteracaopesquisaphp48 3510 grava_alteracaousuariophp 48 3511 grava_artigophp 48 3512 grava_notiacuteciaphp 48 3513 grava_pesquisaphp48 3514 grava_muralphp 48 3515 grava_usuaacuteriophp 48 3516 loginphp 48

4 COacuteDIGO FONTE 49 5 CONCLUSAtildeO 50 REFEREcircNCIAS52 ANEXOS 54

4

LISTA DE FIGURAS FIGURA 1 - DISCO CROMAacuteTICO 21 FIGURA 2 - REPRESENTACcedilAtildeO DOS FRAMES 25 FIGURA 3 - HOME 27 FIGURA 4 - CADASTRO DE PESQUISAS 28 FIGURA 5 - ALTERACcedilAtildeO DE PESQUISAS 29 FIGURA 6 - CADASTRO DE ARTIGOS 30 FIGURA 7 - ALTERACcedilAtildeO ARTIGOS 31 FIGURA 8 - CADASTRO DE NOTIacuteCIAS 32 FIGURA 9 - ALTERACcedilAtildeO DE NOTIacuteCIAS 33 FIGURA 10 - OBJETIVOS 34 FIGURA 11 - ESTATUTO 35 FIGURA 12 - PARTICIPANTES 36 FIGURA 13 - COLABORADORES 37 FIGURA 14 - VISUALIZAR PESQUISAS 38 FIGURA 15 - DETALHE DA PESQUISA 38 FIGURA 16 - VISUALIZAR ARTIGO 39 FIGURA 17 - DETALHE DO ARTIGO 39 FIGURA 18 - VISUALIZAR NOTIacuteCIA 40 FIGURA 19 - DETALHE DA NOTIacuteCIA 40 FIGURA 20 - MURAL 41 FIGURA 21 - EXCLUSAtildeO DO MURAL 42 FIGURA 22 - ADMINISTRACcedilAtildeO 43 FIGURA 23 - CADASTRO DE USUAacuteRIOS 44 FIGURA 24 - PESQUISA USUAacuteRIOS 45 FIGURA 25 - ALTERACcedilAtildeO DE USUAacuteRIOS 46

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 5: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

4

LISTA DE FIGURAS FIGURA 1 - DISCO CROMAacuteTICO 21 FIGURA 2 - REPRESENTACcedilAtildeO DOS FRAMES 25 FIGURA 3 - HOME 27 FIGURA 4 - CADASTRO DE PESQUISAS 28 FIGURA 5 - ALTERACcedilAtildeO DE PESQUISAS 29 FIGURA 6 - CADASTRO DE ARTIGOS 30 FIGURA 7 - ALTERACcedilAtildeO ARTIGOS 31 FIGURA 8 - CADASTRO DE NOTIacuteCIAS 32 FIGURA 9 - ALTERACcedilAtildeO DE NOTIacuteCIAS 33 FIGURA 10 - OBJETIVOS 34 FIGURA 11 - ESTATUTO 35 FIGURA 12 - PARTICIPANTES 36 FIGURA 13 - COLABORADORES 37 FIGURA 14 - VISUALIZAR PESQUISAS 38 FIGURA 15 - DETALHE DA PESQUISA 38 FIGURA 16 - VISUALIZAR ARTIGO 39 FIGURA 17 - DETALHE DO ARTIGO 39 FIGURA 18 - VISUALIZAR NOTIacuteCIA 40 FIGURA 19 - DETALHE DA NOTIacuteCIA 40 FIGURA 20 - MURAL 41 FIGURA 21 - EXCLUSAtildeO DO MURAL 42 FIGURA 22 - ADMINISTRACcedilAtildeO 43 FIGURA 23 - CADASTRO DE USUAacuteRIOS 44 FIGURA 24 - PESQUISA USUAacuteRIOS 45 FIGURA 25 - ALTERACcedilAtildeO DE USUAacuteRIOS 46

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 6: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

5

Resumo O presente trabalho aborda a anaacutelise e o desenvolvimento de um site

dinacircmico na Internet tendo como contratante o Gerds (grupo de estudos

interdisciplinar em redes de computadores e sistemas distribuiacutedos) da Universidade

Tuiuti do Paranaacute que tem por objetivo divulgar as pesquisas realizadas por alunos

professores e colaboradores participantes do grupo em questatildeo Este foi elaborado

a partir de teacutecnicas de desenvolvimento de sites e entrevistas feitas diretamente com

o contratante

Palavras-chave Desenvolvimento de site site dinacircmico PHP MySQL HTML

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 7: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

6

1 INTRODUCcedilAtildeO

Estima-se que hoje existam mais de 250 milhotildees de pessoas que utilizam a

Internet natildeo soacute como ferramenta de trabalho mas tambeacutem como diversatildeo e

pesquisa Essas pessoas esperam obter da plataforma Web um material de alta

qualidade (incluindo imagens animaccedilatildeo som e viacutedeo) e que esse material esteja

apresentado de forma agradaacutevel e funcionando de forma raacutepida e eficiente A

especializaccedilatildeo em Desenvolvimento Web ofereceu a preparaccedilatildeo para o trabalho no

desenvolvimento conhecimento e utilizaccedilatildeo das tecnologias multimiacutedia e Internet e

dos sistemas e aplicaccedilotildees que fazem uso dessas tecnologias

O desenvolvimento do site do Gerds (grupo de estudos interdisciplinar em

redes de computadores e sistemas distribuiacutedos) da UTP tem por objetivo divulgar o

trabalho realizado por alunos professores colaboradores e participantes dos cursos

de Engenharia da Computaccedilatildeo Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia

da Computaccedilatildeo e os cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes

de Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

universidade e a comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados

ou por transferecircncia de tecnologias inserindo professores e alunos num contexto

soacutecio-econocircmico mais amplo do que a realidade acadecircmica Essas informaccedilotildees satildeo

oferecidas pelo site atraveacutes de pesquisas artigos e notiacutecias periodicamente

atualizadas aleacutem de permitir que se desenvolva uma comunicaccedilatildeo bilateral entre os

interessados atraveacutes do cadastramento dessas pessoas no site bem como a

possibilidade de se deixar mensagens em um mural destinado a esse fim Sendo o contratante do serviccedilo o Gerds ficou definido como pessoa

responsaacutevel pela definiccedilatildeo das necessidades do site o professor Roberto Amaral

Atraveacutes de teacutecnicas de levantamento de dados (ver anexo I) foram obtidos os dados

baacutesicos necessaacuterios para o desenvolvimento do site A presente monografia estaacute estruturada em 5 capiacutetulos cujo conteuacutedo eacute

apresentado sucintamente a seguir

O Capiacutetulo 2 apresenta uma introduccedilatildeo aos conceitos das tecnologias

utilizadas enfocando sua histoacuteria e utilizaccedilatildeo na atual estrutura da Internet

O Capiacutetulo 3 apresenta a descriccedilatildeo de como foi realizado o design do site e a

funcionalidade das paacuteginas

O Capiacutetulo 4 apresenta a referecircncia ao coacutedigo fonte do trabalho

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 8: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

7

O Capiacutetulo 5 apresenta a conclusatildeo do trabalho

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 9: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

8

2 TECNOLOGIAS UTILIZADAS

De acordo com os estudados realizados as seguintes tecnologias foram

utilizadas para o desenvolvimento do site do Gerds

bull Linguagem o HTML ndash Utilizada para fazer o corpo principal das paacuteginas Adotado

por ser gratuito e amplamente utilizado na Internet

o PHP ndash Apesar do conteuacutedo apresentado nas aulas ter sido baseado

em ASP um novo estudo em linguagem PHP foi realizado em

classe e extra classe pois foi utilizado um servidor com sistema

operacional Linux com o servidor de banco de dados Apache que

interpreta somente a linguagem PHP Foi utilizado para tornar as

paacuteginas dinacircmicas e realizar a comunicaccedilatildeo com o banco de

dados

o JavaScript ndash Utilizado para criar funccedilotildees que satildeo executadas na

maacutequina do usuaacuterio Adotado por ser gratuito e amplamente

utilizado na Internet

bull Programas o Fireworks ndash Utilizado para fazer as imagens e construir a parte

visual do site Foi adotado por ser uma ferramenta que permite

trabalhar com layouts de sites de forma raacutepida e faacutecil e ter ampla

compatibilidade com o Dreamweaver

o Dreamweaver ndash Utilizado para a construccedilatildeo do site e a

programaccedilatildeo Adotado por ser uma ferramenta completa e que

permite desenvolver e administrar o site de forma raacutepida e eficiente

bull Banco de Dados o MySQL ndash Utilizado para armazenar os dados do site Adotado por

ser gratuito e amplamente utilizado em aplicaccedilotildees Web

21 Linguagem

211 HTML - HyperText Markup Language

No nuacutecleo de toda paacutegina da Web encontra-se a HyperText Markup

Language uma linguagem de diagramaccedilatildeo baseada em marcadores ou tags

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 10: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

9

(marcas utilizadas pela linguagem html que permitem ao browser formatar o texto

entre as tags de acordo com cada tag especiacutefica) como eacute mais comumente

conhecido A HTML eacute uma linguagem simples baseada em texto e que pode ser

visualizada em qualquer plataforma tanto em navegadores somente texto (como o

Lynx) como em navegadores mais avanccedilados (como Netscape Navigator e Internet

Explorer)

A HTML eacute na verdade apenas texto com coacutedigos de formataccedilatildeo que

especificam diferentes fontes e estilos ou ateacute mesmo outras funccedilotildees mais

avanccediladas Ela eacute muito semelhante aos antigos editores de texto que exigiam a

inserccedilatildeo de tags para especificar tipos em itaacutelico negrito ou sublinhado

O HTML nasceu em 1990 no CERN (European Council for Nuclear Research)

na Suiacuteccedila Seu criador o inglecircs Tim Berners-Lee a concebeu unicamente como uma

linguagem que serviria para interligar computadores do laboratoacuterio e outras

instituiccedilotildees de pesquisa e exibir documentos cientiacuteficos de forma simples e faacutecil de

acessar (STANEK 1996)

Em 1992 com a liberaccedilatildeo da biblioteca de desenvolvimento para WWW

(World Wide Web ou Rede de Alcance Mundial) aconteceu uma grande evoluccedilatildeo o

que foi fundamental para expansatildeo do HTML Essa biblioteca deu origem agrave

construccedilatildeo de vaacuterios browsers e servidores tornando a Web uma ferramenta viaacutevel

O MOSAIC desenvolvido por Marc Andreeson entatildeo do NCSA foi o primeiro

browser multi-plataforma que explorava completamente a capacidade de hipermiacutedia

da Web e que iniciou o crescimento explosivo da mesma Em 1993 o HTML tornou-

se disponiacutevel a milhotildees de usuaacuterios com a liberaccedilatildeo das versotildees para Mac e

Windows (STANEK 1996)

Quanto as suas especificaccedilotildees o HTML percorreu um caminho longo ateacute

chegar agrave sua atual especificaccedilatildeo Atualmente 4 especificaccedilotildees do HTML estatildeo

definidas Cada nova especificaccedilatildeo eacute compatiacutevel com as especificaccedilotildees anteriores e

incluem diversas melhorias A primeira especificaccedilatildeo do HTML que eacute a versatildeo

original foi a HTML 10 Tim Berners-Lee juntamente com David Ragget a

publicaram em 1993 Devido a sua capacidade limitada a versatildeo 10 permitia o

desenvolvimento de documentos baacutesicos Incluiacutea muacuteltiplos niacuteveis de cabeccedilalhos

exibiccedilatildeo de paraacutegrafos navegaccedilatildeo por referecircncias a hipertextos (composiccedilatildeo de

elementos de informaccedilatildeo paraacutegrafos paacuteginas imagens sequumlecircncias musicais etc e

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 11: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

10

ligaccedilotildees entre esses elementos indicando a passagem de um a outro) e

formataccedilotildees especiais para itens de uma lista (STANEK 1996)

A definiccedilatildeo do HTML 20 concluiacuteda em 1995 foi a primeira versatildeo

recomendada pelo IETF ndash Internet Engineering Task Force e se tornou um padratildeo

da Internet Ela oferece um melhor controle sobre os layouts dos textos

apresentados nas paacuteginas aleacutem da inclusatildeo de imagens e formulaacuterios que permite

aos desenvolvedores conseguir a participaccedilatildeo dos usuaacuterios de forma faacutecil e raacutepida

aleacutem de explorar as capacidades multimiacutedias da Web (STANEK 1996)

O HTML 30 de 1996 permite novos formatos de textos Uma de suas

caracteriacutesticas mais importantes eacute a definiccedilatildeo dos tags necessaacuterios para a criaccedilatildeo

de tabelas que permitem que os desenvolvedores apresentem as informaccedilotildees

desejadas formatadas em linhas e colunas (STANEK 1996) Durante o

desenvolvimento do HTML 30 com a rapidez da expansatildeo da Web os esforccedilos de

padronizaccedilatildeo natildeo puderam acompanhar as tendecircncias de desenvolvimento que

exigiam maiores recursos de apresentaccedilatildeo graacutefica do que o HTML 20 podia

fornecer Por isso o HTML 30 acabou natildeo sendo aprovado e em 1997 aprovou-se

uma recomendaccedilatildeo chamada HTML 32 que introduzia recursos de apresentaccedilatildeo

graacutefica no HTML (INTRODUCING 2004)

O HTML 40 de 1998 eacute uma extensatildeo do HTML 32 Essa versatildeo oferece

melhorias nos recursos de acessibilidade Quando o HTML eacute usado de forma

estruturada um documento pode se adaptar a diferentes browsers acomodar

diferentes fontes cores especiais sintetizadores de voz e dispositivos Braille Essa

adaptabilidade permite a pessoas com defeitos fiacutesicos trabalhar de forma facilitada

na Web Essa versatildeo adotou tambeacutem o Universal Character Set que usa o suporte

a convenccedilotildees internacionais permitindo a utilizaccedilatildeo de quase todas as linguagens

do mundo Outra novidade satildeo os frames (dividem a paacutegina em duas ou mais partes

ndash framesets - e satildeo geralmente usados para que um frameset permaneccedila enquanto

outros mudem baseados nos links que o usuaacuterio seleciona) Vaacuterios elementos do

HTML 32 foram considerados deprecados (candidatos a se tornarem obsoletos)

pelo HTML 40 forccedilando uma ecircnfase na separaccedilatildeo da estrutura do documento e na

apresentaccedilatildeo dos elementos que permitem definir cores fontes alinhamento

imagens de fundo e outras caracteriacutesticas da apresentaccedilatildeo da paacutegina que

dependem da plataforma onde a informaccedilatildeo eacute visualizada Essa separaccedilatildeo pocircde ser

realizada graccedilas a CSS (Cascading Style Sheets) que permite a criaccedilatildeo de folhas

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 12: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

11

de estilo aplicaacuteveis a vaacuterias paacuteginas de um site Se um dispositivo limitado natildeo

consegue exibir os estilos definidos no CSS ele pelo menos consegue entender a

estrutura do texto e imagens de forma que mesmo usuaacuterios com menos recursos

podem ter acesso agrave informaccedilatildeo contida na paacutegina (HTML 2004)

2111 Forma Baacutesica de um Documento HTML

Como jaacute foi citado anteriormente o HTML eacute na verdade apenas texto com

coacutedigos de formataccedilatildeo que especificam diferentes fontes e estilos Com a inserccedilatildeo

das tags o texto que estaacute compreendido entre essas marcas assume

caracteriacutesticas diferentes de acordo com cada uma delas

Cada tag informa ao browser como ele deveraacute formatar o texto que deve

estar dentro dos sinais de menor que (lt) e maior que (gt) Por exemplo ltHTMLgt

ltBODYgt

Os tags podem ser uacutenicos ou duplos com iniacutecio e fim Se forem duplos

existiraacute um tag informando que aquela formataccedilatildeo estaacute sendo encerrada Por

exemplo um tag simples pode ser representado por rdquoltbrgtrdquo que indica uma quebra

de linha Jaacute um tag duplo pode ser ltbgtltbgt indicando que o que estiver entre

esses campos deveraacute ser apresentado em negrito

A estrutura de um documento HTML apresenta os seguintes componentes

ltHTMLgt

ltHEADgtltTITLEgtTiacutetulo do DocumentoltTITLEgtltHEADgt

ltBODYgt

texto imagem links ltBODYgt

ltHTMLgt

Todo documento HTML deve estar entre os tags ltHTMLgt e ltHTMLgt A partir

daiacute esses documentos satildeo divididos em duas seccedilotildees principais a seccedilatildeo HEAD e a

seccedilatildeo BODY A HEAD conteacutem informaccedilotildees sobre o documento O tag ltTITLEgt por

exemplo define um tiacutetulo que eacute mostrado no alto da janela do browser Tudo que

estiver contido na seccedilatildeo ltBODYgt seraacute mostrado na janela principal do browser

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 13: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

12

Essa seccedilatildeo pode conter cabeccedilalhos paraacutegrafos listas tabelas links para outros

documentos e imagens

212 PHP - Personal Home Page

Como as paacuteginas em HTML satildeo basicamente apresentaccedilotildees de texto e

imagens com o passar do tempo surgiu a necessidade de uma interaccedilatildeo maior com

o usuaacuterio permitindo que se tivesse um histoacuterico desse usuaacuterio aleacutem da

possibilidade de se mostrar informaccedilotildees personalizadas aos mesmos Para esse

propoacutesito umas das linguagens que surgiram e que tinham forte ligaccedilatildeo com o

HTML foi o PHP

O PHP eacute uma linguagem de server-side (as paacuteginas ficam armazenadas e

satildeo executadas em um servidor onde o site estaacute localizado) e open-source (um

programa que tem seu coacutedigo fonte disponiacutevel para que qualquer pessoa que tenha

uma ideacuteia uma sugestatildeo possa ajudar no seu desenvolvimento) para criaccedilatildeo de

paacuteginas dinacircmicas para a Web Uma paacutegina dinacircmica eacute aquela que interage com o

usuaacuterio de forma que cada usuaacuterio ao visitar a paacutegina veraacute informaccedilotildees

personalizadas Os aplicativos dinacircmicos da Web satildeo predominantes nos sites

comerciais(e-commerce ndash sites de venda pela Internet) onde o conteuacutedo

apresentado eacute gerado a partir de informaccedilotildees acessadas de um banco de dados ou

outra fonte externa Sua interface permite que se incluam comandos PHP

diretamente na paacutegina HTML

O PHP sucede de um produto mais antigo chamado PHPFI PHPFI foi

criado por Rasmus Lerdorf em 1994 inicialmente como scripts (arquivos texto com

um conjunto de instruccedilotildees de uma linguagem especiacutefica nos quais estatildeo contidas

todas as instruccedilotildees que dizem o que o programa faraacute) usados para gerar estatiacutesticas

de acesso para seu curriacuteculo on line Ele nomeou esta seacuterie de scripts de ldquoPersonal

Home Page Toolsrdquo a qual adquiriu um relativo ecircxito devido a outras pessoas

pedirem a Rasmus que lhes permitisse utilizar os seus programas nas suas proacuteprias

paacuteginas Web Como mais funcionalidades foram requeridas Rasmus escreveu uma

implementaccedilatildeo em linguagem C muito maior que era capaz de comunicar-se com

uma base de dados e possibilitava a usuaacuterios o desenvolvimento simples de

aplicativos dinacircmicos para Web Devido agrave aceitaccedilatildeo do primeiro PHP e de maneira

adicional o seu criador desenhou um sistema para processar formulaacuterios ao qual

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 14: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

13

deu o nome de FI (Form Interpreter) e o conjunto destas duas ferramentas seria a

primeira versatildeo compacta da linguagem PHPFI Rasmus resolveu distribuir o

coacutedigo fonte do PHPFI para que todos pudessem ver e tambeacutem usaacute-lo bem como

corrigir bugs e melhorar o coacutedigo (HISTOacuteRIA 2004)

O PHPFI usava interpretaccedilotildees automaacuteticas de variaacuteveis vindas de formulaacuterio

(dados passados pelos usuaacuterios) e era embutida diretamente no coacutedigo do HTML

Poreacutem a sua sintaxe era limitada simples e um pouco inconsistente

Em 1997 PHPFI 20 a segunda versatildeo da implementaccedilatildeo em linguagem C

obteve milhares de usuaacuterios ao redor do mundo com um valor estimado de

aproximadamente 50000 domiacutenios respondendo por basicamente 1 dos domiacutenios

da Internet Enquanto isto havia milhares de pessoas contribuindo com pequenos

coacutedigos para o projeto e ainda assim o PHPFI 20 foi oficialmente lanccedilado somente

ao final de 1997 apoacutes perder a maior parte de sua vida em versotildees beta (versotildees de

um produto que satildeo distribuiacutedas para teste dos usuaacuterios antes do lanccedilamento

oficial) O PHPFI 20 foi rapidamente substituiacutedo pelas versotildees iniciais do PHP 30

(HISTOacuteRIA 2004)

O PHP 30 foi a primeira versatildeo que se assemelha ao PHP que eacute utilizado

atualmente Ela foi criada por Andi Gutmans e Zeev Suraski em 1997 e foi

totalmente reescrito apoacutes eles descobrirem que o PHPFI 20 poderia ajudaacute-los a

desenvolver suas proacuteprias aplicaccedilotildees de e-Commerce de um projeto na sua

Universidade No esforccedilo cooperativo e iniciativa de reescrever o PHPFI a partir da

base existente Andi Rasmus e Zeev decidiram unir esforccedilos e anunciar o PHP 30

como uma versatildeo oficial de seu antecessor (o PHPFI 20) (HISTOacuteRIA 2004)

O PHP 30 aleacutem de oferecer aos usuaacuterios finais uma infraestrutura soacutelida

para diversos bancos de dados protocolos e APIs a extensibilidade (possibilidade

de uso para diversos objetivos) do PHP 30 atrai dezenas de novos desenvolvedores

para se juntar e submeter novos moacutedulos Esta eacute a chave do sucesso do PHP 30

Outras caracteriacutesticas chaves introduzidas no PHP 30 foram o suporte agrave sintaxe

para orientaccedilatildeo a objetos e uma sintaxe muito mais poderosa e consistente

O PHP 30 foi oficialmente lanccedilado em Junho de 1998 depois de ter passado

aproximadamente 9 meses em testes puacuteblicos (versotildees beta) Os objetivos do

projeto eram melhorar a performance de aplicaccedilotildees complexas e melhorar a

modularidade do coacutedigo base do PHP

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 15: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

14

O PHP 40 acompanhado com uma seacuterie de novas caracteriacutesticas foi

oficialmente lanccedilada no iniacutecio de 2000 quase dois anos apoacutes o seu antecessor

Aleacutem da melhora na performance esta versatildeo incluiu outras caracteriacutesticas chave

como o suporte para muitos servidores Web sessotildees HTTP buffer de saiacuteda e

maneiras mais seguras de manipular entrada de dados dos usuaacuterios (HISTOacuteRIA

2004)

De acordo com o site oficial do PHP (phpnetusagephp) atualmente

aproximadamente 17 milhotildees de domiacutenios estatildeo usando PHP na Web

2121 PHP - Por que utilizar

A popularidade do PHP continua crescendo rapidamente devido a muitas

vantagens Eacute raacutepido pois devido a estar embutido no coacutedigo HTML o tempo para

processar e carregar uma paacutegina Web eacute curto Eacute graacutetis e faacutecil de usar pois os

coacutedigos PHP satildeo facilmente incluiacutedos no arquivo HTML eacute versaacutetil pois o PHP roda

em uma grande variedade de sistemas operacionais eacute muito seguro pois se o

coacutedigo for escrito corretamente o usuaacuterio natildeo iraacute enxergar o coacutedigo PHP aleacutem de

ser customizaacutevel pois a licenccedila open-source permite aos programadores

modificarem o PHP adicionando ou modificando as caracteriacutesticas necessaacuterias ao

seu proacuteprio desenvolvimento

Devido ao PHP ser executado no servidor ele pode dinamicamente criar o

coacutedigo HTML que iraacute gerar a paacutegina Web permitindo que os usuaacuterios individuais

vejam paacuteginas customizadas Os visitantes da paacutegina Web vecircem a saiacuteda gerada

pelos scripts mas natildeo os scripts propriamente ditos tornando-o muito seguro

O PHP consegue trabalhar com ldquosessotildeesrdquo ou seja para executar

determinadas accedilotildees (fazer um download por exemplo) o usuaacuterio deve estar

identificado no site O PHP permite que se crie uma ldquosessatildeordquo que identifica cada

usuaacuterio no sistema aleacutem de outros dados referentes ao mesmo Se o usuaacuterio tentar

entrar em uma paacutegina especiacutefica primeiramente eacute verificado se existe uma sessatildeo

para o mesmo Se natildeo existir eacute mostrada uma mensagem de acesso proibido Se a

sessatildeo for vaacutelida os outros paracircmetros do usuaacuterio (salvos na sessatildeo) podem ser

verificados e validados caso necessaacuterio

2122 PHP - Como Funciona

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 16: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

15

Segundo Janet Valade (VALADE2004) O coacutedigo PHP eacute embutido no coacutedigo

HTML As tags do HTML satildeo usadas para incluir a linguagem PHP na linguagem

HTML Quando o PHP estaacute instalado o servidor Web eacute configurado para procurar

por coacutedigo PHP embutido em arquivos com extensotildees especiacuteficas (php ou phtml)

Quando o servidor recebe uma requisiccedilatildeo para um arquivo com uma dessas

extensotildees ele envia o coacutedigo HTML como estaacute mas o coacutedigo PHP eacute processado

pelo software antes de ser enviado ao solicitante Quando a linguagem PHP eacute

processada a saiacuteda consiste de coacutedigo HTML Os coacutedigos PHP natildeo satildeo incluiacutedos

no HTML enviado ao browser por isso o coacutedigo PHP eacute seguro e transparente para o

usuaacuterio Quando um browser eacute apontado para um arquivo HTML o servidor envia o

arquivo ao browser O browser processa o arquivo e mostra a paacutegina descrita pelos

tags HTML do arquivo Quando um Web browser eacute apontado para um arquivo PHP

o servidor procura por seccedilotildees PHP no arquivo e os processa enviando o resultado

do processamento ao browser Esses satildeo os passos seguidos pelo servidor para

processar um arquivo PHP

1 O servidor inicia a procura no arquivo em modo HTML Ele assume que o

coacutedigo eacute HTML e os envia ao browser sem nenhum processamento

2 O servidor web continua em modo HTML ateacute encontrar um tag de abertura do

PHP (lt)

3 Quando o servidor encontra um tag de abertura do PHP alterna para modo

PHP assume que todos os comandos subsequumlentes satildeo desse tipo e os

executa Se o comando gera uma saiacuteda a envia ao browser

4 O servidor continua em modo PHP ateacute encontrar um tag de fechamento do

PHP (gt)

5 Quando o servidor encontra um tag de fechamento do PHP retorna ao modo

HTML e repete o ciclo

2123 Forma Baacutesica de um Documento PHP

O PHP eacute embutido diretamente no programa HTML Seus comandos satildeo

delimitados pelos tags lt e gt Dentro dos tags de abertura e fechamento do PHP

satildeo incluiacutedos comandos especiacuteficos que satildeo interpretados pela linguagem A sintaxe

eacute bastante parecida com a da linguagem C Por exemplo

ltHTMLgt

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 17: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

16

ltHEADgtltTITLEgtTeste PHPltTITLEgtltHEADgt

ltBODYgt

ltpgt Linha HTML

lt

$id = $_GET[id]

if ($id = 1)

echo ldquoltpgtUsuaacuterio Nordm 1ltpgtrdquo

else

echo ldquoltpgt Usuaacuterio Nordm 2ltpgtrdquo

gt

ltBODYgt

ltHTMLgt

213 Javascript

Javascript eacute uma linguagem criada pela Netscape que serve basicamente

para aumentar os recursos do navegador

Todas as paacuteginas escritas com HTML satildeo estaacuteticas Conseguem fazer com

que o browser apenas leia o que haacute no coacutedigo e reproduza aquele conjunto de

instruccedilotildees Um dos principais recursos do Javascript eacute a possibilidade de fazer com

que a paacutegina HTML seja dinacircmica ou seja capaz de fazer com que o usuaacuterio possa

interagir com a paacutegina ou usar outros recursos para fazer com que o documento

Web se altere sem necessidade de um novo carregamento de paacutegina

O Javascript eacute uma linguagem de programaccedilatildeo que funciona interativamente

com o coacutedigo HTML O Javascript consegue ler entender e manipular os objetos de

uma paacutegina HTML tendo a facilidade necessaacuteria para alteraacute-los automaticamente

quando programado Satildeo inseridos nas paacuteginas de uma maneira peculiar podendo

ter apenas uma aacuterea para scripts ou espalhados pelo coacutedigo do jeito que melhor se

adapte agraves necessidades de cada usuaacuterio Diferentemente da linguagem PHP o

Javascript eacute uma linguagem client-side (as paacuteginas satildeo armazenadas e executadas

na maacutequina cliente) (LOURENCcedilO 2000)

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 18: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

17

22 Programas

221 Fireworks

O Fireworks eacute uma ferramenta de produccedilatildeo graacutefica para criaccedilatildeo de interfaces

e imagens Web com interaccedilatildeo em vaacuterias linguagens scripts (como php cfml html

xml Xhtml) podendo montar sites atraveacutes de desenhos O Fireworks consegue

combinar muito bem recursos vetoriais (como o ajuste de textos recursos praacuteticos

de desenho e ediccedilatildeo de noacutes) com os recursos aplicados a bitmaps ou imagens

(como o tratamento de cores e ferramentas de efeitos)

Tambeacutem permite trabalhar com layouts de sites sendo que pode-se

transformar o layout em uma paacutegina HTML usando o recurso de slices (fatias) O

programa permite que vocecirc divida o layout inteiro em vaacuterias imagens de acordo com

as aacutereas especiacuteficas que se deseja criar Apoacutes essa divisatildeo cada uma dessas aacutereas

eacute exportada com um formato de arquivo e com uma compactaccedilatildeo especiacutefica

podendo gerar o HTML com as imagens (ou fatias) nos seus devidos lugares e

posiccedilotildees ou mesmo exporta-las para o Dreamweaver Sua outra vantagem eacute a

possibilidade de se trabalhar com os behaviors (comportamentos) Com os

bahaviors pode-se criar rollovers (menus interativos) e menus pop ups (menus que

abrem outros sub-menus de acordo com cada item) estilizados

Como o Fireworks foi inicialmente projetado para a Web permite tambeacutem a

exportaccedilatildeo de imagens para a rede Esses recursos incluem a total otimizaccedilatildeo de

cada formato de arquivo a ser exportado bem como GIFS e JPEGS Aleacutem disso

pode-se fazer uma comparaccedilatildeo visual e do tamanho do arquivo simultaneamente

de ateacute 4 formatos ou configuraccedilotildees de exportaccedilotildees e tambeacutem salvar as mesmas

configuraccedilotildees para usar mais tarde em outros arquivos (CARACTERIacuteSTICAS

2004)

222 Dreamweaver

O Dreamweaver eacute um editor profissional de HTML utilizado para projetar

codificar e desenvolver sites paacuteginas e aplicaccedilotildees Web Permite que se trabalhe as

paacuteginas HTML de forma manual ou em um ambiente de ediccedilatildeo visual fornecendo

ferramentas uacuteteis para esses fins O Dreamweaver tambeacutem permite que se construa

aplicaccedilotildees Web dinacircmicas usando linguagens que rodam nos servidores (PHP

nesse caso) (PAGE 2004) Algumas das facilidades do Dreamweaver satildeo

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 19: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

18

bull Administraccedilatildeo remota do site e arquivos fonte localmente

bull Operaccedilatildeo em CSS (Cascade Style Sheets)

bull Geraccedilatildeo automatizada de rotinas em Javascript

bull Formulaacuterios

bull Criaccedilatildeo e uso de templates (modelos)

bull Gerenciamento completo do site e seus componentes (por exemplo se um

arquivo de imagem for movido de um sub-diretoacuterio para outro todo o site eacute

reparado automaticamente)

bull Apresentaccedilatildeo do mapa do site com diferentes niacuteveis de detalhamento

bull Behaviors (comportamentos que depois podem ser reaproveitados) com

rotinas de JavaScript

bull Manipulaccedilatildeo de tabelas

bull Rollover de imagens

bull Administraccedilatildeo do site a partir da barra de menu

bull Reparo automaacutetico do site a partir da mudanccedila de endereccedilo ou nome de

uma miacutedia ou link em geral

23 Banco de Dados

231 MySQL

O MySQL eacute um SGDB (ou sistema gerenciador de banco de dados) que eacute

desenvolvido e distribuiacutedo pela MySQL AB a empresa fundada pelos suecos David

Axmark Allan Larsson e Michael Widenius Ele derivou de outro banco de dados o

mSQL Pelo fato do mesmo natildeo ser raacutepido nem flexiacutevel o suficiente para as suas

necessidades os suecos resolveram criar um novo banco de dados utilizando a

interface API (application programming interface - conjunto de rotinas padronizadas

que a aplicaccedilatildeo utiliza para efetuar seus serviccedilos) do proacuteprio mSQL utilizada para

facilitar a portabilidade de coacutedigos escritos do mSQL para o MySQL

Escrito em C e C++ e testado em vaacuterias plataformas diferentes o MySQL

possui um sistema de alocaccedilatildeo de memoacuteria baseado em processos que permite a

execuccedilatildeo de tarefas paralelas tornando-o extremamente raacutepido e eficiente Ele eacute um

banco de dados do tipo SQL (Structured Query Language) e por isso possui as

caracteriacutesticas dos principais bancos de dados do tipo SQL como operadores e

funccedilotildees agrupamentos joins (junccedilotildees de tabelas) aceita vaacuterios tipos de campos

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 20: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

19

suportando registros de tamanhos fixos ou variaacuteveis controla a seguranccedila dos

dados aleacutem de poder armazenar uma grande quantidade de dados chegando a

quantidades superiores a 50000000 de registros Aleacutem disso o MySQL eacute multi-

usuaacuterio (programas de mais de um usuaacuterio podem estar em execuccedilatildeo) eacute multi-

tarefa (eacute capaz de executar vaacuterios programas simultaneamente mesmo que a

maacutequina possua somente um processador) e open-source

Esse servidor de banco de dados eacute considerado como o mais raacutepido entre os

de sua categoria tanto para grandes volumes de dados como pequenos Poreacutem

como ele foi criado para ser extremamente aacutegil teve-se de descartar certos aspectos

das especificaccedilotildees SQL e foi decidido natildeo se implementar caracteriacutesticas que geram

muita demanda de recursos como os triggers que satildeo uma porccedilatildeo de coacutedigo

armazenado que se executa quando eacute realizada uma operaccedilatildeo (atualizaccedilatildeo

inclusatildeo etc) com o banco de dados Naturalmente comprovar a proacutepria existecircncia

do trigger e executaacute-lo consome recursos e tempo

As principais vantagens do MySQL satildeo a baixa demanda de recursos de

hardware a simplicidade de administraccedilatildeo e a otimizaccedilatildeo para as aplicaccedilotildees tiacutepicas

da web onde ocorrem mais consultas do que atualizaccedilotildees (MySQL 2004)

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 21: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

20

3 DESIGN DO SITE

Atraveacutes de um briefing (anexo 1) pode-se chegar a algumas conclusotildees que

influenciaram na escolha da forma de apresentaccedilatildeo das paacuteginas e levaram a

definiccedilatildeo de quais cores imagens e forma o site seria apresentado aos usuaacuterios

31 DEFINICcedilAtildeO DAS CORES

311 A Teoria das Cores

O que se convencionou chamar de Teoria das Cores de Leonardo da Vinci

satildeo as formulaccedilotildees histoacutericas esparsas contidas em seus escritos e reunidas no livro

Tratado da Pintura e da Paisagem ndash Sombra e Luz que satildeo anotaccedilotildees recolhidas

pelo artista ao longo de anos de observaccedilatildeo e eacute a teoria mais corrente sendo um

dos legados do renascimento para as artes visuais (TEORIA 2004)

312 O Disco Cromaacutetico

O disco cromaacutetico natildeo eacute um instrumento cientiacutefico de classificaccedilatildeo de cores

mas eacute muito uacutetil no entendimento da teoria das cores As cores se dividem em

primaacuterias secundaacuterias e terciaacuterias (TEORIA 2004)

Pode-se reproduzir qualquer sensaccedilatildeo de cor misturando-se aditivamente

diversas quantidades de vermelho azul e verde Por isso conhecem-se essas cores

como cores primaacuterias (ENCARTA 2000) Combinado-se duas cores primaacuterias

obtemos as cores secundaacuterias resultando no laranja (amarelo com vermelho) verde

(azul com amarelo) e violeta (vermelho com azul) As cores terciaacuterias satildeo obtidas

pela mistura de uma primaacuteria com uma ou mais secundaacuterias (TEORIA 2004)

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 22: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

21

A figura 1 apresenta a representaccedilatildeo graacutefica do disco cromaacutetico

FIGURA 1 ndash DISCO CROMAacuteTICO

313 Cores Anaacutelogas

Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores anaacutelogas satildeo as

cores dispostas lado a lado no disco cromaacutetico Satildeo anaacutelogas porque haacute nelas uma

mesma cor baacutesica e satildeo usadas para dar a sensaccedilatildeo de uniformidade Observando

a figura 1 visualiza-se que a cor anaacuteloga do amarelo eacute o laranja por exemplo

314 Cores Complementares Segundo Berenice Gonccedilalves (GONCcedilALVES 2003) cores complementares

satildeo aquelas que encontram-se sempre em posiccedilotildees opostas no disco cromaacutetico As

cores complementares satildeo usadas para dar forccedila e equiliacutebrio a um trabalho criando

contrastes Observando a figura 1 visualiza-se que a cor complementar do

vermelho eacute o verde e do laranja eacute o azul por exemplo

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 23: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

22

315 Cores X Idade

Segundo estudos realizados cada faixa etaacuteria tem preferecircncia por uma cor

especiacutefica que combina com as caracteriacutesticas de cada idade O vermelho eacute a cor

preferida pelas pessoas de 1 a 10 anos pois indica espontaneidade O alaranjado eacute

a cor preferida das pessoas entre 11 a 20 anos porque indica animaccedilatildeo excitaccedilatildeo e

aventura O amarelo eacute a cor preferida das pessoas com a faixa etaacuteria entre 21 a 30

anos pois fornece a sensaccedilatildeo de forccedila potecircncia arrogacircncia As pessoas no

periacuteodo de 30 a 40 anos gostam do verde que indica a calma a tranquumlilidade o

relaxamento As pessoas na faixa de 41 aos 50 anos preferem a cor anil ou lilaacutes que

indica o misticismo a calma agrave estabilidade As pessoas com mais de 60 anos

preferem a cor violeta pois estatildeo na idade do saber da experiecircncia (BITENCOURT

2003)

316 Cores utilizadas no Site

Apesar do puacuteblico alvo ser formado por alunos pesquisadores empresas e a

comunidade externa teriacutea-se uma ecircnfase maior nos alunos que teriam uma

representaccedilatildeo aproximada de 60 de acessos ao site (briefing) Por isso foi decido

que deveria se utilizar o amarelo como cor principal Poreacutem para efeito visual mais

agradaacutevel foi utilizado o laranja que eacute uma cor anaacuteloga ao amarelo

Consequumlentemente a segunda cor predominante eacute o azul que eacute a cor

complementar do laranja

32 PRINCIacutePIOS DO DESIGN

321 Proximidade

Segundo o princiacutepio da proximidade (WILLIAMS 1995) itens relacionados entre

si devem ser agrupados e aproximados uns dos outros para que sejam vistos como

um conjunto coeso e natildeo como um emaranhado de partes sem ligaccedilatildeo Itens ou

conjuntos de informaccedilotildees que natildeo estatildeo relacionados entre si natildeo devem estar

proacuteximos Nas paacuteginas do Gerds podemos observar a proximidade nos

agrupamentos feitos por cada frame especiacutefico

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 24: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

23

322 Alinhamento

Segundo o princiacutepio do alinhamento (WILLIAMS 1995) nada deve ser colocado

arbitrariamente em uma paacutegina Cada item deve ter uma conexatildeo visual com algo na

paacutegina Quando os itens satildeo alinhados na paacutegina haacute uma unidade coesa mais

forte Mesmo quando os elementos estiverem fisicamente separados uns dos outros

se estiverem alinhados haveraacute uma linha invisiacutevel conectando-os tanto em relaccedilatildeo

aos seus olhos quanto a sua mente Apesar de posicionar alguns elementos

separadamente indicando suas ligaccedilotildees de acordo com o princiacutepio da proximidade

eacute o princiacutepio do alinhamento que avisaraacute ao leitor que mesmo natildeo estando

proacuteximos os itens fazem parte do mesmo material Nas paacuteginas do Gerds podemos

observar o alinhamento feito pelos frames e tambeacutem pela disposiccedilatildeo das linhas e

das figuras existentes na paacutegina principal (home)

323 Repeticcedilatildeo

O princiacutepio da repeticcedilatildeo (WILLIAMS 1995) afirma que algum aspecto do

design deve repetir-se no material inteiro O elemento repetitivo pode ser uma fonte

em negrito uma linha grossa algum sinal de toacutepico um elemento do design algum

formato especiacutefico ou relaccedilotildees espaciais Quando cria-se tiacutetulos com mesmo

tamanho e mesmo peso quando coloca-se um fio a meia polegada do final de cada

paacutegina quando usa-se o mesmo sinal de toacutepico em cada listagem referente ao

mesmo trabalho A repeticcedilatildeo pode ser considerada como consistecircncia Ao olhar

para um jornal de oito paacuteginas eacute justamente a repeticcedilatildeo de alguns elementos que

faz com que cada uma dessas oito paacuteginas pareccedila pertencer ao mesmo jornal

Poreacutem a repeticcedilatildeo vai aleacutem da simples consistecircncia eacute um esforccedilo consciente para

unificar todos os elementos do design No site do Gerds podemos observar a

repeticcedilatildeo nos formatos e cores das linhas na construccedilatildeo das figuras das paacuteginas

nos bototildees e nas cores e fontes utilizadas

324 Contraste

O contraste eacute uma das maneiras mais eficazes de acrescentar algum atrativo

visual a uma paacutegina (algo que realmente faccedila com que uma pessoa queira olhar

para ela) criando uma hierarquia organizacional entre diferentes elementos

(WILLIAMS 1995) A regra importante que deve ser lembrada eacute a de que para o

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 25: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

24

contraste ser realmente eficaz ele deve ser forte Cria-se o contraste quando dois

elementos satildeo diferentes Se eles diferirem um pouco mas natildeo muito natildeo

aconteceraacute o contraste e sim um conflito Uma letra grande pode ser contrastada

com uma pequena uma fonte em estilo antigo com uma fonte em negrito uma linha

fina com uma grossa uma textura aacutespera com uma lisa um elemento horizontal (por

exemplo uma longa linha de texto) com um elemento vertical (por exemplo uma

coluna estreita de texto) linhas muito espaccediladas com linhas bem proacuteximas uma

figura pequena com uma figura grande No site do Gerds podemos observar o

contraste na combinaccedilatildeo das fontes do frame de menu nas cores e formatos dos

bototildees na formataccedilatildeo do cabeccedilalho e no formato das figuras exibidas no topo de

cada paacutegina mostrada no frame principal

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 26: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

25

33 FRAMES

Os frames dividem a paacutegina em 5 framesets e satildeo usados para que um

frameset permaneccedila inalterado enquanto os outros mudam de acordo com as accedilotildees

tomadas pelos usuaacuterios Cada frame do site Gerds estaacute representado na figura 2

Cabeccedilalho Principal

Menu

FIGURA 2 ndash REPRESENTACcedilAtildeO DOS FRAMES

Rodapeacute Login

331 Cabeccedilalho

Eacute o cabeccedilalho do site que foi divido em 3 partes Essa divisatildeo natildeo eacute visiacutevel para

o usuaacuterio poreacutem a parte do meio tem seu tamanho ajustado de acordo com a

resoluccedilatildeo da tela Isso permite que o site possa ser apresentado em diferentes

resoluccedilotildees sem grandes alteraccedilotildees no visual

332 Menu

Aqui os usuaacuterios podem navegar pelo site clicando nos bototildees que alteram

seu formato quando o mouse e passando por cima Eacute pelo menu que se abre as

principais paacuteginas do site

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 27: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

26

333 Principal

Aqui satildeo carregadas as paacuteginas do site A maioria dos links abrem as paacuteginas

nesse espaccedilo

334 Login

Nesse frame encontra-se a parte responsaacutevel pela realizaccedilatildeo do login do usuaacuterio

bem como links raacutepidos para paacuteginas de interesse do grupo Assim que o login eacute

feito o frame exibe algumas informaccedilotildees referentes aos dados do usuaacuterio conectado

no sistema

335 Rodapeacute

Possui o link para a paacutegina inicial Tambeacutem tem seu tamanho ajustado para

diferentes resoluccedilotildees

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 28: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

27

34 PAacuteGINAS VISIacuteVEIS

341 Home

A figura 3 demonstra a primeira paacutegina a ser mostrada Carrega uma breve

definiccedilatildeo do Gerds aleacutem de mostrar uma cacircmera de viacutedeo que estaacute ligada durante

24 horas monitorando o laboratoacuterio de redes da UTP Exibe tambeacutem as uacuteltimas

notiacutecias cadastradas no sistema (on-line)

FIGURA 3 ndash HOME

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 29: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

28

342 Cadastro de Pesquisas

A tela de cadastro de pesquisas representada pela figura 4 possibilita o

cadastramento de pesquisas efetuadas no Gerds Informa-se a data o Tiacutetulo uma

descriccedilatildeo e os participantes da mesma Implementa a parte de upload de arquivos

ou seja o arquivo que conteacutem a pesquisa completa (em qualquer formato desejado)

seraacute salvo no servidor possibilitando download posterior aos interessados

FIGURA 4 ndash CADASTRO DE PESQUISAS

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 30: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

29

343 Alteraccedilatildeo de Pesquisas

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de pesquisas representada pela figura 5 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das pesquisas gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a pesquisa que teraacute seus dados

modificados Para tanto o administrador pode filtrar as pesquisas pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 5 ndash ALTERACcedilAtildeO DE PESQUISAS

Apoacutes a escolha da pesquisa o usuaacuterio cadastrado como administrador do

sistema pode atualizar os dados mostrados na tela exatamente como no cadastro

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 31: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

30

344 Cadastro de Artigos

A tela de cadastro de artigos representada pela figura 6 Possibilita o

cadastramento de artigos que tenham relaccedilatildeo com o Gerds por alunos ou

professores (complemento de aula ou artigos interessantes) Informa-se a data o

tiacutetulo e uma descriccedilatildeo do artigo Implementa a parte de upload (envio de arquivos da

maacutequina cliente para a maacutequina servidora da aplicaccedilatildeo) de arquivos ou seja o

arquivo que conteacutem o artigo completo (em qualquer formato desejado) seraacute salvo no

servidor possibilitando download (envio de arquivos da maacutequina servidora da

aplicaccedilatildeo para a maacutequina cliente) posterior aos interessados

FIGURA 6 ndash CADASTRO DE ARTIGOS

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 32: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

31

345 Alteraccedilatildeo de Artigos

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de artigos representada pela figura 7 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo dos artigos gravados previamente

Inicialmente eacute necessaacuterio que se escolha qual artigo teraacute seus dados modificados

Para tanto o administrador pode filtrar os artigos pelo seu tiacutetulo escrevendo o tiacutetulo

desejado (completo ou parcial) e clicar em pesquisar ou clicar diretamente no link

desejado

FIGURA 7 ndash ALTERACcedilAtildeO ARTIGOS

Apoacutes a escolha do artigo o administrador pode atualizar os dados mostrados

na tela exatamente como no cadastro do mesmo

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 33: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

32

346 Cadastro de Notiacutecias

A tela de cadastro de notiacutecias representada pela figura 8 possibilita o

cadastramento de notiacutecias interessantes aos usuaacuterios do Gerds Informa-se a data

da notiacutecia o tiacutetulo e a descriccedilatildeo completa da mesma

FIGURA 8 ndash CADASTRO DE NOTIacuteCIAS

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 34: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

33

347 Alteraccedilatildeo de Notiacutecias

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

de alteraccedilatildeo de notiacutecias representada pela figura 9 Essa tela permite ao

administrador do sistema realizar a alteraccedilatildeo das notiacutecias gravadas previamente

Inicialmente eacute necessaacuterio que se escolha qual eacute a notiacutecia que teraacute seus dados

modificados Para tanto o administrador pode filtrar as notiacutecias pelo seu tiacutetulo

escrevendo o tiacutetulo desejado (completo ou parcial) e clicar em pesquisar ou clicar

diretamente no link desejado

FIGURA 9 ndash ALTERACcedilAtildeO DE NOTIacuteCIAS

Apoacutes a escolha da notiacutecia o administrado pode atualizar os dados mostrados

na tela exatamente como no cadastro da mesma

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 35: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

34

348 Objetivos

A paacutegina de objetivos representada pela figura 10 descreve os objetivos do

Gerds perante seus participantes informando as metas que o grupo espera atingir

FIGURA 10 ndash OBJETIVOS

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 36: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

35

349 Estatuto

A paacutegina de estatuto representada pela figura 11 descreve o estatuto que

informa o que eacute o Gerds o que representa quais as entidades envolvidas

FIGURA 11 ndash ESTATUTO

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 37: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

36

3410 Participantes

A paacutegina de participantes representada pela figura 12 mostra todos os

usuaacuterios cadastrados no site desde que o mesmo natildeo seja um usuaacuterio externo

Aqui pode-se visualizar o nome do participante seu e-mail sua paacutegina pessoal na

Internet bem como a qual tipo de usuaacuterio o participante estaacute relacionado (se eacute um

professor um aluno ou um estagiaacuterio)

FIGURA 12 ndash PARTICIPANTES

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 38: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

37

3411 Colaboradores

A paacutegina de colaboradores representada pela figura 13 mostra quais satildeo os

colaboradores do Gerds ou seja os grupos pessoas ou empresas que possuem

alguma relaccedilatildeo ativa com o Gerds e que colaboram de alguma forma para o bom

funcionamento do grupo

FIGURA 13 ndash COLABORADORES

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 39: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

38

3412 Visualizar Pesquisas

A paacutegina de visualizaccedilatildeo de pesquisas representada pela figura 14 permite

aos usuaacuterios visualizarem de forma detalhada as pesquisas realizadas no Gerds e

cadastradas previamente mostrando os tiacutetulos das pesquisas realizadas com suas

respectivas datas

FIGURA 14 ndash VISUALIZAR PESQUISAS

Ao clicar no tiacutetulo da pesquisa eacute aberta entatildeo a paacutegina que descreve a

pesquisa e seus detalhes representada pela figura 15 Permite tambeacutem o download

da pesquisa completa na forma em que foi salva por quem a cadastrou

FIGURA 15 ndash DETALHE DA PESQUISA

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 40: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

39

3413 Visualizar Artigo

A tela de visualizaccedilatildeo de artigos representada pela figura 16 permite aos

usuaacuterios visualizarem de forma detalhada os artigos de interesse ao Gerds que

foram cadastrados previamente mostrando o tiacutetulo dos artigos com suas respectivas

datas

FIGURA 16 ndash VISUALIZAR ARTIGO

Ao clicar no tiacutetulo do artigo eacute aberta entatildeo a paacutegina que descreve o artigo em

seus detalhes representada pela figura 17 permite tambeacutem o download do artigo

completo na forma em que foi salva por quem o cadastrou

FIGURA 17 ndash DETALHE DO ARTIGO

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 41: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

40

3414 Visualizar Notiacutecia

A paacutegina de visualizaccedilatildeo de notiacutecias representada pela figura 18 permite aos

usuaacuterios visualizarem de forma detalhada as notiacutecias de interesse ao Gerds que

foram cadastradas previamente mostrando os tiacutetulos das notiacutecias com suas

respectivas datas

FIGURA 18 ndash VISUALIZAR NOTIacuteCIA

Ao clicar no tiacutetulo da notiacutecia eacute aberta entatildeo a paacutegina que descreve a notiacutecia

em seus detalhes representada pela figura 19

FIGURA 19 ndash DETALHE DA NOTIacuteCIA

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 42: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

41

3415 Mural

A tela de mural representado pela figura 20 exibe um mural de mensagens

onde os usuaacuterios cadastrados poderatildeo deixar as suas mensagens para visualizaccedilatildeo

geral

FIGURA 20 ndash MURAL

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 43: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

42

3416 Exclusatildeo do Mural A tela de mural representado pela figura 21 permite que o administrador do

sistema exclua uma mensagem especiacutefica ou todas as mensagens que jaacute tiveram

sua data expirada

FIGURA 21 ndash EXCLUSAtildeO DO MURAL

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 44: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

43

3417 Administraccedilatildeo

Paacutegina para a administraccedilatildeo do sistema representada pela figura 22 O

usuaacuterio logado com a permissatildeo de administrador do sistema poderaacute ter acesso as

paacuteginas que permitiratildeo incluir alterar e excluir o que for necessaacuterio ao bom

funcionamento do sistema

FIGURA 22 ndash ADMINISTRACcedilAtildeO

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 45: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

44

3418 Cadastro de Usuaacuterios

A paacutegina de cadastro de usuaacuterios representada pela figura 23 permite a um

novo usuaacuterio criar uma conta no sistema

FIGURA 23 ndash CADASTRO DE USUAacuteRIOS

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 46: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

45

3419 Alteraccedilatildeo de Usuaacuterio

A partir da tela de administraccedilatildeo (figura 22) pode-se fazer a chamada da tela

que permite ao administrador do sistema realizar a alteraccedilatildeo dos dados do usuaacuterio

representada pela figura 24 Inicialmente eacute necessaacuterio que se escolha qual eacute o

usuaacuterio que teraacute seus dados modificados Para tanto o administrador pode clicar

diretamente no link desejado ou filtrar os usuaacuterios pelo nome escrevendo o nome

desejado (completo ou parcial) e clicar em pesquisar

FIGURA 24 ndash PESQUISA USUAacuteRIOS

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 47: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

46

Apoacutes a escolha do usuaacuterio o administrado pode atualizar os dados do usuaacuterio

mostrado na tela representada pela figura 25

FIGURA 25 ndash ALTERACcedilAtildeO DE USUAacuteRIOS

Essa operaccedilatildeo permite que o administrador possa realizar duas modificaccedilotildees

importantes nos dados do usuaacuterio em questatildeo Todo usuaacuterio cadastrado inicialmente

no sistema tem o campo ldquoTipo de Usuaacuteriordquo marcado como ldquoexternordquo Existem muitas

operaccedilotildees permitidas somente a professores e estagiaacuterios Aqui o administrador

pode mudar o tipo do usuaacuterio de acordo com suas atribuiccedilotildees no Gerds Outra

modificaccedilatildeo importante eacute a possibilidade do usuaacuterio receber os poderes de

administrador do sistema independente de qual seja o seu tipo cadastrado

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 48: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

47

35 PAacuteGINAS NAtildeO VISIacuteVEIS

351 Conexatildeophp

Paacutegina que faz a conexatildeo com o banco de dados Todas as paacuteginas que

fazem acesso ao banco utilizam essa paacutegina Aqui eacute informado qual eacute o nome do

banco de dados que seraacute utilizado pelo sistema aleacutem do usuaacuterio e da senha

cadastradas no servidor do banco de dados Caso natildeo se consiga uma conexatildeo

uma mensagem de erro eacute enviada ao usuaacuterio

352 deleta_artigophp

Paacutegina que exclui o artigo escolhido pelo administrador de acordo com seu

identificador Remove natildeo soacute o registro do banco de dados como o arquivo fiacutesico do

documento relacionado ao artigo

353 deleta_muralphp

Paacutegina que exclui a mensagem do mural escolhida pelo administrador de

acordo com seu identificador

354 deleta_noticiaphp

Paacutegina que exclui a notiacutecia escolhida pelo administrador de acordo com seu

identificador

355 deleta_pesquisaphp

Paacutegina que exclui a pesquisa escolhida pelo administrador de acordo com

seu identificador Remove natildeo soacute o registro do banco de dados como o arquivo

fiacutesico do documento relacionado agrave pesquisa

356 deleta_usuaacuteriophp

Paacutegina que exclui o usuaacuterio escolhido pelo administrador de acordo com seu

identificador

357 grava_alteracaoartigophp

Paacutegina que grava as alteraccedilotildees feitas no artigo atraveacutes da paacutegina descrita no

item no item 325 - Alteraccedilatildeo de Artigos

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 49: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

48

358 grava_alteracaonoticiaphp

Paacutegina que grava as alteraccedilotildees feitas na notiacutecia atraveacutes da paacutegina descrita no

item no item 327 - Alteraccedilatildeo de Notiacutecias

359 grava_alteracaopesquisaphp

Paacutegina que grava as alteraccedilotildees feitas na pesquisa atraveacutes da paacutegina descrita

no item no item 323 - Alteraccedilatildeo de Pesquisa

3510 grava_alteracaousuariophp

Paacutegina que grava as alteraccedilotildees feitas no usuaacuterio atraveacutes da paacutegina descrita

no item no item 3219 - Alteraccedilatildeo de Usuaacuterio

3511 grava_artigophp

Paacutegina que grava o artigo de acordo com os dados passados pela paacutegina

que insere os artigos descrita no item 324 ndash Cadastro de Artigos

3512 grava_notiacuteciaphp

Paacutegina que grava a notiacutecia de acordo com os dados passados pela paacutegina

que insere as notiacutecias descrita no item 326 ndash Cadastro de Notiacutecias

3513 grava_pesquisaphp

Paacutegina que grava a pesquisa de acordo com os dados passados pela paacutegina

que insere as pesquisas descrita no item 322 - Cadastro de Pesquisa

3514 grava_muralphp

Paacutegina que grava o mural de acordo com os dados passados pela paacutegina

que insere o mural descrita no item 3215 - Mural

3515 grava_usuaacuteriophp

Paacutegina que grava os usuaacuterios de acordo com os dados passados pela paacutegina

que insere os usuaacuterios descrita no item 3218 - Cadastro de Usuaacuterios

3516 loginphp

Paacutegina que faz a validaccedilatildeo de login e da senha informada pelo usuaacuterio Aqui

satildeo criadas as sessotildees do sistema que carregam pelo site as informaccedilotildees dos

usuaacuterios

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 50: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

49

4 COacuteDIGO FONTE

Pelo fato do coacutedigo fonte do site Gerds ser muito extenso o mesmo estaacute

disponiacutevel no cd-rom que faz parte da documentaccedilatildeo deste trabalho

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 51: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

50

5 CONCLUSAtildeO

A Internet eacute uma poderosa ferramenta de trabalho utilizada por milhotildees de

pessoas no mundo todo como ferramenta de trabalho diversatildeo e pesquisa Ela pode

e deve ser usada como forma de estreitar a ligaccedilatildeo entre a universidade e a

comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos especializados ou por

transferecircncia de tecnologias mostrando uma realidade diferente aos acadecircmicos e

oferecendo vantagens agrave populaccedilatildeo aproximando-a cada vez mais das novas

tecnologias

Como a carecircncia por essas novas tecnologias eacute grande procura-se

desenvolver avanccedilos que possam ser oferecidos de forma faacutecil e mais barata a esse

puacuteblico Aiacute desponta o avanccedilo conseguido pelos produtos chamados open-source

que contam com a colaboraccedilatildeo mundial em seu desenvolvimento e de forma

gratuita oferecendo alguns produtos de qualidade igual ou superior aos pagos Pelo

fato desses produtos serem gratuitos a possibilidade dessa tecnologia ser

transferida eacute muito maior do que se tivesse um grande custo embutido nessa

transferecircncia

Um grande exemplo disso eacute a combinaccedilatildeo HTMLPHPMySQL que satildeo

tecnologias open-source amplamente utilizadas na Internet e possuem qualidades

excepcionais na construccedilatildeo e exibiccedilatildeo de paacuteginas para a Web

Com o auxiacutelio das ferramentas pagas utilizadas principalmente para a

construccedilatildeo dessas paacuteginas como os produtos da Macromedia (Dreamweaver e

Fireworks) eacute possiacutevel desenvolver sites de altiacutessima qualidade oferecendo o que haacute

de mais moderno nessa aacuterea gastando pouco e atendendo todas as necessidades

tanto do contratante quanto dos usuaacuterios

O site do Gerds foi construiacutedo seguindo esses princiacutepios e utilizando teacutecnicas

de obtenccedilatildeo de dados e designer foi possiacutevel criar um site que procura atender as

especificaccedilotildees do contratante de forma raacutepida barata e eficiente proporcionando

aos seus usuaacuterios um canal de comunicaccedilatildeo entre os alunos e o corpo docente da

Tuiuti participante desse grupo de estudos com os usuaacuterios interessados nos

projetos desse grupo permitindo que a informaccedilatildeo possa trafegar em ambos os

sentidos

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 52: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

51

Pode-se sugerir como elementos a serem abordados em trabalhos futuros os

seguintes mapeamentos

bull Utilizar o programa Macromedia Flash para apresentar animaccedilotildees aos

usuaacuterios tornando o site mais atrativo e interativo

bull Mudar o layout do site para se adequar ao padratildeo que estaacute sendo

desenvolvido para as outras paacuteginas que englobam o site do Gerds

bull Alterar a posiccedilatildeo da cacircmera posicionada no laboratoacuterio do Gerds atraveacutes

da proacutepria paacutegina

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 53: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

52

REFEREcircNCIAS BITENCOURT Eliane Design de Sites ndash Universidade Tuiuti do Paranaacute 2003 CARACTERIacuteSTICAS do Fireworks 2004 Disponiacutevel em httpwwwmacromediacomsoftwarefireworksproductinfofeatures Acesso em 08 dez 2004 GONCcedilALVES Elizabeth Fundamentos para o estudo da cor Disponiacutevel em httpwwwcev2003hpgigcombraulaluzecorapostila1doc Acesso em 06 dez 2004 GRAHAM Ian S HTML 40 Sourcebook EUA John Wiley amp Sons 4ordf ediccedilatildeo 1998 GREENSPAN Jay BULGER Brad MySQLPHP Database Applicatiions EUA MampT Books 2001 HARRIS Andy PHPMySQL Programming for the Absolute Beginner EUA Premier Press 2003 HISTOacuteRIA do PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004

Disponiacutevel em httpphpplanetmirrorcommanualpt_BRhistoryphp Acesso em 01

jan 2004

HTML 40 Reference 2004 Disponiacutevel em httpwwwhtmlhelpcom reference

html40 Acesso em 30 nov 2004

INTRODUCING HTML 32 2004 Disponiacutevel em httpwwww3orgMarkUpWilbur

Acesso em 30 nov 2004

LOURENCcedilO Rodrigo Aprenda Javascript Brasil 2004 Disponiacutevel em httpwwwterracombrinformaticaajudaestilowebwebdesignjavascripthtm Acesso em 05122004 MYSQL manual de referecircncia Brasil versatildeo 501-alpha 2004 Disponiacutevel em httpdevmysqlcomdocmysqlptindexhtml Acesso em 01 jan 2004 OLIVEIRA Marcelo Colunas sobre Dreamweaver Brasil 2004 Disponiacutevel em

httpwwwimasterscombr

PAGE Christine Dreamweaver MX 2004 EUA Editora Campus 2004

PHP manual de referecircncia Brasil atualizado em 18 de julho de 2004 Disponiacutevel em

httpphpplanetmirrorcommanualpt_BRindexphp Acesso em 01 jan 2004

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 54: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

53

SCRIPTS PHP Scripts variados em PHP Brasil 2004 Disponiacutevel em

httpwwwphpbrasilcomscriptsindexphp

STANEK Robert William HTMLCGISGMLVRMLJAVA ndash Web Publishing - Unleashed EUA Samsnet Publishing 1996 TEORIA das cores Disponiacutevel em httpwwwgeocitiescomstrani_felicitaindexhtm Acesso em 05122004 VALADE Janet PHP 5 for Dummies EUA Wiley Publishing Inc 2004

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 55: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

54

ANEXOS Briefing

Entrevistador Paulo Gustavo Marquetti Entrevistado Roberto Neia Amaral Data 012004

A Qual a ecircnfase do projeto

O Desenvolvimento do site do GERDS foi contratado com o objetivo de

divulgar o trabalho realizado por alunos professores colaboradores e

participantes dos cursos de Engenharia da Computaccedilatildeo Engenharia Eleacutetrica

Bacharelado em Sistemas de Informaccedilatildeo Ciecircncia da Computaccedilatildeo e os

cursos de Poacutes Graduaccedilatildeo em Desenvolvimento Web e Redes de

Computadores e Seguranccedila de Redes visando estreitar a ligaccedilatildeo entre a

Universidade e a Comunidade seja atraveacutes da prestaccedilatildeo de serviccedilos

especializados ou por transferecircncia de tecnologias inserindo professores e

alunos num contexto soacutecio-econocircmico mais amplo do que a realidade

acadecircmica

B Qual seraacute a forma do site

O site deveraacute ser dinacircmico e natildeo estaacutetico pois deveraacute ter atualizaccedilotildees

constantes de dados Seraacute um site de acesso diaacuterio

C Qual seraacute o puacuteblico alvo

Teraacute como puacuteblico alvo alunos pesquisadores empresas e a

comunidade mas com uma ecircnfase maior dos alunos (uma representaccedilatildeo de

aproximadamente 60)

D O que eacute mais importante ressaltar no site

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 56: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

55

O que eacute o GERDS

Quais os objetivos do Gerds

Quem satildeo os participantes do Gerds

Pesquisas realizadas pelos participantes

Artigos de interesse dos participantes e da comunidade em geral

Notiacutecias referentes ao Gerds

Mural de mensagens para comunicaccedilatildeo entre os participantes

E Qual tipo de material seraacute utilizado no site

Basicamente o site seraacute composto por texto e algumas imagens Deseja-

se futuramente implantar uma cacircmera de viacutedeo no laboratoacuterio de redes da

UTP (que eacute utilizada como ldquosederdquo do Gerds) que iraacute monitorar o ambiente nas

24 horas diaacuterias

F Qual a quantidade de registros

A quantidade de registros natildeo deveraacute ser muito grande salvo a parte do mural

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 57: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

56

Dicionaacuterio de dados

O dicionaacuterio de dados conteacutem a descriccedilatildeo do banco de dados incluindo suas tabelas campos chaves e relacionamentos ARTIGO

Campo Tamanho Descriccedilatildeo PKAI id_artigo Int(11) Coacutedigo que identifica o artigo

dt_artigo Date Data do artigo tit_artigo Varchar(50) Tiacutetulo do artigo desc_artigo Varchar(100) Descriccedilatildeo do artigo arq_artigo Varchar(50) Nome do arquivo aonde estaacute gravado o artigo

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo artigo

MURAL

Campo Tamanho Descriccedilatildeo PKAI id_mural Int(11) Coacutedigo que identifica a mensagem no mural

dt_mural Datetime Data e hora da mensagem no mural dt_expmural Date Data em que expira a mensagem do mural desc_mural Varchar(250) Texto da mensagem do mural

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pelo mural

email_mural Varchar(30) e-mail do usuaacuterio que deveraacute aparecer no mural

NOTIacuteCIAS

Campo Tamanho Descriccedilatildeo PKAI id_noticias Int(11) Coacutedigo que identifica a notiacutecia

FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel pela notiacutecia

dt_noticia Datetime Data da notiacutecia desc_noticia Varchar(250) Texto de descriccedilatildeo da notiacuteca tit_noticia Varchar(150) Tiacutetulo da notiacutecia dt_expnoticia Date Data em que expira a notiacutecia

PESQUISA

Campo Tamanho Descriccedilatildeo PKAI id_pesq Int(11) Coacutedigo que identifica a pesquisa

dt_pesq Date Data da pesquisa tit_pesq Varchar(50) Tiacutetulo da pesquisa desc_pesq Varchar(100) Texto de descriccedilatildeo da pesquisa arq_pesq Varchar(50) Nome do arquivo aonde estaacute gravada a

pesquisa FK id_usuario Int(11) Coacutedigo que identifica o usuaacuterio responsaacutevel

pela notiacutecia part_pesq Varchar(200) Nome dos participantes da pesquisa

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema

Page 58: DESENVOLVIMENTO DE UM SITE DINÂMICO NA INTERNET …tcconline.utp.br/wp-content/uploads/2013/08/DESENVOLVIMENTO-DE-UM... · da Computação e os cursos de Pós Graduação em Desenvolvimento

57

USUARIOS Campo Tamanho Descriccedilatildeo

PKAI id_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

nome_usuario Varchar(50) Descriccedilatildeo do tipo de usuaacuterio login_usuario Varchar(8) Login do usuaacuterio

FK tipo_usuario Int(11) Coacutedigo que identifica o tipo de usuaacuterio

mensagem_usuario Varchar(200) Mensagem a ser mostrada ao usuaacuterio

email_usuario Varchar(50) Email do usuaacuterio home_usuario Varchar(50) Paacutegina pessoal do usuaacuterio senha_usuario Varchar(20) Senha do usuaacuterio dt_ult_acesso_usuario Date Data do uacuteltimo acesso do usuaacuterio

ao site qt_acesso_usuario Int(11) Quantidade de acessos do

usuaacuterio fl_administrador Char(1) Indica se o usuaacuterio eacute ou natildeo um

administrador do sistema