PROJECTO MULTIMDIA

METODOLOGIA PROJECTUAL

FBAUL: 15.MAI09. A&M2 bibliografia principal: Ribeiro, Nuno 2007. Multimdia e Tecnologias Interactivas (2 ed. actualizada). FCA Editora de informtica: Lisboa img: Field-Work@Alsace. Masaki Fujihata. 2005

CONCEITOS DEFINIES
Multimdia: Projecto Multimdia:
Concepo da estrutura lgica do espao de informao que ser fornecido ao utilizador. Disposio espacial e temporal dos contedos Composto por: + mensagem + contedos + navegao + interface + aplicao multimdia

Combinao de vrios tipos de media para a apresentao da informao

Interactividade:

Controla a apresentao e a combinao dos media em resposta aos comandos do utilizador

AUTORIA
Autoria em projecto multimdia Utilizao de dois tipos de software: 01. programas para a criao de contedos digitais .......sistemas ou ferramentas de autoria de contedos 02. programas para a integrao ou combinao dos media .......sistemas ou ferramentas de autoria multimdia .......dispem os vrios media no espao e no tempo e permitem a adio de comportamentos interactivos

Contedos Multimdia: + Imagens bitmap + Grficos vectoriais + Texto e composio grfica + Vdeo Digital + Audio digital e sntese musical + Animao 2D e 3D

Aplicaes Multimdia: + Aplicaes stand-alone ou de distribuio offline (CD, DVD) + Aplicaes em rede ou de distribuio online: HTML ou multimedia player (flash player + shockwave player + quicktime Player)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PROJECTO MULTIMDIA Gesto e desenvolvimento

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Conjunto de actividades que permitem planear, conceber, produzir, testar e distribuir uma aplicao multimdia interactiva

FASES de desenvolvimento
01. anlise e planeamento 02. concepo ou design da aplicao 03. produo 04. teste e validao 05. implementao, distribuio e manuteno
_ As fases descritas sobrepem-se (no precisamos de terminar por completo uma para iniciar a seguinte) e so iterativas (podem desenvolver-se de forma no-sequencial)

FASES de desenvolvimento
01. anlise e planeamento:
Produo do plano do projecto:

02. + concepo ou design da do aplicao definio da mensagem e objectivos sistema 03. 04.
+ classificao e sistematizao de ideias e tpicos, brainstorming produo + calendarizao de tarefas + planeamento de competncias e recursos: teste ee validao humanos suas competncias, os equipamentos e os servios + estimativas de custos

05. implementao, distribuio e manuteno

FASES de desenvolvimento
01. anlise e planeamento: 02. concepo ou design da aplicao 03. Produo produo do guio da aplicao multimdia e de um prottipo:
detalhame as ligaes entre os vrios ecrs 04. teste validao

+ mapas ou esquemas de navegao:

deve incluir um ndice e um fluxograma que especifica o fluxo lgico da interface

storyboard: 05. + implementao, distribuio e manuteno constitudo por esquemas e descries que caracterizam com grande detalhe
cada unidade de combinao e apresentao de informao (ecr) em termos dos seus contedos multimdia (imagens, animaes, vdeo, audio, grficos e texto) e dos itens de navegao

+ guio do design tcnico:

descreve o modo como a aplicao ser desenvolvida, bem como as ferramentas e sistemas de autoria a utilizar

+ desenho dos ecrs-tipo da aplicao multimdia + concepo da aplicao multimdia interactiva

FASES de desenvolvimento
01. anlise e planeamento: 02. concepo ou design da aplicao 03. produo 04. Criao teste dos e validao contedos e da aplicao multimdia 05. + implementao, autoria de contedos distribuio e manuteno
recolha ou aquisio ou criao de contedos

+ autoria da aplicao

combinao dos contedos atravs de um sistema de autoria ou de linguagens da programao numa aplicao multimdia interactiva

+ produo da verso completa da aplicao multimdia

FASES de desenvolvimento
01. anlise e planeamento: 02. concepo ou design da aplicao 03. produo 04. teste e validao 05. + implementao, distribuio e manuteno correco dos erros e inconsistncias da aplicao
+ processo de teste da interface e da funcionalidade da aplicao + controlo da conformidade da aplicao aos objectivos iniciais + funcionamento da aplicao nas plataformas de destino + avaliao dos requisitos impostos pelos utilizadores + produo da verso final da aplicao multimdia

