O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos

CENTRO UNIVERSITÁRIO DO TRIÂNGULO PRÓ-REITORIA DE ENSINO DE GRADUAÇÃO

CURSO DE CIÊNCIA DA COMPUTAÇÃO

O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos

Marcelo Mendes de Sousa Cecin

Uberlândia, Dezembro/2005.

CENTRO UNIVERSITÁRIO DO TRIÂNGULO PRÓ-REITORIA DE ENSINO DE GRADUAÇÃO

CURSO DE CIÊNCIA DA COMPUTAÇÃO



Monografia apresentada ao Curso de Ciência da Computação do Centro Universitário do Triângulo - Unitri, como requisito básico à obtenção do grau de Bacharel em Ciência da Computação, sob a orientação do Professor Edson Angoti Júnior, Msc.


ii



Monografia apresentada ao Curso de Ciência da Computação do Centro Universitário do Triângulo - Unitri, como requisito básico à obtenção do grau de Bacharel em Ciência da Computação.

Edson Angoti Júnior, Msc. (Orientador)

Hélio Rubens Soares, Msc.(Avaliador)

Silvia Fernanda Martins Brandão, Msc.(Avaliador)

Silvia Fernanda Martins Brandão, Msc.(Coordenadora de Curso)


iii

Agradecimentos à

Todos os Professores e Alunos da Ciência da Computação, e também a

todos os meus Familiares e Colegas de Trabalho.

iv

RESUMO No decorrer dos tempos, formas de organização e administração das informações obtidas através das diversas maneiras de comunicação da humanidade foram desenvolvidas a fim de facilitar todo o processo de manipulação de dados. Com o aparecimento dos computadores não foi diferente. Primeiramente foi necessário o aparecimento da Engenharia de Software com a finalidade de padronizar metodologias a fim de produzir Sistemas bem sucedidos em todos os aspectos. Em segundo lugar, com a evolução da Computação em decorrência da Internet, um novo paradigma de estruturação, organização e administração de Sistemas Hipermídia apareceu. Além disso, com a grande corrida da Inclusão Digital, juntamente a facilidade de acesso à Internet, Aplicações Hipermídia necessitam não só de diversos profissionais de variados ramos do conhecimento como também as complexidades dos mesmos cresceram em relação aos Sistemas Desktops tradicionais. A partir deste cenário, Técnicas de Projetos para desenvolvimento de Aplicações Hipermídia foram sendo criadas com a intenção de suprir esta deficiência da Engenharia de Software. Em suma duas destas técnicas serão apresentadas, a técnica OOHDM (The Object-Oriented Hypermedia Design Model) e a técnica WebML (The Web Modeling Language). Além disso, será desenvolvida uma aplicação utilizando-se a metodologia WebML através da ferramenta WebRatio. E conquanto, a Engenharia de Software abranje estes quesitos (padronização e orientação a objetos), no caso de um Sistema Hipermídia, existem suportes das metodologias voltadas para estes mesmos sistemas os quais auxiliam em etapas do projeto que a Engenharia tradicional não provê.

v

SUMÁRIO LISTA DE FIGURAS ...................................................................................................................vii

LISTA DE TABELAS..................................................................................................................viii

LISTA DE ABREVIATURAS ......................................................................................................ix

1. INTRODUÇÃO...........................................................................................................................1

2. SISTEMAS HIPERMÍDIA ........................................................................................................3

2.1. Conceitos Básicos .....................................................................................................................4

2.2. História do Hipertexto e da Multimídia .................................................................................4

2.3. A Evolução de Hipertextos e Multimídia (Hipermídia) ........................................................9

2.4. Formatos Digitais ...................................................................................................................11

2.5. Vantagens da Utilização de Sistemas Hipermídia ...............................................................13

2.6. Exemplos de Sistemas Hipermídia........................................................................................15

2.7. Conclusão................................................................................................................................17

3. METODOLOGIAS DE HIPERDOCUMENTOS ..................................................................19

3.1. Metodologia OOHDM (The Object-Oriented Hypermedia Design Model) ......................20

3.1.1. Modelagem Conceitual .....................................................................................................22

3.1.2. Modelagem de Navegação................................................................................................24

3.1.3. Interface Abstrata..............................................................................................................26

3.1.4. Implementação..................................................................................................................26

3.2 Metodologia WebML (The Web Modeling Language) ........................................................27

3.2.1. Modelagem de Dados .......................................................................................................28

3.2.2. Modelagem de Hipertexto.................................................................................................30

3.2.3. Modelagem de Apresentação ............................................................................................35

3.2.4. Modelagem de Personalização..........................................................................................36

3.3. Conclusão................................................................................................................................37

4. DESENVOLVIMENTO DE UM HIPERDOCUMENTO.....................................................38

4.1. Instalação da Ferramenta WebRatio....................................................................................38

4.2. Modelagem de Dados .............................................................................................................42

4.3. Modelagem de Hipertexto .....................................................................................................45

4.3.1. Visão dos Visitantes..........................................................................................................46

4.3.1.1. Páginas Categorias e Visualizar Receitas.............................................................47

4.3.1.2. Página Receitas ....................................................................................................49

4.3.1.3. Página Busca........................................................................................................50

4.3.1.4. Páginas Inserindo Receita e Falha........................................................................52

4.3.1.5. Páginas Área Restrita e Usuário ou Senha Inválidos ...........................................55

vi

4.3.2. Visão dos Administradores ...............................................................................................57

4.3.2.1. Páginas Categorias, Modificando Categorias e Falha ..........................................57

4.3.2.2. Páginas Categorias, Apagando Categoria e Falha................................................60

4.3.2.3. Páginas Receitas, Apagando Receita e Falha.......................................................62

4.3.2.4. Página Sair ...........................................................................................................64

4.4. Modelagem de Apresentação.................................................................................................65

4.5. Modelagem de Personalização ..............................................................................................66

4.6. Conclusão................................................................................................................................68

5. CONCLUSÃO ...........................................................................................................................70

REFERÊNCIAS BIBLIOGRÁFICAS ........................................................................................72

vii

LISTA DE FIGURAS Figura 2.1. Anotações de Leonardo Da Vinci ..............................................................................5

Figura 2.2. Caligrafia de Aldo Manucio........................................................................................5

Figura 2.3. Douglas Engelbart e a primeira apresentação do mouse..........................................7

Figura 3.1. Classes representadas na notação OOHDM............................................................22

Figura 3.2. Classes representadas na notação OOHDM............................................................23

Figura 3.3. Contexto de Navegação .............................................................................................25

Figura 3.4. Modelagem de Dados WebML .................................................................................29

Figura 3.5. Data Units ...................................................................................................................31

Figura 3.6. Multidata Units ..........................................................................................................32

Figura 3.7. Index Units .................................................................................................................32

Figura 3.8. Scroller Units..............................................................................................................33

Figura 3.9. Filter Units..................................................................................................................33

Figura 3.10. Direct Units...............................................................................................................34

Figura 3.11. Links automáticos e de transporte .........................................................................34

Figura 4.1. Estrutura de Dados do Sistema ................................................................................44

Figura 4.2. Relacionamentos das Entidades................................................................................44

Figura 4.3. Páginas Categorias e Visualizar Receitas ................................................................49

Figura 4.4. Página Receitas ..........................................................................................................50

Figura 4.5. Página Busca ..............................................................................................................52

Figura 4.6. Páginas Inserindo Receita e Falha............................................................................55

Figura 4.7. Páginas Área Restrita e Usuário ou Senha Inválidos .............................................56

Figura 4.8. Páginas Categorias, Modificando Categorias e Falha ............................................59

Figura 4.9. Páginas Categorias, Apagando Categoria e Falha ..................................................61

Figura 4.10. Páginas Receitas, Apagando Receita e Falha ........................................................63

Figura 4.11. Página Sair ...............................................................................................................64

viii

LISTA DE TABELAS Tabela 3.1. Categorias dos setores econômicos e alguns exemplos ...........................................19

Tabela 3.2. Características herdadas e criadas no OOHDM.....................................................21

Tabela 4.1. Requisitos WebRatio versão 4.0.11 ..........................................................................39

ix

LISTA DE ABREVIATURAS WebML The Web Modeling Language

OOHDM Object Oriented Hypermedia Design Method

NLS On-Line System

TCP/IP Transfer Control Protocol/Internet

WWW World Wide Web

W3C World Wide Web Consortium

HTML Hypertext Markup Language

HTTP Hypertext Transfer Protocol

GIF Graphics Interchange Format

JPG Joint Photografic Experts Group

MP3 MPEG-1/2 Audio Layer 3

WMA Windows Media Audio

HDM Hypermedia Design Method

UML The Unified Modeling Language

ADVs Abstract Data Views

ADOs Abstract Data Objects

XML Extensible Markup Language

XLS Extensible Style Sheet Language

CSS Cascading Style Sheets

CASE Computer Aided Software Engineering

BLOB Binary Large Object

URL Uniform Resource Locators

SQL Structured Query Language

JDBC Java Database Connectivity

J2EE Java 2 Platform, Enterprise Edition

BLOB Binary Large Object

OID Object Index

JSP JavaServer Pages

PDF Portable Document Format

1

1. INTRODUÇÃO

Desde os primórdios da raça humana, o homem tem se comunicado de

alguma maneira, e muitos intelectuais e pessoas que lidavam com informações,

desenvolveram mecanismos para uma melhor organização e administração de

conteúdos.

Muitos fatores colaboram com a constante evolução da Internet, e

juntamente com a História da Computação, fica claro como a Internet possui

potencialidade para as mais variadas áreas do conhecimento humano.

Hoje, existem vários setores da economia e da sociedade que possuem

páginas Web, por vários motivos, tais como a acessibilidade mais cômoda e rápida

das informações, e o alcance de um grande número de pessoas; pois um site pode

ser acessado por qualquer pessoa que possua um computador com acesso à

internet.

Por esse motivo vários conceitos, formatos digitais e metodologias estão

em constante desenvolvimento a fim de ilustrar, representar, organizar e

administrar sistemas voltados para Internet e o quão estes recursos integram em

ricas formas computacionais representativas da comunicação, seja através de

execução em tempo real ou não.

A internet também fortalece a globalização, pois seu alcance é mundial. A

premissa principal do capitalismo, baseada na frase “time is money” (tempo é

2

dinheiro), resume bem o quanto é valioso não perder tempo nas etapas como a de

desenvolvimento ou na de manutenção de um sistema.

O objetivo principal desta pesquisa é demonstrar que existem ferramentas,

como a WebRatio associada à metodologia WebML e que estas conseguem de

forma rápida e com qualidade, administrar fases, como: modelagem,

desenvolvimento, documentação e manutenção de um sistema hipermídia.

No capítulo dois, será exposto o que vem a ser o amplo ambiente de

sistemas hipermídia, assim como alguns conceitos básicos que são utilizados neste

ambiente para que um sistema hipermídia possa funcionar. Será apresentada uma

pesquisa sobre a história do hipertexto e da multimídia, a fim de que seja

constatado que hipermídia se trata da evolução destes dois conceitos. Também

serão enumeradas as vantagens desses sistemas, assim como exemplos referentes

a eles.

Conceitos das etapas de modelagens e de implementação de sistemas

hipermídia, baseando-se em duas técnicas de projeto de aplicação hipermídia

serão apresentados no capítulo três:

• Técnica OOHDM (Object Oriented Hypermedia Design Method),

desenvolvida na Pontifícia Universidade Católica do Rio de Janeiro,

por Gustavo Rossi e Daniel Schwabe, os sistemas de inteligência

artificial (robótica);

• Técnica WebML (The Web Modeling Language), desenvolvida no

Instituto de Eletrônica e Informação do Politécnico de Milão.

No capítulo quatro será criado um site utilizando a ferramenta WebRatio,

de forma integrada à metodologia WebML.

No capítulo cinco será mencionada uma retrospectiva de todo o trabalho

desenvolvido, bem como, uma conclusão geral do mesmo.

3

2. SISTEMAS HIPERMÍDIA

Ao longo da evolução humana, foram desenvolvidas tecnologias de

comunicação que auxiliaram no desenvolvimento sócio-econômico da

humanidade.

A comunicação vem evoluindo desde a fala, a escrita, a arte, a música, a

imprensa (jornal, rádio, televisão) e atualmente a eletrônica.

O mais interessante é que nenhuma dessas culturas foi substituída uma

pela outra, mas sim todas se complementaram e se completam mutuamente até

hoje.

O termo sistema hipermídia pode ser moderno, contudo nada mais é do

que a evolução de conceitos ligados à interatividade de representações culturais e

sua fundamentação.

Hipermídia “já se encontra em alguns registros históricos em obras na

Ciência, na Literatura e na Filosofia, ela ganha impulso com o avanço da

crescente ação dialógica entre o homem e a técnica” [1].

Como toda tecnologia, a hiperconectividade produz resultados favoráveis e

contrários e também novos paradigmas, como “a falência do discurso

tradicionalmente lógico, acabado, fechado em si. As infinitas possibilidades de

conexões entre trechos de textos e textos inteiros favorecem a flexibilização das

fronteiras entre diferentes áreas do conhecimento humano” [1].

4

2.1. CONCEITOS BÁSICOS

A seguir, serão enumerados e caracterizados os principais conceitos

relacionados ao tema sistema hipermídia.

• Link: refere-se às ligações de um hipertexto, ou seja, é o atalho, o

caminho entre as diversas estruturas do sistema que pode estar em

forma de texto ou imagem levando a outras partes do sistema.

• Hipertexto: sistema que permite criar e manipular trechos de

informação, basicamente textos e imagens gráficas, interligados de

forma não-seqüencial, através de links.

