criação e disponibilização de conteúdo instrucional para a internet aula 1: criação de...

Criação e Disponibilização de Conteúdo Instrucional para a

InternetAula 1: Criação de Multimidia

Renato M.E. Sabbatini

Silvia Helena Cardoso

Objetivos da Aula

Elaborar o conhecimento do aluno sobre as formas de criação e edição de imagens e sons para cursos a distância baseados ou apoiados pela Internet e pela WWW, incluindo ferramentas de software e recursos disponíveis

Tópicos• Tecnologias de aquisição de imagens digitais:

scanners, câmaras fotográficas e de vídeo, conversores A/D, etc.

• Formatos de imagens para a Internet• Ferramentas de software para trabalho com imagens• Formas de inserção de imagens em um documento

eletrônico• Formatos de vídeo para Internet e ferramentas de

criação e edição• Formatos de áudio para Internet e ferramentas de

criação e edição

Multimídia na Internet• Imagens estáticas

– Gráficos– Fotos– Desenhos

• Imagens dinâmicas– Animações– Videoclipes

• Aúdio– Som sintetizado– Som digitalizado

Formatos de Imagens na Web

Formato Visualizado por:

GIFGraphic Interchange Format

Browser GIF

Tipo

JPEGJournalist’s Photo Experts Group

Browser JPG

PNGPortable Network Graphics

Browser (parcialmente) PNG

PCX, TIF, BMP Aplicativos Auxiliares ---

Tecnologias de Aquisição de Imagens Digitais

• Aquisição indireta:– Descarregamento de bases de imagens na

Internet (pagas ou gratuitas)

• Aquisição direta:– Dispositivos de varredura de imagens

(“scanners”)

– Câmaras fotográficas e de vídeo digitais

– Placas de aquisição de vídeo

Aquisição de ImagensScanner de Página

• Aceita até página A4 ou maior

• Resolução ajustável (75 dpi para Web)

• Número de cores ajustável (256 para GIF, milhões para JPG)

• Kit de transparênciapara slides/raios-x

Aquisição de ImagensScanner Manual

• Preço baixo• Uso muito fácil e

rápido• Alta portabilidade• Dificulta alinhamento

da imagem• Não tem transparência• Atualmente em desuso

Aquisição de ImagensCâmara Fotográfica Digital

• Não é adequada para documentos, fotos existentes, transparências

• Resolução semifixa• Para tirar fotos

rapidas, reportagem• Preços e qualidade

muito variáveis

Aquisição de ImagensCâmaras de Vídeo

• Webcams simplificadas

• Câmaras digitais para videoconferência, imagens médicas

• Câmaras VHS digitais• Gravação ou

transmissão em tempo real

Aquisição de ImagensConversor A/D de Vídeo

• Convertem sinal analógico de câmaras convencionais em sinal digital com ou sem som

• Placas internas (inserção em slot no micro)• Unidades externas (conexão via USB, porta

serial, porta paralela, PCMCIA, etc.)• Produzem vídeos AVI ou MPEG• Resolução de vídeo, velocidade em quadros por

segundo, som mono/estéreo, número de cores, formato de saída, etc. variam entre marcas

Ferramentas de Trabalho com Imagens

• Criação e edição de imagens estáticas: Adobe PhotoShop, MS Image Composer, PaintShop Pro, CorelDraw, Corel PhotoPaint

• Edição de imagens animadas:GIF Construction Set, Image Composer

• Conversão de formatos de imagens:Aardvark, PaintShop Pro

• Edição de mapas sensívels:MapEdit, MapIt!, Cute Image Mapper

Programa de Criação e Edição de Imagens

Programas Gráficos: Funções Básicas

• Leitura e gravação de imagens

• Criação: desenhar, legendar, colorir, etc.

• Modificações: rotacionar, espelhar, redimensionar, mudar número de cores, etc.

• Conversão de formatose resolução

• Processamento de imagens: cor, brilho, contraste, filtros, etc.

• Composição: cortar, colar, mover, duplicar

• Estruturar imagens: criar camadas, vetores, máscaras, paletas, etc.

• Visualizar: zoom, etc.

