Diseño de materiales multimedia. Web 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

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


3

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


4

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


5

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


6

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


7

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 Diseño de materiales multimedia. Web 2.0

6

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 Diseño de materiales multimedia. Web 2.0

7

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

1. Páginas web

Päginas web ::: Introducción Diseño de materiales multimedia. Web 2.0

9

1.1 Introducción


10

1.1 Introducción 1.1.1 Conceptos básicos A modo de introducción y con el propósito de unificar terminología a continuación se describe el significado de algunos términos muy utilizados en el diseño web: World Wide Web (WWW) Es el sistema de presentación de la información más utilizado en Internet. Sus principales características son:

• Hipertexto: Es texto o imagen que se muestra en la pantalla vinculada a otras páginas del mismo sitio o de sitios ajenos. Al situar el puntero del ratón sobre él, éste toma el aspecto de una mano. Al hacer clic se mostrará la página vinculada al mismo.

• Multimedia: En la pantalla aparece texto, imágenes, videos, audios, animaciones, etc.

• Universalidad: Se puede acceder desde cualquier tipo de equipo o sistema operativo (Windows, Linux, Mac), usando cualquier navegador y desde cualquier parte del mundo.

• Pública: Toda su información está distribuida en miles de ordenadores (servidores) que ofrecen su espacio para almacenarla. Es información pública y normalmente accesible por cualquier usuario.

• Dinámica: Mucha información, aunque está almacenada, puede ser actualizada por el público que la consulta sin que el usuario necesite conocer detalles técnicos de su mantenimiento. Son las páginas activas: asp, php o jsp.

Navegador Es el programa que se utiliza para acceder a los contenidos de Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Los navegadores más populares son Internet Explorer, Mozilla Firefox, NetScape, Opera, Safari, etc.


11

Servidor Es el ordenador encargado de proporcionar al navegador del cliente los documentos y medios que éste solicita. HTTP (HyperText Transfer Protocol) Es el protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de Internet entre el servidor y el navegador. El protocolo http:// se indica en el inicio de la dirección. Si no se teclea este prefijo, el navegador lo añade de forma automática.

URL (Universal Resource Locator) Es la dirección donde se encuentra un recurso en Internet. Ejemplo: http://www.google.es. Si no se indica página html, el servidor enviará la página índice (index) o bien por defecto (default). Durante la navegación por Internet …

1) El usuario, situado en el equipo cliente, teclea la URL en la casilla dirección del navegador y pulsa la tecla <enter>.

2) La petición se dirige a los servidores DNS que traducen esta URL a una dirección IP. Por ejemplo: www.cnice.mec.es -> 195.53.123.85. Es posible situar en el navegador esta dirección aunque resulte más complicada e ininteligible.

3) La petición llega al servidor que tiene esa IP. 4) El servidor devuelve la página solicitada. 5) El archivo HTML y los multimedia referenciados se almacenan en la carpeta caché del

navegador (disco duro del equipo cliente). Cuando se han descargado estos activos entonces el usuario visualiza la página y todos sus elementos.


12

HTML (HyperText Markup Language) Es el lenguaje en el que se diseñan las páginas que se visualizan a través del navegador. Este lenguaje se basa en etiquetas (instrucciones que le dicen al navegador como deben mostrarse) y atributos (parámetros que dan valor a la etiqueta). Una página HTML contiene texto con un cierto formato y referencias a archivos externos que contienen imágenes, sonidos, animaciones, etc.

Archivo HTML El lenguaje HTML se utiliza para definir un documento que se visualizará a través del navegador. Este documento se guarda en un archivo con extensión .htm ó .html Básicamente los documentos escritos en HTML constan de texto y etiquetas. Las etiquetas permiten definir el formato del texto, el título que mostrará en la barra de título del navegador, los elementos multimedia que aparecerán incrustados en el documento pero que se almacenan en archivos externos, etc. Todo documento HTML tiene la siguiente estructura: cabecera y cuerpo del documento. Las tres etiquetas que describen su estructura general son:

• <html>: indica que se inicia el documento. • <head>: incluye el título de la página (<title>) que se muestra en la barra de título

del navegador. • <body>: contiene la información visible.


13

1.1.2 Mi primer documento HTML

1. Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas. En Ubuntu puedes utilizar el procesador de textos mediante: Aplicaciones > Accesorios > Procesador de textos.

2. En un documento nuevo escribe el siguiente texto:

<html> <head> <title>Mi primera pagina</title> </head> <body> Hola mundo </body> </html>

3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.


14

4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este documento.

5. Introduce el nombre del archivo añadiéndole la extensión .htm Ejemplo: prueba.htm 6. Pulsa en el botón Guardar. 7. Cierra la ventana del Bloc de Notas. 8. Elige Inicio > Mis Documentos para situarte en esta carpeta donde has guardado tu

archivo HTML. Encontrarás un archivo con el icono de un documento HTML con el nombre que has elegido.

9. Haz doble clic sobre el icono de este archivo y se abrirá el navegador configurado por defecto en tu equipo mostrando el contenido de esta página HTML.

10. Observa que en la barra de título del navegador aparece el texto que has encerrado entre las etiquetas <title> … </title> y en el documento en blanco el texto que has incluido entre <body>…</body>

1.1.3 El navegador Mozilla Firefox Firefox es un navegador gratuito que representa una excelente alternativa a Internet Explorer. 1.1.3.1 Características de Firefox Sus características más destacadas son: Multiplataforma Existen versiones de Mozilla Firefox para Windows, Linux y Mac Navegación con pestañas Se pueden abrir simultáneamente varias páginas web de tal forma que cada una se visualiza en una pestaña independiente. Cada pestaña dispone de su propio botón de cerrado. Si se cierra accidentalmente una pestaña se puede recuperar en el menú Historial. Restauración de sesión Cuando Firefox se cierra o reinicia se ofrece la opción de restaurar la sesión para evitar la pérdida de información en formularios, descargas, etc. Corrector ortográfico Si se dispone del complemento Diccionario de Español/España se puede activar el corrector ortográfico integrado que subrayará las palabras no tecleadas correctamente en cualquier cuadro de texto de la página web. Mediante clic derecho sobre esa palabra se ofrecerán alternativas para sustituirla. Sugerencias de búsqueda Al comenzar a escribir en la barra de búsqueda de Google se mostrará una lista de sugerencias. Canales RSS Permite leer directamente los titulares de noticias RSS sin necesidad de tener instalado ningún otro programa.


15

Búsqueda integrada Firefox proporciona una barra de búsqueda que integra los motores más utilizados a nivel mundial: Google, Yahoo!, eBay, Diccionario RAE, Wikipedia y Creative Commons. Para ello basta con elegir el motor e introducir el término de búsqueda. Bloqueador de ventanas emergentes Se pueden controlar las ventanas emergentes molestas evitando que se desplieguen. Mediante una barra informativa o un icono en la parte inferior de la pantalla se notifica al usuario el bloqueo de ventanas. Accesibilidad Firefox incluye distintas prestaciones para facilitar la accesibilidad a personas con deficiencias visuales: aumento del tamaño de la fuente mediante <Ctrl>+Scroll del ratón, compatibilidad con lectores de pantalla (p.e. Freedom Scientific’s JAWS). Protección antiphising Cuando una página web sea sospechosa de fraude por robo de identidad digital frente a una entidad bancaria (physing), Firefox advertirá al usuario y ofrecerá una página de búsqueda para encontrar la página auténtica que se está buscando. Actualizaciones automáticas Firefox comprueba la versión del navegador y si existe una más reciente avisa al usuario sobre la posibilidad de instalarla. Esta actualización suele ser pequeña resultando fácil y rápida de descargar e instalar. Protección contra programa espías Firefox no permite que una página web descargue, instale o ejecute programas en el equipo sin un consentimiento explícito del usuario. Limpieza de información privada Utilizando esta utilidad situada en el menú Herramientas se garantiza que se limpian todos los datos privados de la navegación en un solo clic. Es especialmente útil en un equipo multiusuario donde se abre sesión siempre con el mismo usuario Windows. Complementos Firefox ofrece más de 1000 complementos que permiten aumentar las prestaciones por defecto de este navegador web: lectura de noticias RSS, herramientas web y de desarrollo, descargas de archivos, privacidad y seguridad, herramientas de búsqueda, marcadores, diccionarios, multimedia, etc. El uso de un administrador de complementos facilita las operaciones de instalación, desinstalación y desactivación. Temas Se pueden instalar y configurar distintos temas que permiten cambiar los colores, fuentes, iconos, gráficos, etc del interfaz de Mozilla Firefox. Plugins Firefox dispone de la mayoría de plugins necesarios para visualizar todo tipo de contenidos multimedia: Adobe Flash Player, Java, QuickTime, RealPlayer, Windows Media Player, etc.


16

1.1.3.2 Instalación de Firefox Para Windows puedes descargar e instalar el archivo Firefox Setup 2.0.0.12.exe . Firefox es el navegador web por defecto de la mayoría de distribuciones de Linux por lo que si utilizamos, por ejemplo, Ubuntu, no será necesario instalarlo. En el sitio web oficial del proyecto Mozilla Firefox podrás encontrar la versión más reciente o que se adapta a tu sistema: http://www.mozilla-europe.org/es/products/firefox/ Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente archivo a una carpeta de tu disco duro o pendrive: Firefox_2.0.0.12.exe 1.1.4 Editores HTML Para facilitar la escritura de documentos HTML se utilizan programas específicos. Los más utilizados permiten complejos diseños y evitan trabajar directamente con el código HTML. Se llaman editores visuales porque proporcionan un entorno WYSIWYG (What You See Is What You Get) donde se trabaja viendo el documento y sus objetos tal y como se mostrarían en el navegador manteniéndose oculto el código HTML. Existen multitud de editores web comerciales pero los más populares en el entorno Windows son:

• Microsoft FrontPage. Es fácil de utilizar porque tiene un entorno muy similar a Word. Su última versión recibe el nombre de Expresión Web Designer.

• Adobe Dreamweaver. Pertenece a la suite de Adobe. Es un programa muy recomendable por sus múltiples prestaciones.

En el entorno Linux los editores HTML más utilizados son: BlueFish (Gnome) y Quanta+ (KDE). En este curso se propone utilizar Kompozer (http://www.kompozer.net/) por sus interesantes características:

• Editor visual. • Gratuito. • Soporta tablas, plantillas y hojas de estilo. • Subida de archivos por FTP al servidor. • En castellano. • Multiplataforma: windows, linux, mac, etc • Portable.

Páginas web ::: Kompozer: instalación y uso Diseño de materiales multimedia. Web 2.0

17

1.2 Kompozer: instalación y uso


18

1.2 Kompozer: instalación y uso 1.2.1 ¿Qué es Kompozer? Kompozer es un editor WYSIWYG (What You See Is What You Get = Lo que ves es lo que tienes) de páginas web. Resulta una herramienta de uso fácil, de libre distribución y de uso gratuito basado en el motor de Mozilla. Este programa es el sucesor no oficial del conocido editor Nvu 1.0 y se propone como alternativa ya que Nvu no se actualiza desde el 2005 y una nutrida comunidad de usuarios desarrolladores se han encargado de evolucionar Nvu bajo esta nueva denominación con múltiples correcciones y parches. La página de KompoZer es http://www.kompozer.net/ 1.2.2 Instalación de Kompozer en Windows

1. Descarga el archivo KompozerPortable.exe a una carpeta de tu disco duro. Doble clic para ejecutarlo. Otra opción es visitar la página oficial de Kompozer para descargar e instalar la versión más reciente: http://www.kompozer.net/

2. La instalación de Kompozer es totalmente limpia, es decir, se descomprime en una carpeta de tu disco duro y dentro de esa carpeta estarán todos los archivos necesarios para que funcione. En el cuadro de texto Extract to: (Extraer a:) indica la letra de la unidad de tu disco duro seguido de dos puntos C: y pulsa en Extract.

3. Después de unos segundos se habrá instalado en la carpeta C:\ KompozerPortable. 4. Utiliza el explorador de archivos Inicio > Mi PC para navegar hasta el interior de esta

carpeta. 5. Desde el explorador de archivos haz clic derecho sobre el icono de Kompozer.exe y

selecciona Crear acceso directo.

6. Clic derecho sobre el icono de acceso directo que has creado y elige Cambiar nombre. Introduce como nuevo nombre: Kompozer


19

7. Clic derecho sobre este icono y elige Copiar. Navega hasta el escritorio de Windows, haz clic derecho sobre un espacio vacío y elige Pegar. De esta forma hemos situado un icono de acceso directo al programa Kompozer en el escritorio.

1.2.3 Instalación de Kompozer en Ubuntu

1. Desde el escritorio elige Aplicaciones > Añadir o quitar … 2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles.

3. Introduce el término Kompozer en el cuadro de texto Buscar: y a continuación pulsa la tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de verificación que acompaña a la entrada de Kompozer. Pulsa en el botón Aplicar cambios para iniciar la instalación. Confirma la instalación pulsando de nuevo en el botón Aplicar.


20

4. Si estás conectado a Internet se descargarán los archivos necesarios para su

instalación. Una vez concluída se mostrará el mensaje de éxito. Clic en el botón Cerrar.

5. Kompozer se suele instalar por defecto en inglés. Es necesario descargar e instalar el pack del idioma castellano. Para ello navega hasta la página language packs del sitio de Kompozer (http://www.kompozer.net/). Pulsa sobre el enlace al paquete XPI correspondiente al idioma Español (es-ES), selecciona Save to Disk (Guardar en disco) y pulsa en el botón OK.

6. El archivo se guardará por defecto en /home/<usuario>/. A continuación abre Kompozer mediante Aplicaciones > Internet > Kompozer.

7. Desde Kompozer selecciona File > Open File. En la casilla Look in: selecciona la carpeta donde hemos descargado el pack de castellano. En la lista desplegable Files of type elige All files (Todos los archivos). En la lista de archivos marca el archivo XPI descargado y pulsa en el botón Open.


21

8. Clic en el botón Install Now (Instalar ahora). Trancurridos unos segundos se mostrará un cuadro de diálogo con información de que la instalación se ha realizado con éxito. Cierra esta ventana y reinicia el programa para activar el cambio de idioma.

9. Se puede situar un acceso directo al programa en el escritorio. Para ello despliega en el menú de programas: Aplicaciones > Internet > Kompozer. Arrastra el icono de Kompozer hasta un hueco libre del escritorio. Esto creará un acceso directo al programa desde el escritorio.


22

1.2.4 El entorno de Kompozer Haz doble clic sobre el icono de Kompozer del escritorio.

1. Barra de Menús. Ofrece acceso a todas las opciones del programa organizadas como en otras aplicaciones de Windows en Archivo, Editar, Ver, Insertar, …

2. Barra de Redacción. Consta de los botones de acceso a las operaciones más frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.

3. Barra de Formato. Contiene las herramientas más útiles para aplicar formato al texto: tipo de fuente, tamaño, color, efecto, justificación, etc. Si se sitúa el ratón sobre cada botón se muestra un mensaje indicando su función.

4. Barra de pestañas. Kompozer permite editar varias páginas usando un sistema de pestañas donde cada documento abierto es accesible al pulsar sobre la pestaña correspondiente. El nombre del archivo aparece acompañado por el icono de un diskete rojo cuando esa página ha sido modificada pero no guardada.

5. Documento. Muestra el contenido del documento HTML actual. 6. Barra de modo de edición. Indica el modo de vista que está activo en el documento

actual. Se puede cambiar el modo de visualización pulsando en una de estas pestañas: Normal, Etiquetas HTML, Código fuente y Vista preliminar. Mientras no se indique lo contrario se utilizará el modo de visualización Normal.

7. Barra de estado. Muestra la posición del cursor con respecto a la jerarquía de etiquetas HTML del documento. Se pueden asignar atributos a una etiqueta haciendo clic derecho sobre la etiqueta en la barra de estado y seleccionando la opción deseada.

8. Administrador de sitios. Permite crear y mantener un sitio web.

Páginas web ::: Mi primera página Diseño de materiales multimedia. Web 2.0

23

1.3 Mi primera página


24

1.3 Mi primera página El propósito de este actividad es diseñar tu primera página con Kompozer. El tema elegido es una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán: encabezado, texto, imagen y un enlace a una página externa. 1.3.1 Organización en carpetas

1. Vamos crear una carpeta de nombre miweb.

Si utilizas Windows se propone crear esta carpeta en el raíz de tu disco duro utilizando el explorador de archivos.

Selecciona Inicio > Mi PC y haz doble clic en la unidad Disco local C: para abrirla. Clic derecho sobre un espacio del explorador y elige Nuevo > Carpeta. Introduce el nombre de la nueva carpeta: “miweb”. Doble para situarte dentro de esta carpeta.

Repite el paso anterior para crear una subcarpeta con el nombre images dentro de miweb.

Si utilizas Ubuntu Linux se propone crear esta carpeta dentro de la carpeta personal del usuario.

1.1 Desde el escritorio elige Lugares > Carpeta

personal. Se abre el explorador de archivos mostrando el contenido de la carpeta /home/<usuario>/

1.2 Clic derecho sobre un espacio del explorador y elige Crear una carpeta. Introduce el nombre de la nueva carpeta: “miweb”. Doble para situarte dentro de esta carpeta.

1.3 Repite el paso anterior para crear una subcarpeta con el nombre images dentro de miweb.


25

2 Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta: lorca.zip. Como resultado de la extracción encontrarás dos archivos: una imagen (lorca.gif) y un archivo de texto (lorca.txt).

3 Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta

forma este archivo se mueve para situarse dentro ella. En lo sucesivo la carpeta images contendrá todas las imágenes que se integren en las páginas web creadas.

1.3.2 Iniciar un documento nuevo en Kompozer 4 Inicia el programa Kompozer haciendo doble clic sobre el correspondiente icono situado

en el escritorio.

5 Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo

de texto lorca.txt. Se abrirá el Bloc de Notas mostrando su contenido.

6 Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene

este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de Windows. Cierra la ventana del Bloc de Notas


26

7 En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para

maximizar la ventana de este programa. 8 Clic sobre el nuevo documento HTML que estamos editando y en la barra de menús

selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo.

9 Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado. Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.

10 En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón Aceptar.

11 Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista

Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre del archivo: lorca.


27

12 Clic en el botón Guardar 13 Título. Pulsa y arrastra para seleccionar la primera línea de texto: “Federico García

Lorca”. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1. Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista: Texto del cuerpo.

Nota: Es muy recomendable utilizar las distintas opciones de formato de esta lista para destacar frases y párrafos.

1.3.3 Insertar una imagen 14 Clic debajo del título anterior y pulsa la tecla <enter> para definir el punto donde se

insertará la imagen. En la barra de Redacción pulsa en el botón Imagen.

15 Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo … para localizar el archivo que contiene la imagen.


28

16 Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemos situado anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir.

17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto

alternativo. En este caso teclea “Federico García Lorca”. Se trata de un texto descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando el usuario sitúe el ratón sobre ella.


29

18 Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar

la imagen desde la página actual: “images/lorca.jpg”. Para terminar clic en el botón Aceptar.

1.3.4 Insertar un hipervínculo 19 Pincha y arrastra sobre el enlace que aparece en la última línea del documento. A

continuación elige Editar > Cortar. Esta URL se ha copiado al portapapeles de Windows y se ha eliminado de la ubicación actual. Como habrás podido comprobar es una enlace a Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa: http://www.google.es/search?q=Federico+García+Lorca

20 Pulsa y arrastra para seleccionar el texto “Más información” situado al final del documento. A continuación en la barra de Redacción pulsa en el botón Enlace.

21 En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del enlace y pulsa la combinación de teclas <Ctrl>+<V> para pegar la URL copiada anteriormente. Para terminar pulsa en el botón Aceptar.


30

1.3.5 Guardar un documento web

22 Clic en el botón Guardar 23 Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el

archivo lorca.html creado para ver su aspecto con el navegador web instalado por defecto. Otra opción es pulsar en el botón Navegar que se muestra en la barra de Redacción de Kompozer. No obstante esta opción sólo funciona si tienes configurado en tu equipo Mozilla Firefox como navegador por defecto.

24 No olvides eliminar el archivo lorca.txt una vez que has terminado. 25 Si es necesario abrir el archivo selecciona Archivo > Abrir.

Páginas web ::: Viñetas y marcadores Diseño de materiales multimedia. Web 2.0

31

1.4 Viñetas y marcadores


32

1.4 Viñetas y marcadores 1.4.1 Introducción En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma página. Antes de crear el hipervínculo, es necesario situar esos puntos mediante marcadores de posición. Un marcador es un nombre que representa una posición dentro de la página. Suele estar formado por un fragmento de texto y es utilizado como destino de un hipervínculo. En el ejemplo que nos ocupa se utilizan marcadores e hipervínculos para crear un glosario de términos. Asimismo se utilizan viñetas para crear la lista de hipervínculos. Una lista con viñetas es una lista de elementos donde no importa el orden y todos se muestran precedidos por un mismo símbolo que recibe el nombre de viñeta. 1.4.2 Ejemplo: el glosario Crear el documento web

1. Extrae a la carpeta miweb de tu disco duro el contenido del archivo ZIP que se adjunta a continuación: glosario.zip. Como resultado de esa extracción encontrarás en esta carpeta un archivo de texto: glosario.txt

2. Inicia Kompozer haciendo doble clic en el icono del programa situado en el escritorio.

3. El programa se abrirá sobre un nuevo documento en blanco. 4. Minimiza esta ventana y desde el explorador de archivos de Windows haz doble clic

sobre el fichero de texto glosario.txt . Se abrirá el Bloc de notas mostrando su contenido.

5. Desde el Bloc de Notas selecciona Edición > Seleccionar todo para elegir el texto completo que contiene este archivo. A continuación Edición > Copiar para copiar el texto seleccionado al Portapapeles. Cierra la ventana del Bloc de Notas.

6. En la barra de tareas pulsa en el botón correspondiente de Kompozer para regresar a este programa.

7. Una vez situado en Kompozer selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo.

8. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Glosario educativo …” A continuación despliega el cuadro de formatos y elige Título 1.


33

Viñetas

9. Pulsa y arrastra para seleccionar la lista completa de términos situada debajo del título. A continuación pulsa en el botón viñetas de la barra de Formato

Marcadores

10. La estructura que va a tener nuestro documento se recoge de forma gráfica en la siguiente figura:

11. Ahora vamos a definir los marcadores, es decir, los puntos en la página a dónde se van a dirigir los hipervínculos que se crearán más tarde. En primer lugar vamos a definir un marcador inicial al comienzo de la página. Pulsa y arrastra para seleccionar el texto del título del documento: “Glosario educativo …” y a continuación pulsa en el botón Enlace interno de la barra de herramientas de Redacción.


34

12. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Para simplificarlo escribimos: Glosario y pulsamos en el botón Aceptar. Tras esta operación observarás que el texto seleccionado muestra el icono de un ancla sobre fondo amarillo a su izquierda. Esto indica que es un marcador.

Nota: Si es necesario eliminar un marcador basta con hacer clic sobre este icono de ancla y luego pulsar la tecla <Supr>.

13. Ahora vamos a crear el marcador a la primera entrada del glosario. Selecciona el

texto “Adaptación curricular” que encabeza su definición (no en la lista de viñetas). Clic en el botón Negrita de la barra de Formato.

14. A continuación pulsa en el botón Enlace interno.


35

15. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre

por defecto del marcador creado a partir del texto previamente seleccionado. Es importante que definamos como nombre del marcador un nombre sencillo sin espacios ni caracteres especiales. Clic en el botón Aceptar.

16. Repite los pasos 13, 14 y 15 para crear el resto de marcadores a lo largo del documento: Criterio de evaluación, Criterio de promoción, etc.

Enlaces internos Una vez que hemos terminado la creación de marcadores, vamos a diseñar los hipervínculos a esos marcadores. Recuerda que los hipervínculos se encontrarán en la lista de viñetas inicial y en el texto [Arriba] que aparece al finalizar cada definición.

17. Selecciona el texto "Adaptación curricular" ahora en la lista de viñetas inicial.

18. Clic en el botón Enlace que aparece en la barra de Redacción.

19. En el cuadro de diálogo Propiedades del enlace despliega la lista Ubicación del enlace para seleccionar el enlace interno al marcador creado: #Adaptación_curricular . Clic en el botón Aceptar.


36

20. Repite los pasos 17, 18 y 19 para crear un hipervínculo en cada entrada de la lista de viñetas al marcador correspondiente.

21. Idem en la palabra “[Arriba]” situada al final de cada definición para que apunte al marcador #Glosario. De esta forma el usuario final siempre encontrará un lugar donde pulsar para regresar a la parte superior del documento donde se encuentra el índice de términos. Esto evitará que utilice el scroll (desplazamiento vertical utilizando los botones de la ventana) Ya sabes que los visitantes de una web no son muy amigos de utilizarlo.

22. Sitúa el cursor debajo de cada hipervínculo con el texto “[Arriba]” e inserta una línea horizontal separadora usando Insertar > Línea Horizontal. Al finalizar el documento puedes añadir 2 seguidas para indicar al usuario el fin del mismo.

23. Completada la página vamos a guardarla. Clic en el botón Guardar. Si es la primera vez que se guarda solicitará el título de la página.

24. Introduce como nombre del archivo glosario.html y guárdala en la carpeta miweb. 25. Si deseas cambiar el título de la página debes seleccionar Formato > Título y

propiedades de la página. No olvides guardar los cambios producidos. 26. Para visualizar el aspecto de la página pulsa en el botón Navegar (sólo funciona si

tienes configurado en tu equipo Mozilla Firefox como navegador web por defecto). Otra opción es situarte en la carpeta miweb y hacer doble clic en el archivo glosario.html para visualizarlo a través del navegador web.

Páginas web ::: Listas numeradas Diseño de materiales multimedia. Web 2.0

37

1.5 Listas numeradas


38

1.5 Listas numeradas 1.5.1 Introducción Una lista numerada es una lista de elementos ordenados. Tiene especial aplicación en la descripción de los pasos de un procedimiento. Cada elemento viene precedido por un signo numérico o letra del alfabeto que permite identificar su posición en la lista. 1.5.2 Ejemplo: lista de tareas

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación: escribe.zip. Como resultado de esa extracción encontrarás en esta carpeta un archivo de texto (escribe.txt) y una imagen (magiapalabras.gif). Arrastra la imagen dentro de la carpeta images.

2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado en el escritorio.

3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el archivo escribe.txt. Se abrirá el Bloc de Notas mostrando el contenido de este archivo.

4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar. 5. Cierra la ventana del Bloc de Notas. 6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a

continuación elige Editar > Pegar 7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Escribe tu

cuento”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1.

8. Selecciona el texto “Descripción” y pulsa en el botón Negrita de la barra de Formato.

9. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta página. Para ello clic en el botón Guardar, introduce como título: “Escribe tu cuento” y guárdala como escribe.html dentro de la carpeta miweb.

10. Sitúa el cursor entre la descripción y el enlace. A continuación pulsa en el botón Imagen.

11. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo … y navega para localizar la imagen magiapalabras.gif dentro de la carpeta


39

miweb\images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/magiapalabras.gif . Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.

12. En Texto alternativo introduce “La magia de las palabras”. 13. Clic en la pestaña Enlace e introduce la URL: http://educalia.educared.net

14. Para terminar pulsa en el botón Aceptar. 15. Para conseguir que el enlace situado en la imagen muestre en una nueva ventana

asegúrate de que la imagen está seleccionada y a continuación haz clic derecho en la etiqueta “<a>” que aparece en la esquina inferior izquierda de la barra de estado de Kompozer. La etiqueta HTML “<a>” define el enlace introducido.


40

16. En el menú que se despliega para la etiqueta “<a>” elige Propiedades avanzadas. 17. En el cuadro Editor avanzado de propiedades, en la pestaña Atributos HTML

selecciona en la lista Atributo el elemento target (destino) y en la lista Valor elige _blank (nueva ventana). Pulsa en el botón Aceptar.

18. Selecciona el bloque de texto http://educalia.educared.net que aparece en la página y pulsa en el botón Enlace.

19. En el cuadro de diálogo Propiedades del enlace introduce el enlace anterior en la casilla Ubicación del enlace si no estuviera. En la sección Destino activa la opción El enlace se abrirá y selecciona “en una nueva ventana”. Para terminar pulsa en el botón Aceptar


41

20. Selecciona la línea de texto Actividad: y pulsa en el botón Negrita de la barra de Formato.

21. Pulsa y arrastra para seleccionar todas las instrucciones que aparecen debajo de Actividad.

22. Clic en el botón Lista de viñetas

23. Para terminar pulsa en el botón Guardar. Para visualizar el aspecto final de la página pulsa en el botón Navegar.

Páginas web ::: Tablas Diseño de materiales multimedia. Web 2.0

42

1.6 Tablas


43

1.6 Tablas 1.6.1 Introducción Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas. Aunque es una práctica muy extendida, no se recomendable utilizar tablas para maquetar texto e imagen en una página web. Si se utilizan tablas en lugar de contenedores DIV para situar elementos en una página, su accesibilidad puede verse seriamente afectada. Por ello las tablas deben reservarse para presentar datos de forma tabular. 1.6.2 Ejemplo: tabla de datos Crear el documento

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás en esta carpeta un archivo de texto (poblacion.txt) y una imagen (poblacion.gif). Arrastra la imagen dentro de la carpeta images.

2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado en el escritorio.

3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el archivo poblacion.txt. Se abrirá el Bloc de Notas mostrando el contenido de este archivo.

4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar. 5. Cierra la ventana del Bloc de Notas. 6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a

continuación elige Editar > Pegar 7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Demografía

española”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1. 8. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta

página. Para ello clic en el botón Guardar, introduce como título: “Demografía de España” y guárdala como poblacion.html dentro de la carpeta miweb.

Insertar imagen

9. Sitúa el cursor después del texto y antes de los datos. A continuación pulsa en el botón Imagen.

10. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo … y navega para localizar la imagen poblacion.jpg dentro de la carpeta miweb\images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/poblacion.gif . Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.


44

11. En el cuadro de texto Texto Alternativo escribe: “Demografía española”. 12. Clic en la pestaña Apariencia y en el cuadro Borde sólido introduce el valor 1 como

grosor en píxeles del borde que mostrará la imagen.

13. Pulsa en el botón Aceptar. Crear una tabla de datos Existen dos procedimientos alternativos para crear la tabla:

• Insertar una tabla en blanco. • Convertir el texto existente en una tabla.

Vamos a estudiar primero un método y luego el otro.


45

Método 1. Insertar una tabla en blanco

14. Clic inmediatamente debajo de la imagen para situar el cursor en este espacio. 15. Pulsa en el botón Tabla disponible en la barra de herramientas Redacción.

16. En el cuadro de diálogo Insertar tabla puedes arrastrar el puntero sobre la cuadrícula para definir el número de filas y columnas que tendrá la nueva tabla. Para terminar haz clic en la última celda de la parrilla creada.

17. Esta opción sólo permite crear tablas de 6x6 celdas como máximo. Para un ajuste más fino, como es el caso que nos ocupa, pulsa en la pestaña Preciso. Introduce el número de filas: 20 y el número de columnas: 3. En Anchura indica los píxeles exactos de ancho que tendrá la tabla o bien el % que ocupará del ancho total de la ventana. Conviene utilizar una anchura 100 % de la ventana ya que se esta forma la tabla se ajusta automáticamente al espacio disponible en la ventana del navegador.

18. Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde. 19. Clic el botón Aceptar.


46

20. De esta forma se crea una tabla en blanco. Normalmente se crea la tabla y luego se va rellenando introduciendo los datos por teclado. Sin embargo en este caso se podría completar celda a celda mediante Editar > Cortar (Ctrl+X) y Editar > Pegar (Ctrl+V) utilizando el contenido que ya tenemos en el documento. Teniendo en cuenta que los datos ya tienen un preformato podemos aprovechar para utilizar el procedimiento de convertir el texto en una tabla tal y como se explica en el siguiente apartado.

21. Si deseas modificar algún parámetro de la tabla inicial haz clic derecho sobre ella, elige Seleccionar Tabla > Tabla y luego pulsa en el botón Tabla de la barra de Redacción. Con esta rutina se muestra el cuadro de diálogo Propiedades de la tabla donde es posible editar alguno de sus parámetros.

Método 2. Crear tabla a partir de una selección

22. Pulsa y arrastra sobre el documento para seleccionar todas las líneas que contienen los datos.

23. En la barra de menús de Kompozer debes seleccionar Tabla > Crear tabla a partir de la selección o simplemente pulsa en el botón Tabla de la barra de Redacción.

24. En el cuadro de diálogo Convertir en tabla marca la opción Otro carácter e introduce un asterisco “*”. Si te fijas el asterisco es el carácter que separa un dato de otro dentro de la misma línea. A continuación activa la casilla Borrar carácter separador.


47

25. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la tabla de resultados.

Dar formato a la tabla

26. Pulsa y arrastra para seleccionar las celdas de la primera fila. Una vez seleccionadas haz clic derecho sobre ellas y elige la opción Color de fondo de la tabla o celda …

27. En el cuadro de diálogo Color de la tabla o de la celda selecciona un color predefinido y pulsa en el botón Aceptar. Observa que esto hará que la fila de encabezado de tabla se muestre con este color de fondo.


48

28. Mantén la tecla Ctrl pulsada para ir haciendo clic sobre todas las celdas de las filas

pares. Una vez seleccionadas repite los pasos 27-28 para definir un color gris de fondo. La diferencia de color entre una fila y la siguiente facilitará la lectura de los datos.

29. Para realizar cambios en la tabla completa haz clic derecho sobre cualquier punto de la tabla y elige Seleccionar tabla > Tabla. Con esta acción se selecciona la tabla completa.

30. A continuación pulsa en el botón Tabla de la barra de herramientas. 31. En el cuadro de diálogo Propiedades de la Tabla se pueden configurar sus múltiples

parámetros. En este caso sitúa un 0 en el cuadro Borde para evitar que se visualice el borde la tabla.

32. Para terminar pulsa en el botón Aceptar. 33. No olvides hacer clic en el botón Guardar para conservar el trabajo.

Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0

49

1.7 Hojas de estilo CSS


50

1.7 Hojas de estilo CSS 1.7.1 ¿Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML. Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las páginas vinculadas a la misma. Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente. Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a continuación despliegas la lista de formatos para seleccionar Título 1 (de forma similar a lo propuesto en las actividades anteriores de este curso), realmente el fragmento de texto se ha “etiquetado” como <h1> Texto seleccionado … </h1>. Si hubieramos elegido Título 2 se habría etiquetado con <h2> … </h2>, etc.

Algunas etiquetas HTML son:

• <body> … </body> . Contienen todos los caracteres que forman la página web. • <h1> … </h1>, …, <h6> …</h6>. Permiten definir títulos de distintos tamaños (hasta

6). • <p> … </p>. Contienen el texto de un párrafo. • <a href=”http://...”>Texto del enlace</a>. Se utiliza para crear enlaces.

Existen muchas más etiquetas pero en esta práctica sólo vamos a modificar el formato (color, tipo, tamaño, efecto, etc) de los textos etiquetados con las que se citan. En esta práctica vamos a crear una hoja de estilo y se vinculará a una página.


51

1.7.2 Crear una hoja de estilo

1. Antes de comenzar la práctica en sí, utiliza el explorador de archivos para crear una subcarpeta de nombre css dentro de miweb.

2. A continuación descarga el archivo agala.zip y sitúalo dentro la carpeta miweb . Al extraer su contenido encontrarás el archivo agala.htm y las imágenes agala.jpg y paper.gif guardadas dentro de la carpeta images.

3. Abre Kompozer y a continuación selecciona Archivo > Abrir para localizar la carpeta miweb y elegir el archivo agala.htm. Pulsa el botón Abrir.

4. En la página abierta observarás que al hacer clic sobre los distintos párrafos el

formato de cada uno de ellos se puede ver en la lista de formatos de la barra de herramientas. Se trata de texto etiquetado con: h1, h2, etc. En esta práctica veremos cómo se puede definir el color, tamaño, fuente, etc con que se mostrará el texto correspondiente a cada etiqueta. Para conseguir esto crearemos una hoja de estilo.


52

5. En la barra de menús de Kompozer selecciona Herramientas > Editor CSS o bien pulsa en el botón CSS que aparece en la barra de herramientas

6. En el cuadro de diálogo Hojas de estilo CSS pulsa en el botón que muestra la paleta y en el menú desplegable seleciona la opción Hoja de estilos enlazada (en algunas versiones de Kompozer la traducción al castellano ha sido Elem. Enlace)

7. Los estilos se pueden guardar en el propio código HTML de la página HTML o bien en un archivo *.CSS independiente. En este caso hemos optado por la segunda opción por lo que seleccionamos es una hoja de estilos enlazada.


53

8. En la casilla URL escribe la dirección: css/miestilo.css Esto le indicará a Kompozer que los estilos se guardarán en una hoja de estilos externa cuyo nombre de archivo será miestilo.css dentro de la subcarpeta css que hemos creado en el paso 1. Para terminar pulsa en el botón Crear hoja de estilo.

9. Cuando se crea una hoja de estilo su nombre aparece en el panel izquierdo del editor CSS: Hojas y reglas.

10. Selecciona esta entrada css/miestilo.css , pulsa en el botón de la paleta y elige Regla de estilo o Regla para crear la primera regla de formato.

11. En el panel derecho se muestra Nueva regla de estilo. Selecciona la opción estilo

aplicado a todos los elementos del tipo. De esta forma las características de estilo se aplicarán a una etiqueta html estándar: body, h1, h2, etc.


54

12. Despliega la lista para seleccionar la etiqueta HTML cuyo formato vamos a definir. En este caso la etiqueta será body. Esta etiqueta afecta a toda la página. A continuación pulsa el botón Crear regla de estilo.

13. Asegúrate de que está seleccionado en el panel izquierdo el tipo recién creado y pulsa sobre la pestaña Texto del panel .

14. En Tipo de letra vamos a cambiar el tipo de fuente con que se visualizará la página. Activa la opción predefinido y selecciona en la lista: Arial, Helvetica, sans-serif. Recuerda que el usuario que visualiza la página deberá tener instaladas en su equipo las fuentes indicadas. En caso contrario estos tipos serán sustituidos por las fuentes por defecto que emplee el navegador web utilizado. Por ello conviene utilizar fuentes habituales. En esta pestaña se podrían cambiar más opciones del texto de la página pero lo dejaremos como está.

15. Clic en el pestaña Fondo. En la casilla Imagen pulsa en el botón Elegir archivo y selecciona la imagen images/paper.gif. De esta forma la página toma esta imagen como fondo.


55

16. En el cuadro Hojas y reglas haz clic sobre la entrada css/miestilo.css y pulsa de nuevo en el botón de la paleta para desplegar el menú y elegir la opción Nueva regla de estilo.

17. En el panel derecho activa la opción estilo aplicado a todos los elementos del tipo. A continuación elige la etiqueta h1 en la lista desplegable y pulsa en el botón Crear regla de estilo. Si la etiqueta no está disponible en la lista desplegable se puede teclear directamente sobre este cuadro de texto.


56

18. Asegúrate de que la regla h1 está seleccionada en el panel izquierdo y activa la

pestaña Texto. 19. En el cuadro Color pulsa en el botón para elegir un color predefinido en la paleta de

colores que se muestra. Por ejemplo: Rojo oscuro o marrón. Observa que tras seleccionarlo ya ha cambiado de color el título del documento HTML situado debajo del editor CSS.

20. Repite los pasos 16 a 19 para definir la etiqueta h2 con el color de texto gris oscuro. 21. Idem para la etiqueta a (enlaces) de color de texto rojo. Al crear la regla de estilo

esta etiqueta no se ofrece en la lista desplegable por lo que será necesario escribirla. 22. Idem para la etiqueta td (celda de tabla) de color de texto rosa. Observa que tras

definir el color la página ya adquiere el color definido en el texto asociado a esa etiqueta HTML.

23. Cierra el panel Hoja de estilos CSS pulsando en el botón Aceptar. 24. Clic en el botón Guardar para guardar las modificaciones de la página. 25. Si revisas el Código fuente de la página (haciendo clic en la pestaña inferior Código

fuente) verás que se ha creado una vinculación de esta página al archivo que contiene la información de estilos: <link rel="stylesheet" href="css/miestilo.css" y que además se ha creado este archivo *.CSS en la carpeta css.

1.7.3 Vincular una hoja de estilo a una página web

1. Descarga y descomprime el archivo adjunto estilo.zip dentro de la carpeta miweb\css. Como resultado de la extracción se obtendrá el archivo estilo.css dentro de la carpeta css.

2. Inicia Kompozer y a continuación abre el archivo HTML anterior: agala.htm mediante Archivo > Páginas recientes > …

3. Para abrir el editor CSS selecciona Herramientas > Editor CSS o bien pulsa en el botón CSS.

4. Para asociar otra hoja de estilo a la página actual debe eliminarse la vinculación con la hoja de estilo miestilo.css que hemos creado en el apartado anterior. En el panel


57

Hojas de estilo CSS pulsa sobre la hoja de estilo creada en el apartado anterior que aparece en la lista de Hojas y reglas para pulsar en el botón Quitar.

5. A continuación pulsa en el botón hoja de estilo CSS y en el menú desplegable elige Hoja de estilos enlazada. En algunas traducciones este elemento tiene como nombre Elem. enlace

y en el panel derecho pulsa el botón Elegir archivo para navegar, seleccionar y abrir el archivo miweb\css\estilo.css.

6. Clic en el botón Crear hoja de estilos. Tras realizar esta tarea se muestra la hoja seleccionada en el panel izquierdo Hojas y reglas. Clic sobre ella para seleccionarla. Al abrirla pulsando en el botón “+” se mostrarán las reglas que contiene.


58

7. Observa que la página web ha adquirido el formato de la hoja de estilo elegida. 8. Para modificar alguna propiedad de una etiqueta basta con seleccionarla en el panel

izquierdo Hojas y reglas para luego navegar entre las pestañas del panel derecho ( General, Texto, Fondo, etc) y realizar los cambios oportunos.

9. Clic en el botón Guardar para guardar la vinculación de la página agala.html con la hoja de estilo estilo.css así como las modificaciones introducidas en esta última.

1.7.4 Generadores web de CSS En Internet existen múltiples sitios web donde es posible configurar en línea una página *.CSS utilizando cuadros de texto y listas desplegables de un formulario. El resultado final es un código CSS que se puede copiar y pegar en un archivo *.css local para posteriormente situarlo en nuestro sitio web y vincularlo a las páginas HTML. Ejemplo: http://www.ignside.net/man/misc/testcss/cssgenerador.htm Otros ejemplos se pueden encontrar a través de Google con los términos de búsqueda: “generador CSS”.

Páginas web ::: Uso de plantillas Diseño de materiales multimedia. Web 2.0

59

1.8 Uso de plantillas


60

8. Uso de plantillas 1.8.1 ¿Para qué sirve una plantilla? Una plantilla HTML se utiliza como base para crear varias páginas con un diseño similar pero con distinto contenido. Un administrador de la web puede diseñar las plantillas propias de su sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseño de páginas HTML. De esta forma se asegura cierta uniformidad en las páginas de un sitio web. 1.8.2 Crear una plantilla En este ejemplo vamos a crear una plantilla que nos permita diseñar webquests para nuestros alumnos con sólo rellenar sus áreas editables.

1. Antes de comenzar la práctica en sí, utiliza el explorador de archivos para crear una subcarpeta de nombre plantillas dentro de miweb.

2. Abre Kompozer y selecciona Archivo > Nuevo. 3. En el cuadro de diálogo Crear un nuevo documento o plantilla activa la opción Una

plantilla vacía y pulsa en el botón Crear.

4. Pulsa 3-4 veces la tecla <enter> y luego haz clic para situar el cursor en la primera línea de la página.

5. Selecciona Insertar > Plantillas > Insertar área editable. 6. Se muestra el cuadro Insertar un área editable. En Nombre de área introduce la

palabra Título, en Tipo de área selecciona Bloque (si eliges texto fluido el área tendrá una anchura expandible en función del texto que se va introduciendo). Clic en el botón Aceptar.


61

7. Selecciona el texto que aparece en la caja Titulo y en la lista desplegable de formatos selecciona Título 1 para este párrafo

8. Repite los pasos 5 y 6 para crear las siguientes áreas editables: Subtítulo, Edades, Introducción, Tarea, Proceso, Recursos, Evaluación, Conclusión y Créditos. Puedes introducir en cada caja uno o varios <enter> para definir su altura.

9. Sitúate en la última línea y teclea el año y denominación de tu centro de trabajo. Este texto no será editable.

Nota: Sobre esta página se pueden definir párrafos fijos o áreas editables con distintos formatos. Incluso se pueden insertar imágenes, color de fondo, etc como si se tratase de una página HTML normal.

10. Selecciona Archivo > Guardar. 11. En el cuadro de diálogo Título de la página NO es conveniente introducir título

porque se trata de una plantilla. Pulsa en el botón Aceptar. 12. Se muestra la ventana Guardar página como.


62

13. En la lista desplegable Guardar en selecciona la carpeta plantillas. En Nombre introduce, por ejemplo, miplantilla.mzt . Recuerda que Kompozer utiliza la extensión de archivo *.mzt para guardar plantillas HTML de los documentos.

14. Para cerrar la plantilla elige Archivo > Cerrar o bien pulsa en el icono con forma de X en rojo que aparece en la esquina superior derecha del documento.

1.8.3 Crear una página HTML a partir de una plantilla

1. Elige Archivo > Nuevo 2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción

Un nuevo documento basado en una plantilla 3. Pulsa el botón Elegir archivo … y elige la plantilla anteriormente creada. 4. Clic en el botón Crear.


63

5. En la nueva página sustituye el texto de las áreas editables por el texto definitivo. Observa que cada área es extensible hacia abajo para alojar el texto o imágenes que se deseen insertar. Por otra parte el pie con la identificación del centro no se puede editar al no haberse incluido en un área editable durante el diseño de la plantilla original.

6. Elige Archivo > Guardar como 7. En el cuadro Título de la página introduce el título de la página. Será el texto que

aparecerá en la barra de título del navegador web cuando se navegue por la página. Por ejemplo: “Mi primer webquest”. Clic en el botón Aceptar.

8. En el cuadro Guardar página como selecciona la carpeta miweb e introduce como Nombre: webquest.html. Clic en el botón Guardar.


64

9. Para visualizar el aspecto final de esta página pulsa en el botón Navegar situado en la barra de herramientas de Redacción. (Este botón sólo funciona si tienes instalado Firefox como navegador por defecto. Esta opción se configura abriendo Firefox y seleccionando Herramientas > Opciones > Principal > Valores predeterminados del sistema).

10. Cuando se visualiza una página web basada en una plantilla no se visualizan las etiquetas de las áreas editables.

Notas:

• Si durante la edición de un documento HTML deseas separar un documento de la plantilla a partir de la cual se ha creado selecciona Editar > Separar de la plantilla.

• Cualquier modificación posterior de la plantilla NO afecta a las páginas creadas con anterioridad.

• Es posible transformar una página HTML en una plantilla selecciona Formato > Título y propiedades de la página. En el cuadro de diálogo Propiedades de la página la opción Plantillas > Esta página es una plantilla


65

Páginas web ::: Formularios Diseño de materiales multimedia. Web 2.0

66

1.9 Formularios


67

1.9 Formularios 1.9.1 ¿Qué es un formulario? Un formulario es un conjunto de casillas que se puede añadir a una página y que permite recoger datos que introduce el usuario para luego procesarlos. En un formulario hay 2 partes básicas:

• El interfaz o página con la estructura de campos, etiquetas y botones que puede ver el usuario.

• El programa o script que procesa esa información.

La construcción del formulario es relativamente fácil. Sin embargo crear el programa o script es mucho más complicado y no será tratado porque excede el propósito de este curso. 1.9.2 Formulario de búsqueda de Google En esta actividad vamos a crear un formulario que envíe el texto introducido al script de búsqueda de Google para obtener directamente la página de resultados.

1. Extrae a la carpeta miweb\images el contenido del archivo google.zip que se adjunta. Como resultado de esa extracción encontrarás en esta carpeta el archivo gráfico: logogoogle.gif

2. Abre Kompozer y selecciona Archivo > Nuevo. 3. Escribe: "Buscador Google". Selecciona el texto y elige el estilo de párrafo Título 1.

Pulsa <enter> para saltar a la siguiente línea. 4. Selecciona Insertar > Imagen … 5. En el cuadro de diálogo Propiedades de imagen pulsa en el botón Elegir archivo …

para localizar y abrir el archivo logogoogle.gif en la carpeta miweb\images.

6. En Texto alternativo introduce “Google”.


68

7. Activa la pestaña Enlace e introduce la dirección web: http://www.google.es. De esta forma el usuario podrá situarse en la página de inicio de Google haciendo clic en la imagen.

8. Pulsa en el botón Aceptar.

9. Selecciona Insertar > Formulario … > Definir formulario … 10. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:

• Nombre del formulario: google • URL de la acción: http://www.google.es/search. Es la URL del script o

programa que procesará el texto que el usuario ha tecleado en el formulario diseñado. Como puedes comprobar hay scripts que permiten invocarlos desde otros sitios web.

• Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el formulario para enviar los datos. Se elige uno u otro según lo requiera el programa que va a recibir esta información. En este caso debe ser GET para que funcione.


69

11. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic derecho sobre el formulario y selecciona Propiedades de Formulario …

12. A continuación vamos a situar los elementos del formulario. Clic dentro del formulario para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea "Introduce el texto de búsqueda". Pulsa <enter> para situarte en la siguiente línea.

13. Elige Insertar > Formulario > Campo de formulario. 14. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más

propiedades. Define las siguientes propiedades: • Tipo del campo: Texto • Nombre del campo: q • Tamaño del campo: 50

15. Clic en el botón Aceptar.

16. Pulsa la tecla <enter> para situarse en una nueva línea para insertar los botones del formulario. A continuación selecciona Insertar > Formulario > Campo de formulario.

17. En el cuadro de diálogo Propiedades del campo del formulario configura los parámetros:

• Tipo del campo: Botón de envío. • Nombre del campo: Enviar. • Valor del campo: Enviar.


70

18. Clic en el botón Aceptar. 19. Selecciona de nuevo Insertar > Formulario > Campo de formulario. 20. En el cuadro de Propiedades del campo del formulario define los siguientes valores:

• Tipo del campo: Botón de reestablecimiento. • Nombre del campo: Borrar. • Valor del campo: Borrar.



71

22. Para guardar esta página, elige Archivo > Guardar como. 23. Introduce “Buscador Google” como título y pulsa en el botón Aceptar.

24. Guarda la página en la carpeta miweb y define como nombre de archivo: google.html

. Pulsa en el botón Guardar.


72

25. Clic en el botón Navegar de Komposer para comprobar el funcionamiento del formulario creado.

1.9.3 Formulario de traducción de Babylon El propósito de esta actividad es crear un formulario donde el usuario introduzca un término en inglés y se muestre su traducción al español utilizando el script de traducción de Babylon Translator (http://www.babylon.com)

1. Extrae a la carpeta miweb\images el contenido del archivo babylon.zip que se adjunta. Como resultado de esa extracción encontrarás en esta carpeta el archivo gráfico: babylon.gif

2. Abre Kompozer y selecciona Archivo > Nuevo. 3. Escribe: "Traductor Babylon". Selecciona el texto y elige el estilo de párrafo Título 1.

Pulsa <enter> para saltar a la siguiente línea. 4. Selecciona Insertar > Imagen … 5. En el cuadro de diálogo Propiedades de imagen, pulsa en el botón Elegir archivo …

para localizar y abrir el archivo babylon.gif en la carpeta miweb\images.

6. En Texto alternativo introduce “Traductor Babylon”. 7. Activa la pestaña Enlace e introduce la dirección web: http://www.babylon.com . De

esta forma el usuario podrá situarse en la página de inicio de Babylon haciendo clic en la imagen.



73

9. Selecciona Insertar > Formulario … > Definir formulario … 10. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:

• Nombre del formulario: babylon • URL de la acción: http://info.babylon.com/cgi-bin/info.cgi . Es la URL del

script o programa que procesará el texto que el usuario ha tecleado en el formulario diseñado. Como puedes comprobar hay scripts que permiten invocarlos desde otros sitios web.

• Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el formulario para enviar los datos. Se elige uno u otro según lo requiera el programa que va a recibir esta información. En este caso debe ser GET para que funcione.

11. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic derecho sobre el formulario y selecciona Propiedades de Formulario …

12. A continuación vamos a situar los elementos del formulario. Clic dentro del formulario para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea "Introduce la palabra que deseas traducir". Pulsa <enter> para situarte en la siguiente línea.


74

13. Elige Insertar > Formulario > Campo de formulario. 14. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más

propiedades. Define las siguientes propiedades: • Tipo del campo: Texto • Nombre del campo: word • Tamaño del campo: 30


16. Pulsa la tecla <enter> para situarse en una nueva línea para insertar los botones del formulario. A continuación selecciona Insertar > Formulario > Campo de formulario.

17. En el cuadro de diálogo Propiedades del campo del formulario configura los parámetros:

• Tipo del campo: Botón de envío. • Nombre del campo: Traducir. • Valor del campo: Traducir.


75

18. Clic en el botón Aceptar. 19. Algunos scripts, como ocurre con Babylon Translator, necesitan recibir algunos valores

adicionales para que funcionen correctamente. Se trata de campos con valores definidos que se ocultan al usuario pero que son enviados junto con el resto de información del formulario. Se denominan campos ocultos. Para definir campos ocultos en un formulario asegúrate de que el cursor está situado dentro del formulario y a continuación selecciona Insertar > Formulario > Campo de formulario.

20. En el cuadro de diálogo Propiedades del campo del formulario configura los parámetros y pulsa en el botón Aceptar:

• Tipo del campo: Oculto • Nombre del campo: lang • Valor del campo: 3

Este valor indica al script que debe traducir el término introducido del inglés al castellano. Si introduces otro valor lo traducirá del inglés a otro idioma: francés (1), italiano (2), alemán (4), portugués (5), etc.

21. Selecciona Insertar > Formulario > Campo de formulario y en el cuadro de diálogo Propiedades del campo del formulario configura los parámetros:


76

• Tipo del campo: Oculto • Nombre del campo: layout • Valor del campo: combo.html

Este valor le indica al script el modelo de página HTML que debe utilizar para mostrar el resultado de la traducción.


23. Para guardar esta página, elige Archivo > Guardar como. 24. Introduce “Traductor Babylon” como título y pulsa en el botón Aceptar.


77

25. Guarda la página en la carpeta miweb y define como nombre de archivo

babylon.html . Pulsa en el botón Guardar.

26. Clic en el botón Navegar de Kompozer para comprobar el funcionamiento del formulario creado. Tras introducir el término en inglés (cat, dog, etc.) y pulsar en el botón Traducir se mostrará su traducción al castellano.

Páginas web ::: Archivos ZIP Diseño de materiales multimedia. Web 2.0

78

1.10 Archivos ZIP


79

1.10 Archivos ZIP 1.10.1 Introducción En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de una página web. Puede ser el caso de una colección de ficheros organizados en carpeta y subcarpetas, el instalador de un programa, un archivo ejecutable en local, etc. Para reducir el peso de la descarga conviene ofrecerlo empaquetado en un archivo ZIP. Para crear o descomprimir archivos ZIP, tanto en Windows como en Ubuntu, no es necesario instalar ningún programa adicional. Se pueden afrontar estas tareas desde el mismo sistema operativo. 1.10.2 ¿Cómo comprimir un archivo o carpeta? Windows

1. Desde el explorador de archivos haz clic derecho sobre el icono del fichero o carpeta que deseas comprimir. Por ejemplo sobre la carpeta: miweb

2. Selecciona Enviar a > Carpeta comprimida (en zip) 3. Esta acción crea un archivo ZIP con el mismo nombre que la carpeta o archivo

original. Ubuntu

1. Desde el explorador de archivos haz clic derecho sobre el icono del fichero o carpeta que deseas comprimir.

2. Selecciona Crear archivador. 3. En el cuadro de diálogo Crear archivador introduce:

• Archivador: nombre del archivo ZIP resultante. • ZIP: despliega la lista de formatos de archivo y selecciona la entrada ZIP. • Lugar: indica la carpeta destino donde se guardará el zip.

4. Esta acción crea un archivo ZIP con el mismo nombre que la carpeta o archivo original.

Ambos

1. Se puede utilizar el explorador de archivos para copiar el archivo resultante miweb.zip al interior de la carpeta miweb\descargas

1.10.3 ¿Cómo descomprimir un archivo ZIP?

1. Descarga el archivo mrveghead.zip y utiliza el explorador de archivos para localizarlo.

Windows

2. Clic derecho sobre el archivo ZIP y selecciona la opción Extraer todo. 3. En el cuadro de diálogo Asistente para extracción haz clic en el botón Siguiente. 4. En el cuadro Seleccione un destino pulsa en el botón Examinar para definir la

carpeta destino donde se copiará el resultado de la extracción. 5. Clic en Siguiente. 6. Una vez concluído el proceso pulsa en el botón Finalizar.


80

7. Esta acción extraerá el contenido de este ZIP guardando el archivo ejecutable

mrveghead.exe en la misma carpeta donde tienes mrveghead.zip. En este caso se trata de un archivo para ejecutar en local con una animación en Flash.

Ubuntu

2. Desde el explorador de archivos haz clic derecho sobre el icono del ZIP que deseas descomprimir.

3. Selecciona la opción Extraer aquí. 4. Esta acción extraerá el contenido de este ZIP en la misma carpeta donde se sitúa el

ZIP original. 1.10.4 Enlace a un ZIP desde una página HTML

1. Descarga el archivo mrveghead.zip y utiliza el explorador de archivos para copiarlo a la carpeta miweb\descargas. Si no dispones de la carpeta descargas debes crearla dentro de miweb.

2. Descarga y extrae el contenido del archivo mvh_instrucciones.zip en la carpeta miweb. De esta forma obtendrás un archivo de texto: mvh_instrucciones.txt.

3. Desde el explorador de archivos sitúate dentro en la carpeta miweb y haz doble clic sobre el archivo de texto anterior para abrirlo.

4. Desde el Bloc de notas elige Edición > Seleccionar todo y luego Edición > Copiar. Cierra el Bloc de Notas y borra este archivo de texto.

5. Abre Kompozer y elige Archivo > Nuevo. 6. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción

Un documento vacío y presiona en el botón Crear.

7. Sobre el nuevo documento selecciona Editar > Pegar. 8. Selecciona el título inicial : “ MR. VEGHEAD” y en la lista de Formatos selecciona

Título 1.

Nota importante: Antes de comenzar a insertar imágenes o hipervínculos en una página nueva es muy conveniente guardarla para indicarle a Kompozer dónde se ubicará. De esta forma los enlaces a los recursos serán relativos y no absolutos evitándose con ello muchos problemas durante la publicación de recursos en el servidor web.


81

9. Para guardar una página haz clic en el botón Guardar situado en la barra de herramientas de Redacción de Kompozer.

10. En el cuadro Título de la página introduce como título: “Mr.Veghead” y pulsa en el botón Aceptar.

11. En el cuadro Guardar página como selecciona la carpeta miweb en la lista

desplegable Guardar en: y define como Nombre del archivo: mrveghead.html. Para terminar pulsa en el botón Guardar.

12. Ahora vamos a situar el enlace al ZIP. Para ello haz clic al final del documento para

escribir: “Descarga este juego en tu equipo (620 Kb)” 13. Pincha y arrastra para seleccionar este texto. Pulsa en el botón Enlace.

14. En el cuadro de diálogo Propiedades del enlace pulsa en el botón Elegir archivo …


82

15. En el cuadro Abrir archivo HTML despliega la lista Tipo: y selecciona la opción Todos los archivos para que se muestren todos los tipos de archivos en lugar de sólo los *.HTML. En la lista Buscar en: debes desplegar esta lista para situarte en la carpeta miweb\descargas.

16. Selecciona el archivo mrveghead.zip y pulsa en el botón Abrir. 17. Observa que tras esta operación en el cuadro Propiedades del enlace se muestra

como ubicación del enlace: “descargas/mrveghead.zip”.


83

18. Clic en el botón Aceptar para terminar el enlace. 19. Para guardar los cambios pulsa en el botón Guardar. 20. Si deseas visualizar el aspecto final de la página haz clic en el botón Navegar.

Páginas web ::: Documentos PDF en la web Diseño de materiales multimedia. Web 2.0

84

1.11 Documentos PDF en la web


85

1.11 Documentos PDF en la web 1.11.1 Introducción En un sitio web es frecuente poner a disposición de los usuarios documentos en formato PDF para la consulta de información. Ejemplo: los boletines oficiales. Las ventajas que ofrece este tipo de archivo son:

• Se puede abrir con distintas aplicaciones de software gratuito. • Es accesible desde cualquier plataforma: Windows, Linux, Mac, etc. • El documento PDF tiene un tamaño más reducido que el original. • Admite la búsqueda fácil de información entre sus páginas. • Tiene una presentación idéntica e independiente del dispositivo de visualización

(pantalla) y de impresión (impresora). • Permite proteger el contenido del documento frente a terceros.

En este capítulo se explican los siguientes procedimientos:

1. Lectura y creación de archivos PDF desde Windows: Adobe Reader y PDF Creator. 2. Lectura y creación de archivos PDF desde Ubuntu: Evince Visor de documentos. 3. Exportar a PDF desde OpenOffice. 4. Vinculación de un archivo PDF en una página HTML.

1.11.2 Lectura de archivos PDF en Windows En Windows necesitamos un programa que nos permita abrir y leer los archivos PDF. La opción más habitual es Adobe Reader. Puedes descargar e instalar el archivo AdbeRdr812_es_ES.exe. La instalación se realiza siguiendo las opciones por defecto del asistente. Tras la instalación se creará un acceso directo en el escritorio. Haciendo clic en este icono se iniciará el programa. Desde el navegador web, cuando hagas clic en un enlace a un documento PDF se iniciará automáticamente Adobe Reader mostrando el contenido del archivo referenciado en el interior de una ventana del navegador.

Si deseas consultar la web de Adobe para comprobar si existe una nueva versión del programa: http://www.adobe.es Otra alternativa al uso de Adobe Reader es disponer de un programa portable para leer documentos PDF. Es el caso del programa Sumatra PDF. Descarga y descomprime el archivo SumatraPDF.exe en una carpeta de tu disco duro o bien en tu pendrive. 1.11.3 Instalación de PDF Creator en Windows El programa Adobe Reader permite la lectura de documentos PDF pero no su creación. En su defecto se propone utilizar PDFCreator como aplicación de libre distribución para crear un documento PDF a partir de un archivo Word, Excel, etc: http://sourceforge.net/projects/pdfcreator/


86

1. Descarga el archivo PDFCreator-0_9_5_setup.exe y ejecuta el asistente de instalación.

2. Selecciona el idioma de instalación. Elige Español y pulsa en el botón Aceptar. 3. Bienvenido al asistente de instalación de PDFCreator. Clic en Siguiente> para

continuar. 4. Acuerdo de Licencia. Marca la opción Acepto el acuerdo y pulsa en el botón

Siguiente > 5. Tipo de instalación. Activa la opción Instalación estándar y pulsa en el botón

Siguiente > 6. Nombre de la impresora. PDF Creator instala una impresora virtual en tu sistema.

Desde cualquier aplicación que pueda imprimir se podrán generar archivos PDF si imprimes en esta impresora virtual. En este cuadro se puede definir el nombre con que el sistema identificará a este dispositivo virtual. Conviene dejar la opción por defecto: PDFCreator y pulsar en Siguiente >.

7. Selecciona la Carpeta Destino. Esta aplicación se instala por defecto en la carpeta Archivos de programa. Si deseas instalarlo en otra carpeta pulsa en el botón Examinar aunque se recomienda aceptar la opción por defecto. Clic en el botón Siguiente >

8. Barra de herramienta PDFCreator. Este cuadro de información muestra que tras instalar PDFCreator se puede disponer de una barra de herramientas adicional en Internet Explorer que te permitirá guardar documentos HTML en formato PDF.

9. Selección de componentes. Acepta las opciones por defecto haciendo clic en el botón Siguiente>

10. Selecciona la carpeta del Menú de Inicio. Clic en el botón Siguiente > 11. Selecciona las Tareas Adicionales. Clic en el botón Siguiente> 12. Listo para instalar. Clic en el botón Instalar. 13. Finalizando el asistente de instalación de PDFCreator. Clic en el botón Terminar.

1.11.4 Crear un archivo PDF con PDFCreator en Windows

1. Descarga y descomprime el archivo alimentacion.zip en la carpeta miweb. Como resultado dispondrás en esta carpeta de dos documento: alimentación.txt, alimentación.odt (para OpenOffice) y una página HTML: plantas.html.

2. Sitúate en esta carpeta y haz doble clic en el archivo alimentación.txt para abrirlo con el Bloc de Notas.

3. Antes de imprimir vamos a configurar la página para eliminar los encabezados y pie de página. Para ello selecciona Archivo > Configurar página …


87

4. En el cuadro de diálogo Configurar página borra el texto de Encabezado y Pie de página y pulsa en el botón Aceptar.

5. Ahora vamos a imprimir el documento. Elige Archivo > Imprimir. 6. En el cuadro Imprimir selecciona en la lista Nombre la impresora virtual de

PDFCreator. Clic en el botón Imprimir.

7. Antes de iniciar la impresión con PDFCreator se solicitan los metadatos del nuevo

archivo: título, fecha de creación, fecha de modificación, autor, asunto, palabras clave, etc. Es importante completar adecuadamente estos datos. Asegúrate de que la casilla Al terminar, abrir el documento con el programa predeterminado esta activada para ver el aspecto final del documento.

8. Pulsa en el botón Guardar.


88

9. Se muestra el cuadro Guardar como … En la lista desplegable Guardar en: selecciona la carpeta destino donde se guardará el archivo PDF final. Por ejemplo: miweb\pdf. En la casilla Nombre teclea, por ejemplo, como nombre de archivo alimentación. PDFCreator añade automáticamente la extensión *.PDF. Clic en el botón Guardar.

10. Para terminar se abrirá el Adobe Reader mostrando el nuevo archivo PDF.

Nota:


89

Una vez que has instalado Adobe Reader y PDF Creator se puede crear un PDF desde cualquier programa que permita la impresión: Microsoft Office, Internet Explorer, Mozilla Firefox, etc. Si se utiliza con un navegador web permite realizar copias de seguridad en formato PDF de las páginas web que se visitan. El proceso se iniciará de forma similar a como se describe en este apartado a partir del comando Archivo > Imprimir. 1.11.5 Lectura de archivos PDF en Ubuntu Ubuntu dispone por defecto de un programa instalado para leer y crear documentos PDF. Se trata de Evince Visor de documentos PDF. Para comprobar que está instalado:

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir y quitar … 2. En la casilla Buscar introduce el término pdf. Observa que al cabo de unos instantes

se mostrará en el listado derecho de aplicaciones la entrada Visor de documentos (Ver documentos multipágina).

3. Éste es el programa que nos permitirá leer e imprimir a PDF desde Ubuntu.

Si tratamos de abrir un archivo PDF descargado de Internet a través del navegador o bien un fichero PDF del equipo se abrirá esta aplicación mostrando su contenido. De esta forma podremos leerlos. 1.11.6 Crear una impresora virtual PDF en Ubuntu Al crear una impresora virtual PDF en Ubuntu podrás crear un documento PDF a partir de cualquier aplicación mediante Archivo > Imprimir y seleccionando este dispositivo virtual. Los pasos para instalar esta impresora virtual son:

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Accesorios > Terminal.


90

2. En la ventana de consola escribe: sudo apt-get install cups-pdf 3. Cierra esta ventana. 4. Desde el escritorio elige Sistema > Administración > Impresoras 5. Clic en el botón Impresora Nueva 6. Seleccione la conexión. Elige como dispositivo Print into PDF file y pulsa en el botón

Adelante. 7. Seleccionar impresora desde la base de datos. Selecciona la marca Generis y pulsa en

el botón Adelante. 8. Modelos y Controladores. Elige como modelo PostScript Printer y como controlador

Generis PostScript Printer (recomendado). Clic en el botón Adelante. 9. Nombre de la impresora. Introduce por teclado su identificativo, por ejemplo:

PDFPrinter. 10. Clic en el botón Aplicar y cierra el panel de administración de impresoras.

1.11.7 Utilizar una impresora virtual PDF en Ubuntu

1. Arranca el navegador web Mozilla Firefox y sitúate en una página web. 2. A continuación selecciona Archivo > Imprimir. 3. En el panel Imprimir selecciona la impresora CUPS/PDFPrinter y a continuación pulsa

en el botón Imprimir. Recuerda que el nombre que le asignamos a la impresora virtual PDF en el apartado anterior fue PDFPrinter.

4. Desde el escritorio selecciona Lugares > Carpeta Personal. Observa que dentro de esta carpeta personal se ha creado una subcarpeta PDF. En su interior se encuentra el PDF generado.

1.11.8 Crear documentos PDF desde OpenOffice Hay aplicaciones como Writer o Impress de OpenOffice que permiten exportar a un documento en formato PDF sin necesidad de disponer de PDFCreator instalado en el equipo. Windows Si no dispones de OpenOffice puedes descargar e instalar la versión portable de OpenOffice: OpenOffice2.exe. Descomprime el contenido en una carpeta de tu disco duro o pendrive para disponer de este completo paquete ofimático. Ubuntu En las mayoría de distribuciones de Ubuntu viene instalado OpenOffice por defecto. Se accede a una de sus aplicaciones desde el escritorio mediante: Aplicaciones > Oficina > OpenOffice.org … Ambos Una vez que ya disponemos de OpenOffice seguimos los siguientes pasos:

1. Abre OpenOffice Writer 2. Selecciona Archivo > Abrir …


91

3. En el cuadro de diálogo Abrir localiza el archivo alimentación.odt situado en la carpeta miweb. Ha resultado de descomprimir alimentación.zip en un apartado anterior.

4. Una vez abierto este documento selecciona la opción Archivo > Exportar en formato PDF …

5. Se muestra el cuadro Opciones de PDF donde es posible configurar ciertos parámetros del PDF resultante. En este caso aceptamos las opciones por defecto y pulsamos en el botón Exportar.

6. En el cuadro Exportar selecciona la carpeta miweb\pdf en la lista Guardar en. Si no

has creado la carpeta pdf puedes hacerlo desde aquí. Teclea alimentación en el Nombre del PDF y haz clic en el botón Guardar.


92

7. Si utilizas el explorador de archivos podrás encontrar el archivo alimentacion.pdf dentro de la carpeta miweb\pdf. Si haces doble clic sobre él se abrirá el lector PDF por defecto mostrando su contenido.

1.11.9 Enlace de un documento PDF

1. Abre Kompozer 2. Selecciona Archivo > Abrir 3. Localiza el archivo plantas.htm que has situado en miweb en apartados anteriores.

Clic en el botón Abrir. 4. Navega hasta el final del documento. Pulsa y arrastra para seleccionar la penúltima

línea: Más información sobre la alimentación de las plantas 5. Clic en el botón Enlace de la barra de herramientas

6. En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo …


93

7. En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en para mostrar el contenido de la carpeta miweb\pdf. Despliega la lista Tipo y selecciona Todos los archivos. De esta forma se mostrará el archivo alimentacion.pdf que has creado en apartados anteriores. Clic sobre este archivo y pulsa en Abrir.

8. En el cuadro Propiedades del enlace observa que en Ubicación del enlace aparece la ruta al PDF: pdf/alimentacion.pdf.


94

9. En el área Destino marca la opción El enlace se abrirá y en la lista elige la opción en una nueva ventana.

10. Clic en el botón Aceptar. 11. Resulta conveniente añadir información a continuación del enlace sobre el tamaño

del archivo PDF. Teclea: (PDF – XX,X Kb). El peso del archivo PDF resultante se averigua utilizando el explorador de archivos: clic derecho y elige Propiedades.

12. Desde Kompozer guarda los cambios de la página plantas.html mediante Archivo > Guardar.

13. Para comprobar el correcto funcionamiento de este enlace, pulsa en el botón Navegar. Si dispones de Firefox como navegador por defecto de tu equipo se mostrará con el contenido de esta página. Al pulsar sobre el enlace creado se mostrará el documento PDF vinculado.

1.11.10 Enlace a una página de un PDF Tal y como hemos visto con anterioridad la tarea de enlazar a un PDF desde una página web es relativamente fácil. En este apartado se describen los detalles de cómo enlazar a un marcador o página concreta de un PDF. Esto es especialmente interesante cuando el PDF es muy grande.

1. Descarga y descomprime el archivo TIC_project.zip a la carpeta miweb\pdf. Se trata de un archivo PDF. Si tienes instalado Adobe Reader puedes utilizar el explorador de archivos para navegar hasta la carpeta indicada y abrirlo haciendo doble clic sobre él.

2. Abre Kompozer y selecciona Archivo > Nuevo. En el cuadro de diálogo Crear un nuevo documento o plantilla marca la opción Un documento vacío y pulsa en el botón Crear.

3. Pulsa en el botón Guardar. Introduce como título: “El proyecto TIC del centro”. En la lista desplegable Guardar en selecciona la carpeta miweb e introduce como nombre: proyecto.html


95

4. Escribe como primera línea “El proyecto TIC del centro”. Selecciona el texto y asígnale el formato Título 1

5. En línea aparte escribe el texto: “Documento PDF completo”, selecciónalo y pulsa en el botón Enlace de la barra de herramientas.

6. En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo …

7. En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en: para situarte en la carpeta miweb\pdf. Despliega la lista inferior Tipo y selecciona la opción Todos los archivos para ver todos los archivos contenidos en la carpeta elegida. Haz clic sobre el documento TIC_project.pdf y pulsa en el botón Abrir.


96

8. Regresas al cuadro Propiedades del enlace. Observa que el cuadro de texto Ubicación del enlace se muestra la ruta relativa a la página donde se ubica el PDF referenciado.


10. Para guardar la página HTML pulsa sobre el botón Guardar. 11. Si tienes configurado Firefox como navegador web por defecto del equipo, entonces

al pulsar en el botón Navegar se abrirá una ventana de este navegador mostrando el contenido de la página. Otra posibilidad es utilizar el explorador de archivos y navegar hasta la carpeta miweb para hacer doble clic sobre el archivo proyecto.html.

12. Regresa a Kompozer y repite los pasos explicados del 5 al 10 para crear los siguientes textos y enlaces (cada uno en una línea aparte). En el cuadro de diálogo Propiedades del enlace, una vez que estas apuntando al documento PDF (paso 8) y antes de hacer clic en Aceptar, puedes añadir los parámetros adicionales para situarse en una zona específica del mismo.

Texto Enlace Índice (página 2) pdf/TIC_project.pdf#page=2 El coordinador TIC (página 25) pdf/TIC_project.pdf#page=25 Lineas de Actuación (destino) pdf/TIC_project.pdf#Lineas_Actuacion Organigrama (destino) pdf/TIC_project.pdf#Organigrama Documento (zoom 200) pdf/TIC_project.pdf#zoom=200,10,10 Documento con marcadores visibles pdf/TIC_project.pdf#pagemode=bookmarks Documento con miniaturas visibles pdf/TIC_project.pdf#pagemode=thumbs Documento sin barras de scroll pdf/TIC_project.pdf#scrollbar=0 Documento sin barra de herramientas

pdf/TIC_project.pdf#toolbar=0

Organización (página 23 ajustada) pdf/TIC_project.pdf#page=23&view=Fit Organización (página 23 tamaño ventana)

pdf/TIC_project.pdf#page=23&viewrect=10,10,300,200


97

13. Clic en el botón Guardar para guardar los cambios de la página. 14. Pulsa en el botón Navegar para visualizar esta página y comprobar el funcionamiento

de los enlaces definidos. A continuación se indica la sintaxis que se puede utilizar en el enlace a un PDF. Los parámetros entre corchetes son opcionales. documento.pdf#page=numero Ir a la página cuyo número se indica. Debe ser un número entero. La primera página del documento es la 1. documento.pdf#cadena_destino Ir al destino cuya etiqueta se indica: cadena_destino. Los documentos PDFs pueden tener etiquetas destino. Cada destino es una etiqueta de texto asociada a un número de página del documento. Es importante no confundir los destinos con los marcadores de página. documento.pdf#zoom=escala[,izquierda,arriba] Muestra el documento con el zoom indicado en el valor escala. Una escala de 100 proporciona un zoom del 100%. Los valores opcionales izquierda y arriba son números enteros que indican las coordenadas en píxeles del documento donde se situará la esquina superior izquierda de la ventana de visualización. documento.pdf#view=modo Define el modo en que se visualizará la página. El modo puede ser:

• Fit (Ajuste). Ejemplo: documento.pdf#view=Fit • FitH[,top] (Ajuste horizontal). • FitV[,left] (Ajuste vertical). • FitB (Ajuste bajo) • FitBH[,top] (Ajuste horizontal bajo). • FitBV[,left] (Ajuste vertical bajo).

documento.pdf#viewrect=izquierda,arriba,anchura,altura Indica la posición y tamaño del rectángulo de visualización de la ventana de visualización del documento. Todos los valores son enteros y expresan unidades en píxeles. documento.pdf#pagemode=modo Permite mostrar los marcadores o miniaturas de página del documento pdf. Los posibles valores de modo son: bookmarks (marcadores), thumbs (miniaturas) o none (no se muestra ninguno). documento.pdf#scrollbar=0 Activa o desactiva las barras de desplazamiento con que se muestra el documento. Si se define como 0 se ocultarán estas barras. documento.pdf#toolbar=0 Muestra u oculta la barra de herramientas del visor de Adobe Reader. Si se define como 0 no se visualizará esta barra. Notas:

• En la URL no se deben dejar espacios en blanco. • No utilizar en cada comando más de 32 caracteres de longitud. • Se pueden utilizar múltiples comandos separados por el signo “&”.

Ejemplo: documento.pdf#page=21&pagemode=bookmarks&zoom=150

Páginas web ::: Noticias RSS de un sitio web Diseño de materiales multimedia. Web 2.0

98

1.12 Noticias RSS de un sitio web


99

1.12 Noticias RSS de un sitio web 1.12.1 ¿Qué es un canal RSS? RSS es un término que se refiere a la posibilidad de crear un canal de noticias en un sitio web para que los usuarios se puedan suscribir a él y recibir las novedades informativas que se van publicando en este espacio. Realmente se trata de un archivo de extensión .XML, .RDF, .RSS, etc, con una sintaxis especial, almacenado en nuestro sitio web, con una URL de acceso concreta, que se actualiza de forma regular y que contiene los titulares de las noticias publicadas. Cada archivo RSS se utiliza para crear un canal de publicación simple de carácter temático que puede ser leido por los usuarios utilizando el propio navegador web o bien un programa específico. El archivo *.RSS ó *.XML contiene la siguiente información:

1. Titulo del Canal: Canal Naturaleza 2. Link: Enlace a la website. 3. Imagen corporativa. 4. Descripción. Texto explicativo del propósito del canal. 5. TTL (tiempo de vida del canal hasta el siguiente refresco. Se expresa en min.).etc.

Contiene además uno o varios items de noticias individuales, cada uno de los cuales debe disponer de una fecha, un titulo, una descripción y un enlace. 1.12.2 ¿Cómo leer un canal de noticias RSS?

1. Abre Mozilla Firefox 2. Visita la dirección de los titulares RSS del periódico El Mundo:

http://rss.elmundo.es/rss/ 3. Haz clic en uno de los iconos RSS correspondiente a un canal temático

4. Se muestra la página de titulares donde el título de cada noticia es un enlace a la

página del periódico donde se amplia su información.


100

1.12.3 RSS y marcadores dinámicos en Firefox Un marcador dinámico de Firefox permite suscribirse a un canal de noticias RSS de un sitio web y recibir las nuevas noticias sin necesidad de visitarlo. Gracias a los marcadores dinámicos el contenido viene al usuario. En lugar de tener que revisar los cambios y modificaciones de la página web, el marcador dinámico ofrece las actualizaciones tan rápido como están disponibles.

1. Cuando se accede desde Firefox a la página de titulares de un canal RSS, en la parte superior de la misma página se ofrece la oportunidad de crear un marcador dinámico a ese canal.

2. Asegúrate de que la opción Marcadores dinámicos está seleccionada en la lista Suscribirse a este canal usando.

3. Clic en el botón Suscribirse ahora. 4. En el cuadro de diálogo Añadir marcador dinámico puedes modificar el Nombre del

canal aunque conviene dejar el que viene por defecto. En la lista desplegable Crear en conviene que selecciones Carpeta de la barra de marcadores para que de esta forma el marcador dinámico aparezca en la barra de marcadores de Firefox y sea visible y accesible directamente.

5. Pulsa en el botón Aceptar. 6. Observa que esta acción ha creado en la barra de marcadores de Firefox un marcador

con el nombre del canal. Si pulsas sobre él se mostrarán las noticias de este canal. Pulsa sobre la noticia deseada para acceder a su página. Si eliges la opción Abrir todo en pestañas se mostrará cada noticia en una pestaña independiente.


101

Notas: • Si la barra de marcadores no está visible entonces activa su visualización mediante Ver >

Barra de herramientas > Barra de herramientas de marcadores

• Otros sitios web con canal RSS: http://www.elpais.com/rss.html (El País) o bien http://barrapunto.com/barrapunto.rss (Barrapunto.com).

1.12.4 Crear un servicio RSS en un sitio web En esta apartado se plantea la actividad de utilizar un editor de noticias RSS para generar el archivo *.RSS correspondiente, subirlo al servidor remoto y luego situar en la página web de portada un icono con un enlace a este archivo. Paso 1: Crear el archivo *.RSS

1. Descarga y descomprime el archivo feedcentro.zip a una carpeta de tu disco duro. Como resultado obtendrás el archivo feedcentro.xml

2. Utiliza el explorador de archivos para localizar este archivo XML. Clic derecho sobre

él y selecciona Abrir con … > Bloc de notas (Windows) o bien Abrir con > Abrir con editor de textos (Ubuntu)

3. El archivo feedcentro.xml es un documento de etiquetas que se puede utilizar como

base para personalizar el canal de noticias de nuestro sitio web. Para ello basta con


102

modificar o añadir contenidos respetando escrupulosamente la estructura de las etiquetas.

4. A continuación se explican las distintas etiquetas o tags:

• <?xml . Este tag indica el comienzo del documento XML. Su atributo encoding=”iso-8859-1” define el código de caracteres con se mostrará en el navegador.

• <rss version=”2.0”> … </rss>. Entre estas etiquetas se incluye toda la información del archivo XML. Su atributo version indica la versión del lenguaje RSS que se utiliza.

• <channel> … </channel>. Indica el canal de noticias que abrimos. Todas la información del canal está incluída entre estas etiquetas. Las propiedades del canal se sitúan en las siguientes subetiquetas: • <title>…</title>. Título del canal. • <description>…</description>. Descripción del canal. • <link>…</link>. Enlace al sitio web principal del espacio. • <lastBuildDate>Sun, 27 Apr 2008 21:08:34 +0100</lastBuildDate>. Es la

fecha de la última modificación del archivo. Como puedes ver su formato es inglés.

• <image>…</image>. Contiene la imagen del canal: url, título, enlace, descripción, etc. Es una parámetro opcional.

• <item>…</item>. Cada noticia será un bloque que comienza y termina por estas etiquetas. Dentro de ellas se especifican los distintos parámetros de cada noticia: • <title>…</title> Títular de la noticia. • <link>…</link> Enlace donde se dirige cuando el usuario pulsa en el

titular. • <description>…</description> Breve descripción de la noticia. • <category>…</category>. Categoría de la noticia. • <pubDate>…</pubDate>. Fecha de publicación en formato ampliado e

inglés.

5. Prueba a modificar el contenido de estas noticias. Se pueden añadir más noticias debajo e inmediatamente por encima de la etiqueta </channel> copiando y pegando más bloques <item>…</item>

6. Selecciona Archivo > Guardar para guardar los cambios. 7. Copia el archivo feedcentro.xml a la carpeta miweb\rss. Debes crear previamente la

carpeta rss dentro del directorio miweb.


103

Paso 2. Enlace al canal RSS

1. Descarga y descomprime la imagen contenida en boton_rss.zip a la carpeta miweb\images

2. Abre o crea una nueva página miweb\index.html utilizando Kompozer. Será la portada de nuestro sitio web. Si las has creado guárdala mediante Archivo > Guardar como.

3. Sitúa el cursor al final de este documento para luego elegir Insertar > Imagen. 4. En el cuadro de diálogo Propiedades de imagen, en la pestaña Ubicación, pulsa

el botón Elegir archivo … para seleccionar la imagen images/boton_rss.gif

5. En el cuadro Texto alternativo introduce Canal RSS de Noticias. 6. Clic en la pestaña Enlace, pulsa en el botón Examinar y localiza el archivo

situado en la carpeta rss/feedcentro.xml.

7. Para terminar pulsa en el botón Aceptar. 8. Elige Archivo > Guardar para guardar los cambios. 9. Abre la página con el navegador Firefox para ver el resultado final.

Páginas web ::: El sitio web: estructura y navegación Diseño de materiales multimedia. Web 2.0

104

1.13 Sitio web: estructura y navegación


105

1.13 Sitio web: estructura y navegación 1.13.1 ¿Qué es un sitio web? Un sitio web (en inglés:website) es un conjunto de páginas html relacionadas entre sí por hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir de una dirección URL de su página índice (index) y con una unidad de contenido y de estilo gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web. Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a partir de una página principal o índice se enlazan el resto de páginas. 1.7.2 La estructura de archivos y carpetas Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar el sistema de ficheros. Con carácter general se proponen un modelo basado en la organización por tipos de archivos. Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las subcarpetas correspondientes.

Esta organización está especialmente pensada para un sistema de páginas HTML que comparten recursos: imágenes, hoja de estilo, javascript, etc. Las principales carpetas que utiliza son:

• audios: archivos de audio mp3. • css: hojas de estilo css. • descargas: archivos zip, exe, etc que se ofrecen para descarga. • images: imágenes jpg, gif o png. • pdf: documentos pdf. • scripts: archivos js con código javascript reutilizable. • swfs: archivos con animaciones flash (*.swf). • vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv


106

Cuando el número de páginas sobre un tema es elevado se suele abrir una subcarpeta dentro de la carpeta principal. A este espacio se la suele llamar micrositio. Ejemplo: Sitio web del Departamento de Física y Química dentro del sitio web del Instituto. El acceso por el navegador web a los archivos HTML de esta subcarpeta sera: http://www.misitio.es/nombre_subcarpeta/. La estructura de archivos de esta subcarpeta puede ser similar a la propuesta para la carpeta raíz: audios, css, docs, images, js, etc o bien tener una organización más plana (sin carpetas) e incluso independiente de los archivos de otras carpetas. 1.7.3 Los nombres de carpetas y archivos Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos:

1. El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9 2. No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en

blanco, caracteres acentuados, eñes, etc. 3. Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión – 4. No debe superar los 20 caracteres. 5. Utilizar siempre letras minúsculas aunque se admitan mayúsculas. Hay servidores que

distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no es la misma que la página index.html.

6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm.

7. Reserva el nombre index.html para la página que deseamos se muestre por defecto cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto.

1.7.4 La estructura de navegación La estructura de navegación por un sitio web viene definida por la experiencia de navegación del visitante en virtud de la cual puede saltar de una página a otra dentro del sitio web utilizando el sistema de hipervínculos. La estructura de navegación se suele elegir en función del tipo de contenido. Existen distintos tipos de estructuras:

• Jerárquica. Estructura en árbol donde existe una página índice o principal desde donde se accede al resto de páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando distintos niveles o jerarquías. Es ideal para sitios web de centros o proyectos. No se aconseja utilizar más de 4 niveles para evitar que el usuario se desoriente durante la navegación. Conviene situar en todas las páginas un menú que permita moverse de una forma fácil y directa por los distintos niveles y páginas de cada nivel.


107

• Lineal. Es una estructura muy simple similar a las páginas de un libro. Desde una página concreta se puede ir a la página siguiente o la página anterior. Es especialmente útil si deseamos que el usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras páginas que pudieran distraerle. Ejemplo: Guía o tutorial de aprendizaje. No es recomendable si el número de páginas encadenadas es muy elevado porque produce sensación de fatiga y no permite retomar fácilmente la secuencia allí donde se abandonó en la última sesión.

• Lineal con jerarquía. Es una estructura híbrida que trata de aprovechar las ventajas de las dos estructuras anteriores. Las páginas y subpáginas se organizan de forma jerárquica pero también es posible navegar de forma lineal por las páginas de un mismo nivel. Los contenidos web de este curso utilizan esta estructura.

• Red. A partir de la página índice o principal se puede navegar a otra u otras sin ningún orden aparente. Es una estructura más libre pero no es aconsejable cuando el número de páginas es elevado porque desorienta al usuario al no saber dónde está ni disponer de recursos para ir donde desea.


108

1.10.5 ¿Cómo crear un sitio web con Kompozer? Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Esta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP. A continuación se detalla el procedimiento para convertir la carpeta miweb en un sitio web local utilizando Kompozer.

1. Abre Kompozer 2. Elige Ver > Mostrar/Ocultar > Administrador de sitios o bien pulsa directamente la

tecla de función <F9> 3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta miweb. Clic en el botón Aceptar.


109

5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono “+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas y archivos que contiene.

6. En la parte superior derecha del Administrador se dispone de botones que permiten: 1) Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es

útil cuando se añaden elementos utilizando el explorador de archivos de Windows o bien cuando se crea una página HTML nueva.

2) Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta seleccionada en el árbol del Administrador de sitios.

3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta seleccionado.

4) Eliminar. Elimina el archivo o carpeta seleccionada.

7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css,

descargas, pdf, plantillas, scripts, swf y videos.


110

8. A continuación vamos a crear la página index.html de nuestro sitio web. Para ello seguiremos el procedimiento habitual: Archivo > Nuevo.

9. Escribe “Mi página principal”, selecciona el texto y elige como formato Título 1.

10. Pulsa la tecla <enter> para situarte en la siguiente línea y pulsa en el botón Viñetas de la barra de herramientas de Formato.

11. Escribe “Federico García Lorca”, selecciona el texto y pulsa en el botón Enlace.

12. En el cuadro de diálogo Propiedades del enlace haz clic en el botón Elegir archivo … y localiza la página lorca.html situada en la carpeta miweb. Clic en Aceptar.

13. Repite los pasos 11 y 12 para crear los enlaces al resto de páginas : • Demografía: poblacion.html • Escribe tu cuento: escribe.html • Glosario: glosario.html

14. Selecciona Archivo > Guardar como 15. Introduce el título: Mi página principal para guardar la página index.html en la

carpeta miweb. 16. Para probar su funcionamiento pulsa en el botón Navegar.

Páginas web ::: ¿Cómo diseñar un menú de navegación? Diseño de materiales multimedia. Web 2.0

111

1.14 ¿Cómo diseñar un menú de navegación?


112

1.14 ¿Cómo diseñar un menú de navegación? En este apartado vamos a describir el procedimiento de creación de un menú de navegación para un sitio web con estructura jerárquica. Para ello utilizaremos el software gratuito Coffee Free DHTML Menu Builder. Este programa permite crear un menú jerárquico desplegable con colores personalizados utilizando un interfaz visual. Al final se genera un código javascript que se puede copiar y pegar en nuestras páginas HTML para integrar este menú. 1.14.1 Instalación y ejecución de DHTML Menu Windows

1. Descarga y descomprime el contenido del archivo: DHTMLmenu.zip en una carpeta de tu disco duro o de tu pendrive. Se trata de una versión portable. El programa se inicia al hacer doble clic sobre el archivo ejecutable: DHTMLMenu.exe

Otra opción es visitar la página oficial de este producto para descargar e instalar la versión más reciente: http://www.coffeecup.com

Ubuntu: En Ubuntu se puede utilizar Wine como un programa emulador para ejecutar dentro de este sistema ciertas aplicaciones propias de Windows. En este caso se propone emplearlo para ejecutar DHTML Menu. Para instalar Wine:

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir y quitar. 2. En el panel Añadir y quitar aplicaciones introduce wine en la casilla Buscar. En el

catálogo aplicaciones marca la opción Wine Windows Emulator y a continuación pulsa en el botón Aplicar cambios. Sigue los pasos sugeridos para terminar la instalación.

Para ejecutar DHTML Menu:

3. Descarga y descomprime el contenido del archivo: DHTMLmenu.zip en una carpeta de tu disco duro o de tu pendrive.

4. Clic derecho sobre el icono de DHTMLMenu.exe y a continuación selecciona la opción Abrir con Wine. Se iniciará el emulador Wine y éste cargará el ejecutable indicado.

1.14.2 Crear el menú de navegación

1. Abre DHTML Menu. 2. En la pestaña Menu Designer (Diseñador del Menú) vamos a crear la estructura del

menú. En este caso vamos a crear un árbol con esta estructura:

Capítulo 1 (sin enlace) • Texto: Página 1. Enlace: pagina0101.html • Texto: Página 2. Enlace: pagina0102.html



113

• Texto: Página 3. Enlace: pagina0203.html • Texto: Página 4. Enlace: pagina0204.html


3. Pulsa en el botón Add Root Item (Añadir Elemento Raíz) e introduce como “Capítulo 1” como Text (Texto) y borra el contenido de la casilla Link.

4. Repite el paso 3 para crear otros dos elementos raíz más: Capítulo 2 y Capítulo 3. 5. Clic en la entrada Capítulo 1 del arbol de menú Your Menu (Tu Menú) para

seleccionarlo. 6. A continuación pulsa en el botón Add Sub Item (Añadir Sub Elemento). Introduce

“Página 1” en el cuadro Text (Texto) y como “pagina0101.html” en Link (Enlace). 7. Como ahora tenemos seleccionado el elemento Página 1 ahora pulsamos en el botón

Add Sibling (Añadir hermano) para crear otro elemento al mismo nivel. En este caso el texto es “Página 2” y el enlace “pagina0102.html”.

8. Repite el paso 7 para crear otro elemento con texto “Página 3” y enlace “pagina0103.html”.

9. Selecciona la entrada Capítulo 2 y pulsa en el botón Add Sub Item (Añadir Sub Elemento) para crear un elemento de texto “Página 1” y enlace “pagina0201.html”.

10. Repite el paso 7 para crear … • Texto: “Página 2”. Enlace: “pagina0202.html” • Texto: “Página 3”. Enlace: “pagina0203.html” • Texto: “Página 4”. Enlace: “pagina0204.html”

11. Repite el paso 10 y 11 para crear las entradas correspondientes del Capítulo 3: • Texto: “Página 1”. Enlace: “pagina0301.html” • Texto: “Página 2”. Enlace: “pagina0302.html”

12. El árbol resultante del menú se puede ver en el cuadro Your Menu (Tu Menú). 13. Clic en la pestaña Menu Colors (Colores del Menú).


114

14. En este panel puede configurar el color de fondo, de la fuente y del borde de los botones del menú principal (Main Menu Colors) y de los submenús (Sub Menu Colors).

15. Clic en la pestaña Options (Opciones).


115

16. En el panel Options se pueden configurar múltiples detalles del menú. Los más importantes son:

• Menu Type (Tipo de Menú): Horizontal o Vertical. En este caso vamos a seleccionar Horizontal.

• SubMenus UnFold On (Activación del despliegue de los submenús): OnMouseOver o OnClick. Permite definir el evento de usuario que desplegará un submenú: OnMouserOver – cuando el usuario sitúe el puntero del ratón sobre la opción de menú – o bien OnClick – sólo cuando pulse sobre él. En este caso dejamos la opción por defecto: OnMouserOver.

• Menu Item Font (Fuente del Elemento de Menú). Permite definir la fuente, tamaño y efectos (negrita/cursiva) del texto que se mostrará en los botones del menú. En este caso dejamos las opciones por defecto.

• Menu Arrows (Flechas de Menú). Selecciona la opción No Arrows (Sin flechas).

17. Si deseas ver el aspecto que tendrá tu menú pulsa en el botón Preview (Vista previa). 18. Para guardar las opciones de configuración del menú y poder editarlas en otro

momento es conveniente pulsar en el botón Save Menu … (Guardar Menu)

19. En el cuadro de diálogo Guardar como introduce el nombre del archivo. Por ejemplo mimenu.mnu. La extensión de archivo *.mnu es específica de Menu Builder

20. Si cierras Menu Builder y lo vuelves a abrir se puede recuperar la configuración definida utilizando el botón Open Menu … (Abrir Menu).


116

1.14.3 Exportar el código javascript del menú

1. Abre DHTML Menu y luego abre el menú que has guardado: mimenu.mnu. 2. Clic en el botón Get Code (Conseguir Código). 3. Se muestra el cuadro de diálogo DHTML Menu HTML Code con el código javascript

que generará el menú en nuestras páginas HTML.

4. Pulsa en el botón Copy to Clipboard (Copiar al Portapapeles) para copiar este código al portapapeles.

5. Clic en el botón Close para cerrar esta ventana. 6. En Windows abre el Bloc de Notas mediante Inicio > Todos los programas >

Accesorios > Bloc de Notas. En Ubuntu abre el editor de textos mediante Aplicaciones > Accesorios > Editor de textos.

7. Elige Edición > Pegar. 8. Elimina la primera línea del código: <script type='text/javascript'> 9. Borra las 3 últimas líneas:

</script> <noscript>Your browser does not support script</noscript> 

10. Vamos a guardar este código en un archivo de javascript independiente de extensión *.js. Selecciona Archivo > Guardar

11. En el cuadro de diálogo Guardar como elige como carpeta destino miweb\scripts e introduce como nombre menu.js

12. Pulsa en el botón Guardar. 13. Cierra DHTML Menu.


117

1.14.4 Integrar el menú en las páginas HTML

1. Extrae a la carpeta miweb el contenido del archivo libro.zip que se adjunta. Como resultado de esa extracción encontrarás varias páginas HTML: pagina0101.html, pagina0102.html, pagina0201.html, …

2. Abre Kompozer y selecciona Archivo > Abrir Archivo. 3. Selecciona la página pagina0101.html y pulsa en Abrir. 4. Sitúa el cursor en la primera línea del documento. Es aquí donde se situará el menú.

5. Elige Insertar > HTML … 6. En el cuadro de diálogo Insertar HTML haz clic en el cuadro y escribe el código de

inclusión del menú: <script type="text/javascript" src="scripts/menu.js"></script>


118

Otra posibilidad es copiar y pegar este código desde aquí.

7. Haz clic en el botón Insertar. 8. Para comprobar si este código se ha añadido correctamente haz clic en la pestaña

Código fuente que aparece en la barra de modos de vista inferior.

9. En las primeras líneas de código HTML se puede comprobar que se ha incluido el código.

10. Guarda el documento HTML pulsando en el botón Guardar o seleccionando Archivo > Guardar.

11. Para ver su apariencias definitiva pulsa en el botón Navegar. 12. Repite los pasos anteriores para añadir el javascript del menú de navegación a todas y

cada una de las páginas: pagina0102.html, pagina0201.html, pagina0202.html, etc.

Páginas web ::: Publicación web por FTP Diseño de materiales multimedia. Web 2.0

119

1.15 Publicación web por FTP


120

1.15 Publicación web por FTP 1.15.1 ¿Qué es publicar un sitio web? La práctica habitual es diseñar las páginas web de nuestro sitio web en el disco duro del equipo para luego enviarlos al servidor web junto con los archivos multimedia referenciados (imágenes, animaciones, audios, etc). A este proceso se le llama publicación web. Mediante este procedimiento se pone a disposición de cualquier usuario con acceso a Internet las páginas web del centro o proyecto al pasar a estar alojadas físicamente en un ordenador servidor con acceso permanente desde Internet. La subida de archivos desde el equipo local al servidor se puede realizar mediante un programa que utiliza el protocolo FTP (File Transfer Protocol = Protocolo de Transmisión de Archivos). Esta transferencia de archivos se realiza en modo autentificado, es decir, introduciendo un nombre de usuario y contraseña para evitar que otras personas puedan publicar en nuestro espacio web. En consecuencia antes de afrontar la tarea de publicación será necesario obtener los siguiente datos del administrador del servidor web:

• Dirección del servidor FTP: Es la URL del servidor que atiende peticiones de conexión por FTP para la subida de archivos. Si el servidor web es del CNICE puede ser uno de estos: roble.pntic.mec.es, ficus.pntic.mec.es, centros5.pntic.mec.es, etc. Si es Yahoo será: ftp.es.geocities.com

• Usuario y Contraseña: Son los datos de la cuenta que es necesario introducir para realizar una subida autentificada de recursos y que estos recursos se alojen en la ubicación correcta del servidor.

• Dirección del servidor HTTP: Es la URL del servidor web que nos permitirá acceder a nuestras páginas usando el navegador web. Ejemplo: http://roble.pntic.mec.es/usuario/

A continuación se explican los detalles de cómo utilizar un programa como Filezilla , tanto en Windows como en Linux, para subir contenidos por FTP a un servidor. 1.15.2 Instalación de Filezilla en Windows Descarga el instalador FileZilla_3.0.7_win32-setup.exe a una carpeta de tu disco duro. Doble clic sobre este archivo para iniciar la instalación. En el sitio web oficial del proyecto Filezilla podrás encontrar la versión más reciente o que se adapta a tu sistema: http://filezilla-project.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: FileZilla_Portable_3.0.7.1.paf.exe


121

1.15.3 Instalación de Filezilla en Ubuntu

1. Desde el escritorio elige Aplicaciones > Añadir o quitar … 2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles. 3. Introduce el término Filezilla en el cuadro de texto Buscar: y a continuación pulsa la

tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de verificación que acompaña a la entrada de Filezilla. Pulsa en el botón Aplicar cambios para iniciar la instalación. Confirma la instalación pulsando de nuevo en el botón Aplicar.

4. Si estás conectado a Internet se descargarán los archivos necesarios para su instalación. Una vez concluída se mostrará el mensaje de éxito. Clic en el botón Cerrar.

5. Se puede situar un acceso directo al programa en el escritorio. Para ello despliega en el menú de programas: Aplicaciones > Internet > Filezilla. Arrastra el icono de Filezilla hasta un hueco libre del escritorio. Esto creará un acceso directo al programa desde el escritorio.

6. Si desde Ubuntu necesitas instalar el pack del idioma castellano visita la web de Filezilla: http://filezilla-project.org y en ella la sección Translations.

7. Descarga al escritorio el archivo binario: es_ES.mo. 8. Renombra este archivo como filezilla.mo 9. Localiza la carpeta /usr/share/filezilla/resources. En esta carpeta crea la carpeta

locale y dentro de ella la carpeta es_ES. Navega para situarte en ella y dentro de ella sitúa el archivo filezilla.mo.

10. Reinicia Filezilla y sigue los pasos del siguiente apartado para cambiar el idioma del interfaz.

1.15.4 Configurar el interfaz al idioma castellano

1. Abre Filezilla haciendo doble clic sobre el icono del escritorio.

2. Si el interfaz está en inglés para configurar el idioma castellano en la barra de menús

de Filezilla selecciona Edit > Settings (Edición > Configuración …)


122

3. En el cuadro de diálogo Filezilla Options (Opciones de Filezilla), en la lista de opciones que aparece en el panel izquierdo, pulsar sobre el elemento Language (Idioma) y después haz clic sobre el idioma Español o bien Default system language (Idioma por defecto del sistema) en el panel derecho. Para guardar esta selección pulsa en el botón OK de este cuadro.

1.15.5 Configurar conexión FTP En primer lugar debes asegurarte de que dispones de los datos de configuración de tu conexión FTP: dirección del servidor, nombre de usuario y contraseña. A continuación se creará una nueva entrada en el Gestor de Sitios para poder establecer conexión con el servidor FTP.

1. Abre el programa Filezilla. 2. Selecciona Archivo > Gestor de sitios. 3. Se muestra el cuadro de diálogo Gestor de sitios. 4. Realiza los siguientes pasos para crear la conexión a un nuevo sitio:


123

1) Nuevo Sitio. Clic en este botón para crear una conexión a un nuevo sitio. 2) Nombre del Sitio. En la entrada que se muestra debajo de la carpeta Mis sitios

escribe su nombre. Éste te permitirá diferenciarlo cuando tengas conexiones a distintos sitios. Este nombre puede ser cualquiera. Por ejemplo: Mi Sitio CNICE.

3) Servidor. Es el nombre o dirección IP del servidor FTP al que deseas conectarte. En este caso: roble.pntic.mec.es

4) Puerto. Asegúrate de que el puerto definido es el típico del protocolo FTP: 21. 5) Tipo de servidor. Elige la opción FTP – File Transfer Protocol. 6) Modo de acceso. Es el tipo de autentificación: Anónimo, Normal, Preguntar la

contraseña, Interactivo o Cuenta. En este caso selecciona la opción Normal si deseas incluir la contraseña en la conexión o bien Preguntar la contraseña para que se solicite la misma en cada intento de conexión.

7) Usuario. Es el identificador del usuario ante el servidor remoto. 8) Contraseña. Autentifica el usuario ante el servidor. 9) Conectar. Clic en este botón para iniciar la conexión.

La configuración de la conexión a un nuevo sitio sólo es necesario realizarla la primera vez o bien cuando sea necesario modificar algún dato. En posteriores accesos al programa sólo será necesario seleccionar la conexión creada y pulsar en el botón Conectar. En ocasiones es necesario configurar algunas opciones avanzadas de la conexión.

1. Desde Filezilla abre el Gestor de sitios mediante Archivo > Gestor de Sitios. 2. Clic en la conexión correspondiente que aparece bajo la carpeta Mis sitios para

seleccionarla y poder editarla. 3. Clic en la pestaña Avanzado.


124

4. En esta pestaña se pueden configurar, entre otros, los siguientes parámetros: • Directorio remoto por defecto. En esta casilla puedes introducir una carpeta

del directorio remoto para situarte en ella al iniciar sesión. Por ejemplo en el servidor del CNICE es interesante definir la carpeta /public_html/ porque todos las carpetas y archivos navegables de una cuenta se guardan dentro de esta carpeta principal.

• Directorio local por defecto. En esta casilla conviene que definas la ruta de la carpeta donde se guardan habitualmente los archivos a publicar en ese sitio.

5. Pulsa en el botón OK para terminar.

1.15.6 Conectar con el sitio remoto

1. Abre Filezilla. 2. Seleccionar Archivo > Gestor de sitios o bien pulsa en el botón Gestor de sitios de la

barra de herramientas.

3. Se mostrará el cuadro de diálogo Gestor de sitios donde se hace clic sobre la conexión para seleccionarla y se pulsa en el botón Conectar.


125

4. Otra posibilidad quizás más rápida sea pulsar en la cabeza de flecha negra hacia abajo que aparece en el botón Gestor de Sitios de la barra de herramientas para desplegar el árbol de conexiones y hacer clic sobre la conexión deseada.

5. Filezilla intentará establecer una conexión FTP de acuerdo a la configuración establecida. Si los datos introducidos son correctos y no existe ningún problema, se establecerá conexión al cabo de unos instantes y se podría trabajar en la sesión FTP.

6. En la ventana de Filezilla se pueden distinguir 6 áreas o paneles:

1) Barra de herramientas. Proporciona acceso a las operaciones más habituales de gestión FTP. Si pulsas en el botón situado más a la izquierda de esta barra se mostrará el Gestor de Sitios.

2) Conexión rápida. Puedes introducir los datos de conexión rápida a un sitio FTP: Dirección, Usuario, Contraseña y Puerto. A continuación se pulsa el botón Conexión Rápida. Esta información no será añadida al Gestor de Sitios.

3) Registro de mensajes. Muestra los ecos de las operaciones de comunicación entre cliente y servidor FTP. Nos permite tener un seguimiento completo de la situación de la sesión. Indica en un color diferente las respuestas del servidor, el estado de la conexión, los errores, etc.

4) Sitio Local. Se sitúa en la parte izquierda y muestra el contenido de carpetas y archivos de tu equipo local. Consta de dos ventanas. En la superior se puede navegar entre las unidades de disco y carpetas. En la ventana inferior se muestran las carpetas y archivos situados en el interior de la carpeta seleccionada arriba.

5) Sitio Remoto. Se sitúa en la parte derecha y muestra el contenido de carpetas y archivos del servidor. La carpeta que se muestra inicialmente al establecer la conexión será la que se ha definido en la casilla Directorio remoto por defecto de las opciones avanzadas de configuración del Sitio.


126

6) Cola de transferencia. Proporciona información de la lista de archivos que se están transfiriendo desde el equipo cliente al servidor o viceversa: nombre del archivo local; dirección de transferencia: (<-) descargas ó (->) subidas; nombre del archivo remoto; host del sitio remoto; estado: "Transferring ..."; etc.

1.15.7 Gestión FTP de archivos Una vez que hemos abierto Filezilla y nos hemos conectado con éxito al servidor remoto, se podrán realizar las operaciones más habituales relacionadas con la publicación por FTP de los contenidos de una web. a) Navegar por el Sitio Local o Remoto

1. Para navegar y localizar un archivo o carpeta en el cuadro Sitio Local (panel izquierdo) es necesario abrir y cerrar carpetas.

2. Para abrir una carpeta: clic sobre la carpeta en el marco superior y en el marco inferior se mostrará su contenido.

3. Para navegar a la carpeta superior haz doble clic sobre el icono de carpeta que muestra dos puntos “..”. Filezilla te sitúa en la carpeta superior que contiene a la anterior.

b) Subir un archivo o carpeta

1. Para seleccionar un archivo haz clic sobre el archivo o carpeta del Sitio local. Para seleccionar varios archivos simultáneamente , haz clic sobre el primero y luego clic sobre el último manteniendo pulsada la tecla Mayus.

2. En el panel Sitio Remoto sitúate en la carpeta destino donde deseas enviar el archivo.

3. Clic derecho sobre la selección del Sitio local y elige la opción Subir para iniciar la transferencia. Otra posibilidad es pulsar, arrastrar y soltar la selección desde el panel Sitio Local al panel Sitio Remoto.


127

4. En el panel Cola de Transferencia iremos leyendo la evolución del proceso de transferencia. Si todo funciona correctamente, al cabo de un tiempo, observaremos que esos elementos aparecen en la carpeta abierta dentro del panel del Sitio Remoto.

c) Descargar

1. Clic derecho sobre una carpeta o archivo del panel Sitio remoto (derecho) y selecciona la opción Descargar en el menú desplegable.

2. Se puede descargar un archivo desde el servidor remoto, pulsando y arrastrando desde el panel Sitio remoto al panel Sitio Local.

d) Otras opciones

1. Mediante clic derecho en cualquiera de los paneles Sitio remoto y Sitio local se pueden realizar distintas operaciones de gestión de carpetas y archivos: crear carpeta (Crear directorio), Borrar, Renombrar, Abrir, etc.

Nota: El servicio de páginas web del CNICE presenta, entre otras, dos características a tener en cuenta al subir contenidos por FTP:

• Carpeta public_html. Al principio es necesario que el usuario cree en el servidor la carpeta public_html para situar dentro de ella todos los archivos de su sitio web.

• Cuota de espacio. El servidor ofrece un espacio de tamaño limitado. Cuando se alcance este límite será necesario ponerse en contacto con el administrador del servicio para una posible ampliación.


128

1.15.8 Descargas anónimas por FTP En Internet existen múltiples sitios desde donde es posible descargar archivos utilizando el protocolo FTP. La descarga de archivos por FTP es más eficaz que la descarga HTTP: se puede detener y reanudar y también optimiza mucho mejor el ancha de banda disponible. Para las descargas anónimas por FTP podemos utilizar el cliente Filezilla.

1. Abre Filezilla 2. En la barra de conexión introduce la dirección del servidor FTP. Por ejemplo:

ftp.rediris.es (Servidor FTP anónimo de la comunidad RedIris). 3. Como es un servidor de descargas anónimo no es necesario introducir ni nombre de

usuario ni contraseña. Clic en el botón Conexión rápida. Los campos Nombre de usuario y Contraseña se autocompletarán y se establecerá la conexión.

4. Desde este espacio es posible descargar, por ejemplo, distribuciones de Linux (/pub/linux/distributions/) o bien las últimas versiones de productos de software libre (/pub/mozilla.org/)

Páginas web ::: Edición web en línea con Kompozer Diseño de materiales multimedia. Web 2.0

129

1.16 Edición web en línea con Kompozer


130

1.16 Edición web en línea con Kompozer Kompozer es un programa que permite la edición en línea de un sitio web. Es decir que puedes actualizar directamente el contenido del sitio web en el servidor remoto sin necesidad de hacerlo en la copia local y luego subirlo por un programa cliente FTP. 1.16.1 Configuración del sitio para edición en línea Antes de comenzar es necesario disponer de las credenciales de conexión FTP al servidor remoto y que tu equipo está conectado a Internet.

1. Abre Kompozer 2. Selecciona Ver > Mostrar/ocultar > Administrador de sitios o bien pulsa <F9>. 3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

4. En el panel Configuración de publicación define los siguientes parámetros: • Nombre de sitio. Escribe el identificador que te permitirá distinguir esta

conexión de otras dentro de Kompozer. Por ejemplo: Mi Sitio CNICE • Dirección http de su página inicial. Es la página de inicio de tu sitio web y

dependerá del servidor donde se publique. En el ejemplo que nos ocupa: http://roble.pntic.mec.es/usuario/

• Servidor de publicación: Dirección de la publicación. Es la dirección FTP del servidor. Debes introducirla anteponiendo el prefijo: ftp://. Ejemplo: ftp://roble.pntic.mec.es/ . Si es necesario indicar carpeta destino se puede añadir al final de esta dirección: ftp://roble.pntic.mec.es/public_html

• Nombre de usuario y Contraseña de la conexión FTP.

5. Clic en el botón Aceptar para terminar.


131

6. Tras esta operación en el Administrador de sitios aparecerá una entrada con el nombre definido para el sitio. Para ver el contenido del sitio haz doble clic sobre esta entrada. Al cabo de unos instantes se mostrará el contenido del sitio remoto.

1.16.2 Modificar el contenido de una página publicada

1. Selecciona el archivo HTML que deseas editar en el Administrador de sitios y haz doble clic sobre él. Al cabo de unos instantes se mostrará su contenido en el panel derecho.

2. Realizas los cambios oportunos en el contenido de esta páginas HTML 3. Para publicar los cambios pulsa en el botón Publicar que aparece en la barra de

Redacción de Kompozer.

4. Se muestra la ventana de progreso Publicando: Título de página. Una vez completado el proceso de publicación con éxito se muestra como Estado de publicación el mensaje Publicación completada. Clic en el botón Cerrar

Nota: Si no tienes marcada la opción Mantener esta ventana abierta … esta ventana se cerrará automáticamente al cabo de unos segundos.


132

1.16.3 Operaciones básicas con archivos en servidor remoto Desde Kompozer es posible realizar algunas operaciones básicas de manejo de archivos en el servidor remoto. Para ello basta seleccionar la carpeta o archivo adecuado y pulsar en uno de los botones de la barra de herramientas del Administrador de sitios: Nueva carpeta, Renombrar o bien Eliminar.

1.16.4 Nueva página en servidor remoto Para crear una nueva página en el servidor remoto:

1. Selecciona Archivo > Nuevo 2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción

Un documento vacío y pulsa en el botón Crear.


133

3. Teclea el texto, por ejemplo: “Mi primera página remota” 4. Pulsa en el botón Publicar o bien selecciona Archivo > Publicar

5. En el cuadro de diálogo Publicar página introduce los siguientes datos: • Título de la página. Ejemplo: Mi primera página remota • Nombre de archivo. Ejemplo: mipaginaremota.html • Subdirectorio del sitio para esta página. En este cuadro de texto puedes

introducir el nombre de la carpeta en el servidor donde se guardará la página. Si no introduces nada se guardará en la carpeta raíz de conexión.

• Incluir imágenes y otros archivos. Activa esta opción si vas a insertar imágenes en la página. Elige Usar la misma dirección como página si las imágenes se van a guardar en la misma carpeta que la página. Se recomienda elegir Usar este subdirectorio del sitio: e introducir la carpeta images como carpeta destino de las imágenes que se publican.

6. Clic en el botón Publicar. Es conveniente publicar la página antes de insertar en ella imágenes o enlaces relativos a otros documentos.


134

7. Mientras se sube la nueva página se mostrará el cuadro Publicando … donde se mostrará el progreso del proceso. Cuando haya finalizado con éxito se mostrará el mensaje Publicación completada. Al cabo de unos segundos se cerrará este cuadro o bien se puede cerrar pulsando en el botón Cerrar.

Notas:

• Tras su publicación, el botón Publicar no estará disponible hasta que no se realice alguna modificación sobre esa página.

• Para publicar esa página en otra carpeta selecciona Archivo > Publicar como • Si después de publicar con éxito no ves la nueva página en el panel del Administrador

de sitios entonces pulsa en el botón Recargar. 1.16.5 Insertar una imagen del servidor en una página

1. Haz doble clic sobre la página miprimerapagina.html para abrirla. 2. Para insertar una imagen que ya está subida al servidor, abre la carpeta images en el

Administrador de sitios, y a continuación arrastra el archivo que contiene la imagen para soltarla en la página. Clic en el botón Publicar.


135

1.16.6 Insertar una imagen del equipo en una página remota

1. Para insertar una imagen del equipo local, selecciona Insertar > Imagen. A veces el programa muestra un pequeño “bug” en función del cual a veces la opción de insertar imagen está deshabilitada. Para resolverlo basta con pinchar en la pestaña código fuente de la página para luego regresar al modo vista normal.

2. En el cuadro de diálogo Propiedades de la imagen pulsa en el botón Elegir archivo … para navegar y localizar el archivo de imagen en tu equipo. Introduce el Texto alternativo y pulsa en el botón Aceptar.

3. Pulsa en el botón Publicar o bien Archivo > Publicar. 4. Se muestra el cuadro de diálogo Publicando … donde podrás observar que la imagen

se ha subido al servidor alojándose en la carpeta que se indicó: images. Clic en el botón Cerrar.

5. Si pulsas en el botón Recargar del Administrador de sitios podrás observar que la imagen subida aparece en el árbol de carpetas dentro del directorio images

Páginas web ::: Usabilidad de páginas web Diseño de materiales multimedia. Web 2.0

136

1.17 Usabilidad de páginas web


137

1.17 Usabilidad de páginas web

1.17.1 Aclaración terminológica

El término "Usabilidad", importado del mundo anglosajón, puede traducirse como "facilidad de uso". Es un concepto más general. Sin embargo "Accesibilidad" es un término más específico y se refiere al requisito que debe reunir un documento web para que las personas con discapacidades puedan alcanzar la información que contiene. Por otro lado la "Navegabilidad" alude a la definición de una estructura que permita al usuario moverse con facilidad por un sitio web.

Tener en cuenta estos conceptos cuando se aborda el diseño de un sitio web es una declaración de intenciones que excede cuestiones de estilo y trata de ponerse en el punto de vista de los potenciales visitantes con intención de facilitarles el acceso a la información.

A continuación se citan brevemente algunas pautas o consejos que pretenden incrementar la usabilidad de las páginas web diseñadas.

1.17.2 Navegabilidad

1. Duplica los elementos de navegación si es necesario. Si la página va a tener un tamaño superior a dos/tres ventanas, conviene situar los elementos de navegación en el encabezado y pie de la misma

2. Añade enlaces al principio de la página. Si la página es larga, es necesario situar al final de ella e incluso por el medio hipervínculos que apunten al inicio de la misma.

3. Evita diseñar páginas que sean callejones sin salida. Sitúa en todas las páginas al menos un enlace que permita continuar la navegación: volver, índice, etc.

4. Define una estructura sencilla de navegación. Es recomendable utilizar una estructura jerárquica sencilla a partir de una página índice evitando abusar de los enlaces que saltan de una rama a otra.

5. Proporciona siempre índices. Sitúa siempre que sea posible un índice con el contenido del sitio. Situálo al principio, lateral o final de cada una de las páginas para que sea siempre accesible.

6. Añade una paleta de navegación textual. Si utilizas una paleta de navegación a base de gráficos, incorpora otra paleta adicional a base de enlaces de texto. De esta forma el usuario no tendrá que esperar a que se carguen las imágenes para saltar a otra página.

1.17.3 Diseño de Páginas

1. Tamaño de las páginas. Las personas no suelen hacer scroll. Por este motivo las páginas no deben ser más largas del doble de la pantalla. Fracciona el texto en varias páginas cuando el tamaño del mismo sea excesivo para una página. El avance a la siguiente página aportará cierto descanso en la vista que el usuario agradecerá. No obstante si la página contiene un texto que debe ser leído completo conviene utilizar marcadores y enlaces para facilitar la navegación por el mismo.

2. Identificación de las páginas. Es interesante situar información del centro o proyecto en el pie o encabezado de todas las páginas. Incluso con posibilidad de acceder a un email de contacto o a la página índice. Hay visitantes que pueden acceder a través de buscadores a una página concreta del sitio web

3. Enlaces. • Escribe el texto como si no tuviera enlaces. Evita enlaces con el texto:

"Pincha aquí" porque alteran la normal lectura del texto.


138

• Elige palabras significativas para el texto del enlace. Elige adecuadamente el texto del enlace para anticipar lo que se encontrará el usuario antes de que pulse.

• Evita textos demasiado largos como enlace. Para no dificultar la lectura. • Revisa el funcionamiento de los enlaces. De esta forma el usuario tendrá

seguridad de encontrar lo que se anuncia tras el enlace. • Cuida el resaltado que produce un enlace. Si deseamos resaltar una palabra

en una frase debemos tratar de situar el enlace en ella. • No modifiques el color del texto de los enlaces. Esto desconcierta al

usuario. 4. Independencia.

• Escribe las páginas para distintos navegadores. Aunque el Internet Explorer es el más usado cada vez hay más clientes con Firefox.

• No diseñes para la última versión del navegador. No todos los usuarios tienen instalada la última versión.

• Define el tamaño de las tablas y celdas en %. De esta forma se adaptarán a la resolución de pantalla del usuario.

• Diseña para una resolución óptima. Actualmente la resolución más utilizada es 1024x768. Indica en la página principal que es la resolución óptima pero no descuides la apariencia del documento en resoluciones inferiores ni superiores porque es el futuro inmediato.

1.17.4 Tipografía

1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso de mayúsculas porque son más difíciles de leer.

2. Capitalización. Un título es más atractivo con todas las iniciales en Mayúsculas y el resto en minúsculas que todas en Mayúsculas.

3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada en su equipo para poder ver el texto con ella a través del navegador web. Si utilizas una fuente enlazada para edades tempranas (Edelfont, Memima, etc) recuerda que el texto no se mostrará con ella si el usuario no tiene instalada esta fuente en ella.

4. Tamaño de la fuente. Utiliza los estilos de párrafo para modificar el tamaño de los textos.

5. Variedad de fuentes. No conviene abusar del número de tipos de fuente distintas a utilizar en un documento. Basta con una o dos (texto y titulares)

1.17.5 Gráficos

1. Tamaño de una imagen enlazada. Si se inserta un enlace a una imagen de cierto peso conviene situar una vista en miniatura de escaso peso indicando el tamaño del archivo que la contiene.

2. Imágenes de fondo. Utiliza imágenes de fondo de colores adecuados que no oculten el texto de la página. Tendrán una tonalidad parecida al color de fondo y de baja calidad para que se descarguen rápidamente.

3. Imágenes decorativas. No abuses del uso de imágenes no significativas. Dosifica el número de imágenes de una página para evitar las esperas durante su descarga.

4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en una página. De esta forma al descargarse la página ya se reserva el espacio para mostrarse una vez se complete la imagen.

5. Descarga progresiva. Configura tus imágenes de cierto peso para que realicen la visualización progresiva conforme se vayan descargando.

6. Ahorro de imágenes. Trata de usar el mismo archivo de imagen tantas veces como sea posible para acelerar la visualización.

7. Formato de imágenes. Usa GIF y PNG siempre que sea posible. Para las fotografías es mejor el formato JPEG.


139

1.17.6 Accesibilidad

En este apartado se describen brevemente algunas de las condiciones que deberían ser objetivos de diseño cuando se aborda la creación de un sitio web educativo. Se pretende que el material resultante sea accesible al mayor colectivo de usuarios incluyendo los alumnos/as con necesidades educativas especiales.

1. Texto alternativo. Proporciona contenidos textuales alternativos a los contenidos multimedia, por ejemplo, en las imágenes. Agilizará la navegación con conexiones lentas.

2. Uso del color. El color no es indispensable. Los textos y los gráficos deben ser comprensibles con independencia del color.

3. Hojas de estilo. Usa las marcas y hojas de estilo adecuadamente. Facilitarán la personalización de temas para adaptarse al usuario.

4. Tablas. Utiliza las marcas adecuadas para crear las tablas en los documentos. De esta forma se visualizarán correctamente en todos los navegadores.

5. Claridad del lenguaje. Utiliza el lenguaje de una forma clara y concisa. 6. Objetos insertados. Las páginas que contienen componentes avanzados deben ser

accesibles sin ellas: scripts, applets, etc. 7. Control de reproducción. Proporciona control al usuario para detener movimientos,

parpadeos o actualizaciones automáticas de una página. 8. Acceso directo. Utiliza interfaces que permitan una accesibilidad directa a los

contenidos.. 9. Compatibilidad. Diseña la web para que sea navegable desde cualquier plataforma,

sistema operativo o equipo. 10. Ayuda a la navegación. Proporciona en todo momento información de ayuda

contextual al usuario para orientarlo: dónde está y dónde puede ir. 11. Sistema de búsqueda. Ofrece índices o mecanismos de búsqueda para que el usuario

pueda encontrar rápidamente lo que busca. 12. Contenidos asequibles. El contenido de los documentos debe ser claro, simple y fácil

de entender.

1.17.7 Para saber más

La legislación española vigente establece que todos los sitios web institucionales y financiados con presupuesto público deben cumplir unos requisitos mínimos de accesibilidad.

Los estándares de accesibilidad que deben cumplir los contenidos web educativos en España están sometidos a las directrices recogidas en los siguientes documentos:

• Norma UNE 139802: http://www.sidar.org/recur/direc/norm/index.php • LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio

electrónico (LSSICE): http://www.sidar.org/recur/direc/legis/espa.php • Directrices de Accesibilidad del W3C: http://www.sidar.org/recur/desdi/wai/index.php • Web Accessibility Initiative (WAI) del W3C: http://www.w3.org/WAI/

Páginas web ::: Derechos de autor Diseño de materiales multimedia. Web 2.0

140

1.18 Derechos de autor


141

1.18 Derechos de autor

1.18.1 Introducción

En la elaboración de materiales educativos podemos partir de activos (textos, imágenes, audios y vídeos) propios o bien utilizar aquellos procedentes de otras personas o entidades. Por otra parte cuando se publica un material en internet puede resultar interesante establecer las condiciones de uso.

1.18.2 Los derechos de autor

Los materiales multimedia educativos tanto en formato cdrom como en internet están sujetos a la misma legislación sobre derechos de autor que el resto de obras: libros, pinturas, música, etc. Esto significa que si decidimos incorporar recursos ajenos (léase imágenes, audios, vídeos, etc) a nuestro espacio web debemos conocer y respetar las condiciones de uso que han definido los autores de estos materiales. Y esto es especialmente significativo cuando el material que hemos elaborado supera el contexto del aula y se pretende publicar en internet. Es entonces cuando existe posibilidad de ser utilizado por otras personas incluso en clara competencia con el material original.

En ocasiones cuando accedemos a un espacio web, su autor explicita la posibilidad de reutilización a cambio de citar la procedencia (derecho de cita) o bien de que no se fragmente su obra (derecho de obra no derivada).

Sin embargo cuando esto no se indica o bien se muestra una licencia de copyright (derechos reservados) conviene ser cauteloso. La apropiación indiscriminada de materiales ajenos para elaborar un material propio no se puede justificar desde la ausencia de ánimo de lucro que caracteriza las iniciativas en educación. Esta justificación no es suficiente y se hace necesario en estos casos contactar con el autor o autores para obtener su permiso y en caso favorable citar siempre la fuente de procedencia.

1.18.3 Licencias Creative Commons

Creative Commons (http://es.creativecommons.org/) es una organización que ofrece a cualquier usuario la posibilidad de elegir las condiciones en que desea compartir un trabajo publicado en Internet. Para ello debe elegir entre 4 condiciones:

Reconocimiento (Attribution): El material creado puede ser distribuido, copiado y exhibido por terceras personas si se reconoce la autoría en los créditos.

No Comercial (Non commercial): El material original y los trabajos derivados pueden ser distribuidos, copiados y exhibidos mientras su uso no sea comercial.

Sin Obra Derivada (No Derivate Works): El material puede ser distribuido, copiado y exhibido pero no se puede utilizar para crear un trabajo derivado del original.

Compartir Igual (Share alike): El material puede ser modificado y distribuido pero bajo la misma licencia que el material original.


142

De la combinación de estas condiciones se logran componer los 6 tipos de licencias que se pueden elegir:

Reconocimiento: El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos.

Reconocimiento - Sin obra derivada: El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se pueden realizar obras derivadas.

Reconocimiento - No comercial - Sin obra derivada : El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial. No se pueden realizar obras derivadas.

Reconocimiento - No comercial: El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial.

Reconocimiento - No comercial - Compartir igual: El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.

Reconocimiento - Compartir igual: El material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. Las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.

1.18.4 Añadir una licencia CC a una página HTML

Si estás interesado/a en situar una licencia CC (Creative Commons) en la portada o página principal de tu sitio web, puedes seguir los siguientes pasos:

1. Visita la web de Creative Commons: http://es.creativecommons.org/licencia/ 2. Pulsa en el enlace Escoger una licencia 3. En la pregunta ¿Quiere permitir usos comerciales de su obra? marca la opción

deseada. Por ejemplo: No. 4. En la pregunta ¿Quiere permitir modificaciones de su obra? señala una respuesta.

Por ejemplo: Yes, as long as others share alike (Sí pero compartir igual)


143

5. De la combinación de ambas respuestas surgirá la liccencia antes descrita como: Reconocimiento-No comercial-Compartir Igual. Clic en el botón Escoja una licencia.

6. Selecciona el modelo de icono que deseas incluir en tu página HTML:

7. Clic derecho sobre el cuadro que muestra el código HTML y elige Seleccionar todo. A continuación vuelve a hacer clic derecho y selecciona Copiar.

8. Abre Kompozer. 9. Crea un documento HTML introduciendo texto e imagen o bien abre uno ya existente. 10. Haz clic sobre la página para situar el cursor. 11. A continuación selecciona Insertar > HTML 12. En el cuadro de diálogo Insertar HTML haz clic derecho y elige Pegar. Esta acción

pegará el código propuesto para insertar el enlace a la licencia elegida. Clic en el botón Insertar.

13. Guarda el archivo HTML mediante Archivo > Guardar. Visualizar el resultado pulsando en el botón Navegar de Kompozer. Se abrirá el navegador Firefox (si es el navegador por defecto) mostrando esta página. Si haces clic sobre el icono de Creative Commons


144

o bien el enlace de texto que se acompaña se abrirá la correspondiente página de licencia.

2. Imagen

Imagen ::: Conceptos básicos de imagen digital Diseño de materiales multimedia. Web 2.0

146

2.1 Conceptos básicos de imagen digital


147

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,


148

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


149

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.


150

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.


151

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.


152

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 Diseño de materiales multimedia. Web 2.0

153

2.2 Empezar con GIMP


154

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.


155

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:


156

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.


157

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.


158

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>


159

3. Para situar el archivo de imagen en otra carpeta pulsa sobre el botón “+” situado al lado de la etiqueta Buscar otras carpetas. Se expanden las opciones de este cuadro de diálogo facilitando la elección de otra carpeta donde guardarlo. Incluso pulsando en Crear carpeta se puede crear una nueva dentro de la carpeta actual. También es posible hacer clic sobre la unidad C:\ del disco duro para navegar y localizar la carpeta desea o bien pulsar en el botón Mis imágenes para guardar la imagen en esta carpeta del usuario.


160

4. Una vez elegida la carpeta destino, clic en el botón “-“ situado al lado de la etiqueta Buscar otras carpetas para contraer este panel. Observa que en la casilla Guardar en una carpeta permanece el nombre de la carpeta destino elegida.

5. Pulsa sobre el botón “+” situado al lado de la etiqueta Seleccione el tipo de archivo

(Por extensión). El formato de archivo GIMP XCF image (xcf) es un formato específico de GIMP. Como veremos más adelante también es posible guardar la imagen en formatos GIF, PNG o JPG.

6. Clic en el botón “-“ Seleccione el tipo de archivo para contraer el panel de elección de formato. Observa que ahora el formato elegido aparece a continuación de esta etiqueta.

7. Para terminar pulsa en el botón Guardar.

Imagen ::: Optimización de imágenes Diseño de materiales multimedia. Web 2.0

161

2.3 Optimización de imágenes


162

2.3 Optimización de imágenes 2.3.1 Conversión de formatos El propósito de esta actividad es familiarizarse con el uso de GIMP para convertir una imagen de un formato a otro. Como sabemos los formatos más ligeros y adecuados a la web son: GIF, PNG y JPEG. En este caso veremos cómo convertir el archivo original BMP a cada uno de estos formatos.

1. Extrae a una carpeta de tu disco duro el archivo paint.bmp contenido en el ZIP que se adjunta a continuación. Se trata de una imagen cuyos datos son: 300x225 píxeles de tamaño, profundidad de color 24 bits (16,7 millones de colores), resolución 72 ppp, formato BMP y tamaño del archivo 198 Kb.

2. Haz doble clic sobre el acceso directo de GIMP situado en el escritorio:

3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta destino. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo paint.bmp. Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.

4. Pulsa sobre el botón Abrir.


163

2.3.2 Guardar en formato GIF

1. Clic en Archivo > Guardar como … Se muestra el cuadro de diálogo Guardar imagen. En la lista Guardar en una carpeta se mostrará seleccionada la carpeta destino donde se guardará la nueva imagen. En este caso es Mis imágenes.

2. Clic en el botón “+” situado junto a la etiqueta Seleccione el tipo de archivo (Por extensión).

3. En la lista de tipos de archivos elige Imagen GIF-gif. Observa que al seleccionar este tipo, el nombre del archivo adquiere la extensión .gif. Pulsa en el botón Guardar.

4. Se muestra el cuadro de diálogo Exportar archivo. Asegúrate de que está seleccionada la opción por defecto: Convertir a indexada usando ajustes predefinidos. Esto significa que se reducirá la paleta de colores de la imagen original hasta un máximo de 256 colores. Otra opción es Convertir a tonos de gris. Clic en el botón Exportar.


164

5. En el cuadro de diálogo Guardar como GIF puedes definir: • Entrelazar. Si activas la opción Entrelazar entonces el archivo que contiene la

imagen incluye una copia tosca de la imagen al comienzo de la cadena de datos de tal forma que el usuario que la descarga desde Internet ve rápidamente su contenido y conforme se va descargando va ganando en calidad.

• Comentario GIF. En este comentario puedes añadir información adicional al archivo de imagen: autor, fecha de creación, etc.

6. Clic en el botón Guardar. Observa que la ventana de imagen ahora está abierto el archivo paint.gif.


165

2.3.3 Guardar en formato JPG

1. Regresa a la ventana principal de GIMP para abrir de nuevo la imagen original en formato BMP mediante Archivo > Abrir.



4. En la lista de tipos de archivos elige Imagen JPEG-jpg,jpeg,jpe. Observa que al seleccionar este tipo, el nombre del archivo adquiere la extensión .jpg. Pulsa en el botón Guardar.

5. En el cuadro de diálogo Guardar como JPEG define la calidad de la imagen. Si activas la casilla Mostrar vista previa en la ventana de la imagen observarás el aspecto de la imagen para cada valor de calidad que establezcas. Arrastra el deslizador para una calidad del 80%. Cuanto mayor es la calidad, mayor será el tamaño del archivo que


166

contiene esta imagen. Observa que a medida que arrastras el deslizador hacia la izquierda para disminuir la calidad, el tamaño del archivo también disminuye y viceversa.

6. Ahora la ventana de imagen muestra el archivo paint.jpg. 2.3.4 Guardar en formato PNG

1. Regresa a la ventana principal de GIMP para abrir de nuevo la imagen original en formato BMP mediante Archivo > Abrir.



4. En la lista de tipos de archivos elige Imagen PNG - png. Al seleccionar este tipo, el nombre del archivo adquiere la extensión .png. Pulsa en el botón Guardar.


167

5. En el cuadro de diálogo Guardar como PNG puedes definir algunos de los siguientes parámetros:

• Entrelazado (Adam7). Incluye una copia tosca de la imagen al comienzo de la cadena de datos de tal forma que cuando el usuario la descarga desde Internet accede rápidamente a su contenido y conforme se va descargando va ganando calidad.

• Nivel de compresión: arrastra el deslizador al extremo derecho para definir una compresión de valor 9.


168

6. Para terminar pulsa en el botón Guardar. 7. Abre el explorador de Windows y encontrarás los archivos GIF, JPG y PNG creados.

Cada uno ha sido creado con la configuración que se recoge en las figuras anteriores. Todas ellas tienen las dimensiones de la imagen original: 300x225 pixeles y una resolución similar: 72 ppp. Observa que las diferencias de calidad son mínimas mientras que el tamaño del archivo se reduce considerablemente en los formatos GIF y JPG. Aunque el formato PNG comprime más que el GIF, en este caso produce un archivo de mayor peso porque conserva una paleta de colores de 24 bits.

BMP Color 24-bits (198 Kb)

GIF Color 8-bits (29 Kb)

JPG Color 24-bits (14 Kb)

PNG Color 24-bits (63 Kb)

En Windows para averiguar el peso de un archivo, desde el explorador de archivos, selecciona Ver > Detalles. En Linux selecciona Ver > Ver como lista. Al seleccionar este modo de vista de archivos, en el listado se mostrará el nombre, tamaño, tipo y fecha de modificación.


169

2.3.5 Reducir la paleta de colores El archivo que contiene una imagen puede reducirse de peso disminuyendo la paleta de colores que utiliza. En esta práctica reduciremos la gama de colores que utiliza una imagen aplicando distintos tipos de paletas para comprobar a continuación la influencia sobre el peso del archivo final. 1. Desde GIMP elige Archivo > Abrir para abrir el archivo paint.jpg situado en la carpeta

donde se encuentra a partir de la práctica descrita en el apartado anterior.

2. En la barra de título de la ventana de imagen se muestra el nombre del archivo

paint.jpg y entre paréntesis la etiqueta RGB. Esta etiqueta se refiere a la paleta de colores que utiliza la imagen. En este caso 16 millones de colores.

3. Para reducir la gama de colores selecciona Imagen > Modo > Indexado.

4. En el cuadro de diálogo Conversión de color indexado marca la opción Generar paleta óptima dejando en el contador el número 256 colores como máximo.

5. Clic en Aceptar.


170

6. Observa que ahora en la barra de título aparece la etiqueta (indexado …) 7. Selecciona Archivo > Guardar como para guardar la nueva imagen en formato GIF

con otro nombre. Por ejemplo: paint_256.gif 8. Cierra la ventana que contiene esta imagen. 9. Repite la secuencia de pasos 1-8 para crear archivos con esta imagen con una paleta

de 128, 64, 32 y 16 colores.

256 colores – 28,4 kb 128 colores – 23,4 kb

64 colores – 17,3 kb 32 colores – 12,6 kb

16 colores – 9,75 kb

Imagen ::: Dimensiones de una imagen Diseño de materiales multimedia. Web 2.0

171

2.4 Dimensiones de una imagen


172

2.4 Dimensiones de una imagen 2.4.1 Reducir el tamaño de una imagen Uno de los principales factores que determinan el peso de un archivo gráfico es el tamaño de la imagen que contiene, es decir, el número de píxeles en anchura y altura. Se recomienda utilizar un programa como GIMP para definir exactamente el tamaño final con que se utilizará cada imagen. Se puede insertar una imagen en una página HTML y luego reducir su tamaño de visualización. Sin embargo esta operación no reduce el peso final resultante del archivo gráfico. Es aconsejable reducir las dimensiones de la imagen previamente con GIMP u otro editor de imágenes, crear un nuevo archivo gráfico más ligero y luego integrarlo en la página.

1. Extrae a una carpeta de tu disco duro el archivo tranvia.jpg contenido en el ZIP que se adjunta a continuación: tranvia.zip. Sus características técnicas son: 800x600 píxeles de tamaño, profundidad de color 24 bits (16,7 millones de colores), resolución 72 ppp, formato JPG y tamaño del archivo 516 Kb.


3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo tranvia.jpg .Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.

4. Pulsa sobre el botón Abrir.


173

5. En la ventana de imagen elige Imagen > Escalar la imagen …

6. Se muestra el cuadro de diálogo Escalar la imagen.

7. En Tamaño de la imagen se muestra la Anchura y Altura en píxeles de la imagen actual. Observa que puedes modificar estos valores mediante los botones de incremento/decremento o bien tecleando otros. Sin embargo si entre ambas casillas y a la derecha aparece un icono de cadena cerrada, cuando trates de modificar la anchura, automáticamente se definirá la altura respetando las proporciones originales y evitando que la imagen se deforme. Al hacer clic sobre este icono de bloqueo se desactivará esta proporcionalidad y podrás definir valores independientes.


174

8. En el cuadro de diálogo Escalar la imagen despliega la lista de unidades de tamaño y

selecciona porcentaje. De esta forma se definirá el nuevo tamaño de la imagen utilizando un porcentaje de reducción a partir del tamaño original. En la casilla Anchura introduce el valor 50%. Observa que si el bloqueo de proporciones está activado al pulsar enter automáticamente se completa la Altura con idéntico porcentaje.

9. En la lista de Interpolación elige la opción Cúbica para definir el método que utilizará GIMP para reducir la imagen.

10. Clic en el botón Escala.

11. Se puede deshacer la operación de escala seleccionando en la barra de menús de la ventana de imagen: Edición > Deshacer.

12. A continuación elige Archivo > Guardar como … 13. En el cuadro de diálogo Guardar imagen define como nombre del nuevo archivo, por

ejemplo, tranvia50.jpg. Es importante que especifiques la extensión (.jpg) y también que definas un nombre distinto para evitar sobrescribir el archivo original. Asegúrate de recordar en qué carpeta destino se guardará.

14. Clic en el botón Guardar. 15. En la ventana Guardar como JPEG, sitúa el deslizador Calidad en 100% para evitar

pérdidas de calidad y analizar comparativamente el peso del archivo final resultante atendiendo solamente a la reducción de tamaño.


175


17. Cierra esta imagen y repite los pasos 3-16 crear otras dos imágenes que sean respectivamente el 30% y 10% de la imagen original partiendo siempre del archivo inicial: tranvia.jpg

18. Abre la carpeta destino y encontrarás en ella los archivos JPG: tranvia.jpg, tranvia50.jpg, tranvia30.jpg y tranvia10.jpg que has creado. Si el tamaño de la imagen es menor, el archivo que la contiene tendrá menor peso. Como puedes comprobar en el ejemplo no es necesario utilizar imágenes de gran tamaño en las páginas web. Eso no sólo redundará en una mayor calidad estética sino que hará más rápida la navegación facilitando la descarga de archivos gráficos más ligeros.

100% 50 % 30 % 10 %

800x600 píx. 400x300 píx. 240x180 píx. 80x60 píx.

517 kb 146 Kb 80 Kb 40 Kb


176

2.4.2 Modificar el tamaño del lienzo En ocasiones es necesario disponer de más lienzo en blanco dentro de una imagen para añadirle más elementos.

1. Extrae a una carpeta el archivo cisne.jpg contenido en el ZIP que se adjunta a continuación: cisne.zip. Sus características técnicas son: 330x240 píxeles de tamaño, profundidad de color 24 bits (16,7 millones de colores), resolución 72 ppp, formato JPG y tamaño del archivo 77 Kb.


3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo cisne.jpg .Clic sobre este archivo. Observa que en el recuadro Vista previa se muestra la imagen y sus propiedades.

4. Pulsa sobre el botón Abrir. En esta práctica vamos a ejemplificar cómo redimensionar el tamaño del lienzo de una imagen para añadirle un texto en su base.

5. En la ventana de imagen elige Imagen > Tamaño del lienzo …


177

6. En el cuadro de diálogo Establecer el tamaño del lienzo de la imagen se muestra la Anchura y Altura actuales del lienzo. En este caso 330x240 píxeles. Clic en el icono de bloqueo de proporcionalidad para poder aumentar la altura sin que ello implique incrementar la anchura. Tras su pulsación el icono debe tener el aspecto de dos eslabones de cadena separados.

7. En la casilla Altura introduce el valor 330 para aumentarla y pulsa la tecla enter. Observa que en la vista previa de la imagen aparece un espacio en blanco por debajo de la imagen que se corresponde con el lienzo aumentado. Si pulsas el botón Centrar la imagen se centraría horizontal y verticalmente sobre el lienzo. Otra posibilidad es introducir manualmente en las casillas X e Y la posición en píxeles en que se situará la esquina superior izquierda de la imagen en relación con el nuevo lienzo. En el caso que nos ocupa no utilizaremos esta opción ni el botón de centrado porque GIMP crea automáticamente el espacio que necesitamos en la base de la imagen para añadir luego el texto.

8. Para terminar pulsa en el botón Redimensionar.


178

9. Desde la barra de menús de la ventana de imagen elige Imagen > Aplanar imagen. Con esta operación se fusionan las capas y la banda inferior toma el color blanco de fondo.

10. Para acceder al cuadro de herramientas de GIMP utiliza la barra de tareas situada en la parte inferior del escritorio de Windows. Basta hacer clic sobre el botón de la barra de tareas con el título Gimp. En el cuadro de herramientas de GIMP selecciona la herramienta Texto y a continuación haz clic sobre la banda blanca inferior.

11. Se muestra una ventana para introducir el texto. Debajo de la barra de herramientas encontrarás un panel donde es posible definir la tipografía del texto: fuente, tamaño, color, estilo, etc.


179

12. En la pequeña ventana del Editor de textos de GIMP escribe, por ejemplo, “EL CISNE

BLANCO” y luego pulsa en el botón Cerrar.

13. Para situar el cuadro de texto más centrado, vete al cuadro de herramientas y selecciona la herramienta Mover capas y selecciones

14. Acerca el puntero del ratón al cuadro de texto y cuando éste adquiera el aspecto de una cabeza de flecha negra con una cruz de doble flecha en su esquina inferior


180

derecha, pulsa sobre el cuadro de texto creado y arrástralo para situarlo más centrado.

15. Para guardar la imagen elige Archivo > Guardar como … En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.

16. Se muestra el cuadro de título Exportar archivo. Pulsa en el botón Exportar.

17. En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en el botón Guardar.

Imagen ::: Añadir textos y líneas a una imagen Diseño de materiales multimedia. Web 2.0

181

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


182

2.5 Añadir textos y líneas a una imagen Una de las operaciones más interesantes en educación es añadir textos explicativos y líneas a una imagen.

1. Extrae a una carpeta de tu disco duro el archivo flor.gif contenido en el ZIP que se adjunta a continuación.


3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo flor.gif .Clic sobre este archivo y pulsa en el botón Abrir.

4. Desde la ventana principal de GIMP (Cuadro de herramientas), elige Archivo > Diálogo > Opciones de herramienta. De esta forma se mostrarán las opciones que se pueden manejar cuando se selecciona una herramienta.

5. En el cuadro de herramientas elige la herramienta Lápiz. Con él vamos a dibujar las líneas horizontales que señalarán partes del dibujo.

6. En el panel Opciones de herramienta pulsa sobre el botón Brochas para elegir el tipo Circle (01).

7. Haz clic sobre la imagen en el lugar donde desees situar el extremo izquierdo de la línea. Por ejemplo en un sépalo de la flor. A continuación pulsa la tecla de


183

Mayúsculas (flecha hacia arriba del teclado) y sin soltarla, arrastra el ratón y haz clic en la posición donde se situará el extremo derecho de la línea.

8. Repite el paso 7 para crear todas las líneas adjuntas que se indican en la siguiente imagen:

9. En el cuadro de herramientas de GIMP selecciona Texto.

10. En el cuadro de Opciones pulsa sobre el botón Tipografía para seleccionar el tipo de fuente. Por ejemplo: Arial. También puedes definir el tamaño del texto. En este caso hemos seleccionado 18 píxeles. Haciendo clic en la celda Color se puede modificar su color.


184

11. Haz clic sobre el escenario donde desees situar el texto. Se mostrará el editor de textos donde es posible teclearlo. Para terminar pulsa en el botón Cerrar.

12. En el cuadro de herramientas selecciona Mover capas y selecciones.

13. Aproxima el puntero del ratón hasta el texto recientemente creado y cuando el puntero del ratón tome el aspecto de una cabeza de flecha negra con una cruz de doble flecha, pulsa y arrastra para situar adecuadamente el texto.

14. Vuelve a seleccionar la herramienta Texto. 15. Repite los pasos anteriores para crear el resto de títulos tal y como aparecen en la

siguiente imagen.


185

16. Cuando se añade un nuevo texto a la imagen, GIMP crea automáticamente una capa por cada título. Para fusionar todas las capas en una, en la ventana de imagen, elige Imagen > Aplanar imagen.

17. Para guardar la imagen elige Archivo > Guardar como … En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.

18. En el cuadro de diálogo Guardar como GIF pulsa el botón Aceptar.

Imagen ::: Copiar y pegar con GIMP Diseño de materiales multimedia. Web 2.0

186

2.6 Copiar y pegar con GIMP


187

2.6 Seleccionar, cortar, copiar y pegar con GIMP 2.6.1 Composición de imágenes Las herramientas para seleccionar, copiar y pegar facilitan el montaje de imágenes. En esta práctica se ejemplifican las posibilidades de las distintas herramientas de selección. Estas se aplican para eliminar ciertas partes de una imagen combinando seleccionar y cortar.

1. Extrae los archivos paisaje.jpg y vaca.gif contenido en el ZIP: paisaje.zip 2. Abre GIMP.

3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Localiza el archivo paisaje.jpg. Clic sobre este archivo y pulsa en el botón Abrir. Repite este paso para abrir el archivo vaca.gif. Observa que cada imagen se sitúa en una ventana propia.

4. En el cuadro de herramientas selecciona la herramienta Seleccionar regiones rectangulares

5. Sobre la imagen de la vaca, pulsa y arrastra para definir un área rectangular que abarque las flores. En la ventana de imagen selecciona Editar > Cortar o bien Editar > Limpiar.


188

6. Selecciona la herramienta Seleccionar regiones elípticas en el cuadro de herramientas

7. Sobre la imagen de la vaca, pulsa y arrastra para definir un área circular que abarque a la mosca situada en la esquina superior izquierda. En la ventana de imagen selecciona Editar > Cortar o bien Editar > Limpiar.

Nota: La selección rectangular y circular se han incluido con carácter demostrativo ya que en este ejemplo no sería necesario usarlas.

8. Elige la herramienta Varita mágica en el cuadro de herramientas. Con ella podrás elegir regiones continuas del dibujo.

9. En la ventana principal de GIMP elige Archivo > Diálogos > Opciones de herramienta. En este panel de opciones de la varita mágica arrastra el deslizador Umbral hasta el valor 50. Esto aumentará el umbral de colores que se seleccionará cuando se utilice esta varita.


189

10. Con la varita seleccionada, haz clic sobre un punto del área azul de cielo en la imagen de la vaca. A continuación selecciona Editar > Limpiar. No olvides realizar esta operación también sobre la zona azul que aparece debajo del personaje.

11. En el cuadro de herramientas elige la herramienta Seleccionar regiones por colores. Con esta herramienta podrás seleccionar la región de la imagen que tenga el mismo color.

12. En la imagen de la vaca haz clic sobre el color verde y elige Editar > Limpiar. Idem sobre el resto de color azul.


190

13. En la ventana de imagen de la vaca elige Selecciona > Todos. Observa que se ha seleccionado la imagen completa.

14. Elige Editar > Copiar. Con esta acción se copia la vaca al portapapeles de Windows. 15. Haz clic sobre la ventana de la imagen paisaje.jpg para seleccionarla. 16. Editar > Pegar en. Pulsa y arrastra sobre la imagen de la vaca para situarla en el

lugar más adecuado del paisaje. A continuación haz clic en cualquier lugar fuera de esta selección para fijar su posición.

17. Para guardar la imagen elige Archivo > Guardar como … En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. Ejemplo: montaje.jpg De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.

18. Se muestra el cuadro de título Exportar archivo. Pulsa en el botón Exportar. 19. En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en

el botón Aceptar. 2.6.2 Recortado de imágenes En este apartado se plantea obtener una nueva imagen a partir de la selección y recortado de un área concreta en una imagen original más grande.

1. Extrae el archivo cadenas.jpg contenido en el ZIP que se adjunta a continuación: cadenas.zip

2. Abre GIMP. 3. Elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir imagen. Localiza el archivo

cadenas.jpg. Clic sobre este archivo y pulsa en el botón Abrir. 4. En el cuadro de herramientas elige la herramienta Seleccionar Regiones

Rectangulares.

5. Sobre la ventana de imagen, pulsa y arrastra sobre la fotografía para definir un área rectangular alargada que contenga el monumento central.


191

6. En el menú de la ventana de imagen elige Imagen > Recortar la imagen.

7. Para guardar la imagen elige Archivo > Guardar como … En el cuadro de diálogo Guardar imagen define un nombre distinto para la nueva imagen. Ejemplo: banner.jpg De esta forma no se sobrescribirá la original. Pulsa en el botón Guardar.

8. Se muestra el cuadro de título Exportar archivo. Pulsa en el botón Exportar. 9. En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en

el botón Aceptar.

Imagen ::: Aplicar efectos especiales a una imagen Diseño de materiales multimedia. Web 2.0

192

2.7 Añadir efectos especiales a una imagen

con GIMP


193

2.7 Aplicar efectos especiales a una imagen 2.7.1 Filtros El término “Filtro” proviene de la fotografía tradicional y aludía a una serie de cristales que se situaban delante del objetivo de la cámara para conseguir efectos especiales. Los filtros que proporciona GIMP permiten aplicar a una imagen original un sinfín de efectos de retoque y modificaciones. En esta práctica se explica cómo aplicar un filtro y algunos ejemplos.

1. Extrae el archivo manzanas.jpg contenido en el ZIP: manzanas.zip 2. Haz doble clic sobre el acceso directo de GIMP situado en el escritorio. 3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir

imagen. Localiza el archivo manzanas.jpg. Clic sobre este archivo y pulsa en el botón Abrir.

4. Para aplicar un tipo de filtro, selecciona la opción de menú Filtro > … Elige por ejemplo Desenfoque [Blur] > Desenfoque de movimiento.

5. A continuación se muestra un cuadro de diálogo donde es posible configurar distintos

parámetros del filtro antes de aplicarlo. El tipo de valores dependerá de la clase de filtro elegido. En la mayoría de los casos si se activa la casilla Vista previa se dispondrá de una pequeña ventana que permitirá contemplar el resultado final antes de aplicarlo.


194

6. Una vez realizados los convenientes ajustes en los distintos parámetros del efecto pulsa en el botón Aceptar para aplicar los cambios. Para deshacer la aplicación de un filtro selecciona Editar > Deshacer … o bien la combinación de teclas: <Ctrl>+<Z>. En ocasiones será necesario pulsar reiteradamente esta combinación para restaurar la imagen original.

7. Siguiente los pasos 4-6 explora las distintas posibilidades de efectos que puedes conseguir con GIMP. En las imágenes siguientes se recogen algunos ejemplos:

Imagen original Desenfoque > Pixelar Ruido > Esparcir

Luces y sombras > Mosaico de cristal

Luces y sombras > Destello de lente Distorsiones > Ondular

Distorsiones > Página doblada Artísticos > Aplicar lienzo Decorador > Diapositiva

Decorador > Esquinas redond. Decorador > Foto antigua Luces y sombras > Sombra base

8. Para guardar la nueva imagen creada, en la barra de menú de esa imagen selecciona

Archivo > Guardar como …


195

9. En el cuadro de diálogo Guardar imagen introduce un nombre de archivo distinto de la imagen original para no sobrescribirla. Por ejemplo: manzanas_lienzo.jpg y para terminar pulsa en el botón Guardar.

10. Se muestra el panel Guardar como JPEG. Ajusta la calidad en un valor 80-100 % y confirma pulsando en el botón Aceptar.

2.8.2 Textos con efectos especiales GIMP proporciona herramientas sencillas para el diseño de un banner de texto. Éste se puede utilizar como encabezado de una página web.

1. Desde la ventana principal de GIMP selecciona Archivo > Nuevo. 2. En el cuadro de diálogo Crear una imagen nueva introduce las dimensiones, por

ejemplo, 468 y 60 en las casillas Anchura y Altura respectivamente.

3. Pulsa en el botón Aceptar. 4. Para visualizar el panel de opciones de una herramienta, en la ventana principal,

selecciona Archivo > Diálogos > Opciones de herramienta. 5. Haz clic sobre la herramienta Texto en el cuadro de herramientas.


196

6. En el panel de Opciones de herramienta elige como tipo de fuente Arial Black y como tamaño 72 puntos.

7. Clic sobre la casilla Color de las opciones de herramienta. En el cuadro de diálogo Color del texto que se despliega selecciona el color negro. Existen varios procedimiento alternativos para ello:

• Teclear el valor hexadecimal 000000 del color negro en la casilla Notación HTML

• Clic en la esquina inferior izquierda de la paleta de colores. • Introduce los valores 0-0-0 en las casillas R-G-B (Red-Green-Blue = Rojo-

Verde-Azul).

8. Una vez elegido el color pulsa en el botón Aceptar.


197

9. Clic sobre el lienzo de la imagen y en el cuadro Editor de textos de El Gimp teclea el texto. Por ejemplo: GIMP. Para terminar pulsa el botón Cerrar.

10. En el cuadro de herramientas de GIMP elige la herramienta Mover capas y selecciones.

11. Sitúa el puntero del ratón sobre el cuadro de texto y cuando el puntero adquiera la apariencia de una cabeza de flecha negra, arrastra y coloca para centrar el texto.

12. Para aplicar un efecto especial al texto selecciona por ejemplo: Filtros > Alfa a logotipo > Bovinación.

13. En el cuadro de diálogo de Opciones admite los parámetros por defecto y pulsa en el botón Aceptar.

14. Al cabo de unos instantes se ha creado un atractivo rótulo.

15. Para deshacer la aplicación de este efecto, en la ventana de la imagen elige Editar > Deshacer.


198

16. Repite los pasos 12-15 para probar otros efectos especiales sobre el texto. A continuación se proponen algunos.

Básico II Bisel degradado Bovinación

Bruñido Calor resplandeciente Contorno 3D

Desmenuzar Neón Resplandor

Starburst Starscape Texturizado

17. Para guardar un banner selecciona Archivo > Guardar como … 18. Introduce como nombre, por ejemplo, banner.gif . En este caso es conveniente

guardarlo en formato GIF. Si al definir la extensión del archivo (.gif) eliges este formato GIMP te mostrará un cuadro de diálogo Exportar archivo. Acepta las opciones por defecto pulsando directamente en el botón Exportar.

19. A continuación se mostrará un cuadro de diálogo Guardar como GIF. Pulsa en el botón Aceptar.


199

Imagen ::: Gifs de fondo transparente Diseño de materiales multimedia. Web 2.0

200

2.8 GIFs de fondo transparente


201

2.8 Gifs de fondo transparente Un GIF de fondo transparente se integra mejor en una página web. Para convertir en transparente el fondo de un GIF sigue los siguientes pasos.

1. Extrae el archivo pizarra.jpg contenido en el ZIP: pizarra.zip 2. Abre GIMP. 3. Una vez dentro de GIMP, elige Archivo > Abrir. Se abre el cuadro de diálogo Abrir

imagen. En la lista de archivos situada en el centro desplázate con la barra de desplazamiento vertical hasta localizar el archivo pizarra.jpg. Clic sobre este archivo y pulsa en el botón Abrir.

4. Para activar la propiedad de fondo transparente es necesario seleccionar la opción: Capa > Transparencia > Añadir canal alfa en la ventana de la imagen.

5. En el cuadro de herramientas de GIMP selecciona la opción de menú: Archivo > Diálogos > Opciones de herramienta.

6. A continuación selecciona la Varita Mágica en el cuadro de herramientas de la ventana principal.

7. En el panel de Opciones de Herramienta arrastra el deslizador para definir un Umbral de selección de 50. De esta forma se incluirán en la selección todos aquellos puntos próximos que tengan un color similar o próximo al color donde se pulse con la varita.


202

8. Con la varita mágica elegida, haz clic sobre el fondo en blanco de la imagen. Observa que se selecciona esta área.

9. A continuación elige Editar > Limpiar. 10. Repite los pasos 8-9 sobre el fondo blanco inferior. 11. Haz clic en Archivo > Guardar como … para guardar la nueva imagen.

12. En el cuadro de diálogo Guardar imagen introduce un nuevo nombre para el archivo. De esta forma no se sobrescribirá el archivo original. Por ejemplo: pizarra_transparente.gif. Es importante añadir la extensión: “.gif”. Recuerda que las imágenes de fondo transparente se guardar en formato GIF.

Nota: Otra posibilidad es guardar la imagen en formato PNG definiendo el nombre de archivo como pizarra_transparente.png. 13. Clic en Guardar. 14. Se muestra el cuadro Guardar como GIF. Clic en el botón Aceptar.

Imagen ::: Tratamiento de imágenes por lotes Diseño de materiales multimedia. Web 2.0

203

2.9 Tratamiento de imágenes por lotes


204

2.9 Tratamiento de imágenes por lotes 2.9.1 Introducción A menudo es necesario optimizar una colección de fotografías extraídas de la cámara digital con intención de ajustar sus dimensiones, resolución, formato, etc. para publicarlas en la web o compartirlas en la red local del centro. Esto se puede realizar con GIMP, imagen a imagen, aplicando los procedimientos descritos con anterioridad. Sin embargo cuando se trata de un número elevado de fotos es necesario realizar un procesamiento por lotes que realice la conversión de forma automática y rápida. GIMP dispone de un lenguaje de scripts donde es posible automatizar estas tareas. Sin embargo el diseño y manejo de scripts no resulta intuitivo ni fácil. En su lugar se propone utilizar el plugin DBP (David's Batch Processor) para GIMP. Este complemento permite ejecutar de forma automática operaciones en una lista de archivos de imagen, como por ejemplo, el redimensionamiento. DBP proporciona un entorno gráfico para crear una lista de imágenes con intención de definir y aplicar operaciones como la corrección del color, redimensionamiento, recorte, suavizado, cambio de nombre o guardar en otros formatos. DBP sólo procesa imágenes en modo color RGB mostrando un error cuando se trata de procesar imágenes en modo color indexado. Por otra parte DBP nunca sobreescribe la imagen original por lo que es necesario definir la tarea de renombrar o mover a otra carpeta cada archivo resultante. 2.9.2 Instalación del plugin DBP de GIMP en Windows El plugin DBP no se incluye en la instalación por defecto de GIMP. Es necesario descargarlo e instalarlo en la carpeta de plugins de GIMP 2.

1. Descarga y descomprime en una carpeta de tu disco duro el zip: dbp-1.1.3.zip. Como resultado obtendrás el archivo: dbp.exe. Otra opción es visitar la web de su fabricante y descargar, si existe, una versión más reciente: http://members.ozemail.com.au/~hodsond/dbp.html

2. Abre GIMP y selecciona Archivo > Preferencias.


205

3. Clic sobre la entrada más inferior Carpetas y pulsa en la entrada Plugins o Complementos. En el panel derecho podrás ver la ruta de la carpeta donde se instalan los plugins o complementos que utiliza GIMP. En el caso de la imagen sería la carpeta: C:\Archivos de programa\GIMP-2.0\lib\gimp\2.0\plug-ins

4. Copia el archivo dbp.exe a esta carpeta de plugins. 5. Reinicia el programa GIMP.

Nota:

En la versión portable de GIMP que se proporciona en este curso no es necesario incluir este plugin porque ya se ha incorporado. No obstante si se desea instalar en una versión portable más actual el procedimiento es similar al descrito en este apartado: se localiza la carpeta de plugins que utiliza el programa, se copia a ella el archivo dpb.exe y se reinicia el programa.

2.9.3 Instalación del plugin DBP de GIMP en Ubuntu

1. Descarga y descomprime en la carpeta personal el zip: dbpSrc-1-1-8.tar. Como resultado obtendrás la carpeta de código fuente: dbp-1.1.8. Otra opción es visitar la web de su fabricante y descargar, si existe, una versión más reciente: http://members.ozemail.com.au/~hodsond/dbp.html

2. Para compilar este código fuente es necesario disponer del compilador GNU de C++.

Desde el escritorio selecciona Sistema > Administración > Gestor de paquetes Synaptic. Pulsa en el botón Buscar, introduce el término g++ y pulsa en Buscar. Si no está activada, marca la casilla izquierda correspondiente al paquete g++ y pulsa en el botón Aplicar. Al cabo de unos segundos ya dispondremos del compilador instalado. Cierra el gestor de paquetes Synaptic.


206

3. A continuación desde el escritorio selecciona Aplicaciones > Accesorios > Terminal. 4. Teclea cd dbp-1.1.8 para situarte en la carpeta que contiene el código fuente

descargado del plugin. 5. Introduce: sudo apt-get install libgimp2.0-dev para instalar desde internet el código

de desarrollo de la aplicación GIMP 2 necesario para la compilación. Transcurridos unos segundos se habrá completado la instalación de estas librerías.

6. Teclea make y si la compilación ha tenido éxito make install para finalizar la instalación.

7. Cierra la ventana del terminal. 2.9.4 Conversión por lotes con GIMP

1. Extrae a la carpeta misfotos el contenido del archivo fotos.zip. Como resultado de esta operación tendrás en esta carpeta varios archivos con imágenes de Asturias. Todas ellas tienen unas dimensiones de 800x533 píxeles. Estos archivos gráficos pueden ser el resultado del volcado de las fotografías realizadas con una cámara digital. En este caso su peso y dimensiones será muy superior al ejemplo que nos ocupa.

2. Abre GIMP y selecciona Exts > Batch Process… (Extensiones > Procesamiento por lotes). Esta entrada se ha creado nueva en el menú de GIMP como consecuencia de la instalación con éxito del plugin DBP.

3. Se muestra el cuadro de diálogo David's Batch Processor (Procesador por Lotes de David).


207

Paso 1: Selección de archivos de entrada

4. En la pestaña Input (Entrada) pulsa en el botón Add Files (Añadir Archivos). 5. En el cuadro de diálogo Add Image Files (Añadir Archivos de Imagen) navega por el

panel inferior izquierda para situarte en la carpeta misfotos. Haz clic sobre la primera imagen, pulsa la tecla Mayus y sin soltarla haz clic sobre la última imagen. Esta acción seleccionará el conjunto de imágenes a añadir. Clic en el botón Abrir.

6. En la pestaña Input de David's Batch Processor se habrán añadido las imágenes. Para eliminar alguna entrada basta con seleccionarla y pulsar en el botón Remove files (Eliminar archivos). Para eliminar la lista completa pulsa en el botón Clear List (Borrar lista).


208

Paso 2: Definir opciones de redimensionamiento.

7. Clic en la pestaña Resize (Redimensionar). Activa la casilla Enable (Permitir) y marca

una de las dos opciones: • Relative (Relativa): en este caso se propone utilizar esta opción. Consiste en

realizar una redimensionamiento proporcional (tanto por uno) a las dimensiones actuales de la imagen. Marca la opción Keep Aspect (Mantener radio de aspecto) para asegurar que la foto conserve la relación de dimensiones ancho y alto y no se deforme. En X Scale e Y Scale arrastra los deslizadores a la izquierda o introduce los valores de 0,50 (tanto por uno).

• Absolute (Absoluta): se utilizar para redimensionar la imagen a la anchura Width y altura Height que se introducen como dato.


209

Paso 3. Definir el nombre de las nuevas imágenes

8. Clic en la pestaña Rename (Renombrar) para definir el nombre que tendrán los nuevos archivos con las imágenes.


210

9. Este procesador, por defecto, guarda las imágenes resultado de la conversión en la misma carpeta que las imágenes originales. Esto se indica con la expresión "same as source" (Mismo que fuente) que aparece sobre el botón Select Dir. Sin embargo si no definimos un nombre distinto para las imágenes destino nunca sobreescribirá las originales. Simplemente no las creará.

10. Si deseas elegir otra carpeta distinta como destino de las nuevas imágenes entonces pulsa el botón Select Dir (Elegir carpeta) y navega para seleccionarla. Si haces esto no será necesario modificar el nombre de las nuevas imágenes porque lo copiará de las respectivas originales.

11. Si vas a crear las imágenes en la misma carpeta, como es el caso, vamos a añadir un prefijo al nombre de las nuevas imágenes. También se podría añadir un sufijo. Para ello introduce, por ejemplo, "tmb_" en el cuadro de texto Add Prefix: (Añadir Prefijo). Esto añadirá este prefijo al nombre de la imagen original para asignárselo a la imagen final.

Paso 4. Definir el formato de las nuevas imágenes.

12. Clic en la pestaña Output (Salida) 13. Despliega la lista Format (Formato) y elige, en este caso, JPG. 14. Arrastra el deslizador Quality (Calidad) para definir la calidad. Si las fotografías

provienen de una cámara de fotos admitirá una calidad de 80% sin muchos problemas.

Paso 5. Realizar el procesamiento por lotes

15. Si deseas ver el aspecto que tendrá la conversión definida sobre una imagen pulsa en

el botón Test (Probar). 16. Para efectuar el procesamiento pulsa en el botón Start (Comenzar). 17. Transcurridos unos segundos observaremos que la carpeta destino se han creado

nuevas imágenes con las propiedades definidas.

Imagen ::: Galería de fotos Diseño de materiales multimedia. Web 2.0

211

2.10 Galería de fotos


212

Una de las tareas más frecuentes en un centro educativo es la publicación en formato HTML de las fotografías tomadas con la cámara digital en un evento o fiesta escolar

2.10.1 Porta Album Creator Porta Album Creator es una aplicación gratuita y portable que permite de una forma rápida y sencilla crear una galería de imágenes para publicar en internet. Paso 1. Instalación de Porta Album Creator Windows

1. Descarga y descomprime el archivo: Porta_099012b.zip en una carpeta de tu disco duro o de tu pendrive. Se trata de una versión portable. El programa se inicia al hacer doble clic sobre el archivo ejecutable: Porta.exe

Otra opción es visitar la página oficial de este producto para descargar e instalar la versión más reciente: http://www.stegmann.dk/mikkel/porta/

Ubuntu: En Ubuntu se puede utilizar Wine como un programa emulador para ejecutar dentro de este sistema ciertas aplicaciones propias de Windows. En este caso se propone emplearlo para ejecutar Porta Album Creator. Para instalar Wine:

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir y quitar. 2. En el panel Añadir y quitar aplicaciones introduce wine en la casilla Buscar. En el

catálogo aplicaciones marca la opción Wine Windows Emulator y a continuación pulsa en el botón Aplicar cambios. Sigue los pasos sugeridos para terminar la instalación.

Para ejecutar Porta Album Creator:

3. Descarga y descomprime el contenido del archivo: Porta_099012b.zip en una carpeta de tu disco duro o de tu pendrive.

4. Clic derecho sobre el icono de Porta.exe y a continuación selecciona la opción Abrir con Wine. Se iniciará el emulador Wine y éste cargará el ejecutable indicado.

Paso 2. Creación de la galería de imágenes

1. Descarga y descomprime en tu disco duro el archivo gallery.zip 2. Abre el programa Porta. 3. Se muestra el cuadro de diálogo Buscar carpeta. En este cuadro abre Mi PC > Disco

duro local C para seleccionar la carpeta gallery. Clic en el botón Aceptar.


213

4. En el cuadro de texto Title (Título) introduce el título de la galería. Por ejemplo: Paisajes asturianos. En Footer (Pie) teclea el texto que aparecerá en el pie de la página. Ejemplo: "2008 – CP Colegio".

5. El programa Porta creará por defecto la galería en la carpeta album como una subcarpeta de la que contiene las imágenes originales. Si deseas modificar el destino de esta carpeta pulsa en el enlace change (cambiar). No obstante conviene conservar esta opción por defecto.

6. Puedes definir el texto descriptivo de cada imagen pulsando en el botón Edit Album. Esto mostrará un cuadro de diálogo donde se podrá elegir cada fotografía y escribir para cada una un texto en Major Caption que se mostrará al lado de la imagen y otro texto en Minor Caption que se mostrará como tooltip al situar el puntero del ratón sobre la imagen. Este paso es opcional. Clic en el botón Close (Cerrar).


214

7. De regreso al panel principal de Porta pulsa en el botón Options (Opciones).

8. En el panel Options puedes configurar distintos parámetros de la galería final. Los más importantes son:

• Language (Idioma). Selecciona el idioma Spanish (Español). • Use SimpleViewer as primary album viever. Usar SimpleViewer como album

principal. Es importante marcar esta opción para que funcione adecuadamente. Si pulsas en el botón Options podrás configurar distintas opciones de color.

9. Para terminar pulsa en el botón Ok.


215

10. Para iniciar la creación de la galería pulsa en el botón Start (Inicio) en el panel principal de Porta.

11. Transcurridos unos segundos se habrá creado la galería. Desde este panel pulsa en el botón Show Album (Mostrar Album).


216

12. Para publicar la galería de imágenes es necesario subir vía FTP a una carpeta del servidor todos los archivos contenidos en la carpeta album. El acceso a la galería se realizará por el archivo index.html y será necesario disponer del plugin de Flash para su correcta visualización.


217

2.10.2 Autoviewer

1. Descarga y descomprime a la carpeta autoviewer el contenido del archivo autoviewer.zip. Esta solución es ofrecida de forma gratuita en la dirección: http://www.airtightinteractive.com/projects/autoviewer/

2. Utiliza el explorador de archivos para analizar la estructura de la carpeta autoviewer.

3. Dentro de la subcarpeta images encontrarás las imágenes originales del ejercicio

anterior. 4. Para configurar la galería de forma manual abre el archivo gallerydata.xml con el

Bloc de Notas de Windows o bien con el editor gedit de Ubuntu.

5. En este archivo XML puedes modificar el título de la galería si cambias el atributo title de que consta la etiqueta gallery.

6. Observa que por cada archivo de imagen que tenemos en la subcarpeta images debe existir una etiqueta xml: <image>… </image>. Dentro de esta etiqueta se definen los siguientes parámetros: • filename. Es el nombre del archivo que contiene la imagen. • caption. Es el texto descriptivo que acompañará a la imagen en la galería. • width y height, son las dimensiones de la imagen.

7. Si deseas añadir más imágenes deberás incorporar esta etiqueta <image> …</image>

al final del documento definiendo sus parámetros. 8. Para guardar los cambios selecciona Archivo > Guardar como …. Conserva el nombre,

ubicación y tipo de archivo pero cerciórate de que la codificación del documento es UTF-8. Clic en el botón Guardar.

9. Para comprobar el funcionamiento de la galería de fotos haz doble clic sobre el archivo index.html contenido dentro de la carpeta autoviewer.

10. Se mostrará la galería dentro del navegador web por defecto.


218

2.10.3 Galería de imágenes con Postcard Viewer 1. Descarga y descomprime a la carpeta postcardviewer el contenido del archivo

postcardviewer.zip. Esta solución es ofrecida de forma gratuita en la dirección: http://www.airtightinteractive.com/projects/postcardviewer/

2. Utiliza el explorador de archivos para analizar la estructura de la carpeta postcardviewer.

3. Dentro de la subcarpeta images encontrarás las imágenes originales del ejercicio

anterior. 4. Para configurar la galería de forma manual haz clic derecho sobre el archivo

imagedata.xml y elige Abrir con … > Bloc de Notas de Windows o bien con el editor gedit de Ubuntu.

5. Observa que por cada archivo de imagen que tenemos en la subcarpeta images debe existir una etiqueta xml: <image><name>… </name></image> en cuyo interior se coloca el nombre de archivo.

6. Si deseas añadir más imágenes deberás incorporar esta etiqueta <image> …</image> al final del documento definiendo el nombre del archivo.

7. Para guardar los cambios selecciona Archivo > Guardar como …. Conserva el nombre, ubicación y tipo de archivo pero cerciórate de que la codificación del documento es UTF-8. Clic en el botón Guardar.

8. Para comprobar el funcionamiento de la galería de fotos haz doble clic sobre el archivo index.html contenido dentro de la carpeta postcardviewer.


219

9. Se mostrará la galería dentro del navegador web por defecto.

Imagen ::: Captura de pantalla con GIMP Diseño de materiales multimedia. Web 2.0

220

2.11 Capturas de pantalla con GIMP

Imagen ::: Captura de pantalla con GIMP Diseño de materiales multimedia. Web 2.0

221

2.11 Captura de pantalla con GIMP Se pueden crear imágenes nuevas a partir de capturas de pantalla del ordenador. Estas imágenes se suelen utilizar para ilustrar manuales de uso de programas, tal y como se ha realizado en la elaboración de este tutorial.

1. Sitúate en el programa del cual deseas realizar una captura de pantalla. Por ejemplo el navegador web.

2. Abre GIMP. 3. Desde la ventana principal de GIMP elige Archivo > Adquirir > Captura de Pantalla. 4. En el cuadro de diálogo WinSnap puedes decidir si …

• Capturar una sola ventana. Permitirá capturar una ventana. • Capturar la pantalla entera. Al cabo de unos instantes capturará la pantalla

completa. • Después de … Segundos de espera. La captura se producirá al cabo de los

segundos indicados. 5. Selecciona la opción Capturar una sola ventana y a continuación pulsa en el botón

Capturar o Snap.

6. Se muestra el cuadro de diálogo Select Window. Haz clic y arrastra el símbolo de cruz

“+” que aparece en esta ventana hasta soltarlo encima de la ventana elegida.

7. Al cabo de unos instantes se mostrará una nueva ventana de imagen en GIMP con la captura realizada.

8. Elige Archivo > Guardar como para guardar la imagen.

Imagen ::: Mapas de imágenes Diseño de materiales multimedia. Web 2.0

222

2.12 Mapas de imágenes


223

2.12 Mapas de imágenes 2.12.1 ¿Qué es un mapa de imagen? Un mapa de imagen es una imagen que contiene una o más áreas invisibles llamadas zonas activas. Cada una está asociada a un hipervínculo. Normalmente la imagen ofrece al usuario pistas visuales sobre la información que está disponible al hacer clic en cada parte de la imagen. Se propone utilizar GIMP para crear un mapa de imágenes que luego copiaremos y pegaremos en una página HTML editada con Kompozer.

2.12.2 Crear un mapa de imagen con Image Map de GIMP

1. Descarga y descomprime el archivo cnice.zip dentro de la carpeta miweb\images. Como resultado de esta operación encontrarás en esta carpeta el archivo de imagen cnice.jpg y los archivos de texto cnice_texto.txt y cnice_urls.txt

2. Abre GIMP. 3. Selecciona Archivo > Abrir para localizar y abrir el archivo cnice.jpg. Esta imagen se

mostrará en ventana independiente. Desde ella selecciona Filtros > Web > Mapa de imagen.

4. Esta acción iniciará la extensión Imagen Map de GIMP. Sobre esta imagen vamos a crear un mapa de imágenes que nos va a permitir definir distintas áreas sensibles que enlazan a distintas páginas del sitio web del CNICE.

5. Minimiza Image Map y utiliza el explorador de archivos para hacer doble clic sobre el archivo de texto miweb\images\cnice_urls.txt. Se abrirá el editor de textos


224

mostrando el contenido de este archivo. Son las direcciones que tendremos que situar en el mapa de imagen:

• Ministerio de Educación y Ciencia: http://www.mec.es/ • CNICE: http://www.cnice.mec.es/ • Niños/as: http://www.cnice.mec.es/ninos/ • Jovenes: http://www.cnice.mec.es/jovenes/ • Profesorado: http://www.cnice.mec.es/profesores/ • Familias: http://www.cnice.mec.es/padres/ • Adultos: http://www.cnice.mec.es/adultos/

6. Selecciona la primera dirección (http://www.mec.es/) y luego elige Edición >

Copiar. 7. Regresa a Image Map. En la barra de herramientas de la columna izquierda activa la

opción Definir área rectángular (Área rectangular).

8. Pulsa, mantén y arrastra para definir un área rectangular sobre el rectángulo que forma el logo del Ministerio de Educación y Ciencia.

9. Si necesitas ajustar con más detalle este rectángulo selecciona la herramienta Flecha en la barra de herramientas (está situada sobre la herramienta Rectángulo). Una vez activada esta herramienta puedes … • Aumentar/disminuir el tamaño del rectángulo con sólo pulsar y

arrastrar por el selector (cuadrado del borde) que presenta esta área en la esquina inferior derecha.

• Mover el área mediante la opción de pulsar y arrastrar. También se puede mover más finamente utilizando las teclas de flechas.

• Si deseas eliminar el área, selecciona esta área y luego pulsa la tecla Supr.

10. Asegúrate de que esta área sigue seleccionada haciendo clic sobre ella.

Para acceder a la edición de las propiedades de esta área haz doble clic sobre ella o bien una vez seleccionada pulsa en el botón Editar área seleccionada que aparece en la barra de herramientas lateral izquierda.


225

11. En el cuadro Configuración de Área nº 1 … (Inspector de Área) en la pestaña Enlace se pueden definir todos los parámetros de esa zona. En este caso vamos a definir los más importantes: • Texto Alternativo. Es el texto que se muestra cuando se sitúa el puntero sobre

esta área. Ejemplo: Ministerio de Educación y Ciencia. • URL. Es el enlace a la página que se mostrará al pulsar sobre esta área. Para

definirlo haz clic derecho sobre esta casilla y elige Pegar en el menú que se muestra. De esta forma se copiará del portapapeles la URL que anteriormente hemos copiado desde el editor de textos. Como se trata de una dirección absoluta NO marcamos la opción Enlace relativo.

12. Clic en Aceptar 13. Repite los pasos anteriores para crear otra área rectangular sobre el logo del CNICE.


226

14. Minimiza Image Map y regresa al documento cnice_urls.txt que se encuentra abierto

con el editor de textos. Selecciona y copia el enlace a la sección de Niños/as del CNICE: http://www.cnice.mec.es/ninos/

15. Regresa a Image Map. 16. En la barra de herramientas selecciona la opción Definir área circular. 17. Pulsa, mantén y arrastra para definir un área circular sobre el círculo de la imagen

correspondiente a la sección Niños/as.

18. Si necesitas ajustar con más detalle este rectángulo selecciona la herramienta Flecha

en la barra de herramientas. Una vez activada esta herramienta puedes … • Aumentar/disminuir el tamaño del círculo con sólo pulsar y arrastrar por uno de

los selectores que presenta. • Mover el área mediante la opción de pulsar y arrastrar. También se puede mover

más finamente utilizando las teclas de flechas. • Si deseas eliminar el área, selecciónala previamente y pulsa la tecla Supr.

19. Haz doble clic sobre esta nueva área circular. En el cuadro de diálogo Configuración de Área nº3 introduce los parámetros de esta área:

• Texto alternativo: Niños/as • URL: pega la dirección http://www.cnice.mec.es/ninos/ que has copiado con

anterioridad.

20. Repite los pasos anteriores para definir el resto de áreas circulares correspondientes a las secciones del CNICE:

• Jovenes: http://www.cnice.mec.es/jovenes/ • Profesorado: http://www.cnice.mec.es/profesores/ • Familias: http://www.cnice.mec.es/padres/ • Adultos: http://www.cnice.mec.es/adultos/

21. Si deseas guardar el proyecto de mapa de imágenes para seguir trabajando sobre él

más adelante elige Archivo > Guardar como


227

22. En el cuadro Guardar mapa de imagen introduce el nombre del proyecto. Por ejemplo: mimapa.txt. Clic en el botón Guardar. Por defecto se guarda con la extensión *.map. Para almacenarlo como TXT añade la extensión al final del nombre del archivo: mimapa.txt

23. Si cierras Image Map y luego vuelves a abrir este programa, para recuperar el proyecto sólo tienes que seleccionar Archivo > Abrir.

2.12.3 Integración HTML de un mapa de imagen

1. Utiliza el explorador de archivos para abrir mediante doble clic el archivo miweb\images\curso_texto.txt

2. Elige Edición > Seleccionar todo y luego Editar > Copiar. Cierra el editor de textos. 3. Abre Kompozer y elige Editar > Pegar para situar el texto en la nueva página. 4. Selecciona la primera línea GIMP y asígnale el formato Título 1. Selecciona los

objetivos y asígnale el formato de Viñetas.

5. Para guardar la página elige Archivo > Guardar como … 6. En el cuadro de diálogo Título de página introduce como título CNICE y luego pulsa

en Aceptar.

7. En el cuadro de diálogo Guardar página como selecciona la carpeta miweb como carpeta destino en la lista Guardar en, como nombre de archivo cnice.html y luego pulsa en el botón Guardar.


228

8. Una vez que hemos definido la ubicación de esta página vamos a pegar el código HTML correspondiente al mapa de imágenes creado con Image Map. Para ello minimiza Kompozer y abre el archivo anterior mimapa.txt con el editor de textos por defecto del sistema.

9. Desde el editor del sistema selecciona el código HTML y copialo mediante Edición > Copiar.

10. Regresa a Kompozer y haz clic en la pestaña inferior Código fuente.

11. Sitúa el cursor inmediatamente debajo de la etiqueta <h1>CNICE</h1> y elige Editar > Pegar. Observa que se pega la etiqueta <img> y <map>.

12. Sólo es necesaria una pequeña corrección para indicarle a Kompozer dónde se ubica la imagen. En el atributo src de la etiqueta img (Imagen) sustituye la ruta existente por: src=”images/cnice.jpg”


229

13. Clic de nuevo en la pestaña Normal de Kompozer y pulsa en el botón Guardar. 14. Para visualizar el resultado final haz clic en el botón Navegar.

Nota: No olvides eliminar los archivos de texto auxiliares que hemos utilizado para realizar esta práctica y que tenemos en la carpeta miweb\images

Imagen ::: Integración HTML de presentaciones Diseño de materiales multimedia. Web 2.0

230

2.13 Integración HTML de presentaciones


231

2.13 Integración HTML de presentaciones A menudo surge la necesidad de publicar en una página web una presentación de diapositivas que hemos elaborado con Powerpoint u OpenOffice Impress. Es posible situar la descarga del archivo correspondiente para que el visitante puede visualizarlo en su equipo local pero para ello es necesario que disponga del correspondiente visor. En este capítulo se propone una solución más accesible, elegante y adecuada utilizando OpenOffice para exportar la presentación a formato Flash. El objeto resultante se podrá integrar en una página HTML para su publicación en la web. 2.13.1 Exportar a Flash con OpenOffice Impress

1. Descarga y descomprime el archivo pplayer.zip en la carpeta mipresentacion de tu disco duro local. Como resultado de la extracción podrás encontrar, entre otros archivos, una presentación educativa realizada con Powerpoint: TIC_project.ppt. Este procedimiento se puede aplicar también a presentaciones de OpenOffice.

2. Abre OpenOffice Impress. Si no tienes instalado este programa en tu equipo puedes descargar y copiar a tu memoria USB una versión portable del mismo.

Nota: Si todavía no dispones de OpenOffice en Windows puedes descargar e instalar una versión portable desde aquí: OpenOffice2.exe. Otra posibilidad es visitar su web oficial: http://es.openoffice.org/ . En Ubuntu puedes instalarlo desde Aplicaciones > Agregar o quitar programas.

3. Selecciona Archivo > Abrir y localiza el documento TIC_project.ppt . Selecciónalo y

pulsa en el botón Abrir. Como podrás comprobar OpenOffice Impress es una aplicación gratuita que permite abrir y ejecutar presentaciones creadas en Powerpoint.

4. A continuación elige Archivo > Exportar


232

5. En el cuadro de diálogo Exportar … • En la lista desplegable Guardar en: selecciona como carpeta destino

mipresentacion. • Como Nombre del archivo SWF que se creará introduce data. Será el nombre

de la película que asignaremos por defecto. Es importante no modificar este nombre.

• En la lista desplegable Formato de elige el formato Macromedia Flash (SWF) (.swf)

6. Clic en el botón Guardar. Al cabo de unos segundos se habrá creado en la carpeta

mipresentacion el archivo data.swf 2.13.2 Integración HTML de una presentación Flash

1. Utiliza el explorador de archivos para abrir la carpeta mipresentacion. En ella podrás encontrar los distintos archivos que han resultado de descomprimir el archivo pplayer.zip en el apartado anterior.

2. Los archivos que encontrarás en esta carpeta son:

• TIC_project.ppt . Es la presentación original en Powerpoint. Una vez exportada a Flash ya no se utiliza por lo que conviene moverla a otra carpeta guardándola como copia de seguridad editable. Si fuera necesario realizar una modificación en alguna diapositiva deberías utilizar Powerpoint u OpenOffice sobre este archivo para luego volver a exportarla como SWF-Flash y disponer así de los cambios.

• data.swf. Es la presentación en formato Flash y su nombre de archivo es obligatorio para que la aplicación funcione correctamente. Si deseas diseñar otra presentación deberás ubicarla en otra carpeta distinta de mipresentacion copiando la estructura de archivos y carpetas que aparecen en la imagen superior. En este caso sólo habría que sustituir el archivo data.swf por el resultado de la exportación de la nueva presentación.

• pplayer.swf. Es una aplicación flash cuya función es cargar la presentación data.swf y ofrecer el interfaz de navegación entre sus diapositivas.

• index.html. Es la página web que permite la visualización de la presentación a través del navegador. Para acceder desde otra página a esta presentación deberás crear un enlace a index.html.

• Scripts. Es la carpeta que contiene el script necesario para resolver el problema del “clic previo” en una aplicación flash.


233

3. Doble clic sobre index.html para que se muestre la presentación en el navegador por defecto del equipo.

4. Abre Kompozer y selecciona Archivo > Abrir para localizar y abrir el archivo mipresentacion\index.html

5. Selecciona Formato > Título y propiedades de página para modificar el título de esta página HTML. Otra posibilidad es añadir texto a la página.

6. Clic en el botón Guardar. Nota: Puedes crear tu propia presentación en formato HTML+Flash con sólo exportar tu presentación Powerpoint o OpenOffice al formato SWF (data.swf) mediante OpenOffice Impress y sustituir el archivo resultante data.swf en la carpeta mipresentacion.

Imagen ::: Mapas conceptuales Diseño de materiales multimedia. Web 2.0

234

2.14 Mapas conceptuales


235

2.14 Mapas conceptuales El mapa conceptual es una técnica muy utilizada en educación para la representación gráfica del conocimiento. Un mapa conceptual es una red de conceptos. En la red, los nodos representan los conceptos, y los enlaces las relaciones entre los conceptos en forma de flechas etiquetadas. En este capítulo se propone el uso de Freemind como un programa gratuito y multiplataforma para crear y publicar mapas conceptuales. El objeto resultante se podrá integrar en una página HTML para su publicación en la web. 2.14.1 Instalación de Freemind en Windows

1. Descarga y ejecuta el instalador Freemind.exe en tu equipo. Este instalador simplemente descomprime su contenido a una carpeta de tu disco duro o pendrive. Se trata de un versión portable y por tanto no necesita instalación.

2. Para ejecutar el programa sitúate dentro de la carpeta creada por el instalador y haz doble clic sobre el programa Freemind.exe.

Otra posibilidad es visitar la página oficial de Freemind para consultar si existe alguna versión más reciente: http://freemind.sourceforge.net/wiki/index.php/Main_Page Para que funcione FreeMind es necesario instalar previamente el intérprete de los programas de Java conocido normalmente Java Runtime Environment (JRE): jre-6u5-windows-i586-p-s.exe 2.14.2 Instalación de Freemind en Ubuntu El procedimiento para instalar Freemind en Ubuntu 7.10 o anteriores es el siguiente:

1. Abre un terminal de consola mediante: Aplicaciones > Accesorios > Terminal. 2. Para añadir el repositorio de descarga de Freemind teclea la siguiente orden:

gksudo gedit /etc/apt/sources.list

3. Al final de este archivo añade las siguientes líneas: # freemind source deb http://eric.lavar.de/comp/linux/debian/ experimental/ deb-src http://eric.lavar.de/comp/linux/debian/ experimental/

Nota: Es importante dejar un espacio entre …/debian/ y experimental/ 4. Guarda este archivo y regresa a la ventana de terminal. 5. Actualiza el listado de repositorios:

sudo apt-get update

6. Instala Freemind:

sudo apt-get install freemind

7. Una vez instalado se puede acceder al programa mediante: Aplicaciones > Oficina > FreeMind.

2.14.3 Crear un mapa conceptual Vamos a utilizar este programa para crear un sencillo mapa conceptual. El diseño de mapas más complejos excede el propósito de este curso.


236

1. Abre el programa Freemind. 2. Selecciona Archivo > Nuevo 3. En el nodo principal escribe: Web 2.0 y en la barra de herramientas lateral izquierda

pulsa en el icono de la casita. 4. Clic derecho sobre el nodo principal y selecciona Nuevo Nodo Hijo y escribe

Intercambiar. Pulsa en el icono de un círculo con un “1”. 5. Sitúa el puntero en el extremo izquierdo del nodo hijo y arrástralo para situarlo un

poco más alejado del nodo principal. 6. Clic derecho sobre el nodo hijo y selecciona Formato > Burbuja. 7. Repite los pasos anteriores para completar el mapa de la imagen añadiendo los

nodos: 2 Comunicarse, 3 Compartir y 4 Colaborar. 8. También se pueden añadir un enlace a cada nodo mediante clic derecho e Insertar. 9. Una vez terminado selecciona Archivo > Guardar como … 10. En el cuadro de diálogo Guardar como… selecciona la carpeta destino e introduce el

nombre del mapa. Se guarda con la extensión *.mm. Clic en el botón Guardar. Integración HTML de un mapa conceptual

1. Inicia el programa Freemind 2. Selecciona Archivo > Abrir para seleccionar el archivo *.mm que contiene el mapa

conceptual. 3. Elige Archivo > Exportar > As Flash 4. En el cuadro de diálogo Guardar introduce el nombre del archivo HTML. Por ejemplo:

web20.html. Clic en el botón Guardar. 5. Como resultado de la exportación se habrá creado el archivo web20.html y una

carpeta de nombre web20.html_files.

6. Dentro de la carpeta web20.html_files se encuentran los archivos necesarios para visualizar el mapa conceptual de forma interactiva a través de un visor de tecnología Flash : web20.mm, flashobject.js y visorfreemind.swf


237

7. Para observar el resultado haz doble clic sobre el archivo web20.html. En la publicación de este mapa será necesario subir al servidor el archivo HTML y la carpeta adjunta.

3.Audio

Audio ::: Introducción Diseño de materiales multimedia. Web 2.0

238

3.1 Introducción


239

3.1 Introducción 3.1.1 Conceptos básicos del sonido digital Frecuencia. Es el número de vibraciones por segundo que da origen al sonido analógico. El espectro de un sonido se caracteriza por su rango de frecuencias. Ésta se mide en Hertzios (Hz). El oído humano capta sólo aquellos sonidos comprendidos en el rango de frecuencias 20 Hz y 20.000 Hz. Tasa de muestreo (sample rate). Un audio digital es una secuencia de ceros y unos que se obtiene del muestreo de la señal analógica. La tasa de muestreo o sample rate define cada cuánto tiempo se tomará el valor de la señal analógica para generar el audio digital. Esta tasa se mide en Hertzios (Hz). Por ejemplo: 44100 Hz. nos indica que en un segundo se tomaron 44100 muestras de la señal analógica de audio para crear el audio digital correspondiente. Un audio tendrá más calidad cuanto mayor sea su tasa de muestreo. Algunas frecuencias estándares son 44100 Hz., 22050 Hz., y 11025 Hz. Resolución (bit resolution) Es el número de bits utilizados para almacenar cada muestra de la señal analógica. Una resolución de 8-bits proporciona 256 (28) niveles de amplitud, mientras que una resolución de 16-bits alcanza 65536 (216). Un audio digital tendrá más calidad cuanto mayor sea su resolución. Ejemplo: El audio de calidad CD suele ser un sonido de 44.100 Hz – 16 bits – estereo. Velocidad de transmisión (bitrate) El bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de ese audio. Por ejemplo, 3 minutos de audio MP3 a 128kBit/sg, ocupa 2,81 Mb de espacio físico (3min x 60 seg/min x 128 kBit/seg = 23040 kBits -> 23040 kBits x 1024 bits/Kbit : 8 bits/bytes : 1024 bytes/Kbytes : 1024 Kbytes/Mbytes = 2,81 MBytes ó Mb). Por ejemplo en los audios en formato MP3 se suele trabajar con bitrates de 128 kbps (kilobits por segundo). El audio tendrá más calidad cuanto mayor sea su bitrate y el archivo que lo contiene tendrá mayor peso. Esta magnitud se utiliza sobre todo en el formato MP3 de audio más destinado a la descarga por Internet. CBR/VBR Constant/Variable Bitrate. CBR indica que el audio ha sido codificado manteniendo el bitrate constante a lo largo del clip de audio mientras que VBR varía entre un rango máximo y mínimo en función de la tasa de transferencia. Códec. Acrónimo de "codificación/decodificación". Un códec es un algoritmo especial que reduce el número de bytes que ocupa un archivo de audio. Los archivos codificados con un codec específico requieren el mismo códec para ser decodificados y reproducidos. El códec más utilizado en audio es el MP3. Decibelio. Unidad de medida del volumen o intensidad de un sonido. El silencio o ausencia de sonido se cuantifica como 0 dB y el umbral del dolor para el oído humano se sitúa en torno a los 130-140 dB.


240

3.1.2 Formatos de archivos de audio Las audios digitales se pueden guardar en distintos formatos. Cada uno se corresponde con una extensión específica del archivo que lo contiene. Existen muchos tipos de formatos de audio y no todos se pueden escuchar utilizando un mismo reproductor: Windows Media Player, QuickTime, WinAmp, Real Player, etc. Aquí trataremos los formatos más utilizados y universales: WAV, MP3 y OGG. Formato WAV

• El formato WAV (WaveForm Audio File) es un archivo que desarrolló originalmente Microsoft para guardar audio. Los archivos tienen extensión *.wav

• Es ideal para guardar audios originales a partir de los cuales se puede comprimir y guardar en distintos tamaños de muestreo para publicar en la web.

• Es un formato de excelente calidad de audio. • Sin embargo produce archivos de un peso enorme. Una canción extraída de un CD (16

bytes, 44100 Hz y estéreo) puede ocupar entre 20 y 30 Mb. • Compresión: Los archivos WAV se pueden guardar con distintos tipos de compresión.

Las más utilizadas son la compresión PCM y la compresión ADPCM. No obstante incluso definiendo un sistema de compresión, con un audio de cierta duración se genera un archivo excesivamente pesado.

• El formato WAV se suele utilizar para fragmentos muy cortos (no superiores a 3-4 segundos), normalmente en calidad mono y con una compresión Microsoft ADPCM 4 bits.

Formato MP3

• El formato MP3 (MPEG 1 Layer 3) fue creado por el Instituto Fraunhofer y por su extraordinario grado de compresión y alta calidad está prácticamente monopolizando el mundo del audio digital.

• Es ideal para publicar audios en la web. Se puede escuchar desde la mayoría de reproductores.

• La transformación de WAV a MP3 o la publicación directa de una grabación en formato MP3 es un proceso fácil y al alcance de los principales editores de audio.

• Tiene un enorme nivel de compresión respecto al WAV. En igualdad del resto de condiciones reduciría el tamaño del archivo de un fragmento musical con un factor entre 1/10 y 1/12.

• Presentan una mínima pérdida de calidad. Formato OGG

• El formato OGG ha sido desarrollado por la Fundación Xiph.org. • Es el formato más reciente y surgió como alternativa libre y de código abierto (a

diferencia del formato MP3). • Muestra un grado de compresión similar al MP3 pero según los expertos en música la

calidad de reproducción es ligeramente superior. • No todos los reproductores multimedia son capaces de leer por defecto este formato.

En algunos casos es necesario instalar los códecs o filtros oportunos. • El formato OGG puede contener audio y vídeo.

Mención especial merece el formato MIDI. No es un formato de audio propiamente dicho por lo que se comentan aparte sus características.


241

Formato MIDI

• El formato MIDI (Musical Instrument Digital Interface = Interface Digital para Instrumentos Digitales) en realidad no resulta de un proceso de digitalización de un sonido analógico. Un archivo de extensión *.mid almacena secuencias de dispositivos MIDI (sintetizadores) donde se recoge qué instrumento interviene, en qué forma lo hace y cuándo.

• Este formato es interpretado por los principales reproductores del mercado: Windows Media Player, QuickTime, etc.

• Los archivos MIDI se pueden editar y manipular mediante programas especiales y distintos de los empleados para editar formatos WAV, MP3, etc. El manejo de estos programas suele conllevar ciertos conocimientos musicales.

• Los archivos MIDI permiten audios de cierta duración con un reducido peso. Esto es debido a que no guardan el sonido sino la información o partitura necesaria para que el ordenador la componga y reproduzca a través de la tarjeta de sonido.

• Se suelen utilizar en sonidos de fondo de páginas HTML o para escuchar composiciones musicales de carácter instrumental.

• El formato MIDI no permite la riqueza de matices sonoros que otros formatos ni la grabación a partir de eventos sonoros analógicos.

3.1.3 Optimización de archivos de audio Para optimizar el peso del archivo de audio será necesario utilizar un editor para reducir alguno o algunos de los siguientes parámetros:

1) Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc. 2) Resolución. Establecer resoluciones más pequeñas: 32-bits, 16-bits, 8-bits, 4-bits, etc. 3) Duración. En ocasiones se puede utilizar un fragmento más corto que reproducido en

bucle cubre el tiempo suficiente de acompañamiento musical. A éstos se les llama loops.

4) Calidad estéreo/mono. La reducción a calidad “mono” reduce considerablemente el peso del archivo. Por otra lado la calidad de reproducción “mono” para la mayoría de audios y de público es apenas perceptible.

5) Formato. Es preferible utilizar el formato MP3 en lugar del WAV por su potente factor de compresión y su aceptable calidad de audio.

6) Factor de compresión. El formato WAV admite distintos factores de compresión: PCM y ADPCM.

En los siguientes capítulos de este documento se describirán los procedimientos necesarios para realizar estas tareas sobre un audio original utilizando el editor Audacity.

Audio ::: Primeros pasos con Audacity Diseño de materiales multimedia. Web 2.0

242

3.2 Primeros pasos con Audacity


243

3.2 Primeros pasos con Audacity 3.2.1 ¿Qué es Audacity? Es un programa libre y de código abierto para grabar y editar sonidos. Existe versiones para Windows, Linux, Mac, etc. (http://audacity.sourceforge.net/) 3.2.2 Instalación del programa en Windows Para instalar Audacity sobre Windows puedes descargar y ejecutar el archivo instalador Audacity_1.3.4.exe. En el sitio web oficial del proyecto Audacity podrás encontrar la versión más reciente o que se adapta a tu sistema: http://audacity.sourceforge.net/ Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente archivo a una carpeta de tu disco duro o pendrive: Audacity_1.3.4.exe 3.2.3 Instalación del programa en Ubuntu

1. Selecciona Aplicaciones > Añadir o quitar aplicaciones 2. En el cuadro de diálogo Añadir o quitar aplicaciones introduce audacity en la casilla

Buscar y pulsa la tecla enter 3. Marca la casilla de la entrada Audacity Sound Editor y pulsa en el botón Aplicar

cambios. 4. Una vez finalizada la instalación, selecciona Aplicaciones > Sonido y vídeo >

Audacity Sound Editor para arrastrar este icono hasta el escritorio. 3.2.4 El entorno del programa

1. Descarga y descomprime el archivo amanecer.zip a una carpeta de tu equipo. Como resultado de esta extracción obtendrás el archivo WAV: amanecer.wav.

2. Abre Audacity utilizando el icono de acceso directo al programa.

3. Desde Audacity selecciona Archivo > Abrir. 4. En el cuadro de diálogo Seleccione uno o más archivos … despliega la lista Buscar en

para seleccionar la carpeta donde se ubica el archivo de audio anterior. En el cuadro inferior selecciona este archivo y pulsa en el botón Abrir.

5. Tras abrir un archivo de sonido mediante el comando Archivo > Abrir, el programa muestra el siguiente entorno:


244

6. Aunque algunos se verán con más detalle más adelante, ahora se describen brevemente los principales elementos del interfaz de Audacity:

1. Barra de menús. Como en cualquier aplicación Windows se puede utilizar para

activar cualquier opción del programa. 2. Barra de herramientas. Contiene algunas de las operaciones de uso más

frecuente:

Herramienta de Selección: permite seleccionar un fragmento del audio.

Herramienta de Envolvente: se utiliza para modificar el volumen en ciertas áreas.

Herramienta de dibujo: con ella se pueden modificar pequeños fragmentos dibujando directamente sobre la representación gráfica de la onda sonora. Suele ser necesario ampliar previamente la vista de la muestra.

Herramienta zoom: facilita la visualización de detalles en zonas concretas de la grabación.

Herramienta de traslado de tiempo: permite desplazar un fragmento de la grabación sobre la línea de tiempo: adelante-atrás.


245

Modo Multi-herramienta: permite utilizar las herramientas Selección, Envolvente y Traslado sin tener que ir seleccionándolas individualmente.

3. Barra de control de reproducción.

Para reproducir en bucle indefinido el fragmento seleccionado pulsa la tecla Mayus y sin soltarla haz clic en el botón Reproducir.

4. Barra de medidores de Nivel de Entrada y salida

• Indicador de Nivel de Salida. Durante la reproducción de una grabación mostrará el volumen de salida en cada uno de los dos canales: I-R.

• Indicador de Nivel de Entrada. Durante una grabación mostrará el volumen de entrada de la fuente elegida, por ejemplo, el micrófono.

5. Barra de Mezclador

• Volumen de Salida. Permite establecer el volumen con que se reproducirá el el audio abierto con Audacity cuando se pulse el botón Reproducir de la barra de Control de Reproducción. Este control de salida se sincroniza con el elemento Onda de la consola de control de volumen de los dispositivos de salida.

• Volumen de Entrada. Utiliza el deslizador para definir el volumen con que se grabará el audio procedente del dispositivo de entrada seleccionado (ejemplo: micrófono). No obstante no controla el volumen con que entra la señal de audio sino el volumen que utiliza para grabarla. Si la señal de audio entra saturada, simplemente grabará la señal saturada a menor volumen.


246

6. Barra de Transcripción. Permite iniciar la reproducción del audio y definir mediante el deslizador la velocidad a la que se reproducirá el audio.

Nota: Si seleccionas Ver > Barras de herramientas > Barra de herramientas de dispositivos entonces se visualizará otra barra más que no viene configurada como visible por defecto que permitirá elegir el dispositivo fuente del que se grabará Micrófono.

7. Barra de Edición.

Cortar, Copiar ó Pegar un fragmento de grabación.

Recortar fuera de selección: recorta los fragmentos exteriores a la selección actual.

Silenciar selección: transforma a silencio el fragmento de audio seleccionado.

Deshacer/Rehacer: deshace o rehace la última operación realizada con el programa.

Zoom Acercar/Alejar.

Ajustar selección a la ventana: ajusta el fragmento seleccionado a la ventana visible.

Ajustar el proyecto a la ventana: ajusta la grabación completa a la ventana disponible.

8. Pista de audio. Audacity permite trabajar con distintas pista de audio. Cada una se sitúa en una ventana propia. Desde el cuadro de control situado a la izquierda se pueden realizar distintas operaciones.

• Boton X : sirve para cerrar esta pista. Se recupera de nuevo seleccionando Editar > Deshacer Eliminación de pista

• Menú emergente: si pulsamos sobre la cabeza de flecha negra que aparece en la esquina superior derecha se muestra un menú con las opciones de uso más frecuente que se pueden realizar sobre la pista de audio: modificar el nombre, cambiar el modo de visualización (forma de onda, espectro, tono, etc), cambiar su orden sobre el resto de pistas, modificar el valor de la frecuencia y del formato de muestreo


247

• Botones Silencio/Sólo. Permite silenciar una pista o conseguir que sólo se reproduzca ésta.

• Deslizadores de volumen y balance. Arrastra estos deslizadores para definir el volumen y balance relativo a esa pista. El balance se refiere a que la pista se reproduzca más por el altavoz izquierdo (I) o bien por el altavoz derecho (D).

9. Barra de Selección. Situada por defecto en la parte inferior de la ventana.

Muestra la frecuencia del proyecto de grabación actual y también permite definir de forma numérica la selección de un fragmento de audio.

Audio ::: Reproducción de audio con Audacity Diseño de materiales multimedia. Web 2.0

248

3.3 Reproducción de audio con Audacity


249

3.3 Reproducción de audio con Audacity 3.3.1 Abrir un archivo de audio

1. Descarga y descomprime el archivo amanecer.zip para guardar el archivo amanecer.wav que contiene en una carpeta del disco duro local.

2. Para iniciar Audacity haz doble clic sobre el icono del programa en el escritorio.

3. Selecciona Archivo > Abrir 4. En el cuadro de diálogo Selecciona uno o más archivos de audio … navega hasta

localizar el archivo amanecer.wav que hemos situado anteriormente en el disco duro. 5. Clic sobre este archivo de la lista y pulsa en el botón Abrir.

3.3.2 Reproducción del audio

Utiliza la consola de reproducción y grabación situada en la barra superior

• Play (Reproducir): reproduce el fragmento de onda que está seleccionada o bien su totalidad. Observa que si pulsas la tecla Mayus y sin soltarla haces clic sobre el botón Play se reproducirá en bucle contínuo, es decir, al llegar al final comenzará por el principio.

• Pausa: detiene temporalmente la reproducción o grabación de audio. Para reanudar el proceso basta con pulsar de nuevo en este botón.

• Stop (Parar): detiene la reproducción o grabación. • Ir al principio: sitúa la cabeza lectora al principio de la grabación. • Ir al final: envía la cabeza lectora al final de la grabación. • Grabar: graba la señal de entrada en una nueva pista a partir de la posición

actual de la cabeza lectora.


250

3.3.3 Propiedades de un archivo de audio Para conocer las características de un archivo de audio, debes utilizar el explorador de archivos:

1. Navega hasta situarte en la carpeta donde hemos guardado el archivo amanecer.wav 2. Haz clic derecho sobre este archivo y selecciona la opción Propiedades.

Windows

3. En el cuadro de diálogo Propiedades pulsa sobre la pestaña Resumen. 4. Si aparece el botón Opciones avanzadas … pulsa sobre él para cambiar a este modo

de vista.

5. En este cuadro se mostrarán los distintos parámetros de interés sobre el audio contenido en este archivo: Velocidad de transmisión (bitrate), Tamaño de muestra de sonido (resolución), Canales (mono/estéreo), Velocidad de muestra de sonido (Tasa de muestreo) y Formato de audio. Si es un archivo WAV mostrará el tipo de compresión utilizado. Si es un archivo MP3, además de la información citada, se mostrarán los metacontenidos de las etiquetas ID3 específicas de este formato.


251

Ubuntu Linux

3. En el cuadro de diálogo Propiedades pulsa sobre la pestaña Básico. En esta sección podrás ver, entre otros, el tipo y tamaño de archivo de audio.

4. En la pestaña Sonido/Vídeo en ocasiones se aporta información de los metadatos de este audio y del códec de compresión del archivo. Esto suele funcionar bien cuando se trata de un archivo de audio en formato MP3.

Nota: Si abres un archivo WAV utilizando Audacity, la información que se muestra en el encabezado de la pista de audio no se corresponde con los datos del archivo importado. Audacity lo transforma automáticamente a la tasa de muestreo (p.e. 44100 Hz), resolución (p.e. 32-bit float) y canales (p.e. Estéreo) definidos por defecto para un proyecto Audacity.


252

3.3.4 Guardar un proyecto de Audacity

1. Selecciona Archivo > Guardar proyecto como … para guardar el audio con los cambios realizados.

2. Al elegir esta opción el proyecto de edición de audio se guardará con extensión *.AUP . Este archivo contiene todo lo que necesita Audacity para editar este sonido (no sería necesario el archivo WAV que se abrió originalmente). Sin embargo el formato *.AUP no es editable ni reproducible por otros programas.

3. En la casilla Nombre define un nombre del proyecto y haz clic en Guardar. 4. Para cerrar este proyecto elige Archivo > Cerrar.

Nota: Mediante Archivo > Abrir puedes acceder a la edición de un archivo WAV, MP3, OGG, etc. Sin embargo cuando trates de guardar las modificaciones realizadas en el mismo formato de archivo deberás seleccionar Archivo > Exportar … En este caso es conveniente definir un nombre distinto para el nuevo archivo. Con ello se conservará el original evitando su sobrescritura.

Audio ::: Optimización de audios Diseño de materiales multimedia. Web 2.0

253

3.4 Optimización de audios


254

3.4 Optimización de audios 3.4.1 Conversión de formato WAV a MP3 En esta actividad se detalla el procedimiento para convertir un archivo de audio del formato WAV al MP3. Cómo se explicó en el primer capítulo, el formato *.WAV puede almacenar el sonido en calidad pura y es ideal para guardar audios originales. Sin embargo para publicar un audio es preferible transformarlo al formato *.MP3 ya que se reduce considerablemente el peso del archivo respecto al original manteniendo una adecuada calidad.

1. Descarga y descomprime el archivo amanecer.zip para guardar el archivo amanecer.wav en una carpeta del disco duro.

2. Para iniciar Audacity haz doble clic sobre el icono del programa en el escritorio.

3. Selecciona Archivo > Abrir 4. En el cuadro de diálogo Selecciona uno o más archivos de audio … navega hasta

localizar el archivo amanecer.wav. 5. Clic sobre este archivo de la lista y pulsa en el botón Abrir. Se abrirá una ventana con

la onda de sonido correspondiente. 6. Selecciona Archivo > Exportar …

Windows

7. En el cuadro de diálogo Exportar archivo selecciona la carpeta destino en la lista desplegable Guardar en: . Introduce un nombre de archivo en la casilla Nombre y en Tipo selecciona Archivos MP3

8. No es necesario teclear la extensión porque Audacity la añadirá automáticamente.

Clic en el botón Guardar.


255

Ubuntu Linux

7. En el cuadro de diálogo Export File (Exportar Archivo) introduce el nombre de archivo en Nombre (1). Despliega la lista Guardar en la carpeta para elegir la carpeta destino.

8. Es necesario pulsar en el botón Buscar otras carpetas (2) para que se muestre el panel completo y poder acceder a la lista de tipos de archivos (3). En esta lista selecciona la entrada MP3 Files. Para realizar la conversión pulsa en el botón Guardar.

Ambos sistemas:

9. Para realizar la conversión a MP3, Audacity utiliza el códec LAME. Este códec se suele instalar por defecto con Audacity pero en algunas versiones más antiguas no se incluía. Si Audacity no encuentra el códec instalado en tu equipo, se mostrará un mensaje donde te propone localizarlo. Para ello haz clic en el botón Explorar … y apunta al archivo lame_enc.dll en Windows o bien libmp3lame.so.0 en Linux dentro de tu equipo.


256

Otra posibilidad es pulsar en el botón Descargar … que aparece en este cuadro para navegar hasta una página del proyecto Audacity donde es posible descargar y situar este archivo en una subcarpeta Lame dentro de la carpeta de instalación de Audacity en el equipo.

10. A continuación se muestra el cuadro de diálogo Editar las etiquetas ID3 para el archivo MP3. Las etiquetas ID3 se almacenan en el mismo archivo MP3 y son leídas por el reproductor para mostrar previamente en pantalla los metadatos como el título de la canción (Track Title), el artista (Artist Name), el album (Album Title), el género musical (Genre), el año de creación de la canción (Year), el número de pista (Track Number), etc. Son datos importantes del audio pero en este caso vamos a dejarlos en blanco y pulsa en Aceptar.

11. Al cabo de unos segundos ya dispondremos del archivo MP3 en la misma carpeta donde se abrió el archivo WAV. Comprueba que el MP3 tiene un peso inferior al WAV original.

Nota: Para averiguar el peso de un archivo, desde el explorador de archivos, selecciona la vista Detalles mediante Ver > Detalles (Windows) o bien Ver > Ver como lista (Ubuntu) . Al seleccionar este modo, la lista de archivos mostrará el nombre, tamaño, tipo y fecha de modificación.


257

3.4.2 Configurar la calidad de exportación a MP3 En ocasiones puede interesar reducir aún más el peso del archivo MP3 que se origina durante el proceso de exportación descrito en el apartado anterior.

1. Vamos a iniciar el proceso a partir de un WAV original. Descarga y descomprime el archivo amanecer.zip para guardar el archivo amanecer.wav en una carpeta de tu equipo. Si este WAV se conserva sin modificaciones del apartado anterior podrías ahorrarte volver a descargarlo y descomprimirlo.

2. Para iniciar Audacity haz doble clic sobre el icono del programa en el escritorio. 3. Selecciona Archivo > Abrir. En el cuadro de diálogo Selecciona uno o más archivos

de audio … navega hasta llegar a realizar doble clic sobre el archivo amanecer.wav. Con ello se abrirá una ventana con la onda de sonido correspondiente.

4. Elige Archivo > Exportar … 5. En el cuadro de diálogo Exportar archivo selecciona la carpeta destino en la lista

desplegable Guardar en:. En la lista Tipo elige Archivos MP3

6. Clic en el botón Opciones… que se muestra en la parte inferior de este cuadro.


258

7. En este caso vamos a elegir como Modo de velocidad de transferencia la opción

Constante. Despliega la lista Quality (Calidad) y elige un valor de Bit Rate inferior a 128. Por ejemplo: 96 (kbps).

8. Clic en el botón Aceptar para guardar los cambios. Si no vuelves a modificar este valor, todos los audios que se originen a partir de ahora mediante el proceso Exportación como MP3 … tendrán este bitrate.

9. De regreso al cuadro de diálogo Exportar archivo introduce un nuevo nombre de archivo. Por ejemplo: amanecer_96. No es necesario teclear la extensión porque Audacity la incorpora automáticamente.

10. Se muestra el cuadro de diálogo Editar las etiquetas ID3 para el archivo … Clic en Aceptar.

11. Repite los pasos 4-9 para crear otros archivos MP3 con bitrates inferiores: amanecer_64.mp3 y amanecer_32.mp3

12. Desde el explorador de archivos, sitúate en la carpeta donde has exportado los archivos para acceder a la lista de archivos. Comprueba que conforme vamos reduciendo el bitrate, el peso disminuye. Podrás comprobar que la calidad no ha disminuido excesivamente. Para ello efectúa doble clic sobre cada archivo. Se iniciará el reproductor instalado por defecto en tu equipo (Windows Media, QuickTime, Totem, etc).

3.4.3 Convertir un audio de estéreo a mono En la mayoría de los casos no es necesario disponer de una locución o sonido en estéreo. Su versión en mono satisface dignamente el propósito de la aplicación. Esta operación supone reducir el tamaño del archivo. En este apartado se describen los pasos para realizarlo usando Audacity.

1. Vamos a iniciar el proceso a partir de un WAV original. Descarga y descomprime el archivo amanecer.zip para guardar el archivo amanecer.wav en una carpeta del equipo. Si este WAV se conserva sin modificaciones del apartado anterior podrías ahorrarte volver a descargarlo y descomprimirlo.

2. Para iniciar Audacity haz doble clic sobre el icono del programa en el escritorio. 3. Selecciona Archivo > Abrir. En el cuadro de diálogo Selecciona uno o más archivos

de audio … navega hasta llegar a realizar doble clic sobre el archivo amanecer.wav. Con ello se abrirá una ventana con la onda de sonido correspondiente.


259

4. En el cuadro que visualiza la onda sonora, haz clic en la cabeza de flecha negra situada en la esquina superior derecha del encabezado.

5. En el menú contextual que se ofrece selecciona la opción Dividir pista estéreo.

6. Tras esta elección observa que ahora el canal izquierdo y derecho se muestran en

ventanas separadas.


260

7. Haz clic sobre el botón “X” cerrar situado en el encabezado de la onda del canal Derecho. (También se podría hacer eliminando el canal Izquierdo) . De los dos cuadros que muestran la onda sonora será el situado más abajo. Con esta operación se elimina la onda sonora del canal derecho.

8. En el cuadro que permanece, correspondiente al canal izquierdo, pulsa sobre la cabeza de flecha para desplegar el menú contextual. En este menú elige la opción Mono.

9. Observa que ahora en el encabezado de la ventana de onda se muestra el texto Mono para indicar la conversión realizada.


261

10. Elige Archivo > Exportar 11. En el cuadro de diálogo Exportar archivo introduce un nuevo nombre de archivo. No

es necesario teclear la extensión porque Audacity la incorpora automáticamente. Por ejemplo: amanecer_24_mono.

12. Desplieg la lista Tipo y selecciona Archivos MP3. 13. Pulsa en el botón Opciones para definir como Quality (Calidad): 24 kbps. Clic en

Aceptar.

14. En el cuadro de diálogo Exportar archivo pulsa en el botón Guardar. En este caso se mostrará un mensaje de advertencia donde se indica que el audio será remuestreado a la nueva frecuencia definida: 24.000. Clic en el botón Aceptar.


262

15. Se muestra el cuadro de diálogo Editar las etiquetas ID3 para el archivo … Clic en

Aceptar. Al cabo de unos instantes en la carpeta destino se habrá creado al archivo de audio en monocanal.

3.4.4 Formatos de compresión WAV Cuando el audio tiene una duración muy corta resulta interesante conservar el formato WAV. Con Audacity podemos definir distintos formatos de compresión WAV.

1. Iniciamos de nuevo el proceso a partir de un WAV original. Descarga y descomprime el archivo ladrido.zip para guardar el archivo ladrido.wav en una carpeta del disco duro.

2. Abrirlo con Audacity seleccionando Archivo > Abrir. 3. Para guardar el archivo de audio en formato WAV con distintos factores de conversión

selecciona Archivo > Exportar. 4. En el cuadro de diálogo Exportar archivo elige la carpeta destino en Guardar en: En

este caso será la misma donde se ubica el archivo de audio original.

5. Despliega la lista Tipo y selecciona WAV, AIFF y otros tipos de datos sin comprimir. Recuerda que en Ubuntu es necesario pulsar en el botón Buscar otras carpetas para acceder a la lista de Tipos de archivos.

6. A continuación pulsa en el botón Opciones … 7. En el cuadro de diálogo Especificar opciones PCM despliega la lista Formato y elige

la entrada WAV (Microsoft 16 bit PCM) y pulsa en el botón Aceptar.


263

8. En el cuadro de diálogo Exportar archivo teclea el nombre del nuevo archivo. Por ejemplo: ladrido_16_pcm.wav . No es necesario introducir la extensión .WAV porque Audacity la incorpora automáticamente.

9. Clic en el botón Guardar. 10. Repite la secuencia de pasos del 1 al 9 para crear otros archivos WAV con distintos

formatos de compresión: • WAV (Microsoft 32 bit float) : ladrido_32_float.wav • WAV (Microsoft 4 bit IMA ADPCM): ladrido_ima_adpcm.wav • WAV (Microsoft 4 bit MS ADPCM): ladrido_ms_adpcm.wav • WAV (Microsoft 8 bit PCM): ladrido_8_pcm.wav

11. Desde el explorador de archivos visualiza el detalle de la lista de archivos que has creado. Comprueba la reducción de peso que tienen los distintos formatos de compresión WAV.

Audio ::: La grabación de audio Diseño de materiales multimedia. Web 2.0

264

3.5 La grabación de audio


265

3.5 La grabación de audio 3.5.1 Crear una grabación de voz En el diseño de una aplicación educativa puede resultar interesante añadir discursos sonoros con carácter explicativo o de refuerzo. En este ejemplo se describe el proceso para crear un archivo de audio digital a partir de un discurso pronunciado sobre el micrófono.

1. Abre el programa Audacity. 2. En primer lugar es necesario definir las condiciones del muestreo en la transformación

del audio analógico a audio digital: tasa de muestreo (44.100 Hz, 22050 Hz, 11025 Hz, etc) y resolución (16, 24, 32, bits). Para ello elige Editar > Preferencias.

3. Elige la pestaña Calidad y despliega la lista Frecuencia de muestreo predeterminado. Selecciona, por ejemplo, un valor intermedio 22050 Hz.

4. Despliega la lista Formato de muestreo predeterminado y elige 16-bit.

5. Clic en Aceptar. 6. A continuación selecciona Archivo > Nuevo. Se abre una nueva ventana de Audacity

adoptando los nuevos valores de muestreo definidos. En la barra de estado de esta nueva ventana aparecerá la tasa de muestreo elegida.

7. Marca la opción de visualización: Ver > Barra de herramientas > Barra de herramientas de mezcla. De esta forma se visualizará el control de Mezclas.

8. En el panel Mezclador selecciona el dispositivo Micrófono (Mic).

9. En el panel de Medidores, haz clic en el botón con la cabeza de flecha mirando hacia

abajo que aparece situado al lado del icono del micrófono.


266

10. En el menú que se muestra selecciona la opción: Comenzar monitorización.

11. Con ello Audacity comienza a monitorizar la señal de entrada. Observa que a partir de este momento en el panel de mezclas oscilan los indicadores de señal en color rojo recogiendo la entrada del micrófono. Si al hablar en el micro no se observan estas oscilaciones en el nivel de entrada, es necesario revisar la conexión del micrófono con el equipo. Asegúrate de que está conectado en la entrada adecuada de la tarjeta de sonido.

12. Realiza una prueba leyendo este texto: “La televisión puede darnos muchas cosas, salvo tiempo para pensar. Bernice Buresh”. Durante su lectura observa las oscilaciones del nivel de entrada en el panel de Medidores.

13. También resulta conveniente ajustar el volumen del micrófono. Durante la lectura, en los puntos de máximo volumen, el nivel debería haber superado la marca de -6 decibelios. En el panel de mezclas arrastra el deslizador de volumen del micrófono aumentando o disminuyendo para conseguir que el máximo volumen alcance esta marca pero sin que ello produzca la saturación.

14. A continuación, pulsa en el botón Grabar.

15. Lee despacio sobre el micrófono. Para detener la grabación pulsa en el botón Parar.

16. Para iniciar de nuevo la grabación elige Editar > Deshacer Grabar. 17. Una vez realizada la grabación con éxito vamos a guardarla. Para ello selecciona

Archivo > Exportar. 18. En el cuadro de diálogo Exportar selecciona como Tipo de archivo MP3. 19. Introduce un nombre de archivo y pulsa en el botón Guardar.


267

3.5.2 Grabar audio de un CD Aunque hay otros programas que facilitan la extracción directa de música de un CD, con Audacity es posible obtener un fragmento musical a partir de un CD de música.

1. Sitúate en una nueva ventana de Audacity mediante Archivo > Nuevo o bien abriendo el programa si éste no está ejecutándose.

2. En el panel del Mezclador selecciona el dispositivo Stereo Mix (Vol).

3. Arrastra el deslizador de volumen situado al lado del icono de micrófono para ajustarlo.

4. En el panel de Medidores, haz clic en el botón con la cabeza de flecha mirando hacia abajo que aparece situado al lado del icono del micrófono.

5. En el menú que se muestra selecciona la opción: Comenzar monitorización. De esta forma se monitoriza la señal de entrada.

Reproducir el CD en Windows

6. A continuación inserta el CD en la unidad del equipo. Arranca el reproductor Windows

Media haciendo clic en su icono desde el escritorio o desde la barra de acceso rápido o bien desde Inicio > Todos los programas > Accesorios > …


268

7. Desde Windows Media Player selecciona en la barra de menú Reproducir > CD de audio. En el cuadro derecho se muestra la lista de pistas donde puedes seleccionar la que desees.

Reproducir el CD en Ubuntu Linux

6. Si al introducir el CD en la unidad no arranca el programa Sound Juicer entonces arráncalo mediante Aplicaciones > Sonido y vídeo > Extractor de música de CDs Sound Juicer

7. Desde el programa Sound Juicer selecciona la pista y pulsa en el botón Reproducir. Ambos sistemas

8. Regresa a Audacity 9. Pulsa en el botón Grabar

10. Clic en el botón Parar en el instante que decidas detener la grabación.

11. Una vez realizada la grabación con éxito vamos a guardarla. Para ello selecciona Archivo > Exportar para obtener el archivo correspondiente.

Notas:

• Como se indica en el primer apartado de este capítulo, recuerda que la tasa y resolución de muestreo se definen en Archivo > Preferencias > Calidad. Esto se hace previamente a la grabación.

• Conviene guardar el audio extraído de un CD en formato MP3 si su duración va a superar los 4-5 segundos.


269

3.5.3 Grabar audio de la radio En esta práctica vamos a utilizar Audacity para grabar un fragmento de audio extraído de una emisión de radio en Internet.

1. Visita la web http://www.rtve.es/rne/web/index.php 2. Selecciona una emisora, por ejemplo, Radio Clásica y luego Escucha Radio Clásica. 3. Haz clic sobre el icono de Windows para comenzar a oír esta emisora utilizando el

reproductor Windows Media. Nota:

En Ubuntu Linux puede ocurrir en algunas ocasiones que no se reproduzca la emisión a través del navegador Firefox. En este caso un método alternativo es abrir VLC Media Placer. Si no dispones de él puedes instalarlo previamente. Selecciona Abrir > Abrir volcado de red y en la pestaña Red marcar la opción HTTP/HTTPS/FTP/MMS para pegar la dirección siguiente y pulsar el botón Aceptar: http://www.rtve.es/rne/audio/RNEclasica.asx

4. Al cabo de unos instantes, comenzarás a oir la emisión a través del equipo. 5. Sitúate en Audacity. Selecciona Archivo > Nuevo para comenzar en un proyecto

nuevo. 6. En el panel Mezclador selecciona el dispositivo Stereo Mix (Vol).





270

10. Pulsa en el botón Grabar


12. Una vez realizada la grabación con éxito vamos a guardarla. Para ello selecciona Archivo > Exportar para obtener el archivo MP3 correspondiente. Recuerda que para configurar las propiedades del archivo MP3 resultante debes pulsar en el botón Opciones desde el cuadro de diálogo Exportar archivo.

Nota:

Como se indica en el primer apartado de este capítulo, recuerda que la tasa y resolución de muestreo se definen en Archivo > Preferencias > Calidad. Esto se hace previamente a la grabación.

3.5.4 Grabar audio de un MIDI En esta práctica vamos a utilizar Audacity para grabar un fragmento de audio a partir de la reproducción de un archivo MIDI. Esta operación no suele aplicarse para optimizar un archivo MIDI ya que éste es un formato muy ligero sino para incorporar esta fuente de música al panel de mezclas ya que Audacity no importa ni reproduce directamente archivos MIDIs.

1. Descarga y descomprime el archivo mozart.zip para guardar el archivo mozart.mid que contiene en una carpeta del disco duro.

2. Desde el explorador de archivos, sitúate en la carpeta anterior. 3. Haz doble clic sobre el archivo mozart.mid.

Windows

4. En un equipo Windows se iniciará el reproductor Windows Media sonando este fragmento musical.


271

Ubuntu:

4. En Ubuntu la reproducción de archivos MIDI se puede realizar instalando desde Aplicaciones > Agregar/Quitar programas el programa Timidity++. Después de instalar este programa, lo abrimos y seleccionamos Load file para situarnos en la carpeta donde se encuentra el MIDI y escribir su nombre para abrirlo.

5. Desde Audacity selecciona Archivo > Nuevo para comenzar en un proyecto nuevo. 6. En el panel Mezclador selecciona el dispositivo Stereo Mix (Vol).




10. Pulsa en el botón Grabar


12. Una vez realizada la grabación con éxito vamos a guardarla. Para ello selecciona Archivo > Exportar.

Notas:

• Como se indica en el primer apartado de este capítulo, recuerda que la tasa y resolución de muestreo se definen en Archivo > Preferencias > Calidad. Esto se hace previamente a la grabación.

• Recuerda que Audacity no permite importar ni editar archivos MIDI.

Audio ::: Copiar y pegar audio Diseño de materiales multimedia. Web 2.0

272

3.6 Copiar y pegar audio con Audacity


273

3.6 Copiar y pegar audio con Audacity 3.6.1 Seleccionar un fragmento de onda La reducción del peso de un archivo de audio puede realizarse acortando su duración original. Con un editor de audios como Audacity es posible seleccionar un fragmento de onda con intención de eliminarlo o bien conservarlo descartando el resto no seleccionado. Por otra parte la aplicación de un efecto siempre se realiza sobre un tramo de onda seleccionada previamente. En esta práctica vamos a estudiar los procedimientos para seleccionar.

1. Descarga y descomprime el archivo ambiente.zip para obtener el archivo ambiente.mp3.

2. Inicia Audacity 3. Selecciona Archivo > Abrir 4. En el cuadro de diálogo Selecciona uno o más archivos de audio … navega hasta

localizar el archivo ambiente.mp3 que has extraído a tu equipo. 5. Clic sobre este archivo de la lista y pulsa en el botón Abrir. Se abrirá una ventana con

la onda de sonido correspondiente. 6. Selecciona la herramienta de selección en el cuadro de herramientas.

7. Para seleccionar un fragmento de onda haz clic en el punto inicial estimado y sin soltar arrastra hasta el punto final para luego soltar. Debes efectuar clic sobre la onda sonora de uno de los canales evitando realizarlo en el espacio intermedio. Observa que el fragmento seleccionado queda remarcado sobre fondo gris oscuro.

Para realizar selecciones más finas es conveniente utilizar la herramienta zoom. Con ella se puede ampliar la representación de la onda.


274

Veamos por ejemplo el procedimiento para seleccionar el fragmento musical comprendido entre el segundo 2,95 y 3,90.

1. Pulsa sobre el botón de herramienta Zoom. 2. Haz clic reiteradamente sobre la representación de la onda hasta que la escala se

sitúe en centésimas de segundo: 2,70-2,80-2,90 … Para disminuir el zoom haz clic derecho.

3. Vuelve a elegir la herramienta Selección. 4. Haz un solo clic sobre la onda para situar la línea de cursor inicialmente en el punto

2,95. 5. Arrastra la barra de desplazamiento horizontal situada en la parte inferior de la

ventana si fuera necesario para visualizar el punto 3,90 de la grabación. 6. Presiona la tecla <Mayus> (flecha arriba) y sin soltarla haz otro clic sobre la onda en

el punto 3,90. 7. Observa que la porción de onda seleccionada se muestra destacada sobre fondo gris

más oscuro. Se pueden mover los límites inicial y final de este fragmento. Para ello basta con aproximar el puntero del ratón a estos límites y cuando éste tome el aspecto de una mano, pulsar y arrastrar.


275

Otras opciones de selección son:

• Editar > Seleccionar > Todo: Con esta opción se selecciona toda la onda de audio. Esta opción es especialmente útil para aplicar un efecto a la grabación completa.

• Editar > Seleccionar > Desde el principio hasta el cursor: Al hacer un clic sobre la onda para fijar la posición de la línea de cursor y luego utilizar esta opción, se selecciona la porción comprendida entre el principio de la grabación y la posición de la línea de cursor.

• Editar > Seleccionar > Desde el cursor hasta el final: Al hacer clic sobre la onda para fijar la posición de la línea de cursor y luego aplicar este comando, se selecciona el tramo comprendido entre la línea de cursor y el final de la grabación.

3.6.2 Crear un nuevo archivo con un fragmento

1. Descarga y descomprime el archivo ambiente.zip para obtener el archivo ambiente.mp3. No es necesario realizar esta operación si ya dispones de él del apartado anterior de este capítulo.

2. Inicia el programa Audacity. 3. Selecciona Archivo > Abrir 4. En el cuadro de diálogo Selecciona uno o más archivos de audio … navega hasta

localizar el archivo ambiente.mp3. 5. Clic sobre este archivo de la lista y pulsa en el botón Abrir. Se abrirá una ventana con

la onda de sonido correspondiente. 6. Activa la herramienta Selección en la barra de herramientas de Audacity.

7. Pulsa y arrastra sobre la onda para seleccionar una porción. Por ejemplo de 0,0 a 4,7 segundos.

8. Copia este fragmento de onda al portapapeles haciendo clic en el botón Copiar

9. Selecciona Archivo > Nuevo. 10. En la nueva ventana, haz clic en el botón Pegar.

11. Elige Archivo > Exportar 12. En el cuadro de diálogo Exportar archivo elige la carpeta destino en la lista

desplegable Guardar en. Introduce el nombre del nuevo archivo de audio. Por ejemplo: nuevoaudio. No es necesario añadir la extensión *.mp3 porque Audacity lo hace de forma automática.

13. En la lista desplegable Tipo selecciona la entrada Archivos MP3. 14. Si deseas configurar la calidad del archivo mp3 resultante pulsa en el botón Opciones

y defínela en la lista Quality. Pulsa en el botón Aceptar. 15. Se muestra el cuadro de diálogo Editar las etiquetas ID3 para el archivo … Clic en

Aceptar.


276

3.6.3 Recortar un fragmento


2. Inicia el programa Audacity. 3. Selecciona Archivo > Abrir para localizar el archivo ambiente.mp3. 4. Activa la herramienta Selección en la barra de herramientas de Audacity.

5. Selecciona un fragmento de onda mediante pulsar+arrastrar+soltar. 6. Para eliminar el audio no seleccionado haz clic en el botón Recortar o bien elige

Editar > Recortar. Observa que Audacity sólo retiene la onda seleccionada.

7. Para situar la onda seleccionada al comienzo de la grabación, elige la herramienta Traslado en el tiempo y a continuación arrastra la selección al comienzo de la pista.


desplegable Guardar en. Introduce el nombre del nuevo archivo de audio. Por ejemplo: nuevoaudio2. No es necesario añadir la extensión *.mp3 porque Audacity lo hace de forma automática.



Aceptar. 3.6.4 Silenciar una selección


2. Inicia el programa Audacity. 3. Selecciona Archivo > Abrir para localizar y abrir el archivo ambiente.mp3 4. Selecciona la parte inicial de la onda mediante pulsar+arrastrar+soltar. 5. Para silenciar el audio seleccionado haz clic en el botón Silenciar selección.

6. Esta opción convierte en silencio el tramo de audio seleccionado. Para deshacer la operación elige Editar > Deshacer Silencio

7. Para crear un archivo con los cambios realizados sigue el procedimiento habitual: Archivo > Exportar


277

3.6.5 Crear un loop de audio El archivo de un audio de duración media o larga suele tener un peso elevado para reproducirse previa descarga a través de Internet, incluso si se trata de un archivo MP3. A veces la situación admite emplear como recurso alternativo un audio más corto pero que reproducido en bucle con “n” repeticiones transmite la sensación de un acompañamiento más largo. Esto es especialmente útil en sonidos de fondo. En esta práctica vamos a crear un loop a partir de un audio más largo.

1. Descarga y descomprime el archivo house.zip para obtener el archivo house.mp3. 2. Inicia el programa Audacity. 3. Selecciona Archivo > Abrir para localizar el archivo house.mp3. 4. Escucha la grabación con detenimiento. Advertirás que este audio se puede sustituir

fácilmente por un primer fragmento repetido varias veces. 5. Haz clic en la herramienta Zoom

6. Realiza varios clics sucesivos sobre la onda hasta conseguir que la línea de tiempo discrimine 0,00-0,10-0,20-0,30 con una apreciación de media décima (0,05)

7. Activa la herramienta Selección en la barra de herramientas de Audacity.

8. Selecciona el fragmento inicial comprendido entre 0,00 y 0,05 y a continuación elige Editar > Borrar.

9. Haz clic sobre la onda en el punto 3,75 segundos. A continuación elige Editar > Seleccionar > Desde el principio hasta el cursor. Con esta acción se selecciona la onda comprendida entre el inicio y la situación actual de la línea cursor.

10. Para oír si el final coincide adecuadamente con el principio, activa el modo de reproducción en loop: pulsa la tecla <Mayús> y sin soltarla haz clic en el botón Reproducir de la consola. Observa que al pulsar la tecla <Mayús> este botón toma un aspecto distinto:


278

11. Si necesitas modificar los extremos de la selección, debes detener la reproducción antes. Aproxima el puntero del ratón a un extremo de la selección y cuando tome el aspecto de una mano, pulsa y arrastra.

12. Para copiar la selección, haz clic en el botón Copiar.

13. Elige Archivo > Nuevo. 14. En la nueva ventana, haz clic en el botón Pegar.

16. Mantén la tecla <Mayús> pulsada y sin soltarla haz clic en el botón Reproducir para comprobar que el loop se mantiene sin cortes.


desplegable Guardar en. Introduce el nombre del nuevo archivo de audio. Por ejemplo: audioloop. No es necesario añadir la extensión *.mp3 porque Audacity lo hace de forma automática.


y defínela en la lista Quality. En este caso dejaremos la opción por defecto. Pulsa en el botón Aceptar.


3.6.6 Mezclar pistas de audio Con Audacity se puede componer una grabación de audio mezclando varios sonidos originales. Cada uno de éstos ocupará una pista independiente de la grabación y al pulsar el botón play se reproducirán todos simultáneamente.

1. Descarga y descomprime el archivo poema.zip para guardar el archivo poema.ogg y el archivo fondo_clasico.ogg en una carpeta de tu equipo.

Nota: El formato *.OGG es un formato de compresión de audio que surgió como alternativa libre y gratuita al MP3. Los archivos Ogg Vorbis no tienen un uso tan extendido como los MP3 y algunos reproductores no los pueden reproducir. Sin embargo ofrecen una compresión parecida a los MP3 con una calidad muy similar. Audacity puede importar y exportar audio en este formato.

2. Abre Audacity. 3. Selecciona Archivo > Importar 4. En el cuadro de diálogo Seleccione uno o más archivos … selecciona el archivo

fondo_clasico.ogg . Pulsa en el botón Abrir. 5. Repite los pasos 3-4 para importar el audio poema.ogg. Fíjate que cada audio original

se sitúa en una pista independiente. 6. Selecciona la herramienta Seleccionar para pulsar+arrastrar+soltar la onda completa

de la pista poema.


279

7. A continuación selecciona la herramienta de Traslado en tiempo.

8. Pulsa y arrastra la onda seleccionada en la pista poema para centrarla respecto a la pista superior que contiene la música de fondo.

9. Vuelve a seleccionar la herramienta Seleccionar y efectúa un clic en cualquier espacio en blanco para deseleccionar la onda de poema.

10. Clic en el botón Reproducir para escuchar el resultado de la composición.

11. Después de escuchar el resultado quizás estimes necesario reducir el volumen de la música de fondo cuando entra la locución. Para ello selecciona el fragmento central de la pista con el fondo_clasical.ogg.

12. A continuación selecciona Efecto > Amplificar 13. En el cuadro de diálogo Amplificar arrastra el deslizador de amplificación hacia la

izquierda para definir un valor negativo. Por ejemplo un valor entre -7 y -9. 14. Clic en el botón Aceptar.


280

15. Clic en el botón Reproducir para escuchar el resultado final. 16. Para crear el archivo MP3 con la composición elige Archivo > Exportar 17. En el cuadro de diálogo Exportar archivo elige la carpeta destino en la lista

desplegable Guardar en. Introduce el nombre del nuevo archivo de audio. Por ejemplo: mezcla. No es necesario añadir la extensión *.mp3 porque Audacity lo hace de forma automática.


y defínela en la lista Quality. En este caso dejaremos la opción por defecto. Pulsa en el botón Aceptar.


21. Si deseas guardar el proyecto de audio para continuar editándolo más adelante selecciona Archivo > Guardar proyecto como … El proyecto de Audacity se guarda como un archivo de extensión *.aup.

Audio ::: Aplicar efectos Diseño de materiales multimedia. Web 2.0

280

3.7 Aplicar efectos


281

3.7 Aplicar efectos Audacity proporciona múltiples efectos que se pueden aplicar a un fragmento de audio digital: amplificar su volumen, modificar su velocidad o ritmo, ecualizarlo, eliminar el ruido, etc.

1. Descarga y descomprime el archivo para guardar el archivo aventura.mp3. 2. Inicia Audacity. 3. Selecciona Archivo > Abrir 4. En el cuadro de diálogo Selecciona uno o más archivos de audio … navega hasta

localizar el archivo aventura.mp3 que hemos extraído anteriormente. 5. Clic sobre este archivo de la lista y pulsa en el botón Abrir. 6. Antes de aplicar un efecto es necesario seleccionar un tramo de pista de audio. Elige

la herramienta Selección.

7. Pulsa y arrastra para seleccionar una porción de audio sobre la que se aplicará el efecto. Puede ser un tramo inicial o final. Si deseas que la selección abarque toda la pista elige Editar > Seleccionar > Todo o bien pulsa la combinación de teclas <Ctrl>+<A>

8. Aplica el efecto seleccionando en la barra de menú Efecto > … En el cuadro de configuración de los parámetros de un efecto suele encontrarse un botón Previsualización para escuchar los primeros segundos del audio seleccionado tras haberle aplicado ese efecto.

9. A continuación se exponen algunos de los efectos más habituales:

• Amplificar. Aumenta o disminuye el volumen del audio seleccionado. Introduce en la casilla Amplificación (dB) el valor en decibelios que se aumentará el volumen o bien puedes arrastrar el deslizador inferior. Si activas la casilla Permitir recorte no podrás amplificar por encima del rango de frecuencias de la onda. Esto evitará la distorsión.


282

• Realce de graves. Aumenta el volumen de las frecuencias bajas. Indica el límite de frecuencias bajas que se seleccionarán y los decibelios que se incrementarán de volumen.

• Cambiar tiempo. Al arrastrar el deslizador a la derecha o introducir un porcentaje positivo en la casilla Cambio percentual se incrementará la velocidad del tramo seleccionado no variando el tono pero disminuyendo la duración. Si se desplaza a la izquierda o se introduce un % negativo se ralentizará incrementándose la duración.

• Cambiar tono. Permite cambiar el tono del fragmento de sonido seleccionado manteniéndose el tiempo constante. Este efecto se suele aplicar mejor a grabaciones vocales que no tienen música de fondo. Se puede especificar el incremento/decremento de tono de cuatro formas distintas y alternativas: Tono musical, Semitonos, Frecuencia o bien Cambio porcentual.


283

• Cambiar velocidad. Modifica la velocidad del audio y con ello cambia el

tiempo y el tono. Arrastra a derecha o izquierda el deslizador del cambio porcentual para aumentar o disminuir la velocidad. Este efecto se suele aplicar a las locuciones para distorsionar la voz.

• Compresor de rango dinámico. Comprime el rango dinámico de la selección de tal forma que las partes más fuertes se suavizan manteniendo el volumen de las partes más suaves. Opcionalmente se puede aplicar Ganancia para conseguir un volumen final más alto.


284

• Eco. Añade el efecto eco a una selección. Define el Tiempo de retraso en segundos entre la reproducción del sonido y su eco correspondiente. Se recomienda utilizar un Factor de decaimiento próximo a 0,50000. Este efecto no incrementa la longitud de la selección, por lo que conviene añadir previamente silencio al final de la pista mediante Generar > Silencio.

• Ecualización. Ajusta o reduce las frecuencias extrañas del fragmento elegido.

Puedes seleccionar una curva de ecualización predefinida o dibujar tu propia curva.

• Desvanecer progresivamente/Aparecer progresivamente: Se aplican

directamente sobre una selección inicial o final realizada en la grabación para definir una aparición o desaparición progresiva de la música.


285

• Eliminación de ruido. Facilita la eliminación de ruido de una grabación. Este

efecto se suele aplicar en dos pasos: i. Selecciona un pequeño fragmento de silencio donde aparece el ruido.

A continuación elige Efecto > Eliminación de ruido y pulsa el botón Obtener perfil de ruido. De esta forma Audacity sabrá qué debe filtrar.

ii. Seleccionar todo el audio a filtrar, arrastra el deslizador para indicar el % de ruido que deseas eliminar y pulsa en el botón Eliminar ruido. Para terminar haz clic en el botón Cerrar.

• Invertir. Voltea verticalmente la onda de sonido, invirtiendo su fase. • Normalizar. Normalizar un audio consiste en corregir su DC offset, es decir,

ajustar el desplazamiento vertical de la onda y/o fijar la amplitud para que tenga un valor máximo fijo, por ejemplo, -3 dB. Suele ser útil normalizar una pista de audio antes de mezclarla con otras.


286

• Repetir. Repite la selección un determinado número de veces. Esta operación es rápida y gestiona adecuadamente el espacio intermedio por lo que se utiliza mucho para crear bucles pseudos-infinitos.

• Revertir. Este efecto voltea la pista de audio creando otra donde el comienzo es el final de la original y viceversa. Al reproducir esta nueva pista suena como si se hubiese reproducido hacia atrás la pista original.

• Wahwah. Incorpora un efecto de filtro especial.


desplegable Guardar en. Introduce el nombre del nuevo archivo de audio. Por ejemplo: aventura_efecto. No es necesario añadir la extensión *.mp3 porque Audacity lo hace de forma automática.



Aceptar.

Audio ::: Extracción de audio de un CD Diseño de materiales multimedia. Web 2.0

287

3.8 Extracción de audio de un CD


288

3.8 Extracción de audio de un CD 3.8.1 Extracción de audio de un CD con CDex (Windows) CDEX es un programa de libre distribución (http://cdexos.sourceforge.net/) para Windows que nos va permitir extraer un fragmento musical de un CD o bien de una fuente de sonido conectada al ordenador para guardarlo en un archivo en formato WAV o MP3. Si deseas utilizar la versión portable para Windows de CDex descarga y descomprime el siguiente archivo a una carpeta de tu disco duro o pendrive: PortableCDex.exe Para ejecutar el programa sitúate en la carpeta resultante de la extracción y haz doble clic sobre el programa PortableCDex.exe

1. Introduce un CD de música en la unidad de CD/DVD. 2. Inicia CDex. 3. Si dispones de varias unidades, desde CDex selecciona aquella donde has insertado el

disco.

4. En la lista inferior se muestran las pistas de audio que contiene el CD. Haz clic sobre una para seleccionarla. Por ejemplo: Pista de audio 02. Si deseas elegir alguna más pulsa la tecla <Ctrl> y sin soltarla haz clic sobre ella para añadirla a la selección. Para seleccionarlas todas, clic sobre la primera, pulsa <Mayus> y sin soltarla clic sobre la última.

5. Para iniciar la captura de la pista/s elegida/s pulsa en alguno de los botones que

aparecen en la barra derecha.

Extraer pista(s) de CD a archivo(s) WAV. Si pulsas en este botón se creará un archivo WAV por cada pista elegida del CD.


289

Extraer pista(s) de CD a formato comprimido. Si pulsas en este botón se creará un archivo MP3 por cada pista elegida del CD. Conviene introducir en las casilla Artísta, Género, Título y Año para crear adecuadamente las etiquetas ID del MP3 final.

Extraer fragmento de CD. Al pulsar este botón se muestra un cuadro de diálogo donde se puede elegir la posición inicial y final del fragmento que se extraerá de la pista. En la casilla se puede introducir el nombre del archivo final. En Formato de salida elige WAV o bien Codificado (MP3). Pulsa sobre el botón Aceptar para iniciar la extracción.

6. ¿Dónde se guardan los archivos de audio resultantes? CDex Portable suele guardarlo en la carpeta My Music dentro de la carpeta donde se encuentra el programa. Se puede modificar la carpeta destino utilizada por CDex mediante Opciones > Configuración de CDex. En la solapa Nombre de archivos, pulsa en el botón “…” situado al lado de la casilla Pistas extraídas para navegar por el disco duro y elegir la ubicación de la nueva carpeta. Para guardar los cambios pulsa en el botón Aceptar.


290

3.8.2 Extracción de audio de un CD con Sound Juicer (Ubuntu) Sound Juicer es un programa que suele venir instalado por defecto en Ubuntu y que se utiliza para reproducir las pistas de audio de un CD y para extraerlas a archivos OGG y MP3. Conviene comprobar que dispones de Sound Juicer instalado en tu equipo. Para ello desde el escritorio selecciona Aplicaciones > Sonido y Vídeo > Extractor de música de CDs Sound Juicer. Si no dispones de esta aplicación selecciona Aplicaciones > Añadir y quitar programas. Sound Juicer convierte por defecto al formato OGG. Para activar la conversión a MP3 es necesario instalar previamente el paquete gstreamer0.10-plugins-ugly-multiverse. Para ello sigue estos pasos:

1. Desde el escritorio selecciona Sistema > Administración > Gestor de paquetes Synaptic

2. Clic en el botón Buscar e introduce como término de búsqueda: gstreamer y pulsa en el botón Buscar.

3. Haz doble clic sobre la casilla de verificación izquierda correspondiente a la entrada gstreamer0.10-plugins-ugly-multiverse.

4. A continuación haz clic en el botón Aplicar. Para convertir una pista de audio de un CD a un archivo MP3:

1. Introduce el CD de audio en el ordenador. 2. Si Sound Juicer no arranca por defecto puedes abrirlo desde el escritorio mediante

Aplicaciones > Sonido y Vídeo > Extractor de música de CDs Sound Juicer


291

3. Desde Sound juicer selecciona Editar > Preferencias.

4. La carpeta personal del usuario donde se guardará el archivo MP3 final es Música. Se puede acceder a ella desde el escritorio mediante Lugares > Música. Desde el cuadro de diálogo Preferencias se puede modificar la carpeta destino desplegando la lista Carpeta y seleccionando otra.

5. En el cuadro de diálogo Preferencias despliega la lista Formato de salida y elige la opción Calidad de CD, MP3 (audio MP3). Clic en el botón Cerrar.

6. Al regresar a la ventana principal de Sound juicer marca solamente las pistas que deseas capturar.

7. Para iniciar el proceso pulsa en el botón Extraer.

8. Una vez concluido el proceso de conversión se mostrará un mensaje indicando que ha finalizado con éxito. Si deseas abrir la carpeta destino haz clic en el botón Abrir. Para cerrar este mensaje pulsa en el botón Cerrar.


292

9. Para reproducir el archivo MP3 final resultante puedes utilizar Audacity o cualquier otro programa: VLC Media Player

Audio ::: Integración HTML básica de audio Diseño de materiales multimedia. Web 2.0

293

3.9 Integración HTML básica de audio


294

3.9 Integración HTML básica de audio En este apartado se explica el procedimiento para integrar un audio en una página HTML utilizando el reproductor PixelOut (http://www.1pixelout.net/code/audio-player-wordpress-plugin/)

1. Descarga y descomprime el archivo píxelplayer.zip en una carpeta de tu equipo. 2. Desde el explorador de archivos abre la carpeta esta carpeta y haz doble clic en el

archivo index.html. Con esto se abrirá el navegador mostrando el reproductor.

3. Se puede iniciar o detener la reproducción pulsando en el botón play/pause que aparece en el extremo derecho. En la barra se muestra el autor/título del audio así como la duración del fragmento reproducido.

4. Regresa al explorador de archivos en la carpeta. Dentro de esta carpeta encontrarás el archivo de audio MP3 que se está reproduciendo. En este caso: danzahungara.mp3. El archivo player.swf es el reproductor flash de PixelOut. El archivo de imagen brahms.jpg contiene el retrato de este autor que se inserta en el documento HTML.

5. Abre Kompozer y utilízalo para abrir el archivo index.html 6. Clic en la pestaña Código fuente. 7. Si deseas insertar el reproductor en otra página basta con copiar y pegar el código

HTML: <object type … > … </object> y asegurarse de que el reproductor player.swf se encuentra en la misma carpeta que esa nueva página.

<object type="application/x-shockwave-flash" data="player.swf" id="audioplayer" height="24" width="290">

<param name="movie" value="player.swf"> <param name="FlashVars" value=" bg=0xf8f8f8& leftbg=0xeeeeee& lefticon=0x666666& rightbg=0xcccccc& rightbghover=0x999999& righticon=0x666666& righticonhover=0xffffff& text=0x666666& slider=0x666666& track=0xFFFFFF& border=0x666666& loader=0x9FFFB8& soundFile=danzahungara.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="bgcolor" value="#FFFFFF">

</object>


295

8. Si observas la etiqueta object, verás que al final del parámetro FlashVars se encuentra la variable soundFile=danzahungara.mp3. Puedes definir aquí otro nombre de archivo MP3, p.e., soundFile=musica.mp3 y situar un archivo con este nombre en lugar de danzahungara.mp3 dentro de la misma carpeta que el reproductor. Con ello conseguirás reproducir un audio distinto.

9. El reproductor de PixelOut admite personalizar su interfaz definiendo distintos valores en las variables que aparecen en este parámetro FlashVars. Fíjate que esta cadena utiliza el formato variable=valor& donde “&amp” es la notación HTML del signo “&”.

• autostart=yes . El reproductor se abrirá automáticamente e iniciará la reproducción de la pista. El valor por defecto es no.

• loop=yes . La pista se reproducirá indefinidamente. El valor por defecto es no. • bg=0xHHHHHH. Background color. Color de fondo expresado en valor

hexadecimal como por ejemplo: 0xFFFFFF = blanco. • leftbg=0xHHHHHH Left background color. Color fondo izquierdo. • rightbg=0xHHHHHH Right background color Color fondo derecho. • rightbghover=0xHHHHHH Right background color (hover) Color fondo derecho al

situar el ratón sobre él. • lefticon=0xHHHHHH Left icon color Color del icono izquierdo. • righticon=0xHHHHHH Right icon color. Color del icono derecho. • righticonhover=0xHHHHHH Right icon color (hover). Color del icono derecho al

situar el ratón sobre él. • text=0xHHHHHH Text color . Color del texto. • slider=0xHHHHHH Slider color . Color del deslizador. • loader=0xHHHHHH Loader bar color . Color de la barra de carga. • track=0xHHHHHH Progress track color . Color de la barra de progreso de la pista. • border=0xHHHHHH Progress track border color. Color del borde de la barra de

progreso de pista.

10. Puedes modificar algún color para ver el aspecto que tomar el reproductor. Para visualizar la página con los cambios pulsa en Guardar y luego en el botón Navegar.

11. Otra posibilidad más fácil es acceder a esta página pixelout.html . Muestra un interfaz que te permitirá configurar las distintas opciones del reproductor. El resultado final será el código de la etiqueta <object> que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Recuerda que deberás situar en la misma carpeta el archivo player.swf con el reproductor y el archivo mp3 de audio.


296

Audio ::: Integración HTML avanzada de audios Diseño de materiales multimedia. Web 2.0

297

3.10 Integración HTML avanzada de audios


298

3.10. Integración HTML de audios 3.10.1 Reproductor de MIDIS Los archivos MIDI son archivos de extensión *.MID que contienen música. Son de reducido tamaño lo cual los hace especialmente indicados para la web a pesar de que su calidad musical no sea muy alta. Por ejemplo: el midi que se utiliza en esta actividad pesa 82 Kb y contiene un fragmento musical de 4 minutos y 26 segundos de duración. En esta actividad se propone utilizar un reproductor creado con tecnología Flash para escuchar una lista de archivos MIDI.

1. Descarga y descomprime el archivo midiplayer.zip en la carpeta miweb\midiplayer. 2. Desde el explorador de archivos visualiza el contenido de la carpeta

miweb\midiplayer. Si haces doble clic sobre el archivo index.html se abrirá el navegador web mostrando el reproductor.

3. Elige una canción y pulsa en el botón Play (Reproducir). Para detenerla haz clic en el botón Stop (Detener).

4. Regresa al explorador de archivos en la carpeta miweb\midiplayer. Dentro de la subcarpeta midi encontrarás los archivos MIDI que se reproducen. En la carpeta Scripts se encuentran los archivos de código javascript auxiliares que necesita la aplicación para funcionar.

5. El archivo playMidi.swf es el reproductor Flash que se muestra en la página HTML. 6. Desde el explorador de archivos haz clic derecho sobre el archivo midi.xml para

seleccionar Abrir con … > Bloc de notas o bien con el editor de textos gEdit . De esta forma se abrirá este editor mostrando el contenido del archivo XML.


299

7. En la etiqueta playlist se declaran el número de midis en el atributo: ítems=”14”. 8. En este archivo XML existe una etiqueta item por cada archivo de audio midi:

<item id="1" src="midi/bachto.mid" title="Tocata y Fuga" author="Johann Sebastian Bach" duration="11:14" />

9. Los atributos de la etiqueta <item … /> son: • id=”1”. Indica el número de orden de la canción en la lista. • src=”midi/bachto.mid”. Define la ubicación (carpeta y nombre de archivo) del

fichero que contiene el audio midi. • title=”Tocata y Fuga”. Es el texto que se mostrará en la lista del reproductor. • author=”Johann Sebastian…”. Es el nombre del autor que se visualizará al elegir

esa canción. • duration=”11:14”. Es la duración del audio visible al seleccionarlo.

10. Para añadir/modificar/eliminar un MIDI basta con hacer lo propio con el

correspondiente archivo MIDI dentro de la carpeta midi (añadir una nuevo, renombrar el archivo o eliminarlo) y luego modificar la correspondiente etiqueta dentro del archivo midi.xml para crear una nueva etiqueta, borrarla o bien modificar el valor de sus atributos.

11. Inicia Kompozer y utilízalo para abrir el archivo index.html. Puedes editar esta y

personalizar su contenido: título, texto e imágenes adicionales, etc. Otra posibilidad es copiar y pegar a otra página las etiquetas HTML necesarias para que el reproductor funcione en ella. Para ello activa la pestaña Código fuente para acceder al código HTML y luego copia y pega:

• Las siguientes etiquetas apuntan a los archivos con código javascript externos

situados en la carpeta Scripts. Estas etiquetas conviene situarlas entre las etiquetas <head>…</head> <script src="Scripts/AC_RunActiveContent.js" …> ... <script src="Scripts/midi_audio.js" …> ...

• Las etiquetas siguientes se utilizan para incrustar el reproductor y se pueden

situar en cualquier sitio de la página HTML a partir de la etiqueta body. <script type="text/javascript"> init(); </script> <script type="text/javascript"> AC_FL_RunContent( … … </noscript>

Nota: Es importante respetar la estructura de archivos y carpetas resultantes de la descompresión del ZIP inicial para que el reproductor funcione correctamente.


300

3.10.2 Reproductor mediaplayer de Jeroen Wijering para MP3 Al hablar de reproductores mp3 para la web resulta obligado dedicar un espacio a la excelente aplicación desarrollada por Jeroen Wijering (http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la configuración de múltiples parámetros y admite la reproducción de archivos mp3 simples y de listas de reproducción.

1. Descarga y descomprime el archivo mediaplayer.zip en la carpeta miweb\mediaplayer.

2. Desde el explorador de archivos abre la carpeta miweb\mediaplayer y haz doble clic en el archivo index.html. Con esto se abrirá el navegador mostrando las cinco posibilidades estándar que se contemplan: MP3 simple, MP3 con imagen, Lista MP3 simple, Lista MP3 con imagen pequeña y Lista MP3 con imagen grande.

3. La consola de reproducción para un archivo mp3 permite iniciar y detener el audio así como arrastrar la barra de progreso de la pista y del volumen. En la reproducción de listas de mp3 también se proporcionan botones para saltar a la siguiente o anterior pista.

4. Regresa al explorador de archivos en la carpeta miweb\mediaplayer. Dentro de esta carpeta se encuentra: • La carpeta audios que contiene los archivos de audio MP3 que se reproducen. • La carpeta images que contiene los retratos de los cinco compositores en dos

versiones: pequeña (120x120 píxeles) y grande (320x260 píxeles). • La página HTML que permite el acceso a todo el conjunto: index.html • El reproductor de audio universal: mediaplayer.swf • Los archivos XML: playlist1.xml y playlist2.xml que contiene la lista de

reproducción de audios con la siguiente información: ubicación de cada archivo de audio, de la imagen asociada, título, autor, etc.


301

• El fichero de javascript swfobject.js que asegura la integración del reproductor en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.

5. Abre Kompozer y utilízalo para abrir el archivo index.html 6. Clic en la pestaña Código fuente. 7. Si deseas insertar el reproductor en otra página basta con copiar y pegar las

siguientes líneas de código HTML:

<script type="text/javascript" src="swfobject.js"></script> Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para asegurar referencia al código javascript que asegura la correcta integración del reproductor. MP3 simple

<div id="player1">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','320','20','7'); so.addParam('allowfullscreen','true'); so.addVariable('file','audios/danzahungara.mp3'); so.addVariable('height','20'); so.addVariable('width','320'); so.write('player1'); </script> En la variable file se indica la referencia a la ubicación del archivo de audio mp3 que se reproduce. Puedes modificar este valor para reproducir un audio con otro nombre distinto. Recuerda que el archivo de audio debe situarse en la carpeta audios. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. MP3 con imagen


302

<div id="player2">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mp2','320','280','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','260'); so.addVariable('file','audios/danzahungara.mp3'); so.addVariable('height','280'); so.addVariable('image','images/brahms_large.jpg'); so.addVariable('width','320'); so.write('player2'); </script> En la variable image se indica la referencia a la ubicación del archivo de imagen que se muestra durante la reproducción del audio. Puedes modificar este valor para visualizar una imagen con otro nombre distinto. Recuerda que el archivo de imagen debe situarse en la carpeta images. En la variable displayheight se indica la altura con que se visualizará esta imagen. En las variables height y width se indican la altura y anchura con que se visualizará el reproductor. Lista MP3 simple

<div id="player3">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mp3','320','140','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','0'); so.addVariable('file','playlist1.xml'); so.addVariable('height','140'); so.addVariable('width','320'); so.write('player3'); </script> En la variable file en lugar de indicar un archivo mp3 se especifica un archivo XML que contiene una lista de audios. Al indicar en la variable height una altura en píxeles del reproductor superior a 20 píxeles (su altura real) y en la variable displayheight el valor 0 píxeles, entonces por debajo del reproductor se visualizará la lista de reproducción.


303

Lista MP3 con imagen pequeña

<div id="player4">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mp4','320','140','7'); so.addParam('allowfullscreen','true'); so.addVariable('file','playlist1.xml'); so.addVariable('height','140'); so.addVariable('width','320'); so.addVariable('displaywidth','120'); so.write('player4'); </script> En la variable displaywidth se indica la anchura en píxeles que ocupará la imagen que se sitúa a la izquierda de la lista de reproducción. Lista MP3 con imagen grande

<div id="player5">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mp5,'320','400','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','260'); so.addVariable('file','playlist2.xml'); so.addVariable('height','400'); so.addVariable('width','320'); so.write('player5'); </script>


304

En la variable file se apunta al archivo playlist2.xml que contiene la información sobre la lista de audios: ubicación de archivos mp3, imágenes asociadas, títulos, autores, etc. Para que el sistema funcione correctamente es necesario comprobar que en la misma carpeta de la página html se encuentren los archivos swfobject.js y mediaplayer.swf. Si se trata de una lista también debe incluirse el correspondiente archivo xml. Además deben ubicarse correctamente los archivos de imagen y de audio respectivamente en las subcarpetas images y audios.

8. En la página mediaplayer.html dispones de un asistente que permite configurar las

distintas opciones del reproductor de Jeroen Wijering. El resultado final será el código embed o bien el objeto swfobject que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Para ello elige una opción en la lista de modelos de configuración. Al seleccionarla se rellenarán automáticamente los valores de configuración básica asociados que puedes personalizar.

Tras elegir un modelo o bien pulsar en el enlace recargar reproductor se mostrará una vista previa del reproductor. En la parte inferior se podrá copiar y pegar el código embed o bien el código swfobject. Si deseas configurar otros parámetros más avanzados pulsa en el botón configuración avanzada para introducir estos valores. No olvides pulsar en el botón recargar reproductor para comprobar los cambios.


305

A continuación se explica cada parámetro y la sintaxis de los archivos xml de las listas de reproducción. Variables :

• Altura imagen (displayheight). Establece la altura de la imagen en píxeles. Si no se especifica valor, será la altura del reproductor menos la consola de reproducción (20 píxeles). Si defines valor nulo (0) se mostrará la lista de reproducción por debajo de la consola de reproducción.

• Ubicación del archivo (file). Es la ubicación del archive a reproducir. Puede ser un archivo simple (MP3/JPG/SWF/PNG/GIF/FLV/RTMP) o una lista de reproducción. Puede estar situado en la misma carpeta que el reproductor, en otra carpeta o en una URL de Internet.

• Altura del reproductor (height). Indica los pixels que ocupa el reproductor por completo.

• Imagen vista previa (image). Cuando se reproduce un MP3, se puede utilizar esta variable para mostrar una imagen de formato JPG/SWF/PNG/GIF. Se puede asignar una imagen a cada audio en la lista de reproducción.

• Anchura del reproductor (width). Define la anchura del reproductor. Variables de COLOR:

• Color fondo (backcolor). Es el color de fondo del reproductor en formato hexadecimal. Ejemplo: 0xFFFFFF (blanco).

• Color primer plano (frontcolor). Es el color de textos y botones. • Color resaltado (lightcolor). Color del rollover y activo del reproductor.

Variables de APARIENCIA:

• Scroll automático de lista (autoscroll). Si se marca esta casilla se mostrará una barra de scroll si el número de elementos es demasiado grande.

• Anchura de visualización (displaywidth). Si se define un valor inferior a la anchura del reproductor se consigue que la imagen aparezca a la izquierda de la lista de reproducción ocupando esa anchura.

• Barra de control más grande (largecontrols). Al activar esta casilla se duplica el tamaño de visualización de la barra de control. Es especialmente útil para usuarios con dificultades visuales.

• Mostrar logo (logo). Sitúa el logo de marca de agua en la esquina inferior derecha de la imagen. Se recomienda utilizar un archivo PNG de fondo transparente.

• Ajustar imagen (overstretch). Se pueden elegir las siguientes opciones: Ajuste simple (se ajusta a la dimensión –anchura o altura- más próxima manteniendo la proporción en fondo negro), Ajuste proporcional (se ajustan ambas dimensiones para ocupar todo el espacio manteniendo la proporción). Ajuste no proporcional (se ajusta cada dimension al espacio disponible pudiendo deformarse la imagen) y Sin ajuste (se mantienen las dimensiones originales de la imagen).

• Mostrar dígitos del contador (showdigits). Si se desmarca esta casilla no se mostrará el tiempo de reproducción

• Mostrar ecualizador gráfico (showeq). Si se activa esta opción se mostrará un ecualizador gráfico sobre la parte inferior de la imagen durante la reproducción.

• Mostrar iconos de carga/play (showicons). Muestra el icono “play” en el centro de la imagen para que el usuario pueda iniciar la reproducción pulsando en él.

• Miniaturas de la lista (thumbsinplaylist). Si se elige esta opción para cada pista de la lista de reproducción se observará la vista previa de la imagen especificada en el elemento image del archivo xml.


306

Variables de REPRODUCCIÓN.

• Inicio automático (autostart). Cuando se activa esta variable se logra que el reproductor se inicia cuando se carga la página.

• Longitud del buffer (bufferlength). Es el número de segundos durante los cuales un archivo FLV (vídeo) será almacenado en el búffer antes de iniciar su reproducción. Es una opción interesante para conexiones de clientes lentas. El valor por defecto es 3 segundos.

• Reproducción indefinida (repeat). El valor por defecto es “No” para indicar que el reproductor se detendrá tras reproducir un audio o un elemento de la lista de reproducción. De esta forma se preserva el ancho de banda. Si se selecciona “Una vez cada item” se reproducirá una sóla vez cada pista de la lista y al final se detendrá. Si se elige “Sí” se reproducirá indefinidamente el audio o lista de reproducción.

• Tiempo de renovación imágenes (rotatetime). Utiliza esta variable para configurar el número de segundos que deseas que la imagen de una lista de imágenes se muestre. Por defecto son 10 segundos. Una lista de imágenes es un XML donde se especifican archivos de imagen (p.e. JPG) en lugar de archivos de audio. Esta opción no funciona en la reproducción de un audio

• Reproducción aleatoria (shuffle). Si marcas esta casilla se reproducirán en orden aleatorio las pistas de audio de una lista.

• Volumen inicial (volume). Define el porcentaje de volumen (0-100) con que se iniciará el reproductor.

Variables de INTERACCIÓN. La configuración de algunas variables de interacción puede ser compleja y requiere ciertos conocimientos avanzados de programación. No obstante se recogen en este apartado a modo de cita y al margen del curso. Para más información consulta la página del creador del reproductor Jeroen Wijering (http://www.jeroenwijering.com/)

• MP3 de audio extra (audio). Especifica la ubicación de un archivo mp3 externo que se utilizará como banda sonora adicional. Se utiliza más en la reproducción de archivos de vídeo FLV. De esta forma se pueden añadir comentarios de accesibilidad o del propio autor del vídeo.

• URL del script estadístico (callback). Define la ubicación de un script (PHP/ASP) que el reproductor llamará cada vez que un audio se inicie o detenga. Esto puede servir para guardar estadísticas de uso. Para más información consultar la página de Jeroen Wijering.

• URL archivo subtítulo (captions). Establece la ubicación del archivo de texto externo que contiene los subtítulos. El reproductor soporta formato SMIL y SRT muy utilizado en el ripeado de DVDs.

• Permitir javascript (enablejs). Si marcas esta opción se activa la interacción javascript. Esta funcionalidad sólo funciona en línea e incluye control de reproducción, carga asíncrona de archivos multimedia y recuperación de información de las pistas a javascript.

• Botón Pantalla Completa (fsbuttonlink). Si activas esta opción se mostrará un botón para mostrar la reproducción a pantalla completa. Esto sólo funciona si el reproductor de Flash del cliente es 9.0.28 o superior.

• Identificador para scripts (id). Es el identificador único del archivo que se reproduce y se suele utilizar para el script de callback. Se puede especificar un id para cada elemento de una lista de reproducción.

• Enlace para redireccionar a (link). Si configuras la marca de agua con el logo, puedes definir en esta variable una URL donde enlazar cuando el cliente hace clic sobre este logo. Se puede definir un enlace para cada elemento de la lista de reproducción.

• Enlace del clic sobre visor (linkfromdisplay). Si activas esta opción al hacer clic sobre la imagen (no sólo sobre el logo) se navegará hasta la página indicada en el parámetro link.

• Destino del enlace (linktarget). Establece el marco donde se mostrará en enlace definido. Por defecto es “_self” aunque se puede definir “_blank” para mostrarlo en una nueva página.


307

• Script de streaming (streamscript). Es la URL de un script de servidor que se puede utilizar para simular streaming mediante PHP, ASP o LigHTTPD.

• Tipo de archivo (type). El reproductor determina el tipo de archivo que se reproducirá. La opción por defecto es automático pero en esta variable se puede indicar al reproductor el tipo de archivo: flv, mp3, etc.

• Usar audio extra por defecto (useaudio). Al desactivar esta opción se fuerza que no suene la pista de audio extra por defecto.

• Usar subtítulos por defecto (usecaptions). Al desmarcar esta casilla se fuerza que los subtítulos se oculten por defecto.

• Usar pantalla completa flash9 (usefullscreen). Desmarca esta variable si no deseas que se muestre el botón de pantalla completa en el reproductor.

• Usar atajos de teclado (usekeys). Si activas esta opción funcionarán ciertas teclas en el reproductor: barra espaciadora (play/pausa) y teclas de flecha (moverse sobre los audios de una lista).

Las listas de reproducción. El reproductor de Jeroen Wijering permite cargar un audio MP3 simple o una lista de reproducción.

1. Utiliza el explorador de archivos para situarte en la carpeta miweb\mediaplayer. 2. Clic derecho sobre el archivo playlist2.xml y selecciona Abrir con > Bloc de notas.

Este archivo contiene una de las listas de audios que utiliza el reproductor. 3. Observa que cada pista se especifica entre etiquetas <track>…</track> y dentro de

ella se indica el título de la canción <title>, el autor <creator>, la ubicación del archivo <location> y de la imagen que acompaña <image>.

<track>

<title>Danza hungara no.5</title> <creator>Brahms</creator> <location>audios/danzahungara.mp3</location> <image>images/brahms_large.jpg</image> </track> 4. Puedes editar este archivo modificando estos valores para incluir otras pistas en la

lista de reproducción. 5. Dentro de cada etiqueta <track> se pueden utilizar las siguientes etiquetas para cada

pista de audio:

• <location> …</location>. Indica la ubicación del archivo de audio. • <title> …</title>. Título de la pista. • <link> …</link>. Enlace asociado a esa pista. • <image> …</image>. Imagen asociada. • <creator> …</creator>. Autor del audio.

6. El reproductor soporta 3 formatos de archivo de listas de reproducción: XSPF (muy

utilizadas en Música Creative Commons) , RSS (utilizada con frecuencia para Podcasts) y ATOM (propia de blogs). Como puede leerse en el encabezado del archivo playlist2.xml abierto anteriormente se trata de una lista XSPF:

<playlist version="1" xmlns="http://xspf.org/ns/0/">


308

3.10.3 Reproductor XSPF En este apartado se trata la integración HTML del reproductor XSPF Web Music Player (http://musicplayer.sourceforge.net/)

1. Descarga y descomprime el archivo xspfplayer en la carpeta \miweb\xspfplayer. 2. Desde el explorador de archivos abre la carpeta \miweb\xspfplayer y haz doble clic

en el archivo index.html. Con esto se abrirá el navegador mostrando los tres skins del reproductor: botón, slim y extendido.

3. Mientras el modelo botón sólo permite las opciones “reproducir/parar”, el interfaz slim añade las opciones de control de volumen y de navegación adelante/atrás en la lista de audios y de control de volumen. El interfaz extendido permite mostrar la lista de reproducción y la imagen asociada a cada pista.

4. Regresa al explorador de archivos en la carpeta \miweb\xspfplayer. Dentro de esta carpeta encontrarás: • La carpeta audios donde se guardan los archivos de audio MP3. • La carpeta images que contiene los archivos JPG asociados a cada pista de la

lista. • La página HTML que permite el acceso a todo el conjunto: index.html • Los reproductores de audio: xspf_player_slim.swf, xspf_player_button.swf y

xspf_player.swf (extendido). • La lista de reproducción playlist.xspf en formato XSPF.

5. Abre Kompozer y utilízalo para abrir el archivo index.html 6. Clic en la pestaña Código fuente. 7. Si deseas insertar el reproductor en otra página basta con copiar y pegar el código

HTML: <object type … > … </object> correspondiente a cualquiera de los tres reproductores y asegurarse de que los archivos de audio mp3 y el reproductor correspondiente se encuentra en la misma carpeta que esa nueva página.


309

XSPF botón con audio: <object type="application/x-shockwave-flash" width="17" height="17" data="xspf_player_button.swf?song_url=audios/danzahungara.mp3"> <param name="movie" value="xspf_player_button.swf?song_url=audios/danzahungara.mp3"/> </object>

Nota: El reproductor XSPF botón también admite una lista de reproducción. XSPF slim con lista: <object type="application/x-shockwave-flash" width="400" height="15" data="xspf_player_slim.swf?playlist_url=playlist.xspf"> <param name="movie" value="xspf_player_slim.swf?playlist_url=playlist.xspf" /> </object> XSPF extendido con lista: <object type="application/x-shockwave-flash" width="400" height="170" data="xspf_player.swf?playlist_url=playlist.xspf"> <param name="movie" value="xspf_player.swf?playlist_url=playlist.xspf" /> </object>

8. Si observas la etiqueta object, verás que en el atributo data y en el parámetro movie contienen la referencia al nombre del archivo MP3 (variable song_url=) o de la lista de reproducción XSPF (variable playlist_url=). Puedes modificar la ruta y nombre de este archivo para reproducir otros audios.

9. Desde el explorador de archivos haz clic derecho sobre el icono del archivo playlist.xspf y elige Abrir con … > Bloc de notas o Editor de textos gedit.

10. En el encabezado de este archivo XML se observan los metadatos de la lista de reproducción: title, annotation, creator, etc. En la lista de pistas (trackList) observa que existe una etiqueta track por cada pista de la cual se indica: title (título del audio), creator (autor), location (ubicación del archivo), image (imagen asociada) e info (enlace para saber más). Puedes modificar el contenido de este archivo para crear una lista de reproducción distinta.

<track> <title>Danza hungara no.5</title> <creator>Brahms</creator> <location>audios/danzahungara.mp3</location> <image>images/brahms_small.jpg</image> </track>

11. Otra posibilidad más fácil es acceder a esta página xspfplayer.html . Muestra un interfaz que te permitirá configurar las distintas opciones del reproductor. El resultado final será el código de la etiqueta <object> que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Recuerda que deberás respetar la estructura de archivos y carpetas anteriormente mencionados.


310


311

3.10.4 Diaporama: imagen y audio sincronizados Un diaporama es una aplicación donde se reproduce una grabación sonora y un conjunto de imágenes o diapositivas que se muestran de forma sincronizada con el audio. La forma más sencilla de crear un diaporama es disponer en primer lugar de la banda sonora completa en un archivo MP3 único. Esta banda puede resultar de la mezcla de música de fondo, locuciones, efectos especiales, etc. El siguiente paso es decidir el instante de la reproducción del audio en el cual se mostrará cada imagen. Cuando la cabeza lectora del audio alcance ese instante se visualizará la nueva imagen sustituyendo a la anterior.

1. Descarga y descomprime el archivo diaporama en la carpeta \miweb\diaporama 2. Desde el explorador de archivos abre la carpeta \miweb\diaporama y haz doble clic

en el archivo index.html. Con esto se abrirá el navegador mostrando el diaporama.

3. Regresa al explorador de archivos en la carpeta \miweb\diaporama. Dentro de esta

carpeta encontrarás: • La carpeta images que contiene los archivos JPG que se mostrarán en el

diaporama. En este caso su tamaño es de 800x531 aunque el reproductor ajustará la visualización de otros tamaños.

• La carpeta Scripts que contiene el código javascript necesario para integrar adecuadamente el reproductor flash en el código HTML.

• La lista de diapositivas gallery.xml que contiene la información utilizada por el reproductor.

• El reproductor del diaporama: dplayer.swf • La página HTML que permite el acceso a todo el conjunto: index.html • El archivo de audio musica.mp3 que contiene la banda sonora.

4. Abre Kompozer y utilízalo para abrir el archivo index.html 5. Clic en la pestaña Código fuente. 6. Si deseas insertar el reproductor en otra página basta con copiar y pegar el siguiente

código HTML:


312

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> Esta línea de código declara la ubicación del archivo AC_RunActiveContent.js que contiene el código javascript que integra el reproductor.

<script type="text/javascript"> AC_FL_RunContent('width','640','height','505','title','dplayer','src','dplayer','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','dplayer' ); //end AC code </script> <noscript> <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="640" height="505" title="dplayer"> <param name="movie" value="dplayer.swf" /> <param name="quality" value="high" /> <embed src="dplayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="505"></embed> </object> </noscript>

Este código inserta el reproductor en la página HTML: dplayer.swf. Recuerda que es necesario copiar a la misma carpeta los archivos auxiliares que se han citado con anterioridad.

7. Desde el explorador de archivos haz clic derecho sobre el icono del archivo gallery.xml y elige Abrir con … > Bloc de notas.

8. En la etiqueta gallery se especifica el nombre del archivo que contiene la banda sonora en el atributo audio. En este caso es el archivo musica.mp3.

<gallery audio="musica.mp3">

9. Para cada imagen se especifica una etiqueta image con los siguientes elementos:

• filename. Contiene el nombre del archivo de imagen. Deben situarse obligatoriamente dentro de la subcarpeta images.

• caption. Título que se mostrará cuando se visualice la imagen. • cue. Es el instante durante la reproducción de la pista de audio en que se

visualizará esa imagen. El formato es mm:ss.ddd (m=minutos, s=segundos y d=milésimas).

<image> <filename>iglesiacastropol.jpg</filename> <caption>Iglesia de Castropol</caption> <cue>01:12.100</cue> </image>

10. Se puede editar el contenido de este archivo XML y modificar el contenido del audio y

de las imágenes para crear un diaporama sobre otro tema distinto.

4. Vídeo

Vídeo y animaciones ::: Introducción Diseño de materiales multimedia. Web 2.0

314

4.1 Introducción


315

4.1 Introducción 4.1.1 Conceptos básicos de vídeo digital Dimensiones. Es el tamaño del video (ancho x alto) expresado en píxeles cuando se visualiza al 100%, sin agrandar ni reducir. Los reproductores pueden mostrar un video a pantalla completa o con una ampliación del 200%, 300%, etc. En estos casos el video pierde calidad de imagen y esta pérdida depende del formato de archivo. Un video AVI puede tener cualquier ancho y alto mientras que los estándares de VideoCD son 352 x 288 y de DVD 720 x 576. Codec. Acrónimo de "codificación/decodificación". Un códec es un algoritmo especial que reduce el número de bytes que ocupa un archivo de video. Los archivos codificados con un códec específico requieren el mismo códec para ser decodificados y reproducidos. Algunos de los códecs más utilizados para el formato AVI son: DivX, XviD, CinePak, Intel Indeo 5, DV, etc. Velocidad de transmisión (bitrate) El bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de ese video. El video tendrá más calidad cuanto mayor sea su bitrate y el archivo que lo contiene tendrá mayor peso. El bitrate puede ser fijo o variable. El bitrate variable consigue mayor calidad de imagen porque recoge más calidad en escenas muy cargadas o con mucho movimiento y ahorra en aquellas más estáticas. Fotogramas por segundo. Un video resulta de la exposición imágenes o fotogramas uno detrás de otro. Un parámetro de la calidad del video es el número de fotogramas por segundo que muestra durante su reproducción. Este valor oscila entre 15 y 30. Por ejemplo los vídeos en DVD en Europa exhiben 25 fotogramas por segundo (25 fps). Fotogramas Clave. Cuando se aplica un códec de compresión a un video, se suele producir cierta pérdida de la información de sus fotogramas. Algunos fotogramas (los fotogramas clave) se almacenan completamente en el archivo comprimido, mientras que el resto sólo se guardan parcialmente. En la descompresión, estos fotogramas intermedios se reconstruyen a partir de los fotogramas clave. Sistemas de televisión.

• NTSC (National Television Standards Comité = Comité Nacional de Estándares de Televisión). Cada fotograma está formado por 525 líneas y reproduce 30 fotogramas por segundo. Se utiliza en América del Norte, Centroamérica, Japón, etc.

• PAL (Phase Alternation Line = Línea Alternada en Fase): El vídeo PAL tiene 625 líneas por fotograma y 25 fotogramas por segundo. Es el sistema más extendido actualmente en Europa.

• SECAM (Séquentiel Couleur à Mémoire = Color secuencial con memoria). Muestra 625 líneas y 25 fotogramas por segundo. De origen francés, ha perdido mercado en Europa a favor del sistema PAL.

Proporción o ratio de aspecto. Es la proporción entre la anchura y altura de un video. Cuando se reproduce un video se suele mantener por defecto esta proporción para evitar deformación de las imágenes. Por este motivo cuando se elige la visualización a pantalla completa, aparecen franjas negras arriba y abajo. Es habitual una relación 4:3 para los videos domésticos (352x288 píxeles, por ejemplo) mientras que en DVD se suele trabajar con ratios de 16:9.


316

4.1.2 Formatos de archivos de video Los videos digitales se pueden guardar en archivos de distintos formatos. Cada uno se corresponde con una extensión específica del archivo que lo contiene. Existen muchos tipos de formatos de video. Aquí se citan algunos de los más utilizados. Asimismo cada tipo de archivo admite en cada momento un códec de compresión distinto. AVI (Audio Video Interleaved = Audio y Video Intercalado)

• Es el formato estándar para almacenar video digital. • Cuando se captura video desde una cámara digital al ordenador, se suele almacenar

en este formato con el códec DV (Digital Video). • El archivo AVI puede contener video con una calidad excelente. Sin embargo el peso

del archivo resulta siempre muy elevado. • Admite distintos códecs de compresión como CinePak, Intel Indeo 5, DV, etc. Los

códecs con más capacidad de compresión y una calidad aceptable son DivX y XviD. • El formato AVI puede ser visualizado con la mayoría de reproductores: Windows Media,

QuickTime, etc. siempre y cuando se encuentren instalados en el equipo los adecuados códecs para cada tipo de reproductor.

• Es ideal para guardar videos originales que han sido capturados de la cámara digital (codificados con DV).

• No es recomendable publicarlos en Internet en este formato por su enorme peso. • Los códecs CinePak, Intel Indeo, DV, etc. no ofrecen una gran compresión. Los códecs

DivX y XviD por el contrario consiguen una óptima compresión aunque se suelen destinar sobre todo a la codificación de películas de larga duración.

MPEG (Moving Pictures Expert Group = Grupo de Expertos de Películas)

• Es un formato estándar para la compresión de video digital. • Son archivos de extensión *.MPG ó *.MPEG. • Admite distintos tipos de códecs de compresión: MPEG-1 (calidad CD), MPEG-2

(calidad DVD), MPEG-3 (orientado al audio MP3) y MPEG-4 (más orientado a la web). • Se reproducen con Windows Media Player y QuickTime.

MOV (http://www.apple.com/es/quicktime/)

• Es el formato de video y audio desarrollado por Apple. • Utiliza un códec propio que evoluciona en versiones con bastante rapidez. • Este tipo de archivos también pueden tener extensión *.QT • Se recomienda utilizar el reproductor de QuickTime. Existe una versión gratuita del

mismo que se puede descargar de Internet. • Es ideal para publicar videos en Internet por su razonable calidad/peso. • Admite streaming.

WMV (http://www.microsoft.com/windows/windowsmedia/es/)

• Ha sido desarrollado recientemente por Microsoft. • Utiliza el códec MPEG-4 para la compresión de video. • También puede tener extensión *.ASF • Sólo se puede visualizar con una versión actualizada de Windows Media 7 o superior.

Esta aplicación viene integrada dentro de Windows. • Es ideal para publicar videos en Internet por razonable calidad/peso. • Admite streaming.

RM (http://spain.real.com/)

• Es la propuesta de Real Networks para archivos de video. • Utiliza un códec propio para comprimir el audio. • Este tipo de archivos tiene extensión *.RM y *.RAM. • Se visualiza con un reproductor específico: Real Player. Existe una versión gratuita

del mismo que se puede descargar de Internet.


317

• Se puede utilizar para publicar videos en Internet por su aceptable calidad/peso. • Admite streaming.

FLV (http://www.adobe.com)

• Es un formato que utiliza el reproductor Adobe Flash para visualizar vídeo en Internet. • Utiliza el códec Sorenson Spark y el códec On2 VP6. Ambos permiten una alta calidad

visual con bitrates reducidos. • Son archivos de extensión *.FLV. • Se pueden reproducir desde distintos reproductores locales: MPlayer, VLC media

player, Riva, Xine, et. • Opción recomendada para la web por su accesibilidad. Al visualizarse a través del

reproductor de Flash es accesible desde la mayoría de los sistemas operativos y navegadores web.

• Los repositorios de vídeo más conocidos en Internet utilizan este formato para la difusión de vídeos: YouTube, Google Video, iFilm, etc.

• Permite configurar distintos parámetros del vídeo para conseguir una aceptable calidad/peso.

• Admite streaming. 4.1.3 ¿Qué es el streaming? En la navegación por Internet es necesario descargar previamente el archivo (página HTML, imagen JPG, audio MP3, etc.) desde el servidor remoto al cliente local para luego visualizarlo en la pantalla de este último. La tecnología de streaming se utiliza para optimizar la descarga y reproducción de archivos de audio y video que suelen tener un cierto peso. El streaming funciona de la siguiente forma:

• Conexión con el servidor. El reproductor cliente conecta con el servidor remoto y éste comienza a enviarle el archivo.

• Buffer. El cliente comienza a recibir el fichero y construye un buffer o almacén donde empieza a guardarlo.

• Inicio de la reproducción. Cuando el buffer se ha llenado con una pequeña fracción inicial del archivo original, el reproductor cliente comienza a mostrarlo mientras continúa en segundo plano con el resto de la descarga.

• Caídas de la velocidad de conexión. Si la conexión experimenta ligeros descensos de velocidad durante la reproducción, el cliente podría seguir mostrando el contenido consumiendo la información almacenada en el buffer. Si llega a consumir todo el buffer se detendría hasta que se volviera a llenar.

El streaming puede ser de dos tipos dependiendo de la tecnología instalada en el servidor:

• Descarga progresiva. Se produce en servidores web que disponen de Internet Information Server (IIS), Apache, Tomcat, etc. El archivo de vídeo o audio solicitado por el cliente es liberado por el servidor como cualquier otro archivo utilizando el protocolo HTTP. Sin embargo, si el archivo ha sido especialmente empaquetado para streaming, al ser leído por el reproductor cliente, se iniciará en streaming en cuanto se llene el buffer.

• Transmisión por secuencias. Se produce en servidores multimedia que disponen de

un software especial para gestionar más óptimamente el streaming de audio y vídeo: Windows Media Server, Flash Communication Server, etc. La utilización de un servidor multimedia ofrece múltiples ventajas frente al servidor web. Las más destacadas son:


318

a. Mayor rapidez en la visualización de este tipo de contenidos. b. La comunicación entre servidor/cliente se puede realizar por protocolos

alternativos al HTTP. Tiene el inconveniente del bloqueo impuesto por Firewalls pero tiene la ventaja de una mayor rapidez.

c. Mejor gestión del procesador y ancho de banda de la máquina del servidor ante peticiones simultáneas de varios clientes del mismo archivo de audio o vídeo.

d. Control predefinido sobre la descarga que pueden realizar los clientes: autentificada, filtrada por IP, sin almacenarla en la caché del cliente, etc.

e. Mayor garantía de una reproducción ininterrumpida gracias al establecimiento de una conexión de control inteligente entre servidor y cliente.

f. Posibilidad de distribución de transmisiones de audio y vídeo en directo. 4.1.4 Optimización de archivos de video Para optimizar el peso del archivo de video será necesario editarlo para establecer alguno o algunos de los siguientes parámetros: En el Audio:

1) El códec de compresión de audio utilizado: MPEG Layer 1, MPEG Layer 2, MP3, etc. 2) Resolución. Establecer resoluciones más pequeñas: 32-bits, 16-bits, 8-bits, 4-bits, etc. 3) Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc. 4) Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 128 Kbps, 96 Kbps,

64 Kbps, etc. 5) Calidad estéreo/mono. Reducir la calidad de “stereo” a “mono”

En el Video:

1) El códec de compresión de video utilizado: MPEG-1, MPEG-2, MPEG-4, Intel Indeo, Cinepak, DivX, etc.

2) Método de BitRate. Utilizar un bitrate variable VBR puede optimizar la calidad del video y repercutir en el peso final del archivo frente a un bitrate constante CBR.

3) Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 1000 Kbps, 768 kbps, 360 Kbps, etc.

4) Dimensiones. Cuanto más pequeña sea la altura y anchura en píxeles de los fotogramas de un video, menos tamaño ocupará su archivo.

5) Velocidad de fotogramas. Se puede reducir el número de fotogramas por segundo que mostrará el video: 30, 24, 20, 16, etc.

6) Fotogramas Clave. Durante la compresión también se puede indicar cada cuánto se guardará un fotograma completo (fotograma clave): 24, 48, 96, 128, etc. Cuanto mayor sea esta cadencia más bajo será el peso del archivo resultante.

Otros elementos que inciden en la optimización:

1) Duración. Cuanto más corto es un video, menos peso ocupa su archivo. En ocasiones puede resultar interesante fraccionar un archivo de video en sus escenas para facilitar su descarga.

2) Formato de archivo. Los archivos *.WMV, *.MOV, *.RM y *.FLV son los más adecuados para publicar un video en Internet por su adecuada relación calidad/peso y porque admiten streaming. Los archivos *.AVI con códecs de compresión baja son ideales para guardar los videos originales. Los archivos *.AVI con códecs DiVX-XviD son apropiados para videos de películas de cierta duración. Los archivos *.MPG con códec MPEG-1 se utilizan para crear Video-CDs. Los archivos *.MPG con códec MPEG-2 se utilizan como fuente para montar un DVD.


319

4.1.5 Dispositivos de captura de video Los dispositivos de captura de video permiten transferir al disco duro del ordenador un video ya grabado o una emisión en directo. Los más frecuentes son:

• Una cámara DV (Video Digital) conectada al puerto IEEE 1394 del equipo. Con este dispositivo se obtiene la mejor calidad porque la información de audio y video ya está en formato digital llegando simplemente al ordenador a través del mencionado puerto.

Conexión IEEE 1394 para videocámara digital

• Una cámara web conectada a un puerto USB y un micrófono conectado a la entrada MIC de la tarjeta de sonido.

Conexiones Cámara-USB y Micrófono-Tarjeta Audio • Una tarjeta sintonizadora de TV conectada a la señal de antena. • Una cámara o reproductor VHS conectado a una tarjeta de captura analógica. Este

proceso supone la conversión de video analógico a video digital. Para disponer de una información más completa de cómo conectar y configurar un dispositivo de captura, consulta la documentación que acompaña a cada hardware.

Vídeo y animaciones ::: Reproducción de vídeos con VLC Player Diseño de materiales multimedia. Web 2.0

320

4.2 Reproducción de vídeos con

VLC Media Player


321

4.2 Reproducción de vídeos con VLC Player 4.2.1 ¿Qué es VLC Media Player? VLC Media Player es un reproductor multimedia, gratuito y multiplataforma. Sus características más destacadas son:

• Soporta un gran número de formatos de audio y vídeo sin necesidad de instalar códecs adicionales: MPEG-1, MPEG-2, MPEG-4, DivX, MP3,OGG, MOV, RAM, AVI, FLV, etc.

• Es una opción muy interesante frente a otros programas comerciales para reproducir CDs de música, películas en soporte DVD o VídeoCD, etc.

• Se puede utilizar como servidor de streaming en una red local o de banda ancha.

VLC Media Player es una aplicación local para reproducir archivos multimedia del disco duro o en soporte CD/DVD. No se trata de un plugin para el navegador web. Se ha incluido en este curso por su facilidad para visualizar todo tipo de formatos y en especial DivX, FLV y películas en DVD.

4.2.2 Instalación de VLC Media Player en Windows Descarga y ejecuta el instalador del reproductor VLC Media para Windows: vlc-0.8.6d-win32.exe. Otra posibilidad es consultar su sitio web oficial: http://www.videolan.org y descargar si procede la última versión. Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente archivo a una carpeta de tu disco duro o pendrive: VLC_Portable_0.8.6d.exe 4.2.3 Instalación de VLC Media Player en Ubuntu Desde el escritorio selecciona Aplicaciones > Añadir o quitar aplicaciones. En el cuadro de diálogo Añadir o quitar aplicaciones introduce el término de búsqueda VLC. Marca la entrada VLC Media Player y pulsa en el botón Aplicar Cambios. Una vez instalado selecciona Aplicaciones > Sonido y vídeo > VLC media player y arrastra este icono hasta el escritorio para disponer de un acceso directo. 4.2.4 Reproducción de un archivo de vídeo FLV con VLC Media Player Una vez instalado el reproductor VLC Media Player puedes comprobar su correcto funcionamiento. 1. Descarga y descomprime el archivo flv.zip a una carpeta de tu equipo. 2. A continuación haz doble clic sobre el icono VLC Media Player situado en el escritorio

para iniciar este programa.

3. Se muestra la consola de reproducción de VLC media player.


322

4. Selecciona Archivo > Abrir Rápido Archivo. En el cuadro de diálogo Abrir Archivo

despliega la lista Buscar en: para situarte en la carpeta donde has descargado el vídeo.

5. Clic sobre el archivo dteatro.flv y pulsa en el botón Abrir. Se reproducirá el contenido de este archivo de vídeo.

6. Repite los pasos anteriores descargando y descomprimiendo el archivo dteatro_divx.zip

para obtener el correspondiente audio en formato *.avi codificado con DivX. Puedes experimentar otras posibilidades de VLC Media Player:

• Archivo > Abrir Rápido Archivo para visualizar otros formatos de vídeo: .mov, .wmv, … No admite el formato de RealPlayer.

• Archivo > Abrir disco permite reproducir una película en formato DVD o Video-CD.


323

• Archivo > Abrir Directorio para indicar una carpeta del equipo cuyos archivos serán reproducidos de forma secuencial.

Nota: En Windows el reproductor por defecto suele ser Windows Media Player mientras que en Ubuntu suele ser Totem

Vídeo y animaciones ::: Descarga de archivos de video Diseño de materiales multimedia. Web 2.0

324

4.3 Descarga de archivos de vídeo


325

4.3 Descarga de archivos de vídeo En este apartado se exponen distintos procedimientos para descargar archivos de vídeo que se están visualizando dentro de una página web. De esta forma se pueden reutilizar en local o bien en la intranet del centro logrando una visualización más ágil sin las limitaciones del acceso a Internet. 4.3.1 Descarga con Firefox (Unplug) ¿Qué es UnPlug? UnPlug es una extensión del navegador Mozilla Firefox que permite descargar y guardar en local un video o audio que se muestra dentro de una página web. Esta extensión realiza un chequeo de la página web mostrando todos los archivos multimedia que contiene y ofreciendo un vínculo Save para cada uno. Al pulsar en el mencionado enlace se descarga ese archivo al disco duro del equipo local. Como veremos UnPlug funciona con muchos sitios web que ofrecen repositorios de vídeos: Youtube, Google Vídeo, Current TV, etc. Como veremos más adelante este plugin también permite descargar animaciones flash. Instalación de UnPlug Para instalar una extensión o plugin en Mozilla Firefox se proponen dos métodos alternativos. Puedes elegir uno de los dos: Método 1: Instalación en línea

1. Abre Mozilla Firefox 2. Selecciona Herramientas > Complementos.

3. En el panel Complementos pulsa en el enlace Obtener extensiones.


326

4. Se accede a la página de Firefox donde se muestra el catálogo de extensiones para este navegador.

5. En el encabezado superior introduce el término Unplug y pulsa en el botón Buscar.

6. En la página de resultados de la búsqueda, haz clic en el enlace UnPlug para acceder a su página.

7. Una vez situados en la página de UnPlug haz clic en el botón Instalar ahora


327

8. Se muestra el acuerdo de licencia. Pulsa en el botón Aceptar e Instalar.

9. Se muestra el cuadro de diálogo Instalación de software. Transcurridos unos segundos se activa el botón Instalar ahora. Pulsa en este botón.


328

10. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botón

Reiniciar Firefox. De esta forma la extensión de activará al reiniciar el programa.

Método 2. Instalación desde archivo local

1. Descarga el archivo unplug-1.6.06.xpi. Otra posibilidad es descargar la última versión de esta extensión desde Internet: http://unplug.mozdev.org/installation.html

2. Abre Firefox 3. Selecciona Archivo > Abrir archivo … 4. En el cuadro de diálogo Abrir archivo localiza el archivo unplug-1.6.06.xpi y pulsa en

el botón Abrir. 5. Se muestra el cuadro de diálogo Instalación de software. Transcurridos unos

segundos se activa el botón Instalar ahora. Pulsa en este botón. 6. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botón

Reiniciar Firefox. De esta forma la extensión de activará al reiniciar el programa. Descarga desde YouTube YouTube es un portal web que permite a los usuarios subir, ver y compartir clips de vídeos. Su dirección es: http://www.youtube.com. El usuario puede subir un vídeo en distintos formatos y el sistema lo transforma en formato FLV (Flash Video) para servir su contenido en streaming utilizando una consola personalizada. El cliente sólo necesita disponer del plugin de Adobe Flash instalado en su navegador web para poder visualizar un vídeo. Youtube se ha convertido en un repositorio de vídeos muy popular debido, sobre todo, a la posibilidad de alojar vídeos personales de manera sencilla y a su interfaz ágil para buscar y visionar los documentos videográficos de los demás.

1. Abre el navegador web Firefox 2. Visita la web de Youtube en: http://www.youtube.com 3. Introduce como término de búsqueda “Picasso” y pulsa en el botón Search (Buscar).


329

4. En la página de resultados se mostrarán los vídeos cuyas etiquetas contengan la palabra o palabras introducidas.

5. Pulsa, por ejemplo, sobre el enlace Pablo Picasso con la descripción “Picasso painting live” (Picasso pintando en directo). Su URL directa es: http://www.youtube.com/watch?v=7vgAYTC9bRY

6. Pulsa en el botón de Unplug que aparece en la barra de herramientas del navegador o selecciona Herramientas > Unplug

7. Se mostrará una página con la descripción de todos los elementos multimedia embebidos en la página web actual.

8. Clic en el botón Save (Guardar) correspondiente al primer elemento Tipo: Vídeo Flash.


330

9. En el cuadro de diálogo Guardar selecciona en la lista Guardar en una carpeta conocida de tu disco duro y define como nombre del archivo FLV, por ejemplo, picasso.flv

10. Clic en el botón Guardar. 11. Al cabo de unos instantes se habrá descargado el archivo de vídeo. Para terminar

pulsa en el botón Cerrar de Unplug que aparece en la esquina superior derecha. 12. Para reproducirlo en local inicia VLC Media Player, selecciona Abrir archivo rápido

para navegar hasta la carpeta anterior y seleccionar el archivo picasso.flv.

4.3.2 Volcados de streaming con VLC Una de las características del streaming es que desde el reproductor o navegador no puede descargarse en local el archivo de vídeo que está visualizando. En este contexto tiene aplicación la utilización de VLC Media Player. Descarga de vídeos de la Biblioteca Virtual Cervantes

1. Abre el navegador web Firefox y visita la web oficial de la Biblioteca Virtual Cervantes: http://www.cervantesvirtual.com/videoteca/

2. Navega por este repositorio hasta que llegues a visualizar el vídeo que te interesa.


331

Para Windows

3. Clic derecho sobre el reproductor donde se está mostrando la película y en el menú contextual que se muestra elige la opción Propiedades.

Pulsa y arrastra para seleccionar la ruta del archivo que se muestra en Ubicación dentro de la pestaña Archivo. A continuación haz clic derecho sobre esta selección y elige Copiar. Con estos pasos hemos copiado al portapapeles la ruta del archivo.

Para Ubuntu Linux

3. Clic derecho sobre el reproductor y elige la opción Copiar. Esta acción copiará la URL del vídeo que se está mostrando.

Para ambos sistemas

4. Abre el programa VLC Media Player 5. Selecciona Archivo > Abrir volcado de red 6. En la pestaña Red marca la opción HTTP/HTTPS/FTP/MMS y en el cuadro de texto

URL haz clic derecho para seleccionar Pegar. De esta forma sobre esta casilla se pegará la dirección antes copiada del vídeo elegido.


332

7. En la sección Opciones Avanzadas de esta pestaña marca la opción Volcado/Salvar y a continuación pulsa en el botón Opciones …

8. En el cuadro de diálogo Volcado de salida, en la sección Outputs marca Archivo. A continuación pulsa en el botón Explorar para localizar la carpeta donde se guardará el archivo descargado y el nombre con que se guardará. En este caso como se trata de un vídeo de Windows Media Video la extensión será: WMV. Marca la opción Entrada de volcado raw y pulsa en el botón OK para guardar esta configuración.

9. Desde el panel Abrir pulsa en el botón Ok para iniciar la descarga. La consola de VLC

Player mostrará el progreso del proceso de descarga. 10. Cuando hayas terminado podrás utilizar el explorador de archivos y situarte en la

carpeta destino para hacer doble clic sobre el archivo descargado y visualizarlo con el reproductor multimedia instalado por defecto en el sistema. También podrás utilizar VLC Media Placer para reproducirlo mediante Archivo > Abrir.

4.3.3 Sitios web para descarga de vídeos Actualmente Youtube es el líder en portales con servicio de vídeo en línea. Sin embargo cada vez proliferan más los sitios web de este tipo donde es posible subir y visualizar contenidos de vídeo. En algunos de ellos también se pueden descargar vídeos al disco duro local para visualizarlo con los alumnos en aulas sin conexión a internet y también asegurando la actividad frente a las limitaciones de una conexión modesta.


333

En algunos casos se puede aplicar el plugin Unplug, otras veces el volcado de red con VLC Player y en otros casos en el mismo sitio se ofrece como alternativa la descarga directa del archivo de video. A continuación se citan algunos de los servicios de vídeos más conocidos, el formato de vídeo utilizado y el procedimiento sugerido para la descarga de activos:

1. YouTube http://www.youtube.com FLV Firefox+Unplug

2. Mediateca de EducaMadrid.

http://mediateca.educa.madrid.org/ FLV Firefox+Unplug

3. TeacherTube

http://www.teachertube.com/ FLV Descarga directa a partir de la ruta ofrecida en la etiqueta para Wordpress.

4. Google Vídeo http://video.google.es/ FLV y MP4 Firefox+Unplug para FLV y Descarga directa para MP4-Ipod

5. Revver

http://revver.com/ MOV Firefox+Unplug

6. Metacafe

http://www.metacafe.com/ FLV Firefox+Unplug

7. MySpace http://myspace.com/ FLV Firefox+Unplug

8. Dailymotion http://www.dailymotion.com/ FLV Firefox+Unplug

9. Jumpcut http://jumpcut.com/ FLV Firefox+Unplug

10. Guba http://www.guba.com/ FLV Firefox+Unplug

11. Sharkle.com http://www.sharkle.com/ FLV


334

Firefox+Unplug

12. Lulu TV http://www.lulu.tv

FLV Firefox+Unplug 13. Hiphopdeal

http://www.hiphopdeal.com/ FLV Descarga directa 14. Vsocial

http://vsocial.com/ FLV Firefox+Unplug

15. Current TV http://www.current.tv/ FLV Firefox+Unplug

16. Mobuzz TV http://dosisdiaria.mobuzz.tv/ WMV-MOV-FLV-MP4 Ipod Descarga directa

17. Colombia aprende http://www.colombiaaprende.edu.co/html/mediateca MOV Firefox+UnPlug

18. Universidad de Sevilla. http://www.sav.us.es/producciondevideo/videoenred.asp RM Descarga directa

19. TV educativa del CNICE http://tv_mav.cnice.mec.es/ MPG, FLV, WMV, MOV Descarga directa

20. TV educativa de la UNED http://www.uned.es/cemav/tv.htm WMV Descarga directa

21. Biblioteca Virtual Cervantes http://www.cervantesvirtual.com/videoteca/ WMV VLC Media Player

22. Mediateca de Educared http://campusuniv.campusred.net/vod-publico2/ WMV VLC Media Player. No se visualiza en Firefox

23. Mediateca Universidad de Oviedo http://mediateca.uniovi.es/mediateca/ WMV


335

VLC Media Player

24. Videoteca CUDI de Méjico http://www.udlap.mx/internet2/video/ WMV VLC Media Player

25. Vive, TV educativa de Venezuela http://www.vive.gob.ve/ WMV-FLV-OGG-MOV-RM Descarga directa

26. Ciencias Galilei http://www.acienciasgalilei.com/videos/video.htm WMV Descarga directa

Vídeo y animaciones ::: Captura de vídeo Diseño de materiales multimedia. Web 2.0

336

4.4 Captura de vídeo


337

4.4 Captura de vídeo En este apartado se explica el procedimiento para capturar vídeo de una cámara digital DV utilizando Windows Movie Maker en equipos Windows o bien Kino en equipos Ubuntu. 4.4.1 Windows Movie Maker para Windows Windows Movie Maker es un programa de Microsoft que permite capturar video, editar su contenido y publicarlo en distintos soportes. Instalación de Windows Movie Maker Se trata de una aplicación integrada dentro de Windows XP Service Pack 2 o Windows Vista y por ello sólo es posible utilizarlo si tenemos instalado en el ordenador esta versión del sistema operativo. Si dispones de Windows XP instalado en tu equipo, comprueba si incluye Service Pack 2:

1. Desde el escritorio de Windows elige: Inicio > Panel de Control > Sistema. 2. En la solapa General deberá aparecer la etiqueta: “Service Pack 2”.

3. Si este texto no aparece aquí deberás visitar la web de Microsoft para descargar el SP2 e instalarlo a continuación: http://www.microsoft.com/spain/windowsxp/sp2/ .

Abrir Windows Movie Maker Una vez instalado SP2, para abrir el programa:

1. Desde el escritorio de Windows, pulsa en el botón Inicio, luego en el botón Todos los programas y por último en Windows Movie Maker.


338

Otra posibilidad es crear un icono de acceso directo en el escritorio:

1. Desde el escritorio de Windows, haz clic en Inicio, luego en Todos los programas. 2. Mantén pulsada la tecla Ctrl y sin soltarla pulsa y arrastra hasta el escritorio de

Windows el elemento Windows Movie Maker. 3. En el escritorio se ha creado el acceso directo a este programa. Para acceder a él en

sucesivas ocasiones haz doble clic sobre el icono que has creado.

Capturar video de cámara DV

1. Abre el programa Windows Movie Maker. 2. Conecta la cámara DV al puerto IEEE 1394 del ordenador. Enciende la cámara y activa

en ella el modo VCR para reproducir el video tomado. 3. En el panel Tareas de película haz clic en la entrada Capturar desde dispositivo de

video. Si no está visible este panel, haz clic en el botón Tareas de la barra de herramientas.

4. Si dispones de más de un dispositivo de captura de video, se mostrará el cuadro de diálogo Dispositivo de captura de vídeo. En la lista Dispositivos disponibles, haz clic en la cámara DV. Si sólo tienes instalado este dispositivo, esta ventana no aparecerá.

5. En el cuadro Introduzca un nombre de archivo para el vídeo capturado, escribe el nombre del archivo de vídeo capturado. Por ejemplo: MiVideo001. En el cuadro Seleccione una ubicación para guardar el vídeo capturado, selecciona la ubicación en la que desea guardar el vídeo o haz clic en Examinar… para seleccionar una nueva ubicación. Windows Movie Maker guarda por defecto las capturas en la carpeta Mis vídeos situada dentro de la carpeta Mis documentos. Dejamos esta opción por defecto y pulsamos en Siguiente>


339

6. En el cuadro Configuración de vídeo, selecciona la configuración de vídeo que deseas utilizar para capturar el vídeo y audio. En este caso vamos a seleccionar la opción Mejor calidad para reproducir en mi equipo (recomendado) porque ofrece una razonable relación calidad/peso de archivo para publicar posteriormente. Clic en Siguiente>


340

Nota:

Para guardar el video con la máxima calidad posible debes elegir la opción Formato de dispositivo digital (AVI DV). El archivo generado tendrá una calidad máxima aunque cada minuto guardado ocupará entre 190 y 210 Mb. Este formato es más idóneo para guardarlo en un dispositivo de cinta o para tomarlo como partida para luego obtener otros formatos más ligeros e idóneos para la web. Para probar otras calidades de captura, selecciona Otras opciones y en la lista desplegable elige otras configuraciones.

7. En el cuadro Método de captura, puedes elegir dos tipos de captura:

• Capturar toda la cinta automáticamente. Se rebobina automáticamente la cinta de la cámara hasta el principio y se captura su contenido completo. Esta captura finaliza cuando se alcanza el final de la cinta o cuando pulses el botón Finalizar.

• Capturar partes de la cinta manualmente. En este caso podrás navegar manualmente por la cinta hasta situarte en el punto deseado para iniciar la captura.

En este caso vamos a seleccionar manualmente un fragmento de grabación para capturar. Por ello activa la segunda opción, asegúrate de que está elegida la casilla Mostrar vista previa durante la captura y pulsa en el botón Siguiente>

8. En la ventana Capturar vídeo se muestra una Vista previa. Utiliza los controles de reproducción situados debajo: Reproducir, Pausa, Stop, Ir al principio, Retroceso rápido, Avance rápido e Ir al Final. Con ellos podrás situarte al inicio del fragmento de video que deseas grabar.


341

9. Una vez situado en el inicio deseado, en la consola Controles de cámara DV, haz clic en el botón Reproducir. Verás su contenido en la ventana Vista previa.

10. Asegúrate de que la casilla Crear clips cuando finalice el asistente está activado. Si deseas detener la captura automáticamente después de transcurridos XX minutos entonces debes activar la opción Capturar límite de tiempo (hh:mm) e introduce este valor. Por ejemplo: 00:01, para capturar sólo un minuto. Si eliges Silenciar altavoces no se reproducirá el audio por los altavoces durante la captura pero sí se incluirá en la captura.

11. A continuación pulsa en el botón Iniciar captura. Observa que durante el proceso de captura se muestra el tiempo de Video capturado y el Tamaño del archivo de vídeo que se va formando.

12. Si no has elegido captura con límite de tiempo, para detener la captura elige Detener captura.

13. Para terminar clic en el botón Finish (Terminar). 14. Tras unos segundos de espera se muestra el clip o clips de video que componen la

captura. Están situados dentro de una colección con el mismo nombre que el proporcionado inicialmente. En este caso MiVideo001.


342

15. El contenido de esta nueva colección se guardar en un único archivo *.AVI ó *.WMV situado en la carpeta Mis Vídeos dentro de la carpeta Mis documentos.

16. Si deseas eliminar una colección, pulsa en el botón Colecciones de la barra de herramientas; en el panel izquierdo selecciona la colección elegida y pulsa la tecla Supr. También debes utilizar el Explorador de archivos de Windows para situarte en la carpeta Mis documentos > Mís vídeos , elegir el archivo del mismo nombre que contiene los recursos de video de esta colección y pulsar la tecla Supr.

17. Asegúrate de que en el panel inferior está activada la vista Escala de tiempo. Si no es así pulsa en el botón Mostrar escala de tiempo que aparece en este panel.

18. Desde el panel de Contenidos que muestra los elementos de la colección arrastra y suelta los clips de vídeo sobre la pista de Video. Para eliminar un clip de la Escala de tiempo, selecciónalo previamente y pulsa la tecla Supr.

19. Quizás sea necesario pulsar reiteradamente el icono de la lupa “+” para visualizar la escala de tiempo a un tamaño adecuado.

20. Pulsa y arrastra hacia la izquierda el selector de recorte del clip de vídeo situado en la pista Video para definir la duración adecuada de cada clip


343

21. Coloca sobre la línea de tiempo los clips de video uno detrás de otro para confeccionar la película.

22. Para guardar la película final, haz clic en la entrada Guardar en el equipo situada en el Panel de película o bien elige Archivo > Guardar archivo de película … > Mi PC

23. Se muestra el Asistente para guardar película donde debes introducir el nombre de la película, por ejemplo: mivideo , y la carpeta donde se guardará el archivo. Dejando la opción por defecto se almacenará en la carpeta Mis documentos > Mis vídeos. Clic en el botón Siguiente >

ç

24. En la cuadro Configuración de película, haz clic en Mostrar más opciones para visualizar las distintos configuraciones de publicación. Activa Otras opciones y en la lista desplegable elige Vídeo para banda ancha (340 Kbps). Observa que en la esquina inferior izquierda de este cuadro se muestran los Detalles de la configuración elegida en cada caso: Tipo de archivo, velocidad de bits, tamaño de la pantalla, relación de aspecto y fotogramas por segundo. Clic en Siguiente.


344

25. Cuando se haya completado con éxito la publicación se mostrará un nuevo cuadro. Marca la casilla Reproducir película al pulsar Finalizar para que ésta se muestre en el reproductor de Windows Media inmediatamente después de haber pulsado el botón Finalizar.

26. Recuerda que el archivo de video se ha guardado con el nombre que has definido dentro de la carpeta Mis documentos > Mis vídeos.

4.4.2 Kino para Ubuntu Linux Kino es un editor de vídeo digital para Linux que permite capturar vídeo de una cámara DV, recortar los clips creados, añadir algunos efectos y exportar a un formato de vídeo: MPEG-1, MPEG-2, VCD, SVCD o DVD. Instalación de Kino

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir o quitar … 2. En el panel Añadir o quitar aplicaciones introduce kino en la casilla de búsqueda y

pulsa la tecla enter. 3. Marca la casilla de activación en la entrada Kino-Editar vídeos DV y pulsa en el botón

Aplicar cambios. 4. Una vez instalado cierra todas las ventanas de la instalación. 5. Si deseas disponer de un icono de acceso directo de Kino sobre el escritorio

selecciona Aplicaciones > Sonido y Vídeo > Kino y arrástralo hasta el escritorio.


345

Configuración de permisos del puerto raw1394

Es necesario activar los permisos oportunos en el puerto raw1394 para que Kino pueda utilizar este puerto en la captura de vídeo. Esta operación sólo se realiza una vez. 1. Selecciona Aplicaciones > Accesorios > Terminal 2. Teclea sudo chmod 666 /dev/raw1394 3. Te solicitará la contraseña de root. Introduce esta password. 4. Cierra la ventana de terminal.

Instalación del paquete mjpegtools

Para que Kino pueda realizar la exportación de vídeo al formato MPEG es necesario instalar en nuestro sistema el paquete mjpegtools. Esta operación sólo se realiza una vez. 1. Elige Sistema > Administración > Gestor de paquetes Synaptic 2. Pulsa el botón Buscar e introduce mjpegtools y pulsa en el botón Buscar. 3. Marca mediante doble clic el paquete mjpegtools aceptando la instalación de los

paquetes dependientes. 4. Clic en el botón Aplicar 5. En el cuadro de diálogo de Resumen selecciona Para ser instalado y luego pulsa en el

botón Aplicar. 6. Una vez finalizada la instalación cierra el gestor de paquetes.

Abrir Kino

1. Selecciona Aplicaciones > Sonido y Vídeo > Kino o bien doble clic sobre el icono situado en el escritorio

2. Las principales partes del interfaz de Kino son:


346

1. Barra de menú: con acceso a las distintas opciones del programa. 2. Barra de herramientas donde se encuentran accesibles los botones de las

acciones de uso más habitual. 3. StoryBoard. En este cuadro se situarán los clips de película o imágenes

capturados o importados. 4. Visor. Mostrará la reproducción del clip de película seleccionado en el panel

StoryBoard. 5. Barra de tareas. Cada botón de esta barra permite realizar las tareas más

habituales durante la edición de una película. 6. Barra de reproducción. Incluye los controles habituales para la reproducción del

clip de vídeo elegido en el panel Storyboard o bien para manejar la cámara DV durante el proceso de captura.

7. Barra de estado. Muestra información de interés durante la edición del vídeo.

Capturar video de cámara DV

1. Conecta la cámara DV al puerto IEEE 1394 del ordenador. Enciende la cámara y activa en ella el modo VCR para reproducir el video tomado.

2. En la barra de tareas pulsa en el botón o pestaña Captura. 3. Kino guarda por defecto el video capturado en un archivo de nombre capture y

extensión .dv en la carpeta personal del usuario del sistema: /home/<usuario>/capture.dv . Si deseas modificar el nombre o la ruta pulsa en el botón Examinar situado a la derecha del cuadro de texto Fichero.

4. Utiliza los controles de reproducción (al principio, hacia atrás, reproducir, pausa, stop, hacia delante o al final) de la propia cámara o de la barra de control de reproducción de Kino para desplazarse por la cinta grabada de la cámara y situarse en el punto de inicio de la captura.


347

5. Inicia la reproducción desde la cámara y cuando aparezca en el visor de Kino pulsa en el botón Captura para iniciarla. Durante este proceso se mostrará en la esquina inferior izquierda de la barra de estado el mensaje: Capturando /home/<usuario>/…

6. Para finalizar la captura pulsa en el botón Detener. Transcurridos unos segundos se creará el archivo *.dv en la carpeta indicada del equipo y este archivo estará disponible desde el panel Storyboard de Kino.

Recortar un clip de vídeo

1. En el panel Storyboard pulsa sobre el clip de video para seleccionarlo. 2. Sobre el panel de tareas derecho haz clic en el botón Recortar. 3. Utiliza los controles de reproducción para visualizar el clip de vídeo


348

4. Durante la reproducción, en el instante que estimes oportuno, debes pulsar en el botón Ajustar el punto de entrada a la posición inicial para definir el punto inicial del clip de vídeo. Idem con el botón Ajustar el punto de salida a la posición inicial para establecer el punto final del clip de vídeo.

5. Otra posibilidad para definir el fragmento de clip de película es arrastrar los marcadores de entrada y salida sobre la línea de tiempo. Si necesitas mayor exactitud puedes definir los valores numéricos de estos puntos introduciéndolos por teclado o bien pulsando en los botones de incremento/decremento adjuntos.

6. Para verificar el fragmento seleccionado puedes reproducir el clip de película activando previamente el botón de reproducción continua del fragmento.

7. Para aplicar el recorte elegido pulsa en el botón Aplicar.


349

Exportar el archivo de vídeo

1. El video final se construirá a partir de la secuencia de clips de película situados de arriba hacia abajo en el panel Storyboard.

2. Para exportar el vídeo final pulsa en el botón Exportar en la barra de tareas. 3. Clic en la pestaña MPEG. 4. En el cuadro de texto Fichero pulsa en el botón Examinar para introducir un nombre

de archivo. Por ejemplo: mivideo. Este archivo se guarda por defecto en la carpeta del usuario actual: /home/<usuario>/

5. Despliega la lista Formato de fichero y elige 0 – MPEG1 Genérico o bien 3 – MPEG2 Genérico. A continuación pulsa en el botón Exportar.

6. Al cabo de unos instantes se habrá creado el archivo mivideo.mpeg en la carpeta indicada.

Reproducir el vídeo final

1. Elige Aplicaciones > Sonido y vídeo > VLC Media Player 2. Abre la carpeta donde se ha creado el archivo mpeg. 3. Arrastra y suelta este archivo de video sobre la consola de reproducción de VLC Media

Player.

4. Al cabo de unos instantes comenzará la reproducción del vídeo a través de VLC media player.

Vídeo y animaciones ::: El DVD como fuente de vídeo Diseño de materiales multimedia. Web 2.0

350

4.5 El DVD como fuente de vídeo


351

4.5 EL DVD COMO FUENTE DE VÍDEO 4.5.1 Extracción de vídeo de un DVD con AutoGordian (Windows) 4.5.1.1 Introducción En este apartado se propone un procedimiento para convertir el vídeo de un DVD a un archivo AVI con códec DivX o XviD. A partir de este AVI es posible extraer un fragmento y convertirlo en un formato más propio de publicación web: FLV, WMV, MOV o RAM. Otra posibilidad es la grabación del archivo AVI resultante en un CD-ROM utilizando un programa de grabación de CDs. Esta segunda opción es habitual en la realización de copias de seguridad de DVDs. En el mercado actual casi todos los reproductores DVD incorporan la prestación de la lectura de CDs y DVDs con archivos AVI DivX y XviD. Nota importante: El software e instrucciones recogidas en este capítulo se proponen como método para realizar copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no comercial. En cualquier caso esta información NO se expone para ser usada como herramienta para vulnerar materiales con copyright. La utilización que se efectúe, total o parcial del archivo de vídeo resultante, estará supeditada en todo momento a los derechos de autor y propiedad intelectual legalmente establecidos. 4.5.1.2 Software necesario DVD Decrypter. La conversión de una película de DVD en otro formato no se puede realizar a partir de la unidad lectora de DVDs. El elevado número de accesos que esta operación necesita podrían dañar esta unidad por sobrecalentamiento. Por este motivo siempre es necesario copiar el contenido del DVD al disco duro. Esta copia de archivos no se puede realizar mediante copiar y pegar usando el Explorador de Windows porque a menudo se encuentran encriptados. Es necesario un programa que desencripte los archivos del DVD y los copie al disco duro. En esta operación no supone ninguna pérdida en la calidad del vídeo. En la actualidad existen algunos programas que realizan esta tarea. Por su facilidad y compatibilidad se propone DVD Decrypter. Se puede descargar de forma gratuita del sitio Free-Codecs.com (http://www.free-codecs.com/) Descarga y descomprime el archivo DVDDecrypter.exe en una carpeta de tu disco duro o pendrive. Se trata de una versión portable del programa que se inicia al ejecutar el archivo DVDDecrypter.exe que aparece dentro de esa carpeta. Auto Gordian Knot Auto Gordian Knot (http://www.autogk.me.uk/) es un paquete de programas que automatiza muchas de las operaciones necesarias para realizar la conversión DVD-AVI. Auto Gordian Knot es un programa gratuito que se descarga de su web oficial. Descarga y descomprime el archivo AutoGordian.exe en una carpeta de tu disco duro o pendrive. Se trata de una versión portable del programa que se inicia al ejecutar el archivo AutoGK 2.47b.exe que aparece dentro de esa carpeta.


352

4.5.1.3 Pasos para convertir DVD a AVI

1. Copiar el DVD al disco duro con DVD Decrypter. 2. Cargar los archivos originales. 3. Seleccionar pista de audio y subtítulos. 4. Definir tamaño del fichero. 5. Configurar parámetros avanzados. 6. Crear película.

A continuación se explican con detalle cada uno de estos pasos. Paso 1. Copiar el DVD al disco duro

1. Introduce el disco DVD en la unidad lectora. 2. Inicia del programa DVD Decrypter. 3. En la lista Source (Origen) selecciona la unidad lectora donde has introducido el DVD.

En el marco derecho aparecerán todos los archivos que contiene.

Notas:

• Unidad lectora de DVD no detectada. A veces el DVD Decrypter no detecta la unidad de DVD y en consecuencia no está disponible en la lista Source. Esto suele deberse a que no están instalados los drivers ASPI correspondientes a esa unidad DVD. ASPI significa Advanced SCSI Programming Interface y es el software que gestiona la comunicación entre el ordenador y el dispositivo lector. Para resolver este problema basta con descargar los drivers ASPI de Windows, descomprimir el ZIP y ejecutar el programa aspiinst.exe que contiene. Estos drivers se pueden descargar desde la web oficial de Adaptec (http://www.adaptec.com). La denominación exacta de este software es: Windows ASPI drivers version v4.71.2 y se pueden aplicar a todos los sistemas Windows a partir de la versión 98.

• Disco DVD bloqueado. En alguna ocasión será necesario, antes de ejecutar DVD Decrypter, introducir el disco en el lector y a continuación abrir el reproductor de que dispongamos para visualizar DVDs (por ejemplo WindDVD o PowerDVD). De esta forma conseguiremos liberar las claves de los archivos protegidos. Cerramos el reproductor y abrimos DVD Decrypter.

4. DVD Decrypter tiene dos modos de trabajo: modo File (Archivo) donde trabaja con los

archivos del DVD y modo IFO donde trabaja con los contenidos del DVD (capítulos, pistas, extras, etc). En este caso es necesario trabajar en modo IFO para lo cual en la barra de menú de DVD Decrypter selecciona Mode > IFO


353

Al activar este modo se mostrarán los contenidos del DVD: (Chapter 1, 2, … = Capítulo 1, 2, …) en lugar de los archivos.

5. Al activar el modo IFO, DVD Decrypter selecciona automáticamente la pista de mayor

duración que es la que suele contener la película. El resto de pistas se corresponden con los créditos, tomas falsas y extras que acompañan. En la pestaña Input (Entrada) comprueba que está seleccionada la película (la pista de mayor duración) y que debajo se encuentran seleccionados todos los capítulos (Chapter 1, 2, 3, …).

6. En el marco Destination (Destino) haz clic sobre el icono de carpeta con lupa para definir la carpeta del disco duro donde se guardarán los contenidos del DVD. Por ejemplo en la carpeta C:\video o bien D:\video si dispones de un segundo disco duro o partición.

7. Es importante realizar la siguiente comprobación. En la barra de menús de DVD Decrypter selecciona Tools > Settings (Herramientas > Configuración). En la pestaña IFO Mode (Modo IFO) dentro de la sección Create Additional Files (Crear Archivos Adicionales), comprueba que la casilla Stream Information (Información de Stream) está activada. Esto producirá en el disco duro un fichero de texto con toda la información del DVD necesaria para que AutoGK concluya con éxito.

8. Desde la ventana principal de DVD Decrypter, pulsa en la pestaña Stream Processing (Procesamiento del Flujo). Se puede activar la casilla Enable Stream Processing (Permitir Procesamiento del Flujo) y desmarcar, por ejemplo, el audio en inglés para que sólo se copie el audio en español. Para extraer del DVD sólo el vídeo o sólo el audio, activa la casilla Enable Stream Processing, seleccionaríamos sólo la pista deseada y en el área Stream: N/A que aparece en el panel inferior activamos la opción Demux. Si eliges un audio AC3, se creará un archivo de audio AC3; si eliges un vídeo, se creará un MPEG-2 sin audio; si eliges una pista de subtítulos (Subtitle) se


354

crearán dos archivos: IFO y VOB (son subtítulos en modo imagen que luego se puede pasar a texto con la aplicación SubRip). En un principio se recomienda dejar activadas todas las pistas.

9. En la pestaña Stream Processing se muestran los principales datos del DVD:

• Dimensiones del vídeo: 720x576 • Proporción: 16:9 • Sistema de vídeo: PAL. • Número de la pista de audio en Español: 0x81 (pista 2 en el orden de

arriba/abajo). 10. Para iniciar el proceso pulsa en el botón Decrypt (Desencriptar).

11. Una vez finalizado el proceso se mostrará el mensaje Operation Successfully Completed! (Operación Completada con Éxito). Pulsa en el botón Aceptar.

12. Cierra la ventana del programa DVD Decrypter.


355

Paso 2. Cargar los archivos originales

1. Abre Auto Gordian Knot.

2. Como podrás observar AutoGK es un programa que simplifica en 4 pasos (steps) la conversión DVD-AVI: • Step 1: Select input source and output file (Paso 1: Elegir fuente de entrada y

archivo de salida). • Step 2: Select audio track and subtitle track. (Paso 2: Elegir pista de audio y

pista de subtítulos). • Step 3: Select output size (Paso 3: Elegir tamaño de salida). • Step 4 (optional): advanced parameters (Paso 4 –opcional-: parámetros

avanzados).

3. En la sección Step 1: Select input source and output file (Paso 1: Elegir fuente de entrada y archivo de salida) En “Input directory” localiza el archivo *.VOB que has capturado del DVD anteriormente.

4. En el cuadro de texto Input directory (Carpeta de entrada), pulsa en el icono situado a la derecha que muestra una flecha verde sobre una carpeta.


356

5. Se muestra el cuadro de diálogo Buscar carpeta. En él debes localizar el archivo video situada en el disco duro donde has guardado los archivos importados con DVD Decrypter. Clic en el botón Aceptar. Observa que cuando AutoGK detecta los archivos de DVD situados en esta carpeta, en el cuadro inferior de esta sección muestra la información del vídeo. En este caso: PAL – 720x576 – 16:9 – 25 fps

6. En el cuadro de diálogo Output file: (Archivo de Salida), se completa automáticamente con el mismo nombre de archivo y la extensión *.avi. Para modificar la carpeta de destino y el nombre de archivo pulsa en el icono que muestra la flecha verde sobre una carpeta.

7. Se muestra el cuadro de diálogo Guardar como. En la lista Guardar en: define la carpeta destino donde se guardará el archivo AVI final. Por ejemplo dentro de la carpeta video. En la casilla Nombre introduce un nombre de archivo para este AVI. Por ejemplo: video. AutoGK añadirá automáticamente la extensión AVI. Pulsa en el botón Aceptar para concluir.

Paso 3. Seleccionar pista de audio y subtítulos

1. En la sección Step 2: Select audio track and subtitle track. (Paso 2: Elegir pista de audio y pista de subtítulos), podrás seleccionar el audio/audios y también los subtítulos.

2. En la lista Audio track(s) (Pistas de Audio), selecciona la pista o pistas de audio que

deseas exportar al archivo de vídeo final. Pueden existir varias procedentes del DVD. Las pistas disponibles en esta lista dependerán de las ofrecidas por el DVD original y del tipo de importación realizada con DVD Decrypter. Si no deseas incorporar no marques ninguna pista.

3. En la lista Subtitle track(s) (Pista de Subtítulos) elige No Subtitles (Ningún Subtítulo). En este cuadro podrías elegir una de las pistas de subtítulos disponibles.

Paso 4. Definir el tamaño del fichero

1. En la sección Step 3: Select output size (Paso 3: Elegir tamaño de salida), podemos seleccionar el tamaño final que ocupará el archivo. Cuanto mayor sea, mejor será la calidad del archivo final.

2. Activa la opción Predefined size (Tamaño predefinido) y en la lista desplegable selecciona la entrada 1 CD (700 Mb) o bien 2 CDs(1400 Mb). En este caso se recomienda esta segunda opción ya que suele ofrecer una relación peso/calidad muy interesante. Al final obtendremos tantos ficheros como CDs hayamos marcado. Esto permitirá grabar en CD los archivos resultantes de esta conversión.

3. Si seleccionas la opción Custom size (MB) (Tamaño personalizado (MB)), podrás definir el tamaño que tendrá la película final. AutoGK creará un archivo AVI con este tamaño y si es superior a 700 Mb, también producirá los archivos resultantes de haber


357

fragmentado éste en trozos de peso igual o inferior a 700 Mb. Esto facilitará la copia en soporte CD.

4. Si seleccionas la opción Target Quality (in percentage) (Calidad Destino (en porcentaje)), podrás seleccionar el % de calidad que tendrá el archivo final con independencia del peso del archivo.

Paso 5. Configurar parámetros avanzados

1. En la sección Step 4 (optional): advanced parameters (Paso 4 –opcional-: parámetros avanzados), podremos configurar opcionalmente algunos parámetros de la película final. Pulsa en el botón Advanced Settings (Configuración avanzada).

En el botón “Advanced Settings” se accede a la configuración de los parámetros avanzados

2. En el cuadro Advanced Options (Opciones Avanzadas) se puede configurar:

• Output resolution settings (Configuración Resolución Vídeo). Permite definir la anchura o resolución horizontal del vídeo (la vertical será calculada automáticamente en función de la proporción de la película). Si se selecciona Auto width (Anchura automática), AutoGK calculará la resolución más óptima en función de un test de compresibilidad. Es la opción recomendada. Si se elige Minimum width (Anchura mínima) o bien Maximum width (Anchura máxima) y en el contador derecho se define una anchura –por ejemplo, 640 píxeles- entonces la resolución horizontal que utilizará AutoGK para crear la película final será como mínimo o como máximo respectivamente el valor indicado. Si marcas la opción Fixed width (Anchura Fija), la película tendrá exactamente como resolución horizontal la cantidad de píxeles indicada.

• Output audio type (Tipo de Audio de Salida). Permite definir el tipo de audio que deseamos en la película: AC3, VBR MP3 (bitrate variable) o bien CBR MP3. En la mayoría de los casos la opción recomendada es Auto. Si eliges la opción Auto (Automática), para archivos de 700 Mb o menos, el audio será: VBR MP3 a 128 Kbps. Sin embargo para archivos superiores a 700 Mb, el formato de audio será AC3. Si hemos incluído dos pistas de audio y aquí hemos configurado un tipo concreto de audio, ambos tendrán ese formato: ambas AC3 o bien ambas MP3. Si existen dos pistas de audio y aquí elegimos Auto, entonces la primera tendrá formato AC3 y la segunda MP3 VBR 128 Kbps.


358

• Códec. Se puede usar cualquiera de los dos: DivX y XviD. Es necesario que el códec elegido esté instalado en el equipo. Recuerda que al instalar Auto Gordian Knot el códec de XviD ya se instala directamente porque viene incluído en el paquete mientras que DivX (versión Create) es necesario descargarlo e instalarlo aparte.

• Subtitle Options (Opciones de SubTítulos). Este apartado sólo es necesario configurarlo si hemos incluído subtítulos en la película final. Si marcas la opción Display only forced subtitles (Mostrar solamente subtítulos forzados) sólo se mostrarán los subtítulos forzados, es decir, aquellos que se muestran siempre en la película aunque no tengamos activados los subtítulos. Ejemplo: Traducción al español o inglés del discurso de un personaje que habla en un tercer idioma y cuyo contenido se considera importante para el desarrollo de la acción. En el paso 2 tendríamos que haber selccionado la pista de subtítulos en el idioma adecuado. La opción Use external subtitles se refiere a la posibilidad de cargar los subtítulos de un archivo externo pero no funciona bien en todos los reproductores por lo que conviene no activarlo.

3. Si pulsas en el botón Preview (Vista previa), tras cierta espera, podrás ver una vista

previa del aspecto final del vídeo pero sin el audio.

Paso 6. Crear película

1. Cuando se ha finalizado la configuración de todos los parámetros, haz clic en el botón Add Job (Añadir Tarea).

2. En la Cola de Tareas (Job queue) aparecerá una nueva entrada con información del nombre del archivo AVI final, su carpeta de ubicación y una casilla de verificación activada.

3. Una vez introducida esta tarea en la Cola de Tareas podemos cerrar AutoGK y continuar en otro momento con la conversión definida. Otra posibilidad es abrir otro DVD para añadir una segunda tarea de conversión a la lista. En cualquier caso la codificación no comenzará hasta que no se lo indiquemos.

4. Para comenzar con la creación de la película AVI final pulsa en el botón Start (Inicio).

5. AutoGK irá abriendo y cerrando programas según lo vaya necesitando para realizar las distintas partes del proceso: creación del proyecto con DGIndex, test de compresibilidad, compresión con VirtualDubMod, audio con BeSweet, etc. En la


359

ventana de eventos (Log Window) irán apareciendo los mensajes de lo que se está haciendo. En los primeros pasos habrá que fijarse en la barra de tareas porque al desplegar alguna de estas aplicaciones será necesario aceptar las condiciones de la licencia de uso para que el proceso pueda continuar.

6. Una vez pulsado en el botón Start (Inicio) el proceso ya está automatizado y es necesario que se realice sin pausas. Si durante el transcurso del mismo pulsas en el botón Abort (Detener) habría que empezar desde el principio en la siguiente tentativa.

7. La duración de la conversión dependerá de la duración del DVD original y de las características del equipo (procesador, memoria RAM, disco duro, etc.). A título orientativo, por ejemplo, un DVD con una película de 2 horas de duración, en un Pentium IV-2Ghz con 1Gb de RAM puede tardar alrededor de 5 horas. Por ello es necesario armarse de un poco de paciencia. Si vas a dejar el ordenador trabajando solo, una opción interesante es marcar la casilla Shutdown when done (Apagar cuando termine). De esta forma el equipo se apagará cuando finalicen todos las tareas almacenadas en la Cola de Tareas.

8. La tarea terminará cuando en la Log Window (Ventana de eventos) aparezca el mensaje de tarea finalizada: [dd/mm/aaaa hh:hh:ss] Job finished. Total time: X hours XX minutes X seconds.

9. Cierra la ventana de Auto Gordian Knot. Paso 7. Ver película

1. Cuando ha finalizado la conversión, utiliza el Explorador de Windows para situarte en la carpeta donde has creado el archivo AVI final. En el ejemplo anterior era la carpeta video situada en el directorio raíz del disco duro C: ó D:

2. Con intención de ahorrar espacio en disco y una vez terminado con éxito el proceso de conversión DVD-AVI, conviene eliminar la carpeta temporal auto_gk que se ha creado en la misma carpeta donde se ha guardado este AVI. También conviene borrar los archivos *.VOB que se han generado con DVD Decrypter.

3. Para visualizar el video arrástralo y suéltalo sobre una ventana de VLC Media Player. Este reproductor puede leer archivo AVI codificados con Xvid.

Nota:

La mayoría de los reproductores de DVD actuales reconocen el formato DivX y XviD. Comprueba en la documentación del tuyo si es compatible con estos formatos. Algunos modelos suelen mostrar incluso en su carcasa exterior el logo de DivX para indicar esta característica. Si es así, basta con grabar el archivo AVI desde el disco duro del ordenador a un CD-ROM como si se tratase de un CD de datos utilizando un programa tipo Nero Burning o similar. Al introducir este disco en el reproductor DVD se visualizará en pantalla.


360

4.5.2 Extraer fragmentos de un DVD con ChopperXP y Super © (Windows) 4.5.2.1 Introducción Chopper XP es una aplicación que permite extraer fácilmente un fragmento de cualquier DVD. Es un cortador de archivos .vob donde a través de un sencillo interfaz donde se reproduce el archivo original se puede marcar el inicio y final del fragmento seleccionado para luego guardarlo como un archivo independiente. Se propone utilizar este programa para obtener un fragmento de vídeo que luego se convertirá a FLV utilizando Super © 4.5.2.2 Instalación de Chopper XP

1. Descarga y descomprime el archivo chopperXP.exe en una carpeta de tu equipo o pendrive. Es la versión portable de este programa que se ejecuta al acceder a la carpeta resultante y ejecutar el archivo Chopper.exe

4.5.2.3 Uso de Chopper XP para extraer fragmentos DVD.

1. Descarga y descomprime el archivo dteatro_vob.zip en la carpeta miweb\videos. Como resultado de la extracción obtendrás el archivo dteatro.vob. Se trata de un archivo VOB extraído de la carpeta VIDEO_TS de un DVD de vídeo. La elevada calidad de un archivo .vob condiciona que tenga una corta duración para evitar un elevado tamaño de archivo a descargar.

2. Abre Chopper XP

3. Selecciona File > Open vob (Archivo > Abrir vob)


361

4. En el cuadro de diálogo Select source vob file (Elegir archivo vob fuente) elige la carpeta miweb\videos en la lista Buscar en. Selecciona el archivo dteatro.vob y pulsa en el botón Abrir.

5. En la consola de Chopper pulsa en el botón play para iniciar la reproducción del archivo .vob. Puedes utilizar el resto de botones para detener, ir al principio, ir al final, etc. Otra posibilidad es arrastrar el deslizador sobre la barra de progreso cuando se está reproduciendo el archivo.

6. Para marcar el inicio del fragmento a extraer haz clic en el botón Mark In en el instante que se considere de la reproducción. Para marcar el final del fragmento pulsa en el botón Mark Out. Utiliza estos botones para elegir un fragmento de VOB.

7. Una vez seleccionado el fragmento elige File > Save vob as (Archivo > Guardar vob como)

8. En el cuadro Save file as (Guardar archivo como ) elige en la lista Guardar en la carpeta destino donde se guadará el nuevo .vob. Por ejemplo: miweb\videos.


362

9. Introduce el nombre del nuevo archivo. Por ejemplo: dteatro_one.vob. Pulsa en el botón Guardar.

10. Durante el proceso de extracción se mostrará la barra de progreso del cuadro de diálogo Extracting vob (Extrayendo vob) .

11. Al finalizar aparece el mensaje File extraction successful (Extracción de archivo con éxito). Pulsa en el botón Aceptar.

Nota: Chopper XP puede leer directamente un archivo .vob de la carpeta video_ts de un dvd aunque la opción más recomendable es copiar previamente el .vob original al disco duro del equipo. En algunos discos dvd será necesario utilizar el programa Decrypter para realizar la copia del .vob del dvd al disco duro.


363

4.5.2.4 Conversión de formato VOB a FLV El formato *.VOB tiene una calidad y peso muy elevados para ser utilizados en la publicación web. En este apartado se describe el procedimiento para transformar un archivo .vob al formato .flv utilizando el programa Super ©

1. Abre Super © 2. Sobre la lista de archivos haz clic derecho y selecciona Add Multimedia File(s)

(Añadir Archivo(s) Multimedia). Otra posibilidad es arrastrar y soltar el archivo a convertir en este recuadro desde el explorador de archivos.

3. Despliega la lista Buscar en: para seleccionar la carpeta miweb\videos. Elige el archivo dteatro.vob y pulsa en el botón Abrir.


364

4. Select the Output Container (Elige el contenedor de salida). Despliega esta lista y selecciona la opción “swf or flv (Flash)”. En este caso el códec de vídeo será Flash Video y el códec de audio: mp3.

5. Video. En este caso marca el tamaño de ventana del vídeo 320x240 en el apartado Video Scale Size (Tamaño de ventana del vídeo). Marca NoChange para no modificarlo respecto al original. El resto de opciones pueden modificarse pero en este caso vamos a aceptar los valores por defecto.

6. Audio. Dejamos los valores por defecto. Si no interesa integrar el audio en el vídeo final marcaríamos en la opción Disable Audio (Desactivar Audio).

7. En el área OUTPUT aparece un resumen de las opciones seleccionadas anteriormente.

8. Para definir la carpeta donde se guardará el vídeo destino haz clic derecho sobre la ventana de Super © para elegir Output File Saving Management (Configuración de la carpeta destino).

9. En el cuadro de diálogo Browse to save the rendered file? (Navegando para guardar el archivo renderizado?) selecciona la carpeta destino, por ejemplo, miweb\videos. Clic en el botón SAVE Changes (Guardar cambios).

10. Para iniciar el proceso de conversión haz clic en el botón Encode (Active Files). 11. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vídeo

como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botón OK. 12. Tras concluir el proceso puedes ver el resultado final pulsando en el botón Play The

Last Rendered File (Reproducir el último archivo renderizado). Otra posibilidad es utilizar el reproductor VLC Media Player instalado con anterioridad y que permite visualizar archivos FLV.


365

4.5.3 Extracción de vídeo de un DVD con dvd::rip (Ubuntu) 4.5.3.1 Introducción En este apartado se propone un procedimiento para convertir el vídeo de un DVD a un archivo AVI con códec XviD. A partir de este AVI es posible extraer un fragmento y convertirlo en un formato más propio de publicación web: FLV, WMV, MOV o RAM. Otra posibilidad es la grabación del archivo AVI resultante en un CD-ROM utilizando un programa de grabación de CDs. Esta segunda opción es habitual en la realización de copias de seguridad de DVDs. En el mercado actual casi todos los reproductores DVD incorporan la prestación de la lectura de CDs y DVDs con archivos AVI DivX y XviD. Nota importante: El software e instrucciones recogidas en este capítulo se proponen como método para realizar copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no comercial. En cualquier caso esta información NO se expone para ser usada como herramienta para vulnerar materiales con copyright. La utilización que se efectúe, total o parcial del archivo de vídeo resultante, estará supeditada en todo momento a los derechos de autor y propiedad intelectual legalmente establecidos. 4.5.3.2 Software necesario dvd::rip Es un programa que permite ripear un DVD de vídeo, es decir, obtener un archivo o archivos de vídeo en el disco duro a partir de los contenidos de este soporte. Para instalar dvd::rip en Ubuntu:

1. Desde el escritorio selecciona Aplicaciones > Añadir y quitar programas 2. En la casilla Buscar introduce el término rip. 3. Marca la casilla del programa dvd::rip y a continuación pulsa en el botón Aplicar

cambios. Sigue los pasos hasta finalizar. mplayer dvd::rip utiliza por defecto el programa mplayer para reproducir los fragmentos de DVD y archivos generados. Para instalarlo sigue una rutina similar a la anterior: Aplicaciones > Añadir y quitar programas. Códecs para DVD encriptados La mayoría de los DVDs comerciales están encriptados. Para poder leerlos sin problemas desde dvd::rip, mplayer o incluso VLC Media Player es necesario instalar una librería adicional. Para ello sigue estos pasos:

1. Abre un terminal de consola mediante Aplicaciones > Accesorios > Terminal. 2. Teclea la siguiente orden:

sudo apt-get install libdvdread3 debhelper fakeroot

3. Se solicita la contraseña de root y el CD de instalación de Ubuntu. 4. A continuación ejecuta el siguiente comando:

sudo /usr/share/doc/libdvdread3/install-css.sh


366

Configuración de dvd::rip

1. Inicia el programa mediante Aplicaciones > Sonido y vídeo > dvd::rip 2. La primera vez que se inicia este programa se muestra el cuadro de diálogo de

Preferencias. Estas opciones se podrán modificar en todo momento desde el programa a Editar > Preferencias.

3. En la pestaña Configuraciones básicas se muestran las distintas opciones por defecto del programa. Será necesario utilizar el explorador de archivos para crear la carpeta dvdrip-data dentro del directorio /home/<usuario>/. En esta carpeta será donde se guarden los archivos de la conversión. Tras la creación de esta carpeta pulsa en el botón Comprobar todo para obtener el OK.

4. En la pestaña Comandos comprueba que el Comando de reproducción de DVD y el Comando de reproducción de archivo es el programa mplayer que hemos instalado para reproducir los DVDs y archivos creados.


367

5. Para cerrar la configuración pulsa en el botón Aceptar. 4.5.3.3 Convertir DVD a AVI con dvd::rip

1. Introduce el DVD en la unidad del ordenador. 2. Inicia el programa mediante Aplicaciones > Sonido y vídeo > dvd::rip 3. Selecciona Archivo > Nuevo proyecto 4. En la pestaña Almacenamiento introduce el nombre del proyecto de captura.

Ejemplo: cortos2007. En este caso interesa elegir un nombre significativo con el contenido del vídeo.

5. Pulsa en el botón + Crear proyecto. 6. Se muestra el cuadro de diálogo Guardar proyecto y en Nombre: aparece el nombre

del proyecto. Clic en el botón Aceptar. 7. En la pestaña Almacenamiento y en la sección Elegir un modo de extracción marca

la opción Copiar los datos del DVD al disco duro antes de codificar. Conviene activar esta opción para copiar el contenido del DVD al disco duro antes de iniciar la codificación. Esto agilizará el proceso y protegerá la unidad lectora de DVD.

8. Clic en la pestaña Extraer Tìtulo. Pulsa el botón Leer tabla de contenidos del DVD para leer las pistas del DVD que se mostrarán en el listado inferior.


368

9. Para visualizar una pista márcala en el listado y a continuación pulsa en el botón Ver título(s)/capítulo(s) seleccionados.

10. Para comenzar la extracción de la pista al disco duro del equipo, selecciona la pista que deseas y luego pulsa en el botón Extraer título(s)/capítulo(s) seleccionados.

11. Si deseas tener información de la evolución de la extracción pulsa en la pestaña Registro.

12. En la pestaña Codificar comprueba los siguientes parámetros que normalmente suelen venir definidos por defecto:

• Opciones de contenedor > Selecciona contenedor: AVI • Opciones de vídeo > Códec de vídeo: xvid • Opciones de vídeo > Tasa de vídeo: 25.000 • Opciones de vídeo > Hacer dos pasadas: Sí • Cálculo de tasa de bits de vídeo > 2x700 • Opciones del audio > Seleccionar pista: elegir la pista de audio del idioma

adecuado si hubiera varias. • Opciones de audio > MP3: Tasa de bits de 128 kbit/s y 48000 Hz.

13. Para iniciar el procedimiento de codificación pulsa en el botón Codificar. 14. Si deseas ver cómo evoluciona proceso activa la pestaña Registro. 15. Una vez concluido el proceso el archivo AVI resultante de la transformación se

encontrará en la carpeta: /home/<usuario>/<nombre_proyecto>/avi/. Para visualizarlo haz clic derecho sobre este archivo y elige Abrir con MPlayer o bien Abrir con VLC Media Player. Desde el programa dvd::rip puedes reproducir el archivo AVI pulsando en el botón Ver de la pestaña Codificar.

Vídeo y animaciones ::: Conversión de formatos de vídeo Diseño de materiales multimedia. Web 2.0

370

4.6 Conversión de formatos de vídeo


371

4.6 Conversión de formatos de vídeo 4.6.1 Propiedades de un vídeo Introducción MediaInfo es un programa gratuito que permite visualizar las propiedades y metadatos de un archivo de audio o vídeo. ¿Qué información de un archivo multimedia te permite comprobar MediaInfo?

• Metadatos generales del archivo: título, autor, director, album, número de pista, fecha, duración, etc

• Vídeo: códec, bitrate, fotogramas por segundo, aspecto, etc. • Audio: codec, velocidad de muestreo, canales, idioma, bitrate, etc. • Texto: idioma de subtítulos. • Capítulos: número y lista de capítulos.

Cuando el reproductor que estamos utilizando no es capaz de visualizar un archivo de audio o de vídeo por un problema de códecs, MediaInfo es una interesante aplicación porque permite obtener toda la información de ese archivo. Incluso proporciona una dirección en Internet donde es posible encontrar un reproductor o códec con que se pueda visualizar. ¿Qué formatos de archivo puede leer MediaInfo?

• Video: MKV, OGM, AVI, DivX, WMV, QuickTime, Real, MPEG-1, MPEG-2, MPEG-4, DVD (VOB)...

• Audio: OGG, MP3, WAV, RA, AC3, DTS, AAC, M4A, AU, AIFF... • Subtítulos: SRT, SSA, ASS, SAMI...

¿Qué puedes hacer con MediaInfo?

• Leer múltiples formatos de archivo de vídeo y de audio. • Mostrar la información técnica y de metadatos en forma de texto, árbol, html, … • Exportar esta información como texto. • Integración de MediaInfo en el explorador de archivos de Windows

Instalación de MediaInfo en Windows

1. Descarga y ejecuta el archivo MediaInfo_0.7.5.9_GUI_Win32.exe. Es el instalador de MediaInfo. Otra opción es visitar su web y descargar la última versión: http://mediainfo.sourceforge.net/es

2. Otra posibilidad es descargar la versión portable para windows: MediaInfo_0.7.5.9.exe para instalar en una carpeta del disco duro o bien en una pendrive.

Instalación de MediaInfo en Ubuntu Linux

1. Selecciona Aplicaciones > Accesorios > Terminal para abrir un terminal de consola. 2. Autentifícate como root mediante:

su <enter> [introduce contraseña de root] 3. Con el editor gedit abre el archivo que contiene el listado de fuentes de software:

gedit /etc/apt/sources.list

4. En la última línea del este archivo de fuentes añade:


372

deb http://srvremi.free.fr/ubuntu gutsy main

5. Desde gedit selecciona Archivo > Guardar y luego cierra este editor. 6. Reinicia el listado de fuentes de instalación mediante:

apt-get update

7. Instala el programa mediante el comando:

apt-get install mediainfo-gui

8. Para acceder al programa elige Aplicaciones > Sonido y vídeo > MediaInfo Uso de MediaInfo

1. Descarga y descomprime el archivo flv.zip a la carpeta del disco duro. Repite el mismo proceso para el archivo dteatro_divx.zip. Como resultado de esta tarea dispondrás en la menciona carpeta de los archivos: dteatro.flv y dteatro_divx.avi

2. Existen dos métodos alternativos para abrir un archivo con MediaInfo: a. Inicia el programa y luego selecciona Archivo > Abrir archivo para localizar y

abrir uno de los archivos multimedia descargados anteriormente, p.e., dteatro.flv.

b. Si has instalado MediaInfo en Windows desde el explorador de archivos de Windows haz clic derecho sobre el archivo multimedia y selecciona la opción MediaInfo.

3. Siguiendo cualquiera de estos dos procedimientos se mostrará la ventana de

MediaInfo donde se puede leer la infomación relativa al archivo abierto.

4. Repite los pasos 2 y 3 para el archivo dteatro_div.avi.


373

5. Observa que al abrir un archivo de vídeo con MediaInfo se ofrece un botón de SitioWeb con enlace a una web donde se pueden obtener los códecs o reproductor necesarios para reproducir ese archivo en nuestro equipo.

4.6.2 Conversión de formatos de vídeo en Windows: SUPER © Introducción Para realizar la conversión de formatos de vídeo se propone Super © en equipos Windows y WinFF en Ubuntu. Super © significa “Simplified Universal Player Encoder & Renderer”, es decir, “Reproductor, Codificador y Renderizador Universal Simplificado”. Se trata de un programa gratuito para Windows que ofrece un sencillo interfaz para convertir un archivo de vídeo a otro formato. No requiere la instalación de códecs externos porque ya los incorpora en su instalación. Super © reproduce y admite para convertir una amplia variedad de formatos de archivos de entrada:

• Vídeo: 3gp/3gp/3g2(teléfonos móviles), asf, avi(DivX, H263, H263+, H264, XviD, MPEG4, MSmpeg4 etc..), dat, fli, flc, flv (flash video), mkv, mpg (Mpeg I, Mpeg II), mov (H263, H263+, H264, MPEG4 etc..), mp4(H263, H263+, H264, MPEG4), ogg, qt, rm, ram, rmvb, str (playstation), swf (flash), ts (HDTV), viv, vob y wmv.

• Audio: aac, ac3, amr, mmf, mp2, mp3, mp4, mpc, ogg, ra, wav, wma. Super © soporta la conversión a los siguientes formatos:

• Vídeo: 3gp/3gp/3g2, asf, avi, avi for Pocket PC, gif, mov, mp4, mpg, ogg, swf, flv, vob, wmv, AutoMode, Apple-IPod, MS-Zune, Sony-PS3 y PSP.

• Audio: aac, ac3, amr, mmf, mp2, mp3, mp4, mpc, ogg, wav y wma. Instalación de Super © Descarga y ejecuta desde aquí el instalador de Super ©: SUPERsetup_200825.exe. Otra posibilidad es visitar su página web para descargar una versión más reciente: http://www.erightsoft.com/SUPER.html


374

Otra posibilidad es descargar y descomprimir a una carpeta de tu disco duro o pendrive la versión portable de este programa: SUPER.exe Conversión de un vídeo a distintos formatos

1. Descarga y descomprime el archivo wmp.zip. Como resultado de la extracción obtendrás el archivo de vídeo: dteatro.wmv.

2. Abre Super ©

Paso 1: Selecciona el archivo fuente.

3. Para seleccionar el archivo de vídeo original pulsa y arrastra ese fichero desde el explorador de Windows para soltarlo en el recuadro inferior de la ventana de Super ©. Otra opción alternativa es hacer clic derecho sobre este recuadro y seleccionar la opción Add Multimedia Files (Añadir archivos multimedia) para examinar el sistema de carpetas de tu disco duro y seleccionar el archivo de vídeo correspondiente.

4. Utiliza cualquiera de los dos procedimientos alternativos anteriormente descritos para situar en la lista de archivos fuente, el vídeo dteatro.wmv Para eliminar un archivo


375

de esta lista haz clic derecho sobre este elemento y selecciona la opción Remote item(s) from job list (Eliminar elemento(s) de la lista de tareas).

Paso 2: Define el formato del archivo multimedia destino.

5. Selecciona como destino el formato del archivo contenedor del vídeo. Super © ofrece una amplia gama de formatos. En este caso vamos a seleccionar el *.flv (Flash Vídeo). Despliega la lista Select the Output Container (Elegir Contenedor de Salida) y elige la opción swf o flv (Flash).

6. Observa que en la lista Select the Output Video Codec (Elige el códec del vídeo de

salida) puedes seleccionar el códec de vídeo para ese archivo final. En este caso sólo se ofrece una opción: Flash Video pero en función del contenedor elegido podría haber varios.

7. En la lista Select the Output Audio Codec (Elige el códec del audio de salida) es posible seleccionar el códec de audio. En este caso sólo se ofrece una opción: mp3 pero en función del contenedor elegido podría haber varios.

Paso 3: Configura las opciones de vídeo y audio del archivo multimedia destino

8. En la sección VIDEO del panel de Super © puedes aceptar las opciones por defecto o bien personalizar ciertos detalles del vídeo: • Video Scale Size (tamaño de la ventana): que no cambie – NoChange- o bien un

tamaño concreto, por ejemplo, 320x240 píxeles. • Aspect (aspecto): es la relación de proporcionalidad entre anchura y altura de la

ventana del vídeo. No selecciones ninguna opción para no modificar el aspecto original. Otra posibilidad es elegir 4:3 o bien 16:9 que son las proporciones más habituales.

• Frame/Sec (fotogramas por segundo). En este caso define 25 fps. • Bitrate kbps. Puedes elegir un bitrate del vídeo seleccionando una opción de esta

lista desplegable. • Options(opciones). Calidad del vídeo, ajustes, opciones de recorte (Crop), etc.


376

9. En la sección AUDIO del panel de Super © puedes aceptar las opciones por defecto o bien personalizar ciertos detalles del audio:

• Disable Audio (Desahibilitar el audio): marca esta opción si deseas que el vídeo

destino no contenga la pista de audio. • Samplig Freq (Frecuencia de muestreo): selecciona el valor más apropiado. • Channels (Canales): elige 2 para una calidad estéreo y 1 para mono. • Bitrate Kbps: para elegir otro valor distinto despliega la lista y elige una opción. • DVD Language Select ..: Si el archivo original es una pista de DVD aquí podrás

seleccionar el número de pista del audio correspondiente al idioma elegido. Paso 4: Define la carpeta destino del archivo

10. Clic derecho sobre el archivo de vídeo la lista para seleccionar Output File Saving Management (Configuración de la carpeta destino).


377

11. En el cuadro de diálogo Browse to save the rendered file? (Navegando para guardar el archivo renderizado?) selecciona la carpeta destino. Clic en el botón SAVE Changes (Guardar cambios).


378

Paso 5: Codificar el archivo destino.

12. Para iniciar el proceso de conversión haz clic en el botón Encode (Active Files).

13. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vídeo como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botón OK.

14. Tras concluir el proceso puedes ver el resultado final pulsando en el botón Play The Last Rendered File (Reproducir el último archivo renderizado). Otra posibilidad es utilizar el reproductor VLC Media Player instalado con anterioridad y que permite visualizar archivos FLV.

Nota: Como veremos más adelante, el formato de vídeo .flv es muy apropiado para la publicación en la web. Por este motivo es necesario disponer de un programa como Super © para convertir de forma rápida y fácil cualquier vídeo a este formato. 4.6.3 Conversión de formatos de vídeo en Ubuntu Linux: WinFF WinFF es un convertidor gratuito de formatos de vídeo para sistemas windows, linux y mac. Permite convertir un vídeo de un formato a otro de una forma fácil, rápida y en un solo paso. Este programa ofrece al usuario un interfaz gráfico aunque en realidad la tarea de conversión se traslada automáticamente a una línea de comandos para que la ejecute ffmpeg, otro programa muy efectivo pero que sólo se puede utilizar mediante línea de comandos. De esta forma WinFF nos evita tener que conocer y escribir la sintaxis de ffmpeg en una ventana de terminal. La instalación de WinFF en un sistema Ubuntu consta de dos pasos: la instalación del paquete ffmpeg y del programa WinFF


379

Instalación de ffmpeg En Ubuntu se puede instalar el paquete ffmpeg utilizando el gestor de paquetes de Synaptic (Sistema > Administración > Gestor de paquetes Synaptic) pero esta instalación no permitirá que ffmpeg convierta algunos formatos de vídeo interesantes porque se trata de una versión que no incorpora sus correspondientes códecs, por ejemplo, el códec mp3 de audio para archivos de salida en formato FLV. Por este motivo se recomienda realizar una instalación a partir del código fuente de ffmpeg. Los pasos para realizar esta tarea son:

1. Abre una ventana de terminal mediante Aplicaciones > Accesorios > Terminal. 2. Para obtener información sobre el paquete de código fuente de ffmpeg teclea:

sudo apt-get build-dep ffmpeg

3. Para obtener información y descargar los paquetes adicionales teclea y pulsa enter:

sudo apt-get install liblame-dev libfaad2-dev libfaac-dev libxvidcore4-dev liba52-0.7.4 liba52-0.7.4-dev libdts-dev

4. Para descargar al equipo el paquete de código fuente de ffmpeg teclea y pulsa enter:

apt-get source ffmpeg

5. Para situarse en la carpeta que contiene el código fuente teclea y pulsa enter:

cd ffmpeg-*/

6. Define las opciones de configuración para la compilación del código fuente ffmpeg. Esto permitirá que ffmpeg incorpore los códecs más importantes. Si dispones de una versión de Ubuntu anterior a la 7.10 teclea en una sola línea:

./configure --enable-gpl --enable-pp --enable-vorbis --enable-libogg --enable-a52 --enable-dts --enable-dc1394 --enable-libgsm --disable-debug --enable-mp3lame --enable-faad --enable-faac --enable-xvid --enable-shared --prefix=/usr

Si dispones de la versión 7.10 de Ubuntu entonces teclea en una sola línea:

./configure --enable-gpl --enable-pp --enable-libvorbis --enable-libogg --enable-liba52 --enable-libdts --enable-dc1394 --enable-libgsm --disable-debug --enable-libmp3lame --enable-libfaad --enable-libfaac --enable-xvid --enable-shared --prefix=/usr

7. Compila el código introduciendo la orden:

make

8. Crea el paquete de instalación y ejecútalo mediante:

sudo checkinstall -D make install Nota:

Puede ocurrir que más adelante Ubuntu nos proponga actualizar el paquete ffmpeg. En este caso conviene no instalar la actualización porque perderíamos la configuración que hemos definido y algunas conversiones de formatos de archivo no se realizarían con éxito.


380

Instalación de WinFF

1. Descarga e ejecuta el paquete de instalación de WinFF: winff-0.33-i386.deb. Otra posibilidad es visitar la web oficial de su desarrollador y descargarte la última versión: http://biggmatt.com/winff/

2. Al hacer doble clic sobre un paquete *-deb se mostrará la ventana del Instalador de paquetes. Clic en el botón Instalar el paquete.

3. Introduce la contraseña de root para que la instalación se pueda completar. 4. Cierra las ventanas del instalador.

Conversión de un vídeo a distintos formatos

1. Descarga y descomprime el archivo wmp.zip a la carpeta personal. Como resultado de la extracción obtendrás el archivo de vídeo: dteatro.wmv.

2. Abre WinFF mediante Aplicaciones > Sonido y vídeo > WinFF 3. En la ventana de WinFF pulsa en el botón Add (Añadir) y navega para localizar,

señalar y abrir el archivo dteatro.wmv. Otra posibilidad es utilizar el explorador de archivos y arrastrar el icono de este archivo de vídeo desde su carpeta para soltarlo sobre la ventana de WinFF. Esta aplicación admite la conversión por lotes de un listado de archivos de vídeo con sólo añadirlos a esta lista.

4. En este caso vamos a convertir el archivo de vídeo fuente al formato FLV de Video Flash. En la lista desplegable Convert to … selecciona la opción Flash Vídeo (flv) for Web use (4:3) . Si pulsas en el botón Options (Opciones) se mostrará en la parte inferior distintos parámetros de la conversión que se pueden personalizar.

5. En el cuadro de texto Output folder (Carpeta destino) se indica la carpeta donde se guardará el archivo de vídeo final.

6. Para iniciar la conversión pulsa en el botón Convert (Convertir).

Reproducir el vídeo FLV 1. Abre el reproductor: Aplicaciones > Sonido y Vídeo > VLC media player. Este

reproductor es una excelente aplicación para visualizar vídeos FLV de Flash. 2. Selecciona Archivo > Abrir rápido Archivo para navegar a la carpeta donde se

encuentra almacenado el nuevo archivo. Selecciónalo y pulsa en el botón Abrir. Otra posibilidad es utilizar el explorador de archivos y arrastrar el icono de este archivo de vídeo desde su carpeta para soltarlo sobre la ventana de VLC Media Player.

Vídeo y animaciones ::: Integración HTML de Vídeo Flash (FLV) Diseño de materiales multimedia. Web 2.0

381

4.7 Integración HTML básica de vídeo flash


382

4.7 Integración HTML básica de Vídeo Flash 4.7.1 Introducción En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un gran auge como medio para publicar contenidos de vídeo en Internet. Varias son las razones que justifican este fenómeno:

• El cliente sólo necesita tener instalado el plugin o reproductor de Adobe Flash en su navegador web.

• Es accesible desde la mayoría de los sistemas operativos (Windows, Linux, Mac, etc) y navegadores web (IExplorer, Firefox, NetScape, Safari, Opera, etc). Esto garantiza un acceso universal al contenido.

• La consola de reproducción se puede incluir fácilmente en una página web y al estar diseñado con Adobe Flash admite un skin con un alto grado de personalización: fondos, colores, botones, logo del centro o empresa, comportamiento, etc

• Se puede reproducir en distintos reproductores locales: MPlayer, VLC media player, Riva, Xine, et.

• Los repositorios de vídeo más conocidos en Internet han apostado por este formato para la difusión de vídeos: YouTube, GoogleVideo, iFilm, etc.

• El formato FLV utiliza los códecs Sorenson Spark y On2 VP6 que permiten una alta calidad visual con bitrates reducidos.

• Es un formato que admite streaming, es decir, tras unos segundos iniciales de almacenamiento en el buffer, comienza su visualización y esta se produce de forma ininterrumpida mientras se completa en segundo plano la descarga del resto del vídeo.

En este apartado veremos cómo integrar vídeos FLV en una página web utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering (http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la configuración de múltiples parámetros y admite la reproducción de archivos flv simples y de listas de reproducción. 4.7.2 Reproductor de un vídeo FLV

1. Descarga y descomprime el archivo flvplayer.zip en una carpeta del disco local. 2. Desde el explorador de archivos abre la carpeta flvplayer y haz doble clic en el

archivo index.html. Con esto se abrirá el navegador mostrando el contenido de un video FLV.

3. La consola de reproducción para un archivo flv permite iniciar y detener el vídeo así como arrastrar la barra de progreso de la pista y del volumen. En la reproducción de listas de vídeos FLV también se proporcionan botones para saltar al siguiente o anterior de la lista. También se ofrece un botón que permite visualizar el vídeo en modo pantalla completa.

4. Regresa al explorador de archivos en la carpeta flvplayer. Dentro de esta carpeta se encuentra: • La página HTML que permite el acceso a todo el conjunto: index.html • El reproductor de vídeo: flvplayer.swf • El fichero de javascript swfobject.js que asegura la integración del reproductor

en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.

• El video FLV que se reproduce: video.flv • La imagen previa en formato GIF que se muestra antes de iniciar la reproducción

del vídeo y que tiene la misma dimensión del vídeo: imagen.gif


383



<script type="text/javascript" src="swfobject.js"></script> Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para asegurar referencia al código javascript que asegura la correcta integración del reproductor.

Y luego en el cuerpo de la página el siguiente código HTML: <p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Se necesita descargar el reproductor de Flash</a> para ver este video.</p> <script type="text/javascript"> var s1 = new SWFObject("flvplayer.swf","single","240","212","7"); s1.addParam("allowfullscreen","true"); s1.addVariable("file","video.flv"); s1.addVariable("image","imagen.gif"); s1.addVariable("width","240"); s1.addVariable("height","212"); s1.write("player1"); </script> En la variable file se indica la referencia a la ubicación del archivo de vídeo flv que se reproduce. Puedes modificar este valor para reproducir un vídeo con otro nombre distinto. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. La botonera ocupa 20 píxeles de altura. Sumados a los 192 del vídeo hacen un total de 212 píxeles para el total del reproductor.

Vídeo y animaciones ::: Integración HTML de una lista de vídeos flash (FLV) Diseño de materiales multimedia. Web 2.0

384

4.8 Integración HTML de una lista de

vídeos flash (FLV)


385

4.8 Integración HTML de una lista de vídeos FLV 4.8.1 Introducción En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un gran auge como medio para publicar contenidos de vídeo en Internet. En este apartado veremos cómo integrar vídeos FLV en una página web utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering (http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la configuración de múltiples parámetros y admite la reproducción de archivos flv simples y de listas de reproducción. 4.8.2 Reproductor de una lista de vídeos FLV

1. Descarga y descomprime el archivo flvlistplayer.zip en la carpeta miweb\flvlistplayer.

2. Desde el explorador de archivos abre la carpeta miweb\flvlistplayer y haz doble clic en el archivo index.html. Con esto se abrirá el navegador mostrando las cinco posibilidades estándar que se contemplan: FLV simple, FLV con imagen previa, Lista FLV simple, Lista FLV con imagen previa y Lista FLV con display lateral.

3. La consola de reproducción para un archivo flv permite iniciar y detener el vídeo así como arrastrar la barra de progreso de la pista y del volumen. En la reproducción de listas de vídeos FLV también se proporcionan botones para saltar al siguiente o anterior de la lista. También se ofrece un botón que permite visualizar el vídeo en modo pantalla completa.

4. Regresa al explorador de archivos en la carpeta miweb\flvlistplayer. Dentro de esta carpeta se encuentra: • La carpeta videos que contiene los archivos de video FLV que se reproducen.

Todos ellos tienen unas dimensiones de 240x192 píxeles. • La carpeta images que contiene los GIFs con las imágenes previas de los cinco

videos y mismas dimensiones que los vídeos. • La página HTML que permite el acceso a todo el conjunto: index.html • El reproductor de audio universal: mediaplayer.swf • Los archivos XML: playlist1.xml y playlist2.xml que contiene la lista de

reproducción de vídeos con la siguiente información: ubicación de cada archivo de audio, de la imagen asociada, título, autor, etc.

• El fichero de javascript swfobject.js que asegura la integración del reproductor en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.



<script type="text/javascript" src="swfobject.js"></script>


386

Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para asegurar referencia al código javascript que asegura la correcta integración del reproductor. FLV simple

<div id="player1">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('file','videos/dt_escenario.flv'); so.addVariable('height','212'); so.addVariable('width','240'); so.write('player1'); </script> En la variable file se indica la referencia a la ubicación del archivo de vídeo flv que se reproduce. Puedes modificar este valor para reproducir un vídeo con otro nombre distinto. Recuerda que el archivo de video debe situarse en la carpeta videos. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. La botonera ocupa 20 píxeles de altura. Sumados a los 192 del vídeo hacen un total de 212 píxeles para el total del reproductor. FLV con imagen previa

<div id="player2">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','videos/dt_vestuario.flv'); so.addVariable('height','212'); so.addVariable('image','images/dt_vestuario.gif'); so.addVariable('width','240'); so.write('player2');


387

</script> En la variable image se indica la referencia a la ubicación del archivo de imagen que se muestra antes de iniciar la reproducción del video. Puedes modificar este valor para visualizar una imagen con otro nombre distinto. Recuerda que el archivo de imagen debe situarse en la carpeta images. En la variable displayheight se indica la altura con que se visualizará el área display que muestra esta imagen y luego el vídeo. Lista FLV simple

<div id="player3">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','360','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','playlist1.xml'); so.addVariable('height','360'); so.addVariable('width','240'); so.write('player3'); </script> En la variable file en lugar de indicar un archivo flv se especifica un archivo XML que contiene una lista de vídeos. El reproductor ocupará una altura de 360 píxeles de acuerdo con lo indicado en el variable height. Al área del display (donde se muestra la imagen o vídeo) se le asigna una altura de 192 píxeles. Esto se indica en la variable displayheight. La botonera ocupa una altura de 20 píxeles. En consecuencia por debajo esta barra se mostrará la lista de reproducción ocupando 148 píxeles. Es el resultado de la siguiente operación: 360 – (192+20) = 148 px Lista FLV con imagen previa


388

<div id="player4">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','360','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','playlist2.xml'); so.addVariable('height','360'); so.addVariable('width','240'); so.write('player4'); </script> En la variable file se apunta al archivo playlist2.xml que contiene la información sobre la lista de vídeos: ubicación de archivos mp3, imágenes asociadas, títulos, autores, etc. Lista FLV con display lateral


389

<div id="player5">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','360','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','172'); so.addVariable('file','playlist2.xml'); so.addVariable('height','212'); so.addVariable('width','360'); so.addVariable('displaywidth','216'); so.write('player5'); </script> En la variable displaywidth se indica la anchura en píxeles que ocupará el área de display que se sitúa a la izquierda de la lista de reproducción. Para que el sistema funcione correctamente es necesario comprobar que en la misma carpeta de la página html se encuentren los archivos swfobject.js y mediaplayer.swf. Si se trata de una lista también debe incluirse el correspondiente archivo xml. Además deben ubicarse correctamente los archivos de imagen y de video respectivamente en las subcarpetas images y videos.

8. En la página flvplayer.html dispones de un asistente que permite configurar las

distintas opciones del reproductor de Jeroen Wijering. El resultado final será el código embed o bien el objeto swfobject que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Para ello elige una opción en la lista de modelos de configuración. Al seleccionarla se rellenarán automáticamente los valores de configuración básica asociados que puedes personalizar.


390

Tras elegir un modelo o bien pulsar en el enlace recargar reproductor se mostrará una vista previa del reproductor. En la parte inferior se podrá copiar y pegar el código embed o bien el código swfobject. Si deseas configurar otros parámetros más avanzados pulsa en el botón configuración avanzada para introducir estos valores. No olvides pulsar en el botón recargar reproductor para comprobar los cambios.

A continuación se explica cada parámetro y la sintaxis de los archivos xml de las listas de reproducción. Variables :

• Altura del display (displayheight). Establece la altura del área de visualización en píxeles. Si no se especifica valor, será la altura del reproductor menos la consola de reproducción (20 píxeles).

• Ubicación del archivo (file). Es la ubicación del archive a reproducir. Puede ser un archivo simple (MP3/JPG/SWF/PNG/GIF/FLV/RTMP) o una lista de reproducción. Puede estar situado en la misma carpeta que el reproductor, en otra carpeta o en una URL de Internet.

• Altura del reproductor (height). Indica los pixels que ocupa el reproductor por completo.

• Imagen vista previa (image). Cuando se reproduce un FLV, se puede utilizar esta variable para mostrar una imagen de formato JPG/SWF/PNG/GIF como vista previa al


391

inicio de la reproducción. Se puede asignar una imagen a cada video en la lista de reproducción.

• Anchura del reproductor (width). Define la anchura del reproductor. Variables de COLOR:

• Color fondo (backcolor). Es el color de fondo del reproductor en formato hexadecimal. Ejemplo: 0xFFFFFF (blanco).

• Color primer plano (frontcolor). Es el color de textos y botones. • Color resaltado (lightcolor). Color del rollover y activo del reproductor.

Variables de APARIENCIA:

• Scroll automático de lista (autoscroll). Si se marca esta casilla se mostrará una barra de scroll si el número de elementos es demasiado grande.

• Anchura de visualización (displaywidth). Si se define un valor inferior a la anchura del reproductor se consigue que la imagen aparezca a la izquierda de la lista de reproducción ocupando esa anchura.

• Barra de control más grande (largecontrols). Al activar esta casilla se duplica el tamaño de visualización de la barra de control. Es especialmente útil para usuarios con dificultades visuales.

• Mostrar logo (logo). Sitúa el logo de marca de agua en la esquina inferior derecha de la imagen. Se recomienda utilizar un archivo PNG de fondo transparente.

• Ajustar imagen (overstretch). Se pueden elegir las siguientes opciones: Ajuste simple (se ajusta a la dimensión –anchura o altura- más próxima manteniendo la proporción en fondo negro), Ajuste proporcional (se ajustan ambas dimensiones para ocupar todo el espacio manteniendo la proporción). Ajuste no proporcional (se ajusta cada dimension al espacio disponible pudiendo deformarse la imagen/video) y Sin ajuste (se mantienen las dimensiones originales de la imagen/video).

• Mostrar dígitos del contador (showdigits). Si se desmarca esta casilla no se mostrará el tiempo de reproducción

• Mostrar ecualizador gráfico (showeq). Si se activa esta opción se mostrará un ecualizador gráfico sobre la parte inferior de la imagen durante la reproducción.

• Mostrar iconos de carga/play (showicons). Muestra el icono “play” en el centro de la imagen para que el usuario pueda iniciar la reproducción pulsando en él.

• Miniaturas de la lista (thumbsinplaylist). Si se elige esta opción para cada pista de la lista de reproducción se observará la vista previa de la imagen especificada en el elemento image del archivo xml.

Variables de REPRODUCCIÓN:

• Inicio automático (autostart). Cuando se activa esta variable se logra que el reproductor se inicia cuando se carga la página.

• Longitud del buffer (bufferlength). Es el número de segundos durante los cuales un archivo FLV (vídeo) será almacenado en el búffer antes de iniciar su reproducción. Es una opción interesante para conexiones de clientes lentas. El valor por defecto es 3 segundos.

• Reproducción indefinida (repeat). El valor por defecto es “No” para indicar que el reproductor se detendrá tras reproducir un audio o un elemento de la lista de reproducción. De esta forma se preserva el ancho de banda. Si se selecciona “Una vez cada item” se reproducirá una sóla vez cada pista de la lista y al final se detendrá. Si se elige “Sí” se reproducirá indefinidamente el audio o lista de reproducción.

• Reproducción aleatoria (shuffle). Si marcas esta casilla se reproducirán en orden aleatorio las pistas de video de una lista.

• Volumen inicial (volume). Define el porcentaje de volumen (0-100) con que se iniciará el reproductor.

Variables de INTERACCIÓN: La configuración de algunas variables de interacción puede ser compleja y requiere ciertos conocimientos avanzados de programación. No obstante se recogen en este apartado a modo


392

de cita y al margen del curso. Para más información consulta la página del creador del reproductor Jeroen Wijering (http://www.jeroenwijering.com/)

• MP3 de audio extra (audio). Especifica la ubicación de un archivo mp3 externo que se utilizará como banda sonora adicional. De esta forma se pueden añadir comentarios de accesibilidad o del propio autor del vídeo.

• URL del script estadístico (callback). Define la ubicación de un script (PHP/ASP) que el reproductor llamará cada vez que un vídeo se inicie o detenga. Esto puede servir para guardar estadísticas de uso. Para más información consultar la página de Jeroen Wijering.

• URL archivo subtítulo (captions). Establece la ubicación del archivo de texto externo que contiene los subtítulos. El reproductor soporta formato SMIL y SRT muy utilizado en el ripeado de DVDs.

• Permitir javascript (enablejs). Si marcas esta opción se activa la interacción javascript. Esta funcionalidad sólo funciona en línea e incluye control de reproducción, carga asíncrona de archivos multimedia y recuperación de información de las pistas a javascript.

• Botón Pantalla Completa (fsbuttonlink). Si activas esta opción se mostrará un botón para mostrar la reproducción a pantalla completa. Esto sólo funciona si el reproductor de Flash del cliente es 9.0.28 o superior.

• Identificador para scripts (id). Es el identificador único del archivo que se reproduce y se suele utilizar para el script de callback. Se puede especificar un id para cada elemento de una lista de reproducción.

• Enlace para redireccionar a (link). Si configuras la marca de agua con el logo, puedes definir en esta variable una URL donde enlazar cuando el cliente hace clic sobre este logo. Se puede definir un enlace para cada elemento de la lista de reproducción.

• Enlace del clic sobre visor (linkfromdisplay). Si activas esta opción al hacer clic sobre la imagen (no sólo sobre el logo) se navegará hasta la página indicada en el parámetro link.

• Destino del enlace (linktarget). Establece el marco donde se mostrará en enlace definido. Por defecto es “_self” aunque se puede definir “_blank” para mostrarlo en una nueva página.

• Script de streaming (streamscript). Es la URL de un script de servidor que se puede utilizar para simular streaming mediante PHP, ASP o LigHTTPD.

• Tipo de archivo (type). El reproductor determina el tipo de archivo que se reproducirá. La opción por defecto es automático pero en esta variable se puede indicar al reproductor el tipo de archivo: flv, mp3, etc.

• Usar audio extra por defecto (useaudio). Al desactivar esta opción se fuerza que no suene la pista de audio extra por defecto.

• Usar subtítulos por defecto (usecaptions). Al desmarcar esta casilla se fuerza que los subtítulos se oculten por defecto.

• Usar pantalla completa flash9 (usefullscreen). Desmarca esta variable si no deseas que se muestre el botón de pantalla completa en el reproductor.

• Usar atajos de teclado (usekeys). Si activas esta opción funcionarán ciertas teclas en el reproductor: barra espaciadora (play/pausa) y teclas de flecha (moverse sobre los audios de una lista).

Las listas de reproducción. El reproductor de Jeroen Wijering permite cargar un audio FLV simple o una lista de reproducción.


393

1. Utiliza el explorador de archivos para situarte en la carpeta miweb\flvlistplayer. 2. Clic derecho sobre el archivo playlist2.xml y selecciona Abrir con > Bloc de notas.

Este archivo contiene una de las listas de videos que utiliza el reproductor. 3. Observa que cada pista se especifica entre etiquetas <track>…</track> y dentro de

ella se indica el título del vídeo <title>, el autor <creator>, la ubicación del archivo <location> y de la imagen previa asociada <image>.

<track> <title>El autor</title> <creator>dteatro</creator> <location>videos/dt_autor.flv</location> <image>images/dt_autor.gif</image> </track>

4. Puedes editar este archivo modificando estos valores para incluir otras pistas en la lista de reproducción.

5. Dentro de cada etiqueta <track> se pueden utilizar las siguientes etiquetas para cada pista de audio:

• <location> …</location>. Indica la ubicación del archivo de video. • <title> …</title>. Título de la pista. • <link> …</link>. Enlace asociado a esa pista. • <image> …</image>. Imagen previa asociada. • <creator> …</creator>. Autor del video.

6. El reproductor soporta 3 formatos de archivo de listas de reproducción: XSPF (muy

utilizadas en Música Creative Commons) , RSS (utilizada con frecuencia para Podcasts) y ATOM (propia de blogs). Como puede leerse en el encabezado del archivo playlist2.xml abierto anteriormente se trata de una lista XSPF:

<playlist version="1" xmlns="http://xspf.org/ns/0/">

Vídeo y animaciones ::: Integración HTML de objetos Flash Diseño de materiales multimedia. Web 2.0

394

4.9 Integración HTML de objetos Flash


395

4.9 Integración HTML de objetos Flash 4.9.1 ¿Qué es un objeto Flash? Un objeto Flash es un archivo de extensión *.SWF que ha sido diseñado con el programa Adobe Flash (http://www.adobe.es) y que se suele embeber dentro de una página HTML para mostrarse a través del navegador. Esta tecnología ha experimentado tal auge que actualmente se considera indispensable en la elaboración de animaciones y juegos multimedia interactivos en educación. Lejos de crear objetos flash porque ello excede el propósito de este curso en este capítulo se describe el procedimiento de cómo reutilizar un SWF descargado o existente para integrarlo dentro de una página HTML. 4.9.2 Descarga de objetos Flash con Firefox

1. Abre Firefox y selecciona Herramientas > Complementos.

2. En el cuadro de diálogo Complementos verifica si está instalado el complemento UnPlug. En caso contrario haz clic en el enlace Obtener extensiones y visita la página web de complementos de Mozilla Firefox para buscarlo, descargarlo e instalarlo. Tras su instalación quizás sea necesario reiniciar el navegador.

3. Desde Firefox introduce la cadena de búsqueda “Happy Pill” en la barra de búsquedas de Google y haz clic en el botón derecho (icono de lupa) o bien pulsa la tecla <enter>


396

4. En la página de resultados de Google haz clic sobre uno de los enlaces que conduce a

este juego interactivo en Flash. 5. Una vez situado en la página web que muestra este objeto haz clic en el botón

Unplug que aparece en el extremo derecho de la barra de herramientas. Otra posibilidad es seleccionar Herramientas > UnPlug.

6. En el panel UnPlug que muestra el navegador localiza el archivo tipo Flash de nombre happy….swf Pulsa en el botón Save (Guardar) que acompaña a ese archivo SWF.

7. En el cuadro de diálogo Guardar como localiza la carpeta miweb\swfs 8. En la casilla Nombre introduce como happypill.swf 9. Clic en el botón Guardar.


397

10. Clic en el botón Close para cerrar el panel de UnPlug. Tras la descarga del archivo *.SWF que contiene la animación Flash se puede visualizar utilizando el navegador web Mozilla Firefox. Abre el navegador y selecciona Archivo > Abrir Archivo. Localiza y abre el archivo happypill.swf situado en la carpeta miweb\swfs. Una vez que se dispone del archivo .swf se puede reutilizar integrándolo en nuestra propia página HTML. En el siguiente apartado se explica el procedimiento para hacerlo. Notas: En muchas ocasiones el archivo SWF es un objeto independiente, es decir, contiene todo lo que necesita para funcionar adecuadamente. Sin embargo en otras necesita disponer de archivos auxiliares que la animación carga en tiempo de ejecución. Se trata de información almacenada en bases de datos, archivos txt o xml, imágenes, etc. Por este motivo puede ocurrir que al descargarlo no funcione en el equipo local. En la dirección: http://www.consumer.es/infografias/ podrás encontrar un repositorio de infografías educativas muy interesante. 4.9.3 Integración HTML básica de objetos Flash En esta actividad vamos a insertar una animación en formato *.SWF dentro de una página. Los archivos *.SWF son animaciones diseñadas con el programa Adobe Flash (http://www.adobe.es) que permiten altas dosis de interactividad con un razonable peso de descarga.

1. Extrae a la carpeta miweb\swfs de tu disco duro el contenido del archivo: blobs.zip. Como resultado de esa extracción encontrarás en esta carpeta los siguientes archivos: un archivo de texto (blobs.txt) y un archivo de flash (blobs.swf)

2. Abre Kompozer. Selecciona Archivo > Nuevo o pulsa en el botón Nuevo. 3. Minimiza Kompozer y utiliza el explorador de archivos de Windows para situarte en

en la carpeta miweb\swfs. Haz doble clic sobre el archivo blobs.txt para abrirlo.. 4. Desde el Bloc de notas elige Edición > Seleccionar todo para luego elegir Edición >

Copiar. Cierra el editor y regresa a Kompozer. 5. Sitúa el cursor debajo del título y elige Editar > Pegar. 6. Selecciona el título “Blobs” y asígnale el tipo de formato Título 1. Selecciona los

textos “Descripción” e “Instrucciones” y pulsa en el botón Negrita (B) de la barra de


398

Formato. Selecciona el listado completo de instrucciones y pulsa en el botón Lista con viñetas.

7. Selecciona la etiqueta OBJECT/EMBED y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

8. Elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

9. La etiqueta que integra el objeto flash (SWF) en la página es:

<object width="550" height="400"> <param name="movie" value="swfs/blobs.swf"> <embed src="swfs/blobs.swf" type="application/x-shockwave-flash" width="550" height="400"> </object>

Los parámetros de esta etiqueta se explican a continuación:

• <object …>… </object> es la etiqueta que contiene el objeto Flash. Esta etiqueta es interpretada por los navegadores que utilizan un control activeX para


399

reproducir la película Flash como por ejemplo Internet Explorer. Otros exploradores web no utilizan este control activeX por lo que es necesario incluir también la etiqueta embed.

• Los atributos de object permiten definir la altura (height) y la anchura (width) en píxeles con que se visualizará la animación Flash.

• La etiqueta object tiene un parámetro muy importante donde se indica dónde está ubicado el archivo swf que contiene la animación Flash. En este caso es el archivo blobs.swf dentro de la carpeta swfs: <param name=”movie” value=”swfs/blobs.swf”>

• <embed>…</embed> es una etiqueta incluída dentro de la etiqueta <object> y que es interpretada por navegadores que no utilizan el control activeX y en su lugar usan el reproductor de Flash como por ejemplo Netscape, Mozilla, Opera, etc. La etiqueta embed tiene distintos atributos para indicar la ubicación del archivo swf (src), las dimensiones de visualización, etc.

• Es necesario utilizar ambas etiquetas: object/embed para que una animación Flash se visualice correctamente en todos los navegadores web.

• Puedes copiar y pegar esta etiqueta en otras páginas web y luego modificar las dimensiones de visualización y la ubicación/nombre del SWF que deseas mostrar en cada caso.

10. Clic en el botón Guardar. Introduce el título de la página: Blobs y guárdala con el nombre blobs.html en la carpeta miweb.

11. Para ver el resultado final haz clic en el botón Navegar. Puede ser necesario descargarse el plugin desde la web de Adobe para visualizar correctamente esta animación (http://www.adobe.com)

4.9.4 Integración HTML avanzada de objetos Flash La integración de una animación Flash en una página HTML tal y como se ha explicado en el apartado anterior suele presentar dos problemas comunes:

1. Si navegas con Internet Explorer por una página que contiene un objeto Flash, por ejemplo la página blobs.html que has diseñado en el apartado anterior, observarás que es necesario hacer previamente un primer clic sobre ella antes de interactuar con sus elementos. Al situar el puntero del ratón sobre la película, ésta presenta un borde a su alrededor, el puntero del ratón toma el aspecto de una mano e incluso se visualiza el mensaje: “Haga clic para activar y usar este control”. Este efecto no ocurre si se utiliza Firefox.

2. Si los visitantes no disponen del plugin de Flash instalado y configurado en el navegador web no podrán visualizar este objeto. En su lugar verán un rectángulo vacío.

Con intención de resolver los dos problemas mencionados, se propone utilizar una etiqueta más avanzada para integrar un objeto flash en una página HTML.

1. Extrae a la carpeta miweb\swfs de tu disco duro el contenido del archivo: mastermind.zip. Como resultado de esa extracción encontrarás en esta carpeta los siguientes archivos: un archivo de texto (mastermind.txt) y un archivo de flash (mastermind.swf)

2. Extrae a la carpeta miweb\scripts de tu disco duro el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás en esta carpeta el archivo con código javascript: AC_RunActiveContent.js

3. Abre Kompozer. Selecciona Archivo > Nuevo o pulsa en el botón Nuevo. 4. Minimiza Kompozer y utiliza el explorador de archivos de Windows para situarte en

en la carpeta miweb\swfs. Haz doble clic sobre el archivo mastermind.txt para abrirlo.

5. Desde el Bloc de notas elige Edición > Seleccionar todo para luego elegir Edición > Copiar. Cierra el editor y regresa a Kompozer.

6. Sitúa el cursor debajo del título y elige Editar > Pegar.


400

7. Selecciona el título “Mastermind” y asígnale el tipo de formato Título 1. Selecciona los textos “Descripción” e “Instrucciones” y pulsa en el botón Negrita (B) de la barra de Formato. Selecciona el listado completo de instrucciones y pulsa en el botón Lista numerada.

8. Selecciona la línea <script scr=”scripts/AC_ … </script> y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

9. En la parte inferior de la página pulsa sobre la pestaña Código fuente

10. Sitúa el cursor inmediatamente debajo de la línea <title></title> y antes de la etiqueta de cierre </head>

11. Elige Editar > Pegar o bien pulsa la combinación de teclas <Ctrl>+<V>

12. Esta etiqueta referencia un archivo externo con el código javascript: AC_RunActiveContent.js situado dentro de la carpeta scripts del sitio web. Si lo ubicas en otra carpeta deberás indicarlo en la ruta src de esta etiqueta.

13. En la parte inferior de la página pulsa sobre la pestaña Normal para regresar al documento en vista normal.

14. Selecciona la etiqueta completa: <script> …</script><noscript>…</noscript> y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

15. Sitúa el cursor entre el párrafo Descripción y el párrafo Instrucciones. 16. A continuación elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho

para seleccionar Pegar. Clic en el botón Insertar.


401

17. La etiqueta que integra el objeto flash (SWF) en la página es:

<script type="text/javascript"> AC_FL_RunContent( 'width','380','height','430','title','Mastermind','src','swfs/mastermind','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','swfs/mastermind' ); </script> <noscript> <object width="380" height="430" title="Mastermind"> <param name="movie" value="swfs/mastermind.swf"> <embed src="swfs/mastermind.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="380" height="430"></embed> </object> </noscript>

Los parámetros de esta etiqueta se explican a continuación:

• <script …>… </script> indica la función de Javascript AC_FL_RunContent que consigue que no sea necesario hacer clic sobre el objeto Flash para activarlo. Esto sólo funciona si el navegador tiene activada la ejecución de scripts. Recuerda que para que funcione el código debe estar situado en un archivo externo ubicado en scripts/AC_RunActiveContent.js

• <noscript> … </noscript> Es la etiqueta que se ejecuta si el navegador web no tiene activada la ejecución de scripts. Observa que dentro de ella se encuentra la etiqueta object/embed que se presentó en el apartado anterior.

• Al definir el parámetro pluginspage se conseguirá que si el usuario no tiene instalado el plugin de Flash en su navegador, sea redireccionado a la página de Adobe donde podrá descargarlo e instalarlo.

• Puedes copiar y pegar esta etiqueta completa en otras páginas web y luego modificar las dimensiones de visualización y la ubicación/nombre del SWF que deseas mostrar en cada caso.

18. Clic en el botón Guardar. Introduce el título de la página: Mastermind y guárdala con el nombre mastermind.html en la carpeta miweb.


402

19. Para ver el resultado final haz clic en el botón Navegar. Conviene utilizar Internet Explorer para comprobar que en este caso no es necesario hacer un clic previo sobre la animación flash para poder interactuar con ella.

4.9.5 Asistente de integración HTML de objetos Flash

1. Descarga y descomprime el archivo fplayer.zip dentro de la carpeta miweb\fplayer. 2. Como resultado de la extracción encontrarás dentro de esta carpeta los archivos:

index.html, movie.swf y swfobject.js

3. A continuación haz clic sobre el siguiente enlace: flashplayer.html. Esta página es un asistente para generar el código HTML necesario para insertar un objeto Flash en una página web.


403

4. Antes de generar el código introduce valores en las distintas opciones de Configuración Básica. • URL del archivo Flash SWF. Indica la ruta y nombre del archivo SWF que contiene

el objeto de Flash. En este caso teclea: movie.swf • Dimensiones. Permite indicar si las dimensiones de la película se proporcionan en

Píxeles o bien en Porcentaje. El porcentaje es relativo a la ventana del navegador. Ejemplo: 100%/-100% hará que la película ocupe toda la ventana del navegador.

• Anchura y Altura. Indica las dimensiones con que se visualizará el objeto Flash. • Reproducir al inicio. La reproducción se iniciará tras cargarse la animación. Es la

opción por defecto que seleccionaremos en este caso. Si desmarcas esta opción se detendrá al comienzo. El usuario iniciará la reproducción al pulsar en un botón de la película o mediante la opción Reproducir del menú contextual que se muestra al hacer clic derecho sobre la película.

• Reproducir indefinidamente. Para la animación que nos ocupa no es pertinente aunque en otros casos si se marca hará que la película Flash se reproduzca en ciclo cuando alcanza el último fotograma.

5. Para definir los parámetros de Configuración Avanzada pulsa en el enlace

configuración avanzada. En este apartado podrás establecer los siguientes valores: • Calidad. Esta opción permite definir la relación entre el tiempo de procesamiento

y el suavizado de cada fotograma antes de que aparezca en la pantalla del usuario. La opción por defecto es Óptima.

• Modo de ventana. Permite establecer una opción de transparencia, posición y capas de la ventana de Flash.

Ventana. Reproduce la película Flash en su propia ventana rectangular dentro de la página web. De esta forma la reproducción resulta lo más rápido posible. Es la opción por defecto.

Opaco sin ventana. Mueve los elementos detrás de las películas Flash ( por ejemplo, con HTML dinámico) para evitar que éstos se muestren.

Transparente sin ventanas: Muestra el fondo de la página HTML donde se incrusta la película a través de todas las áreas transparentes de la película.

• Alineación HTML. Elige una opción de Alineación HTML para colocar la ventana de la película de Flash dentro de la ventana del navegador. La opción por defecto es Izquierda.

• Escala. Elige una opción de Escala para colocar la película dentro de los límites especificados si se cambió el ancho y la altura original de la película.

Mostrar todo. Es la opción por defecto. La película se muestra visible por completo en el área especificada y sin distorsión. Para mantener el ratio (relación anchura-altura) original es posible que utilice bordes a ambos lados de la película.

Sin borde. Ajusta la película al área especificada pero sin distorsión. Mantiene el ratio (relación anchura-altura) original recortando el área de visualización si es necesario.

Exacto. Ajusta la película al area disponible deformando la imagen si es necesario.

• Alineación Flash. Elige una opción de Alineación Flash para configurar la forma en que se coloca la película dentro de la ventana y cómo se recorta si fuera necesario.

• Mostrar Menú. Muestra un menú de reproducción cuando el usuario hace clic con el botón derecho del ratón en la película. Es la opción por defecto. Si se desmarca esta opción se mostrará un menú reducido sin las opciones de reproducción.

• Color de fondo. Es el valor hexadecimal del código de color RGB que especifica el color de fondo de la película. Utiliza este atributo para sobrescribir el color de fondo original de la película. Este atributo no afecta al color de fondo de la página HTML.


404

• URL Base. Especifica el directorio base o URL utilizado para resolver todas las rutas relativas contenidas en la película Flash. Es un atributo especialmente útil cuando las películas Flash están en una carpeta distinta del resto de archivos. En este caso no es necesario indicar la URL Base.

• Variables. Son variables=valores separados por el signo “&” que se pasan desde el código HTML al objeto Flash para que éste las interprete. Ejemplo: file=mozart.mp3&volumen=80. En este caso no son necesarias.

6. Tras definir los distintos valores de estos atributos pulsa en el enlace generar código 7. El asistente genera dos tipos de código al pulsar en los enlaces mostrar código embed

/ mostrar código swfobject. • Código object/embed. Es el etiquetado básico. No utiliza javascript pero tiene el

inconveniente de que el usuario de Internet Explorer debe hacer clic sobre el objeto Flash para seleccionarlo previamente antes de comenzar a interactuar con él.

• Código swfobject. Es el etiquetado complejo. Utiliza javascript. Es necesario que el archivo swfobject.js esté situado en la ruta que se indica en esta etiqueta. Se interactúa directamente sobre el objeto flash sin necesidad de efectuar un clic previo de activación.


405

8. En cualquiera de los dos casos haz clic derecho sobre el cuadro de texto que muestra el código y elige Seleccionar todo.

9. Clic derecho de nuevo sobre el cuadro de texto y elige Copiar. 10. Abre Kompozer 11. Selecciona Archivo > Abrir para abrir el archivo miweb\fplayer\index.html 12. Sitúa el cursor en el punto de la página donde deseas insertar el objeto Flash. 13. A continuación elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho

para seleccionar Pegar. Clic en el botón Insertar. 14. Clic en el botón Guardar. 15. Para ver el resultado final haz clic en el botón Navegar. Puede ser necesario

descargarse el plugin desde la web de Adobe para visualizar correctamente esta animación (http://www.adobe.com)

4.9.6 Integración HTML de un mapa Google

1. Descarga y descomprime el archivo googlemaps.zip en la carpeta miweb\googlemaps 2. Como resultado de la extracción encontrarás varios archivos:

• index.html. Si haces doble clic sobre este archivo se abrirá el navegador web mostrando un mapa de Google del área que hemos seleccionado.

• gmap.swf Es el objeto flash que se conecta con Google Maps y muestra el mapa interactivo.

• swfobject.js Es el archivo de código javascript que evita tener que hacer clic sobre el mapa para activarlo previamente si se accede con Internet Explorer.

• evaristo.kml. Es una archivo de etiquetas con extensión *.kml que contiene la información de los marcadores que aparecerán en el mapa.

3. Abre Kompozer. 4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la

carpeta miweb\googlemaps 5. En la parte inferior de la página pulsa sobre la pestaña Código fuente


406

6. El código HTML que inserta en la página el objeto de Flash es el siguiente:

<html> <head> <script type="text/javascript" src="swfobject.js"></script> <title>Google Maps</title> </head> <body> <h1>Google Maps</h1> <div id="gmaps">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('gmap.swf','mpl','650','500','9'); so.addVariable('clatitud','43.5327566488622'); so.addVariable('clongitud','-5.674635881667000'); so.addVariable('route','evaristo.kml'); so.addVariable('zoom','16'); so.addVariable('maptype','satellite'); so.addVariable('czoom','true'); so.addVariable('cposition','true'); so.addVariable('ctype','true'); so.addVariable('cnavigator','false'); so.write('gmaps'); </script> </body> </html>

7. Observa que la referencia al objeto flash está en gmap.swf de SWFObject. 8. En la sintaxis se pueden definir los distintos parámetros con que se mostrará

inicialmente el mapa: • clatitud y clongitud son las coordenadas geográficas en formato decimal del

punto central del mapa. • route se refiere al nombre del archivo KML que contiene la información de

ubicación de los marcadores. En este caso evaristo.kml. • zoom es el grado de magnificación con que se visualizará inicialmente el mapa. • maptype indica el tipo de mapa que se mostrará inicialmente: satellite, map o

hybrid. • czoom si tiene valor “true" (verdadero) el usuario dispondrá del control del zoom. • ctype si tiene valor “true” (verdadero) el usuario dispondrá de los botones para

cambiar al modo de mapa, satélite o híbrido. • cnavigator si tiene valor=”true” se podrá disponer del control de navegación para

poder moverse por el mapa con más comodidad.

9. Prueba a modificar algunos de estos parámetros iniciales y comprobar el resultado que produce.

10. Minimiza Kompozer y abre el archivo evaristo.kml utilizando el editor de textos por defecto del sistema.

11. Repasando las etiquetas de este documento observa que el marcador y sus propiedades están definidas entre las etiquetas <Placemark> … </Placemark>. Respetando la sintaxis se pueden añadir más etiquetas o bien modificar los datos de este marcador para situarlo en otro sitio.

Vídeo y animaciones ::: Integración HTML de applets de Java Diseño de materiales multimedia. Web 2.0

407

4.10 Integración HTML de applets de Java


408

4.10 Integración HTML de un applet de Java 4.10.1 Applets: qué son y dónde conseguirlos Java es un lenguaje de programación creado por la empresa Sun Microsystems. Se ha destinado fundamentalmente al diseño de aplicaciones para Internet. Sus características más destacadas a nivel de usuario son:

• Los programas creados con Java funcionan en cualquier equipo con independencia de su arquitectura o sistema operativo. Esto se ha conseguido mediante la utilización de un software adicional que es necesario tener instalado en el equipo para que la aplicación funcione. Este software es un intérprete de los programas conocido normalmente Java Runtime Environment (JRE).

• Uno de los éxitos de Java son los applets. Son pequeños programas que pueden ser integrados dentro de una página web para dotarla de la interactividad que el simple código HTML no puede proporcionar. Los applets creados por otros se pueden reutilizar en otras páginas. Para ello es necesario integrarlo en un archivo HTML y configurar adecuadamente sus parámetros.

• El principal inconveniente de los applets es su lentitud para arrancar. El navegador al detectarlo en una página, debe cargar primero la máquina virtual Java y luego ésta debe leer su código e interpretarlo. Esto provoca cierta ralentización aunque con el tiempo se han conseguido versiones más potentes y rápidas de las nuevas máquinas virtuales de Java.

• Se pueden conseguir más applets en la URL: http://javaboutique.internet.com • El proyecto Descartes (http://descartes.cnice.mec.es/ ) del CNICE utiliza applets de

java para la enseñanza y aprendizaje de la geometría. 4.10.2 Instalación de Java Runtime Environment (JRE) Windows

1. Descarga y descomprime el intérprete de programas Java Rutime Environment (JRE): jre-6u5-windows-i586-p-s.exe. Otra posibilidad es consultar la web oficial de Java para comprobar si existe una versión más actual: http://www.java.com/es/download/

2. Ejecuta el instalador y sigue los pasos del asistente para completar la instalación. Ubuntu

1. Desde el escritorio de Ubuntu selecciona Sistema > Administración > Gestor de paquetes Synaptic.

2. En el cuadro de diálogo Gestor de Paquetes Synaptic pulsa en el botón Buscar. 3. Introduce como término de búsqueda: sun java 6 y pulsa en el botón Buscar. 4. Localiza el paquete sun-java6-plugin haz doble clic sobre su casilla de verificación.

Confirma la instalación de las dependencias y pulsa en el botón Aplicar. 4.10.3 Integración HTML del applet “Sopa de letras”

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación: sopa.zip. Como resultado de esa extracción encontrarás una nueva carpeta llamada sopa y en su interior los siguientes archivos: sopa.htm, terminos.txt y el applet principal WordSeach.class y sus applets auxiliares: WSButton.class, WSGrid.class, WSList.class y WSWord.class.

2. Abre Kompozer y a continuación selecciona Archivo > Abrir para localizar la página miweb\sopa\sopa.html y abrirlo.


409

3. En el modo Vista Normal sólo se puede leer el título. Sin embargo si haces clic en la pestaña Código fuente se podrá acceder al código HTML que inserta el applet en esta página HTML.

4. La etiqueta HTML que integra el applet es:

<applet code="WordSearch.class" height="350" width="425"> <param name="gridcolors" value="black,white,#ccffcc,#008000"> <param name="listcolors" value="#008000,#ffcc00,#000000"> <param name="files" value="terminos.txt"> </applet> • <applet …> … </applet> es la etiqueta que define el applet dentro de la página.

El atributo code indica la ubicación del archivo externo *.class que lo contiene (WordSeach.class, en este caso). Con los atributos height y width se indican las dimensiones en píxeles de visualización.

• El nombre de los parámetros admitidos por un applet de Java y el rango de valores para cada uno viene ya definido por el programador que lo diseñó. En el caso que nos ocupa se contemplan 3 parámetros: gridcolors, listcolors y files.

• El parámetro gridcolors permite especificar el color de la cuadrícula de letras: texto, fondo, palabra encontrada y palabra marcada (separados por comas). Como valores se puede utilizar el código hexadecimal del color: #FFCC00 o bien nombre del color standard: white, black, yellow, red, etc.

• listcolors indica el color en la lista de palabras : texto, fondo y palabra encontrada (separados por comas).

• files especifica el nombre del archivo de texto que contiene los términos de la sopa de letras. En este caso es el archivo terminos.txt

• Para integrar este applet en otra página basta copiar y pegar esta etiqueta <applet …> … </applet> y asegurarse de que los archivos *.class y *.txt se ubican en la misma carpeta que la página HTML.

5. Puedes modificar en esta etiqueta alguno de los colores de la parrilla o de la lista e

incluso el archivo de texto que contiene las palabras a buscar. 6. Para guardar los cambios haz clic en el botón Guardar de la barra de Redacción de

Kompozer. 7. Si deseas modificar el título de la sopa de letras o bien los términos a buscar, desde

el explorador de Windows localiza el archivo terminos.txt situado dentro de la carpeta miweb\sopa\ y haz doble clic sobre él. Se abrirá el Bloc de Notas mostrando el contenido del mismo.


410

8. El título de la sopa de letras debe ir en la primera línea y precedido del símbolo "#". Luego cada término deberá ir en una línea distinta. Realiza las modificaciones oportunas. Para terminar elige Archivo>Guardar y cierra el Bloc de Notas.

9. Para comprobar el correcto funcionamiento de esta aplicación desde Kompozer abre el archivo sopa.html y luego pulsa en el botón Navegar. Debes esperar unos segundos a que se cargue la máquina virtual de Java e inicie el subprograma.

Notas: • Recuerda que para visualizar esta aplicación es necesario tener instalado en el

equipo Java Runtime Environment (JRE). http://www.java.com/es/download/ • Puedes conseguir más applets en la dirección: http://javaboutique.internet.com

4.10.4 Integración HTML del applet “Puzzle”

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás una nueva carpeta llamada puzzle y en su interior los siguientes archivos: puzzle.html, bufon.gif y Jigsaw.jar.

2. Abre Kompozer y a continuación abre el archivo puzzle.html. 3. Clic en el pestaña Código fuente para ver la etiqueta que integra el applet.

<applet codebase="./" archive="Jigsaw.jar" code="Jigsaw.class" height="380" width="480"> <param name="Image" value="bufon.gif"> <param name="ImgWidth" value="216"> <param name="ImgHeight" value="298"> <param name="Rows" value="2"> <param name="Cols" value="2"> <param name="AutoSnap" value="3"> <param name="KeepBoardClear" value="true"> <param name="Connector" value="-1"> <param name="CanRotate" value="false"> <param name="DimHelpImage" value="60"> <param name="BreakupText" value="Comenzar"> <param name="TidyText" value="Mezclar"> <param name="SolveText" value="Resolver"> <param name="MessageText" value="¡ MUY BIEN !"> <param name="AllowSolve" value="true"> <param name="HelpImageGrayed" value="true"> <param name="OuterFrameColor" value="#FFCC00"> <param name="BgColor" value="#FFCC00"> <param name="LosePieces" value="false"> <param name="AutoShowPieces " value="true"> </applet>

4. A continuación se especifican los nombres de los principales parámetros y sus valores para el applet Jigsaw.class contenido dentro del archivo comprimido Jigsaw.jar.

Párametros obligatorios

• Image. Es el nombre del archivo que contiene la imagen del puzzle. Ejemplo:

bufon.gif. Debe estar situado en la misma carpeta. • ImgWidth La anchura en píxeles de la imagen en el puzzle. La imagen original

se ajustará al tamaño especificado. • ImgHeight .La altura en píxeles de la imagen en el puzzle. La imagen original

se ajustará al tamaño especificado. • Rows. El número de filas del puzzle. • Cols. El número de columnas del puzzle.


411

Párametros opcionales

• AutoSnap. Se usa para facilitar la ubicación correcta de las piezas. Cuando la pieza se acerca a su posición correcta se enganchará a modo de imán. Este valor puede oscilar entre 0 y 15. El valor 15 permite que la pieza se sitúe automáticamente sobre la posición correcta desde lejos.

• KeepBoardClear. Si está activado (true) las piezas desordenadas se situarán siempre fuera del área de construcción del puzzle tanto al comenzar como al pulsar el botón Mezclar.

• Connector. Define el tamaño de los enganches en las piezas del puzzle. Es un valor entre -1 y 4 aunque se recomienda el valor -1.

• CanRotate. Permite que las piezas puedan girarse pulsando el botón derecho del ratón sobre ellas. Su valor puede ser true o false.

• DimHelpImage. Si está definido muestra una copia de la imagen en el área de construcción del puzzle para ayudar a su diseño. Es un valor numérico de 0 a 100 que indica la transparencia de la imagen sólo si el parámetro HelpImageGrayed está activado.

• HelpImageGrayed. Si está activado (true) y se usa la imagen de guía, ésta se convertirá a una escala de grises.

• Bicolor. Color de fondo del applet. Ejemplo: #FFCC00 • OuterFrameColor. Color del borde del marco del applet. • InnerFrameColor. Color del marco alrededor del área de construcción del

puzzle. • BoardColor. Color del área de construcción del puzzle si no se usa la imagen

guía • SelectColor. Color que rodea a una pieza cuando se sitúa el puntero del ratón

sobre ella. • TextColor. Color del texto que aparece cuando se resuelve el juego. • AllowSolve. Si está desactivado (false) no aparecerá el botón de Resolver.

Este botón se muestra por defecto si no se especifica este parámetro. • BreakupText. Define el texto que aparecerá en el botón Comenzar • TidyText. Define el texto del botón Mezclar. Observa que el botón Mezclar

sólo revuelve las piezas no colocadas. • SolveText. Texto del botón Resolver. • MessageText. Texto del feedback al alumno cuando concluye con éxito el

puzzle. • RunTarget. Nombre del marco donde se mostrará la página indicada por el

parámetro RunURL cuando se resuelva el puzzle. • RunURL. URL de la página que se mostrará cuando el puzzle se resuelva

adecuadamente.

5. Puedes utilizar la vista Código fuente de Kompozer para acceder al código HTML de la página y modificar los valores de estos parámetros.

6. Recuerda que debes seleccionar Archivo > Guardar para guardar los cambios realizados.

7. Para comprobar el funcionamiento de esta aplicación, ábrela desde Kompozer y luega pulsa en el botón Navegar. Otra posibilidad es utilizar el explorador de archivos y hacer doble clic sobre el archivo miweb\puzzle\puzzle.html. Debes esperar unos segundos a que se cargue la máquina virtual de Java e inicie el subprograma.

8. Se puede insertar este applet en una página HTML en blanco con sólo copiar y pegar el código HTML antes indicado. No olvides copiar el archivo *.JAR y *.GIF en la misma carpeta de esta nueva página.


412

4.10.5 Integración HTML de un objeto JClic Para visualizar un paquete de JClic a través del navegador es necesario tener instalada el entorno JRE de java. En este apartado se explica cómo crear una página que muestra un paquete de JClic con todos los applets necesarios para su correcto funcionamiento.

1. Descarga y descomprime a la carpeta miweb el contenido del archivo jclic_ejemplo.zip.

2. Como resultado de la extracción encontrarás dentro de la carpeta miweb/jclic_ejemplo los siguientes archivos y carpeta:

• jclic. Es la carpeta que contiene los applets necesarios para que el paquete de actividades funcione correctamente.

• capaon.jclic.zip. Es el paquete jclic que contiene todos los activos y configuración del paquete.

• index.htm. Es la página HTML a través de la cual se carga el paquete para visualizarlo e interactuar con él a través del navegador.

3. Abre Kompozer. 4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la

carpeta miweb\jclic_ejemplo 5. En la parte inferior de la página pulsa sobre la pestaña Código fuente

6. El código HTML que inserta en la página el objeto de JClic es el siguiente:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>¿Hacia dónde?</title> <script language="JavaScript" src="jclic/jclicplugin.js" type="text/javascript"></script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="window.focus();"> <script language="JavaScript"> setJarBase('jclic'); writePlugin('capaon.jclic.zip', '100%', '100%'); </script> </body> </html>

7. Observa que la referencia para cargar los applets de java está en el archivo de javascript: jclicplugin.js que se encuentra en la carpeta jclic.

<script language="JavaScript" src="jclic/jclicplugin.js" type="text/javascript"></script>

8. Con la siguiente orden de Javascript indicamos la carpeta jclic que se toma como

base para buscar todos los applets necesarios:

<script language="JavaScript"> setJarBase('jclic');


413

…

9. La referencia al paquete específico que se carga se encuentra en la línea de código:

writePlugin('capaon.jclic.zip', '100%', '100%'); Si deseas cargar otro paquete del rincón de Clic:

1. Abre el navegador web y visita la dirección: http://clic.xtec.net/db/listact_es.jsp 2. En el catálogo de paquetes localiza uno y sitúate en la página que muestra su

información. 3. En la parte inferior encontrarás el enlace de descarga de ese paquete:

4. Selecciona y copia este enlace para pegarlo a continuación en la casilla de dirección del navegador. Esta acción producirá la descarga en local de este paquete.

5. Utiliza el explorador de archivos para copiar y pegar este archivo al interior de la carpeta miweb\jclic_ejemplo

6. A continuación abre el archivo index.html con Kompozer y modifica el nombre del paquete en la línea de código correspondiente:

writePlugin('capaon.jclic.zip', '100%', '100%');

7. Elige Archivo > Guardar para guarder los cambios. Si visualizas la página HTML verás que muestra el nuevo paquete que has referenciado.

Servicios Web 2.0 ::: Introducción Diseño de materiales multimedia. Web 2.0

414

5. Servicios Web 2.0


415

5.1 Introducción


416

5.1 Introducción El término Web 2.0 fue utilizado por primera vez por la empresa editorial estadounidense O’Reilly Media (2004) para referirse a una segunda generación de Web basada en las comunidades de usuarios. Abarca un amplio catálogo de sitios y servicios web que incluyen las redes sociales, los blogs, los wikis, la sindicación de noticias RSS, etc. Su propósito fundamental es fomentar la colaboración y el intercambio ágil de información entre los usuarios. El principio fundamental de la Web 2.0 es que “Todo está en la web”. Esto significa que el usuario solo necesita un navegador web para conectarse desde cualquier equipo o lugar e interactuar con los sitios o aplicaciones donde publicar contenidos, recopilar información, comunicarse con otros usuarios, etc. El propósito de este capítulo no es tratar la Web 2.0 con la extensión y calidad que se merece. Más bien se trata de ver cómo es posible integrar algunos de sus servicios en una página de nuestro sitio web. Internet es algo vivo y en constante cambio. Al hablar de servicios web puede ocurrir que alguno de ellos no funcione exactamente como se explica en este documento porque hayan cambiado recientemente en alguno de los detalles o capturas presentados.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

417

5.2 Flickr: galería de fotografías


418

5.2 Flickr: galería de fotografías 5.2.1 Introducción Flickr (http://www.flickr.com) es un espacio donde se puedes administrar y compartir tus fotos en línea. Las características más destacadas de este servicio son:

Subir fotos. Puedes hacerlo desde tu equipo, enviándolas por correo electrónico o utilizando el teléfono móvil con su cámara.

Organizar. Clasifica las fotos en colecciones o álbumes. A cada imagen se le puede asignar una etiqueta para facilitar su búsqueda.

Compartir. Utiliza grupos y controles de privacidad para compartir tus fotos. Mapas. Sobre un mapa de Google Maps se puede geolocalizar el lugar donde se tomó

cada foto y compartirlo con los demás. Publicaciones. Puedes elaborar tarjetas, albumes, marcos, etc utilizando las

imágenes subidas. Mantenerse en contacto. Para enviar y recibir información sobre las actualizaciones

de fotografías de familiares y amigos.

La exploración de todas las posibilidades de Flickr excede el propósito de este curso. Se propone centrarse en la utilización de estas imágenes en línea en documentos web. Para disponer de acceso a Flickr es necesario disponer de una cuenta en Yahoo. Desde la portada de Flickr se puede crear una pulsando en el botón Crear tu cuenta.

5.2.2 Subir fotografías a Flickr

1. Descarga y descomprime el archivo flickr.zip a una carpeta del equipo. Como resultado de esta tarea se obtendrá una colección de fotografías para ser subidas a Flickr.

2. Abre Mozilla Firefox y visita la web de Flickr en la URL: http://www.flickr.com. 3. Clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 4. Pulsa en el enlace Subir fotos. En este caso vamos a utilizar el Uploader Básico de

Flickr. Selecciona esta opción si no se muestra la página recogida en la captura de pantalla adjunta.

5. En la página Subir fotos en Flickr pulsa en el botón Examinar para localizar la primera fotografía en la carpeta de tu disco duro. Repite este paso para algunas fotografías más del resto de la carpeta.


419

6. En el apartado Agregar etiquetas para TODAS estas imágenes introduce los términos que luego facilitarán la localización de las imágenes en el buscador de Flickr. Ejemplo: Asturias, paisajes

7. Configura el resto de opciones de privacidad, seguridad, tipo de contenidos, etc. 8. Clic en el botón Cargar.

9. Una vez concluido el proceso de subida se mostrará el panel Describe tus fotos donde es posible asignar títulos, descripciones y etiquetas a cada imagen de forma invididual. Para terminar pulsa en el botón Guardar el lote.

10. Las fotos estarán disponibles en la pestaña Tu > Tus fotos. Nota:

Otra posibilidad para subir fotos a Flickr es descargar e instalar una herramienta de carga que se ofrece en esta página. Se trata de una aplicación local que permite subir imágenes con sólo arrastrar y soltar.


420

5.2.3 Organizar en álbumes

1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo.

2. Desde el menú superior horizontal haz clic en la opción Organizar. Tras unos segundos de carga se mostrará el organizador de Flickr.

3. Clic en la pestaña Álbumes y luego en el enlace Crear nuevo álbum. 4. Desde el panel de nuevo album:

4.1 Introduce el título del álbum, p.e.: “Mi viaje por Asturias”. 4.2 Para añadir fotografías a este nuevo álbum debes arrastrar las imágenes que aparecen en la franja inferior al panel derecho superior. 4.3 Arrastra una imagen del álbum al cuadrado visor que aparece sobre el título. Esta será la imagen que represente el albúm. 4.4 Pulsa en el botón Guardar.

5.2.4 Situar las fotos en el mapa (geolocalización)


2. Desde el menú superior horizontal haz clic en la opción Organizar. Tras unos segundos de carga se mostrará el organizador de Flickr.

3. Clic en la pestaña Mapa para acceder al interfaz donde podremos situar sobre el mapa cada una de las fotos (geolocalización). Conviene elegir que el mapa sea de acceso público.

4. En la casilla Buscar un lugar introduce el término Asturias para obtener el mapa de esta Comunidad Autónoma con el zoom adecuado.

5. En el panel inferior selecciona el álbum “Mi viaje por Asturias” y luego arrastra cada fotografía para ubicarla en su localidad: Luarca (Valdés), Cudillero, Gijón, Luarca, Oviedo y Cabo de Peñas. Para eliminar una imagen del mapa arrastra el círculo hasta el panel inferior.


421

6. Una vez concluida la geolocalización de las distintas imágenes haz clic en el enlace Tus fotos situado en la esquina superior derecha del mapa.

5.2.5 Integración HTML de una imagen Flickr


2. Desde la página Tus fotos selecciona una imagen haciendo clic sobre ella para visualizarla en solitario.


422

3. Haz clic derecho sobre la fotografía y selecciona la opción Copiar la ruta de la imagen.

4. Abre Kompozer 5. Sobre un documento web nuevo añade un título con formato Título 1. Por ejemplo:

“Mi imagen en Flickr” 6. Haz clic sobre el documento para situar el cursor debajo del título. 7. Clic sobre el botón Imagen para insertar una imagen en el documento

8. En el cuadro de diálogo Propiedades de la imagen haz clic derecho sobre el cuadro

de texto Ubicación de la imagen y selecciona Pegar.


423

9. Esta tarea pegará la URL absoluta de la imagen que al cabo de unos segundos se mostrará en la Vista preliminar.

10. Introduce el Texto alternativo. Por ejemplo: “El Faro de Cudillero”. 11. Clic en el botón Aceptar. 12. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre

flickr_image.html 13. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el

resultado en el navegador Firefox. 5.2.6 Integración HTML de una presentación de fotografías Flickr


2. En la barra de menús de Flickr selecciona Tú > Tus Álbumes.

3. A continuación haz clic sobre el album creado anteriormente. Una vez dentro del álbum observa que existe un enlace con el texto Ver como presentación. Si se hace clic en este enlace se mostrará una presentación con la secuencia de fotografías que forman parte del álbum.

4. Mientras estás visualizando esta presentación se puede seleccionar la URL de esta presentación en la barra de dirección del navegador. Para ello haz clic derecho sobre la barra de direcciones y elige Seleccionar todo. A continuación haz clic derecho y selecciona Copiar.

Otra posibilidad es regresar a la ventana anterior y hacer clic derecho sobre el enlace Ver como presentación para seleccionar la opción Copiar la ruta del enlace. En cualquiera de los dos casos se copia al portapapeles la URL de esta presentación.


424

5. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación en Flickr” en formato Titulo 1.

6. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 7. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic

derecho y elige Pegar.

8. En el documento actual debes crear un marco interno (IFRAME) que apunte a esta URL

absoluta que hemos pegado. Para ello escribe: <iframe src="<url>" width="800" height="600"> </iframe> donde <url> es la dirección entre comillas que hemos copiado. Los atributos width y height definen el tamaño del marco interno.

9. Clic en el botón Insertar. 10. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre

flickr_gallery.html 11. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el

resultado en el navegador Firefox.


425

5.2.7 Integración HTML de un mapa de Flickr


2. En la barra de menús de Flickr selecciona Tú > Tu Mapa 3. Una vez dentro del mapa haz clic sobre el enlace inferior Filtros.

4. En la lista Persona elige la opción Tú para que en el mapa se muestren sólo las fotos que has colocado sobre el mapa.

5. En la esquina inferior derecha del mapa pulsa sobre el enlace Vincular a esto

6. Se muestra el cuadro de diálogo Vincular a esta mapa. Clic derecho sobre el contenido de este cuadro de texto y selecciona primero Seleccionar todo y luego Copiar.

7. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi mapa en Flickr” en formato Titulo 1.


derecho y elige Pegar. 10. En el documento actual debes crear un marco interno (IFRAME) que apunte a esta URL

absoluta que hemos pegado. Para ello escribe: <iframe src="<url>" width="800" height="600"> </iframe> donde <url> es la dirección entre comillas que hemos copiado. Los atributos width y height definen el tamaño del marco.

11. Clic en el botón Insertar de este cuadro de diálogo. 12. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre

flickr_map.html 13. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el


Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

426

5.3 Slide.com: presentación de

imágenes


427

5.3 Slide.com: presentación de imágenes

Slide.com (http://www.slide.com) es un servicio web 2.0 que nos permite subir una colección de imágenes y luego obtener en línea una atractiva presentación que las muestra de forma secuencial y con efectos especiales. Esta presentación tendrá una URL que podemos compartir con otras personas. También es posible integrarla dentro de una página web. Este servicio puede resultar interesante para publicar las fotos de los distintos eventos que se celebran en el centro.

1. Descarga y descomprime el archivo slidecom.zip en una carpeta del disco duro. Como resultado de esta tarea dispondrás de una colección de fotografías para crear tu presentación. Otra posibilidad es utilizar una colección propia.

2. Abre el navegador web Firefox y visita la web de Slide.com: http://www.slide.com 3. Se puede crear una presentación sin necesidad de registrarse como usuario de este

servicio. Sin embargo conviene registrarse haciendo clic en el enlace Regístrate para poder editar en cualquier momento las presentaciones creadas. Para ello introduce tu email y la contraseña. Una vez completado el registro, en el formulario ENTRAR introduce estos datos para autentificarte.

4. Clic en el botón Crear un Slide Show.

5. En la pestaña Mis archivos haz clic en el botón Busca para subir las imágenes desde el equipo.

6. En el cuadro de diálogo Seleccione los archivos … navega para situarte dentro de la carpeta anterior. Puedes seleccionar un solo archivo con hacer clic sobre él. Para añadir, uno a uno, a la selección pulsa previamente la tecla Ctrl y sin soltarla vete haciendo clic sobre los archivos que deseas elegir. Para añadir una lista de archivos: haz clic en el primero, pulsa la tecla Mayus y sin soltarla haz clic en el último. Verás que se seleccionan todos. Utiliza este truco para elegir todos los archivos de imagen de esta carpeta.


428

7. Clic en el botón Abrir. 8. Transcurridos unos segundos se habrán subido estas imágenes al servidor remoto. Una

vez finalizado el proceso se mostrará el mensaje Subida terminada. En la vista previa de la presentación que se muestra arriba ya aparecen estas imágenes.

9. En el panel inferior donde se muestran las imágenes subidas se puede realizar los siguientes ajustes: Nombre de Slide Show: Mi viaje por Asturias Pies de foto: Escribe el pie de página para cada fotografía ya que por defecto se

sitúa el nombre del archivo. Orden de las fotografías. Arrastra las imágenes para colocarlas en el orden en

que se mostrarán. Azar. Si activas esta casilla las fotos se mostrarán de forma aleatoria.

10. En el panel derecho Personaliza se pueden configurar interesantes opciones de la presentación: Estilo, Temas y Skins: puedes combinar las distintas opciones de estos

parámetros para conseguir presentaciones más personalizadas. En la pestaña Estilo se puede activar la casilla Azar para que se muestre cada vez con un estilo aleatorio y desplegar la lista Rapidez para elegir la velocidad de la animación: Fast, Medium y Show (Rápido, Medio y Lento).

Música: permite elegir una música de fondo. Fondo: para elegir un color de fondo. Efectos: para aplicar efectos de sepia, blanco/negro, etc a las fotos. Tamaño: en función del modelo definido para el estilo se podrá elegir un tamaño

estándar: small, medium o large (pequeño, mediano y grande). Privacidad: permite establecer si la presentación será de acceso público o

particular. Se recomienda la opción de acceso público.


429

11. Para terminar de configurar la presentación pulsa en el botón Guardar.

12. Si no te has registrado y autentificado Slide.com te ofrece la oportunidad de hacerlo. Si continuas sin registrar no será posible editar el slide.com.

13. A continuación se muestra el código de integración HTML de la presentación para los distintos formatos de blog. En este caso la tarea consiste en integrarla en una página web que estamos elaborando. Para ello haz clic en la pestaña My Space (podría ser otra), haz clic en el contenido del cuadro O copia este código.

14. Una vez seleccionado este texto haz clic derecho sobre este cuadro y elige Copiar en el menú contextual que se muestra. También se puede copiar mediante la combinación de teclas <Ctrl>+<C>.

15. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación Slide.com” en formato Titulo 1.

16. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML.


430

17. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Clic en el botón Insertar.

18. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre

slidecom.html 19. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el


Servicios Web 2.0 ::: Slideshare: presentaciones en línea Diseño de materiales multimedia. Web 2.0

431

5.4 Slideshare: presentaciones en línea


432

5.4 SlideShare: Presentaciones en línea SlideShare (http://www.slideshare.net) es un servicio de alojamiento y publicación en línea de presentaciones realizadas con herramientas como Powerpoint u OpenOffice. Puedes utilizarlo para subir tus presentaciones y compartirlas. También puedes buscar y utilizar las realizadas por otras personas. En este curso se propone SlideShare como una interesante opción para publicar en la web nuestras propias presentaciones y luego poder integrarlas en el código HTML de una página. Conviene registrarse previamente para crear tu cuenta en SlideShare. Para ello haz clic en el enlace Signup y completa el formulario indicando email, usuario y contraseña. A partir de ese momento ya dispones de credenciales de identificación y acceso.

1. Descarga y descomprime el archivo TIC_project.zip en el disco duro de tu equipo. Como resultado de esta tarea obtendrás el archivo TIC_project.ppt que contiene una presentación realizada en PowerPoint.

2. Abre el navegador Firefox y visita la página de SlideShare: http://www.slideshare.net

3. En el cuadro de Login introduce las credenciales de acceso. 4. Clic en el enlace Upload (Subir). 5. En la página se muestra información sobre el tipo de archivos que se pueden subir:

.ppt y .pps (Powerpoint), .odp (Impress de OpenOffice) y .pdf. También se indica que este espacio es público. No se recomienda subir ningún material si se desea mantener en privado. También se indica el tamaño máximo del archivo. En este caso son 30 MB.

6. Clic en el botón Browse and select files … (Navegar y elegir archivos …). 7. En el cuadro de diálogo Seleccione los archivos … navega para situarte en la carpeta

donde has descargado y descomprimido el archivo TIC_project.ppt.


433

8. Selecciónalo y pulsa en el botón Abrir. 9. Tras unos segundos de espera se subirá esta presentación en SlideShare. 10. Cuando el proceso de subida ha tenido éxito se solicitan algunos datos adicionales:

Title (Título). Es el título de la presentación. Ejemplo: Proyecto TIC en un centro educativo

Tags (Etiquetas). Es una relación de palabras-clave separadas por comas que permitirán localizar esta presentación utilizando la herramienta de búsqueda de SlideShare. Ejemplo: TIC, proyecto, integración, educación, tecnologías

Language (Idioma). Selecciona la opción Spanish (Español). Description (Descripción). Un breve comentario que a modo de introducción

permite describir la presentación. Allow file download. (Permitir descarga de archivo). Si marcas esta opción los

usuario podrán descargarse el archivo original.

11. Para concluir el proceso de subida pulsa en el botón Publish. 12. Tras pulsar este botón se produce otro tiempo de espera. SlideShare está

transformando el archivo original en una película Flash que se mostrará al usuario mostrando el contenido de esa presentación.

13. Clic en el enlace superior My Slidespaces y luego en la imagen que muestra la presentación que acabamos de subir. De esta forma se accede a la visualización de esta presentación.

14. Haz clic derecho sobre el cuadro de texto Embed into your blog (Embebido dentro de tu blog) para elegir Seleccionar todo y luego Copiar.


434

15. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación SlideShare” en formato Titulo 1.


derecho y elige Pegar. Observa que el código copiado desde SlideShare se ha pegado aquí. Clic en el boton Insertar.

18. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre slideshare.html

19. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Nota:

Esta integración HTML también se puede realizar con presentaciones publicadas por otras personas. Al situarse en su página también se ofrece el código Embed para copiar y pegar en nuestra página web.

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

435

5.5 BooMP3: audio en línea


436

5.5 BooMP3: Audio en línea 5.5.1 ¿Qué es BooMP3? BooMP3 (http://boomp3.com/) es un interesante servicio Web 2.0 que permite subir archivos MP3 y WMA (Windows Media Audio) desde el disco duro del equipo local o bien desde una dirección web. A cada recurso sonoro se le puede asignar información textual: título de la canción y descripción. Esto facilita su búsqueda. Cada pista de audio dispondrá de una página propia donde se proporciona un código HTML para insertar su reproductor en nuestra página web. No es necesario registrarse para utilizar este servicio. 5.5.2 Subir un archivo local

1. Descarga y descomprime el archivo africa.zip en el disco duro de tu equipo. Como resultado de esta tarea obtendrás el audio: africa.mp3

2. Abre el navegador Firefox y visita la página de BooMP3: http://boomp3.com 3. En la página de entrada haz clic en el botón Click and select file to upload (Haz clic

y elige un archivo para subir).

4. En el cuadro de diálogo Seleccione los archivos que se cargarán con Boomp3. Localiza en el disco duro de tu equipo el archivo de audio africa.mp3 anteriormente descargado

5. Pulsa en el botón Abrir. Se iniciará automáticamente la subida del archivo o archivos de audio al servidor remoto.

6. Una vez subido introduce los datos del audio para facilitar su búsqueda: 1. Song title (Título de la canción). Ejemplo: Sonidos de África. 2. Your email (Tu dirección de correo electrónico). Introduce tu dirección de correo

electrónico. 3. Copyright. Debes marcar esta etiqueta garantizando con ello que este archivo no

está protegido con derechos de autor. 4. Description (Descripción). Ejemplo: Loop musical extraído del portal FlashKit


437

7. Para terminar pulsa en el botón Save (Guardar ). 8. A continuación se muestra la página donde se muestra el título de la canción y el

sencillo reproductor de BooMP3 para escucharla.

Notas:

1. Para subir un audio es imprescindible introducir una dirección de correo electrónico. Si pulsas en el enlace superior View your files (Ver tus archivos) se mostrará un cuadro de texto donde si introduces tu correo electrónico, se mostrará una lista de acceso a todos los audios subidos a BooMP3 con esa cuenta.

2. Al subir un audio recibirás un email en la cuenta de correo que has declarado. Este mensaje contiene un enlace a la página del audio y otra al editor que permitirá eliminar al archivo. Conserva este mensaje si deseas eliminar el audio posteriormente.


438

5.5.3 Integración HTML del reproductor de BooMP3

1. Abre el navegador Firefox y visita la web de BooMP3: http://boomp3.com 2. Para visualizar tus archivos de audio pulsa en el enlace View your files (Ver tus

archivos) e introduce la dirección de correo electrónico que has utilizado para subir los archivos de audio a BooMP3. Otra posibilidad es pulsar en View all uploaded files para acceder al catálogo general de audios y situarse en uno de ellos.

3. Clic en el enlace del archivo de audio subido. Por ejemplo: Africa. Se mostrará una página con el reproductor de BooMP3 que permite escuchar el audio.

4. Haz clic en el enlace Post this player to your blog (Publica este reproductor en tu blog).


439

5. En el cuadro Posting player to your blog (Publicar el reproductor en tu blog) puedes marcar dos opciones adicionales:

Autoplay song: se inicia la reproducción de la canción al cargarse. Repeat song: se repite la canción en un bucle contínuo

6. Pulsa sobre el botón Copy (Copiar) para copiar el código embed 7. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi audio de

BooMP3” en formato Titulo 1. 8. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 9. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic

derecho y elige Pegar. Observa que el código copiado desde BooMP3 se ha pegado aquí. Clic en el boton Insertar.

10. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre boomp3.html


Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

440

5.6 Multiply: repositorio de archivos


441

5.6 Multiply: repositorio de archivos Existen espacios donde es posible subir archivos multimedia (imagen, audio, vídeo, animaciones, archivos etc) que luego se pueden integrar en la página web del centro o proyecto. En la siguiente tabla se recogen algunas webs donde se pueden almacenar archivos en línea. Se indican sus prestaciones actuales para las cuentas gratuitas: Sitio URL Capacidad Tráfico Por archivo Multiply http://multiply.com/ --- --- 100 Mb MediaMax http://www.mediamax.com 25 Gb 1 Gb/mes 10 Mb Twango http://www.twango.com/ Ilimitado 250 Mb/mes 100 Mb Box.net http://www.box.net/ 1 Gb 10 Gb/mes Ilimitado Omnidrive http://www.omnidrive.com/ 1 Gb 5 Gb/mes Ilimitado

Capacidad: Capacidad total de almacenamiento por cuenta Tráfico: Tráfico mensual de descargar permitido Por archivo: Límite de subida por archivo A continuación se describe el procedimiento para utilizar un repositorio como Multiply para guardar y reutilizar archivos de imágenes, audios o vídeos. 5.6.1 Registrarse como usuario en Multiply

1. Accede a la web de Multiply en la dirección: http://multiply.com 2. Clic en el enlace Join for free para completar el formulario de registro. Puedes

utilizar una dirección de correo electrónico de Yahoo o MSN. Recuerda el usuario y contraseña definido para posteriores accesos.

3. A continuación consulta el correo electrónico. Abre el mensaje de confirmación que te ha enviado Multiply a tu cuenta. Pulsa en el enlace de confirmación para completar el paso de verificación de la dirección de correo electrónico. Cierra el correo electrónico y el navegador.

4. Tras la creación de una cuenta la dirección de la página de inicio en Multiply será del tipo: http://<usuario>.multiply.com/

5.6.2 Subir e integrar una imagen al repositorio Multiply

1. Descarga y descomprime el archivo multiply.zip a la carpeta c:\multiply. Como resultado de esta extracción dispondrás del archivo de imagen elogio.jpg y el archivo de audio bistro.mp3.

2. Abre el navegador web y sitúate de nuevo en la web de Multiply. Introduce tu nombre de usuario y contraseña. Pulsa en el botón Sign In (Entrar)

3. Pulsa en el botón My Site (Mi Sitio) y luego en el botón Add Photos (Añadir Fotos)

dentro del cuadro Photos (Fotos)


442

Nota: Para que funcione correctamente la subida de archivos es necesario tener instalado en el equipo Java Runtime Environment (JRE) http://www.java.com/es/download/

4. Existen dos procedimientos alternativos para seleccionar imágenes del disco duro

local. • Arrastrar y soltar. Restaura la ventana del navegador web para que no ocupe

toda la pantalla. Abre Mi PC para navegar hasta la carpeta multiply. Arrastra el archivo desde el explorador de archivos hasta el cuadro Upload Photos en el navegador.

• Elegir fotos. Pulsa en el botón Choose Photos (Elige fotos). Se muestra un cuadro de diálogo Enviando para desplegar la lista Buscar en y situarse en la carpeta multiply. Selecciona el archivo elogio.jpg. Para terminar pulsa en el botón Abrir.


443

5. Tras seleccionar las distintas imágenes de tu disco duro (en este caso sólo vamos a hacerlo con una) pulsa en el botón Upload (Subir) que aparece debajo del cuadro de vistas previas. Las imágenes se organizan en albums y posteriormente se pueden subir o eliminar imágenes de un mismo album.

6. En el panel Album Details (Detalles del Album) introduce: • Title (Título). Por ejemplo: Elogio al horizonte de Chillida • Description (Descripción). Ejemplo: Lugares típicos de Asturias. • Tags (etiquetas semánticas para facilitar la búsqueda). Ejemplo: monumentos,

asturias, lugares típicos, paisajes, etc.


444

7. Clic en el botón Save & Publish (Guardar y publicar). 8. Una vez concluido el proceso de subida al servidor remoto de todas las imágenes

seleccionadas se mostrará el mensaje Post Successful (Envío con éxito). 9. Pulsa en el enlace Go to your Multiply Site (Ir a tu sitio Multiply)

10. Pulsa sobre la imagen del album que has creado en el cuadro Photos.


445

11. Una vez dentro del álbum haz clic sobre la imagen que desees para que se muestre en tamaño apropiado.

12. Clic derecho sobre la imagen y selecciona la opción Copiar la ruta de la imagen … De esta forma se copiará al portapapeles la URL absoluta donde se encuentra almacenada esta imagen

13. Sobre la barra de Dirección del navegador web haz doble clic sobre la URL actual y a continuación haz clic derecho para seleccionar Pegar.


446

14. Puedes utilizar Kompozer para insertar esta imagen en una página web mediante Insertar > Imagen. En la casilla Ubicación de la imagen pega la dirección anteriormente copiada al portapapeles. Clic en Aceptar.


447

3. Subir e integrar un audio al repositorio Multiply

1. Accede al sitio web Multiply (http://multiply.com) y utiliza tus credenciales personales para autentificarte en tu cuenta.

2. Clic en la pestaña superior My Site (Mi sitio). 3. Pulsa en el enlace Add Music del cuadro Music

4. En el panel Upload Music (Subir música) pulsa en el botón Examinar … del primer cuadro. Navega por tu equipo local para seleccionar y abrir el archivo multiply\bistro.mp3. Se puede subir varios archivos de audio y organizarlos en listas de reproducción (playlists).

5. Para subir el archivo haz clic en el botón Upload (Subir). Transcurridos unos minutos se completa el proceso.


448

6. En el panel Playlist Details (Detalles de la lista de reproducción) introduce:

• Playlist Name (Nombre de la lista). Ejemplo: Música de danza • Description (Descripción). Ejemplo: Música para bailar • Which songs should be included in this playlist? (¿Qué canciones se incluirán

en esta lista?). En este caso se marca la canción anteriormente subida. • Tags (etiquetas semánticas para facilitar la búsqueda). Ejemplo: bistro,

mancini, danza, etc.

7. Clic en el botón Save & Publish para terminar. 8. Si todo ha ido bien se mostrará el mensaje Post Sucessful! (Envío con éxito). 9. Pulsa en el enlace Go to your Multiply Site (Ir a tu sitio Multiply) 10. Observa que en el cuadro Music ahora aparece la lista de reproducción anteriormente

creada. Haz clic sobre ella para abrirla. 11. En la pista que se ha subido pulsa sobre el enlace Play this playlist (reproducir esta

lista). 12. En el cuadro de diálogo Abrir con | Guardar en disco selecciona Abrir con y elige,

por ejemplo reproductor Windows Media Player o VLC Media Player. 13. Clic en el botón Aceptar. Tras su descarga comenzará la reproducción. 14. Pulsa sobre el enlace Share (Compartir)

15. En el cuadro de texto Link puedes copiar el enlace a la página de Multiply donde se puede escuchar este audio.

16. Clic derecho sobre el cuadro de texto Link y elige Seleccionar todo. Clic derecho de nuevo y selecciona Copiar.

17. Abre una página web con Kompozer. Sitúa el cursor donde deseas situar el enlace. 18. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiará el código

HTML que contiene el enlace. Notas:

• No se ofrece una dirección absoluta al archivo de audio. En su defecto disponemos de un enlace a una página desde donde se puede reproducir el audio.

• Para poder acceder a esa página es necesario que el usuario se autentifique con unas credenciales de Multiply. Este requisito es algo relativamente nuevo.


449

4. Subir e integrar un vídeo al repositorio Multiply

1. Descarga y descomprime paisajes.zip para obtener el archivo paisajes.wmv en una carpeta de tu equipo.

2. Accede al sitio web Multiply (http://multiply.com) y utiliza tus credenciales personales para autentificarte en tu cuenta.

3. Clic en la pestaña superior My Site (Mi sitio). 4. Pulsa en el enlace Add Vídeo del cuadro Vídeo

5. Multiply puede alojar vídeos procedentes de 3 tipos distintos de fuentes:

• Upload a vídeo: subir un archivo del disco duro local. • Record a vídeo: grabar un vídeo de la webcam o vídeo del equipo. • Import vídeos: importar un vídeo de youtube, metacafe, myspace, google vídeo,

etc. 4.1 Subir un archivo de vídeo local

6. En el cuadro Upload a vídeo pulsa en el botón Examinar, navega para localizar y abrir el archivo descargado paisajes.wmv. Clic en Abrir. Existe un límite de 100 MB de tamaño en el archivo de vídeo para subir. Son aproximadamente 10 minutos de grabación.

7. Para terminar pulsa en el botón Upload Video File (Subir archivo de vídeo). 4.2 Grabar un vídeo Para realizar esta práctica es necesario disponer de una cámara DV o webcam + micrófono conectados al equipo.

6. Seleccciona My Site > Vídeo > Add Vídeo 7. En la sección Record a Video (Grabar un Vídeo) haz clic en el botón Multiply Vídeo

Recorder (Grabador de vídeo Multiply). Es necesario tener instalado en el navegador web el plugin del reproductor de Flash 8.


450

8. Pulsa en el botón Permitir para que la aplicación puedan acceder a la webcam y micrófono conectados al equipo.

9. Se mostrará la captura de la cámara en el cuadro Video Recorder. Si tienes varios dispositivos de captura de vídeo y de audio abre los cuadros desplegables y selecciona los adecuados.

10. Para iniciar la grabación haz clic en el botón Record (Grabar) que aparece en el centro del capturador o bien pulsa la tecla barra espaciadora.

11. Para detener la grabación haz clic en el botón Stop (Detener) que se muestra en la esquina inferior izquierda del capturador o bien pulsa la tecla barra espaciadora.

12. Tras realizar la captura se mostrará una consola con varios botones: Play (reproducir la captura realizada), Record (volver a grabar), Save (guardar) y Discard (descartar).

13. Para guardar el vídeo pulsa en el botón Save (Guardar). Nota:

Conviene no exceder de 10 minutos en el tiempo de grabación. Recuerda que Multiply tiene el límite de 100 MB por archivo subido.

4.3 Importar vídeos

6. Seleccciona My Site > Vídeo > Add Vídeo 7. En la sección Import vídeos (Importar un vídeo) pulsa sobre un servicio de vídeo. Por

ejemplo Youtube.com


451

8. En el cuadro de diálogo Import YouTube Video – by URL (Importar vídeo de Youtube mediante URL) pega la dirección del vídeo que te interese. Por ejemplo: http://www.youtube.com/watch?v=7vgAYTC9bRY y pulsa en el botón OK.

Nota:

Importar vídeos de Youtube y otros servidores a mi cuenta Multiply puede resultar interesante para evitar los vídeos relacionados inapropiados.

4.4 Guardar el vídeo

9. En cualquiera de los casos anteriores (subir un archivo de vídeo local, grabar un vídeo o importarlo desde Youtube), una vez concluido con éxito el proceso de subida se mostrará una página donde debes introducir los datos del vídeo: Subject (Título), Description (Descripción), Tags (Etiquetas) y Access (Acceso).

10. Para terminar pulsa en el botón Save & Publish (Guardar y publicar) 11. Clic de nuevo en la pestaña My Site. 12. Para visualizar el archivo de vídeo haz clic sobre su título dentro del cuadro Vídeo.


452

13. Pulsa sobre el enlace Share (Compartir)

14. Hay dos formas de integrar en una página HTML un vídeo alojado en Multiply: • Embed (incrustado o embebido): inserta dentro de la página HTML un reproductor

mostrando el vídeo. • Link (enlace): inserta un enlace a una página de Multiply donde se visualiza ese

vídeo.

15. En este caso haz clic derecho sobre el cuadro de texto Embed y elige Seleccionar todo. Clic derecho de nuevo y selecciona Copiar.

16. Abre una página web con Kompozer. Sitúa el cursor donde deseas situar el enlace. 17. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiará el código

HTML que empotra el reproductor con el vídeo. Nota:

Para acceder a la visualización de un vídeo no es necesario disponer de credenciales de Multiply.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

453

5.7 Scribd: documentos en línea


454

5.7 Scribd: documentos en línea Scribd (http://www.scribd.com/) es un espacio donde se pueden subir y alojar documentos procedentes de distintos formatos de archivo: *.doc, *.xls, *.pdf, etc. Una vez subido se proporciona un interfaz enriquecido que permite distintas opciones de visualización y manejo del documento. El usuario sólo necesita disponer de un navegador web con el plugin de Adobe Flash para poder acceder al mismo. Como veremos en este apartado este visor se puede integrar en el código HTML de una página web de nuestro sitio web. El propósito de este proyecto es crear una gran biblioteca de documentos para compartir entre los usuarios.

1. Descarga y descomprime a la carpeta scribd el contenido del archivo scribd.zip. Como resultado de esta tarea obtendrás en esta carpeta el documento web20.doc para Microsoft Office Word.

2. Visita la web de Scribd y registrate como usuario/a en Log In. Para ello elige un nombre de usuario y contraseña e introduce estos datos junto con una dirección de correo electrónico.

3. Utiliza estas credenciales para autentificarte y una vez superado este proceso selecciona My docs en el menú superior, My Documents (Mis documentos) en el menú lateral izquierdo y luego pulsa en el botón Upload (Subir)

4. Se muestra la página Publish a document ::: Step 1 of 2: Upload something (Publicar un documento ::: Paso 1 de 2: Subir algo). Se pueden subir los siguientes formatos de archivo: .doc (Microsoft Word); .pdf (Adobe Acrobat); .txt (texto plano); .ppt, .pps (Microsoft Powerpoint); .xls (Microsoft Excel); .odt, odp, etc. (OpenDocument Format / ODF - OpenOffice.org, KOffice, etc.); .sxw, sxi, etc. (OpenDocument Format / ODF - OpenOffice.org, KOffice, etc.)


455

5. Clic en el botón Browse (Examinar). 6. En el cuadro de diálogo Seleccione los archivos que se cargarán con

www.scribd.com selecciona la carpeta scribd y dentro de ella haz clic sobre el documento web20.doc. Pulsa en el botón Abrir.

7. Transcurridos unos segundos se habrá subido el documento al servidor mostrándose una ventana donde podemos definir: Title (título), Description (Descripción) y Tags (Ëtiquetas de contenido para la búsqueda). Para terminar pulsa en el botón Publish (Publicar).

8. Se muestra la página Documents from your bulk upload (Documentos subidos desde tu equipo). Clic en el enlace view here (ver aquí) para ver su aspecto.


456

9. Existen dos modos de visualización del documento: Formato HTML y Formato Visor PDF. En la parte superior del título del documento, a la derecha, haz clic en el enlace Switching to PDF player format (Cambiar al formato de Visor PDF). Para regresar al modo HTML pulsa en el enlace que lo sustituye: Switching to HTML format (Cambiar a formato HTML).

10. Cuando estás en el modo Visor PDF se puede navegar por el documento utilizando las distintas opciones que proporciona el marco superior del visor.

• Activa el botón Mano para poder arrastrar y soltar las páginas del documento utilizando el puntero del ratón.

• Activa la herramienta Selección para poder seleccionar fragmentos de texto del documento con sólo arrastrar y soltar. El texto seleccionado se puede copiar (<Ctrl>+<C>) y luego pegar (<Ctrl>+<V>) sobre otro documento.

• Introduce un término en el cuadro de texto y luego pulsa en el icono lupa situado a su derecha para iniciar una búsqueda en el documento actual.

• Arrastra el deslizador para aumentar o disminuir el zoom de visualización del documento o bien pulsa en los botones de ajuste de página o anchura de página.

• Introduce el número de página para situarte directamente en ella tras pulsar la tecla <enter>. Otra posibilidad es utilizar los botones adelante/atrás que permiten desplazarse en ambas direcciones página a página sobre el documento.

• Si deseas obtener una copia impresa del documento haz clic en el icono de la impresora.

• Para ver el documento a pantalla completa pulsa en el botón situado más a la derecha de la barra de herramientas.


457

11. En la base del visor se ofrece al usuario la posibilidad de descargarse el documento en distintos formatos:

• Download as PDF (Descargar como PDF). • MS Word (Microsoft Word) • Plain text (Texto plano). • MP3. Scribd genera mediante un sintetizador de voz una locución sonora del

texto subido. No tiene mucha calidad pero es curioso

12. En el área derecha del documento se muestra un panel donde se puede descargar el documento (Download as) como PDF, MS Word, Texto plano o MP3. También se dispone de una consola de reproducción el audio que nos permite escuchar la locución sonora. Cuando el texto está en castellano apenas es inteligible.

13. Para insertar este documento en una página de nuestro sitio web, haz clic en la casilla de texto Embed que muestra el código HTML de inserción y a continuación haz clic derecho para seleccionar Copiar en el menú contextual que se muestra.


458

14. Abre Kompozer y selecciona Archivo > Nuevo > Un documento vacío. 15. Sobre la nueva página escribe el título “La Web 2.0” y asígnale el estilo Título 1. 16. Sitúa el cursor en la siguiente línea y a continuación elige Insertar > HTML 17. En la ventana Insertar HTML haz clic en el cuadro de texto y a continuación haz clic

derecho para seleccionar Pegar. Clic en el botón Insertar.

18. Pulsa en el botón Guardar. Introduce el título: “La Web 2.0” y guarda esta página en la carpeta miweb con el nombre web20.html

19. Clic en el botón Navegar de Kompozer para visualizar a través del navegador Firefox. Otra posibilidad es utilizar el explorador de archivos para hacer doble clic sobre el archivo web20.html y verlo con el navegador web por defecto del equipo.


459

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

460

5.8 Youtube: vídeo en streaming


461

5.8 YouTube: vídeo en streaming 5.8.1 ¿Qué es Youtube? YouTube (http://www.youtube.com) es un servicio de búsqueda y alojamiento de vídeos que ofrece la posibilidad de asignar tags o etiquetas a los mismos para facilitar su localización. En poco tiempo este sitio web se ha convertido en el mayor repositorio de vídeos en Internet. Cualquier usuario puede registrarse de forma gratuita y subir sus vídeos. Estos pueden ajustarse a cualquier temática siempre y cuando no sea pornográfica y no incumplan las leyes vigentes sobre copyright y pertinencia de contenidos. Cada usuario podrá subir todos los vídeos que desee en los formatos admitidos: *.AVI, *.MOV y *.MPG. Existe la limitación de un tamaño máximo de 100 MB por archivo. Para registrarse como usuario en YouTube pulsa en el enlace Sign up (Registrarse) y rellena el formulario. Para concluir el proceso pulsa en el botón Sign up. 5.8.2 Publicar un vídeo en YouTube

1. Descarga y descomprime el archivo paisajes.zip en tu disco duro. Como resultado obtendrás el archivo de vídeo paisajes.wmv

2. Abre el navegador Firefox y visita la web de Youtube : http://www.youtube.com. 3. Clic en el enlace Log in. Introduce el usuario y contraseña personales en Youtube y a

continuación pulsa en el botón Log In. 4. Una vez superado con éxito el proceso de autentificación haz clic en el botón Upload

Video (Subir Video)

5. En la página Video Upload (Subida de archivo) puedes definir los siguientes valores para el vídeo:

• Title (Título). Ejemplo: Paisajes asturianos. • Description (Descripción). Texto breve que describe el vídeo. Ejemplo:

Algunas fotografías de sitios asturianos. • Video Category (Categoría del Vídeo). Selecciona una categoría o tema.

Ejemplo: Entertainment (Entretenimiento). • Tags (Etiquetas). Facilitan la búsqueda del vídeo. Se introduce una o varias

etiquetas separadas por espacios. Ejemplo: asturias paisajes. Estos son los campos obligatorios para poder subir un vídeo. En el resto se pueden dejar las opciones por defecto.


462

Además de las opciones básicas es posible configurar otros parámetros haciendo clic previamente en el enlace choose options (elige opciones) de los siguientes apartados:

• Broadcast Options (Opciones de difusión). Si pulsas en el enlace choose options (elige opciones) podrás elegir entre Public para compartir el video con todo el mundo (es la opción por defecto y recomendada) y Private donde sólo será visible por ti o los usuarios que indiques.

• Date and Map Options (Opciones de fecha y mapa). Permite definir la fecha en que fue grabado y sobre una mapa de Google Maps el lugar geográfico concreto donde se tomó (geolocalización).

• Sharing Options (Opciones de compartición). En este apartado se puede elegir entre …

Comments (Comentarios). - Allow comments to be added automatically. Permitir que los

comentarios se añadan automáticamente. Es la opción por defecto.

- Yes, allow comments after I approve them. Friends can add automatically. Se permiten comentarios pero solo serán visibles después de aprobarlos. Los amigos podrán añadirlos automáticamente.

- Yes, allow comments after I approve them. Se permiten comentarios pero solo serán visibles después de aprobarlos.

- No, don't allow comments. No se permiten comentarios.

Comment Voting (Votaciones). - Yes, allow users to vote on comments. Permitir las

votaciones en los comentarios. Es la opción por defecto. - No, do not allow users to vote on comments. No permitir las

votaciones en los comentarios.

Video Responses (Vídeos relacionados). - Yes, allow video responses to be added automatically.

Permitir que otros usuarios de YouTube puedan relacionar automáticamente sus vídeos con el mío. Es la opción por defecto.

- Yes, allow video responses after I approve them. Permitir que puedan relacionar otros vídeos con éste después de haberlo aprobado.

- No, don't allow allow video responses. No permitir relacionar este video con otros.

Ratings (Puntuaciones)


463

- Yes, allow this video to be rated by others. Permitir que este video pueda ser puntuado por los usuarios. Es la opción por defecto.

- No, don't allow this video to be rated. No permitir que este video pueda ser votado.

Embedding (Incrustado)

- Yes, external sites may embed and play this video. Permitir que sitios externos puedan incrustar y reproducir este vídeo. Es la opción por defecto.

- No, external sites may NOT embed and play this video. No admite que este video se pueda incrustar en una página web externa y se reproduzca en ella.

Syndication (Sindicación) - Yes, make this video available on mobile phones and TV.

Hacer que el vídeo esté disponible en teléfonos móviles y TV. Es la opción por defecto.

- No, this video should not be available on mobile phones and TV. Este vídeo NO estará disponible para teléfonos móviles ni TV.

6. Pulsa en el botón Upload a vídeo … (Subir un vídeo). 7. En la página Video Upload (Subida de vídeo) pulsa en el botón Browse (Examinar)

para localizar el archivo que has descargado y descomprimido en tu equipo local: paisajes.wmv. A continuación pulsa en el botón Upload Vídeo (Subir vídeo).

8. Tras unos segundos de espera si el vídeo se ha subido con éxito se mostrará el

mensaje: Video Upload – Upload Complete (Subida de vídeo – Subida completada).


464

9. Clic en el enlace My Videos (Mis vídeos) para acceder a la lista de archivos de vídeo subidos.

Nota: Después de subir el archivo al servidor puede ocurrir que tengas que esperar unos minutos para que se complete la conversión del vídeo. YouTube procesa el formato original del archivo para transformarlo en formato Video Flash.

5.8.3 Integración HTML de un vídeo YouTube

1. Abre el navegador Firefox y visita la web de Youtube : http://www.youtube.com. Introduce tus credenciales para autentificarte.

2. Clic en la sección My Account > My Videos (Mis vídeos). 3. Clic en el título del vídeo que hemos introducido en el apartado anterior. Se visualiza

una página mostrando la reproducción del vídeo.

4. Clic sobre el cuadro de texto Embed para seleccionar el código. A continuación haz clic derecho y selecciona Copiar. Con esta operación hemos copiado al portapapeles el código HTML que permitirá incrustar el reproductor de Youtube y este vídeo en nuestra página web.


465

Nota: Sin necesidad de estar autentificado también es posible integrar en nuestra página HTML cualquier vídeo de Youtube (a menos que su autor haya definido que no permite su incrustación embed). Para ello navega para reproducir el vídeo que desees y copia el código Embed que aparece en la página del vídeo. 5. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi video de

Youtube” en formato Titulo 1. 6. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 7. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic

derecho y elige Pegar. Observa que el código copiado desde YouTube se ha pegado aquí. Clic en el boton Insertar.

8. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre youtube.html


5.8.4 Crear un lista de reproducción de vídeos en Youtube YouTube ofrece la posibilidad de crear listas de reproducción de vídeos alojados en este servicio. Estos pueden ser propios o ajenos. En el siguiente ejemplo se recoge el procedimiento para construir una lista de reproducción y luego insertarlo en una página web.

1. Visita la página de YouTube utilizando Mozilla Firefox: http://www.youtube.com 2. Introduce tus credenciales personales para autentificarte. 3. Visita la sección My Account (Mi cuenta) 4. Clic en el enlace Playlists (Listas de reproducción). 5. Clic en el botón Create Playlist (Crear lista de reproducción). En este caso vamos a

crear una lista de vídeos sobre el pintor Picasso. 6. En la página Create/Edit Playlist (Crear/Editar lista de reproducción) introduce el

nombre de la lista (Playlist Name). Ejemplo: Picasso en Youtube.


466

7. Rellena el cuadro de texto Description (Descripción) y los Tags (Etiquetas). Marca la opción Public (Público) o Private (Privado) para indicar la privacidad de la lista de reproducción. Se recomienda utilizar la opción por defecto: Public.

8. Clic en el botón Save PlayListInfo (Guardar Información de la Lista de Reproducción). 9. A continuación utiliza el buscador de YouTube para buscar vídeos sobre Picasso.

Introduce el término “Picasso” y pulsa en el botón Search (Buscar).

10. Haz clic sobre el título de uno de los vídeos para visualizarlo. 11. En la barra de opciones que aparece debajo del reproductor haz clic sobre el enlace

Save to Favorites (Guardar a Favoritos).

12. En la sección Add Video to a Playlist (Añadir Vídeo a una Lista de Reproducción) despliega el combo para elegir la lista Picasso en YouTube. Para terminar pulsa en el botón OK.

13. Repite los pasos 9-12 para añadir dos o tres vídeos más sobre Picasso. No es necesario utilizar de nuevo el buscador porque en la lista Related (Relacionados) se muestran algunos vídeos que están relacionados con el actual.


467

14. Clic en la entrada My Account (Mi Cuenta) y luego pulsa en PlayLists (Listas de reproducción).

15. En el cuadro de texto Embed haz clic para seleccionar su contenido y luego clic derecho y Copiar para copiar al portapapeles el código del reproductor de la lista creada: Picasso en Youtube.

16. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi lista de reproducción en Youtube” en formato Título 1.


derecho y elige Pegar. Observa que el código copiado desde YouTube se ha pegado aquí. Clic en el boton Insertar.

19. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre lista_youtube.html


Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

468

5.9 Vídeos


469

5.9 Vídeos 5.9.1 Vídeos subtitulados en OverStream Overstream (http://www.overstream.net) es un espacio donde puedes personalizar un vídeo en línea mediante la incorporación de comentarios y subtítulos. Esto es posible gracias al editor de Overstream que permite fácilmente crear y sincronizar tus subtítulos a cualquier vídeo en línea, guardarlos en el servidor de Overstream para compartirlos con los demás. Visita la web de Overstream y regístrate para disponer de un nombre de usuario y contraseña. Una vez que dispongas de ella introdúcelas para entrar en sesión.

1. A través del navegador web localiza previamente en Youtube el vídeo en línea que deseas subtitular. Una vez situado en él, selecciona la dirección en la barra del navegador, clic derecho y elige Copiar.

2. Regresa a OverStream. Pulsa en el enlace Create overstream (Crear subtítulos). 3. Se muestra el cuadro de diálogo Vídeo URL (dirección del vídeo). En la casilla Enter

Vídeo URL (Introduce URL del vídeo) haz clic derecho y selecciona Pegar para pegar la dirección copiada con anterioridad. Clic en el botón Ok.

4. Tras unos segundos de espera en el visor se cargará la película. Los pasos para crear los subtítulos serían (ver imagen):


470

1) Clic en el botón play de la consola de reproducción. Cuando estimes necesario añadir un comentario pulsa en el botón pause.

2) En la esquina inferior derecha pulsa en el botón add (añadir). 3) Introduce el subtítulo por teclado. Observa que en el listado se crea una entrada

con el texto y también se ofrece una vista previa en el visor de la película. Para eliminar un texto se selecciona previamente en el listado y se pulsa en el botón remove (eliminar). Es necesario tener en cuenta que el subtítulo se muestra por defecto durante 3 segundos. Este valor se puede modificar en Options (opciones). Si deseas ampliar la duración del subtítulo seleccionado utiliza los controles Start Time y End Time (Tiempo de inicio y de fin).

4) Para guardar el proyecto pulsa en el botón save (guardar). Se muestra el cuadro de diálogo Overstream Name Dialog (Save To Server) (Nombre de los subtítulos para guardar en el servidor). Introduce un nombre y pulsa en OK.

5. Tras guardar el proyecto se mostrará el mensaje Overstream “título” created in the database (Overstream “título” creado en la base de datos).

6. Pulsa sobre la pestaña Overstream Properties (Propiedades del Overstream). En esta página conviene configurar los siguientes parámetros: Access Level (Nivel de acceso) como Public, Subtitle Language (Idioma de Subtítulos) como Spanish, Tags (Etiquetas) separados por comas, Ratings (Votaciones) y Comment (Comentarios) activarlos o desactivarlos.


471

7. Para guardar los cambios introducidos en los parámetros de configuración pulsa en el botón Save Overstream Properties (Guardar propiedades del OverStream)

8. Clic en el enlace My Overstream. Observa que aparece la entrada correspondiente a los subtítulos recién creados. Para actualizar su contenido pulsa en el enlace Edit. Para ver el resultado final pulsa en el enlace Play.

9. Debajo del reproductor se muestra un cuadro de texto con el código Embed.

10. Clic derecho y selecciona Copiar para copiar este código HTML al portapapeles. 11. Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML. 12. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar. 13. Clic en el botón Insertar. 14. Selecciona Archivo > Guardar introduce el título de la página y luego la carpeta

destino (por ejemplo miweb) y el nombre del archivo. 15. Desde el navegador web abre la página HTML creada para ver cómo se integra el

reproductor en ella.


472

5.9.2 Edición de vídeos con JumpCut JumpCut (http://www.jumpcut.com) es un servicio web 2.0 que permite subir fotos y vídeos para montar un clip de película que luego se puede compartir con otros usuarios. Visita la web de JumpCut y regístrate para disponer de un nombre de usuario y contraseña. Una vez que dispongas de ella introdúcelas para entrar en sesión. Si dispones de una cuenta Yahoo es más que suficiente para acceder a este espacio.

1. Descarga y descomprime el contenido del archivo jumpcut.zip. Como resultado obtendrás una carpeta jumpcut en cuyo interior dispones de varios fotografías de paisajes.

2. Accede a la web de JumpCut y autentifícate como usuario. 3. Clic en el enlace Upload (Subir) que se muestra en el menú horizontal superior. Es

posible subir fotos, audios y vídeos pero en este caso vamos a subir sólo fotos.

4. Clic de nuevo en el botón gigante Upload. Se mostrará un cuadro de diálogo para seleccionar los archivos que se cargarán. En la casilla Buscar en: despliega el combo para seleccionar la carpeta jumpcut. Haz clic sobre la primera imagen y luego pulsa la tecla <Mayus> y sin soltar haz clic sobre la última imagen. De esta forma se seleccionan todas las imágenes. Para terminar pulsa en el botón Abrir.

5. Durante el proceso de subida se ofrece la posibilidad de decidir el tipo de visibilidad (public) y los tags. A continuación haz clic en el enlace Done (Hecho).

6. Una vez concluido el proceso de subida se ofrece la posibilidad de elegir un estilo de transición entre fotos (Pick a Style).


473

7. Si deseas publicar la película directamente sin más arreglos haz clic en el enlace Publish My Movie (Publicar Mi Película). En el panel Publish define el título (Title) de la película (por ejemplo: Paisajes de Asturias), las etiquetas o Tags (ejemplo: asturias, paisajes, etc) y la visibilidad (Visibility), en este caso Public (Pública). Para terminar haz clic en el botón Publish.

8. Se mostrará el visor del vídeo de Jumpcut donde puedes ver el aspecto final del vídeo. Si deseas editarlo con mayor detalle pulsa en el botón Edit situado en la esquina inferior derecha del visor.

9. Desde la página de edición que proporciona JumpCut es posible definir una transición distinta para cada imagen, subir y añadir un audio, poner títulos, definir efectos, etc. Si lo deseas puedes probar las distintas opciones. Para terminar Save (Guardar) que aparece en la esquina inferior derecha de la página de edición.


474

10. Regresa al modo de reproducción del videoclip creado. Debajo del reproductor haz clic en el enlace Post. Clic derecho sobre el cuadro de texto Player y selecciona la opción Copiar.

11. Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML. 12. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar. 13. Clic en el botón Insertar. 14. Selecciona Archivo > Guardar introduce el título de la página y luego la carpeta

destino (por ejemplo miweb) y el nombre del archivo. 15. Desde el navegador web abre la página HTML creada para ver cómo se integra el

reproductor en ella.

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

475

5.10 JotForm: formularios en línea


476

5.10 JotForm: formularios en línea

JotForm (http://jotform.com) es un sitio que permite crear formularios web susceptibles de integrar en una página HTML. El diseño del formulario se realiza con facilidad mediante arrastrar y soltar sus distintos elementos sobre la página: cuadros de texto, imágenes, etiquetas, combos, botones, etc. Cada uno de estos elementos admite configuración de sus propiedades para personalizar el resultado. El envío de los datos introducidos por el usuario se puede recibir en una cuenta de correo electrónico o bien acceder a informes estadísticos en varios formatos. En esta práctica vamos a crear un formulario que luego integraremos en una página web para recoger los datos de reserva de un aula de informática en nuestro centro. Las peticiones serán recibidas en nuestro email. Para crear y utilizar tus propios formularios en JotForm es necesario registrarse previamente. Para ello visita su página, haz clic en Sign up y completa el formulario de registro. 5.10.1 Crear un formulario en JotForm

1. Abre el navegador web y visita la página de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login.

3. En la barra de botones superior haz clic en el botón My forms (Mis formularios).

4. Se muestra la ventana de edición del formulario. Clic en el botón New (nuevo).

5. En el cuadro de diálogo Form Wizard (Asistente de Formulario) selecciona un modelo, por ejemplo, BLANK-Blank Form (en blanco) y pulsa en el botón inferior Next >> (Siguiente).


477

6. A continuación elige un estilo. Para ello despliega el combo Theme y selecciona un tema para tu formulario. Por ejemplo: Baby Blue. Para terminar pulsa en el botón Finish

7. Ahora vamos a añadirle los elementos del formulario. En la siguiente tabla se recogen

los ítems que contendrá:

Etiqueta Tipo Características Logo del centro Imagen URL absoluta Profesor/a Textbox Requerido, Size=40, Max=100 Email Textbox Requerido, Validación=email, Size=40, Max=100 Asignatura DropDown Requerido, Matemáticas | Lengua Castellana |

Idioma | … Aula solicitada DropDown Requerido, Aula 1 | Aula 2 | Aula 3 | Aula 4 … Grupo DropDown Requerido, 1E1 | 1E2 | 1E3 | 2E1 … Fecha DateTimePicker Requerido, Formato: ddmmyyyy (22012007) Hora DropDown Requerido, 09:00-10:00, 10:00-11:00, … Sistema operativo

RadioButton Windows XP, Windows Vista, Ubuntu Linux, Mac

Periféricos CheckBox Impresora | Portátil | Cañón | Pizarra interactiva Observaciones TextArea Column Width=40, Rows=10 Enviar Button Submit Por defecto


478

8. Desde el cuadro de herramientas ToolBox arrastra el elemento TextBox para soltarlo dentro del formulario por encima del botón Submit (Enviar) y por debajo del texto “Drag and drop …” (Arrastra y suelta …)

9. Clic sobre este elemento para seleccionarlo. En el cuadro Properties (Propiedades) define sus parámetros:

• Label (Etiqueta): Profesor/a • Required (Requerido): yes • Size (Tamaño): 40 • Max Size (Máximo tamaño): 100 • Validation (Validación): no

10. Para eliminar el texto Drag and drop questions … haz clic sobre él para seleccionarlo y a continuación pulsa en el icono “X” en rojo que aparece a la derecha de su caja.

11. Repite los pasos anteriores para situar el resto de elementos del formulario: • Email. Es un textbox (cuadro de texto) para recoger el email del solicitante.

• Label= Email. • Required=yes. • Size=40. • Max Size=100. • Validation= Email.

• Asignatura. Es un dropdown (cuadro desplegable) donde el usuario debe elegir la asignatura para la que se realiza la petición. • Label= Asignatura • Required=yes • Options = Matemáticas | Lengua Castellana | Idioma | Ciencias | Plástica |

Música … Cada una en línea aparte. • Aula solicitada. En este dropdown (cuadro desplegable) el usuario elige el Aula

de informática a utilizar. • Label= Aula solicitada • Required=yes • Options = Aula 1 | Aula 2 | Aula 3 …

• Grupo. Es un dropdown (cuadro desplegable) que recoge el grupo de alumnos con que se ocupará el espacio solicitado.


479

• Fecha. Este elemento de tipo DateTimePicker permite al usuario seleccionar el día en un calendario del mes. • Label= Fecha • Required=yes • Format= ddmmyyyy

• Hora. En un dropdown (cuadro desplegable) se elige la hora de la sesión. • Label= Hora • Required=yes • Options= 08:00-09:00 | 09:00-10:00 | …

• Sistema operativo. Se trata de un RadioButton (Botón de radio) que ofrece la posibilidad de elegir una sola opción entre varias para indicar el sistema operativo que se utilizará en ese espacio. • Label= Sistema operativo • Required=no • Options= Windows XP | Windows Vista | Ubuntu Linux | Mac

• Periféricos. En este CheckBox (Casilla de verificación) el usuario podrá marcar una o varias opciones (incluso todas) para indicar el equipamiento adicional que necesitará en ese espacio. • Label= Periféricos • Options= Impresora | Portátil | Cañón proyector | Pizarra interactiva

• Observaciones. Mediante este TextArea (área de texto) se recoge información no contemplada en los elementos anteriores. • Label= Observaciones • Required=no • Column Width= 40 (Anchura del cuadro de texto). • Rows=10 (Filas del cuadro de texto).

• Enviar. Es el botón de envío. • Submit Text = Enviar.

12. Para insertar una imagen con el logo en la cabecera, abre la barra de herramientas Power Tools (Herramientas avanzadas) y arrastra el elemento Image (Imagen) para situarlo en el encabezado.


480

13. Selecciona el elemento imagen que has situado en En el apartado Properties (Propiedades) de esa imagen introduce la URL de la imagen en la casilla Source-URL. En las casillas Width (Anchura) y Height (Altura) escribe las dimensiones de la misma.

14. Para definir las propiedades generales del formulario haz clic en el botón Properties situado en la barra de herramientas superior.

15. En el panel Properties define estos valores: • Title (Título). Ejemplo: Reserva del Aula de Informática. • Send Post Data (Enviar mensaje con datos): yes • Send e-mail (Enviar mensaje): yes. Para desactivar el envío de datos a la

cuenta elige no. • Email. Es la cuenta donde se recibirán los formularios. • Form status (Status del formulario): Enabled. Para desactivar este formulario

puedes seleccionar Disabled. 16. Para comprobar su funcionamiento clic en el botón Preview (Vista previa). Puedes

rellenar el formulario y enviarlo para luego comprobar la recepción de datos en la cuenta de correo indicada.

5.10.2 Integración HTML de un formulario JotForm

1. Navega al sitio web de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login. 3. Clic en el botón my forms

4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula Informática y a continuación pulsa en el botón Source (Código).


481

5. En la Option 1: Embed Form into Your Site (Opción 1: Embeber Formulario en tu sitio web) haz clic en el botón Copy para copiar al portapapeles el código que se muestra: <iframe src= … > </iframe>

6. Abre Kompozer y sobre un documento web nuevo escribe el texto “Reserva del Aula de Informatica” en formato Titulo 1.


derecho y elige Pegar. Observa que el código copiado desde Jotform se ha pegado aquí. Clic en el boton Insertar.

9. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre reserva.html


5.10.3 Consulta/publicación de resultados JotForm permite la publicación web de los resultados estadísticos de los datos recogidos desde el formulario.

1. Navega al sitio web de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login. 3. Clic en el botón my forms

4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula Informática para seleccionarlo y a continuación pulsa en el botón Share (Compartir).

5. En la sección Share Results by Listings (Compartir resultados mediante listados) haz clic en un tipo de listado. Los tipos de listado que se ofrecen son:


482

• Grid (Cuadrícula). Proporciona código para insertar en una página web los

resultados en formato cuadrícula. • Calendar (Calendario). Ofrece código para insertar en la web los resultados

organizados en un calendario. • RSS. Se dispone de un enlace para la suscripción a canales RSS con los resultados. • Excel. Permite obtener un archivo XLS que se puede subir y enlazar en nuestra

página web.

6. Elige la opción Grid (Cuadrícula). Introduce el título del formulario en la casilla Title y pulsa en el botón Check All para seleccionar todos los datos del formulario.

7. Clic en el botón Preview (Vista previa) para visualizar el informe de tipo Grid. Para terminar pulsa en el botón Publish (Publicar).

8. En el segundo cuadro de código que se muestra You can get the iframe code and embed to your site (Puedes conseguir el código iframe e integrarlo en tu sitio web), haz clic en el botón Copy.


483

9. Abre Kompozer y sobre un documento web nuevo escribe el texto “Reservas

realizadas del Aula de Informatica” en formato Titulo 1. 10. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 11. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic

derecho y elige Pegar. Observa que el código copiado desde Jotform se ha pegado aquí. Clic en el boton Insertar.

12. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre listado.html


Servicios Web 2.0 – Polldaddy, encuestas en línea Diseño de materiales multimedia. Web 2.0

484

5.11 Polldaddy, encuestas en línea


485

5.11 Polldaddy: encuestas en línea PollDaddy (http://www.polldaddy.com) es una herramienta en línea que permite crear de forma libre y gratuita encuestas y situarlas en tu página web. Para crear tus encuestas es necesario registrarse previamente. Para ello pulsa en el botón Sign up y completa el formulario de inscripción.

1. Abre el navegador web y visita la página de PollDaddy: http://www.polldaddy.com 2. Clic en el botón log in, introduce tus credenciales de identificación y pulsa en el

botón Login. 3. Desde la página My polls (Mis encuestas) pulsa en el botón Create a Poll (crear una

encuesta) para crear una encuesta. 4. Please enter your poll question here. En este cuadro de texto introduce la pregunta

de la encuesta. Ejemplo: ¿Qué sueles comer durante el recreo?

5. Enter your answers here. Introduce tus respuesta aquí. Teclea en cada línea una posible respuesta: Una bolsa de chips | Fruta | Bocadillo | Galletas o bollos | Nada. En el apartado de Opciones puedes configurar algunas de estas opciones:

• Multiple Choice (Multiselección). Si activas esta opción el usuario podrá elegir más de una respuesta.

• Allow ‘Other’ Answer. Permitir la respuesta ‘Otros’. • Allow your voters to enter an answer of their own. Permitir que el usuario

introduzca su propia respuesta. • Randomize Answers (Respuestas aleatorias). Las respuestas de la encuesta

aparecerán en un lugar diferente para cada usuario.

6. En la sección Poll Language (Idioma de la encuesta) selecciona como idioma Spanish. 7. Select a style for your poll. Marca la opción PollDaddy Style y luego selecciona una

máscara para la encuesta. Por ejemplo: White Plastic Standard. 8. Para terminar pulsa en el botón Save and Continue (Guardar y continuar). 9. En la página Poll HTML Code (Código HTML de la encuesta), pulsa sobre la pestaña

lateral derecha Flash Poll Method (Método Flash), haz clic derecho y elige Seleccionar todo sobre el cuadro de texto que muestra el código <embed …> </embed>. A continuación repite ese clic derecho para elegir la opción Copiar.

10. Abre Kompozer y sobre un documento web nuevo escribe el texto “La encuesta de la semana” en formato Titulo 1.


derecho y elige Pegar. Observa que el código copiado desde PollDaddy se ha pegado aquí. Clic en el boton Insertar.

13. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre encuesta.html



486