• Multimídia: combinação de texto, imagens gráficas e desenhos, fotos,

músicas, áudio em geral e vídeos em uma apresentação.

• Hipermídia: fusão dos tipos de dados da multimídia com os

mecanismos dos hipertextos, ou seja, um sistema hipertexto que, além

basicamente de texto e gráficos, suporta também outros tipos de mídia,

como desenhos, imagens, sons e vídeos.

• Hiperdocumento: documento digital contendo formatação de

hipermídia.

2.2. HISTÓRIA DO HIPERTEXTO E DA MULTIMÍDIA

A história do Hipertexto é a própria história do texto, mas também é a

história da computação. Um exemplo histórico de Hipertexto tradicional são as

anotações de Leonardo Da Vinci, como demonstra a figura 2.1.

5

Figura 2.1: Anotações de Leonardo Da Vinci

Vários outros exemplos de hipertextos podem ser localizados na história

da Ciência, da Literatura e da Filosofia através de livros, pois todo texto escrito é

um hipertexto onde “o leitor se engaja num processo também hiperdidático, pois a

leitura é feita de interconexões à memória do leitor, às referências do texto e aos

índices que remetem o leitor para fora da linearidade do texto” [2].

Hipertexto é um conceito cultural da humanidade que diz respeito ao modo

natural de ler e escrever. A evolução dos novos processos de registro, transporte e

distribuição das informações anunciavam a própria evolução do Hipertexto.

É interessante lembrar o fato de ter sido o editor veneziano Aldo Manucio,

“que inventou o estreito caractere itálico e decidiu livrar os textos do aparelho

crítico e dos comentários que os acompanhavam há séculos... Foi assim que o

livro tornou-se fácil de manejar, cotidiano, móvel, e disponível para apropriação

pessoal” [3]. A figura 2.2 ilustra como era a caligrafia de Aldo.

Figura 2.2 - Caligrafia de Aldo Manucio

6

Até este momento, os livros eram pesados, gigantescos e mantidos

acorrentados nas bibliotecas, os quais eram acrescentados os relevantes

comentários dos diversos leitores ao longo do tempo. Ilustrações e notas também

se acumulavam nos livros. A manipulação destas novas informações era feita

através de tecnologias para lidar com o conhecimento. Os avanços das ciências e

das técnicas se tornaram os principais fatores para evolução e distribuição do

conhecimento humano no mundo contemporâneo.

As peculiaridades do hipertexto propriamente dito é que ele é resultado

direto dos avanços dos modos de registro, armazenamento e circulação das

informações. São estes avanços que permitem que se mencione hoje hipertexto

como um texto conectado, com todos os textos existentes, em tempo real. Assim

como na passagem da fala para a escrita e desta para o impresso, e deste para a

eletrônica, representado inicialmente pelo hipertexto, algo muda radicalmente no

que se relaciona aos conceitos sobre como ler, escrever e conhecer.

A fomentação pela tendência da melhor organização das informações,

tanto para fins intelectuais, econômicos e de guerra acarretaram uma corrida pela

evolução de técnicas e teorias essenciais para a evolução da Computação.

Outro grande salto na história do hipertexto deve-se graças ao ilustre

personagem Douglas Engelbart, engenheiro elétrico que desenvolveu novas

tecnologias para a área da informática. Considerado gênio pelo desenvolvimento

de seus inventos que revolucionaram a computação gráfica [4].

Ele foi sem dúvida um dos pioneiros a ressaltar a importância da interface

de usuário e também a desenvolver dispositivos como forma de atingir e provar

esse objetivo (que em sua visão seria o fator principal para a integração dos

usuários com o sistema).

A primeira interface gráfica e o mouse são resultados de suas principais

pesquisas, as quais contribuíram muito para o avanço de novas tecnologias e

mudanças de paradigmas na informática.

7

A figura 2.3 mostra Douglas Engelbart “fazendo a primeira demonstração

do uso de um mouse na histórica conferência Joint Computer Conference,

realizada em São Francisco, Califórnia, em dezembro de 1968” [4].

Figura 2.3 - Douglas Engelbart e a primeira apresentação do mouse

Ao longo do tempo, os trabalhos fundamentais de pioneiros permitiram o

surgimento de pequenas e grandes empresas de informática principalmente em

torno do Vale do Silício nos Estados Unidos.

Alguns marcos relevantes propiciaram a evolução da Computação e por

conseqüência, o próprio conceito de hipertexto, segundo Tim McLaughlin,

Christopher Keep, e Robin Parmar e interpretando seus significados segue-se a

enumeração cronológica em seguida [5]:

• 1963 - Engelbart publishes “A Conceptual Framework”: as

habilidades humanas sempre se valeram de artefatos, linguagens e

metodologias para se ampliarem entre si.

• 1965 - Nelson coins the term “hypertext”: Theodor Holm Nelson

(nascido em 1937) inventou o termo Hipertexto em 1965, e é um

pioneiro da Tecnologia de Informação.

8

• 1968 - Engelbart implements On-Line System (NLS) and invents the

mouse: Douglas Engelbart é o patrono do mouse e criou o sistema

NLS (interface gráfica) que permitiu a potencialidade de groupware,

acarretando em uma inovação de conceitos principalmente na

Computação Gráfica.

• 1969 - ARPANET: resultado direto do esforço conjunto de militares e

pesquisadores universitários cuja uma das metas era conectar

computadores e pessoas.

• 1975 - The Altair, the first personal computer, introduced: primeiro

computador pessoal produzido para consumo em massa baseado no

microprocessador Intel 8080. O então estudante Bill Gates, junto com

o colega Paul Allen, desenvolve o sistema operacional para esta

máquina. Um ano depois eles fundam a Microsoft.

• 1977 – Apple II released: primeiro microcomputador para uso pessoal

e profissional do mundo, com praticamente toda a gama de periféricos

que hoje bem conhecemos.

• 1981 - Introduction of the IBM PC: a resposta da IBM a Apple vem

quatro anos mais tarde com o lançamento do IBM-PC, e contrata a

Microsoft para desenvolver seu sistema operacional, o MS-DOS.

• 1984 - Macintosh: a Apple lança o computador pessoal Macintosh,

com o sistema operacional baseado em figuras para acionar comandos.

• 1986 - Release of the first 80386 computer, the Compaq Deskpro:

computador com capacidade de processamento interna de 32 bits.

• 1987 - HyperCard released: software do Apple Macintosh que oferece

aos usuários uma ferramenta para o gerenciamento de informações.

9

• 1987 - Conklin's "Hypertext: An Introduction and Survey" published:

publicação do livro Introdução e Pesquisa ao Hipertexto de Jeff

Conklin.

• 1988 - TCP/IP Transfer Control Protocol/Internet: Protocolo elevado

à condição de protocolo de comunicação das redes.

• 1989 - WWW: Tim Berners-Lee propôs a criação de um projeto global

de Hipertexto conhecido como World Wide Web, conjunto interligado

de documentos escritos em linguagem HTML armazenados em

servidores HTTP ao redor do mundo, conhecido popularmente como

Internet.

• 1990 - Windows: Microsoft lança a versão 3.0 do programa Windows.

• 1994 - W3C World Wide Web Consortium: consórcio formado por

instituições comerciais e educacionais, com o objetivo de definir

padrões para as respectivas áreas relacionadas à WWW.

Essa explosão de tecnologias citadas anteriormente, ao longo de

praticamente um espaço razoavelmente curto no tempo, acarretou em uma imensa

evolução nos paradigmas, enfoques, e utilização da computação em diversas áreas

da sociedade.

2.3. A EVOLUÇÃO DE HIPERTEXTOS E MULTIMÍDIA

(HIPERMÍDIA)

Embora o termo Hipermídia seja entendido como sendo uma maior

abrangência às maneiras de expressar o conhecimento, ele pode ser

considerado simplesmente uma evolução do termo original Hipertexto. É

impossível dissociar o termo Hipermídia da Internet, ou melhor, da Web.

10

Foi o desenvolvimento deste veículo de comunicação que possibilitou a

disseminação em nível global da tecnologia de ambientes Hipermídia.

A internet é uma rede de computadores, que fornece informação em forma

de hipertexto. Para ver a informação, pode-se usar um software chamado

navegador (browser) para baixar as páginas de sites e mostrá-los na tela do

usuário. O usuário pode então seguir os links na página para outros documentos

ou mesmo enviar informações de volta para o servidor para interagir com ele.

A funcionalidade da Web é baseada em três padrões: a URL (Uniform

Resource Locators), que especifica como cada página de informação recebe um

"endereço" único onde pode ser encontrada; HTTP (Hypertext Transfer Protocol),

que especifica como o navegador e servidor enviam informação um ao outro

(protocolo); e HTML (Hypertext Markup Language), um método de codificar a

informação de modo que possa ser exibida em uma grande quantidade de

dispositivos [6].

O primeiro navegador desenvolvido foi o World Wide Web (WWW), mas

depois surgiram outros navegadores, como o Mosaic que causou um grande

aumento na popularidade da Web entre os usuários novos. Características

adicionais como conteúdo dinâmico, música e animação podem ser encontrados

em navegadores modernos. Freqüentemente, as capacidades técnicas de

navegadores e servidores avançam muito mais rápido que os padrões conseguem

se ajustar, por isso não é incomum que essas características não funcionem

propriamente em todos os computadores [6].

A necessidade de encontrar exatamente a informação desejada surgiu com

a WWW. Desta constatação, vieram os primeiros mecanismos de sites de busca

tais como yahoo, google, msn.

A disseminação de informações voltadas para a Web são representadas e

conhecidas através dos seus formatos digitais.

11

2.4. FORMATOS DIGITAIS

Os dois principais formatos padrões de imagem utilizados são GIF

(Graphics Interchange Format), e JPG (Joint Photografic Experts Group), cujos

formatos gráficos existentes são utilizados na internet, pois o importante é que os

arquivos sejam pequenos para que possam trafegar rapidamente.

A animação é uma etapa intermediária entre a imagem estática e o vídeo.

Animações geradas por computador são consideradas mais baratas do que ter que

produzir um vídeo, porém elas são bem limitadas comparando principalmente aos

números de quadros por segundo capturados por um vídeo. A captura de um vídeo

de boa qualidade requer os serviços de uma equipe de filmagem e som, bem como

um estúdio para editá-lo e convertê-lo para o formato que pode ser utilizado no

computador, contudo pode-se obter um vídeo de qualidade razoável através de

filmadoras digitais disponíveis atualmente no mercado.

“O MP3 (MPEG-1/2 Audio Layer 3) foi um dos primeiros tipos de

arquivos a comprimir áudio com eficiência sem perda substancial de qualidade.

Esta é medida em KB/s (kilobytes por segundo), sendo 128 KB/s a qualidade

padrão, na qual a redução do tamanho do arquivo original é de cerca de 90%. Esse

método de compressão se baseia em estudos sobre psico-acústica. Basicamente ele

retira da música freqüências que o ouvido humano não consegue ouvir devido a

fenômenos de mascaramento de sons e limitações da audição humana” [6].

O patenteamento do padrão MP3 implicou em uma redução no

desenvolvimento de programas de computador na área e propiciou a

popularização de padrões alternativos. A Microsoft, fabricante do sistema

operacional Windows, decidiu afastar-se do MP3 e criar o seu próprio padrão, o

Windows Media (WMA).

A capacidade da multimídia na Web deparou com muitos obstáculos

causados pela adequação ao meio dos formatos de som e vídeo. A sistemas

12

contendo hipermídia vinham sendo implementados em CDs, e o tamanho dos

arquivos não constituía em problemas, já que os CDS têm uma capacidade de

armazenar cerca de 600 MB. Na Internet, este aspecto não foi tão fácil [6].

Por isso, a solução acabou surgindo quando a World Wide Web já tinha

cinco anos e começava a ter uma grande popularização: em 1995, foi criada a

mídia streaming. A mídia streaming é aquela em que o arquivo é armazenado em

um buffer e executado à medida que é transferido para o computador do usuário, o

que evita a espera da conclusão do download, acarretando assim, uma maior

interatividade em tempo real com o usuário.

Normalmente o streaming é utilizado para transmissão de vídeo e se

divide em três programas [6]: o player (cliente) que serve para receber a mídia

que chega fluindo pela rede. Há também o servidor, para instalar nos servidores

Web e que faz a transmissão, e o Publish, que permite criar as mídias no formato

streaming.

Os principais formatos streaming de vídeo são .WMV, .RA, .RAM, .RM E

.RMM, .AVI, .MPG, .MPE, .MP4 E .MOV. A diferença entre os formatos desses

vídeos está na qualidade. Um vídeo MPG é melhor que um .RM e por causa dessa

melhor qualidade, o arquivo é maior. A qualidade dos vídeos .AVI é bem próxima

à dos vídeos .MPG e geralmente é utilizado o codec DivX para compactação .AVI.

Um .RM e um .MOV precisam que se baixe e instale softwares (players) para

visualização dos vídeos, Real Player e Quick Time. No Microsoft Windows

formatos como .MPG e .AVI são abertos normalmente pois o sistema operacional

já vem com um player padrão (Windows Media Player). Contudo, alguns .AVI

também necessitam que se baixe codecs apropriados para que o vídeo seja visto e,

às vezes, é necessário atualizar o Windows Media Player para uma melhor

visualização.

Em suma, os formatos mais utilizados nos sistemas hipermídia são:

imagens (GIFs e JPGs), sons (MP3s e WMAs) e vídeo (depende da necessidade e

característica do sistema, ou seja, a velocidade de transmissão de dados entre o

13

servidor/cliente, a qualidade mínima exigida para transmissão, os recursos

financeiros disponíveis).

