Utilização de Hipermídia para Criação de Help: Estudo de

Caso Software para Auxílio no Ensino de Linguagens

Regulares

Juliana Leontina da Silva1, Frederico Coelho

1

1Departamento de Ciência da Computação

Universidade Presidente Antônio Carlos (UNIPAC) – Campus Magnus – Barbacena, MG

Brasil

jujuly06@yahoo.com.br,fredericocoelho@unipac.br

Resumo. Este artigo aborda a modelagem e o desenvolvimento de uma

Hipermídia criada para complementar softwares que serão criados voltados

para o ensino de Linguagens Regulares. A Hipermídia funciona como um

Help dentro do software, visando proporcionar ao usuário do sistema uma

melhor compreensão do conteúdo e trazendo um diferente e importante

mecanismo que ainda não é muito utilizado.

Palavras-chave: Hipermídia; Linguagens Regulares; Help.

1. Introdução

Ao estudar Linguagens Regulares, muitos alunos têm apresentado grandes dificuldades,

pois é necessário um certo grau de abstração. Para resolver esse problema surgiram vários

softwares que buscam facilitar o aprendizado do aluno.

Para que o aprendizado se torne ainda mais fácil e interessante em futuros

softwares, pode-se criar uma Hipermídia que funciona como um Help ao estudo de

Linguagens Regulares possibilitando a sua inserção no menu ajuda de um software que

ainda será criado. A Hipermídia é um sistema de base de dados que permite acesso não

seqüencial à informação sendo uma maneira diferente e interessante de se transmitir um

conteúdo.

O objetivo deste artigo é criar uma Hipermídia utilizada como Help em futuros

softwares criados em linguagem Delphi.

O artigo está organizado da seguinte maneira: a Seção 2 faz uma breve discussão

sobre Hipermídia e Linguagens Regulares e aborda características de alguns Softwares

existentes; a Seção 3 apresenta o Help criado; A seção 4 traz o resultado obtido com o uso

do Help por alunos que estão estudando Linguagens Regulares; e a Seção 5 conclui o

artigo.

2. Revisão Bibliográfica

Serão abordados os Conceitos de Hipermídia e Linguagens Regulares e alguns trabalhos

relacionados.

2.1.Hipermídia

O objetivo da Hipermídia é além de tornar a leitura ou aprendizagem mais amigável, um

meio de facilitar a consulta de informações e de mostrar informações de acordo com a

necessidade do usuário.

Hipermídia é uma forma diferente de organização de textos. Em um livro, a

organização dos textos é de forma seqüencial, linear. Já na Hipermídia, os textos são

organizados de forma não linear. Uma informação pode ser acessada diretamente, sem que

seja necessário passar por várias outras antes. Nela, as informações são divididas em

pequenas partes relacionadas de forma intuitiva, sendo que elas podem ser representadas

através de imagens, animação, áudio, vídeo, gráficos ou simplesmente o próprio texto

escrito (BARBOSA, 2003).

2.2.Linguagens Regulares

A Teoria das Linguagens Formais vem sendo utilizada em análise léxica e análise sintática

de linguagens de programação, modelagem de circuitos lógicos ou redes lógicas,

aplicações relacionadas com hipertextos e hipermídias, e em muitas outras coisas. O seu

objetivo inicial era desenvolver teorias relacionadas com as linguagens naturais. No

entanto foi visto a sua importância para linguagens artificiais (ASSIS, 2007)(DOGNINI,

2003).

As Linguagens Artificiais são divididas em classes Hierárquicas e uma dessas

classes são as Linguagens Regulares. Essa classe é a classe de linguagens mais simples,

possibilitando o desenvolvimento de algoritmos de grande eficiência, fácil implementação e

pouca complexidade. (DOGNINI, 2003)

2.3.Trabalhos Relacionados

A dificuldade de aprendizado ao estudar Teoria da Computação, levou à construção de

diversos softwares que buscam diminuir essa dificuldade. Podem ser citados alguns

exemplos como: Language Emulator, SCTMF, EduLing, Auger, JFLAP e SisLr.

A ferramenta Language Emulator (VIEIRA, 2002) foi desenvolvida em Java e

