Este documento presenta un seminario sobre el desarrollo de objetos de aprendizaje multimedia. El seminario cubre temas como la innovación educativa en la enseñanza virtual, las posibilidades del contenido audiovisual en la enseñanza, los diferentes formatos de imagen y video, y las herramientas de software multimedia. El objetivo es proporcionar una base común de conocimientos y términos técnicos para el diseño de contenidos educativos virtuales de alta calidad.

1. SEMINARIO
Competencias para el
desarrollo de
Objetos de Aprendizaje
Multimedia
Facilitadores
Rocío Maya, Luis Tornos, Cristina Arroyo

2. ¿Hablamos de e-learning?
Antes de empezar
El profesorado se enfrenta a nuevos retos para innovar en sus enseñanzas, debe manejar la
dinamización y tutorización online, herramientas de diseño de contenido multimedia y ser creativo.
2

3. 1. La innovación educativa en la enseñanza virtual.
2. Las posibilidades del contenido audiovisual en la enseñanza.
3. La imagen y sus diferentes formatos.
4. El vídeo y sus diferentes formatos.
Índice de contenidos
Objetivo del seminario
Base común de conocimientos y términos para hablar el mismo
lenguaje técnico
3

4. Va más allá de la conversión a
formato digital de un determinado
elemento.
Nuevo recurso:
Una versión mejorada,
más dinámica y visual.
Digitalizar vs. virtualizar
4

5. Presencia del profesor.
Limitaciones tiempo/espacio.
Número de participantes reducido.
La innovación educativa en la enseñanza virtual
5
Formación presencial

6. 100% online.
Se utilizan LMS
(Plataformas virtuales de
aprendizaje).
MOOC (Cursos masivos
online).
E-learning
La innovación educativa en la enseñanza virtual
6

7. Soporte tangible (aulas virtuales).
Herramientas de colaboración,
seguimiento y difusión.
Contenidos personalizados.
Ejemplos: Blackboard
o Moodle.
LMS (Learning Management System)
La innovación educativa en la enseñanza virtual
7

8. Formación presencial entornos
virtuales.
Nuevas formas de Comunicación.
Institución como mediadora y
docente como facilitador.
Blended learning
La innovación educativa en la enseñanza virtual
8

9. Son estrategias de aprendizaje que invierten
la dinámica habitual de la enseñanza
(clase al revés).
Uso de competencias y aprendizaje
autónomo.
Docentes = facilitadores.
Objetivo: “Aprender a aprender”.
Flipped learning
La innovación educativa en la enseñanza virtual
9

10. “Juegos serios”
Sistema de recompensas/niveles.
Aprendizaje por experiencia.
Recursos interactivos.
Gamificación
La innovación educativa en la enseñanza virtual
10

11. La innovación educativa en la enseñanza virtual
11
¿Qué hemos visto?
E-learning
Blended learning
Flipped learning
Gamificación
Mobile learning
Micro learning

12. Metodología: “Teoría del diamante”
Intervienen varios agentes:
Redactor:
-Busca, selecciona y redacta el contenido.
Diseñador:
-Revisa y da forma al objeto de aprendizaje.
Supervisor:
-Comprueba y testea su calidad.
La innovación educativa en la enseñanza virtual
12

13. Herramientas e-learning
La innovación educativa en la enseñanza virtual
MultimediaSoftwares
13

14. EXE LEARNING
Aquí tienes algunos
de los elementos
con los que cuenta
el software
14

15. Las posibilidades del contenido audiovisual en la enseñanza
EXE LEARNING
15

16. Elementos
interactivos
Las posibilidades del contenido audiovisual en la enseñanza
16
ADOBE CAPTIVATEMultimedia

17. ADOBE CAPTIVATE
Contenido multimedia
Las posibilidades del contenido audiovisual en la enseñanza
Tutoriales interactivos
17
Multimedia

