O Uso Da Ferramenta WebRatio No Desenvolvimento de Hiperdocumentos

CENTRO UNIVERSITRIO DO TRINGULO PR-REITORIA DE ENSINO DE GRADUAO CURSO DE CINCIA DA COMPUTAO
O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos
Marcelo Mendes de Sousa Cecin
Uberlndia, Dezembro/2005.
CENTRO UNIVERSITRIO DO TRINGULO PR-REITORIA DE ENSINO DE GRADUAO CURSO DE CINCIA DA COMPUTAO
Monografia apresentada ao Curso de Cincia da Computao do Centro Universitrio do Tringulo - Unitri, como requisito bsico obteno do grau de Bacharel em Cincia da Computao, sob a orientao do Professor Edson Angoti Jnior, Msc.
Monografia apresentada ao Curso de Cincia da Computao do Centro Universitrio do Tringulo - Unitri, como requisito bsico obteno do grau de Bacharel em Cincia da Computao.
Edson Angoti Jnior, Msc. (Orientador) Hlio Rubens Soares, Msc. (Avaliador) Silvia Fernanda Martins Brando, Msc. (Avaliador) Silvia Fernanda Martins Brando, Msc. (Coordenadora de Curso)
ii
Agradecimentos Todos os Professores e Alunos da Cincia da Computao, e tambm a todos os meus Familiares e Colegas de Trabalho.
iii
RESUMO
No decorrer dos tempos, formas de organizao e administrao das informaes obtidas atravs das diversas maneiras de comunicao da humanidade foram desenvolvidas a fim de facilitar todo o processo de manipulao de dados. Com o aparecimento dos computadores no foi diferente. Primeiramente foi necessrio 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 evoluo da Computao em decorrncia da Internet, um novo paradigma de estruturao, organizao e administrao de Sistemas Hipermdia apareceu. Alm disso, com a grande corrida da Incluso Digital, juntamente a facilidade de acesso Internet, Aplicaes Hipermdia necessitam no s de diversos profissionais de variados ramos do conhecimento como tambm as complexidades dos mesmos cresceram em relao aos Sistemas Desktops tradicionais. A partir deste cenrio, Tcnicas de Projetos para desenvolvimento de Aplicaes Hipermdia foram sendo criadas com a inteno de suprir esta deficincia da Engenharia de Software. Em suma duas destas tcnicas sero apresentadas, a tcnica OOHDM (The Object-Oriented Hypermedia Design Model) e a tcnica WebML (The Web Modeling Language). Alm disso, ser desenvolvida uma aplicao utilizando-se a metodologia WebML atravs da ferramenta WebRatio. E conquanto, a Engenharia de Software abranje estes quesitos (padronizao e orientao a objetos), no caso de um Sistema Hipermdia, existem suportes das metodologias voltadas para estes mesmos sistemas os quais auxiliam em etapas do projeto que a Engenharia tradicional no prov.
iv
SUMRIO
LISTA DE FIGURAS ...................................................................................................................vii LISTA DE TABELAS..................................................................................................................viii LISTA DE ABREVIATURAS ......................................................................................................ix 1. INTRODUO ...........................................................................................................................1 2. SISTEMAS HIPERMDIA ........................................................................................................3 2.1. Conceitos Bsicos .....................................................................................................................4 2.2. Histria do Hipertexto e da Multimdia .................................................................................4 2.3. A Evoluo de Hipertextos e Multimdia (Hipermdia) ........................................................9 2.4. Formatos Digitais ...................................................................................................................11 2.5. Vantagens da Utilizao de Sistemas Hipermdia ...............................................................13 2.6. Exemplos de Sistemas Hipermdia........................................................................................15 2.7. Concluso ................................................................................................................................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 Navegao ................................................................................................24 3.1.3. Interface Abstrata..............................................................................................................26 3.1.4. Implementao..................................................................................................................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 Apresentao ............................................................................................35 3.2.4. Modelagem de Personalizao..........................................................................................36 3.3. Concluso ................................................................................................................................37 4. DESENVOLVIMENTO DE UM HIPERDOCUMENTO .....................................................38 4.1. Instalao da Ferramenta WebRatio....................................................................................38 4.2. Modelagem de Dados .............................................................................................................42 4.3. Modelagem de Hipertexto .....................................................................................................45 4.3.1. Viso dos Visitantes..........................................................................................................46 4.3.1.1. Pginas Categorias e Visualizar Receitas.............................................................47 4.3.1.2. Pgina Receitas ....................................................................................................49 4.3.1.3. Pgina Busca........................................................................................................50 4.3.1.4. Pginas Inserindo Receita e Falha........................................................................52 4.3.1.5. Pginas rea Restrita e Usurio ou Senha Invlidos ...........................................55
4.3.2. Viso dos Administradores ...............................................................................................57 4.3.2.1. Pginas Categorias, Modificando Categorias e Falha ..........................................57 4.3.2.2. Pginas Categorias, Apagando Categoria e Falha................................................60 4.3.2.3. Pginas Receitas, Apagando Receita e Falha.......................................................62 4.3.2.4. Pgina Sair ...........................................................................................................64 4.4. Modelagem de Apresentao.................................................................................................65 4.5. Modelagem de Personalizao ..............................................................................................66 4.6. Concluso ................................................................................................................................68 5. CONCLUSO ...........................................................................................................................70 REFERNCIAS BIBLIOGRFICAS ........................................................................................72
vi
LISTA DE FIGURAS
Figura 2.1. Anotaes de Leonardo Da Vinci ..............................................................................5 Figura 2.2. Caligrafia de Aldo Manucio........................................................................................5 Figura 2.3. Douglas Engelbart e a primeira apresentao do mouse..........................................7 Figura 3.1. Classes representadas na notao OOHDM............................................................22 Figura 3.2. Classes representadas na notao OOHDM............................................................23 Figura 3.3. Contexto de Navegao .............................................................................................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 automticos e de transporte .........................................................................34 Figura 4.1. Estrutura de Dados do Sistema ................................................................................44 Figura 4.2. Relacionamentos das Entidades................................................................................44 Figura 4.3. Pginas Categorias e Visualizar Receitas ................................................................49 Figura 4.4. Pgina Receitas ..........................................................................................................50 Figura 4.5. Pgina Busca ..............................................................................................................52 Figura 4.6. Pginas Inserindo Receita e Falha............................................................................55 Figura 4.7. Pginas rea Restrita e Usurio ou Senha Invlidos .............................................56 Figura 4.8. Pginas Categorias, Modificando Categorias e Falha ............................................59 Figura 4.9. Pginas Categorias, Apagando Categoria e Falha ..................................................61 Figura 4.10. Pginas Receitas, Apagando Receita e Falha ........................................................63 Figura 4.11. Pgina Sair ...............................................................................................................64
vii
LISTA DE TABELAS
Tabela 3.1. Categorias dos setores econmicos e alguns exemplos ...........................................19 Tabela 3.2. Caractersticas herdadas e criadas no OOHDM.....................................................21 Tabela 4.1. Requisitos WebRatio verso 4.0.11 ..........................................................................39
viii
LISTA DE ABREVIATURAS
WebML OOHDM NLS TCP/IP WWW W3C HTML HTTP GIF JPG MP3 WMA HDM UML ADVs ADOs XML XLS CSS CASE BLOB URL SQL JDBC J2EE BLOB OID JSP PDF The Web Modeling Language Object Oriented Hypermedia Design Method On-Line System Transfer Control Protocol/Internet World Wide Web World Wide Web Consortium Hypertext Markup Language Hypertext Transfer Protocol Graphics Interchange Format Joint Photografic Experts Group MPEG-1/2 Audio Layer 3 Windows Media Audio Hypermedia Design Method The Unified Modeling Language Abstract Data Views Abstract Data Objects Extensible Markup Language Extensible Style Sheet Language Cascading Style Sheets Computer Aided Software Engineering Binary Large Object Uniform Resource Locators Structured Query Language Java Database Connectivity Java 2 Platform, Enterprise Edition Binary Large Object Object Index JavaServer Pages Portable Document Format
ix
1.
INTRODUO
Desde os primrdios da raa humana, o homem tem se comunicado de alguma maneira, e muitos intelectuais e pessoas que lidavam com informaes, desenvolveram mecanismos para uma melhor organizao e administrao de contedos. Muitos fatores colaboram com a constante evoluo da Internet, e juntamente com a Histria da Computao, fica claro como a Internet possui potencialidade para as mais variadas reas do conhecimento humano. Hoje, existem vrios setores da economia e da sociedade que possuem pginas Web, por vrios motivos, tais como a acessibilidade mais cmoda e rpida das informaes, e o alcance de um grande nmero de pessoas; pois um site pode ser acessado por qualquer pessoa que possua um computador com acesso internet. Por esse motivo vrios conceitos, formatos digitais e metodologias esto em constante desenvolvimento a fim de ilustrar, representar, organizar e administrar sistemas voltados para Internet e o quo estes recursos integram em ricas formas computacionais representativas da comunicao, seja atravs de execuo em tempo real ou no. A internet tambm fortalece a globalizao, pois seu alcance mundial. A premissa principal do capitalismo, baseada na frase time is money (tempo
dinheiro), resume bem o quanto valioso no perder tempo nas etapas como a de desenvolvimento ou na de manuteno de um sistema. O objetivo principal desta pesquisa demonstrar que existem ferramentas, como a WebRatio associada metodologia WebML e que estas conseguem de forma rpida e com qualidade, administrar fases, como: modelagem, desenvolvimento, documentao e manuteno de um sistema hipermdia. No captulo dois, ser exposto o que vem a ser o amplo ambiente de sistemas hipermdia, assim como alguns conceitos bsicos que so utilizados neste ambiente para que um sistema hipermdia possa funcionar. Ser apresentada uma pesquisa sobre a histria do hipertexto e da multimdia, a fim de que seja constatado que hipermdia se trata da evoluo destes dois conceitos. Tambm sero enumeradas as vantagens desses sistemas, assim como exemplos referentes a eles. Conceitos das etapas de modelagens e de implementao de sistemas hipermdia, baseando-se em duas tcnicas de projeto de aplicao hipermdia sero apresentados no captulo trs:
Tcnica OOHDM (Object Oriented Hypermedia Design Method), desenvolvida na Pontifcia Universidade Catlica do Rio de Janeiro, por Gustavo Rossi e Daniel Schwabe, os sistemas de inteligncia artificial (robtica);
Tcnica WebML (The Web Modeling Language), desenvolvida no Instituto de Eletrnica e Informao do Politcnico de Milo.
No captulo quatro ser criado um site utilizando a ferramenta WebRatio, de forma integrada metodologia WebML. No captulo cinco ser mencionada uma retrospectiva de todo o trabalho desenvolvido, bem como, uma concluso geral do mesmo.
2.
SISTEMAS HIPERMDIA
Ao longo da evoluo humana, foram desenvolvidas tecnologias de comunicao humanidade. A comunicao vem evoluindo desde a fala, a escrita, a arte, a msica, a imprensa (jornal, rdio, televiso) e atualmente a eletrnica. O mais interessante que nenhuma dessas culturas foi substituda uma pela outra, mas sim todas se complementaram e se completam mutuamente at hoje. O termo sistema hipermdia pode ser moderno, contudo nada mais do que a evoluo de conceitos ligados interatividade de representaes culturais e sua fundamentao. Hipermdia j se encontra em alguns registros histricos em obras na Cincia, na Literatura e na Filosofia, ela ganha impulso com o avano da crescente ao dialgica entre o homem e a tcnica [1]. Como toda tecnologia, a hiperconectividade produz resultados favorveis e contrrios e tambm novos paradigmas, como a falncia do discurso tradicionalmente lgico, acabado, fechado em si. As infinitas possibilidades de conexes entre trechos de textos e textos inteiros favorecem a flexibilizao das fronteiras entre diferentes reas do conhecimento humano [1]. que auxiliaram no desenvolvimento scio-econmico da
2.1.
CONCEITOS BSICOS
A seguir, sero enumerados e caracterizados os principais conceitos relacionados ao tema sistema hipermdia.
Link: refere-se s ligaes 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 informao, basicamente textos e imagens grficas, interligados de forma no-seqencial, atravs de links.
Multimdia: combinao de texto, imagens grficas e desenhos, fotos, msicas, udio em geral e vdeos em uma apresentao.
Hipermdia: fuso dos tipos de dados da multimdia com os mecanismos dos hipertextos, ou seja, um sistema hipertexto que, alm basicamente de texto e grficos, suporta tambm outros tipos de mdia, como desenhos, imagens, sons e vdeos.
Hiperdocumento: hipermdia.
documento
digital
contendo
formatao
de
2.2.
HISTRIA DO HIPERTEXTO E DA MULTIMDIA
A histria do Hipertexto a prpria histria do texto, mas tambm a histria da computao. Um exemplo histrico de Hipertexto tradicional so as anotaes de Leonardo Da Vinci, como demonstra a figura 2.1.
Figura 2.1: Anotaes de Leonardo Da Vinci
Vrios outros exemplos de hipertextos podem ser localizados na histria da Cincia, da Literatura e da Filosofia atravs de livros, pois todo texto escrito um hipertexto onde o leitor se engaja num processo tambm hiperdidtico, pois a leitura feita de interconexes memria do leitor, s referncias 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 evoluo dos novos processos de registro, transporte e distribuio das informaes anunciavam a prpria evoluo do Hipertexto. interessante lembrar o fato de ter sido o editor veneziano Aldo Manucio, que inventou o estreito caractere itlico e decidiu livrar os textos do aparelho crtico e dos comentrios que os acompanhavam h sculos... Foi assim que o livro tornou-se fcil de manejar, cotidiano, mvel, e disponvel para apropriao pessoal [3]. A figura 2.2 ilustra como era a caligrafia de Aldo.
Figura 2.2 - Caligrafia de Aldo Manucio
At este momento, os livros eram pesados, gigantescos e mantidos acorrentados nas bibliotecas, os quais eram acrescentados os relevantes comentrios dos diversos leitores ao longo do tempo. Ilustraes e notas tambm se acumulavam nos livros. A manipulao destas novas informaes era feita atravs de tecnologias para lidar com o conhecimento. Os avanos das cincias e das tcnicas se tornaram os principais fatores para evoluo e distribuio do conhecimento humano no mundo contemporneo. As peculiaridades do hipertexto propriamente dito que ele resultado direto dos avanos dos modos de registro, armazenamento e circulao das informaes. So estes avanos 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 eletrnica, representado inicialmente pelo hipertexto, algo muda radicalmente no que se relaciona aos conceitos sobre como ler, escrever e conhecer. A fomentao pela tendncia da melhor organizao das informaes, tanto para fins intelectuais, econmicos e de guerra acarretaram uma corrida pela evoluo de tcnicas e teorias essenciais para a evoluo da Computao. Outro grande salto na histria do hipertexto deve-se graas ao ilustre personagem Douglas Engelbart, engenheiro eltrico que desenvolveu novas tecnologias para a rea da informtica. Considerado gnio pelo desenvolvimento de seus inventos que revolucionaram a computao grfica [4]. Ele foi sem dvida um dos pioneiros a ressaltar a importncia da interface de usurio e tambm a desenvolver dispositivos como forma de atingir e provar esse objetivo (que em sua viso seria o fator principal para a integrao dos usurios com o sistema). A primeira interface grfica e o mouse so resultados de suas principais pesquisas, as quais contriburam muito para o avano de novas tecnologias e mudanas de paradigmas na informtica.
A figura 2.3 mostra Douglas Engelbart fazendo a primeira demonstrao do uso de um mouse na histrica conferncia Joint Computer Conference, realizada em So Francisco, Califrnia, em dezembro de 1968 [4].
Figura 2.3 - Douglas Engelbart e a primeira apresentao do mouse
Ao longo do tempo, os trabalhos fundamentais de pioneiros permitiram o surgimento de pequenas e grandes empresas de informtica principalmente em torno do Vale do Silcio nos Estados Unidos. Alguns marcos relevantes propiciaram a evoluo da Computao e por conseqncia, o prprio conceito de hipertexto, segundo Tim McLaughlin, Christopher Keep, e Robin Parmar e interpretando seus significados segue-se a enumerao cronolgica 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 Informao.
1968 - Engelbart implements On-Line System (NLS) and invents the mouse: Douglas Engelbart o patrono do mouse e criou o sistema NLS (interface grfica) que permitiu a potencialidade de groupware, acarretando em uma inovao de conceitos principalmente na Computao Grfica.
1969 - ARPANET: resultado direto do esforo conjunto de militares e pesquisadores universitrios 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 ento estudante Bill Gates, junto com o colega Paul Allen, desenvolve o sistema operacional para esta mquina. 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 perifricos que hoje bem conhecemos.
1981 - Introduction of the IBM PC: a resposta da IBM a Apple vem quatro anos mais tarde com o lanamento do IBM-PC, e contrata a Microsoft para desenvolver seu sistema operacional, o MS-DOS.
1984 - Macintosh: a Apple lana 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 usurios uma ferramenta para o gerenciamento de informaes.
1987 - Conklin's "Hypertext: An Introduction and Survey" published: publicao do livro Introduo e Pesquisa ao Hipertexto de Jeff Conklin.
1988 - TCP/IP Transfer Control Protocol/Internet: Protocolo elevado condio de protocolo de comunicao das redes.
1989 - WWW: Tim Berners-Lee props a criao 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 lana a verso 3.0 do programa Windows. 1994 - W3C World Wide Web Consortium: consrcio formado por instituies comerciais e educacionais, com o objetivo de definir padres para as respectivas reas relacionadas WWW.
Essa exploso de tecnologias citadas anteriormente, ao longo de praticamente um espao razoavelmente curto no tempo, acarretou em uma imensa evoluo nos paradigmas, enfoques, e utilizao da computao em diversas reas da sociedade.
2.3.
EVOLUO
DE
HIPERTEXTOS
MULTIMDIA
(HIPERMDIA)
Embora o termo Hipermdia seja entendido como sendo uma maior abrangncia s maneiras de expressar o conhecimento, ele pode ser considerado simplesmente uma evoluo do termo original Hipertexto. impossvel dissociar o termo Hipermdia da Internet, ou melhor, da Web.
Foi o desenvolvimento deste veculo de comunicao que possibilitou a disseminao em nvel global da tecnologia de ambientes Hipermdia. A internet uma rede de computadores, que fornece informao em forma de hipertexto. Para ver a informao, pode-se usar um software chamado navegador (browser) para baixar as pginas de sites e mostr-los na tela do usurio. O usurio pode ento seguir os links na pgina para outros documentos ou mesmo enviar informaes de volta para o servidor para interagir com ele. A funcionalidade da Web baseada em trs padres: a URL (Uniform Resource Locators), que especifica como cada pgina de informao recebe um "endereo" nico onde pode ser encontrada; HTTP (Hypertext Transfer Protocol), que especifica como o navegador e servidor enviam informao um ao outro (protocolo); e HTML (Hypertext Markup Language), um mtodo de codificar a informao 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 usurios novos. Caractersticas adicionais como contedo dinmico, msica e animao podem ser encontrados em navegadores modernos. Freqentemente, as capacidades tcnicas de navegadores e servidores avanam muito mais rpido que os padres conseguem se ajustar, por isso no incomum que essas caractersticas no funcionem propriamente em todos os computadores [6]. A necessidade de encontrar exatamente a informao desejada surgiu com a WWW. Desta constatao, vieram os primeiros mecanismos de sites de busca tais como yahoo, google, msn. A disseminao de informaes voltadas para a Web so representadas e conhecidas atravs dos seus formatos digitais.
10
2.4.
FORMATOS DIGITAIS
Os dois principais formatos padres de imagem utilizados so GIF (Graphics Interchange Format), e JPG (Joint Photografic Experts Group), cujos formatos grficos existentes so utilizados na internet, pois o importante que os arquivos sejam pequenos para que possam trafegar rapidamente. A animao uma etapa intermediria entre a imagem esttica e o vdeo. Animaes geradas por computador so consideradas mais baratas do que ter que produzir um vdeo, porm elas so bem limitadas comparando principalmente aos nmeros de quadros por segundo capturados por um vdeo. A captura de um vdeo de boa qualidade requer os servios de uma equipe de filmagem e som, bem como um estdio para edit-lo e convert-lo para o formato que pode ser utilizado no computador, contudo pode-se obter um vdeo de qualidade razovel atravs de filmadoras digitais disponveis atualmente no mercado. O MP3 (MPEG-1/2 Audio Layer 3) foi um dos primeiros tipos de arquivos a comprimir udio com eficincia sem perda substancial de qualidade. Esta medida em KB/s (kilobytes por segundo), sendo 128 KB/s a qualidade padro, na qual a reduo do tamanho do arquivo original de cerca de 90%. Esse mtodo de compresso se baseia em estudos sobre psico-acstica. Basicamente ele retira da msica freqncias que o ouvido humano no consegue ouvir devido a fenmenos de mascaramento de sons e limitaes da audio humana [6]. O patenteamento do padro MP3 implicou em uma reduo no desenvolvimento de programas de computador na rea e propiciou a popularizao de padres alternativos. A Microsoft, fabricante do sistema operacional Windows, decidiu afastar-se do MP3 e criar o seu prprio padro, o Windows Media (WMA). A capacidade da multimdia na Web deparou com muitos obstculos causados pela adequao ao meio dos formatos de som e vdeo. A sistemas
11
contendo hipermdia vinham sendo implementados em CDs, e o tamanho dos arquivos no constitua em problemas, j que os CDS tm uma capacidade de armazenar cerca de 600 MB. Na Internet, este aspecto no foi to fcil [6]. Por isso, a soluo acabou surgindo quando a World Wide Web j tinha cinco anos e comeava a ter uma grande popularizao: em 1995, foi criada a mdia streaming. A mdia streaming aquela em que o arquivo armazenado em um buffer e executado medida que transferido para o computador do usurio, o que evita a espera da concluso do download, acarretando assim, uma maior interatividade em tempo real com o usurio. Normalmente o streaming utilizado para transmisso de vdeo e se divide em trs programas [6]: o player (cliente) que serve para receber a mdia que chega fluindo pela rede. H tambm o servidor, para instalar nos servidores Web e que faz a transmisso, e o Publish, que permite criar as mdias no formato streaming. Os principais formatos streaming de vdeo so .WMV, .RA, .RAM, .RM E .RMM, .AVI, .MPG, .MPE, .MP4 E .MOV. A diferena entre os formatos desses vdeos est na qualidade. Um vdeo MPG melhor que um .RM e por causa dessa melhor qualidade, o arquivo maior. A qualidade dos vdeos .AVI bem prxima dos vdeos .MPG e geralmente utilizado o codec DivX para compactao .AVI. Um .RM e um .MOV precisam que se baixe e instale softwares (players) para visualizao dos vdeos, Real Player e Quick Time. No Microsoft Windows formatos como .MPG e .AVI so abertos normalmente pois o sistema operacional j vem com um player padro (Windows Media Player). Contudo, alguns .AVI tambm necessitam que se baixe codecs apropriados para que o vdeo seja visto e, s vezes, necessrio atualizar o Windows Media Player para uma melhor visualizao. Em suma, os formatos mais utilizados nos sistemas hipermdia so: imagens (GIFs e JPGs), sons (MP3s e WMAs) e vdeo (depende da necessidade e caracterstica do sistema, ou seja, a velocidade de transmisso de dados entre o
12
servidor/cliente, a qualidade mnima exigida para transmisso, os recursos financeiros disponveis).
2.5.
VANTAGENS DA UTILIZAO DE HIPERDOCUMENTOS
Ao comparar os hiperdocumentos com os documentos em papel os seus benefcios podero 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 atravs de teclas de atalho.
O hiperdocumento pode ter inteligncia embutida nele: validao de campos, interao com o usurio.
Hiperdocumentos podem ser projetados para facilitar a atualizao: planejamento estrutural onde se atualiza, por exemplo um vdeo, basta salvar o novo vdeo em cima do antigo, ou seja, nem o endereo do link precisa ser modificado.
O hiperdocumento pode ter estruturas complexas e interessantes: no h limites quando se trata de interatividade entre Hipermdias interligadas.
Podem ser usados documentos de grande tamanho: interao utilizando streaming e tcnicas de sincronismo.
O leitor pode marcar o hiperdocumento por meio da interatividade com o usurio.
13
O hiperdocumento pode ser uma parte de outro programa: os links no possuem limitaes.
Hiperdocumentos podem ser atualizados de forma dinmica e constante: frames, applets, activex, interagem em tempo real com modificaes.
O hiperdocumento pode incluir som, animao e vdeo: conceito bsico de hipermdia.
Pedaos reutilizveis de informao 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 razes de segurana: ocultao 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 no confundir o leitor: o desenvolvedor pode ocultar informaes que ele julga acmulo de informao para que o usurio possa interagir de um modo mais simples com o sistema, exemplo em HMTL: <INPUT type=hidden value=logout></INPUT>.
Torna-se possvel uma indexao muito mais complexa do que no papel: a interatividade de links com imagens, textos, cones etc. propicia uma discreta interao com o usurio.
Potencialidade: todo o conhecimento disponvel a um clique do mouse, disponibilizando uma integrao do usurio com a mquina com uma maior eficincia e sutileza.
Esses benefcios podem ser encontrados e testados em diversos sistemas desenvolvidos por vrias pessoas e empresas.
14
2.6.
EXEMPLOS DE SISTEMAS HIPERMDIA
A seguir, so enumerados os principais exemplos e uma breve descrio de alguns sistemas hipermdia [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 produo de aplicativos Hipermdia. Possui uma linguagem de programao prpria, a OpenScript, que trabalha com conceitos de objetos e mensagens.
Authorware: um dos mais indicados para as reas educacionais, pois, atravs da utilizao de cones, dispensa programao pesada. Oferece rapidez e agilidade na implementao do produto final.
Iconauthor: trabalhando na mesma linha do Authorware, tambm muito procurado por desenvolvedores leigos em programao.
Director: como o Toolbook, embora seja mais sofisticado, este software exige conhecimentos de programao na utilizao de sua linguagem, a Lingo.
Macromedia Flash: O Macromedia Flash rene a edio de udio, vdeo, texto e interatividade em uma s ferramenta, e tambm linguagem de programao.
Nero Burning: gravador de CD-ROMs e DVDs muito utilizado, possui opes como gravar CD de udio, CD de dados, CD de vdeo, DVD, etc.
15
Winamp: desde seu lanamento foi sinnimo de MP3, mas com o passar dos anos as suas funes foram crescendo e hoje em dia possvel assistir a vdeos codificados em WMV, NSV, gravar CDs, ver transmisses em tempo real e claro, escutar arquivos em OGG, MP3, etc.
Windows Media Player: Aplicativo da Microsoft para a execuo de animaes em formato ASF, Real Audio, Real Video, QuickTime, AVI, WAV, MP3, Netshow, etc.
DivX: codec responsvel por reproduzir filmes de cinema, vdeo e udio com qualidade porm ainda uma tecnologia emergente pois exige uma conexo de acesso rpido.
Word: suas principais funes so processador de textos, editor HTML, possui funes como tradutor, correo ortogrfica, dicionrio de sinnimos, etc.
Excel: gerador de planilhas muito eficiente com vrias funes (financeira, matemtica, estatstica, banco de dados, texto, data e hora, procura, lgica etc) para auxiliar na manipulao de dados.
Power Point: gerenciador de apresentaes muito utilizado para criao de slides os quais tambm so muito populares em anexos de e-mails.
Office Outlook: ferramenta para visualizao de e-mails, integrando funes do pacote Office da Microsoft tais como gerenciamento de tarefas com integrao ao calendrio, compromissos, reunies, contatos, anotaes alm de configuraes como verificao de ortografia e gramtica, traduo, confirmao de leitura e entrega de email, etc.
16
Internet Explorer: browser padro da Microsoft Windows, muito utilizado, pois j vem instalado no sistema operacional, contm vrios recursos que permite ao usurio caminhar pela rede da Internet com praticidade.
Mozilla: outro navegador da Web que, assim como o Internet Explorer, possui bloqueador de pop-ups, download automtico, search integrado, etc.
2.7.
CONCLUSO
Desde os primrdios da existncia humana, a comunicao vem passando por diversas reformulaes, o homem sempre tenta ilustrar significados culturais tentando mesclar principalmente dois dos cinco sentidos (viso, audio), a fim de demonstrar os significados de tais manifestaes, e sabe-se que, s vezes, um gesto ou um olhar difere muito a forma de se interpretar um acontecimento, pois existem fenmenos que apenas com palavras, difcil representar seu significado, e com o auxilio de um simples grfico ou desenho o torna mais interessante e fcil de ser visualizado. A traduo para tal gesto hoje conhecida como hipertexto e a obra global em si, conhecida como sistema hipermdia, que nada mais que a evoluo do termo sistema multimdia. Artistas, intelectuais e professores utilizavam metodologias de hipermdia para uma melhor didtica e praticidade. Com o passar dos sculos, essas metodologias foram se reestruturando, novos paradigmas foram surgindo, contudo a base do conceito continuou. A necessidade de mquinas poderosas capazes de efetuarem clculos de balstica na Segunda Guerra Mundial levou a uma corrida atrs de avanos tecnolgicos, os quais foram significativos para a revoluo nas
17
metodologias de programao de sistemas, e o maior fruto foi criao do computador pessoal e dos sistemas operacionais multitarefa. Da fala eletrnica, praticamente o mundo dos negcios se comunica via e-mail e existem diversos sites de compras on-line os quais movimentam as economias mundiais. Contedos histricos antes disponveis somente em museus, bibliotecas esto sendo digitalizados e publicados mundialmente atravs da maior rede de computadores, a internet. E isso graas grande fomentao ao longo do tempo das tecnologias de integrao entre representao dessas culturas (texto, imagem, som). As pessoas do mundo contemporneo tentam se expressar por meios complexos de comunicao e marketing. O novo paradigma mostra que a Engenharia de Software precisa se reestruturar para ensinar metodologias de projeto e implementao de hiperdocumentos, que faam a mesclagem das diferentes reas do conhecimento humano. Esse tema ser discutido no prximo captulo.
18
3.
METODOLOGIAS DE HIPERDOCUMENTOS
Com a globalizao, multinacionais, grifes, grandes empresas, elites (ministrios, judicirio, legislativo, executivo, estatais), grupos da sociedade (associaes, cooperativas) e at mdias e pequenas empresas tm investido cada vez mais em solues de Hipermdia a fim de captar mais clientes e adeptos utilizando o meio da Web. A tabela 3.1, enumera e exemplifica essa situao.
Tabela 3.1 - Categorias dos setores econmicos e alguns exemplos [8] Categoria Informacional Interativos Transacional Workflow Ferramentas colaborativas Comunidades on line, lugares de negcios Portais Exemplos Jornais e revistas on line, catlogos e produtos, classificados on line, livros on line. Formulrios de registro, apresentao de informaes customizadas, jogos on line. Lojas eletrnicas, oferecimento de bens e servios, bancos on line. Sistemas de gerncia, planejamento, acompanhamento on line, controle de mercadorias. Sistemas diversos de autoria. Salas de bate-papo, sistemas que recomendam produtos ou servios e marketplaces. Compras on line, fornecedores de contedo.
Logo,
existe
tendncia
desses
investimentos
aumentarem
proporcionarem uma fomentao enorme no mercado de implementao de hiperdocumentos, principalmente voltada para a internet. H tambm um interesse na melhora persistente da qualidade desses sistemas, seja pela necessidade do dinamismo de mudanas de tecnologias, e pela estabilidade dos prprios hiperdocumentos.
19
A tamanha complexidade das necessidades do mercado, a interatividade e navegao com o usurio, o leque de diversidade de perfis de usurios, o auxlio de profissionais de vrias reas, entre outros fatores diferem um software comum de um hiperdocumento. Em decorrncia disso, a prpria Engenharia de Software possui limites de ensino de metodologias para construo de uma aplicao voltada para a internet e sua reestruturao est ocorrendo naturalmente, originando assim, metodologias de projetos para desenvolvimento de hiperdocumentos. A seguir, ser feita anlise 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 Pontifcia Universidade Catlica do Rio de Janeiro (PUC-RJ), por Gustavo Rossi e Daniel Schwabe. Ela auxilia na construo de aplicaes hipermdia em larga escala utilizando a abstrao e a composio de mecanismos utilizando tcnicas de orientao objetos, pois por um lado, a abstrao capaz de captar as descries das complexas informaes, e de outro lado, a tcnica de orientao objetos permite a especificao complexa de navegabilidade de testes padres e transformaes 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 bsico descrever as estruturas comuns do sistema com metodologias de modelagem.
20
O HDM acarretou o aparecimento da metodologia OOHDM. A tabela 3.2 demonstra algumas caractersticas do HDM herdadas no OOHDM e outras criadas e enriquecidas.
Tabela 3.2 - Caractersticas herdadas e criadas no OOHDM [8] Caractersticas Herdadas do HDM Reconhecimento de que a modelagem independente do ambiente e do modelo de referncia. Refora as estruturas hierrquicas, oferecendo a possibilidade da construo de agregados. Caractersticas Criadas ou Enriquecidas No apenas uma abordagem de modelagem, mas sim uma metodologia, pois aborda muitas atividades. Na fase de modelagem conceitual as primitivas so mais ricas. Como so orientada a objetos suportam: agregao, generalizao e herana. Inclui o conceito de perspectivas de atributo possvel fazer uso do esquema conceitual para onde cada classe folha implementa uma viso definir perfis de usurios diferentes. possvel de atributo.
A metodologia OOHDM, consiste em basicamente quatro etapas, so elas: Modelagem Conceitual, Modelagem de Navegao, Interface Abstrata e Implementao. Essas etapas no seguem o modelo de desenvolvimento em cascata, mas sim, uma mistura de estilos iterativos, incrementais e de prototipao rpida. Em cada passo, um modelo construdo ou enriquecido e depois do ltimo passo, se tem informao suficiente para implementar uma aplicao hipermdia. Tanto a Modelagem Conceitual quanto a Modelagem de Navegao utilizam os mesmos mecanismos (classificao, agregao, generalizao e especializao). A Modelagem Conceitual produz as classes, relaes, atributos. A Modelagem de Navegao gera os ns, links, acessos s estruturas, contextos e transformaes. A etapa de Interface Abstrata responde aos eventos externos e s transformaes traadas entre a navegao e aos objetos. A implementao gera a aplicao e depende do ambiente em que o sistema ir ser executado [9].
21
3.1.1. MODELAGEM CONCEITUAL
O enfoque da Modelagem Conceitual analisar as propriedades da aplicao, extraindo todas as caractersticas para o desenvolvimento do sistema, isso no indica que todos esses elementos sejam empregados na implementao, porque dados podero ser rejeitados. A produo dos objetos da aplicao obtida atravs da utilizao de uma notao baseada em Unified Modeling Language (UML). As classes representam um conjunto de entidades que apresentam as mesmas caractersticas (atributos, relacionamentos e mtodos) [10]. Os atributos das Classes indicam as propriedades dos objetos. A tcnica OOHDM possui uma caracterstica na qual se consegue representar mltiplas perspectivas em um atributo. Os relacionamentos (unrio, binrio, ternrio) fazem a conexo entre as classes, os quais possuem uma cardinalidade (zero ou um, um, zero a infinito, um a infinito e de um a um nmero especfico) indicada no canto de cada classe, logo acima da linha de ligao do relacionamento. A ilustrao 3.1, demonstra essas definies com mais clareza, alm de conceber a visualizao da hierarquia da agregao (onde o laboratrio composto por vrios equipamentos) representado por um relacionamento com um losango vazio no lado da classe que agrega as outras [10].
Figura 3.1 - Classes representadas na notao OOHDM. [8]
22
Pode-se perceber que no esquema as classes Laboratrio e Equipamento possuem ambos os mesmos atributos, no entanto, o atributo Descrio da classe Equipamento pode conter como complemento uma imagem agregada ao texto da descrio, alm disso, h um relacionamento binrio entre as classes, ao mesmo tempo, que as cardinalidades indicam que um laboratrio possui de um at infinitos equipamentos. O losango na ponta do relacionamento indica que a entidade Laboratrio possui uma agregao de equipamentos. A figura 3.2 demonstra mais um exemplo de Modelagem de Conceitual na qual se pode observar as definies citadas anteriormente.
Figura 3.2 - Classes representadas na notao OOHDM [8]
A figura 3.2 demonstra as Entidades Edifcio, Arquiteto e Categoria Edifcio com suas respectivas descries. Edifcio: nome e endereo (texto), ano (nmero inteiro) e descrio (texto podendo conter imagem). Arquiteto: nome (texto) e descrio (texto podendo conter imagem). Categoria Edifcio: nome e descrio (texto). Existe uma relao binria de Arquiteto para Edifcio, denominada Desenha, a qual possui cardinalidade (1..* / 0..*), ou seja, um ou vrios arquitetos desenham nenhum ou vrios edifcios. Tambm existe uma outra relao binria de Categoria Edifcio para Edifcio descrita Classifica que possui cardinalidade (1..* / 0..*), significando que uma ou vrias categorias classificam nenhum ou vrios edifcios.
23
3.1.2. MODELAGEM DE NAVEGAO
O desafio pelos quais os desenvolvedores de hiperdocumentos tm que passar a escolha das informaes que iro fazer parte do sistema, bem como a navegao entre as mesmas. Uma das inovaes no OOHDM realmente reconhecer que os Objetos Navegacionais so diferentes dos Objetos Conceituais, pois os Objetos em que o usurio navega no so os objetos do Modelo Conceitual, mas sim outros tipos de objetos os quais so construdos de um ou mais Objetos Conceituais [8]. De qualquer maneira, sempre possvel obter um mapeamento do tipo um para um, no qual cada Objeto Conceitual obtido atravs de um n com um nico atributo, onde cada atributo obtido associado a um tipo que indica a forma de representao da informao correspondente ao mesmo. Os formatos que um tipo de atributo pode assumir dependem da finalidade do Sistema Hipermdia, 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 vdeo (animao). Nas Classes de Navegao so enumerados os ns e elos que compreendem na conjuntura navegacional do Sistema. Dependendo do tipo e do alvo da Aplicao devero ser criados inmeros planos de navegao para atender cada tipo de metas de ilustrao do Sistema a fim de facilitar a organizao das diversas formas de navegao consequentemente uma melhora no desenvolvimento do Sistema como um todo. Na metodologia OOHDM foi pr-definido um grupo de Classes de Navegao, acarretando na elaborao de um Contexto de Navegao, formado a partir de uma unio de objetos tais como ns, links, ncoras e estruturas de
24
acessos, onde os possveis caminhos para o usurio iniciar a navegao podem ser criados e interagidos. Na demonstrao a seguir atravs da figura 3.3 [8], pode-se observar que no quesito do Contexto (partes acinzentadas), no Contexto Arquiteto, a navegao do usurio se d atravs no Nome do Arquiteto, j no Contexto Edifcio, o acesso obtido por meio da Data, Nome, Arquiteto ou Categoria do Edifcio.
Figura 3.3 - Contexto de Navegao [8]
Analisando melhor, o Menu Principal possui quatro ndices:
Arquitetos: permite acesso a lista dos Arquitetos pelo nome deles. Linha do Tempo: acesso aos Edifcios pelos anos de construo. Edifcios: permite acesso aos Edifcios pelos nomes deles. Categorias: acesso aos Edifcios por categoria (monumentos, hotis).
interessante observar que os Edifcios podem ser agrupados de acordo com o Arquiteto que os projetou, porm este s pode somente ser acessado pelo contexto Arquitetos. Alm disso, a figura 3.3 ilustra que ao olhar um Edifcio de
25
um certo Arquiteto, o usurio pode navegar para o prximo Edifcio na mesma Categoria.
3.1.3. INTERFACE ABSTRATA
Nesta fase do Projeto sero definidas as propriedades da Interface, como exemplo, os botes, menus, barras, por fim todos os componentes grficos que faro a interatividade visual com o usurio. Como o desenho da Interface Abstrata feito antes da implementao do Sistema, preciso ter ateno aos tipos dos objetos que iro ser inseridos na Interface, uma vez que o ambiente de implementao escolhido pode possuir limites no suportando algumas caractersticas das propriedades. No OOHDM, a modelagem da Interface se torna muito interessante, pois o auxlio de ferramentas como o ADVs (Abstract Data Views Viso Abstrata de Dados) facilita isso, tambm a fim de agregar facilidade, h objetos que so denominados ADOs (Abstract Data objects Objetos Abstratos dos Dados) nos quais no lidam com eventos externos, interagindo com estruturas de dados e de controle nas aplicaes. Os ADOs esto associados a ADVs que transmitem as informaes de seus estados para fora da aplicao ou para outros ADVs [10].
3.1.4. IMPLEMENTAO
Durante a fase de construo, atravs dos Contextos da Modelagem de Navegao, so convertidos os objetos acessveis no ambiente de Implementao
26
selecionado. Como resultado, o Sistema Hipermdia final alcanado do tipo de Implementao Traduzida, a qual o prprio nome diz, incide em traduzir essas especificaes em componentes de algum sistema de autoria de aplicaes hipermdia como, por exemplo, o HTML (HyperText Language Markup) e proporcionar a apresentao da aplicao final utilizando um browser (exemplo: Internet Explorer). Ou seja, em suma, nesta etapa da modelagem OOHDM todas as amostras estabelecidas anteriormente sero traduzidas para uma plataforma de implementao, o OOHDMweb, o qual cria ndices em pginas HTML representando os Contextos a partir de informaes armazenadas em tabelas.
3.2. METODOLOGIA WEBML (The Web Modeling Language)
A metodologia WebML, desenvolvida no Instituto de Eletrnica e Informao do Politcnico de Milo (Itlia), consiste em uma simples notao com a finalidade de especificar Sistemas Hipermdia complexos a nvel conceitual, auxiliando no desenvolvimento das principais caractersticas do Sistema em alto nvel, sendo dispensvel arquitetar os detalhes de mais baixo nvel [11]. Proporcionando uma representao grfica bastante intuitiva, a WebML facilita para que seus conceitos sejam agregados a essas apresentaes. Existe tambm uma simplicidade na manipulao dessas representaes acarretando na utilizao de diversas ferramentas CASE (Computer Aided Software Engineering), fazendo com que elas suportem a modelagem WebML, tornando a implementao muito fcil, visto que no desenvolvimento de um Sistema Hipermdia (por causa de sua complexidade, e necessidade de uma equipe com
27
membros de vrias reas da Cincia) nem todos os membros do desenvolvimento conhecem intimamente de programao [8]. A representao de um Sistema usando a tcnica WebML incide, como produo, quatro modelos: o de Dados, o de Hipertexto, o de Apresentao e o de Personalizao. A partir desses modelos, so apresentadas quatro regras de desenvolvimento [8]:
Primeira: o especialista em obteno da abstrao dos dados do Sistema efetiva a Modelagem de Dados.
Segunda: o arquiteto da aplicao desenvolve pginas e a navegao entre elas, atravs da Modelagem de Hipertexto.
Terceira: o arquiteto de estilo elabora apresentao de estilos das pginas, a partir da Modelagem de Apresentao.
Quarta e ltima: por meio da Modelagem de Personalizao, o administrador do Sistema deve desenvolver as opes de usurios e de personalizao de grupos, incluindo tambm as regras de negcios.
3.2.1. MODELAGEM DOS DADOS
Na metodologia WebML tambm so utilizados, diagramas de classes da notao UML para se obter os objetos, produzindo assim as Entidades (Classes, juntamente com seus atributos, etc.) e suas respectivas Relaes, atravs do Modelo de Entidade e Relacionamento, (ME-R) com suas caractersticas: cardinalidades, agregaes, generalizao/especializao [11]. A WebML uma adaptao conceitual na modelagem de Sistemas. Ela compatvel com o ME-R, e com a UML. O elemento fundamental em uma
28
modelagem de dados conhecido como Entidade, definido como um possuidor de elementos de dados, e relacionamentos, atravs de conexes entre as Entidades [12]. As Entidades possuem propriedades, conhecidas como atributos, associadas com um tipo de dado. Elas podem ser organizadas em hierarquias de generalizao e os relacionamentos podem ser controlados atravs das cardinalidades. As instncias das Entidades so individualmente endereadas 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 Msica organizados em certa hierarquia. A Entidade Artista possui dois atributos: nome, e biografia; enquanto lbum possui ttulo e durao e j a Msica, ttulo e ano de produo. Alm disso, pode se ver com facilidade as Cardinalidades das Relaes entre as Entidades. Artista possui um ou vrios lbuns, enquanto esse possui uma ou vrias Msicas. Entretanto, uma Entidade Msica possui apenas um lbum, enquanto um ou vrios lbuns possuem um ou vrios Artistas.
29
O cdigo XML (Extensible Markup Language), a seguir representa a especificao 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, so especificadas a composio das propriedades do Sistema e sua navegao. tambm neste modelo que o Hipertexto composto por pginas, que por sua vez so compostas de Units.
30
As Units so os elementos utilizados para publicar as informaes descritas no modelo de dados. As Units podem ser de seis tipos diferentes: data, multi-data, index, filter, scroller, direct-units [8]. A seguir sero detalhados esses tipos [13]:
Data Units: mostram informaes de um nico objeto. Multidata Units: mostram informaes de vrios objetos. Index Units: mostram uma lista de objetos (entidade ou instncia de componentes), sem a apresentao detalhada das informaes de cada objeto.
Scroller Units: mostram comandos de acesso dos elementos ordenados de uma lista de objetos.
Filter Units: mostram campos de edio de valores usados para procurar em uma lista de objetos, os que encaixam na condio.
Direct Units: no mostram nenhuma informao, e so usados para denotar uma conexo de um nico objeto que relacionado com outro objeto.
A seguir as figuras 3.5 a 3.9 juntamente com os cdigos XML ilustram as seis classificaes de Units definidas anteriormente. A primeira figura, 3.5 demonstra a Data Unit.
Figura 3.5 - Data Units. [13]
31
<DATAUNIT id="ShortArtist" entity="Artist"> <INCLUDE attribute="firstName"/> <INCLUDE attribute="lastName"/> <INCLUDE attribute="photo"/> </DATAUNIT>
A figura 3.5 junto com o cdigo XML demonstrou a implementao 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 cdigo XML demonstrou a implementao de uma Multidata Unit. A figura 3.7 mostra um exemplo de Index Unit.
Figura 3.7 - Index Units. [13]
32
<INDEXUNIT id="AlbumIndex" entity="Album"> <DESCRIPTION Key="title"/> </INDEXUNIT>
A figura 3.7 junto com o cdigo XML demonstrou a implementao 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 cdigo XML demonstrou a implementao 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>
33
A figura 3.9 junto com o cdigo XML demonstrou a implementao 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 cdigo XML demonstrou a implementao de uma Direct Unit. Em suma, o que difere uma Unit da outra so as diversas formas de representar a publicao e as variadas maneiras de setar os objetos com elas relacionadas. A navegao tambm determinada nesta etapa da modelagem, e como j se sabe a navegao em um Sistema Hipermdia normalmente feito atravs dos links. A WebML representa esses links basicamente de duas formas conforme a figura 3.11.
Figura 3.11 - Links automticos e de transporte [11]
34
Como os prprios nomes sugerem e a figura 3.11 demonstra a diferena entre os dois tipos que no Link Automtico, o acesso se d de um comportamento mais complexo, ou seja, quando o usurio selecionar um lbum, ocorrer no apenas a seleo, mas tambm, uma armazenagem do index da escolha. Ser produzida atravs de uma Data Unit a pgina lbum Selecionado, o qual demonstra alguns atributos relacionados ao lbum clicado pela interao do usurio com o sistema. J o tipo Link de Transporte, assim como o nome sugere, ele apenas serve como um canal de comunicao, sem que seja necessria a escolha de uma opo pelo usurio. A figura 3.11 ilustra isso perfeitamente: ao criar a pgina do artista, a Data Unit utilizou desse tipo de artifcio para mostrar os lbuns relacionados com esse mesmo artista, sem a interao direta do usurio com a aplicao.
3.2.3. MODELAGEM DE APRESENTAO
A metodologia WebML no possui uma representao grfica em relao a uma escala conceitual do Sistema, contudo, as especificaes de WebML podem ser descritas e caracterizadas utilizando a linguagem XML (Extensible Markup Language). A apresentao das pginas considerada como uma transformao (extenso) desses documentos, j a construo elaborada em uma pgina escrita usando uma linguagem de programao voltada para a Web.
35
Conseqentemente, a construo de modelos para a apresentao das pginas podem ser construdos utilizando-se XSL (Extensible Style Sheet Language) . [8] A utilizao de XSL vem a substituir os famosos CSS (Cascading Style Sheets), pois o XSL adotou a sintaxe do XML, podendo assim ser includo na especificao WebML. Outro fato importante que o XSL no manipula elementos, manipula objetos grficos. [8] Ou seja, na etapa de Modelagem de Apresentao, a tcnica WebML, se baseia mais especificamente em documentos XLS, integrados com XML, a fim de que fragmentos destes documentos sejam transformados em objetos grficos, fazendo com que a interao destes objetos com a apresentao dos mesmos atravs de pginas Web com os usurios, seja obtida de uma forma simples e natural.
3.2.4. MODELAGEM DE PERSONALIZAO
Usurios e grupos segmentados de usurios, so explicitamente modelados na forma de entidades pr-definida, chamadas de User e Group. As caractersticas dessas entidades podem ser usadas para armazenar o contedo de um grupo especfico, ou do usurio individualmente, ou seja, pode-se controlar os contedos especficos para as categorias criadas, mas tambm, tem-se controle individual das informaes como por exemplo ver sugestes, listar favoritos e otimizar recursos grficos. Aps serem efetuadas todas as etapas de um Sistema em modelagem WebML, pode-se utilizar uma ferramenta CASE para obter automaticamente a aplicao a partir dos diagramas criados com a metodologia [8].
36
3.3.
CONCLUSO
No cabe aqui julgar qual das metodologias descrita (OOHDM e WebML) melhor, mas sim demonstrar como complexa a elaborao de um Sistema Hipermdia, e que essas metodologias auxiliam na construo e manuteno das aplicaes. Na metodologia OOHDM possvel desenvolver projetos modulares e de fcil manuteno, pois a Modelagem Conceitual, Navegacional e o Projeto de Interface so abordados como atividades separadas permitindo um enfoque diferente para cada uma dessas fases. A metodologia WebML, utiliza a modelagem UML para a obteno dos dados, gerando fases bem definidas na modelagem do projeto do Sistema, facilitando o trabalho (construo e manuteno) da equipe envolvida, ela tambm possui ferramentas para publicao das informaes (Data Units) que ajudam no desenvolvimento do Sistema. Em suma, ambas tcnicas so teis para a arquitetura de um Sistema Hipermdia, portanto, ser usada no Captulo 4 (Desenvolvimento do Sistema) a tcnica WebML por se tratar de uma tcnica mais compacta podendo ser adotada para pequenos projetos.
37
4.
DESENVOLVIMENTO DE UM HIPERDOCUMENTO
Como j foi citado, o hiperdocumento ser fabricado atravs da metodologia WebML atravs da ferramenta CASE (Computer Aided Software Engineering) WebRatio. Os desenvolvedores da ferramenta so os mesmos pesquisadores do Politcnico de Milo que criaram a metodologia WebML. Patenteada na Itlia, Europa e Estados Unidos, a WebML reconhecida como a soluo inovadora para modelagem visual de aplicaes Web [14]. WebRatio o primeiro ambiente de desenvolvimento do mundo a integrar a tcnica WebML juntamente com a plataforma JAVA J2EE e instrumentos para criao da documentao do Sistema, til na etapa de manuteno do mesmo [14]. A seguir, ser elaborado passo a passo, de como se procede a instalao da ferramenta WebRatio.
4.1.
INSTALAO DA FERRAMENTA WEBRATIO
Primeiramente, antes de qualquer ao, deve-se ficar atento aos itens que a ferramenta necessita para conseguir efetivamente rodar com sucesso.
38
Na tabela 4.1 se enumera os pr-requisitos relacionados Licena Profissional e tomando como base de que ser utilizada a verso de Trial que se baseia na prpria Licena Profissional com o limite de uso do software por 60 dias aps a instalao.
Tabela 4.1 - Requisitos WebRatio verso 4.0.11 [14] Sistemas Operacionais Java Development Kit (JDK) RAM Espao Livre no HD Resoluo de Vdeo Banco de Dados Suportados Windows 2000/ XP/ 2003. Linux Verso 1.3.1 ou Superior Mnimo 256 Mb (512 Mb recomendado) 100 Mb Mnimo 800 x 600 (1024 x 768 recomendado) Oracle 8i/9i, IBM DB2, Microsoft SQLServer 2000, PostgreSQL, MySQL, Microsoft Acces (potencialmente todo BD com drive JDBC) 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 aplicao com suporte JSP 1.1 JSP1.2)
Servidores de Aplicao Suportados
Um dos requisitos a pr-instalao do JDK 1.3.1 ou Superior, facilmente encontrado no site http://java.sun.com. Na verso 1.5.0.20, a qual foi utilizado o setup, ocupa o espao em disco de exatamente 53.587.968 bytes, ou seja, aproximadamente 51,1 MB, compactado e aps a sua instalao aproximadamente 120MB. A ferramenta tambm necessita de no mnimo o Windows 2000, pois utiliza variveis de ambiente DOS as quais no so bem gerenciadas, por exemplo, na verso do Windows 98. Para se obter o download do WebRatio, basta acessar o site http://www.webratio.com, selecionar o idioma English, e atravs do menu do lado esquerdo escolher a opo Registration. Logo em seguida, abrir a pgina de registro de usurio o qual devero ser preenchidos todos os itens da seguinte forma:
39
No campo E-mail, precisa ser inserido um e-mail vlido pois nele ser enviada a senha de acesso rea de download alm da chave de registro da verso trial.
No campo Salutation esto enumeradas de como a saudao 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 nmero dever ser escrito no campo abaixo chamado Mobile.
Na opo 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 carter 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, atravs do menu do lado esquerdo escolher a opo 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 instalao, um para ambiente de sistema operacional Linux, e outro para Windows. Ao selecionar o tipo de sistema operacional, deve concordar com os termos de utilizao da ferramenta e logo ser feito o redirecionamento para a baixa do setup como tambm o envio de um novo e-mail agora com a chave de ativao (sessenta dias de utilizao) da ferramenta.
40
O setup ocupa em disco exatamente 38.633.472 bytes, ou seja, aproximadamente 36,8 MB compactado e depois da instalao, tambm aproximadamente 120 MB. Ao terminar o download, basta executar o setup, inicialmente a ferramenta no encontra o JDK, mas logo aps tem-se a opo para selecionar a pasta do mesmo manualmente, ser perguntado que tipo de instalao se necessita, basta prosseguir, e logo depois ser perguntado o usurio de ativao juntamente com a chave de registro da ferramenta, os quais foram enviados ao e-mail cadastrado para fazer login no site. Ao concluir a instalao, sero 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 verso 1.4.14 a qual foi utilizada, o setup ocupa o espao em disco de aproximadamente 25,5 MB (26.746.880 bytes), compactado e aps a sua instalao aproximadamente 190 MB. Logo, percebe-se que na tabela 4.1 relacionada h um equivoco na informao de que so necessrios apenas 100 MB de espao livre no HD, e que sim so necessrios aproximadamente 430 MB para instalao de todos os requisitos. Tambm necessrio de fazer o download do pacote mysql-connectorjava-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 tambm na pasta do jdk1.5.0_02, subpastas \jre\lib\ext. Para continuar o procedimento de ativao do software, basta clicar no atalho de nome WebRatio 4, e se necessitar de configurao do proxy, informar as devidas informaes, caso contrrio apenas prosseguir.
41
Ao concluir essas etapas, a ferramenta estar apta para a modelagem um hiperdocumento.
4.2.
MODELAGEM DE DADOS
Conforme o captulo 3, a primeira etapa da metodologia WebML se baseia na Modelagem de Dados, e tambm no WebRatio o primeiro passo justamente esboar 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 so criadas e no podem ser removidas pois fazem parte da estrutura do sistema (uma parte da extenso da Modelagem de Personalizao), todavia no tpico conveniente ser novamente levantada a questo para uma melhor compreenso. Na verso trial da ferramenta estas entidades tm que ser renomeadas para o portugus manualmente, diferente da verso corporativa, onde j se pode prdefinir este detalhe antes. Para se adicionar uma nova entidade ao ambiente basta clicar com o boto direito no ambiente e depois em Add Entity, ela ser nomeada com o nome de Entity e nmero crescente de sua criao, 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 boto direito em cima da entidade desejada e logo depois clicar em Add Attribute. O mesmo acontecendo com os atributos, onde eles sero nomeados com o nome de
42
Attribute e nmero crescente de sua criao, 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) aconselhvel escolher o tipo de arquivo atravs do campo Content-type (image, image/gif, image/jpg, image/png, application/zip, application/pdf, application/doc). E para adicionar as relaes entre as entidades basta escolher a entidade clicando com o boto 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 herana), 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 (atravs dos campos Min Card e Max Card) assim como tambm se tem acesso mudana dos nomes das relaes a partir do campo Name. No estudo de caso deste captulo, o sistema produzido ser uma pgina 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 insero e remoo de categorias e remoo 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:
43
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 captulo, foi escolhido o nome: receitas. Logo, todos os arquivos do projeto sero salvos na pasta do WebRatio na subpasta DataRepository\receitas. A prpria ferramenta cria toda a estrutura de banco de dados a partir do Modelo Conceitual apresentado na figura 4.1, bastando apenas criao do banco e informando algumas configuraes.
44
Supondo que foi criado no MySQL um banco chamado receitas, basta ir paleta Mapping View / Project Tree / Data Sources do WebRatio, clicar o boto 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 opo 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 endereo do banco, ex.: jdbc:mysql://localhost/receitas. E nos campos Username e Password os dados para acesso ao banco. Para testar a conexo, verifique se o MySQL est ativo e depois clique o boto direito acima da fonte de dados criada e logo aps clique em Refresh. Para criar a estrutura de tabelas e atributos basta clicar de novo o boto direito acima da fonte de dados e em Create Empty Data Mapping. Logo aps a fase de Modelagem de Dados estar concluda, preciso modelar a apresentao de hipertextos.
4.3.
MODELAGEM DE HIPERTEXTO
Nesta etapa ocorre a organizao da navegabilidade de todo o sistema. Na ferramenta, h como separar por Site Views (sv), ou seja, por viso de sites, ou melhor, por reas de acesso a implementao das pginas. No caso do Sistema de Receitas, foi ocasionada esta diviso em duas partes, o sv1 (Visitantes) e o sv2 (Administrao), em que os prprios nomes j sugerem muito bem o que cada seo dessas capaz.
45
A seguir, para um melhor entendimento, ser dividida a modelagem de acordo com as duas vises do site. Na rea de Visitantes, todas as pessoas que acessarem o site podero listar as receitas a partir das categorias delas, ou a partir de uma listagem completa de todas as receitas ou tambm atravs de um mecanismo de busca por nome da receita. Todos tm acesso insero de receitas. Existe uma pgina para validao de login a fim de redirecionar o usurio para a rea administrativa. J na rea de Administrao, os usurios com esse privilgio podero, alm de alterar, criar ou remover as categorias (lembrando que ao apagar uma categoria, todas as receitas vinculadas a ela sero automaticamente excludas), tero acesso de remoo de qualquer receita. Tambm tero o comando de efetuar logout, ou seja, voltar para o ambiente dos usurios comuns.
4.3.1. VISO DOS VISITANTES
O primeiro passo criar o SV, bastando apenas ir paleta Editing View / Project Tree / Site Composition e clicar com o boto direito em cima de SiteViews, 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 atravs dos botes que aparecem depois da criao do novo sv. O segundo passo criar uma rea (serve para organizar melhor as diversas pginas a serem criadas). Para efetuar esse procedimento basta clicar no boto Add Area e clicar na posio do ambiente desejada, sendo que o campo Name deve ser alterado de Area 1 para Bem-vindo.
46
Na rea de Visitantes, todas as pessoas que acessarem o site podero listar as receitas a partir das categorias delas, esta ser a primeira funo a ser modelada.
4.3.1.1. PGINAS CATEGORIAS E VISUALIZAR RECEITAS
A primeira pgina a ser inserida dentro da rea criada deve ser a pgina principal do site. Para inserir uma pgina, basta clicar no boto Add Page e selecionar a posio, no se esquecendo de alterar o campo Name de acordo com a comodidade. Como esta pgina a principal, se deve marcar os campos Landmak (serve para que depois da criao da pgina, ao se criar um menu no layout, o acesso desta mesma pgina seja inserido neste menu) e tambm o campo Home (justamente para indicar que a pgina a pgina principal da rea). A pgina principal tem o campo Name igual a Categorias, e alm disso adicionado um Index Unit dentro dela. Para adicion-lo, basta clicar no boto Index Unit e logo depois em cima da pgina 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 pgina principal ir conter uma lista de todas as categorias as quais sero listados os nomes das categorias ordenadas ascendentemente. A fim de mostrar as receitas vinculadas s categorias listadas na pgina principal, outra pgina ser criada, do mesmo modo que se criou a primeira, mas
47
no devem ser marcados os campos Landmark e Home, apenas mudar o campo Name para Visualizar Receitas. Nesta pgina 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 so escolhidos os atributos Titulo, Foto e Descricao e no Sort Attributes o atributo Titulo indicado como Ascending na paleta Ordering. necessrio tambm adicionar uma condio na Data Unit a fim de mostrar apenas a categoria selecionada na pgina principal. Para fazer isto, basta clicar com o boto direito em cima da mesma e depois clicar em Add Selector Condition. O campo Name pode ser substitudo 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 boto Add Link e selecionar a origem e o destino. Neste estgio sero criados trs 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 boto direito em cima do link, e clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo 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.
48
E o terceiro e ltimo origem Data Unit Categoria, destino Index Unit Receitas por Categoria e campo Type igual a Transport. Clicar com boto direito em cima do link, e clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo de Target Condicao2, selecionar Source Displayed Object. No final desta etapa, a aparncia na Modelagem de Hipertexto, as pginas Categorias e Visualizar Receitas tm que estar de acordo com a figura 4.3:
Figura 4.3 - Pginas Categorias e Visualizar Receitas [15]
Outro modo de listagem das receitas pode ser obtida atravs de uma procura completa de todos os registros encontrados no banco.
4.3.1.2. PGINAS RECEITAS
Nesta pgina ocorrer a montagem da lista de todas as receitas contidas no banco de dados do sistema.
49
Basta adicionar uma pgina dentro da rea Bem-vindo, e renomear o campo Name para Receitas, e tambm marcar o campo Landmark, a fim de todos os usurios acessarem este comando a partir do menu a ser criado automaticamente na gerao das pginas. A seguir, inserir um Multi Data Unit atravs do respectivo boto com o mesmo nome. No campo Name alterar para Todas as Receitas, o campo Entity para Receita, no campo Shown Attributes so 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 aparncia na Modelagem de Hipertexto, a pgina Receitas tem de estar de acordo com a figura 4.4:
Figura 4.4 - Pgina Receitas [15]
Outra funo implementada no sistema para visualizao de uma receita a partir do mecanismo de busca.
4.3.1.3. PGINA BUSCA
Com o intuito de criar um procedimento de busca no banco de dados do sistema a partir do ttulo da receita, preciso primeiramente inserir uma pgina cujo campo Name deve conter o nome Busca e o campo Landmark marcado.
50
Logo a seguir, deve-se inserir as estruturas Entry Unit, Index Unit e Data Unit dentro na mesma pgina criada anteriormente. No Entry Unit, o item Name mudado para Receita. E clicado o boto direito acima do mesmo e depois clicado em Add Field, o qual o campo Name alterado para Ttulo. J no Index Unit, Name igual a Resultado, Entity selecionada a entidade Receita e Shown Attributes e Sort Attributes (opo Ordering Ascending) escolhido o atributo Titulo. Tambm adicionado um Selector clicando o boto 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 opo Contains. Na estrutura Data Unit, o campo Name modificado para Detalhe, o item Entity selecionada a entidade Receita e no campo Shown Attributes so 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 boto 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 boto Add Link e selecionar a origem e o destino. Neste estgio sero 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 boto direito acima do link, e clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo de Target Condicao3, selecionar Source Ttulo. E o segundo e ltimo origem Index Unit Resultado, destino Data Unit Detalhe e campo Name igual a Detalhe. Clicar o boto direito acima do link, e
51
clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo de Target Condicao4, selecionar Source OID. No final desta etapa, a aparncia na Modelagem de Hipertexto, a pgina Busca tem que estar de acordo com a figura 4.5:
Figura 4.5 - Pgina Busca [15]
Outra funo do sistema a insero de receitas, e qualquer usurio pode colaborar com esta tarefa.
4.3.1.4. PGINAS INSERINDO RECEITA E FALHA
Estas pginas so responsveis pelo mtodo de insero de uma receita no bando de dados do sistema. Primeiramente, necessrio inserir duas pginas na rea, uma com o nome de Inserindo Receita e outra com o nome de Falha. Na pgina Inserindo Receita, adicionar a estrutura Entry Unit nomeando-a de Receita, e adicionar os campos (clicando o boto direito acima do mesmo e depois clicando Add Field):
52
Categoria: marcar somente campo Preloaded e adicionar Slot (clicando o boto direito acima de Categoria e depois clicar Add Slot).
CategoriaOID: marcar campo Preloaded e Hidden e adicionar Slot (clicando o boto direito acima de CategoriaOID e depois clicar Add Slot).
Descrio: marcar somente campo Modifiable, no campo Type selecionar BLOB e em Content Type escolher opo application/doc.
Foto: marcar somente campo Modifiable, no campo Type selecionar BLOB e em Content Type escolher opo image.
Ttulo: marcar somente campo Modifiable.
Na pgina Falha, deve-se tambm adicionar a estrutura Entry Unit, mas somente nome-la de Erro ao Inserir e no adicionar nenhum campo. Entre as duas pginas criadas anteriormente, ou seja, na prpria 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 so os OK-links e os KO-links (localizados tambm na barra de botes). Adicionar um KO-link de origem Adiciona e destino Falha, adicionar outro KO-link, agora de origem Conecta e destino Falha. Tambm 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. Alm 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:
53
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 relao:
Source: OID Target: (deixar em branco) Source: Ttulo Target: Titulo Source: Foto Target: Foto Source: Descrio Target: Descrio
Ainda no Parameters Coupling, mas agora na paleta Passing Parameters, marcar a opo 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 relao:
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 opo CategoriaOID_PASSING. No segundo OK-link, atravs do Parameters Coupling, na paleta Outgoing Parameters selecionar a seguinte combinao, Source CategoriaOID_PASSING e Target Condicao1.
54
Ao fim da tarefa as inter-relaes entre as pginas devem estar de acordo com a figura 4.6:
Figura 4.6 - Pginas Inserindo Receita e Falha [15]
Agora falta somente implementar a pgina de validao de usurio a fim de redirecionar o mesmo para a Administrao do Site.
4.3.1.5. PGINAS REA RESTRITA E USURIO OU SENHA INVLIDOS
Com a funo de fazer a verificao de acesso parte privativa do sistema, e com a finalidade de apenas desviar para a outra viso, para o outro contedo do site (parte administrativa), deve-se criar duas pginas, uma com nome de rea Restrita e cujo campo Landmark selecionado, e outra com o nome de Usurio ou Senha Invlidos. Ambas as pginas possuem a mesma estrutura, ou seja, o Entry Unit, o qual possui os campos (para adicionar um campo ao Entry Unit, clicar com boto
55
direito em cima do mesmo e depois clicar em Add Field) Usurio e Senha, contudo no Entry Unit da rea Restrita o nome do mesmo renomeado para Administrao, enquanto no da outra pgina alterado para Tente Novamente. Precisa-se adicionar a estrutura Login Unit entre as duas pginas, e entre o Login Unit (origem) e a pgina Usurio ou Senha Invlidos (destino), inserir um KO-link. Outros dois links que devem ser implementados e que tem a mesma descrio, so dos dois Entry Unit (origem) e que vo para o Login Unit (destino). Ambos tm o mesmo nome, Entrar. E do mesmo modo possuem a mesma estrutura do Parameters Coupling, onde na paleta Outgoing Parameters a seleo se d da seguinte maneira: Source Usuario e Target Username e Source Senha e Target Password. Para uma melhor abstrao da Modelagem de Hipertexto a figura 4.7 ilustra as duas pginas trabalhadas anteriormente:
Figura 4.7 - Pginas rea Restrita e Usurio ou Senha Invlidos. [15]
A viso dos usurios est concluda, agora na rea de Administrao, os usurios com privilgio podero alm de modificar, inserir ou deletar as categorias (lembrando que ao apagar uma categoria, todas as receitas vinculadas a ela sero automaticamente excludas), tero acesso de excluso de qualquer receita como tambm podero voltar ao espao dos visitantes.
56
4.3.2. VISO DOS ADMINISTRADORES
O primeiro passo criar o SV, bastando apenas ir paleta Editing View / Project Tree / Site Composition e clicar com o boto direito em cima de SiteViews, logo depois clicar em Add Site-View e depois alterar o campo Name de Site-View 2 para Administrao e marcar a opo 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 pginas que vo ser adicionadas no perodo de modelagem). Para efetuar este procedimento basta clicar no boto Add Area e clicar na posio do ambiente desejada, sendo que o campo Name deve ser alterado de Area 2 para Administrao. Na rea de Administrao, todas as pessoas que acessarem o site podero listar as categorias das receitas, alm de poder modificar as mesmas, estas sero as primeiras funes a serem modeladas.
4.3.2.1. PGINAS CATEGORIAS, MODIFICANDO CATEGORIAS E FALHA
A primeira pgina a ser inserida dentro da rea criada deve ser a pgina principal do site. Para inserir uma pgina basta clicar o boto Add Page e selecionar a posio, no se esquecendo de alterar o campo Name de acordo com a comodidade. Como essa pgina a principal, devero ser marcados os campos Landmak (serve para que depois da criao da pgina, ao se criar um menu no layout, o acesso desta mesma pgina seja inserido neste menu) e tambm o campo Home (justamente para indicar que a pgina a pgina principal da rea).
57
A pgina principal tem o campo Name igual a Categorias, e alm disso adicionado um Index Unit dentro dela. Para adicion-lo basta clicar o boto Index Unit e logo depois acima da pgina 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 pgina principal ir conter uma lista de todas as categorias nos quais sero listados os nomes das categorias ordenadas ascendentemente. A fim de modificar as caractersticas das categorias listadas na pgina principal, outra pgina ser criada, do mesmo modo que criou-se a primeira, mas no devero ser marcados os campos Landmark e Home, apenas mudar o campo Name para Modificando Categorias. Nesta pgina 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 (atravs do boto Add Field), cujo nome Nome e os itens marcados so Preloaded e Modifiable, tambm inserido um Slot dentro do campo Nome. Entre as duas pginas criadas devero 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 boto Add Link e selecionar a origem e o destino. Neste estgio sero criados quatro links. O primeiro deve ser de origem Index Unit Categorias e destino Data Unit Modificando Categorias e campo Name modificado para Alterar.
58
O segundo tem origem Data Unit Modificando Categorias e destino Entry Unit Modificando Categorias e campo Type igual a Transport. Depois necessrio clicar o boto direito acima do link, e clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo de Target Nome, selecionar Source NomeCategoria. No terceiro, a origem Data Unit Modificando Categorias, destino Modifica, com campo Type igual a Transport. Clicar o boto direito acima do link, e clicar em Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo 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 boto direito acima do link, e clicar Parameters Coupling, desmarcar o item Enable default parameters coupling e na paleta Outgoing Parameters na direo de Target NomeCategoria, selecionar Source Nome. Assim, a aparncia da Modelagem de Hipertexto at o momento dever estar de acordo com a figura 4.8:
Figura 4.8 - Pginas Categorias, Modificando Categorias e Falha [15]
59
Caso ocorra algum erro na alterao dos dados, necessrio criar uma pgina com o intuito de mostrar este fato ao usurio. Para isso adicionada outra pgina 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 tambm 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, so adicionados um OK-link de origem Modifica e destino pgina Categorias. E um KO-link de origem Modifica e destino pgina Falha. Agora, outras funes que so implementadas na parte administrativa do sistema so as questes de inserir e deletar categorias.
4.3.2.2. PGINAS CATEGORIAS, APAGANDO CATEGORIA E FALHA
Nestas pginas ocorrer a incluso de novas categorias no banco de dados do sistema e a excluso de categorias, porm na ltima ao todas as receitas vinculadas categoria excluda sero perdidas. Basta adicionar uma pgina dentro da rea Administrao, e renomear o campo Name para Apagando Categoria. A seguir, inserir um Entry Unit atravs do respectivo boto com o mesmo nome. No campo Name alterar para Confirma remoo?, e so adicionados dois campos Field, um com nome de ATENO (inserir um Slot de Value igual a Receitas sero perdidas! e nenhuma opo marcada; e o outro com nome de Categoria campo Preloaded marcado, e adiciona-se um Slot nele tambm. Outro Entry Unit com nome Nova Categoria e com um Field de nome igual a Nome tem de ser adicionado na pgina Categorias, criada anteriormente no mtodo de modificao.
60
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. Tambm necessrio adicionar uma condio no primeiro Delete Unit a fim de apagar apenas as receitas relacionadas com a categoria selecionada a ser excluda na pgina principal. Para fazer isto basta clicar com o boto direito em cima da Delete Unit Receita e depois clicar em Add Selector Condition. O campo Name pode ser substitudo por Condicao5, e no campo Relationship escolhido o relacionamento Categoria_2_Receita. Para um melhor entendimento, a figura 4.9 ilustrar a modelagem j concluda, e logo aps sero descritos os passos da navegabilidade dos links entre as estruturas.
Figura 4.9 - Pginas Categorias, Apagando Categoria e Falha [15]
A seguir so inseridos alguns links no ambiente. Primeiramente, coloca o link de origem Index Unit Categorias para destino Entry Unit Apagando
61
Categoria, com nome Apagar, Outgoing Parameters de Source NomeCategoria e Target Categoria, e em Passing Parameters marcar opo Selected Object. Adicionar outro link (origem Entry Unit Apagando Categoria, destino Index Unit Categorias) de nome No. E tambm mais um de origem Entry Unit Apagando Categoria para destino Deletar Receita de nome Sim, no Outgoing Parameters na direo de Target Condicao5, selecionar Source Selected Object_PASSING Object_PASSING. Mais um link de nome Adicionar, origem Entry Unit Categorias, destino Inserir, Outgoing Parameters de Target NomeCategoria, selecionar Source Nome. Trs KO-links so includos, um de origem em cada Delete Unit e destino pgina Falha e o ltimo de origem Create Unit e destino pgina Falha. Outros trs OK-links so inseridos, um de origem Inserir e destino pgina 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 pgina Categorias. Terminada essa etapa, outro mtodo que pode ser acessado pela Administrao a remoo de qualquer receita encontrada no banco de dados. e em Passing Parameters marcar opo Selected
4.3.2.3. PGINAS RECEITAS, APAGANDO RECEITA E FALHA
A fim de remover qualquer receita encontrada no sistema, a primeira pgina deve ser includa com o nome de Receita e opo marcada Landmark, nela conter um Index Unit a fim de listar todas as receitas, cujo campo Entity ser
62
escolhida a entidade Receita. No campo Shown Attribute, todos os atributos devem ser escolhidos (clicando no boto All) e no campo Sort Attributes o atributo Titulo deve ser selecionado como Ascending na aba Ordering. Outra pgina pode ser criada com o nome de Apagando Receita. Deve-se adicionar a estrutura Entry Unit de nome Confirma remoo?, de Field com nome igual a Ttulo, opo Preloaded marcada e neste mesmo Field, inserir um Slot. A pgina de erro deve ser includa com o nome de Falha, contendo um Entry Unit de nome Erro na Excluso, 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 pgina Receitas e um KO-link para a pgina Falha. As pginas devero estar de acordo com a figura 4.10:
Figura 4.10 - Pginas 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
63
Ttulo, Passing Parameters, marcar Selected Object. Outro de nome No, 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 implementao da modelagem da ltima pgina, a pgina para a sada da rea administrativa.
4.3.2.4. PGINA SAIR
Com a inteno de perguntar ao administrador logado no sistema se ele tem a certeza de que quer sair da rea administrativa, esboada a pgina Sair. Basta criar uma pgina de nome Sair e marcar opo Landmark. Incluir um Entry Unit de nome Efetuar logout? e tambm 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 Administrao, a figura 4.11 ilustra os andamentos dos esforos:
Figura 4.11 - Pgina Sair [15]
64
Por ltimo, adicionar tambm um link de nome Sim, origem Entry Unit Sair, destino Logout Unit. Caso o usurio no queria sair da sesso administrativa, basta que ele acesse as funes do menu do lado esquerdo da pgina. Assim, termina a Modelagem de Hipertexto, a qual tambm j automaticamente gerou uma parte da etapa da Modelagem de Personalizao, ou seja, a etapa de navegabilidade de usurios comuns e usurios administrativos.
4.4.
MODELAGEM DE APRESENTAO
O modo de apresentao das pginas est diretamente relacionado com os estilos modelados a partir da linguagem XML (Extensible Markup Language). Existe uma ferramenta dentro do prprio 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 sugesto para outra oportunidade, um estudo mais detalhado desta ferramenta. Nesta fase do sistema, ocorrem algumas configuraes na ferramenta WebRatio as quais devem seguir os seguintes passos:
Fazer uma cpia da pasta WebRatio-4.0\tomcat\webapps\emptyproject-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.
65
Na paleta Presentation View / Project Tree / Site Composition estaro listadas as duas apresentaes disponveis: Administrao e Visitantes.
Deve-se clicar em cima de cada uma das apresentaes e selecionar o Stylesheet com o valor de Folder e o Default Page Layout com o valor de blue gradient.
Tambm em ambas vo estar contidas as reas criadas juntamente com suas respectivas pginas. Deve-se caminhar em todas as pginas e no canto esquerdo, aparece um menu chamado Pool. Clica-se na estrutura e seleciona a posio no corpo da pgina que se deseja apresentar para o usurio.
A apresentao est pronta para ser criada, ou seja, as pginas do sistema podem ser geradas a partir do boto Buill All, bastando apenas selecionar a apresentao Administrao e efetuar este procedimento, e logo depois do trmino, selecionar a apresentao Visitantes e fazer a mesma coisa. A Modelagem de Apresentao est concluda; agora para a diferenciao dos nveis de acesso, a Modelagem de Personalizao demonstrar as etapas para este fim.
4.5.
MODELAGEM DE PERSONALIZAO
A rdua tarefa de personalizao do sistema praticamente j foi resolvida a partir da Modelagem de Dados, e depois pela Modelagem de Hipertexto. O WebRatio, desde a criao 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 nveis de acesso.
66
Depois, atravs da seleo do campo Protected em um sv, e tambm das estruturas Login Unit e Logout Unit, integrado com alguns requisitos como no caso um Entry Unit, a ferramenta j possui pr-fundamentos de estruturao da personalizao do sistema. Outro tipo de personalizao que a verso 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 lngua e costume de cada pas. Atravs do boto Edit, escolhe-se o pas 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 podero ser traduzidas. Em suma, a diferenciao de usurios j obtida atravs das Modelagens anteriores, cabendo nesta etapa apenas a insero no banco de dados da estrutura dos registros para o reconhecimento dessa diferenciao. Pode-se tambm modificar as variveis de mensagem de erro e apresentaes de variveis atravs do recurso Localization. O modo mais prtico criar um arquivo de texto, renome-lo para extenso sql, adicionar o contedo descrito a seguir e execut-lo atravs 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', 'mmscecin@terra.com.br', 2);
Finalmente, a pgina est pronta para ser executada, faltando agora um simples detalhe que a criao de um outro arquivo, de nome index.jsp cujo contedo dele deve conter a seguinte linha:
67
<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 endereo http://localhost:8080/receitas.
4.6.
CONCLUSO
A ferramenta WebRatio demonstrou ser bastante intuitiva, bastando apenas a Modelagem via arraste e clique para a obteno de pginas JSP (JavaServer Pages), que uma tecnologia utilizada no mercado. Fica explcito que ela se encaixa perfeitamente na tcnica WebML, em que podem ser observadas com clareza as etapas das Modelagens do Sistema. Contudo, na verso Trial, houve algumas limitaes significativas como, a ausncia de Units que acrescentariam melhores recursos ao sistema desenvolvido, por exemplo, funes de exibio de mensagem, de acesso a transaes no banco de dados e de manipulao de hora e data. Houve algumas dificuldades no sentido de criao das pginas, como o exemplo de fazer uma cpia da pasta WebRatio-4.0\tomcat\webapps\emptyproject-jsp1.2 e renome-la de acordo com o nome do projeto (recurso que a prpria ferramenta poderia executar automaticamente), e tambm manipulao dos dados no banco. Tais desafios foram resolvidos via tutorial (o qual apresenta exemplos incompletos) ou via suporte do fabricante (cujos e-mails no foram respondidos em sua totalidade). Fica sugerido para um prximo estudo, a anlise da ferramenta que vem embutida no WebRatio, chamada de EasyStyler, a qual gera os Stylesheet e
68
Layouts das pginas, para abrir este recurso basta acessar Tools / EasyStyler. Alm do estudo mais aprofundado da taglib webml, includas nas pginas JSPs geradas. Em suma, a ferramenta provou ser eficaz e rpida, baseado apenas no uso para gerao de um site, em todas as Modelagens da Pgina Web, assim como tambm possui recursos para gerao da Documentao 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.
69
5.
CONCLUSO
Com o estudo feito desde o retrospecto histrico da Computao, at os conceitos bsicos, formatos digitais, e tcnicas de projetos de Sistemas, percebeuse que o termo Sistema Hipermdia bastante amplo, conquanto que Hipermdia julgado como sendo a interao de Hipertexto juntamente com Multimdia. A partir disso, e do fato de que a prpria histria da Informtica 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. Alm do mais, como foi estudado ao longo do curso de Cincia da Computao, principalmente na matria de Engenharia de Software, e aprendeu-se que um Sistema, necessita de uma Tcnica de Projeto, e no caso de uma Aplicao voltada para Web, metodologia WebML (como o prprio 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 prtica, pois ao mesmo tempo que integrou a teoria da metodologia WebML comprovou ser prtica, intuitiva e produtiva. Todavia, por ser uma verso trial, ocorreu o levantamento de limitaes considerveis na ferramenta, mas as mesmas so explicitamente enumeradas tanto no site do desenvolvedor da ferramenta (www.webratio.com), como tambm na documentao que vem na instalao.
70
A documentao tutorial da ferramenta, dependendo do problema a ser resolvido, no mostrou ser suficientemente completa e ter exemplos plausveis, entretanto o suporte tcnico via e-mail foi um fator determinante para eliminao dos problemas. Um bug extremamente preocupante no quesito de segurana encontrado quando o usurio 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 aps isso, for digitado o link de acesso rea restrita no browser, um usurio no autorizado consegue efetuar o login, todavia na nova verso da ferramenta (4.WS) o mesmo foi corrigido. At o presente momento a importante informao do desenvolvedor da ferramenta do valor da Licena Corporativa da mesma no foi obtida, entretanto foi informado que o desenvolvedor entraria em contato com o orientador desta monografia, professor Edson Angoti Jnior a fim de explicar uma provvel aliana junto ao programa acadmico da ferramenta WebRatio. Em suma, caso seja necessrio um desenvolvimento de um Site com mais recursos, a ferramenta possui a verso Corporativa, a qual possui inmeras vantagens alm das j encontradas na verso limitada, sendo que a nica grave desvantagem encontrada foi a do bug, a qual j foi solucionada na nova verso da ferramenta. Fica registrada uma recomendao de sugesto, principalmente para pessoas que gostam de design, a anlise da ferramenta EasyStyler, responsvel pelo gerenciamento de layouts dos sites.
71
REFERNCIAS BIBLIOGRFICAS
[1] CORREIA, Cludia; ANDRADE, Helosa. Noes Bsicas de Hipertexto. [2] LEMOS, A. As Estruturas Antropolgicas do Ciberespao. [3] LVY, P. As Tecnologias da Inteligncia. 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, Patrcia. Notao 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 Documentao do Sistema gerada a partir da ferramenta WebRatio e tambm do prprio projeto Receitas. ltimo acesso, 14/10/2005.
72

O Uso Da Ferramenta WebRatio No Desenvolvimento de Hiperdocumentos

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

O Uso Da Ferramenta WebRatio No Desenvolvimento de Hiperdocumentos

Uploaded by

Copyright:

Available Formats

CENTRO UNIVERSITRIO DO TRINGULO PR-REITORIA DE ENSINO DE GRADUAO CURSO DE CINCIA DA COMPUTAO

O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos

Marcelo Mendes de Sousa Cecin

CENTRO UNIVERSITRIO DO TRINGULO PR-REITORIA DE ENSINO DE GRADUAO CURSO DE CINCIA DA COMPUTAO

O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos

Marcelo Mendes de Sousa Cecin

O Uso da Ferramenta WebRatio no Desenvolvimento de Hiperdocumentos

Marcelo Mendes de Sousa Cecin

HISTRIA DO HIPERTEXTO E DA MULTIMDIA

Figura 2.1: Anotaes de Leonardo Da Vinci

Figura 2.2 - Caligrafia de Aldo Manucio

Figura 2.3 - Douglas Engelbart e a primeira apresentao do mouse

servidor/cliente, a qualidade mnima exigida para transmisso, os recursos financeiros disponveis).

VANTAGENS DA UTILIZAO DE HIPERDOCUMENTOS

O hiperdocumento pode adaptar-se ao leitor: auto-complemento, cookies, applets.

O leitor pode marcar o hiperdocumento por meio da interatividade com o usurio.

O hiperdocumento pode incluir som, animao e vdeo: conceito bsico de hipermdia.

EXEMPLOS DE SISTEMAS HIPERMDIA

3.1. METODOLOGIA OOHDM (The object Oriented Hipermedia Design Model)

3.1.1. MODELAGEM CONCEITUAL

Figura 3.1 - Classes representadas na notao OOHDM. [8]

Figura 3.2 - Classes representadas na notao OOHDM [8]

3.1.2. MODELAGEM DE NAVEGAO

Figura 3.3 - Contexto de Navegao [8]

Analisando melhor, o Menu Principal possui quatro ndices:

3.1.3. INTERFACE ABSTRATA

3.2. METODOLOGIA WEBML (The Web Modeling Language)

3.2.1. MODELAGEM DOS DADOS

Figura 3.4 - Modelagem de Dados WebML [13]

3.2.2. MODELAGEM DE HIPERTEXTO

Figura 3.5 - Data Units. [13]

Figura 3.6 - Multidata Units [13]

<MULTIDATAUNIT id="MultiAlbumUnit" entity="Album"> <DATAUNIT id="AlbumUnit" entity="Album"> <INCLUDEALL/> </DATAUNIT> </MULTIDATAUNIT>

Figura 3.7 - Index Units. [13]

<INDEXUNIT id="AlbumIndex" entity="Album"> <DESCRIPTION Key="title"/> </INDEXUNIT>

Figura 3.10 - Direct Units [13] <DIRECTUNIT id="ToArtist" relation="Album2Artist"/>

Figura 3.11 - Links automticos e de transporte [11]

3.2.3. MODELAGEM DE APRESENTAO

3.2.4. MODELAGEM DE PERSONALIZAO

INSTALAO DA FERRAMENTA WEBRATIO

Servidores de Aplicao Suportados

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

Figura 4.1 - Estrutura de Dados do Sistema [15]

Figura 4.2 - Relacionamentos das Entidades [15]

4.3.1. VISO DOS VISITANTES

4.3.1.1. PGINAS CATEGORIAS E VISUALIZAR RECEITAS

Figura 4.3 - Pginas Categorias e Visualizar Receitas [15]

4.3.1.2. PGINAS RECEITAS

Figura 4.4 - Pgina Receitas [15]

4.3.1.3. PGINA BUSCA

Figura 4.5 - Pgina Busca [15]

4.3.1.4. PGINAS INSERINDO RECEITA E FALHA

Ttulo: marcar somente campo Modifiable.

Source: Selected Object Target: CategoriaOID Source: NomeCategoria Target: Categoria

Figura 4.6 - Pginas Inserindo Receita e Falha [15]

4.3.1.5. PGINAS REA RESTRITA E USURIO OU SENHA INVLIDOS

Figura 4.7 - Pginas rea Restrita e Usurio ou Senha Invlidos. [15]

4.3.2. VISO DOS ADMINISTRADORES

4.3.2.1. PGINAS CATEGORIAS, MODIFICANDO CATEGORIAS E FALHA

Figura 4.8 - Pginas Categorias, Modificando Categorias e Falha [15]

4.3.2.2. PGINAS CATEGORIAS, APAGANDO CATEGORIA E FALHA

Figura 4.9 - Pginas Categorias, Apagando Categoria e Falha [15]

4.3.2.3. PGINAS RECEITAS, APAGANDO RECEITA E FALHA