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
O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos
Marcelo Mendes de Sousa Cecin
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.
Uberlândia, Dezembro/2005.
ii
O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos
Marcelo Mendes de Sousa Cecin
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)
Uberlândia, Dezembro/2005.
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>
A figura 3.6 junto com o código XML demonstrou a implementação de
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>
A figura 3.7 junto com o código XML demonstrou a implementação de
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"/>
A figura 3.8 junto com o código XML demonstrou a implementação de
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
A figura 3.9 junto com o código XML demonstrou a implementação de
uma Filter Unit. A figura 3.10 mostra um exemplo de Direct Unit.
Figura 3.10 - Direct Units [13]
<DIRECTUNIT id="ToArtist" relation="Album2Artist"/>
A figura 3.10 junto com o código XML demonstrou a implementação de
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.