18. CAMTASIA
Las posibilidades del contenido audiovisual en la enseñanza
Vídeo presentacionesTutoriales interactivos
18
Multimedia

19. PREZI
Las posibilidades del contenido audiovisual en la enseñanza
Multimedia
19

20. POWTOON
Las posibilidades del contenido audiovisual en la enseñanza
Multimedia
20

21. Pautas para la virtualización
Como estrategias de virtualización:
Sintetización del contenido
Utilización de gráficos, imágenes, , la
negrita y párrafos cortos
Simplicidad y coherencia
Elementos interactivos
Apostar por los contenidos
dinámicos, visuales e interactivos
Que su navegación sea intuitiva
Las posibilidades del contenido audiovisual en la enseñanza
21

22. Veamos un ejemplo práctico
Las posibilidades del contenido audiovisual en la enseñanza
22

23. HTML
Lenguaje html y editor de textos. Lenguaje Css y hoja de estilos.
CSS
Las posibilidades del contenido audiovisual en la enseñanza
Es un lenguaje informático que
se utiliza para la configuración
de la estructura de una página.
Define un estándar básico para
la elaboración de espacios a
través de códigos.
Tipo de lenguaje de diseño
gráfico para definir y crear el
aspecto de una página.
Modificando la hoja de estilo es
posible personalizar el aspecto
de un curso e-learning.
23

24. “Shareable Content Object Reference
Model”: modelo de referencia para
compartir contenidos.
Permite la reutilización de los contenidos.
Permite el seguimiento de actividades.
Es compatible con todas las LMS.
SCORM
Las posibilidades del contenido audiovisual en la enseñanza
24

25. EMBEBER/INCRUSTAR
Deriva del uso del código <embed>
en el lenguaje informático, se utiliza
para integrar dentro de un marco, un
elemento interactivo o aplicación
externa.
Puede ser un vídeo, una página
web…etc.
Las posibilidades del contenido audiovisual en la enseñanza
25

26. Uso de colores corporativos.
Las posibilidades del contenido audiovisual en la enseñanza
A través de la
combinación de colores,
el diseño de los
contenidos debe ser
uniforme
26

27. Y en materia de diseño multimedia…
¿Cuál es vuestro nivel?
27

28. La imagen digital
¿Qué es la imagen digital?
La representación bidimensional de una imagen empleando bits
(unidad mínima de información compuesta por dígitos binarios 1 y 0),
que se emplea a instancias de la informática y cualquier dispositivo digital.
Tipos
Mapa de bits Imagen vectorial
www.enter.co
28

29. La imagen digital
¿De dónde se obtiene la
imagen digital?
29

30. La imagen digital
¿Qué es un pixel?
Es la unidad mínima de una imagen digital en mapa de bits.
El color que compone cada pixel se obtiene mediante tres colores:
el rojo, el verde y el azul (esquema conocido como RGB).
‘Picture (imagen) + Element (elemento)’
R G
B
30
Al hacer zoom en una imagen, podremos
observar que está compuesta por una parrilla
de puntos o píxeles.

31. También denominada rasterizada o bitmap.
Está compuesta por píxeles.
Realizar cambios sobre estos píxeles afecta directamente a la
imagen que conforman.
La imagen digital
www.tiendapixeles.com
Imagen en mapa de bits
¿Sabías que...?
Rasterización es el proceso por el cuál una imagen
vectorial se convierte en un conjunto de píxeles.
31

32. La imagen digital
Calidad
Resolución
Tamaño
Cuanto mayor sea el número de
píxeles que compone una imagen…
Imagen bitmap
32

33. La imagen digital
Grado de detalle o calidad de una imagen
digital.
¿A qué llamamos resolución?
Este valor se expresa en ppp (píxeles por
pulgada).
A mayor resolución:
+ detalle + definición
= más peso del archivo
Para web, crea y exporta imágenes en
resolución aproximada a 72 ppp.
¡Recuerda!
www.es.mario.wikia.com
Imagen bitmap
33

34. La imagen digital
Inconveniente: Esta interdependencia entre calidad de la imagen y cantidad de píxeles
tiene como consecuencia que al ampliarse la imagen se produzca una distorsión o
pérdida de calidad, también conocido como ‘efecto pixelación’.
Imagen bitmap
34

35. La imagen digital
517 px
640 px
www.fandom.wikia.com
Por ejemplo, una imagen de 517 x 640 px,
significará que está compuesta por 517
columnas y 640 filas de píxeles.
¿Hablamos de tamaño?
Viene definido por las dimensiones de sus píxeles.
Filas + columnas = tamaño de la imagen.
Imagen bitmap
35

36. La imagen digital
Formatos imágenes bitmap
36

37. La imagen digital
Compresión muy alta; poco peso = ideal para Web.
Buena calidad.
La mayoría de las cámaras digitales no profesionales y
teléfonos suelen almacenar directamente en este
formato.
www.nintenderos.com
JPEG / JPG
Inconveniente: su compresión puede suponer pérdida de
información que puede afectar a la calidad de la imagen.
37

38. La imagen digital
Nació como alternativa al GIF.
Permite almacenar transparencias = montajes más
creativos.
Menos compresión que JPG.
www.kisspng.com
PNG
Inconveniente: no permite animación.
38

39. La imagen digital
www.gifer.com
12
GIF
Optimiza tamaño del archivo: - nº de colores.
Recomendado para guardar imágenes no
fotográficas: logotipos, colores, dibujos, etc.
Permite crear animaciones.
39
Inconveniente: no recomendado para fotografías
de alta calidad u originales.

40. La imagen digital
Construidas a base de líneas y curvas definidas por atributos matemáticos
(curvas Béizer).
No sufren pérdida en su resolución y su escala es infinita.
www.flaticon.com
Imagen vectorial
40

41. La imagen digital
Cada objeto se puede manejar de forma
independiente al resto.
Ideales para diseño gráfico
(por ejemplo, para diseño y creación de logotipos).
Poco peso como archivo digital.
www.flaticon.com
Imagen vectorial
41

42. La imagen digital
CDR- Corel Draw
AI-Adobe Ilustrator
EPS- Encapsulated
Postscript
SWF- Shockwave Flash
Formatos imagen vectorial
42

43. La imagen digital
Imagen mapa de bits Vs. vectorial
www.deviantart.com www.deviantart.com
43

44. La imagen digital
Imagen mapa de bits Vs. vectorial
www.flaticon.com www.flaticon.com
44

45. La imagen digital
Proceso de preparación y adecuación de una imagen teniendo en cuenta su uso on-line,
considerando para ello principalmente dos factores fundamentales:
¿Qué entendemos por optimización de la imagen digital?
Tiempo de descarga
Pérdida de calidad
45

46. La imagen digital
Ahí van algunos trucos para optimizar tus imágenes…
46

47. La imagen digital
¡Aquí tienes algunas
herramientas para crear y
editar tus imágenes!
www.teleadhesivo.com
47

48. La imagen digital
Banco de imágenes ¡Recuerda!
NUNCA debemos buscar en imágenes de
y publicarlas ya que no son gratuitas y tienen derechos de
autor. Utiliza los bancos de imágenes.
Utiliza los iconos o fotografías de un mismo diseñador /
fotógrafo. Intenta mantener la misma línea gráfica y visual.
Lee atentamente los acuerdos de licencia y condiciones de
uso de cada uno de los bancos de imágenes que utilices para
entender las limitaciones que puedes tener.
48

49. La imagen digital
Banco de imágenes
49

50. El vídeo digital
¿Qué entendemos por vídeo digital?
Es un proceso técnico mediante el cual la imagen real captada por la
cámara se convierte en lenguaje binario (digital).
50