é sua funcionalidade a manipulação de: Expressões Regulares, gramáticas

regulares, autômatos finitos determinísticos, autômatos finitos não-

determinísticos, autômatos finitos não-determinísticos com transição lambda,

máquinas de Moore e Mealy (VIEIRA, 2002).

Esta ferramenta apresenta algumas desvantagens como: não possui interface

gráfica que permite a criação e validação de autômatos; não permite salvar nem

carregar autômatos criados e possui algumas limitações na validação de um

NFA (ASSIS, 2007).

A Figura 1 representa uma das telas do Language Emulator.

Figura 1. Ferramenta Language Emulator

SCTMF (COSTA, 2008) é uma ferramenta desenvolvida em Java, que suporta

modelos relacionados a todas as classes da Hierarquia de Chomsky. Possibilita

salvar o modelo criado e carregá-lo quando necessário. Não possui interface que

possibilite a representação gráfica e não permite a transformação entre modelos

equivalentes (COSTA, 2008).

A Figura 2 representa uma das telas do SCTMF.

Figura 2. Ferramenta SCTMF

A ferramenta EduLing (DOGNINI, 2003) foi desenvolvida em Delphi e utiliza

o banco de dados Paradox, possui uma interface gráfica interativa, permite que o

trabalho seja salvo e recuperado posteriormente, apresenta um tutorial sobre a

disciplina, permite construir autômatos e expressões regulares, verificar a

equivalência entre diferentes modelos de Linguagem Regular e validar a

linguagem construída simulando o reconhecimento de sentenças passo a passo.

A criação e validação de NFA não é permitida (DOGNINI, 2003) (ASSIS,

2007).

A Figura 3 representa uma das telas do EduLing.

Figura 3. Ferramenta EduLing

Auger (SZYMANSKI, 2004): desenvolvida em Object Pascal, possui uma

interface gráfica interativa, uma ajuda de como utilizar a ferramenta, um

tutorial sobre a disciplina, salva e carrega trabalhos criados, valida um DFA

mostrando passo a passo ou continuamente e não valida um NFA. Permite a

criação de autômatos, transformação de NFA para DFA e minimização de um

DFA (ASSIS, 2007).

A Figura 4 representa uma das telas do Auger.

Figura 4. Ferramenta Auger

JFLAP - Java Formal Language and Automata Package (OLIVEIRA, 2005) :

Ferramenta desenvolvida em Java, possui uma interface gráfica interativa e uma

ajuda de como utilizar a ferramenta, permite salvar trabalhos criados, converter

diferentes modelos de linguagens e criar e simular diversos tipos de autômatos.

Abrange várias linguagens formais, por este motivo, quem for iniciante nesse

assunto pode ficar um pouco confuso (ASSIS, 2007).

A Figura 5 representa uma das telas do JFLAP.

Figura 5. Ferramenta JFLAP

SisLr (Sistema de Linguagens Regulares): Possibilita a criação, validação e

simulação de autômatos. É uma ferramenta para auxílio ao aluno no

aprendizado de Linguagens Regulares. Essa ferramenta foi desenvolvida

seguindo o paradigma de linguagem orientado a objeto, utilizando Delphi.

Ela possui uma janela que durante a execução do programa, exibe mensagens de

ajuda ao usuário. Possui também um tutorial de ajuda que contém conceitos,

exemplos e exercícios relacionados à disciplina (ASSIS, 2007).

A Figura 6 representa uma das telas do SisLr.

Figura 6. Ferramenta SisLr

3. O Help desenvolvido

Se em qualquer software, existir um mecanismo de animações, hipertextos e imagens a

aprendizagem se tornará ainda mais fácil, pois imagens e animações voltam a atenção do

usuário para o que está sendo explicado, ao contrário de textos puros, que tornam a

aprendizagem monótona e cansativa; além de fazer com que o usuário compreenda mais

facilmente o conteúdo. Links em um texto facilitam o usuário a encontrar o que ele

realmente está precisando naquele momento, não sendo necessária a leitura do conteúdo

inteiro, ou seja, o usuário chega mais fácil e rapidamente ao ponto que ele necessita.

