Manual Materiales Multimedia

ndice Temtico
Diseo de materiales multimedia. Web 2.0

Presentacin .......................................................................... 6
1. Pginas web ....................................................................... 8
1.1 Introduccin ..........................................................................................9
1.1.1 Conceptos bsicos........................................................................ 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: instalacin y uso ..................................................................... 17
1.2.1 Qu es Kompozer?....................................................................... 18
1.2.2 Instalacin de Kompozer en Windows ................................................ 18
1.2.3 Instalacin de Kompozer en Ubuntu ................................................. 19
1.2.4 El entorno de Kompozer ................................................................ 22
1.3 Mi primera pgina.................................................................................. 23
1.3.1 Organizacin 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 hipervnculo................................................................. 29
1.3.5 Guardar un documento web............................................................ 30
1.4 Vietas y marcadores ............................................................................. 31
1.4.1 Introduccin .............................................................................. 32
1.4.2 Ejemplo: el glosario ..................................................................... 32
1.5 Listas numeradas................................................................................... 37
1.5.1 Introduccin .............................................................................. 38
1.5.2 Ejemplo: lista de tareas ................................................................ 38
1.6 Tablas................................................................................................ 42
1.6.1 Introduccin .............................................................................. 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 pgina 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 pgina HTML a partir de una plantilla ................................... 62
1.9 Formularios ......................................................................................... 66
1.9.1 Qu es un formulario? .................................................................. 67
1.9.2 Formulario de bsqueda de Google ................................................... 67
1.9.3 Formulario de traduccin de Babylon................................................. 72
1.10 Manejo y publicacin de archivos ZIP ......................................................... 78
1.10.1 Introduccin ............................................................................. 79
1.10.2 Cmo comprimir un archivo o carpeta? ............................................ 79
1.10.3 Cmo descomprimir un archivo ZIP? ................................................ 79
1.10.4 Enlace a un ZIP desde una pgina HTML ............................................ 80
ndice Temtico
1.11 Documentos PDF en la web ..................................................................... 84

1.11.1 Introduccin ............................................................................. 85
1.11.2 Lectura de archivos PDF en Windows................................................ 85
1.11.3 Instalacin 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 pgina 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 Cmo leer un canal de noticias RSS? ............................................... 99
1.12.3 RSS y marcadores dinmicos en Firefox............................................100
1.12.4 Crear un servicio RSS en un sitio web .............................................101
1.13 El sitio web: estructura y navegacin ........................................................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 navegacin.........................................................106
1.13.5 Cmo crear un sitio web con Kompozer? .........................................108
1.14 El sitio web: Cmo disear un men de navegacin? .....................................111
1.14.1 Instalacin y ejecucin de DHTML Menu ...........................................112
1.14.2 Crear el men de navegacin........................................................112
1.14.3 Exportar el cdigo javascript del men ............................................116
1.14.4 Integrar el men en las pginas HTML .............................................117
1.15 Publicacin web por FTP .......................................................................119
1.15.1 Qu es publicar un sitio web?.......................................................120
1.15.2 Instalacin de Filezilla en Windows ................................................120
1.15.3 Instalacin de Filezilla en Ubuntu ..................................................121
1.15.4 Configurar el interfaz al idioma castellano .......................................121
1.15.5 Configurar conexin FTP .............................................................122
1.15.6 Conectar con el sitio remoto ........................................................124
1.15.7 Gestin FTP de archivos ..............................................................126
1.15.8 Descargas annimas por FTP.........................................................128
1.16 Edicin web en lnea con Kompozer .........................................................129
1.16.1 Configuracin del sitio para edicin en lnea .....................................130
1.16.2 Modificar el contenido de una pgina publicada .................................131
1.16.3 Operaciones bsicas con archivos en servidor remoto...........................132
1.16.4 Nueva pgina en servidor remoto ...................................................132
1.16.5 Insertar una imagen del servidor en una pgina..................................134
1.16.6 Insertar una imagen del equipo en una pgina remota..........................135
1.17 Usabilidad de pginas web .....................................................................136
1.17.1 Aclaracin terminolgica .............................................................137
1.17.2 Navegabilidad ..........................................................................137
1.17.3 Diseo de pginas......................................................................137
1.17.4 Tipografa ...............................................................................138
1.17.5 Grficos .................................................................................138
1.17.6 Accesibilidad ...........................................................................139
1.17.7 Para saber ms.........................................................................139
ndice Temtico
1.18 Derechos de autor ...............................................................................140

1.18.1 Introduccin ............................................................................141
1.18.2 Los derechos de autor ................................................................141
1.18.3 Licencias Creative Commons ........................................................141
1.18.4 Aadir una licencia CC a una pgina HTML ........................................142
2. La imagen........................................................................ 145
2.1 Conceptos bsicos de imagen digital ..........................................................146
2.1.1 El pxel....................................................................................147
2.1.2 Resolucin 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 optimizacin de imgenes ........................................151
2.2 Empezar con GIMP ...............................................................................153
2.2.1 Qu es GIMP?............................................................................154
2.2.2 Instalacin de GIMP .....................................................................154
2.2.3 Inicio de GIMP ...........................................................................154
2.2.4 Entorno de edicin...................................................................... 155
2.2.5 Crear una nueva imagen ...............................................................157
2.2.6 Guardar una imagen ....................................................................158
2.3 Optimizacin de imgenes ......................................................................161
2.3.1 Conversin 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 tamao de una imagen....................................................172
2.4.2 Modificar el tamao del lienzo........................................................176
2.5 Aadir textos y lneas a una imagen ...........................................................181
2.6 Copiar y pegar con GIMP ........................................................................186
2.6.1 Composicin de imgenes .............................................................187
2.6.2 Recortado de imgenes ................................................................190
2.7 Aadir 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 imgenes por lotes con GIMP................................................203
2.9.1 Introduccin .............................................................................204
2.9.2 Instalacin del plugin DBP de GIMP en Windows ...................................204
2.9.3 Instalacin del plugin DBP de GIMP en Ubuntu .....................................205
2.9.4 Conversin por lotes con GIMP........................................................206
2.10 Galera de fotografas ..........................................................................211
2.10.1 Porta Album Creator ..................................................................212
2.10.2 Autoviewer .............................................................................217
2.10.3 Postcard Viewer .......................................................................218
2.11 Capturas de pantalla con GIMP ...............................................................220
ndice Temtico
2.12 Mapas de imgenes..............................................................................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 Integracin HTML de un mapa de imagen .........................................227
2.13 Integracin HTML de presentaciones .........................................................230
2.13.1 Exportar a Flash desde Openoffice Impress .......................................231
2.13.2 Integracin HTML de la presentacin Flash .......................................232
2.14 Diseo de mapas conceptuales para la web con FreeMind ...............................234
2.14.1 Instalacin de FreeMind en Windows ...............................................235
2.14.2 Instalacin de Freemind en Ubuntu ................................................235
2.14.3 Crear un mapa conceptual ...........................................................235
2.14.4 Integracin HTML de un mapa conceptual.........................................236
3. El audio .......................................................................... 237

3.1 Introduccin .......................................................................................238
3.1.1 Conceptos bsicos de sonido digital .................................................239
3.1.2 Formatos de archivo de audio ........................................................240
3.1.3 Optimizacin de archivos de audio...................................................241
3.2 Primeros pasos con Audacity....................................................................242
3.2.1 Qu es Audacity? .......................................................................243
3.2.2 Instalacin del programa en Windows ...............................................243
3.2.3 Instalacin del programa en Ubuntu .................................................243
3.2.4 El entorno del programa ...............................................................243
3.3 Reproduccin de audio con Audacity ..........................................................248
3.3.1 Abrir un archivo de audio .............................................................249
3.3.2 Reproduccin del audio ................................................................249
3.3.3 Propiedades de un archivo de audio .................................................250
3.3.4 Guardar un proyecto de Audacity ....................................................252
3.4 Optimizacin de audios ..........................................................................253
3.4.1 Conversin de formato .wav a .mp3 .................................................254
3.4.2 Configurar la calidad de exportacin a MP3 ........................................257
3.4.3 Convertir un audio de estreo a mono ..............................................258
3.4.4 Formatos de compresin WAV ........................................................262
3.5 La grabacin de audio............................................................................264
3.5.1 Crear una grabacin 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 seleccin .................................................................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 Extraccin de audio de un CD...................................................................287
3.8.1 Extraccin de audio de un CD con CDex (Windows) ...............................288
3.8.2 Extraccin de audio de un CD con Sound Juicer (Ubuntu)........................290
ndice Temtico
3.9 Integracin HTML bsica de audio .............................................................293

3.10 Integracin 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. Vdeo y animaciones .......................................................... 313

4.1 Introduccin .......................................................................................314
4.1.1 Conceptos bsicos de video digital...................................................315
4.1.2 Formatos de archivos de video .......................................................316
4.1.3 Qu es el streaming? ..................................................................317
4.1.4 Optimizacin de archivos de video...................................................318
4.1.5 Dispositivos de captura de video .....................................................319
4.2 Reproduccin de vdeos con VLC Media Player...............................................320
4.2.1 Qu es VLC Media Placer?.............................................................321
4.2.2 Instalacin de VLC Media Player en Windows ......................................321
4.2.3 Instalacin de VLC Media Player en Ubuntu .......................................321
4.2.4 Reproduccin de un archivo de vdeo FLV con VLC Media Player ...............321
4.3 Descarga de archivos de vdeo..................................................................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 vdeos ..................................................332
4.4 Captura de vdeo desde la cmara 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 vdeo ...................................................................350
4.5.1 Extraccin de vdeo de un DVD con AutoGordian ..................................351
4.5.2 Extraccin de fragmentos de vdeo de un DVD con ChopperXP y Super .....360
4.5.3 Extraccin de vdeo con dvd::rip en Ubuntu .......................................365
4.6 Conversin de formatos de vdeo ..............................................................370
4.6.1 Propiedades de un vdeo con MediaInfo .............................................371
4.6.2 Conversin de formatos de vdeo en Windows: Super ..........................373
4.6.3 Conversin de formatos de vdeo en Ubuntu: WinFF ..............................378
4.7 Integracin HTML bsica de vdeo flash (FLV)................................................381
4.7.1 Introduccin .............................................................................382
4.7.2 Reproductor de un vdeo FLV .........................................................382
4.8 Integracin HTML de una lista de archivos flash (FLV)......................................384
4.8.1 Introduccin .............................................................................385
4.8.2 Reproductor de una lista de archivos FLV...........................................385
4.9 Integracin 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 Integracin HTML bsica de objetos Flash ..........................................397
4.9.4 Integracin HTML avanzada de objetos Flash ......................................399
4.9.5 Asistente de integracin HTML de objetos Flash...................................402
4.9.6 Integracin HTML de un mapa Google ...............................................405
ndice Temtico
4.10 Integracin HTML de applets de java ........................................................407

4.10.1 Applets: qu son y dnde conseguirlos.............................................408
4.10.2 Instalacin de Java Runtime Environment (JRE) .................................408
4.10.3 Integracin HTML del applet Sopa de letras....................................408
4.10.4 Integracin HTML del applet Puzzle .............................................410
4.10.5 Integracin HTML de un objeto JClic ...............................................412
5. Servicios Web 2.0 ............................................................. 414

5.1 Introduccin ......................................................................................415
5.2 Flickr: galera de fotografas....................................................................417
5.2.1 Introduccin .............................................................................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 (geolocalizacin) ......................................420
5.2.5 Integracin HTML de una imagen Flickr .............................................421
5.2.6 Integracn HTML de una presentacin de fotografas Flickr ....................423
5.2.7 Integracin HTML de un mapa de Flickr .............................................425
5.3 Slice.com: presentacin de imgenes .........................................................427
5.4 SlideShare: presentaciones en lnea ...........................................................431
5.5 BooMP3: audio en lnea ..........................................................................435
5.5.1 Qu es BooMP3? ........................................................................436
5.5.2 Subir un archivo local ..................................................................436
5.5.3 Integracin 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 vdeo al repositorio Multiply...................................449
5.7 Scribd: documentos en lnea ....................................................................453
5.8 YouTube: vdeo en streaming ...................................................................460
5.8.1 Qu es Youtube?........................................................................461
5.8.2 Publicar un vdeo en Youtube .........................................................461
5.8.3 Integracin HTML de un vdeo YouTube .............................................464
5.8.4 Crear una lista de reproduccin de vdeos en Youtube ...........................465
5.9 Vdeos ..............................................................................................468
5.9.1 Vdeos subtitulados en OverStream ..................................................469
5.9.2 Edicin de vdeos con JumpCut.......................................................472
5.10 JotForm: formularios en lnea.................................................................475
5.10.1 Crear un formulario en JotForm ....................................................476
5.10.2 Integracin HTML de un formulario Jotform ......................................480
5.10.3 Consulta y publicacin de resultados...............................................481
5.11 PollDaddy: encuestas en lnea.................................................................484
Presentacin
Presentacin
En los ltimos aos hemos asistido a un considerable auge de los espacios web educativos.
Estos abarcan no solo los sitios web de los centros de enseanza sino tambin pginas
personales de profesores, de alumnos, proyectos educativos, actividades de formacin,
grupos de trabajo, etc. Por otra parte la produccin de materiales educativos se ha ido
orientando hacia la web en detrimento del soporte cd-rom por razones obvias: coste,
inmediatez, facilidad de actualizacin, difusin, etc.
En la publicacin de contenidos educativos en Internet la opcin ms clsica es la edicin de
pginas web en el equipo local utilizando un editor visual HTML para luego publicarlas va FTP
en un servidor. Otra posibilidad, cada vez ms extendida, es la utilizacin de un sistema de
gestin de contenidos (CMS=Content Management System) que permiten la edicin en lnea.
Estas soluciones se imponen cada vez ms porque descentralizan la gestin y facilitan el
trabajo colaborativo. En el contexto educativo los CMS de uso ms 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 "Diseo de materiales multimedia. Web 2.0"
puede resultar interesante y til. Su propsito es la formacin del profesorado en los
procedimientos bsicos para la creacin de contenidos multimedia adaptados a la web. Se
trata de preparar y optimizar recursos de tipo texto, imagen, audio o vdeo con una adecuada
relacin peso/calidad, algo importante en Internet, y que pueden publicarse en una pgina
HTML, un gestor de contenidos CMS o bien servir de base para construir objetos o contenidos
ms complejos utilizando herramientas de edicin general (powerpoint, impress, flash, etc) o
herramientas de autor para recursos multimedia educativos (hot potatoes, jclic, squeak, lim,
etc).
Siguiendo un enfoque prctico del curso, en cada apartado, a partir de una necesidad
educativa definida, se proporcionarn 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 facilitara la reutilizacin de contenidos en otros cursos o secuencias
de formacin.
El curso se organiza en 5 mdulos:
Pginas web
Imagen
Audio
Video y Animaciones
Servicios Web 2.0
En el mdulo Pginas web se propone Kompozer como editor HTML para crear pginas web.
Se describen los procedimientos para incorporar los elementos ms habituales: texto,
imgenes, enlaces, vietas, marcadores, listas numeradas, tablas y formularios. Se introduce
el concepto de sitio web definiendo pautas sobre el diseo de su estructura y navegacin. Con
ello surge la necesidad de utilizar hojas de estilo CSS y plantillas HTML para asegurar cierta
unidad de estilo grfico. Filezilla es el programa cliente FTP que se sugiere para la
publicacin en un servidor remoto aunque tambin se indica cmo el propio Kompozer
proporciona procedimientos para la edicin de contenidos en el servidor web. La publicacin
de archivos ZIP y PDF as como de un canal RSS en un sitio web tambin permite poner a
disposicin informacin en mltiples e interesantes formatos.
Presentacin
Para la Imagen se utiliza el programa GIMP. Se plantean operaciones bsicas como convertir
formatos de archivos, reducir la paleta de colores, modificar las dimensiones de la imagen o
del lienzo, etc. Tambin se explican procedimientos habituales en el entorno educativo como
por ejemplo aadir textos y flechas a una imagen, componer imgenes, aplicar filtros y el
tratamiento de imgenes por lotes. La publicacin en la web de lbumes de fotografas es
tambin una prctica muy habitual en el mbito educativo. Tambin se recogen los
procedimientos para utilizar mapas de imgenes 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 edicin de audio permite copiar, pegar, mezclar, aplicar efectos, etc para
conseguir un audio ms elaborado. Una vez que se dispone de una pista de audio se sugiere
utilizar una solucin de consola de reproduccin en flash para integrar en una pgina html. De
esta forma el resultado es accesible desde cualquier navegador o sistema.
En el mdulo sobre Vdeo y Animaciones se plantean los principales conceptos relacionados
con el vdeo digital para luego proponer la visualizacin de vdeos con el reproductor
universal: VLC Media Player. Se proporciona informacin de cmo utilizar extensiones de
Mozilla Firefox (Unplug) para descargar en local archivos de vdeo desde Internet. Tambin el
procedimiento para conocer los detalles tcnicos de un archivo multimedia con Media Info y
convertir a otros formatos con Super o WinFF. Otra opcin es extraer el vdeo de un DVD
con soluciones como AutoGordian o bien dvd:::rip. Tambin se ejemplifica cmo mostrar
vdeos FLV integrando el visor JW FLV Player en Flash dentro de una pgina HTML. En la
parte de animaciones se proponen distintos procedimientos para integrar un objeto de Flash o
un applet de java dentro de una pgina HTML.
En relacin con la Web 2.0 se sugieren mltiples servicios en lnea que se pueden crear,
configurar e integrar en las pginas de un blog y tambin en una pgina HTML editada con
Kompozer. Se documenta el uso didctico de espacios como Flickr (galera de fotografas,
albumes y mapas), Slide.com (presentaciones de fotografas), SlideShare (presentaciones
Powerpoint o Impress en lnea), BooMP3 (reproduccin de audio MP3), Youtube (vdeos), etc.
El profesor/a con inters en el diseo de materiales digitales educativos puede encontrar en
este curso recetas tiles para resolver las necesidades ms bsicas relacionadas con la
elaboracin y adaptacin al medio web de recursos de texto, imagen, audio, vdeo y
animaciones.
Todas las aplicaciones de software que se proponen en este curso son de uso gratuito y de
libre distribucin. Se puede seguir el curso indistintamente desde un equipo Windows o desde
un equipo Linux. La mayora de las aplicaciones son multiplataforma y cuando esto no ha sido
posible se plantean alternativas y documentacin para ambos. Los sistemas operativos
recomendados son: Windows XP SP2 y Ubuntu Linux 7.10
1. Pginas web
Pginas web ::: Introduccin

1.1 Introduccin

10
1.1 Introduccin
1.1.1 Conceptos bsicos
A modo de introduccin y con el propsito de unificar terminologa a continuacin se describe
el significado de algunos trminos muy utilizados en el diseo web:
World Wide Web (WWW)
Es el sistema de presentacin de la informacin ms utilizado en Internet. Sus principales
caractersticas son:
Hipertexto: Es texto o imagen que se muestra en la pantalla vinculada a otras
pginas del mismo sitio o de sitios ajenos. Al situar el puntero del ratn sobre l, ste
toma el aspecto de una mano. Al hacer clic se mostrar la pgina vinculada al mismo.
Multimedia: En la pantalla aparece texto, imgenes, 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.
Pblica: Toda su informacin est distribuida en miles de ordenadores (servidores)
que ofrecen su espacio para almacenarla. Es informacin pblica y normalmente
accesible por cualquier usuario.
Dinmica: Mucha informacin, aunque est almacenada, puede ser actualizada por el
pblico que la consulta sin que el usuario necesite conocer detalles tcnicos de su
mantenimiento. Son las pginas 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 informacin de Web. Los navegadores ms 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 comunicacin utilizado para transmitir las peticiones y archivos a travs de
Internet entre el servidor y el navegador. El protocolo http:// se indica en el inicio de la
direccin. Si no se teclea este prefijo, el navegador lo aade de forma automtica.
URL (Universal Resource Locator)

Es la direccin donde se encuentra un recurso en Internet.
Ejemplo: http://www.google.es.
Si no se indica pgina html, el servidor enviar la pgina ndice (index) o bien por defecto
(default).
Durante la navegacin por Internet
1) El usuario, situado en el equipo cliente, teclea la URL en la casilla direccin del
navegador y pulsa la tecla <enter>.
2) La peticin se dirige a los servidores DNS que traducen esta URL a una direccin IP.
Por ejemplo: www.cnice.mec.es -> 195.53.123.85. Es posible situar en el navegador
esta direccin aunque resulte ms complicada e ininteligible.
3) La peticin llega al servidor que tiene esa IP.
4) El servidor devuelve la pgina 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 pgina y todos sus elementos.

12
HTML (HyperText Markup Language)

Es el lenguaje en el que se disean las pginas que se visualizan a travs del navegador. Este
lenguaje se basa en etiquetas (instrucciones que le dicen al navegador como deben
mostrarse) y atributos (parmetros que dan valor a la etiqueta). Una pgina HTML contiene
texto con un cierto formato y referencias a archivos externos que contienen imgenes,
sonidos, animaciones, etc.
Archivo HTML
El lenguaje HTML se utiliza para definir un documento que se visualizar a travs del
navegador. Este documento se guarda en un archivo con extensin .htm .html
Bsicamente los documentos escritos en HTML constan de texto y etiquetas. Las etiquetas
permiten definir el formato del texto, el ttulo que mostrar en la barra de ttulo del
navegador, los elementos multimedia que aparecern 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 ttulo de la pgina (<title>) que se muestra en la barra de ttulo
del navegador.
<body>: contiene la informacin 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 dilogo.

14
4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este
documento.
5. Introduce el nombre del archivo aadindole la extensin .htm Ejemplo: prueba.htm
6. Pulsa en el botn 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. Encontrars 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 pgina HTML.
10. Observa que en la barra de ttulo 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 Caractersticas de Firefox

Sus caractersticas ms destacadas son:
Multiplataforma
Existen versiones de Mozilla Firefox para Windows, Linux y Mac
Navegacin con pestaas
Se pueden abrir simultneamente varias pginas web de tal forma que cada una se visualiza
en una pestaa independiente. Cada pestaa dispone de su propio botn de cerrado. Si se
cierra accidentalmente una pestaa se puede recuperar en el men Historial.
Restauracin de sesin
Cuando Firefox se cierra o reinicia se ofrece la opcin de restaurar la sesin para evitar la
prdida de informacin en formularios, descargas, etc.
Corrector ortogrfico
Si se dispone del complemento Diccionario de Espaol/Espaa se puede activar el corrector
ortogrfico integrado que subrayar las palabras no tecleadas correctamente en cualquier
cuadro de texto de la pgina web. Mediante clic derecho sobre esa palabra se ofrecern
alternativas para sustituirla.
Sugerencias de bsqueda
Al comenzar a escribir en la barra de bsqueda de Google se mostrar una lista de
sugerencias.
Canales RSS
Permite leer directamente los titulares de noticias RSS sin necesidad de tener instalado
ningn otro programa.

15
Bsqueda integrada
Firefox proporciona una barra de bsqueda que integra los motores ms utilizados a nivel
mundial: Google, Yahoo!, eBay, Diccionario RAE, Wikipedia y Creative Commons. Para ello
basta con elegir el motor e introducir el trmino de bsqueda.
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 tamao de la fuente mediante <Ctrl>+Scroll del ratn,
compatibilidad con lectores de pantalla (p.e. Freedom Scientifics JAWS).
Proteccin antiphising
Cuando una pgina web sea sospechosa de fraude por robo de identidad digital frente a una
entidad bancaria (physing), Firefox advertir al usuario y ofrecer una pgina de bsqueda
para encontrar la pgina autntica que se est buscando.
Actualizaciones automticas
Firefox comprueba la versin del navegador y si existe una ms reciente avisa al usuario sobre
la posibilidad de instalarla. Esta actualizacin suele ser pequea resultando fcil y rpida de
descargar e instalar.
Proteccin contra programa espas
Firefox no permite que una pgina web descargue, instale o ejecute programas en el equipo
sin un consentimiento explcito del usuario.
Limpieza de informacin privada
Utilizando esta utilidad situada en el men Herramientas se garantiza que se limpian todos los
datos privados de la navegacin en un solo clic. Es especialmente til en un equipo
multiusuario donde se abre sesin siempre con el mismo usuario Windows.
Complementos
Firefox ofrece ms 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 bsqueda, marcadores,
diccionarios, multimedia, etc. El uso de un administrador de complementos facilita las
operaciones de instalacin, desinstalacin y desactivacin.
Temas
Se pueden instalar y configurar distintos temas que permiten cambiar los colores, fuentes,
iconos, grficos, etc del interfaz de Mozilla Firefox.
Plugins
Firefox dispone de la mayora 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 Instalacin 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 mayora 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 podrs encontrar la versin ms reciente o
que se adapta a tu sistema: http://www.mozilla-europe.org/es/products/firefox/
Si deseas utilizar la versin 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 especficos. Los ms
utilizados permiten complejos diseos y evitan trabajar directamente con el cdigo 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 mostraran en el
navegador mantenindose oculto el cdigo HTML.
Existen multitud de editores web comerciales pero los ms populares en el entorno Windows
son:
Microsoft FrontPage. Es fcil de utilizar porque tiene un entorno muy similar a Word.
Su ltima versin recibe el nombre de Expresin Web Designer.
Adobe Dreamweaver. Pertenece a la suite de Adobe. Es un programa muy
recomendable por sus mltiples prestaciones.
En el entorno Linux los editores HTML ms utilizados son: BlueFish (Gnome) y Quanta+
(KDE).
En este curso se propone utilizar Kompozer (http://www.kompozer.net/)
interesantes caractersticas:
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.
por sus
Pginas web ::: Kompozer: instalacin y uso

17
1.2 Kompozer:
instalacin y uso

18
1.2 Kompozer: instalacin 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 pginas web. Resulta una herramienta de uso fcil, de libre distribucin 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 denominacin con mltiples correcciones y parches. La pgina de KompoZer es
http://www.kompozer.net/
1.2.2 Instalacin de Kompozer en Windows

1. Descarga el archivo KompozerPortable.exe a una carpeta de tu disco duro. Doble clic
para ejecutarlo. Otra opcin es visitar la pgina oficial de Kompozer para descargar e
instalar la versin ms reciente: http://www.kompozer.net/
2. La instalacin de Kompozer es totalmente limpia, es decir, se descomprime en una

carpeta de tu disco duro y dentro de esa carpeta estarn 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. Despus 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 vaco y elige Pegar. De esta forma hemos situado
un icono de acceso directo al programa Kompozer en el escritorio.
1.2.3 Instalacin de Kompozer en Ubuntu

1. Desde el escritorio elige Aplicaciones > Aadir o quitar
2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles.
3. Introduce el trmino Kompozer en el cuadro de texto Buscar: y a continuacin pulsa

la tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de
verificacin que acompaa a la entrada de Kompozer. Pulsa en el botn Aplicar
cambios para iniciar la instalacin. Confirma la instalacin pulsando de nuevo en el
botn Aplicar.

20
4. Si ests conectado a Internet se descargarn los archivos necesarios para su

instalacin. Una vez concluda se mostrar el mensaje de xito. Clic en el botn
Cerrar.
5. Kompozer se suele instalar por defecto en ingls. Es necesario descargar e instalar el

pack del idioma castellano. Para ello navega hasta la pgina language packs del sitio
de Kompozer (http://www.kompozer.net/). Pulsa sobre el enlace al paquete XPI
correspondiente al idioma Espaol (es-ES), selecciona Save to Disk (Guardar en
disco) y pulsa en el botn OK.
6. El archivo se guardar por defecto en /home/<usuario>/. A continuacin 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 botn Open.

21
8. Clic en el botn Install Now (Instalar ahora). Trancurridos unos segundos se mostrar
un cuadro de dilogo con informacin de que la instalacin 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 Mens. Ofrece acceso a todas las opciones del programa organizadas como
en otras aplicaciones de Windows en Archivo, Editar, Ver, Insertar,
2. Barra de Redaccin. Consta de los botones de acceso a las operaciones ms
frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.
3. Barra de Formato. Contiene las herramientas ms tiles para aplicar formato al
texto: tipo de fuente, tamao, color, efecto, justificacin, etc. Si se sita el ratn
sobre cada botn se muestra un mensaje indicando su funcin.
4. Barra de pestaas. Kompozer permite editar varias pginas usando un sistema de
pestaas donde cada documento abierto es accesible al pulsar sobre la pestaa
correspondiente. El nombre del archivo aparece acompaado por el icono de un
diskete rojo cuando esa pgina ha sido modificada pero no guardada.
5. Documento. Muestra el contenido del documento HTML actual.

6. Barra de modo de edicin. Indica el modo de vista que est activo en el documento
actual. Se puede cambiar el modo de visualizacin pulsando en una de estas pestaas:
Normal, Etiquetas HTML, Cdigo fuente y Vista preliminar. Mientras no se indique lo
contrario se utilizar el modo de visualizacin Normal.
7. Barra de estado. Muestra la posicin del cursor con respecto a la jerarqua 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 opcin
deseada.
8. Administrador de sitios. Permite crear y mantener un sitio web.
Pginas web ::: Mi primera pgina

23
1.3 Mi primera pgina
24

1.3 Mi primera pgina

El propsito de este actividad es disear tu primera pgina con Kompozer. El tema elegido es
una breve pincelada del poeta Federico Garca Lorca. En este documento se utilizarn:
encabezado, texto, imagen y un enlace a una pgina externa.
1.3.1 Organizacin en carpetas

1. Vamos crear una carpeta de nombre miweb.
Si utilizas Windows se propone crear esta carpeta en el raz 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
Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta:

lorca.zip. Como resultado de la extraccin encontrars dos archivos: una imagen
(lorca.gif) y un archivo de texto (lorca.txt).
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 imgenes que se integren en las pginas 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.
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.
Selecciona Edicin > Seleccionar todo para seleccionar el texto completo que contiene
este archivo y a continuacin elige Edicin > Copiar para copiarlo al portapapeles de
Windows. Cierra la ventana del Bloc de Notas

7
8
9
26
En la barra de tareas de windows pulsa en el botn correspondiente de Kompozer para

maximizar la ventana de este programa.
Clic sobre el nuevo documento HTML que estamos editando y en la barra de mens
selecciona Editar > Pegar. De esta forma podrs disponer del texto de la pgina sin
necesidad de teclearlo.
Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado.
Para ello pulsa en el botn Guardar o bien elige Archivo > Guardar.
10 En el cuadro de dilogo Ttulo de la pgina introduce su ttulo y haz clic en el botn

Aceptar.
11 Se muestra el cuadro de dilogo Guardar pgina 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 botn Guardar

13 Ttulo. Pulsa y arrastra para seleccionar la primera lnea de texto: Federico Garca
Lorca. En la barra de Formato despliega el cuadro de estilos de prrafo y elige Ttulo 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 prrafos.
1.3.3 Insertar una imagen

14 Clic debajo del ttulo anterior y pulsa la tecla <enter> para definir el punto donde se
insertar la imagen. En la barra de Redaccin pulsa en el botn Imagen.
15 Se muestra el cuadro de dilogo Propiedades de imagen. Pulsa en el botn 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 botn Abrir.
17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto

alternativo. En este caso teclea Federico Garca Lorca. Se trata de un texto
descriptivo que contribuye a la accesibilidad de nuestra pgina y que se mostrar cuando
el usuario site el ratn sobre ella.

29
18 Observa que en la casilla Ubicacin de la imagen se indica la ruta relativa para localizar
la imagen desde la pgina actual: images/lorca.jpg. Para terminar clic en el botn
Aceptar.
1.3.4 Insertar un hipervnculo

19 Pincha y arrastra sobre el enlace que aparece en la ltima lnea del documento. A
continuacin elige Editar > Cortar. Esta URL se ha copiado al portapapeles de Windows y
se ha eliminado de la ubicacin actual. Como habrs podido comprobar es una enlace a
Google que ya incluye los trminos de bsqueda relativos al autor que nos ocupa:
http://www.google.es/search?q=Federico+Garca+Lorca
20 Pulsa y arrastra para seleccionar el texto Ms informacin situado al final del
documento. A continuacin en la barra de Redaccin pulsa en el botn Enlace.
21 En el cuadro de dilogo Propiedades del enlace sita el cursor en la casilla Ubicacin del
enlace y pulsa la combinacin de teclas <Ctrl>+<V> para pegar la URL copiada
anteriormente. Para terminar pulsa en el botn Aceptar.

30
1.3.5 Guardar un documento web

22 Clic en el botn 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 opcin es pulsar en el botn Navegar que se muestra en la barra de
Redaccin de Kompozer. No obstante esta opcin slo 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.
Pginas web ::: Vietas y marcadores

31
1.4 Vietas y
marcadores

32
1.4 Vietas y marcadores

1.4.1 Introduccin
En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma pgina. Antes
de crear el hipervnculo, es necesario situar esos puntos mediante marcadores de posicin.
Un marcador es un nombre que representa una posicin dentro de la pgina. Suele estar
formado por un fragmento de texto y es utilizado como destino de un hipervnculo.
En el ejemplo que nos ocupa se utilizan marcadores e hipervnculos para crear un glosario de
trminos. Asimismo se utilizan vietas para crear la lista de hipervnculos.
Una lista con vietas es una lista de elementos donde no importa el orden y todos se
muestran precedidos por un mismo smbolo que recibe el nombre de vieta.
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 continuacin: glosario.zip. Como resultado de esa extraccin encontrars
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 Edicin > Seleccionar todo para elegir el texto
completo que contiene este archivo. A continuacin Edicin > Copiar para copiar el
texto seleccionado al Portapapeles. Cierra la ventana del Bloc de Notas.
6. En la barra de tareas pulsa en el botn correspondiente de Kompozer para regresar a
este programa.
7. Una vez situado en Kompozer selecciona Editar > Pegar. De esta forma podrs
disponer del texto de la pgina sin necesidad de teclearlo.
8. Pulsa y arrastra sobre la primera lnea de texto para seleccionarla: Glosario
educativo A continuacin despliega el cuadro de formatos y elige Ttulo 1.

33
Vietas
9. Pulsa y arrastra para seleccionar la lista completa de trminos situada debajo del
ttulo. A continuacin pulsa en el botn vietas de la barra de Formato
Marcadores
10. La estructura que va a tener nuestro documento se recoge de forma grfica en la
siguiente figura:
11. Ahora vamos a definir los marcadores, es decir, los puntos en la pgina a dnde se
van a dirigir los hipervnculos que se crearn ms tarde. En primer lugar vamos a
definir un marcador inicial al comienzo de la pgina. Pulsa y arrastra para seleccionar
el texto del ttulo del documento: Glosario educativo y a continuacin pulsa en el
botn Enlace interno de la barra de herramientas de Redaccin.

34
12. En el cuadro de dilogo 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 botn Aceptar. Tras esta
operacin observars 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 Adaptacin curricular que encabeza su definicin (no en la lista de vietas).
Clic en el botn Negrita de la barra de Formato.
14. A continuacin pulsa en el botn Enlace interno.

35
15. En el cuadro de dilogo 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 botn Aceptar.
16. Repite los pasos 13, 14 y 15 para crear el resto de marcadores a lo largo del
documento: Criterio de evaluacin, Criterio de promocin, etc.
Enlaces internos
Una vez que hemos terminado la creacin de marcadores, vamos a disear los hipervnculos a
esos marcadores. Recuerda que los hipervnculos se encontrarn en la lista de vietas inicial y
en el texto [Arriba] que aparece al finalizar cada definicin.
17. Selecciona el texto "Adaptacin curricular" ahora en la lista de vietas inicial.
18. Clic en el botn Enlace que aparece en la barra de Redaccin.
19. En el cuadro de dilogo Propiedades del enlace despliega la lista Ubicacin del
enlace
para
seleccionar
el
enlace
interno
al
marcador
creado:
#Adaptacin_curricular . Clic en el botn Aceptar.

36
20. Repite los pasos 17, 18 y 19 para crear un hipervnculo en cada entrada de la lista de
vietas al marcador correspondiente.
21. Idem en la palabra [Arriba] situada al final de cada definicin 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 trminos. 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. Sita el cursor debajo de cada hipervnculo con el texto [Arriba] e inserta una lnea
horizontal separadora usando Insertar > Lnea Horizontal. Al finalizar el documento
puedes aadir 2 seguidas para indicar al usuario el fin del mismo.
23. Completada la pgina vamos a guardarla. Clic en el botn Guardar. Si es la primera
vez que se guarda solicitar el ttulo de la pgina.
24. Introduce como nombre del archivo glosario.html y gurdala en la carpeta miweb.
25. Si deseas cambiar el ttulo de la pgina debes seleccionar Formato > Ttulo y
propiedades de la pgina. No olvides guardar los cambios producidos.
26. Para visualizar el aspecto de la pgina pulsa en el botn Navegar (slo funciona si
tienes configurado en tu equipo Mozilla Firefox como navegador web por defecto).
Otra opcin es situarte en la carpeta miweb y hacer doble clic en el archivo
glosario.html para visualizarlo a travs del navegador web.
Pginas web ::: Listas numeradas

37
1.5 Listas numeradas

38
1.5 Listas numeradas

1.5.1 Introduccin
Una lista numerada es una lista de elementos ordenados. Tiene especial aplicacin en la
descripcin de los pasos de un procedimiento. Cada elemento viene precedido por un signo
numrico o letra del alfabeto que permite identificar su posicin 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
continuacin: escribe.zip. Como resultado de esa extraccin encontrars 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 sitate 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 Edicin > Seleccionar todo y luego Edicin > Copiar.
6. Sitate en el nuevo documento HTML que ests editando con Kompozer y a
continuacin elige Editar > Pegar
7. Pulsa y arrastra sobre la primera lnea de texto para seleccionarla: Escribe tu
cuento. A continuacin despliega el cuadro de estilos de prrafo y elige Ttulo 1.
8. Selecciona el texto Descripcin y pulsa en el botn Negrita de la barra de

Formato.
9. Antes de aadir imgenes conviene indicarle a Kompozer donde se guardar esta
pgina. Para ello clic en el botn Guardar, introduce como ttulo: Escribe tu
cuento y gurdala como escribe.html dentro de la carpeta miweb.
10. Sita el cursor entre la descripcin y el enlace. A continuacin pulsa en el botn
Imagen.
11. En el cuadro de dilogo Propiedades de la imagen haz clic en el botn 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

Ubicacin de la imagen se muestra la ruta relativa respecto a la pgina actual:
images/magiapalabras.gif . Esto es as porque est activada la casilla La URL es
relativa a la direccin de la pgina.
12. En Texto alternativo introduce La magia de las palabras.

13. Clic en la pestaa Enlace e introduce la URL: http://educalia.educared.net
14. Para terminar pulsa en el botn Aceptar.

15. Para conseguir que el enlace situado en la imagen muestre en una nueva ventana
asegrate de que la imagen est seleccionada y a continuacin 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 pestaa Atributos HTML
selecciona en la lista Atributo el elemento target (destino) y en la lista Valor elige
_blank (nueva ventana). Pulsa en el botn Aceptar.
18. Selecciona el bloque de texto http://educalia.educared.net que aparece en la pgina

y pulsa en el botn Enlace.
19. En el cuadro de dilogo Propiedades del enlace introduce el enlace anterior en la
casilla Ubicacin del enlace si no estuviera. En la seccin Destino activa la opcin El
enlace se abrir y selecciona en una nueva ventana. Para terminar pulsa en el
botn Aceptar

41
20. Selecciona la lnea de texto Actividad: y pulsa en el botn Negrita de la barra de

Formato.
21. Pulsa y arrastra para seleccionar todas las instrucciones que aparecen debajo de
Actividad.
22. Clic en el botn Lista de vietas
23. Para terminar pulsa en el botn Guardar. Para visualizar el aspecto final de la pgina
pulsa en el botn Navegar.
Pginas web ::: Tablas

42
1.6 Tablas

43
1.6 Tablas
1.6.1 Introduccin
Las tablas estn formadas por filas (horizontales) y columnas (verticales), y el espacio en que
intersectan se denominan celdas. Aunque es una prctica muy extendida, no se recomendable
utilizar tablas para maquetar texto e imagen en una pgina web. Si se utilizan tablas en lugar
de contenedores DIV para situar elementos en una pgina, 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
continuacin. Como resultado de esa extraccin encontrars 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 sitate 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 Edicin > Seleccionar todo y luego Edicin > Copiar.
6. Sitate en el nuevo documento HTML que ests editando con Kompozer y a
continuacin elige Editar > Pegar
7. Pulsa y arrastra sobre la primera lnea de texto para seleccionarla: Demografa
espaola. A continuacin despliega el cuadro de estilos de prrafo y elige Ttulo 1.
8. Antes de aadir imgenes conviene indicarle a Kompozer donde se guardar esta
pgina. Para ello clic en el botn Guardar, introduce como ttulo: Demografa de
Espaa y gurdala como poblacion.html dentro de la carpeta miweb.
Insertar imagen
9. Sita el cursor despus del texto y antes de los datos. A continuacin pulsa en el
botn Imagen.
10. En el cuadro de dilogo Propiedades de la imagen haz clic en el botn 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
Ubicacin de la imagen se muestra la ruta relativa respecto a la pgina actual:
images/poblacion.gif . Esto es as porque est activada la casilla La URL es relativa a
la direccin de la pgina.

44
11. En el cuadro de texto Texto Alternativo escribe: Demografa espaola.

12. Clic en la pestaa Apariencia y en el cuadro Borde slido introduce el valor 1 como
grosor en pxeles del borde que mostrar la imagen.
13. Pulsa en el botn 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 mtodo y luego el otro.

45
Mtodo 1. Insertar una tabla en blanco

14. Clic inmediatamente debajo de la imagen para situar el cursor en este espacio.
15. Pulsa en el botn Tabla disponible en la barra de herramientas Redaccin.
16. En el cuadro de dilogo Insertar tabla puedes arrastrar el puntero sobre la cuadrcula
para definir el nmero de filas y columnas que tendr la nueva tabla. Para terminar
haz clic en la ltima celda de la parrilla creada.
17. Esta opcin slo permite crear tablas de 6x6 celdas como mximo. Para un ajuste ms
fino, como es el caso que nos ocupa, pulsa en la pestaa Preciso. Introduce el
nmero de filas: 20 y el nmero de columnas: 3. En Anchura indica los pxeles
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 automticamente 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 botn 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 podra
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 algn parmetro de la tabla inicial haz clic derecho sobre ella,
elige Seleccionar Tabla > Tabla y luego pulsa en el botn Tabla de la barra de
Redaccin. Con esta rutina se muestra el cuadro de dilogo Propiedades de la tabla
donde es posible editar alguno de sus parmetros.
Mtodo 2. Crear tabla a partir de una seleccin

22. Pulsa y arrastra sobre el documento para seleccionar todas las lneas que contienen
los datos.
23. En la barra de mens de Kompozer debes seleccionar Tabla > Crear tabla a partir de
la seleccin o simplemente pulsa en el botn Tabla de la barra de Redaccin.
24. En el cuadro de dilogo Convertir en tabla marca la opcin Otro carcter e introduce
un asterisco *. Si te fijas el asterisco es el carcter que separa un dato de otro
dentro de la misma lnea. A continuacin activa la casilla Borrar carcter separador.

47
25. Pulsa en Aceptar y vers 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 opcin Color de fondo de la tabla o celda
27. En el cuadro de dilogo Color de la tabla o de la celda selecciona un color
predefinido y pulsa en el botn Aceptar. Observa que esto har que la fila de
encabezado de tabla se muestre con este color de fondo.

48
28. Mantn 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 accin se selecciona la tabla
completa.
30. A continuacin pulsa en el botn Tabla de la barra de herramientas.
31. En el cuadro de dilogo Propiedades de la Tabla se pueden configurar sus mltiples
parmetros. En este caso sita un 0 en el cuadro Borde para evitar que se visualice el
borde la tabla.
33. No olvides hacer clic en el botn Guardar para conservar el trabajo.
Pginas web ::: Hojas de estilo CSS

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 extensin *.CSS (CSS, Cascading Style Sheets = Hojas de
estilo) que contempla definiciones de formato (tipo de fuente, tamao, color de la fuente,
color de fondo, prrafos, etc) de las distintas etiquetas que forman una pgina *.HTML.
Su principal ventaja es definir un mismo aspecto para todas las pginas de un sitio web. Se
crea una hoja de estilo y se vinculan todas las pginas del sitio web a este archivo. Cualquier
cambio efectuado en la hoja de estilo afecta instantneamente al formato de todas las
pginas 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 pgina web y a continuacin
despliegas la lista de formatos para seleccionar Ttulo 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 Ttulo 2 se habra etiquetado
con <h2> </h2>, etc.
Algunas etiquetas HTML son:
<body> </body> . Contienen todos los caracteres que forman la pgina web.
<h1> </h1>, , <h6> </h6>. Permiten definir ttulos de distintos tamaos (hasta
6).
<p> </p>. Contienen el texto de un prrafo.
<a href=http://...>Texto del enlace</a>. Se utiliza para crear enlaces.
Existen muchas ms etiquetas pero en esta prctica slo vamos a modificar el formato (color,
tipo, tamao, efecto, etc) de los textos etiquetados con las que se citan.
En esta prctica vamos a crear una hoja de estilo y se vincular a una pgina.

51
1.7.2 Crear una hoja de estilo

1. Antes de comenzar la prctica en s, utiliza el explorador de archivos para crear una
subcarpeta de nombre css dentro de miweb.
2. A continuacin descarga el archivo agala.zip y sitalo dentro la carpeta miweb . Al
extraer su contenido encontrars el archivo agala.htm y las imgenes agala.jpg y
paper.gif guardadas dentro de la carpeta images.
3. Abre Kompozer y a continuacin selecciona Archivo > Abrir para localizar la carpeta
miweb y elegir el archivo agala.htm. Pulsa el botn Abrir.
4. En la pgina abierta observars que al hacer clic sobre los distintos prrafos 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 prctica veremos
cmo se puede definir el color, tamao, 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 mens de Kompozer selecciona Herramientas > Editor CSS o bien

pulsa en el botn CSS que aparece en la barra de herramientas
6. En el cuadro de dilogo Hojas de estilo CSS pulsa en el botn que muestra la paleta y
en el men desplegable seleciona la opcin Hoja de estilos enlazada (en algunas
versiones de Kompozer la traduccin al castellano ha sido Elem. Enlace)
7. Los estilos se pueden guardar en el propio cdigo HTML de la pgina HTML o bien en
un archivo *.CSS independiente. En este caso hemos optado por la segunda opcin por
lo que seleccionamos es una hoja de estilos enlazada.

53
8. En la casilla URL escribe la direccin: css/miestilo.css Esto le indicar a Kompozer

que los estilos se guardarn 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 botn 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 botn 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 opcin estilo
aplicado a todos los elementos del tipo. De esta forma las caractersticas de estilo
se aplicarn a una etiqueta html estndar: 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 pgina. A continuacin
pulsa el botn Crear regla de estilo.
13. Asegrate de que est seleccionado en el panel izquierdo el tipo recin creado y
pulsa sobre la pestaa Texto del panel .
14. En Tipo de letra vamos a cambiar el tipo de fuente con que se visualizar la pgina.
Activa la opcin predefinido y selecciona en la lista: Arial, Helvetica, sans-serif.
Recuerda que el usuario que visualiza la pgina deber tener instaladas en su equipo
las fuentes indicadas. En caso contrario estos tipos sern sustituidos por las fuentes
por defecto que emplee el navegador web utilizado. Por ello conviene utilizar fuentes
habituales. En esta pestaa se podran cambiar ms opciones del texto de la pgina
pero lo dejaremos como est.
15. Clic en el pestaa Fondo. En la casilla Imagen pulsa en el botn Elegir archivo y
selecciona la imagen images/paper.gif. De esta forma la pgina 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 botn de la paleta para desplegar el men y elegir la opcin Nueva regla
de estilo.
17. En el panel derecho activa la opcin estilo aplicado a todos los elementos del tipo.
A continuacin elige la etiqueta h1 en la lista desplegable y pulsa en el botn 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. Asegrate de que la regla h1 est seleccionada en el panel izquierdo y activa la

pestaa Texto.
19. En el cuadro Color pulsa en el botn para elegir un color predefinido en la paleta de
colores que se muestra. Por ejemplo: Rojo oscuro o marrn. Observa que tras
seleccionarlo ya ha cambiado de color el ttulo 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 pgina ya adquiere el color definido en el texto asociado a esa
etiqueta HTML.
23. Cierra el panel Hoja de estilos CSS pulsando en el botn Aceptar.
24. Clic en el botn Guardar para guardar las modificaciones de la pgina.
25. Si revisas el Cdigo fuente de la pgina (haciendo clic en la pestaa inferior Cdigo
fuente) vers que se ha creado una vinculacin de esta pgina al archivo que
contiene la informacin de estilos: <link rel="stylesheet" href="css/miestilo.css" y que
adems se ha creado este archivo *.CSS en la carpeta css.
1.7.3 Vincular una hoja de estilo a una pgina web

1. Descarga y descomprime el archivo adjunto estilo.zip dentro de la carpeta
miweb\css. Como resultado de la extraccin se obtendr el archivo estilo.css dentro
de la carpeta css.
2. Inicia Kompozer y a continuacin abre el archivo HTML anterior: agala.htm mediante
Archivo > Pginas recientes >
3. Para abrir el editor CSS selecciona Herramientas > Editor CSS o bien pulsa en el
botn CSS.
4. Para asociar otra hoja de estilo a la pgina actual debe eliminarse la vinculacin 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 botn Quitar.
5. A continuacin pulsa en el botn 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 botn Elegir archivo para navegar, seleccionar y abrir el
archivo miweb\css\estilo.css.
6. Clic en el botn 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 botn + se mostrarn las reglas que contiene.

58
7. Observa que la pgina 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 pestaas del panel derecho (
General, Texto, Fondo, etc) y realizar los cambios oportunos.
9. Clic en el botn Guardar para guardar la vinculacin de la pgina 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 mltiples sitios web donde es posible configurar en lnea una pgina *.CSS
utilizando cuadros de texto y listas desplegables de un formulario. El resultado final es un
cdigo CSS que se puede copiar y pegar en un archivo *.css local para posteriormente situarlo
en nuestro sitio web y vincularlo a las pginas HTML.
Ejemplo: http://www.ignside.net/man/misc/testcss/cssgenerador.htm
Otros ejemplos se pueden encontrar a travs de Google con los trminos de bsqueda:
generador CSS.
Pginas web ::: Uso de plantillas

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 pginas con un diseo similar pero
con distinto contenido. Un administrador de la web puede disear las plantillas propias de su
sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseo de
pginas HTML. De esta forma se asegura cierta uniformidad en las pginas de un sitio web.
1.8.2 Crear una plantilla

En este ejemplo vamos a crear una plantilla que nos permita disear webquests para nuestros
alumnos con slo rellenar sus reas editables.
1. Antes de comenzar la prctica 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 dilogo Crear un nuevo documento o plantilla activa la opcin Una
plantilla vaca y pulsa en el botn Crear.
4. Pulsa 3-4 veces la tecla <enter> y luego haz clic para situar el cursor en la primera
lnea de la pgina.
5. Selecciona Insertar > Plantillas > Insertar rea editable.
6. Se muestra el cuadro Insertar un rea editable. En Nombre de rea introduce la
palabra Ttulo, en Tipo de rea selecciona Bloque (si eliges texto fluido el rea
tendr una anchura expandible en funcin del texto que se va introduciendo). Clic en
el botn Aceptar.

61
7. Selecciona el texto que aparece en la caja Titulo y en la lista desplegable de

formatos selecciona Ttulo 1 para este prrafo
8. Repite los pasos 5 y 6 para crear las siguientes reas editables: Subttulo, Edades,
Introduccin, Tarea, Proceso, Recursos, Evaluacin, Conclusin y Crditos. Puedes
introducir en cada caja uno o varios <enter> para definir su altura.
9. Sitate en la ltima lnea y teclea el ao y denominacin de tu centro de trabajo.
Este texto no ser editable.
Nota:
Sobre esta pgina se pueden definir prrafos fijos o reas editables con distintos formatos.
Incluso se pueden insertar imgenes, color de fondo, etc como si se tratase de una pgina
HTML normal.
10. Selecciona Archivo > Guardar.
11. En el cuadro de dilogo Ttulo de la pgina NO es conveniente introducir ttulo
porque se trata de una plantilla. Pulsa en el botn Aceptar.
12. Se muestra la ventana Guardar pgina 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
extensin 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 pgina HTML a partir de una plantilla

1. Elige Archivo > Nuevo
2. En el cuadro de dilogo Crear un nuevo documento o plantilla selecciona la opcin
Un nuevo documento basado en una plantilla
3. Pulsa el botn Elegir archivo y elige la plantilla anteriormente creada.
4. Clic en el botn Crear.

63
5. En la nueva pgina sustituye el texto de las reas editables por el texto definitivo.
Observa que cada rea es extensible hacia abajo para alojar el texto o imgenes que
se deseen insertar. Por otra parte el pie con la identificacin del centro no se puede
editar al no haberse incluido en un rea editable durante el diseo de la plantilla
original.
6. Elige Archivo > Guardar como
7. En el cuadro Ttulo de la pgina introduce el ttulo de la pgina. Ser el texto que
aparecer en la barra de ttulo del navegador web cuando se navegue por la pgina.
Por ejemplo: Mi primer webquest. Clic en el botn Aceptar.
8. En el cuadro Guardar pgina como selecciona la carpeta miweb e introduce como

Nombre: webquest.html. Clic en el botn Guardar.

64
9. Para visualizar el aspecto final de esta pgina pulsa en el botn Navegar situado en la
barra de herramientas de Redaccin. (Este botn slo funciona si tienes instalado
Firefox como navegador por defecto. Esta opcin se configura abriendo Firefox y
seleccionando Herramientas > Opciones > Principal > Valores predeterminados del
sistema).
10. Cuando se visualiza una pgina web basada en una plantilla no se visualizan las
etiquetas de las reas editables.
Notas:
Si durante la edicin 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 modificacin posterior de la plantilla NO afecta a las pginas creadas con
anterioridad.
Es posible transformar una pgina HTML en una plantilla selecciona Formato > Ttulo
y propiedades de la pgina. En el cuadro de dilogo Propiedades de la pgina la
opcin Plantillas > Esta pgina es una plantilla

65
Pginas web ::: Formularios

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 aadir a una pgina y que permite
recoger datos que introduce el usuario para luego procesarlos.
En un formulario hay 2 partes bsicas:
El interfaz o pgina con la estructura de campos, etiquetas y botones que puede ver
el usuario.
El programa o script que procesa esa informacin.
La construccin del formulario es relativamente fcil. Sin embargo crear el programa o script
es mucho ms complicado y no ser tratado porque excede el propsito de este curso.
1.9.2 Formulario de bsqueda de Google

En esta actividad vamos a crear un formulario que enve el texto introducido al script de
bsqueda de Google para obtener directamente la pgina de resultados.
1. Extrae a la carpeta miweb\images el contenido del archivo google.zip que se
adjunta. Como resultado de esa extraccin encontrars en esta carpeta el archivo
grfico: logogoogle.gif
3. Escribe: "Buscador Google". Selecciona el texto y elige el estilo de prrafo Ttulo 1.
Pulsa <enter> para saltar a la siguiente lnea.
4. Selecciona Insertar > Imagen
5. En el cuadro de dilogo Propiedades de imagen pulsa en el botn 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 pestaa Enlace e introduce la direccin web: http://www.google.es. De

esta forma el usuario podr situarse en la pgina de inicio de Google haciendo clic en
la imagen.
9. Selecciona Insertar > Formulario > Definir formulario

10. En el cuadro de dilogo Propiedades del formulario introduce los siguientes valores:
Nombre del formulario: google

URL de la accin: http://www.google.es/search. Es la URL del script o
programa que procesar el texto que el usuario ha tecleado en el formulario
diseado. Como puedes comprobar hay scripts que permiten invocarlos desde
otros sitios web.
Mtodo: get. Especifica el mtodo visible (GET) u oculto (POST) que utiliza el
formulario para enviar los datos. Se elige uno u otro segn lo requiera el
programa que va a recibir esta informacin. En este caso debe ser GET para
que funcione.

69
11. Clic en el botn Aceptar. Observa que el formulario aparece en la pgina 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 continuacin vamos a situar los elementos del formulario. Clic dentro del formulario
para que el cursor se site parpadeando dentro del recuadro del formulario. Teclea
"Introduce el texto de bsqueda". Pulsa <enter> para situarte en la siguiente lnea.
13. Elige Insertar > Formulario > Campo de formulario.
14. En el cuadro de dilogo Propiedades del campo del formulario pulsa en el botn Ms
propiedades. Define las siguientes propiedades:
Tipo del campo: Texto
Nombre del campo: q
Tamao del campo: 50
15. Clic en el botn Aceptar.
16. Pulsa la tecla <enter> para situarse en una nueva lnea para insertar los botones del
formulario. A continuacin selecciona Insertar > Formulario > Campo de formulario.
17. En el cuadro de dilogo Propiedades del campo del formulario configura los
parmetros:
Tipo del campo: Botn de envo.
Nombre del campo: Enviar.
Valor del campo: Enviar.

70

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: Botn de reestablecimiento.
Nombre del campo: Borrar.
Valor del campo: Borrar.

71
22. Para guardar esta pgina, elige Archivo > Guardar como.
23. Introduce Buscador Google como ttulo y pulsa en el botn Aceptar.
24. Guarda la pgina en la carpeta miweb y define como nombre de archivo: google.html
. Pulsa en el botn Guardar.

72
25. Clic en el botn Navegar de Komposer para comprobar el funcionamiento del

formulario creado.
1.9.3 Formulario de traduccin de Babylon

El propsito de esta actividad es crear un formulario donde el usuario introduzca un trmino
en ingls y se muestre su traduccin al espaol utilizando el script de traduccin 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 extraccin encontrars en esta carpeta el archivo
grfico: babylon.gif
3. Escribe: "Traductor Babylon". Selecciona el texto y elige el estilo de prrafo Ttulo 1.
Pulsa <enter> para saltar a la siguiente lnea.
4. Selecciona Insertar > Imagen
5. En el cuadro de dilogo Propiedades de imagen, pulsa en el botn 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 pestaa Enlace e introduce la direccin web: http://www.babylon.com . De
esta forma el usuario podr situarse en la pgina de inicio de Babylon haciendo clic en
la imagen.

73
9. Selecciona Insertar > Formulario > Definir formulario

10. En el cuadro de dilogo Propiedades del formulario introduce los siguientes valores:
Nombre del formulario: babylon

URL de la accin: 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 diseado. Como puedes comprobar hay scripts que permiten
invocarlos desde otros sitios web.
Mtodo: get. Especifica el mtodo visible (GET) u oculto (POST) que utiliza el
formulario para enviar los datos. Se elige uno u otro segn lo requiera el
programa que va a recibir esta informacin. En este caso debe ser GET para
que funcione.
11. Clic en el botn Aceptar. Observa que el formulario aparece en la pgina 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 continuacin vamos a situar los elementos del formulario. Clic dentro del formulario
para que el cursor se site parpadeando dentro del recuadro del formulario. Teclea
"Introduce la palabra que deseas traducir". Pulsa <enter> para situarte en la siguiente
lnea.

74
13. Elige Insertar > Formulario > Campo de formulario.

14. En el cuadro de dilogo Propiedades del campo del formulario pulsa en el botn Ms
propiedades. Define las siguientes propiedades:
Tipo del campo: Texto
Nombre del campo: word
Tamao del campo: 30
16. Pulsa la tecla <enter> para situarse en una nueva lnea para insertar los botones del
formulario. A continuacin selecciona Insertar > Formulario > Campo de formulario.
parmetros:
Tipo del campo: Botn de envo.
Nombre del campo: Traducir.
Valor del campo: Traducir.

75

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
informacin del formulario. Se denominan campos ocultos. Para definir campos
ocultos en un formulario asegrate de que el cursor est situado dentro del
formulario y a continuacin selecciona Insertar > Formulario > Campo de
formulario.
parmetros y pulsa en el botn Aceptar:
Tipo del campo: Oculto
Nombre del campo: lang
Valor del campo: 3
Este valor indica al script que debe traducir el trmino introducido del ingls al
castellano. Si introduces otro valor lo traducir del ingls a otro idioma: francs (1),
italiano (2), alemn (4), portugus (5), etc.
21. Selecciona Insertar > Formulario > Campo de formulario y en el cuadro de dilogo
Propiedades del campo del formulario configura los parmetros:

76
Tipo del campo: Oculto

Nombre del campo: layout
Valor del campo: combo.html
Este valor le indica al script el modelo de pgina HTML que debe utilizar para mostrar
el resultado de la traduccin.
23. Para guardar esta pgina, elige Archivo > Guardar como.
24. Introduce Traductor Babylon como ttulo y pulsa en el botn Aceptar.

77
25. Guarda la pgina en la carpeta miweb y define como nombre de archivo

babylon.html . Pulsa en el botn Guardar.
26. Clic en el botn Navegar de Kompozer para comprobar el funcionamiento del

formulario creado. Tras introducir el trmino en ingls (cat, dog, etc.) y pulsar en el
botn Traducir se mostrar su traduccin al castellano.
Pginas web ::: Archivos ZIP

78
1.10 Archivos ZIP
79

1.10 Archivos ZIP

1.10.1 Introduccin
En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de
una pgina web. Puede ser el caso de una coleccin 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 ningn programa adicional. Se pueden afrontar estas tareas desde el mismo sistema
operativo.
1.10.2 Cmo 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 accin 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 dilogo 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 accin 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 Cmo descomprimir un archivo ZIP?

1. Descarga el archivo mrveghead.zip
localizarlo.
y utiliza el explorador de archivos para
Windows
2. Clic derecho sobre el archivo ZIP y selecciona la opcin Extraer todo.
3. En el cuadro de dilogo Asistente para extraccin haz clic en el botn Siguiente.
4. En el cuadro Seleccione un destino pulsa en el botn Examinar para definir la
carpeta destino donde se copiar el resultado de la extraccin.
5. Clic en Siguiente.
6. Una vez concludo el proceso pulsa en el botn Finalizar.

80
7. Esta accin 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 animacin en Flash.
Ubuntu
2. Desde el explorador de archivos haz clic derecho sobre el icono del ZIP que deseas
descomprimir.
3. Selecciona la opcin Extraer aqu.
4. Esta accin extraer el contenido de este ZIP en la misma carpeta donde se sita el
ZIP original.
1.10.4 Enlace a un ZIP desde una pgina 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 obtendrs un archivo de texto: mvh_instrucciones.txt.
3. Desde el explorador de archivos sitate dentro en la carpeta miweb y haz doble clic
sobre el archivo de texto anterior para abrirlo.
4. Desde el Bloc de notas elige Edicin > Seleccionar todo y luego Edicin > Copiar.
Cierra el Bloc de Notas y borra este archivo de texto.
5. Abre Kompozer y elige Archivo > Nuevo.
Un documento vaco y presiona en el botn Crear.
7. Sobre el nuevo documento selecciona Editar > Pegar.

8. Selecciona el ttulo inicial : MR. VEGHEAD y en la lista de Formatos selecciona
Ttulo 1.
Nota importante: Antes de comenzar a insertar imgenes o hipervnculos en una
pgina nueva es muy conveniente guardarla para indicarle a Kompozer dnde se
ubicar. De esta forma los enlaces a los recursos sern relativos y no absolutos
evitndose con ello muchos problemas durante la publicacin de recursos en el
servidor web.

81
9. Para guardar una pgina haz clic en el botn Guardar situado en la barra de
herramientas de Redaccin de Kompozer.
10. En el cuadro Ttulo de la pgina introduce como ttulo: Mr.Veghead y pulsa en el

botn Aceptar.
11. En el cuadro Guardar pgina como selecciona la carpeta miweb en la lista

desplegable Guardar en: y define como Nombre del archivo: mrveghead.html. Para
terminar pulsa en el botn 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 botn Enlace.
14. En el cuadro de dilogo Propiedades del enlace pulsa en el botn Elegir archivo

82
15. En el cuadro Abrir archivo HTML despliega la lista Tipo: y selecciona la opcin Todos
los archivos para que se muestren todos los tipos de archivos en lugar de slo 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 botn Abrir.

17. Observa que tras esta operacin en el cuadro Propiedades del enlace se muestra
como ubicacin del enlace: descargas/mrveghead.zip.

18. Clic en el botn Aceptar para terminar el enlace.

19. Para guardar los cambios pulsa en el botn Guardar.
20. Si deseas visualizar el aspecto final de la pgina haz clic en el botn Navegar.
83
Pginas web ::: Documentos PDF en la web

84
1.11 Documentos PDF

en la web

85
1.11 Documentos PDF en la web

1.11.1 Introduccin
En un sitio web es frecuente poner a disposicin de los usuarios documentos en formato PDF
para la consulta de informacin. 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 tamao ms reducido que el original.
Admite la bsqueda fcil de informacin entre sus pginas.
Tiene una presentacin idntica e independiente del dispositivo de visualizacin
(pantalla) y de impresin (impresora).
Permite proteger el contenido del documento frente a terceros.
En este captulo se explican los siguientes procedimientos:
1.
2.
3.
4.
Lectura y creacin de archivos PDF desde Windows: Adobe Reader y PDF Creator.
Lectura y creacin de archivos PDF desde Ubuntu: Evince Visor de documentos.
Exportar a PDF desde OpenOffice.
Vinculacin de un archivo PDF en una pgina 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 opcin
ms habitual es Adobe Reader. Puedes descargar e instalar el archivo
AdbeRdr812_es_ES.exe. La instalacin se realiza siguiendo las opciones por defecto del
asistente. Tras la instalacin 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 automticamente 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 versin 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 Instalacin de PDF Creator en Windows

El programa Adobe Reader permite la lectura de documentos PDF pero no su creacin. En su
defecto se propone utilizar PDFCreator como aplicacin de libre distribucin para crear un
documento PDF a partir de un archivo Word, Excel, etc:
http://sourceforge.net/projects/pdfcreator/

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
86
Descarga el archivo PDFCreator-0_9_5_setup.exe y ejecuta el asistente de

instalacin.
Selecciona el idioma de instalacin. Elige Espaol y pulsa en el botn Aceptar.
Bienvenido al asistente de instalacin de PDFCreator. Clic en Siguiente> para
continuar.
Acuerdo de Licencia. Marca la opcin Acepto el acuerdo y pulsa en el botn
Siguiente >
Tipo de instalacin. Activa la opcin Instalacin estndar y pulsa en el botn
Siguiente >
Nombre de la impresora. PDF Creator instala una impresora virtual en tu sistema.
Desde cualquier aplicacin que pueda imprimir se podrn 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 opcin por
defecto: PDFCreator y pulsar en Siguiente >.
Selecciona la Carpeta Destino. Esta aplicacin se instala por defecto en la carpeta
Archivos de programa. Si deseas instalarlo en otra carpeta pulsa en el botn
Examinar aunque se recomienda aceptar la opcin por defecto. Clic en el botn
Siguiente >
Barra de herramienta PDFCreator. Este cuadro de informacin 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.
Seleccin de componentes. Acepta las opciones por defecto haciendo clic en el
botn Siguiente>
Selecciona la carpeta del Men de Inicio. Clic en el botn Siguiente >
Selecciona las Tareas Adicionales. Clic en el botn Siguiente>
Listo para instalar. Clic en el botn Instalar.
Finalizando el asistente de instalacin de PDFCreator. Clic en el botn Terminar.
1.11.4 Crear un archivo PDF con PDFCreator en Windows

1.
2.
3.
Descarga y descomprime el archivo alimentacion.zip en la carpeta miweb. Como

resultado dispondrs en esta carpeta de dos documento: alimentacin.txt,
alimentacin.odt (para OpenOffice) y una pgina HTML: plantas.html.
Sitate en esta carpeta y haz doble clic en el archivo alimentacin.txt para abrirlo
con el Bloc de Notas.
Antes de imprimir vamos a configurar la pgina para eliminar los encabezados y pie
de pgina. Para ello selecciona Archivo > Configurar pgina

4.
5.
6.
87
En el cuadro de dilogo Configurar pgina borra el texto de Encabezado y Pie de

pgina y pulsa en el botn Aceptar.
Ahora vamos a imprimir el documento. Elige Archivo > Imprimir.
En el cuadro Imprimir selecciona en la lista Nombre la impresora virtual de
PDFCreator. Clic en el botn Imprimir.
7.
Antes de iniciar la impresin con PDFCreator se solicitan los metadatos del nuevo
archivo: ttulo, fecha de creacin, fecha de modificacin, autor, asunto, palabras
clave, etc. Es importante completar adecuadamente estos datos. Asegrate 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 botn Guardar.

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 alimentacin.
PDFCreator aade automticamente la extensin *.PDF. Clic en el botn Guardar.
10. Para terminar se abrir el Adobe Reader mostrando el nuevo archivo PDF.
Nota:
88

89
Una vez que has instalado Adobe Reader y PDF Creator se puede crear un PDF desde
cualquier programa que permita la impresin: Microsoft Office, Internet Explorer, Mozilla
Firefox, etc. Si se utiliza con un navegador web permite realizar copias de seguridad en
formato PDF de las pginas 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 > Aadir y quitar
2. En la casilla Buscar introduce el trmino pdf. Observa que al cabo de unos instantes
se mostrar en el listado derecho de aplicaciones la entrada Visor de documentos
(Ver documentos multipgina).
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 travs del navegador o bien un
fichero PDF del equipo se abrir esta aplicacin 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 podrs crear un documento PDF a partir de
cualquier aplicacin 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.

2.
3.
4.
5.
6.
7.
8.
9.
10.
90
En la ventana de consola escribe: sudo apt-get install cups-pdf

Cierra esta ventana.
Desde el escritorio elige Sistema > Administracin > Impresoras
Clic en el botn Impresora Nueva
Seleccione la conexin. Elige como dispositivo Print into PDF file y pulsa en el botn
Adelante.
Seleccionar impresora desde la base de datos. Selecciona la marca Generis y pulsa en
el botn Adelante.
Modelos y Controladores. Elige como modelo PostScript Printer y como controlador
Generis PostScript Printer (recomendado). Clic en el botn Adelante.
Nombre de la impresora. Introduce por teclado su identificativo, por ejemplo:
PDFPrinter.
Clic en el botn Aplicar y cierra el panel de administracin de impresoras.
1.11.7 Utilizar una impresora virtual PDF en Ubuntu

1. Arranca el navegador web Mozilla Firefox y sitate en una pgina web.
2. A continuacin selecciona Archivo > Imprimir.
3. En el panel Imprimir selecciona la impresora CUPS/PDFPrinter y a continuacin pulsa
en el botn 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 versin portable de OpenOffice:
OpenOffice2.exe. Descomprime el contenido en una carpeta de tu disco duro o pendrive para
disponer de este completo paquete ofimtico.
Ubuntu
En las mayora 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 dilogo Abrir localiza el archivo alimentacin.odt situado en la

carpeta miweb. Ha resultado de descomprimir alimentacin.zip en un apartado
anterior.
4. Una vez abierto este documento selecciona la opcin Archivo > Exportar en formato
PDF
5. Se muestra el cuadro Opciones de PDF donde es posible configurar ciertos
parmetros del PDF resultante. En este caso aceptamos las opciones por defecto y
pulsamos en el botn 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 alimentacin en el
Nombre del PDF y haz clic en el botn Guardar.

92
7. Si utilizas el explorador de archivos podrs 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.
2.
3.
5.
Abre Kompozer
Selecciona Archivo > Abrir
Localiza el archivo plantas.htm que has situado en miweb en apartados anteriores.
Clic en el botn Abrir.
Navega hasta el final del documento. Pulsa y arrastra para seleccionar la penltima
lnea: Ms informacin sobre la alimentacin de las plantas
Clic en el botn Enlace de la barra de herramientas
6.
En el cuadro Propiedades del enlace pulsa en el botn Elegir archivo
4.

93
7.
En el cuadro de dilogo 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 Ubicacin del enlace aparece
la ruta al PDF: pdf/alimentacion.pdf.

9.
10.
11.
12.
13.
94
En el rea Destino marca la opcin El enlace se abrir y en la lista elige la opcin en

una nueva ventana.
Clic en el botn Aceptar.
Resulta conveniente aadir informacin a continuacin del enlace sobre el tamao
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.
Desde Kompozer guarda los cambios de la pgina plantas.html mediante Archivo >
Guardar.
Para comprobar el correcto funcionamiento de este enlace, pulsa en el botn
Navegar. Si dispones de Firefox como navegador por defecto de tu equipo se
mostrar con el contenido de esta pgina. Al pulsar sobre el enlace creado se
mostrar el documento PDF vinculado.
1.11.10 Enlace a una pgina de un PDF

Tal y como hemos visto con anterioridad la tarea de enlazar a un PDF desde una pgina web
es relativamente fcil. En este apartado se describen los detalles de cmo enlazar a un
marcador o pgina 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 dilogo Crear un
nuevo documento o plantilla marca la opcin Un documento vaco y pulsa en el
botn Crear.
3. Pulsa en el botn Guardar. Introduce como ttulo: 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 lnea El proyecto TIC del centro. Selecciona el texto y
asgnale el formato Ttulo 1
5. En lnea aparte escribe el texto: Documento PDF completo, seleccinalo y pulsa en
el botn Enlace de la barra de herramientas.
6. En el cuadro Propiedades del enlace pulsa en el botn Elegir archivo
7. En el cuadro de dilogo Abrir archivo HTML despliega la lista Buscar en: para
situarte en la carpeta miweb\pdf. Despliega la lista inferior Tipo y selecciona la
opcin 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 botn Abrir.
96

8. Regresas al cuadro Propiedades del enlace. Observa que el cuadro de texto

Ubicacin del enlace se muestra la ruta relativa a la pgina donde se ubica el PDF
referenciado.
10. Para guardar la pgina HTML pulsa sobre el botn Guardar.

11. Si tienes configurado Firefox como navegador web por defecto del equipo, entonces
al pulsar en el botn Navegar se abrir una ventana de este navegador mostrando el
contenido de la pgina. 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 lnea aparte). En el cuadro de dilogo Propiedades
del enlace, una vez que estas apuntando al documento PDF (paso 8) y antes de hacer
clic en Aceptar, puedes aadir los parmetros adicionales para situarse en una zona
especfica del mismo.
Texto
ndice (pgina 2)
El coordinador TIC (pgina 25)
Lineas de Actuacin (destino)
Organigrama (destino)
Documento (zoom 200)
Documento con marcadores visibles
Documento con miniaturas visibles
Documento sin barras de scroll
Documento
sin
barra
de
herramientas
Organizacin (pgina 23 ajustada)
Organizacin (pgina 23 tamao
ventana)
Enlace
pdf/TIC_project.pdf#page=2
pdf/TIC_project.pdf#page=25
pdf/TIC_project.pdf#Lineas_Actuacion
pdf/TIC_project.pdf#Organigrama
pdf/TIC_project.pdf#zoom=200,10,10
pdf/TIC_project.pdf#pagemode=bookmarks
pdf/TIC_project.pdf#pagemode=thumbs
pdf/TIC_project.pdf#scrollbar=0
pdf/TIC_project.pdf#toolbar=0
pdf/TIC_project.pdf#page=23&view=Fit
pdf/TIC_project.pdf#page=23&viewrect=10,10,300,200

97
13. Clic en el botn Guardar para guardar los cambios de la pgina.

14. Pulsa en el botn Navegar para visualizar esta pgina y comprobar el funcionamiento
de los enlaces definidos.
A continuacin se indica la sintaxis que se puede utilizar en el enlace a un PDF. Los
parmetros entre corchetes son opcionales.
documento.pdf#page=numero
Ir a la pgina cuyo nmero se indica. Debe ser un nmero entero. La primera pgina 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 nmero de pgina del
documento. Es importante no confundir los destinos con los marcadores de pgina.
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 nmeros enteros que indican
las coordenadas en pxeles del documento donde se situar la esquina superior izquierda de la
ventana de visualizacin.
documento.pdf#view=modo
Define el modo en que se visualizar la pgina. 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 posicin y tamao del rectngulo de visualizacin de la ventana de visualizacin del
documento. Todos los valores son enteros y expresan unidades en pxeles.
documento.pdf#pagemode=modo
Permite mostrar los marcadores o miniaturas de pgina 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 ocultarn 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 ms de 32 caracteres de longitud.
Se pueden utilizar mltiples comandos separados por el signo &.
Ejemplo: documento.pdf#page=21&pagemode=bookmarks&zoom=150
Pginas web ::: Noticias RSS de un sitio web

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 trmino 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 extensin .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 publicacin simple de carcter temtico que puede ser leido
por los usuarios utilizando el propio navegador web o bien un programa especfico.
El archivo *.RSS *.XML contiene la siguiente informacin:
1.
2.
3.
4.
5.
Titulo del Canal: Canal Naturaleza

Link: Enlace a la website.
Imagen corporativa.
Descripcin. Texto explicativo del propsito del canal.
TTL (tiempo de vida del canal hasta el siguiente refresco. Se expresa en min.).etc.
Contiene adems uno o varios items de noticias individuales, cada uno de los cuales debe
disponer de una fecha, un titulo, una descripcin y un enlace.
1.12.2 Cmo leer un canal de noticias RSS?

1. Abre Mozilla Firefox
2. Visita la direccin de los titulares RSS del peridico
http://rss.elmundo.es/rss/
3. Haz clic en uno de los iconos RSS correspondiente a un canal temtico
El
Mundo:
4. Se muestra la pgina de titulares donde el ttulo de cada noticia es un enlace a la

pgina del peridico donde se amplia su informacin.

100
1.12.3 RSS y marcadores dinmicos en Firefox

Un marcador dinmico 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
dinmicos el contenido viene al usuario. En lugar de tener que revisar los cambios y
modificaciones de la pgina web, el marcador dinmico ofrece las actualizaciones tan rpido
como estn disponibles.
1. Cuando se accede desde Firefox a la pgina de titulares de un canal RSS, en la parte
superior de la misma pgina se ofrece la oportunidad de crear un marcador dinmico
a ese canal.
2. Asegrate de que la opcin Marcadores dinmicos est seleccionada en la lista
Suscribirse a este canal usando.
3. Clic en el botn Suscribirse ahora.

4. En el cuadro de dilogo Aadir marcador dinmico 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 dinmico aparezca en la barra de marcadores de Firefox y sea
visible y accesible directamente.

6. Observa que esta accin ha creado en la barra de marcadores de Firefox un marcador
con el nombre del canal. Si pulsas sobre l se mostrarn las noticias de este canal.
Pulsa sobre la noticia deseada para acceder a su pgina. Si eliges la opcin Abrir todo
en pestaas se mostrar cada noticia en una pestaa independiente.

101
Notas:
Si la barra de marcadores no est visible entonces activa su visualizacin mediante Ver >
Barra de herramientas > Barra de herramientas de marcadores
Otros sitios web con canal RSS: http://www.elpais.com/rss.html (El Pas) 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 pgina 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 obtendrs 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 aadir contenidos respetando escrupulosamente la estructura de las

etiquetas.
4. A continuacin se explican las distintas etiquetas o tags:
<?xml . Este tag indica el comienzo del documento XML. Su atributo

encoding=iso-8859-1 define el cdigo de caracteres con se mostrar en el
navegador.
<rss version=2.0> </rss>. Entre estas etiquetas se incluye toda la
informacin del archivo XML. Su atributo version indica la versin del
lenguaje RSS que se utiliza.
<channel> </channel>. Indica el canal de noticias que abrimos. Todas la
informacin del canal est includa entre estas etiquetas. Las propiedades del
canal se sitan en las siguientes subetiquetas:
<title></title>. Ttulo del canal.
<description></description>. Descripcin 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 modificacin del archivo. Como puedes ver su formato
es ingls.
<image></image>. Contiene la imagen del canal: url, ttulo, enlace,
descripcin, etc. Es una parmetro opcional.
<item></item>. Cada noticia ser un bloque que comienza y termina por
estas etiquetas. Dentro de ellas se especifican los distintos parmetros de
cada noticia:
<title></title> Ttular de la noticia.
<link></link> Enlace donde se dirige cuando el usuario pulsa en el
titular.
<description></description> Breve descripcin de la noticia.
<category></category>. Categora de la noticia.
<pubDate></pubDate>. Fecha de publicacin en formato ampliado e
ingls.
5. Prueba a modificar el contenido de estas noticias. Se pueden aadir ms noticias

debajo e inmediatamente por encima de la etiqueta </channel> copiando y pegando
ms 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 pgina miweb\index.html utilizando Kompozer. Ser la
portada de nuestro sitio web. Si las has creado gurdala mediante Archivo >
Guardar como.
3. Sita el cursor al final de este documento para luego elegir Insertar > Imagen.
4. En el cuadro de dilogo Propiedades de imagen, en la pestaa Ubicacin, pulsa
el botn 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 pestaa Enlace, pulsa en el botn Examinar y localiza el archivo
situado en la carpeta rss/feedcentro.xml.

8. Elige Archivo > Guardar para guardar los cambios.
9. Abre la pgina con el navegador Firefox para ver el resultado final.
Pginas web ::: El sitio web: estructura y navegacin

104
1.13 Sitio web:

estructura y navegacin

105
1.13 Sitio web: estructura y navegacin

1.13.1 Qu es un sitio web?
Un sitio web (en ingls:website) es un conjunto de pginas html relacionadas entre s por
hiperenlaces, gestionadas por una nica entidad o persona, accesibles desde Internet a partir
de una direccin URL de su pgina ndice (index) y con una unidad de contenido y de estilo
grfico. Incluye textos, imgenes, archivos de audio, vdeo y enlaces a otros sitios web.
Normalmente no se disea una pgina web aislada sino ms bien un sitio completo donde a
partir de una pgina principal o ndice se enlazan el resto de pginas.
1.7.2 La estructura de archivos y carpetas

Antes de iniciar el diseo de un sitio web es necesario preparar su estructura de carpetas y
archivos. Cuando el nmero de ficheros es considerable, resulta muy til ubicarlos en
carpetas para facilitar su localizacin y edicin. Existen mltiples posibilidades de organizar
el sistema de ficheros.
Con carcter general se proponen un modelo basado en la organizacin por tipos de archivos.
Las pginas HTML se guardarn en el directorio o carpeta principal mientras que los
elementos que utilizan (audios, vdeos, hojas de estilo, imgenes, etc) se situarn en las
subcarpetas correspondientes.
Esta organizacin est especialmente pensada para un sistema de pginas HTML que
comparten recursos: imgenes, 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: imgenes jpg, gif o png.
pdf: documentos pdf.
scripts: archivos js con cdigo javascript reutilizable.
swfs: archivos con animaciones flash (*.swf).
vdeos: ficheros en distintos formatos de vdeo: *.wmv, *.flv

106
Cuando el nmero de pginas 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 Fsica y Qumica 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 raz: audios, css, docs, images, js, etc o bien
tener una organizacin ms plana (sin carpetas) e incluso independiente de los archivos de
otras carpetas.
1.7.3 Los nombres de carpetas y archivos

Con intencin 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 alfanumricos: a-z y 0-9
2. No debe contener caracteres no alfanumricos, signos de puntuacin, espacios en
blanco, caracteres acentuados, ees, etc.
3. Los nicos caracteres no alfanumricos permitidos son el subrayado _ y el guin
4. No debe superar los 20 caracteres.
5. Utilizar siempre letras minsculas aunque se admitan maysculas. Hay servidores que
distinguen entre maysculas y minsculas. Esto significa que la pgina INDEX.html no
es la misma que la pgina index.html.
6. Para las pginas HTML utilizar siempre la extensin: *.html aunque se admita la
*.htm.
7. Reserva el nombre index.html para la pgina 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 navegacin

La estructura de navegacin por un sitio web viene definida por la experiencia de navegacin
del visitante en virtud de la cual puede saltar de una pgina a otra dentro del sitio web
utilizando el sistema de hipervnculos.
La estructura de navegacin se suele elegir en funcin del tipo de contenido. Existen distintos
tipos de estructuras:
Jerrquica. Estructura en rbol donde existe una pgina ndice o principal desde
donde se accede al resto de pginas. Desde estas subpginas se puede acceder a
otras y as sucesivamente creando distintos niveles o jerarquas. Es ideal para
sitios web de centros o proyectos. No se aconseja utilizar ms de 4 niveles para
evitar que el usuario se desoriente durante la navegacin. Conviene situar en
todas las pginas un men que permita moverse de una forma fcil y directa por
los distintos niveles y pginas de cada nivel.

107
Lineal. Es una estructura muy simple similar a las pginas de un libro. Desde una
pgina concreta se puede ir a la pgina siguiente o la pgina anterior. Es
especialmente til si deseamos que el usuario siga un itinerario fijo y guiado sin
posibilidad de acceder a otras pginas que pudieran distraerle. Ejemplo: Gua o
tutorial de aprendizaje. No es recomendable si el nmero de pginas encadenadas
es muy elevado porque produce sensacin de fatiga y no permite retomar
fcilmente la secuencia all donde se abandon en la ltima sesin.
Lineal con jerarqua. Es una estructura hbrida que trata de aprovechar las
ventajas de las dos estructuras anteriores. Las pginas y subpginas se organizan
de forma jerrquica pero tambin es posible navegar de forma lineal por las
pginas de un mismo nivel. Los contenidos web de este curso utilizan esta
estructura.
Red. A partir de la pgina ndice o principal se puede navegar a otra u otras sin
ningn orden aparente. Es una estructura ms libre pero no es aconsejable
cuando el nmero de pginas es elevado porque desorienta al usuario al no saber
dnde est ni disponer de recursos para ir donde desea.

108
1.10.5 Cmo crear un sitio web con Kompozer?

Es prctica 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 continuacin 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 funcin <F9>
3. En el panel Administrador de sitios pulsa en el botn Editar sitios.
4. En el cuadro Configuracin de publicacin introduce MiSitio en el cuadro de texto

Nombre de sitio y pulsa el botn Seleccionar directorio para apuntar a la carpeta
miweb. Clic en el botn 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 aaden elementos utilizando el explorador de archivos de
Windows o bien cuando se crea una pgina 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 modificacin 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 continuacin vamos a crear la pgina index.html de nuestro sitio web. Para ello
seguiremos el procedimiento habitual: Archivo > Nuevo.
9. Escribe Mi pgina principal, selecciona el texto y elige como formato Ttulo 1.
10. Pulsa la tecla <enter> para situarte en la siguiente lnea y pulsa en el botn Vietas
de la barra de herramientas de Formato.
11. Escribe Federico Garca Lorca, selecciona el texto y pulsa en el botn Enlace.
12. En el cuadro de dilogo Propiedades del enlace haz clic en el botn Elegir archivo
y localiza la pgina lorca.html situada en la carpeta miweb. Clic en Aceptar.
13. Repite los pasos 11 y 12 para crear los enlaces al resto de pginas :
Demografa: poblacion.html
Escribe tu cuento: escribe.html
Glosario: glosario.html
14. Selecciona Archivo > Guardar como
15. Introduce el ttulo: Mi pgina principal para guardar la pgina index.html en la
carpeta miweb.
16. Para probar su funcionamiento pulsa en el botn Navegar.
Pginas web ::: Cmo disear un men de navegacin?

111
1.14 Cmo disear un

men de navegacin?

112
1.14 Cmo disear un men de navegacin?

En este apartado vamos a describir el procedimiento de creacin de un men de navegacin
para un sitio web con estructura jerrquica. Para ello utilizaremos el software gratuito
Coffee Free DHTML Menu Builder. Este programa permite crear un men jerrquico
desplegable con colores personalizados utilizando un interfaz visual. Al final se genera un
cdigo javascript que se puede copiar y pegar en nuestras pginas HTML para integrar este
men.
1.14.1 Instalacin y ejecucin 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 versin portable. El programa se
inicia al hacer doble clic sobre el archivo ejecutable: DHTMLMenu.exe
Otra opcin es visitar la pgina oficial de este producto para descargar e instalar la
versin ms 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 > Aadir y quitar.
2. En el panel Aadir y quitar aplicaciones introduce wine en la casilla Buscar. En el
catlogo aplicaciones marca la opcin Wine Windows Emulator y a continuacin
pulsa en el botn Aplicar cambios. Sigue los pasos sugeridos para terminar la
instalacin.
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 continuacin selecciona la opcin
Abrir con Wine. Se iniciar el emulador Wine y ste cargar el ejecutable indicado.
1.14.2 Crear el men de navegacin

1. Abre DHTML Menu.
2. En la pestaa Menu Designer (Diseador del Men) vamos a crear la estructura del
men. En este caso vamos a crear un rbol con esta estructura:
Captulo 1 (sin enlace)
Texto: Pgina 1. Enlace: pagina0101.html

Texto: Pgina 3. Enlace:

113
pagina0203.html
pagina0204.html
pagina0301.html
pagina0302.html
3. Pulsa en el botn Add Root Item (Aadir Elemento Raz) e introduce como Captulo
1 como Text (Texto) y borra el contenido de la casilla Link.
4. Repite el paso 3 para crear otros dos elementos raz ms: Captulo 2 y Captulo 3.
5. Clic en la entrada Captulo 1 del arbol de men Your Menu (Tu Men) para
seleccionarlo.
6. A continuacin pulsa en el botn Add Sub Item (Aadir Sub Elemento). Introduce
Pgina 1 en el cuadro Text (Texto) y como pagina0101.html en Link (Enlace).
7. Como ahora tenemos seleccionado el elemento Pgina 1 ahora pulsamos en el botn
Add Sibling (Aadir hermano) para crear otro elemento al mismo nivel. En este caso
el texto es Pgina 2 y el enlace pagina0102.html.
8. Repite el paso 7 para crear otro elemento con texto Pgina 3 y enlace
pagina0103.html.
9. Selecciona la entrada Captulo 2 y pulsa en el botn Add Sub Item (Aadir Sub
Elemento) para crear un elemento de texto Pgina 1 y enlace pagina0201.html.
10. Repite el paso 7 para crear
11. Repite el paso 10 y 11 para crear las entradas correspondientes del Captulo 3:
12. El rbol resultante del men se puede ver en el cuadro Your Menu (Tu Men).
13. Clic en la pestaa 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 submens (Sub Menu
Colors).
15. Clic en la pestaa Options (Opciones).

115
16. En el panel Options se pueden configurar mltiples detalles del men. Los ms
importantes son:
Menu Type (Tipo de Men): Horizontal o Vertical. En este caso vamos a
seleccionar Horizontal.
SubMenus UnFold On (Activacin del despliegue de los submens):
OnMouseOver o OnClick. Permite definir el evento de usuario que desplegar
un submen: OnMouserOver cuando el usuario site el puntero del ratn
sobre la opcin de men o bien OnClick slo cuando pulse sobre l. En este
caso dejamos la opcin por defecto: OnMouserOver.
Menu Item Font (Fuente del Elemento de Men). Permite definir la fuente,
tamao 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 opcin No Arrows (Sin
flechas).
17. Si deseas ver el aspecto que tendr tu men pulsa en el botn Preview (Vista previa).
18. Para guardar las opciones de configuracin del men y poder editarlas en otro
momento es conveniente pulsar en el botn Save Menu (Guardar Menu)
19. En el cuadro de dilogo Guardar como introduce el nombre del archivo. Por ejemplo
mimenu.mnu. La extensin de archivo *.mnu es especfica de Menu Builder
20. Si cierras Menu Builder y lo vuelves a abrir se puede recuperar la configuracin

definida utilizando el botn Open Menu (Abrir Menu).

116
1.14.3 Exportar el cdigo javascript del men

1. Abre DHTML Menu y luego abre el men que has guardado: mimenu.mnu.
2. Clic en el botn Get Code (Conseguir Cdigo).
3. Se muestra el cuadro de dilogo DHTML Menu HTML Code con el cdigo javascript
que generar el men en nuestras pginas HTML.
4. Pulsa en el botn Copy to Clipboard (Copiar al Portapapeles) para copiar este cdigo
al portapapeles.
5. Clic en el botn 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 Edicin > Pegar.
8. Elimina la primera lnea del cdigo: <script type='text/javascript'>
9. Borra las 3 ltimas lneas:
</script>
<noscript>Your browser does not support script</noscript>

10. Vamos a guardar este cdigo en un archivo de javascript independiente de extensin
*.js. Selecciona Archivo > Guardar
11. En el cuadro de dilogo Guardar como elige como carpeta destino miweb\scripts e
introduce como nombre menu.js
12. Pulsa en el botn Guardar.
13. Cierra DHTML Menu.

117
1.14.4 Integrar el men en las pginas HTML

1. Extrae a la carpeta miweb el contenido del archivo libro.zip que se adjunta. Como
resultado de esa extraccin encontrars varias pginas HTML: pagina0101.html,
pagina0102.html, pagina0201.html,
2. Abre Kompozer y selecciona Archivo > Abrir Archivo.
3. Selecciona la pgina pagina0101.html y pulsa en Abrir.
4. Sita el cursor en la primera lnea del documento. Es aqu donde se situar el men.
5. Elige Insertar > HTML

6. En el cuadro de dilogo Insertar HTML haz clic en el cuadro y escribe el cdigo de
inclusin del men:
<script type="text/javascript" src="scripts/menu.js"></script>

118
Otra posibilidad es copiar y pegar este cdigo desde aqu.

7. Haz clic en el botn Insertar.
8. Para comprobar si este cdigo se ha aadido correctamente haz clic en la pestaa
Cdigo fuente que aparece en la barra de modos de vista inferior.
9. En las primeras lneas de cdigo HTML se puede comprobar que se ha incluido el

cdigo.
10. Guarda el documento HTML pulsando en el botn Guardar o seleccionando Archivo >
Guardar.
11. Para ver su apariencias definitiva pulsa en el botn Navegar.
12. Repite los pasos anteriores para aadir el javascript del men de navegacin a todas y
cada una de las pginas: pagina0102.html, pagina0201.html, pagina0202.html, etc.
Pginas web ::: Publicacin web por FTP

119
1.15 Publicacin
web por FTP

120
1.15 Publicacin web por FTP

1.15.1 Qu es publicar un sitio web?
La prctica habitual es disear las pginas web de nuestro sitio web en el disco duro del
equipo para luego enviarlos al servidor web junto con los archivos multimedia referenciados
(imgenes, animaciones, audios, etc). A este proceso se le llama publicacin web. Mediante
este procedimiento se pone a disposicin de cualquier usuario con acceso a Internet las
pginas web del centro o proyecto al pasar a estar alojadas fsicamente 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 Transmisin de
Archivos). Esta transferencia de archivos se realiza en modo autentificado, es decir,
introduciendo un nombre de usuario y contrasea para evitar que otras personas puedan
publicar en nuestro espacio web.
En consecuencia antes de afrontar la tarea de publicacin ser necesario obtener los
siguiente datos del administrador del servidor web:
Direccin del servidor FTP: Es la URL del servidor que atiende peticiones de
conexin 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 Contrasea: 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
ubicacin correcta del servidor.
Direccin del servidor HTTP: Es la URL del servidor web que nos permitir acceder a
nuestras
pginas
usando
el
navegador
web.
Ejemplo:
http://roble.pntic.mec.es/usuario/
A continuacin se explican los detalles de cmo utilizar un programa como Filezilla , tanto en
Windows como en Linux, para subir contenidos por FTP a un servidor.
1.15.2 Instalacin 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 instalacin.
En el sitio web oficial del proyecto Filezilla podrs encontrar la versin ms reciente o que se
adapta a tu sistema: http://filezilla-project.org/
archivo a una carpeta de tu disco duro o pendrive: FileZilla_Portable_3.0.7.1.paf.exe

121
1.15.3 Instalacin de Filezilla en Ubuntu

1. Desde el escritorio elige Aplicaciones > Aadir o quitar
2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles.
3. Introduce el trmino Filezilla en el cuadro de texto Buscar: y a continuacin pulsa la
tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de verificacin
que acompaa a la entrada de Filezilla. Pulsa en el botn Aplicar cambios para
iniciar la instalacin. Confirma la instalacin pulsando de nuevo en el botn Aplicar.
4. Si ests conectado a Internet se descargarn los archivos necesarios para su
instalacin. Una vez concluda se mostrar el mensaje de xito. Clic en el botn
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 seccin 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
sita 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 ingls para configurar el idioma castellano en la barra de mens

de Filezilla selecciona Edit > Settings (Edicin > Configuracin )

122
3. En el cuadro de dilogo Filezilla Options (Opciones de Filezilla), en la lista de

opciones que aparece en el panel izquierdo, pulsar sobre el elemento Language
(Idioma) y despus haz clic sobre el idioma Espaol o bien Default system language
(Idioma por defecto del sistema) en el panel derecho. Para guardar esta seleccin
pulsa en el botn OK de este cuadro.
1.15.5 Configurar conexin FTP

En primer lugar debes asegurarte de que dispones de los datos de configuracin de tu
conexin FTP: direccin del servidor, nombre de usuario y contrasea.
A continuacin se crear una nueva entrada en el Gestor de Sitios para poder establecer
conexin con el servidor FTP.
1.
2.
3.
4.
Abre el programa Filezilla.

Selecciona Archivo > Gestor de sitios.
Se muestra el cuadro de dilogo Gestor de sitios.
Realiza los siguientes pasos para crear la conexin a un nuevo sitio:

123
1) Nuevo Sitio. Clic en este botn para crear una conexin 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 direccin IP del servidor FTP al que deseas conectarte.
En este caso: roble.pntic.mec.es
4) Puerto. Asegrate de que el puerto definido es el tpico del protocolo FTP: 21.
5) Tipo de servidor. Elige la opcin FTP File Transfer Protocol.
6) Modo de acceso. Es el tipo de autentificacin: Annimo, Normal, Preguntar la
contrasea, Interactivo o Cuenta. En este caso selecciona la opcin Normal si
deseas incluir la contrasea en la conexin o bien Preguntar la contrasea para
que se solicite la misma en cada intento de conexin.
7) Usuario. Es el identificador del usuario ante el servidor remoto.
8) Contrasea. Autentifica el usuario ante el servidor.
9) Conectar. Clic en este botn para iniciar la conexin.
La configuracin de la conexin a un nuevo sitio slo es necesario realizarla la primera vez o
bien cuando sea necesario modificar algn dato. En posteriores accesos al programa slo ser
necesario seleccionar la conexin creada y pulsar en el botn Conectar.
En ocasiones es necesario configurar algunas opciones avanzadas de la conexin.
1. Desde Filezilla abre el Gestor de sitios mediante Archivo > Gestor de Sitios.
2. Clic en la conexin correspondiente que aparece bajo la carpeta Mis sitios para
seleccionarla y poder editarla.
3. Clic en la pestaa Avanzado.

124
4. En esta pestaa se pueden configurar, entre otros, los siguientes parmetros:

Directorio remoto por defecto. En esta casilla puedes introducir una carpeta
del directorio remoto para situarte en ella al iniciar sesin. 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 botn 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 botn Gestor de sitios de la
barra de herramientas.
3. Se mostrar el cuadro de dilogo Gestor de sitios donde se hace clic sobre la

conexin para seleccionarla y se pulsa en el botn Conectar.

125
4. Otra posibilidad quizs ms rpida sea pulsar en la cabeza de flecha negra hacia
abajo que aparece en el botn Gestor de Sitios de la barra de herramientas para
desplegar el rbol de conexiones y hacer clic sobre la conexin deseada.
5. Filezilla intentar establecer una conexin FTP de acuerdo a la configuracin

establecida. Si los datos introducidos son correctos y no existe ningn problema, se
establecer conexin al cabo de unos instantes y se podra trabajar en la sesin FTP.
6. En la ventana de Filezilla se pueden distinguir 6 reas o paneles:
1) Barra de herramientas. Proporciona acceso a las operaciones ms habituales de

gestin FTP. Si pulsas en el botn situado ms a la izquierda de esta barra se
mostrar el Gestor de Sitios.
2) Conexin rpida. Puedes introducir los datos de conexin rpida a un sitio FTP:
Direccin, Usuario, Contrasea y Puerto. A continuacin se pulsa el botn
Conexin Rpida. Esta informacin no ser aadida al Gestor de Sitios.
3) Registro de mensajes. Muestra los ecos de las operaciones de comunicacin entre
cliente y servidor FTP. Nos permite tener un seguimiento completo de la situacin
de la sesin. Indica en un color diferente las respuestas del servidor, el estado de
la conexin, los errores, etc.
4) Sitio Local. Se sita 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 sita en la parte derecha y muestra el contenido de carpetas y
archivos del servidor. La carpeta que se muestra inicialmente al establecer la
conexin ser la que se ha definido en la casilla Directorio remoto por defecto
de las opciones avanzadas de configuracin del Sitio.

126
6) Cola de transferencia. Proporciona informacin de la lista de archivos que se

estn transfiriendo desde el equipo cliente al servidor o viceversa: nombre del
archivo local; direccin de transferencia: (<-) descargas (->) subidas; nombre
del archivo remoto; host del sitio remoto; estado: "Transferring ..."; etc.
1.15.7 Gestin FTP de archivos

Una vez que hemos abierto Filezilla y nos hemos conectado con xito al servidor remoto, se
podrn realizar las operaciones ms habituales relacionadas con la publicacin 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 sita 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 simultneamente , haz clic sobre el primero y luego clic
sobre el ltimo manteniendo pulsada la tecla Mayus.
2. En el panel Sitio Remoto sitate en la carpeta destino donde deseas enviar el
archivo.
3. Clic derecho sobre la seleccin del Sitio local y elige la opcin Subir para iniciar la
transferencia. Otra posibilidad es pulsar, arrastrar y soltar la seleccin desde el panel
Sitio Local al panel Sitio Remoto.

127
4. En el panel Cola de Transferencia iremos leyendo la evolucin 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 opcin 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 gestin de carpetas y archivos: crear carpeta
(Crear directorio), Borrar, Renombrar, Abrir, etc.
Nota:
El servicio de pginas web del CNICE presenta, entre otras, dos caractersticas 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 tamao limitado. Cuando se
alcance este lmite ser necesario ponerse en contacto con el administrador del
servicio para una posible ampliacin.

128
1.15.8 Descargas annimas por FTP

En Internet existen mltiples sitios desde donde es posible descargar archivos utilizando el
protocolo FTP. La descarga de archivos por FTP es ms eficaz que la descarga HTTP: se puede
detener y reanudar y tambin optimiza mucho mejor el ancha de banda disponible. Para las
descargas annimas por FTP podemos utilizar el cliente Filezilla.
1. Abre Filezilla
2. En la barra de conexin introduce la direccin del servidor FTP. Por ejemplo:
ftp.rediris.es (Servidor FTP annimo de la comunidad RedIris).
3. Como es un servidor de descargas annimo no es necesario introducir ni nombre de
usuario ni contrasea. Clic en el botn Conexin rpida. Los campos Nombre de
usuario y Contrasea se autocompletarn y se establecer la conexin.
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/)
Pginas web ::: Edicin web en lnea con Kompozer

129
1.16 Edicin web

en lnea con Kompozer

130
1.16 Edicin web en lnea con Kompozer

Kompozer es un programa que permite la edicin en lnea 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 Configuracin del sitio para edicin en lnea

Antes de comenzar es necesario disponer de las credenciales de conexin 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 botn Editar sitios.
4. En el panel Configuracin de publicacin define los siguientes parmetros:

Nombre de sitio. Escribe el identificador que te permitir distinguir esta
conexin de otras dentro de Kompozer. Por ejemplo: Mi Sitio CNICE
Direccin http de su pgina inicial. Es la pgina 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 publicacin: Direccin de la publicacin. Es la direccin FTP del
servidor. Debes introducirla anteponiendo el prefijo: ftp://. Ejemplo:
ftp://roble.pntic.mec.es/ . Si es necesario indicar carpeta destino se puede
aadir al final de esta direccin: ftp://roble.pntic.mec.es/public_html
Nombre de usuario y Contrasea de la conexin FTP.
5. Clic en el botn Aceptar para terminar.

131
6. Tras esta operacin 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 pgina 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 pginas HTML
3. Para publicar los cambios pulsa en el botn Publicar que aparece en la barra de
Redaccin de Kompozer.
4. Se muestra la ventana de progreso Publicando: Ttulo de pgina. Una vez

completado el proceso de publicacin con xito se muestra como Estado de
publicacin el mensaje Publicacin completada. Clic en el botn Cerrar
Nota: Si no tienes marcada la opcin Mantener esta ventana abierta esta ventana
se cerrar automticamente al cabo de unos segundos.

132
1.16.3 Operaciones bsicas con archivos en servidor remoto

Desde Kompozer es posible realizar algunas operaciones bsicas 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 pgina en servidor remoto

Para crear una nueva pgina en el servidor remoto:
1. Selecciona Archivo > Nuevo
Un documento vaco y pulsa en el botn Crear.

133
3. Teclea el texto, por ejemplo: Mi primera pgina remota

4. Pulsa en el botn Publicar o bien selecciona Archivo > Publicar
5. En el cuadro de dilogo Publicar pgina introduce los siguientes datos:

Ttulo de la pgina. Ejemplo: Mi primera pgina remota
Nombre de archivo. Ejemplo: mipaginaremota.html
Subdirectorio del sitio para esta pgina. En este cuadro de texto puedes
introducir el nombre de la carpeta en el servidor donde se guardar la pgina. Si
no introduces nada se guardar en la carpeta raz de conexin.
Incluir imgenes y otros archivos. Activa esta opcin si vas a insertar imgenes
en la pgina. Elige Usar la misma direccin como pgina si las imgenes se van a
guardar en la misma carpeta que la pgina. Se recomienda elegir Usar este
subdirectorio del sitio: e introducir la carpeta images como carpeta destino de
las imgenes que se publican.
6. Clic en el botn Publicar. Es conveniente publicar la pgina antes de insertar en ella

imgenes o enlaces relativos a otros documentos.

134
7. Mientras se sube la nueva pgina se mostrar el cuadro Publicando donde se

mostrar el progreso del proceso. Cuando haya finalizado con xito se mostrar el
mensaje Publicacin completada. Al cabo de unos segundos se cerrar este cuadro o
bien se puede cerrar pulsando en el botn Cerrar.
Notas:
Tras su publicacin, el botn Publicar no estar disponible hasta que no se realice

alguna modificacin sobre esa pgina.
Para publicar esa pgina en otra carpeta selecciona Archivo > Publicar como
Si despus de publicar con xito no ves la nueva pgina en el panel del Administrador
de sitios entonces pulsa en el botn Recargar.
1.16.5 Insertar una imagen del servidor en una pgina

1. Haz doble clic sobre la pgina 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 continuacin arrastra el archivo que contiene la imagen
para soltarla en la pgina. Clic en el botn Publicar.

135
1.16.6 Insertar una imagen del equipo en una pgina remota

1. Para insertar una imagen del equipo local, selecciona Insertar > Imagen. A veces el
programa muestra un pequeo bug en funcin del cual a veces la opcin de insertar
imagen est deshabilitada. Para resolverlo basta con pinchar en la pestaa cdigo
fuente de la pgina para luego regresar al modo vista normal.
2. En el cuadro de dilogo Propiedades de la imagen pulsa en el botn Elegir archivo
para navegar y localizar el archivo de imagen en tu equipo. Introduce el Texto
alternativo y pulsa en el botn Aceptar.
3. Pulsa en el botn Publicar o bien Archivo > Publicar.
4. Se muestra el cuadro de dilogo Publicando donde podrs observar que la imagen
se ha subido al servidor alojndose en la carpeta que se indic: images. Clic en el
botn Cerrar.
5. Si pulsas en el botn Recargar del Administrador de sitios podrs observar que la

imagen subida aparece en el rbol de carpetas dentro del directorio images
Pginas web ::: Usabilidad de pginas web

136
1.17 Usabilidad de
pginas web

137
1.17 Usabilidad de pginas web

1.17.1 Aclaracin terminolgica
El trmino "Usabilidad", importado del mundo anglosajn, puede traducirse como "facilidad
de uso". Es un concepto ms general. Sin embargo "Accesibilidad" es un trmino ms
especfico y se refiere al requisito que debe reunir un documento web para que las personas
con discapacidades puedan alcanzar la informacin que contiene. Por otro lado la
"Navegabilidad" alude a la definicin de una estructura que permita al usuario moverse con
facilidad por un sitio web.
Tener en cuenta estos conceptos cuando se aborda el diseo de un sitio web es una
declaracin de intenciones que excede cuestiones de estilo y trata de ponerse en el punto de
vista de los potenciales visitantes con intencin de facilitarles el acceso a la informacin.
A continuacin se citan brevemente algunas pautas o consejos que pretenden incrementar la
usabilidad de las pginas web diseadas.
1.17.2 Navegabilidad
1. Duplica los elementos de navegacin si es necesario. Si la pgina va a tener un
tamao superior a dos/tres ventanas, conviene situar los elementos de navegacin en
el encabezado y pie de la misma
2. Aade enlaces al principio de la pgina. Si la pgina es larga, es necesario situar al
final de ella e incluso por el medio hipervnculos que apunten al inicio de la misma.
3. Evita disear pginas que sean callejones sin salida. Sita en todas las pginas al
menos un enlace que permita continuar la navegacin: volver, ndice, etc.
4. Define una estructura sencilla de navegacin. Es recomendable utilizar una
estructura jerrquica sencilla a partir de una pgina ndice evitando abusar de los
enlaces que saltan de una rama a otra.
5. Proporciona siempre ndices. Sita siempre que sea posible un ndice con el
contenido del sitio. Situlo al principio, lateral o final de cada una de las pginas para
que sea siempre accesible.
6. Aade una paleta de navegacin textual. Si utilizas una paleta de navegacin a base
de grficos, incorpora otra paleta adicional a base de enlaces de texto. De esta
forma el usuario no tendr que esperar a que se carguen las imgenes para saltar a
otra pgina.
1.17.3 Diseo de Pginas

1. Tamao de las pginas. Las personas no suelen hacer scroll. Por este motivo las
pginas no deben ser ms largas del doble de la pantalla. Fracciona el texto en varias
pginas cuando el tamao del mismo sea excesivo para una pgina. El avance a la
siguiente pgina aportar cierto descanso en la vista que el usuario agradecer. No
obstante si la pgina contiene un texto que debe ser ledo completo conviene utilizar
marcadores y enlaces para facilitar la navegacin por el mismo.
2. Identificacin de las pginas. Es interesante situar informacin del centro o proyecto
en el pie o encabezado de todas las pginas. Incluso con posibilidad de acceder a un
email de contacto o a la pgina ndice. Hay visitantes que pueden acceder a travs de
buscadores a una pgina 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 pginas para distintos navegadores. Aunque el Internet Explorer
es el ms usado cada vez hay ms clientes con Firefox.
No disees para la ltima versin del navegador. No todos los usuarios
tienen instalada la ltima versin.
Define el tamao de las tablas y celdas en %. De esta forma se adaptarn a
la resolucin de pantalla del usuario.
Disea para una resolucin ptima. Actualmente la resolucin ms utilizada
es 1024x768. Indica en la pgina principal que es la resolucin ptima pero no
descuides la apariencia del documento en resoluciones inferiores ni superiores
porque es el futuro inmediato.
1.17.4 Tipografa
1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso
de maysculas porque son ms difciles de leer.
2. Capitalizacin. Un ttulo es ms atractivo con todas las iniciales en Maysculas y el
resto en minsculas que todas en Maysculas.
3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada
en su equipo para poder ver el texto con ella a travs 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. Tamao de la fuente. Utiliza los estilos de prrafo para modificar el tamao de los
textos.
5. Variedad de fuentes. No conviene abusar del nmero de tipos de fuente distintas a
utilizar en un documento. Basta con una o dos (texto y titulares)
1.17.5 Grficos
1. Tamao 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 tamao del
archivo que la contiene.
2. Imgenes de fondo. Utiliza imgenes de fondo de colores adecuados que no oculten
el texto de la pgina. Tendrn una tonalidad parecida al color de fondo y de baja
calidad para que se descarguen rpidamente.
3. Imgenes decorativas. No abuses del uso de imgenes no significativas. Dosifica el
nmero de imgenes de una pgina para evitar las esperas durante su descarga.
4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en
una pgina. De esta forma al descargarse la pgina ya se reserva el espacio para
mostrarse una vez se complete la imagen.
5. Descarga progresiva. Configura tus imgenes de cierto peso para que realicen la
visualizacin progresiva conforme se vayan descargando.
6. Ahorro de imgenes. Trata de usar el mismo archivo de imagen tantas veces como
sea posible para acelerar la visualizacin.
7. Formato de imgenes. Usa GIF y PNG siempre que sea posible. Para las fotografas es
mejor el formato JPEG.

139
1.17.6 Accesibilidad
En este apartado se describen brevemente algunas de las condiciones que deberan ser
objetivos de diseo cuando se aborda la creacin 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 imgenes. Agilizar la navegacin con conexiones
lentas.
2. Uso del color. El color no es indispensable. Los textos y los grficos deben ser
comprensibles con independencia del color.
3. Hojas de estilo. Usa las marcas y hojas de estilo adecuadamente. Facilitarn la
personalizacin de temas para adaptarse al usuario.
4. Tablas. Utiliza las marcas adecuadas para crear las tablas en los documentos. De esta
forma se visualizarn correctamente en todos los navegadores.
5. Claridad del lenguaje. Utiliza el lenguaje de una forma clara y concisa.
6. Objetos insertados. Las pginas que contienen componentes avanzados deben ser
accesibles sin ellas: scripts, applets, etc.
7. Control de reproduccin. Proporciona control al usuario para detener movimientos,
parpadeos o actualizaciones automticas de una pgina.
8. Acceso directo. Utiliza interfaces que permitan una accesibilidad directa a los
contenidos..
9. Compatibilidad. Disea la web para que sea navegable desde cualquier plataforma,
sistema operativo o equipo.
10. Ayuda a la navegacin. Proporciona en todo momento informacin de ayuda
contextual al usuario para orientarlo: dnde est y dnde puede ir.
11. Sistema de bsqueda. Ofrece ndices o mecanismos de bsqueda para que el usuario
pueda encontrar rpidamente lo que busca.
12. Contenidos asequibles. El contenido de los documentos debe ser claro, simple y fcil
de entender.
1.17.7 Para saber ms

La legislacin espaola vigente establece que todos los sitios web institucionales y financiados
con presupuesto pblico deben cumplir unos requisitos mnimos de accesibilidad.
Los estndares de accesibilidad que deben cumplir los contenidos web educativos en Espaa
estn 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 informacin y de comercio
electrnico (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/
Pginas web ::: Derechos de autor

140
1.18 Derechos de autor

141
1.18 Derechos de autor

1.18.1 Introduccin
En la elaboracin de materiales educativos podemos partir de activos (textos, imgenes,
audios y vdeos) 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 estn sujetos
a la misma legislacin sobre derechos de autor que el resto de obras: libros, pinturas, msica,
etc. Esto significa que si decidimos incorporar recursos ajenos (lase imgenes, audios,
vdeos, 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
reutilizacin 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 apropiacin 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 educacin. Esta justificacin 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 organizacin 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 autora en los crditos.
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 combinacin 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 crditos.
Reconocimiento - Sin obra derivada: El material puede ser distribuido,

copiado y exhibido por terceros si se muestra en los crditos. 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
crditos. No se puede obtener ningn 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 crditos. No se puede
obtener ningn beneficio comercial.
Reconocimiento - No comercial - Compartir igual: El material puede ser
distribuido, copiado y exhibido por terceros si se muestra en los crditos.
No se puede obtener ningn beneficio comercial y las obras derivadas
tienen que estar bajo los mismos trminos de licencia que el trabajo
original.
Reconocimiento - Compartir igual: El material puede ser distribuido,
copiado y exhibido por terceros si se muestra en los crditos. Las obras
derivadas tienen que estar bajo los mismos trminos de licencia que el
trabajo original.
1.18.4 Aadir una licencia CC a una pgina HTML

Si ests interesado/a en situar una licencia CC (Creative Commons) en la portada o pgina
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 opcin
deseada. Por ejemplo: No.
4. En la pregunta Quiere permitir modificaciones de su obra? seala una respuesta.
Por ejemplo: Yes, as long as others share alike (S pero compartir igual)

143
5. De la combinacin de ambas respuestas surgir la liccencia antes descrita como:

Reconocimiento-No comercial-Compartir Igual. Clic en el botn Escoja una licencia.
6. Selecciona el modelo de icono que deseas incluir en tu pgina HTML:
7. Clic derecho sobre el cuadro que muestra el cdigo HTML y elige Seleccionar todo. A
continuacin 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 pgina para situar el cursor.
11. A continuacin selecciona Insertar > HTML
12. En el cuadro de dilogo Insertar HTML haz clic derecho y elige Pegar. Esta accin
pegar el cdigo propuesto para insertar el enlace a la licencia elegida. Clic en el
botn Insertar.
13. Guarda el archivo HTML mediante Archivo > Guardar. Visualizar el resultado pulsando
en el botn Navegar de Kompozer. Se abrir el navegador Firefox (si es el navegador
por defecto) mostrando esta pgina. Si haces clic sobre el icono de Creative Commons

144
o bien el enlace de texto que se acompaa se abrir la correspondiente pgina de

licencia.
2. Imagen
Imagen ::: Conceptos bsicos de imagen digital

146
2.1 Conceptos bsicos

de imagen digital

147
2.1 Conceptos bsicos de imagen digital

Antes de estudiar los procedimientos ms habituales de optimizacin y tratamiento de
imgenes es conveniente repasar algunas ideas clave relacionadas con la imagen digital.
2.1.1 El pxel
El pxel es la unidad mnima de visualizacin de una imagen digital. Si aplicamos el zoom
sobre ella observaremos que est formada por una parrilla de puntos o pxeles. Las cmaras
digitales y los escneres capturan las imgenes en forma de cuadrcula de pxeles.
2.1.2 Resolucin 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 (pxeles por pulgada) o en ingls dpi (dots per inch).
Cuantos ms pxeles contenga una imagen por pulgada lineal, mayor calidad tendr.
La resolucin de un monitor se refiere al nmero de pxeles por pulgada que es capaz de
mostrar. La resolucin de una pantalla de ordenador PC es de 72 ppp.
En una impresora se habla del nmero de puntos por pulgada que puede imprimir: 600, 1200,
etc.
Algunos escneres suelen producir imgenes con una resolucin por defecto de 200 ppp.
Las cmaras digitales prestan una calidad que se expresa en MegaPxels. As por ejemplo una
cmara de 8 MP es aquella capaz de tomar una fotografa con 8 millones de pxeles.
2.1.3 Profundidad de color

La profundidad de color se refiere al nmero de bits necesarios para codificar y guardar la
informacin de color de cada pxel en una imagen. Un bit es una posicin 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 ms amplia. Se utiliza 1-bit para imgenes 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, ..., 24bits = 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 pxel utilizando valores numricos.
Los modos de color ms utilizados son:
Modo monocromtico. Se corresponde con una profundidad de color de 1 bit. La

imagen est formada por pxeles blancos o pxeles 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 mximo de 256 colores (28)
Modo RGB. Cada color se forma por combinacin 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 combinacin 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 parmetros: 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 (Saturacin) 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 cdigo RGB como (255,0,0) y tambin
un cdigo HSB (0,100,100). En la mayora de programas de tratamiento de imgenes
se puede elegir un color introduciendo su cdigo RGB es la opcin ms frecuente- o
alternativamente su cdigo HSB. En ambos casos la imagen maneja una paleta de
colores de 24 bits.
Modo CMYK. Cada color se forma por combinacin de cuatro canales. Cada canal se
corresponde con un color primario de impresin: Cyan (Ciano), Magent (Magenta),
Yellow (Amarillo) y BlacK (Negro). Cada canal puede tener como valor entre 0 y 255.
Se trata de imgenes con una profundidad de color de 32 bits.

150
2.1.5 Formatos de imagen

Las imagnes digitales se pueden guardar en distintos formatos. Cada uno se corresponde con
una extensin especfica del archivo que lo contiene. Los ms 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 pxeles.
El formato BMP no sufre prdidas de calidad y por tanto resulta adecuado para
guardar imgenes que se desean manipular posteriormente.
Ventaja: Guarda gran cantidad de informacin de la imagen.
Inconveniente: El archivo tiene un tamao muy grande.
GIF (Graphics Interchange Format = Formato de Intercambio Grfico).
Ha sido diseado especficamente para comprimir imgenes digitales.
Reduce la paleta de colores a 256 colores como mximo (profundidad de color de 8
bits).
Admite gamas de menor nmero de colores y esto permite optimizar el tamao del
archivo que contiene la imagen.
Ventaja: Es un formato idneo para publicar dibujos en la web.
Inconveniente: No es recomendable para fotografas de cierta calidad ni originales ya
que el color real o verdadero utiliza una paleta de ms de 256 colores.
JPG-JPEG (Joint Photographic Experts Group = Grupo de Expertos Fotogrficos Unidos).
A diferencia del formato GIF, admite una paleta de hasta 16 millones de colores.
Es el formato ms comn junto con el GIF para publicar imgenes en la web.
La compresin JPEG puede suponer cierta prdida de calidad en la imagen. En la
mayora de los casos esta prdida se puede asumir porque permite reducir el tamao
del archivo y su visualizacin 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 compresin.
Las cmaras digitales suelen almacenar directamente las imgenes en formato JPEG
con mxima calidad y sin compresin.
Ventaja: Es ideal para publicar fotografas en la web siempre y cuando se configuren
adecuadamente dimensiones y compresin.
Inconveniente: Si se define un factor de compresin 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 imgenes 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 = Grfico portable para la red).
Es un formato de reciente difusin alternativo al GIF.
Tiene una tasa de compresin superior al formato GIF (+10%)
Admite la posibilidad de emplear un nmero de colores superior a los 256 que impone
el GIF.
Debido a su reciente aparicin slo es soportado en navegadores modernos como IE 4
o superior.
151

Nota:
Para visualizar la extensin 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 mens selecciona Herramientas > Opciones de carpeta
3. Pulsa en la pestaa Ver.
4. En la lista Configuracin avanzada localiza en la parte ms inferior de la lista el
elemento: Ocultar las extensiones de archivo para tipos de archivo
conocidos.
5. Asegrate 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 extensin 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 caractersticas diferenciales ms significativas de los tres
formatos de imagen recomendados para publicar una imagen en la web.
JPG
Nmero de colores: 24 bits
color o 8 bits B/N
Muy alto grado de
compresin.
Posible prdida de
informacin
Admite carga progresiva
No admite fondos
transparentes
No permite animacin
GIF
Hasta 256 colores
Formato de compresin
Sin prdida de informacin
salvo reduccin de colores
Admite carga progresiva.
Admite fondos transparentes
Permite animacin
PNG
Nmero de colores: 24 bits
color
Mayor compresin que el
formato GIF (+10%)
Sin prdida de informacin
Admite carga progresiva
Admite fondos transparentes
No permite animacin
2.1.6 Consejos para la optimizacin de imgenes

En este apartado se exponen algunos consejos sobre el tratamiento de imgenes para el
diseo web:
1. Al crear una pgina web interesa que los archivos que contienen las imgenes sean lo
menos pesados posibles para agilizar su descarga y visualizacin por Internet.
2. El tamao de un archivo grfico viene determinado por las dimensiones de la imagen,
su resolucin, el nmero de colores y el formato (JPG, GIF, PNG).
3. Crea y guarda imgenes en resolucin no superior a 72 ppp. Es la resolucin 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 disea para imprimir entonces debemos optar
por una resolucin entre 200-300 ppp.
4. En ocasiones puede interesar reducir el nmero de colores de la paleta porque ello
supone reducir el tamao del archivo.
5. Conviene utilizar un programa de edicin grfica para definir las dimensiones
concretas de la imagen antes de insertarla en la pgina web.

152
6. Lo ms conveniente es guardar los originales de las imgenes 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, resolucin y paletas adecuados para
publicarlas en la web.
7. Las imgenes GIF son ms adecuadas para dibujos, grficos y logotipos. Son aquellas
que se pueden representar fcilmente con colores slidos y una paleta con un nmero
reducido de colores.
8. Las imgenes JPEG son mejores para fotografas e imgenes con degradados, porque
admiten color de 24 bits, y porque gracias a su compresin ofrecen una imagen ms
brillante que ocupa menos espacio en el disco.
9. Es aconsejable NO insertar imgenes en una pgina 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 edicin grfica y luego
insertarla en la pgina.
Para reducir el peso de un archivo grfico se pueden modificar algunos de sus parmetros
utilizando un editor de imgenes como por ejemplo GIMP:
Formato del archivo grfico:

- Conversin de formatos.
Paleta de colores:
- Reducir la paleta de colores.
Tamao de la imagen (Anchura x Altura)
- Reducir el tamao de una imagen.
- Recortado de imgenes.
Imagen ::: Empezar con GIMP

153
2.2 Empezar con GIMP

154
2.2 Empezar con GIMP

2.2.1 Qu es GIMP?
GIMP es el acrnimo de GNU Image Manipulation Program y significa programa libre para la
manipulacin de imgenes. Es una aplicacin adecuada para la edicin y composicin de
imgenes as como para el retoque fotogrfico. Esta herramienta es gratuita y representa una
excelente opcin frente a otros programas comerciales como Adobe PhotoShop o Paint Shop
Pro.
2.2.2 Instalacin de GIMP

Windows
Para instalar GIMP sobre Windows puedes descargar y ejecutar el archivo instalador gimp2.4.4-i686-setup.exe.
En el sitio web oficial del proyecto GIMP podrs encontrar la versin ms reciente o que se
adapta a tu sistema: http://www.gimp.org/
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 grficos de la mayora de distribuciones de
Linux. Para situar un icono de acceso directo sobre el escritorio selecciona Aplicaciones >
Grficos > Editor de imgenes 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 instalacin.
2. Tras unos instantes se iniciar el programa.

3. Si deseas que no se muestre el Consejo del da desmarca la casilla Mostrar un
consejo la prxima vez que inicie El Gimp y pulsa en el botn Cerrar.

155
2.2.4 El entorno de edicin

1. Descarga y descomprime a una carpeta de tu disco duro el archivo pizarra.zip. En su
interior se encuentra el archivo grfico: pizarra.jpg.
2. Desde la ventana Gimp selecciona Archivo > Abrir. En el cuadro de dilogo 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 botn Abrir.
4. Al abrir una imagen con GIMP se muestran las siguientes ventanas independientes:

156
1. Caja de herramientas principal. Es el ncleo principal de GIMP. Contiene las

opciones de men: Archivo, Exts y Ayuda y una botonera de iconos para acceder a
las principales herramientas de edicin. Si cierras esta ventana se cerrarn el resto de
ventanas de la aplicacin.
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 funcin 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 slo 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 configuracin inicial de GIMP puede simplificarse cerrando la ventana Capas, Canales,
Rutas y Deshacer. Para recuperar la visualizacin de una ventana no principal selecciona
Archivo > Dilogos > Crear un empotrable nuevo >
Para restaurar estos paneles a la disposicin inicial selecciona Archivo > Preferencias >
Gestin de la ventana y pulsar en el botn 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 mostrarn los paneles por defecto.

157
2.2.5 Crear una nueva imagen

1. Elige Archivo > Nuevo.
2. Se muestra el cuadro de dilogo Crear una imagen nueva. Por defecto GIMP define
unas dimensiones de la nueva imagen de 420 x 300 pxeles. Se pueden modificar estos
valores o bien elegir unas dimensiones predefinidas en la lista desplegable Plantilla. A
continuacin pulsa en Aceptar.
3. En la ventana de la nueva imagen se podrn 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 dilogo Guardar imagen teclea un nombre de archivo en la casilla

Nombre. Es conveniente que este nombre contenga todos los caracteres en
minsculas, sin espacios en blanco ni caracteres especiales: , signos de puntuacin,
etc. Por defecto GIMP en Windows suele guardar la imagen en la carpeta Mis
imgenes 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 botn + situado al
lado de la etiqueta Buscar otras carpetas. Se expanden las opciones de este cuadro
de dilogo facilitando la eleccin de otra carpeta donde guardarlo. Incluso pulsando
en Crear carpeta se puede crear una nueva dentro de la carpeta actual. Tambin es
posible hacer clic sobre la unidad C:\ del disco duro para navegar y localizar la
carpeta desea o bien pulsar en el botn Mis imgenes para guardar la imagen en esta
carpeta del usuario.

160
4. Una vez elegida la carpeta destino, clic en el botn - 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 botn + situado al lado de la etiqueta Seleccione el tipo de archivo

(Por extensin). El formato de archivo GIMP XCF image (xcf) es un formato
especfico de GIMP. Como veremos ms adelante tambin es posible guardar la
imagen en formatos GIF, PNG o JPG.
6. Clic en el botn - Seleccione el tipo de archivo para contraer el panel de eleccin

de formato. Observa que ahora el formato elegido aparece a continuacin de esta
etiqueta.
7. Para terminar pulsa en el botn Guardar.
Imagen ::: Optimizacin de imgenes

161
2.3 Optimizacin
de imgenes

162
2.3 Optimizacin de imgenes

2.3.1 Conversin de formatos
El propsito de esta actividad es familiarizarse con el uso de GIMP para convertir una imagen
de un formato a otro. Como sabemos los formatos ms ligeros y adecuados a la web son: GIF,
PNG y JPEG. En este caso veremos cmo 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 continuacin. Se trata de una imagen cuyos datos son: 300x225 pxeles de
tamao, profundidad de color 24 bits (16,7 millones de colores), resolucin 72 ppp,
formato BMP y tamao 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 dilogo Abrir
imagen. Navega para situarte en la carpeta destino. En la lista de archivos situada en
el centro desplzate 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 botn Abrir.

163
2.3.2 Guardar en formato GIF

1. Clic en Archivo > Guardar como Se muestra el cuadro de dilogo 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 imgenes.
2. Clic en el botn + situado junto a la etiqueta Seleccione el tipo de archivo (Por

extensin).
3. En la lista de tipos de archivos elige Imagen GIF-gif. Observa que al seleccionar este
tipo, el nombre del archivo adquiere la extensin .gif. Pulsa en el botn Guardar.
4. Se muestra el cuadro de dilogo Exportar archivo. Asegrate de que est

seleccionada la opcin por defecto: Convertir a indexada usando ajustes
predefinidos. Esto significa que se reducir la paleta de colores de la imagen original
hasta un mximo de 256 colores. Otra opcin es Convertir a tonos de gris. Clic en el
botn Exportar.

164
5. En el cuadro de dilogo Guardar como GIF puedes definir:

Entrelazar. Si activas la opcin 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 rpidamente su
contenido y conforme se va descargando va ganando en calidad.
Comentario GIF. En este comentario puedes aadir informacin adicional al
archivo de imagen: autor, fecha de creacin, etc.
6. Clic en el botn 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.

extensin).
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 extensin .jpg. Pulsa en el
botn Guardar.
5. En el cuadro de dilogo Guardar como JPEG define la calidad de la imagen. Si activas

la casilla Mostrar vista previa en la ventana de la imagen observars 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 tamao del archivo que

166
contiene esta imagen. Observa que a medida que arrastras el deslizador hacia la
izquierda para disminuir la calidad, el tamao del archivo tambin 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.

extensin).
4. En la lista de tipos de archivos elige Imagen PNG - png. Al seleccionar este tipo, el
nombre del archivo adquiere la extensin .png. Pulsa en el botn Guardar.

167
5. En el cuadro de dilogo Guardar como PNG puedes definir algunos de los siguientes
parmetros:
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 rpidamente a su contenido y conforme se va descargando va
ganando calidad.
Nivel de compresin: arrastra el deslizador al extremo derecho para definir
una compresin de valor 9.
168

6. Para terminar pulsa en el botn Guardar.

7. Abre el explorador de Windows y encontrars los archivos GIF, JPG y PNG creados.
Cada uno ha sido creado con la configuracin que se recoge en las figuras anteriores.
Todas ellas tienen las dimensiones de la imagen original: 300x225 pixeles y una
resolucin similar: 72 ppp. Observa que las diferencias de calidad son mnimas
mientras que el tamao del archivo se reduce considerablemente en los formatos GIF
y JPG. Aunque el formato PNG comprime ms 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, tamao, tipo y fecha de
modificacin.

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 prctica reduciremos la gama de colores que utiliza una
imagen aplicando distintos tipos de paletas para comprobar a continuacin 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 prctica descrita en el apartado anterior.
2. En la barra de ttulo de la ventana de imagen se muestra el nombre del archivo

paint.jpg y entre parntesis 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 dilogo Conversin de color indexado marca la opcin Generar

paleta ptima dejando en el contador el nmero 256 colores como mximo.
5. Clic en Aceptar.
170

6. Observa que ahora en la barra de ttulo 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

171
2.4 Dimensiones
de una imagen

172
2.4 Dimensiones de una imagen

2.4.1 Reducir el tamao de una imagen
Uno de los principales factores que determinan el peso de un archivo grfico es el tamao de
la imagen que contiene, es decir, el nmero de pxeles en anchura y altura. Se recomienda
utilizar un programa como GIMP para definir exactamente el tamao final con que se utilizar
cada imagen.
Se puede insertar una imagen en una pgina HTML y luego reducir su tamao de visualizacin.
Sin embargo esta operacin no reduce el peso final resultante del archivo grfico. Es
aconsejable reducir las dimensiones de la imagen previamente con GIMP u otro editor de
imgenes, crear un nuevo archivo grfico ms ligero y luego integrarlo en la pgina.
1. Extrae a una carpeta de tu disco duro el archivo tranvia.jpg contenido en el ZIP que
se adjunta a continuacin: tranvia.zip. Sus caractersticas tcnicas son: 800x600
pxeles de tamao, profundidad de color 24 bits (16,7 millones de colores), resolucin
72 ppp, formato JPG y tamao del archivo 516 Kb.
2.
imagen. Navega para situarte en la carpeta que contiene ese archivo. En la lista de
archivos situada en el centro desplzate 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 botn Abrir.

173
5. En la ventana de imagen elige Imagen > Escalar la imagen
6. Se muestra el cuadro de dilogo Escalar la imagen.
7. En Tamao de la imagen se muestra la Anchura y Altura en pxeles 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, automticamente 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 podrs definir valores independientes.

174
8. En el cuadro de dilogo Escalar la imagen despliega la lista de unidades de tamao y

selecciona porcentaje. De esta forma se definir el nuevo tamao de la imagen
utilizando un porcentaje de reduccin a partir del tamao original. En la casilla
Anchura introduce el valor 50%. Observa que si el bloqueo de proporciones est
activado al pulsar enter automticamente se completa la Altura con idntico
porcentaje.
9. En la lista de Interpolacin elige la opcin Cbica para definir el mtodo que
utilizar GIMP para reducir la imagen.
10. Clic en el botn Escala.
11. Se puede deshacer la operacin de escala seleccionando en la barra de mens de la

ventana de imagen: Edicin > Deshacer.
12. A continuacin elige Archivo > Guardar como
13. En el cuadro de dilogo Guardar imagen define como nombre del nuevo archivo, por
ejemplo, tranvia50.jpg. Es importante que especifiques la extensin (.jpg) y tambin
que definas un nombre distinto para evitar sobrescribir el archivo original. Asegrate
de recordar en qu carpeta destino se guardar.
14. Clic en el botn Guardar.

15. En la ventana Guardar como JPEG, sita el deslizador Calidad en 100% para evitar
prdidas de calidad y analizar comparativamente el peso del archivo final resultante
atendiendo solamente a la reduccin de tamao.
175

17. Cierra esta imagen y repite los pasos 3-16 crear otras dos imgenes que sean
respectivamente el 30% y 10% de la imagen original partiendo siempre del archivo
inicial: tranvia.jpg
18. Abre la carpeta destino y encontrars en ella los archivos JPG: tranvia.jpg,
tranvia50.jpg, tranvia30.jpg y tranvia10.jpg que has creado. Si el tamao de la
imagen es menor, el archivo que la contiene tendr menor peso. Como puedes
comprobar en el ejemplo no es necesario utilizar imgenes de gran tamao en las
pginas web. Eso no slo redundar en una mayor calidad esttica sino que har ms
rpida la navegacin facilitando la descarga de archivos grficos ms ligeros.
100%
50 %
30 %
10 %
800x600 px.
400x300 px.
240x180 px.
80x60 px.
517 kb
146 Kb
80 Kb
40 Kb

176
2.4.2 Modificar el tamao del lienzo

En ocasiones es necesario disponer de ms lienzo en blanco dentro de una imagen para
aadirle ms elementos.
1. Extrae a una carpeta el archivo cisne.jpg contenido en el ZIP que se adjunta a
continuacin: cisne.zip. Sus caractersticas tcnicas son: 330x240 pxeles de tamao,
profundidad de color 24 bits (16,7 millones de colores), resolucin 72 ppp, formato
JPG y tamao del archivo 77 Kb.
2. Haz doble clic sobre el acceso directo de GIMP situado en el escritorio:
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 botn Abrir. En esta prctica vamos a ejemplificar cmo redimensionar
el tamao del lienzo de una imagen para aadirle un texto en su base.
5. En la ventana de imagen elige Imagen > Tamao del lienzo

177
6. En el cuadro de dilogo Establecer el tamao del lienzo de la imagen se muestra la

Anchura y Altura actuales del lienzo. En este caso 330x240 pxeles. Clic en el icono
de bloqueo de proporcionalidad para poder aumentar la altura sin que ello implique
incrementar la anchura. Tras su pulsacin 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 botn Centrar
la imagen se centrara horizontal y verticalmente sobre el lienzo. Otra posibilidad es
introducir manualmente en las casillas X e Y la posicin en pxeles en que se situar
la esquina superior izquierda de la imagen en relacin con el nuevo lienzo. En el caso
que nos ocupa no utilizaremos esta opcin ni el botn de centrado porque GIMP crea
automticamente el espacio que necesitamos en la base de la imagen para aadir
luego el texto.
8. Para terminar pulsa en el botn Redimensionar.

178
9. Desde la barra de mens de la ventana de imagen elige Imagen > Aplanar imagen.
Con esta operacin 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 botn de la barra
de tareas con el ttulo Gimp. En el cuadro de herramientas de GIMP selecciona la
herramienta Texto y a continuacin haz clic sobre la banda blanca inferior.
11. Se muestra una ventana para introducir el texto. Debajo de la barra de herramientas
encontrars un panel donde es posible definir la tipografa del texto: fuente, tamao,
color, estilo, etc.

179
12. En la pequea ventana del Editor de textos de GIMP escribe, por ejemplo, EL CISNE
BLANCO y luego pulsa en el botn Cerrar.
13. Para situar el cuadro de texto ms centrado, vete al cuadro de herramientas y

selecciona la herramienta Mover capas y selecciones
14. Acerca el puntero del ratn 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 arrstralo para situarlo ms

centrado.
15. Para guardar la imagen elige Archivo > Guardar como En el cuadro de dilogo
Guardar imagen define un nombre distinto para la nueva imagen. De esta forma no se
sobrescribir la original. Pulsa en el botn Guardar.
16. Se muestra el cuadro de ttulo Exportar archivo. Pulsa en el botn Exportar.
17. En la ventana siguiente: Guardar como JPEG define una calidad del 100% y pulsa en
el botn Guardar.
Imagen ::: Aadir textos y lneas a una imagen

181
2.5 Aadir textos y

lneas a una imagen

182
2.5 Aadir textos y lneas a una imagen

Una de las operaciones ms interesantes en educacin es aadir textos explicativos y lneas a
una imagen.
1. Extrae a una carpeta de tu disco duro el archivo flor.gif contenido en el ZIP que se
adjunta a continuacin.
2.
hasta localizar el archivo flor.gif .Clic sobre este archivo y pulsa en el botn Abrir.
4. Desde la ventana principal de GIMP (Cuadro de herramientas), elige Archivo >
Dilogo > Opciones de herramienta. De esta forma se mostrarn las opciones que se
pueden manejar cuando se selecciona una herramienta.
5. En el cuadro de herramientas elige la herramienta Lpiz. Con l vamos a dibujar las
lneas horizontales que sealarn partes del dibujo.
6. En el panel Opciones de herramienta pulsa sobre el botn Brochas para elegir el tipo
Circle (01).
7. Haz clic sobre la imagen en el lugar donde desees situar el extremo izquierdo de la
lnea. Por ejemplo en un spalo de la flor. A continuacin pulsa la tecla de

183
Maysculas (flecha hacia arriba del teclado) y sin soltarla, arrastra el ratn y haz clic
en la posicin donde se situar el extremo derecho de la lnea.
8. Repite el paso 7 para crear todas las lneas 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 botn Tipografa para seleccionar el tipo de
fuente. Por ejemplo: Arial. Tambin puedes definir el tamao del texto. En este caso
hemos seleccionado 18 pxeles. 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 botn Cerrar.
12. En el cuadro de herramientas selecciona Mover capas y selecciones.
13. Aproxima el puntero del ratn hasta el texto recientemente creado y cuando el
puntero del ratn 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 ttulos tal y como aparecen en la
siguiente imagen.

185
16. Cuando se aade un nuevo texto a la imagen, GIMP crea automticamente una capa
por cada ttulo. Para fusionar todas las capas en una, en la ventana de imagen, elige
Imagen > Aplanar imagen.
Guardar imagen define un nombre distinto para la nueva imagen. De esta forma no se
sobrescribir la original. Pulsa en el botn Guardar.
18. En el cuadro de dilogo Guardar como GIF pulsa el botn Aceptar.
Imagen ::: Copiar y pegar con GIMP

186
2.6 Copiar y pegar

con GIMP

187
2.6 Seleccionar, cortar, copiar y pegar con GIMP

2.6.1 Composicin de imgenes
Las herramientas para seleccionar, copiar y pegar facilitan el montaje de imgenes. En esta
prctica se ejemplifican las posibilidades de las distintas herramientas de seleccin. 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.
imagen. Localiza el archivo paisaje.jpg. Clic sobre este archivo y pulsa en el botn
Abrir. Repite este paso para abrir el archivo vaca.gif. Observa que cada imagen se
sita 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 elpticas 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 seleccin rectangular y circular se han incluido con carcter demostrativo ya
que en este ejemplo no sera necesario usarlas.
8. Elige la herramienta Varita mgica en el cuadro de herramientas. Con ella podrs

elegir regiones continuas del dibujo.
9. En la ventana principal de GIMP elige Archivo > Dilogos > Opciones de herramienta.
En este panel de opciones de la varita mgica 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 continuacin selecciona Editar > Limpiar. No olvides realizar esta
operacin tambin 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 podrs seleccionar la regin 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 accin 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 ms adecuado del paisaje. A continuacin haz clic en cualquier lugar fuera de
esta seleccin para fijar su posicin.
Guardar imagen define un nombre distinto para la nueva imagen. Ejemplo:
montaje.jpg De esta forma no se sobrescribir la original. Pulsa en el botn Guardar.
el botn Aceptar.
2.6.2 Recortado de imgenes

En este apartado se plantea obtener una nueva imagen a partir de la seleccin y recortado de
un rea concreta en una imagen original ms grande.
1. Extrae el archivo cadenas.jpg contenido en el ZIP que se adjunta a continuacin:
cadenas.zip
2. Abre GIMP.
3. Elige Archivo > Abrir. Se abre el cuadro de dilogo Abrir imagen. Localiza el archivo
cadenas.jpg. Clic sobre este archivo y pulsa en el botn Abrir.
4. En el cuadro de herramientas elige la herramienta Seleccionar Regiones
Rectangulares.
5. Sobre la ventana de imagen, pulsa y arrastra sobre la fotografa 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.
Guardar imagen define un nombre distinto para la nueva imagen. Ejemplo:
banner.jpg De esta forma no se sobrescribir la original. Pulsa en el botn Guardar.
el botn Aceptar.
Imagen ::: Aplicar efectos especiales a una imagen

192
2.7 Aadir efectos

especiales a una imagen
con GIMP

193
2.7 Aplicar efectos especiales a una imagen

2.7.1 Filtros
El trmino Filtro proviene de la fotografa tradicional y aluda a una serie de cristales que
se situaban delante del objetivo de la cmara para conseguir efectos especiales. Los filtros
que proporciona GIMP permiten aplicar a una imagen original un sinfn de efectos de retoque
y modificaciones. En esta prctica se explica cmo 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.
imagen. Localiza el archivo manzanas.jpg. Clic sobre este archivo y pulsa en el botn
Abrir.
4. Para aplicar un tipo de filtro, selecciona la opcin de men Filtro > Elige por
ejemplo Desenfoque [Blur] > Desenfoque de movimiento.
5. A continuacin se muestra un cuadro de dilogo donde es posible configurar distintos

parmetros del filtro antes de aplicarlo. El tipo de valores depender de la clase de
filtro elegido. En la mayora de los casos si se activa la casilla Vista previa se
dispondr de una pequea ventana que permitir contemplar el resultado final antes
de aplicarlo.
194

6. Una vez realizados los convenientes ajustes en los distintos parmetros del efecto
pulsa en el botn Aceptar para aplicar los cambios. Para deshacer la aplicacin de un
filtro selecciona Editar > Deshacer o bien la combinacin de teclas: <Ctrl>+<Z>.
En ocasiones ser necesario pulsar reiteradamente esta combinacin para restaurar la
imagen original.
7. Siguiente los pasos 4-6 explora las distintas posibilidades de efectos que puedes
conseguir con GIMP. En las imgenes 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 > Pgina doblada
Artsticos > 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 dilogo 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 botn Guardar.
10. Se muestra el panel Guardar como JPEG. Ajusta la calidad en un valor 80-100 % y
confirma pulsando en el botn Aceptar.
2.8.2 Textos con efectos especiales

GIMP proporciona herramientas sencillas para el diseo de un banner de texto. ste se puede
utilizar como encabezado de una pgina web.
1. Desde la ventana principal de GIMP selecciona Archivo > Nuevo.
2. En el cuadro de dilogo Crear una imagen nueva introduce las dimensiones, por
ejemplo, 468 y 60 en las casillas Anchura y Altura respectivamente.

4. Para visualizar el panel de opciones de una herramienta, en la ventana principal,
selecciona Archivo > Dilogos > 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 tamao 72 puntos.
7. Clic sobre la casilla Color de las opciones de herramienta. En el cuadro de dilogo

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 Notacin
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 = RojoVerde-Azul).
8. Una vez elegido el color pulsa en el botn 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 botn Cerrar.
10. En el cuadro de herramientas de GIMP elige la herramienta Mover capas y

selecciones.
11. Sita el puntero del ratn 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 > Bovinacin.
13. En el cuadro de dilogo de Opciones admite los parmetros por defecto y pulsa en el
botn Aceptar.
14. Al cabo de unos instantes se ha creado un atractivo rtulo.
15. Para deshacer la aplicacin 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
continuacin se proponen algunos.
Bsico II
Bisel degradado
Bovinacin
Bruido
Calor resplandeciente
Contorno 3D
Desmenuzar
Nen
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 extensin del archivo (.gif) eliges este
formato GIMP te mostrar un cuadro de dilogo Exportar archivo. Acepta las
opciones por defecto pulsando directamente en el botn Exportar.
19. A continuacin se mostrar un cuadro de dilogo Guardar como GIF. Pulsa en el

botn Aceptar.

199
Imagen ::: Gifs de fondo transparente

200
2.8 GIFs de fondo

transparente

201
2.8 Gifs de fondo transparente

Un GIF de fondo transparente se integra mejor en una pgina 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.
imagen. En la lista de archivos situada en el centro desplzate con la barra de
desplazamiento vertical hasta localizar el archivo pizarra.jpg. Clic sobre este archivo
y pulsa en el botn Abrir.
4. Para activar la propiedad de fondo transparente es necesario seleccionar la opcin:
Capa > Transparencia > Aadir canal alfa en la ventana de la imagen.
5. En el cuadro de herramientas de GIMP selecciona la opcin de men: Archivo >

Dilogos > Opciones de herramienta.
6. A continuacin selecciona la Varita Mgica 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 seleccin de 50. De esta forma se incluirn en la seleccin todos aquellos
puntos prximos que tengan un color similar o prximo al color donde se pulse con la
varita.

202
8. Con la varita mgica elegida, haz clic sobre el fondo en blanco de la imagen. Observa
que se selecciona esta rea.
9. A continuacin 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 dilogo 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 aadir la extensin: .gif. Recuerda que las
imgenes 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 botn Aceptar.
Imagen ::: Tratamiento de imgenes por lotes

203
2.9 Tratamiento de
imgenes por lotes

204
2.9 Tratamiento de imgenes por lotes

2.9.1 Introduccin
A menudo es necesario optimizar una coleccin de fotografas extradas de la cmara digital
con intencin de ajustar sus dimensiones, resolucin, 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 nmero elevado de fotos es necesario
realizar un procesamiento por lotes que realice la conversin de forma automtica y rpida.
GIMP dispone de un lenguaje de scripts donde es posible automatizar estas tareas. Sin
embargo el diseo y manejo de scripts no resulta intuitivo ni fcil.
En su lugar se propone utilizar el plugin DBP (David's Batch Processor) para GIMP. Este
complemento permite ejecutar de forma automtica operaciones en una lista de archivos de
imagen, como por ejemplo, el redimensionamiento. DBP proporciona un entorno grfico para
crear una lista de imgenes con intencin de definir y aplicar operaciones como la correccin
del color, redimensionamiento, recorte, suavizado, cambio de nombre o guardar en otros
formatos. DBP slo procesa imgenes en modo color RGB mostrando un error cuando se trata
de procesar imgenes 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 Instalacin del plugin DBP de GIMP en Windows

El plugin DBP no se incluye en la instalacin 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 obtendrs el archivo: dbp.exe. Otra opcin es visitar la web de su
fabricante y descargar, si existe, una versin ms reciente:
http://members.ozemail.com.au/~hodsond/dbp.html
2. Abre GIMP y selecciona Archivo > Preferencias.

205
3. Clic sobre la entrada ms inferior Carpetas y pulsa en la entrada Plugins o

Complementos. En el panel derecho podrs ver la ruta de la carpeta donde se
instalan los plugins o complementos que utiliza GIMP. En el caso de la imagen sera 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 versin 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 versin portable ms 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 Instalacin del plugin DBP de GIMP en Ubuntu

1. Descarga y descomprime en la carpeta personal el zip: dbpSrc-1-1-8.tar. Como
resultado obtendrs la carpeta de cdigo fuente: dbp-1.1.8. Otra opcin es visitar la
web de su fabricante y descargar, si existe, una versin ms reciente:
http://members.ozemail.com.au/~hodsond/dbp.html
2. Para compilar este cdigo fuente es necesario disponer del compilador GNU de C++.
Desde el escritorio selecciona Sistema > Administracin > Gestor de paquetes
Synaptic. Pulsa en el botn Buscar, introduce el trmino g++ y pulsa en Buscar. Si no
est activada, marca la casilla izquierda correspondiente al paquete g++ y pulsa en el
botn Aplicar. Al cabo de unos segundos ya dispondremos del compilador instalado.
Cierra el gestor de paquetes Synaptic.

206
3. A continuacin desde el escritorio selecciona Aplicaciones > Accesorios > Terminal.

4. Teclea cd dbp-1.1.8 para situarte en la carpeta que contiene el cdigo fuente
descargado del plugin.
5. Introduce: sudo apt-get install libgimp2.0-dev para instalar desde internet el cdigo
de desarrollo de la aplicacin GIMP 2 necesario para la compilacin. Transcurridos
unos segundos se habr completado la instalacin de estas libreras.
6. Teclea make y si la compilacin ha tenido xito make install para finalizar la
instalacin.
7. Cierra la ventana del terminal.
2.9.4 Conversin por lotes con GIMP

1. Extrae a la carpeta misfotos el contenido del archivo fotos.zip. Como resultado de
esta operacin tendrs en esta carpeta varios archivos con imgenes de Asturias.
Todas ellas tienen unas dimensiones de 800x533 pxeles. Estos archivos grficos
pueden ser el resultado del volcado de las fotografas realizadas con una cmara
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
instalacin con xito del plugin DBP.
3. Se muestra el cuadro de dilogo David's Batch Processor (Procesador por Lotes de

David).

207
Paso 1: Seleccin de archivos de entrada

4. En la pestaa Input (Entrada) pulsa en el botn Add Files (Aadir Archivos).
5. En el cuadro de dilogo Add Image Files (Aadir 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 accin seleccionar el conjunto de imgenes a aadir. Clic en el botn Abrir.
6. En la pestaa Input de David's Batch Processor se habrn aadido las imgenes. Para
eliminar alguna entrada basta con seleccionarla y pulsar en el botn Remove files
(Eliminar archivos). Para eliminar la lista completa pulsa en el botn Clear List
(Borrar lista).

208
Paso 2: Definir opciones de redimensionamiento.

7. Clic en la pestaa Resize (Redimensionar). Activa la casilla Enable (Permitir) y marca
una de las dos opciones:
Relative (Relativa): en este caso se propone utilizar esta opcin. Consiste en
realizar una redimensionamiento proporcional (tanto por uno) a las dimensiones
actuales de la imagen. Marca la opcin Keep Aspect (Mantener radio de aspecto)
para asegurar que la foto conserve la relacin 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 imgenes

8. Clic en la pestaa Rename (Renombrar) para definir el nombre que tendrn los
nuevos archivos con las imgenes.

210
9. Este procesador, por defecto, guarda las imgenes resultado de la conversin en la

misma carpeta que las imgenes originales. Esto se indica con la expresin "same as
source" (Mismo que fuente) que aparece sobre el botn Select Dir. Sin embargo si no
definimos un nombre distinto para las imgenes destino nunca sobreescribir las
originales. Simplemente no las crear.
10. Si deseas elegir otra carpeta distinta como destino de las nuevas imgenes entonces
pulsa el botn Select Dir (Elegir carpeta) y navega para seleccionarla. Si haces esto
no ser necesario modificar el nombre de las nuevas imgenes porque lo copiar de
las respectivas originales.
11. Si vas a crear las imgenes en la misma carpeta, como es el caso, vamos a aadir un
prefijo al nombre de las nuevas imgenes. Tambin se podra aadir un sufijo. Para
ello introduce, por ejemplo, "tmb_" en el cuadro de texto Add Prefix: (Aadir
Prefijo). Esto aadir este prefijo al nombre de la imagen original para asignrselo a
la imagen final.
Paso 4. Definir el formato de las nuevas imgenes.
12. Clic en la pestaa 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 fotografas
provienen de una cmara 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 conversin definida sobre una imagen pulsa en
el botn Test (Probar).
16. Para efectuar el procesamiento pulsa en el botn Start (Comenzar).
17. Transcurridos unos segundos observaremos que la carpeta destino se han creado
nuevas imgenes con las propiedades definidas.
Imagen ::: Galera de fotos

211
2.10 Galera de fotos

212
Una de las tareas ms frecuentes en un centro educativo es la publicacin en formato HTML

de las fotografas tomadas con la cmara digital en un evento o fiesta escolar
2.10.1 Porta Album Creator

Porta Album Creator es una aplicacin gratuita y portable que permite de una forma rpida y
sencilla crear una galera de imgenes para publicar en internet.
Paso 1. Instalacin 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 versin portable. El programa se inicia al hacer
doble clic sobre el archivo ejecutable: Porta.exe
Otra opcin es visitar la pgina oficial de este producto para descargar e instalar la
versin ms 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 > Aadir y quitar.
2. En el panel Aadir y quitar aplicaciones introduce wine en la casilla Buscar. En el
catlogo aplicaciones marca la opcin Wine Windows Emulator y a continuacin
pulsa en el botn Aplicar cambios. Sigue los pasos sugeridos para terminar la
instalacin.
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 continuacin selecciona la opcin Abrir
con Wine. Se iniciar el emulador Wine y ste cargar el ejecutable indicado.
Paso 2. Creacin de la galera de imgenes
1. Descarga y descomprime en tu disco duro el archivo gallery.zip
2. Abre el programa Porta.
3. Se muestra el cuadro de dilogo Buscar carpeta. En este cuadro abre Mi PC > Disco
duro local C para seleccionar la carpeta gallery. Clic en el botn Aceptar.

213
4. En el cuadro de texto Title (Ttulo) introduce el ttulo de la galera. Por ejemplo:

Paisajes asturianos. En Footer (Pie) teclea el texto que aparecer en el pie de la
pgina. Ejemplo: "2008 CP Colegio".
5. El programa Porta crear por defecto la galera en la carpeta album como una
subcarpeta de la que contiene las imgenes originales. Si deseas modificar el destino
de esta carpeta pulsa en el enlace change (cambiar). No obstante conviene conservar
esta opcin por defecto.
6. Puedes definir el texto descriptivo de cada imagen pulsando en el botn Edit Album.
Esto mostrar un cuadro de dilogo donde se podr elegir cada fotografa 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 ratn
sobre la imagen. Este paso es opcional. Clic en el botn Close (Cerrar).

214
7. De regreso al panel principal de Porta pulsa en el botn Options (Opciones).
8. En el panel Options puedes configurar distintos parmetros de la galera final. Los

ms importantes son:
Language (Idioma). Selecciona el idioma Spanish (Espaol).

Use SimpleViewer as primary album viever. Usar SimpleViewer como album
principal. Es importante marcar esta opcin para que funcione
adecuadamente. Si pulsas en el botn Options podrs configurar distintas
opciones de color.
9. Para terminar pulsa en el botn Ok.

215
10. Para iniciar la creacin de la galera pulsa en el botn Start (Inicio) en el panel
principal de Porta.
11. Transcurridos unos segundos se habr creado la galera. Desde este panel pulsa en el
botn Show Album (Mostrar Album).

216
12. Para publicar la galera de imgenes es necesario subir va FTP a una carpeta del
servidor todos los archivos contenidos en la carpeta album. El acceso a la galera se
realizar por el archivo index.html y ser necesario disponer del plugin de Flash para
su correcta visualizacin.

217
2.10.2 Autoviewer
1. Descarga y descomprime a la carpeta autoviewer el contenido del archivo
autoviewer.zip. Esta solucin es ofrecida de forma gratuita en la direccin:
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 encontrars las imgenes originales del ejercicio

anterior.
4. Para configurar la galera 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 ttulo de la galera 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 parmetros:
filename. Es el nombre del archivo que contiene la imagen.
caption. Es el texto descriptivo que acompaar a la imagen en la galera.
width y height, son las dimensiones de la imagen.
7. Si deseas aadir ms imgenes debers incorporar esta etiqueta <image> </image>
al final del documento definiendo sus parmetros.
8. Para guardar los cambios selecciona Archivo > Guardar como . Conserva el nombre,
ubicacin y tipo de archivo pero cercirate de que la codificacin del documento es
UTF-8. Clic en el botn Guardar.
9. Para comprobar el funcionamiento de la galera de fotos haz doble clic sobre el
archivo index.html contenido dentro de la carpeta autoviewer.
10. Se mostrar la galera dentro del navegador web por defecto.

218
2.10.3 Galera de imgenes con Postcard Viewer

1. Descarga y descomprime a la carpeta postcardviewer el contenido del archivo
postcardviewer.zip. Esta solucin es ofrecida de forma gratuita en la direccin:
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 encontrars las imgenes originales del ejercicio

anterior.
4. Para configurar la galera 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 aadir ms imgenes debers 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,
ubicacin y tipo de archivo pero cercirate de que la codificacin del documento es
UTF-8. Clic en el botn Guardar.
8. Para comprobar el funcionamiento de la galera de fotos haz doble clic sobre el
archivo index.html contenido dentro de la carpeta postcardviewer.

9. Se mostrar la galera dentro del navegador web por defecto.
219
Imagen ::: Captura de pantalla con GIMP

220
2.11 Capturas de
pantalla con GIMP
Imagen ::: Captura de pantalla con GIMP

221
2.11 Captura de pantalla con GIMP

Se pueden crear imgenes nuevas a partir de capturas de pantalla del ordenador. Estas
imgenes se suelen utilizar para ilustrar manuales de uso de programas, tal y como se ha
realizado en la elaboracin de este tutorial.
1. Sitate 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 dilogo 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.
Despus de Segundos de espera. La captura se producir al cabo de los
segundos indicados.
5. Selecciona la opcin Capturar una sola ventana y a continuacin pulsa en el botn
Capturar o Snap.
6. Se muestra el cuadro de dilogo Select Window. Haz clic y arrastra el smbolo 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 imgenes

222
2.12 Mapas de imgenes

223
2.12 Mapas de imgenes

2.12.1 Qu es un mapa de imagen?
Un mapa de imagen es una imagen que contiene una o ms reas invisibles llamadas zonas
activas. Cada una est asociada a un hipervnculo. Normalmente la imagen ofrece al usuario
pistas visuales sobre la informacin que est disponible al hacer clic en cada parte de la
imagen.
Se propone utilizar GIMP para crear un mapa de imgenes que luego copiaremos y pegaremos
en una pgina 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 operacin encontrars 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 accin iniciar la extensin Imagen Map de GIMP. Sobre esta imagen vamos a
crear un mapa de imgenes que nos va a permitir definir distintas reas sensibles que
enlazan a distintas pginas 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 Educacin y Ciencia: http://www.mec.es/

CNICE: http://www.cnice.mec.es/
Nios/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 direccin (http://www.mec.es/) y luego elige Edicin >

Copiar.
7. Regresa a Image Map. En la barra de herramientas de la columna izquierda activa la
opcin Definir rea rectngular (rea rectangular).
8. Pulsa, mantn y arrastra para definir un rea rectangular sobre el rectngulo que
forma el logo del Ministerio de Educacin y Ciencia.
9. Si necesitas ajustar con ms detalle este rectngulo selecciona la

herramienta Flecha en la barra de herramientas (est situada sobre la
herramienta Rectngulo). Una vez activada esta herramienta puedes
Aumentar/disminuir el tamao del rectngulo con slo pulsar y
arrastrar por el selector (cuadrado del borde) que presenta esta
rea en la esquina inferior derecha.
Mover el rea mediante la opcin de pulsar y arrastrar. Tambin se
puede mover ms finamente utilizando las teclas de flechas.
Si deseas eliminar el rea, selecciona esta rea y luego pulsa la
tecla Supr.
10. Asegrate de que esta rea sigue seleccionada haciendo clic sobre ella.
Para acceder a la edicin de las propiedades de esta rea haz doble clic
sobre ella o bien una vez seleccionada pulsa en el botn Editar rea
seleccionada que aparece en la barra de herramientas lateral
izquierda.

225
11. En el cuadro Configuracin de rea n 1 (Inspector de rea) en la pestaa Enlace

se pueden definir todos los parmetros de esa zona. En este caso vamos a definir los
ms importantes:
Texto Alternativo. Es el texto que se muestra cuando se sita el puntero sobre
esta rea. Ejemplo: Ministerio de Educacin y Ciencia.
URL. Es el enlace a la pgina 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 direccin absoluta
NO marcamos la opcin 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 seccin de Nios/as del
CNICE: http://www.cnice.mec.es/ninos/
15. Regresa a Image Map.
16. En la barra de herramientas selecciona la opcin Definir rea circular.
17. Pulsa, mantn y arrastra para definir un rea circular sobre el crculo de la imagen
correspondiente a la seccin Nios/as.
18. Si necesitas ajustar con ms detalle este rectngulo selecciona la herramienta Flecha
en la barra de herramientas. Una vez activada esta herramienta puedes
Aumentar/disminuir el tamao del crculo con slo pulsar y arrastrar por uno de
los selectores que presenta.
Mover el rea mediante la opcin de pulsar y arrastrar. Tambin se puede mover
ms finamente utilizando las teclas de flechas.
Si deseas eliminar el rea, seleccinala previamente y pulsa la tecla Supr.
19. Haz doble clic sobre esta nueva rea circular. En el cuadro de dilogo Configuracin
de rea n3 introduce los parmetros de esta rea:
Texto alternativo: Nios/as

URL: pega la direccin 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 imgenes para seguir trabajando sobre l
ms 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 botn Guardar. Por defecto se guarda con la
extensin *.map. Para almacenarlo como TXT aade la extensin al final del nombre
del archivo: mimapa.txt
23. Si cierras Image Map y luego vuelves a abrir este programa, para recuperar el
proyecto slo tienes que seleccionar Archivo > Abrir.
2.12.3 Integracin 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 Edicin > 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 pgina.
4. Selecciona la primera lnea GIMP y asgnale el formato Ttulo 1. Selecciona los
objetivos y asgnale el formato de Vietas.
5. Para guardar la pgina elige Archivo > Guardar como

6. En el cuadro de dilogo Ttulo de pgina introduce como ttulo CNICE y luego pulsa
en Aceptar.
7. En el cuadro de dilogo Guardar pgina como selecciona la carpeta miweb como

carpeta destino en la lista Guardar en, como nombre de archivo cnice.html y luego
pulsa en el botn Guardar.

228
8. Una vez que hemos definido la ubicacin de esta pgina vamos a pegar el cdigo
HTML correspondiente al mapa de imgenes 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 cdigo HTML y copialo mediante Edicin >
Copiar.
10. Regresa a Kompozer y haz clic en la pestaa inferior Cdigo fuente.
11. Sita el cursor inmediatamente debajo de la etiqueta <h1>CNICE</h1> y elige Editar

> Pegar. Observa que se pega la etiqueta <img> y <map>.
12. Slo es necesaria una pequea correccin para indicarle a Kompozer dnde 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 pestaa Normal de Kompozer y pulsa en el botn Guardar.

14. Para visualizar el resultado final haz clic en el botn Navegar.
Nota:
No olvides eliminar los archivos de texto auxiliares que hemos utilizado para realizar esta
prctica y que tenemos en la carpeta miweb\images
Imagen ::: Integracin HTML de presentaciones

230
2.13 Integracin HTML

de presentaciones

231
2.13 Integracin HTML de presentaciones

A menudo surge la necesidad de publicar en una pgina web una presentacin 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 captulo se propone una solucin ms accesible, elegante y adecuada utilizando
OpenOffice para exportar la presentacin a formato Flash. El objeto resultante se podr
integrar en una pgina HTML para su publicacin 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 extraccin podrs encontrar, entre otros
archivos, una presentacin educativa realizada con Powerpoint: TIC_project.ppt.
Este procedimiento se puede aplicar tambin 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 versin portable del mismo.
Nota: Si todava no dispones de OpenOffice en Windows puedes descargar e instalar
una versin 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 . Seleccinalo y
pulsa en el botn Abrir. Como podrs comprobar OpenOffice Impress es una
aplicacin gratuita que permite abrir y ejecutar presentaciones creadas en
Powerpoint.
4. A continuacin elige Archivo > Exportar

232
5. En el cuadro de dilogo 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 pelcula 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 botn Guardar. Al cabo de unos segundos se habr creado en la carpeta
mipresentacion el archivo data.swf
2.13.2 Integracin HTML de una presentacin Flash

1. Utiliza el explorador de archivos para abrir la carpeta mipresentacion. En ella podrs
encontrar los distintos archivos que han resultado de descomprimir el archivo
pplayer.zip en el apartado anterior.
2. Los archivos que encontrars en esta carpeta son:
TIC_project.ppt . Es la presentacin original en Powerpoint. Una vez

exportada a Flash ya no se utiliza por lo que conviene moverla a otra carpeta
guardndola como copia de seguridad editable. Si fuera necesario realizar una
modificacin en alguna diapositiva deberas 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 presentacin en formato Flash y su nombre de archivo es
obligatorio para que la aplicacin funcione correctamente. Si deseas disear
otra presentacin debers ubicarla en otra carpeta distinta de
mipresentacion copiando la estructura de archivos y carpetas que aparecen
en la imagen superior. En este caso slo habra que sustituir el archivo
data.swf por el resultado de la exportacin de la nueva presentacin.
pplayer.swf. Es una aplicacin flash cuya funcin es cargar la presentacin
data.swf y ofrecer el interfaz de navegacin entre sus diapositivas.
index.html. Es la pgina web que permite la visualizacin de la presentacin
a travs del navegador. Para acceder desde otra pgina a esta presentacin
debers crear un enlace a index.html.
Scripts. Es la carpeta que contiene el script necesario para resolver el
problema del clic previo en una aplicacin flash.

233
3. Doble clic sobre index.html para que se muestre la presentacin 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 > Ttulo y propiedades de pgina para modificar el ttulo de
esta pgina HTML. Otra posibilidad es aadir texto a la pgina.
Nota:
Puedes crear tu propia presentacin en formato HTML+Flash con slo exportar tu
presentacin 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

234
2.14 Mapas conceptuales

235
2.14 Mapas conceptuales

El mapa conceptual es una tcnica muy utilizada en educacin para la representacin grfica
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 captulo 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
pgina HTML para su publicacin en la web.
2.14.1 Instalacin 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 versin portable y por tanto no necesita instalacin.
2. Para ejecutar el programa sitate dentro de la carpeta creada por el instalador y haz
doble clic sobre el programa Freemind.exe.
Otra posibilidad es visitar la pgina oficial de Freemind para consultar si existe alguna
versin ms reciente: http://freemind.sourceforge.net/wiki/index.php/Main_Page
Para que funcione FreeMind es necesario instalar previamente el intrprete de los programas
de Java conocido normalmente Java Runtime Environment (JRE): jre-6u5-windows-i586-ps.exe
2.14.2 Instalacin 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 aadir el repositorio de descarga de Freemind teclea la siguiente orden:
gksudo gedit /etc/apt/sources.list
3. Al final de este archivo aade las siguientes lneas:
# 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 diseo de mapas
ms complejos excede el propsito 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 crculo con un 1.
5. Sita el puntero en el extremo izquierdo del nodo hijo y arrstralo para situarlo un
poco ms 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 aadiendo los
nodos: 2 Comunicarse, 3 Compartir y 4 Colaborar.
8. Tambin se pueden aadir un enlace a cada nodo mediante clic derecho e Insertar.
9. Una vez terminado selecciona Archivo > Guardar como
10. En el cuadro de dilogo Guardar como selecciona la carpeta destino e introduce el
nombre del mapa. Se guarda con la extensin *.mm. Clic en el botn Guardar.
Integracin 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 dilogo Guardar introduce el nombre del archivo HTML. Por ejemplo:
web20.html. Clic en el botn Guardar.
5. Como resultado de la exportacin 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 travs de un visor de tecnologa
Flash : web20.mm, flashobject.js y visorfreemind.swf

237
7. Para observar el resultado haz doble clic sobre el archivo web20.html. En la

publicacin de este mapa ser necesario subir al servidor el archivo HTML y la carpeta
adjunta.
3.Audio
Audio ::: Introduccin

238
3.1 Introduccin

239
3.1 Introduccin
3.1.1 Conceptos bsicos del sonido digital
Frecuencia.
Es el nmero de vibraciones por segundo que da origen al sonido analgico. El espectro de un
sonido se caracteriza por su rango de frecuencias. sta se mide en Hertzios (Hz). El odo
humano capta slo 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 seal
analgica. La tasa de muestreo o sample rate define cada cunto tiempo se tomar el valor
de la seal analgica 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 seal
analgica de audio para crear el audio digital correspondiente. Un audio tendr ms calidad
cuanto mayor sea su tasa de muestreo. Algunas frecuencias estndares son 44100 Hz., 22050
Hz., y 11025 Hz.
Resolucin (bit resolution)
Es el nmero de bits utilizados para almacenar cada muestra de la seal analgica. Una
resolucin de 8-bits proporciona 256 (28) niveles de amplitud, mientras que una resolucin de
16-bits alcanza 65536 (216). Un audio digital tendr ms calidad cuanto mayor sea su
resolucin. Ejemplo: El audio de calidad CD suele ser un sonido de 44.100 Hz 16 bits
estereo.
Velocidad de transmisin (bitrate)
El bitrate define la cantidad de espacio fsico (en bits) que ocupa un segundo de duracin de
ese audio. Por ejemplo, 3 minutos de audio MP3 a 128kBit/sg, ocupa 2,81 Mb de espacio fsico
(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 ms 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 ms 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 vara entre un rango mximo y
mnimo en funcin de la tasa de transferencia.
Cdec.
Acrnimo de "codificacin/decodificacin". Un cdec es un algoritmo especial que reduce el
nmero de bytes que ocupa un archivo de audio. Los archivos codificados con un codec
especfico requieren el mismo cdec para ser decodificados y reproducidos. El cdec ms
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 odo humano se sita en torno a los 130140 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 extensin especfica 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 ms 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 extensin *.wav
Es ideal para guardar audios originales a partir de los cuales se puede comprimir y
guardar en distintos tamaos de muestreo para publicar en la web.
Es un formato de excelente calidad de audio.
Sin embargo produce archivos de un peso enorme. Una cancin extrada de un CD (16
bytes, 44100 Hz y estreo) puede ocupar entre 20 y 30 Mb.
Compresin: Los archivos WAV se pueden guardar con distintos tipos de compresin.
Las ms utilizadas son la compresin PCM y la compresin ADPCM. No obstante
incluso definiendo un sistema de compresin, con un audio de cierta duracin 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 compresin 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 compresin y alta calidad est prcticamente monopolizando
el mundo del audio digital.
Es ideal para publicar audios en la web. Se puede escuchar desde la mayora de
reproductores.
La transformacin de WAV a MP3 o la publicacin directa de una grabacin en formato
MP3 es un proceso fcil y al alcance de los principales editores de audio.
Tiene un enorme nivel de compresin respecto al WAV. En igualdad del resto de
condiciones reducira el tamao del archivo de un fragmento musical con un factor
entre 1/10 y 1/12.
Presentan una mnima prdida de calidad.
Formato OGG
El formato OGG ha sido desarrollado por la Fundacin Xiph.org.

Es el formato ms reciente y surgi como alternativa libre y de cdigo abierto (a
diferencia del formato MP3).
Muestra un grado de compresin similar al MP3 pero segn los expertos en msica la
calidad de reproduccin es ligeramente superior.
No todos los reproductores multimedia son capaces de leer por defecto este formato.
En algunos casos es necesario instalar los cdecs o filtros oportunos.
El formato OGG puede contener audio y vdeo.
Mencin especial merece el formato MIDI. No es un formato de audio propiamente dicho por
lo que se comentan aparte sus caractersticas.

241
Formato MIDI
El formato MIDI (Musical Instrument Digital Interface = Interface Digital para

Instrumentos Digitales) en realidad no resulta de un proceso de digitalizacin de un
sonido analgico. Un archivo de extensin *.mid almacena secuencias de dispositivos
MIDI (sintetizadores) donde se recoge qu instrumento interviene, en qu forma lo
hace y cundo.
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 duracin con un reducido peso. Esto es
debido a que no guardan el sonido sino la informacin o partitura necesaria para que
el ordenador la componga y reproduzca a travs de la tarjeta de sonido.
Se suelen utilizar en sonidos de fondo de pginas HTML o para escuchar composiciones
musicales de carcter instrumental.
El formato MIDI no permite la riqueza de matices sonoros que otros formatos ni la
grabacin a partir de eventos sonoros analgicos.
3.1.3 Optimizacin 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 parmetros:
1) Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc.
2) Resolucin. Establecer resoluciones ms pequeas: 32-bits, 16-bits, 8-bits, 4-bits, etc.
3) Duracin. En ocasiones se puede utilizar un fragmento ms corto que reproducido en
bucle cubre el tiempo suficiente de acompaamiento musical. A stos se les llama
loops.
4) Calidad estreo/mono. La reduccin a calidad mono reduce considerablemente el
peso del archivo. Por otra lado la calidad de reproduccin mono para la mayora de
audios y de pblico es apenas perceptible.
5) Formato. Es preferible utilizar el formato MP3 en lugar del WAV por su potente factor
de compresin y su aceptable calidad de audio.
6) Factor de compresin. El formato WAV admite distintos factores de compresin: PCM
y ADPCM.
En los siguientes captulos de este documento se describirn los procedimientos necesarios
para realizar estas tareas sobre un audio original utilizando el editor Audacity.
Audio ::: Primeros pasos con Audacity

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 cdigo abierto para grabar y editar sonidos. Existe versiones para
Windows, Linux, Mac, etc. (http://audacity.sourceforge.net/)
3.2.2 Instalacin 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 podrs encontrar la versin ms reciente o que
se adapta a tu sistema: http://audacity.sourceforge.net/
archivo a una carpeta de tu disco duro o pendrive: Audacity_1.3.4.exe
3.2.3 Instalacin del programa en Ubuntu

1. Selecciona Aplicaciones > Aadir o quitar aplicaciones
2. En el cuadro de dilogo Aadir 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 botn Aplicar
cambios.
4. Una vez finalizada la instalacin, selecciona Aplicaciones > Sonido y vdeo >
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 extraccin obtendrs 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 dilogo Seleccione uno o ms 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 botn Abrir.
5. Tras abrir un archivo de sonido mediante el comando Archivo > Abrir, el programa
muestra el siguiente entorno:

244
6. Aunque algunos se vern con ms detalle ms adelante, ahora se describen

brevemente los principales elementos del interfaz de Audacity:
1. Barra de mens. Como en cualquier aplicacin Windows se puede utilizar para
activar cualquier opcin del programa.
2. Barra de herramientas. Contiene algunas de las operaciones de uso ms
frecuente:
Herramienta de Seleccin: 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 pequeos fragmentos
dibujando directamente sobre la representacin grfica de la onda sonora. Suele
ser necesario ampliar previamente la vista de la muestra.
Herramienta zoom: facilita la visualizacin de detalles en zonas concretas
de la grabacin.
Herramienta de traslado de tiempo: permite desplazar un fragmento de la
grabacin sobre la lnea de tiempo: adelante-atrs.

245
Modo Multi-herramienta: permite utilizar las herramientas Seleccin,

Envolvente y Traslado sin tener que ir seleccionndolas individualmente.
3. Barra de control de reproduccin.
Para reproducir en bucle indefinido el fragmento seleccionado pulsa la tecla Mayus y

sin soltarla haz clic en el botn Reproducir.
4. Barra de medidores de Nivel de Entrada y salida
Indicador de Nivel de Salida. Durante la reproduccin de una grabacin

mostrar el volumen de salida en cada uno de los dos canales: I-R.
Indicador de Nivel de Entrada. Durante una grabacin mostrar el volumen

de entrada de la fuente elegida, por ejemplo, el micrfono.
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 botn Reproducir de la barra
de Control de Reproduccin. 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: micrfono). No obstante no controla el volumen con que entra la
seal de audio sino el volumen que utiliza para grabarla. Si la seal de audio
entra saturada, simplemente grabar la seal saturada a menor volumen.

246
6. Barra de Transcripcin. Permite iniciar la reproduccin 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 ms que no viene configurada como
visible por defecto que permitir elegir el dispositivo fuente del que se grabar
Micrfono.
7. Barra de Edicin.
Cortar, Copiar Pegar un fragmento de grabacin.
Recortar fuera de seleccin: recorta los fragmentos exteriores a la
seleccin actual.
Silenciar seleccin: transforma a silencio el fragmento de audio
seleccionado.
Deshacer/Rehacer: deshace o rehace la ltima operacin realizada con
el programa.
Zoom Acercar/Alejar.
Ajustar seleccin a la ventana: ajusta el fragmento seleccionado a la
ventana visible.
Ajustar el proyecto a la ventana: ajusta la grabacin completa a la ventana
disponible.
8. Pista de audio.
Audacity permite trabajar con distintas pista de audio. Cada una se sita 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 Eliminacin 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
ms frecuente que se pueden realizar sobre la pista de audio: modificar el
nombre, cambiar el modo de visualizacin (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/Slo. Permite silenciar una pista o conseguir que slo 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 ms por el altavoz izquierdo (I) o bien por el altavoz derecho
(D).
9. Barra de Seleccin. Situada por defecto en la parte inferior de la ventana.

Muestra la frecuencia del proyecto de grabacin actual y tambin permite definir
de forma numrica la seleccin de un fragmento de audio.
Audio ::: Reproduccin de audio con Audacity

248
3.3 Reproduccin de
audio con Audacity

249
3.3 Reproduccin 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.

4. En el cuadro de dilogo Selecciona uno o ms 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 botn Abrir.
3.3.2 Reproduccin del audio

Utiliza la consola de reproduccin y grabacin 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
botn Play se reproducir en bucle contnuo, es decir, al llegar al final comenzar
por el principio.
Pausa: detiene temporalmente la reproduccin o grabacin de audio. Para
reanudar el proceso basta con pulsar de nuevo en este botn.
Stop (Parar): detiene la reproduccin o grabacin.
Ir al principio: sita la cabeza lectora al principio de la grabacin.
Ir al final: enva la cabeza lectora al final de la grabacin.
Grabar: graba la seal de entrada en una nueva pista a partir de la posicin
actual de la cabeza lectora.

250
3.3.3 Propiedades de un archivo de audio

Para conocer las caractersticas 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 opcin Propiedades.
Windows
3. En el cuadro de dilogo Propiedades pulsa sobre la pestaa Resumen.
4. Si aparece el botn Opciones avanzadas pulsa sobre l para cambiar a este modo
de vista.
5. En este cuadro se mostrarn los distintos parmetros de inters sobre el audio

contenido en este archivo: Velocidad de transmisin (bitrate), Tamao de muestra
de sonido (resolucin), Canales (mono/estreo), Velocidad de muestra de sonido
(Tasa de muestreo) y Formato de audio. Si es un archivo WAV mostrar el tipo de
compresin utilizado. Si es un archivo MP3, adems de la informacin citada, se
mostrarn los metacontenidos de las etiquetas ID3 especficas de este formato.

251
Ubuntu Linux
3. En el cuadro de dilogo Propiedades pulsa sobre la pestaa Bsico. En esta seccin
podrs ver, entre otros, el tipo y tamao de archivo de audio.
4. En la pestaa Sonido/Vdeo en ocasiones se aporta informacin de los metadatos de

este audio y del cdec de compresin 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 informacin que se muestra en el encabezado
de la pista de audio no se corresponde con los datos del archivo importado. Audacity lo
transforma automticamente a la tasa de muestreo (p.e. 44100 Hz), resolucin (p.e. 32-bit
float) y canales (p.e. Estreo) 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 opcin el proyecto de edicin de audio se guardar con extensin
*.AUP . Este archivo contiene todo lo que necesita Audacity para editar este sonido
(no sera 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 edicin de un archivo WAV, MP3, OGG, etc. Sin
embargo cuando trates de guardar las modificaciones realizadas en el mismo formato de
archivo debers 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 ::: Optimizacin de audios

253
3.4 Optimizacin
de audios

254
3.4 Optimizacin de audios

3.4.1 Conversin de formato WAV a MP3
En esta actividad se detalla el procedimiento para convertir un archivo de audio del formato
WAV al MP3. Cmo se explic en el primer captulo, 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.

localizar el archivo amanecer.wav.
5. Clic sobre este archivo de la lista y pulsa en el botn Abrir. Se abrir una ventana con
la onda de sonido correspondiente.
6. Selecciona Archivo > Exportar
Windows
7. En el cuadro de dilogo 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 extensin porque Audacity la aadir automticamente.

Clic en el botn Guardar.

255
Ubuntu Linux
7. En el cuadro de dilogo 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 botn 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 conversin pulsa en el botn
Guardar.
Ambos sistemas:
9. Para realizar la conversin a MP3, Audacity utiliza el cdec LAME. Este cdec se suele
instalar por defecto con Audacity pero en algunas versiones ms antiguas no se inclua.
Si Audacity no encuentra el cdec instalado en tu equipo, se mostrar un mensaje
donde te propone localizarlo. Para ello haz clic en el botn 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 botn Descargar que aparece en este cuadro para
navegar hasta una pgina del proyecto Audacity donde es posible descargar y situar
este archivo en una subcarpeta Lame dentro de la carpeta de instalacin de Audacity
en el equipo.
10. A continuacin se muestra el cuadro de dilogo Editar las etiquetas ID3 para el
archivo MP3. Las etiquetas ID3 se almacenan en el mismo archivo MP3 y son ledas
por el reproductor para mostrar previamente en pantalla los metadatos como el ttulo
de la cancin (Track Title), el artista (Artist Name), el album (Album Title), el
gnero musical (Genre), el ao de creacin de la cancin (Year), el nmero 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, tamao, tipo y fecha de
modificacin.

257
3.4.2 Configurar la calidad de exportacin a MP3

En ocasiones puede interesar reducir an ms el peso del archivo MP3 que se origina durante
el proceso de exportacin 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 podras
ahorrarte volver a descargarlo y descomprimirlo.
3. Selecciona Archivo > Abrir. En el cuadro de dilogo Selecciona uno o ms 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 dilogo Exportar archivo selecciona la carpeta destino en la lista
desplegable Guardar en:. En la lista Tipo elige Archivos MP3
6. Clic en el botn 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 opcin

Constante. Despliega la lista Quality (Calidad) y elige un valor de Bit Rate inferior a
128. Por ejemplo: 96 (kbps).
8. Clic en el botn 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
Exportacin como MP3 tendrn este bitrate.
9. De regreso al cuadro de dilogo Exportar archivo introduce un nuevo nombre de
archivo. Por ejemplo: amanecer_96. No es necesario teclear la extensin porque
Audacity la incorpora automticamente.
10. Se muestra el cuadro de dilogo 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, sitate 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. Podrs comprobar que la calidad no ha
disminuido excesivamente. Para ello efecta 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 estreo a mono

En la mayora de los casos no es necesario disponer de una locucin o sonido en estreo. Su
versin en mono satisface dignamente el propsito de la aplicacin. Esta operacin supone
reducir el tamao 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 podras
ahorrarte volver a descargarlo y descomprimirlo.
3. Selecciona Archivo > Abrir. En el cuadro de dilogo Selecciona uno o ms 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 opcin Dividir pista estreo.
6. Tras esta eleccin observa que ahora el canal izquierdo y derecho se muestran en
ventanas separadas.

260
7. Haz clic sobre el botn X cerrar situado en el encabezado de la onda del canal
Derecho. (Tambin se podra hacer eliminando el canal Izquierdo) . De los dos
cuadros que muestran la onda sonora ser el situado ms abajo. Con esta operacin 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 opcin
Mono.
9. Observa que ahora en el encabezado de la ventana de onda se muestra el texto Mono

para indicar la conversin realizada.

261

11. En el cuadro de dilogo Exportar archivo introduce un nuevo nombre de archivo. No
es necesario teclear la extensin porque Audacity la incorpora automticamente. Por
ejemplo: amanecer_24_mono.
12. Desplieg la lista Tipo y selecciona Archivos MP3.

13. Pulsa en el botn Opciones para definir como Quality (Calidad): 24 kbps. Clic en
Aceptar.
14. En el cuadro de dilogo Exportar archivo pulsa en el botn 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 botn Aceptar.

262
Aceptar. Al cabo de unos instantes en la carpeta destino se habr creado al archivo
de audio en monocanal.
3.4.4 Formatos de compresin WAV

Cuando el audio tiene una duracin muy corta resulta interesante conservar el formato WAV.
Con Audacity podemos definir distintos formatos de compresin 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 conversin
selecciona Archivo > Exportar.
4. En el cuadro de dilogo 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 botn Buscar otras carpetas para
acceder a la lista de Tipos de archivos.
6. A continuacin pulsa en el botn Opciones
7. En el cuadro de dilogo Especificar opciones PCM despliega la lista Formato y elige
la entrada WAV (Microsoft 16 bit PCM) y pulsa en el botn Aceptar.

263
8. En el cuadro de dilogo Exportar archivo teclea el nombre del nuevo archivo. Por
ejemplo: ladrido_16_pcm.wav . No es necesario introducir la extensin .WAV porque
Audacity la incorpora automticamente.
10. Repite la secuencia de pasos del 1 al 9 para crear otros archivos WAV con distintos
formatos de compresin:
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 reduccin de peso que tienen los distintos formatos de
compresin WAV.
Audio ::: La grabacin de audio

264
3.5 La grabacin
de audio

265
3.5 La grabacin de audio

3.5.1 Crear una grabacin de voz
En el diseo de una aplicacin educativa puede resultar interesante aadir discursos sonoros
con carcter 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 micrfono.
1. Abre el programa Audacity.
2. En primer lugar es necesario definir las condiciones del muestreo en la transformacin
del audio analgico a audio digital: tasa de muestreo (44.100 Hz, 22050 Hz, 11025 Hz,
etc) y resolucin (16, 24, 32, bits). Para ello elige Editar > Preferencias.
3. Elige la pestaa 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 continuacin 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 opcin de visualizacin: 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 Micrfono (Mic).
9. En el panel de Medidores, haz clic en el botn con la cabeza de flecha mirando hacia
abajo que aparece situado al lado del icono del micrfono.

266
10. En el men que se muestra selecciona la opcin: Comenzar monitorizacin.
11. Con ello Audacity comienza a monitorizar la seal de entrada. Observa que a partir de
este momento en el panel de mezclas oscilan los indicadores de seal en color rojo
recogiendo la entrada del micrfono. Si al hablar en el micro no se observan estas
oscilaciones en el nivel de entrada, es necesario revisar la conexin del micrfono con
el equipo. Asegrate de que est conectado en la entrada adecuada de la tarjeta de
sonido.
12. Realiza una prueba leyendo este texto: La televisin 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. Tambin resulta conveniente ajustar el volumen del micrfono. Durante la lectura, en
los puntos de mximo volumen, el nivel debera haber superado la marca de -6
decibelios. En el panel de mezclas arrastra el deslizador de volumen del micrfono
aumentando o disminuyendo para conseguir que el mximo volumen alcance esta
marca pero sin que ello produzca la saturacin.
14. A continuacin, pulsa en el botn Grabar.
15. Lee despacio sobre el micrfono. Para detener la grabacin pulsa en el botn Parar.
16. Para iniciar de nuevo la grabacin elige Editar > Deshacer Grabar.
17. Una vez realizada la grabacin con xito vamos a guardarla. Para ello selecciona
Archivo > Exportar.
18. En el cuadro de dilogo Exportar selecciona como Tipo de archivo MP3.
19. Introduce un nombre de archivo y pulsa en el botn Guardar.

267
3.5.2 Grabar audio de un CD

Aunque hay otros programas que facilitan la extraccin directa de msica de un CD, con
Audacity es posible obtener un fragmento musical a partir de un CD de msica.
1. Sitate en una nueva ventana de Audacity mediante Archivo > Nuevo o bien abriendo
el programa si ste no est ejecutndose.
2. En el panel del Mezclador selecciona el dispositivo Stereo Mix (Vol).
3. Arrastra el deslizador de volumen situado al lado del icono de micrfono para

ajustarlo.
5. En el men que se muestra selecciona la opcin: Comenzar monitorizacin. De esta

forma se monitoriza la seal de entrada.
Reproducir el CD en Windows
6. A continuacin 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 rpido
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
arrncalo mediante Aplicaciones > Sonido y vdeo > Extractor de msica de CDs
Sound Juicer
7. Desde el programa Sound Juicer selecciona la pista y pulsa en el botn Reproducir.

Ambos sistemas
8. Regresa a Audacity
9. Pulsa en el botn Grabar
10. Clic en el botn Parar en el instante que decidas detener la grabacin.
Archivo > Exportar para obtener el archivo correspondiente.
Notas:
Como se indica en el primer apartado de este captulo, recuerda que la tasa y

resolucin de muestreo se definen en Archivo > Preferencias > Calidad. Esto se hace
previamente a la grabacin.
Conviene guardar el audio extrado de un CD en formato MP3 si su duracin va a
superar los 4-5 segundos.

269
3.5.3 Grabar audio de la radio

En esta prctica vamos a utilizar Audacity para grabar un fragmento de audio extrado de una
emisin de radio en Internet.
1. Visita la web http://www.rtve.es/rne/web/index.php
2. Selecciona una emisora, por ejemplo, Radio Clsica y luego Escucha Radio Clsica.
3. Haz clic sobre el icono de Windows para comenzar a or esta emisora utilizando el
reproductor Windows Media.
Nota:
En Ubuntu Linux puede ocurrir en algunas ocasiones que no se reproduzca la emisin
a travs del navegador Firefox. En este caso un mtodo alternativo es abrir VLC
Media Placer. Si no dispones de l puedes instalarlo previamente. Selecciona Abrir >
Abrir volcado de red y en la pestaa Red marcar la opcin HTTP/HTTPS/FTP/MMS
para
pegar
la
direccin
siguiente
y
pulsar
el
botn
Aceptar:
http://www.rtve.es/rne/audio/RNEclasica.asx
4. Al cabo de unos instantes, comenzars a oir la emisin a travs del equipo.
5. Sitate en Audacity. Selecciona Archivo > Nuevo para comenzar en un proyecto
nuevo.
6. En el panel Mezclador selecciona el dispositivo Stereo Mix (Vol).

ajustarlo.


270
Archivo > Exportar para obtener el archivo MP3 correspondiente. Recuerda que para
configurar las propiedades del archivo MP3 resultante debes pulsar en el botn
Opciones desde el cuadro de dilogo Exportar archivo.
Nota:

3.5.4 Grabar audio de un MIDI

En esta prctica vamos a utilizar Audacity para grabar un fragmento de audio a partir de la
reproduccin de un archivo MIDI. Esta operacin no suele aplicarse para optimizar un archivo
MIDI ya que ste es un formato muy ligero sino para incorporar esta fuente de msica 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, sitate 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 reproduccin de archivos MIDI se puede realizar instalando desde
Aplicaciones > Agregar/Quitar programas el programa Timidity++. Despus 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).

ajustarlo.

Archivo > Exportar.
Notas:
Recuerda que Audacity no permite importar ni editar archivos MIDI.
Audio ::: Copiar y pegar audio

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 reduccin del peso de un archivo de audio puede realizarse acortando su duracin original.
Con un editor de audios como Audacity es posible seleccionar un fragmento de onda con
intencin de eliminarlo o bien conservarlo descartando el resto no seleccionado. Por otra
parte la aplicacin de un efecto siempre se realiza sobre un tramo de onda seleccionada
previamente.
En esta prctica vamos a estudiar los procedimientos para seleccionar.
1. Descarga y descomprime el archivo ambiente.zip para obtener el archivo
ambiente.mp3.
2. Inicia Audacity
localizar el archivo ambiente.mp3 que has extrado a tu equipo.
6. Selecciona la herramienta de seleccin 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 ms finas es conveniente utilizar la herramienta zoom. Con ella
se puede ampliar la representacin 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 botn de herramienta Zoom.
2. Haz clic reiteradamente sobre la representacin de la onda hasta que la escala se
site en centsimas de segundo: 2,70-2,80-2,90 Para disminuir el zoom haz clic
derecho.
3. Vuelve a elegir la herramienta Seleccin.

4. Haz un solo clic sobre la onda para situar la lnea 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 grabacin.
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 porcin de onda seleccionada se muestra destacada sobre fondo gris
ms oscuro. Se pueden mover los lmites inicial y final de este fragmento. Para ello
basta con aproximar el puntero del ratn a estos lmites y cuando ste tome el
aspecto de una mano, pulsar y arrastrar.

275
Otras opciones de seleccin son:
Editar > Seleccionar > Todo: Con esta opcin se selecciona toda la onda de audio.
Esta opcin es especialmente til para aplicar un efecto a la grabacin completa.
Editar > Seleccionar > Desde el principio hasta el cursor: Al hacer un clic sobre la
onda para fijar la posicin de la lnea de cursor y luego utilizar esta opcin, se
selecciona la porcin comprendida entre el principio de la grabacin y la posicin de
la lnea de cursor.
Editar > Seleccionar > Desde el cursor hasta el final: Al hacer clic sobre la onda
para fijar la posicin de la lnea de cursor y luego aplicar este comando, se selecciona
el tramo comprendido entre la lnea de cursor y el final de la grabacin.
3.6.2 Crear un nuevo archivo con un fragmento

ambiente.mp3. No es necesario realizar esta operacin si ya dispones de l del
apartado anterior de este captulo.
2. Inicia el programa Audacity.
localizar el archivo ambiente.mp3.
6. Activa la herramienta Seleccin en la barra de herramientas de Audacity.
7. Pulsa y arrastra sobre la onda para seleccionar una porcin. Por ejemplo de 0,0 a 4,7
segundos.
8. Copia este fragmento de onda al portapapeles haciendo clic en el botn Copiar
9. Selecciona Archivo > Nuevo.

10. En la nueva ventana, haz clic en el botn Pegar.

12. En el cuadro de dilogo 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 aadir la extensin *.mp3 porque Audacity lo
hace de forma automtica.
13. En la lista desplegable Tipo selecciona la entrada Archivos MP3.
14. Si deseas configurar la calidad del archivo mp3 resultante pulsa en el botn Opciones
y defnela en la lista Quality. Pulsa en el botn Aceptar.
Aceptar.

276
3.6.3 Recortar un fragmento

3. Selecciona Archivo > Abrir para localizar el archivo ambiente.mp3.
5. Selecciona un fragmento de onda mediante pulsar+arrastrar+soltar.

6. Para eliminar el audio no seleccionado haz clic en el botn Recortar o bien elige
Editar > Recortar. Observa que Audacity slo retiene la onda seleccionada.
7. Para situar la onda seleccionada al comienzo de la grabacin, elige la herramienta

Traslado en el tiempo y a continuacin arrastra la seleccin al comienzo de la pista.

ejemplo: nuevoaudio2. No es necesario aadir la extensin *.mp3 porque Audacity lo
Aceptar.
3.6.4 Silenciar una seleccin

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 botn Silenciar seleccin.
6. Esta opcin convierte en silencio el tramo de audio seleccionado. Para deshacer la

operacin 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 duracin media o larga suele tener un peso elevado para
reproducirse previa descarga a travs de Internet, incluso si se trata de un archivo MP3. A
veces la situacin admite emplear como recurso alternativo un audio ms corto pero que
reproducido en bucle con n repeticiones transmite la sensacin de un acompaamiento ms
largo. Esto es especialmente til en sonidos de fondo. En esta prctica vamos a crear un loop
a partir de un audio ms largo.
1.
2.
3.
4.
Descarga y descomprime el archivo house.zip para obtener el archivo house.mp3.

Inicia el programa Audacity.
Selecciona Archivo > Abrir para localizar el archivo house.mp3.
Escucha la grabacin con detenimiento. Advertirs que este audio se puede sustituir
fcilmente 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 lnea de tiempo
discrimine 0,00-0,10-0,20-0,30 con una apreciacin de media dcima (0,05)
8. Selecciona el fragmento inicial comprendido entre 0,00 y 0,05 y a continuacin elige

Editar > Borrar.
9. Haz clic sobre la onda en el punto 3,75 segundos. A continuacin elige Editar >
Seleccionar > Desde el principio hasta el cursor. Con esta accin se selecciona la
onda comprendida entre el inicio y la situacin actual de la lnea cursor.
10. Para or si el final coincide adecuadamente con el principio, activa el modo de
reproduccin en loop: pulsa la tecla <Mays> y sin soltarla haz clic en el botn
Reproducir de la consola. Observa que al pulsar la tecla <Mays> este botn toma
un aspecto distinto:

278
11. Si necesitas modificar los extremos de la seleccin, debes detener la reproduccin

antes. Aproxima el puntero del ratn a un extremo de la seleccin y cuando tome el
aspecto de una mano, pulsa y arrastra.
12. Para copiar la seleccin, haz clic en el botn Copiar.
13. Elige Archivo > Nuevo.

14. En la nueva ventana, haz clic en el botn Pegar.
16. Mantn la tecla <Mays> pulsada y sin soltarla haz clic en el botn Reproducir para
comprobar que el loop se mantiene sin cortes.
ejemplo: audioloop. No es necesario aadir la extensin *.mp3 porque Audacity lo
y defnela en la lista Quality. En este caso dejaremos la opcin por defecto. Pulsa en
el botn Aceptar.
Aceptar.
3.6.6 Mezclar pistas de audio

Con Audacity se puede componer una grabacin de audio mezclando varios sonidos originales.
Cada uno de stos ocupar una pista independiente de la grabacin y al pulsar el botn play
se reproducirn todos simultneamente.
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 compresin 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 compresin
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 dilogo Seleccione uno o ms archivos selecciona el archivo
fondo_clasico.ogg . Pulsa en el botn Abrir.
5. Repite los pasos 3-4 para importar el audio poema.ogg. Fjate que cada audio original
se sita en una pista independiente.
6. Selecciona la herramienta Seleccionar para pulsar+arrastrar+soltar la onda completa
de la pista poema.

279
7. A continuacin 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 msica de fondo.
9. Vuelve a seleccionar la herramienta Seleccionar y efecta un clic en cualquier
espacio en blanco para deseleccionar la onda de poema.
10. Clic en el botn Reproducir para escuchar el resultado de la composicin.
11. Despus de escuchar el resultado quizs estimes necesario reducir el volumen de la

msica de fondo cuando entra la locucin. Para ello selecciona el fragmento central
de la pista con el fondo_clasical.ogg.
12. A continuacin selecciona Efecto > Amplificar

13. En el cuadro de dilogo Amplificar arrastra el deslizador de amplificacin hacia la
izquierda para definir un valor negativo. Por ejemplo un valor entre -7 y -9.

280
15. Clic en el botn Reproducir para escuchar el resultado final.

16. Para crear el archivo MP3 con la composicin elige Archivo > Exportar
ejemplo: mezcla. No es necesario aadir la extensin *.mp3 porque Audacity lo hace
de forma automtica.
y defnela en la lista Quality. En este caso dejaremos la opcin por defecto. Pulsa en
el botn Aceptar.
Aceptar.
21. Si deseas guardar el proyecto de audio para continuar editndolo ms adelante
selecciona Archivo > Guardar proyecto como El proyecto de Audacity se guarda
como un archivo de extensin *.aup.
Audio ::: Aplicar efectos

280
3.7 Aplicar efectos

281
3.7 Aplicar efectos

Audacity proporciona mltiples 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.
2.
3.
4.
Descarga y descomprime el archivo para guardar el archivo aventura.mp3.

Inicia Audacity.
Selecciona Archivo > Abrir
En el cuadro de dilogo Selecciona uno o ms archivos de audio navega hasta
localizar el archivo aventura.mp3 que hemos extrado anteriormente.
5. Clic sobre este archivo de la lista y pulsa en el botn Abrir.
6. Antes de aplicar un efecto es necesario seleccionar un tramo de pista de audio. Elige
la herramienta Seleccin.
7. Pulsa y arrastra para seleccionar una porcin de audio sobre la que se aplicar el
efecto. Puede ser un tramo inicial o final. Si deseas que la seleccin abarque toda la
pista elige Editar > Seleccionar > Todo o bien pulsa la combinacin de teclas
<Ctrl>+<A>
8. Aplica el efecto seleccionando en la barra de men Efecto > En el cuadro de
configuracin de los parmetros de un efecto suele encontrarse un botn
Previsualizacin para escuchar los primeros segundos del audio seleccionado tras
haberle aplicado ese efecto.
9. A continuacin se exponen algunos de los efectos ms habituales:
Amplificar. Aumenta o disminuye el volumen del audio seleccionado.

Introduce en la casilla Amplificacin (dB) el valor en decibelios que se
aumentar el volumen o bien puedes arrastrar el deslizador inferior. Si
activas la casilla Permitir recorte no podrs amplificar por encima del rango
de frecuencias de la onda. Esto evitar la distorsin.

282
Realce de graves. Aumenta el volumen de las frecuencias bajas. Indica el

lmite de frecuencias bajas que se seleccionarn y los decibelios que se
incrementarn 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
duracin. Si se desplaza a la izquierda o se introduce un % negativo se
ralentizar incrementndose la duracin.
Cambiar tono. Permite cambiar el tono del fragmento de sonido seleccionado

mantenindose el tiempo constante. Este efecto se suele aplicar mejor a
grabaciones vocales que no tienen msica 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 dinmico. Comprime el rango dinmico de la seleccin

de tal forma que las partes ms fuertes se suavizan manteniendo el volumen
de las partes ms suaves. Opcionalmente se puede aplicar Ganancia para
conseguir un volumen final ms alto.

284
Eco. Aade el efecto eco a una seleccin. Define el Tiempo de retraso en

segundos entre la reproduccin del sonido y su eco correspondiente. Se
recomienda utilizar un Factor de decaimiento prximo a 0,50000. Este
efecto no incrementa la longitud de la seleccin, por lo que conviene aadir
previamente silencio al final de la pista mediante Generar > Silencio.
Ecualizacin. Ajusta o reduce las frecuencias extraas del fragmento elegido.

Puedes seleccionar una curva de ecualizacin predefinida o dibujar tu propia
curva.
Desvanecer progresivamente/Aparecer progresivamente: Se aplican

directamente sobre una seleccin inicial o final realizada en la grabacin para
definir una aparicin o desaparicin progresiva de la msica.

285
Eliminacin de ruido. Facilita la eliminacin de ruido de una grabacin. Este

efecto se suele aplicar en dos pasos:
i. Selecciona un pequeo fragmento de silencio donde aparece el ruido.
A continuacin elige Efecto > Eliminacin de ruido y pulsa el botn
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 botn Eliminar ruido.
Para terminar haz clic en el botn 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 mximo fijo, por ejemplo, -3 dB. Suele ser til normalizar una
pista de audio antes de mezclarla con otras.

286
Repetir. Repite la seleccin un determinado nmero de veces. Esta operacin

es rpida 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 atrs la pista original.
Wahwah. Incorpora un efecto de filtro especial.

ejemplo: aventura_efecto. No es necesario aadir la extensin *.mp3 porque Audacity
lo hace de forma automtica.
Aceptar.
Audio ::: Extraccin de audio de un CD

287
3.8 Extraccin de
audio de un CD

288
3.8 Extraccin de audio de un CD

3.8.1 Extraccin de audio de un CD con CDex (Windows)
CDEX es un programa de libre distribucin (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 versin 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 sitate en la carpeta resultante de la extraccin y haz doble clic
sobre el programa PortableCDex.exe
1. Introduce un CD de msica 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 ms
pulsa la tecla <Ctrl> y sin soltarla haz clic sobre ella para aadirla a la seleccin.
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 botn se crear un archivo

WAV por cada pista elegida del CD.

289
Extraer pista(s) de CD a formato comprimido. Si pulsas en este botn se crear un

archivo MP3 por cada pista elegida del CD. Conviene introducir en las casilla Artsta,
Gnero, Ttulo y Ao para crear adecuadamente las etiquetas ID del MP3 final.
Extraer fragmento de CD. Al pulsar este botn se muestra un cuadro de dilogo donde
se puede elegir la posicin 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 botn Aceptar para iniciar la extraccin.
6. Dnde 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 > Configuracin de CDex. En la solapa Nombre de archivos, pulsa en el
botn situado al lado de la casilla Pistas extradas para navegar por el disco
duro y elegir la ubicacin de la nueva carpeta. Para guardar los cambios pulsa en el
botn Aceptar.

290
3.8.2 Extraccin 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 Vdeo > Extractor de msica de CDs Sound
Juicer. Si no dispones de esta aplicacin selecciona Aplicaciones > Aadir y quitar
programas.
Sound Juicer convierte por defecto al formato OGG. Para activar la conversin a MP3 es
necesario instalar previamente el paquete gstreamer0.10-plugins-ugly-multiverse. Para ello
sigue estos pasos:
1. Desde el escritorio selecciona Sistema > Administracin > Gestor de paquetes
Synaptic
2. Clic en el botn Buscar e introduce como trmino de bsqueda: gstreamer y pulsa en
el botn Buscar.
3. Haz doble clic sobre la casilla de verificacin izquierda correspondiente a la entrada
gstreamer0.10-plugins-ugly-multiverse.
4. A continuacin haz clic en el botn 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 Vdeo > Extractor de msica 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 Msica. Se
puede acceder a ella desde el escritorio mediante Lugares > Msica. Desde el cuadro
de dilogo Preferencias se puede modificar la carpeta destino desplegando la lista
Carpeta y seleccionando otra.
5. En el cuadro de dilogo Preferencias despliega la lista Formato de salida y elige la
opcin Calidad de CD, MP3 (audio MP3). Clic en el botn 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 botn Extraer.
8. Una vez concluido el proceso de conversin se mostrar un mensaje indicando que ha

finalizado con xito. Si deseas abrir la carpeta destino haz clic en el botn Abrir. Para
cerrar este mensaje pulsa en el botn Cerrar.

292
9. Para reproducir el archivo MP3 final resultante puedes utilizar Audacity o cualquier
otro programa: VLC Media Player
Audio ::: Integracin HTML bsica de audio

293
3.9 Integracin HTML

bsica de audio

294
3.9 Integracin HTML bsica de audio

En este apartado se explica el procedimiento para integrar un audio en una pgina HTML
utilizando el reproductor PixelOut (http://www.1pixelout.net/code/audio-player-wordpressplugin/)
1. Descarga y descomprime el archivo pxelplayer.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 reproduccin pulsando en el botn play/pause que

aparece en el extremo derecho. En la barra se muestra el autor/ttulo del audio as
como la duracin del fragmento reproducido.
4. Regresa al explorador de archivos en la carpeta. Dentro de esta carpeta encontrars
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 utilzalo para abrir el archivo index.html

6. Clic en la pestaa Cdigo fuente.
7. Si deseas insertar el reproductor en otra pgina basta con copiar y pegar el cdigo
HTML: <object type > </object> y asegurarse de que el reproductor player.swf
se encuentra en la misma carpeta que esa nueva pgina.
<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, vers que al final del parmetro 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 conseguirs reproducir un audio distinto.
9. El reproductor de PixelOut admite personalizar su interfaz definiendo distintos
valores en las variables que aparecen en este parmetro FlashVars. Fjate que esta
cadena utiliza el formato variable=valor& donde &amp es la notacin HTML
del signo &.
autostart=yes . El reproductor se abrir automticamente e iniciar la

reproduccin 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 ratn 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 ratn 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 algn color para ver el aspecto que tomar el reproductor. Para
visualizar la pgina con los cambios pulsa en Guardar y luego en el botn Navegar.
11. Otra posibilidad ms fcil es acceder a esta pgina pixelout.html . Muestra un
interfaz que te permitir configurar las distintas opciones del reproductor. El
resultado final ser el cdigo de la etiqueta <object> que se puede copiar y pegar en
una pgina HTML para insertar en ella el reproductor. Recuerda que debers situar en
la misma carpeta el archivo player.swf con el reproductor y el archivo mp3 de audio.

296
Audio ::: Integracin HTML avanzada de audios

297

avanzada de audios

298
3.10. Integracin HTML de audios

3.10.1 Reproductor de MIDIS
Los archivos MIDI son archivos de extensin *.MID que contienen msica. Son de reducido
tamao 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 duracin.
En esta actividad se propone utilizar un reproductor creado con tecnologa 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 cancin y pulsa en el botn Play (Reproducir). Para detenerla haz clic en el
botn Stop (Detener).
4. Regresa al explorador de archivos en la carpeta miweb\midiplayer. Dentro de la
subcarpeta midi encontrars los archivos MIDI que se reproducen. En la carpeta
Scripts se encuentran los archivos de cdigo javascript auxiliares que necesita la
aplicacin para funcionar.
5. El archivo playMidi.swf es el reproductor Flash que se muestra en la pgina 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 nmero 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 nmero de orden de la cancin en la lista.
src=midi/bachto.mid. Define la ubicacin (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 cancin.
duration=11:14. Es la duracin del audio visible al seleccionarlo.
10. Para aadir/modificar/eliminar un MIDI basta con hacer lo propio con el
correspondiente archivo MIDI dentro de la carpeta midi (aadir 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 utilzalo para abrir el archivo index.html. Puedes editar esta y
personalizar su contenido: ttulo, texto e imgenes adicionales, etc. Otra posibilidad
es copiar y pegar a otra pgina las etiquetas HTML necesarias para que el reproductor
funcione en ella. Para ello activa la pestaa Cdigo fuente para acceder al cdigo
HTML y luego copia y pega:
Las siguientes etiquetas apuntan a los archivos con cdigo 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 pgina HTML a partir de la etiqueta body.
<script type="text/javascript">
init();
</script>
AC_FL_RunContent( </noscript>
Nota: Es importante respetar la estructura de archivos y carpetas resultantes de la

descompresin 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 aplicacin desarrollada por Jeroen Wijering (http://www.jeroenwijering.com/).
Se utiliza en muchos sitios web ya que permite la configuracin de mltiples parmetros y
admite la reproduccin de archivos mp3 simples y de listas de reproduccin.
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 estndar que se contemplan: MP3 simple, MP3 con imagen, Lista MP3
simple, Lista MP3 con imagen pequea y Lista MP3 con imagen grande.
3. La consola de reproduccin 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 reproduccin de
listas de mp3 tambin 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: pequea (120x120 pxeles) y grande (320x260 pxeles).
La pgina 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
reproduccin de audios con la siguiente informacin: ubicacin de cada archivo de
audio, de la imagen asociada, ttulo, autor, etc.

301
El fichero de javascript swfobject.js que asegura la integracin del reproductor

en la pgina HTML sin tener que hacer clic sobre l antes de interactuar con sus
botones.

7. Si deseas insertar el reproductor en otra pgina basta con copiar y pegar las
siguientes lneas de cdigo HTML:
<script type="text/javascript" src="swfobject.js"></script>
Esta lnea se sita entre las etiquetas <head> </head> de la pgina HTML para
asegurar referencia al cdigo javascript que asegura la correcta integracin del
reproductor.
MP3 simple
<div id="player1">This text will be replaced</div>

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 ubicacin 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 pxeles con que se
visualizar el reproductor.
MP3 con imagen

302

var so = new
SWFObject('mediaplayer.swf','mp2','320','280','7');
so.addVariable('displayheight','260');
so.addVariable('file','audios/danzahungara.mp3');
so.addVariable('image','images/brahms_large.jpg');
</script>
En la variable image se indica la referencia a la ubicacin del archivo de imagen que
se muestra durante la reproduccin 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

var so = new
so.addVariable('file','playlist1.xml');
</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 pxeles del
reproductor superior a 20 pxeles (su altura real) y en la variable displayheight el
valor 0 pxeles, entonces por debajo del reproductor se visualizar la lista de
reproduccin.

303
Lista MP3 con imagen pequea

var so = new
so.addVariable('displaywidth','120');
</script>
En la variable displaywidth se indica la anchura en pxeles que ocupar la imagen que
se sita a la izquierda de la lista de reproduccin.
Lista MP3 con imagen grande

var so = new
SWFObject('mediaplayer.swf','mp5,'320','400','7');
</script>

304
En la variable file se apunta al archivo playlist2.xml que contiene la informacin

sobre la lista de audios: ubicacin de archivos mp3, imgenes asociadas, ttulos,
autores, etc.
Para que el sistema funcione correctamente es necesario comprobar que en la misma
carpeta de la pgina html se encuentren los archivos swfobject.js y
mediaplayer.swf. Si se trata de una lista tambin debe incluirse el correspondiente
archivo xml. Adems deben ubicarse correctamente los archivos de imagen y de audio
respectivamente en las subcarpetas images y audios.
8. En la pgina mediaplayer.html dispones de un asistente que permite configurar las
distintas opciones del reproductor de Jeroen Wijering. El resultado final ser el
cdigo embed o bien el objeto swfobject que se puede copiar y pegar en una pgina
HTML para insertar en ella el reproductor. Para ello elige una opcin en la lista de
modelos de configuracin. Al seleccionarla se rellenarn automticamente los valores
de configuracin bsica 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 cdigo embed o bien el
cdigo swfobject.
Si deseas configurar otros parmetros ms avanzados pulsa en el botn configuracin
avanzada para introducir estos valores. No olvides pulsar en el botn recargar reproductor
para comprobar los cambios.

305
A continuacin se explica cada parmetro y la sintaxis de los archivos xml de las listas de
reproduccin.
Variables :
Altura imagen (displayheight). Establece la altura de la imagen en pxeles. Si no se

especifica valor, ser la altura del reproductor menos la consola de reproduccin (20
pxeles). Si defines valor nulo (0) se mostrar la lista de reproduccin por debajo de
la consola de reproduccin.
Ubicacin del archivo (file). Es la ubicacin del archive a reproducir. Puede ser un
archivo simple (MP3/JPG/SWF/PNG/GIF/FLV/RTMP) o una lista de reproduccin.
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 reproduccin.
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 automtico de lista (autoscroll). Si se marca esta casilla se mostrar una barra
de scroll si el nmero de elementos es demasiado grande.
Anchura de visualizacin (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
reproduccin ocupando esa anchura.
Barra de control ms grande (largecontrols). Al activar esta casilla se duplica el
tamao de visualizacin de la barra de control. Es especialmente til para usuarios
con dificultades visuales.
Mostrar logo (logo). Sita 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 dimensin anchura o altura- ms prxima manteniendo la
proporcin en fondo negro), Ajuste proporcional (se ajustan ambas dimensiones para
ocupar todo el espacio manteniendo la proporcin). 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 dgitos del contador (showdigits). Si se desmarca esta casilla no se mostrar
el tiempo de reproduccin
Mostrar ecualizador grfico (showeq). Si se activa esta opcin se mostrar un
ecualizador grfico sobre la parte inferior de la imagen durante la reproduccin.
Mostrar iconos de carga/play (showicons). Muestra el icono play en el centro de la
imagen para que el usuario pueda iniciar la reproduccin pulsando en l.
Miniaturas de la lista (thumbsinplaylist). Si se elige esta opcin para cada pista de la
lista de reproduccin se observar la vista previa de la imagen especificada en el
elemento image del archivo xml.

306
Variables de REPRODUCCIN.
Inicio automtico (autostart). Cuando se activa esta variable se logra que el

reproductor se inicia cuando se carga la pgina.
Longitud del buffer (bufferlength). Es el nmero de segundos durante los cuales un
archivo FLV (vdeo) ser almacenado en el bffer antes de iniciar su reproduccin. Es
una opcin interesante para conexiones de clientes lentas. El valor por defecto es 3
segundos.
Reproduccin 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
reproduccin. De esta forma se preserva el ancho de banda. Si se selecciona Una vez
cada item se reproducir una sla vez cada pista de la lista y al final se detendr. Si
se elige S se reproducir indefinidamente el audio o lista de reproduccin.
Tiempo de renovacin imgenes (rotatetime). Utiliza esta variable para configurar
el nmero de segundos que deseas que la imagen de una lista de imgenes se
muestre. Por defecto son 10 segundos. Una lista de imgenes es un XML donde se
especifican archivos de imagen (p.e. JPG) en lugar de archivos de audio. Esta opcin
no funciona en la reproduccin de un audio
Reproduccin aleatoria (shuffle). Si marcas esta casilla se reproducirn 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 INTERACCIN.
La configuracin de algunas variables de interaccin puede ser compleja y requiere ciertos
conocimientos avanzados de programacin. No obstante se recogen en este apartado a modo
de cita y al margen del curso. Para ms informacin consulta la pgina del creador del
reproductor Jeroen Wijering (http://www.jeroenwijering.com/)
MP3 de audio extra (audio). Especifica la ubicacin de un archivo mp3 externo que
se utilizar como banda sonora adicional. Se utiliza ms en la reproduccin de
archivos de vdeo FLV. De esta forma se pueden aadir comentarios de accesibilidad o
del propio autor del vdeo.
URL del script estadstico (callback). Define la ubicacin de un script (PHP/ASP) que
el reproductor llamar cada vez que un audio se inicie o detenga. Esto puede servir
para guardar estadsticas de uso. Para ms informacin consultar la pgina de Jeroen
Wijering.
URL archivo subttulo (captions). Establece la ubicacin del archivo de texto externo
que contiene los subttulos. El reproductor soporta formato SMIL y SRT muy utilizado
en el ripeado de DVDs.
Permitir javascript (enablejs). Si marcas esta opcin se activa la interaccin
javascript. Esta funcionalidad slo funciona en lnea e incluye control de
reproduccin, carga asncrona de archivos multimedia y recuperacin de informacin
de las pistas a javascript.
Botn Pantalla Completa (fsbuttonlink). Si activas esta opcin se mostrar un botn
para mostrar la reproduccin a pantalla completa. Esto slo 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 reproduccin.
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
reproduccin.
Enlace del clic sobre visor (linkfromdisplay). Si activas esta opcin al hacer clic
sobre la imagen (no slo sobre el logo) se navegar hasta la pgina indicada en el
parmetro 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 pgina.

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 opcin por defecto es automtico 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 opcin se fuerza que no
suene la pista de audio extra por defecto.
Usar subttulos por defecto (usecaptions). Al desmarcar esta casilla se fuerza que
los subttulos se oculten por defecto.
Usar pantalla completa flash9 (usefullscreen). Desmarca esta variable si no deseas
que se muestre el botn de pantalla completa en el reproductor.
Usar atajos de teclado (usekeys). Si activas esta opcin funcionarn ciertas teclas en
el reproductor: barra espaciadora (play/pausa) y teclas de flecha (moverse sobre los
audios de una lista).
Las listas de reproduccin.

El reproductor de Jeroen Wijering permite cargar un audio MP3 simple o una lista de
reproduccin.
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 ttulo de la cancin <title>, el autor <creator>, la ubicacin del
archivo <location> y de la imagen que acompaa <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 reproduccin.
5. Dentro de cada etiqueta <track> se pueden utilizar las siguientes etiquetas para cada
pista de audio:
<location> </location>. Indica la ubicacin del archivo de audio.

<title> </title>. Ttulo 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 reproduccin: XSPF (muy

utilizadas en Msica 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 integracin 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: botn, slim y extendido.
3. Mientras el modelo botn slo permite las opciones reproducir/parar, el interfaz

slim aade las opciones de control de volumen y de navegacin adelante/atrs en la
lista de audios y de control de volumen. El interfaz extendido permite mostrar la
lista de reproduccin y la imagen asociada a cada pista.
4. Regresa al explorador de archivos en la carpeta \miweb\xspfplayer. Dentro de esta
carpeta encontrars:
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.
Los reproductores de audio: xspf_player_slim.swf, xspf_player_button.swf y
xspf_player.swf (extendido).
La lista de reproduccin playlist.xspf en formato XSPF.

7. Si deseas insertar el reproductor en otra pgina basta con copiar y pegar el cdigo
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 pgina.

309
XSPF botn 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 botn tambin admite una lista de reproduccin.
XSPF slim con lista:
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:
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, vers que en el atributo data y en el parmetro movie
contienen la referencia al nombre del archivo MP3 (variable song_url=) o de la lista
de reproduccin 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
reproduccin: 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 (ttulo del
audio), creator (autor), location (ubicacin del archivo), image (imagen asociada) e
info (enlace para saber ms). Puedes modificar el contenido de este archivo para
crear una lista de reproduccin 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 ms fcil es acceder a esta pgina xspfplayer.html . Muestra un
interfaz que te permitir configurar las distintas opciones del reproductor. El
resultado final ser el cdigo de la etiqueta <object> que se puede copiar y pegar en
una pgina HTML para insertar en ella el reproductor. Recuerda que debers respetar
la estructura de archivos y carpetas anteriormente mencionados.

310

311
3.10.4 Diaporama: imagen y audio sincronizados

Un diaporama es una aplicacin donde se reproduce una grabacin sonora y un conjunto de
imgenes o diapositivas que se muestran de forma sincronizada con el audio. La forma ms
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 msica de fondo,
locuciones, efectos especiales, etc. El siguiente paso es decidir el instante de la reproduccin
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 encontrars:
La carpeta images que contiene los archivos JPG que se mostrarn en el
diaporama. En este caso su tamao es de 800x531 aunque el reproductor ajustar
la visualizacin de otros tamaos.
La carpeta Scripts que contiene el cdigo javascript necesario para integrar
adecuadamente el reproductor flash en el cdigo HTML.
La lista de diapositivas gallery.xml que contiene la informacin utilizada por el
reproductor.
El reproductor del diaporama: dplayer.swf
El archivo de audio musica.mp3 que contiene la banda sonora.

6. Si deseas insertar el reproductor en otra pgina basta con copiar y pegar el siguiente
cdigo HTML:

312
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
Esta lnea de cdigo declara la ubicacin del archivo AC_RunActiveContent.js que
contiene el cdigo javascript que integra el reproductor.
AC_FL_RunContent('width','640','height','505','title','dplaye
r','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/f
lash/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 cdigo inserta el reproductor en la pgina 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. Ttulo que se mostrar cuando se visualice la imagen.
cue. Es el instante durante la reproduccin de la pista de audio en que se
visualizar esa imagen. El formato es mm:ss.ddd (m=minutos, s=segundos y
d=milsimas).
<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 imgenes para crear un diaporama sobre otro tema distinto.
4. Vdeo
Vdeo y animaciones ::: Introduccin

314
4.1 Introduccin

315
4.1 Introduccin
4.1.1 Conceptos bsicos de vdeo digital
Dimensiones.
Es el tamao del video (ancho x alto) expresado en pxeles cuando se visualiza al 100%, sin
agrandar ni reducir. Los reproductores pueden mostrar un video a pantalla completa o con
una ampliacin del 200%, 300%, etc. En estos casos el video pierde calidad de imagen y esta
prdida depende del formato de archivo. Un video AVI puede tener cualquier ancho y alto
mientras que los estndares de VideoCD son 352 x 288 y de DVD 720 x 576.
Codec.
Acrnimo de "codificacin/decodificacin". Un cdec es un algoritmo especial que reduce el
nmero de bytes que ocupa un archivo de video. Los archivos codificados con un cdec
especfico requieren el mismo cdec para ser decodificados y reproducidos. Algunos de los
cdecs ms utilizados para el formato AVI son: DivX, XviD, CinePak, Intel Indeo 5, DV, etc.
Velocidad de transmisin (bitrate)
El bitrate define la cantidad de espacio fsico (en bits) que ocupa un segundo de duracin de
ese video. El video tendr ms 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 ms calidad en escenas muy cargadas o con mucho
movimiento y ahorra en aquellas ms estticas.
Fotogramas por segundo.
Un video resulta de la exposicin imgenes o fotogramas uno detrs de otro. Un parmetro de
la calidad del video es el nmero de fotogramas por segundo que muestra durante su
reproduccin. Este valor oscila entre 15 y 30. Por ejemplo los vdeos en DVD en Europa
exhiben 25 fotogramas por segundo (25 fps).
Fotogramas Clave.
Cuando se aplica un cdec de compresin a un video, se suele producir cierta prdida de la
informacin de sus fotogramas. Algunos fotogramas (los fotogramas clave) se almacenan
completamente en el archivo comprimido, mientras que el resto slo se guardan parcialmente.
En la descompresin, estos fotogramas intermedios se reconstruyen a partir de los fotogramas
clave.
Sistemas de televisin.
NTSC (National Television Standards Comit = Comit Nacional de Estndares de
Televisin). Cada fotograma est formado por 525 lneas y reproduce 30 fotogramas
por segundo. Se utiliza en Amrica del Norte, Centroamrica, Japn, etc.
PAL (Phase Alternation Line = Lnea Alternada en Fase): El vdeo PAL tiene 625 lneas
por fotograma y 25 fotogramas por segundo. Es el sistema ms extendido actualmente
en Europa.
SECAM (Squentiel Couleur Mmoire = Color secuencial con memoria). Muestra 625
lneas y 25 fotogramas por segundo. De origen francs, ha perdido mercado en Europa
a favor del sistema PAL.
Proporcin o ratio de aspecto.
Es la proporcin entre la anchura y altura de un video. Cuando se reproduce un video se suele
mantener por defecto esta proporcin para evitar deformacin de las imgenes. Por este
motivo cuando se elige la visualizacin a pantalla completa, aparecen franjas negras arriba y
abajo. Es habitual una relacin 4:3 para los videos domsticos (352x288 pxeles, 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 extensin especfica del archivo que lo contiene. Existen muchos tipos
de formatos de video. Aqu se citan algunos de los ms utilizados. Asimismo cada tipo de
archivo admite en cada momento un cdec de compresin distinto.
AVI (Audio Video Interleaved = Audio y Video Intercalado)
Es el formato estndar para almacenar video digital.
Cuando se captura video desde una cmara digital al ordenador, se suele almacenar
en este formato con el cdec 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 cdecs de compresin como CinePak, Intel Indeo 5, DV, etc. Los
cdecs con ms capacidad de compresin y una calidad aceptable son DivX y XviD.
El formato AVI puede ser visualizado con la mayora de reproductores: Windows Media,
QuickTime, etc. siempre y cuando se encuentren instalados en el equipo los
adecuados cdecs para cada tipo de reproductor.
Es ideal para guardar videos originales que han sido capturados de la cmara digital
(codificados con DV).
No es recomendable publicarlos en Internet en este formato por su enorme peso.
Los cdecs CinePak, Intel Indeo, DV, etc. no ofrecen una gran compresin. Los cdecs
DivX y XviD por el contrario consiguen una ptima compresin aunque se suelen
destinar sobre todo a la codificacin de pelculas de larga duracin.
MPEG (Moving Pictures Expert Group = Grupo de Expertos de Pelculas)
Es un formato estndar para la compresin de video digital.
Son archivos de extensin *.MPG *.MPEG.
Admite distintos tipos de cdecs de compresin: MPEG-1 (calidad CD), MPEG-2
(calidad DVD), MPEG-3 (orientado al audio MP3) y MPEG-4 (ms 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 cdec propio que evoluciona en versiones con bastante rapidez.
Este tipo de archivos tambin pueden tener extensin *.QT
Se recomienda utilizar el reproductor de QuickTime. Existe una versin 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 cdec MPEG-4 para la compresin de video.
Tambin puede tener extensin *.ASF
Slo se puede visualizar con una versin actualizada de Windows Media 7 o superior.
Esta aplicacin 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 cdec propio para comprimir el audio.
Este tipo de archivos tiene extensin *.RM y *.RAM.
Se visualiza con un reproductor especfico: Real Player. Existe una versin 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 vdeo en Internet.
Utiliza el cdec Sorenson Spark y el cdec On2 VP6. Ambos permiten una alta calidad
visual con bitrates reducidos.
Son archivos de extensin *.FLV.
Se pueden reproducir desde distintos reproductores locales: MPlayer, VLC media
player, Riva, Xine, et.
Opcin recomendada para la web por su accesibilidad. Al visualizarse a travs del
reproductor de Flash es accesible desde la mayora de los sistemas operativos y
navegadores web.
Los repositorios de vdeo ms conocidos en Internet utilizan este formato para la
difusin de vdeos: YouTube, Google Video, iFilm, etc.
Permite configurar distintos parmetros del vdeo para conseguir una aceptable
calidad/peso.
Admite streaming.
4.1.3 Qu es el streaming?
En la navegacin por Internet es necesario descargar previamente el archivo (pgina HTML,
imagen JPG, audio MP3, etc.) desde el servidor remoto al cliente local para luego visualizarlo
en la pantalla de este ltimo.
La tecnologa de streaming se utiliza para optimizar la descarga y reproduccin de archivos de
audio y video que suelen tener un cierto peso.
El streaming funciona de la siguiente forma:
Conexin 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 almacn
donde empieza a guardarlo.
Inicio de la reproduccin. Cuando el buffer se ha llenado con una pequea fraccin
inicial del archivo original, el reproductor cliente comienza a mostrarlo mientras
contina en segundo plano con el resto de la descarga.
Cadas de la velocidad de conexin. Si la conexin experimenta ligeros descensos de
velocidad durante la reproduccin, el cliente podra seguir mostrando el contenido
consumiendo la informacin almacenada en el buffer. Si llega a consumir todo el
buffer se detendra hasta que se volviera a llenar.
El streaming puede ser de dos tipos dependiendo de la tecnologa instalada en el servidor:
Descarga progresiva. Se produce en servidores web que disponen de Internet

Information Server (IIS), Apache, Tomcat, etc. El archivo de vdeo 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 ledo por el reproductor cliente, se iniciar en streaming en cuanto
se llene el buffer.
Transmisin por secuencias. Se produce en servidores multimedia que disponen de

un software especial para gestionar ms ptimamente el streaming de audio y vdeo:
Windows Media Server, Flash Communication Server, etc. La utilizacin de un servidor
multimedia ofrece mltiples ventajas frente al servidor web. Las ms destacadas son:

318
a. Mayor rapidez en la visualizacin de este tipo de contenidos.

b. La comunicacin 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 gestin del procesador y ancho de banda de la mquina del servidor ante
peticiones simultneas de varios clientes del mismo archivo de audio o vdeo.
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 garanta de una reproduccin ininterrumpida gracias al establecimiento de
una conexin de control inteligente entre servidor y cliente.
f. Posibilidad de distribucin de transmisiones de audio y vdeo en directo.
4.1.4 Optimizacin de archivos de video

Para optimizar el peso del archivo de video ser necesario editarlo para establecer alguno o
algunos de los siguientes parmetros:
En el Audio:
1)
2)
3)
4)
El cdec de compresin de audio utilizado: MPEG Layer 1, MPEG Layer 2, MP3, etc.
Resolucin. Establecer resoluciones ms pequeas: 32-bits, 16-bits, 8-bits, 4-bits, etc.
Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc.
Velocidad de transmisin (bitrate). Configurar bitrates ms bajos: 128 Kbps, 96 Kbps,
64 Kbps, etc.
5) Calidad estreo/mono. Reducir la calidad de stereo a mono
En el Video:
1) El cdec de compresin de video utilizado: MPEG-1, MPEG-2, MPEG-4, Intel Indeo,
Cinepak, DivX, etc.
2) Mtodo 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 transmisin (bitrate). Configurar bitrates ms bajos: 1000 Kbps, 768
kbps, 360 Kbps, etc.
4) Dimensiones. Cuanto ms pequea sea la altura y anchura en pxeles de los
fotogramas de un video, menos tamao ocupar su archivo.
5) Velocidad de fotogramas. Se puede reducir el nmero de fotogramas por segundo
que mostrar el video: 30, 24, 20, 16, etc.
6) Fotogramas Clave. Durante la compresin tambin se puede indicar cada cunto se
guardar un fotograma completo (fotograma clave): 24, 48, 96, 128, etc. Cuanto
mayor sea esta cadencia ms bajo ser el peso del archivo resultante.
Otros elementos que inciden en la optimizacin:
1) Duracin. Cuanto ms 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 ms adecuados
para publicar un video en Internet por su adecuada relacin calidad/peso y porque
admiten streaming. Los archivos *.AVI con cdecs de compresin baja son ideales para
guardar los videos originales. Los archivos *.AVI con cdecs DiVX-XviD son apropiados
para videos de pelculas de cierta duracin. Los archivos *.MPG con cdec MPEG-1 se
utilizan para crear Video-CDs. Los archivos *.MPG con cdec 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 emisin en directo. Los ms frecuentes son:
Una cmara DV (Video Digital) conectada al puerto IEEE 1394 del equipo. Con este
dispositivo se obtiene la mejor calidad porque la informacin de audio y video ya est
en formato digital llegando simplemente al ordenador a travs del mencionado puerto.
Conexin IEEE 1394 para videocmara digital
Una cmara web conectada a un puerto USB y un micrfono conectado a la entrada

MIC de la tarjeta de sonido.
Conexiones Cmara-USB y Micrfono-Tarjeta Audio
Una tarjeta sintonizadora de TV conectada a la seal de antena.

Una cmara o reproductor VHS conectado a una tarjeta de captura analgica. Este
proceso supone la conversin de video analgico a video digital.
Para disponer de una informacin ms completa de cmo conectar y configurar un dispositivo

de captura, consulta la documentacin que acompaa a cada hardware.
Vdeo y animaciones ::: Reproduccin de vdeos con VLC Player

320
4.2 Reproduccin
de vdeos con
VLC Media Player

321
4.2 Reproduccin de vdeos con VLC Player

4.2.1 Qu es VLC Media Player?
VLC Media Player es un reproductor multimedia, gratuito y multiplataforma. Sus
caractersticas ms destacadas son:
Soporta un gran nmero de formatos de audio y vdeo sin necesidad de instalar cdecs
adicionales: MPEG-1, MPEG-2, MPEG-4, DivX, MP3,OGG, MOV, RAM, AVI, FLV, etc.
Es una opcin muy interesante frente a otros programas comerciales para reproducir
CDs de msica, pelculas en soporte DVD o VdeoCD, etc.
Se puede utilizar como servidor de streaming en una red local o de banda ancha.
VLC Media Player es una aplicacin 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
pelculas en DVD.
4.2.2 Instalacin de VLC Media Player en Windows

Descarga y ejecuta el instalador del reproductor VLC Media para Windows: vlc-0.8.6dwin32.exe. Otra posibilidad es consultar su sitio web oficial: http://www.videolan.org y
descargar si procede la ltima versin.
archivo a una carpeta de tu disco duro o pendrive: VLC_Portable_0.8.6d.exe
4.2.3 Instalacin de VLC Media Player en Ubuntu

Desde el escritorio selecciona Aplicaciones > Aadir o quitar aplicaciones. En el cuadro de
dilogo Aadir o quitar aplicaciones introduce el trmino de bsqueda VLC. Marca la entrada
VLC Media Player y pulsa en el botn Aplicar Cambios.
Una vez instalado selecciona Aplicaciones > Sonido y vdeo > VLC media player y arrastra
este icono hasta el escritorio para disponer de un acceso directo.
4.2.4 Reproduccin de un archivo de vdeo 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 continuacin haz doble clic sobre el icono VLC Media Player situado en el escritorio
para iniciar este programa.
3. Se muestra la consola de reproduccin de VLC media player.

322
4. Selecciona Archivo > Abrir Rpido Archivo. En el cuadro de dilogo Abrir Archivo
despliega la lista Buscar en: para situarte en la carpeta donde has descargado el vdeo.
5. Clic sobre el archivo dteatro.flv y pulsa en el botn Abrir. Se reproducir el contenido de

este archivo de vdeo.
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 Rpido Archivo para visualizar otros formatos de vdeo: .mov, .wmv,
No admite el formato de RealPlayer.
Archivo > Abrir disco permite reproducir una pelcula en formato DVD o Video-CD.

323
Archivo > Abrir Directorio para indicar una carpeta del equipo cuyos archivos sern
reproducidos de forma secuencial.
Nota:
En Windows el reproductor por defecto suele ser Windows Media Player mientras
que en Ubuntu suele ser Totem
Vdeo y animaciones ::: Descarga de archivos de video

324
4.3 Descarga de archivos

de vdeo

325
4.3 Descarga de archivos de vdeo

En este apartado se exponen distintos procedimientos para descargar archivos de vdeo que se
estn visualizando dentro de una pgina web. De esta forma se pueden reutilizar en local o
bien en la intranet del centro logrando una visualizacin ms gil sin las limitaciones del
acceso a Internet.
4.3.1 Descarga con Firefox (Unplug)

Qu es UnPlug?
UnPlug es una extensin del navegador Mozilla Firefox que permite descargar y guardar en
local un video o audio que se muestra dentro de una pgina web. Esta extensin realiza un
chequeo de la pgina web mostrando todos los archivos multimedia que contiene y ofreciendo
un vnculo 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 vdeos: Youtube, Google Vdeo, Current TV, etc. Como veremos ms
adelante este plugin tambin permite descargar animaciones flash.
Instalacin de UnPlug
Para instalar una extensin o plugin en Mozilla Firefox se proponen dos mtodos alternativos.
Puedes elegir uno de los dos:
Mtodo 1: Instalacin en lnea
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 pgina de Firefox donde se muestra el catlogo de extensiones para

este navegador.
5. En el encabezado superior introduce el trmino Unplug y pulsa en el botn Buscar.
6. En la pgina de resultados de la bsqueda, haz clic en el enlace UnPlug para acceder

a su pgina.
7. Una vez situados en la pgina de UnPlug haz clic en el botn Instalar ahora

327
8. Se muestra el acuerdo de licencia. Pulsa en el botn Aceptar e Instalar.
9. Se muestra el cuadro de dilogo Instalacin de software. Transcurridos unos

segundos se activa el botn Instalar ahora. Pulsa en este botn.

328
10. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botn

Reiniciar Firefox. De esta forma la extensin de activar al reiniciar el programa.
Mtodo 2. Instalacin desde archivo local

1. Descarga el archivo unplug-1.6.06.xpi. Otra posibilidad es descargar la ltima versin
de esta extensin desde Internet:
http://unplug.mozdev.org/installation.html
2. Abre Firefox
3. Selecciona Archivo > Abrir archivo
4. En el cuadro de dilogo Abrir archivo localiza el archivo unplug-1.6.06.xpi y pulsa en
el botn Abrir.
5. Se muestra el cuadro de dilogo Instalacin de software. Transcurridos unos
segundos se activa el botn Instalar ahora. Pulsa en este botn.
6. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botn
Reiniciar Firefox. De esta forma la extensin 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 vdeos. Su
direccin es: http://www.youtube.com. El usuario puede subir un vdeo 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 slo necesita disponer del plugin de Adobe
Flash instalado en su navegador web para poder visualizar un vdeo. Youtube se ha
convertido en un repositorio de vdeos muy popular debido, sobre todo, a la posibilidad de
alojar vdeos personales de manera sencilla y a su interfaz gil para buscar y visionar los
documentos videogrficos de los dems.
1. Abre el navegador web Firefox
2. Visita la web de Youtube en: http://www.youtube.com
3. Introduce como trmino de bsqueda Picasso y pulsa en el botn Search (Buscar).

329
4. En la pgina de resultados se mostrarn los vdeos cuyas etiquetas contengan la

palabra o palabras introducidas.
5. Pulsa, por ejemplo, sobre el enlace Pablo Picasso con la descripcin Picasso
painting live (Picasso pintando en directo). Su URL directa es:
http://www.youtube.com/watch?v=7vgAYTC9bRY
6. Pulsa en el botn de Unplug que aparece en la barra de herramientas del navegador o

selecciona Herramientas > Unplug
7. Se mostrar una pgina con la descripcin de todos los elementos multimedia

embebidos en la pgina web actual.
8. Clic en el botn Save (Guardar) correspondiente al primer elemento Tipo: Vdeo
Flash.

330
9. En el cuadro de dilogo 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
11. Al cabo de unos instantes se habr descargado el archivo de vdeo. Para terminar
pulsa en el botn Cerrar de Unplug que aparece en la esquina superior derecha.
12. Para reproducirlo en local inicia VLC Media Player, selecciona Abrir archivo rpido
para navegar hasta la carpeta anterior y seleccionar el archivo picasso.flv.
4.3.2 Volcados de streaming con VLC

Una de las caractersticas del streaming es que desde el reproductor o navegador no puede
descargarse en local el archivo de vdeo que est visualizando. En este contexto tiene
aplicacin la utilizacin de VLC Media Player.
Descarga de vdeos 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 vdeo que te interesa.

331
Para Windows
3. Clic derecho sobre el reproductor donde se est mostrando la pelcula y en el men
contextual que se muestra elige la opcin Propiedades.
Pulsa y arrastra para seleccionar la ruta del archivo que se muestra en Ubicacin
dentro de la pestaa Archivo.
A continuacin haz clic derecho sobre esta seleccin 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 opcin Copiar. Esta accin copiar la URL
del vdeo que se est mostrando.
Para ambos sistemas
4. Abre el programa VLC Media Player
5. Selecciona Archivo > Abrir volcado de red
6. En la pestaa Red marca la opcin 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 direccin antes copiada del vdeo elegido.

332
7. En la seccin Opciones Avanzadas de esta pestaa marca la opcin Volcado/Salvar y

a continuacin pulsa en el botn Opciones
8. En el cuadro de dilogo Volcado de salida, en la seccin Outputs marca Archivo. A

continuacin pulsa en el botn 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 vdeo de Windows Media Video la extensin ser: WMV. Marca la opcin Entrada
de volcado raw y pulsa en el botn OK para guardar esta configuracin.
9. Desde el panel Abrir pulsa en el botn Ok para iniciar la descarga. La consola de VLC
Player mostrar el progreso del proceso de descarga.
10. Cuando hayas terminado podrs 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. Tambin podrs utilizar
VLC Media Placer para reproducirlo mediante Archivo > Abrir.
4.3.3 Sitios web para descarga de vdeos

Actualmente Youtube es el lder en portales con servicio de vdeo en lnea. Sin embargo cada
vez proliferan ms los sitios web de este tipo donde es posible subir y visualizar contenidos de
vdeo. En algunos de ellos tambin se pueden descargar vdeos al disco duro local para
visualizarlo con los alumnos en aulas sin conexin a internet y tambin asegurando la
actividad frente a las limitaciones de una conexin 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 continuacin se citan algunos de los servicios de vdeos ms conocidos, el formato de vdeo
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 Vdeo
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

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
334

VLC Media Player

24. Videoteca CUDI de Mjico
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
335
Vdeo y animaciones ::: Captura de vdeo

336
4.4 Captura de vdeo

337
4.4 Captura de vdeo

En este apartado se explica el procedimiento para capturar vdeo de una cmara 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.
Instalacin de Windows Movie Maker
Se trata de una aplicacin integrada dentro de Windows XP Service Pack 2 o Windows Vista
y por ello slo es posible utilizarlo si tenemos instalado en el ordenador esta versin 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 debers visitar la web de Microsoft para descargar el
SP2 e instalarlo a continuacin: 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 botn Inicio, luego en el botn 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. Mantn 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 cmara DV

1. Abre el programa Windows Movie Maker.
2. Conecta la cmara DV al puerto IEEE 1394 del ordenador. Enciende la cmara y activa
en ella el modo VCR para reproducir el video tomado.
3. En el panel Tareas de pelcula haz clic en la entrada Capturar desde dispositivo de
video. Si no est visible este panel, haz clic en el botn Tareas de la barra de
herramientas.
4. Si dispones de ms de un dispositivo de captura de video, se mostrar el cuadro de

dilogo Dispositivo de captura de vdeo. En la lista Dispositivos disponibles, haz clic
en la cmara DV. Si slo tienes instalado este dispositivo, esta ventana no aparecer.
5. En el cuadro Introduzca un nombre de archivo para el vdeo capturado, escribe el
nombre del archivo de vdeo capturado. Por ejemplo: MiVideo001. En el cuadro
Seleccione una ubicacin para guardar el vdeo capturado, selecciona la ubicacin
en la que desea guardar el vdeo o haz clic en Examinar para seleccionar una nueva
ubicacin. Windows Movie Maker guarda por defecto las capturas en la carpeta Mis
vdeos situada dentro de la carpeta Mis documentos. Dejamos esta opcin por
defecto y pulsamos en Siguiente>

339
6. En el cuadro Configuracin de vdeo, selecciona la configuracin de vdeo que deseas

utilizar para capturar el vdeo y audio. En este caso vamos a seleccionar la opcin
Mejor calidad para reproducir en mi equipo (recomendado) porque ofrece una
razonable relacin calidad/peso de archivo para publicar posteriormente. Clic en
Siguiente>

340
Nota:
Para guardar el video con la mxima calidad posible debes elegir la opcin Formato de
dispositivo digital (AVI DV). El archivo generado tendr una calidad mxima aunque cada
minuto guardado ocupar entre 190 y 210 Mb. Este formato es ms idneo para guardarlo
en un dispositivo de cinta o para tomarlo como partida para luego obtener otros formatos
ms ligeros e idneos para la web.
Para probar otras calidades de captura, selecciona Otras opciones y en la lista
desplegable elige otras configuraciones.
7. En el cuadro Mtodo de captura, puedes elegir dos tipos de captura:
Capturar toda la cinta automticamente. Se rebobina automticamente la
cinta de la cmara hasta el principio y se captura su contenido completo. Esta
captura finaliza cuando se alcanza el final de la cinta o cuando pulses el
botn Finalizar.
Capturar partes de la cinta manualmente. En este caso podrs 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 grabacin para
capturar. Por ello activa la segunda opcin, asegrate de que est elegida la casilla
Mostrar vista previa durante la captura y pulsa en el botn Siguiente>
8. En la ventana Capturar vdeo se muestra una Vista previa. Utiliza los controles de
reproduccin situados debajo: Reproducir, Pausa, Stop, Ir al principio, Retroceso
rpido, Avance rpido e Ir al Final. Con ellos podrs situarte al inicio del fragmento
de video que deseas grabar.

341
9. Una vez situado en el inicio deseado, en la consola Controles de cmara DV, haz clic
en el botn Reproducir. Vers su contenido en la ventana Vista previa.
10. Asegrate de que la casilla Crear clips cuando finalice el asistente est activado. Si
deseas detener la captura automticamente despus de transcurridos XX minutos
entonces debes activar la opcin Capturar lmite de tiempo (hh:mm) e introduce
este valor. Por ejemplo: 00:01, para capturar slo 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 continuacin pulsa en el botn Iniciar captura. Observa que durante el proceso de
captura se muestra el tiempo de Video capturado y el Tamao del archivo de vdeo
que se va formando.
12. Si no has elegido captura con lmite de tiempo, para detener la captura elige Detener
captura.
13. Para terminar clic en el botn Finish (Terminar).
14. Tras unos segundos de espera se muestra el clip o clips de video que componen la
captura. Estn situados dentro de una coleccin con el mismo nombre que el
proporcionado inicialmente. En este caso MiVideo001.

342
15. El contenido de esta nueva coleccin se guardar en un nico archivo *.AVI *.WMV
situado en la carpeta Mis Vdeos dentro de la carpeta Mis documentos.
16. Si deseas eliminar una coleccin, pulsa en el botn Colecciones de la barra de
herramientas; en el panel izquierdo selecciona la coleccin elegida y pulsa la tecla
Supr. Tambin debes utilizar el Explorador de archivos de Windows para situarte en
la carpeta Mis documentos > Ms vdeos , elegir el archivo del mismo nombre que
contiene los recursos de video de esta coleccin y pulsar la tecla Supr.
17. Asegrate de que en el panel inferior est activada la vista Escala de tiempo. Si no es
as pulsa en el botn Mostrar escala de tiempo que aparece en este panel.
18. Desde el panel de Contenidos que muestra los elementos de la coleccin arrastra y
suelta los clips de vdeo sobre la pista de Video. Para eliminar un clip de la Escala de
tiempo, seleccinalo previamente y pulsa la tecla Supr.
19. Quizs sea necesario pulsar reiteradamente el icono de la lupa + para visualizar la
escala de tiempo a un tamao adecuado.
20. Pulsa y arrastra hacia la izquierda el selector de recorte del clip de vdeo situado en
la pista Video para definir la duracin adecuada de cada clip
343

21. Coloca sobre la lnea de tiempo los clips de video uno detrs de otro para
confeccionar la pelcula.
22. Para guardar la pelcula final, haz clic en la entrada Guardar en el equipo situada en
el Panel de pelcula o bien elige Archivo > Guardar archivo de pelcula > Mi PC
23. Se muestra el Asistente para guardar pelcula donde debes introducir el nombre de
la pelcula, por ejemplo: mivideo , y la carpeta donde se guardar el archivo.
Dejando la opcin por defecto se almacenar en la carpeta Mis documentos > Mis
vdeos. Clic en el botn Siguiente >
24. En la cuadro Configuracin de pelcula, haz clic en Mostrar ms opciones para

visualizar las distintos configuraciones de publicacin. Activa Otras opciones y en la
lista desplegable elige Vdeo para banda ancha (340 Kbps). Observa que en la
esquina inferior izquierda de este cuadro se muestran los Detalles de la
configuracin elegida en cada caso: Tipo de archivo, velocidad de bits, tamao de la
pantalla, relacin de aspecto y fotogramas por segundo. Clic en Siguiente.

344
25. Cuando se haya completado con xito la publicacin se mostrar un nuevo cuadro.
Marca la casilla Reproducir pelcula al pulsar Finalizar para que sta se muestre en
el reproductor de Windows Media inmediatamente despus de haber pulsado el botn
Finalizar.
26. Recuerda que el archivo de video se ha guardado con el nombre que has definido
dentro de la carpeta Mis documentos > Mis vdeos.
4.4.2 Kino para Ubuntu Linux

Kino es un editor de vdeo digital para Linux que permite capturar vdeo de una cmara DV,
recortar los clips creados, aadir algunos efectos y exportar a un formato de vdeo: MPEG-1,
MPEG-2, VCD, SVCD o DVD.
Instalacin de Kino
1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Aadir o quitar
2. En el panel Aadir o quitar aplicaciones introduce kino en la casilla de bsqueda y
pulsa la tecla enter.
3. Marca la casilla de activacin en la entrada Kino-Editar vdeos DV y pulsa en el botn
Aplicar cambios.
4. Una vez instalado cierra todas las ventanas de la instalacin.
5. Si deseas disponer de un icono de acceso directo de Kino sobre el escritorio
selecciona Aplicaciones > Sonido y Vdeo > Kino y arrstralo hasta el escritorio.

345
Configuracin 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 vdeo. Esta operacin slo se realiza una vez.
1.
2.
3.
4.
Selecciona Aplicaciones > Accesorios > Terminal

Teclea sudo chmod 666 /dev/raw1394
Te solicitar la contrasea de root. Introduce esta password.
Cierra la ventana de terminal.
Instalacin del paquete mjpegtools

Para que Kino pueda realizar la exportacin de vdeo al formato MPEG es necesario
instalar en nuestro sistema el paquete mjpegtools. Esta operacin slo se realiza una vez.
1. Elige Sistema > Administracin > Gestor de paquetes Synaptic
2. Pulsa el botn Buscar e introduce mjpegtools y pulsa en el botn Buscar.
3. Marca mediante doble clic el paquete mjpegtools aceptando la instalacin de los
paquetes dependientes.
4. Clic en el botn Aplicar
5. En el cuadro de dilogo de Resumen selecciona Para ser instalado y luego pulsa en el
botn Aplicar.
6. Una vez finalizada la instalacin cierra el gestor de paquetes.
Abrir Kino
1. Selecciona Aplicaciones > Sonido y Vdeo > 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 ms habitual.
3. StoryBoard. En este cuadro se situarn los clips de pelcula o imgenes
capturados o importados.
4. Visor. Mostrar la reproduccin del clip de pelcula seleccionado en el panel
StoryBoard.
5. Barra de tareas. Cada botn de esta barra permite realizar las tareas ms
habituales durante la edicin de una pelcula.
6. Barra de reproduccin. Incluye los controles habituales para la reproduccin del
clip de vdeo elegido en el panel Storyboard o bien para manejar la cmara DV
durante el proceso de captura.
7. Barra de estado. Muestra informacin de inters durante la edicin del vdeo.
Capturar video de cmara DV

1. Conecta la cmara DV al puerto IEEE 1394 del ordenador. Enciende la cmara y activa
en ella el modo VCR para reproducir el video tomado.
2. En la barra de tareas pulsa en el botn o pestaa Captura.
3. Kino guarda por defecto el video capturado en un archivo de nombre capture y
extensin
.dv
en
la
carpeta
personal
del
usuario
del
sistema:
/home/<usuario>/capture.dv . Si deseas modificar el nombre o la ruta pulsa en el
botn Examinar situado a la derecha del cuadro de texto Fichero.
4. Utiliza los controles de reproduccin (al principio, hacia atrs, reproducir, pausa,
stop, hacia delante o al final) de la propia cmara o de la barra de control de
reproduccin de Kino para desplazarse por la cinta grabada de la cmara y situarse en
el punto de inicio de la captura.

347
5. Inicia la reproduccin desde la cmara y cuando aparezca en el visor de Kino pulsa en

el botn 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 botn 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 vdeo
1. En el panel Storyboard pulsa sobre el clip de video para seleccionarlo.
2. Sobre el panel de tareas derecho haz clic en el botn Recortar.
3. Utiliza los controles de reproduccin para visualizar el clip de vdeo

348
4. Durante la reproduccin, en el instante que estimes oportuno, debes pulsar en el

botn Ajustar el punto de entrada a la posicin inicial para definir el punto inicial
del clip de vdeo. Idem con el botn Ajustar el punto de salida a la posicin inicial
para establecer el punto final del clip de vdeo.
5. Otra posibilidad para definir el fragmento de clip de pelcula es arrastrar los

marcadores de entrada y salida sobre la lnea de tiempo. Si necesitas mayor exactitud
puedes definir los valores numricos de estos puntos introducindolos por teclado o
bien pulsando en los botones de incremento/decremento adjuntos.
6. Para verificar el fragmento seleccionado puedes reproducir el clip de pelcula
activando previamente el botn de reproduccin continua del fragmento.
7. Para aplicar el recorte elegido pulsa en el botn Aplicar.

349
Exportar el archivo de vdeo

1. El video final se construir a partir de la secuencia de clips de pelcula situados de
arriba hacia abajo en el panel Storyboard.
2. Para exportar el vdeo final pulsa en el botn Exportar en la barra de tareas.
3. Clic en la pestaa MPEG.
4. En el cuadro de texto Fichero pulsa en el botn 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 Genrico o bien 3 MPEG2

Genrico. A continuacin pulsa en el botn Exportar.
6. Al cabo de unos instantes se habr creado el archivo mivideo.mpeg en la carpeta
indicada.
Reproducir el vdeo final
1. Elige Aplicaciones > Sonido y vdeo > 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 reproduccin de VLC Media
Player.
4. Al cabo de unos instantes comenzar la reproduccin del vdeo a travs de VLC media
player.
Vdeo y animaciones ::: El DVD como fuente de vdeo

350
4.5 El DVD como

fuente de vdeo

351
4.5 EL DVD COMO FUENTE DE VDEO

4.5.1 Extraccin de vdeo de un DVD con AutoGordian (Windows)
4.5.1.1 Introduccin
En este apartado se propone un procedimiento para convertir el vdeo de un DVD a un archivo
AVI con cdec DivX o XviD. A partir de este AVI es posible extraer un fragmento y convertirlo
en un formato ms propio de publicacin web: FLV, WMV, MOV o RAM. Otra posibilidad es la
grabacin del archivo AVI resultante en un CD-ROM utilizando un programa de grabacin de
CDs. Esta segunda opcin es habitual en la realizacin de copias de seguridad de DVDs. En el
mercado actual casi todos los reproductores DVD incorporan la prestacin de la lectura de CDs
y DVDs con archivos AVI DivX y XviD.
Nota importante:
El software e instrucciones recogidas en este captulo se proponen como mtodo para realizar
copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no
comercial. En cualquier caso esta informacin NO se expone para ser usada como herramienta
para vulnerar materiales con copyright. La utilizacin que se efecte, total o parcial del
archivo de vdeo 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 conversin de una pelcula de DVD en otro formato no se puede realizar a partir de la
unidad lectora de DVDs. El elevado nmero de accesos que esta operacin necesita podran
daar 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
operacin no supone ninguna prdida en la calidad del vdeo.
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 versin 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 conversin 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 versin 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.
2.
3.
4.
5.
6.
Copiar el DVD al disco duro con DVD Decrypter.

Cargar los archivos originales.
Seleccionar pista de audio y subttulos.
Definir tamao del fichero.
Configurar parmetros avanzados.
Crear pelcula.
A continuacin 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 aparecern 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 estn instalados los drivers ASPI correspondientes a esa unidad DVD. ASPI
significa Advanced SCSI Programming Interface y es el software que gestiona la
comunicacin 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 denominacin 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 versin 98.
Disco DVD bloqueado. En alguna ocasin ser necesario, antes de ejecutar DVD
Decrypter, introducir el disco en el lector y a continuacin 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 (captulos,
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 mostrarn los contenidos del DVD: (Chapter 1, 2, =

Captulo 1, 2, ) en lugar de los archivos.
5. Al activar el modo IFO, DVD Decrypter selecciona automticamente la pista de mayor

duracin que es la que suele contener la pelcula. El resto de pistas se corresponden
con los crditos, tomas falsas y extras que acompaan. En la pestaa Input (Entrada)
comprueba que est seleccionada la pelcula (la pista de mayor duracin) y que
debajo se encuentran seleccionados todos los captulos (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 guardarn los contenidos del DVD. Por
ejemplo en la carpeta C:\video o bien D:\video si dispones de un segundo disco duro
o particin.
7. Es importante realizar la siguiente comprobacin. En la barra de mens de DVD
Decrypter selecciona Tools > Settings (Herramientas > Configuracin). En la pestaa
IFO Mode (Modo IFO) dentro de la seccin Create Additional Files (Crear Archivos
Adicionales), comprueba que la casilla Stream Information (Informacin de Stream)
est activada. Esto producir en el disco duro un fichero de texto con toda la
informacin del DVD necesaria para que AutoGK concluya con xito.
8. Desde la ventana principal de DVD Decrypter, pulsa en la pestaa Stream Processing

(Procesamiento del Flujo). Se puede activar la casilla Enable Stream Processing
(Permitir Procesamiento del Flujo) y desmarcar, por ejemplo, el audio en ingls para
que slo se copie el audio en espaol. Para extraer del DVD slo el vdeo o slo el
audio, activa la casilla Enable Stream Processing, seleccionaramos slo la pista
deseada y en el rea Stream: N/A que aparece en el panel inferior activamos la
opcin Demux. Si eliges un audio AC3, se crear un archivo de audio AC3; si eliges un
vdeo, se crear un MPEG-2 sin audio; si eliges una pista de subttulos (Subtitle) se

354
crearn dos archivos: IFO y VOB (son subttulos en modo imagen que luego se puede
pasar a texto con la aplicacin SubRip). En un principio se recomienda dejar
activadas todas las pistas.
9. En la pestaa Stream Processing se muestran los principales datos del DVD:

Dimensiones del vdeo: 720x576
Proporcin: 16:9
Sistema de vdeo: PAL.
Nmero de la pista de audio en Espaol: 0x81 (pista 2 en el orden de
arriba/abajo).
10. Para iniciar el proceso pulsa en el botn Decrypt (Desencriptar).
11. Una vez finalizado el proceso se mostrar el mensaje Operation Successfully

Completed! (Operacin Completada con xito). Pulsa en el botn Aceptar.
12. Cierra la ventana del programa DVD Decrypter.

355
Paso 2. Cargar los archivos originales

1. Abre Auto Gordian Knot.
2. Como podrs observar AutoGK es un programa que simplifica en 4 pasos (steps) la

conversin 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 subttulos).
Step 3: Select output size (Paso 3: Elegir tamao de salida).
Step 4 (optional): advanced parameters (Paso 4 opcional-: parmetros
avanzados).
3. En la seccin 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 dilogo 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 botn Aceptar. Observa que cuando AutoGK detecta los archivos
de DVD situados en esta carpeta, en el cuadro inferior de esta seccin muestra la
informacin del vdeo. En este caso: PAL 720x576 16:9 25 fps
6. En el cuadro de dilogo Output file: (Archivo de Salida), se completa
automticamente con el mismo nombre de archivo y la extensin *.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 dilogo 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 aadir automticamente la extensin AVI. Pulsa en el
botn Aceptar para concluir.
Paso 3. Seleccionar pista de audio y subttulos
1. En la seccin Step 2: Select audio track and subtitle track. (Paso 2: Elegir pista de
audio y pista de subttulos), podrs seleccionar el audio/audios y tambin los
subttulos.
2. En la lista Audio track(s) (Pistas de Audio), selecciona la pista o pistas de audio que
deseas exportar al archivo de vdeo final. Pueden existir varias procedentes del DVD.
Las pistas disponibles en esta lista dependern de las ofrecidas por el DVD original y
del tipo de importacin realizada con DVD Decrypter. Si no deseas incorporar no
marques ninguna pista.
3. En la lista Subtitle track(s) (Pista de Subttulos) elige No Subtitles (Ningn Subttulo).
En este cuadro podras elegir una de las pistas de subttulos disponibles.
Paso 4. Definir el tamao del fichero
1. En la seccin Step 3: Select output size (Paso 3: Elegir tamao de salida), podemos
seleccionar el tamao final que ocupar el archivo. Cuanto mayor sea, mejor ser la
calidad del archivo final.
2. Activa la opcin Predefined size (Tamao 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 opcin ya que suele ofrecer una relacin peso/calidad muy
interesante. Al final obtendremos tantos ficheros como CDs hayamos marcado. Esto
permitir grabar en CD los archivos resultantes de esta conversin.
3. Si seleccionas la opcin Custom size (MB) (Tamao personalizado (MB)), podrs
definir el tamao que tendr la pelcula final. AutoGK crear un archivo AVI con este
tamao y si es superior a 700 Mb, tambin 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 opcin Target Quality (in percentage) (Calidad Destino (en
porcentaje)), podrs seleccionar el % de calidad que tendr el archivo final con
independencia del peso del archivo.
Paso 5. Configurar parmetros avanzados
1. En la seccin Step 4 (optional): advanced parameters (Paso 4 opcional-: parmetros
avanzados), podremos configurar opcionalmente algunos parmetros de la pelcula
final. Pulsa en el botn Advanced Settings (Configuracin avanzada).
En el botn Advanced Settings se accede a la configuracin de los parmetros avanzados

2. En el cuadro Advanced Options (Opciones Avanzadas) se puede configurar:
Output resolution settings (Configuracin Resolucin Vdeo). Permite definir la

anchura o resolucin horizontal del vdeo (la vertical ser calculada automticamente
en funcin de la proporcin de la pelcula). Si se selecciona Auto width (Anchura
automtica), AutoGK calcular la resolucin ms ptima en funcin de un test de
compresibilidad. Es la opcin recomendada. Si se elige Minimum width (Anchura
mnima) o bien Maximum width (Anchura mxima) y en el contador derecho se define
una anchura por ejemplo, 640 pxeles- entonces la resolucin horizontal que utilizar
AutoGK para crear la pelcula final ser como mnimo o como mximo
respectivamente el valor indicado. Si marcas la opcin Fixed width (Anchura Fija), la
pelcula tendr exactamente como resolucin horizontal la cantidad de pxeles
indicada.
Output audio type (Tipo de Audio de Salida). Permite definir el tipo de audio que
deseamos en la pelcula: AC3, VBR MP3 (bitrate variable) o bien CBR MP3. En la
mayora de los casos la opcin recomendada es Auto. Si eliges la opcin Auto
(Automtica), 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 includo dos pistas de audio y aqu hemos configurado un tipo concreto de
audio, ambos tendrn 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
Cdec. Se puede usar cualquiera de los dos: DivX y XviD. Es necesario que el cdec
elegido est instalado en el equipo. Recuerda que al instalar Auto Gordian Knot el
cdec de XviD ya se instala directamente porque viene includo en el paquete
mientras que DivX (versin Create) es necesario descargarlo e instalarlo aparte.
Subtitle Options (Opciones de SubTtulos). Este apartado slo es necesario
configurarlo si hemos includo subttulos en la pelcula final. Si marcas la opcin
Display only forced subtitles (Mostrar solamente subttulos forzados) slo se
mostrarn los subttulos forzados, es decir, aquellos que se muestran siempre en la
pelcula aunque no tengamos activados los subttulos. Ejemplo: Traduccin al espaol
o ingls del discurso de un personaje que habla en un tercer idioma y cuyo contenido
se considera importante para el desarrollo de la accin. En el paso 2 tendramos que
haber selccionado la pista de subttulos en el idioma adecuado. La opcin Use
external subtitles se refiere a la posibilidad de cargar los subttulos de un archivo
externo pero no funciona bien en todos los reproductores por lo que conviene no
activarlo.
3. Si pulsas en el botn Preview (Vista previa), tras cierta espera, podrs ver una vista
previa del aspecto final del vdeo pero sin el audio.
Paso 6. Crear pelcula

1. Cuando se ha finalizado la configuracin de todos los parmetros, haz clic en el botn
Add Job (Aadir Tarea).
2. En la Cola de Tareas (Job queue) aparecer una nueva entrada con informacin del
nombre del archivo AVI final, su carpeta de ubicacin y una casilla de verificacin
activada.
3. Una vez introducida esta tarea en la Cola de Tareas podemos cerrar AutoGK y
continuar en otro momento con la conversin definida. Otra posibilidad es abrir otro
DVD para aadir una segunda tarea de conversin a la lista. En cualquier caso la
codificacin no comenzar hasta que no se lo indiquemos.
4. Para comenzar con la creacin de la pelcula AVI final pulsa en el botn Start (Inicio).
5. AutoGK ir abriendo y cerrando programas segn lo vaya necesitando para realizar las
distintas partes del proceso: creacin del proyecto con DGIndex, test de
compresibilidad, compresin con VirtualDubMod, audio con BeSweet, etc. En la

359
ventana de eventos (Log Window) irn 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 botn Start (Inicio) el proceso ya est automatizado y es

necesario que se realice sin pausas. Si durante el transcurso del mismo pulsas en el
botn Abort (Detener) habra que empezar desde el principio en la siguiente tentativa.
7. La duracin de la conversin depender de la duracin del DVD original y de las
caractersticas del equipo (procesador, memoria RAM, disco duro, etc.). A ttulo
orientativo, por ejemplo, un DVD con una pelcula de 2 horas de duracin, 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 opcin 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 pelcula
1. Cuando ha finalizado la conversin, 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 raz del disco duro C: D:
2. Con intencin de ahorrar espacio en disco y una vez terminado con xito el proceso
de conversin DVD-AVI, conviene eliminar la carpeta temporal auto_gk que se ha
creado en la misma carpeta donde se ha guardado este AVI. Tambin conviene borrar
los archivos *.VOB que se han generado con DVD Decrypter.
3. Para visualizar el video arrstralo y sultalo sobre una ventana de VLC Media Player.
Este reproductor puede leer archivo AVI codificados con Xvid.
Nota:
La mayora de los reproductores de DVD actuales reconocen el formato DivX y XviD.
Comprueba en la documentacin del tuyo si es compatible con estos formatos. Algunos
modelos suelen mostrar incluso en su carcasa exterior el logo de DivX para indicar esta
caracterstica. 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 Introduccin
Chopper XP es una aplicacin que permite extraer fcilmente un fragmento de cualquier DVD.
Es un cortador de archivos .vob donde a travs 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 vdeo que luego se
convertir a FLV utilizando Super
4.5.2.2 Instalacin de Chopper XP
1. Descarga y descomprime el archivo chopperXP.exe en una carpeta de tu equipo o
pendrive. Es la versin 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 extraccin obtendrs el archivo dteatro.vob. Se trata de un
archivo VOB extrado de la carpeta VIDEO_TS de un DVD de vdeo. La elevada calidad
de un archivo .vob condiciona que tenga una corta duracin para evitar un elevado
tamao de archivo a descargar.
2. Abre Chopper XP
3. Selecciona File > Open vob (Archivo > Abrir vob)

361
4. En el cuadro de dilogo 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 botn Abrir.
5. En la consola de Chopper pulsa en el botn play para iniciar la reproduccin 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 botn Mark In en el
instante que se considere de la reproduccin. Para marcar el final del fragmento
pulsa en el botn 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

botn Guardar.
10. Durante el proceso de extraccin se mostrar la barra de progreso del cuadro de
dilogo Extracting vob (Extrayendo vob) .
11. Al finalizar aparece el mensaje File extraction successful (Extraccin de archivo con
xito). Pulsa en el botn Aceptar.
Nota:
Chopper XP puede leer directamente un archivo .vob de la carpeta video_ts de un
dvd aunque la opcin ms 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 Conversin de formato VOB a FLV

El formato *.VOB tiene una calidad y peso muy elevados para ser utilizados en la publicacin
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)
(Aadir 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 botn Abrir.

364
4. Select the Output Container (Elige el contenedor de salida). Despliega esta lista y
selecciona la opcin swf or flv (Flash). En este caso el cdec de vdeo ser Flash
Video y el cdec de audio: mp3.
5. Video. En este caso marca el tamao de ventana del vdeo 320x240 en el apartado
Video Scale Size (Tamao de ventana del vdeo). 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 vdeo
final marcaramos en la opcin 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 vdeo destino haz clic derecho sobre la
ventana de Super para elegir Output File Saving Management (Configuracin de la
carpeta destino).
9. En el cuadro de dilogo Browse to save the rendered file? (Navegando para guardar
el archivo renderizado?) selecciona la carpeta destino, por ejemplo, miweb\videos.
Clic en el botn SAVE Changes (Guardar cambios).
10. Para iniciar el proceso de conversin haz clic en el botn Encode (Active Files).
11. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vdeo
como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botn OK.
12. Tras concluir el proceso puedes ver el resultado final pulsando en el botn 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 Extraccin de vdeo de un DVD con dvd::rip (Ubuntu)

4.5.3.1 Introduccin
En este apartado se propone un procedimiento para convertir el vdeo de un DVD a un archivo
AVI con cdec XviD. A partir de este AVI es posible extraer un fragmento y convertirlo en un
formato ms propio de publicacin web: FLV, WMV, MOV o RAM. Otra posibilidad es la
grabacin del archivo AVI resultante en un CD-ROM utilizando un programa de grabacin de
CDs. Esta segunda opcin es habitual en la realizacin de copias de seguridad de DVDs. En el
mercado actual casi todos los reproductores DVD incorporan la prestacin de la lectura de CDs
y DVDs con archivos AVI DivX y XviD.
Nota importante:
El software e instrucciones recogidas en este captulo se proponen como mtodo para realizar
copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no
comercial. En cualquier caso esta informacin NO se expone para ser usada como herramienta
para vulnerar materiales con copyright. La utilizacin que se efecte, total o parcial del
archivo de vdeo 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 vdeo, es decir, obtener un archivo o archivos
de vdeo en el disco duro a partir de los contenidos de este soporte.
Para instalar dvd::rip en Ubuntu:
1. Desde el escritorio selecciona Aplicaciones > Aadir y quitar programas
2. En la casilla Buscar introduce el trmino rip.
3. Marca la casilla del programa dvd::rip y a continuacin pulsa en el botn 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 >
Aadir y quitar programas.
Cdecs para DVD encriptados
La mayora de los DVDs comerciales estn encriptados. Para poder leerlos sin problemas
desde dvd::rip, mplayer o incluso VLC Media Player es necesario instalar una librera
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 contrasea de root y el CD de instalacin de Ubuntu.
4. A continuacin ejecuta el siguiente comando:
sudo /usr/share/doc/libdvdread3/install-css.sh

366
Configuracin de dvd::rip
1. Inicia el programa mediante Aplicaciones > Sonido y vdeo > dvd::rip
2. La primera vez que se inicia este programa se muestra el cuadro de dilogo de
Preferencias. Estas opciones se podrn modificar en todo momento desde el
programa a Editar > Preferencias.
3. En la pestaa Configuraciones bsicas 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 conversin. Tras la creacin de esta carpeta pulsa en el
botn Comprobar todo para obtener el OK.
4. En la pestaa Comandos comprueba que el Comando de reproduccin de DVD y el

Comando de reproduccin de archivo es el programa mplayer que hemos instalado
para reproducir los DVDs y archivos creados.

367
5. Para cerrar la configuracin pulsa en el botn Aceptar.

4.5.3.3 Convertir DVD a AVI con dvd::rip
1.
2.
3.
4.
Introduce el DVD en la unidad del ordenador.

Inicia el programa mediante Aplicaciones > Sonido y vdeo > dvd::rip
Selecciona Archivo > Nuevo proyecto
En la pestaa Almacenamiento introduce el nombre del proyecto de captura.
Ejemplo: cortos2007. En este caso interesa elegir un nombre significativo con el
contenido del vdeo.
5. Pulsa en el botn + Crear proyecto.

6. Se muestra el cuadro de dilogo Guardar proyecto y en Nombre: aparece el nombre
del proyecto. Clic en el botn Aceptar.
7. En la pestaa Almacenamiento y en la seccin Elegir un modo de extraccin marca
la opcin Copiar los datos del DVD al disco duro antes de codificar. Conviene activar
esta opcin para copiar el contenido del DVD al disco duro antes de iniciar la
codificacin. Esto agilizar el proceso y proteger la unidad lectora de DVD.
8. Clic en la pestaa Extraer Ttulo. Pulsa el botn Leer tabla de contenidos del DVD
para leer las pistas del DVD que se mostrarn en el listado inferior.

368
9. Para visualizar una pista mrcala en el listado y a continuacin pulsa en el botn Ver
ttulo(s)/captulo(s) seleccionados.
10. Para comenzar la extraccin de la pista al disco duro del equipo, selecciona la pista
que deseas y luego pulsa en el botn Extraer ttulo(s)/captulo(s) seleccionados.
11. Si deseas tener informacin de la evolucin de la extraccin pulsa en la pestaa
Registro.
12. En la pestaa Codificar comprueba los siguientes parmetros que normalmente suelen
venir definidos por defecto:
Opciones de contenedor > Selecciona contenedor: AVI
Opciones de vdeo > Cdec de vdeo: xvid
Opciones de vdeo > Tasa de vdeo: 25.000
Opciones de vdeo > Hacer dos pasadas: S
Clculo de tasa de bits de vdeo > 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 codificacin pulsa en el botn Codificar.
14. Si deseas ver cmo evoluciona proceso activa la pestaa Registro.
15. Una vez concluido el proceso el archivo AVI resultante de la transformacin 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 botn Ver de la pestaa Codificar.
Vdeo y animaciones ::: Conversin de formatos de vdeo

370
4.6 Conversin de
formatos de vdeo

371
4.6 Conversin de formatos de vdeo

4.6.1 Propiedades de un vdeo
Introduccin
MediaInfo es un programa gratuito que permite visualizar las propiedades y metadatos de un
archivo de audio o vdeo.
Qu informacin de un archivo multimedia te permite comprobar MediaInfo?
Metadatos generales del archivo: ttulo, autor, director, album, nmero de pista,
fecha, duracin, etc
Vdeo: cdec, bitrate, fotogramas por segundo, aspecto, etc.
Audio: codec, velocidad de muestreo, canales, idioma, bitrate, etc.
Texto: idioma de subttulos.
Captulos: nmero y lista de captulos.
Cuando el reproductor que estamos utilizando no es capaz de visualizar un archivo de audio o

de vdeo por un problema de cdecs, MediaInfo es una interesante aplicacin porque permite
obtener toda la informacin de ese archivo. Incluso proporciona una direccin en Internet
donde es posible encontrar un reproductor o cdec 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...
Subttulos: SRT, SSA, ASS, SAMI...
Qu puedes hacer con MediaInfo?
Leer mltiples formatos de archivo de vdeo y de audio.

Mostrar la informacin tcnica y de metadatos en forma de texto, rbol, html,
Exportar esta informacin como texto.
Integracin de MediaInfo en el explorador de archivos de Windows
Instalacin de MediaInfo en Windows

1. Descarga y ejecuta el archivo MediaInfo_0.7.5.9_GUI_Win32.exe. Es el instalador de
MediaInfo. Otra opcin es visitar su web y descargar la ltima versin:
http://mediainfo.sourceforge.net/es
2. Otra posibilidad es descargar
la versin portable para windows:
MediaInfo_0.7.5.9.exe para instalar en una carpeta del disco duro o bien en una
pendrive.
Instalacin de MediaInfo en Ubuntu Linux
1. Selecciona Aplicaciones > Accesorios > Terminal para abrir un terminal de consola.
2. Autentifcate como root mediante:
su <enter> [introduce contrasea 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 lnea del este archivo de fuentes aade:

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 instalacin 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 vdeo > 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
dispondrs en la menciona carpeta de los archivos: dteatro.flv y dteatro_divx.avi
2. Existen dos mtodos 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 opcin
MediaInfo.
3. Siguiendo cualquiera de estos dos procedimientos se mostrar la ventana de
MediaInfo donde se puede leer la infomacin 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 vdeo con MediaInfo se ofrece un botn de

SitioWeb con enlace a una web donde se pueden obtener los cdecs o reproductor
necesarios para reproducir ese archivo en nuestro equipo.
4.6.2 Conversin de formatos de vdeo en Windows: SUPER

Introduccin
Para realizar la conversin de formatos de vdeo 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 vdeo a otro formato. No
requiere la instalacin de cdecs externos porque ya los incorpora en su instalacin.
Super reproduce y admite para convertir una amplia variedad de formatos de archivos de
entrada:
Vdeo: 3gp/3gp/3g2(telfonos mviles), 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 conversin a los siguientes formatos:
Vdeo: 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.
Instalacin de Super
Descarga y ejecuta desde aqu el instalador de Super : SUPERsetup_200825.exe. Otra
posibilidad es visitar su pgina web para descargar una versin ms reciente:
http://www.erightsoft.com/SUPER.html

374
Otra posibilidad es descargar y descomprimir a una carpeta de tu disco duro o pendrive la

versin portable de este programa: SUPER.exe
Conversin de un vdeo a distintos formatos
1. Descarga y descomprime el archivo wmp.zip. Como resultado de la extraccin
obtendrs el archivo de vdeo: dteatro.wmv.
2. Abre Super
Paso 1: Selecciona el archivo fuente.

3. Para seleccionar el archivo de vdeo original pulsa y arrastra ese fichero desde el
explorador de Windows para soltarlo en el recuadro inferior de la ventana de Super .
Otra opcin alternativa es hacer clic derecho sobre este recuadro y seleccionar la
opcin Add Multimedia Files (Aadir archivos multimedia) para examinar el sistema
de carpetas de tu disco duro y seleccionar el archivo de vdeo correspondiente.
4. Utiliza cualquiera de los dos procedimientos alternativos anteriormente descritos para
situar en la lista de archivos fuente, el vdeo dteatro.wmv Para eliminar un archivo

375
de esta lista haz clic derecho sobre este elemento y selecciona la opcin 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 vdeo. Super ofrece
una amplia gama de formatos. En este caso vamos a seleccionar el *.flv (Flash Vdeo).
Despliega la lista Select the Output Container (Elegir Contenedor de Salida) y elige
la opcin swf o flv (Flash).
6. Observa que en la lista Select the Output Video Codec (Elige el cdec del vdeo de
salida) puedes seleccionar el cdec de vdeo para ese archivo final. En este caso slo
se ofrece una opcin: Flash Video pero en funcin del contenedor elegido podra
haber varios.
7. En la lista Select the Output Audio Codec (Elige el cdec del audio de salida) es
posible seleccionar el cdec de audio. En este caso slo se ofrece una opcin: mp3
pero en funcin del contenedor elegido podra haber varios.
Paso 3: Configura las opciones de vdeo y audio del archivo multimedia destino
8. En la seccin VIDEO del panel de Super puedes aceptar las opciones por defecto o
bien personalizar ciertos detalles del vdeo:
Video Scale Size (tamao de la ventana): que no cambie NoChange- o bien un
tamao concreto, por ejemplo, 320x240 pxeles.
Aspect (aspecto): es la relacin de proporcionalidad entre anchura y altura de la
ventana del vdeo. No selecciones ninguna opcin para no modificar el aspecto
original. Otra posibilidad es elegir 4:3 o bien 16:9 que son las proporciones ms
habituales.
Frame/Sec (fotogramas por segundo). En este caso define 25 fps.
Bitrate kbps. Puedes elegir un bitrate del vdeo seleccionando una opcin de esta
lista desplegable.
Options(opciones). Calidad del vdeo, ajustes, opciones de recorte (Crop), etc.

376
9. En la seccin 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 opcin si deseas que el vdeo
destino no contenga la pista de audio.
Samplig Freq (Frecuencia de muestreo): selecciona el valor ms apropiado.
Channels (Canales): elige 2 para una calidad estreo y 1 para mono.
Bitrate Kbps: para elegir otro valor distinto despliega la lista y elige una opcin.
DVD Language Select ..: Si el archivo original es una pista de DVD aqu podrs
seleccionar el nmero de pista del audio correspondiente al idioma elegido.
Paso 4: Define la carpeta destino del archivo

10. Clic derecho sobre el archivo de vdeo la lista para seleccionar Output File Saving
Management (Configuracin de la carpeta destino).

377
11. En el cuadro de dilogo Browse to save the rendered file? (Navegando para guardar
el archivo renderizado?) selecciona la carpeta destino. Clic en el botn SAVE Changes
(Guardar cambios).

378
Paso 5: Codificar el archivo destino.

12. Para iniciar el proceso de conversin haz clic en el botn Encode (Active Files).
13. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vdeo
como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botn OK.
14. Tras concluir el proceso puedes ver el resultado final pulsando en el botn 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 ms adelante, el formato de vdeo .flv es muy apropiado para la publicacin
en la web. Por este motivo es necesario disponer de un programa como Super para
convertir de forma rpida y fcil cualquier vdeo a este formato.
4.6.3 Conversin de formatos de vdeo en Ubuntu Linux: WinFF

WinFF es un convertidor gratuito de formatos de vdeo para sistemas windows, linux y mac.
Permite convertir un vdeo de un formato a otro de una forma fcil, rpida y en un solo paso.
Este programa ofrece al usuario un interfaz grfico aunque en realidad la tarea de conversin
se traslada automticamente a una lnea de comandos para que la ejecute ffmpeg, otro
programa muy efectivo pero que slo se puede utilizar mediante lnea de comandos. De esta
forma WinFF nos evita tener que conocer y escribir la sintaxis de ffmpeg en una ventana de
terminal.
La instalacin de WinFF en un sistema Ubuntu consta de dos pasos: la instalacin del paquete
ffmpeg y del programa WinFF

379
Instalacin de ffmpeg
En Ubuntu se puede instalar el paquete ffmpeg utilizando el gestor de paquetes de Synaptic
(Sistema > Administracin > Gestor de paquetes Synaptic) pero esta instalacin no permitir
que ffmpeg convierta algunos formatos de vdeo interesantes porque se trata de una versin
que no incorpora sus correspondientes cdecs, por ejemplo, el cdec mp3 de audio para
archivos de salida en formato FLV.
Por este motivo se recomienda realizar una instalacin a partir del cdigo fuente de ffmpeg.
Los pasos para realizar esta tarea son:
1. Abre una ventana de terminal mediante Aplicaciones > Accesorios > Terminal.
2. Para obtener informacin sobre el paquete de cdigo fuente de ffmpeg teclea:
sudo apt-get build-dep ffmpeg
3. Para obtener informacin y descargar los paquetes adicionales teclea y pulsa enter:
sudo apt-get install liblame-dev libfaad2-dev libfaac-dev libxvidcore4-dev liba520.7.4 liba52-0.7.4-dev libdts-dev
4. Para descargar al equipo el paquete de cdigo fuente de ffmpeg teclea y pulsa enter:
apt-get source ffmpeg
5. Para situarse en la carpeta que contiene el cdigo fuente teclea y pulsa enter:
cd ffmpeg-*/
6. Define las opciones de configuracin para la compilacin del cdigo fuente ffmpeg.
Esto permitir que ffmpeg incorpore los cdecs ms importantes. Si dispones de una
versin de Ubuntu anterior a la 7.10 teclea en una sola lnea:
./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 versin 7.10 de Ubuntu entonces teclea en una sola lnea:
./configure --enable-gpl --enable-pp --enable-libvorbis --enable-libogg --enableliba52 --enable-libdts --enable-dc1394 --enable-libgsm --disable-debug --enablelibmp3lame --enable-libfaad --enable-libfaac --enable-xvid --enable-shared -prefix=/usr
7. Compila el cdigo introduciendo la orden:
make
8. Crea el paquete de instalacin y ejectalo mediante:
sudo checkinstall -D make install
Nota:
Puede ocurrir que ms adelante Ubuntu nos proponga actualizar el paquete ffmpeg.
En este caso conviene no instalar la actualizacin porque perderamos la
configuracin que hemos definido y algunas conversiones de formatos de archivo no se
realizaran con xito.

380
Instalacin de WinFF
1. Descarga e ejecuta el paquete de instalacin de WinFF: winff-0.33-i386.deb. Otra
posibilidad es visitar la web oficial de su desarrollador y descargarte la ltima
versin: http://biggmatt.com/winff/
2. Al hacer doble clic sobre un paquete *-deb se mostrar la ventana del Instalador de
paquetes. Clic en el botn Instalar el paquete.
3. Introduce la contrasea de root para que la instalacin se pueda completar.
4. Cierra las ventanas del instalador.
Conversin de un vdeo a distintos formatos
1. Descarga y descomprime el archivo wmp.zip a la carpeta personal. Como resultado
de la extraccin obtendrs el archivo de vdeo: dteatro.wmv.
2. Abre WinFF mediante Aplicaciones > Sonido y vdeo > WinFF
3. En la ventana de WinFF pulsa en el botn Add (Aadir) y navega para localizar,
sealar y abrir el archivo dteatro.wmv. Otra posibilidad es utilizar el explorador de
archivos y arrastrar el icono de este archivo de vdeo desde su carpeta para soltarlo
sobre la ventana de WinFF. Esta aplicacin admite la conversin por lotes de un
listado de archivos de vdeo con slo aadirlos a esta lista.
4. En este caso vamos a convertir el archivo de vdeo fuente al formato FLV de Video
Flash. En la lista desplegable Convert to selecciona la opcin Flash Vdeo (flv) for
Web use (4:3) . Si pulsas en el botn Options (Opciones) se mostrar en la parte
inferior distintos parmetros de la conversin que se pueden personalizar.
5. En el cuadro de texto Output folder (Carpeta destino) se indica la carpeta donde se
guardar el archivo de vdeo final.
6. Para iniciar la conversin pulsa en el botn Convert (Convertir).
Reproducir el vdeo FLV

1. Abre el reproductor: Aplicaciones > Sonido y Vdeo > VLC media player. Este
reproductor es una excelente aplicacin para visualizar vdeos FLV de Flash.
2. Selecciona Archivo > Abrir rpido Archivo para navegar a la carpeta donde se
encuentra almacenado el nuevo archivo. Seleccinalo y pulsa en el botn Abrir. Otra
posibilidad es utilizar el explorador de archivos y arrastrar el icono de este archivo de
vdeo desde su carpeta para soltarlo sobre la ventana de VLC Media Player.
Vdeo y animaciones ::: Integracin HTML de Vdeo Flash (FLV)

381
4.7 Integracin HTML

bsica de vdeo flash

382
4.7 Integracin HTML bsica de Vdeo Flash

4.7.1 Introduccin
En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un
gran auge como medio para publicar contenidos de vdeo en Internet. Varias son las razones
que justifican este fenmeno:
El cliente slo necesita tener instalado el plugin o reproductor de Adobe Flash en su

navegador web.
Es accesible desde la mayora 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 reproduccin se puede incluir fcilmente en una pgina web y al estar
diseado con Adobe Flash admite un skin con un alto grado de personalizacin: 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 vdeo ms conocidos en Internet han apostado por este formato
para la difusin de vdeos: YouTube, GoogleVideo, iFilm, etc.
El formato FLV utiliza los cdecs 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 visualizacin y esta se produce de forma
ininterrumpida mientras se completa en segundo plano la descarga del resto del vdeo.
En este apartado veremos cmo integrar vdeos FLV en una pgina web utilizando el
reproductor
flash
multimedia
desarrollado
por
Jeroen
Wijering
(http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la
configuracin de mltiples parmetros y admite la reproduccin de archivos flv simples y de
listas de reproduccin.
4.7.2 Reproductor de un vdeo 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 reproduccin para un archivo flv permite iniciar y detener el vdeo as
listas de vdeos FLV tambin se proporcionan botones para saltar al siguiente o
anterior de la lista. Tambin se ofrece un botn que permite visualizar el vdeo en
modo pantalla completa.
4. Regresa al explorador de archivos en la carpeta flvplayer. Dentro de esta carpeta se
encuentra:
El reproductor de vdeo: flvplayer.swf
botones.
El video FLV que se reproduce: video.flv
La imagen previa en formato GIF que se muestra antes de iniciar la reproduccin
del vdeo y que tiene la misma dimensin del vdeo: imagen.gif

383

reproductor.
Y luego en el cuerpo de la pgina el siguiente cdigo 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>
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 ubicacin del archivo de vdeo flv que se
reproduce. Puedes modificar este valor para reproducir un vdeo con otro nombre
distinto. En las variables height y width se indican la altura y anchura en pxeles con
que se visualizar el reproductor. La botonera ocupa 20 pxeles de altura. Sumados a
los 192 del vdeo hacen un total de 212 pxeles para el total del reproductor.
Vdeo y animaciones ::: Integracin HTML de una lista de vdeos flash (FLV)
384
4.8 Integracin HTML

de una lista de
vdeos flash (FLV)
385
4.8 Integracin HTML de una lista de vdeos FLV

4.8.1 Introduccin
En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un
gran auge como medio para publicar contenidos de vdeo en Internet.
En este apartado veremos cmo integrar vdeos FLV en una pgina web utilizando el
reproductor
flash
multimedia
desarrollado
por
Jeroen
Wijering
(http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la
configuracin de mltiples parmetros y admite la reproduccin de archivos flv simples y de
listas de reproduccin.
4.8.2 Reproductor de una lista de vdeos 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 estndar 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 reproduccin para un archivo flv permite iniciar y detener el vdeo as
listas de vdeos FLV tambin se proporcionan botones para saltar al siguiente o
anterior de la lista. Tambin se ofrece un botn que permite visualizar el vdeo 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 pxeles.
La carpeta images que contiene los GIFs con las imgenes previas de los cinco
videos y mismas dimensiones que los vdeos.
El reproductor de audio universal: mediaplayer.swf
Los archivos XML: playlist1.xml y playlist2.xml que contiene la lista de
reproduccin de vdeos con la siguiente informacin: ubicacin de cada archivo de
audio, de la imagen asociada, ttulo, autor, etc.
botones.

386
reproductor.
FLV simple

var so = new SWFObject('mediaplayer.swf','mpl','240','212','7');
so.addVariable('file','videos/dt_escenario.flv');
</script>
En la variable file se indica la referencia a la ubicacin del archivo de vdeo flv que se
reproduce. Puedes modificar este valor para reproducir un vdeo 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 pxeles con que se
visualizar el reproductor. La botonera ocupa 20 pxeles de altura. Sumados a los 192
del vdeo hacen un total de 212 pxeles para el total del reproductor.
FLV con imagen previa

so.addVariable('file','videos/dt_vestuario.flv');
so.addVariable('image','images/dt_vestuario.gif');
387
</script>
En la variable image se indica la referencia a la ubicacin del archivo de imagen que

se muestra antes de iniciar la reproduccin 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 vdeo.
Lista FLV simple

</script>
En la variable file en lugar de indicar un archivo flv se especifica un archivo XML que
contiene una lista de vdeos. El reproductor ocupar una altura de 360 pxeles de
acuerdo con lo indicado en el variable height. Al rea del display (donde se muestra
la imagen o vdeo) se le asigna una altura de 192 pxeles. Esto se indica en la variable
displayheight. La botonera ocupa una altura de 20 pxeles. En consecuencia por
debajo esta barra se mostrar la lista de reproduccin ocupando 148 pxeles. Es el
resultado de la siguiente operacin: 360 (192+20) = 148 px
Lista FLV con imagen previa
388

so.write('player4'); </script>
En la variable file se apunta al archivo playlist2.xml que contiene la informacin

sobre la lista de vdeos: ubicacin de archivos mp3, imgenes asociadas, ttulos,
autores, etc.
Lista FLV con display lateral
389

so.addVariable('displaywidth','216');
</script>
En la variable displaywidth se indica la anchura en pxeles que ocupar el rea de

display que se sita a la izquierda de la lista de reproduccin.
Para que el sistema funcione correctamente es necesario comprobar que en la misma
carpeta de la pgina html se encuentren los archivos swfobject.js y mediaplayer.swf.
Si se trata de una lista tambin debe incluirse el correspondiente archivo xml.
Adems deben ubicarse correctamente los archivos de imagen y de video
respectivamente en las subcarpetas images y videos.
8. En la pgina flvplayer.html dispones de un asistente que permite configurar las
distintas opciones del reproductor de Jeroen Wijering. El resultado final ser el
cdigo embed o bien el objeto swfobject que se puede copiar y pegar en una pgina
HTML para insertar en ella el reproductor. Para ello elige una opcin en la lista de
modelos de configuracin. Al seleccionarla se rellenarn automticamente los valores
de configuracin bsica 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 cdigo embed o bien el
cdigo swfobject.
Si deseas configurar otros parmetros ms avanzados pulsa en el botn configuracin
avanzada para introducir estos valores. No olvides pulsar en el botn recargar reproductor
para comprobar los cambios.
A continuacin se explica cada parmetro y la sintaxis de los archivos xml de las listas de
reproduccin.
Variables :
Altura del display (displayheight). Establece la altura del rea de visualizacin en

pxeles. Si no se especifica valor, ser la altura del reproductor menos la consola de
reproduccin (20 pxeles).
Ubicacin del archivo (file). Es la ubicacin del archive a reproducir. Puede ser un
archivo simple (MP3/JPG/SWF/PNG/GIF/FLV/RTMP) o una lista de reproduccin.
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 reproduccin. Se puede asignar una imagen a cada video en la lista de

reproduccin.
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 automtico de lista (autoscroll). Si se marca esta casilla se mostrar una barra
de scroll si el nmero de elementos es demasiado grande.
Anchura de visualizacin (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
reproduccin ocupando esa anchura.
Barra de control ms grande (largecontrols). Al activar esta casilla se duplica el
tamao de visualizacin de la barra de control. Es especialmente til para usuarios
con dificultades visuales.
Mostrar logo (logo). Sita 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 dimensin anchura o altura- ms prxima manteniendo la
proporcin en fondo negro), Ajuste proporcional (se ajustan ambas dimensiones para
ocupar todo el espacio manteniendo la proporcin). 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 dgitos del contador (showdigits). Si se desmarca esta casilla no se mostrar
el tiempo de reproduccin
Mostrar ecualizador grfico (showeq). Si se activa esta opcin se mostrar un
ecualizador grfico sobre la parte inferior de la imagen durante la reproduccin.
Mostrar iconos de carga/play (showicons). Muestra el icono play en el centro de la
imagen para que el usuario pueda iniciar la reproduccin pulsando en l.
Miniaturas de la lista (thumbsinplaylist). Si se elige esta opcin para cada pista de la
lista de reproduccin se observar la vista previa de la imagen especificada en el
elemento image del archivo xml.
Variables de REPRODUCCIN:
Inicio automtico (autostart). Cuando se activa esta variable se logra que el
reproductor se inicia cuando se carga la pgina.
Longitud del buffer (bufferlength). Es el nmero de segundos durante los cuales un
archivo FLV (vdeo) ser almacenado en el bffer antes de iniciar su reproduccin. Es
una opcin interesante para conexiones de clientes lentas. El valor por defecto es 3
segundos.
Reproduccin 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
reproduccin. De esta forma se preserva el ancho de banda. Si se selecciona Una vez
cada item se reproducir una sla vez cada pista de la lista y al final se detendr. Si
se elige S se reproducir indefinidamente el audio o lista de reproduccin.
Reproduccin aleatoria (shuffle). Si marcas esta casilla se reproducirn 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 INTERACCIN:
La configuracin de algunas variables de interaccin puede ser compleja y requiere ciertos
conocimientos avanzados de programacin. No obstante se recogen en este apartado a modo
392
de cita y al margen del curso. Para ms informacin consulta la pgina del creador del
reproductor Jeroen Wijering (http://www.jeroenwijering.com/)
MP3 de audio extra (audio). Especifica la ubicacin de un archivo mp3 externo que
se utilizar como banda sonora adicional. De esta forma se pueden aadir
comentarios de accesibilidad o del propio autor del vdeo.
URL del script estadstico (callback). Define la ubicacin de un script (PHP/ASP) que
el reproductor llamar cada vez que un vdeo se inicie o detenga. Esto puede servir
para guardar estadsticas de uso. Para ms informacin consultar la pgina de Jeroen
Wijering.
URL archivo subttulo (captions). Establece la ubicacin del archivo de texto externo
que contiene los subttulos. El reproductor soporta formato SMIL y SRT muy utilizado
en el ripeado de DVDs.
Permitir javascript (enablejs). Si marcas esta opcin se activa la interaccin
javascript. Esta funcionalidad slo funciona en lnea e incluye control de reproduccin,
carga asncrona de archivos multimedia y recuperacin de informacin de las pistas a
javascript.
Botn Pantalla Completa (fsbuttonlink). Si activas esta opcin se mostrar un botn
para mostrar la reproduccin a pantalla completa. Esto slo 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 reproduccin.
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
reproduccin.
Enlace del clic sobre visor (linkfromdisplay). Si activas esta opcin al hacer clic
sobre la imagen (no slo sobre el logo) se navegar hasta la pgina indicada en el
parmetro 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 pgina.
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 opcin por defecto es automtico 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 opcin se fuerza que no
suene la pista de audio extra por defecto.
Usar subttulos por defecto (usecaptions). Al desmarcar esta casilla se fuerza que
los subttulos se oculten por defecto.
Usar pantalla completa flash9 (usefullscreen). Desmarca esta variable si no deseas
que se muestre el botn de pantalla completa en el reproductor.
Usar atajos de teclado (usekeys). Si activas esta opcin funcionarn ciertas teclas en
el reproductor: barra espaciadora (play/pausa) y teclas de flecha (moverse sobre los
audios de una lista).
Las listas de reproduccin.

El reproductor de Jeroen Wijering permite cargar un audio FLV simple o una lista de
reproduccin.
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 ttulo del vdeo <title>, el autor <creator>, la ubicacin 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 reproduccin.
5. Dentro de cada etiqueta <track> se pueden utilizar las siguientes etiquetas para cada
pista de audio:
<location> </location>. Indica la ubicacin del archivo de video.

<title> </title>. Ttulo 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 reproduccin: XSPF (muy

utilizadas en Msica 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/">
Vdeo y animaciones ::: Integracin HTML de objetos Flash

394
4.9 Integracin HTML

de objetos Flash

395
4.9 Integracin HTML de objetos Flash

4.9.1 Qu es un objeto Flash?
Un objeto Flash es un archivo de extensin *.SWF que ha sido diseado con el programa
Adobe Flash (http://www.adobe.es) y que se suele embeber dentro de una pgina HTML para
mostrarse a travs del navegador. Esta tecnologa ha experimentado tal auge que
actualmente se considera indispensable en la elaboracin de animaciones y juegos
multimedia interactivos en educacin.
Lejos de crear objetos flash porque ello excede el propsito de este curso en este captulo se
describe el procedimiento de cmo reutilizar un SWF descargado o existente para integrarlo
dentro de una pgina HTML.
4.9.2 Descarga de objetos Flash con Firefox

1. Abre Firefox y selecciona Herramientas > Complementos.
2. En el cuadro de dilogo Complementos verifica si est instalado el complemento

UnPlug. En caso contrario haz clic en el enlace Obtener extensiones y visita la
pgina web de complementos de Mozilla Firefox para buscarlo, descargarlo e
instalarlo. Tras su instalacin quizs sea necesario reiniciar el navegador.
3. Desde Firefox introduce la cadena de bsqueda Happy Pill en la barra de
bsquedas de Google y haz clic en el botn derecho (icono de lupa) o bien pulsa la
tecla <enter>

396
4. En la pgina 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 pgina web que muestra este objeto haz clic en el botn
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 botn Save (Guardar) que acompaa a ese archivo SWF.
7. En el cuadro de dilogo Guardar como localiza la carpeta miweb\swfs

8. En la casilla Nombre introduce como happypill.swf

397
10. Clic en el botn Close para cerrar el panel de UnPlug.

Tras la descarga del archivo *.SWF que contiene la animacin 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 integrndolo en nuestra propia
pgina 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 animacin carga en tiempo de ejecucin. Se trata de informacin
almacenada en bases de datos, archivos txt o xml, imgenes, etc. Por este motivo puede
ocurrir que al descargarlo no funcione en el equipo local.
En la direccin: http://www.consumer.es/infografias/ podrs encontrar un repositorio de
infografas educativas muy interesante.
4.9.3 Integracin HTML bsica de objetos Flash

En esta actividad vamos a insertar una animacin en formato *.SWF dentro de una pgina. Los
archivos
*.SWF son animaciones diseadas 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 extraccin encontrars 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 botn 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 Edicin > Seleccionar todo para luego elegir Edicin >
Copiar. Cierra el editor y regresa a Kompozer.
5. Sita el cursor debajo del ttulo y elige Editar > Pegar.
6. Selecciona el ttulo Blobs y asgnale el tipo de formato Ttulo 1. Selecciona los
textos Descripcin e Instrucciones y pulsa en el botn Negrita (B) de la barra de

398
Formato. Selecciona el listado completo de instrucciones y pulsa en el botn Lista

con vietas.
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 botn Insertar.
9. La etiqueta que integra el objeto flash (SWF) en la pgina 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 parmetros de esta etiqueta se explican a continuacin:
<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 pelcula Flash como por ejemplo Internet Explorer. Otros

exploradores web no utilizan este control activeX por lo que es necesario incluir
tambin la etiqueta embed.
Los atributos de object permiten definir la altura (height) y la anchura (width) en
pxeles con que se visualizar la animacin Flash.
La etiqueta object tiene un parmetro muy importante donde se indica dnde
est ubicado el archivo swf que contiene la animacin 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 includa 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 ubicacin del
archivo swf (src), las dimensiones de visualizacin, etc.
Es necesario utilizar ambas etiquetas: object/embed para que una animacin
Flash se visualice correctamente en todos los navegadores web.
Puedes copiar y pegar esta etiqueta en otras pginas web y luego modificar las
dimensiones de visualizacin y la ubicacin/nombre del SWF que deseas mostrar
en cada caso.
10. Clic en el botn Guardar. Introduce el ttulo de la pgina: Blobs y gurdala con el
nombre blobs.html en la carpeta miweb.
11. Para ver el resultado final haz clic en el botn Navegar. Puede ser necesario
descargarse el plugin desde la web de Adobe para visualizar correctamente esta
animacin (http://www.adobe.com)
4.9.4 Integracin HTML avanzada de objetos Flash

La integracin de una animacin Flash en una pgina HTML tal y como se ha explicado en el
apartado anterior suele presentar dos problemas comunes:
1. Si navegas con Internet Explorer por una pgina que contiene un objeto Flash, por
ejemplo la pgina blobs.html que has diseado en el apartado anterior, observars
que es necesario hacer previamente un primer clic sobre ella antes de interactuar con
sus elementos. Al situar el puntero del ratn sobre la pelcula, sta presenta un borde
a su alrededor, el puntero del ratn 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 podrn visualizar este objeto. En su lugar vern un rectngulo
vaco.
Con intencin de resolver los dos problemas mencionados, se propone utilizar una etiqueta
ms avanzada para integrar un objeto flash en una pgina HTML.
1. Extrae a la carpeta miweb\swfs de tu disco duro el contenido del archivo:
mastermind.zip. Como resultado de esa extraccin encontrars 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 continuacin. Como resultado de esa extraccin encontrars en esta
carpeta el archivo con cdigo javascript: AC_RunActiveContent.js
3. Abre Kompozer. Selecciona Archivo > Nuevo o pulsa en el botn 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 Edicin > Seleccionar todo para luego elegir Edicin >
Copiar. Cierra el editor y regresa a Kompozer.
6. Sita el cursor debajo del ttulo y elige Editar > Pegar.

400
7. Selecciona el ttulo Mastermind y asgnale el tipo de formato Ttulo 1. Selecciona

los textos Descripcin e Instrucciones y pulsa en el botn Negrita (B) de la barra
de Formato. Selecciona el listado completo de instrucciones y pulsa en el botn Lista
numerada.
8. Selecciona la lnea <script scr=scripts/AC_ </script> y elige Editar > Cortar para
eliminarla y copiarla al portapapeles.
9. En la parte inferior de la pgina pulsa sobre la pestaa Cdigo fuente
10. Sita el cursor inmediatamente debajo de la lnea <title></title> y antes de la

etiqueta de cierre </head>
11. Elige Editar > Pegar o bien pulsa la combinacin de teclas <Ctrl>+<V>
12. Esta etiqueta referencia un archivo externo con el cdigo javascript:

AC_RunActiveContent.js situado dentro de la carpeta scripts del sitio web. Si lo
ubicas en otra carpeta debers indicarlo en la ruta src de esta etiqueta.
13. En la parte inferior de la pgina pulsa sobre la pestaa 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. Sita el cursor entre el prrafo Descripcin y el prrafo Instrucciones.
16. A continuacin elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho
para seleccionar Pegar. Clic en el botn Insertar.

401
17. La etiqueta que integra el objeto flash (SWF) en la pgina es:

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 parmetros de esta etiqueta se explican a continuacin:
<script > </script> indica la funcin de Javascript AC_FL_RunContent que

consigue que no sea necesario hacer clic sobre el objeto Flash para activarlo. Esto
slo funciona si el navegador tiene activada la ejecucin de scripts. Recuerda que
para que funcione el cdigo 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 ejecucin de scripts. Observa que dentro de ella se encuentra la
etiqueta object/embed que se present en el apartado anterior.
Al definir el parmetro pluginspage se conseguir que si el usuario no tiene
instalado el plugin de Flash en su navegador, sea redireccionado a la pgina de
Adobe donde podr descargarlo e instalarlo.
Puedes copiar y pegar esta etiqueta completa en otras pginas web y luego
modificar las dimensiones de visualizacin y la ubicacin/nombre del SWF que
deseas mostrar en cada caso.
18. Clic en el botn Guardar. Introduce el ttulo de la pgina: Mastermind y gurdala

con el nombre mastermind.html en la carpeta miweb.

402
19. Para ver el resultado final haz clic en el botn Navegar. Conviene utilizar Internet
Explorer para comprobar que en este caso no es necesario hacer un clic previo sobre
la animacin flash para poder interactuar con ella.
4.9.5 Asistente de integracin HTML de objetos Flash

1. Descarga y descomprime el archivo fplayer.zip dentro de la carpeta miweb\fplayer.
2. Como resultado de la extraccin encontrars dentro de esta carpeta los archivos:
index.html, movie.swf y swfobject.js
3. A continuacin haz clic sobre el siguiente enlace: flashplayer.html. Esta pgina es un

asistente para generar el cdigo HTML necesario para insertar un objeto Flash en una
pgina web.

403
4. Antes de generar el cdigo introduce valores en las distintas opciones de

Configuracin Bsica.
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 pelcula se proporcionan en
Pxeles o bien en Porcentaje. El porcentaje es relativo a la ventana del
navegador. Ejemplo: 100%/-100% har que la pelcula ocupe toda la ventana del
navegador.
Anchura y Altura. Indica las dimensiones con que se visualizar el objeto Flash.
Reproducir al inicio. La reproduccin se iniciar tras cargarse la animacin. Es la
opcin por defecto que seleccionaremos en este caso. Si desmarcas esta opcin se
detendr al comienzo. El usuario iniciar la reproduccin al pulsar en un botn de
la pelcula o mediante la opcin Reproducir del men contextual que se muestra
al hacer clic derecho sobre la pelcula.
Reproducir indefinidamente. Para la animacin que nos ocupa no es pertinente
aunque en otros casos si se marca har que la pelcula Flash se reproduzca en
ciclo cuando alcanza el ltimo fotograma.
5. Para definir los parmetros de Configuracin Avanzada pulsa en el enlace
configuracin avanzada. En este apartado podrs establecer los siguientes valores:
Calidad. Esta opcin permite definir la relacin entre el tiempo de procesamiento
y el suavizado de cada fotograma antes de que aparezca en la pantalla del
usuario. La opcin por defecto es ptima.
Modo de ventana. Permite establecer una opcin de transparencia, posicin y
capas de la ventana de Flash.
Ventana. Reproduce la pelcula Flash en su propia ventana rectangular
dentro de la pgina web. De esta forma la reproduccin resulta lo ms
rpido posible. Es la opcin por defecto.
Opaco sin ventana. Mueve los elementos detrs de las pelculas Flash (
por ejemplo, con HTML dinmico) para evitar que stos se muestren.
Transparente sin ventanas: Muestra el fondo de la pgina HTML donde se
incrusta la pelcula a travs de todas las reas transparentes de la
pelcula.
Alineacin HTML. Elige una opcin de Alineacin HTML para colocar la ventana de
la pelcula de Flash dentro de la ventana del navegador. La opcin por defecto es
Izquierda.
Escala. Elige una opcin de Escala para colocar la pelcula dentro de los lmites
especificados si se cambi el ancho y la altura original de la pelcula.
Mostrar todo. Es la opcin por defecto. La pelcula se muestra visible por
completo en el rea especificada y sin distorsin. Para mantener el ratio
(relacin anchura-altura) original es posible que utilice bordes a ambos
lados de la pelcula.
Sin borde. Ajusta la pelcula al rea especificada pero sin distorsin.
Mantiene el ratio (relacin anchura-altura) original recortando el rea de
visualizacin si es necesario.
Exacto. Ajusta la pelcula al area disponible deformando la imagen si es
necesario.
Alineacin Flash. Elige una opcin de Alineacin Flash para configurar la forma
en que se coloca la pelcula dentro de la ventana y cmo se recorta si fuera
necesario.
Mostrar Men. Muestra un men de reproduccin cuando el usuario hace clic con
el botn derecho del ratn en la pelcula. Es la opcin por defecto. Si se desmarca
esta opcin se mostrar un men reducido sin las opciones de reproduccin.
Color de fondo. Es el valor hexadecimal del cdigo de color RGB que especifica el
color de fondo de la pelcula. Utiliza este atributo para sobrescribir el color de
fondo original de la pelcula. Este atributo no afecta al color de fondo de la
pgina HTML.

404
URL Base. Especifica el directorio base o URL utilizado para resolver todas las
rutas relativas contenidas en la pelcula Flash. Es un atributo especialmente til
cuando las pelculas Flash estn 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
cdigo 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 cdigo
7. El asistente genera dos tipos de cdigo al pulsar en los enlaces mostrar cdigo embed
/ mostrar cdigo swfobject.
Cdigo object/embed. Es el etiquetado bsico. 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.
Cdigo 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
interacta directamente sobre el objeto flash sin necesidad de efectuar un clic
previo de activacin.

405
8. En cualquiera de los dos casos haz clic derecho sobre el cuadro de texto que muestra
el cdigo 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. Sita el cursor en el punto de la pgina donde deseas insertar el objeto Flash.
13. A continuacin elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho
para seleccionar Pegar. Clic en el botn Insertar.
15. Para ver el resultado final haz clic en el botn Navegar. Puede ser necesario
descargarse el plugin desde la web de Adobe para visualizar correctamente esta
animacin (http://www.adobe.com)
4.9.6 Integracin HTML de un mapa Google

1. Descarga y descomprime el archivo googlemaps.zip en la carpeta miweb\googlemaps
2. Como resultado de la extraccin encontrars 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 cdigo 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 extensin *.kml que contiene la
informacin de los marcadores que aparecern en el mapa.
3. Abre Kompozer.
4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la
carpeta miweb\googlemaps

406
6. El cdigo HTML que inserta en la pgina el objeto de Flash es el siguiente:

<html>
<head>
<title>Google Maps</title>
</head>
<body>
<h1>Google Maps</h1>
<div id="gmaps">This text will be replaced</div>
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 parmetros con que se mostrar
inicialmente el mapa:
clatitud y clongitud son las coordenadas geogrficas en formato decimal del
punto central del mapa.
route se refiere al nombre del archivo KML que contiene la informacin de
ubicacin de los marcadores. En este caso evaristo.kml.
zoom es el grado de magnificacin 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, satlite o hbrido.
cnavigator si tiene valor=true se podr disponer del control de navegacin para
poder moverse por el mapa con ms comodidad.
9. Prueba a modificar algunos de estos parmetros 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 estn definidas entre las etiquetas <Placemark> </Placemark>.
Respetando la sintaxis se pueden aadir ms etiquetas o bien modificar los datos de
este marcador para situarlo en otro sitio.
Vdeo y animaciones ::: Integracin HTML de applets de Java

407

de applets de Java

408
4.10 Integracin HTML de un applet de Java

4.10.1 Applets: qu son y dnde conseguirlos
Java es un lenguaje de programacin creado por la empresa Sun Microsystems. Se ha
destinado fundamentalmente al diseo de aplicaciones para Internet. Sus caractersticas ms
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 utilizacin de
un software adicional que es necesario tener instalado en el equipo para que la
aplicacin funcione. Este software es un intrprete de los programas conocido
normalmente Java Runtime Environment (JRE).
Uno de los xitos de Java son los applets. Son pequeos programas que pueden ser
integrados dentro de una pgina web para dotarla de la interactividad que el simple
cdigo HTML no puede proporcionar. Los applets creados por otros se pueden
reutilizar en otras pginas. Para ello es necesario integrarlo en un archivo HTML y
configurar adecuadamente sus parmetros.
El principal inconveniente de los applets es su lentitud para arrancar. El navegador al
detectarlo en una pgina, debe cargar primero la mquina virtual Java y luego sta
debe leer su cdigo e interpretarlo. Esto provoca cierta ralentizacin aunque con el
tiempo se han conseguido versiones ms potentes y rpidas de las nuevas mquinas
virtuales de Java.
Se pueden conseguir ms applets en la URL: http://javaboutique.internet.com
El proyecto Descartes (http://descartes.cnice.mec.es/ ) del CNICE utiliza applets de
java para la enseanza y aprendizaje de la geometra.
4.10.2 Instalacin de Java Runtime Environment (JRE)

Windows
1. Descarga y descomprime el intrprete 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 versin ms actual:
http://www.java.com/es/download/
2. Ejecuta el instalador y sigue los pasos del asistente para completar la instalacin.
Ubuntu
1. Desde el escritorio de Ubuntu selecciona Sistema > Administracin > Gestor de
paquetes Synaptic.
2. En el cuadro de dilogo Gestor de Paquetes Synaptic pulsa en el botn Buscar.
3. Introduce como trmino de bsqueda: sun java 6 y pulsa en el botn Buscar.
4. Localiza el paquete sun-java6-plugin haz doble clic sobre su casilla de verificacin.
Confirma la instalacin de las dependencias y pulsa en el botn Aplicar.
4.10.3 Integracin HTML del applet Sopa de letras

continuacin: sopa.zip. Como resultado de esa extraccin encontrars 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 continuacin selecciona Archivo > Abrir para localizar la pgina
miweb\sopa\sopa.html y abrirlo.

409
3. En el modo Vista Normal slo se puede leer el ttulo. Sin embargo si haces clic en la
pestaa Cdigo fuente se podr acceder al cdigo HTML que inserta el applet en esta
pgina 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 pgina.

El atributo code indica la ubicacin del archivo externo *.class que lo contiene
(WordSeach.class, en este caso). Con los atributos height y width se indican las
dimensiones en pxeles de visualizacin.
El nombre de los parmetros 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 parmetros: gridcolors, listcolors y files.
El parmetro gridcolors permite especificar el color de la cuadrcula de letras:
texto, fondo, palabra encontrada y palabra marcada (separados por comas). Como
valores se puede utilizar el cdigo 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 trminos de la
sopa de letras. En este caso es el archivo terminos.txt
Para integrar este applet en otra pgina 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 pgina 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 botn Guardar de la barra de Redaccin de
Kompozer.
7. Si deseas modificar el ttulo de la sopa de letras o bien los trminos 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 ttulo de la sopa de letras debe ir en la primera lnea y precedido del smbolo "#".
Luego cada trmino deber ir en una lnea distinta. Realiza las modificaciones
oportunas. Para terminar elige Archivo>Guardar y cierra el Bloc de Notas.
9. Para comprobar el correcto funcionamiento de esta aplicacin desde Kompozer abre
el archivo sopa.html y luego pulsa en el botn Navegar. Debes esperar unos segundos
a que se cargue la mquina virtual de Java e inicie el subprograma.
Notas:
Recuerda que para visualizar esta aplicacin es necesario tener instalado en el
equipo Java Runtime Environment (JRE). http://www.java.com/es/download/
Puedes conseguir ms applets en la direccin: http://javaboutique.internet.com
4.10.4 Integracin HTML del applet Puzzle

continuacin. Como resultado de esa extraccin encontrars una nueva carpeta
llamada puzzle y en su interior los siguientes archivos: puzzle.html, bufon.gif y
Jigsaw.jar.
2. Abre Kompozer y a continuacin abre el archivo puzzle.html.
3. Clic en el pestaa Cdigo 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 continuacin se especifican los nombres de los principales parmetros y sus valores
para el applet Jigsaw.class contenido dentro del archivo comprimido Jigsaw.jar.
Prametros 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 pxeles de la imagen en el puzzle. La imagen original
se ajustar al tamao especificado.
ImgHeight .La altura en pxeles de la imagen en el puzzle. La imagen original
se ajustar al tamao especificado.
Rows. El nmero de filas del puzzle.
Cols. El nmero de columnas del puzzle.

411
Prametros opcionales
AutoSnap. Se usa para facilitar la ubicacin correcta de las piezas. Cuando la

pieza se acerca a su posicin correcta se enganchar a modo de imn. Este
valor puede oscilar entre 0 y 15. El valor 15 permite que la pieza se site
automticamente sobre la posicin correcta desde lejos.
KeepBoardClear. Si est activado (true) las piezas desordenadas se situarn
siempre fuera del rea de construccin del puzzle tanto al comenzar como al
pulsar el botn Mezclar.
Connector. Define el tamao 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 botn derecho
del ratn sobre ellas. Su valor puede ser true o false.
DimHelpImage. Si est definido muestra una copia de la imagen en el rea de
construccin del puzzle para ayudar a su diseo. Es un valor numrico de 0 a
100 que indica la transparencia de la imagen slo si el parmetro
HelpImageGrayed est activado.
HelpImageGrayed. Si est activado (true) y se usa la imagen de gua, 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 construccin del
puzzle.
BoardColor. Color del rea de construccin del puzzle si no se usa la imagen
gua
SelectColor. Color que rodea a una pieza cuando se sita el puntero del ratn
sobre ella.
TextColor. Color del texto que aparece cuando se resuelve el juego.
AllowSolve. Si est desactivado (false) no aparecer el botn de Resolver.
Este botn se muestra por defecto si no se especifica este parmetro.
BreakupText. Define el texto que aparecer en el botn Comenzar
TidyText. Define el texto del botn Mezclar. Observa que el botn Mezclar
slo revuelve las piezas no colocadas.
SolveText. Texto del botn Resolver.
MessageText. Texto del feedback al alumno cuando concluye con xito el
puzzle.
RunTarget. Nombre del marco donde se mostrar la pgina indicada por el
parmetro RunURL cuando se resuelva el puzzle.
RunURL. URL de la pgina que se mostrar cuando el puzzle se resuelva
adecuadamente.
5. Puedes utilizar la vista Cdigo fuente de Kompozer para acceder al cdigo HTML de
la pgina y modificar los valores de estos parmetros.
6. Recuerda que debes seleccionar Archivo > Guardar para guardar los cambios
realizados.
7. Para comprobar el funcionamiento de esta aplicacin, brela desde Kompozer y
luega pulsa en el botn 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 mquina virtual de Java e inicie el subprograma.
8. Se puede insertar este applet en una pgina HTML en blanco con slo copiar y pegar
el cdigo HTML antes indicado. No olvides copiar el archivo *.JAR y *.GIF en la misma
carpeta de esta nueva pgina.

412
4.10.5 Integracin HTML de un objeto JClic

Para visualizar un paquete de JClic a travs del navegador es necesario tener instalada el
entorno JRE de java. En este apartado se explica cmo crear una pgina 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 extraccin encontrars 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
configuracin del paquete.
index.htm. Es la pgina HTML a travs de la cual se carga el paquete para
visualizarlo e interactuar con l a travs del navegador.
3. Abre Kompozer.
4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la
carpeta miweb\jclic_ejemplo
6. El cdigo HTML que inserta en la pgina 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"
</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"
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 especfico que se carga se encuentra en la lnea de cdigo:

Si deseas cargar otro paquete del rincn de Clic:

1. Abre el navegador web y visita la direccin: http://clic.xtec.net/db/listact_es.jsp
2. En el catlogo de paquetes localiza uno y sitate en la pgina que muestra su
informacin.
3. En la parte inferior encontrars el enlace de descarga de ese paquete:
4. Selecciona y copia este enlace para pegarlo a continuacin en la casilla de direccin

del navegador. Esta accin 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 continuacin abre el archivo index.html con Kompozer y modifica el nombre del
paquete en la lnea de cdigo correspondiente:
7. Elige Archivo > Guardar para guarder los cambios. Si visualizas la pgina HTML vers
que muestra el nuevo paquete que has referenciado.
Servicios Web 2.0 ::: Introduccin

414
5. Servicios Web 2.0

415
5.1 Introduccin

416
5.1 Introduccin
El trmino Web 2.0 fue utilizado por primera vez por la empresa editorial estadounidense
OReilly Media (2004) para referirse a una segunda generacin de Web basada en las
comunidades de usuarios. Abarca un amplio catlogo de sitios y servicios web que incluyen las
redes sociales, los blogs, los wikis, la sindicacin de noticias RSS, etc. Su propsito
fundamental es fomentar la colaboracin y el intercambio gil de informacin 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 informacin,
comunicarse con otros usuarios, etc.
El propsito de este captulo no es tratar la Web 2.0 con la extensin y calidad que se
merece. Ms bien se trata de ver cmo es posible integrar algunos de sus servicios en una
pgina 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: galera de fotografas

417
5.2 Flickr: galera de

fotografas

418
5.2 Flickr: galera de fotografas

5.2.1 Introduccin
Flickr (http://www.flickr.com) es un espacio donde se puedes administrar y compartir tus
fotos en lnea. Las caractersticas ms destacadas de este servicio son:
Subir fotos. Puedes hacerlo desde tu equipo, envindolas por correo electrnico o
utilizando el telfono mvil con su cmara.
Organizar. Clasifica las fotos en colecciones o lbumes. A cada imagen se le puede
asignar una etiqueta para facilitar su bsqueda.
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 dems.
Publicaciones. Puedes elaborar tarjetas, albumes, marcos, etc utilizando las
imgenes subidas.
Mantenerse en contacto. Para enviar y recibir informacin sobre las actualizaciones
de fotografas de familiares y amigos.
La exploracin de todas las posibilidades de Flickr excede el propsito de este curso. Se

propone centrarse en la utilizacin de estas imgenes en lnea 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 botn Crear tu cuenta.
5.2.2 Subir fotografas a Flickr

1. Descarga y descomprime el archivo flickr.zip a una carpeta del equipo. Como
resultado de esta tarea se obtendr una coleccin de fotografas 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 sesin e introduce tus credenciales Yahoo.
4. Pulsa en el enlace Subir fotos. En este caso vamos a utilizar el Uploader Bsico de
Flickr. Selecciona esta opcin si no se muestra la pgina recogida en la captura de
pantalla adjunta.
5. En la pgina Subir fotos en Flickr pulsa en el botn Examinar para localizar la
primera fotografa en la carpeta de tu disco duro. Repite este paso para algunas
fotografas ms del resto de la carpeta.

419
6. En el apartado Agregar etiquetas para TODAS estas imgenes introduce los trminos
que luego facilitarn la localizacin de las imgenes 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 botn Cargar.
9. Una vez concluido el proceso de subida se mostrar el panel Describe tus fotos donde
es posible asignar ttulos, descripciones y etiquetas a cada imagen de forma
invididual. Para terminar pulsa en el botn Guardar el lote.
10. Las fotos estarn disponibles en la pestaa Tu > Tus fotos.
Nota:
Otra posibilidad para subir fotos a Flickr es descargar e instalar una herramienta de
carga que se ofrece en esta pgina. Se trata de una aplicacin local que permite subir
imgenes con slo arrastrar y soltar.

420
5.2.3 Organizar en lbumes

1. Si no ests autentificado debes hacer clic en el enlace Iniciar sesin e introduce tus
credenciales Yahoo.
2. Desde el men superior horizontal haz clic en la opcin Organizar. Tras unos
segundos de carga se mostrar el organizador de Flickr.
3. Clic en la pestaa lbumes y luego en el enlace Crear nuevo lbum.

4. Desde el panel de nuevo album:
4.1 Introduce el ttulo del lbum, p.e.: Mi viaje por Asturias.
4.2 Para aadir fotografas a este nuevo lbum debes arrastrar las imgenes que
aparecen en la franja inferior al panel derecho superior.
4.3 Arrastra una imagen del lbum al cuadrado visor que aparece sobre el ttulo. Esta
ser la imagen que represente el albm.
4.4 Pulsa en el botn Guardar.
5.2.4 Situar las fotos en el mapa (geolocalizacin)

credenciales Yahoo.
2. Desde el men superior horizontal haz clic en la opcin Organizar. Tras unos
segundos de carga se mostrar el organizador de Flickr.
3. Clic en la pestaa Mapa para acceder al interfaz donde podremos situar sobre el
mapa cada una de las fotos (geolocalizacin). Conviene elegir que el mapa sea de
acceso pblico.
4. En la casilla Buscar un lugar introduce el trmino Asturias para obtener el mapa de
esta Comunidad Autnoma con el zoom adecuado.
5. En el panel inferior selecciona el lbum Mi viaje por Asturias y luego arrastra cada
fotografa para ubicarla en su localidad: Luarca (Valds), Cudillero, Gijn, Luarca,
Oviedo y Cabo de Peas. Para eliminar una imagen del mapa arrastra el crculo hasta
el panel inferior.

421
6. Una vez concluida la geolocalizacin de las distintas imgenes haz clic en el enlace
Tus fotos situado en la esquina superior derecha del mapa.
5.2.5 Integracin HTML de una imagen Flickr

credenciales Yahoo.
2. Desde la pgina Tus fotos selecciona una imagen haciendo clic sobre ella para
visualizarla en solitario.

422
3. Haz clic derecho sobre la fotografa y selecciona la opcin Copiar la ruta de la

imagen.
4. Abre Kompozer
5. Sobre un documento web nuevo aade un ttulo con formato Ttulo 1. Por ejemplo:
Mi imagen en Flickr
6. Haz clic sobre el documento para situar el cursor debajo del ttulo.
7. Clic sobre el botn Imagen para insertar una imagen en el documento
8. En el cuadro de dilogo Propiedades de la imagen haz clic derecho sobre el cuadro

de texto Ubicacin 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.
12. Pulsa en el botn Guardar, introduce un ttulo de pgina y guardarla con el nombre
flickr_image.html
13. Clic en el botn Navegar de la barra de herramientas de Kompozer para visualizar el
resultado en el navegador Firefox.
5.2.6 Integracin HTML de una presentacin de fotografas Flickr

credenciales Yahoo.
2. En la barra de mens de Flickr selecciona T > Tus lbumes.
3. A continuacin haz clic sobre el album creado anteriormente. Una vez dentro del
lbum observa que existe un enlace con el texto Ver como presentacin. Si se hace
clic en este enlace se mostrar una presentacin con la secuencia de fotografas que
forman parte del lbum.
4. Mientras ests visualizando esta presentacin se puede seleccionar la URL de esta
presentacin en la barra de direccin del navegador. Para ello haz clic derecho sobre
la barra de direcciones y elige Seleccionar todo. A continuacin haz clic derecho y
selecciona Copiar.
Otra posibilidad es regresar a la ventana anterior y hacer clic derecho sobre el enlace
Ver como presentacin para seleccionar la opcin Copiar la ruta del enlace. En
cualquiera de los dos casos se copia al portapapeles la URL de esta presentacin.

424
5. Abre Kompozer y sobre un documento web nuevo escribe el texto Mi presentacin

en Flickr en formato Titulo 1.
6. Sita el cursor debajo del ttulo y a continuacin selecciona Insertar > HTML.
7. En el cuadro de dilogo 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 direccin entre comillas que hemos copiado. Los atributos width y
height definen el tamao del marco interno.
9. Clic en el botn Insertar.
flickr_gallery.html

425
5.2.7 Integracin HTML de un mapa de Flickr

credenciales Yahoo.
2. En la barra de mens 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 opcin T para que en el mapa se muestren slo 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 dilogo 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 direccin entre comillas que hemos copiado. Los atributos width y
height definen el tamao del marco.
11. Clic en el botn Insertar de este cuadro de dilogo.
flickr_map.html
Servicios Web 2.0 ::: Slide.com: presentacin de imgenes

426
5.3 Slide.com:
presentacin de
imgenes

427
5.3 Slide.com: presentacin de imgenes

Slide.com (http://www.slide.com) es un servicio web 2.0 que nos permite subir una
coleccin de imgenes y luego obtener en lnea una atractiva presentacin que las muestra de
forma secuencial y con efectos especiales. Esta presentacin tendr una URL que podemos
compartir con otras personas. Tambin es posible integrarla dentro de una pgina 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 dispondrs de una coleccin de fotografas para crear tu
presentacin. Otra posibilidad es utilizar una coleccin propia.
2. Abre el navegador web Firefox y visita la web de Slide.com: http://www.slide.com
3. Se puede crear una presentacin sin necesidad de registrarse como usuario de este
servicio. Sin embargo conviene registrarse haciendo clic en el enlace Regstrate para
poder editar en cualquier momento las presentaciones creadas. Para ello introduce tu
email y la contrasea. Una vez completado el registro, en el formulario ENTRAR
introduce estos datos para autentificarte.
4. Clic en el botn Crear un Slide Show.
5. En la pestaa Mis archivos haz clic en el botn Busca para subir las imgenes desde el
equipo.
6. En el cuadro de dilogo Seleccione los archivos navega para situarte dentro de la

carpeta anterior. Puedes seleccionar un solo archivo con hacer clic sobre l. Para
aadir, uno a uno, a la seleccin pulsa previamente la tecla Ctrl y sin soltarla vete
haciendo clic sobre los archivos que deseas elegir. Para aadir una lista de archivos:
haz clic en el primero, pulsa la tecla Mayus y sin soltarla haz clic en el ltimo. Vers
que se seleccionan todos. Utiliza este truco para elegir todos los archivos de imagen
de esta carpeta.

428
7. Clic en el botn Abrir.

8. Transcurridos unos segundos se habrn subido estas imgenes al servidor remoto. Una
vez finalizado el proceso se mostrar el mensaje Subida terminada. En la vista previa
de la presentacin que se muestra arriba ya aparecen estas imgenes.
9. En el panel inferior donde se muestran las imgenes subidas se puede realizar los
siguientes ajustes:
Nombre de Slide Show: Mi viaje por Asturias
Pies de foto: Escribe el pie de pgina para cada fotografa ya que por defecto se
sita el nombre del archivo.
Orden de las fotografas. Arrastra las imgenes para colocarlas en el orden en
que se mostrarn.
Azar. Si activas esta casilla las fotos se mostrarn de forma aleatoria.
10. En el panel derecho Personaliza se pueden configurar interesantes opciones de la

presentacin:
Estilo, Temas y Skins: puedes combinar las distintas opciones de estos
parmetros para conseguir presentaciones ms personalizadas. En la pestaa
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 animacin:
Fast, Medium y Show (Rpido, Medio y Lento).
Msica: permite elegir una msica de fondo.
Fondo: para elegir un color de fondo.
Efectos: para aplicar efectos de sepia, blanco/negro, etc a las fotos.
Tamao: en funcin del modelo definido para el estilo se podr elegir un tamao
estndar: small, medium o large (pequeo, mediano y grande).
Privacidad: permite establecer si la presentacin ser de acceso pblico o
particular. Se recomienda la opcin de acceso pblico.

429
11. Para terminar de configurar la presentacin pulsa en el botn 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 continuacin se muestra el cdigo de integracin HTML de la presentacin para los
distintos formatos de blog. En este caso la tarea consiste en integrarla en una pgina
web que estamos elaborando. Para ello haz clic en la pestaa My Space (podra ser
otra), haz clic en el contenido del cuadro O copia este cdigo.
14. Una vez seleccionado este texto haz clic derecho sobre este cuadro y elige Copiar en
el men contextual que se muestra. Tambin se puede copiar mediante la
combinacin de teclas <Ctrl>+<C>.
Slide.com en formato Titulo 1.

430
derecho y elige Pegar. Clic en el botn Insertar.
slidecom.html
Servicios Web 2.0 ::: Slideshare: presentaciones en lnea

431
5.4 Slideshare:
presentaciones en lnea

432
5.4 SlideShare: Presentaciones en lnea

SlideShare (http://www.slideshare.net) es un servicio de alojamiento y publicacin en lnea
de presentaciones realizadas con herramientas como Powerpoint u OpenOffice. Puedes
utilizarlo para subir tus presentaciones y compartirlas. Tambin puedes buscar y utilizar las
realizadas por otras personas. En este curso se propone SlideShare como una interesante
opcin para publicar en la web nuestras propias presentaciones y luego poder integrarlas en
el cdigo HTML de una pgina.
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 contrasea. A partir de ese
momento ya dispones de credenciales de identificacin y acceso.
1. Descarga y descomprime el archivo TIC_project.zip en el disco duro de tu equipo.
Como resultado de esta tarea obtendrs el archivo TIC_project.ppt que contiene una
presentacin realizada en PowerPoint.
2. Abre
el
navegador
Firefox
y
visita
la
pgina
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 pgina se muestra informacin sobre el tipo de archivos que se pueden subir:
.ppt y .pps (Powerpoint), .odp (Impress de OpenOffice) y .pdf. Tambin se indica que
este espacio es pblico. No se recomienda subir ningn material si se desea mantener
en privado. Tambin se indica el tamao mximo del archivo. En este caso son 30 MB.
6. Clic en el botn Browse and select files (Navegar y elegir archivos ).

7. En el cuadro de dilogo Seleccione los archivos navega para situarte en la carpeta
donde has descargado y descomprimido el archivo TIC_project.ppt.

433
8. Seleccinalo y pulsa en el botn Abrir.

9. Tras unos segundos de espera se subir esta presentacin en SlideShare.
10. Cuando el proceso de subida ha tenido xito se solicitan algunos datos adicionales:
Title (Ttulo). Es el ttulo de la presentacin. Ejemplo: Proyecto TIC en un centro
educativo
Tags (Etiquetas). Es una relacin de palabras-clave separadas por comas que
permitirn localizar esta presentacin utilizando la herramienta de bsqueda de
SlideShare. Ejemplo: TIC, proyecto, integracin, educacin, tecnologas
Language (Idioma). Selecciona la opcin Spanish (Espaol).
Description (Descripcin). Un breve comentario que a modo de introduccin
permite describir la presentacin.
Allow file download. (Permitir descarga de archivo). Si marcas esta opcin los
usuario podrn descargarse el archivo original.
11. Para concluir el proceso de subida pulsa en el botn Publish.

12. Tras pulsar este botn se produce otro tiempo de espera. SlideShare est
transformando el archivo original en una pelcula Flash que se mostrar al usuario
mostrando el contenido de esa presentacin.
13. Clic en el enlace superior My Slidespaces y luego en la imagen que muestra la
presentacin que acabamos de subir. De esta forma se accede a la visualizacin de
esta presentacin.
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
SlideShare en formato Titulo 1.
derecho y elige Pegar. Observa que el cdigo copiado desde SlideShare se ha pegado
aqu. Clic en el boton Insertar.
slideshare.html
Nota:
Esta integracin HTML tambin se puede realizar con presentaciones publicadas por
otras personas. Al situarse en su pgina tambin se ofrece el cdigo Embed para
copiar y pegar en nuestra pgina web.
Servicios Web 2.0 ::: BooMP3: audio en lnea

435
5.5 BooMP3: audio

en lnea

436
5.5 BooMP3: Audio en lnea

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
direccin web. A cada recurso sonoro se le puede asignar informacin textual: ttulo de la
cancin y descripcin. Esto facilita su bsqueda. Cada pista de audio dispondr de una pgina
propia donde se proporciona un cdigo HTML para insertar su reproductor en nuestra pgina
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 obtendrs el audio: africa.mp3
2. Abre el navegador Firefox y visita la pgina de BooMP3: http://boomp3.com
3. En la pgina de entrada haz clic en el botn Click and select file to upload (Haz clic
y elige un archivo para subir).
4. En el cuadro de dilogo Seleccione los archivos que se cargarn con Boomp3.

Localiza en el disco duro de tu equipo el archivo de audio africa.mp3 anteriormente
descargado
5. Pulsa en el botn Abrir. Se iniciar automticamente la subida del archivo o archivos
de audio al servidor remoto.
6. Una vez subido introduce los datos del audio para facilitar su bsqueda:
1. Song title (Ttulo de la cancin). Ejemplo: Sonidos de frica.
2. Your email (Tu direccin de correo electrnico). Introduce tu direccin de correo
electrnico.
3. Copyright. Debes marcar esta etiqueta garantizando con ello que este archivo no
est protegido con derechos de autor.
4. Description (Descripcin). Ejemplo: Loop musical extrado del portal FlashKit

437
7. Para terminar pulsa en el botn Save (Guardar ).

8. A continuacin se muestra la pgina donde se muestra el ttulo de la cancin y el
sencillo reproductor de BooMP3 para escucharla.
Notas:
1. Para subir un audio es imprescindible introducir una direccin de correo electrnico.
Si pulsas en el enlace superior View your files (Ver tus archivos) se mostrar un
cuadro de texto donde si introduces tu correo electrnico, se mostrar una lista de
acceso a todos los audios subidos a BooMP3 con esa cuenta.
2. Al subir un audio recibirs un email en la cuenta de correo que has declarado. Este
mensaje contiene un enlace a la pgina del audio y otra al editor que permitir
eliminar al archivo. Conserva este mensaje si deseas eliminar el audio
posteriormente.

438
5.5.3 Integracin 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 direccin de correo electrnico que has utilizado para subir
los archivos de audio a BooMP3. Otra posibilidad es pulsar en View all uploaded files
para acceder al catlogo 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
pgina 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 reproduccin de la cancin al cargarse.
Repeat song: se repite la cancin en un bucle contnuo
6. Pulsa sobre el botn Copy (Copiar) para copiar el cdigo embed
7. Abre Kompozer y sobre un documento web nuevo escribe el texto Mi audio de
BooMP3 en formato Titulo 1.
derecho y elige Pegar. Observa que el cdigo copiado desde BooMP3 se ha pegado
boomp3.html
Multiply: repositorio de archivos

440
5.6 Multiply: repositorio

de archivos
441

5.6 Multiply: repositorio de archivos

Existen espacios donde es posible subir archivos multimedia (imagen, audio, vdeo,
animaciones, archivos etc) que luego se pueden integrar en la pgina web del centro o
proyecto.
En la siguiente tabla se recogen algunas webs donde se pueden almacenar archivos en lnea.
Se indican sus prestaciones actuales para las cuentas gratuitas:
Sitio
Multiply
MediaMax
Twango
Box.net
Omnidrive
URL
http://multiply.com/
http://www.mediamax.com
http://www.twango.com/
http://www.box.net/
http://www.omnidrive.com/
Capacidad
--25 Gb
Ilimitado
1 Gb
1 Gb
Trfico
--1 Gb/mes
250 Mb/mes
10 Gb/mes
5 Gb/mes
Por archivo
100 Mb
10 Mb
100 Mb
Ilimitado
Ilimitado
Capacidad: Capacidad total de almacenamiento por cuenta

Trfico: Trfico mensual de descargar permitido
Por archivo: Lmite de subida por archivo
A continuacin se describe el procedimiento para utilizar un repositorio como Multiply para
guardar y reutilizar archivos de imgenes, audios o vdeos.
5.6.1 Registrarse como usuario en Multiply

1. Accede a la web de Multiply en la direccin: http://multiply.com
2. Clic en el enlace Join for free para completar el formulario de registro. Puedes
utilizar una direccin de correo electrnico de Yahoo o MSN. Recuerda el usuario y
contrasea definido para posteriores accesos.
3. A continuacin consulta el correo electrnico. Abre el mensaje de confirmacin que
te ha enviado Multiply a tu cuenta. Pulsa en el enlace de confirmacin para
completar el paso de verificacin de la direccin de correo electrnico. Cierra el
correo electrnico y el navegador.
4. Tras la creacin de una cuenta la direccin de la pgina 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 extraccin dispondrs del archivo de imagen elogio.jpg y el archivo
de audio bistro.mp3.
2. Abre el navegador web y sitate de nuevo en la web de Multiply. Introduce tu nombre
de usuario y contrasea. Pulsa en el botn Sign In (Entrar)
3. Pulsa en el botn My Site (Mi Sitio) y luego en el botn Add Photos (Aadir 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 imgenes 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 botn Choose Photos (Elige fotos). Se muestra un

cuadro de dilogo Enviando para desplegar la lista Buscar en y situarse en la
carpeta multiply. Selecciona el archivo elogio.jpg. Para terminar pulsa en el
botn Abrir.

443
5. Tras seleccionar las distintas imgenes de tu disco duro (en este caso slo vamos a
hacerlo con una) pulsa en el botn Upload (Subir) que aparece debajo del cuadro de
vistas previas. Las imgenes se organizan en albums y posteriormente se pueden subir
o eliminar imgenes de un mismo album.
6. En el panel Album Details (Detalles del Album) introduce:

Title (Ttulo). Por ejemplo: Elogio al horizonte de Chillida
Description (Descripcin). Ejemplo: Lugares tpicos de Asturias.
Tags (etiquetas semnticas para facilitar la bsqueda). Ejemplo: monumentos,
asturias, lugares tpicos, paisajes, etc.

444
7. Clic en el botn Save & Publish (Guardar y publicar).

8. Una vez concluido el proceso de subida al servidor remoto de todas las imgenes
seleccionadas se mostrar el mensaje Post Successful (Envo 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
tamao apropiado.
12. Clic derecho sobre la imagen y selecciona la opcin 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 Direccin del navegador web haz doble clic sobre la URL actual y a
continuacin haz clic derecho para seleccionar Pegar.

446
14. Puedes utilizar Kompozer para insertar esta imagen en una pgina web mediante
Insertar > Imagen. En la casilla Ubicacin de la imagen pega la direccin
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)
personales para autentificarte en tu cuenta.
2. Clic en la pestaa superior My Site (Mi sitio).
3. Pulsa en el enlace Add Music del cuadro Music
y utiliza tus credenciales
4. En el panel Upload Music (Subir msica) pulsa en el botn 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 reproduccin (playlists).
5. Para subir el archivo haz clic en el botn Upload (Subir). Transcurridos unos minutos
se completa el proceso.

448
6. En el panel Playlist Details (Detalles de la lista de reproduccin) introduce:
7.
8.
9.
10.
11.
12.
13.
14.
Playlist Name (Nombre de la lista). Ejemplo: Msica de danza

Description (Descripcin). Ejemplo: Msica para bailar
Which songs should be included in this playlist? (Qu canciones se incluirn
en esta lista?). En este caso se marca la cancin anteriormente subida.
Tags (etiquetas semnticas para facilitar la bsqueda). Ejemplo: bistro,
mancini, danza, etc.
Clic en el botn Save & Publish para terminar.

Si todo ha ido bien se mostrar el mensaje Post Sucessful! (Envo con xito).
Pulsa en el enlace Go to your Multiply Site (Ir a tu sitio Multiply)
Observa que en el cuadro Music ahora aparece la lista de reproduccin anteriormente
creada. Haz clic sobre ella para abrirla.
En la pista que se ha subido pulsa sobre el enlace Play this playlist (reproducir esta
lista).
En el cuadro de dilogo Abrir con | Guardar en disco selecciona Abrir con y elige,
por ejemplo reproductor Windows Media Player o VLC Media Player.
Clic en el botn Aceptar. Tras su descarga comenzar la reproduccin.
Pulsa sobre el enlace Share (Compartir)
15. En el cuadro de texto Link puedes copiar el enlace a la pgina 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 pgina web con Kompozer. Sita el cursor donde deseas situar el enlace.
18. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiar el cdigo
HTML que contiene el enlace.
Notas:
No se ofrece una direccin absoluta al archivo de audio. En su defecto disponemos

de un enlace a una pgina desde donde se puede reproducir el audio.
Para poder acceder a esa pgina es necesario que el usuario se autentifique con
unas credenciales de Multiply. Este requisito es algo relativamente nuevo.

449
4. Subir e integrar un vdeo 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 pestaa superior My Site (Mi sitio).
4. Pulsa en el enlace Add Vdeo del cuadro Vdeo
5. Multiply puede alojar vdeos procedentes de 3 tipos distintos de fuentes:
Upload a vdeo: subir un archivo del disco duro local.

Record a vdeo: grabar un vdeo de la webcam o vdeo del equipo.
Import vdeos: importar un vdeo de youtube, metacafe, myspace, google vdeo,
etc.
4.1 Subir un archivo de vdeo local
6. En el cuadro Upload a vdeo pulsa en el botn Examinar, navega para localizar y

abrir el archivo descargado paisajes.wmv. Clic en Abrir. Existe un lmite de 100 MB
de tamao en el archivo de vdeo para subir. Son aproximadamente 10 minutos de
grabacin.
7. Para terminar pulsa en el botn Upload Video File (Subir archivo de vdeo).
4.2 Grabar un vdeo
Para realizar esta prctica es necesario disponer de una cmara DV o webcam + micrfono
conectados al equipo.
6. Seleccciona My Site > Vdeo > Add Vdeo
7. En la seccin Record a Video (Grabar un Vdeo) haz clic en el botn Multiply Vdeo
Recorder (Grabador de vdeo Multiply). Es necesario tener instalado en el navegador
web el plugin del reproductor de Flash 8.

450
8. Pulsa en el botn Permitir para que la aplicacin puedan acceder a la webcam y

micrfono conectados al equipo.
9. Se mostrar la captura de la cmara en el cuadro Video Recorder. Si tienes varios
dispositivos de captura de vdeo y de audio abre los cuadros desplegables y selecciona
los adecuados.
10. Para iniciar la grabacin haz clic en el botn Record (Grabar) que aparece en el
centro del capturador o bien pulsa la tecla barra espaciadora.
11. Para detener la grabacin haz clic en el botn 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 vdeo pulsa en el botn Save (Guardar).

Nota:
Conviene no exceder de 10 minutos en el tiempo de grabacin. Recuerda que Multiply
tiene el lmite de 100 MB por archivo subido.
4.3 Importar vdeos
6. Seleccciona My Site > Vdeo > Add Vdeo
7. En la seccin Import vdeos (Importar un vdeo) pulsa sobre un servicio de vdeo. Por
ejemplo Youtube.com

451
8. En el cuadro de dilogo Import YouTube Video by URL (Importar vdeo de Youtube

mediante URL) pega la direccin del vdeo que te interese. Por ejemplo:
http://www.youtube.com/watch?v=7vgAYTC9bRY y pulsa en el botn OK.
Nota:
Importar vdeos de Youtube y otros servidores a mi cuenta Multiply puede resultar

interesante para evitar los vdeos relacionados inapropiados.
4.4 Guardar el vdeo

9. En cualquiera de los casos anteriores (subir un archivo de vdeo local, grabar un vdeo
o importarlo desde Youtube), una vez concluido con xito el proceso de subida se
mostrar una pgina donde debes introducir los datos del vdeo: Subject (Ttulo),
Description (Descripcin), Tags (Etiquetas) y Access (Acceso).
10. Para terminar pulsa en el botn Save & Publish (Guardar y publicar)
11. Clic de nuevo en la pestaa My Site.
12. Para visualizar el archivo de vdeo haz clic sobre su ttulo dentro del cuadro Vdeo.

452
13. Pulsa sobre el enlace Share (Compartir)
14. Hay dos formas de integrar en una pgina HTML un vdeo alojado en Multiply:
Embed (incrustado o embebido): inserta dentro de la pgina HTML un reproductor
mostrando el vdeo.
Link (enlace): inserta un enlace a una pgina de Multiply donde se visualiza ese
vdeo.
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 pgina web con Kompozer. Sita el cursor donde deseas situar el enlace.
17. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiar el cdigo
HTML que empotra el reproductor con el vdeo.
Nota:
Para acceder a la visualizacin de un vdeo no es necesario disponer de credenciales

de Multiply.
Servicios Web 2.0 ::: Scribd, documentos en lnea

453
5.7 Scribd: documentos

en lnea

454
5.7 Scribd: documentos en lnea

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 visualizacin y manejo
del documento. El usuario slo 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 cdigo HTML de una pgina web de nuestro sitio web. El propsito 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 obtendrs 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 contrasea e introduce estos datos junto con una direccin de
correo electrnico.
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 botn Upload (Subir)
4. Se muestra la pgina 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 botn Browse (Examinar).

6. En el cuadro de dilogo Seleccione los archivos que se cargarn con
www.scribd.com selecciona la carpeta scribd y dentro de ella haz clic sobre el
documento web20.doc. Pulsa en el botn Abrir.
7. Transcurridos unos segundos se habr subido el documento al servidor mostrndose

una ventana donde podemos definir: Title (ttulo), Description (Descripcin) y Tags
(tiquetas de contenido para la bsqueda). Para terminar pulsa en el botn Publish
(Publicar).
8. Se muestra la pgina 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 visualizacin del documento: Formato HTML y Formato Visor
PDF. En la parte superior del ttulo 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 ests en el modo Visor PDF se puede navegar por el documento utilizando las
distintas opciones que proporciona el marco superior del visor.
Activa el botn Mano para poder arrastrar y soltar las pginas del documento
utilizando el puntero del ratn.
Activa la herramienta Seleccin para poder seleccionar fragmentos de texto
del documento con slo arrastrar y soltar. El texto seleccionado se puede
copiar (<Ctrl>+<C>) y luego pegar (<Ctrl>+<V>) sobre otro documento.
Introduce un trmino en el cuadro de texto y luego pulsa en el icono lupa
situado a su derecha para iniciar una bsqueda en el documento actual.
Arrastra el deslizador para aumentar o disminuir el zoom de visualizacin del
documento o bien pulsa en los botones de ajuste de pgina o anchura de
pgina.
Introduce el nmero de pgina para situarte directamente en ella tras pulsar
la tecla <enter>. Otra posibilidad es utilizar los botones adelante/atrs que
permiten desplazarse en ambas direcciones pgina a pgina 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 botn situado ms 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 locucin 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. Tambin se
dispone de una consola de reproduccin el audio que nos permite escuchar la locucin
sonora. Cuando el texto est en castellano apenas es inteligible.
13. Para insertar este documento en una pgina de nuestro sitio web, haz clic en la
casilla de texto Embed que muestra el cdigo HTML de insercin y a continuacin haz
clic derecho para seleccionar Copiar en el men contextual que se muestra.

14.
15.
16.
17.
458
Abre Kompozer y selecciona Archivo > Nuevo > Un documento vaco.

Sobre la nueva pgina escribe el ttulo La Web 2.0 y asgnale el estilo Ttulo 1.
Sita el cursor en la siguiente lnea y a continuacin elige Insertar > HTML
En la ventana Insertar HTML haz clic en el cuadro de texto y a continuacin haz clic
derecho para seleccionar Pegar. Clic en el botn Insertar.
18. Pulsa en el botn Guardar. Introduce el ttulo: La Web 2.0 y guarda esta pgina en
la carpeta miweb con el nombre web20.html
19. Clic en el botn Navegar de Kompozer para visualizar a travs 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

460
5.8 Youtube:
vdeo en streaming

461
5.8 YouTube: vdeo en streaming

5.8.1 Qu es Youtube?
YouTube (http://www.youtube.com) es un servicio de bsqueda y alojamiento de vdeos que
ofrece la posibilidad de asignar tags o etiquetas a los mismos para facilitar su localizacin.
En poco tiempo este sitio web se ha convertido en el mayor repositorio de vdeos en Internet.
Cualquier usuario puede registrarse de forma gratuita y subir sus vdeos. Estos pueden
ajustarse a cualquier temtica siempre y cuando no sea pornogrfica y no incumplan las leyes
vigentes sobre copyright y pertinencia de contenidos.
Cada usuario podr subir todos los vdeos que desee en los formatos admitidos: *.AVI, *.MOV y
*.MPG. Existe la limitacin de un tamao mximo 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 botn Sign up.
5.8.2 Publicar un vdeo en YouTube

1. Descarga y descomprime el archivo paisajes.zip en tu disco duro. Como resultado
obtendrs el archivo de vdeo 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 contrasea personales en Youtube y a
continuacin pulsa en el botn Log In.
4. Una vez superado con xito el proceso de autentificacin haz clic en el botn Upload
Video (Subir Video)
5. En la pgina Video Upload (Subida de archivo) puedes definir los siguientes valores
para el vdeo:
Title (Ttulo). Ejemplo: Paisajes asturianos.
Description (Descripcin). Texto breve que describe el vdeo. Ejemplo:
Algunas fotografas de sitios asturianos.
Video Category (Categora del Vdeo). Selecciona una categora o tema.
Ejemplo: Entertainment (Entretenimiento).
Tags (Etiquetas). Facilitan la bsqueda del vdeo. Se introduce una o varias
etiquetas separadas por espacios. Ejemplo: asturias paisajes. Estos son los
campos obligatorios para poder subir un vdeo. En el resto se pueden dejar las
opciones por defecto.

462
Adems de las opciones bsicas es posible configurar otros parmetros haciendo clic
previamente en el enlace choose options (elige opciones) de los siguientes apartados:
Broadcast Options (Opciones de difusin). Si pulsas en el enlace choose

options (elige opciones) podrs elegir entre Public para compartir el video
con todo el mundo (es la opcin por defecto y recomendada) y Private donde
slo 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 geogrfico
concreto donde se tom (geolocalizacin).
Sharing Options (Opciones de comparticin). En este apartado se puede
elegir entre
Comments (Comentarios).
- Allow comments to be added automatically. Permitir que los
comentarios se aadan automticamente. Es la opcin por
defecto.
- Yes, allow comments after I approve them. Friends can add
automatically. Se permiten comentarios pero solo sern
visibles despus de aprobarlos. Los amigos podrn aadirlos
automticamente.
- Yes, allow comments after I approve them. Se permiten
comentarios pero solo sern visibles despus 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 opcin por defecto.
- No, do not allow users to vote on comments. No permitir las
votaciones en los comentarios.
Video Responses (Vdeos relacionados).

- Yes, allow video responses to be added automatically.
Permitir que otros usuarios de YouTube puedan relacionar
automticamente sus vdeos con el mo. Es la opcin por
defecto.
- Yes, allow video responses after I approve them. Permitir
que puedan relacionar otros vdeos con ste despus 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 opcin
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 vdeo.
Es la opcin por defecto.
- No, external sites may NOT embed and play this video. No
admite que este video se pueda incrustar en una pgina web
externa y se reproduzca en ella.
Syndication (Sindicacin)
- Yes, make this video available on mobile phones and TV.
Hacer que el vdeo est disponible en telfonos mviles y TV.
Es la opcin por defecto.
- No, this video should not be available on mobile phones
and TV. Este vdeo NO estar disponible para telfonos
mviles ni TV.
6. Pulsa en el botn Upload a vdeo (Subir un vdeo).

7. En la pgina Video Upload (Subida de vdeo) pulsa en el botn Browse (Examinar)
para localizar el archivo que has descargado y descomprimido en tu equipo local:
paisajes.wmv. A continuacin pulsa en el botn Upload Vdeo (Subir vdeo).
8. Tras unos segundos de espera si el vdeo se ha subido con xito se mostrar el

mensaje: Video Upload Upload Complete (Subida de vdeo Subida completada).

464
9. Clic en el enlace My Videos (Mis vdeos) para acceder a la lista de archivos de vdeo
subidos.
Nota:
Despus de subir el archivo al servidor puede ocurrir que tengas que esperar unos minutos
para que se complete la conversin del vdeo. YouTube procesa el formato original del
archivo para transformarlo en formato Video Flash.
5.8.3 Integracin HTML de un vdeo 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 seccin My Account > My Videos (Mis vdeos).
3. Clic en el ttulo del vdeo que hemos introducido en el apartado anterior. Se visualiza
una pgina mostrando la reproduccin del vdeo.
4. Clic sobre el cuadro de texto Embed para seleccionar el cdigo. A continuacin haz
clic derecho y selecciona Copiar. Con esta operacin hemos copiado al portapapeles
el cdigo HTML que permitir incrustar el reproductor de Youtube y este vdeo en
nuestra pgina web.

465
Nota:
Sin necesidad de estar autentificado tambin es posible integrar en nuestra pgina HTML
cualquier vdeo de Youtube (a menos que su autor haya definido que no permite su
incrustacin embed). Para ello navega para reproducir el vdeo que desees y copia el
cdigo Embed que aparece en la pgina del vdeo.
5. Abre Kompozer y sobre un documento web nuevo escribe el texto Mi video de
Youtube en formato Titulo 1.
derecho y elige Pegar. Observa que el cdigo copiado desde YouTube se ha pegado
youtube.html
5.8.4 Crear un lista de reproduccin de vdeos en Youtube

YouTube ofrece la posibilidad de crear listas de reproduccin de vdeos alojados en este
servicio. Estos pueden ser propios o ajenos. En el siguiente ejemplo se recoge el
procedimiento para construir una lista de reproduccin y luego insertarlo en una pgina web.
1.
2.
3.
4.
5.
Visita la pgina de YouTube utilizando Mozilla Firefox: http://www.youtube.com

Introduce tus credenciales personales para autentificarte.
Visita la seccin My Account (Mi cuenta)
Clic en el enlace Playlists (Listas de reproduccin).
Clic en el botn Create Playlist (Crear lista de reproduccin). En este caso vamos a
crear una lista de vdeos sobre el pintor Picasso.
6. En la pgina Create/Edit Playlist (Crear/Editar lista de reproduccin) introduce el
nombre de la lista (Playlist Name). Ejemplo: Picasso en Youtube.

466
7. Rellena el cuadro de texto Description (Descripcin) y los Tags (Etiquetas). Marca la

opcin Public (Pblico) o Private (Privado) para indicar la privacidad de la lista de
reproduccin. Se recomienda utilizar la opcin por defecto: Public.
8. Clic en el botn Save PlayListInfo (Guardar Informacin de la Lista de Reproduccin).
9. A continuacin utiliza el buscador de YouTube para buscar vdeos sobre Picasso.
Introduce el trmino Picasso y pulsa en el botn Search (Buscar).
10. Haz clic sobre el ttulo de uno de los vdeos 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 seccin Add Video to a Playlist (Aadir Vdeo a una Lista de Reproduccin)
despliega el combo para elegir la lista Picasso en YouTube. Para terminar pulsa en el
botn OK.
13. Repite los pasos 9-12 para aadir dos o tres vdeos ms sobre Picasso. No es necesario
utilizar de nuevo el buscador porque en la lista Related (Relacionados) se muestran
algunos vdeos que estn relacionados con el actual.

467
14. Clic en la entrada My Account (Mi Cuenta) y luego pulsa en PlayLists (Listas de
reproduccin).
15. En el cuadro de texto Embed haz clic para seleccionar su contenido y luego clic
derecho y Copiar para copiar al portapapeles el cdigo del reproductor de la lista
creada: Picasso en Youtube.
16. Abre Kompozer y sobre un documento web nuevo escribe el texto Mi lista de
reproduccin en Youtube en formato Ttulo 1.
derecho y elige Pegar. Observa que el cdigo copiado desde YouTube se ha pegado
lista_youtube.html
Servicios Web 2.0 ::: Vdeos

468
5.9 Vdeos

469
5.9 Vdeos
5.9.1 Vdeos subtitulados en OverStream
Overstream (http://www.overstream.net) es un espacio donde puedes personalizar un vdeo
en lnea mediante la incorporacin de comentarios y subttulos. Esto es posible gracias al
editor de Overstream que permite fcilmente crear y sincronizar tus subttulos a cualquier
vdeo en lnea, guardarlos en el servidor de Overstream para compartirlos con los dems.
Visita la web de Overstream y regstrate para disponer de un nombre de usuario y
contrasea. Una vez que dispongas de ella introdcelas para entrar en sesin.
1. A travs del navegador web localiza previamente en Youtube el vdeo en lnea que
deseas subtitular. Una vez situado en l, selecciona la direccin en la barra del
navegador, clic derecho y elige Copiar.
2. Regresa a OverStream. Pulsa en el enlace Create overstream (Crear subttulos).
3. Se muestra el cuadro de dilogo Vdeo URL (direccin del vdeo). En la casilla Enter
Vdeo URL (Introduce URL del vdeo) haz clic derecho y selecciona Pegar para pegar
la direccin copiada con anterioridad. Clic en el botn Ok.
4. Tras unos segundos de espera en el visor se cargar la pelcula. Los pasos para crear
los subttulos seran (ver imagen):

470
1) Clic en el botn play de la consola de reproduccin. Cuando estimes necesario

aadir un comentario pulsa en el botn pause.
2) En la esquina inferior derecha pulsa en el botn add (aadir).
3) Introduce el subttulo por teclado. Observa que en el listado se crea una entrada
con el texto y tambin se ofrece una vista previa en el visor de la pelcula. Para
eliminar un texto se selecciona previamente en el listado y se pulsa en el botn
remove (eliminar). Es necesario tener en cuenta que el subttulo se muestra por
defecto durante 3 segundos. Este valor se puede modificar en Options (opciones).
Si deseas ampliar la duracin del subttulo seleccionado utiliza los controles Start
Time y End Time (Tiempo de inicio y de fin).
4) Para guardar el proyecto pulsa en el botn save (guardar). Se muestra el cuadro
de dilogo Overstream Name Dialog (Save To Server) (Nombre de los subttulos
para guardar en el servidor). Introduce un nombre y pulsa en OK.
5. Tras guardar el proyecto se mostrar el mensaje Overstream ttulo created in the

database (Overstream ttulo creado en la base de datos).
6. Pulsa sobre la pestaa Overstream Properties (Propiedades del Overstream). En esta

pgina conviene configurar los siguientes parmetros: Access Level (Nivel de acceso)
como Public, Subtitle Language (Idioma de Subttulos) como Spanish, Tags
(Etiquetas) separados por comas, Ratings (Votaciones) y Comment (Comentarios)
activarlos o desactivarlos.

471
7. Para guardar los cambios introducidos en los parmetros de configuracin pulsa en el

botn Save Overstream Properties (Guardar propiedades del OverStream)
8. Clic en el enlace My Overstream. Observa que aparece la entrada correspondiente a
los subttulos recin 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 cdigo Embed.
10.
11.
12.
13.
14.
Clic derecho y selecciona Copiar para copiar este cdigo HTML al portapapeles.
Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML.
En el cuadro de dilogo Insertar HTML haz clic derecho y selecciona Pegar.
Clic en el botn Insertar.
Selecciona Archivo > Guardar introduce el ttulo de la pgina y luego la carpeta
destino (por ejemplo miweb) y el nombre del archivo.
15. Desde el navegador web abre la pgina HTML creada para ver cmo se integra el
reproductor en ella.

472
5.9.2 Edicin de vdeos con JumpCut

JumpCut (http://www.jumpcut.com) es un servicio web 2.0 que permite subir fotos y vdeos
para montar un clip de pelcula que luego se puede compartir con otros usuarios.
Visita la web de JumpCut y regstrate para disponer de un nombre de usuario y contrasea.
Una vez que dispongas de ella introdcelas para entrar en sesin. Si dispones de una cuenta
Yahoo es ms que suficiente para acceder a este espacio.
1. Descarga y descomprime el contenido del archivo jumpcut.zip. Como resultado
obtendrs una carpeta jumpcut en cuyo interior dispones de varios fotografas de
paisajes.
2. Accede a la web de JumpCut y autentifcate como usuario.
3. Clic en el enlace Upload (Subir) que se muestra en el men horizontal superior. Es
posible subir fotos, audios y vdeos pero en este caso vamos a subir slo fotos.
4. Clic de nuevo en el botn gigante Upload. Se mostrar un cuadro de dilogo para

seleccionar los archivos que se cargarn. 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 imgenes. Para terminar pulsa en el botn Abrir.
5. Durante el proceso de subida se ofrece la posibilidad de decidir el tipo de visibilidad

(public) y los tags. A continuacin haz clic en el enlace Done (Hecho).
6. Una vez concluido el proceso de subida se ofrece la posibilidad de elegir un estilo de
transicin entre fotos (Pick a Style).

473
7. Si deseas publicar la pelcula directamente sin ms arreglos haz clic en el enlace

Publish My Movie (Publicar Mi Pelcula). En el panel Publish define el ttulo (Title) de
la pelcula (por ejemplo: Paisajes de Asturias), las etiquetas o Tags (ejemplo:
asturias, paisajes, etc) y la visibilidad (Visibility), en este caso Public (Pblica). Para
terminar haz clic en el botn Publish.
8. Se mostrar el visor del vdeo de Jumpcut donde puedes ver el aspecto final del
vdeo. Si deseas editarlo con mayor detalle pulsa en el botn Edit situado en la
esquina inferior derecha del visor.
9. Desde la pgina de edicin que proporciona JumpCut es posible definir una transicin
distinta para cada imagen, subir y aadir un audio, poner ttulos, definir efectos, etc.
Si lo deseas puedes probar las distintas opciones. Para terminar Save (Guardar) que
aparece en la esquina inferior derecha de la pgina de edicin.

474
10. Regresa al modo de reproduccin del videoclip creado. Debajo del reproductor haz
clic en el enlace Post. Clic derecho sobre el cuadro de texto Player y selecciona la
opcin Copiar.
11.
12.
13.
14.
Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML.
En el cuadro de dilogo Insertar HTML haz clic derecho y selecciona Pegar.
Clic en el botn Insertar.
Selecciona Archivo > Guardar introduce el ttulo de la pgina y luego la carpeta
destino (por ejemplo miweb) y el nombre del archivo.
15. Desde el navegador web abre la pgina HTML creada para ver cmo se integra el
reproductor en ella.
JotForm: formularios en lnea

475
5.10 JotForm:
formularios en lnea

476
5.10 JotForm: formularios en lnea

JotForm (http://jotform.com) es un sitio que permite crear formularios web susceptibles de
integrar en una pgina HTML. El diseo del formulario se realiza con facilidad mediante
arrastrar y soltar sus distintos elementos sobre la pgina: cuadros de texto, imgenes,
etiquetas, combos, botones, etc. Cada uno de estos elementos admite configuracin de sus
propiedades para personalizar el resultado. El envo de los datos introducidos por el usuario
se puede recibir en una cuenta de correo electrnico o bien acceder a informes estadsticos
en varios formatos.
En esta prctica vamos a crear un formulario que luego integraremos en una pgina web para
recoger los datos de reserva de un aula de informtica en nuestro centro. Las peticiones sern
recibidas en nuestro email.
Para crear y utilizar tus propios formularios en JotForm es necesario registrarse previamente.
Para ello visita su pgina, 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 pgina de JotForm: http://jotform.com
2. Introduce tus credenciales de identificacin y pulsa en el botn Login.
3. En la barra de botones superior haz clic en el botn My forms (Mis formularios).
4. Se muestra la ventana de edicin del formulario. Clic en el botn New (nuevo).
5. En el cuadro de dilogo Form Wizard (Asistente de Formulario) selecciona un modelo,

por ejemplo, BLANK-Blank Form (en blanco) y pulsa en el botn inferior Next >>
(Siguiente).

477
6. A continuacin 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 botn
Finish
7. Ahora vamos a aadirle los elementos del formulario. En la siguiente tabla se recogen
los tems que contendr:
Etiqueta
Logo del centro
Profesor/a
Email
Asignatura
Tipo
Imagen
Textbox
Textbox
DropDown
Aula solicitada
Grupo
Fecha
Hora
Sistema
operativo
Perifricos
Observaciones
Enviar
DropDown
DropDown
DateTimePicker
DropDown
RadioButton
Caractersticas
URL absoluta
Requerido, Size=40, Max=100
Requerido, Validacin=email, Size=40, Max=100
Requerido, Matemticas | Lengua Castellana |
Idioma |
Requerido, Aula 1 | Aula 2 | Aula 3 | Aula 4
Requerido, 1E1 | 1E2 | 1E3 | 2E1
Requerido, Formato: ddmmyyyy (22012007)
Requerido, 09:00-10:00, 10:00-11:00,
Windows XP, Windows Vista, Ubuntu Linux, Mac
CheckBox
TextArea
Button Submit
Impresora | Porttil | Can | Pizarra interactiva

Column Width=40, Rows=10
Por defecto

478
8. Desde el cuadro de herramientas ToolBox arrastra el elemento TextBox para soltarlo

dentro del formulario por encima del botn 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 parmetros:
Label (Etiqueta): Profesor/a
Required (Requerido): yes
Size (Tamao): 40
Max Size (Mximo tamao): 100
Validation (Validacin): no
10. Para eliminar el texto Drag and drop questions haz clic sobre l para seleccionarlo
y a continuacin 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 peticin.
Label= Asignatura
Required=yes
Options = Matemticas | Lengua Castellana | Idioma | Ciencias | Plstica |
Msica Cada una en lnea aparte.
Aula solicitada. En este dropdown (cuadro desplegable) el usuario elige el Aula
de informtica 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

da en un calendario del mes.
Label= Fecha
Required=yes
Format= ddmmyyyy
Hora. En un dropdown (cuadro desplegable) se elige la hora de la sesin.
Label= Hora
Required=yes
Options= 08:00-09:00 | 09:00-10:00 |
Sistema operativo. Se trata de un RadioButton (Botn de radio) que ofrece la
posibilidad de elegir una sola opcin 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
Perifricos. En este CheckBox (Casilla de verificacin) el usuario podr marcar
una o varias opciones (incluso todas) para indicar el equipamiento adicional que
necesitar en ese espacio.
Label= Perifricos
Options= Impresora | Porttil | Can proyector | Pizarra interactiva
Observaciones. Mediante este TextArea (rea de texto) se recoge informacin 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 botn de envo.
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 botn Properties
situado en la barra de herramientas superior.
15. En el panel Properties define estos valores:
Title (Ttulo). Ejemplo: Reserva del Aula de Informtica.
Send Post Data (Enviar mensaje con datos): yes
Send e-mail (Enviar mensaje): yes. Para desactivar el envo de datos a la
cuenta elige no.
Email. Es la cuenta donde se recibirn los formularios.
Form status (Status del formulario): Enabled. Para desactivar este formulario
puedes seleccionar Disabled.
16. Para comprobar su funcionamiento clic en el botn Preview (Vista previa). Puedes
rellenar el formulario y enviarlo para luego comprobar la recepcin de datos en la
cuenta de correo indicada.
5.10.2 Integracin HTML de un formulario JotForm

1. Navega al sitio web de JotForm: http://jotform.com
3. Clic en el botn my forms
4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula
Informtica y a continuacin pulsa en el botn Source (Cdigo).

481
5. En la Option 1: Embed Form into Your Site (Opcin 1: Embeber Formulario en tu

sitio web) haz clic en el botn Copy para copiar al portapapeles el cdigo 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 cdigo copiado desde Jotform se ha pegado
9. Pulsa en el botn Guardar, introduce un ttulo de pgina y guardarla en la carpeta
miweb, por ejemplo, con el nombre reserva.html
5.10.3 Consulta/publicacin de resultados

JotForm permite la publicacin web de los resultados estadsticos de los datos recogidos
desde el formulario.
1. Navega al sitio web de JotForm: http://jotform.com
3. Clic en el botn my forms
4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula
Informtica para seleccionarlo y a continuacin pulsa en el botn Share (Compartir).
5. En la seccin 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 (Cuadrcula). Proporciona cdigo para insertar en una pgina web los
resultados en formato cuadrcula.
Calendar (Calendario). Ofrece cdigo para insertar en la web los resultados
organizados en un calendario.
RSS. Se dispone de un enlace para la suscripcin a canales RSS con los resultados.
Excel. Permite obtener un archivo XLS que se puede subir y enlazar en nuestra
pgina web.
6. Elige la opcin Grid (Cuadrcula). Introduce el ttulo del formulario en la casilla Title
y pulsa en el botn Check All para seleccionar todos los datos del formulario.
7. Clic en el botn Preview (Vista previa) para visualizar el informe de tipo Grid. Para
terminar pulsa en el botn Publish (Publicar).
8. En el segundo cuadro de cdigo que se muestra You can get the iframe code and
embed to your site (Puedes conseguir el cdigo iframe e integrarlo en tu sitio web),
haz clic en el botn Copy.

483
9. Abre Kompozer y sobre un documento web nuevo escribe el texto Reservas

realizadas del Aula de Informatica en formato Titulo 1.
derecho y elige Pegar. Observa que el cdigo copiado desde Jotform se ha pegado
miweb, por ejemplo, con el nombre listado.html
Servicios Web 2.0 Polldaddy, encuestas en lnea

484
5.11 Polldaddy,
encuestas en lnea

485
5.11 Polldaddy: encuestas en lnea

PollDaddy (http://www.polldaddy.com) es una herramienta en lnea que permite crear de
forma libre y gratuita encuestas y situarlas en tu pgina web. Para crear tus encuestas es
necesario registrarse previamente. Para ello pulsa en el botn Sign up y completa el
formulario de inscripcin.
1. Abre el navegador web y visita la pgina de PollDaddy: http://www.polldaddy.com
2. Clic en el botn log in, introduce tus credenciales de identificacin y pulsa en el
botn Login.
3. Desde la pgina My polls (Mis encuestas) pulsa en el botn 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 lnea 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 (Multiseleccin). Si activas esta opcin el usuario podr
elegir ms 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
aparecern en un lugar diferente para cada usuario.
6. En la seccin Poll Language (Idioma de la encuesta) selecciona como idioma Spanish.
7. Select a style for your poll. Marca la opcin PollDaddy Style y luego selecciona una
mscara para la encuesta. Por ejemplo: White Plastic Standard.
8. Para terminar pulsa en el botn Save and Continue (Guardar y continuar).
9. En la pgina Poll HTML Code (Cdigo HTML de la encuesta), pulsa sobre la pestaa
lateral derecha Flash Poll Method (Mtodo Flash), haz clic derecho y elige
Seleccionar todo sobre el cuadro de texto que muestra el cdigo <embed >
</embed>. A continuacin repite ese clic derecho para elegir la opcin 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 cdigo copiado desde PollDaddy se ha pegado
miweb, por ejemplo, con el nombre encuesta.html

486

Manual Materiales Multimedia

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Materiales Multimedia

Загружено:

Авторское право:

Доступные форматы

ndice Temtico

Diseo de materiales multimedia. Web 2.0

Diseo de materiales multimedia. Web 2.0

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

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

2.12 Mapas de imgenes..............................................................................222

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

3.9 Integracin HTML bsica de audio .............................................................293

4. Vdeo y animaciones .......................................................... 313

4.10 Integracin HTML de applets de java ........................................................407

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

Pginas web ::: Introduccin

Pginas web ::: Introduccin

Pginas web ::: Introduccin

URL (Universal Resource Locator)

Pginas web ::: Introduccin

HTML (HyperText Markup Language)

Pginas web ::: Introduccin

1.1.2 Mi primer documento HTML

Selecciona Archivo > Guardar como. Se mostrar este cuadro de dilogo.

Pginas web ::: Introduccin

1.1.3 El navegador Mozilla Firefox

1.1.3.1 Caractersticas de Firefox

Pginas web ::: Introduccin

Pginas web ::: Introduccin

1.1.3.2 Instalacin de Firefox

1.1.4 Editores HTML

Pginas web ::: Kompozer: instalacin y uso

Pginas web ::: Kompozer: instalacin y uso

1.2 Kompozer: instalacin y uso

1.2.2 Instalacin de Kompozer en Windows

2. La instalacin de Kompozer es totalmente limpia, es decir, se descomprime en una

3. Despus de unos segundos se habr instalado en la carpeta C:\ KompozerPortable.

Pginas web ::: Kompozer: instalacin y uso

1.2.3 Instalacin de Kompozer en Ubuntu

3. Introduce el trmino Kompozer en el cuadro de texto Buscar: y a continuacin pulsa

Pginas web ::: Kompozer: instalacin y uso

4. Si ests conectado a Internet se descargarn los archivos necesarios para su

5. Kompozer se suele instalar por defecto en ingls. Es necesario descargar e instalar el

6. El archivo se guardar por defecto en /home/<usuario>/. A continuacin abre

Pginas web ::: Kompozer: instalacin y uso

Pginas web ::: Kompozer: instalacin y uso

1.2.4 El entorno de Kompozer

5. Documento. Muestra el contenido del documento HTML actual.

Pginas web ::: Mi primera pgina

1.3 Mi primera pgina

Pginas web ::: Mi primera pgina

1.3 Mi primera pgina

1.3.1 Organizacin en carpetas

1.1 Desde el escritorio elige Lugares > Carpeta

Pginas web ::: Mi primera pgina

Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta:

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

1.3.2 Iniciar un documento nuevo en Kompozer

Pginas web ::: Mi primera pgina

En la barra de tareas de windows pulsa en el botn correspondiente de Kompozer para

10 En el cuadro de dilogo Ttulo de la pgina introduce su ttulo y haz clic en el botn

Pginas web ::: Mi primera pgina

12 Clic en el botn Guardar

1.3.3 Insertar una imagen

15 Se muestra el cuadro de dilogo Propiedades de imagen. Pulsa en el botn Elegir archivo

Pginas web ::: Mi primera pgina

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

Pginas web ::: Mi primera pgina