51. ¿Qué es un frame o fotograma?
Imagen concreta dentro de una sucesión de imágenes en movimiento.
‘Cada una de las imágenes instantáneas en las que se divide una película de cine que,
proyectadas secuencialmente, dan sensación de movimiento’. (Konigsberg, 2004).
Velocidad a la cual un dispositivo muestra imágenes o fotogramas. La exposición y sucesión de
estas imágenes da como resultado el vídeo. El ojo humano es capaz de distinguir
aproximadamente 20 imágenes por segundo. De esta forma, al mostrarse más de 20
imágenes por segundo, es posible engañar al ojo y crear ilusión de movimiento.
Fotograma por segundo (FPS)
Conceptos clave
El vídeo digital
51

52. Se trata de la proporción entre la anchura y altura de un vídeo.
Existen dos proporciones de aspectos fundamentales: 4:3 (utilizada aprox. Hasta 2009) y 16:9.
El vídeo digital
52
Aspecto

53. ¿Qué entendemos por plano? ¿Cuántos tipos hay?
Un plano es la unidad narrativa más pequeña de un hecho audiovisual.
El plano viene determinado por el enfoque, el encuadre y la posición.
Existen múltiples clasificaciones:
Conceptos clave
El vídeo digital
53

54. Plano general
Plano panorámico
Conceptos claveConceptos clave
El vídeo digital
54

55. Plano americano
Conceptos claveConceptos clave
Plano medio
El vídeo digital
55

56. Conceptos claveConceptos clave
Primer plano
Primerísimo primer plano
El vídeo digital
56

57. Conceptos claveConceptos clave
Plano detalle
El vídeo digital
57

58. El códec (Codificador-Decodificador) será el encargado de
comprimir los archivos de vídeo y audio para que ocupen el menor
espacio y será capaz de descomprimir la información del archivo a
la hora de reproducirlo.
La elección del tipo de formato dependerá del uso y el soporte del
propio vídeo.
Formatos
El vídeo digital
58
Códec
“Especificación de cómo guardar la información de un vídeo.
Es esa especie de ‘caja’ (contenedor) donde se guardan las imágenes en movimiento”.

59. + utilizado porque permite visualización con la mayoría de
reproductores.
Buena calidad.
Peso elevado del archivo.
No recomendable para uso web.
Desarrollado por Apple.
Buena calidad/peso = recomendado para publicar vídeos en
web.
Formatos: tipos
El vídeo digital
x.AVI
.MOV
59

60. Gran calidad, tamaño reducido.
Utilización generalizada.
MPG-4 (mp4): Recomendado para web.
Flash Vídeo
Alta calidad de imagen.
Buena opción para uso en web por su amplia accesibilidad desde la mayoría de sistemas
operativos y navegadores.
El vídeo digital
MPEG
FLV
60
Formatos: tipos

61. Formato: MOV, MPEG y FLV son los más adecuados para publicar un vídeo en web debido a su
adecuada relación calidad-peso y porque permiten streaming.
Comprar los derechos de la música que se utilice con Copyright. Puede hacerse contratando el servicio
directamente a su autor/compositor o utilizando un banco de músicas online.
Buscar canciones, sonidos u otras composiciones que tengan licencia Creative Commons con uso
comercial.
Algunos consejos
El vídeo digital
- Youtube Audio Library
- Vimeo Music Store
- Jamendo
- Free Music Archive
- Musopen
- Dig CCmixter
- Sound Cloud
- Audionautix
61

62. El vídeo digital
Consejos para la optimización de grabación de vídeo
62
Cuida el encuadre.
En el caso de realizar la grabación con un móvil, debes evitar hacerlo en vertical.
Asegúrate de dónde estás enfocando.
Si utilizas un dispositivo móvil para la grabación evita el zoom digital, ya que, por
lo general, la imagen pierde calidad y nitidez.

63. ¡Gracias por vuestra atención!
Os esperamos en:
Laboratorio Multimedia
Ed. 25 Biblioteca CRAI
El vídeo digital
63