2.5. VANTAGENS DA UTILIZAÇÃO DE HIPERDOCUMENTOS

Ao comparar os hiperdocumentos com os documentos em papel os seus

benefícios poderão ser descritos da seguinte maneira [7]:

• O hiperdocumento pode adaptar-se ao leitor: auto-complemento,

cookies, applets.

• Podem ser feitas buscas em grande escala: a busca é feita pelo

computador através de teclas de atalho.

• O hiperdocumento pode ter inteligência embutida nele: validação de

campos, interação com o usuário.

• Hiperdocumentos podem ser projetados para facilitar a atualização:

planejamento estrutural onde se atualiza, por exemplo um vídeo, basta

salvar o novo vídeo em cima do antigo, ou seja, nem o endereço do

link precisa ser modificado.

• O hiperdocumento pode ter estruturas complexas e interessantes: não

há limites quando se trata de interatividade entre Hipermídias

interligadas.

• Podem ser usados documentos de grande tamanho: interação utilizando

streaming e técnicas de sincronismo.

• O leitor pode marcar o hiperdocumento por meio da interatividade com

o usuário.

14

• O hiperdocumento pode ser uma parte de outro programa: os links não

possuem limitações.

• Hiperdocumentos podem ser atualizados de forma dinâmica e

constante: frames, applets, activex, interagem em tempo real com

modificações.

• O hiperdocumento pode incluir som, animação e vídeo: conceito

básico de hipermídia.

• Pedaços reutilizáveis de informação podem ser usados em diferentes

locais: uma consulta ao banco de dados pode ser filtrada em outra parte

do sistema.

• Partes do hiperdocumento podem ficar escondidas por razões de

segurança: ocultação de dados importantes como senha de acesso pode

ser controlada e textos privados podem ter controle de acesso.

• Partes do hiperdocumento podem ficar ocultas para não confundir o

leitor: o desenvolvedor pode ocultar informações que ele julga

acúmulo de informação para que o usuário possa interagir de um modo

mais simples com o sistema, exemplo em HMTL:

<INPUT type=hidden value=’logout’></INPUT>.

• Torna-se possível uma indexação muito mais complexa do que no

papel: a interatividade de links com imagens, textos, ícones etc.

propicia uma discreta interação com o usuário.

• Potencialidade: todo o conhecimento disponível a um clique do mouse,

disponibilizando uma integração do usuário com a máquina com uma

maior eficiência e sutileza.

Esses benefícios podem ser encontrados e testados em diversos sistemas

desenvolvidos por várias pessoas e empresas.

15

2.6. EXEMPLOS DE SISTEMAS HIPERMÍDIA

A seguir, são enumerados os principais exemplos e uma breve descrição

de alguns sistemas hipermídia [7]:

• Hypercard: é um produto da Apple Computers Inc, criado em 1989. Só

funciona em Macintosh, sendo, na época, um dos mais famosos

Hipertextos do mundo. Usa a linguagem "Hypertalk".

• Multimedia Toolbook: é, atualmente, uma das ferramentas mais

utilizadas na produção de aplicativos Hipermídia. Possui uma

linguagem de programação própria, a “OpenScript”, que trabalha com

conceitos de objetos e mensagens.

• Authorware: é um dos mais indicados para as áreas educacionais, pois,

através da utilização de ícones, dispensa programação pesada. Oferece

rapidez e agilidade na implementação do produto final.

• Iconauthor: trabalhando na mesma linha do Authorware, é também

muito procurado por desenvolvedores leigos em programação.

• Director: como o Toolbook, embora seja mais sofisticado, este

software exige conhecimentos de programação na utilização de sua

linguagem, a “Lingo”.

• Macromedia Flash: O Macromedia Flash reúne a edição de áudio,

vídeo, texto e interatividade em uma só ferramenta, e também

linguagem de programação.

• Nero Burning: gravador de CD-ROMs e DVDs muito utilizado, possui

opções como gravar CD de áudio, CD de dados, CD de vídeo, DVD,

etc.

16

• Winamp: desde seu lançamento foi sinônimo de MP3, mas com o

passar dos anos as suas funções foram crescendo e hoje em dia é

possível assistir a vídeos codificados em WMV, NSV, gravar CDs, ver

transmissões em tempo real e claro, escutar arquivos em OGG, MP3,

etc.

• Windows Media Player: Aplicativo da Microsoft para a execução de

animações em formato ASF, Real Audio, Real Video, QuickTime, AVI,

WAV, MP3, Netshow, etc.

• DivX: codec responsável por reproduzir filmes de cinema, vídeo e

áudio com qualidade porém ainda é uma tecnologia emergente pois

exige uma conexão de acesso rápido.

• Word: suas principais funções são processador de textos, editor

HTML, possui funções como tradutor, correção ortográfica, dicionário

de sinônimos, etc.

• Excel: gerador de planilhas muito eficiente com várias funções

(financeira, matemática, estatística, banco de dados, texto, data e hora,

procura, lógica etc) para auxiliar na manipulação de dados.

• Power Point: gerenciador de apresentações muito utilizado para

criação de slides os quais também são muito populares em anexos de

e-mails.

• Office Outlook: ferramenta para visualização de e-mails, integrando

funções do pacote Office da Microsoft tais como gerenciamento de

tarefas com integração ao calendário, compromissos, reuniões,

contatos, anotações além de configurações como verificação de

ortografia e gramática, tradução, confirmação de leitura e entrega de e-

mail, etc.

17

• Internet Explorer: browser padrão da Microsoft Windows, muito

utilizado, pois já vem instalado no sistema operacional, contém vários

recursos que permite ao usuário caminhar pela rede da Internet com

praticidade.

• Mozilla: outro navegador da Web que, assim como o Internet Explorer,

possui bloqueador de pop-ups, download automático, search integrado,

etc.

2.7. CONCLUSÃO

Desde os primórdios da existência humana, a comunicação vem passando

por diversas reformulações, o homem sempre tenta ilustrar significados culturais

tentando mesclar principalmente dois dos cinco sentidos (visão, audição), a fim de

demonstrar os significados de tais manifestações, e sabe-se que, às vezes, um

gesto ou um olhar difere muito a forma de se interpretar um acontecimento, pois

existem fenômenos que apenas com palavras, é difícil representar seu significado,

e com o auxilio de um simples gráfico ou desenho o torna mais interessante e fácil

de ser visualizado. A tradução para tal gesto hoje é conhecida como hipertexto e a

obra global em si, conhecida como sistema hipermídia, que nada mais é que a

evolução do termo sistema multimídia.

Artistas, intelectuais e professores utilizavam metodologias de hipermídia

para uma melhor didática e praticidade. Com o passar dos séculos, essas

metodologias foram se reestruturando, novos paradigmas foram surgindo, contudo

a base do conceito continuou. A necessidade de máquinas poderosas capazes de

efetuarem cálculos de balística na Segunda Guerra Mundial levou a uma corrida

atrás de avanços tecnológicos, os quais foram significativos para a revolução nas

18

metodologias de programação de sistemas, e o maior fruto foi à criação do

computador pessoal e dos sistemas operacionais multitarefa.

Da fala à eletrônica, praticamente o mundo dos negócios se comunica via

e-mail e existem diversos sites de compras on-line os quais movimentam as

economias mundiais. Conteúdos históricos antes disponíveis somente em museus,

bibliotecas estão sendo digitalizados e publicados mundialmente através da maior

rede de computadores, a internet. E isso graças à grande fomentação ao longo do

tempo das tecnologias de integração entre representação dessas culturas (texto,

imagem, som).

As pessoas do mundo contemporâneo tentam se expressar por meios

complexos de comunicação e marketing. O novo paradigma mostra que a

Engenharia de Software precisa se reestruturar para ensinar metodologias de

projeto e implementação de hiperdocumentos, que façam a mesclagem das

diferentes áreas do conhecimento humano. Esse tema será discutido no próximo

capítulo.

19

3. METODOLOGIAS DE HIPERDOCUMENTOS

Com a globalização, multinacionais, grifes, grandes empresas, elites

(ministérios, judiciário, legislativo, executivo, estatais), grupos da sociedade

(associações, cooperativas) e até médias e pequenas empresas têm investido cada

vez mais em soluções de Hipermídia a fim de captar mais clientes e adeptos

utilizando o meio da Web. A tabela 3.1, enumera e exemplifica essa situação.

Tabela 3.1 - Categorias dos setores econômicos e alguns exemplos [8]

Categoria Exemplos Informacional Jornais e revistas on line, catálogos e produtos,

classificados on line, livros on line. Interativos Formulários de registro, apresentação de

informações customizadas, jogos on line. Transacional Lojas eletrônicas, oferecimento de bens e

serviços, bancos on line. Workflow Sistemas de gerência, planejamento,

acompanhamento on line, controle de mercadorias.

Ferramentas colaborativas Sistemas diversos de autoria. Comunidades on line, lugares de negócios Salas de bate-papo, sistemas que recomendam

produtos ou serviços e marketplaces. Portais Compras on line, fornecedores de conteúdo.

Logo, existe tendência desses investimentos aumentarem e

proporcionarem uma fomentação enorme no mercado de implementação de

hiperdocumentos, principalmente voltada para a internet.

Há também um interesse na melhora persistente da qualidade desses

sistemas, seja pela necessidade do dinamismo de mudanças de tecnologias, e pela

estabilidade dos próprios hiperdocumentos.

20

A tamanha complexidade das necessidades do mercado, a interatividade e

navegação com o usuário, o leque de diversidade de perfis de usuários, o auxílio

de profissionais de várias áreas, entre outros fatores diferem um software comum

de um hiperdocumento.

Em decorrência disso, a própria Engenharia de Software possui limites de

ensino de metodologias para construção de uma aplicação voltada para a internet

e sua reestruturação está ocorrendo naturalmente, originando assim, metodologias

de projetos para desenvolvimento de hiperdocumentos.

A seguir, será feita análise de duas dessas metodologias: a OOHDM e a

WebML.

3.1. METODOLOGIA OOHDM (The object Oriented Hipermedia Design

Model)

A metodologia OOHDM, foi desenvolvida na Pontifícia Universidade

Católica do Rio de Janeiro (PUC-RJ), por Gustavo Rossi e Daniel Schwabe. Ela

auxilia na construção de aplicações hipermídia em larga escala utilizando a

“abstração e a composição de mecanismos utilizando técnicas de orientação à

objetos, pois por um lado, a abstração é capaz de captar as descrições das

complexas informações, e de outro lado, a técnica de orientação à objetos permite

a especificação complexa de navegabilidade de testes padrões e transformações da

interface” [9].

A metodologia Hypermedia Design Model (HDM) é baseada em uma

linguagem abstrata e conceitual usada para descrever estruturas do

hiperdocumento, e seu objetivo básico é descrever as estruturas comuns do

sistema com metodologias de modelagem.

21

O HDM acarretou o aparecimento da metodologia OOHDM. A tabela 3.2

demonstra algumas características do HDM herdadas no OOHDM e outras criadas

e enriquecidas.

Tabela 3.2 - Características herdadas e criadas no OOHDM [8]

Características Herdadas do HDM Características Criadas ou Enriquecidas Reconhecimento de que a modelagem é independente do ambiente e do modelo de referência.

Não é apenas uma abordagem de modelagem, mas sim uma metodologia, pois aborda muitas atividades.

Reforça as estruturas hierárquicas, oferecendo a possibilidade da construção de agregados.

Na fase de modelagem conceitual as primitivas são mais ricas. Como são orientada a objetos suportam: agregação, generalização e herança.

Inclui o conceito de perspectivas de atributo onde cada classe folha implementa uma visão possível de atributo.

É possível fazer uso do esquema conceitual para definir perfis de usuários diferentes.

A metodologia OOHDM, consiste em basicamente quatro etapas, são elas:

Modelagem Conceitual, Modelagem de Navegação, Interface Abstrata e

Implementação.

Essas etapas não seguem o modelo de desenvolvimento em cascata, mas

sim, uma mistura de estilos iterativos, incrementais e de prototipação rápida. Em

cada passo, um modelo é construído ou enriquecido e depois do último passo, se

tem informação suficiente para implementar uma aplicação hipermídia.

Tanto a Modelagem Conceitual quanto a Modelagem de Navegação

utilizam os mesmos mecanismos (classificação, agregação, generalização e

especialização).

A Modelagem Conceitual produz as classes, relações, atributos. A

Modelagem de Navegação gera os nós, links, acessos às estruturas, contextos e

transformações.

A etapa de Interface Abstrata responde aos eventos externos e às

transformações traçadas entre a navegação e aos objetos. A implementação gera a

aplicação e depende do ambiente em que o sistema irá ser executado [9].

22

3.1.1. MODELAGEM CONCEITUAL

O enfoque da Modelagem Conceitual é analisar as propriedades da

aplicação, extraindo todas as características para o desenvolvimento do sistema,

isso não indica que todos esses elementos sejam empregados na implementação,

porque dados poderão ser rejeitados. A produção dos objetos da aplicação é obtida

através da utilização de uma notação baseada em Unified Modeling Language

(UML).

As classes “representam um conjunto de entidades que apresentam as

mesmas características (atributos, relacionamentos e métodos)” [10].

Os atributos das Classes indicam as propriedades dos objetos. A técnica

OOHDM possui uma característica na qual se consegue representar múltiplas

perspectivas em um atributo.

Os relacionamentos (unário, binário, ternário) fazem a conexão entre as

classes, os quais possuem uma cardinalidade (zero ou um, um, zero a infinito, um

a infinito e de um a um número específico) indicada no canto de cada classe, logo

acima da linha de ligação do relacionamento.

