Índice Temático 2

Diseño de materiales multimedia. Web 2.0

Diseño de materiales multimedia. Web 2.0

Presentación .......................................................................... 6

1. Páginas web ....................................................................... 8

1.1 Introducción ..........................................................................................9
1.1.1 Conceptos básicos........................................................................ 10
1.1.2 Mi primer documento HTML ............................................................ 13
1.1.3 El navegador Mozilla Firefox ........................................................... 14
1.1.4 Editores HTML ............................................................................ 16

1.2 Kompozer: instalación y uso ..................................................................... 17

1.2.1 ¿Qué es Kompozer?....................................................................... 18
1.2.2 Instalación de Kompozer en Windows ................................................ 18
1.2.3 Instalación de Kompozer en Ubuntu ................................................. 19
1.2.4 El entorno de Kompozer ................................................................ 22

1.3 Mi primera página.................................................................................. 23

1.3.1 Organización en carpetas ............................................................... 24
1.3.2 Iniciar un documento nuevo en Kompozer ........................................... 25
1.3.3 Insertar una imagen ..................................................................... 27
1.3.4 Insertar un hipervínculo................................................................. 29
1.3.5 Guardar un documento web............................................................ 30

1.4 Viñetas y marcadores ............................................................................. 31

1.4.1 Introducción .............................................................................. 32
1.4.2 Ejemplo: el glosario ..................................................................... 32

1.5 Listas numeradas................................................................................... 37

1.5.1 Introducción .............................................................................. 38
1.5.2 Ejemplo: lista de tareas ................................................................ 38

1.6 Tablas................................................................................................ 42
1.6.1 Introducción .............................................................................. 43
1.6.2 Ejemplo: tabla de datos ................................................................ 43

1.7 Hojas de estilo CSS ................................................................................ 49

1.7.1 ¿Qué es una hoja de estilos?............................................................ 50
1.7.2 Crear una hoja de estilo ................................................................ 51
1.7.3 Vincular una hoja de estilo a una página web....................................... 56
1.7.4 Generadores web de CSS................................................................ 58

1.8 Uso de plantillas ................................................................................... 59

1.8.1 ¿Para qué sirve una plantilla? .......................................................... 60
1.8.2 Crear una plantilla ....................................................................... 60
1.8.3 Crear una página HTML a partir de una plantilla ................................... 62

1.9 Formularios ......................................................................................... 66

1.9.1 ¿Qué es un formulario? .................................................................. 67
1.9.2 Formulario de búsqueda de Google ................................................... 67
1.9.3 Formulario de traducción de Babylon................................................. 72

1.10 Manejo y publicación de archivos ZIP ......................................................... 78

1.10.1 Introducción ............................................................................. 79
1.10.2 ¿Cómo comprimir un archivo o carpeta? ............................................ 79
1.10.3 ¿Cómo descomprimir un archivo ZIP? ................................................ 79
1.10.4 Enlace a un ZIP desde una página HTML ............................................ 80
Índice Temático 3
Diseño de materiales multimedia. Web 2.0

1.11 Documentos PDF en la web ..................................................................... 84

1.11.1 Introducción ............................................................................. 85
1.11.2 Lectura de archivos PDF en Windows................................................ 85
1.11.3 Instalación de PDF Creator en Windows ............................................ 85
1.11.4 Crear un archivo PDF con PDFCreator en Windows ............................... 86
1.11.5 Lectura de archivos PDF en Ubuntu ................................................. 89
1.11.6 Crear una impresora virtual PDF en Ubuntu........................................ 89
1.11.7 Utilizar una impresora virtual PDF en Ubuntu ..................................... 90
1.11.8 Crear documentos PDF desde OpenOffice .......................................... 90
1.11.9 Enlace de un documento PDF......................................................... 92
1.11.10 Enlace a una página de un PDF ..................................................... 94

1.12 Noticias RSS de un sitio web .................................................................... 98

1.12.1 ¿Qué es un canal RSS? .................................................................. 99
1.12.2 ¿Cómo leer un canal de noticias RSS? ............................................... 99
1.12.3 RSS y marcadores dinámicos en Firefox............................................100
1.12.4 Crear un servicio RSS en un sitio web .............................................101

1.13 El sitio web: estructura y navegación ........................................................104

1.13.1 ¿Qué es un sitio web? .................................................................105
1.13.2 La estructura de archivos y carpetas ...............................................105
1.13.3 Los nombres de carpetas y archivos ................................................106
1.13.4 La estructura de navegación.........................................................106
1.13.5 ¿Cómo crear un sitio web con Kompozer? .........................................108

1.14 El sitio web: ¿Cómo diseñar un menú de navegación? .....................................111

1.14.1 Instalación y ejecución de DHTML Menu ...........................................112
1.14.2 Crear el menú de navegación........................................................112
1.14.3 Exportar el código javascript del menú ............................................116
1.14.4 Integrar el menú en las páginas HTML .............................................117

1.15 Publicación web por FTP .......................................................................119

