Mutimedia opensource parte_ii

Elaboración de materiais multimedia para a docencia Parte II Xosé antón Vila Sobrino [email_address]

Materiais multimedia Texto Imaxe Audio Video Web

Introducción
A World Wide Web
Internet e as orixes da web
Como funciona a web
Servidor web Cliente (www.uvigo.es) (Firefox) Cliente (Opera) Cliente (Explorer)

HTTP e HTML
HTTP= Hiper Text Transfer Protocol
Hipertexto=texto con enlaces ( links ) a outros obxectos (hipertexto, imaxes, sons, ...)
HTML= Hiper Text Markup Language
Un arquivo HTML contén texto e ”marcas” ou etiquetas

Exemplo de páxina en HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252"> <TITLE></TITLE> <META NAME="GENERATOR" CONTENT="OpenOffice.org 2.0 (Win32)"> ... </HEAD> <BODY LANG="es-ES" DIR="LTR"> <P> Página web de prueba </P> </BODY> </HTML>
Etiquetas fundamentais:
<HTML>
<HEAD>
<BODY>

Creación dunha páxina en HTML
Editor de texto plano (bloc de notas, ...)
Hai que coñecer HTML
Editor de texto que garde en formato HTML
Exemplo: OpenOffice Writer
Suficiente para páxinas sinxelas
Editor de páxinas HTML
Gratuitos: NVU (Kompozer), Mozilla composer
Comerciais: Microsoft Frontpage, Macromedia Dreamweaver

Creación de páxinas web con OpenOffice Writer
Trabállase prácticamente igual
Diferencias
Algunhas opcións non existen (referencias cruzadas, índices,...)
Empréganse bastante mais os hiperenlaces
Existen “vistas” novas, como o código fonte (pódese editar)
Pódese convertir automáticamente un arquivo de texto en HTML (gardar como ... páxina HTML)

NVU/Kompozer: o entorno de traballo

Deseñar unha páxina web sinxela
Deseñar antes de escribir
Debuxar a estructura nun papel
Cabeceira
Menú
Autor, data de creación, ...
Corpo
Abre o Kompozer

Propiedades da páxina
Formato/Título y propiedades de la página
Poñédelle título a vosa páxina

Propiedades da páxina
Formato/Fondo y colores de la página
Non convén abusar de imaxes de fondo e cores moi fortes
Poñédelle unha cor amarela de fondo e letra en verde oscuro

Enlaces

Enlaces
Enlace=elemento que ó premer sobre el nos conduce a outra URL
URL=Uniform Resource Locator
Exemplos
http://www.uvigo.es
file:///home/anton/proba.html
Código dun enlace en HTML:
<a href="http://www.uvigo.es">Univ. Vigo</a>

Enlaces
Insertar un enlace externo
Insertar no final da páxina o seguinte texto:
” Páxina web do profesor”
Seleccionar as verbas ”Páxina web”
Premer no botón ”Enlace” da barra de ferramentas
Na ventana que se abre escribir:
http://trevinca.ei.uvigo.es/~anton (ou outra)
Aceptar

Enlaces
Un enlace pode ser cara un arquivo ”local”
Exercicio
Gravade a páxina actual e abride unha páxina nova (/Archivo/Nuevo)
Escribide nela ”proba de enlace a arquivo”
Seleccionade a verba ”enlace” e premede no botón ”Enlace”
Seleccionade ”Elegir archivo”, buscade a páxina anterior, seleccionádea e aceptade.

Previsualización
Para ver o resultado actual dunha páxina web empregaremos o botón
Eso abrirá un navegador ca páxina web cargada.
Abride nun navegador a páxina web que estades deseñando e probade o enlace.

Enlaces internos
Os enlaces tamén nos poden levar a puntos internos do documento actual ou doutros documentos.
Para facer eses enlaces primeiro hai que crear os ”puntos de ancoraxe”
Farémolo situando o cursor no punto escollido ou seleccionando un fragmento de texto e premendo no botón ”Enlace interno”

Enlaces internos
Exercicio
Enchede unha páxina web nova con moito texto (podedes copiar e pegar de outro sitio)
Ide ó final da páxina, escribide ”Fin da paxina”, seleccionade ese texto e premede o botón ”Enlace interno” (quitádelle o acento).
Ahora ide ó principio e escribide ”Ir ó final”, seleccionade ese texto e premede no botón ”Enlace”

