Diseño de materiales multimedia. Web 2.0

(1)

(2)

Índice Temático

Diseño de materiales multimedia. Web 2.0 2

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.2 Ejemplo: lista de tareas ... 38

1.6 Tablas... 42

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.2 ¿Cómo comprimir un archivo o carpeta? ... 79

1.10.3 ¿Cómo descomprimir un archivo ZIP?... 79

(3)

Índice Temático

1.11 Documentos PDF en la web ... 84

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

(4)

Índice Temático

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.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

(5)

Índice Temático

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.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

(6)

Índice Temático

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.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.2 Reproductor de un vídeo FLV ...382

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

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

(7)

Índice Temático

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.2 Flickr: galería de fotografías...417

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

(8)

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.

(9)

Presentación

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

(10)

Imagen ::: Conceptos básicos de imagen digital

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,

(11)

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

(12)

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.

(13)

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.

(14)

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 Hasta 256 colores Número de colores: 24 bits color Muy alto grado de

compresión.

Formato de compresión Mayor compresión que el formato GIF (+10%)

Posible pérdida de

información Sin pérdida de información salvo reducción de colores Sin pérdida de información Admite carga progresiva Admite carga progresiva. Admite carga progresiva No admite fondos

transparentes Admite fondos transparentes Admite fondos transparentes No permite animación Permite animación 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.

(15)

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.

(16)

Imagen ::: Empezar con GIMP

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

(17)

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.

(18)

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

(19)

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.

(20)

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