1.15.1 ¿Qué es publicar un sitio web?.......................................................120
1.15.2 Instalación de Filezilla en Windows ................................................120
1.15.3 Instalación de Filezilla en Ubuntu ..................................................121
1.15.4 Configurar el interfaz al idioma castellano .......................................121
1.15.5 Configurar conexión FTP .............................................................122
1.15.6 Conectar con el sitio remoto ........................................................124
1.15.7 Gestión FTP de archivos ..............................................................126
1.15.8 Descargas anónimas por FTP.........................................................128

1.16 Edición web en línea con Kompozer .........................................................129

1.16.1 Configuración del sitio para edición en línea .....................................130
1.16.2 Modificar el contenido de una página publicada .................................131
1.16.3 Operaciones básicas con archivos en servidor remoto...........................132
1.16.4 Nueva página en servidor remoto ...................................................132
1.16.5 Insertar una imagen del servidor en una página..................................134
1.16.6 Insertar una imagen del equipo en una página remota..........................135

1.17 Usabilidad de páginas web .....................................................................136

1.17.1 Aclaración terminológica .............................................................137
1.17.2 Navegabilidad ..........................................................................137
1.17.3 Diseño de páginas......................................................................137
1.17.4 Tipografía ...............................................................................138
1.17.5 Gráficos .................................................................................138
1.17.6 Accesibilidad ...........................................................................139
1.17.7 Para saber más.........................................................................139
Índice Temático 4
Diseño de materiales multimedia. Web 2.0

1.18 Derechos de autor ...............................................................................140

1.18.1 Introducción ............................................................................141
1.18.2 Los derechos de autor ................................................................141
1.18.3 Licencias Creative Commons ........................................................141
1.18.4 Añadir una licencia CC a una página HTML ........................................142

2. La imagen........................................................................ 145
2.1 Conceptos básicos de imagen digital ..........................................................146
2.1.1 El píxel....................................................................................147
2.1.2 Resolución de imagen ..................................................................147
2.1.3 Profundidad de color ...................................................................147
2.1.4 Modos de color ..........................................................................148
2.1.5 Formatos de imagen ....................................................................150
2.1.6 Consejos para la optimización de imágenes ........................................151

2.2 Empezar con GIMP ...............................................................................153

2.2.1 ¿Qué es GIMP?............................................................................154
2.2.2 Instalación de GIMP .....................................................................154
2.2.3 Inicio de GIMP ...........................................................................154
2.2.4 Entorno de edición...................................................................... 155
2.2.5 Crear una nueva imagen ...............................................................157
2.2.6 Guardar una imagen ....................................................................158

2.3 Optimización de imágenes ......................................................................161

2.3.1 Conversión de formatos ................................................................162
2.3.2 Guardar en formato GIF................................................................163
2.3.3 Guardar en formato JPG ...............................................................165
2.3.4 Guardar en formato PNG...............................................................166
2.3.5 Reducir la paleta de colores ..........................................................169

2.4 Dimensiones de una imagen.....................................................................171

2.4.1 Reducir el tamaño de una imagen....................................................172
2.4.2 Modificar el tamaño del lienzo........................................................176

2.5 Añadir textos y líneas a una imagen ...........................................................181

2.6 Copiar y pegar con GIMP ........................................................................186

2.6.1 Composición de imágenes .............................................................187
2.6.2 Recortado de imágenes ................................................................190

2.7 Añadir efectos especiales a una imagen con GIMP ..........................................192

2.7.1 Filtros .....................................................................................193
2.7.2 Textos con efectos especiales ........................................................195

2.8 GIFs de fondo transparente con GIMP .........................................................200

2.9 Tratamiento de imágenes por lotes con GIMP................................................203

2.9.1 Introducción .............................................................................204
2.9.2 Instalación del plugin DBP de GIMP en Windows ...................................204
2.9.3 Instalación del plugin DBP de GIMP en Ubuntu .....................................205
2.9.4 Conversión por lotes con GIMP........................................................206

2.10 Galería de fotografías ..........................................................................211

2.10.1 Porta Album Creator ..................................................................212
2.10.2 Autoviewer .............................................................................217
2.10.3 Postcard Viewer .......................................................................218

2.11 Capturas de pantalla con GIMP ...............................................................220

Índice Temático 5
Diseño de materiales multimedia. Web 2.0

2.12 Mapas de imágenes..............................................................................222

2.12.1 ¿Qué es un mapa de imagen? ........................................................223
2.12.2 Crear un mapa de imagen con Image Map de GIMP ..............................223
2.12.3 Integración HTML de un mapa de imagen .........................................227

2.13 Integración HTML de presentaciones .........................................................230

2.13.1 Exportar a Flash desde Openoffice Impress .......................................231
2.13.2 Integración HTML de la presentación Flash .......................................232

2.14 Diseño de mapas conceptuales para la web con FreeMind ...............................234

2.14.1 Instalación de FreeMind en Windows ...............................................235
2.14.2 Instalación de Freemind en Ubuntu ................................................235
2.14.3 Crear un mapa conceptual ...........................................................235
2.14.4 Integración HTML de un mapa conceptual.........................................236

3. El audio .......................................................................... 237

3.1 Introducción .......................................................................................238
3.1.1 Conceptos básicos de sonido digital .................................................239
3.1.2 Formatos de archivo de audio ........................................................240
3.1.3 Optimización de archivos de audio...................................................241

3.2 Primeros pasos con Audacity....................................................................242