Enlaces internos
Na ventana que aparece, premede no menú desplegable e veredes que aparece o texto
” #Fin da paxina”
Seleccionádeo e aceptade.
Probade a páxina web nun navegador

Imaxes e Elementos multimedia

Imaxes
Insertar/Imagen
< img style ="width: 910px; height: 1087px;" alt ="texto alt" src ="file:///G:/nome_arquivo.jpg">

Imaxes
Exercicio
Engadide unha foto vosa á páxina web que estades facendo.
Poñédelle como texto alternativo ”foto de ...”
Facede que o texto flua pola dereita da imaxe cun marxe de 20 puntos.
Enlazade a imaxe ca vosa páxina web persoal.

Elementos multimedia
Os enlaces poden apuntar a calquera tipo de arquivo
Documentos pdf
Imaxes
Arquivos de son
Arquivos de video
A maneira de abrilos dependerá da configuración de cada navegador.

Elementos multimedia
Exercicios
Imos insertar nunha das páxinas unha sección ”Clases grabadas” con arquivos de audio
Descargade o arquivo ”clase_grabada.wav” a vosa carpeta
Colocade un enlace á mesma co texto ”clase do martes 17 de febreiro”
Probade a abrir esa páxina e ese enlace no navegador.

Publicar na web
Hai programas que fan a xestión automáticamente
Se non hai que empregar un programa de transferencia de arquivos, por exemplo Filezilla
En webs.uvigo.es podemos aloxar páxinas web.
http://www.uvigo.es/uvigo_gl/administracion/atic/datos/web/index.html

Materiais multimedia Texto Imaxe Audio Video Web

Formatos de video dixital
Formatos de arquivo e codecs
O formato de arquivo define a maneira de colocar os datos no arquivo: cabeceira, datos, ...
O codec define a maneira na que están codificados os datos
Un formato pode soportar varios codecs

Formatos e codecs mais empregados
AVI desenvolto por Microsoft
Pode conter case calquera codec: DV, MPG, DivX
MPEG libre
Fundam. contén arquivos codificados en MPG
MPEG-1: calidade CD (352x240 a 1 Mbps => 10 Mb/ minuto de video)
O formato VCD emprega este formato
MPEG-2: 720x480.
Emprégase en DVDs ainda que tamén se emprega o formato SVCD

Parámetros que definen a calidade do video
Fotogramas por segundo: usualmente entre 15 y 30
Tamaño de pantalla: 1024x1024, 720x540, 640x480, 320x240, ...
Velocidade de bits: 13.5, 6.75, 1 Mbps, 512, 340, 48 kbps

Planificando un vídeo
Deberíamos de crear un “índice” igual que para calquera outro tipo de documento.
Agora falarase de escenas
Para definir os detalles técnicos temos que pensar no medio de distribución do mesmo
CD o DVD: alta calidade
Rede de banda ancha: calidade media
Rede de banda estreita: baixa calidade
A veces gravase en varias calidades
Gravase en calidade alta e logo redúcese

Capturas de pantalla con RecordMyDesktop

Configuración
Instalación
Paquetes recordmydesktop e gtp-recordmydesktop
Execución
Son e video /gtk-recordmydesktop
Advanced
Carpeta de destino, performance, sound, misc

Capturar
Seleccionar fiestra
Select windows+premer co rato na fiestra desexada
Marcar un rectángulo sobre a “miniatura de pantalla”.
Gravar
Premer no botón gravar.
Exercicio: facer unha gravación para explicar como se ven as propiedades dun arquivo

Montaxe de video con Kino

Entorno de traballo
Abrir o Kino

Montaxe de video
Cargar os videos
File/abrir
Insert before/after
Recortar un fragmento de video: trim
Diferencia entre overwrite e insert
Crear escenas novas
Color fixo, gradiente, a partires de arquivo (de imaxe por exemplo)

Montaxe de video
Gardar proxecto
Exportar proxecto

Exercicio
Facer un video divulgativo sobre un tema (por exemplo a táboa periódica dos elementos).
Empregar imaxes estáticas e mesmo videos.
Grabar cortes axeitados para explicalas.
Ver a posibilidade de incorporar unha banda sonora

Mutimedia opensource parte_ii

by xose anton Vila on Nov 11, 2011

Accessibility

Upload Details

Usage Rights

Statistics

Mutimedia opensource parte_ii Presentation Transcript