3.1. Modelagem e Desenvolvimento do Help

UML (Unified Modeling Language) é uma unificação da linguagem de modelagem para o

desenvolvimento de software orientado a objetos, sendo a base para um projeto. Portanto

ela surgiu para facilitar a comunicação entre os desenvolvedores, e para garantir a

qualidade do software.

Web sites também necessitam de uma padronização em seus projetos não só para

facilitar a comunicação entre desenvolvedores e administradores mas também para que o

usuário fique mais satisfeito com a organização do site (DZENDZIK, 2005).

A UML vem sendo utilizada para melhorar projetos de Web sites. Com diagramas

como o de classes pode-se realmente perceber melhorias. Um diagrama de classe é uma

forma de representar os objetos da Hipermídia e como eles se relacionam. (DZENDZIK,

2005).

Abaixo, serão apresentados os diagramas de classes utilizados para desenvolver o

Help.

Figura 7. Modelagem Conceitual

O diagrama de classes da Figura 7 exibe o domínio semântico do Help. A interface

possui Links, Textos, Imagens e Animações, por ela podemos navegar e acessar outras

páginas. Os Links, os Textos, as Imagens e as Animações possuem também seus atributos.

Figura 8. Modelagem Navegacional

Acessa(): void

A Figura 8 exibe a partir de qual página pode se chegar à outra página ou

animação, por exemplo: a partir da página de Abertura é possível acessar a Tela Principal e

a partir da Tela Principal é possível acessar várias outras páginas. Algumas das páginas

foram agrupadas em conjuntos de acordo com o seu conteúdo, ou seja uma mesma classe

pode representar um conjunto de páginas.

Após a modelagem ter sido concluída, o Help foi criado em linguagem HTML e

Flash e foi criado em Delphi um mecanismo para atingir seu ponto principal: possibilitar a

sua disposição aos programadores que desejarem o inserir em Softwares que ainda serão

criados.

3.2. O Help e a Linguagem Delphi

Em Delphi foi criado um novo projeto, contendo dois forms: um em branco que possui um

botão que da acesso ao Help e outro que possui os mecanismos necessários para a exibição

do Help. Foi inserido neste form o componente WebBrowser da paleta Internet.

O componente WebBrowser permite exibir todos os arquivos que o Internet

Explorer exibe: HTML, animações swf criadas em Flash, entre outros. Como a

Hipermídia foi criada em HTML e Flash ele é o ideal para exibí-la (SCHER, 2005).

A vantagem deste componente está em poder integrar a linguagem Delphi com

uma outra linguagem de grande importância nos dias atuais (HTML e Flash), tornando o

programa mais completo e proporcionando satisfação ao usuário (SCHER, 2005).

Para que o programador possa utilizar o Help em seu programa, ele deve abrir o

projeto criado, e em seguida criar a partir do form que possui o botão de acesso ao Help a

sua ferramenta, ou seja, já está tudo pronto, basta o programador criar o código do seu

software sem se preocupar com o Help.

3.3.O Help criado

A Hipermídia é um conjunto de informações conectadas e referenciadas de forma cruzada,

formando uma complexa teia, podendo assim, confundir o leitor. Para evitar a sobrecarga

cognitiva e a desorientação do usuário ao navegar pela Hipermídia, são necessários alguns

mecanismos de apoio a navegação.

O Help criado possui alguns destes mecanismos, que são:

Backtracting: permite revisitar os nós que já foram visitados;

Pegadas: marca os links já visitados;

Saltos Arbitrários: permitem ao leitor ir a um determinado nó do sistema em que o

assunto não está relacionado com o assunto daquela janela, determinam marcos;

Menu: lista os pontos chaves.

Além destes mecanismos de apoio à navegação, o Help criado possui outros

comandos:

Imprimir: este comando imprime a página que está sendo exibida, possibilitando ao

usuário estudar o conteúdo sem utilizar o computador;

Salvar Como: este comando salva a página que está sendo visualizada, tornando

possível ao usuário acessar a informação que mais lhe interessa mais rapidamente;

Visualizar impressão: o usuário pode ver como a página que está sendo exibida

