FACULDADE DE ENGENHARIA DA UNIVERSIDADE DO PORTO

Tecnologias de Interface com oUtilizador

Joana Raquel Ferreira da Silva Pereira

VERSÃO PROVISÓRIA

Mestrado Integrado de Engenharia Electrontécnica e de Computadores

Orientador: Prof. Dr. José Manuel de Magalhães Cruz

Responsável na empresa: Eng. Ernesto Santos (Glookast)

Julho de 2011

c© Joana Raquel Ferreira da Silva Pereira, 2011

Agradecimentos

Apesar de esta ainda ser uma pequena parte do trabalho que está para vir, gostava de poderagradecer a assistência que o meu orientador Prof. Dr. José Manuel de Magalhães Cruz me temfornecido, a disponibilidade do Eng. Ernesto Santo (Glookast) e o apoio incondicional da minhafamília.

Joana Pereira

i

ii

Versão 0.99 (6 de Julho de 2011)

Conteúdo

1 Introdução 11.1 Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Projecto e seus objectivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Motivação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Estrutura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Estado da Arte 52.1 Avid Media Composer (v.5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Final Cut Pro X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Adobe Premiere Pro CS5.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4 Vegas Pro 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.5 Conclusões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3 Tecnologias a utilizar 153.1 Linguagens de programação . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.1.1 Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1.2 C++ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1.3 SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2 Ambientes de desenvolvimento . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2.1 Netbeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4 Plano de Trabalhos 17

5 Conclusão 21

Referências 23

iii

iv CONTEÚDO

Versão 0.99 (6 de Julho de 2011)

Lista de Figuras

2.1 Interface gráfica do Avid Media Composer 5 . . . . . . . . . . . . . . . . . . . . 62.2 Interface gráfica do Final Cut Pro X . . . . . . . . . . . . . . . . . . . . . . . . 82.3 Interface gráfica do Adobe Premiere Pro X . . . . . . . . . . . . . . . . . . . . . 102.4 Interface gráfica do Vegas Pro 10 da Sony . . . . . . . . . . . . . . . . . . . . . 12

4.1 Plano de Trabalhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

v

vi LISTA DE FIGURAS

Versão 0.99 (6 de Julho de 2011)

Abreviaturas e Símbolos

API Application Programming InterfaceIDE Integrated Development EnvironmentMXF Media Exchange FileSMPTE Society of Motion Picture and Television EngineersSQL Structured Query LanguageUML Unified Modeling Language

vii

viii ABREVIATURAS E SÍMBOLOS

Versão 0.99 (6 de Julho de 2011)

Capítulo 1

Introdução

Serve o presente documento para descrever o trabalho feito ao longo da unidade curricular Pre-

paração da Dissertação e essencialmente, foi feito o estudo do estado da arte do projecto proposto

para a dissertação.

O trabalho proposto consiste no desenvolvimento de técnicas e tecnologias de interface com

o utilizador no contexto de software de produção de conteúdos audiovisuais para estações de

televisão. O local onde será desenvolvido são as instalações da empresa proponente, Glookast.

1.1 Contexto

A Glookast desenvolve equipamentos de multimédia profissional para desenho, transição e

implementação de sistemas de multi-formato baseados em fluxos de trabalho MXF, tendo como

principal objectivo a concepção de produtos que optimizem e facilitem esse fluxo de trabalho.

Neste tipo de ambiente de trabalho existe a necessidade de facilitar a utilização das ferramentas

usadas em toda a linha de trabalho das estações, desde as filmagens até à emissão dos conteúdos

audiovisuais; é importante minimizar o tempo de aprendizagem de manuseamento das ferramentas

a utilizar e tornar todo o processo de utilização intuitivo e de fácil compreensão a modo que todo

o trabalho efectuado seja executado de uma forma segura, rápida e eficaz.

1.2 Projecto e seus objectivos

Mesmo sabendo as tecnologias a usar neste projecto, os seus objectivos gerais (pois são co-

muns a qualquer projecto que envolva interacção humano-computador) e o seu âmbito, este pro-

jecto poderá vir a ser alvo de alterações, portanto a sua descrição será feita de uma forma mais

abrangente.

O objectivo do trabalho é o estudo de técnicas de interacção entre o utilizador e a sua fer-

ramenta informática de trabalho, que se adapta ao perfil do utilizador. Sendo assim, a interface

1

2 Introdução

terá que ter um desenho e fazer uma apresentação de informação distinta, dependendo do utiliza-

dor, quer ele seja um jornalista, um técnico ou um realizador. Inicialmente vai proceder-se a um

estudo da informação a transmitir: o que é estritamente necessário comunicar ao utilizador, que

informação dificulta mais a interacção ao invés de a ajudar, de que modo vamos apresentar essa

informação, se vai estar imediatamente disponível ou apenas após ser introduzido algum tipo de

informação por parte do utilizador [1], etc.

O passo seguinte consiste em tentar compreender o utilizador e a forma como interage com o

mundo físico: a tradução desses conhecimentos para o mundo digital, apesar de complicada, torna

a interacção muito mais natural e fluida. A dificuldade na concretização de uma boa interacção

deve-se ao facto de que normalmente quem desenvolve ou desenha a aplicação tem dificuldades

em abstrair-se de todos os aspectos técnicos e estéticos que envolvem a aplicação e de a analisar

na perspectiva de um utilizador: se já sabemos onde está o menu ’X’ porque o colocamos naquele

local específico, como é que vamos achar difícil a sua localização por um utilizador? Quem

desenvolve a aplicação não a utiliza numa base diária, como é o seu objectivo. Torna-se então

fulcral compreender o método de percepção da informação por quem não desenvolva a aplicação.

A última etapa é caracterizar e definir todos os processos que queremos que estejam envolvidos

na interacção humano-computador, compreender como isso afecta o utilizador, agir em conformi-

dade e identificar as necessidades e estabelecer requisitos. É nesta fase que definimos como vão

estar interligadas as etapas anteriores e como será a sua simbiose.

A ideia será de aplicar o trabalho a ficheiros no formato MXF [2] que a aplicação em ques-

tão recebe. Este formato é uma norma definida pela SMPTE1nesta área porque é um formato de

intercâmbio muito eficaz de conteúdo multimédia e que tem a vantagem de poder conter meta-

dados sobre o conteúdo. A sua aplicação é muito abrangente e o seu cabeçalho que contém as

informações relativas ao video e áudio que o ficheiro possa conter, (o MXF é um formato tipo

"invólucro") difere de vendedor para vendedor [3]. É então necessário indentificar devidamente as

diferenças que existem nos cabeçalhos dos ficheiros; caso se verifique que o cabeçalho é diferente,

a aplicação identificaria os bits que diferiam do habitual e apresentaria essa informação de forma

legível e fácil de interpretar ao utilizador.

1.3 Motivação

O principal estímulo deste projecto é o de melhoria contínua pois trata-se de uma área subjec-

tiva do desenvolvimento de software e como tal não existem fórmulas nem operações garantidas de

sucesso. A interacção pessoa-computador é uma área abstracta na sua abordagem: o seu foco prin-

cipal não é o de apenas acrescentar funcionalidades a uma aplicação mas melhorar a relação que

o utilizador tem com ela. Isso é o que vai definir toda a restante relação entre este par: o utilizador

1É a sociedade técnica líder na indústria cinematográfica e televisiva. Foca-se em desenvolver normas para estasindústrias, promover os novos desenvolvimentos tecnológicos na área e a interacção e comunicação entre os membrosda sociedade [4].

Versão 0.92 (6 de Julho de 2011)

1.4 Estrutura 3

acaba sempre por dar preferência à ferramenta mais confortável de usar e não necessariamente a

que apresenta mais funcionalidades.

1.4 Estrutura

Este relatório contém mais 4 capítulos. No capítulo 2, é descrito o estado da arte e são apre-

sentados trabalhos relacionados. No capítulo 3, são referidas as tecnologias a usar no trabalho de

dissertação. No capítulo 4 apresenta-se o plano de trabalhos. No capítulo 5, tiram-se as conclusões

do trabalho de preparação de dissertação.

Versão 0.92 (6 de Julho de 2011)

4 Introdução

Versão 0.92 (6 de Julho de 2011)

Capítulo 2

Estado da Arte

Neste capítulo vão ser analisadas quatro aplicações utilizadas na área da Televisão quanto à

interface gráfica, funcionalidades e vantagens e desvantagens. Como já foi dito anteriormente, o

formato de ficheiro MXF foi definido como norma no mundo da televisão e da indústria cinema-

tográfica e, como tal, todas as aplicações que irão ser analisadas e apresentadas seguem um fluxo

de trabalho baseado nesse formato.

2.1 Avid Media Composer (v.5.5)

É o software de edição de video profissional mais utilizado em estações de televisão e na

indústria cinematográfica. Apesar de nos últimos tempos muitas das estações terem optado por

diferentes soluções, a maior parte das soluções persiste em ser baseada num sistema com workflow

Avid, principalmente por razões de compatibilidade [5].

Como o objectivo é analisar as tecnologias de interface com o utilizador na área da Televisão,

apresenta-se então na Fig. 2.1 uma imagem da interface gráfica do Media Composer.

5

6E

stadoda

ArteFigura 2.1: Interface gráfica do Avid Media Composer 5

Versão

0.92(6

deJulho

de2011)

2.2 Final Cut Pro X 7

Constata-se que a interface da aplicação se divide em duas secções, a superior, que contém

uma pré-visualização do ficheiro media a ser editado, e a inferior, com a timeline do ficheiro, o

timecode e, finalmente, uma lista de operações ou efeitos se que possa utilizar no ficheiro. Como

é natural, surgem também os restantes menus no topo da janela com mais funcionalidades, para

além das operações base como abrir um ficheiro, guardá-lo ou aceder à ajuda que a aplicação

fornece.

Segundo a Avid, a disposição dos vários componentes da interface é personalizável dando a

opção ao utilizador de organizar o ambiente de trabalho à sua vontade. No entanto, seguindo a

disposição da interface apresentada na Fig. 2.1, pode-se afirmar que a maior parte da atenção é

dada à pré-visualização do ficheiro final com as alterações efectuadas e à representação temporal

do ficheiro. Isto deve-se à necessidade de o utilizador ter uma visão geral e organizada de toda

a estrutura do ficheiro, timeline, e de, basicamente, saber em concreto o efeito das alterações que

está a efectuar no ficheiro, que se traduz na pré-visualização do video final.

A representação temporal do ficheiro, com o video e o áudio que o compõem, apesar de já não

ser uma técnica recente de interface com o utilizador, é um exemplo da aplicação no mundo digital

dos conhecimentos da interacção que o humano tem com o mundo físico. Esta técnica encontra-se

facilmente em representações temporais com anotações de acontecimentos importantes ao longo

da escala temporal, quer sejam horas, quer sejam anos. Neste caso especifico a escala divide-se

em fracções de segundo com uma faixa para o video, e outra para o áudio (ou até mais do que uma

faixa de áudio, no caso de se querer acrescentar outra língua) com anotações das alterações feitas

ao ficheiro, na faixa respectiva (caso seja um efeito visual ou auditivo).

2.2 Final Cut Pro X

Tão popular como o Avid Media Composer é o Final Cut Pro X da Apple. Inicialmente

utilizado por realizadores independentes de filmes, foi ganhando na última década uma maior

quota do mercado, rivalizando com a Avid [6]. A Apple, já conhecida pelo desenho dos seus

produtos e interfaces gráficas intuitivas, segue o mesmo caminho que a aplicação anterior com o

Final Cut Pro X, como se pode ver na imagem da Fig. 2.2.

Versão 0.92 (6 de Julho de 2011)

8E

stadoda

Arte

Figura 2.2: Interface gráfica do Final Cut Pro X

Versão

0.92(6

deJulho

de2011)

2.3 Adobe Premiere Pro CS5.5 9

A diferença mais notória num primeiro olhar é o destaque que a timeline recebe comparati-

vamente ao Media Composer. Ela recebe 50% do espaço total da interface, o que fornece uma

melhor visualização de todos elementos do ficheiro para além de imagens miniatura representati-

vas dos vários trechos distintos ao longo do video tal como gráficos de magnitude das faixas de

áudio. A versão da aplicação da Avid, é um pouco mais "claustrofóbica"no que toca na organiza-

ção dos elementos; no Final Cut Pro temos uma interface mais intuitiva e de fácil interpretação,

que é o principal objectivo. Os botões presentes na interface também são mais discretos e estão

organizados em diferentes locais, ao invés de estarem concentrados na faixa central do ambiente

de trabalho como acontecia com o Media Composer.

2.3 Adobe Premiere Pro CS5.5

Outra aplicação de edição de video bem conhecida no meio, a ferramenta Premiere Pro da

Adobe utiliza um conceito já conhecido nos seus outros produtos, mas característico da sua marca,

as abas.

As abas, como se pode apreciar na Fig. 2.3, são um método inteligente de organizar as várias

janelas que o utilizador possa querer no mesmo ambiente de trabalho sem ter de sacrificar o espaço

disponível. Possivelmente também acessíveis com um atalho do teclado, o que torna a mudança

entre elas mais rápida, as abas são uma maneira de ter à vista as ferramentas mais utilizadas sem

termos que as procurar pelos vários menus que a aplicação apresenta; esta técnica é uma forma de

reduzir o tempo de aprendizagem de utilização da aplicação pois gasta-se menos tempo à procura

de determinada função e mais tempo a utilizá-la.

Versão 0.92 (6 de Julho de 2011)

10E

stadoda

ArteFigura 2.3: Interface gráfica do Adobe Premiere Pro X

Versão

0.92(6

deJulho

de2011)

2.4 Vegas Pro 10 11

Toda a restante interface é semelhante à das últimas aplicações vistas: em destaque estão a

pré-visualização do video final, timeline, os efeitos de áudio e video disponibilizados pelo Premi-

ere Pro e uma janela com os "media"que compõem o projecto total. Cada um destes elementos

do ambiente de trabalho tem as suas várias abas relacionadas, aumentando consideravelmente o

número de janelas de informação disponíveis na mesma área.

2.4 Vegas Pro 10

Não tão conhecido como os restantes editores, provavelmente devido a ser mais recente, o

Vegas Pro da Sony aparenta dar mais elementos de informação ao utilizador no ambiente de traba-

lho, o que pode ser uma desvantagem para um novo utilizador uma vez que demasiada informação

pode-se tornar algo avassalador quando ainda não se tem bem a certeza de que fazer com toda essa

informação. Por outro lado, para um utilizador mais experiente, isto significa facilidade de acesso

às propriedades do ficheiro e funcionalidades disponiveis sem grandes dificuldades de acesso.

A timeline adopta a mesma técnica que o Final Cut Pro da Apple, através de imagens miniatura

dos vários trechos de video presentes no ficheiro, e gráficos de magnitude das faixas de som. Uma

pequena particularidade que se observa aqui e que não se via nas interfaces anteriores são duas pré-

visualizações distintas do ficheiro final (ou um ficheiro diferente a partir do qual apenas queremos

utilizar a faixa de som, ou de video) em que uma é para o video e outra para o áudio; isto facilita

as edições porque assim torna possível focar cada um dos principais intervenientes do ficheiro. No

entanto, no que toca à restante interface, Vegas Pro 10 não apresenta nada de novo relativamente

ao que já existia nos 3 editores anteriores.

Versão 0.92 (6 de Julho de 2011)

12E

stadoda

ArteFigura 2.4: Interface gráfica do Vegas Pro 10 da Sony

Versão

0.92(6

deJulho

de2011)

2.5 Conclusões 13

2.5 Conclusões

Todas as aplicações analisadas são conhecidas por serem utilizadas num contexto profissio-

nal, nomeadamente nas estações de televisão. Após uma análise das interfaces gráficas de cada

uma, conclui-se que todas têm elementos em comum, partilhando técnicas de representação de

informação, disposição de elementos e funcionalidades; no entanto, cada uma delas também tem

elementos que as distinguem, quer seja no design intuitivo, workflow do ambiente de trabalho,

gestão e destaque dos vários elementos. É destes casos de sucesso das tecnologias de interface

com o utilizador que se deve reter informação para futuros desenvolvimentos.

Versão 0.92 (6 de Julho de 2011)

14 Estado da Arte

Versão 0.92 (6 de Julho de 2011)

Capítulo 3

Tecnologias a utilizar

Neste capítulo apresentam-se as várias tecnologias que estão planeadas vir a ser utilizadas no

projecto a desenvolver durante a dissertação.

3.1 Linguagens de programação

3.1.1 Java

Uma linguagem de programação orientada a objectos, é das linguagens mais utilizadas, devido

à sua versatilidade, robustez, desempenho apreciável, grande variedade de bibliotecas e portabi-

lidade. Como a sintaxe foi baseada em C/C++, a sua aprendizagem tornou-se muito acessível, o

que fomentou a sua popularidade. Esta linguagem vai ser utilizada na maior parte do projecto em

simultâneo com C++, que vai estar encarregue das áreas da interface que necessitem de um maior

processamento, como janelas de pré-visualização de video [7].

• Swing

O Swing é um conjunto de elementos básicos de interface gráfica com o utilizador, apre-

sentados sem o concurso do sistema operativo [8]. É então independente de qualquer plata-

forma, uma vantagem, mas que também causa um maior gasto de memória e menor desem-

penho, claramente desvantagens.

3.1.2 C++

Uma evolução da linguagem C, C++ tem uma sintaxe muito semelhante ao seu predecessor

e implementa novas possibilidades, especialmente as características do modelo orientado a ob-

jectos como tratamento de excepções, classes, herança múltipla, funções virtuais, entre outros.

É uma linguagem muito versátil e como tal tornou-se uma preferência para desenvolvimento de

aplicações profissionais e para ensino.

15

16 Tecnologias a utilizar

3.1.3 SQL

Linguagem para definir, manipular e questionar uma Base de Dados Relacional. Vai ser utili-

zada para comunicar com o sistema PostgreSQL.

• PostgreSQL

Sistema de base de dados open source baseado no modelo objecto-relacional, é conhecido

pela sua fiabilidade, robustez e suporte multi-plataforma. Tem interfaces de programação

nativas para C++ e Java.

3.2 Ambientes de desenvolvimento

3.2.1 Netbeans

IDE (ambiente de desenvolvimento integrado) utilizado para desenvolvimento do projecto em

Java e C++ com suporte para Java Swing. Também possibilita a elaboração de diagramas UML

que vão ser fulcrais na fase de planeamento do projecto.

Versão 0.92 (6 de Julho de 2011)

Capítulo 4

Plano de Trabalhos

O trabalho a ser efectuado, representado na Fig. 4.1, durante a dissertação é dividido nas

seguintes etapas:

1. Ambientação e estudo das ferramentasNeste periodo inicial o objectivo é a familiarização com todas as ferramentas a serem utili-

zadas durante o trabalho da dissertação e preparação do ambiente de trabalho.

2. Validação do estado da arte e levantamento de requisitosDurante duas semanas revê-se o estado da arte relativamente ao problema em questão e

definem-se as necessidades e requisitos do projecto que vão delinear todo o processo de

desenvolvimento do protótipo. A criação de um documento de requisitos vai conduzir à sua

inclusão no documento final, a dissertação.

3. Elaboração da arquitectura do sistema de softwareUma vez levantados os requisitos do sistema, é necessário proceder à definição dos com-

ponentes do software e criação da documentação relativa à arquitectura do sistema. A do-

cumentação consiste maioritariamente em modelos UML (linguagem de modelação) que

definem as suas propriedades, relações com outros componentes de software e interacção

com os utilizadores. Esta etapa é caracterizada pelas seguintes fases [9][10]:

• Projecto conceptualDefinir em traços gerais as funcionalidades da aplicação.

• Projecto lógicoDescrever o processo e o fluxo de informação da aplicação.

• Projecto físicoDefinir detalhadamente como é que a aplicação vai ser desenvolvida.

4. Desenvolvimento do protótipoA etapa central de todo o trabalho consiste essencialmente na produção de código que vai

formar a aplicação final.

17

18 Plano de Trabalhos

5. Realização de testes ao protótipoFase de testes da aplicação desenvolvida com o objectivo de verificar o seu bom funcio-

namento, usabilidade, acessibilidade, se preenche os requisitos iniciais e corrigir possíveis

erros que possam surgir.

6. Escrita da dissertaçãoTodo o trabalho efectuado ao longo do semestre culmina na escrita da dissertação, que

decorre nas últimas semanas da unidade curricular, antes da defesa da mesma.

Versão 0.92 (6 de Julho de 2011)

Planode

Trabalhos19

Figura 4.1: Plano de Trabalhos

Versão

0.92(6

deJulho

de2011)

20 Plano de Trabalhos

Versão 0.92 (6 de Julho de 2011)

Capítulo 5

Conclusão

Interacção humano-computador não é, de todo, algo simples de realizar com sucesso. Como

tal, prevê-se que o trabalho da dissertação seja bastante exigente, especialmente devido à pouca

experiência nesta área. No entanto, seguindo um plano cuidado de todas as fases do trabalho é

meio caminho andado para um bom resultado.

O próprio desenvolvimento, de software já é altamente estruturado, o que facilita o trabalho a

fazer. Por isso é importante seguir todos os passos e executá-los com a máxima atenção possivel

para que não hajam repercussões no resto do trabalho. Um bom estudo do estado da arte também

vai ajudar no desenho do produto pois já se tem uma ideia do que funciona ou não na perspectiva

do utilizador.

21

22 Conclusão

Versão 0.92 (6 de Julho de 2011)

Referências

[1] Helen Sharp e Jenny Preece Yvonne Rogers. Interaction Design: Beyond Human-ComputerInteraction. John Wiley & Sons, 1a edição, 2002.

[2] Digital Preservation (Biblioteca do Congresso Americano). Material exchange format (mxf),Julho 2011. Disponível em http://www.digitalpreservation.gov/formats/fdd/fdd000013.shtml.

[3] SMPTE. Mxf engineering guide, Junho 2011.

[4] Society of Motion Picture e Television Engineers. About smpte, Julho 2011. Disponível emhttp://www.smpte.com.

[5] Wikipedia. Media composer, Junho 2011. Disponível em http://en.wikipedia.org/wiki/Avid_Media_Composer.

[6] Wikipedia. Final cut pro, Junho 2011. Disponível em http://en.wikipedia.org/wiki/Final_cut_pro.

[7] Wikipedia. Java, Julho 2011. Disponível em http://en.wikipedia.org/wiki/Java.

[8] Java (ORACLE). What is swing?, Julho 2011. Disponível em http://download.oracle.com/javase/tutorial/ui/overview/intro.html.

[9] Microsoft. Overview of the user interface development process, Julho 2011. Disponível emhttp://msdn.microsoft.com/en-us/library/ff728828(v=vs.85).aspx.

[10] Common Front Group. The process of user interface design, Julho 2011. Disponível emhttp://cfg.cit.cornell.edu/design/process.html.

23