Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como...
Transcript of Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como...
![Page 1: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/1.jpg)
Sistemas Multimídia – Aula 2
Autoria Multimídia
Diogo Pinheiro Fernandes PedrosaUniversidade Federal Rural do Semiárido
Departamento de Ciências Exatas e NaturaisCurso de Ciência da Computação
![Page 2: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/2.jpg)
Introdução● Autoria multimídia é a criação de produções
multimídia → filmes ou apresentações;● Estas produções buscam interação com o
usuário (aplicações interativas);● São produzidos a partir de ferramentas:
editores de imagem, som, animações, etc.● Nível de interação requerida → depende da
aplicação:● Ausência de interação (slide show) → interação
total (realidade virtual imersiva)
![Page 3: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/3.jpg)
Introdução● Níveis de interação:
● Controle do ritmo (cliques para avançar) → apresentações de slide;
● Controle da sequência do material apresentado e para onde ir;
● Controle do meio → play/pause/stop em vídeos e música, busca textual, rolagem da visualização, zoom;
● Controle de objetos em cena (mover objetos, jogos);
● Controle imersivo → modificar a perspectiva da cena; controlar objetos.
![Page 4: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/4.jpg)
Introdução● Pontos a serem vistos:
● Metáforas de autoria multimídia → paradigmas;● Produção multimídia → projeto;● Apresentação multimídia; e● Multimídia automática.
![Page 5: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/5.jpg)
Metáfora de Autoria Multimídia● Consiste em paradigmas de autoria →
metodologia empregada para criar aplicações multimídia;● Scripts;● Slide show;● Metáfora hierárquica;● Metáfora Icônica/Controle de Fluxo;● Frames;● Metáfora de cartão/escrita;● Metáfora de elenco/roteiro/escrita.
![Page 6: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/6.jpg)
Scripts● Utiliza linguagem de script para habilitar
interatividade (botões, mouse, etc.) e permitir laços, saltos, condicionais, funções/macros, etc.
● Exemplo: linguagem OpenScript para ToolBook;● Linguagem que se parece com o padrão utilizado
para orientação de objetos;
![Page 7: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/7.jpg)
Slide Show● São apresentações lineares por definição;● Há recursos para a realização de “saltos” na
apresentação;● Exemplo: PowerPoint, Beamer, etc.
![Page 8: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/8.jpg)
Metáfora Hierárquica● Os elementos que permitem o controle do
material multimídia são organizados em uma estrutura em árvore;
● É frequentemente utilizada em aplicações dirigidas por menu.
![Page 9: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/9.jpg)
Metáfora Icônica/Controle de Fluxo● Ícones gráficos são disponibilizados em um
toolbox e a aplicação provê a criação de fluxo de controle para os ícones que são inseridos no material produzido;
● Exemplo: Authorware;
![Page 10: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/10.jpg)
Metáfora Icônica/Controle de Fluxo
![Page 11: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/11.jpg)
Metáfora de Frames● Paradigma similar ao Icônico/Controle de Fluxo
(incorpora uma tabela de ícones);● As ligações entre os ícones são conceituais e
não representam o fluxo real do programa;● Exemplo: Quest, da Allen Communication.
![Page 12: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/12.jpg)
Metáfora de Frames
![Page 13: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/13.jpg)
Metáfora de Cartão● Usa um estrutura simples de cartão (página)
para produção multimídia;● Bastante utilizado para hipertexto e hipermídia;● Exemplo: HyperStudio, da Knowledge
Adventure.
![Page 14: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/14.jpg)
Metáfora de Cartão
![Page 15: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/15.jpg)
Metáfora Elenco/Roteiro/Escrita ● Os elementos multimídia (elenco ou cast) são
arranjados de uma forma inspirada em uma planilha (que define a exibição temporal desses elementos → roteiro ou score);
● A programação é feita por uma linguagem de script;
● Exemplo: Adobe Director (linguagem de escrita → Lingo).
![Page 16: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/16.jpg)
Metáfora Elenco/Roteiro/Escrita
![Page 17: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/17.jpg)
Produção Multimídia● Consiste no projeto multimídia;● Envolve (ou pode envolver) um elenco de
profissionais com habilidades variadas:● Diretor de arte, projetista gráfico, gerenciador de
projeto, escritor, projetista de interface, projetista de som, animadores 2D e 3D, programadores, entre outros.
● As fases do projeto consistem em storyboards, cartas de fluxo, testes com usuários e produção paralela das mídias.
![Page 18: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/18.jpg)
Produção Multimídia● Storyboard → ideia inicial do produto em uma
série de quadros;● Carta de fluxo → organiza o storyboard através
da informação sobre a navegação (interação com o usuário e a estrutura multimídia);
● Antes da fase final do projeto: construção do protótipo e testes.
![Page 19: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/19.jpg)
Apresentação Multimídia● Requer alguns efeitos, tais como gráficos,
imagens, cores, fontes, etc.● Estilo gráfico:
● Atenção especial com a utilização de esquemas de cores e como as letras são percebidas;
● Using Color and Text in Projecting Multimedia Presentations; R. Vetter, C. Ward and S. Shapiro, IEEE Multimedia, Vol. 2, No. 4, December 1995.
![Page 20: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/20.jpg)
Apresentação Multimídia● Princípios de cores:
● Esquemas de cores e arte combinam melhor com um certo tipo de tema ou estilo:– Estilos naturais ou florais → cenas externas;– Cores sólidas → cenas indoor.
● Dica geral: não utilizar muitas cores → causa distração!
● A mudança de cor pode ser associada a uma mudança no tema da apresentação.
![Page 21: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/21.jpg)
Apresentação Multimídia● Fontes:
● Para comunicação visual efetiva: fontes grandes (18 a 36);
● Não utilizar mais que 8 linhas por tela;● Fontes sans serif são melhores que fontes serif;
![Page 22: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/22.jpg)
Exemplo● Texto com fonte Arial (sans serif);● Sistemas Multimídia;● Diogo Pinheiro Fernandes Pedrosa;● Universidade Federal Rural do Semiárido.
![Page 23: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/23.jpg)
Exemplo
● Texto com fonte Times New Roman (serif);● Sistemas Multimídia;● Diogo Pinheiro Fernandes Pedrosa;● Universidade Federal Rural do Semiárido.
![Page 24: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/24.jpg)
Apresentação Multimídia● Esquema de cores/contraste:
● Regra: utilização de cores complementares para fontes e fundo da apresentação;
● Para cores no padrão RGB entre 0 e 255:
● Plano de fundo: Marrom 1 (76, 25, 0), fonte (179, 230, 255).
Rbg=255−Rf
Gbg=255−Gf
Bbg=255−Bf
![Page 25: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/25.jpg)
Exemplo● Texto com fonte Arial (sans serif);● Sistemas Multimídia;● Diogo Pinheiro Fernandes Pedrosa;● Universidade Federal Rural do Semiárido.
![Page 26: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/26.jpg)
Animação “Mística”● Serve para adicionar elementos em uma
imagem background fazendo composição de imagens;
![Page 27: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/27.jpg)
Animação “Mística”● Ideia:
![Page 28: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/28.jpg)
Transição de Vídeo● Pode ser utilizado como uma forma de indicar
uma mudança para uma seção seguinte da apresentação multimídia;
● Pode ser de diversos tipos: corte, dissolver, etc;● Diversas ferramentas de autoria promovem
isso: Adobe Premiere, por exemplo.
![Page 29: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/29.jpg)
Outros Assuntos Técnicos...● Fatores que influenciam o projeto multimídia:
● Plataforma computacional;● Resolução e formato de vídeo;● Memória e requisições de espaço para
armazenamento;● Métodos de distribuição.
![Page 30: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/30.jpg)
Autoria Automática● Ajuda avançada para a criação de novas
apresentações multimídia;● Mecanismo que facilite a criação automática de
documentos multimídia úteis a partir de fontes previamente existentes.
![Page 31: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/31.jpg)
Autoria Automática● Tomando um documento hipermídia como
exemplo...● Os passos para a preparação de um documento
hipermídia são:– Geração da informação (captura);– Autoria;– Publicação.
● O quanto destes três passos pode ser automatizado?
![Page 32: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/32.jpg)
Autoria Automática● Geração da informação → processo já
automatizado (aquisição de texto, imagens, áudio digital, etc.);
● Publicação → objetivo final das ferramentas multimídia (processo também automatizado);
● Autoria → problema aberto...
![Page 33: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/33.jpg)
Autoria Automática● Busca-se estruturar a informação de tal forma
que seja possível acessar e manipular a mídia em questão → utilizar estruturas de dados (listas, filas, grafos, etc.) que sejam mais adequadas às visualizações do material;
![Page 34: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/34.jpg)
Autoria Automática● Na elaboração de um material multimídia...
● Linearização → ordem natural das ideias de um autor;
● Externalização → a presença de hiperlinks permite uma liberdade na mimetização dos pensamentos do autor.
● Para um material ser externalizado → utilização de hiperlinks.
![Page 35: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/35.jpg)
Autoria Automática● Externalização em pequenos documentos →
fácil de gerenciar;● Para grandes documentos → grande
complexidade → usa-se abordagens da área de banco de dados.
![Page 36: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/36.jpg)
Migração Semiautomática de Hipertexto
● Hiperlinks → informações semânticas que servem como “âncoras” para ligar-se a outras páginas do documento.
● Para representação textual:● Converter o formato do texto usado para html;● Capítulos e seções são postos em um banco de
dados;● Utilizar técnicas de mineração de dados para
determinar as palavras-chaves;● Palavras-chaves podem originar hiperlinks entre os
textos.
![Page 37: Autoria Multimídia - UFERSA · Apresentação Multimídia Requer alguns efeitos, tais como gráficos, imagens, cores, fontes, etc. Estilo gráfico: Atenção especial com a utilização](https://reader031.fdocumentos.tips/reader031/viewer/2022021910/5c02457909d3f20a538dd994/html5/thumbnails/37.jpg)
Hiperimagens● Objetivo: ter com imagens os mesmos
procedimentos adotados para a criação de links entre os elementos presentes na imagem com outras partes do documento.