A ilustração 3.1, demonstra essas definições com mais clareza, além de

conceber a visualização da hierarquia da agregação (onde o laboratório é

composto por vários equipamentos) “representado por um relacionamento com

um losango vazio no lado da classe que agrega as outras” [10].

Figura 3.1 - Classes representadas na notação OOHDM. [8]

23

Pode-se perceber que no esquema as classes Laboratório e Equipamento

possuem ambos os mesmos atributos, no entanto, o atributo Descrição da classe

Equipamento pode conter como complemento uma imagem agregada ao texto da

descrição, além disso, há um relacionamento binário entre as classes, ao mesmo

tempo, que as cardinalidades indicam que um laboratório possui de um até

‘infinitos‘ equipamentos. O losango na ponta do relacionamento indica que a

entidade Laboratório possui uma agregação de equipamentos.

A figura 3.2 demonstra mais um exemplo de Modelagem de Conceitual na

qual se pode observar as definições citadas anteriormente.

Figura 3.2 - Classes representadas na notação OOHDM [8]

A figura 3.2 demonstra as Entidades Edifício, Arquiteto e Categoria

Edifício com suas respectivas descrições. Edifício: nome e endereço (texto), ano

(número inteiro) e descrição (texto podendo conter imagem). Arquiteto: nome

(texto) e descrição (texto podendo conter imagem). Categoria Edifício: nome e

descrição (texto).

Existe uma relação binária de Arquiteto para Edifício, denominada

Desenha, a qual possui cardinalidade (1..* / 0..*), ou seja, um ou vários arquitetos

desenham nenhum ou vários edifícios. Também existe uma outra relação binária

de Categoria Edifício para Edifício descrita Classifica que possui cardinalidade

(1..* / 0..*), significando que uma ou várias categorias classificam nenhum ou

vários edifícios.

24

3.1.2. MODELAGEM DE NAVEGAÇÃO

O desafio pelos quais os desenvolvedores de hiperdocumentos têm que

passar é a escolha das informações que irão fazer parte do sistema, bem como a

navegação entre as mesmas.

“Uma das inovações no OOHDM é realmente reconhecer que os Objetos

Navegacionais são diferentes dos Objetos Conceituais, pois os Objetos em que o

usuário navega não são os objetos do Modelo Conceitual, mas sim outros tipos de

objetos os quais são construídos de um ou mais Objetos Conceituais” [8].

De qualquer maneira, sempre é possível obter um mapeamento do tipo um

para um, no qual cada Objeto Conceitual é obtido através de um nó com um único

atributo, onde cada atributo obtido é associado a um tipo que indica a forma de

representação da informação correspondente ao mesmo.

Os formatos que um tipo de atributo pode assumir dependem da finalidade

do Sistema Hipermídia, do Ambiente Operacional ou Plataforma no qual o

Hiperdocumento será arquitetado, etc., todavia de uma maneira geral, se acaba

encontrando os tipos mais comuns como, por exemplo: texto, imagem, áudio e

vídeo (animação).

Nas Classes de Navegação são enumerados os nós e elos que

compreendem na conjuntura navegacional do Sistema. Dependendo do tipo e do

alvo da Aplicação deverão ser criados inúmeros planos de navegação para atender

cada tipo de metas de ilustração do Sistema a fim de facilitar a organização das

diversas formas de navegação consequentemente uma melhora no

desenvolvimento do Sistema como um todo.

Na metodologia OOHDM foi pré-definido um grupo de Classes de

Navegação, acarretando na elaboração de um Contexto de Navegação, formado a

partir de uma união de objetos tais como nós, links, âncoras e estruturas de

25

acessos, onde os possíveis caminhos para o usuário iniciar a navegação podem ser

criados e interagidos.

Na demonstração a seguir através da figura 3.3 [8], pode-se observar que

no quesito do Contexto (partes acinzentadas), no Contexto Arquiteto, a navegação

do usuário se dá através no Nome do Arquiteto, já no Contexto Edifício, o acesso

é obtido por meio da Data, Nome, Arquiteto ou Categoria do Edifício.

Figura 3.3 - Contexto de Navegação [8]

Analisando melhor, o Menu Principal possui quatro índices:

• Arquitetos: permite acesso a lista dos Arquitetos pelo nome deles.

• Linha do Tempo: acesso aos Edifícios pelos anos de construção.

• Edifícios: permite acesso aos Edifícios pelos nomes deles.

• Categorias: acesso aos Edifícios por categoria (monumentos, hotéis).

É interessante observar que os Edifícios podem ser agrupados de acordo

com o Arquiteto que os projetou, porém este só pode somente ser acessado pelo

contexto Arquitetos. Além disso, a figura 3.3 ilustra que ao olhar um Edifício de

26

um certo Arquiteto, o usuário pode navegar para o próximo Edifício na mesma

Categoria.

3.1.3. INTERFACE ABSTRATA

Nesta fase do Projeto serão definidas as propriedades da Interface, como

exemplo, os botões, menus, barras, por fim todos os componentes gráficos que

farão a interatividade visual com o usuário.

Como o desenho da Interface Abstrata é feito antes da implementação do

Sistema, é preciso ter atenção aos tipos dos objetos que irão ser inseridos na

Interface, uma vez que o ambiente de implementação escolhido pode possuir

limites não suportando algumas características das propriedades.

No OOHDM, a modelagem da Interface se torna muito interessante, pois o

auxílio de ferramentas como o ADVs (Abstract Data Views – Visão Abstrata de

Dados) facilita isso, também a fim de agregar facilidade, há objetos que são

denominados ADOs (Abstract Data objects – Objetos Abstratos dos Dados) nos

quais não lidam com eventos externos, interagindo com estruturas de dados e de

controle nas aplicações.

“Os ADOs estão associados a ADVs que transmitem as informações de

seus estados para fora da aplicação ou para outros ADVs” [10].

3.1.4. IMPLEMENTAÇÃO

Durante a fase de construção, através dos Contextos da Modelagem de

Navegação, são convertidos os objetos acessíveis no ambiente de Implementação

27

selecionado. Como resultado, o Sistema Hipermídia final alcançado é do tipo de

Implementação Traduzida, a qual o próprio nome diz, incide em traduzir essas

especificações em componentes de algum sistema de autoria de aplicações

hipermídia como, por exemplo, o HTML (HyperText Language Markup) e

proporcionar a apresentação da aplicação final utilizando um browser (exemplo:

Internet Explorer).

Ou seja, em suma, nesta etapa da modelagem OOHDM todas as amostras

estabelecidas anteriormente serão traduzidas para uma plataforma de

implementação, o OOHDMweb, o qual cria índices em páginas HTML

representando os Contextos a partir de informações armazenadas em tabelas.

3.2. METODOLOGIA WEBML (The Web Modeling Language)

A metodologia WebML, desenvolvida no Instituto de Eletrônica e

Informação do Politécnico de Milão (Itália), consiste em uma simples notação

com a finalidade de especificar Sistemas Hipermídia complexos a nível

conceitual, auxiliando no desenvolvimento das principais características do

Sistema em alto nível, sendo dispensável arquitetar os detalhes de mais baixo

nível [11].

Proporcionando uma representação gráfica bastante intuitiva, a WebML

facilita para que seus conceitos sejam agregados a essas apresentações. Existe

também uma simplicidade na manipulação dessas representações acarretando na

utilização de diversas ferramentas CASE (Computer Aided Software

Engineering), fazendo com que elas suportem a modelagem WebML, tornando a

implementação muito fácil, visto que no desenvolvimento de um Sistema

Hipermídia (por causa de sua complexidade, e necessidade de uma equipe com

28

membros de várias áreas da Ciência) nem todos os membros do desenvolvimento

conhecem intimamente de programação [8].

A representação de um Sistema usando a técnica WebML incide, como

produção, quatro modelos: o de Dados, o de Hipertexto, o de Apresentação e o de

Personalização. A partir desses modelos, são apresentadas quatro regras de

desenvolvimento [8]:

• Primeira: o especialista em obtenção da abstração dos dados do

Sistema efetiva a Modelagem de Dados.

• Segunda: o arquiteto da aplicação desenvolve páginas e a navegação

entre elas, através da Modelagem de Hipertexto.

• Terceira: o arquiteto de estilo elabora apresentação de estilos das

páginas, a partir da Modelagem de Apresentação.

• Quarta e última: por meio da Modelagem de Personalização, o

administrador do Sistema deve desenvolver as opções de usuários e de

personalização de grupos, incluindo também as regras de negócios.

3.2.1. MODELAGEM DOS DADOS

Na metodologia WebML também são utilizados, diagramas de classes da

notação UML para se obter os objetos, produzindo assim as Entidades (Classes,

juntamente com seus atributos, etc.) e suas respectivas Relações, através do

Modelo de Entidade e Relacionamento, (ME-R) com suas características:

cardinalidades, agregações, generalização/especialização [11].

A WebML é uma adaptação conceitual na modelagem de Sistemas. Ela é

compatível com o ME-R, e com a UML. O elemento fundamental em uma

29

modelagem de dados é conhecido como Entidade, definido como um possuidor de

elementos de dados, e relacionamentos, através de conexões entre as Entidades

[12].

As Entidades possuem propriedades, conhecidas como atributos,

associadas com um tipo de dado. Elas podem ser organizadas em hierarquias de

generalização e os relacionamentos podem ser controlados através das

cardinalidades. As instâncias das Entidades são individualmente endereçadas a

partir de um único identificador [12].

A figura 3.4 ilustra a Modelagem de Dados.

Figura 3.4 - Modelagem de Dados WebML [13]

Claramente se observa as Entidades Artista, Álbum, e Música organizados

em certa hierarquia.

A Entidade Artista possui dois atributos: nome, e biografia; enquanto

Álbum possui título e duração e já a Música, título e ano de produção.

Além disso, pode se ver com facilidade as Cardinalidades das Relações

entre as Entidades.

Artista possui um ou vários Álbuns, enquanto esse possui uma ou várias

Músicas. Entretanto, uma Entidade Música possui apenas um Álbum, enquanto

um ou vários Álbuns possuem um ou vários Artistas.

30

O código XML (Extensible Markup Language), a seguir representa a

especificação WebML da figura 3.4 [13].

<DOMAIN id="SupportType" values="CD Tape Vinyl">

<ENTITY id="Album">

<ATTRIBUTE id="title" type="String"/>

<ATTRIBUTE id="cover" type="Image"/>

<ATTRIBUTE id="year" type="Integer"/>

<RELATIONSHIP id="Album2Artist" to="Artist"

inverse="ArtistToAlbum"

minCard="1" maxCard="1"/>

<RELATIONSHIP id="Album2Track to="Track"

inverse="Track2Album"

minCard="1" maxCard="N"/>

</ENTITY>

<ENTITY id="Artist">

<ATTRIBUTE id="Name" type="String"/>

<ATTRIBUTE id="biographicInfo" type="Text"/>

<RELATIONSHIP id="Artist2Album" to="Album"

inverse="Album2Artist"

minCard="1" maxCard="N"/>

</ENTITY>

<ENTITY id="Track">

<ATTRIBUTE id="title" type="String"/>

<ATTRIBUTE id="year" type="Integer"/>

<RELATIONSHIP id="Track2Album" to="Album"

inverse="Album2Track" minCard="1" maxCard="1"/>

</ENTITY>

3.2.2. MODELAGEM DE HIPERTEXTO

Nesta etapa da modelagem, são especificadas a composição das

propriedades do Sistema e sua navegação. É também neste modelo que o

Hipertexto é composto por páginas, que por sua vez são compostas de Units.

31

“As Units são os elementos utilizados para publicar as informações

descritas no modelo de dados. As Units podem ser de seis tipos diferentes: data,

multi-data, index, filter, scroller, direct-units” [8].

A seguir serão detalhados esses tipos [13]:

• Data Units: mostram informações de um único objeto.

• Multidata Units: mostram informações de vários objetos.

• Index Units: mostram uma lista de objetos (entidade ou instância de

componentes), sem a apresentação detalhada das informações de cada

objeto.

• Scroller Units: mostram comandos de acesso dos elementos ordenados

de uma lista de objetos.

• Filter Units: mostram campos de edição de valores usados para

procurar em uma lista de objetos, os que encaixam na condição.

• Direct Units: não mostram nenhuma informação, e são usados para

denotar uma conexão de um único objeto que é relacionado com outro

objeto.

A seguir as figuras 3.5 a 3.9 juntamente com os códigos XML ilustram as

seis classificações de Units definidas anteriormente. A primeira figura, 3.5

demonstra a Data Unit.

Figura 3.5 - Data Units. [13]

32

<DATAUNIT id="ShortArtist" entity="Artist">

<INCLUDE attribute="firstName"/>

<INCLUDE attribute="lastName"/>

<INCLUDE attribute="photo"/>

</DATAUNIT>

A figura 3.5 junto com o código XML demonstrou a implementação de

uma Data Unit. A figura 3.6 mostra um exemplo de Multidata Unit.

Figura 3.6 - Multidata Units [13]

<MULTIDATAUNIT id="MultiAlbumUnit" entity="Album">

<DATAUNIT id="AlbumUnit" entity="Album">

<INCLUDEALL/>

</DATAUNIT>

</MULTIDATAUNIT>


uma Multidata Unit. A figura 3.7 mostra um exemplo de Index Unit.

Figura 3.7 - Index Units. [13]

33

<INDEXUNIT

id="AlbumIndex"

entity="Album">

<DESCRIPTION Key="title"/>

</INDEXUNIT>


uma Index Unit. A figura 3.8 mostra um exemplo de Scroller Unit.

Figura 3.8 - Scroller Units [13]