3.2.1 ¿Qué es Audacity? .......................................................................243
3.2.2 Instalación del programa en Windows ...............................................243
3.2.3 Instalación del programa en Ubuntu .................................................243
3.2.4 El entorno del programa ...............................................................243

3.3 Reproducción de audio con Audacity ..........................................................248

3.3.1 Abrir un archivo de audio .............................................................249
3.3.2 Reproducción del audio ................................................................249
3.3.3 Propiedades de un archivo de audio .................................................250
3.3.4 Guardar un proyecto de Audacity ....................................................252

3.4 Optimización de audios ..........................................................................253

3.4.1 Conversión de formato .wav a .mp3 .................................................254
3.4.2 Configurar la calidad de exportación a MP3 ........................................257
3.4.3 Convertir un audio de estéreo a mono ..............................................258
3.4.4 Formatos de compresión WAV ........................................................262

3.5 La grabación de audio............................................................................264

3.5.1 Crear una grabación de voz ...........................................................265
3.5.2 Grabar audio de un CD .................................................................267
3.5.3 Grabar audio de la radio ...............................................................269
3.5.4 Grabar audio de un MIDI ...............................................................270

3.6 Copiar y pegar audio .............................................................................272

3.6.1 Seleccionar un fragmento de onda ...................................................273
3.6.2 Crear un nuevo archivo con un fragmento ..........................................275
3.6.3 Recortar un fragmento .................................................................276
3.6.4 Silenciar una selección .................................................................276
3.6.5 Crear un loop de audio .................................................................277
3.6.6 Mezclar pistas de audio ................................................................278

3.7 Aplicar efectos ....................................................................................280

3.8 Extracción de audio de un CD...................................................................287

3.8.1 Extracción de audio de un CD con CDex (Windows) ...............................288
3.8.2 Extracción de audio de un CD con Sound Juicer (Ubuntu)........................290
Índice Temático 6
Diseño de materiales multimedia. Web 2.0

3.9 Integración HTML básica de audio .............................................................293

3.10 Integración HTML avanzada de audios .......................................................297

3.10.1 Reproductor de midis .................................................................298
3.10.2 Reproductor MediaPlayer de Jeroen Wijering para MP3 ........................300
3.10.3 Reproductor XSPF......................................................................308
3.10.9 Diaporama: Imagen y audio sincronizados.........................................311

4. Vídeo y animaciones .......................................................... 313

4.1 Introducción .......................................................................................314
4.1.1 Conceptos básicos de video digital...................................................315
4.1.2 Formatos de archivos de video .......................................................316
4.1.3 ¿Qué es el streaming? ..................................................................317
4.1.4 Optimización de archivos de video...................................................318
4.1.5 Dispositivos de captura de video .....................................................319

4.2 Reproducción de vídeos con VLC Media Player...............................................320

4.2.1 ¿Qué es VLC Media Placer?.............................................................321
4.2.2 Instalación de VLC Media Player en Windows ......................................321
4.2.3 Instalación de VLC Media Player en Ubuntu .......................................321
4.2.4 Reproducción de un archivo de vídeo FLV con VLC Media Player ...............321

4.3 Descarga de archivos de vídeo..................................................................324

4.3.1 Descarga con Firefox (Unplug) ........................................................325
4.3.2 Volcados de streaming con VLC.......................................................330
4.3.3 Sitios web para descarga de vídeos ..................................................332

4.4 Captura de vídeo desde la cámara DV.........................................................336

4.4.1 Windows Movie Maker para Windows ................................................337
4.4.2 Kino para Ubuntu .......................................................................344

4.5 El DVD como fuente de vídeo ...................................................................350

4.5.1 Extracción de vídeo de un DVD con AutoGordian ..................................351
4.5.2 Extracción de fragmentos de vídeo de un DVD con ChopperXP y Super © .....360
4.5.3 Extracción de vídeo con dvd::rip en Ubuntu .......................................365

4.6 Conversión de formatos de vídeo ..............................................................370

4.6.1 Propiedades de un vídeo con MediaInfo .............................................371
4.6.2 Conversión de formatos de vídeo en Windows: Super © ..........................373
4.6.3 Conversión de formatos de vídeo en Ubuntu: WinFF ..............................378

4.7 Integración HTML básica de vídeo flash (FLV)................................................381

4.7.1 Introducción .............................................................................382
4.7.2 Reproductor de un vídeo FLV .........................................................382

4.8 Integración HTML de una lista de archivos flash (FLV)......................................384

4.8.1 Introducción .............................................................................385
4.8.2 Reproductor de una lista de archivos FLV...........................................385

4.9 Integración HTML de objetos Flash ............................................................394

4.9.1 ¿Qué es un objeto Flash?...............................................................395
4.9.2 Descarga de objetos Flash con Firefox ..............................................395
4.9.3 Integración HTML básica de objetos Flash ..........................................397
4.9.4 Integración HTML avanzada de objetos Flash ......................................399
4.9.5 Asistente de integración HTML de objetos Flash...................................402
4.9.6 Integración HTML de un mapa Google ...............................................405
Índice Temático 7
Diseño de materiales multimedia. Web 2.0

4.10 Integración HTML de applets de java ........................................................407

