MORFEU: CRIANDO AMBIENTES VIRTUAIS FLEXÍVEIS NA WEB PARA MEDIAR A COLABORAÇÃO

Leonardo N. Santos

2

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

RoteiroIntroduçãoInovação em ambientes para

mediar a colaboraçãoO Ambiente MOrFEu Veículos de ComunicaçãoConsiderações Finais

3

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

IntroduçãoAumento das propostas pedagógicas

colaborativas utilizando Ambientes VirtuaisO processo de desenvolvimento de software é

lentoMuitas vezes é preciso adequar a proposta de

trabalho aos recursos do ambienteCada grupo possui sua própria forma de

trabalharMas os ambientes são pouco flexíveisOs ambientes devem ser flexíveis,

capazes de serem modificados por seus utilizadores de acordo com suas necessidades.

4

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

WebAs páginas de InternetCriada em 1990, por Tim

Berners-LeePreparada para ser utilizada em

qualquer sistema operacional que tivesse um browser

“Hipertexto é uma maneira de ligar e acessar informações de vários tipos como uma teia de nós na qual o usuário pode acessar conforme sua vontade”

5

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Web: principais idéias“Criar um espaço de informação no

qual qualquer um teria acesso imediato e intuitivo”

“Compartilhar o que você sabe ou pensa fosse tão simples quanto aprender algo que outra pessoa sabe”

“Web é mais uma criação social que tecnológica, para ajudar as pessoas a trabalharem juntas”

Como é a Internet sem a Web?

6

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Web: primeira geraçãoPáginas estáticasGeração Dinâmica de Páginas

◦CGI, PHP, ASPInteração com Flash e JavaScriptAJAX: requisições assíncronas

(JavaScript)

7

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Web 2.0 ou Web SocialSites Dektop-likeConteúdo Gerado por usuárioPoder das Massas

◦“Os serviços da Web 2.0 são caracterizados pelo fato de seus valores aumentarem conforme o número de pessoas que os estão usando”

Dados em escala ÉpicaPotencialização da Cauda LongaBeta Perpétuo

8

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Ambiente VirtualSistemas web que reúnem

virtualmente várias pessoas em um mesmo lugar possibilitando a interação entre elas

GroupwareAmbintes Virtuais de

AprendizagemRedes sociaisNão é “Ambiente de Realizada

Virtual”

9

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Desenvolvimento de Ambientes Virtuais“Mesmo que um desenvolvedor

de groupware seja capaz de desenvolver uma aplicação ‘ótima’ para um grupo, a aplicação irá eventualmente se tornar inadequada devido a novas situações e problemas que certamente aparecerão” (Fuks et al., 2008)

10

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Desenvolvimento de Ambientes Virtuais“Em face das dificuldades de

construção e manutenção, o desenvolvedor de groupware gasta mais tempo lidando com dificuldades técnicas que moderando e provendo suporte para as interações entre os usuários. Tais problemas levam à necessidade de criar uma forma mais rápida e efetiva de se desenvolver groupware” (Fuks et al., 2008)

11

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Desenvolvimento de Ambientes VirtuaisCriação rápidaFlexibilidade para

Modificações

Abordagens atuais◦Modular◦Componentes◦Linha de Produção◦Web-services

12

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Inovação em Ambientes Virtuais para Mediar a ColaboraçãoControvérsia Acadêmica (Mendonça, 2003)

◦“A favor” e “contra”.Projetos de Aprendizagem (Fagundes, 2006)

◦ InvestigaçãoJúri Simulado (Real, 2007)

◦Defesa, Acusação e JúriConstruindo Conceituações (Nevado, 2009)

◦Discussão e revisão de posicionamentosDiário Virtual (Serres, 2009)

◦Registro de solução e discussão das soluções

13

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Inovação em Ambientes Virtuais para Mediar a ColaboraçãoOs ambientes virtuais não davam

suporte adequadoEm alguns casos usaram um Wiki

◦Regras de interação eram passadas verbalmente

Alguns foram implementadosTornaram-se inadequado para o

trabalho com outros gruposÉ difícil predizer como um grupo

irá colaborar (Gutwin, 2000 apud Fuks, 2008)

14

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Multi-Organizador Flexível para Espaços Virtuais (Menezes, 2008)

Um conjunto de interações dentro de um ambiente virtual resulta em um documento.

Veículo de Comunicação (VCom):◦O documento; um ambiente virtual.

Unidade de Produção Intelectual (UPI):◦Menor parte que compõe este

documento.Publicação:

◦“Postar” uma UPI em um VCom

15

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Ambientes Virtuais modelados como Veículos de ComunicaçãoFórum:

◦Uma UPI é publicada em resposta a outra UPI◦Estrutura de árvore

Blog:◦Várias UPIs organizadas pela data de

publicação◦UPI são publicadas como comentários às

postagens principaisWiki:

◦As páginas (UPIs) são editáveis◦As páginas possuem links para outras

páginas

16

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

ViewsForma de apresentação é definida

separadamente da estrutura de UPIs.As views definem os conteúdos das

páginas do ambiente.Várias views são permitidos

◦Exemplo: um fórum com exibição de suas postagens de forma endentada e de forma não endentada (indented).

◦Exemplo: um blog mostrando só as mensagens principais ou todas as mensagens e comentários das mensagens.

17

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Views

ViewExibiçã

o

Documento

Usuário

18

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Implementando Veículos de ComunicaçãoDocumento (Model):

◦XML◦Flexível e Semi-estruturado

UPI:◦Texto: título e corpo

Publicação:◦ Incluir uma UPI no documento

View:◦XSL◦Transforma XML --> HTML

19

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Documento de Projetos de Aprendizagem

Projeto de Aprendizagem

Questão de Investigação

UPI Desenvol-vimento

do Projeto

Página*

UPI

Diário de Bordo

Postagens

Postagem*

UPI Comentários

Comentário*

UPI

Fórum de Orientação

Postagens

Postagem*

UPI Respostas

Postagens

Livro de Visitas

Mensagens

UPI

Mensagem*

nome

20

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Documento de Projetos de Aprendizagem

Projeto de Aprendizagem

Questão de Investigação

UPI Desenvol-vimento

do Projeto

Página*

UPI

Diário de Bordo

Postagens

Postagem*

UPI Comentários

Comentário*

UPI

Fórum de Orientação

Postagens

Postagem*

UPI Respostas

Postagens

Livro de Visitas

Mensagens

UPI

Mensagem*

nome

Sub-veículo

21

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Documento de um projeto de aprendizagem(2)

  <?xml version="1.0" ?>

- <projetoaprendizagem id="id447176 ">

- <questaoinvestigacao id="id447177 ">

  <upi id="296 " publication_ date="2010-06-11 14:59:45" upi_title="Questão

de I nvestigação" publisher="31 " / >   </questaoinvestigacao>

- <ferramentas id="id447178 ">

- <wiki id="id447179 ">

- <page id="id474120 " publication_ date="2010-06-11 15:23:36" name="Primeira página" publisher="31 ">

  <upi id="298 " publication_ date="2010-06-11 15:23:36" publisher="31 " / >

  </ page>

- <page id="id406104 " publication_ date="2010-06-11 15:55:32" subvehiclexpath=",projetoaprendizagem,ferramentas,wiki" name="pagina 2 " upi_title="pagina 2" publisher="31 ">

  <upi id="305 " publication_ date="2010-06-11 15:55:32" publisher="31 " / >

  </ page>

- <page id="id406092 " publication_ date="2010-06-11 15:55:51" subvehiclexpath=",projetoaprendizagem,ferramentas,wiki" name="blz!" upi_title="blz!" publisher="31 ">

  <upi id="306 " publication_ date="2010-06-11 15:55:51" publisher="31 " / >

  </ page>

  </ wiki>

+ <blog id="id447180 ">

+ <forum id="id447182 ">

+ <mural id="id447184 ">

  </ ferramentas>

  </ projetoaprendizagem>

Página 1 de 1

14/7/2010file://D:\Users\Leonardo\Documents\DOUTORADO\artigo SBIE2010\figuras\template...

22

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Documento de um projeto de aprendizagem(2)

  <?xml version="1.0" ?>

- <projetoaprendizagem id="id447176 ">

- <questaoinvestigacao id="id447177 ">

  <upi id="296 " publication_ date="2010-06-11 14:59:45" upi_title="Questão

de I nvestigação" publisher="31 " / >   </questaoinvestigacao>

- <ferramentas id="id447178 ">

- <wiki id="id447179 ">

- <page id="id474120 " publication_ date="2010-06-11 15:23:36" name="Primeira página" publisher="31 ">

  <upi id="298 " publication_ date="2010-06-11 15:23:36" publisher="31 " / >

  </ page>

- <page id="id406104 " publication_ date="2010-06-11 15:55:32" subvehiclexpath=",projetoaprendizagem,ferramentas,wiki" name="pagina 2 " upi_title="pagina 2" publisher="31 ">

  <upi id="305 " publication_ date="2010-06-11 15:55:32" publisher="31 " / >

  </ page>

- <page id="id406092 " publication_ date="2010-06-11 15:55:51" subvehiclexpath=",projetoaprendizagem,ferramentas,wiki" name="blz!" upi_title="blz!" publisher="31 ">

  <upi id="306 " publication_ date="2010-06-11 15:55:51" publisher="31 " / >

  </ page>

  </ wiki>

+ <blog id="id447180 ">

+ <forum id="id447182 ">

+ <mural id="id447184 ">

  </ ferramentas>

  </ projetoaprendizagem>

Página 1 de 1

14/7/2010file://D:\Users\Leonardo\Documents\DOUTORADO\artigo SBIE2010\figuras\template...

23

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Implementando ViewsQuais dados do documento XML

e como eles serão mostrados em uma página HTML

Links para PublicaçãoLinks para outros TemplatesAdquirir informações do sistema:

◦Dados do usuário◦Dados de UPIs◦Dados do usuário publicador

24

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Processo de visualização de uma página de VCom

Processador de Template

Dados VCom (XML)

Template (XSLT) Banco de

Dados

Página HTML

UPIs e Usuários

XPath

25

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

View da página principal do VCom Projeto de Aprendizagem

  <?xml version="1.0" ?>

- <xsl:stylesheet version="1.0" xmlns:xsl="http:/ / www.w3.org/ 1999/ XSL/ Transform " xmlns:php="http:/ / php.net/ xsl">

  <xsl:output method="html" omit- xml-declaration="yes" indent="yes" / >

- <xsl: template match="projetoaprendizagem">

  <h1>Projeto de Aprendizagem</h1>

  <hr />

  <xsl:apply-templates select="questaoinvestigacao " / >   <xsl:apply-templates select="ferramentas" / >

  </xsl: template> - <xsl: template match="questaoinvestigacao">   <h2>Questão de I nvestigação:</ h2>

- <center>

- <xsl:choose>

- <xsl:when test="upi">   <xsl:value- of select="php:functionString( 'upi_ body',number

(upi/ @id)) " disable- output- escaping="yes" / > - <small>   <xsl:value-of select="php:functionString

('generate_ upi_ update_ link',concat( 'text=[editar] ,id=',number(upi/ @id)) ) " disable- output-escaping="yes" / >

  </ small>   </ xsl:when> - <xsl:otherwise>   <xsl:value- of select="php:functionString

('generate_ publish_ link','xpath=/ projetoaprendizagem/ questaoinvestigacao,schema=projetoaprendizagem_ questaoinvestigacao.xml,upi_ title=Questde I nvestigação,text=I nserir a questão de investigação') " disable-output-escaping="yes" / >

  </ xsl:otherwise>   </ xsl:choose>

  </ center>

  <hr />

  </xsl: template>

- <xsl: template match="ferramentas">

  <h2>Ferramentas</h2> - <center> - <xsl: if test="wiki">   <xsl:value-of select="php:functionString

('generate_ show_ link','text=Desenvolvimento do Projeto (Wiki),subvehiclexpath=/ projetoaprendizagem/ ferramentas/ wiki,template=wiki.xsl')disable-output-escaping="yes" / >

  <br />   </ xsl: if> + <xsl: if test="blog">

+ <xsl: if test="forum">

+ <xsl: if test="mural">

  </ center>

  </xsl: template>   </ xsl:stylesheet>

Página 1 de 1

28/10/2010file://D:\Users\Leonardo\Documents\DOUTORADO\artigo SBIE2010\figuras\templa...

26

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

View da página principal do VCom Projeto de Aprendizagem

  <?xml version="1.0" ?>

- <xsl:stylesheet version="1.0" xmlns:xsl="http:/ / www.w3.org/ 1999/ XSL/ Transform " xmlns:php="http:/ / php.net/ xsl">

  <xsl:output method="html" omit- xml-declaration="yes" indent="yes" / >

- <xsl: template match="projetoaprendizagem">

  <h1>Projeto de Aprendizagem</h1>

  <hr />

  <xsl:apply-templates select="questaoinvestigacao " / >   <xsl:apply-templates select="ferramentas" / >

  </xsl: template> - <xsl: template match="questaoinvestigacao">   <h2>Questão de I nvestigação:</ h2>

- <center>

- <xsl:choose>

- <xsl:when test="upi">   <xsl:value- of select="php:functionString( 'upi_ body',number

(upi/ @id)) " disable- output- escaping="yes" / > - <small>   <xsl:value-of select="php:functionString

('generate_ upi_ update_ link',concat( 'text=[editar] ,id=',number(upi/ @id)) ) " disable- output-escaping="yes" / >

  </ small>   </ xsl:when> - <xsl:otherwise>   <xsl:value- of select="php:functionString

('generate_ publish_ link','xpath=/ projetoaprendizagem/ questaoinvestigacao,schema=projetoaprendizagem_ questaoinvestigacao.xml,upi_ title=Questde I nvestigação,text=I nserir a questão de investigação') " disable-output-escaping="yes" / >

  </ xsl:otherwise>   </ xsl:choose>

  </ center>

  <hr />

  </xsl: template>

- <xsl: template match="ferramentas">

  <h2>Ferramentas</h2> - <center> - <xsl: if test="wiki">   <xsl:value-of select="php:functionString

('generate_ show_ link','text=Desenvolvimento do Projeto (Wiki),subvehiclexpath=/ projetoaprendizagem/ ferramentas/ wiki,template=wiki.xsl')disable-output-escaping="yes" / >

  <br />   </ xsl: if> + <xsl: if test="blog">

+ <xsl: if test="forum">

+ <xsl: if test="mural">

  </ center>

  </xsl: template>   </ xsl:stylesheet>

Página 1 de 1

28/10/2010file://D:\Users\Leonardo\Documents\DOUTORADO\artigo SBIE2010\figuras\templa...

php:function

27

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Implementando Publicação

Esquema de Publicação

(XML)

Dados UPI

Processador de Publicação

XPath

Banco de Dados

Dados VCom (XML)

UPI

XML

Um pedaço de XML

Nova UPI é criada

Em que lugar do XML será inserido

Projeto de Aprendizagem

Questão de Investigação

UPI Desenvol-vimento

do Projeto

Página*

UPI

Diário de Bordo

Postagens

Postagem*

UPI Comentários

Comentário*

UPI

Fórum de Orientação

Postagens

Postagem*

UPI Respostas

Postagens

Livro de Visitas

Mensagens

UPI

Mensagem*

nome

28

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Projeto de AprendizagemMorfeu

Usuários Administração Veículos Logout (leonardo.n.santos@gmail.com)

Home » Ve ículos » Meu Primeiro Projeto de Aprendizagem

Copyright © 2010 by My Company.All Rights Reserved.

Pow ered by Yii Framew ork .

Projeto de Aprendizagem

Questão de Investigação:

Quais as características comuns às ferramentas de comunicação na Web? [editar]

Ferramentas

Desenvolvimento do Projeto (Wiki)Diário de Bordo (Blog)Forum de Discussão

Mural

Links para outros

Templates

29

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Outras propostas colaborativas implementadasFórum, Blog, Wiki, Enquete, Glossário e Mural;Um Fórum para a Controvérsia Acadêmica;O objeto de aprendizagem CARTOLAO Quadro de Discussões da Arquitetura

Pedagógica Júri Simulado;O Quadro de Discussões da Arquitetura

Pedagógica Construindo Conceituações;O Diário Virtual para Aprendizagem de

Matemática;Uma versão básica de Curso do Moodle, com

os tópicos, e os sub-veículos (Fórum, Wiki, Questionário, etc.) em cada tópico,

30

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Considerações FinaisRedução dos custos de implementação

◦12 Vcoms; 19 Templates; 260 linhas de código cada; máximo dois dias de trabalho cada.

Evidências de que o MOrFEu consegue modelar esse tipo de ambiente virtual

Os VComs são flexíveis: criação e modificação

User-created ApplicationPróximos passos: permissões, papéis,

grupos e protocolos de interação.

31

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

ObrigadoPerguntas?

Versão de Testeshttp://gsiufam.com.br/morfeu/

32

MO

rFEu

: C

rian

do A

mb

ien

tes V

irtu

ais

Fle

xív

eis

na W

eb

para

Med

iar

a

Cola

bora

ção

2011

Referências Fagundes, L., Nevado, R., Basso, M., Bitencourt, J., Menezes, C., Monteiro, V. C. P.

C. (2006) “Projetos de Aprendizagem – Uma experiência mediada por ambientes Telemáticos”. Revista Brasileira de Informática na Educação.

Fuks, H., Raposo, A., Gerosa, M. A., Pimental, M., Lucena, C. J. P. (2008) “The 3C Collaboration Model”. Encyclopedia of E-Collaboration. Information Science Reference, USA.

Gutwin, C., Greenberg, S. (2000). “The mechanics of collaboration: Developing low cost usability evaluation methods for shared workspaces”. Proceedings of the IEEE 9th Workshop on Enabling Technologies.

Mendonça, A. P., Castro, A. N., Souza, F. F., Queiroz, S. J. B., Batista, V. O. (2003) “Um Ambiente Telemático para mediar a Controvérsia Acadêmica”. Anais do Simpósio Brasileiro de Informática na Educação.

Menezes, C. S., Nevado, R. A., Castro, A. N., Santos, L. N. (2008) “MOrFEU – Multi-Organizador Flexível de Espaços VirtUais para Apoiar a Inovação Pedagógica em EAD”, Anais do Simpósio Brasileiro de Informática na Educação.

Nevado, R. A., Dalpiaz, M. M., Menezes, C. S. (2009) “Arquitetura Pedagógica para Construção Colaborativa de Conceituações”, Anais do Workshop sobre Educação em Computação, Congresso da Sociedade Brasileira de Computação.

Real, L. M. C., Menezes, C. S. (2007) “Júri simulado: possibilidade de construção de conhecimento a partir de interações em grupo”, Aprendizagem em rede na educação a distância, Porto Alegre: Ricardo Lenz.

Serres, F. F., Basso, M. V. A. (2009) “Diários virtuais – Uma ferramenta de comunicação social para a autoria e aprendizagem de Matemática”, Anais do Simpósio Brasileiro de Informática na Educação.