<SCROLLERUNIT id="AlbumScroll" entity="Album"

first="yes" last="yes" previous="yes" next="yes"/>


uma Scroller Unit. A figura 3.9 mostra um exemplo de Filter Unit.

Figura 3.9 - Filter Units [13]

<FILTERUNIT id="AlbumFilter" entity="Album"/>

</SEARCHATTRIBUTE name="title" predicate="like">

</SEARCHATTRIBUTE name="year" predicate="between">

</FILTERUNIT>

34


uma Filter Unit. A figura 3.10 mostra um exemplo de Direct Unit.

Figura 3.10 - Direct Units [13]

<DIRECTUNIT id="ToArtist" relation="Album2Artist"/>


uma Direct Unit.

Em suma, o que difere uma Unit da outra são as diversas formas de

representar a publicação e as variadas maneiras de setar os objetos com elas

relacionadas.

A navegação também é determinada nesta etapa da modelagem, e como já

se sabe a navegação em um Sistema Hipermídia é normalmente feito através dos

links. A WebML representa esses links basicamente de duas formas conforme a

figura 3.11.

Figura 3.11 - Links automáticos e de transporte [11]

35

Como os próprios nomes sugerem e a figura 3.11 demonstra a diferença

entre os dois tipos é que no Link Automático, o acesso se dá de um

comportamento mais complexo, ou seja, quando o usuário selecionar um álbum,

ocorrerá não apenas a seleção, mas também, uma armazenagem do index da

escolha.

Será produzida através de uma Data Unit a página Álbum Selecionado, o

qual demonstra alguns atributos relacionados ao álbum clicado pela interação do

usuário com o sistema.

Já o tipo Link de Transporte, assim como o nome sugere, ele apenas serve

como um canal de comunicação, sem que seja necessária a escolha de uma opção

pelo usuário.

A figura 3.11 ilustra isso perfeitamente: ao criar a página do artista, a Data

Unit utilizou desse tipo de artifício para mostrar os álbuns relacionados com esse

mesmo artista, sem a interação direta do usuário com a aplicação.

3.2.3. MODELAGEM DE APRESENTAÇÃO

A metodologia WebML não possui uma representação gráfica em relação a

uma escala conceitual do Sistema, contudo, as especificações de WebML podem

ser descritas e caracterizadas utilizando a linguagem XML (Extensible Markup

Language).

A apresentação das páginas é considerada como uma transformação

(extensão) desses documentos, já a construção é elaborada em uma página escrita

usando uma linguagem de programação voltada para a Web.

36

“Conseqüentemente, a construção de modelos para a apresentação das

páginas podem ser construídos utilizando-se XSL (Extensible Style Sheet

Language) .” [8]

“A utilização de XSL vem a substituir os famosos CSS (Cascading Style

Sheets), pois o XSL adotou a sintaxe do XML, podendo assim ser incluído na

especificação WebML. Outro fato importante é que o XSL não manipula

elementos, manipula objetos gráficos.” [8]

Ou seja, na etapa de Modelagem de Apresentação, a técnica WebML, se

baseia mais especificamente em documentos XLS, integrados com XML, a fim de

que fragmentos destes documentos sejam transformados em objetos gráficos,

fazendo com que a interação destes objetos com a apresentação dos mesmos

através de páginas Web com os usuários, seja obtida de uma forma simples e

natural.

3.2.4. MODELAGEM DE PERSONALIZAÇÃO

Usuários e grupos segmentados de usuários, são explicitamente modelados

na forma de entidades pré-definida, chamadas de User e Group.

As características dessas entidades podem ser usadas para armazenar o

conteúdo de um grupo específico, ou do usuário individualmente, ou seja, pode-se

controlar os conteúdos específicos para as categorias criadas, mas também, tem-se

controle individual das informações como por exemplo ver sugestões, listar

favoritos e otimizar recursos gráficos.

Após serem efetuadas todas as etapas de um Sistema em modelagem

WebML, pode-se utilizar uma ferramenta CASE para obter automaticamente a

aplicação a partir dos diagramas criados com a metodologia [8].

37

3.3. CONCLUSÃO

Não cabe aqui julgar qual das metodologias descrita (OOHDM e WebML)

é melhor, mas sim demonstrar como é complexa a elaboração de um Sistema

Hipermídia, e que essas metodologias auxiliam na construção e manutenção das

aplicações.

Na metodologia OOHDM é possível desenvolver projetos modulares e de

fácil manutenção, pois a Modelagem Conceitual, Navegacional e o Projeto de

Interface são abordados como atividades separadas permitindo um enfoque

diferente para cada uma dessas fases.

A metodologia WebML, utiliza a modelagem UML para a obtenção dos

dados, gerando fases bem definidas na modelagem do projeto do Sistema,

facilitando o trabalho (construção e manutenção) da equipe envolvida, ela também

possui ferramentas para publicação das informações (Data Units) que ajudam no

desenvolvimento do Sistema.

Em suma, ambas técnicas são úteis para a arquitetura de um Sistema

Hipermídia, portanto, será usada no Capítulo 4 (Desenvolvimento do Sistema) a

técnica WebML por se tratar de uma técnica mais compacta podendo ser adotada

para pequenos projetos.

38

4. DESENVOLVIMENTO DE UM HIPERDOCUMENTO

Como já foi citado, o hiperdocumento será fabricado através da

metodologia WebML através da ferramenta CASE (Computer Aided Software

Engineering) WebRatio.

Os desenvolvedores da ferramenta são os mesmos pesquisadores do

Politécnico de Milão que criaram a metodologia WebML. Patenteada na Itália,

Europa e Estados Unidos, a WebML é reconhecida como a solução inovadora para

modelagem visual de aplicações Web [14].

WebRatio é o primeiro ambiente de desenvolvimento do mundo a integrar

a técnica WebML juntamente com a plataforma JAVA J2EE e instrumentos para

criação da documentação do Sistema, útil na etapa de manutenção do mesmo [14].

A seguir, será elaborado passo a passo, de como se procede a instalação da

ferramenta WebRatio.

4.1. INSTALAÇÃO DA FERRAMENTA WEBRATIO

Primeiramente, antes de qualquer ação, deve-se ficar atento aos itens que a

ferramenta necessita para conseguir efetivamente rodar com sucesso.

39

Na tabela 4.1 se enumera os pré-requisitos relacionados à Licença

Profissional e tomando como base de que será utilizada a versão de Trial que se

baseia na própria Licença Profissional com o limite de uso do software por 60 dias

após a instalação.

Tabela 4.1 - Requisitos WebRatio versão 4.0.11 [14]

Sistemas Operacionais Windows 2000/ XP/ 2003. Linux Java Development Kit (JDK) Versão 1.3.1 ou Superior RAM Mínimo 256 Mb (512 Mb recomendado) Espaço Livre no HD 100 Mb Resolução de Vídeo Mínimo 800 x 600 (1024 x 768 recomendado)

Banco de Dados Suportados Oracle 8i/9i, IBM DB2, Microsoft SQLServer 2000, PostgreSQL, MySQL, Microsoft Acces (potencialmente todo BD com drive JDBC)

Servidores de Aplicação Suportados

Sum One Application erver, IBM WebSphere Application Server, BEA WebLogic Server, Oracle 9i Application Server, Novell extend Application Server, Orion Application Server, Caucho Resin, Apache Tomcat (potencialmente todo servidor de aplicação com suporte JSP 1.1 – JSP1.2)

Um dos requisitos é a pré-instalação do JDK 1.3.1 ou Superior, facilmente

encontrado no site http://java.sun.com. Na versão 1.5.0.20, a qual foi utilizado o

setup, ocupa o espaço em disco de exatamente 53.587.968 bytes, ou seja,

aproximadamente 51,1 MB, compactado e após a sua instalação aproximadamente

120MB.

A ferramenta também necessita de no mínimo o Windows 2000, pois

utiliza variáveis de ambiente DOS as quais não são bem gerenciadas, por

exemplo, na versão do Windows 98.

Para se obter o download do WebRatio, basta acessar o site

http://www.webratio.com, selecionar o idioma English, e através do menu do lado

esquerdo escolher a opção Registration. Logo em seguida, abrirá a página de

registro de usuário o qual deverão ser preenchidos todos os itens da seguinte

forma:

40

• No campo E-mail, precisa ser inserido um e-mail válido pois nele será

enviada a senha de acesso à área de download além da chave de

registro da versão trial.

• No campo Salutation estão enumeradas de como é a saudação do nome

da pessoa a efetuar o registro.

• No item First Name, deverá ser escrito o primeiro nome da pessoa e no

campo Last Name, o último sobrenome da mesma pessoa.

• No item Phone, precisa ser inserido o telefone da pessoa e caso ela

possua celular, o número deverá ser escrito no campo abaixo chamado

Mobile.

• Na opção User Type, necessita selecionar o perfil da pessoa e o vinculo

que isso tem com o download da ferramenta, ou seja, se o motivo é de

caráter empresarial, de negociador, de professor, de estudante, de

jornalista.

Ao clicar em Continue, será gerada uma senha a qual é enviada ao e-mail

cadastrado anteriormente, basta anotar essa senha.

Novamente, através do menu do lado esquerdo escolher a opção

Download, clicar em login, no campo username deve informar o e-mail

cadastrado e no campo password, a senha.

Ao acessar a área de download, existem dois tipos de arquivo de

instalação, um para ambiente de sistema operacional Linux, e outro para Windows.

Ao selecionar o tipo de sistema operacional, deve concordar com os

termos de utilização da ferramenta e logo será feito o redirecionamento para a

baixa do setup como também o envio de um novo e-mail agora com a chave de

ativação (sessenta dias de utilização) da ferramenta.

41

O setup ocupa em disco exatamente 38.633.472 bytes, ou seja,

aproximadamente 36,8 MB compactado e depois da instalação, também

aproximadamente 120 MB.

Ao terminar o download, basta executar o setup, inicialmente a ferramenta

não encontra o JDK, mas logo após tem-se a opção para selecionar a pasta do

mesmo manualmente, será perguntado que tipo de instalação se necessita, basta

prosseguir, e logo depois será perguntado o usuário de ativação juntamente com a

chave de registro da ferramenta, os quais foram enviados ao e-mail cadastrado

para fazer login no site.

Ao concluir a instalação, serão criados os ícones na pasta de nome de

WebRatio 4.0 contido no Menu Iniciar.

O Servidor Banco de Dados utilizado neste Estudo de Caso é o MySQL o

qual vem no pacote do XAMPP, o qual pode ser encontrado no site

http://www.apachefriends.org. Na versão 1.4.14 a qual foi utilizada, o setup ocupa

o espaço em disco de aproximadamente 25,5 MB (26.746.880 bytes), compactado

e após a sua instalação aproximadamente 190 MB.

Logo, percebe-se que na tabela 4.1 relacionada há um equivoco na

informação de que são necessários apenas 100 MB de espaço livre no HD, e que

sim são necessários aproximadamente 430 MB para instalação de todos os

requisitos.

Também é necessário de fazer o download do pacote mysql-connector-

java-3.2.0-alpha-bin.jar (395 KB), o qual é facilmente encontrado em no site

http://mysql.com, ele deve ser salvo na pasta WebRatio-4.0\SDS\lib\ext e também

na pasta do jdk1.5.0_02, subpastas \jre\lib\ext.

Para continuar o procedimento de ativação do software, basta clicar no

atalho de nome WebRatio 4, e se necessitar de configuração do proxy, informar as

devidas informações, caso contrário apenas prosseguir.

42

Ao concluir essas etapas, a ferramenta estará apta para a modelagem um

hiperdocumento.

4.2. MODELAGEM DE DADOS

Conforme o capítulo 3, a primeira etapa da metodologia WebML se baseia

na Modelagem de Dados, e também no WebRatio o primeiro passo é justamente

esboçar o Modelo Conceitual.

Ao clicar na paleta File | New ou (CTRL+N), é aberto o ambiente onde se

deve modelar os dados. Inicialmente as entidades User, Group e SiteView já são

criadas e não podem ser removidas pois fazem parte da estrutura do sistema (uma

parte da extensão da Modelagem de Personalização), todavia no tópico

conveniente será novamente levantada a questão para uma melhor compreensão.

Na versão trial da ferramenta estas entidades têm que ser renomeadas para

o português manualmente, diferente da versão corporativa, onde já se pode pré-

definir este detalhe antes.

Para se adicionar uma nova entidade ao ambiente basta clicar com o botão

direito no ambiente e depois em Add Entity, ela será nomeada com o nome de

Entity e número crescente de sua criação, e basta mudar o campo Name para

renomear a mesma.

O atributo OID é criado em todas as entidades e serve justamente como o

índice dos registros da entidade.

Para adicionar novos atributos à entidade, é preciso clicar com o botão

direito em cima da entidade desejada e logo depois clicar em Add Attribute. O

mesmo acontecendo com os atributos, onde eles serão nomeados com o nome de

43

Attribute e número crescente de sua criação, bastando mudar o campo Name para

renomear o mesmo.

Outro campo que é bastante utilizado é o Type, onde se especifica um tipo

(String, Text, Password, Integer, Number, Float, Date, Time, TimeStamp,

Boolean, URL e Binary Large Object) particular de dado do campo.

Ao escolher o tipo Binary Large Object (BLOB) é aconselhável escolher o

tipo de arquivo através do campo Content-type (image, image/gif, image/jpg,

image/png, application/zip, application/pdf, application/doc).

E para adicionar as relações entre as entidades basta escolher a entidade

clicando com o botão direito em cima da mesma e logo depois clicar em Add

Relationship (para adicionar um relacionamento simples) ou Add Generalization

