Interfaces tácteis baseadas em
HTML5/CSS3/JavaScript
Ricardo Jorge Maia e Serra
Mestrado Integrado em Engenharia Informática e Computação Orientador: Teresa Galvão Dias (Professora)
Ricardo Jorge Maia e Serra
Mestrado Integrado em Engenharia Informática e Computação
Aprovado em provas públicas pelo júri:
Presidente: M. Eduarda Rodrigues (Professora Auxiliar) Vogal Externo: Fernando Mouta (Professor Coordenador) Orientador: Maria Teresa Galvão Dias (Professora Auxiliar)
The advent of mobile devices has opened new possibilities for personal and profes-sional use. These devices allow to perform tasks, with the advantage of being easily transportable, so it is interesting to understand which contexts that best applies to their potential.
Professional video production, particularly news production, involves several stages that are dependent on a set of devices and systems. News agencies have a unique im-portance in preparing and editing news. However, the use of the services provided by the news agencies, for TV channels and studios, cause inefficiencies that will be further analyzed and detailed.
The proposed solution, newsRail, aims to promote the optimization of this particular but critical stage of news production workflow. The newsRail is a system of selection, filtering and sorting of various news agencies, such as Reuters or EBU, to be exported directly into editing systems. Tablets allow greater mobility, a factor of increasing im-portance for journalists and reporters, so it would be interesting to develop newsRail for these devices .With the emergence and maturation of technologies HTML5, CSS3 and JavaScript is required to analyze their advantages over other technologies, such Adobe Flash, for touchables devices.
The thesis was proposed by MOG Solutions, a worldwide leader of solutions in the area of TV production. The objectives are the development of a functional User Interac-tion prototype newsRail, aimed for mobile and touchables devices, specifically tablets, and analysis through usability testing, the proposed interaction paradigm.
The first part of this report begins by describing the study and workflow of televi-sion production, as well as the technologies mentioned above, framing the reasons for its emergence and maturation. It was also examined the User Centered Design process, which focuses on the needs and constraints of users. In the second part the newsRail system is described in detail. Requirements are analyzed, as well the expected workflow and architecture. Then are examined the modules that were developed, the major difficul-ties encountered, and a discussion of the results. Finally in the report, are presented the conclusions and the improvements that could be introduced in the future.
O aparecimento dos dispositivos móveis trouxe novas possibilidades de utilização para uso pessoal e profissional. Estes dispositivos permitem a realização de várias tarefas, com a grande vantagem de serem facilmente transportáveis, sendo, por isso, interessante perceber quais os contextos que melhor se aplicam às suas potencialidades.
A produção de conteúdos televisivos, particularmente a produção de notícias, envolve várias fases que estão dependentes de um conjunto de recursos e sistemas. As agências de notícias revestem-se de uma importância única na preparação e edição de uma notícia. Contudo, a utilização dos serviços providenciados pelas agências, por parte dos canais e estúdios de Televisão, acarretam ineficiências que serão analisadas e detalhadas.
A solução proposta, o newsRail, visa promover a optimização desta fase crítica do workflowde produção de notícias. O newsRail é um sistema de selecção, filtragem e or-denação de notícias de várias agências, como a EBU ou a Reuters, para serem exportadas directamente para ambientes de edição. Os tablets permitem uma maior mobilidade, fac-tor de importância acrescida para os jornalistas e repórteres, pelo que se fac-torna evidente o desenvolvimento do sistema para estes novos dispositivos. Com o advento das tecno-logias HTML5, CSS3 e JavaScript é necessário analisar as suas vantagens relativamente a outras tecnologias, como por exemplo o Adobe Flash, para um ambiente de utilização orientado por toques e gestos.
A tese foi proposta pela empresa MOG Solutions, líder mundial de soluções na àrea de produção de Televisão. Os objectivos passam pelo desenvolvimento de uma protótipo funcional da UI do newsRail, orientado para dispositivos móveis, mais concretamente para tablets, e à análise, através de testes de usabilidade, do paradigma de interação pro-posto.
A primeira parte do presente relatório começa por estudar e descrever o workflow de produção de conteúdos televisivos, bem como das tecnologias supracitadas, enquadrando as razões do seu aparecimento e maturação. É também analisado o processo User Cente-red Design, que se foca nas necessidades e restrições dos utilizadores. Na segunda parte, é descrito em pormenor o sistema newsRail, sendo analisados os requisitos, workflow e a arquitectura a ser usada. Em seguida, são examinados os módulos que foram desenvolvi-dos, indicadas as maiores dificuldades encontradas e é feita a descrição dos testes finais. A finalizar o relatório, são apresentadas as conclusões e as melhorias passíveis de serem introduzidas no sistema.
Gostaria de iniciar o presente relatório por agradecer a todos os que contribuíram, com sabedoria e motivação, para a realização do mesmo, bem como para a formação e evolução do seu autor.
Por conseguinte, deixo os meus sinceros agradecimentos:
À Professora Teresa Galvão por toda a sabedoria e auxílio dispensados, sem descurar a grande disponibilidade e compreensão demonstradas.
À empresa MOG Solutions, personificada no Eng.o Pedro Ferreira, Eng.oRui Amor, entre muitos outros, pelo apoio e compreensão demonstrados, bem como o pronto auxílio prestado,e em especial ao futuro Eng.oFrancisco Brito, por toda a paciência demonstrada e pelo conhecimento transmitido, sem o qual não seria possível realizar esta tese.
À minha família, em especial, aos meus Pais e Irmão, por todo o apoio e compreensão demonstrados, assim como todo o carinho, não só nesta mas também nas anteriores etapas da minha vida.
Aos que me ajudaram na jornada académica que agora termina, contribuindo com amizade e companheirismo.
Aos meus amigos, por todos os momentos que passamos e aos que ainda iremos pas-sar, sem os quais tudo isto não faria sentido.
A todos os anteriormente referidos, e aos que, de algum modo, contribuíram para elaboração da presente tese, sendo incompreensivelmente esquecidos, o meu mais sincero e sentido, Obrigado.
1 Introdução 1 1.1 Contexto/Enquadramento . . . 3 1.2 Projecto . . . 4 1.3 Motivação e Objectivos . . . 5 1.4 Estrutura da Dissertação . . . 5 2 Revisão Bibliográfica 7 2.1 Produção de Vídeo profissional . . . 8
2.1.1 Workflow . . . 10
2.1.2 MXF . . . 11
2.1.3 softwareMOG . . . 14
2.2 User Centered Design . . . 19
2.2.1 Metodologias de desenvolvimento de sistemas interactivos . . . . 20
2.2.2 Modelos de Desenvolvimento . . . 23
2.2.3 Conclusões . . . 23
2.3 Tecnologias Multimédia . . . 24
2.3.1 Adobe Flash . . . 24
2.3.2 HTML 5 . . . 25
2.3.3 Análise Comparativa do Flash e HTML 5 . . . 33
2.3.4 Frameworks Mobile HTML5 . . . 36 3 Especificação do Projecto 39 3.1 Produção de Notícias . . . 41 3.1.1 Workflowactual . . . 42 3.2 newsRail . . . 44 3.2.1 Requisitos . . . 44 3.2.2 Workflow do newsRail . . . 46 3.2.3 Arquitectura . . . 47 3.2.4 Mockups . . . 51 3.2.5 Avaliação Heurística . . . 52 4 Implementação do Projecto 55 4.1 Abordagem . . . 55 4.2 Desenvolvimento . . . 56
4.2.1 Autenticação e listagem dos vídeos . . . 57
4.2.2 Filtragem, ordenação e pesquisa dos vídeos . . . 60
4.2.4 Exportação dos vídeos . . . 63
4.2.5 Configuração do newsRail . . . 64
4.3 Testes . . . 65
4.4 Dificuldades encontradas . . . 66
4.5 Conclusões . . . 67
5 Conclusões e Trabalho Futuro 69 5.1 Objectivos cumpridos . . . 70
5.2 Trabalho futuro . . . 71
Referências 73 A Guião da Avaliação Heurística 77 A.1 newsRail . . . 77
A.2 Use cases . . . 77
A.3 Scenarios . . . 78
A.4 Test Goals . . . 79
A.5 Test Conditions . . . 79
A.6 Evaluator activities . . . 80
A.6.1 Evaluating newsRail (individual) . . . 80
2.1 Workflow de produção de Televisão . . . 10
2.2 Estrutura básica do MXF [DWBT06] . . . 12
2.3 Screenshotdo software mxfSPEEDRAIL S1000 . . . 15
2.4 Screenshotdo software mxfSPEEDRAIL F1000 . . . 17
2.5 Screenshotdo software mxfSPEEDRAIL O1000 . . . 18
2.6 softwarebaseado na métadora da calculadora digital . . . 20
2.7 Modelo de design UCD simplificado . . . 22
2.8 Modelo de desenvolvimento Star . . . 23
2.9 Adopção das tecnologias web em Dezembro de 2010. . . 24
2.10 Utilização do HTML 5 para vídeo em iPad . . . 31
2.11 Analogia funcional do HTML, CSS e JavaScript . . . 32
2.12 Validação de um formulário usando JavaScript . . . 33
2.13 Exemplo do CSS3 usado para simular um ambiente MacOS . . . 34
3.1 Workflowde um sistema baseado em tapes [DWBT06] . . . 39
3.2 Workflowde um sistema baseado em ficheiros [DWBT06] . . . 40
3.3 Workflowdo newsRail . . . 46
3.4 Arquitectura do newsRail . . . 48
3.5 Pedidos SOAP e REST do método de login . . . 50
4.1 Exemplo de um pedido inicial de listagem dos assets . . . 59
4.2 Exemplo de uma listagem inicial de assets . . . 60
4.3 Vistas do newsRail . . . 61
4.4 Pré-visualização de um vídeo . . . 62
4.5 Menu de exportação de assets . . . 63
4.6 Estados das exportações . . . 64
2.1 Tabela de compatibilidade do <canvas> [Use11] . . . 27
2.2 Tabela de compatibilidade do Web Storage [Use11] . . . 28
2.3 Tabela de compatibilidade dos Web Workers [Use11] . . . 29
2.4 Tabela de compatibilidade das Offline Web Application [Use11] . . . 29
2.5 Tabela de compatibilidade do <video> [Use11] . . . 32
Abreviaturas e Símbolos
AAF Advanced Authoring FormatAPI Application Programming Interface CRUD Create Read Update Delete
CERN European Organization for Nuclear Research CMYK Cyan Magenta Yellow Key black
CGI Computer-generated imagery CPU Central Processing Unit CSS Cascading Style Sheets DRM Digital Rights Management EBU European Broadcasting Union GPS Global Positioning System
HD High Definition
HSL Hue Saturation Light HSLA Hue Saturation Light Alpha HTML HyperText Markup Language HTTP Hypertext Transfer Protocol IETF Internet Engineering Task Force
INESC Instituto de Engenharia de Sistemas e Computadores do Porto ISO International Standard Organization
ISP Internet Service Provider IPC Interacção Pessoa-Computador MAM Media Asset Management MXF Material Exchange Format NAS Network-attached storage OB Outside Broadcasting PDA Personal Digital Assistant RBGA Red Green Blue Alpha RPC Remote Procedure Call RTP Radio e Televisão de Portugal SDI Serial Digital Interface
SMTP Simple Mail Transfer Protocol SOAP Simple Object Access Protocol SSD Solid-state drive
SSL Secure Sockets Layer UCD User-Centered Design
UI User Interface
VTR Video Tape Recorder
Introdução
O crescimento das Tecnologias de Informação associado ao aumento da capacidade dos computadores, resultou na presença das TI no nosso quotidiano, designada por Com-putação Ubíqua. Hoje em dia, as pessoas estão em constante interacção com sistemas informáticos, muitas das vezes nem se apercebendo de tal. A Informática integrou-se na sociedade e não o contrário como acontecia nos inícios das TI.
A Internet é, porventura, nos dias que correm, a tecnologia de telecomunicação mais em voga e com mais potencial a vários níveis. A massificação dos computadores para uso pessoal levou, nos últimos tempos, a uma proliferação da sua utilização. No início da última década, assistiu-se a um crescimento das velocidades de transmissão de dados dos fornecedores de serviços de Internet, conhecidos por ISPs. Isto permitiu mais e melhores websites, providenciando serviços inovadores que resultaram numa maior adopção para fins pessoais e profissionais. A comunicação via wireless ajudou também a massificar a Internet, dado que é virtualmente possível estar ligado à Web em todos os pontos do globo. Esta tecnologia despoletou o acesso à Internet através duma vasta gama de dispositivos móveis, sendo o portátil o caso mais evidente.
A utilização dada aos dispositivos móveis foi-se alterando ao longo dos últimos tem-pos. No início da década passada, as utilizações eram limitadas, focando-se essencial-mente em funções como chamadas ou agendas electrónicas. Com o evoluir destes dis-positivos, assistiu-se a uma maior panóplia de funcionalidades. Hoje em dia é possível, através de um telemóvel, tirar fotografias, aceder à Internet e ao correio electrónico ou usar o GPS como assistente de navegação. Os equipamentos móveis, face às oportuni-dades que oferecem, são cada vez mais computadores de “bolso”. As possibilioportuni-dades dos dispositivos móveis são enormes, tanto para uso pessoal como profissional. O apareci-mento dos tablets veio revigorar o mercado dos dispositivos móveis, pois são computado-res constituídos por ecrãs tácteis de tamanho médio, com grande potencialidades no que
à interacção diz respeito.
Os equipamentos móveis disponíveis no mercado possuem potencialidades para se tornarem numa ferramenta de trabalho tão, ou mais importante, que o computador de se-cretária ou a impressora. O uso da Internet, do correio electrónico ou de web services nestes equipamentos, possibilita a realização de funções que, muitas das vezes, só po-diam ser executadas dentro do gabinete, cujo processo acarreta ineficiências, elevada de-pendência do posto físico de trabalho, entre outros problemas. A possibilidade de aceder remotamente a aplicações através de web services, faz com que se possa operar de forma contínua e independente da localização, usando um dispositivo móvel com acesso à Web. O sucesso na utilização destes dispositivos foi influenciado por um conjunto de factores. Contudo, é necessário um elevado cuidado na realização de aplicações para este tipo de equipamentos, dado que frequentemente carecem de um teclado físico, o seu ecrã é de dimensões reduzidas e têm baixa capacidade de processamento quando comparados com os computadores tradicionais, o que influencia directamente a experiência de utilização.
No mundo em que vivemos, é necessário melhorar continuamente os processos de tra-balho para as organizações se manterem competitivas e a indústria da Televisão não foge à regra. Tal como as indústrias em geral, esta também foi fortemente afectada pelas TI, o que acarretou mudanças na elaboração e produção de conteúdos televisivos. A melhoria exponencial das capacidades dos computadores, o decréscimo de custo dos mesmos e a cada vez maior velocidade de transmissão de dados por rede, ajudaram à implementação e distribuição dos sistemas de produção baseados em ficheiros, substituindo os sistemas tradicionais de tapes. Todavia seria com o formato MXF que os sistemas baseados em ficheiros começariam a impor-se e a tornar obsoletos as videotapes e os VTRs.
O formato de ficheiro MXF, combina um par de componentes: metadata e um con-junto de áudio e/ou vídeo chamado de essência. O MXF foi desenhado pelas empresas do sector de produção de vídeo profissional, para garantir que o formato iria ser desenvolvido para suprir as necessidades e falhas identificadas nos workflows tape-based [Dev02]. Os requisitos básicos identificados do MXF foram os seguintes: ser um formato aberto, me-lhorar o transporte de metadata e ser livre quanto ao esquema de compressão. Apesar da larga adopção da indústria e do seu sucesso, o MXF apresenta ainda alguns problemas.
Antes da massificação dos dispositivos móveis, o posto de trabalho era visto como o único espaço onde se podiam realizar tarefas no contexto de uma empresa dependentes das tecnologias de informação. Actualmente é necessário potenciar a mobilidade no ramo empresarial, com vista à adequação da volatilidade e ritmo dos mercados actuais. A Televisão é um dos casos mais evidentes, particularmente na produção e publicação de notícias. A imprevisibilidade intrínseca das notícias, é uma das causas da mobilidade que é imposta aos jornalistas. Quando se dá um acontecimento com relevo jornalístico, é necessário que os repórteres se desloquem ao local onde o mesmo ocorreu, usando uma OB Van, que funciona como uma sala de controlo móvel. A produção de material
televisivo fora do estúdio é conhecido por Outside Broadcasting, no entanto, muitas vezes, as redacções recorrem às agências de notícias como a portuguesa Lusa, ou como a inglesa Reuters para terem acesso a conteúdo que, doutra forma, seria fisicamente impossível.
A interacção pessoa-computador é um aspecto importante na utilização eficiente e efi-caz dos equipamentos em geral e pode ser definida como o estudo, planeamento e desenho da interacção entre os utilizadores e computadores. No caso dos dispositivos móveis, a interacção pessoa-computador ganha ainda mais relevância. Tipicamente interage-se de forma táctil, o ecrã pode ser visualizado tanto na horizontal como na vertical e o tamanho do ecrã é reduzido. Devido a estas particularidades, os dispositivos móveis são objecto de um exaustivo estudo na hora de se definir uma aplicação.
Os dispositivos móveis representam assim uma mudança de paradigma na interacção pessoa-computador permitindo um maior acesso às tecnologias de informação graças à possibilidade de desenvolver aplicações mais interactivas e com controlos mais naturais.
1.1
Contexto/Enquadramento
A mudança da indústria de vídeo profissional para os sistemas baseados em ficheiros, permitiu a introdução de soluções TI ao longo de todo o processo de produção, desde a captura passando pelo broadcasting até à fase de arquivamento. A produção de conteúdos audiovisuais é, hoje em dia, mais dinâmica à luz da forte concorrência existente, dentro e fora da Televisão, em particular na produção e difusão de notícias. A existência de no-ticiários em vários canais, à mesma hora, atribui aos redactores, jornalistas e repórteres uma grande responsabilidade sob pena de perderem audiências, caso a qualidade e exac-tidão das notícias não seja a esperada. Uma falha ou uma notícia incorrecta pode causar enormes prejuízos de publicidade, principal fonte de receitas da Televisão. É percetível o quão crucial é a qualidade do workflow de produção de notícias para os canais e estúdios de televisão.
A natureza imprevisível das notícias e as óbvias restrições logísticas e económicas, impõe que os jornalistas e redactores recorram a agências de notícias, como a Reuters, Associated Press ou EBU para acederem a informação sobre uma dada notícia. Cada agência recolhe, prepara e publica as notícias em baskets disponíveis aos redactores dos canais de televisão, que sejam clientes do seu serviço. As notícias são constituídas por um par de vídeo e metadata - assets. Como cada agência tem os seus próprios baskets - torna-se moroso e pouco eficiente, gerir os assets de todas as agências de notícias. A solução proposta visa corrigir estes problemas. Esta solução é um sistema centralizado de pesquisa e selecção de notícias para exportação. Os editores in-house acedem depois ao material exportado, fazendo as edições necessárias, para posterior publicação e arquivo.
Com o surgimento dos tablets, torna-se adequado desenvolver o sistema para estes novos dispositivos, para assim tirar proveito da mobilidade implícita que estes dispositi-vos oferecem relativamente aos computadores e portáteis tradicionais, sem uma redução significativa da capacidade de processamento. A Outside Broadcasting, em particular, evoluirá com o conceito do sistema proposto. A reportagem no exterior pode beneficiar de melhoramentos no workflow, devido à utilização de equipamentos móveis tácteis e da capacidade de aceder aos vários baskets das agências de notícias através dum único sistema, mesmo fora da OB Van.
A presente dissertação foi proposta pela empresa MOG Solutions [FEU11], líder mun-dial em soluções de vídeo baseadas em MXF. A MOG Solutions foi criada em 2002 como resultado de um spin-off do INESC, por uma equipa de investigadores que participaram activamente no desenvolvimento do formato padrão do MXF. A empresa dedica-se ao de-senvolvimento de produtos baseados em ficheiros para a área de produção de Televisão. O objectivo da MOG Solutions é investigar, desenvolver e dar apoio a novas soluções para a indústria de produção e distribuição de conteúdos multimédia [Sol11].
1.2
Projecto
Actualmente os jornalistas necessitam de aceder aos baskets das agências, procurar e assinalar os assets, através de um editor de texto, que desejam utilizar, para depois copiar a referência dos mesmos para o editor de vídeo. Como é habitual uma redacção de notícias ter acesso a vários baskets, pode-se facilmente perceber que o workflow não é o melhor podendo e devendo ser optimizado.
O newsRail é um projecto diferente dos produtos actuais da MOG Solutions, dado que visa exclusivamente os jornalistas e repórteres. O sistema tem como objectivos melhorar o workflow de selecção, pesquisa e publicação de notícias, tornando-o mais eficiente, centralizado e menos propício a erros por parte dos redactores e jornalistas. O newsRail gere os baskets, actualizando-os automaticamente caso surja um novo asset em algum dos baskets. O utilizador pode pesquisar, filtrar e ordenar os assets, de forma a fazer uma selecção mais rigorosa e precisa dos assets que deseja exportar para o editor de vídeo.
O projecto de dissertação proposto consistiu no desenvolvimento de user interfaces, adaptadas aos tablets, para o sistema newsRail. As tecnologias usadas, após deliberação que pode ser consultado na secção seguinte, foram o HTML5, CSS3 e JavaScript. Foram executados testes de usabilidade por forma a avaliar as interfaces implementadas, o que permitiu melhorá-las tendo em conta as sugestões dos avaliadores. O projecto também exigiu o estudo do middleware desenvolvido e utilizado presentemente no newsRail, o Bobsled. O Bobsled é uma framework usada nos produtos MOG, e que foi aproveitada para sustentar o desenvolvimento do newsRail.
1.3
Motivação e Objectivos
Os processos de trabalho necessitam de estar constantemente optimizados, sob pena de exitirem perdas de eficiência e desperdícios de tempo e dinheiro. Em áreas exigentes, como a Televisão, este requisito é ainda mais importante. Hoje em dia o workflow na produção de notícias tem alguns problemas associados, como, de resto, foi evidenciado no subcapítulo anterior. Com a introdução de tablets associado ao uso de aplicações remotas, permite-se uma maior interoperabilidade bem como maior eficiência e eficácia.
O desenvolvimento de interfaces direccionadas para dispositivos com um paradigma bastante distinto dos tradicionais computadores, constituiu um dos maiores estímulos para o autor.
Os objectivos do projecto de dissertação visam o desenvolvimento de interfaces tác-teis para o sistema newsRail e a realização de testes de usabilidade por forma a aferir a interacção dos produtos em dispositivos móveis com ecrãs tácteis.
A primeira parte do trabalho envolveu o estudo do estado da arte, e do middleware em que o newsRail se baseia. Actualmente, os produtos da MOG usam a linguagem Flash e com o surgimento do HTML5 associado ao CSS3 e JavaScript, pretendeu-se avaliar com-parativamente o Flash e o HTML5/CSS3/JavaScript, para aferir qual o melhor paradigma a ser usado para o newsRail.
A segunda fase do trabalho refere-se à implementação das interfaces para o newsRail. Fazem parte dessa fase a especificação dos requisitos, a análise da arquitectura do sistema, e ainda o desenvolvimento de um protótipo funcional, tendo sido realizados testes de usabilidade.
1.4
Estrutura da Dissertação
Neste capítulo foi feita uma contextualização do problema para um melhor enquadra-mento do projecto. Realiza-se a descrição do projecto, bem como a especificação dos objectivos do trabalho proposto.
O capítulo seguinte contém a revisão da literatura relativamente à produção de vídeo profissional, ao formato MXF, às tecnologias web, aos produtos da MOG e à interacção pessoa-computador. Realiza-se ainda uma comparação entre as tecnologias, por forma a aferir qual a mais adequada ao projecto.
No terceiro capítulo é feita a apresentação detalhada ao projecto a implementar, bem como os problemas que este visa colmatar.
O quarto capítulo especifica todos os aspectos e decisões que estiveram envolvidas durante a implementação do newsRail.
O último capítulo tem como objectivo demonstrar as conclusões retiradas sobre o projecto realizado. São descritos os pressupostos que foram alcançados, sendo também
mencionado o trabalho futuro do protótipo desenvolvido, para que o newsRial se torne numa aplicação totalmente funcional.
Revisão Bibliográfica
A Televisão é um dos meios de comunicação com maior impacto nas sociedades ac-tuais. O seu grande impacto deve-se, em larga escala, à transmissão e divulgação de notícias. As notícias televisivas fazem parte do quotidiano dos sociedades ocidentais e, muitas vezes, são a única forma de os telespectadores de conhecerem a actualidade do Mundo. Apesar da grande aceitação e utilização que a Internet teve, e tem, junto das pessoas, cadeias de informação como a CNN e BBC mantenhem-se firmes na sua tarefa principal: transmitir notícias. Nos tempos que correm, as redacções de notícias deparam-se com um grande volume de informação que necessitam de filtrar e editar, tendo por badeparam-se sistemas de ficheiros como editores de vídeo ou software de captura de sinal analógico. Apesar das melhorias que estes sistemas trazem, acarretam grandes desafios, bem como novas possibilidades de automatização e interoperabilidade dos workflows.
Os dispositivos móveis estão hoje muito em voga, devido ao recente lançamento do iPad e do iPhone por parte da Apple e à utilização cada vez maior do sistema operativo móvel Android [Web11]. Os tablets são equipamentos informáticos que abrem um novo paradigma de interacção e de produtividade. São mais pequenos e leves que os computa-dores pessoais e os computacomputa-dores portáteis, permitindo uma maior mobilidade. Os tablets vieram suprir a falha existente entre os smartphones e os computadores. O modo de fun-cionamento dos tablets é em tudo similar aos smartphones. Funcionam por multi toque, oferecendo uma grande panóplia de gestos e toques para interagir com correio electrónico, fotografias ou vídeos.
Aquando do surgimento da Internet, esta era usada pelos utilizadores como uma fonte de informação sobre variados temas. A interacção era pouca ou quase nula e nos raros casos que existia era efectuada através de guestbooks ou formulários enviados via correio electrónico. As páginas web eram estáticas, e providenciavam apenas texto, imagens e links para mais texto e imagens [Wor10].
A Web 2.0 é o novo termo aplicado às mudanças verificadas na Internet ao nível da interacção. Estas mudanças reflectem o surgimento de novas tecnologias que possibili-taram a utilização da Web como uma plataforma interactiva e dinâmica. Foi introduzido por Tim O’Reilly na conferência O’Reilly Media Web 2.0 e, desde então, o termo é usado para descrever a actual era da Internet [O’R10]. Esta nova era caracteriza-se por oferecer novas possibilidades entre as quais se destacam as seguintes:
• Web como plataforma – cada vez mais se usam aplicações web que substituem as aplicações tradicionais de desktop, como são os casos do Google Docs, Wikipedia e do Gmail;
• Colaboração – a informação não é passada exclusivamente para o utilizador, já que os utilizadores são hoje activos na contribuição de conteúdos para wikis, fóruns ou blogs;
• Rich Internet Application – o surgimento de tecnologias como o Adobe Flash, Mi-crosoft Silverlight e Java permitiram a criação de experiências de utilização mais diversificadas e enriquecedoras;
• User-Centered Design – nova filosofia de design que foca o processo nas necessida-des, limitações e desejos dos utilizadores finais, por forma a melhorar a interacção e a experiência de utilização dos produtos.
As Rich Internet Applications (RIA) são tecnologias muito usadas no design de apli-cações web, por oferecerem funcionalidades que hoje são indispensáveis para o utilizador, como é o caso das animações ou dos vídeos.
O presente capítulo irá abordar a produção de vídeo profissional, analisando o work-flow, bem como o formato MXF e o software desenvolvido pela MOG Solutions. Em seguida, é especificada a metodologia user-centered design. Por fim, é dedicado um subcapítulo às tecnologias do projecto, sendo também feita uma comparação entre o HTML5/CSS3/JavaScript e o Adobe Flash.
2.1
Produção de Vídeo profissional
A indústria da Televisão compreende várias àreas de negócio, e é preciso passar por muitas fases para que a imagem e o som chegue ao telespectador. Como todas as indús-trias, a Televisão foi-se adaptando às novas exigências e tecnologias que foram surgindo desde a sua invenção. A Televisão foi afectada por outros media, como é o caso do Ci-nema ou mais recentemente da Internet, o que obrigou ao “pequeno ecrã” a batalhar de forma a não perder mercado para outros meios de comunicação. Se no ínicio da difusão da Televisão, a imagem era a preto e branco e com pouca definição, em pleno século XXI
é possível ao telespectador gravar os conteúdos, visualizar mais que um canal ao mesmo tempo ou ainda ver programas a três dimensões, tudo isto disponível em alta definição.
Apesar de todas as mudanças que ocorreram na forma como hoje vemos Televisão, certos aspectos pouco se alteraram desde o início da massificação da Televisão, como é o caso da produção de conteúdos televisivos. Tal como acontecia nos primeiros tempos de Televisão, em meados do século XX, a criação de um novo programa compreende as fases de planeamento, aquisição de direitos, escrita do guião, casting, filmagens e pos-produção, não obstante o facto de, hoje em dia, todo este processo ser mais complexo e detalhado.
Para a produção de material televisivo eram usadas videotapes, que traziam vários problemas ao workflow, como por exemplo, possibilidade de perdas causadas por erros nas videotapes ou pelas normais conversões de formato. Além disto, a edição de vídeo era feita de forma linear, dada a impossibilidade de aceder directamente a um frame do vídeo, sem primeiro bobinar ou desbobinar a cassete [Cor07].
Com o lançamento do primeiro gravador de vídeo digital, em 1991 [Mot11], a Te-levisão começou lentamente a mudar das tradicionais videotapes para os actuais discos e consequentemente para os sistemas file-based. Contudo seria com o aparecimento do formato MXF, a detalhar no próximo subcapítulo, que os sistemas baseados em fichei-ros começariam a massificar-se dentro dos estúdios e produtoras de Televisão [Fer10]. O MXF foi desenvolvido com o intuito de uniformizar e agilizar o processo desde a captura até ao arquivamento do material, com a vantagem de através das TI, reduzir custos e ma-ximizar os activos, através da disponibilização dos conteúdos nos seus portais web ou em sites de partilha de vídeos como o Youtube ou o Vimeo.
O MXF permite preservar um conjunto de wrappers sobre o áudio e vídeo, fazendo com que a media seja compatível com um maior número de equipamentos. A adopção do MXF, associada à ideia conjunta da indústria da Televisão de convergir para formatos padronizados, contribuiu em larga escala para a desejada melhoria da interoperabilidade nos workflows e automação das suas fases.
Hoje em dia, cada vez mais as videotapes estão a ser substituídas por ficheiros. Os sistemas baseados em ficheiros estão cada vez mais presentes no mundo da Televisão [Kov06], apresentando, no entanto, novos desafios a esta indústria. Muitos destes siste-mas baseados em ficheiros, acedem a diferentes armazenamentos, o que traz problesiste-mas ao nível da duplicação de conteúdos e da diferenciação de formatos para o mesmo con-teúdo, mesmo quando a conversão não é estritamente necessária. Um sistema file-based ideal apresentaria um único e centralizado armazenamento, dado que ofereceria menores requisitos e custos de gestão dos conteúdos, assim como um ponto de acesso universal a todos os equipamentos e ambientes do workflow.
A metadata é outro dos aspectos mais relevantes nos media, não sendo a Televisão excepção. Permitem uma maior organização da informação e, por consequência, melhor
pesquisa e acesso a esta. Com a massificação dos computadores, é hoje possível arma-zenar grandes quantidades de informação, sem implicar um custo significativo associado. No entanto, a falta de uniformização e padrões no uso da metadata, acarreta incompati-bilidades nas descrições da mesma. Além disso, muitas das vezes, a metadata dum dado conteúdo está dispersa em várias partes, o que torna complicado a sua correcta compilação e definição [Dev02].
2.1.1 Workflow
Figura 2.1: Workflow de produção de Televisão
O workflow duma produção de Televisão pode ser dividida em quatro grandes fases: Captura, Edição, Broadcasting e Armazenamento, Figura 2.1.
A fase de Captura, tal como o nome indica, dedica-se à captura do vídeo. O vídeo pode ser capturado através de sinal analógico ou digital e feito o ingest de um digital me-dia, como é o caso dos discos ópticos Sony XDCAM e dos cartões de memória Panasonic P2, ou ainda directamente de uma câmara, através, por exemplo, de uma interface SDI. O ingestdo vídeo é tipicamente feito para um servidor.
A Edição corresponde à preparação dos conteúdos disponíveis, para serem depois vi-sualizados pelos telespectadores. Com o advento dos workflows baseados em ficheiros, hoje em dia é efectuado Non-Linear Editing (NLE) [Dev02]. O NLE constitui uma im-portante mudança no paradigma da edição profissional, permitindo aos editores aceder directamente a qualquer parte dos ficheiros, algo que era bastante moroso e trabalhoso no tempo das videotapes.
Após a edição dos conteúdos, passa-se ao Broadcasting dos mesmos. Assim, o soft-ware de edição exporta as sequências para os servidores de playout e/ou servidores de arquivo, sendo os servidores playout que contêm o audiovisual que será difundido através da Televisão ou de portais Web.
A última fase do processo, destina-se ao Armazenamento dos conteúdos produzidos para um possível uso futuro.
2.1.2 MXF
O formato MXF é um formato aberto direccionado para o intercâmbio de material audiovisual com metadados associados. O MXF foi promulgado por um conjunto de padrões da Society of Motion Picture and Television Engineers (SMPTE) [SMPb]. A SMPTE é uma entidade que se dedica à definição de padrões para as indústrias de media, como a Televisão ou o Cinema.
2.1.2.1 História
A história do MXF remonta a meados da década de 90, quando a indústria televisiva começou a perceber que os benefícios inerentes ao uso das TI na produção de conteúdos multimédia, podendo assim minimizar os problemas associados aos sistemas tape-based. O aumento da capacidade de compressão de vídeo digital, aliado à constante melhoria das velocidades de transmissão de dados e ao decréscimo dos custos de armazenamento, fizeram com que a utilização das TI na produção de conteúdos televisivos se tornasse uma realidade. Além destes factores tecnológicos, foram surgindo novas necessidades dentro da indústria. A NLE estava a tornar-se prática comum, os video servers começavam a ser aceites como substitutos fiáveis dos VTRs, a interoperabilidade entre servidores, works-tations e outros dispositivos de criação de conteúdos audiovisuais era visto como crucial, pois traria maior eficiência ao workflow. Outro ponto-chave para o desenvolvimento do MXF foi a necessidade de um transporte melhorado de metadata. O transporte de meta-datadurante as fases do workflow, permite uma melhor gestão da informação associada à imagem e áudio, eliminando a introdução repetitiva de metadata.
Em 1996, a SMPTE em conjunto com a EBU, reconheceram a necessidade de um for-mato padrão e aberto para a produção de conteúdos multimédia. Os User Requirements foram então definidos em colaboração conjunta com a comunidade de desenvolvimento de conteúdos audiovisuais. Um vasto leque de projectos foram levados a cabo pela in-dústria, o que permitiu estudar e detalhar estes requisitos de forma a serem compatíveis e adequados às necessidades reais e às falhas detectadas no workflow. Em 1997 foram des-critas, pelas duas organizações, os User Requirements [For] que o novo formato deveria endereçar:
• O formato deve guardar a metadata, bem como as componentes de vídeo e áudio; • O formato deve permitir aos utilizadores começarem a trabalhar no ficheiro, mesmo
• O formato deve providenciar mecanismos que permitam a descodificação da infor-mação do ficheiro;
• O formato deve ser aberto e padronizado;
• O formato deve ser simples, permitindo implementações em tempo real.
2.1.2.2 Estrutura
O MXF é um wrapper, como tal tem como funcções encapsular e descrever com precisão um ou mais clips. Os clips ou essências podem ser dados, vídeo, áudio ou uma combinação de todos estes componentes. O MXF é agnóstico quanto ao codec, permitindo encapsular AVC, MPEG-2 ou MP3, sendo assim possível a decoders genéricos acederem aos ficheiros de forma consistente. A estrutura de um ficheiro MXF genérico pode ser visualizada na Figura 2.2.
MXF pode ser visto como uma colecção de dois tipos de packages: • File Packages – representam o source material;
• Material Packages – representam o timeline desejado para output.
Figura 2.2: Estrutura básica do MXF [DWBT06]
Os packages são uma parte constituinte da Structural Metadata. A Structural Metadata descreve o que é que o ficheiro representa, isto é, a sincronização e o timing entre os componentes presentes nas essências. O File Header contém a Structural Metadata, um dos pontos-chave do MXF, o File Body contém a essência e o File Footer representa o fim do ficheiro, ou seja, funciona como um end of file.
Cada item, dentro do MXF, encontra-se codificado segundo Key-Length-Values (KLVs) [SMPa]. O Sistema KLV permite que descodificadores de MXF e programas de processa-mento ignorem chaves que não reconhecem para assim “saltarem” para o próximo item, através do tamanho do item não reconhecido. Caso reconheçam o identificador, lêem o Value e processam-no. O sistema KLV usa um tripleto para especificar cada elemento:
• Key – Identificador do elemento, com 16 bytes; • Length – Comprimento do elemento;
• Value – Valor do elemento, que pode ser video, imagem ou metadados.
As essências do MXF encontram-se estruturadas nos Essence Containers [SMPc]. Os Essence Containers podem ser frame-wrapped, clipwrapped ou custom-wrapped. As frame-wrappedenvolvem cada frame, e o respectivo áudio, dentro de cada KLV. As clip-wrapped reunem todas as frames, ou seja, o clip dentro dum único KLV. Por fim, as custom-wrapper tal como o nome indica, são definidas e descritas pela aplicação que as usa. A sincronização e descrição das essências é controlada por três packages:
• Material Package (MP) – Representam o timeline desejado para output; • File Package (FP) – Contém o áudio/video;
• Source Package (SP) – Contém a derivação do FP.
Cada package é identificado por um UMID [UMI]. O conceito dos packages, constitui parte da Structural Metadata do MXF e tem como objectivo, não só especificar a timeline de saída do ficheiro, mas também detalhar informação fulcral como as características técnicas da media, entre outras. Outro componente dum ficheiro MXF é a Index Table. A Index Table é um mapa que relaciona uma frame com um byte offset, permitindo assim acesso aleatório facilitado a cada frame do Essence Container. Existem dois tipos de essências: Contanst Byte per Element, onde se incluem codecs como DV, DNxHD ou IMX, ou Variable Bytes per Element, cujo maior representante é o Long GoP MPEG. A definição da Index Table em essências CBE é bastante simples, dado todas as frames terem o mesmo tamanho. No caso das essências VBE a definição é mais complexa, pois não é conhecido o tamanho de cada frame, antes de se processar a essência. Desta forma, as Index Tables aparecem depois da essência, dado que só é possível mapear as frames depois de se ter analisado a essência. No caso das CBE, as Index Tables vêm antes das essências, pois não é preciso processá-las para saber a localização e tamanho de cada frame[Fer10].
2.1.2.3 Metadata
A metadata é uma componente fundamental do MXF. Tal como o nome indica, a metadatapode ser definida como sendo dados sobre (outros) dados. É usada em várias indústrias para catalogar o conteúdo e contexto de um conjunto de informação. Existem dois grandes tipos de metadata, com propósitos diferentes, a Structural Metadata e a Descriptive Metadata. A Structural Metadata foi definida anteriormente. A Descriptive Metadata aloja os dados sobre o material, isto é, o vídeo.
No caso específico do MXF, a Structural Metadata informa sobre as essence con-tainers, a identificação dos packages segundo o seu UMID, a história da derivação da informação, isto é, qual o tipo de device utilizado na captura do sinal.
A Descriptive Metadata normalmente armazena informação geral, como localização, data e legendas, podendo, todavia, conter também informação mais específica, consoante o contexto em que está inserido o material, como por exemplo, o registo do momento em que ocorreu um golo, ou a sequência de perguntas e respostas numa entrevista.
2.1.2.4 Conclusões
O MXF é uma pedra basilar em que assentam os sistemas baseados em ficheiros, na produção de Televisão. A definição e adopção de padrões desenhados pela, e para, a Televisão, como é o caso do MXF ou do AAF, ajudaram a indústria a dar um salto qualitativo nos processos de trabalho, além de trazerem associado uma redução de custos significativa. A preservação e declaração da metadata passou também a ser mais facilitada o que possibilita uma melhor gestão da informação, crucial em plena Era da Informação. Do mesmo modo, foi demonstrado também que o MXF, por si só, não resolve todos os problemas e que o seu uso potencia o surgimento de alguns.
2.1.3 Software MOG
Os produtos da MOG inserem-se no mercado de produção de conteúdos multimédia. Existem duas gamas de produtos: mxfSPEEDRAIL S1000/F1000 e mxfSPEEDRAIL O1000, cada um com as suas finalidades e propósitos. A gama do S1000 e F1000 está direccionada para operações de ingest. Ingest, no contexto de produção de conteúdos audiovisuais profissionas, é o processo de transferir e de fazer rewrapping do material capturado, por exemplo, directamente duma interface SDI, ou dum disco óptico, para um armazenamento para ser posteriormente editado e publicado. O mxfSPEEDRAIL O1000 dedica-se ao outgest. Outgest é a operação de transferir e transcodificar os conteúdos dum armazenamento, tipicamente já editados, para os servidores playout, para serem difundi-dos ou para os arquivos, sendo esta a última fase difundi-dos vídeos produzidifundi-dos.
O mxfSPEEDRAIL baseia-se no formato MXF. O mxfSPEEDRAIL S1000 é um sis-tema de captura, permitindo, a partir de um sinal SDI ou HD-SDI, registar a informação multimédia directamente num armazenamento partilhado. O mxfSPEEDRAIL F1000 é um sistema centralizado que permite a transferência de conteúdos entre editores, equi-pamentos, servidores, e outros. O mxfSPEEDRAIL O1000 é um sistema que melhora o workflowatravés da integração com os servidores playout, arquivos e portais de distribui-ção web.
O software opera de forma remota e usa o protocolo SOAP, para efectuar a troca de informação entre servidor e cliente. O formato das messagens é XML, e usa os protocolos
HTTP e RPC para a transferência e negociação das mensagens. Para o front-end dos produtos é utilizada a linguagem Flash da Adobe.
2.1.3.1 mxfSPEEDRAIL S1000
O mxfSPEEDRAIL S1000 é um sistema de captura hardware/software que permite in-gestde inputs SDI e HD-SDI para armazenamento como Avid Unity MediaNetwork/ISIS, discos e-Sata, Omneon MediaGrid, entre outros [Sol10b]. Possibilita também a criação de ficheiros proxy, ou seja, cópias de baixa resolução dos ficheiros de vídeo, em formatos MPEG2 352, MPEG4 H.264 e Avid Web Interplay H.263. Os ficheiros de output gerados podem ter os seguintes formatos:
• MXF Op1a, compatíveis com os produtos Sony; • MXF OPAtom, formato nativo da Avid;
• Quicktime, formato .mov para o Final Cut Pro.
Figura 2.3: Screenshot do software mxfSPEEDRAIL S1000
Vários codecs de vídeo de alta resolução são suportados como é o caso do XDCAM, DVCAM, DVCPRO, AVC, entre outros. No caso dos codecs de áudio, o PCM - 24bits @ 48KHz é suportado pelo S1000, possibilitando o input de até 12 canais de aúdio embebi-dos. Os maiores benefícios do S1000 são os seguintes:
• Edição enquanto captura o sinal - permite que, enquanto os ficheiros estão a ser in-geridos para o armazenamento, o editor possa trabalhar sobre eles, poupando tempo: • Suporte multi formato e multi resolução;
• Multi destino - permite escrever em vários armazenamentos ao mesmo tempo; • Gestão e automação dos processos - suporta a gestão feita pelas MAMs, que
consis-tem em tarefas e decisões de gestão relacionadas com todo o workflow da produção de conteúdos multimédia.
A interface do S1000, na Figura 2.3, disponibiliza as seguintes funcionalidades: • Video Monitor - onde é visualizado o ficheiro vídeo enquanto se captura o mesmo; • Controlo VTR - permite o controlo sobre o vídeo através de butões de Play, Stop,
Forward, entre outros; • Visualização do timecode;
• Editor de layouts - possibilita o redesenho da interface; • Autenticação dos utilizadores.
2.1.3.2 mxfSPEEDRAIL F1000
O mxfSPEEDRAIL F1000 é um sistema file-based, que permite aos profissionais in-gerir HD, SD e ficheiros proxy como por exemplo Sony XDCAM, Panasonic P2 em vários tipos de armazenamento e equipamentos. O sistema detecta quando surgem novos conteúdos nos devices ou nas pastas que estão a ser monitorizadas e exporta usando os wrappersAvid OPAtom ou MXF OP1A, para vários tipos de armazenamento como Avid Unity MediaNetwork, Avid Unity ISIS ou um disco e-Sata.
Os inputs suportados para exportação são: • XDCAM;
• DVCPRO, DVCPRO 50, DVCPRO HD; • MXF OP1A;
• AVC-I; • QuickTime.
Como se trata de um sistema de ingest, tal como o S1000, o mxfSPEEDRAIL F1000 também oferece ao utilizador:
Figura 2.4: Screenshot do software mxfSPEEDRAIL F1000
• Multi-destino - permite escrever em vários armazenamentos ao mesmo tempo; • Gestão e automação dos processos - suporta a gestão feita pelas MAMs, que
consis-tem em tarefas e decisões de gestão relacionadas com todo o workflow da produção de conteúdos multimédia.
A principal diferença entre o F1000, na Figura 2.4, e o S1000 é a fonte dos inputs: o F1000 destina-se a ingest de ficheiros, enquanto o S1000 destina-se a ingest de interfaces SDI e HD-SDI.
2.1.3.3 mxfSPEEDRAIL O1000
O mxfSPEEDRAIL O1000 é um sistema hardware/software de outgest, isto é, permite exportar e publicar, sobre sequências Avid em ficheiros do formato MXF OP1a [Sol10a]. Os ficheiros podem ser exportados para um conjunto de armazenamentos como o Avid Unity MediaNetwork/ISI eo, Omneon MediaGrid. Opcionalmente, podem ser geradas versões web dos ficheiros para posterior publicação na Internet.
Os inputs suportados para exportação são mencionados em seguida: • IMX 30/40/50;
• DVCPRO, DVCPRO 50, DVCPRO HD; • DNxHD;
Figura 2.5: Screenshot do software mxfSPEEDRAIL O1000
• AVC-I;
• MPEG Long GOP.
Através da exportação, os ficheiros gerados podem ser: • MXF OP1a para publicação;
• MP4 (H.264) para visualização online; • Proxy H.263 para ficheiros proxy.
O sistema suporta dois modos de funcionamento: o editor de vídeo, e o browser, através de web services, que ser visto na Figura 2.5. Os principais beneficios do O1000 são:
• Compatibilidade multi formato e multi resolução;
• O uso do editor de vídeo para operações de outgest deixa de ser necessário; • Inexistência de perda de qualidade relativamente ao original;
• Possibilidade de outgest em várias sequências Avid ao mesmo tempo; • Automação da exportação das sequências Avid;
• Automação do workflow, devido à fácil integração com os servidores playout, ar-quivos e portais de distribuição online.
2.1.3.4 Conclusões
A MOG, com o mxfSPEEDRail, oferece um sistema de integração de todas as fases da cadeia de produção - captura, edição, distribuição e arquivo. Os produtos mxfSPEEDRail são dos mais avançados no mercado de sistemas file-based, tendo ganho inúmeros prémios da especialidade [Tec].
2.2
User Centered Design
A Interacção Pessoa-Computador é a ciência que estuda a relação entre os utilizadores e os equipamentos, e comporta o estudo, planeamento e desenho da interacção entre os dois actores [RSP02]. Os objectivos da IPC são desenvolver produtos:
• Fáceis de aprender; • Eficientes de utilizar;
• Enriquecedores ao nível da experiência de utilização.
Perceber e conceptualizar a interacção é um aspecto de extrema importância na IPC [RSP02]. Primeiro é necessário analisar o problem space, ou seja, conceptualizar o que se irá criar e o porquê de se estar a criar. Para analisar o problem space, é preciso:
• Conhecer o que se deseja criar - uma nova interface para um produto existente, como é o caso deste projecto, uma nova forma de completar uma tarefa, etc.;
• Definir as assunções - o que é que se assume que o produto vai providenciar; • Definir as afirmações - o que é que se pode afirmar em relação ao produto.
O modelo conceptual é uma descrição de alto nível de como o sistema funciona e está organizado. Metáforas e analogias são usadas para perceber qual o(s) objectivo(s) do sistema e como este funciona. Existem duas formas de descrever os modelos conceptuais baseados:
• Em actividades: através de instruções, conversação, manipulação, navegação ou exploração;
• Em objectos (metáforas): através de folhas de cálculo, desktops, árvores, calculado-ras - Figura 2.6, entre outros.
Normalmente os sistemas são descritos por modelos conceptuais híbridos como é o caso do Windows onde existe manipulação de menus, ícones e pastas, bem como instru-ções através de atalhos do teclado ou pela introdução de comandos na linha de comandos.
Os sistemas também podem ser definidos por metáforas, para uma maior facilidade de aprendizagem de um novo sistema, baseando a interacção do mesmo em modelos bem conhecidos. No entanto, podem surgir problemas devido às limitações do designer. Os utilizadores podem usar o sistema de forma literal à metáfora ou, dos objectos em que os sistemas se baseiam, já que muitas das vezes não oferecem todas as formas de interacção levando à quebra de regras e consequente falha no modelo.
2.2.1 Metodologias de desenvolvimento de sistemas interactivos
Desenvolver um projecto implica ter uma metodologia por forma a atingir os objecti-vos propostos. No início dos anos 80, as metodologias eram baseadas na crença que os processos cognitivos eram quantificáveis e previsíveis resultando em interfaces pouco in-tuitivas e onde os utilizadores não tinham qualquer envolvimento durante todo o processo de design. As primeiras metodologias obrigavam os utilizadores a envolverem-se com o sistema, e não o contrário. As metodologias actuais focam-se no constante feedback e interacção dos utilizadores com os designers culminando em interfaces mais intuiti-vas e agradáveis, pois os sistemas interagem da forma como os utilizadores preferem, tornando-os mais eficientes e efectivos.
Figura 2.6: software baseado na métadora da calculadora digital
A metodologia User Centered Design (UCD), Figura 2.7, está muito em voga nos tempos que correm [RSP02]. A filosofia por detrás desta metodologia baseia-se, tal como o nome indica, no envolvimento dos utilizadores durante todo o processo. Os princípios em que a UCD assenta são:
• Focar desde o início nos utilizadores e tarefas;
• Medição empírica - observar, registar e analisar o comportamento dos utilizadores quando expostos a manuais, protótipos e cenários;
• Design iterativo - o processo de design é cíclico e em todas as iterações o processo caracteriza-se por: primeiro, desenhar a interface; segundo testar a interface com os utilizadores; terceiro análisar os resultados do teste e por fim repetir do processo. Este termina quando a interface é satisfatória para os utilizadores envolvidos. Os utilizadores envolvidos no processo de design têm um papel fundamental, pois permitem gerir a expectativa de uma melhor forma e também pelo sentido de propriedade que os utilizadores adquirem ao estarem envolvidos no desenvolvimento do produto. As actividades principais do processo UCD são:
1. Perceber as restrições/contexto; 2. Analisar os utilizadores;
3. Analisar as tarefas; 4. Alocar as tarefas;
5. Definir o(s) critério(s) de usabilidade;
6. Desenhar a interface - incluindo ajuda e documentação; 7. Construir e testar protótipos;
8. Construir e testar a aplicação;
9. Lançar, actualizar e manter a aplicação.
A primeira actividade consiste em definir o tipo de utilizadores e o tipo do produto a ser desenvolvido. Na primeira actividade, é também fundamental definir as restrições ao nível do custo e planeamento, bem como as restrições ao nível de software/hardware.
A segunda actividade está relacionada com o estudo das características, capacidades e necessidades dos utilizadores.
A terceira actividade dedica-se ao estudo das tarefas a serem executadas pelo produto. A comunicação e a observação dos utilizadores a executarem as tarefas é essencial para uma melhor análise. A classificação das tarefas em critérios como frequência de utiliza-ção, complexidade e experiência necessária para completar as mesmas é importante para perceber como deve o sistema abordar determinada tarefa.
A alocação de tarefas implica decidir quem ou o quê está talhado para realizar deter-minada tarefa. O produto deve ter mecanismos que realizem partes da tarefa, da mesma
Figura 2.7: Modelo de design UCD simplificado
forma que o utilizador deve ter mecanismos para completar as tarefas. Um exemplo é um sistema de login, onde o sistema regista e apresenta o username ao utilizador e o utilizador escreve a palavra-passe para se validar.
Na quinta actividade, são definidos os critérios de usabilidade, ou seja, as métricas que serão usadas para avaliar a usabilidade do produto. Os critérios podem ser tão vastos como executar uma tarefa em menos de "x"segundos ou guardar um documento online passado "y"segundos da última modificação.
A sexta actividade consiste no design da interface. Esta actividade implica ter feed-back por parte dos utilizadores, apresentando protótipos aos utilizadores envolvidos no processo, fazendo uma observação à utilização bem como a realização de um pequeno questionário. É um processo iterativo dado que o feedback tem um papel importante no redesenho do produto, pois só assim se consegue ter um produto utilizável.
A construção e teste de protótipos é uma actividade que se destina a criar e a testar protótipos baseados na tarefa anterior. Tal como o design da interface, é um processo iterativo onde são primeiro usados protótipos de baixa fidelidade criados através de, por exemplo, papel e caneta e depois são construídos protótipos de alta-fidelidade que já são semelhantes ao produto final. A evolução dos protótipos só é possível através de testes com os utilizadores por forma a obter feedback objectivo e subjectivo.
A oitava actividade é dedicada ao desenvolvimento e teste da aplicação final. Para tal é imprescindível repetir os ciclos de teste e desenvolver o produto de acordo com os resultados dos mesmos. A atenção deve estar focada primeiro nas funcionalidades e só depois na interface.
produto ser competitivo é necessário actualizá-lo e mantê-lo, não só a nível das funciona-lidades mas também ao nível do design.
2.2.2 Modelos de Desenvolvimento
Os modelos de desenvolvimento de software especificam como as actividades se in-terligam, funcionando como ferramentas de gestão de projectos. Existem vários modelos como Modelo em Cascata, Modelo em Espiral ou modelos mais ágeis como Extreme Pro-gramming ou Scrum. Além dos modelos de desenvolvimento de software, que se aplicam à produção de software, existem também modelos de sistemas de interacção baseados na abordagem User Centered Design. São os casos do modelo Star, Soft Systems Metho-dology ou o Participatory Design. Estes modelos são complementares aos modelos de desenvolvimento de software acima definidos, e descrevem a forma como os princípios e as actividades da UCD se relacionam.
Figura 2.8: Modelo de desenvolvimento Star
O modelo Star, ilustrado na Figura 2.8, é orientado ao desenvolvimento de sistemas interactivos utilizáveis pelas pessoas. Foi criado em 1989 por Hartson e Hix, e tem a avaliação como principal actividade. Não existe uma ordem sequencial de actividades a serem executadas, podendo começar-se com qualquer actividade. Este modelo surgiu de estudos empíricos de designers realizados pelos investigadores.
2.2.3 Conclusões
O UCD é uma das novas forças da Web 2.0 pois os seus príncipios e actividades focam-se nos utilizadores e não nos sistemas, o que permite desenhar aplicações web mais apelativas. A metodologia User Centered Design resultou do esforço na mudança dos paradigmas de interacção e design, facilitando o uso dos sistemas e consequente adopção, particularmente das aplicações na web.
2.3
Tecnologias Multimédia
2.3.1 Adobe FlashO Flash é um tecnologia multi plataforma introduzida em 1996 pela Macromedia. Actualmente é distribuída e desenvolvida pela Adobe Systems, empresa responsável pelo desenvolvimento e actualização de software como o Adobe Photoshop, Adobe InDesign ou o Adobe Premiere Pro. O Adobe Flash permite a introdução de vídeos, animações, jogos em aplicações web [Sys11a]. Utiliza desenho vectorial ou bitmaps para animar os conteúdos. Os ficheiros Flash são, tradicionalmente, em formato SWF e necessitam do plug-in Adobe Flash Player instalado para se tirar partida da tecnologia. O Adobe Flash contém a linguagem orientada a objectos ActionScript, usada como suporte ao desenvol-vimento de aplicações web com Flash, um pouco à semelhança do JavaScript, dado que ambas provêm do ECMAScript.
Figura 2.9: Adopção das tecnologias web em Dezembro de 2010.
É uma das tecnologias web mais presentes nos desktops. Para se tirar partido das aplicações desenvolvidas em Flash é necessário ter-se o Adobe Flash Player instalado. O Adobe Flash Player está disponível para plataformas Windows, Mac OS, Android ou Symbian, entre outras. Segundo um estudo, que pode ser visto na Figura 2.9, realizado pela empresa Millward Brown em Dezembro de 2010, o Flash Player está presente em quase 100% dos computadores, o que espelha bem a proliferação da tecnologia da Adobe. A última versão do Adobe Flash Player é a 10.2 [Sys11b], e disponibiliza novas funci-onalidades que vêm responder aos apelos dos programadores. O suporte dos dispositivos móveis baseados em Android, BlackBerry e Palm webOS é uma das grandes novidades, pois permite interagir através de multi toque e gestos, introduzir texto pelo teclado vir-tual, ler os valores do acelerómetro para controlar, por exemplo, a orientação do ecrã. É
possível também usar o codec H.264 nos vídeos, o que traz uma melhoria de performance essencial para os dispositivos móveis. Novos efeitos estão disponíveis como o efeito 3D, blurou glow para a criação de experiências cinemáticas.
A utilização do Flash para a visualização de vídeo é uma das funcionalidades mais usadas. Está presente em sites como Youtube.com, metacafe.com, Yahoo! video ou Reu-ters.com. O formato de vídeo é .flv ou .fvp. O codecs video suportados além do H.264 são:
• Sorenson Spark • On2 VP6
A protecção de conteúdos, é uma das razões para a adopção do Flash na visualização de vídeos, dado que permite aos administradores evitarem a cópia de informação. A possibilidade de ver um vídeo em full screen, é outros dos benefícios do Flash. Desde a versão 10.1, o Flash permite aceleração por hardware, através do GPU, diminuindo o overhead.
O Adobe Flash é uma tecnologia bastante sólida e massificada nos computadores para uso pessoal. As suas potencialidades são enormes, e qualquer browser é suportado pelo Adobe Flash Player, o que transforma o Adobe Flash numa tecnologia ganhadora.
2.3.2 HTML 5
2.3.2.1 História
A linguaguem markup utilizada na World Wide Web é o HyperText Markup Lan-guague. Uma linguagem markup é definida por um conjunto de tags e o HTML utiliza diferentes tipos de tags para descrever uma página web. Uma tag é um elemento descritor entre < >. Os documentos HTML são interpretados pelos browsers, que posteriormente criam uma página web com elementos visuais e/ou auditivos associados. Uma página web pode conter vários elementos multimédia como imagens, texto, animações, entre outros.
O HTML foi escrito por Tim Berners-Lee em 1989 no European Organization for Nuclear Research, mais conhecido por CERN. Surgiu da necessidade de colaboração na investigação da Física de Partículas [W3C98]. Nos primeiros anos, o HTML sofreu mui-tas mudanças e revisões, primeiro no CERN e depois no Internet Engineering Task-Force (IETF). Em 1995 foi lançado o HTML 2.0 pela IETF.
Em 1994 a criação da World Wide Web Consortium (W3C), com o purpósito de de-senvolver protocolos e criar guidelines para assegurar o crescimento a longo-termo da Internet, o desenvolvimento do HTML passou da IETF para a equipa da W3C, liderada por Tim Berners-Lee. O HTML passou por várias versões, até ser publicada como um standardinternacional ISO/IEC. A versão em causa data de Maio de 2000, sendo a versao 4.01
O HTML 5 começou a ser desenvolvido em Junho de 2004 pela W3C em conjunto com a WHATWG. O primeiro draft do HTML5 foi lançado em Janeiro de 2008. O HTML 5 ainda está a ser desenvolvido e encontra-se em fase Last Call, segundo a WHATWG [WHA11a]. Diferentes partes do HTML 5 encontram-se em diferentes níveis de matu-ridade. Existem funcionalidades que podem já ser usadas como é o caso do <canvas> e existem outras que ainda estão a ser desenvolvidas e podem mudar. As fases de desenvol-vimento, definidas pela WHATWG, para as funcionalidades são:
• First Draft - fase inicial;
• Working Draft - fase inicial, mas mais madura relativamente ao First Draft; • Last Call - fase bastante avançada, mas existe feedback a ser processado;
• Awaiting implementation feedback - fase avançada, mas pode ser alterada em função da resposta dos programadores;
• Implemented and widely deployed - fase de conclusão.
HyperText Markup Languague 5 é a próxima geração da linguaguem markup standard utilizada nos websites [Ove11]. O HTML 5 é uma open plataform tal como as versões anteriores, não necessitando de software licenciado para se usufruir. A único requisito é usar um browser recente, tal como o Google Chrome ou o Mozilla Firefox. Os docu-mentos HTML 5 além de incluírem tags para definir textos e imagens, possibilitam novos elementos como vídeo e áudio. As novidades desta nova linguagem não se esgotam na adição de vídeo e áudio. Apesar de nem todos os browsers suportarem o HTML 5 to-talmente, dado que este ainda está a ser desenvolvido, alguns browsers já suportam um conjunto interessante destas novidades. De seguida, serão apresentadas as novas funcio-nalidades que o HTML 5 oferece actualmente, e no final de cada uma será apresentada a compatibilidade desse elemento com os browsers actuais.
2.3.2.2 Canvas
O elemento <canvas> é definido como um bitmap dependente da resolução que pode ser usado para renderizar gráficos, jogos ou outros elementos visuais em tempo real [Pil10]. O <canvas> é, nada mais nada menos, que um rectângulo que pode ser mani-pulado através do JavaScript para se desenhar algo. O rectangulo é um sistema bidimen-sional de coordenadas X e Y com tamanhos x1 e y1, sendo o ponto (0,0) o canto superior esquerdo e o ponto (x1,y1) o canto inferior direito. Pode-se pensar no <canvas> como o Microsoft Paint, sendo o JavaScript o conjunto de ferramentas que possibilita o desenho na superfície branca.
O <canvas> tem muitas potencialidades pois possibilita a construção de formas, cami-nhos, arcos, curvas quadráticas e de bezier além de outros elementos. É também possível adicionar efeitos aos gráficos como gradientes, sombras ou transparências.
As animações também estão presentes no HTML 5, através do <canvas>. Isto é feito através do redesenho das formas, para assim dar a sensação de estarem animadas. Con-tudo a falta de uma API específica para animações, faz com que se tenha de estar cons-tantemente a actualizar os timers e outros eventos.
Além do desenho de formas no espaço <canvas> é também possível inserir texto. Pos-sibilita o controlo da fonte (tamanho, estilo, altura, entre outros), o alinhamento do texto, e o baseline atributo controla o local onde o texto é desenhado relativamente ao ponto de partida. Este texto não pode, contudo, ser modificado usando os atributos tradicionais do CSS.
O <canvas> encontra-se actualmente na fase de desenvolvimento Working Draft.
Tabela 2.1: Tabela de compatibilidade do <canvas> [Use11]
IE Mozilla Apple Google Opera iOS Android 9 Firefox 4 Safari 5 Chrome 10 11 Safari 4.2 Browser 2.3
Suportado X X X X X X X
Não suportado
2.3.2.3 Web Storage
O armazenamento local de informação nas aplicações web, era assegurado, até à pouco tempo, unicamente pelos Cookies. Os Cookies têm contudo algumas falhas:
• O tamanho dos Cookies é de cerca de 4KB, que era adequado nos inícios da Web, mas actualmente é insuficiente pois as velocidades de Internet são bastante mais rápidas e as aplicações web são mais pesadas que nunca, não sendo possível, muitas das vezes, armazenar toda a informação necessária;
• Os Cookies são enviados em todos os pedidos HTTP, transmitindo informação re-dundante o que leva a um desperdício da velocidade de Internet;
• Caso o website não esteja encriptado segundo os protocolos SSL, os Cookies são encaminhados de forma desencriptada levando a um risco de segurança.
O Web Storage é definido como o armazenamento de informação persistente de pares key-value nos browsers [Pil10].O Web Storage veio colmatar estas falhas. Possibilita o armazenamento até 5 MB de informação nos browsers Opera, Google Chrome, Mozilla Firefox, e até 10 MB no Internet Explorer 9. A informação não é sempre enviada para o
servidor, ficando unicamente acessível no cliente. Apesar do servidor não poder escrever directamente no Web Storage pode enviar pedidos de escrita e leitura quando necessários, através de JavaScript.
Existem duas formas de armazenamento de informação: local e sessão. O armazena-mento local caracteriza-se por ser exclusivo para cada domínio e a informação disponível persiste depois do browser ser fechado. O armenazenamento de sessão é usado para cada página e domínio e tem uma duração limitada ao tempo de vida da página.
O Web Storage encontra-se na fase Working Draft.
Tabela 2.2: Tabela de compatibilidade do Web Storage [Use11]
IE Mozilla Apple Google Opera iOS Android 9 Firefox 4 Safari 5 Chrome 10 11 Safari 4.2 Browser 2.3
Suportado X X X X X X X
Não suportado
2.3.2.4 Web Workers
A adição dos Web Workers é uma funcionalidade bem-vinda num mundo cada vez mais tecnlógico. Web Workers são, à imagens das threads, unidades de processamento mais pequenas que permitem executar scripts de forma paralela [W3C11b]. Thread é definido como a forma de dividir um processo em duas ou mais tarefas para serem assim realizadas concorrentemente.
Os Web Workers permitem que, enquanto uma página está a ser carregada, o utilizador consiga navegar na página web, clicar ou fazer scroll na mesma. Tal é interessante quando temos uma página com várias operações a serem efectuadas simultaneamente, como cál-culos matemáticos, carregamento de múltiplos vídeos HTML 5, e ainda o desenho de uma animação complexa usando o <canvas>.
Existem dois tipos de Web Workers: dedicated workers e shared workers. Os primei-ros, depois de criados, estão conectados com o seu criador, contudo podem comunicar com outros workers. Os shared workers uma vez criados, qualquer script em execução na mesma origem pode obter uma referência para o worker e comunicar com ele.
O uso dos Web Workers deve ser restringido, pois a sua utilização implica gastos avultados de memória e CPU. Deve ser usado um número limitado de Web Workers, pois um elevado número de Web Workers pode ter um resultado inverso ao esperado, ou seja, a performance pode-se degradar. Os Web Workers encontram-se na fase Working Draft.
Tabela 2.3: Tabela de compatibilidade dos Web Workers [Use11]
IE Mozilla Apple Google Opera iOS Android 9 Firefox 4 Safari 5 Chrome 10 11 Safari 4.2 Browser 2.3
Suportado X X X X
Não suportado X X X
2.3.2.5 Offline Web Applications
Enquanto se está online os recursos, onde se incluem páginas HTML, imagens ou ficheiros CSS, são descarregados para visualização destes no browser. Quando se fica offline a meio do carregamento da página web, o mais provável é não conseguirmos visu-alizar e interagir com os recursos até a ligação à Internet volte. Com o HTML 5 pode-se agora aceder offline ao correio electrónico, continuar a jogar um jogo online em Flash por exemplo ou acabar de ver um vídeo.
As Offline Web Applications funcionam através dum ficheiro manifest que lista os ficheiros necessários para a aplicação web funcionar em offline [Pil10]. O browser, caso suporte esta funcionalidade, guarda uma cópia dos ficheiros listados para serem usados em modo offline. Com o Web Storage, é possível guardar localmente informação e estados associados aos recursos que usamos enquanto trabalhamos offline, para depois enviar e sincronizar com o servidor. O Google Gears ou o Google Docs são exemplos do uso de Offline Web Applications.
A Offline Web Application encontra-se na fase Working Draft.
Tabela 2.4: Tabela de compatibilidade das Offline Web Application [Use11] IE Mozilla Apple Google Opera iOS Android
9 Firefox 4 Safari 5 Chrome 10 11 Safari 4.2 Browser 2.3
Suporte total X X X X X X
Não suportado X
2.3.2.6 Video
A visualização de vídeos e filmes na Internet já está presente há alguns anos. O site de streaming de vídeos Youtube.com é um dos casos de sucesso mais evidentes. Os ví-deos na Internet são tipicamente disponibilizados através de plug-ins como o QuickTime, RealPlayer ou o Adobe Flash, que por sua vez, estão integrados nos browsers. O You-tube.com, por exemplo, dispõe os seus vídeos aos utilizadores através do Adobe Flash. A origem destes plug-ins surgiu da necessidade de ver vídeos online e da falta de suporte do HTML da altura. Com a introdução do HTML5 e o aparecimento da tag <video>, é agora, em teoria, possível ver vídeos sem ser necessário utilizar um dos plug-ins mencionados