Administração de Catálogos de Imagens

Softwares que permitem a catalogação de diretórios de imagens de vários tipos e sua visualização rápida e seleção

• ThumbNail Plus• PaintShop Pro Browser• Piccolo• Corel Multimedia Manager• IrfanView• 20/20

Gerenciador de Diretórios de Imagens

Editor de Mapas Sensíveis

Animação de GIFs

WWW GIF Animator

Tipos de Imagens On-Line

• Nenhuma imagem in-line, link de texto para

chamar a imagem

• imagens in-line completas

• imagens em miniatura, con link para chamar

imagem completa

Link de Texto para Imagem

Texto principal comlink de texto

HTML separadocom imagem

Imágens Integradas ao Texto

Imagens em Miniatura (Thumbnail)

Texto principalcom imagem miniatura

HTML separadocom imagem maior

• Sem imagens in-line, link de texto – Fácil de programar– Acesso mais rápido ao documento– Estética muito simples

• Imagens integradas ao texto– Estética profisional, similar à versão impressa– Acesso mais lento ao documento

• Imagens em miniatura– Melhor balanço entre velocidade e estética

Imagens On-Line: Comparação

Formatos de Video na Web

• AVI: AudioVisual InterchangeFormato proprietário de MS Windows sem compressão

• MOV, QT: Movie, QuickTimeFormatos proprietários da Apple

• MPEG: Motion Picture Especialists GroupFormato padrão com compressão até 1:30

Plug-Ins para Videos

Apple QuickTime

Windows Media Player

Formatos de Video na Web (2)

• RA, RM: RealMediaFormato “streaming” proprietário, com alto nivel de compressão

• Outros formatos “streaming”Vxtreme, VDO, etc.

Streaming Media

Visualizaçãocontínua dos

pacotes de áudio e/ouvideo

Envia arquivo de audio e/ou video

em pacotes pequenos e seriais

Cliente Servidor

RealAudio/RealVideo Player

Plug-Ins para Áudio/Vídeo (2)

Plug-Ins para Áudio/Vídeo (3)

Microsoft MediaPlayer

Formatos de Audio

• WAV, AIFF, AU, MPEG3Todo o som é digitalizado em um único arquivo, portanto deve esperar-se até que chegue completamente para começar a tocar. Não necesita um plug-in especial, e é muito fácil de produzir

• RealAudio (RA)O áudio é transmitido em pequenos segmentos, que se tocam à medida que chegam do servidor. Grau alto de compressão. Necessidade de um servidor especial e plug-in no cliente

Real Media: Como Funciona

Microfone

Placa de som

Software

Vídeo

Placa de vídeo

Software

Narração de slides

PowerPoint

.avi

.mpeg

.mov

.ppt.wav

(linkados)

.ram

.htm

http://...

.ra.ra.rm.rm

.wav

.au

Arquivo

Real Converter

Programa

Real Presenter

Edição de Vídeos

• São “ilhas de edição” inteiramente digitais, implementadas por software

• Têm funções como cortar, colar trechos uns nos outros, adicionar trilha sonora e efeitos especiais, exibir trechos determinados, mudar cores, contraste, brilho, etc.

• Exemplo: Adobe Premiere• Geralmente o software vem com placas de

aquisição de vídeo compradas

Edição de Sons Digitalizados

Softwares para Edição de Sons

• Creative WaveStudio• GoldWave• Cool Edit• etc.

Quase todos os kits multimidia para PCs vem com uma ou mais ferramentas desse tipo.

Audio Player Plug-Ins

Estação Multimídia para Criação de Conteúdo para a Internet

• Pentium PC ou Macintosh com mínimo de 64 Mb RAM e monitor 17” SVGA ou maior, em cores

• Conectividade rápida a Internet (banda larga)• Capacidade multimídia completa: CD-ROM,

altofalantes, microfone, etc., • Câmara fotográfica digital ou câmara de documentos • Scanner de página colorido con kit de transparência • Unidade de aquisição de vídeo (placa A/D)• Gravador VHS, monitor de TV

• Gravador de CD-ROM e/ou ZipDrive