Link (para adicionar um relacionamento do tipo herança), logo depois basta levar

o mouse à outra entidade a qual a primeira se relaciona e clicar em cima da

mesma.

No canto esquerdo da tela, na paleta Editing View / Project Tree / Data

Structure / Relationships, pode-se ter acesso a todas as cardinalidades dos

relacionamentos entre as entidades (através dos campos Min Card e Max Card)

assim como também se tem acesso à mudança dos nomes das relações a partir do

campo Name.

No estudo de caso deste capítulo, o sistema produzido será uma página na

internet pela qual se pode enviar e ler receitas de diversos tipos de categorias de

comidas. e onde a parte administrativa do site tem acessos de inserção e remoção

de categorias e remoção de receitas.

Ao terminar de modelar o Modelo Conceitual do sistema, o ambiente de

Modelagem de Dados apresenta-se de acordo com a figura 4.1 e os

relacionamentos entre as entidades a partir da figura 4.2:

44

Figura 4.1 - Estrutura de Dados do Sistema [15]

Figura 4.2 - Relacionamentos das Entidades [15]

Antes de salvar o projeto, deve-se nomear o site clicando na paleta Editing

View / Project Tree e alterar o campo Site Name para receitas.

Para salvar, pressionar CTRL+S ou ir na paleta File | Save. Será aberta

uma janela perguntando o Nome do Projeto, no caso do Sistema deste capítulo, foi

escolhido o nome: receitas.

Logo, todos os arquivos do projeto serão salvos na pasta do WebRatio na

subpasta DataRepository\receitas.

A própria ferramenta cria toda a estrutura de banco de dados a partir do

Modelo Conceitual apresentado na figura 4.1, bastando apenas à criação do banco

e informando algumas configurações.

45

Supondo que foi criado no MySQL um banco chamado receitas, basta ir à

paleta Mapping View / Project Tree / Data Sources do WebRatio, clicar o botão

direito acima de Data Sources e clicar em Add Data Source.

No campo Name possui o nome da fonte de dados, pode ser qualquer

nome. Já no campo JDBC Driver, deve ser selecionado a opção MySQL, já que a

estrutura de dados a ser criada é a partir do banco de dados criado no MySQL. No

campo JDBC URL, deve ser informado o endereço do banco, ex.:

jdbc:mysql://localhost/receitas. E nos campos Username e Password os dados

para acesso ao banco.

Para testar a conexão, verifique se o MySQL está ativo e depois clique o

botão direito acima da fonte de dados criada e logo após clique em Refresh.

Para criar a estrutura de tabelas e atributos basta clicar de novo o botão

direito acima da fonte de dados e em Create Empty Data Mapping.

Logo após a fase de Modelagem de Dados estar concluída, é preciso

modelar a apresentação de hipertextos.

4.3. MODELAGEM DE HIPERTEXTO

Nesta etapa ocorre a organização da navegabilidade de todo o sistema.

Na ferramenta, há como separar por Site Views (sv), ou seja, por “visão de

sites”, ou melhor, por áreas de acesso a implementação das páginas.

No caso do Sistema de Receitas, foi ocasionada esta divisão em duas

partes, o sv1 (Visitantes) e o sv2 (Administração), em que os próprios nomes já

sugerem muito bem o que cada seção dessas é capaz.

46

A seguir, para um melhor entendimento, será dividida a modelagem de

acordo com as duas “visões do site”.

Na área de Visitantes, todas as pessoas que acessarem o site poderão listar

as receitas a partir das categorias delas, ou a partir de uma listagem completa de

todas as receitas ou também através de um mecanismo de busca por nome da

receita. Todos têm acesso à inserção de receitas. Existe uma página para validação

de login a fim de redirecionar o usuário para a área administrativa.

Já na área de Administração, os usuários com esse privilégio poderão,

além de alterar, criar ou remover as categorias (lembrando que ao apagar uma

categoria, todas as receitas vinculadas a ela serão automaticamente excluídas),

terão acesso de remoção de qualquer receita. Também terão o comando de efetuar

logout, ou seja, voltar para o ambiente dos usuários comuns.

4.3.1. VISÃO DOS VISITANTES

O primeiro passo é criar o SV, bastando apenas ir à paleta Editing View /

Project Tree / Site Composition e clicar com o botão direito em cima de Site-

Views, logo depois clicar em Add Site-View e depois alterar o campo Name de

Site-View 1 para Visitantes.

Agora, todo o trabalho de modelagem da navegabilidade se dará através

dos botões que aparecem depois da criação do novo sv.

O segundo passo é criar uma área (serve para organizar melhor as diversas

páginas a serem criadas). Para efetuar esse procedimento basta clicar no botão

Add Area e clicar na posição do ambiente desejada, sendo que o campo Name

deve ser alterado de Area 1 para Bem-vindo.

47

Na área de Visitantes, todas as pessoas que acessarem o site poderão listar

as receitas a partir das categorias delas, esta será a primeira função a ser

modelada.

4.3.1.1. PÁGINAS CATEGORIAS E VISUALIZAR RECEITAS

A primeira página a ser inserida dentro da área criada deve ser a página

principal do site. Para inserir uma página, basta clicar no botão Add Page e

selecionar a posição, não se esquecendo de alterar o campo Name de acordo com a

comodidade.

Como esta página é a principal, se deve marcar os campos Landmak (serve

para que depois da criação da página, ao se criar um menu no layout, o acesso

desta mesma página seja inserido neste menu) e também o campo Home

(justamente para indicar que a página é a página principal da área).

A página principal tem o campo Name igual a Categorias, e além disso é

adicionado um Index Unit dentro dela.

Para adicioná-lo, basta clicar no botão Index Unit e logo depois em cima

da página Categorias. O campo Name do Index Unit deve ser mudado para Todas

as Categorias, o campo Entity precisa ser selecionado a entidade Categoria, o

campo Shown Attributes necessita ser escolhido apenas o atributo NomeCategoria

e no campo Sort Attributes deve ser selecionado Ascending na paleta Ordering.

Na página principal irá conter uma lista de todas as categorias as quais

serão listados os nomes das categorias ordenadas ascendentemente.

A fim de mostrar as receitas vinculadas às categorias listadas na página

principal, outra página será criada, do mesmo modo que se criou a primeira, mas

48

não devem ser marcados os campos Landmark e Home, apenas mudar o campo

Name para Visualizar Receitas.

Nesta página se adiciona uma estrutura Data Unit e outra Index Unit. Na

Data Unit, os campos Name e Entity devem conter o nome Categoria, enquanto o

campo Shown Attribute o nome NomeCategoria. No Index Unit, o campo Name

passa a ser chamado de Receitas por Categoria, o campo Entity deve ser

selecionada a entidade Receita, no campo Shown Attributes são escolhidos os

atributos Titulo, Foto e Descricao e no Sort Attributes o atributo Titulo é indicado

como Ascending na paleta Ordering.

É necessário também adicionar uma condição na Data Unit a fim de

mostrar apenas a categoria selecionada na página principal. Para fazer isto, basta

clicar com o botão direito em cima da mesma e depois clicar em Add Selector

Condition. O campo Name pode ser substituído por Condicao1, e no campo

Attributes é selecionado o atributo OID.

O mesmo procedimento vai ocorrer no Index Unit, mas o campo Name

pode ser chamado de Condicao2, e no campo Relationship é escolhido o

relacionamento Categoria_2_Receita.

Para criar os links basta clicar no botão Add Link e selecionar a origem e o

destino. Neste estágio serão criados três links.

O primeiro deve ser de origem Index Unit – Todas as Categorias e destino

Data Unit – Categoria e campo Name modificado para Ver Receitas. Depois é

preciso clicar com botão direito em cima do link, e clicar em Parameters

Coupling, desmarcar o item Enable default parameters coupling e na paleta

Outgoing Parameters na direção de Target – Condicao1, selecionar Source –

OID.

O segundo tem origem Data Unit – Categoria e destino Index Unit –

Todas as Categorias e campo Name igual a Voltar a Categorias.

49

E o terceiro e último origem Data Unit – Categoria, destino Index Unit –

Receitas por Categoria e campo Type igual a Transport. Clicar com botão direito

em cima do link, e clicar em Parameters Coupling, desmarcar o item Enable

default parameters coupling e na paleta Outgoing Parameters na direção de

Target – Condicao2, selecionar Source – Displayed Object.

No final desta etapa, a aparência na Modelagem de Hipertexto, as páginas

Categorias e Visualizar Receitas têm que estar de acordo com a figura 4.3:

Figura 4.3 - Páginas Categorias e Visualizar Receitas [15]

Outro modo de listagem das receitas pode ser obtida através de uma

procura completa de todos os registros encontrados no banco.

4.3.1.2. PÁGINAS RECEITAS

Nesta página ocorrerá a montagem da lista de todas as receitas contidas no

banco de dados do sistema.

50

Basta adicionar uma página dentro da área Bem-vindo, e renomear o

campo Name para Receitas, e também marcar o campo Landmark, a fim de todos

os usuários acessarem este comando a partir do menu a ser criado

automaticamente na geração das páginas.

A seguir, inserir um Multi Data Unit através do respectivo botão com o

mesmo nome. No campo Name alterar para Todas as Receitas, o campo Entity

para Receita, no campo Shown Attributes são escolhidos os atributos Titulo, Foto

e Descricao e no Sort Attributes o atributo Titulo é indicado como Ascending na

paleta Ordering.

No final desta etapa a aparência na Modelagem de Hipertexto, a página

Receitas tem de estar de acordo com a figura 4.4:

Figura 4.4 - Página Receitas [15]

Outra função implementada no sistema para visualização de uma receita é

a partir do mecanismo de busca.

4.3.1.3. PÁGINA BUSCA

Com o intuito de criar um procedimento de busca no banco de dados do

sistema a partir do título da receita, é preciso primeiramente inserir uma página

cujo campo Name deve conter o nome Busca e o campo Landmark marcado.

51

Logo a seguir, deve-se inserir as estruturas Entry Unit, Index Unit e Data

Unit dentro na mesma página criada anteriormente.

No Entry Unit, o item Name é mudado para Receita. E é clicado o botão

direito acima do mesmo e depois clicado em Add Field, o qual o campo Name é

alterado para Título.

Já no Index Unit, Name é igual a Resultado, Entity é selecionada a

entidade Receita e Shown Attributes e Sort Attributes (opção Ordering Ascending)

é escolhido o atributo Titulo. Também é adicionado um Selector clicando o botão

direito acima do Index Unit e depois clicando em Add Selector Condition, onde

Name pode ser chamado de Condicao3, Attributes é selecionado o atributo Titulo

e em Predicate a opção Contains.

Na estrutura Data Unit, o campo Name é modificado para Detalhe, o item

Entity é selecionada a entidade Receita e no campo Shown Attributes são

escolhidos os atributos Titulo, Foto e Descricao e no Sort Attributes o atributo

Titulo é indicado como Ascending na paleta Ordering. É ainda adicionado um

Selector clicando o botão direito acima do Data Unit e depois clicando em Add

Selector Condition, onde Name é chamado de Condicao4 e em Attributes é

selecionado o atributo Titulo.

Para criar os links basta clicar no botão Add Link e selecionar a origem e o

destino. Neste estágio serão criados dois links.

O primeiro deve ser de origem Entry Unit – Receita e destino Index Unit –

Resultado e campo Name modificado para Buscar. Depois tem que clicar o botão

direito acima do link, e clicar em Parameters Coupling, desmarcar o item Enable

default parameters coupling e na paleta Outgoing Parameters na direção de

Target – Condicao3, selecionar Source – Título.

E o segundo e último origem Index Unit – Resultado, destino Data Unit –

Detalhe e campo Name igual a Detalhe. Clicar o botão direito acima do link, e

52

clicar em Parameters Coupling, desmarcar o item Enable default parameters

coupling e na paleta Outgoing Parameters na direção de Target – Condicao4,

selecionar Source – OID.

No final desta etapa, a aparência na Modelagem de Hipertexto, a página

Busca tem que estar de acordo com a figura 4.5:

Figura 4.5 - Página Busca [15]

Outra função do sistema é a inserção de receitas, e qualquer usuário pode

colaborar com esta tarefa.

4.3.1.4. PÁGINAS INSERINDO RECEITA E FALHA

Estas páginas são responsáveis pelo método de inserção de uma receita no

bando de dados do sistema.

Primeiramente, é necessário inserir duas páginas na área, uma com o nome

de Inserindo Receita e outra com o nome de Falha.

Na página Inserindo Receita, adicionar a estrutura Entry Unit nomeando-a

de Receita, e adicionar os campos (clicando o botão direito acima do mesmo e

depois clicando Add Field):

53

• Categoria: marcar somente campo Preloaded e adicionar Slot (clicando

o botão direito acima de Categoria e depois clicar Add Slot).

• CategoriaOID: marcar campo Preloaded e Hidden e adicionar Slot

(clicando o botão direito acima de CategoriaOID e depois clicar Add

Slot).

• Descrição: marcar somente campo Modifiable, no campo Type

selecionar BLOB e em Content Type escolher opção application/doc.

• Foto: marcar somente campo Modifiable, no campo Type selecionar

BLOB e em Content Type escolher opção image.

• Título: marcar somente campo Modifiable.

Na página Falha, deve-se também adicionar a estrutura Entry Unit, mas

somente nomeá-la de Erro ao Inserir e não adicionar nenhum campo.

Entre as duas páginas criadas anteriormente, ou seja, na própria área,

adicionar as estruturas Create Unit (Name igual Adiciona e Entity igual à Receita)

e Connect Unit (Name igual a Conecta e Relationship igual a

Receita_2_Categoria). Onde os links utilizados nestas estruturas são os OK-links e