4.10.1 Applets: qué son y dónde conseguirlos.............................................408
4.10.2 Instalación de Java Runtime Environment (JRE) .................................408
4.10.3 Integración HTML del applet “Sopa de letras”....................................408
4.10.4 Integración HTML del applet “Puzzle” .............................................410
4.10.5 Integración HTML de un objeto JClic ...............................................412

5. Servicios Web 2.0 ............................................................. 414

5.1 Introducción ......................................................................................415

5.2 Flickr: galería de fotografías....................................................................417

5.2.1 Introducción .............................................................................418
5.2.2 Subir fotografias a Flickr...............................................................418
5.2.3 Organizar en álbumes ..................................................................420
5.2.4 Situar las fotos en el mapa (geolocalización) ......................................420
5.2.5 Integración HTML de una imagen Flickr .............................................421
5.2.6 Integracíón HTML de una presentación de fotografías Flickr ....................423
5.2.7 Integración HTML de un mapa de Flickr .............................................425

5.3 Slice.com: presentación de imágenes .........................................................427

5.4 SlideShare: presentaciones en línea ...........................................................431

5.5 BooMP3: audio en línea ..........................................................................435

5.5.1 ¿Qué es BooMP3? ........................................................................436
5.5.2 Subir un archivo local ..................................................................436
5.5.3 Integración HTML del reproductor de BooMP3 .....................................438

5.6 Multiply: repositorio de archivos ...............................................................440

5.6.1 Registrarse como usuario en Multiply................................................441
5.6.2 Subir e integrar una imagen al repositorio Multiply ...............................441
5.6.3 Subir e integrar un audio al repositorio Multiply...................................447
5.6.4 Subir e integrar un vídeo al repositorio Multiply...................................449

5.7 Scribd: documentos en línea ....................................................................453

5.8 YouTube: vídeo en streaming ...................................................................460

5.8.1 ¿Qué es Youtube?........................................................................461
5.8.2 Publicar un vídeo en Youtube .........................................................461
5.8.3 Integración HTML de un vídeo YouTube .............................................464
5.8.4 Crear una lista de reproducción de vídeos en Youtube ...........................465

5.9 Vídeos ..............................................................................................468

5.9.1 Vídeos subtitulados en OverStream ..................................................469
5.9.2 Edición de vídeos con JumpCut.......................................................472

5.10 JotForm: formularios en línea.................................................................475

5.10.1 Crear un formulario en JotForm ....................................................476
5.10.2 Integración HTML de un formulario Jotform ......................................480
5.10.3 Consulta y publicación de resultados...............................................481

5.11 PollDaddy: encuestas en línea.................................................................484

Presentación 6
Diseño de materiales multimedia. Web 2.0

Presentación
En los últimos años hemos asistido a un considerable auge de los espacios web educativos.
Estos abarcan no solo los sitios web de los centros de enseñanza sino también páginas
personales de profesores, de alumnos, proyectos educativos, actividades de formación,
grupos de trabajo, etc. Por otra parte la producción de materiales educativos se ha ido
orientando hacia la web en detrimento del soporte cd-rom por razones obvias: coste,
inmediatez, facilidad de actualización, difusión, etc.

En la publicación de contenidos educativos en Internet la opción más clásica es la edición de

páginas web en el equipo local utilizando un editor visual HTML para luego publicarlas vía FTP
en un servidor. Otra posibilidad, cada vez más extendida, es la utilización de un sistema de
gestión de contenidos (CMS=Content Management System) que permiten la edición en línea.
Estas soluciones se imponen cada vez más porque descentralizan la gestión y facilitan el
trabajo colaborativo. En el contexto educativo los CMS de uso más extendido son:
Joomla/Drupal (sitio web institucional o de proyecto), MediaWiki (wiki), Wordpress (blog) y
Moodle (e-learning).

En cualquiera de estas situaciones el curso "Diseño de materiales multimedia. Web 2.0"

puede resultar interesante y útil. Su propósito es la formación del profesorado en los
procedimientos básicos para la creación de contenidos multimedia adaptados a la web. Se
trata de preparar y optimizar recursos de tipo texto, imagen, audio o vídeo con una adecuada
relación peso/calidad, algo importante en Internet, y que pueden publicarse en una página
HTML, un gestor de contenidos CMS o bien servir de base para construir objetos o contenidos
más complejos utilizando herramientas de edición general (powerpoint, impress, flash, etc) o
herramientas de autor para recursos multimedia educativos (hot potatoes, jclic, squeak, lim,
etc).

Siguiendo un enfoque práctico del curso, en cada apartado, a partir de una necesidad
educativa definida, se proporcionarán unos recursos de partida, una o varias aplicaciones de
software y una secuencia detallada de pasos para obtener el contenido educativo final. Por
otra parte se ha pretendido que cada apartado sea independiente del resto para conseguir
cierta modularidad. Esto facilitaría la reutilización de contenidos en otros cursos o secuencias
de formación.

El curso se organiza en 5 módulos:

• Páginas web
• Imagen
• Audio
• Video y Animaciones
• Servicios Web 2.0