ficará ao ser impressa; e também formatar a impressão, melhorando a forma de

como a página será impressa;

Sair: este comando permite ao usuário fechar a janela do Help;

Localizar Nesta Página: permite ao usuário localizar na página alguma palavra ou

palavras que deseja encontrar, facilitando assim a busca por informações.

Para o funcionamento de alguns desses comandos é necessário baixar uma Unit :

WBFuncs. Basta seguir os seguintes passos após tê-la baixado (PARREIRA, 2006):

Salvar a Unit no mesmo local onde foi salvo o aplicativo;

No código, deve ser declarado WBFuncs em Uses.

Abaixo serão exibidas algumas telas do Sistema:

Figura 9. Tela Principal do Help

A Figura 9 exibe a tela principal do Help com um menu que orienta o usuário.

Figura 10. Conteúdo

Menu

Saltos

Arbitrários

Pegadas

A Figura 10 exibe um dos conteúdos do Help. Os textos possuem links para outros

conteúdos relacionados e também saltos arbitrários. É possível observar o mecanismo de

pegadas, os links são de cor azul, após tê-los acessado, eles ficam na cor lilás.

Figura 11. Animação em Flash

A Figura 11 exibe uma das animações criadas para que o aluno compreenda

melhor a explicação do conteúdo.

Figura 12. Exercício

A Figura 12 exibe um dos exercícios criados também para a melhor compreensão

do conteúdo pelo aluno.

Figura 13. O Help em Delphi

A Figura 13 exibe a visualização do Help no Delphi7, onde foi criado o mecanismo

de Backtracting.

Enfim, o sistema foi criado buscando facilitar a procura de informações, evitando

que o usuário fique “perdido”, sem saber onde está e para onde ir.

4. Teste Realizado com o Help

No segundo semestre de 2009 foi realizada uma pesquisa por amostragem com 20% dos

alunos do 6º período do curso de Ciência da Computação da Universidade Presidente

Antônio Carlos – UNIPAC – Campus Magnus - Barbacena, MG. Esta pesquisa teve como

objetivo avaliar o Help desenvolvido. Ela foi realizada através das seguintes etapas:

Um questionário foi elaborado para investigar se as animações e exercícios ajudam

a compreender o conteúdo; se os mecanismos de apoio a navegação estão realmente

ajudando na orientação do usuário; se o usuário gostou do Help e se ele o inseriria

em um software de sua autoria. As perguntas do questionário foram as seguintes:

1) O que você achou da Hipermídia?

2) As animações ajudam a compreender o conteúdo?

( )Sim ( )Não

3) Os exercícios ajudam a compreender o conteúdo?

( )Sim ( )Não

4) Você se sente “perdido” dentro da Hipermídia, ou os links que você já visitou,

ficando marcados, e o botão ir e voltar do navegador te ajudam a se situar?

5) Se você fosse criar um software de apoio ao estudo de Linguagens Regulares,

você iria inserir esta Hipermídia como um Help no menu de seu programa?

( )Sim ( )Não

Os alunos navegaram pelo Help e responderam o questionário acima;

Backtracting

As respostas do questionário foram analisadas.

De acordo com a análise das respostas do questionário é possível obter os seguintes

gráficos:

Figura 14. Percentual da resposta 1 do questionário

Figura 15. Percentual da resposta 2 do questionário

Figura 16. Percentual da resposta 3 do questionário

Figura 17. Percentual da resposta 4 do questionário

Figura 18. Percentual da resposta 5 do questionário

A partir dos gráficos é possível analisar que 100% da população amostrada, ou

seja, todos os alunos que participaram da pesquisa responderam de forma positiva as

questões abertas e sim nas fechadas. O resultado dessa análise foi satisfatório, pois os

alunos afirmaram que as animações, os exercícios, os mecanismos de apoio a navegação, e

enfim todo o conjunto que forma o Help auxilia no aprendizado da disciplina, sendo que

eles o utilizariam no menu ajuda de um software de sua autoria.

Após responder o questionário, foram solicitadas aos alunos algumas sugestões, e a

partir daí foram apontadas algumas sugestões para melhoria em alguns pontos da

