Mutimedia opensource parte_ii

467 views

Published on

Opensource tools for teachers. Tools for preparing multimedia resources.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
467
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mutimedia opensource parte_ii

  1. 1. Elaboración de materiais multimedia para a docencia Parte II Xosé antón Vila Sobrino [email_address]
  2. 2. Materiais multimedia Texto Imaxe Audio Video Web
  3. 3. Introducción <ul><li>A World Wide Web </li><ul><li>Internet e as orixes da web
  4. 4. Como funciona a web </li></ul></ul>Servidor web Cliente (www.uvigo.es) (Firefox) Cliente (Opera) Cliente (Explorer)
  5. 5. HTTP e HTML <ul><li>HTTP= Hiper Text Transfer Protocol
  6. 6. Hipertexto=texto con enlaces ( links ) a outros obxectos (hipertexto, imaxes, sons, ...)
  7. 7. HTML= Hiper Text Markup Language
  8. 8. Un arquivo HTML contén texto e ”marcas” ou etiquetas </li></ul>
  9. 9. Exemplo de páxina en HTML <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> <HTML> <HEAD> <META HTTP-EQUIV=&quot;CONTENT-TYPE&quot; CONTENT=&quot;text/html; charset=windows-1252&quot;> <TITLE></TITLE> <META NAME=&quot;GENERATOR&quot; CONTENT=&quot;OpenOffice.org 2.0 (Win32)&quot;> ... </HEAD> <BODY LANG=&quot;es-ES&quot; DIR=&quot;LTR&quot;> <P> P&aacute;gina web de prueba </P> </BODY> </HTML> <ul><li>Etiquetas fundamentais: </li><ul><li><HTML>
  10. 10. <HEAD>
  11. 11. <BODY> </li></ul></ul>
  12. 12. Creación dunha páxina en HTML <ul><li>Editor de texto plano (bloc de notas, ...) </li><ul><li>Hai que coñecer HTML </li></ul><li>Editor de texto que garde en formato HTML </li><ul><li>Exemplo: OpenOffice Writer
  13. 13. Suficiente para páxinas sinxelas </li></ul><li>Editor de páxinas HTML </li><ul><li>Gratuitos: NVU (Kompozer), Mozilla composer
  14. 14. Comerciais: Microsoft Frontpage, Macromedia Dreamweaver </li></ul></ul>
  15. 15. Creación de páxinas web con OpenOffice Writer <ul><li>Trabállase prácticamente igual </li></ul><ul><li>Diferencias </li></ul><ul><ul><li>Algunhas opcións non existen (referencias cruzadas, índices,...)
  16. 16. Empréganse bastante mais os hiperenlaces
  17. 17. Existen “vistas” novas, como o código fonte (pódese editar) </li></ul></ul><ul><li>Pódese convertir automáticamente un arquivo de texto en HTML (gardar como ... páxina HTML) </li></ul>
  18. 18. NVU/Kompozer: o entorno de traballo
  19. 19. Deseñar unha páxina web sinxela <ul><li>Deseñar antes de escribir </li><ul><li>Debuxar a estructura nun papel </li><ul><li>Cabeceira
  20. 20. Menú
  21. 21. Autor, data de creación, ...
  22. 22. Corpo </li></ul></ul><li>Abre o Kompozer </li></ul>
  23. 23. Propiedades da páxina <ul><li>Formato/Título y propiedades de la página </li></ul><ul><li>Poñédelle título a vosa páxina </li></ul>
  24. 24. Propiedades da páxina <ul><li>Formato/Fondo y colores de la página </li></ul><ul><li>Non convén abusar de imaxes de fondo e cores moi fortes
  25. 25. Poñédelle unha cor amarela de fondo e letra en verde oscuro </li></ul>
  26. 26. Enlaces
  27. 27. Enlaces <ul><li>Enlace=elemento que ó premer sobre el nos conduce a outra URL </li><ul><li>URL=Uniform Resource Locator
  28. 28. Exemplos </li><ul><li>http://www.uvigo.es
  29. 29. file:///home/anton/proba.html </li></ul></ul><li>Código dun enlace en HTML: </li></ul><a href=&quot;http://www.uvigo.es&quot;>Univ. Vigo</a>
  30. 30. Enlaces <ul><li>Insertar un enlace externo </li><ul><li>Insertar no final da páxina o seguinte texto: </li><ul><li>” Páxina web do profesor” </li></ul><li>Seleccionar as verbas ”Páxina web”
  31. 31. Premer no botón ”Enlace” da barra de ferramentas </li></ul></ul><ul><li>Na ventana que se abre escribir: </li><ul><li>http://trevinca.ei.uvigo.es/~anton (ou outra) </li></ul><li>Aceptar </li></ul>
  32. 32. Enlaces <ul><li>Un enlace pode ser cara un arquivo ”local”
  33. 33. Exercicio </li><ul><li>Gravade a páxina actual e abride unha páxina nova (/Archivo/Nuevo)
  34. 34. Escribide nela ”proba de enlace a arquivo”
  35. 35. Seleccionade a verba ”enlace” e premede no botón ”Enlace”
  36. 36. Seleccionade ”Elegir archivo”, buscade a páxina anterior, seleccionádea e aceptade. </li></ul></ul>
  37. 37. Previsualización <ul><li>Para ver o resultado actual dunha páxina web empregaremos o botón </li></ul><ul><li>Eso abrirá un navegador ca páxina web cargada.
  38. 38. Abride nun navegador a páxina web que estades deseñando e probade o enlace. </li></ul>
  39. 39. Enlaces internos <ul><li>Os enlaces tamén nos poden levar a puntos internos do documento actual ou doutros documentos.
  40. 40. Para facer eses enlaces primeiro hai que crear os ”puntos de ancoraxe”
  41. 41. Farémolo situando o cursor no punto escollido ou seleccionando un fragmento de texto e premendo no botón ”Enlace interno” </li></ul>
  42. 42. Enlaces internos <ul><li>Exercicio </li><ul><li>Enchede unha páxina web nova con moito texto (podedes copiar e pegar de outro sitio)
  43. 43. Ide ó final da páxina, escribide ”Fin da paxina”, seleccionade ese texto e premede o botón ”Enlace interno” (quitádelle o acento).
  44. 44. Ahora ide ó principio e escribide ”Ir ó final”, seleccionade ese texto e premede no botón ”Enlace” </li></ul></ul>
  45. 45. Enlaces internos <ul><ul><li>Na ventana que aparece, premede no menú desplegable e veredes que aparece o texto </li><ul><li>” #Fin da paxina” </li></ul><li>Seleccionádeo e aceptade.
  46. 46. Probade a páxina web nun navegador </li></ul></ul>
  47. 47. Imaxes e Elementos multimedia
  48. 48. Imaxes <ul><li>Insertar/Imagen </li></ul><ul><li>< img style =&quot;width: 910px; height: 1087px;&quot; alt =&quot;texto alt&quot; src =&quot;file:///G:/nome_arquivo.jpg&quot;> </li></ul>
  49. 49. Imaxes <ul><li>Exercicio </li><ul><li>Engadide unha foto vosa á páxina web que estades facendo.
  50. 50. Poñédelle como texto alternativo ”foto de ...”
  51. 51. Facede que o texto flua pola dereita da imaxe cun marxe de 20 puntos.
  52. 52. Enlazade a imaxe ca vosa páxina web persoal. </li></ul></ul>
  53. 53. Elementos multimedia <ul><li>Os enlaces poden apuntar a calquera tipo de arquivo </li><ul><li>Documentos pdf
  54. 54. Imaxes
  55. 55. Arquivos de son
  56. 56. Arquivos de video </li></ul><li>A maneira de abrilos dependerá da configuración de cada navegador. </li></ul>
  57. 57. Elementos multimedia <ul><li>Exercicios </li><ul><li>Imos insertar nunha das páxinas unha sección ”Clases grabadas” con arquivos de audio
  58. 58. Descargade o arquivo ”clase_grabada.wav” a vosa carpeta
  59. 59. Colocade un enlace á mesma co texto ”clase do martes 17 de febreiro”
  60. 60. Probade a abrir esa páxina e ese enlace no navegador. </li></ul></ul>
  61. 61. Publicar na web <ul><li>Hai programas que fan a xestión automáticamente
  62. 62. Se non hai que empregar un programa de transferencia de arquivos, por exemplo Filezilla
  63. 63. En webs.uvigo.es podemos aloxar páxinas web. </li><ul><li>http://www.uvigo.es/uvigo_gl/administracion/atic/datos/web/index.html </li></ul></ul>
  64. 64. Materiais multimedia Texto Imaxe Audio Video Web
  65. 65. Formatos de video dixital <ul><li>Formatos de arquivo e codecs </li><ul><li>O formato de arquivo define a maneira de colocar os datos no arquivo: cabeceira, datos, ...
  66. 66. O codec define a maneira na que están codificados os datos
  67. 67. Un formato pode soportar varios codecs </li></ul></ul>
  68. 68. Formatos e codecs mais empregados <ul><li>AVI desenvolto por Microsoft </li><ul><li>Pode conter case calquera codec: DV, MPG, DivX </li></ul><li>MPEG libre </li><ul><li>Fundam. contén arquivos codificados en MPG
  69. 69. MPEG-1: calidade CD (352x240 a 1 Mbps => 10 Mb/ minuto de video) </li><ul><li>O formato VCD emprega este formato </li></ul><li>MPEG-2: 720x480. </li><ul><li>Emprégase en DVDs ainda que tamén se emprega o formato SVCD </li></ul></ul></ul>
  70. 70. Parámetros que definen a calidade do video <ul><li>Fotogramas por segundo: usualmente entre 15 y 30
  71. 71. Tamaño de pantalla: 1024x1024, 720x540, 640x480, 320x240, ...
  72. 72. Velocidade de bits: 13.5, 6.75, 1 Mbps, 512, 340, 48 kbps </li></ul>
  73. 73. Planificando un vídeo <ul><li>Deberíamos de crear un “índice” igual que para calquera outro tipo de documento. </li><ul><li>Agora falarase de escenas </li></ul><li>Para definir os detalles técnicos temos que pensar no medio de distribución do mesmo </li><ul><li>CD o DVD: alta calidade
  74. 74. Rede de banda ancha: calidade media
  75. 75. Rede de banda estreita: baixa calidade </li></ul><li>A veces gravase en varias calidades </li><ul><li>Gravase en calidade alta e logo redúcese </li></ul></ul>
  76. 76. Capturas de pantalla con RecordMyDesktop
  77. 77. Configuración <ul><li>Instalación </li><ul><li>Paquetes recordmydesktop e gtp-recordmydesktop </li></ul><li>Execución </li><ul><li>Son e video /gtk-recordmydesktop </li></ul><li>Advanced </li><ul><li>Carpeta de destino, performance, sound, misc </li></ul></ul>
  78. 78. Capturar <ul><li>Seleccionar fiestra </li><ul><li>Select windows+premer co rato na fiestra desexada
  79. 79. Marcar un rectángulo sobre a “miniatura de pantalla”. </li></ul><li>Gravar </li><ul><li>Premer no botón gravar. </li></ul><li>Exercicio: facer unha gravación para explicar como se ven as propiedades dun arquivo </li></ul>
  80. 80. Montaxe de video con Kino
  81. 81. Entorno de traballo <ul><li>Abrir o Kino </li></ul>
  82. 82. Montaxe de video <ul><li>Cargar os videos </li><ul><li>File/abrir
  83. 83. Insert before/after </li></ul><li>Recortar un fragmento de video: trim </li><ul><li>Diferencia entre overwrite e insert </li></ul><li>Crear escenas novas </li><ul><li>Color fixo, gradiente, a partires de arquivo (de imaxe por exemplo) </li></ul></ul>
  84. 84. Montaxe de video <ul><li>Gardar proxecto
  85. 85. Exportar proxecto </li></ul>
  86. 86. Exercicio <ul><li>Facer un video divulgativo sobre un tema (por exemplo a táboa periódica dos elementos). </li><ul><li>Empregar imaxes estáticas e mesmo videos.
  87. 87. Grabar cortes axeitados para explicalas.
  88. 88. Ver a posibilidade de incorporar unha banda sonora </li></ul></ul>

×