os KO-links (localizados também na barra de botões).

Adicionar um KO-link de origem Adiciona e destino Falha, adicionar

outro KO-link, agora de origem Conecta e destino Falha.

Também inserir um link normal de origem Falha – Erro ao Inserir e

destino Inserindo Receita – Receita cujo nome deve ser Voltar.

Inserir um link de nome Inserir Receita, de origem Inserindo Receita –

Receita para o destino Categorias – Todas as Categorias de nome Cancelar. Além

disso, adicionar um link de origem Categorias – Todas as Categorias e destino

Inserindo Receita – Receita, o qual o Parameters Coupling deve ser setado na

paleta Outgoing Parameters da seguinte maneira:

54

• Source: Selected Object – Target: CategoriaOID

• Source: NomeCategoria – Target: Categoria

Outro link que deve ser adicionado é o de origem Inserindo Receita –

Receita para destino Adiciona cujo nome deve ser Adicionar. Na estrutura

Parameters Coupling deve ser setado na paleta Outgoing Parameters a seguinte

relação:

• Source: OID – Target: (deixar em branco)

• Source: Título – Target: Titulo

• Source: Foto – Target: Foto

• Source: Descrição – Target: Descrição

Ainda no Parameters Coupling, mas agora na paleta Passing Parameters,

marcar a opção CategoriaOID.

Adicionar dois OK-links, um de origem Adiciona para destino Conecta e o

outro de origem Conecta para destino Visualizar Receitas – Categoria.

No primeiro a estrutura Parameters Coupling deve ser setado na aba

Outgoing Parameters a seguinte relação:

• Source: New Object – Target: Source (set of) Receita

• Source: CategoriaOID – Target: Target (set of) Categoria

Ainda no Parameters Coupling, mas agora na aba Passing Parameters,

marcar a opção CategoriaOID_PASSING.

No segundo OK-link, através do Parameters Coupling, na paleta Outgoing

Parameters selecionar a seguinte combinação, Source – CategoriaOID_PASSING

e Target – Condicao1.

55

Ao fim da tarefa as inter-relações entre as páginas devem estar de acordo

com a figura 4.6:

Figura 4.6 - Páginas Inserindo Receita e Falha [15]

Agora falta somente implementar a página de validação de usuário a fim

de redirecionar o mesmo para a Administração do Site.

4.3.1.5. PÁGINAS ÁREA RESTRITA E USUÁRIO OU SENHA

INVÁLIDOS

Com a função de fazer a verificação de acesso à parte privativa do sistema,

e com a finalidade de apenas desviar para a outra “visão”, para o outro conteúdo

do site (parte administrativa), deve-se criar duas páginas, uma com nome de Área

Restrita e cujo campo Landmark é selecionado, e outra com o nome de Usuário ou

Senha Inválidos.

Ambas as páginas possuem a mesma estrutura, ou seja, o Entry Unit, o

qual possui os campos (para adicionar um campo ao Entry Unit, clicar com botão

56

direito em cima do mesmo e depois clicar em Add Field) Usuário e Senha,

contudo no Entry Unit da Área Restrita o nome do mesmo é renomeado para

Administração, enquanto no da outra página é alterado para Tente Novamente.

Precisa-se adicionar a estrutura Login Unit entre as duas páginas, e entre o

Login Unit (origem) e a página Usuário ou Senha Inválidos (destino), inserir um

KO-link.

Outros dois links que devem ser implementados e que tem a mesma

descrição, são dos dois Entry Unit (origem) e que vão para o Login Unit (destino).

Ambos têm o mesmo nome, Entrar.

E do mesmo modo possuem a mesma estrutura do Parameters Coupling,

onde na paleta Outgoing Parameters a seleção se dá da seguinte maneira: Source

– Usuario e Target – Username e Source – Senha e Target – Password.

Para uma melhor abstração da Modelagem de Hipertexto a figura 4.7

ilustra as duas páginas trabalhadas anteriormente:

Figura 4.7 - Páginas Área Restrita e Usuário ou Senha Inválidos. [15]

A visão dos usuários está concluída, agora na área de Administração, os

usuários com privilégio poderão além de modificar, inserir ou deletar as

categorias (lembrando que ao apagar uma categoria, todas as receitas vinculadas a

ela serão automaticamente excluídas), terão acesso de exclusão de qualquer

receita como também poderão voltar ao espaço dos visitantes.

57

4.3.2. VISÃO DOS ADMINISTRADORES

O primeiro passo é criar o SV, bastando apenas ir à paleta Editing View /

Project Tree / Site Composition e clicar com o botão direito em cima de Site-

Views, logo depois clicar em Add Site-View e depois alterar o campo Name de

Site-View 2 para Administração e marcar a opção Protected, indicando que o

acesso desta área só pode ser feito por pessoas autorizadas para tal.

O segundo passo é criar a área (a qual serve para organizar melhor as

diversas páginas que vão ser adicionadas no período de modelagem). Para efetuar

este procedimento basta clicar no botão Add Area e clicar na posição do ambiente

desejada, sendo que o campo Name deve ser alterado de Area 2 para

Administração. Na área de Administração, todas as pessoas que acessarem o site

poderão listar as categorias das receitas, além de poder modificar as mesmas, estas

serão as primeiras funções a serem modeladas.

4.3.2.1. PÁGINAS CATEGORIAS, MODIFICANDO CATEGORIAS E

FALHA

A primeira página a ser inserida dentro da área criada deve ser a página

principal do site. Para inserir uma página basta clicar o botão Add Page e

selecionar a posição, não se esquecendo de alterar o campo Name de acordo com a

comodidade.

Como essa página é a principal, deverão ser marcados os campos Landmak

(serve para que depois da criação da página, ao se criar um menu no layout, o

acesso desta mesma página seja inserido neste menu) e também o campo Home

(justamente para indicar que a página é a página principal da área).

58

A página principal tem o campo Name igual a Categorias, e além disso é

adicionado um Index Unit dentro dela.

Para adicioná-lo basta clicar o botão Index Unit e logo depois acima da

página Categorias, o campo Name do Index Unit deve ser mudado para

Categorias, o campo Entity precisa ser selecionado a entidade Categoria, o campo

Shown Attributes necessita ser escolhido apenas o atributo NomeCategoria. Já no

campo Sort Attributes deve ser selecionado Ascending na paleta Ordering no

rumo de NomeCategoria.

Na página principal irá conter uma lista de todas as categorias nos quais

serão listados os nomes das categorias ordenadas ascendentemente.

A fim de modificar as características das categorias listadas na página

principal, outra página será criada, do mesmo modo que criou-se a primeira, mas

não deverão ser marcados os campos Landmark e Home, apenas mudar o campo

Name para Modificando Categorias.

Nesta página se adiciona uma estrutura Data Unit e outra chamada Entry

Unit. Na Data Unit, os campos Name e Entity devem conter o nome Categoria,

enquanto o campo Shown Attribute os atributos OID e NomeCategoria. No Entry

Unit o campo Name passa a ser chamado de Categoria, e é adicionado um campo

(através do botão Add Field), cujo nome é Nome e os itens marcados são

Preloaded e Modifiable, também é inserido um Slot dentro do campo Nome.

Entre as duas páginas criadas deverão ser adicionada a estrutura Modify

Unit, onde seu Name é igual a Modifica e Entity com valor de Categoria.

Para criar os links basta clicar o botão Add Link e selecionar a origem e o

destino. Neste estágio serão criados quatro links.

O primeiro deve ser de origem Index Unit – Categorias e destino Data

Unit – Modificando Categorias e campo Name modificado para Alterar.

59

O segundo tem origem Data Unit – Modificando Categorias e destino

Entry Unit – Modificando Categorias e campo Type igual a Transport. Depois é

necessário clicar o botão direito acima do link, e clicar em Parameters Coupling,

desmarcar o item Enable default parameters coupling e na paleta Outgoing

Parameters na direção de Target – Nome, selecionar Source – NomeCategoria.

No terceiro, a origem é Data Unit – Modificando Categorias, destino

Modifica, com campo Type igual a Transport. Clicar o botão direito acima do

link, e clicar em Parameters Coupling, desmarcar o item Enable default

parameters coupling e na paleta Outgoing Parameters na direção de Target –

Modified Object(s), selecionar Source – Displayed Object.

E o último link, que deve ter a origem Entry Unit – Modificando

Categorias e destino Modifica, seu campo Name modificado para Alterar. Depois

tem que clicar o botão direito acima do link, e clicar Parameters Coupling,

desmarcar o item Enable default parameters coupling e na paleta Outgoing

Parameters na direção de Target – NomeCategoria, selecionar Source – Nome.

Assim, a aparência da Modelagem de Hipertexto até o momento deverá

estar de acordo com a figura 4.8:

Figura 4.8 - Páginas Categorias, Modificando Categorias e Falha [15]

60

Caso ocorra algum erro na alteração dos dados, é necessário criar uma

página com o intuito de mostrar este fato ao usuário. Para isso é adicionada outra

página à modelagem, agora com o Name igual a Falha e nela mesma insere-se um

Entry Unit de Name igual a Erro a Executar Comando. E também incluir um link

de origem partindo deste mesmo Entry Unit – Falha para o destino Index Unit –

Categorias e com campo Name igual a Voltar.

E finalmente, são adicionados um OK-link de origem Modifica e destino

página Categorias. E um KO-link de origem Modifica e destino página Falha.

Agora, outras funções que são implementadas na parte administrativa do

sistema são as questões de inserir e deletar categorias.

4.3.2.2. PÁGINAS CATEGORIAS, APAGANDO CATEGORIA E FALHA

Nestas páginas ocorrerá a inclusão de novas categorias no banco de dados

do sistema e a exclusão de categorias, porém na última ação todas as receitas

vinculadas à categoria excluída serão perdidas.

Basta adicionar uma página dentro da área Administração, e renomear o

campo Name para Apagando Categoria.

A seguir, inserir um Entry Unit através do respectivo botão com o mesmo

nome. No campo Name alterar para Confirma remoção?, e são adicionados dois

