1
Taller I: Manipulación de
imágenes y publicación de
contenidos
Universidad de Jaén, 22-23 de Enero de 2015
2
 Índice del curso
 Introducción al material multimedia
 Creación de un Cd autoejecutable
 Publicación de contenidos ...
3
1. Introducción al material multimedia
 ¿Qué vamos a ver en esta presentación?
 Definiciones relacionadas con el conte...
4
Definiciones
 Objeto multimedia: Cualquier objeto que combina
contenidos en formato texto, sonido, imágenes,
animación ...
5
Definiciones
 Software educativo: Aplicaciones de ordenador
creados con la finalidad específica de ser utilizados por
l...
6
Proceso de Aprendizaje
+
Sentidos
=
Mejora la Asimilación
Retención de Conocimientos
2. Diseño de materiales docentes
mu...
7
 ¿Cómo generar recursos multimedia?
 Materiales existentes en el mercado:
 Derechos de autor
 Licencias del software...
8
 Lo fundamental es tener claro …
a) La finalidad del material
b) La aportación al aprendizaje del alumnado
2. Diseño de...
9
 Puntos a tener
en cuenta
Objetivos de aprendizaje que
persigue.
Contenidos de aprendizaje.
Actividades de aprendizaje....
10
 Claridad
 Coherencia
2. Diseño de materiales docentes
multimedia
11
 Claridad del lenguaje
 Vocabulario en función de los usuarios finales.
 Ideas claras.
 Frases cortas.
 Utilizar l...
12
 Coherencia estética
 Situación de los diferentes elementos en la pantalla.
 Uso del color y tipos de letra.
 Estil...
13
El equilibrio
 GRÁFICOS:
 Iconos:
 Claros.
 Sencillos.
 COLOR:
 Colores realistas.
 No saturación.
 TEXTO:
 Es...
14
3. Características del software multimedia
educativo
 Facilidad de uso e instalación
 Calidad del interface hacia el ...
15
4. Características de los objetos
multimedia
 Estándares utilizados para su desarrollo (libres
o privativos)
 Parámet...
16
Tipos de objetos multimedia
 Tres tipos:
 Imagen (con y sin animación)
 Gráficos vectoriales (SVG, SWF, PDF, …)
 Gr...
17
Imagen
 Parámetros de una imagen
 Profundidad (nº bits utilizados
para representar el color) Número de bytes
 Tamaño...
18
Imagen fija
19
Imagen fija
20
Imagen dinámica
 Características
 Resolución: 8 bits
 Tamaño: 12x10 cm.
 Formato: Gif animado.
 Tamaño (bytes): 60...
21
Ejemplo de profundidades
Imagen Profundidad Cantidad de colores
Formatos más
utilizados
1 bit 21 = 2 colores GIF, BMP
8...
22
Tamaño de un imagen
(almacenamiento)
Tamaño en
pixeles
Profundidad
de pixel
Tamaño del archivo
bits Bytes (bits/8)
Kbyt...
23
Tamaño de un imagen (dimensiones)
 Puntos por pulgada (ppp o dpi):
 Medida usada para impresión
 Afecta a la dimensi...
24
Tipos de imágenes
 Gráficos rasterizados:
 Imágenes formadas por una malla de puntos
(pixeles), con información sobre...
25
Tipos de imágenes
 Gráficos vectoriales:
 Gráficos bidimensionales formados por puntos,
líneas y curvas generados a p...
26
Gráfico vectorial vs rasterizado
27
La imagen ilustra una diferencia entre las imágenes
vectoriales y los mapas de bits. La imagen vectorial puede
ser esca...
28
Gráficos vectoriales
 SVG
 Estándar abierto
 Apropiado para figuras
 Menor tamaño que los bmp
 Soportados por la m...
29
Gráficos vectoriales
 PDF
 Propiedad de Adobe
System (abierto)
 Multiplataforma
 Puede contener texto,
gráfico, ima...
30
Gráficos vectoriales
 SWF
 Propiedad de Adobe
Systems.
 Admite animaciones
gráficas
 Necesita instalar un
visualiza...
31
Gráficos rasterizados
 BMP
 Propiedad de Microsoft
 Hasta 24 bits de profundidad,
sin comprensión
 Pierde calidad e...
32
Gráficos rasterizados
 JPEG
 Propietario (Joint
Photographic Experts
Group)
 Aplica algoritmo de
compresión con pérd...
33
Gráficos rasterizados
 GIF
 Aplica algoritmo de
compresión sin pérdida
 Profundidad hasta 8 bits
 Formato más utili...
34
Gráficos rasterizados
 PNG
 Considerado como una
mejora del formato .gif
 Profundidad hasta 24 bits
 Utilizado en I...
35
Gráficos rasterizados
 TIFF
 Profundidad 24-bits (16
millones de colores)
 Tamaño de los gráficos