FASES de desenvolvimento
01. anlise e planeamento: 02. concepo ou design da aplicao 03. produo 04. teste e validao 05. implementao, distribuio e manuteno
Realizao da aplicao sob a forma de produto final Colocao da aplicao num suporte para a distribuio: + online
redes locais, Internet, web

+ offline

utilizao de suportes de armazenamento digital: discos pticos como cds e dvds

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

fase 1 Anlise e Planeamento

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Objectivo:
+ anlise crtica dos vrios elementos que compem

uma ideia genrica: conceito ou tema de ideias associadas com o conceito Elementos:

+ resumir, classificar e gerar um conjunto alargado

+ definio dos objectivos a atingir + requisitos da aplicao final + plano de trabalho

Metodologia: a. Criatividade:
Criao de diagramas, mapas mentais ou esquemas de ideias + ideia genrica inicial + brainstorming + refinamento da(s) ideia(s)

b. Planeamento:
+ Quais as competncias necessrias
escrita, arte grfica, edio audio, produo de vdeo e animao, etc. Pode ser til o desenvolvimento de uma tabela de competncias com as vrias funes a desempenhar (gestor de projecto, programador, designer grfico) para a gesto e seleco dos recursos humanos necessrios enumerao, tempo para o seu desenvolvimento e recursos associados (humanos, equipamento) estimativa de custos envolvidos nas vrias fases (recursos humanos, hardware, software)

+ Planeamento das tarefas: + oramento:

+ primeiras configuraes grficas + primeiros esboos de sistemas de navegao + criao de um prottipo rudimentar da aplicao multimdia

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

fase 2 Design

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Objectivo: + concepo da funcionalidade e configurao da aplicao multimdia Os designers devem reconhecer as potencialidades e limitaes das tecnologias multimdia bem como dos modelos de implementao ou suportes de distribuio.

Elementos:

01guio final 02 prottipos

Elementos:

01guio final 02 prottipos

Documento que traduz as ideias e dos conceitos presentes no plano produzido na primeira fase, em elementos concretos e detalhados que sero implementados durante a terceira fase do projecto (produo) Descreve o projecto com todo o detalhe : + descries textuais e esquemas para os ecrs da aplicao + opes de navegao, + configurao formal: cores e efeitos visuais para os objectos grficos, contedos textuais, fontes, atributos, botes, estilos, imagens, contedo sonoro, vdeos e respostas produzidas pela aplicao + especificao dos media utilizados e sua combinao {+}

Elementos:

01guio final 02 prottipos

Composto por:

01.01 esquema / mapa de navegao:

Estrutura da aplicao multimdia

01.02 ecrs ou grelhas-matriz:

Definio dos modelos principais de apresentao dos contedos, com a sua disposio espacial, bem como as caractersticas tcnicas, qualidade e formato Combinao dos contedos com os elementos interactivos que implementam o esquema de navegao

01.03 interface:

01.04 design tcnico

Elementos:

01guio final 02 prottipos

Composio + funcionalidade _ So as primeiras configuraes da aplicao e permitem visualizar o impacto que os vrios elementos tero no aspecto da interface e na funcionalidade da aplicao multimdia interactiva. O objectivo passa pela visualizao e teste do design antes de iniciarmos a fase de produo. Geralmente o prottipo no inclui todos os contedos ou ecrs, mas deve demonstrar com rigor todos os elementos-matriz que compem a aplicao multimdia.

Elementos:

01guio final 02 prottipos

+ Composio dos elementos que constituem a interface da aplicao + Permitem testar vrios designs alternativos e fazer escolhas mais informadas em relao aos contedos e ao esquema de navegao que se est a conceber Podem ser desenvolvidos recorrendo a vrios tipos de ferramentas com diferentes ndces de complexidade: + prottipos

low-fi: esboos em papel

+ prottipos high-fi: ferramentas ou sistemas de autoria multimdia; envolvem linguagens de programao

01guio final
01.01 Esquema ou mapa de navegao: da informao ao longo do tempo pelo utilizador
+ Criao de uma estrutura para a apresentao + Planeamento e concepo dos percursos seguidos

+ Ilustra as hiperligaes (links) que existem entre as

vrias unidades de contedo; auxilia na apresentao de contedos.

Cumpre os seguintes objectivos: interactiva + descreve as hiperligaes entre as unidades de contedo multimdia (ecrs) + ilustra o que acontece quando o utilizador interage com a aplicao
Fontes teis:

+ fornece um ndice grfico do fluxo lgico da interface

A visual vocabulary for describing info architecture and interaction design

Jesse James Garrett. 6 de Maro de 2002 http://www.jjg.net/ia/visvocab/ Adaptao para Portugus do Brasil: http://iainstitute.org/pt/translations/000332.html

Estruturas fundamentais de navegao hipermdia

Vaughan 1996; Multimedia making It Work. Osborne McGraw-Hill

As estruturas de navegao devem organizar os contedos (hierarquia e arquitectura da informao) para uma correcta aproximao aos mesmos e simultaneamente dotar o utilizador de relativa liberdade para a explorao dos contedos. a) LINEAR
o utilizador navega sequencialmente de um ecr para o seguinte ou para o anterior

b) HIERRQUICA
o utilizador navega ao longo de estruturas hierrquicas que reflectem uma organizao lgica do contedo

c) no-linear
O utilizador navega livremente por todo o contedo da aplicao multimdia, sem lhe ser imposta qualquer restrio, podendo escolher em cada instante, o percurso que deseja para consultar a informao disponvel.

d) COMPOSTA:
O utilizador navega livremente, mas existem ocasies em que encontra restries, tais como apresentaes lineares de sequncias de vdeo ou sequncias de ecrs contendo informao considerada essencial ou ainda, uma hierarquia de ecrs. So as estruturas mais comuns.

Mapa de navegao isomtrico

fonte: Information Architecture for designers (livro)

Mapa de Navegao

{esq.} mapa com todos os links entre pginas (+ confuso) {dir.} mapa com ligaes hierarquizadas (+ simples)

Mapa de Navegao

02.02. ecrs ou pginas-tipo + storyboard Expem a relao: acesso informao/leitura/experincia interactiva Devem organizar-se segundo um: Storyboard: + Composto por esboos grficos associados a cada ecr que descrevem com detalhe a combinao dos contedos + Descrevem a composio e disposio dos contedos multimdia (texto, imagens, grficos, vdeo, audio, animaes) em unidades de apresentao da informao (ecrs). + Deve seguir uma estrutura sequencial. e/ou animatic: + Verso animada do storyboard c/ simulao da interaco

iniciais de pr-visualizao ou da linguagem e expresso finais.

+ Podem assumir linguagens grficas mais prximas de esboos

Os storyboards descrevem os ecrs: + utilizando descries textuais e esquemas detalhados + especificando os elementos da pgina: imagem, objectos grficos, bloco de texto, som, vdeo, animao, botes + especificando e relacionando os elementos com os contedos associados: o que o contedo, qual a sua localizao no ecr, quais as suas dimenses e/ou durao temporal + especificando os elementos interactivos que do origem navegao + especificando em pormenor os atributos (fontes, formas, cores, efeitos visuais, etc.) e formatos dos contedos

Logo: esquema ou mapa da navegao: desenha a estrutura do projecto multimdia storyboard: so o resultado do design dos ecrs ou pginas-tipo, apresentando as sequncias essenciais de navegao
Fontes teis:

BOXES AND ARROWS

http://www.boxesandarrows.com

Mapa de Navegao

Storyboard

Fonte: http://ourworld.compuserve.com/homepages/adrian_mallon_multimedia/flowchar.gif

fonte: http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/sb.html

{esq.} guies de Time Code (Mike Figgis. 2000) {dir.} ecr do filme
fonte guio: http://www.nextwavefilms.com/timecode/

02.03. Interface o resultado da disposio dos contedos pelas pginas-tipo e do sistema de navegao Aspectos a considerar: + composio grfica + legibilidade + domnio dos espaos de interaco + considerao dos padres de interaco + comportamento da interaco:
domnio dos gestos e aco na interaco utilizando os padres de interaco ou outras estratgias

+ estilos da interaco: a forma como se concebem os controlos

Interfaces simples: + exigem o menor esforo de aprendizagem por parte do utilizador + utilizao criteriosa dos padres de interaco e de metforas reconhecveis pelo utilizador padres de DESIGN DE interaco
http://www.visualcomplexity.com/vc/blog/?p=129 Um padro de design documenta uma soluo para um problema de design comum. Esta noo foi introduzida pelo arquitecto Christopher Alexander, no livro A Pattern Language, para utilizao no planeamento urbano e arquitectura, tendo sido posteriormente adoptada por outras disciplinas. Os Padres de Design de Interaco compilam as solues ptimas para a usabilidade comum ou para problemas de acessibilidade num contexto especfico. Documentam modelos de interaco que tornam mais simples o reconhecimento das tarefas ou aces na interface pelo utilizador.

ACESSIBILIDADE // incluso dos utilizadores:

acesso interface por pessoas portadoras de deficincia, ou de idade avanada

02.03.01. estilos de interaco e elementos interactivos interaco: Dilogo que se estabelece entre o computador e o utilizador _ estilos de interaco 01. linha de comando
O primeiro estilo de dilogo interactivo a ser utilizado Permitem fornecer directamente instrues ao computador, utilizando tcnicas de funo, caracteres, abreviaturas ou comandos completos textuais

in Dix 1993. Human Computer Interaction. Prentice Hall

02. menus (GUI)

O conjunto de opes disponveis apresentado no ecr sob a forma de uma lista Tipologias menus: + menus pull-down: expanso para baixo a partir de um ttulo contido no topo do controlo que apontado e seleccionado por meio dos botes do dispositivo apontador + menus fall-down: expandem-se para baixo logo q so seleccionados pelo utilizador + menus pin-up: colocam-se em determinadas posies do ecr e permanecem nessa posio at serem eliminados do ecr + menus pop-up: surgem qdo se selecciona uma rea especfica do ecr. Abrem novas janelas

03. linguagem natural (NUI)

O computador capaz de interpretar ordens orais ou escritas utilizando palavras do vocabulrio corrente do utilizador

04. dilogo baseado em pergunta/resposta

Mecanismo simplificado para proporcionar a introduo de dados num domnio especfico. O utilizador conduzido passo a passo pelo processo de interaco

05. preenchimento de formulrios

Introduo de dados e a sua recuperao/compilao

06. dilogo baseado em janelas, cones, menus e apontadores

(WIMP: windows, icons, menus, pointers). O ambiente grfico mais comum

ELEMENTOS INTERACTIVOS botes, cones, hotspots ou reas sensveis

Quando o utilizador selecciona uma das reas com o dispositivo do apontador/rato, a aplicao reage com uma mudana de estado que pode corresponder transio para um novo ecr ou apresentao de um novo contedo Nota. desaconselhvel obrigar o utilizador a memorizar e aprender cones novos ou muito especficos

DISPOSIO DOS CONTROLOS

o conjunto de controlos (botes, cones, menus, reas sensveis) devem ser agrupados logicamente, de modo a permitir o acesso rpido por parte do utilizador.

_ Tipos de organizao: + FUNCIONAL:

os controlos e reas sensveis so organizados por aproximao funcional

+ SEQUENCIAL:

os controlos e reas sensveis so organizados pela ordem que devem ser utilizados numa interaco tpica

+ FREQUNCIA:

os controlos e reas sensveis so organizados por frequncia de utilizao, sendo os mais frequentes colocados em locais mais acessveis

02.04. design tcnico Realizado pelos membros da equipa com conhecimento de linguagens da programao

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

fase 3 PRODUO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

aplicao final dos documentos storyboard, mapas de navegao e design tcnico

3 ciclos de desenvolvimento: 1. ciclo alfa:

Procede-se primeira implementao completa do guio de aplicao, iniciando-se a autoria de contedos e a autoria da aplicao.

2. ciclo beta:

Processam-se todas as modificaes necessrias, quer em termos de funcionalidade, quer em termos de contedo e da interface. Normalmente, corresponde a uma fase de teste com os utilizadores finais que conduz mais tarde ao guio final da aplicao

3. ciclo gama:

Finalizam-se os processos de autoria, completando o desenvolvimento dos contedos e da aplicao multimdia.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

fase 4 TESTE E VALIDAO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Verifica se a aplicao final corresponde aos objectivos traados, se esta funciona correctamente nas plataformas a que se destina e se vai de encontro s necessidades do cliente ou do utilizador final

Os teste podem ser categorizados: in Strauss 1997. Managing Multimedia Projects. Focal Press + falhas de design e sugestes:
problemas na interface sugestes relativas ao posicionamento e ao estilo de hotspots, disposio dos contedos nos ecrs

+ erros de contedo:

erros de escrita erros de conceito problemas de formatao ou de qualidade dos contedos resolues baixas que impedem a correcta apreciao das imagens ou vdeos

+ defeitos de software:

erros tcnicos que ocorrem quando se executa a aplicao multimdia: _erros no sistema operativo, _problemas na introduo ou apresentao de dados, _clculos incorrectos _conflitos com outras aplicaes

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

fase 5 DISTRIBUIO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Criao de um ficheiro executvel e a sua distribuio em discos pticos (CD-ROM/DVD-ROM) ou suportes telemticos (como um servidor web)