En el módulo Páginas web se propone Kompozer como editor HTML para crear páginas web.
Se describen los procedimientos para incorporar los elementos más habituales: texto,
imágenes, enlaces, viñetas, marcadores, listas numeradas, tablas y formularios. Se introduce
el concepto de sitio web definiendo pautas sobre el diseño de su estructura y navegación. Con
ello surge la necesidad de utilizar hojas de estilo CSS y plantillas HTML para asegurar cierta
unidad de estilo gráfico. Filezilla es el programa cliente FTP que se sugiere para la
publicación en un servidor remoto aunque también se indica cómo el propio Kompozer
proporciona procedimientos para la edición de contenidos en el servidor web. La publicación
de archivos ZIP y PDF así como de un canal RSS en un sitio web también permite poner a
disposición información en múltiples e interesantes formatos.
Presentación 7
Diseño de materiales multimedia. Web 2.0

Para la Imagen se utiliza el programa GIMP. Se plantean operaciones básicas como convertir
formatos de archivos, reducir la paleta de colores, modificar las dimensiones de la imagen o
del lienzo, etc. También se explican procedimientos habituales en el entorno educativo como
por ejemplo añadir textos y flechas a una imagen, componer imágenes, aplicar filtros y el
tratamiento de imágenes por lotes. La publicación en la web de álbumes de fotografías es
también una práctica muy habitual en el ámbito educativo. También se recogen los
procedimientos para utilizar mapas de imágenes y exponer presentaciones y mapas
conceptuales en formatos accesibles.

En lo relativo al Audio se propone el empleo de Audacity para reproducir, grabar desde

distintos medios y convertir a formato mp3 y ogg. Otra posibilidad es extraer el audio de una
pista de CD. La edición de audio permite copiar, pegar, mezclar, aplicar efectos, etc para
conseguir un audio más elaborado. Una vez que se dispone de una pista de audio se sugiere
utilizar una solución de consola de reproducción en flash para integrar en una página html. De
esta forma el resultado es accesible desde cualquier navegador o sistema.

En el módulo sobre Vídeo y Animaciones se plantean los principales conceptos relacionados

con el vídeo digital para luego proponer la visualización de vídeos con el reproductor
universal: VLC Media Player. Se proporciona información de cómo utilizar extensiones de
Mozilla Firefox (Unplug) para descargar en local archivos de vídeo desde Internet. También el
procedimiento para conocer los detalles técnicos de un archivo multimedia con Media Info y
convertir a otros formatos con Super © o WinFF. Otra opción es extraer el vídeo de un DVD
con soluciones como AutoGordian o bien dvd:::rip. También se ejemplifica cómo mostrar
vídeos FLV integrando el visor JW FLV Player en Flash dentro de una página HTML. En la
parte de animaciones se proponen distintos procedimientos para integrar un objeto de Flash o
un applet de java dentro de una página HTML.

En relación con la Web 2.0 se sugieren múltiples servicios en línea que se pueden crear,
configurar e integrar en las páginas de un blog y también en una página HTML editada con
Kompozer. Se documenta el uso didáctico de espacios como Flickr (galería de fotografías,
albumes y mapas), Slide.com (presentaciones de fotografías), SlideShare (presentaciones
Powerpoint o Impress en línea), BooMP3 (reproducción de audio MP3), Youtube (vídeos), etc.

El profesor/a con interés en el diseño de materiales digitales educativos puede encontrar en

este curso recetas útiles para resolver las necesidades más básicas relacionadas con la
elaboración y adaptación al medio web de recursos de texto, imagen, audio, vídeo y
animaciones.

Todas las aplicaciones de software que se proponen en este curso son de uso gratuito y de
libre distribución. Se puede seguir el curso indistintamente desde un equipo Windows o desde
un equipo Linux. La mayoría de las aplicaciones son multiplataforma y cuando esto no ha sido
posible se plantean alternativas y documentación para ambos. Los sistemas operativos
recomendados son: Windows XP SP2 y Ubuntu Linux 7.10
Imagen ::: Conceptos básicos de imagen digital 147
Diseño de materiales multimedia. Web 2.0

2.1 Conceptos básicos de imagen digital

Antes de estudiar los procedimientos más habituales de optimización y tratamiento de
imágenes es conveniente repasar algunas ideas clave relacionadas con la imagen digital.

2.1.1 El píxel

El píxel es la unidad mínima de visualización de una imagen digital. Si aplicamos el zoom

sobre ella observaremos que está formada por una parrilla de puntos o píxeles. Las cámaras
digitales y los escáneres capturan las imágenes en forma de cuadrícula de píxeles.

2.1.2 Resolución de imagen

Es el grado de detalle o calidad de una imagen digital ya sea escaneada, fotografiada o

impresa. Este valor se expresa en ppp (píxeles por pulgada) o en inglés dpi (dots per inch).
Cuantos más píxeles contenga una imagen por pulgada lineal, mayor calidad tendrá.

La resolución de un monitor se refiere al número de píxeles por pulgada que es capaz de

mostrar. La resolución de una pantalla de ordenador PC es de 72 ppp.

En una impresora se habla del número de puntos por pulgada que puede imprimir: 600, 1200,
etc.

Algunos escáneres suelen producir imágenes con una resolución por defecto de 200 ppp.

Las cámaras digitales prestan una calidad que se expresa en MegaPíxels. Así por ejemplo una
cámara de 8 MP es aquella capaz de tomar una fotografía con 8 millones de píxeles.

2.1.3 Profundidad de color

La profundidad de color se refiere al número de bits necesarios para codificar y guardar la

información de color de cada píxel en una imagen. Un bit es una posición de memoria que
puede tener el valor 0 ó 1. Cuanto mayor sea la profundidad de color en bits, la imagen
dispondrá de una paleta de colores más amplia. Se utiliza 1-bit para imágenes en
blanco/negro, sin grises (0=color negro, 1= color blanco), 2-bits = 4 colores (00=color negro,
Imagen ::: Conceptos básicos de imagen digital 148
Diseño de materiales multimedia. Web 2.0

01=color X, 10=color Y, 11=color blanco), 3-bits = 8 colores, ..., 8-bits = 256 colores, ..., 24-
bits = 16.7 millones de colores.

2.1.4 Modos de color

Llamamos modo de color al sistema de coordenadas que nos permiten describir el color de
cada píxel utilizando valores numéricos.

Los modos de color más utilizados son:

• Modo monocromático. Se corresponde con una profundidad de color de 1 bit. La

imagen está formada por píxeles blancos o píxeles negros puros.

• Modo Escala de Grises. Maneja el canal negro y permite 256 tonos de gris entre el
blanco y negro puros.

• Modo Color indexado. Utiliza un canal de color indexado de 8 bits pudiendo obtener
con ello hasta un máximo de 256 colores (28)

• Modo RGB. Cada color se forma por combinación de tres canales. Cada canal se
corresponde con un color primario: Red (rojo), Green (verde), y Blue (azul). Asigna un
valor de intensidad a cada color que oscila entre 0 y 255. De la combinación surgen
Imagen ::: Conceptos básicos de imagen digital 149
Diseño de materiales multimedia. Web 2.0

hasta 16,7 millones de colores. Ejemplo: El valor R:255, G:0, B:0 representa al color
rojo puro.

• Modo HSB. Cada color surge de los valores de estos tres parámetros: Hue (Tono) que
es el valor del color: rojo, azul, verde, etc. En GIMP se expresa en grados y oscila
entre 0 y 360. Saturation (Saturación) que se refiere a la pureza del color y va del 0%
al 100%. Brightness (Brillo) referencia la intensidad de luz del color, es decir, la
cantidad de negro o blanco que contiene estando su valor entre 0 (negro) y 100
(blanco). Ejemplo: El color rojo puro tiene un código RGB como (255,0,0) y también
un código HSB (0,100,100). En la mayoría de programas de tratamiento de imágenes
se puede elegir un color introduciendo su código RGB –es la opción más frecuente- o
alternativamente su código HSB. En ambos casos la imagen maneja una paleta de
colores de 24 bits.

• Modo CMYK. Cada color se forma por combinación de cuatro canales. Cada canal se
corresponde con un color primario de impresión: Cyan (Ciano), Magent (Magenta),
Yellow (Amarillo) y BlacK (Negro). Cada canal puede tener como valor entre 0 y 255.
Se trata de imágenes con una profundidad de color de 32 bits.
Imagen ::: Conceptos básicos de imagen digital 150
Diseño de materiales multimedia. Web 2.0

2.1.5 Formatos de imagen

Las imagénes digitales se pueden guardar en distintos formatos. Cada uno se corresponde con
una extensión específica del archivo que lo contiene. Los más utilizados en la actualidad son:
BMP, GIF, JPG, TIF y PNG.

BMP (Bitmap = Mapa de bits)

• Ha sido muy utilizado porque fue desarrollado para aplicaciones Windows.
• La imagen se forma mediante una parrilla de píxeles.
• El formato BMP no sufre pérdidas de calidad y por tanto resulta adecuado para
guardar imágenes que se desean manipular posteriormente.
• Ventaja: Guarda gran cantidad de información de la imagen.
• Inconveniente: El archivo tiene un tamaño muy grande.

GIF (Graphics Interchange Format = Formato de Intercambio Gráfico).

• Ha sido diseñado específicamente para comprimir imágenes digitales.
• Reduce la paleta de colores a 256 colores como máximo (profundidad de color de 8
bits).
• Admite gamas de menor número de colores y esto permite optimizar el tamaño del
archivo que contiene la imagen.
• Ventaja: Es un formato idóneo para publicar dibujos en la web.
• Inconveniente: No es recomendable para fotografías de cierta calidad ni originales ya
que el color real o verdadero utiliza una paleta de más de 256 colores.

JPG-JPEG (Joint Photographic Experts Group = Grupo de Expertos Fotográficos Unidos).

• A diferencia del formato GIF, admite una paleta de hasta 16 millones de colores.
• Es el formato más común junto con el GIF para publicar imágenes en la web.
• La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. En la
mayoría de los casos esta pérdida se puede asumir porque permite reducir el tamaño
del archivo y su visualización es aceptable. Es recomendable utilizar una calidad del
60-90 % del original.
• Cada vez que se modifica y guarda un archivo JPEG, se puede perder algo de su
calidad si se define cierto factor de compresión.
• Las cámaras digitales suelen almacenar directamente las imágenes en formato JPEG
con máxima calidad y sin compresión.
• Ventaja: Es ideal para publicar fotografías en la web siempre y cuando se configuren
adecuadamente dimensiones y compresión.
• Inconveniente: Si se define un factor de compresión se pierde calidad. Por este
motivo no es recomendable para archivar originales.

TIF-TIFF (Tagged Image File Format = Formato de Archivo de Imagen Etiquetada).

• Almacena imágenes de una calidad excelente.
• Utiliza cualquier profundidad de color de 1 a 32 bits.
• Es el formato ideal para editar o imprimir una imagen.
• Ventaja: Es ideal para archivar archivos originales.
• Inconveniente: Produce archivos muy grandes.

PNG (Portable Network Graphic = Gráfico portable para la red).

• Es un formato de reciente difusión alternativo al GIF.
• Tiene una tasa de compresión superior al formato GIF (+10%)
• Admite la posibilidad de emplear un número de colores superior a los 256 que impone
el GIF.
• Debido a su reciente aparición sólo es soportado en navegadores modernos como IE 4
o superior.
Imagen ::: Conceptos básicos de imagen digital 151
Diseño de materiales multimedia. Web 2.0

Nota:

Para visualizar la extensión de los archivos desde el explorador de Windows sigue los
siguientes pasos:
1. Desde el escritorio elige Inicio > Mi PC
2. En la barra de menús selecciona Herramientas > Opciones de carpeta
3. Pulsa en la pestaña Ver.
4. En la lista Configuración avanzada localiza en la parte más inferior de la lista el
elemento: “Ocultar las extensiones de archivo para tipos de archivo
conocidos”.
5. Asegúrate de que la casilla del item mencionado NO está activada.
6. Pulsa en Aceptar para guardar los cambios.

Tras ejecutar estas instrucciones se mostrará siempre la extensión de los archivos

(.doc, .pdf, .html) cuando utilices el explorador de archivos de Windows para moverte entre
las carpetas de tu disco duro.

En la siguiente tabla se recogen las características diferenciales más significativas de los tres
formatos de imagen recomendados para publicar una imagen en la web.

JPG GIF PNG

Número de colores: 24 bits
color o 8 bits B/N
Muy alto grado de
compresión.
Posible pérdida de
información
Admite carga progresiva
No admite fondos
transparentes
No permite animación
Hasta 256 colores
Formato de compresión
Sin pérdida de información
salvo reducción de colores
Admite carga progresiva.
Admite fondos transparentes
Permite animación
Número de colores: 24 bits
color
Mayor compresión que el
formato GIF (+10%)
Sin pérdida de información
Admite carga progresiva
Admite fondos transparentes
No permite animación

2.1.6 Consejos para la optimización de imágenes

En este apartado se exponen algunos consejos sobre el tratamiento de imágenes para el

diseño web:

1. Al crear una página web interesa que los archivos que contienen las imágenes sean lo
menos pesados posibles para agilizar su descarga y visualización por Internet.
2. El tamaño de un archivo gráfico viene determinado por las dimensiones de la imagen,
su resolución, el número de colores y el formato (JPG, GIF, PNG).
3. Crea y guarda imágenes en resolución no superior a 72 ppp. Es la resolución que se
suele usar en las pantallas de ordenador. No merece la pena optar por valores
mayores ya que aumenta considerablemente el peso del archivo a descargar y el
usuario no lo aprecia. Si la imagen se diseña para imprimir entonces debemos optar
por una resolución entre 200-300 ppp.
4. En ocasiones puede interesar reducir el número de colores de la paleta porque ello
supone reducir el tamaño del archivo.
5. Conviene utilizar un programa de edición gráfica para definir las dimensiones
concretas de la imagen antes de insertarla en la página web.
Imagen ::: Conceptos básicos de imagen digital 152
Diseño de materiales multimedia. Web 2.0

6. Lo más conveniente es guardar los originales de las imágenes favoritas en formato

BMP, TIFF ó JPEG sin comprimir. A partir de ellas se puede crear una copia en
formato GIF (PNG) o JPEG con las dimensiones, resolución y paletas adecuados para
publicarlas en la web.
7. Las imágenes GIF son más adecuadas para dibujos, gráficos y logotipos. Son aquellas
que se pueden representar fácilmente con colores sólidos y una paleta con un número
reducido de colores.
8. Las imágenes JPEG son mejores para fotografías e imágenes con degradados, porque
admiten color de 24 bits, y porque gracias a su compresión ofrecen una imagen más
brillante que ocupa menos espacio en el disco.
9. Es aconsejable NO insertar imágenes en una página utilizando <Ctrl>+<C> (Copiar) y
<Ctrl>+<V> (Pegar). Esto creará archivos de baja calidad y de cierto peso. Es
preferible optimizar la imagen usando un programa de edición gráfica y luego
insertarla en la página.

Para reducir el peso de un archivo gráfico se pueden modificar algunos de sus parámetros
utilizando un editor de imágenes como por ejemplo GIMP:

• Formato del archivo gráfico:

- Conversión de formatos.
• Paleta de colores:
- Reducir la paleta de colores.
• Tamaño de la imagen (Anchura x Altura)
- Reducir el tamaño de una imagen.
- Recortado de imágenes.
Imagen ::: Empezar con GIMP 154
Diseño de materiales multimedia. Web 2.0

2.2 Empezar con GIMP

2.2.1 ¿Qué es GIMP?

GIMP es el acrónimo de “GNU Image Manipulation Program” y significa programa libre para la
manipulación de imágenes. Es una aplicación adecuada para la edición y composición de
imágenes así como para el retoque fotográfico. Esta herramienta es gratuita y representa una
excelente opción frente a otros programas comerciales como Adobe PhotoShop o Paint Shop
Pro.

2.2.2 Instalación de GIMP

Windows

Para instalar GIMP sobre Windows puedes descargar y ejecutar el archivo instalador gimp-
2.4.4-i686-setup.exe.

En el sitio web oficial del proyecto GIMP podrás encontrar la versión más reciente o que se
adapta a tu sistema: http://www.gimp.org/

Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente

archivo a una carpeta de tu disco duro o pendrive: X-Gimp_2.4.4.exe

Linux

GIMP viene instalado por defecto como editor de gráficos de la mayoría de distribuciones de
Linux. Para situar un icono de acceso directo sobre el escritorio selecciona Aplicaciones >
Gráficos > Editor de imágenes GIMP y arrastra su icono hasta el escritorio.

2.2.3 Inicio de GIMP

1. Doble clic sobre el icono de GIMP que se ha creado en el escritorio una vez finalizado
el proceso de instalación.

2. Tras unos instantes se iniciará el programa.

3. Si deseas que no se muestre el Consejo del día desmarca la casilla Mostrar un
consejo la próxima vez que inicie El Gimp y pulsa en el botón Cerrar.
Imagen ::: Empezar con GIMP 155
Diseño de materiales multimedia. Web 2.0

2.2.4 El entorno de edición

1. Descarga y descomprime a una carpeta de tu disco duro el archivo pizarra.zip. En su

interior se encuentra el archivo gráfico: pizarra.jpg.
2. Desde la ventana Gimp selecciona Archivo > Abrir. En el cuadro de diálogo Abrir
imagen navega para situarte en la carpeta donde se encuentra el archivo pizarra.jpg.
3. Clic sobre este fichero de imagen y pulsa en el botón Abrir.

4. Al abrir una imagen con GIMP se muestran las siguientes ventanas independientes:
Imagen ::: Empezar con GIMP 156
Diseño de materiales multimedia. Web 2.0

1. Caja de herramientas principal. Es el núcleo principal de GIMP. Contiene las

opciones de menú: Archivo, Exts y Ayuda y una botonera de iconos para acceder a
las principales herramientas de edición. Si cierras esta ventana se cerrarán el resto de
ventanas de la aplicación.
2. Opciones de herramienta. Aparece unida por debajo a la Caja de herramientas
principal y contiene las opciones de la herramienta seleccionada en ese momento.
3. Ventana de imagen. GIMP muestra cada imagen abierta en una ventana
independiente.
4. Capas, Canales, Rutas y Deshacer. En función de la solapa activada permitirá
interactuar con las capas, canales o rutas de la imagen. En la solapa deshacer se
mostrará la pila de acciones realizadas permitiendo deshacer/rehacer algunas de ellas
con sólo pulsar en los botones de flechas situados en su base.
5. Brochas/Patrones/Degradados. Desde este panel es posible manejar el estilo del
trazo del pincel así como los patrones y degradados de los rellenos.

Esta configuración inicial de GIMP puede simplificarse cerrando la ventana Capas, Canales,
Rutas y Deshacer. Para recuperar la visualización de una ventana no principal selecciona
Archivo > Diálogos > Crear un empotrable nuevo > …

Para restaurar estos paneles a la disposición inicial selecciona Archivo > Preferencias >
Gestión de la ventana y pulsar en el botón Restaurar las posiciones de ventana guardadas a
los valores predeterminados. Clic en Aceptar y luego en Reiniciar. Si se cierra GIMP y se
vuelve a abrir se mostrarán los paneles por defecto.
Imagen ::: Empezar con GIMP 157
Diseño de materiales multimedia. Web 2.0

2.2.5 Crear una nueva imagen

1. Elige Archivo > Nuevo.

2. Se muestra el cuadro de diálogo Crear una imagen nueva. Por defecto GIMP define
unas dimensiones de la nueva imagen de 420 x 300 píxeles. Se pueden modificar estos
valores o bien elegir unas dimensiones predefinidas en la lista desplegable Plantilla. A
continuación pulsa en Aceptar.

3. En la ventana de la nueva imagen se podrán aplicar las distintas herramientas para

crear y editar la imagen deseada.
Imagen ::: Empezar con GIMP 158
Diseño de materiales multimedia. Web 2.0

2.2.6 Guardar una imagen

1. Para guardar una imagen selecciona Archivo > Guardar como … en la ventana que la
muestra.

2. En el cuadro de diálogo Guardar imagen teclea un nombre de archivo en la casilla

Nombre. Es conveniente que este nombre contenga todos los caracteres en
minúsculas, sin espacios en blanco ni caracteres especiales: ñ, signos de puntuación,
etc. Por defecto GIMP en Windows suele guardar la imagen en la carpeta Mis
imágenes situada dentro de la carpeta Mis documentos del usuario. En Ubuntu la
guardará por defecto en la carpeta del usuario <usuario>