demasiado grande p...
36
Caso especial
 PS y EPS (Metaarchivos)
 PS es un lenguaje de
programación estándar
 Interpretado por muchos
disposit...
37
Audio y Vídeo
 Parámetros de objetos de audio
 Sonido mono o estéreo
 Frecuencia de muestreo (khz)
 Frames (fotogra...
38
Audio
 WAV (WAVE)
 Propiedad de Microsoft e IBM
 Admite sonido mono y estéreo
 Ideal para guardar audios originales...
39
Audio
 MP3
 Propietario (Moving Picture Experts Group)
 Utiliza un codec con pérdida pero mantiene un elevado
nivel ...
40
Video
 FLV
 Propiedad de Adobe System
 Utiliza codec con pérdida
 Utilizado en Internet (Youtube, Google Video)
 N...
41
Video
 MP4
 Desarrollado por Apple
 Utiliza codec con pérdida
 Es un archivo contenedor: combina sonido y video
sim...
42
Descarga de video de Internet
 Complemento Firefox
 https://addons.mozilla.org/es-ES/firefox/addon/video-
downloadhel...
43
Descarga de video de Internet
 Complemento Firefox
Próxima SlideShare
Cargando en…5
×

Intromultimediataller1

210 visualizaciones

Publicado el

Multimedia

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
210
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Intromultimediataller1

  1. 1. 1 Taller I: Manipulación de imágenes y publicación de contenidos Universidad de Jaén, 22-23 de Enero de 2015
  2. 2. 2  Índice del curso  Introducción al material multimedia  Creación de un Cd autoejecutable  Publicación de contenidos en la nube (Slideshare)  Software gráfico: Irfanview  Software gráfico: Gimp  Software gráfico: InkScape
  3. 3. 3 1. Introducción al material multimedia  ¿Qué vamos a ver en esta presentación?  Definiciones relacionadas con el contexto y elementos multimedia  Pautas para el diseño de materiales docentes multimedia  Características de los materiales multimedia  Tipos de información multimedia  Imagen  Audio  Video
  4. 4. 4 Definiciones  Objeto multimedia: Cualquier objeto que combina contenidos en formato texto, sonido, imágenes, animación y video con el propósito de informar y/o entretener al usuario.  Objeto hipermedia: Objetos que combinan contenidos en formato texto, video, imagen, audio y que permitan la interacción del usuario (paginas web)
  5. 5. 5 Definiciones  Software educativo: Aplicaciones de ordenador creados con la finalidad específica de ser utilizados por los alumnos como herramienta de aprendizaje  Software educativo multimedia: Aplicaciones de ordenador dirigidas a entornos educativos que incluyen texto, imagen, sonido y video como instrumentos para la facilitar el aprendizaje.
  6. 6. 6 Proceso de Aprendizaje + Sentidos = Mejora la Asimilación Retención de Conocimientos 2. Diseño de materiales docentes multimedia
  7. 7. 7  ¿Cómo generar recursos multimedia?  Materiales existentes en el mercado:  Derechos de autor  Licencias del software:  Software libre:  http://www.juntadeandalucia.es/educacion/p ortalaverroes  http://edu.kde.org/applications/all/  Modificación y adaptación de materiales existentes.  Diseño y elaboración de materiales propios. 2. Diseño de materiales docentes multimedia
  8. 8. 8  Lo fundamental es tener claro … a) La finalidad del material b) La aportación al aprendizaje del alumnado 2. Diseño de materiales docentes multimedia
  9. 9. 9  Puntos a tener en cuenta Objetivos de aprendizaje que persigue. Contenidos de aprendizaje. Actividades de aprendizaje. Evaluación. 2. Diseño de materiales docentes multimedia
  10. 10. 10  Claridad  Coherencia 2. Diseño de materiales docentes multimedia
  11. 11. 11  Claridad del lenguaje  Vocabulario en función de los usuarios finales.  Ideas claras.  Frases cortas.  Utilizar la “voz” activa y no la voz pasiva.  Lenguaje ¿informal?.  Ejemplos familiares.  Lenguaje integrador (no sexista/no racista). 2. Diseño de materiales docentes multimedia
  12. 12. 12  Coherencia estética  Situación de los diferentes elementos en la pantalla.  Uso del color y tipos de letra.  Estilo de los gráficos.  Utilización de espacios en blanco.  Equilibrio (gráficos y texto).  Coherencia de estilos (menús, cabeceras, etc)  Mínima memorización (no respecto a contenidos, sino al sistema de navegación “migas de pan”) 2. Diseño de materiales docentes multimedia
  13. 13. 13 El equilibrio  GRÁFICOS:  Iconos:  Claros.  Sencillos.  COLOR:  Colores realistas.  No saturación.  TEXTO:  Estilos usuales.  No cursiva (más difícil de leer).  BOTONES:
  14. 14. 14 3. Características del software multimedia educativo  Facilidad de uso e instalación  Calidad del interface hacia el usuario  Calidad de los contenidos  Navegación e interacción  Capacidad de motivación y autoaprendizaje  Documentación complementaria
  15. 15. 15 4. Características de los objetos multimedia  Estándares utilizados para su desarrollo (libres o privativos)  Parámetros específicos (tamaño, densidad del color, formato, etc)  Compatibilidad entre diferentes formatos  Facilidad de difusión (e.j. Internet)  Nivel de edición (posibilidad de retocar)
  16. 16. 16 Tipos de objetos multimedia  Tres tipos:  Imagen (con y sin animación)  Gráficos vectoriales (SVG, SWF, PDF, …)  Gráficos rasterizados (BMP, JPEG, GIF, TIFF, PNG,…)  Audio (WAV, WMA, MP3, …)  Video (FLV, AVI, MPEG-4, MOV,…)
  17. 17. 17 Imagen  Parámetros de una imagen  Profundidad (nº bits utilizados para representar el color) Número de bytes  Tamaño (píxeles, cm,)  Formatos  Compatibilidad y migración  Algoritmos de comprensión (con o sin pérdida de calidad)
  18. 18. 18 Imagen fija
  19. 19. 19 Imagen fija
  20. 20. 20 Imagen dinámica  Características  Resolución: 8 bits  Tamaño: 12x10 cm.  Formato: Gif animado.  Tamaño (bytes): 60 KB
  21. 21. 21 Ejemplo de profundidades Imagen Profundidad Cantidad de colores Formatos más utilizados 1 bit 21 = 2 colores GIF, BMP 8 bits (1 Byte) 28= 256 colores GIF, BMP 16 bits (2 bytes) 216 = 65536 colores BMP, TGA, TIF, PSD, PICT 24 bits (1 byte Rojos 1 byte Azules 1 byte Verdes) 224 = 16.777.216 colores BMP, TGA, TIF, PSD, PICT, JPG
  22. 22. 22 Tamaño de un imagen (almacenamiento) Tamaño en pixeles Profundidad de pixel Tamaño del archivo bits Bytes (bits/8) Kbytes (B/1024) Mbytes (KB/1024) 640 x 480 x 1 bit = 307.200 = 38.400 = 37,5 = 0,036 640 x 480 x 8 bits = 2.457.600 = 307.200 = 300 = 0,292 640 x 480 x 24 bits = 7.372.800 = 921.600 = 900 = 0,878 640 x 480 x 32 bits = 9.830.400 = 1.128.000 = 1.200 = 1,171  Nº pixeles  1 bytes = 8 bits
  23. 23. 23 Tamaño de un imagen (dimensiones)  Puntos por pulgada (ppp o dpi):  Medida usada para impresión  Afecta a la dimensiones de la figura pero no al tamaño del fichero (bytes)  Normalmente las imágenes en las pantallas de ordenador se mueven entre 72 y 93 ppp, en impresiones de calidad a partir de 300 ppp  Ejemplo:  Imagen de 1600x1200 pixels a 72 ppp impresa ocupa: 56x42cm  Imagen de 1600x1200 pixels a 180 ppp impresa ocupa: 22x16cm  Imagen de 1600x1200 pixels a 300 ppp impresa ocupa: 13x10cm
  24. 24. 24 Tipos de imágenes  Gráficos rasterizados:  Imágenes formadas por una malla de puntos (pixeles), con información sobre cada píxel  Admiten escalados pero con pérdida de calidad  Comparativamente ocupan mayor tamaño que los gráficos vectoriales  Ideal para imágenes con gran variedad de colores (fotografías)
  25. 25. 25 Tipos de imágenes  Gráficos vectoriales:  Gráficos bidimensionales formados por puntos, líneas y curvas generados a partir de fórmulas matemáticas  Admiten escalados sin pérdida de calidad  Ideal para figuras geométricas, diagramas, esquemas (dibujos simples que no sean imágenes, fotos, etc.)
  26. 26. 26 Gráfico vectorial vs rasterizado
  27. 27. 27 La imagen ilustra una diferencia entre las imágenes vectoriales y los mapas de bits. La imagen vectorial puede ser escalada, tanto como se requiera, sin perdida de calidad. Esto no es así con un mapa de bits. Gráfico rasterizado vs. vectorial
  28. 28. 28 Gráficos vectoriales  SVG  Estándar abierto  Apropiado para figuras  Menor tamaño que los bmp  Soportados por la mayoría de los navegadores (Firefox, Opera, …), otros pueden que necesiten instalar un plugin  Extensión: .svg  Software: Inkscape, xfig
  29. 29. 29 Gráficos vectoriales  PDF  Propiedad de Adobe System (abierto)  Multiplataforma  Puede contener texto, gráfico, imagen, enlaces, etc.  Muy utilizado en Internet  Extensión: .pdf
  30. 30. 30 Gráficos vectoriales  SWF  Propiedad de Adobe Systems.  Admite animaciones gráficas  Necesita instalar un visualizador Flash o plugin.  Ficheros no demasiado grandes  Utilizado en Internet, menús DVD  Extensión: .swf  Software: Adobe Flash Player EJEMPLO ANIMACION SWF
  31. 31. 31 Gráficos rasterizados  BMP  Propiedad de Microsoft  Hasta 24 bits de profundidad, sin comprensión  Pierde calidad en los cambios de escala  No se aplica algoritmos de compresión Ficheros demasiado grandes (¡No recomendables para Internet!)  Extensión: .bmp  Suelen exportarse a otros formatos: .jpg, .gif, .png
  32. 32. 32 Gráficos rasterizados  JPEG  Propietario (Joint Photographic Experts Group)  Aplica algoritmo de compresión con pérdida parametrizable  Profundidad hasta 24 bits  Formato más utilizado para guardar fotografías  Muy utilizado en Internet  Extensión: .jpg  No recomendable para texto y gráficos líneales
  33. 33. 33 Gráficos rasterizados  GIF  Aplica algoritmo de compresión sin pérdida  Profundidad hasta 8 bits  Formato más utilizado para dibujos e iconos (animados)  Muy utilizado en Internet  Permite transparencia  Extensión: .gif
  34. 34. 34 Gráficos rasterizados  PNG  Considerado como una mejora del formato .gif  Profundidad hasta 24 bits  Utilizado en Internet  Alto ratio de compresión sin pérdida de calidad  Permite transparencia  Extensión: .png
  35. 35. 35 Gráficos rasterizados  TIFF  Profundidad 24-bits (16 millones de colores)  Tamaño de los gráficos demasiado grande para su distribución a través de Internet  Sufijo: .tif
  36. 36. 36 Caso especial  PS y EPS (Metaarchivos)  PS es un lenguaje de programación estándar  Interpretado por muchos dispositivos de impresión  EPS es un fichero .ps con restricciones: permite una previsualización  Sufijo: .ps, .eps
  37. 37. 37 Audio y Vídeo  Parámetros de objetos de audio  Sonido mono o estéreo  Frecuencia de muestreo (khz)  Frames (fotogramas por segundo)  Tamaño del fichero (bytes)  Formatos (wav, wma, mp3, flv, avi, mp4, mov)  Codec (Codificadores/decodificadores): Algoritmo encargado de de/codificar un objeto multimedia con el propósito de reducir su tamaño y enviarlo a través de Internet. Suelen llevar aparejados pérdida de calidad.  Streaming: Técnica que permite descargar y reproducir simultáneamente un objeto multimedia
  38. 38. 38 Audio  WAV (WAVE)  Propiedad de Microsoft e IBM  Admite sonido mono y estéreo  Ideal para guardar audios originales  No se suele utilizar comprimido  Ficheros muy grandes  No utilizado en Internet  Extensión: .wav  WMA (Window Media Audio)  Propiedad de Microsoft  Utiliza codec con pérdida  Formato nativo del Windows Media Player  Competencia al formato MP3  Extensión: .wma
  39. 39. 39 Audio  MP3  Propietario (Moving Picture Experts Group)  Utiliza un codec con pérdida pero mantiene un elevado nivel de calidad  Muy utilizado en Internet  Extensión: .mp3  OGG  Formato libre desarrollado por la fundación Xiph.org  Grado de compresión y calidad similar a MP3  No todos los reproductores leen por defecto este formato  Extensión: .ogg
  40. 40. 40 Video  FLV  Propiedad de Adobe System  Utiliza codec con pérdida  Utilizado en Internet (Youtube, Google Video)  Necesita instalar un plugin en los navegadores  Extensión: .flv  Software: Adobe Flash Player. VLC Media Player.  AVI  Propiedad de Microsoft  Utiliza códecs de comprensión  Extensión: .avi  No se utiliza demasiado en Internet, peso elevado EJEMPLO AVI EJEMPLO FLV
  41. 41. 41 Video  MP4  Desarrollado por Apple  Utiliza codec con pérdida  Es un archivo contenedor: combina sonido y video simultáneamente  Extensión: .mp4  Quick Time  Propiedad de Apple  Dispone de un reproductor para generar elementos multimedia (video y sonido)  Utiliza codec con pérdida  Utilizado en Internet  Extensión: .mov, .qt EJEMPLO MP4
  42. 42. 42 Descarga de video de Internet  Complemento Firefox  https://addons.mozilla.org/es-ES/firefox/addon/video- downloadhelper/
  43. 43. 43 Descarga de video de Internet  Complemento Firefox

×