campos Field, um com nome de ATENÇÃO (inserir um Slot de Value igual a

Receitas serão perdidas! e nenhuma opção marcada; e o outro com nome de

Categoria campo Preloaded marcado, e adiciona-se um Slot nele também.

Outro Entry Unit com nome Nova Categoria e com um Field de nome

igual a Nome tem de ser adicionado na página Categorias, criada anteriormente no

método de modificação.

61

Incluir dois Delete Unit com nome Deletar e um Insert Unit de nome

Inserir e Entity igual à Categoria. No primeiro Delete Unit a entidade Receita é

selecionada no campo Entity, enquanto na outra Delete Unit a entidade Categoria

é escolhida.

Também é necessário adicionar uma condição no primeiro Delete Unit a

fim de apagar apenas as receitas relacionadas com a categoria selecionada a ser

excluída na página principal. Para fazer isto basta clicar com o botão direito em

cima da Delete Unit – Receita e depois clicar em Add Selector Condition. O

campo Name pode ser substituído por Condicao5, e no campo Relationship é

escolhido o relacionamento Categoria_2_Receita.

Para um melhor entendimento, a figura 4.9 ilustrará a modelagem já

concluída, e logo após serão descritos os passos da navegabilidade dos links entre

as estruturas.

Figura 4.9 - Páginas Categorias, Apagando Categoria e Falha [15]

A seguir são inseridos alguns links no ambiente. Primeiramente, coloca o

link de origem Index Unit – Categorias para destino Entry Unit – Apagando

62

Categoria, com nome Apagar, Outgoing Parameters de Source – NomeCategoria

e Target – Categoria, e em Passing Parameters marcar opção Selected Object.

Adicionar outro link (origem Entry Unit – Apagando Categoria, destino

Index Unit – Categorias) de nome Não. E também mais um de origem Entry Unit

– Apagando Categoria para destino Deletar – Receita de nome Sim, no Outgoing

Parameters na direção de Target – Condicao5, selecionar Source – Selected

Object_PASSING e em Passing Parameters marcar opção Selected

Object_PASSING.

Mais um link de nome Adicionar, origem Entry Unit – Categorias, destino

Inserir, Outgoing Parameters de Target – NomeCategoria, selecionar Source –

Nome.

Três KO-links são incluídos, um de origem em cada Delete Unit e destino

página Falha e o último de origem Create Unit e destino página Falha.

Outros três OK-links são inseridos, um de origem Inserir e destino página

Categorias. O segundo de origem Deletar – Receita para destino Deletar –

Categoria (Outgoing Parameters de Target – Input Object(s), selecionar Source –

Selected Object_PASSING), e o último de origem Deletar – Categoria e destino

página Categorias.

Terminada essa etapa, outro método que pode ser acessado pela

Administração é a remoção de qualquer receita encontrada no banco de dados.

4.3.2.3. PÁGINAS RECEITAS, APAGANDO RECEITA E FALHA

A fim de remover qualquer receita encontrada no sistema, a primeira

página deve ser incluída com o nome de Receita e opção marcada Landmark, nela

conterá um Index Unit a fim de listar todas as receitas, cujo campo Entity será

63

escolhida a entidade Receita. No campo Shown Attribute, todos os atributos

devem ser escolhidos (clicando no botão All) e no campo Sort Attributes o

atributo Titulo deve ser selecionado como Ascending na aba Ordering.

Outra página pode ser criada com o nome de Apagando Receita. Deve-se

adicionar a estrutura Entry Unit de nome Confirma remoção?, de Field com nome

igual a Título, opção Preloaded marcada e neste mesmo Field, inserir um Slot.

A página de erro deve ser incluída com o nome de Falha, contendo um

Entry Unit de nome Erro na Exclusão, sem nenhum Field. Um link de nome

Voltar deve sair deste mesmo Entry Unit com destino Index Unit – Receitas.

Adicionar uma estrutura Delete Unit cujo nome é modificado para Deletar,

e sua Entity selecionada como Receita. Desta saem um OK-link para a página

Receitas e um KO-link para a página Falha.

As páginas deverão estar de acordo com a figura 4.10:

Figura 4.10 - Páginas Receitas, Apagando Receita e Falha [15]

Um link de nome Apagar, origem Index Unit – Receitas, destino Entry

Unit – Apagando Receita, Outgoing Parameters: Source – Titulo e Target –

64

Título, Passing Parameters, marcar Selected Object. Outro de nome Não, origem

Entry Unit – Apagando Receita, destino Index Unit – Receitas. E o útlimo de

nome Sim, origem Entry Unit – Apagando Receita, destino Deletar, Outgoing

Parameters: Source – Selected Object_PASSING e Target – Input Objects(s).

Finalmente, falta apenas a implementação da modelagem da última página,

a página para a saída da área administrativa.

4.3.2.4. PÁGINA SAIR

Com a intenção de perguntar ao administrador logado no sistema se ele

tem a certeza de que quer sair da área administrativa, é esboçada a página Sair.

Basta criar uma página de nome Sair e marcar opção Landmark.

Incluir um Entry Unit de nome Efetuar logout? e também adicionar uma

estrutura Logout Unit, cujo campo Target Site View deve ser escolhido Visitantes.

Deve-se adicionar um KO-link de origem Logout Unit e destino área

Administração, a figura 4.11 ilustra os andamentos dos esforços:

Figura 4.11 - Página Sair [15]

65

Por último, adicionar também um link de nome Sim, origem Entry Unit –

Sair, destino Logout Unit. Caso o usuário não queria sair da sessão administrativa,

basta que ele acesse as funções do menu do lado esquerdo da página.

Assim, termina a Modelagem de Hipertexto, a qual também já

automaticamente gerou uma parte da etapa da Modelagem de Personalização, ou

seja, a etapa de navegabilidade de usuários comuns e usuários administrativos.

4.4. MODELAGEM DE APRESENTAÇÃO

O modo de apresentação das páginas está diretamente relacionado com os

estilos modelados a partir da linguagem XML (Extensible Markup Language).

Existe uma ferramenta dentro do próprio WebRatio chamada EasyStyler a qual

fornece estrutura para tal feito.

Todavia, como no WebRatio se encontra exemplos ricos dessas estruturas,

utiliza-se um já existente, ficando como sugestão para outra oportunidade, um

estudo mais detalhado desta ferramenta.

Nesta fase do sistema, ocorrem algumas configurações na ferramenta

WebRatio as quais devem seguir os seguintes passos:

• Fazer uma cópia da pasta WebRatio-4.0\tomcat\webapps\empty-

project-jsp1.2 e renomeá-la para o nome de receitas.

• Ir à paleta Presentation View, clicar em Project Tree, selecionar no

campo Layout Platform o valor JSP 1.2, escolher tanto em Layout Path

e Logic Path a pasta WebRatio-4.0\tomcat\webapps\receitas, gerada a

partir do passo anterior.

66

• Na paleta Presentation View / Project Tree / Site Composition estarão

listadas as duas apresentações disponíveis: Administração e Visitantes.

• Deve-se clicar em cima de cada uma das apresentações e selecionar o

Stylesheet com o valor de Folder e o Default Page Layout com o valor

de blue gradient.

• Também em ambas vão estar contidas as áreas criadas juntamente com

suas respectivas páginas. Deve-se caminhar em todas as páginas e no

canto esquerdo, aparece um menu chamado Pool. Clica-se na estrutura

e seleciona a posição no corpo da página que se deseja apresentar para

o usuário.

A apresentação está pronta para ser criada, ou seja, as páginas do sistema

podem ser geradas a partir do botão Buill All, bastando apenas selecionar a

apresentação Administração e efetuar este procedimento, e logo depois do

término, selecionar a apresentação Visitantes e fazer a mesma coisa.

A Modelagem de Apresentação está concluída; agora para a diferenciação

dos níveis de acesso, a Modelagem de Personalização demonstrará as etapas para

este fim.

4.5. MODELAGEM DE PERSONALIZAÇÃO

A árdua tarefa de personalização do sistema praticamente já foi resolvida a

partir da Modelagem de Dados, e depois pela Modelagem de Hipertexto.

O WebRatio, desde a criação de um novo projeto, abre uma estrutura de

dados que possui as entidades de User, Group e SiteView, justamente as quais

fazem esse controle de níveis de acesso.

67

Depois, através da seleção do campo Protected em um sv, e também das

estruturas Login Unit e Logout Unit, integrado com alguns requisitos como no

caso um Entry Unit, a ferramenta já possui pré-fundamentos de estruturação da

personalização do sistema.

Outro tipo de personalização que a versão Trial do WebRatio apresenta é a

partir de Tools / Localization. Na aba Project preferences, existem dois recursos

os quais podem ser personalizados de acordo com a língua e costume de cada país.

Através do botão Edit, escolhe-se o país desejado e logo depois na paleta Data

format podem ser personalizados os tipos de dados (data, hora, float, inteiro,

boleano etc) e na paleta Default Bundle as mensagens de erro do sistema poderão

ser traduzidas.

Em suma, a diferenciação de usuários já é obtida através das Modelagens

anteriores, cabendo nesta etapa apenas a inserção no banco de dados da estrutura

dos registros para o reconhecimento dessa diferenciação. Pode-se também

modificar as variáveis de mensagem de erro e apresentações de variáveis através

do recurso Localization.

O modo mais prático é criar um arquivo de texto, renomeá-lo para

extensão sql, adicionar o conteúdo descrito a seguir e executá-lo através do

MySQL:

INSERT INTO `grupotable` VALUES (1, 'Visitantes', 1);

INSERT INTO `grupotable` VALUES (2, 'Administrador', 2);

INSERT INTO `sitetable` VALUES (1, 'sv1');

INSERT INTO `sitetable` VALUES (2, 'sv2');

INSERT INTO `usuario_grupotable` VALUES (1, 2);

INSERT INTO `usuariotable` VALUES (1, 'marcelo', 'cecin',

'[email protected]', 2);

Finalmente, a página está pronta para ser executada, faltando agora um

simples detalhe que é a criação de um outro arquivo, de nome index.jsp cujo

conteúdo dele deve conter a seguinte linha:

68

<script>location.href='page1.do'</script> e o mesmo ele deve ser salvo

no caminho WebRatio-4.0\tomcat\webapps\receitas

Agora é só clicar no Menu Iniciar / Todos os Programas / WebRatio 4.0 e

clicar Start Tomcat. E por fim, abrir o browser e acessar o endereço

http://localhost:8080/receitas.

4.6. CONCLUSÃO

A ferramenta WebRatio demonstrou ser bastante intuitiva, bastando apenas

a Modelagem via arraste e clique para a obtenção de páginas JSP (JavaServer

Pages), que é uma tecnologia utilizada no mercado. Fica explícito que ela se

encaixa perfeitamente na técnica WebML, em que podem ser observadas com

clareza as etapas das Modelagens do Sistema.

Contudo, na versão Trial, houve algumas limitações significativas como, a

ausência de Units que acrescentariam melhores recursos ao sistema desenvolvido,

por exemplo, funções de exibição de mensagem, de acesso a transações no banco

de dados e de manipulação de hora e data.

Houve algumas dificuldades no sentido de criação das páginas, como o

exemplo de fazer uma cópia da pasta WebRatio-4.0\tomcat\webapps\empty-

project-jsp1.2 e renomeá-la de acordo com o nome do projeto (recurso que a

própria ferramenta poderia executar automaticamente), e também manipulação

dos dados no banco. Tais desafios foram resolvidos via tutorial (o qual apresenta

exemplos incompletos) ou via suporte do fabricante (cujos e-mails não foram

respondidos em sua totalidade).

Fica sugerido para um próximo estudo, a análise da ferramenta que vem

embutida no WebRatio, chamada de EasyStyler, a qual gera os Stylesheet e

69

Layouts das páginas, para abrir este recurso basta acessar Tools / EasyStyler.

Além do estudo mais aprofundado da taglib webml, incluídas nas páginas JSPs

geradas.

Em suma, a ferramenta provou ser eficaz e rápida, baseado apenas no uso

para geração de um site, em todas as Modelagens da Página Web, assim como

também possui recursos para geração da Documentação do Sistema, em dois

formatos HTML, ou PDF, apenas necessitando clicar em Tools / Generate

WebMLDoc, selecionar a pasta onde se deseja salvar e clica-se em OK.

70

5. CONCLUSÃO

Com o estudo feito desde o retrospecto histórico da Computação, até os

conceitos básicos, formatos digitais, e técnicas de projetos de Sistemas, percebeu-

se que o termo Sistema Hipermídia é bastante amplo, conquanto que Hipermídia é

julgado como sendo a interação de Hipertexto juntamente com Multimídia.

A partir disso, e do fato de que a própria história da Informática está

associada à internet, e quando se pensa em internet, logo se lembra de sites,

considerou-se que o ideal seria criar um site como Estudo de Caso.

Além do mais, como foi estudado ao longo do curso de Ciência da

Computação, principalmente na matéria de Engenharia de Software, e aprendeu-se

que um Sistema, necessita de uma Técnica de Projeto, e no caso de uma

Aplicação voltada para Web, à metodologia WebML (como o próprio nome já

sugere) se encaixou perfeitamente conforme o desejado.

Somado a isso, a ferramenta WebRatio a qual foi utilizada para

desenvolver o Estudo de Caso, mostrou-se bastante prática, pois ao mesmo tempo

que integrou a teoria da metodologia WebML comprovou ser prática, intuitiva e

produtiva.

Todavia, por ser uma versão trial, ocorreu o levantamento de limitações

consideráveis na ferramenta, mas as mesmas são explicitamente enumeradas tanto

no site do desenvolvedor da ferramenta (www.webratio.com), como também na

documentação que vem na instalação.

71

A documentação tutorial da ferramenta, dependendo do problema a ser

resolvido, não mostrou ser suficientemente completa e ter exemplos plausíveis,

entretanto o suporte técnico via e-mail foi um fator determinante para eliminação

dos problemas.

Um bug extremamente preocupante no quesito de segurança é encontrado

quando o usuário faz o login na área restrita e depois faz o logout, depois de

algum tempo, se ele efetivar o mesmo procedimento novamente e se logo após

isso, for digitado o link de acesso à área restrita no browser, um usuário não

autorizado consegue efetuar o login, todavia na nova versão da ferramenta (4.WS)

o mesmo foi corrigido.

Até o presente momento a importante informação do desenvolvedor da

ferramenta do valor da Licença Corporativa da mesma não foi obtida, entretanto

foi informado que o desenvolvedor entraria em contato com o orientador desta

monografia, professor Edson Angoti Júnior a fim de explicar uma provável

aliança junto ao programa acadêmico da ferramenta WebRatio.

Em suma, caso seja necessário um desenvolvimento de um Site com mais

recursos, a ferramenta possui a versão Corporativa, a qual possui inúmeras

vantagens além das já encontradas na versão limitada, sendo que a única grave

desvantagem encontrada foi a do bug, a qual já foi solucionada na nova versão da

ferramenta.

Fica registrada uma recomendação de sugestão, principalmente para

pessoas que gostam de design, a análise da ferramenta EasyStyler, responsável

pelo gerenciamento de layouts dos sites.

72

REFERÊNCIAS BIBLIOGRÁFICAS

[1] CORREIA, Cláudia; ANDRADE, Heloísa. Noções Básicas de Hipertexto.

[2] LEMOS, A. As Estruturas Antropológicas do Ciberespaço.

[3] LÉVY, P. As Tecnologias da Inteligência. Ed. 34. Rio de Janeiro.

[4] www.cientefico.frb.br/Impressa/Info/Artigo_Engelbart Rev. RCO3.05.04._pdf. Último acesso, 06/06/2005.

[5] MCLAUGHLIN, T.; KEEP, C. ; Parmar, R. The Electronic Labryinth.

[6] pt.wikipedia.org/wiki/ http://www.radios.com.br/novo/sobre.htm. http://www.w3.org/ Último acesso, 06/06/2005.

[7] www.pucrs.br/famat/statweb/hipermidia/partes/parte10.htm www.pucrs.br/famat/statweb/hipermidia/partes/parte9.htm superdownloads.com.br/programas/multimidia-graficos.html. Último acesso, 06/06/2005.

[8] www.inf.ufsc.br/Eleandro/ensino/esp/monografiaMarcioHenriqueLocateli.pdf Último acesso, 24/06/2005.

[9] www.telemidia.puc-rio.br/port/pesquisas/smh/projetos/atuais/oohdm/oohdm.ht Último acesso, 24/06/2005.

[10] SCHWABE, Daniel; VILAIN, Patrícia. Notação OOHDM. Puc-Rio.

[11] www.dct.ufms.br/mestrado/dissertacoe/licio.pdf. Último acesso, 28/06/2005.

[12] webml.elet.polimi.it/webml/page3.do?ctx1=EM. Último acesso, 25/06/2005.

[13] coweb.icmc.usp.br/coweb/mostra.phpident=22.2. Último acesso, 28/06/2005.

[14] www.webratio.com. Último acesso, 03/10/2005.

[15] Imagens retiradas da Documentação do Sistema gerada a partir da ferramenta WebRatio e também do próprio projeto Receitas. Último acesso, 14/10/2005.

Documents

O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos