LivingSlides

Joana Borges Pereira

Dissertação para obtenção do Grau de Mestre em

Engenharia Informática e de Computadores

Orientador: Prof. Daniel Jorge Viegas Gonçalves

Júri

Presidente: Prof. João Emílio Segurado Pavão MartinsOrientador: Prof. Daniel Jorge Viegas Gonçalves

Vogal: Prof. Rui Filipe Fernandes Prada

Novembro 2014

Agradecimentos

Aos meus pais e avós, por tudo.

Ao Daniel, pelo constante carinho e apoio.

À Alexandra e à Inês, pela amizade.

Ao Professor Daniel Gonçalves, pela orientação, motivação e apoio na realização do LivingSlides.

i

Abstract

The majority of classrooms now have computers and projectors, thanks to the popularisation of technol-ogy. Due to that, teachers use projected slides using tools, such as Powerpoint and Keynote, to helpthem deliver a lecture. Whenever a student poses a question or an additional explanation is needed,the teacher must switch the context or draw schematics on a whiteboard, all because presentations arestatic. Such explanations, much like presentations, are also static. It would be ideal if teachers did notmake a context switching and the explanations were not static, like for instance, watch the values ofa mathematical equation change or watch a graph react to input values. LivingSlides main goal is tohelp teacher make their presentations interactive, and by using Active Documents the presentation itselfbecomes interactive. When using LivingSlides, the teacher is able to add settings to elements so theybecome interactive with one another, so that later on, if a doubt comes up of if the teacher feels it isnecessary, to have “life” injected onto the slides and the information is better presented. LivingSlidesrelies on web technologies such as HTML5, CSS and JavaScript to achieve the active part of the pre-sentation. It also uses libraries, like Tangle, which help to add interactiveness to text or help to drawSVG shapes. User tests were made and they showed LivingSlides is an easy-to-use tool. Commentsmade by users encourage the development of LivingSlides furthermore, for they show people have aninterest in different ways to deliver their presentations.

Keywords

Slideshow presentation program, Active Documents, Interactivity, Slides

iii

Resumo

Com a democratização da tecnologia, a maioria das salas de aulas estão hoje dotadas com computa-dores e projectores. Devido a isso, os professores passaram então a usar slides projectados usandoferramentas como Powerpoint ou Keynote para os auxiliar na tarefa de leccionar. Como as apresen-tações são, na sua maioria, estáticas, quando surgem dúvidas ou é necessário dar alguma explicaçãoadicional o professor tem de trocar de meio e, por exemplo, desenhar esquemas no quadro para poderresponder ao aluno. Tal como os slides, estas explicações adicionais são também estáticas. Seria idealse o docente não mudasse o contexto e que estas explicações fossem dinâmicas, como por exemplover valores de uma equação a mudar ou ver um gráfico reagir consoante os valores inseridos, levando auma melhor compreensão por parte dos alunos. O LivingSlides pretende ajudar os docentes a tornar assuas apresentações mais cativantes, através do uso de Documentos Activos, em que a própria apresen-tação se torna interativa. Usando o LivingSlides, o docente poderá desenhar na própria apresentaçãoe atribuir parâmetros que permitiram que os elementos sejam interactivos entre eles, para mais tarde,caso uma dúvida surja ou o docente considere que é necessário, haver uma “vida” nos slides e que ainformação seja melhor veiculada. O LivingSlides irá apoiar-se em tecnologias da web, como HTML5,CSS e JavaScript para conseguir atribuir a parte activa à apresentação. Usa também bibliotecas, comoo Tangle, que ajudam à interactividade do texto ou ao desenho de formas SVG. Foram feitos testes aoLivingSlides que mostraram que o LivingSlides é uma ferramenta de uso fácil. Os comentários feitospelos utilizadores aquando dos testes ao LivingSlides motivam o desenvolvimento do LivingSlide aindamais, pois mostram que existe um interesse dos utilizadores em alterar a forma como estes realizam assuas apresentações.

Palavras-Chave

Ferramenta de Autoria, Documento Activo, Interactividade, Slides

v

Contents

1 Introdução 1

2 Related Work 4

2.1 Documentos Activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.1 Active Hyperlinked Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.2 Active Design Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.3 Active Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.4 Active Documents in XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.5 Embedded Buttons: Documents as User Interfaces . . . . . . . . . . . . . . . . . 7

2.2 Apresentações Multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.2.1 HyperSlides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.2.2 Collage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.3 SidePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2.4 Fly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2.5 NextSlidePlease . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.3 Frameworks para apresentações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3.1 Deck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3.2 Shower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.3 Reveal.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.4 Impress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.4 Frameworks para Documentos Activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.4.1 Tangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.4.2 Flapjax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.4.3 Active Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.5 Discussão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3 O LivingSlides 18

3.1 Utilizando o LivingSlides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

vii

3.2 Implementação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2.1 Tecnologia Utilizada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2.2 Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.2.3 Aspect Ratio e o Aspecto dos Slides . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.2.4 Ferramenta de Autoria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.2.5 Os Slides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.2.6 Desenho das Formas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.2.7 Upload de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.2.8 Ligação entre Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.2.9 Tangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2.10 Interactividade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.2.11 Modo Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.2.12 Persistência . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.2.13 Walkthrough . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4 Avaliação do LivingSlides 39

4.1 Protocolo Experimental . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.2 Resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.3 Discussão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

5 Conclusão 48

Bibliography 50

viii

List of Figures

1.1 Aprendizagem Multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.1 Active Documents in XML - Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.2 Deck.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3 Shower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.4 Reveal.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.5 Reveal.js - O novo editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.6 Impress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.7 Tangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.1 Diálogo incial do LivingSlides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.2 Escolha de um tipo de slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.3 Outline de uma forma SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.4 Ferramenta de Autoria - Diálogo de upload de imagem . . . . . . . . . . . . . . . . . . . . 20

3.5 Ferramenta de Autoria - Notas de orador . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.6 Arquitectura do LivingSlides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.7 Ferramenta de Autoria - escolha de um slide . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.8 Ferramenta de Autoria - Rectângulo SVG desenhado e seleccionado . . . . . . . . . . . . 26

3.9 Ferramenta de Autoria - Criação de uma ligação entre elementos . . . . . . . . . . . . . . 28

3.10 Ferramenta de Autoria - Diálogo de parametrização da interactividade . . . . . . . . . . . 30

3.11 Ferramenta de Autoria - Modo apresentação . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.12 Ferramenta de Autoria - Notas de Orador . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.13 Ferramenta de Autoria - Diálogo para guardar a apresentação . . . . . . . . . . . . . . . 35

3.14 Ferramenta de Autoria - Mudando a cor de uma forma SVG . . . . . . . . . . . . . . . . . 36

3.15 Ferramenta de Autoria - Resultado das parametrizações feitas pelo utilizador . . . . . . . 37

4.1 Tempos de execução para as tarefas T1, T4, T5 e T6 . . . . . . . . . . . . . . . . . . . . 41

4.2 Tempos de execução para as tarefas T9, T10, T11 e T12 . . . . . . . . . . . . . . . . . . 42

4.3 Tempos de execução para as tarefas T13, T14, T15 e T16 . . . . . . . . . . . . . . . . . . 43

4.4 Tempos de execução para as tarefas T18, T19, T20 e T21 . . . . . . . . . . . . . . . . . . 45

ix

4.5 Tempos de execução para as tarefas T22, T23, T24 e T25 . . . . . . . . . . . . . . . . . . 46

4.6 Respostas aos questionários de SUS, perguntas 1 a 5 . . . . . . . . . . . . . . . . . . . . 47

4.7 Respostas aos questionários de SUS, perguntas 6 a 10 . . . . . . . . . . . . . . . . . . . 47

x

List of Tables

2.1 Comparação entre frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

xi

1 Introdução

Com a democratização da tecnologia, a maioria das salas de aulas estão hoje dotadas com computa-dores e projetores. Devido a isso, os professores passaram então a usar slides projetados usandoferramentas como Powerpoint ou Keynote para os auxiliar na tarefa de lecionar. Apesar de a tecno-liga estar cada vez mais presente nas salas de aula, as apresentações continuam a ser usadas comose fossem slides num retroprojector e embora as apresentações ajudem de facto o professor, muitasdas vezes os alunos estão sentados a receber essa informação passivamente, levando a quebras deatenção. Por vezes, um aluno tem uma dúvida ou faz uma questão relacionada com o tema da aula.Como as apresentações são, na sua maioria, estáticas, o professor tem de trocar de meio e ou desen-har esquemas no quadro ou ir para uma outra janela (possivelmente, um browser) para poder responderao aluno. Pegando novamente no exemplo dos slides em retroprojectores e no docente que escrevecom uma caneta de acetato nos slides, seria interessante o docente também poder desenhar em ap-resentações multimédia, cativando assim a sua audiência e dando-lhes marcadores para guardarem ainformação veiculada nas aulas.

A ideia de documentos que possam reagir a pedidos dos utilizadores não é recente. De facto, surgiuquando a Internet passou a ser uma ferramenta mais popular entre os utilizadores e as começaram asurgir aplicações construídas em HTML. É nesse contexto que surge o conceito de Documento Activo.Um Documento Activo é um documento cujo conteúdo muda consoante pedidos e necessidades doutilizador, inserindo assim uma interactividade entre os mesmos e o utilizador. Começaram por serpensados para funcionar como ponte entre aplicações centradas no servidor e aplicações centradasno cliente, injetando o código da aplicação no documento HTML [Köppen and Neumann, 1998]. Autilização de HMTL ou XML permite que os documentos activos pudessem ser executados em prati-camente qualquer computador que tenha um browser, e mais recentemente, em qualquer dispositivo.Permite também que seja fácil de construir um documento activo. Outras ideias também surgiram, talcomo em [Boy, 1997], em que o documento activo serviria para auxiliar processos industriais, ou seja,o documento activo faria a vez da interface física do instrumento a ser manufacturado,poupando tempoe dinheiro na construção de protótipos para a realização de testes.

O LivingSlides pretende ajudar os docentes a tornar as suas apresentações mais cativantes, atravésdo uso de Documentos Activos, em que a própria apresentação se torna interativa. Adaptando os con-textos das implementações dos Documentos Activos ao LivingSlides permite conferir uma componenteinteractiva às apresentações, em que os utilizadores (sejam eles docentes ou alunos) poderão modi-ficar certos elementos de um slide e ver todos os outros elementos mudar em conformidade. É possível,por exemplo, mostrar directamente o resultado de uma equação mudando os seus valores, ou testarcenários alternativos fazendo um gráfico variar com base na mudança de parâmetros. Ao criar apre-sentações dinâmicas e interactivas, o LivingSlides torna as aulas mais cativantes e motivantes para osalunos. Os professores já vão poder responder a questões levantadas pelos alunos sem ter de quebraro ritmo da apresentação.

Este trabalho será mais focado na parte do docente. Este requer que as apresentações sejam fáceisde criar e que haja a possibilidade de importar apresentações antigas, para reutilização, e também apossibilidade de as exportar, em caso de ter de que utilizar um certo formato numa apresentação. OLivingSlides pretende ser uma ferramenta que simplifique o processo de aprendizagem multimédia.

A aprendizagem multimédia é a aprendizagem feita através de palavras e imagens. Este tipo de apren-dizagem é já há algum tempo, uma preocupação por parte de estudiosos na área da educação. Um

1

dos problemas com a criação de apresentações multimédia é saber se o conteúdo da apresentaçãoserá apreendido com sucesso [Faraday and Sutcliffe, 1997]. Sabe-se, e existem vários estudos que ocomprovam, que os alunos passam por vários processos cognitivos para reter a informação vinculadanas apresentações, sendo estes processos visuais e auditivos. A teoria cognitiva da aprendizagem temtrês postulados[Mayer, 2005]:

Figure 1.1: Aprendizagem Multimédia

• Canal Duplo – Canais separados para o processamento de informação visual e auditiva.

• Capacidade Limitada – A quantidade de informação que pode ser processada por cada canal élimitada.

• Processamento Activo – Os humanos envolvem-se em aprendizagem activa tomando atenção nainformação que chega, organizando-a e seleccionando-a em representações mentais.

Na figura 1.1, é mostrada a representação da Teoria Cognitiva. Cada caixa representa um tipo dememória; a informação veiculada na apresentação vem do mundo exterior para a Memória Sensorial(Sensory Memory) através dos olhos e dos ouvidos. Isto é retido por um curto espaço de tempo, antesda informação ser guardada na Memória de Trabalho (Working Memory). É aqui que o conhecimentoé manipulado, e guardado, com a consciência da pessoa em modelos que a pessoa reconheça e sejacapaz de os poder relacionar entre si. Por fim, essa informação é guardada na Memória a Longo Termo(Long Term Memory). [Mayer, 2005]

Para poder aliviar esta carga cognitiva, é necessário dotar as apresentações com mecanismos para tal.Por exemplo, ao ser explicado um certo conceito é preferível que este esteja representado graficamentenum slide e que a informação complementar seja dada pela pessoa que está a divulgar a apresentação[Mayer and Moreno, 2003]. Ao criar uma narrativa para a apresentação também ajuda os alunos aconstruírem um modelo mental.

Há pessoas que preferem apresentações verbais a apresentações visuais e vice-versa [Mayer andMoreno, 2003]. Uma boa apresentação tem que satisfazer todos os utilizadores, quer este prefiram umaforma de apresentação a outra. Usando novamente o exemplo anterior, haverá alunos que compreen-derão o conceito através das palavras do professor, e outros que apreenderão através da representaçãográfica do mesmo conceito.

O LivingSlides irá de encontro aos requisitos e variantes permitindo, por exemplo, a criação de apresen-tações com um slide introdutório, em que os conceitos base são expostos, seguido de um slide em queos conceitos são novamente exposto, mas com a componente interactiva que o LivingSlides oferece.

2

Para poder atingir o objectivo de termos apresentações multimédia interactivas, o LivingSlides apoiou-se em tecnologias HTML5 (Hypertext Markup Language 5), CSS (Cascading Stylesheet) e JavaScript.Estas tecnologias são o standard actual para desenvolvimento para a Web, como definido pelo W3C,pois desta forma consegue-se um bom apoio da comunidade, são altamente flexíveis, permitirem terapresentações graficamente ricas, são fáceis de partilhar e não necessitam de qualquer aplicação paraserem visualizadas. Para além disso, através do uso destas tecnologias, os slides estarão disponíveisem qualquer dispositivo com ligação à web, podendo os alunos consultar os mesmos durante as suashoras de estudo e terem acesso ao conteúdo dinâmico mesmo sem a presença do docente. Já existemalgumas frameworks que permitem quer fazer apresentações multimédia, quer simular documentosinteractivos, mas nenhuma delas permite fazer os dois. O LivingSlides teve que suportar o desenhode formas SVG para que pudesse ser possível o desenho nos slides; para além disso essas formastêm que ser interactivas e responder a inputs do utilizador. Foi usada uma biblioteca que ajuda nainteractividade da texto, mas para suportar formas e imagens esta teve que ser estendida.

No que diz respeito aos testes com utilizadores ficou provado que o LivingSlides é uma ferramentade uso fácil e acessível. Pelo questionário de satisfação é possível perceber que os utilizadores quetestaram a ferramenta consideram que a inovação do LivingSlides, a interactividade, é algo que fazsentido para quem realiza apresentações regularmente.

Na secção Trabalho Relacionado, são apresentados alguns trabalhos que tanto falam de apresentaçõesmultimédia como de documentos que possuem interactividade (documentos activos). É também nestasecção que são descritas as frameworks que permitem a realização de apresentações multimédia e queimplementam documentos activos. São também apresentadas frameworks que permitem documentosactivos em páginas da web, como o Tangle.

Na secção Implementação é descrita a Arquitectura do LivingSlides e são descritos os aspectos maisimportantes e é descrita a sua implementação em pormenor. É descrita a estrutura dos slides, odesenho das formas, o upload de imagens, ligação entre os elementos, a interactividade, o modo deapresentação e por fim a persistência.

De seguida, na secção Testes com Utilizadores, é descrito o procedimento levado a cabo para testar oLivingSlides e são analisados os dados referentes a esses testes.

Por fim, é apresentada a conclusão onde é feita uma reflexão sobre o trabalho realizado e o trabalho arealizar.

3

2 Related Work

Nesta secção são apresentados os diversos trabalhos que estão relacionados com o objectivo do Liv-ingSlides. Em primeiro lugar são apresentadas soluções existentes para o conceito de DocumentosActivos e a justificação para a existência dos mesmos. De seguida, apresenta-se diversos estudossobre aprendizagem com apresentações multimédia e que o é possível ser melhorado a nível de de-sign das mesmas, para atingir melhores resultados para os alunos. Por fim, são apresentadas algumasframeworks que permitem a autoria de apresentações e a execução de documentos activos em HMTL5,que nas quais o LivingSlides irá apoiar-se.

2.1 Documentos Activos

Nesta secção são apresentados diversos trabalhos relacionados que têm que ver com uma das metadesdo LivingSlides: documentos activos. Documentos activos são documentos que permitem introduzir in-teractividade entre os mesmos e o utilizador. Alguns destes trabalhos prendem-se com documentosque ajudam os utilizadores a realizar tarefas.

2.1.1 Active Hyperlinked Documents

As aplicações web que existem permitem ao utilizador inserir dados, que por sua vez são enviados paraweb-servers, são avaliados e os resultados são devolvidos os utilizador. Isto põe demasiada carga nolado do servidor. Existem também aplicações web que põe demasiada carga no lado do cliente, comoé o caso dos plugins ou Java applets. Para poder ganhar mais flexibilidade e para remover quaisquerdistinções entre servidor e cliente, foram então criados os Active Hyperlinked Documents (AHD). AHDsão documentos HMTL que contêm código de aplicações dentro dos mesmos [Köppen and Neumann,1998]. O possível uso destes vai desde o simples controlo de layout e conteúdo de um documento atéo suporte de técnicas de coordenação e colaboração.

Um AHD está dividido em quatro módulos: Structuring, Layout, External and Internal Access e Scripting.Esta proposta de modelo está embebida numa arquitectura de sistema que é uma extensão natural dossistemas actuais de aplicações web-based. Do lado do cliente, é criado um ambiente de runtime e éeste ambiente que disponibiliza uma interface do cliente para o AHD e vice-versa. Do lado do servidor,o ambiente de runtime é incorporado num web-server, para que certas funções de um AHD sejamexecutadas antes da passagem para o cliente. Para o módulo Structuring foi usada a linguagem XML,pois esta suporta a criação de novos elementos; elementos esses que irão ser necessários à formaçãode um AHD; para além disso o XML é direccionado para a Web e existe um maior apoio de developersecriadores de conteúdos.

Para o Layout, foi usada a tecnologia CSS, pois o W3 Consortium sugere a utilização em conjunto comHMTL e XML para alterar o aspecto visual de páginas web. Como é sabido, CSS altera os atributosde um elemento, tais como margens ou estilos de texto. Para o módulo External and Internal Access, foi usada uma linguagem, também proposta pelo W3 Consortium, conhecida por Document ObjectModel (DOM). Esta linguagem descreve partes de um documento em termos de nós, que são por suavez agrupados numa árvore. Para além do DOM é também usado neste módulo a linguagem IntrinsicEvent Model (IEM), que mapeia eventos a um comportamento. Como cada evento está ligado a um

4

elemento, quando um elemento ocorre e este não pertence ao elemento onde o evento ocorreu, esteé propagado pela árvore até chegar ao nó correspondente. Por fim, para o módulo de Scripting foiusada a linguagem Tcl/Otcl, apenas porque o browser desenvolvido (Cineast) para o desenvolvimentoe suporte de AHD está escrito nesta linguagem. Os autores desta solução acreditam que uma vezque a sua solução foi desenvolvida em tecnologias abertas que o conceito de AHD é independente deinfluências comerciais e que é também fácil de usar por terceiros. Para além disso, a sua proposta deAHD está feita de maneira a que modificações à estrutura seja bastante simples mantendo o nível deformalidade. A desvantagem dos AHD ocorre do facto de que estes estão dependentes do browserCineast, e este por sua vez só existe em ambientes Unix. Ou seja, quem estiver interessado em usaresta tecnologia tem de usar tanto o sistema Unix, como o browser Cineast. Os autores acreditam queo AHD necessita ainda de dar alguns passos até mostrar o seu potencial, nomeadamente na criaçãode aplicações que suportem os mesmos.

2.1.2 Active Design Documents

Guy Boy, autor deste paper, acredita que o elo entre a documentação técnica e os artefactos que de-screve dá uma descrição activa da forma de como os artefactos funcionam ou devem ser usados [Boy,1997]. Dessa forma, é conseguida uma maior eficácia no que toca à formação de funções cognitivasenvolvidas no uso desse mesmo artefacto.

Assim sendo, um Active Design Document (ADD) é uma aplicação hypermedia que pode ser usada porum conjunto de pessoas. Um ADD define três aspectos de um artefacto: Interaction Descriptions (IDs),Interface Objects (IOs) e Contextual Links (CLs).

Os IDs descrevem como o artefacto funciona e constituem o diálogo entre humano e artefacto. OsIOs permitem o uso de uma simulação do artefacto em questão; permitem avaliar (usando os IDscorrectamente) a usabilidade de um artefacto. Os CLs são apenas comentários que ajudam a fazer aponte entre os IDs e os IOs.

A ideia de ADDs surge da observação de que quando os humanos necessitam de explicar uma ideiaou um conceito, estes recorrem a desenhos ou num papel ou num quadro. No entanto, ao usar papelnão se compreende bem qual a ideia vinculada e simulações são demasiado caras para serem usadasneste tipo de conceitos. Os ADD pretendem ser um compromisso: fáceis de gerar, mas detalhados osuficiente.

A vantagem desta solução é a possibilidade de substituir um artefacto que apenas serviria para sim-ulação e testes por um documento. A desvantagem, face ao LivingSlides, é o facto de que estesActive Documents só foram utilizados em ambientes industriais, embora usados em aprendizagem dofuncionamento de artefactos.

2.1.3 Active Documents

Neste paper é apresentada a noção de “Active Document” de uma forma um pouco diferente dasdescritas anteriormente. Um Active Document é um documento que várias pessoas podem consultare em caso de dúvidas, fazer uma pergunta ao documento e este responder. A razão por detrás destaideia é o facto de que documentos importantes são vistos por uma grande quantidade de pessoas, e por

5

essa razão, as mesmas questões pode surgir várias vezes [Heinrich and Maurer, 2000]. Inicialmente apergunta é respondida por peritos, no entanto a resposta não é dada em tempo real. Uma vez feita apergunta, esta é guardada numa base de dados. Quando uma pergunta nova surge, esta é comparadacom perguntas já existentes na base de dados, para verificar que se já houve uma resposta para essapergunta. Perguntas novas deixam de existir depois de 500 a 1000 novos utilizadores. Quando onúmero de perguntas semanticamente idênticas decresce (com uma tendência para zero), os peritostornam-se obsoletos.

As perguntas são reconhecidas de três formas:

• abordagem heurística, em que são comparadas as palavras da pergunta a outras palavras usadasem questões semelhantes feitas anteriormente;

• abordagem com ícones, quando o utilizador marca uma área do documento com o cursor é porquea sua pergunta tem algo que ver com a informação nessa área;

• abordagem linguística, em que as perguntas são avaliadas semanticamente, no entanto, é usadouma técnica mais simples confiando no utilizador para determinar a relevância da resposta à suapergunta.

Esta abordagem está mais direcionada para e-Learning, em que o contexto implica um grande númerode utilizadores. Para além do e-Learning, os autores vêem mais três vantagens dos documentos ac-tivos: uma é em suporte para software, outra na conexão com help-desks e a última é em bibliotecasdigitais. Na ajuda para o software, os documentos activos podem ajudar na medida em que se houvererros ou lapsos na documentação técnica, esta será reparada quase sem qualquer custo e com baixoimpacto para o utilizador. Para as help-desks, caso o utilizador não entenda o manual, implicando queo abordagem semântica fosse mais abrangente no seu domínio. Para as bibliotecas digitais, num futuroem que as bibliotecas sejam um repositório dinâmico ao oposto do estático que hoje é.

A desvantagem é que esta solução só pode ser utilizada em documentos que não estejam passíveis amudança, ou seja, que a informação contida nos mesmos seja estática. Outra desvantagem, e esta éface ao LivingSlides, é o facto de que esta abordagem não traz qualquer benefício a aulas universitárias,devido ao número reduzido de participantes no documento.

2.1.4 Active Documents in XML

A introdução do XML dotou a World Wide Web com um formato poderoso para expressar a maior partede estruturas de informação. Como até à data não existia uma ferramenta que permitisse mostrar todosos tipos de documentos XML. Foi então criado um browser modular XML, o XMLC [Bompani et al.,1991].

Cada elemento XML é associado a um módulo de rendering, chamado displet (display applets), que criaa representação visual do elemento. Como qualquer elemento XML pode ser associado a um módulo,pode associar-se um comportamento a um documento XML. É então criado um ambiente geral paraDocumentos Activos.

Na visão dos autores, um Documento Activo é um documento que consegue dar algum comportamentoautónomo, podendo este comportamento ser “activo” ou “passivo”. No entanto, o modelo proposto não

6

faz essa distinção, uma vez que os documentos são expressos em XML e são associados a módulosquando necessário, dependendo da aplicação a que estão sujeitos.

Através do uso do XML e do XSL (Extensible Stylesheet Language) é possível dotar os elementosde propriedades visuais. Como os elementos XML não têm significado nem semântica de rendering,cabe ao software de visualização dá-la. Isto acontece com o mapeamento dos nomes dos elementos dodocumento para os nomes dos elementos dos programas através do XSL. A ideia por detrás dos displetsé criar um browser de rendering genérico que carrega e activa módulos de software independente feitospara criar visualizações específicas dos objectos.

Foi então desenvolvida uma arquitectura para o rendering de displets. O documento XML é lido etransformado numa representação em árvore usando o DOM. De seguida, uma ou mais camadas deXSL são aplicadas à árvore através do uso de um processador XML. Isto transforma a árvore, no finaldestas passagens numa outra árvore DOM que contém uma propriedade importante: para cada nomede um elemento existe uma classe Java, chamada displet, que irá providenciar o rendering. A aplicaçãoXMLC irá activar todas as classes Java dos displets necessários, criando assim uma árvore de objectosJava executáveis.

A principal vantagem desta arquitectura é o facto de que o browser não tem um conjunto fixo e limitadode visualizações, podendo carregar e activar qualquer classe Java para o rendering quando necessário;ou seja, não existe limite para o número de notações diferentes e de objectos graficamente sofisticadosque são satisfazíeis pelo XMLC.

Figure 2.1: Active Documents in XML - Arquitectura

2.1.5 Embedded Buttons: Documents as User Interfaces

Embedded Buttons é uma arquitectura que permite tornar qualquer documento numa interface do uti-lizador. Qualquer objecto pertencente a um documento tem a possibilidade de se transformar numbotão, a pedido do utilizador, e ao ser seleccionado uma acção é executada, sendo que esta está as-sociada ao descritores de comportamento desse objecto [Bier, 1991]. Para além disso, um documentopode ser associado a uma aplicação, passando este a ser o painel de controlo, guardando e mostrandoo estado da mesma. Um exemplo a considerar é o uso de uma agenda telefónica: quando o utilizadorcarrega no número de telefone, associado a uma entrada na agenda, esse número é discado.

O Embebbed Buttons é um editor What You See Is What You Get (WYSIWYG) baseado noutros editoresdo género. Assim o é, pois os editores WYSIWYG mostram automaticamente no ecrã, as mudanças

7

feitas ao documento e por isso é usado este tipo de editor para mostrar o estado dos botões.

2.2 Apresentações Multimédia

Nesta secção são introduzidas ferramentas de autoria inovadoras, cujo principal objectivo é tornar oprocesso de autoria mais simples. Todas elas usam como base ferramentas existentes, como porexemplo, o PowerPoint ; no entanto, todas elas apresentam uma forma diferente de as usar.

2.2.1 HyperSlides

HyperSlides é uma ferramenta para criar protótipos de apresentações dinâmicas, usando apenas pon-tos num ficheiro de texto [Edge et al., 2013]. Foram conduzidos dois estudos, um antes do desenvolvi-mento do HyperSlides e outro depois, em que o primeiro estudo foi vocacionado à compreensão daactividade de apresentar.

Após este estudo, onde foram sondadas não só as práticas correntes dos utilizadores mas tambémquais as suas expectativas em relação a uma nova ferramenta, foram então determinados quatro pon-tos para o design de sistemas de protótipos apresentação dinâmicas e que foram utilizados no desen-volvimento do HyperSlides:

• Planear por pontos – Ao planear por pontos antes de os colocar logo nos slides evita o problemade não se ver a história apresentação como um todo. A criação da mensagem deve preceder odesign dos slides, e cada mensagem deve levar a audiência mais perto do final da história. O títuloe os pontos de uma apresentação são criados num ficheiro de texto usando uma simples markuplanguage. Suporta o desenvolvimento de cenas de alto-nível com imagens que ocupam um slideinteiro, a expansão de cenas em pontos, a expansão de pontos em sub-pontos e a preparação daligação verbal entre cenas.

• Design como um serviço – O uso de imagens deve ser encorajado como uma forma de a audiên-cia perceber melhor a mensagem, mas também ter uma conexão emocional com a mesma. Deverespeitar os quatro princípios do design visual: contraste, repetição, alinhamento e proximidade.A especificação de uma variedade de opções de estilos é possível, incluindo o tipo de fonte e ascores do texto do título e corpo, o tamanho e a cor do fundo, a proporção e a cor de fundo doslide. Os títulos dos slides são automaticamente escalados para preencher o espaço disponível.

• Ligação ente cenas – As ferramentas de autoria devem ajudar o utilizador a criar e ligar as cenascentrais da narrativa, encorajar o planeamento de ligações verbais entre as cenas e encontrar umequilíbrio ente a análise e a narrativa. Carregando na borda superior de uma cena leva o utilizadora um novo slide, em que é visível qual a cena que o levou ali. Carregando em qualquer thumbnailde uma cena leva o utilizador a essa cena, enquanto que a navegação horizontal mostra qual é aligação verbal planeada para as transições entre cenas.

• Expansão a pedido – As ferramentas de autoria devem suportar a expansão dinâmica dos pontosem sub-pontos, notas, ficheiros, páginas da web, etc. que suportem o ponto apresentado. Qual-quer ponto pode estar ligado a um ficheiro externo ou página da web. Uma vez expandido umponto, carregando na borda superior do slide, volta-se na hierarquia dos slides.

8

Para gerar uma apresentação HyperSlides, o ficheiro executável, o ficheiro de texto input.txt e quaisqueroutros ficheiros que estejam referenciados na apresentação devem estar na mesma pasta. Ao fazerduplo clique no ficheiro executável, é gerado um ficheiro output.pptx que é aberto na versão maisrecente que o utilizador tenha instalada do PowerPoint.

No final do desenvolvimento, foi feita uma avaliação com pessoas que não participaram no primeiroestudo. Depois de terem aprendido como trabalhar com o HyperSlides num workshop de 5 horas, osparticipantes referiram que o método de planear por pontos ajuda bastante na organização de ideiase a ter uma visão geral da apresentação e o seu curso. Com respeito ao design, os participantesafirmaram que é necessário mais trabalho, mas que apreciaram o estilo dos slides. Preferiam que hou-vesse mais templates de estilos, e que o HyperSlides funciona para apresentações rápidas e não tãoelaboradas. No aspecto da ligação entre cenas, os participantes mostraram-se receptivos argumen-tando que representa a maneira como pensam e que ajuda a audiência a pensar da mesma forma. Deuma forma geral, os participantes gostaram da possibilidade de expandir pontos da apresentação, noentanto, houve participantes que após expandir os pontos se perderam na navegação da apresentação.

Em conclusão, o HyperSlides mostra que é essencial ter uma abordagem dinâmica à prototipagem deapresentações.

2.2.2 Collage

O Collage é uma ferramenta de autoria de apresentações que difere das grandes ferramentas de au-toria. O Collage permite que os utilizadores possam interagir com o conteúdo nos slides, que no casodo Collage é na maioria scans de livros ou papeis [Panjwani et al., 2010]. Por exemplo, o Collage podeajudar os professores a sublinhar passagens importantes do livro ou a escrever anotações relevantesnas páginas do mesmo. Para além disso, o Collage também oferece a possibilidade de se poder sobre-por conteúdos multimédia nas páginas do livro, e alternar entre os conteúdos e as páginas enquantoestas são apresentadas aos alunos. Para além de ter a tarefa de ajudar os professores a leccionar, oCollage foi também desenvolvido com o intuito de reduzir o esforço feito na autoria de apresentaçõespara aulas.

O contexto em que o Collage se insere é bastante diferente do contexto Europeu ou Americano. Estefoi desenvolvido para professores na Índia, onde os recursos multimédia são bastante limitados. Aoserem entrevistados professores de várias escolas dos subúrbios, muitos referiram que não usam ap-resentações nas aulas aulas porque não têm acesso a um computador e também porque consideramque levariam muito tempo a preparar uma apresentação por falta de proficiência nos computadores eferramentas de autoria.

Tendo isso em mente, o Collage foi então desenvolvido com base na premissa de que o texto nasapresentações viria, na grande maioria, de livros ou notas manuscritas dos próprios professores. Aferramenta tem de ser o mais simples possível, não ocupando muito tempo do professor. Assim sendo,cada página de um livro digitalizada, cada nota manuscrita digitalizada ou imagem encontrada na in-ternet é chamada de “página”, numa analogia com as páginas de um livro. O utilizador pode entãorenomear cada ficheiro com um único número, representando a ordem em que as páginas irão sermostradas. Assim que chega à aula, o professor apenas necessita de executar o Collage e mudar de“página” carregando na thumbnail correspondente. Não há qualquer input de texto nem manuseamentode qualquer ferramenta de autoria.

9

O Collage oferece então uma série de funções que ajudam no ensino. Os professores podem entãofazer zoom das suas “páginas”, desenhar rectângulos nas áreas que consideram importantes, fazeranotações por cima das “páginas”, esconder partes de uma página permitindo uma mostra progressivada informação, podem dividir o ecrã a meio e usar a parte inferior como quadro.

Os professores que usaram o Collage nas suas aulas, durante 3 meses, referem que acharam a fer-ramenta de fácil utilização e que pensam que é melhor do que as ferramentas actuais para mostrarconteúdos visuais aos alunos. Foi observado que os professores usavam, na maioria das vezes, aopção de ter um quadro na parte inferior do ecrã e que quando acabavam de o usar, embora o Collagetivesse a opção de guardar o que havia sido escrito, todos eles apagavam o conteúdo do quadro.

2.2.3 SidePoint

O SidePoint é uma ferramenta que permite ter um painel na ferramenta de autoria da escolha do uti-lizador, que mostra conhecimento relevante para o conteúdo da apresentação. SidePoint parte dapremissa que quando uma pessoa necessita de fazer uma apresentação, ela passa muito tempo naweb à procura de conteúdos relevantes para a sua apresentação, sejam eles textuais ou visuais [Liuet al., 2013]. Para comprovar essa premissa, foi realizado um pequeno estudo e chegaram à conclusãode que na hora dada aos participantes para estes fazerem uma apresentação de apenas cinco minutos,estes passaram a maior parte do tempo no browser do que na ferramenta de autoria.

O SidePoint infere, através de um parser, qual o conteúdo de cada slide pelo texto que o utilizador estáa escrever. Esse parser cria uma árvore com keywords, que depois são “passadas” ao NeedleSeek eo SidePoint mostra o conteúdo relevante no painel lateral, chamado de Knowledge Panel. Caso umakeyword for muito grande, ou o NeedleSeek não tiver qualquer tipo de informação, o SidePoint faz entãouma pesquisa na web.

Clicando com o botão esquerdo do rato, copia o facto ou a nota para o slide. Clicando com o botãodireito do rato, leva o utilizador para uma pesquisa mais aprofundada sobre o conceito. Para além dopainel lateral do lado direito, o SidePoint também disponibiliza um painel no fundo da janela, chamadode Concept Panel, que contém conceitos alternativos aos conceitos presentes no slide que podempopular o Knowledge Panel. Por exemplo, ao carregar no conceito “Imagens”, o Knowledge Panelapresenta agora imagens relevantes ao conteúdo do slide; carregando numa imagem adiciona-a aoslide actual.

Após o desenvolvimento do SidePoint, os autores conduziram novo estudo, pedindo aos participantespara criarem uma apresentação de cinco minutos. Ficou mostrado que com o uso do SidePoint, menostempo é gasto à procura de recursos para a apresentação. Muitos participantes referiram que mesmotendo conhecimentos sobre o tema, ao visualizar imagens ou conceitos permitiu-lhes escrever commais detalhe sobre o tema. Foi consensual que o SidePoint necessita de mais controlo por parte doutilizador, ou seja, que seja possível ao utilizador decidir quando ele quer fazer uma pesquisa sobre umfacto.

10

2.2.4 Fly

A ferramenta FLY foi pensada exclusivamente para “libertar” o utilizador das formas tradicionais deautoria. Para se fazer uma boa apresentação são necessários vários dias de pesquisa, de estruturação,de prototipagem e de ensaio, e todos estes passos podem ter que ser reutilizados numa outra altura,numa outra apresentação [Lichtschlag et al., 2009]. Os autores acreditam que os contornos dos slidespodem impedir a actuação do apresentador, e por isso, o FLY permite que o conteúdo seja colocadoatomicamente, sem este estar dependente de um slide frame.

Foram então identificados três problemas inerentes à autoria de apresentações: Corte de Conteúdo(Content Cutting), Dominância de Tempo (Time Dominance), e Dependência de Detalhes (Detail Trap).

O Corte de Conteúdo está relacionado com o facto de que o conteúdo de uma apresentação fica de-pendente do tamanho de cada frame de um slide, sendo que a maior parte das vezes, o tamanho dosmesmos nada tem que ver com o tamanho de cada pedaço do conteúdo geral. Muitas das vezes, outilizador recorre a fontes mais pequenas ou a repetição de conteúdos de uns slides para outros. ADominância de Tempo está ligada com o facto de que quando uma apresentação é feita fica implícitauma timeline; se for necessário apresentar algo extra-conteúdo é necessário quebrar essa timeline.Quebrar esse ritmo é também complicado, uma vez que trocar de slide implica passar por vários slides,se o apresentador necessitar de referir um outro conteúdo presente na apresentação. Assim resulta-senum documento válido apenas para a timeline original: conteúdo não antecipado fica de fora da apre-sentação. A Dependência de Detalhes não permite ao utilizador ir em profundidade no que diz respeitoao utilizador. Segundo os estudos dos autores, as ferramentas actuais apenas permitem realizar apre-sentações com um aspecto geral, delegando ao utilizador a realização de slides que contenham essesdetalhes, estando esses slides no meio dos slides “gerais”.

O FLY tenta então unificar o geral com o detalhe, sem nunca perder o contexto, em que a informação écolocada sem a limitação de frames. A informação é então atómica, evitando categorização e limites,a não ser que estes sejam especificados pelo utilizador. Não existem layouts e cabe ao utilizadordesenhar o mapa bi-dimensional que contará a história associada ao conteúdo. Não existe também umcaminho predefinido, mas caso o utilizador o deseje, este pode criar snapshots que irão representaruma timeline. O FLY pretende que a informação seja verdadeiramente exibida, ao invés de esta seratractiva.

2.2.5 NextSlidePlease

O NextSlidePlease é uma aplicação que introduz diversas contribuições inovadoras para irem ao en-contros dos desafios, identificados pelos utilizadores, na criação e apresentação de conjuntos de slides(slide decks) para suportar apresentações orais [Spicer et al., 2012].

Um dos desafios é criar uma narrativa que capture a audiência e que ao mesmo tempo consiga cap-turar relações complexas; nas ferramentas actuais os utilizadores são forçados a tornar essa relaçõescomplexas numa secção linear. Esta estrutura linear torna difícil o acesso a informação, caso hajauma questão da audiência. Um outro desafio é facilitar a reutilização do conteúdo das apresentações etambém a gestão efectiva do tempo disponível para a realização de apresentações dinâmicas, pois umperíodo activo de perguntas e respostas, pode retirar demasiado tempo ao apresentador.

11

O NextSlidePlease pretende então superar estes desafios. Introduz então uma sequência em grafopara substituir a sequência linear, cada nó representa um slide e os vértices são pesados, em que ovalor do peso é o valor do tempo estimado do slide e a sua prioridade. Para auxiliar na reutilizaçãode conteúdo o NextSlidePlease introduz um algoritmo de descoberta: este algoritmo reduz tempo e acarga cognitiva necessária para a construção de uma representação em grafo de uma apresentação.Este algoritmo tenta descobrir secções e sub-secções baseadas em semelhança textual. Para a gestãodo tempo, o NextSlidePlease introduz uma interface que mostra qual o tempo restante no slide actual(tendo em conta o tempo geral da apresentação) e qual o caminho que poderá reduzir o tempo daapresentação. Esta sugestão do caminho é feita com um algoritmo que considera o slide actual, ocusto de tempo e a prioridade dos slides seguintes e mostrando ao utilizador qual o caminho a seguirpara mostrar os slides prioritários sem exceder o tempo da apresentação. Isto reduz também a cargacognitiva do apresentador.

Esta preocupação com a carga cognitiva advém do facto que o utilizador necessita de ter um bomconhecimento da sua apresentação para poder navegar nela sem exceder o seu tempo, sabendo quaisos slides importantes e quais os slides a poder “saltar” e para poder responder a eventuais perguntasda audiência.

2.3 Frameworks para apresentações

Nesta secção são apresentadas diversas frameworks que permitem a criação de apresentações. Todasestas frameworks criam apresentações através do uso de HTML5 e CSS. A maioria destas não têminterface gráfica, obrigando o utilizador a saber codificar para poder tirar partido destas.

Apesar de já existirem outras frameworks para apresentações bastante conhecidas, como o Prezi, estasnão serão incluídas neste estudo, uma vez que estão feitas em tecnologia Flash e não são relevantespara o LivingSlides.

2.3.1 Deck

Figure 2.2: Deck.js

Esta framework1 tem como metáfora um baralho de cartas (deck of cards) em que cada slide é umestado. A navegação pelos slides faz-se através do teclado. A framework está dividida em vários

1 http://imakewebthings.com/deck.js/

12

módulos, sendo que cada um adiciona mais funcionalidade à mesma. Um deles é o módulo deck.scale,que redimensiona, por exemplo, um video de forma a que este caiba dentro dos limites do slide. Para serpossível criar apresentações com esta ferramenta, é necessário que o utilizador tenha conhecimentosde HTML ou HMTL5. É também necessário conhecimentos de CSS para que seja possível modificar oaspecto visual dos slides, e CSS3 para as transições. O deck.js também suporta, tal como uma páginada web, nested slides, imagens e videos.

2.3.2 Shower

Figure 2.3: Shower

O Shower2 é uma ferramenta de criação de apresentações multimédia construída, tal como o deck.js,em HMTL, CSS e JavaScript e permite que haja navegação entre os slides com o teclado. Como tal, oShower incorpora todos os elementos do HTML na criação das apresentações. Demarca-se do deck.jsna medida em que o Shower permite que a apresentação criada seja exportada como formato PDF.

2.3.3 Reveal.js

O reveal.js3, anteriormente chamado de CSS 3D Slideshow, permite criar apresentações em HTMLrapidamente, com um bom aspecto.

Figure 2.4: Reveal.js

2http://shwr.me/3http://slid.es

13

Caso o utilizador não tenha conhecimentos de HTML, esta framework pode ser utilizada através de umeditor online slide.es, permitindo assim que o utilizador não tenha contacto com o HMTL da ferramentamas podendo utilizar todas as possibilidades que o reveal.js oferece. Utilizando o editor online o uti-lizador não necessita de fazer download de qualquer aplicação e por consequência, este tem acessoàs suas apresentações em qualquer lugar, desde que esteja conectado. Os slides podem ser abertosquer em desktops, em tablets ou em smartphones desde que estes tenham uma conexão activa e umbrowser.

A versão paga do slide.es disponibiliza mais funcionalidades, como ter a possibilidade de fazer a apre-sentação em modo offline, ter a possibilidade de customizar o CSS ou mais temas predefinidos. Paraalém disso, o slide.es disponibiliza ao utilizador a possibilidade de este exportar os seus slides em pdf,e imprimir os mesmos para distribuição pela audiência.

Figure 2.5: Reveal.js - O novo editor

Em Agosto de 2014, foi lançada uma nova versão do editor online. Nesta nova versão, é possívelalterar todos os aspectos das caixas de texto, como a cor do texto e a cor de fundo, o padding da caixa,a opacidade e o bordo da caixa (podendo também alterar a grossura e a cor da borda). É possíveladicionar shapes aos slides, podendo o utilizador mudar a cor, o tamanho, a posição e a transparência.Qualquer shape pode ser alterada em qualquer altura da edição do slide (por exemplo, um quadradopode passar a ser um círculo mais tarde, caso o utilizador o deseje). Para além da edição de caixasde texto e a adição de shapes, o utilizador pode também adicionar iframes (embebendo uma páginaexterna na apresentação) ou código. A estes dois elementos também é possível mudar o tamanho e aposição dos mesmos.

2.3.4 Impress

Esta framework4 é inspirada no conhecido Prezi, no entanto esta é feita em CSS e JavaScript, ao con-trário do Prezi. A ferramenta impress.js foca-se mais nas transições entre slides para criar um impactona audiência. Toma partido das transições de CSS3 presentes na maioria dos browsers modernos. Noentanto, o impress.js não utiliza a metáfora de deck como as anteriores, em vez disso usa um canvasinfinito e cabe às transições mostrar partes desse canvas através da navegação com o teclado. Paracriar apresentações com o impress.js é necessário que o utilizador tenha conhecimentos, tais como nasframeworks anteriores, de HMTL e CSS3.

4 http://bartaz.github.io/impress.js

14

Figure 2.6: Impress

2.4 Frameworks para Documentos Activos

Por último, são apresentadas frameworks existentes que implementam documentos activos. São dadasa conhecer o Tangle, o Flapjax e o ActiveMarkdown.

2.4.1 Tangle

Figure 2.7: Tangle

Criado por Bret Victor, o Tangle5 é uma biblioteca JavaScript para criar documentos reactivos. A ideiapor detrás da criação do Tangle são “Explicações Exploraveis” (Explorable Explations) , ideias quepermitam e encorajem uma leitura activa.

Com esta framework, é possível termos três tipos de documentos:

• Documento reactivo (reactive document) – permite ao utilizador modificar as análises e conjec-turas do autor e observar as consequências;

• Exemplo explorável (explorable example) – permite ao utilizador desenvolver uma intuição decomo um sistema funciona.

• Informação contextual (contextual information) – permite ao utilizador aprender informação rela-cionada com o conteúdo na hora.

5 http://worrydream.com/Tangle/

15

Para criar um documento reactivo, apenas é necessário declarar no documento HTML qual o elementoque irá ser dinâmico e quais são os elementos que sofrem com essa propriedade, e editar o ficheiroJavaScript consoante as necessidades do utilizador face a esse elemento.

2.4.2 Flapjax

O Flapjax6 é outra framework que permite a implementação de documentos activos.A implementaçãodo Flapjax é bastante diferente da implementação do Tangle, embora o comportamento seja quaseidêntico. Enquanto que no Tangle a mudança no estado das variáveis é feita através de programaçãoimperativa e atribuições, no Flapjax essas mudanças são guardadas numa árvore, e é essa árvore quepermite implementar um comportamento complexo. Tal como o Tangle, o Flapjax tem uma parte emHMTL e outra em JavaScript. Mas o Flapjax não dispõe de widgets como o Tangle, sendo que asvariáveis que irão mudar são inseridas num tradicional campo de input.

2.4.3 Active Markdown

Active Markdown7 é uma ferramenta, que tal como o Tangle e o Flapjax, permite a criação de documen-tos activos. O Active Markdown usa uma markdown8 em texto simples, com uma notação especial paraadicionar controlos e variáveis interactivos. O uso das markdown é simples quando comparado como Tangle ou o Flapjax; apenas basta escrever uma pequena tag para que seja criada a variável quese pretende ser dinâmica. A diferença, e principal desvantagem, entre o Active Markdown e as outrasferramentas apresentadas, reside no facto de que o ActiveMarkdown tem de ser instalado e compiladovia linha de comandos antes de ser possível visualizar o conteúdo dinâmico na página web.

2.5 Discussão

No que diz respeito aos documentos activos é interessante ver quais as aplicações a que o conceitopode ser aplicado. No trabalho relacionado, ficou mostrado que o conceito ainda não foi aplicado aocontexto de uma sala de aula, da mesma forma que o LivingSlides pretende aplicar.

Quanto às apresentações, é notório que existe uma vontade em mudar o paradigma das ferramentasde autoria e como estas devem ser apresentadas a uma audiência. O HyperSlides simplifica a forma de“pensar” para uma apresentação, ajudando o utilizador a ver o geral e a poder construir uma narrativaque ajude mais tarde na apresentação dos slides. O Collage demostra como é importante a inclusãode apresentações multimédia nas aulas e como as apresentações são uma mais-valia se forem inter-activas. O SidePoint também procura simplificar o acto de criar apresentações, mostrando ao utilizadorfactos relevantes sem que este mude de janela para procurar, e consequentemente, perder tempo.Pode-se concluir que as ferramentas actuais de autoria não satisfaz a maior parte das necessidadesdos utilizadores, sendo os utilizadores quem se adapta à ferramenta e não o oposto.

Existe então uma lacuna que o LivingSlides pretende preencher: conseguir oferecer aos utilizadoresuma forma melhor de apresentar e também dar a possibilidade de estes terem conteúdos dinâmicos.

6 http://www.flapjax-lang.org/7 http://activemarkdown.org/8http://daringfireball.net/projects/markdown/

16

Uma vez apresentadas as frameworks que existem para a criação de apresentações multimédia emHMTL, mostra-se na tabela 2.1 uma comparação dos diferentes atributos de cada uma:

Importaçãode Imagens

SuportaVídeo

SuportaSVG

InterfaceGráfica

Importa pptx ExportaPDF

Deck.js sim sim extensão não não nãoShower sim sim sim não não simReveal.js sim não não sim não simImpress.js sim não sim não não não

Table 2.1: Comparação entre frameworks

No que diz respeito às ferramentas de autoria em HTML, a Reveal.js é a mais completa das ferramen-tas apresentadas. Esta oferece uma Interface Gráfica e, mediante a subscrição do serviço, exportaçãopara PDF. Caso o utilizador se sinta mais confiante em codificar mudanças ao aspecto gráfico, estepode fazer o download do código e fazer ele mesmo as suas alterações. Com a nova alteração aoReveal.js este tornou-se ainda mais próximo do LivingSlides, uma vez que agora este também su-porta formas SVG (embora estas aparecem automaticamente no ecrã quando o utilizador escolhe umaforma), redimensionamento e reposicionamento de todos os elementos de um slide.

No que diz respeito às frameworks para a criação de documentos activos, o Tangle é a mais simplese a ferramenta que mais se aproxima de um documento reactivo. Embora o Tangle e o Flapjax sejambastante semelhantes, a falta de elementos visuais do Tangle (os widgets) Flapjax faz com que estaferramenta não seja harmoniosa com o produto final desejado; o uso de caixas de texto para podermudar o valor da variável não é tão agradável à vista como uma variável que cujo valor pode sermudado arrastando o cursor. O uso da ferramenta ActiveMarkdown, embora seja simples na forma dedeclarar quais as partes dinâmicas de um documento, implica que o utilizador instale o compilador domesmo para fazer a transformação das markups para o HTML.

Conclui-se da análise desta secção que uma boa ferramenta de apresentações interactivas deve satis-fazer os seguintes requisitos:

R1 A ferramenta deve ser independente quer do Sistema Operativo, quer do browser.

R2 A ferramenta deve estar disponível offline.

R3 A ferramenta deve permitir a impressão de handouts.

R4 A ferramenta deve mostrar, a pedido do utilizador, notas de orador.

R5 A ferramenta deve suportar imagens JPG, PNG e deve suportar o formato SVG.

R6 A ferramenta deve suportar vídeo embebido.

R7 A ferramenta deve ter um conjunto de estilos pré-definidos.

R8 A ferramenta tem de ser de fácil utilização.

R9 A ferramenta deve suportar a importação e exportação de slides.

R10 A ferramenta deve ter um conjunto de widgets interactivos.

R11 A ferramenta deve disponibilizar a introdução de código por parte do utilizador.. . .

17

3 O LivingSlides

Nesta secção é descrito todo o funcionamento do LivingSlides. Em primeiro lugar é feita uma descriçãodo LivingSlides do ponto de vista do utilizador, passando depois para um capítulo dedicado à partetécnica, passando pela arquitectura, pela tecnologia usada e por fim pelos descrita a Arquitectura domesmo, as diferentes versões pelas quais o LivingSlides passou, é feita uma pequena descrição dastecnologias usadas e por fim é descrito, exaustivamente, a implementação do LivingSlides.

3.1 Utilizando o LivingSlides

Figure 3.1: Diálogo incial do LivingSlides

Quando o utilizador abre o LivingSlides a primeira coisa que vê é um diálogo, pedindo-lhe que escolhaqual o tema que ele deseja para a sua apresentação, como é mostrado na figura 3.1. Para além dotema, o utilizador tem também a hipótese de escolher qual o aspect ratio dos seus slides. Escolhidoo tema, o utilizador tem logo às sua disposição um slide inicial, que contém caixas de texto para outilizador poder editar o título e o subtítulo da apresentação.

Figure 3.2: Escolha de um tipo deslide

Caso o utilizador pretenda adicionar um slide, este tem à sua dis-posição um menu em que são disponibilizados quatro tipos de slides:slide com título, slide com título e uma coluna de conteúdo, slide comtítulo e duas colunas de conteúdo e um slide em branco, como se podever na figura . O utilizador pode também adicionar notas de oradorà sua apresentação, sendo estas notas apresentadas mais tarde nomodo apresentação numa nova janela. O utilizador pode mudar o tipode letra de cada caixa do slide, a cor da fonte, a cor da caixa de texto,o tamanho da fonte e o tipo de ênfase tipográfico da fonte. Para alémdisto, ainda pode mudar o alinhamento do texto e adicionar listas or-denadas e listas sem ordem.

Caso o utilizador desejar desenhar formas SVG este tem à sua disposição um rectângulo, um rectângulocom cantos arredondados, um círculo, uma elipse, uma seta e uma linha. Para isso ele clica no botão

18

(que representa uma caneta e uma folha de papel) na barra de navegação e escolhe qual dessasformas ele pretende desenhar no slide. Escolhida a forma, o utilizador pode desenhar essa forma noslide, desde que não seja em cima das caixas de texto. Para isso, o utilizador clica no slide e arrasta orato até onde ele deseja que a área da forma. Para o ajudar, aparece um outline da forma enquanto outilizador arrasta o rato, como se pode observar na figura 3.3.

Figure 3.3: Outline de uma forma SVG

Quando o utilizador larga o rato, é então desenhada a forma e aparece logo os handles para transformara forma, caso o utilizador não esteja satisfeito com a área que a forma está a ocupar, ou pretenda rodara forma ou mudá-la de local.Também pode mudar a cor da forma ou do traço delimitador, ou a espessurado traço.

Se o utilizador pretender adicionar uma imagem, ele pode fazê-lo usando para isso o diálogo de uploadde imagem. Neste diálogo, como se mostra na figura 3.4, é possível adicionar formas locais ou externas.As imagens externas são aquelas que estão alojadas na web e que tudo que o tulizador necessita defazer é de especificar qual o URL da mesma. Caso este queira adicionar uma imagem que esteja nodisco também o pode fazer. Basta escolher a opção Upload e ou arrasta uma imagem para o diálogoou procura uma no sistema de ficheiros. A imagem é então adicionada automaticamente ao slide.

Quando o utilizador pretender adicionar interactividade entre dois elementos, ele pode fazê-lo clicandonos círculos verdes que estão junto aos elementos dos slides. Quando o utilizador clica e arrasta, umaseta aparece e ao arrastar esta seta até ao círculo verde do elemento desejado é criada uma relaçãode interactividade entre esses dois elementos.

Quando a ligação é feita, aparece então um diálogo para o utilizador parametrizar os valores das var-iáveis independente e dependente, como se mostra na firugra 3.4. Neste diálogo, o utilizador tem apossibilidade de parametrizar valores para elementos textuais, para formas SVG ou imagens.

O utilizador tem à sua disposição várias opções consoante o tipo do elemento de destino. Caso oelemento de destino seja do tipo "texto", o utilizador pode alterar (para além do valor do texto) a cor dafonte, o tipo da fonte, o tamanho da fonte, a posição e o tamanho da caixa de texto. Caso o elementoseja do tipo "SVG", o utilizador pode mudar a cor da forma, a cor do traço, a posição da forma e otamanho da forma. Caso seja uma imagem, o utilizador pode mudar o tamanho da mesma, a posiçãoda mesma e pode ainda especificar várias imagens que aparecerão consoante o valor do elemento de

19

Figure 3.4: Ferramenta de Autoria - Diálogo de upload de imagem

origem.

O utlizador pode adicionar notas de orador ao longo da edição da apresentação. Para isso, existe umbotão na barra de navegação que representa um balão de conversação que ao ser clicado faz com queapreceça uma secção, em baixo do slide, para que possam ser escritas notas sobre o assunto do slide.Estas notas estarão diponíveis mais tarde para consulta no modo de apresentação.

Figure 3.5: Ferramenta de Autoria - Notas de orador

Quando o utilizador acaba a edição da sua apresentação ele pode tomar uma de duas decisões: oucomeçar a apresentação ou guardá-la para a poder apresentar noutra altura.

Se escolher apresentar, entra no modo apresentação. Neste modo, o utilizador não pode editar maisqualquer elemento, nem criar interactividade entre elementos. Ele pode navegar na apresentação us-ando as setas do teclado ou usando as duas setas que estão em cada lado da apresentação. É nestemodo que é lançada uma segunda janela que contém as notas de orador para esse slide, um tempo-rizador que indica quanto tempo já passou desde que a apresentação foi iniciada e prevews do slide

20

actual e do próximo slide.

Caso o utilizador tenha desejado guardar a apresentação, ele clica no botão que representa uma dis-quete e insere o nome que este deseja para identificar a apresentação no diálogo que aparece parao efeito. Quando o utilizador carrega no botão OK, a apresentação é enviada para um servidor e éguardada.

3.2 Implementação

Nesta secção o LivingSlides é descrito através de um ponto de vista técnico. São apresentadas todasas decisões que foram tomadas em deterimento de outras.

3.2.1 Tecnologia Utilizada

O front-end do LivingSlides foi implementado usando tecnologias da web: HTML5, CSS3, JavaScript ejQuery. A vantagem desta implementação é a possibilidade de o LivingSlides ser utilizado independen-temente do Sistema Operativo, e o utilizador não tem que instalar nada para poder utilizar o LivingSlides.A desvantagem prende-se com versões mais antigas de browsers ou browsers não compatíveis (como oInternet Explorer) que podem comprometer o funcionamento do LivingSlides, por exemplo, não mostrarcorrectamente um elemento ou não suportar da versão de jQuery usada. No entanto, estas versõesestão a cair em desuso e a popularização de browsers que suportam todos os elementos fazem comque o LivingSlides seja praticamente usável por todos os potenciais utilizadores.

Hyper Text Markup Language é a linguagem standard para a escrita de páginas da web. Consiste emvárias etiquetas (tags) delimitadas por parêntesis angulares (< e >), estas etiquetas definem secções dodocumento, como se de blocos se tratasse. HTML5 é a quinta revisão do standard e esta revisão temcomo principal objectivo suportar elementos multimédia sem perder a facilidade de leitura característicado HTML. HTML5 suporta a integração de SVG, e introduz novos elementos como <video>, <audio>

e <canvas>. HTML5 introduz também uma nova API, que se veio mostrar bastante importante para arealização do LivingSlides, que das várias opções se destaca a possibilidade de editar documentos e apossibilidade de poder arrastar elementos na página (quer seja para reposicionamento, quer seja paraupload de ficheiros).

HTML necessita da ajuda de Cascading Style Sheets para dar o aspecto e formatação do documento.CSS pode ser aplicado quer a documentos HTML como a SVG ou XML e serve para dividir o conteúdoda apresentação do documento. Cada ficheiro CSS contém uma série de regras, que estão associadasa elementos do documento quer seja pelo id ou pela classe do mesmo, e que definem o aspectoque esse elemento deve ter dentro do documento. CSS3, o novo standard, veio permitir que certoselementos visuais que até aqui eram implementados através de imagens (como por exemplo, sombrasou fontes) sejam agora suportadas pelo browser reduzindo a carga que é necessária transferir quandoo utilizador faz um pedido à pagina. Usando apenas HTML e CSS, uma página da web é estática.Para conferir algum movimento a uma página da web, são introduzidas algumas funções em JavaScriptque animam secções ou elementos de uma página. JavaScript foi criado para ser uma linguagem parainteragir com o utilizador, do lado do cliente. jQuery é uma biblioteca, escrita em JavaScript, que foicriada para tornar a manipulação de elementos do documento, a criação de animações e gestão deeventos mais fácil. É a biblioteca mais usada, e permite a criação de plugins tornando ainda mais fácil

21

a programação de eventos em JavaScript. Por exemplo, para o desenho de formas no LivingSlides foiusada uma biblioteca jQuery que permite criar formas SVG através de uma chamada de uma função.

O LivingSlides foi testado nos browsers Google Chrome, Mozilla Firefox e Apple Safari. O LivingSlidesnão funciona em Internet Explorer.

3.2.2 Arquitectura

Figure 3.6: Arquitectura do LivingSlides

É apresentada na figura 3.6 a arquitectura do LivingSlides. Este é composto por dois componentes: apersistência (back-end) e a ferramenta de autoria (front-end). Estes dois componentes comunicam en-tre si através de uma ligação HTTP (HyperText Transform Protocol). Existem dois tipos de pedidos GETe um tipo de pedido POST ao servidor. Os pedidos GET prendem-se com os pedidos de informação,o primeiro pede ao servidor uma lista de apresentações guardadas neste e o segundo pede o códigoHTML de uma apresentação em específico. O pedido POST acontece quando uma apresentação égravada.

Todas as apresentações são guardadas no FileSystem. Tal acontece porque é mais fácil, do ponto devista do utilizador, ter as suas apresentações guardadas no FileSystem: caso o utilizador pretenda mu-dar de computador, apenas necessita de levar os ficheiros necessários, como acontece no Powerpointou no Keynote, é algo a que os utilizadores estão habituados e cancela o uso de import ou exports.Esta abordagem foi a escolhida em deterimento de uma base de dados, pois isso implicaria ter contasde utilizador e adicionalmente, uma camada (por mais pequena que fosse) de segurança para essascontas e para a base de dados.

22

A ferramenta de autoria também comunica com o FileSystem, pois é possível fazer upload de imagensque estejam alojadas localmente no computador do utilizador. Para além disso, a ferramenta tambémcomunica com a web, uma vez que é possível adicionar links e imagens que estejam alojadas online.

3.2.3 Aspect Ratio e o Aspecto dos Slides

Foi necessário garantir que os slides mantinham o mesmo aspecto em todos as resoluções de moni-tores e para isso procedeu-se ao cálculo do aspect ratio do monitor.

Quando o LivingSlides é iniciado, no diálogo de escolha de tema, o utilizador pode escolher qual oaspect ratio que ele pretende para a sua apresentação. Existem três escolhas: 4:3, 16:9 (o aspect ratiomais comum) e 16:10 (já para monitores HDPI).

O cálculo do aspect ratio é muito simples, apenas é necessário dividir a altura do ecrã pela largurado ecrã. Usando as funções nativas do Javascript screen.height e screen.width é possível obter aresolução física do monitor.

É necessário manter este aspecto quando a janela do browser é redimensionada. Como o conteúdodos slides são SVG, apenas é necessário aplicar um factor de escala. Esse factor é calculado com basena diferença que existe entre o tamanho original da janela e o novo tamanho de janela, com atenção aolado que foi redimensionado: altura ou largura.

Para gerar os thumbnails foi usado o mesmo método de aplicar um factor de escala. No caso dosthumbnails estes têm 15% da altura dos slides originais, pois observou-se que era este o factor quepermitia ter uma boa legibilidade e manter o thumbnail dentro dos limites da barra lateral. O mesmo sepassou com os preview dos slides na janela das notas de orador.

3.2.4 Ferramenta de Autoria

Figure 3.7: Ferramenta de Autoria - escolha de um slide

23

O LivingSlides tem um layout simples. Para apoiar o desenho do mesmo recorreu-se ao uso do TwitterBootstrap. Esta framework é bastante usada para se construir layouts de forma rápida, mantendo umaspecto apelativo. A vantagem do uso desta framework está precisamente na rapidez com que se criaum layout à nossa medida usando os elementos disponíveis do Bootstrap. Outra vantagem tem que vercom a consistência entre os vários elementos, por exemplo no aspecto das caixas de input de texto edos botões.

Um dos elementos oferecidos pelo Bootstrap é a barra de navegação superior. Esta barra de navegaçãoestá sempre fixa ao topo da página, e caso fosse necessário puxar a página para baixo (para mostrarmais conteúdo) essa barra manteria-se no topo da mesma. A barra foi então adaptada à metáfora debarra de ferramentas, como é possível de se observar no Powerpoint e no Keynote. Nesta barra éonde se pode encontrar as ferramentas de edição do LivingSlides: adicionar slide, adicionar notas deorador, mudar o aspecto da fonte de uma caixa de texto, mudar o aspecto da caixa de texto, adicionaruma imagem ou link, escolha do desenho de uma forma SVG, iniciar a apresentação e guardar aapresentação.

Do lado direito da janela, existe também uma barra de navegação, embora esta seja diferente da ante-riormente descrita uma vez que esta barra de navegação serve apenas para mostrar os thumbnails dosslides da apresentação e para o utilizador, ao clicar numa das thumbnails poder ir para esse slide.

No centro da janela, existe a secção de edição e é neste espaço que são mostrados os slides daapresentação. Quando é clicado num thumbnail da barra lateral, é o slide correspondente a essethumbnail.

O LivingSlides tem ainda cinco sub-secções: a secção de escolha de tema, a secção de interactividade,a secção de carregamento de imagens, a secção de mudança de cor de fundo dos slides e a secção degravação de apresentações. Todas estas secções são também <div> com uma particularidade: todaselas são modals. Modals são secções da aplicação que estão “escondidas” e só quando o utilizadornecessita é que estas são mostradas ao utilizador. Por exemplo, o modal de escolha de temas é a caixade diálogo que é mostrada ao utilizador quando este abre a aplicação, e só é mostrada novamentequando ele pretende mudar o tema da apresentação.

3.2.5 Os Slides

Uma secção de um documento HTML é delimitada pela etiqueta <div> e como um slide é uma secçãode uma apresentação, foi usada essa metáfora também para o LivingSlides. Existe também a etiqueta<article> que também define uma secção do documento, mas esta etiqueta está mais direccionadapara, como o nome indica, artigos como por exemplo entradas de blogs.

Um <div> é, na realidade, um bloco do documento e é o que mais se assemelha a um slide numaapresentação. Foi essa a razão da escolha da etiqueta para delimitar um slide.

Existem quatro tipos de slides no LivingSlides: slide com título e subtítulo (este tipo de slide é o slideque é sempre criado em primeiro lugar, após o utilizador ter escolhido o tema), slide com título e umacoluna de conteúdo, slide com título e duas colunas de conteúdo e slide em branco onde o utilizadorpode desenhar.

Numa primeira fase do LivingSlides, um slide era composto por outros <div> internos e estes repre-

24

sentavam as caixas de texto do mesmo. Por exemplo, o slide com um título e um subtítulo tinha um<div> com características de CSS de um título e um <div> com características de um subtítulo. A estes<div> foram então associadas propriedades de jQuery que permitiram tornar estes <div> realmenteflexíveis: a propriedade de draggable e resizable. A propriedade draggable conferiu às caixas de textoa possibilidade de estas serem recolocadas pelo utilizador em qualquer parte do slide, enquanto que apropriedade resizable permite que o utilizador redimensione a caixa de texto. Com estas propriedadefoi possível introduzir um comportamento semelhante àquele de outras ferramentas de autoria, como oPowerpoint.

<div ><div > titulo da apresentacao </div ><div > subtitulo da apresentacao </div ></div >

Esta foi a organização interna de um slide até a introdução de desenhos nos mesmos. Até aí, quandoera necessário desenhar uma forma era trazido para a frente dos outros elementos do slide um <svg>

em que era então possível definir as formas. Esta implementação trazia o problema de que cada formacriava então um novo <svg> e quando isso acontecia perdia-se os eventos de clique nos elementos detexto do slide. Ou seja, após a criação de uma forma, já não era possível clicar nos <div> e desta formaeram perdidas as características de editar, arrastar e redimensionar esses <div>.

Para resolver este problema, foi necessário converter todos os elementos do slide em elementos de<svg>. Embora os elementos textuais continuassem a ser <div>, foi introduzido um novo elemento:<foreignObject>. Esta nova etiqueta permite que haja elementos HTML dentro de uma etiqueta <svg>

e que o seu comportamento se mantenha igual como ao que estes elementos teriam caso estivessemdentro de um <div> apenas. A estrutura interna do slide passou então a ser semelhante a esta:

<svg ><foreignObject >

<div > titulo da apresentacao </div ><div > subtitulo da apresentacao </div >

</ foreignObject ></svg >

Desta forma, foi possível ter novamente a possibilidade de todos os elementos textuais serem editáveis,reposicionados e redimensionados. A razão pela qual os elementos não foram transformados em textodo tipo <svg> prende-se com o facto de que, mais tarde, este tipo de etiqueta não seria suportado pelabiblioteca que implementa a Interactividade. Os slides teriam então a seguinte estrutura:

<svg ><text > titulo da apresentacao< / text ><text > subtitulo da apresentacao< / text >

</svg >

Este tipo de implementação traria muitas vantagens para o LivingSlides: todos os slides seriam ver-dadeiramente objectos SVG, todos os objectos teriam exactamente o mesmo comportamento no quediz respeito ao redimensionamento e ao reposicionamento, a ordem de desenho seria mantida e a ex-portação de slides seria possível (não é possível porque foreignObjects não são, de facto, objectosSVG e portanto são ignorados por bibliotecas que façam a transformação de SVG para PNG). A únicae grande desvantagem desta implementação é o facto de que o Tangle não suporta texto em SVG, epor isso, teria que se implementar de raíz uma biblioteca que suportasse texto SVG.

25

3.2.6 Desenho das Formas

Para além do texto, as formas são essenciais para uma apresentação e neste caso em particular, para aInteractividade. O utilizador tem à disposição formas básicas para desenhar, como a linha, o rectângulo,o círculo e a elipse.Na figura 3.8 é mostrado um rectângulo desenhado, com as opções de SVG na barrade ferramentas disponíveis.

Figure 3.8: Ferramenta de Autoria - Rectângulo SVG desenhado e seleccionado

Como referido anteriormente, todas as formas desenhadas são do tipo SVG e por isso foi necessáriorecorrer a uma biblioteca que fosse responsável por esse desenho enquanto que o utilizador apenas sepreocuparia em desenhar a forma no slide.

Foi usada então a biblioteca Raphael.js9 pois é uma biblioteca bastante completa em termos de formasprimitivas e em extensões. Uma extensão usada foi a Free Transform10 que permite adicionar às formasa capacidade de estas serem redimensionadas e reposicionadas, tal como acontece com as caixas detexto.

O desenho de formas é possível graças a um elemento SVG que tem associado eventos do rato. Assim,quando o utilizador selecciona uma forma e faz um clique seguido de arrasto no slide, esse elementosabe que se trata de uma acção de desenho. É mostrado ao utilizador a borda da forma para que estesaiba qual a forma e qual o tamanho da mesma.

Outra forma também possível de se implementar o desenho de formas seria escolher uma forma e estaaparecer logo no slide, como se tratasse de um carimbo, e depois dar o utilizador a possibilidade deredimensionar e reposicionar essa mesma forma. Embora este comportamento fosse mais simples deimplementar, considerou-se que o “clique e arrasto” era algo mais natural e reconhecível pelo utilizadoruma vez que este comportamento está presente na maioria de programas de desenho e também emferramentas como o Powerpoint.

9http://raphaeljs.com10http://alias.io/raphael/free_transform/

26

3.2.7 Upload de imagens

Para além de formas, o utilizador pode inserir imagens seja para ilustrar uma ideia ou para lhe daralguma interactividade mais tarde.

Para isso, o utilizador tem um diálogo de upload à sua disposição, como se mostra na figura 3.4, e esteupload usa uma das novidades do HTML5: o drag-and-drop. Ou seja, quando o utilizador pretendecarregar uma imagem, este pode simplesmente arrastar a imagem para dentro da área do diálogo deupload. Caso o utilizador deseje também pode procurar no sistema de ficheiros qual a imagem desejadaou inserir o link de uma imagem online.

Caso o utilizador tenha arrastado uma imagem ou escolhido uma imagem ao procurar no sistema deficheiro esta imagem é convertida para uma string base64. Por exemplo, uma imagem de um pequenoponto vermelho é codificada desta forma:

<img s r c = data:image png;base64 ,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== " alt="Red dot" />

Caso o utilizador insira um link para uma imagem, é adicionado ao slide uma etiqueta <img>, queidentifica uma imagem num documento HTML, com esse link. Não há qualquer conversão quando outilizador insere uma imagem online porque, ao contrário das imagens locais, quando a apresentaçãoé mudada de local ainda há acesso a esta imagem online, pois ela está alojada na web.

No caso de o utilizador ter inserido uma imagem local é então convertida para base64. Usando oesquema data URI é possível adicionar dados in-line como se estes fossem recursos externos. Estatécnica permite que não seja necessário fazer o upload de uma imagem local para um servidor paraque esta seja usada na apresentação online. A imagem passa a fazer parte do documento. Caso aimagem estivesse no servidor, codificada usando esta técnica, a imagem seria tratada como se fosseparte do documento, reduzindo assim o número de pedidos HTTP.

A escolha desta implementação deve-se ao facto de que a imagem está sempre disponível, não de-pendendo de nenhum servidor, o que significa que está disponível offline. Na hora de guardar a ap-resentação, é apenas necessário enviar um único pedido pois a imagem vai incluída no código HTML.O mesmo para quando é necessário recuperar uma apresentação: só é feito um único pedido e é aocódigo HTML.

Para converter a imagem carregada é necessário recorrer a outra novidade do HTML5: o canvas. Esteelemento permite o desenho de formas 2D e de imagens bitmap dinamicamente e através do uso descripts. Portanto, a imagem carregada é desenhada num canvas e depois é obtida a string em base64que representa a imagem chamando apenas uma função.

Todas as imagens carregadas são transformadas em PNG (Portable Network Graphics).

3.2.8 Ligação entre Elementos

Ao longo da edição dos slides o utilizador pode ligar elementos para implementar a interactividade. Paraisso tem à sua disposição pequenos círculos de cor verde que se podem clicar e depois arrastar atéao círculo verde de um outro elemento. Desta forma, dois elementos ficam ligados e metaforicamente

27

significa que o elemento de destino depende do elemento de origem.

Figure 3.9: Ferramenta de Autoria - Criação de uma ligação entre elementos

Para implementar este comportamento foi utilizada uma biblioteca de desenho de diagramas: jsPlumb11.Esta biblioteca oferece vários tipos de desenho de diagramas, entre eles o flowchart que foi o padrãoescolhido para o LivingSlides. É uma biblioteca com elementos altamente personalizáveis e foi essa arazão da escolha da biblioteca, pois foi possível adaptar o conceito de diagrama de fluxo ao conceitode elementos ligados. De uma forma abstracta, a ligação entre os elementos representa um fluxo pois,como já como referido, dá a ilusão de passagem de informação do elemento de origem para o elementode destino.

Como esta biblioteca desenha formas SVG dentro de <div> criou alguns problemas com o <svg> dosslides e com as formas desenhadas e com a área de desenho das formas, nomeadamente com aposição de desenho dos círculos. A solução encontrada foi ter um <div> separado para desenhoexclusivo do jsPlumb. Assim já foi possível ao jsPlumb desenhar os círculos sem que houvesse conflitoscom as formas SVG que poderiam já estar desenhadas.

Quando é feita a ligação entre dois elementos, ou quando o utilizador clica na seta de ligação, apareceentão o diálogo de interactividade. Caso o utilizador deseje apagar a ligação entre dois elementos podefazê-lo, através do botão Delect Connection presente no diálogo de interactividade.

3.2.9 Tangle

Para ser possível o LivingSlides ter Interactividade foi necessário recorrer à biblioteca, mencionada nasecção Trabalho Relacionado, Tangle.

O Tangle define dois tipos de variáveis: independente e dependente. A variável independente é quemdita as mudanças do texto, é quem recebe a indicação sobre os limites inferior e superior e qual avariação da mesma. A variável dependente apenas recebe qual a sua variação, mas sempre com onome da variável independente na sua equação de update.

11http://www.jsplumb.org

28

O Tangle permite que haja mais do que uma variável independente e mais do que uma variável depen-dente no scope da função de update. No caso do LivingSlides há uma relação linear entre a variávelindependente e a dependente, ou seja, uma variável independente tem uma, e só uma, variável de-pendente e vice-versa. Isto deve-se ao facto de se criar uma relação de ligação entre apenas doiselementos.

O comportamento que é fornecido pela biblioteca é bastante simples: o utilizador para definir umavariável independente necessita de colocar o número desejado dentro de uma tag <span>, associar umaclasse e definir três atributos. Ao associar a classe TKAdjustableNumber à variável está a “comunicar”à biblioteca que esta é a variável que é independente e que a sua variação é do tipo numérico, deseguida necessita de definir os três atributos necessários. O primeiro atributo é o data-var; esteatributo permite dar um nome à variável e é este nome que irá ser utilizado no script para identificaçãoda mesma, o segundo e terceiro atributo estão relacionados com os limites da variável; data-min edata-max definem qual o valor mínimo e máximo que a variável pode tomar, respectivamente. Paradefinir variáveis independentes o utilizador necessita de realizar um comportamento semelhante aoanterior, mas não associando nenhuma classe a esta. Para as variáveis dependentes também não énecessário definir qual é o data-min e o data-max uma vez que é a variável independente que defineos limites. Assim sendo, um exemplo de código HTML de um documento activo é:

When you eat <span data-var= " cookies " class= " TKAdjustableNumber "> cookies< /span >,you consume <span data-var= " calories "> calories< /span >

Uma vez definido o código HTML é necessário passar para a escrita do código em JavaScript. Essepequeno pedaço de código será utilizado para especificar como as variáveis vão ser calculadas. Énecessário definir uma função de inicialização - é nesta função que se indica qual o valor inicial davariável independente - e uma função de actualização - é nesta função que se escreve as equaçõesde variação das diferentes variáveis definidas. Assim, para o pedaço de código HTML mostrado acima,tem-se o código JavaScript:

var tangle = new Tangle (document , {initialize: function () { this.cookies = 3;} ,update: function () { this.calories = this.calories * 50}

});

É de notar que não foi atribuída uma função de actualização à variável independente, uma vez que oTangle sabe que quando não foi especificada nenhuma função a variação da função é linear.

Este é o funcionamento básico do Tangle, que apenas tem suporte para valores textuais e/ou numéricos.Para poder suportar todos os elementos do LivingSlides, foi necessário estender a biblioteca, como seráexplicado na secção seguinte.

3.2.10 Interactividade

Como a biblioteca Tangle suporta valores numéricos e/ou textuais, foi necessário estender este compor-tamento para suportar também imagens e formas SVG. Para além deste suporte adicional, foi tambémintroduzida uma classe para poder suportar variações discretas dos valores das variáveis.

29

Figure 3.10: Ferramenta de Autoria - Diálogo de parametrização da interactividade

No LivingSlides, considerou-se que uma variável independente seria sempre um valor textual ou numérico,ou seja, nunca seria uma forma SVG ou uma imagem. Para além das variações lineares, exponenciaise logarítmicas considerou-se também necessário existir uma classe que permitisse valores discretos detodas as variáveis.

A extensão ao Tangle começou por dividir o tipo de variação disponível; embora o Tangle suportequalquer tipo de variação (linear, exponencial ou logarítmica), no LivingSlides estas variações estãodivididas para ajudar o utilizador a perceber quais as variações possíveis que existem e também parao ajudar a construir o código dessa variação. Em todas as variações o utilizador tem três campos parainserir o valor máximo, mínimo e o inicial (para a variável independente), excepto na variação discretaque veremos mais à frente. A variação linear tem uma equação do tipo y = mx + b, em que m é o valordo declive e b a intersecção em y; no diálogo de interactividade, o utilizador tem duas caixas de inputpara preencher com o valor m e com o valor b. A variação exponencial tem uma equação do tipo bx; outilizador tem uma caixa de input para preencher qual o valor de base b, sendo o valor de exponente ovalor da variável independente. A variação logarítmica tem uma equação do tipo logb(x) em que b é abase e x é o valor da variável independente. Para poder suportar este tipo de variação em JavaScript,foi necessário fazer um override à função original do JavaScript Math.log(). Esta função apenas aceitabase 2, 10 ou e; a função nova aceita qualquer valor de base.

Para além destas variações, o utilizador pode ainda escrever a sua própria equação. Para isso, tem queescolher a variação como sendo formula. Encontrará então uma caixa de input em que pode inserir aformula que quiser.

Para suportar a variação discreta dos valores, foi acrescentada uma nova classe: TKDiscrete. Comesta classe, que estende uma outra classe do Tangle a TKToggle (classe que alterna apenas entre doisvalores: 0 e 1), esta nova classe aceita uma lista de valores (sejam eles numéricos ou textuais) quesão guardados num array e quando a string é clicada no documento, o array vai sendo percorrido emostrando qual o valor desse índice. O utilizador apenas necessita de dizer quais o valores discretosque a variável pode tomar. No entanto, quando a variável independente é definida como tendo umavariação discreta, todas as variáveis dependentes obrigatoriamente têm que ter uma variação discreta.

30

Para serem definidas estas variáveis é necessário que o utilizador defina qual a secção de texto que iráser dinâmica. Para isso, no diálogo de interactividade, é mostrado o texto do elemento independentedo lado esquerdo e na direita, o texto do elemento dependente. Por baixo dessas caixas com o textoestão dois botões que têm a label Set Region; este botão, ao ser clicado cria uma etiqueta <span> àvolta do texto seleccionado. Esta etiqueta serve apenas para delimitar pequenas secções de texto eatribuir características que não são necessárias ao resto do texto. Nesta fase, é dado a essa etiquetaum tipo e o nome da variável (que é sempre um nome genérico, consoante o scope da função tangle),para mais tarde poder ser atribuído as propriedades de limites superior e inferior.

No painel inferior, está a secção dedicada a cada uma das variáveis. Na secção da variável indepen-dente apenas se pode definir qual a variação da mesma e quais o valores de data-max, data-min e ovalor inicial. Considerou-se que a variável independente apenas varia o seu valor textual.

Para a variável dependente, caso esta seja texto considerou-se que esta, para além da variação dosvalores, pode ter variações no aspecto do texto da mesma. Ou seja, a variável dependente tambémpode ter variações no tipo de letra, no tamanho da letra, na cor da fonte, mudar de posição no slideconsoante o valor da variável independente e também o tamanho da caixa de texto. Estas últimascaracterísticas fazem parte da extensão que foi feita ao Tangle, que será descrita mais à frente.

Quando o utilizador carrega no botão OK é associada à etiqueta <span>, criada aquando do clique nobotão Set Region, os valores de data-max e data-min, no caso da variável independente. No caso davariável dependente, não há nenhuma associação feita à sua etiqueta <span>. Depois desta associ-ação, é substituído no texto original o valor inicial das variáveis pelas etiquetas <span> das variáveisindependente e dependente.

Caso a variável dependente seja uma imagem, ou uma forma SVG, o botão Set Region já não estádisponível, uma vez que já não existe texto para ser seleccionado e transformado. Também não sepode aplicar a etiqueta <span> a formas SVG ou a imagens, em vez disso, é utilizado o id (nome queidentifica um elemento de um documento HTML e que com esse nome podem executar-se operaçõessobre esse elemento) da forma ou imagem para mais tarde serem aplicadas as transformações a esteselementos.

Considerou-se que as propriedades do texto que teriam interesse em serem variáveis seriam a cor dafonte, o tamanho da fonte, o tipo da fonte e a posição da caixa de texto no slide.

Como já referido nesta secção, para suportar a interactividade das formas SVG e das imagens foiapenas necessário estender o código da função de actualização. Todas as alterações feitas às formasSVG e à imagens são realizadas dentro dessa função, uma vez que essa função tem acesso ao valorda variável independente.

No caso das imagens, o utilizador pode mudar o tamanho, a posição e qual a imagem a ser mostradaao utilizador. Exceptuando a opção de existirem várias imagens, a variação do tamanho e da posiçãopode ser ou linear ou discreta. Considerando que o utilizador necessita que uma imagem necessitede mudar de tamanho consoante um valor numérico. Para isso, ele liga os dois elementos, define quala secção do texto que irá ser a variável independente e depois define que a variação do tamanho daimagem é Linear. Insere qual o valor mínimo e qual o valor máximo que a imagem pode ter, sendo osvalores medianos interpolados. Quando o utilizador clica no botão OK, irá ser gerada a função Tangleque tem este aspecto:

var tangle1 = new Tangle ( document.getElementById ('slideDiv1 '), {

31

initialize: function () {this.Var0 = 1; /* valor inserido pelo utilizador */

},update: function () {

this.Var0 = ( this.Var0 * 1) + 1; /* e q u a o definida pelo utilizador */var imgSizeVal = this.Var0 / 15;var minWidth = 200; /* valor inserido pelo utilizador */var maxWidth = 500; /* valor inserido pelo utilizador */var widthResult = interp (minWidth , maxWidth , imgSizeVal );$('# imageDiv0 ').attr('width ', widthResult );var minHeight = 200; /* valor inserido pelo utilizador */var maxHeight = 500; /* valor inserido pelo utilizador */var heightResult = interp (minHeight , maxHeight , imgSizeVal );$('# imageDiv0 ').attr('height ', heightResult );

}});

Considerou-se que as propriedades mais importantes das imagens seriam o seu tamanho e a possibil-idade de ter mais do que uma imagem consoante valores.

A mudança de propriedades do SVG tem o mesmo funcionamento. Se o utilizador pretender mu-dar a cor de uma forma SVG em consonância com a variável independente, tem também à sua dis-posição duas opções: Linear e Discrete. Como já referido anteriormente, a função Discrete apenasestá disponível se a variável independente também tiver uma variação Discrete. Neste caso, o uti-lizador introduz qual a cor que a forma SVG terá para cada um dos valores da variável. No caso daopção Linear, o utilizador tem que dizer qual é a cor “mínima” e qual a cor “máxima” que a forma podetomar. Para a transição de uma cor para a outra ser suave é necessário interpolar os valores que estãoentre os limites inferior e superior, e é aqui que entra a variável independente - é com o valor máximoque a variável pode ter e com o valor actual que é calculada a interpolação. O código gerado tem esteaspecto:

var tangle1 = new Tangle ( document.getElementById ('slideDiv1 '), {initialize: function () {

this.Var0 = 5; /* valor inserido pelo utilizador */},update: function () {

this.Var0 = ( this.Var0 * 1) + 1; /* e q u a o definida pelo utilizador */var propVal = this.Var0 / 15;var startFill = rgb2hsv (255 , 248 , 79) , /* valor inserido pelo utilizador */

endFill = rgb2hsv (255 , 104 , 159); /* valor inserido pelo utilizador */var hFill = interp ( startFill.h , endFill.h , propVal );var sFill = interp ( startFill.s , endFill.s , propVal );var vFill = interp ( startFill.v , endFill.v , propVal );var fillResult = hsvToRgb (hFill , sFill , vFill );$('# svgShape0 ').attr('fill ', 'rgb(' + fillResult [0] + ',' + fillResult [1] + ',' +

fillResult [2] + ')');var startStroke = rgb2hsv (255 , 248 , 79) , /* valor inserido pelo utilizador */

endStroke = rgb2hsv (255 , 104 , 159); /* valor inserido pelo utilizador */var hStroke = interp ( startStroke.h , endStroke.h , propVal );var sStroke = interp ( startStroke.s , endStroke.s , propVal );var vStroke = interp ( startStroke.v , endStroke.v , propVal );var strokeResult = hsvToRgb (hStroke , sStroke , vStroke );$('# svgShape0 ').attr('stroke ', 'rgb(' + strokeResult [0] + ',' + strokeResult [1] +

',' + strokeResult [2] + ')');var start = rgb2hsv (0, 0, 0) ,

end = rgb2hsv (0, 0, 0) ,

32

val = this.Var0 / 15;var h = interp (start.h , end.h , val);var s = interp (start.s , end.s , val);var v = interp (start.v , end.v , val);var result = hsvToRgb (h, s, v);$('. dependent ').css ({

color: 'rgb(' + result [0] + ',' + result [1] + ',' + result [2] + ')'});var svgSizeVal = this.Var0 / 15;

}});

Todos as outras características de formas SVG podem ser mudadas, e o código gerado é semelhanteao anterior.

Considerou-se que seria interessante poder mudar as propriedades mais comuns do SVG, como a cordo fill e do stroke, o tamanho da forma e a posição da mesma no slide. Um exemplo de uma propriedadeque não foi implementada, mas que seria um desafio, seria a possibilidade de mudar a forma dessaforma SVG.

Pode-se observar, pelos exertos de código anteriores, que a extensão feita ao Tangle ocorre dentroda própria função do Tangle e que não há quaisquer variáveis atribuídas a formas SVG ou a imagens.Como já dito, o Tangle não suporta ainda imagens e SVG, por isso, seria inútil atribuir uma variável(através do atributo data-var, como no texto) pois não seria possível alterar nada tendo apenas essavariável. Como já referido anteriormente, é usado o id da forma ou da imagem para se poder alteraras suas propriedades via CSS. Este id é obtido quando é feita a ligação entre os elementos, tomandopartido do facto de que o jsPlumb necessita de saber qual o id dos elementos da ligação. É de notarque as alterações ao texto suportadas pelo Tangle são realizadas matematicamente, uma vez que asalterações são efectuadas através de cálculos; no entanto, caso sejam necessárias haver alterações àcor ou fonte do texto, também é necessário saber qual o id do <span> inserido quando foi definido quala secção de texto que é interactiva.

As funções de CSS estão dentro da função de update do Tangle pela simples razão de que só nessescope se tem acesso ao nome da variável independente. A desvantagem desta solução advém dofacto de que quantas mais alterações o utilizador deseje para uma variável, seja ela textual, forma ouimagem, maior será o código a injectar e de grande dificuldade de leitura e de depuramento.

Para este código e estas alterações passarem a dar a interactividade aos slides, é necessário injectareste código no documento HTML da apresentação. Quando o utilizador carrega no botão de OK nodiálogo de interactividade, em primeiro lugar é verificado se nenhum campo obrigatório para o bom fun-cionamento da interactividade ficou por preencher. Caso não haja nenhum erro, é construída uma stringque contém as informações das variações de cada uma das variáveis, independentes ou dependentes,textuais ou gráficas. De seguida, esta string é inserida numa etiqueta <script>. As etiquetas <script>

delimitam código Javascript que seja inserido num documento HTML. É atribuído um id a esta novaetiqueta para que se possa referir este elemento mais tarde. Usando uma função de manipulação dedocumentos HTML nativa do Javascript, é inserida esta nova etiqueta no documento, dentro do <div>

do slide. Esta implementação tem a vantagem de que quando o utilizador guarda a apresentação, asfunções Tangle da mesma ficam junto aos próprios slides, não sendo necessário haver mais comuni-cações com o servidor nem mais ficheiros. Fica então pronta a interactividade entre dois elementos.Quaisquer elementos que venham a ser ligados, terão o mesmo comportamento, não entrando em con-

33

flito com a variável Tangle anterior uma vez que por cada função Tangle criada é dado um novo númerode identificação e é criado um scope diferente, com o <div> onde estão os elementos e variáveis deidentificação novas .

Como referido na secção “Ligação Entre Elementos”, caso seja necessário apagar a ligação entre doiselementos, há a opção de “Delete Connection”. Esta opção apaga a seta que existe entre os círculosverdes, apaga o script associado a esta ligação e remove todos os elementos que o Tangle confere aelementos interactivos. Este processo é irreversível: se o utilizador quiser ter interactividade com essesdois elementos, tem que criar a ligação e preencher a informação para o script.

3.2.11 Modo Apresentação

Quando a edição dos slides da apresentação está completa, e o utilizador deseja iniciar uma apresen-tação ele passa para o modo apresentação, como é mostrado na figura 3.11.

Figure 3.11: Ferramenta de Autoria - Modo apresentação

O modo apresentação carateriza-se pelas janelas novas que são apresentadas ao utilizador. Uma delasé a janela do browser onde estão os slides e a outra é a pequena janela que é lançada que contém asnotas de orador, preview do slide actual e do próximo e um cronómetro.

Quando é accionado o modo apresentação, as secções de navegação e de sidebar desaparecemdando lugar à apresentação, que passa agora a ocupar inteiramente a janela do browser. O utilizadorpassa a ter à sua disposição novas formas de navegar pelos slides: através das teclas de setas doteclado ou através das setas presentes nas bordas da janela do browser.

Na janela de notas de orador, mostrada na figura 3.15 o utilizador pode consultar, se tiver adicionadopreviamente, as notas que fez sobre um determinado slide. Do seu lado esquerdo, o utilizador tem àsua disposição uma thumbnail do slide actual e outra do próximo slide. Para além disso, existe umcronómetro na parte inferior do lado esquerdo que informa o utilizador do tempo decorrido desde queeste iniciou a apresentação, este cronómetro pode ser parado ou recomeçado do zero. Se o utilizadorpretender, pode mudar de slide na janela de orador; quando o utilizador muda de slide na janela principala janela de orador é refrescada com as novas notas e preview de slides.

34

Figure 3.12: Ferramenta de Autoria - Notas de Orador

Esta comunicação é feita através da API que o JavaScript dispõe para qualquer janela de browserpoder lançar uma nova e manipular essa janela. Como a nova janela sabe sempre quem foi o seuponto originário, esta tem acesso às funções da janela original.

Estas duas janelas complementam-se e o objectivo das mesmas é serem mostradas em monitoresdiferentes enquanto o utilizador faz a sua apresentação.

3.2.12 Persistência

Como foi referido na secção de arquitectura, o LivingSlides é apoiado por um pequeno servido escritoem Java. Este servidor serve apenas para guardar as apresentações do utilizador, caso este deseje.

O servidor tem na sua interface três métodos: um método para guardar a apresentação (correspondentea um POST), um método para devolver a lista de apresentações guardadas e um método para devolvero código HTML da apresentação (correspondendo estes dois últimos a GET).

Figure 3.13: Ferramenta de Autoria - Diálogo para guardar a apresentação

35

Quando o utilizador pretende guardar a apresentação, é lhe mostrado um diálogo para que ele intro-duza o nome com o qual ele pretende gravar a apresentação. Quando o utilizador carrega no botão“Ok” é enviado para o servidor uma string que contém o nome da apresentação e o código HTML daapresentação. O nome está separado do código através de uma combinação de caracteres que sejaaltamente improvável de aparecer no código da apresentação. Por exemplo, a string enviada pode tereste aspecto:

ApresentacaoTese*-*<div>....</div>

Quando esta string chega ao servidor, é então separada usando os caracteres especiais como regra.A primeira parte da string, o nome da apresentação, servirá para dar nome ao ficheiro que conterá asegunda parte da string, ou seja, o código HTML da apresentação.

Quando o utilizador retorna ao LivingSlides, caso ele tenha guardado apresentações posteriormente,é lhe mostrado uma lista dos nomes de apresentações que foram guardadas por ele. Caso ele desejevoltar a editar, ou começar a apresentação, o utilizador escolhe a apresentação e ao carregar no botão“Ok”, é feito um pedido ao servidor para devolver o código HTML, código esse que depois é injectadona secção de edição do LivingSlides.

3.2.13 Walkthrough

Considere-se que um utilizador necessita de realizar uma apresentação sobre alterações climáticas.Para isso, ele inicia o LivingSlides e escolhe um dos temas que tem à sua disposição. Nesta altura,ele pode mudar o aspect ratio dos slides, mas caso ele não pretenda fazer tal o LivingSlides já temseleccionado a opção correspondente ao aspect ratio do monitor do utilizador.

Depois de escolhido o tema, o utilizador tem então à sua frente um slide com uma caixa de texto parao título e para o subtítulo. Neste caso, o utilizador clica na primeira caixa e texto e escreve “AlteraçõesClimáticas”, de seguida clica na segunda caixa e escreve “Causas e consequências”.

Figure 3.14: Ferramenta de Autoria - Mudando a cor de uma forma SVG

Ele pretende agora inserir um slide em que ele mostra o declínio da floresta mundial. Para isso, elecria um slide com título e uma coluna de conteúdo. No título ele introduz “A desflorestação mundial” e

36

no conteúdo, ele insere a frase “Estima-se que haja 40 milhões km de floresta no planeta, mas todosos anos são perdidos 73 mil km de floresta por ano.”. Ele pretende mostrar a diminuição da florestagraficamente, pois ele acredita que isso trará um maior impacto. Para isso, ele desenha um rectângulono lado direito da apresentação e muda a cor do rectângulo para verde.

O utilizador agora clica no círculo verde do conteúdo e arrasta esse círculo até ao círculo verde dorectângulo. Criou assim interactividade entre estes dois elementos, em que o rectângulo dependerá doconteúdo. O utilizador tem agora à sua disposição o diálogo de interactividade. Ele escolhe o número40 e clica no botão Set Region. De seguida, ele escolhe a variação da variável independente comosendo Linear, e insere os valores para os valores máximo (40), mínimo (1), inicial (40), m (1) e b (-7.3).

Ele seleciona agora a tab do rectângulo e depois na opção Size escolhe a variação Linear e insereo valor 1 para o valor mínimo de largura (Mininum Width) e comprimento (Minium Height) e 40 parao valor máximo de largura (Maximum Width) e comprimento (Maximum Height). Para dar ainda maisimpacto, o utilizador, na opção Colour escolhe como cor “mínima” um verde claro e como cor “máxima”verde escuro. Por fim, carrega no OK e está criada a relação de interactividade entre o texto e umaforma SVG.

Figure 3.15: Ferramenta de Autoria - Resultado das parametrizações feitas pelo utilizador

O utilizador pretende agora criar um slide em que quer ter interatividade numa única frase. Ele quemostrar que a temperatura está a aumentar a cada ano que passa, e para isso ele cria um slide comuma coluna de texto. Escreve a seguinte frase na caixa de texto: “Em 2010, a temperatura média é de16 C.” Como o utilizador quer interatividade apenas nesta frase, este tem a opção e clicar no círculoverde e arrastar para cima da frase até esta ter uma sombra azul. Ao largar, volta a parecer o diálogode interactividade, mas desta vez a frase aparece nas duas janelas; isto significa que tanto a variávelindependente como a dependente estão ambas no mesmo elemento.

O utilizador selecciona agora o número 2010 e carrega no botão Set Region. Define a variação como

37

sendo Discrete e insere três valores: 2010, 2050 e 2100. Selecciona agora o valor 16 e carrega nobotão Set Region. Como a variação da variável independente foi posta como Discrete, a variação davariável independente também terá que ser Discrete. Assim sendo, o utilizador insere os valores 16,18.5 e 20. Carregando no botão “OK” o utilizador cria mais uma relação de interactividade, mas destavez entre dois valores do mesmo elemento.

38

4 Avaliação do LivingSlides

Esta secção é dedicada à descrição dos testes efectuados com utilizadores e a avaliação dos resulta-dos obtidos. Em primeiro lugar são descritos qual o protocolo tomado e qual o grupo escolhido pararealizar os testes descrevendo os participantes, passando de seguida para a avaliação e comentáriodos resultados.

4.1 Protocolo Experimental

Para a realização de testes ao LivingSlides, considerou-se que potênciais utilizadores seriam aquelesque fazem apresentações regularmente, fossem eles alunos ou docentes. Foi pedido a 15 potênciaisutilizadores, com idades compreendidas entre os 20 e os 35 anos, que testassem o LivingSlides. Nestegrupo estavam 6 pessoas do sexo feminino e 9 pessoas do sexo masculino. Todas elas têm experiênciacom ferramentas de autoria, sendo que todos referiram já ter trabalhado no Powerpoint e 4 pessoasreferiram ter trabalhado com o Keynote. Foi perguntado, numa escala de 0 a 5 qual era a frequênciado uso de apresentações multimédia, sendo 0 raramente e 5 muito frequentemente. Das 15 pessoas,apenas 2 responderam que realizavam apresentações com muita frequência, 6 responderam que fazemcom frequência e 7 responderam que realizam apresentações regularmente.

Antes de lhes pedir qualquer tarefa, foi dito a cada participante para explorarem a ferramenta à sua livrevontade. Findo um período de 5 minutos, foi entregue aos participantes uma folha com várias tarefas.Foi medido o tempo que cada utilizador levava até completar uma tarefa, sem contar com o tempo queestes levavam a escrever algo no teclado. Para além disso, foi-lhes pedido que "pensassem em vozalta" enquanto realizavam as tarefas. Desta forma, foi possível perceber qual a linha de raciocínio queos participantes estavam a tomar.

Foram pedidas 25 tarefas ao utilizadores:

1 Escolha o tema “Hammersmith” (2o tema na fila debaixo);

2 Mude o título da apresentação para “Mudanças Climáticas”

3 Mude o subtítulo para “As consequências”

4 Adicione um slide em branco

5 Nesse slide, faça o upload da imagem “Árvores.jpg” arrastando-a para o diálogo de upload.

6 Adicione um slide com título e uma coluna de conteúdo

7 Mude o título para “A deflorestação da Amazónia”.

8 Escreva no conteúdo “Estima-se que haja 40 milhões de km de floresta no planeta, mas todos osanos são perdidos 7.3 milhões de hectares de floresta por ano.”

9 Desenhe um rectângulo no lado direito da apresentação.

10 Mude a cor do rectângulo para verde.

11 Ligue a coluna de conteúdo ao rectângulo, clicando no círculo verde e arrastando até ao círculoverde do rectângulo.

39

12 Seleccione o número 40 e carregue no botão “Set Region”

13 Defina a variação desta variável (variável independente) como sendo linear. Defina que o valormínimo é 0, o valor máximo é 40 e o valor inicial é 40. Defina também que o valor de m é 1 e ovalor de b é -7.3.

14 Defina o tamanho do SVG, na tab “Size”, como sendo uma variação linear com valor máximo de40px e valor mínimo de 1px.

15 Defina na tab “Properties”, variação linear, cor mínima verde claro e cor máxima verde escuro.

16 Crie um novo slide, com título e duas coluna de conteúdo.

17 Na primeira coluna escreva a seguinte frase: “Em 2010, a temperatura média". Na segunda colunaescreva "é de 16 C.”

18 Clique no círculo verde e arraste-a para cima do círculo verde da segunda coluna de conteúdo.

19 Defina o número 2014 e carregue no botão “Set Region”.

20 Defina a variação desta variável como sendo “discrete”.Escreva os seguintes valores: 2010, 2050 e2100.

21 Defina agora o número 16 e carregue no botão “Set Region”.

22 Escreva os seguintes valores: 16, 18.5, 20.

23 Adicione uma nota a este slide “São apenas estimativas. Há mais factores a considerar.”

24 Comece a apresentação.

25 Saia da apresentação e guarde a mesma com o nome “Teste”.

Destas 25 tarefas não foram contabilizadas as tarefas 2, 3, 7, 8 e 17 pois estas tarefas não estão ainterargir com o LivingSlides de forma directa, sendo só input por parte do utilizador.

Depois de terem realizado as tarefas, foi pedido que respondessem a um questionario SUS (SystemUsability Scale)[Brooke, 1996]. O SUS é uma escala que contém dez items. Cada um destes itens temum grau de acordo ou desacordo com a frase desse item, sendo Discordo Bastante (Strongly Disagree)o menor grau com valor 1 e Concordo Bastante (Strongly Agree) o maior grau, com valor 5.

4.2 Resultados

Nesta secção são descritos os resultados obtidos durante os testes com utilizadores. A tabela com osresultados do testes encontra-se em anexo. É de salientar que das 25 tarefas que eram pedidas aosutilizadores, apenas foram contabilizados tempos de execução em 20 tarefas. Isto deve-se ao facto deque 5 tarefas eram apenas para o utilizador inserir texto.

O tipo de gráfico escolhido foi o boxplot ou diagrama de caixa, pois este tipo de gráfico permite obser-var onde estão localizados 50% dos valores mais prováveis, a mediana e os valores extremos.12 Osvalores extremos são dados pelos "bigodes" que estão desenhados nas caixas, e os valores atípicos

12http://pt.wikipedia.org/wiki/Diagrama_de_caixa

40

Figure 4.1: Tempos de execução para as tarefas T1, T4, T5 e T6

são representados pelas circunferências que eventualmente possam existir em cima da caixa. Estão 4tarefas representadas em cada gráfico, prefazendo um total de 5 gráficos. Esta divisão apenas foi feitapara que fosse possível uma melhor vizualização dos resultados.

Na figura 4.1 são apresentados os valores dos tempos de execução das tarefas 1, 4, 5 e 6.

Como se pode observar pelo gráfico, os utilizadores não tiveram qualquer dificuldade em realizar aprimeira tarefa, que se prendia com a escolha do tema e começar a edição de uma apresentação. Nãohouve erros contabilizados nesta tarefa, sendo que a média do tempo de execução foi de 1,81 segundose o desvio padrão é 0,37 segundos. Esta tarefa não é complexa, pelo que se justifica o baixo tempo deexecução da mesma. As segunda e terceira tarefa não foram contabilizadas em tempo, uma vez queeram de inserção de texto e a interacção que havia com o LivingSlides (um clique) era muito pequenapara ser contabilizada em termos de tempo.

Na tarefa 4 houve uma dispersão de valores. Esta tarefa prendia-se com a adição de um novo slide. Amédia de tempo de execução foi de 5,06 segundos e o desvio padrão foi de 1,46 segundos. O maiortempo registado foi de 7,90 segundos e o menor foi de 2,80 segundos. *falta erros* A dispersão devalores pode ser justificada pela introdução de uma tarefa nova, até aqui não tinha sido pedido aoutilizador para adicionar um slide à apresentação, pois quando o utilizador escolhe um tema é logocriado um slide inicial.

Passando para a tarefa 5 observa-se que houve um maior tempo de execução da tarefa e tambémuma maior dispersão dos resultados. A média do tempo de resposta ficou pelos 15,25 segundos, e odesvio padrão foi de 4,57 segundos. O tempo máximo de resposta foi de 22,51 segundos. Esta tarefaprendia-se com o upload de uma imagem, usando o diálogo de upload. A média de erros ficou pelos 2,sendo que houve utilizadores que preferiram procurar na barra de navegação qual era o botão indicado,lendo o tooltip13 que aparece debaixo dos ícones da barra de navegação. Os erros observados foramdevido a utilizadores que, ao verem o botão de escolha de ficheiro, preferiram procurar a imagem no

13uma tooltip é um pequeno diálogo que é apresentado debaixo de um elemento para dar informação adicional ao utilizador

41

disco do que arrastá-la para o diálogo, como indicava o guião da tarefa.

Como se pode ver pelo gráfico, a tarefa 6 teve tempos de resposta relativamente baixos. Nesta tarefapedia-se aos utilizadores para adicionarem um novo slide. Esta tarefa já tinha sido pedida anterior-mente, e como se pode observar, os utilizadores aprenderam onde clicar para adicionar um novo slide.Houve apenas 1 erro, em que o utilizador carregou no botão ao lado. Nesta tarefa o tempo médio deexecução foi de 3,9 segundos e o desvio padrão foi de 1,30 segundos. O tempo máximo de execuçãofoi 7,91 (o utilizador que carregou no botão ao lado).

Figure 4.2: Tempos de execução para as tarefas T9, T10, T11 e T12

Na figura 4.2 são apresentados os valores para as tarefas 9, 10, 11 e 12.

Na tarefa 9 era pedido aos utilizadores que desenhassem um rectângulo no slide. Esta era a primeiravez que era pedido aos utilizadores para fazerem qualquer tipo de desenho nos slides. Como se podeobservar no gráfico, houve uma dispersão nos valores sendo que o tempo médio de execução foi de18,59 segundos e o desvio padrão foi de 6,79 segundos. O tempo máximo de resposta foi de 28,66segundos. A dispersão dos valores explica-se com o facto de que era uma nova parte do LivingSlidesque estava a ser exercitada. Os utilizadores até aí não tinham tido contacto com a ferramenta dedesenho, tendo só exercitado texto e adição de slides e imagens. Nesta tarefa, a média de erros foi de2.

Logo de seguida, na tarefa 10, era pedido aos utilizadores que mudassem propriedades do SVG. Estatarefa já teve tempos de execução inferiores ao anterior, sendo que o tempo médio de resposta foide 5,88 segundos e o desvio padrão foi de 1,07 segundos. O tempo máximo de resposta foi de 8,12segundos. Houve 1 erro, em que o utilizador acidentalmente tirou a selecção da forma e isso implicouque as ferramentas de edição das formas desaparecessem.

As tarefas 11 e 12 introduziam a interactividade aos utilizadores. A tarefa 11 pedia que ligassem doiselementos utilizando os círculos verdes. O tempo médio de execução foi de 3,59 segundos e o desviopadrão foi de 1,18 segundos. O tempo máximo de execução foi de 6,51 segundos. Os erros ocorridosprendem-se com utilizadores que largaram a seta antes de a ligarem com o círculo verde de destino.

42

Um dos comentários feitos pelo utilizadores foi que a área para largar a seta deveria ser maior, paraprevenir este tipo de erros. Para a tarefa 12 era pedido que seleccionassem o pedaço de texto que iaser interactivo. Como se pode observar no gráfico, os utilizadores não tiveram quaisquer dificuldadesem o fazer. Nesta tarefa o tempo médio de execução foi de 3,03 segundos e o desvio padrão foi de0,94 segundos. O tempo máximo de execução registado foi de 5,93 segundos que, segundo o gráficodesenhado, é um valor atípico.

Na figura 4.3 são apresentados os tempos de execução relativos às tarefas 13, 14, 15 e 16.

A tarefa 13 pedia aos utilizadores que parametrizassem os valores das variáveis. Embora houvessemuito texto a ser inserido, esta tarefa foi contabilizada pois a inserção de texto era essêncial paraa correcção dos valores parametrizados e os valores introduzidos eram apenas números. O tempomédio de execução foi de 11,30 segundos e o desvio padrão foi de 2,39 segundos.

Era pedido aos utilizadores que mudassem propriedades da forma SVG na tarefa 14. Esta tarefa, comose pode observar no gráfico, teve alguns valores um pouco divergentes da maioria. O tempo médiode execução foi de 9,19 segundos e o desvio padrão foi de 1,95 segundos. O tempo máximo obtidofoi de 14,38 segundos, que se pode observar no gráfico como sendo um valor atípico. Houve 2 erroscontabilizados no total, e ocorreram em conjunto com os tempos de execução maiores. Neste caso, osutilizadores consideraram que o tamanho (apesar de estar escrito no guião qual a tab a que se deviamdirigir) deveria estar na tab Properties.

Figure 4.3: Tempos de execução para as tarefas T13, T14, T15 e T16

Em contraste, quem errou e abriu a tab Properties na tarefa anterior teve um tempo de execuçãorelativemente menor que utilizadores que não erraram na tarefa anterior quando relizaram a tarefa 15.Esta tarefa pedia que o utilizador mudasse a cor da forma, indo para isso à tab Properties. Nestatarefa o tempo médio de execução foi de 8,69 segundos e o desvio padrão foi de 2,82 segundos. Otempo máximo registado foi de 13,21 segundos. Observou-se que quem demorou mais tempo ficou aponderar qual a cor certa a utilizar, uma vez que na tarefa pede-se verde claro e verde escuro. Se atarefa fosse mais epecífica, pedindo ao utilizador para colocar um código de cor os tempos de execuçãoseriam menores. Tal não foi feito uma vez que para a mudança de cores foi usado o diálogo próprio do

43

sistema, e esse diálogo (em Windows) não suporta códigos quer RGB quer HEX.

A tarefa 16 pedia que fosse novamente adicionado um novo slide à apresentação. Como se pode verpelo gráfico, os tempos registados foram em média menores aos registados na tarefa 4 e na tarefa 6. Otempo médio registado foi de 3,28 segundos com um desvio padrão de 0,75 segundos. O maior temporegistado foi de 4,71 segundos. Pode concluir-se que os utilizadores aprenderam qual o botão em quecarregar para adicionar slides. Não houve erros a contabilizar nesta tarefa, o que fortalece a ideia deque a aprendizagem foi bem feita.

Na figura 4.4 mostram-se os tempos de execução registados para as tarefas 18, 19, 20 e 21.

A tarefa 18 pedia novamente ao utilizador que ele criasse uma relação de interactividade entre doiselementos, tal como pedia a tarefa 11.Nesta tarefa, como se pode observar pelo gráfico, os temposde execução registados foram menores que os registados na tarefa 11. De facto, o tempo médio deexecução desta tarefa foi de 2,94 segundos com desvio padrão de 0,46 segundos. É de salientar queo tempo máximo registado nesta tarefa é igual ao tempo médio registado na tarefa 11: 3,59 segundos.Esta redução no tempo médio corrobora a aprendizagem dos utilizadores no que diz respeito à criaçãode relações de interactividade entre elementos. Os erros registados nesta tarefa, assim como os queforam registados nas outras, têm que ver com o utilizador largar a seta antes de a ter ligado ao círculodo elemento de destino.

A tarefa 19 prendia-se novamente com a definição de uma secção de texto para ser tornada interactiva.Nesta tarefa o tempo médio registado foi de 2,83 segundos com um desvio padrão de 0,74 segundos.O tempo máximo registado foi de 4,48 segundos. Comparando novamente com tarefas anteriores,nomeadamente a tarefa 12 em que o tempo médio de execução foi de 3,03 segundos, pode afirmar-se que também houve uma aprendizagem por parte dos utilizadores no que diz respeito à definiçãode variáveis independentes e dependentes mesmo que tenha havido apenas uma ligeira melhoria nostempos anteriormente registados.

Era então pedido novamente que o utilizador definisse qual a secção de texto para o elemento dedestino na tarefa 20. O tempo médio de execução registado foi de 9,3 segundos com um desvio padrãode 1,89 segundos. O tempo máximo registado foi de 13,5 segundos. Pode-se afirmar que os utilizadorescompreenderam onde é necessário carregar para mudar a variação das variáveis, uma vez que a opçãoDiscrete não está logo visível quando o diálogo é aberto. Comparando com a primeira tarefa que pediutambém para parametrizar os valores de variação, a tarefa 13, observa-se que o tempo médio destatarefa foi ligeiramente menor, conclui-se que a aprendizagem de parametrização também foi eficaz.Note-se que na tarefa 13, os utilizadores já tinham a variação Linear pré-definida na lista de variaçõespossíveis.

A tarefa 21 pede novamente uma definição de secção de texto para mais tarde ser variável. O tempomédio registado nesta tarefa foi de 3,56 segundos co um desvio padrão de 1,53 segundos. O tempomáximo de execução observado foi de 6,13 segundos. Nesta tarefa viu-se o tempo médio a aumentar,isto deve-se ao facto de que houve utilizadores que não compreenderam que era necessário ter atab da variável dependente activa e isso gerou confusão por parte dos utilizadores. Era também aprimeira tarefa em que os utilizadores tinham texto como variável dependente, não tendo sido pedidoanteriormente que fosse definido uma secção de texto, pois anteriormente os utilizadores trabalharamcom uma forma SVG.

Apresenta-se por fim, na figura 4.5, os resultados referentes às tarefas 22, 23, 24 e 25.

44

Figure 4.4: Tempos de execução para as tarefas T18, T19, T20 e T21

A figura 22 pedia aos utilizadores que escrevessem valores. Apesar de esta ser uma inserção de texto,esta inserção de texto era importante, uma vez que era necessário saber se os utilizadores introduziamos valores nos locais correctos. Assim sendo, o tempo médio de resposta foi de 5,02 segundos comdesvio padrão de 1,86 segundos. O tempo máximo registado foi de 7,52. Nesta tarefa não houvequaisquer erros registados, e portanto estes valores podem ser atrbuídos à velocidade de escrita decada um dos utilizadores.

A tarefa 23 já era fora do âmbito da interactividade e trazia o utilizador de volta à secção de ediçãodo LivingSlides; era pedido que adicionassem uma nota de orador. Nesta tarefa o tempo só foi con-tabilizado até a inserção de texto por parte do utilizador, pois o que se pretendia avaliar era o tempoque um utilizador leva até ter na sua frente a secção de notas de orador. O tempo médio de execuçãoregistado foi de 6,78 segundos com desvio padrão de 2,25 segundos; o tempo máximo registado foide 9,33. Como se pode observar no gráfico, houve uma dispersão grande dos valores, isto porque namaioria dos casos os utilizadores souberam encontrar qual o botão correcto, embora muitos tenhampassado algum tempo à procura do botão na barra de navegação. Alguns utilizadores julgaram que obotão de notas estaria no fim da barra de navegação, pois tinham "descido" pela barra de navegaçãoconsoante as tarefas pedidas. No entanto, todos os utilizadores concluiram a tarefa sem erros.

A tarefa 24 continua na mesma linha da tarefa 23, isto é, traz o utilizador à barra de navegação; estatarefa pedia que os utilizadores começassem uma apresentação. Para isso eles tinham que carregar nobotão que representa um play. A discrepância nos valores justifica-se mais uma vez com utilizadoresque procuraram na barra da navegação, lendo as tooltips, pelo botão correcto. O tempo médio registadofoi de 8,9 segundos com um desvio padrão de 4,02 segundos; o maior tempo registado foi de 15,38segundos. Nesta tarefa houve dois utilizadores a cometerem um erro cada um. Um dos comentáriosfeitos foi que pensaram que aquele botão serviria para adicionar um vídeo à apresentação e que senão fosse a tooltip que não teriam, numa primeira vista, deduzido que aquele botão lançaria o modoapresentação. Outro comentário feito foi o facto de existir um cronómetro na janela das notas de orador,muitos utilizadores referiram que aquele cronómetro lhe seria útil quando realizam apresentações.

45

A última tarefa pedia aos utilizadores para saírem do modo apresentação e para gravarem a apresen-tação que tinha estado até aí a editar. Como se pode observar pelo gráfico a maioria dos utilizadoresnão teve qualquer dificuldade em realizar a tarefa com sucesso. O tempo médio foi de 4,97 segundoscom um desvio padrão de 0,84 segundos; o tempo máximo observado foi de 6,33 segundos e houve,em média, 3 erros. A maior parte do tempo foi gasta a perceber como sair da apresentação, do que àprocura do botão para guardar a apresentação. Uma vez fora da apresentação, todos os utilizadoresencontraram logo o botão para guardar a apresentação.

Figure 4.5: Tempos de execução para as tarefas T22, T23, T24 e T25

4.3 Discussão

Os utilizadores, depois de realizarem os testes de utilizadores, responderam a um questionário SUS(System Usability Scale). Os resultados desse questionário serão apresentados mais à frente nestasecção.

Os testes com utilizadores validaram o facto de que o LivingSlides é uma ferramenta fácil de usar eque o acréscimo da interactividade não confunde os utilizadores. Validaram também que a curva deaprendizagem é pequena. No entanto há comentários de utiliadores que não podem ser ignorados.

Houve utilizadores que referiram que seria melhor, quando passam com o rato em cima de slides, queaparecesse qual o tipo de slide, pois as imagens não são muito claras. Outro comentário dos uti-lizadores foi que as cores das tabs da interactividade não dava a entender que era uma outra secção,diferente daquela que secção actual. Outro comentário recorrente foi a representação dos ícones dosbotões, muitos referiram que se não fosse a tooltip não teriam a certeza de que aquele botão faria odesejado, nomeadamente o botão de escolha de formas SVG e o botão para iniciar a apresentação. Al-guns sugeriram um ícone acompanhado de texto, como é prática recorrente em ferramentas de autoriaconhecidas.

No entanto, foi unânime entre os participantes que a interactividade que o LivingSlides oferece é bené-

46

fica, um dos paticipantes referiu que seria bastante útil no ensino da Matemática caso o LivingSlidesfosse complementado com quadros interactivos.

Figure 4.6: Respostas aos questionários de SUS, perguntas 1 a 5

No final dos testes foi também pedido aos utilizadores que estes respondessem a um questionário deSystem Usability Scale (SUS). Apresenta-se em baixo os gráficos das respostas às 10 perguntas destequestionário, cujo objectivo é medir a usabilidade de uma ferramenta.

Na figura 4.6, da esquerda para a direita, temos as percentagens das respostas às primeiras 5 pergun-tas do questionário.

Como se pode observar pelo gráfico a maioria das pessoas (47%) gostaria de usar o sistema fre-quentemente. 53% dos utilizadores acham que o sistema não é complexo, sendo que 60% achou osistema fácil de usar. 67% dos utilizadores que testaram o LivingSlides consideram que não necessi-tariam de apoio técnico para utilizar a ferramenta e 47%, contra 7%, acham que as diversas funções doLivingSlides estão bem integradas.

Figure 4.7: Respostas aos questionários de SUS, perguntas 6 a 10

Na figura 4.7, da esquerda para a direita, temos as percentagens das respostas às restantes 5 pergun-tas do questionário.

Relativamente à inconsistência no sistema, as opiniões estão mais divididas: 40% discorda da afir-mação, mas 40% dos utilizadores têm uma opnião neutra. 53% dos utilizadores que testaram o Liv-ingSlides não têm uma opinião acerca da rapidez que outras pessoas teriam em aprender a trabalharno LivingSlides, mas 33% considera que a maioria das pessoas aprenderia rapidamente. 64% dosutilizadores não achou o sistema complicado de se usar e 47% concordam que se sentiram confiantesa usar o LivingSlides. Por fim, 60% dos utilizadores discordaram com a afirmação de que necessitaramde aprender muitas coisas antes de poder usar o LivingSlides.

47

5 Conclusão

O LivingSlides é, de facto, uma ferramenta inovadora que trará benefícios a todos aqueles que façamapresentações regularmente. O grande desafio de conferir interactividade e dinamismo a slides queseriam, de outra forma, estáticos foi concluído com sucesso. Os potenciais utilizadores têm à suadisposição um leque considerável de opções para poderem criar as suas apresentações dinâmicas e“vivas”.

Podem injectar interactividade em texto, em formas ou em imagens para melhor veicular a informaçãoque pretendem passar para o exterior. Com esta interactividade, irão ajudar quem está a assistir a retermelhor o que foi dito, ajudando-os a criar marcadores nas suas memórias.

Pela análise do trabalho relacionado, em particular pela análise da framework Reveal.js e a recentealteração à mesma, em que foram inseridas formas e a possibilidade de redimensionar e reposicionaros elementos dos slides, pode concluir-se que há espaço para uma ferramenta como o LivingSlidesno mundo das ferramentas de autoria. Começam a aparecer novas formas de os utilizadores fugiremàs ferramentas conhecidas, mas que são um pouco limitadas caso um utilizador seja um pouco maiscriativo.

Ferramentas de autoria que se baseiem em HTML e CSS têm a vantagem de que, caso o utilizadortenha conhecimentos dessas tecnologias, as apresentações podem ser totalmente alteradas ao gostodo autor, e permitem que haja uma extensão às funções ditas nativas de ferramentas de autoria, sendoo LivingSlides um exemplo das possibilidades. As suas funcionalidades podem sempre ser estendidas,usando para isso bibliotecas e frameworks e também a imaginação do utilizador. A desvantagem queestas trazem é que se o utilizador não souber HTML nem Javascript não o poderá fazer autonomamente.O LivingSlides pretende também oferecer aos utilizadores que não têm grandes conhecimentos deHTML e Javascript ao oferecer uma interface e retirar do utilizador a programação das variáveis deTangle, pedindo apenas que este insira os valores importantes.

Os testes com utilizadores validaram a facilidade de utilizção do LivingSlides e os comentários dosutilizadores que o testaram mostram que existe vontade por parte de quem realiza apresentações emalterar a forma como elas são feitas. Um dos testes que seria bastante interessante de realizar seriacolocar o LivingSlides à disposição de dois docentes e observar o modo como o usam para leccionar assuas aulas. Para além disso, seria interessante recolher os comentários dos alunos, pedindo-lhe queavaliassem e comparassem as aulas dadas com o LivingSlides.

Ainda há arestas por limar no LivingSlides. Uma delas é a possibilidade de editar os temas pré-definidose guardá-los para uso futuro; outra funcionalidade interessante, parecida com a anterior, seria a possi-bilidade de o utilizador criar o layout dos slides e guardá-los para utilizar mais tarde num outro slide ounuma outra apresentação.

O LivingSlides apenas suporta relações de interactividade entre elementos numa relação de um paraum, ou seja, uma variável independente tem uma e uma só variável dependente. Fazendo uma visita aosite do criador do Tangle percebe-se que o autor tinha em mente, quando criou o Tangle, ter uma grandesecção de texto e que houvesse ao longo do texto diversas variáveis e que as independentes fossemdependentes de outras variáveis independentes. Seria também uma mais valia para o LivingSlidespoder suportar mais do que uma variável independente por cada elemento e também haver uma relaçãode "um-para-mais" no que diz respeito às relações de interactividade. Seria benéfico haver texto e várias

48

imagens que ao serem mudadas pelo utilizador fariam com que todo o documento mudasse, não só nopróprio slide como também no apresentação inteira.

Um dos problemas em ter realizado o LivingSlides com tecnologias recentes foi o facto de que aindanão há grande suporte para os elementos mais recentes, como a etiqueta <foreignObject>. Estaetiqueta não é na verdade um elemento SVG e por isso, não foi possível realizar a exportação dosslides para PDF, pois não há ainda suporte para este tipo de etiquetas recentes. Seria interessantehaver uma melhoria do LivingSlides neste aspecto. Outra funcionalidade que também traria benefíciosseria a possibilidade para importar ficheiros de outros programas como o Powerpoint ou o Keynote, parapoder injectar interactividade nestas apresentações e tornar a usá-las de outra forma mais dinâmica.

Espera-se que o LivingSlide seja a primeira de muitas ferramentas que ajudem a alterar o modo comoas apresentações são feitas e apresentadas.

49

Bibliography

Bier, E. (1991). Embedded button: Documents as user interfaces. In Proceedings of the 4th annualACM Symposium on User Interface Software and Technology.

Bompani, L., Ciancarini, P., and Vitali, F. (1991). Active documents in xml. In ACM SIGWEB Newsletter.

Boy, G. (1997). A practical approach towards active hyperlinked documents. In Proceedings of the 2ndConference on Designing Interactive Systems.

Brooke, J. (1996). Sus - a quick and dirty usability scale.

Edge, D., Savage, J., and Yatani, K. (2013). Hyperslides: Dynamic presentation prototyping. In Pro-ceedings of the SIGCHI Conference on Human Factors in Computing Systems.

Faraday, P. and Sutcliffe, A. (1997). An empirical study of attending and comprehending multimediapresentations. In Proc. of the fourth ACM international conference on Multimedia.

Heinrich, E. and Maurer, H. (2000). Active documents: Concept, implementation and applications. InJournal of Universal Computer Science.

Köppen, E. and Neumann, G. (1998). A Practical Approach towards Active Hyperlinked Documents. InProceedings of the 7th World Wide Web Conference.

Lichtschlag, L., Karrer, T., and Borchers, J. (2009). Fly: a tool to author planar presentations. InProceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM.

Liu, Y., Edge, D., and Yatani, K. (2013). Sidepoint: a peripheral knowledge panel for presentation slideauthoring. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems.

Mayer, R. (2005). Cognitive theory of multimedia learning. In The Cambridge Handbook of MultimediaLearning.

Mayer, R. and Moreno, R. (2003). Nine ways to reduce cognitive load in multimedia learning.

Panjwani, S., Gupta, A., Samdaria, N., Cutrell, E., and Toyama, K. (2010). Collage: a presentation toolfor school teachers. In Proceedings of the 4th ACM/IEEE International Conference on Information andCommunication Technologies and Development.

Spicer, R., Lin, Y., Kelliher, A., and Sundaram, H. (2012). Nextslideplease: Authoring and deliveringagile multimedia presentations. In ACM Transactions on Multimedia Computing, Communications,and Applications.

50

Appendix A

A1

12

34

56

78

910

1112

1314

15A

vera

geS

tdD

evia

tion

T12,

381,

201,

911,

561,

881,

502,

081,

682,

131,

392,

371,

872,

101,

891,

271,

810,

37T4

4,15

4,22

3,50

4,95

3,97

2,80

3,21

7,90

5,25

5,21

6,71

6,33

5,91

4,96

6,83

5,06

1,46

T513

,11

13,3

420

,96

21,9

822

,91

15,2

121

,47

35,2

217

,88

12,3

09,

5310

,58

11,2

110

,33

13,1

416

,61

6,91

T63,

053,

253,

113,

553,

115,

707,

913,

503,

703,

503,

214,

064,

453,

912,

933,

921,

30T9

26,2

724

,38

28,2

122

,90

28,6

620

,36

21,8

021

,07

16,7

113

,77

10,7

211

,13

12,0

39,

4711

,37

18,5

96,

79T1

06,

315,

565,

624,

915,

785,

514,

726,

335,

267,

374,

308,

127,

276,

314,

975,

881,

07T1

13,

482,

723,

224,

033,

064,

094,

225,

276,

513,

812,

714,

032,

172,

112,

553,

591,

18T1

23,

032,

662,

23,

663,

215,

933,

113,

782,

342,

262,

812,

553,

022,

912,

123,

030,

94T1

311

,38

10,9

112

,11

13,0

312

,33

12,2

215

,20

15,8

89,

7411

,03

9,37

8,91

7,83

7,57

12,1

111

,30

2,39

T14

8,41

7,67

9,27

8,88

3,01

8,35

12,3

014

,38

11,2

18,

317,

347,

838,

117,

918,

978,

792,

52T1

512

,03

12,5

111

,91

10,5

613

,21

7,83

9,38

9,60

8,36

5,66

6,03

5,71

6,14

5,21

6,21

8,69

2,82

T16

3,24

3,8

4,35

4,02

3,62

4,71

2,11

3,36

2,11

3,37

2,60

2,70

3,11

3,31

2,84

3,28

0,75

T18

3,42

3,20

3,22

3,59

2,26

3,38

3,20

2,71

3,36

3,11

2,36

2,27

2,74

3,02

2,31

2,94

0,46

T19

4,48

3,81

1,97

2,07

3,37

2,09

1,97

2,76

3,57

2,71

2,74

2,77

3,01

2,98

2,15

2,83

0,74

T20

10,3

19,

469,

2011

,37

10,7

111

,30

13,5

09,

317,

436,

217,

218,

118,

838,

228,

339,

31,

89T2

15,

515,

906,

134,

705,

561,

882,

072,

132,

712,

572,

813,

012,

963,

132,

373,

561,

53T2

22,

102,

302,

603,

013,

105,

415,

316,

795,

916,

095,

876,

107,

117,

526,

255,

031,

86T2

34,

904,

113,

963,

984,

214,

806,

088,

569,

317,

229,

068,

379,

018,

919,

336,

782,

25T2

413

,51

25,3

815

,03

14,9

110

,20

9,56

5,81

7,27

6,37

8,03

6,33

5,71

4,72

3,09

8,21

9,60

5,66

T25

4,12

5,03

6,03

4,87

6,33

5,21

3,88

6,11

4,21

5,31

4,21

4,57

4,83

3,92

6,03

4,97

0,84

A2