ferramenta como: ao invés de ter em cada página que trata de um assunto um link para o

exercício relacionado, haver no menu principal um link que da acesso a uma página com

várias opções de exercícios; e acrescentar na tela de abertura do Help uma breve

explicação do que ele se trata. Através destas sugestões, foram adaptadas tais melhorias no

Help.

A avaliação da ferramenta foi uma etapa de grande importância, pois através dela

pôde ser analisado se o que foi criado realmente atinge os objetivos propostos.

5. Considerações Finais

Este artigo mostrou a importância de uma Hipermídia educativa utilizada como um Help,

trazendo um novo mecanismo que ainda não é muito utilizado, pois ela não só pode ser

visualizada a partir de um CD ou via Internet, mas também pode ser utilizada em softwares

educativos que ainda serão criados. A vantagem está em proporcionar uma forma

interessante de se passar um conteúdo, complementando o programa. Sendo assim, os

programadores que têm a intenção de criar softwares de apoio ao estudo de Linguagens

Regulares, agora têm a opção de criá-los juntamente com este importante sistema que

facilita ainda mais o estudo e a compreensão da matéria.

É importante observar que para a criação deste Help não basta apenas escrever um

código, antes é preciso planejá-lo de forma que o usuário navegue por ele sem problemas e

consiga encontrar facilmente a informação que necessita, além de criar animações fáceis de

compreender e que realmente ilustrem o conteúdo escrito.

O Help criado pode ser utilizado em qualquer software que será desenvolvido em

Delphi, de preferência a versão 7.

Bibliografia

ASSIS, José Robson de. (2007) “Projeto e Implementação de um Software para auxílio no

ensino de Linguagens Regulares”, TCC/UNIPAC.

BARBOSA, Juliano de Carvalho.(2003) “Hipermídia Educacional para Disciplinas

Universitárias”, TCC/UNIPAC.

COSTA, Yandre M. G. da; Meneses, Rafael C. de; Uber, Flávio R..(2008) “Uma

Ferramenta para Auxílio Didático no Ensino de Teoria da Computação”,

http://www.prodepa.gov.br /sbc2008/ anais/ pdf/ arq0119.pdf, Março.

DOGNINI, Marlon José; Raabe, André Luís Alice.(2003) “EduLing Software

Educacional para Linguagens Regulares”,

http://www.nce.ufrj.br/sbie2003/publicacoes/paper24.pdf, Março.

DZENDZIK, Isolete Teresinha. (2005) “Processo de Desenvolvimento de Web Sites com

Recursos da UML”, http:// mtc-m16.sid.inpe.br /col/ sid.inpe.br /jeferson/2004/

12.10.09.14/doc/publicacao.pdf, Junho.

OLIVEIRA, Ricardo Augusto Rabelo. (2005) “JFLAP JAVA Formal Language and

Automata Package”, http:// homepages.dcc.ufmg.br /~nvieira/ cursos/ tl/ a05s2/

relatório_curso.doc, Maio.

PARREIRA, Kennedy Tedesco. (2006) “Criando um WebBrowser Avançado”,

http://www.planetadelphi.com.br/artigo/97/criando-um-webbrowser-avan%C3%A7ado-

passo-a-passo-de-uma-forma-muito-simples-e-pr%C3%A1tica./, Agosto.

SCHER, Marcos Feltrin. (2005) “Sistema de Auxílio ao Aprendizado de Conceitos

Fundamentais de Informática”, http://www.pucrs.campus2.br/~jiani/tc2/mscher.pdf,

Setembro.

SZYMANSKI, Charbel; Garcindo, Luiz Alfredo Soares.(2004) “Auger – Ferramenta de

apoio ao ensino de autômatos finitos”, http:// inf.unisul.br/ ~ines/ workcomp/cd / pdfs/

2952.pdf, Maio.

VIEIRA, Luiz Filipe Menezes; Vieira, Marcos Augusto Menezes; Viera, Newton José.

(2002) “Language Emulator, uma ferramenta de auxílio no ensino de Teoria da

Computação”, http://www.dcc.ufmg.br/~mmvieira/publications/weimig-

languageEmulator.pdf, Março.