H T M L

Prcticas

U.A.C.M
COMPUTACIN II

Academia de Inf ormtica

IX
Prctica

Multimedia.
El objetivo de esta prctica es aprender a utilizar uno de los recursos ms importantes dentro del diseo de pginas de Internet. Esto es insertar objetos de tipo multimedia dentro de un documento HTML. Una pagina de Internet que tiene un manejo adecuado de elementos multimedia, resulta muy llamativa para sus visitantes. Esto permite que el mensaje de la pgina, sea recibido adecuadamente por aquellos que la consultan.

Elementos multimedia.
Los principales elementos multimedia que se utilizan en las pginas de Internet, bsicamente se pueden clasificar en tres categoras: 1. Sonidos. 2. Videos. 3. Imgenes animadas. En los tres casos, se trata de manera especfica de archivos que se pueden incluir dentro de la pgina diseada. Cada una de estas categoras o tipos de archivos, tiene diferentes caractersticas debido a su contenido. Adems dependiendo del tipo de archivo, existen diferentes maneras para utilizarlos. A continuacin se explicaran las caractersticas de cada categora y se desarrollara un ejemplo de la forma de utilizacin de cada uno. Es importante aclarar que los diferentes navegadores de Internet, Mozilla Firefox, Internet Explorer, Netscape, etc. Soportan diferentes versiones y tipos de archivos multimedia. Por esta razn en esta prctica se explicaran los archivos comunes a la mayora de las plataformas de navegadores, para que los resultados de la pgina sean semejantes, desde cualquier navegador. Por otro lado cuando se trabaja con archivos de multimedia, es comn que se trabaje con archivos de tamao superior a lo normal en HTML. Una pagina sencilla de HTML que reproduzca un archivo de sonido, puede tener de tamao aproximadamente 3 kilo bytes. El archivo de sonido mp3 depende del tiempo de duracin de la msica, en promedio este formato de sonido abarca 1 mega byte por cada minuto de duracin. Si el archivo de sonido tiene 3 minutos de duracin su tamao en disco duro del servidor, ser de 3 mega bytes. Para este caso particular el archivo de multimedia es 1000 veces ms grande que el archivo HTML que lo reproduce. Un sitio de Internet, cuando se encuentra desarrollado adecuadamente, clasifica cada tipo de archivos multimedia en diferentes subdirectorios, tal como en esta prctica se recomendar. Es importante tener estas consideraciones en cuenta, al elaborar un sitio de Internet, por que un usuario puede tardar mucho en acceder a un sitio con multimedia, especialmente cuando su conexin de Internet es lenta y en la pgina hay archivos multimedia muy grandes.

IX.1

Sonidos.
Los formatos de sonido soportados por la mayora de los navegadores son los siguientes: Extensin Caractersticas Este formato de audio es el primario o bsico, es decir que en este formato no existe compresin para la informacin que almacena, a diferencia de los otros formatos que se vern mas adelante. La ventaja principal de este formato esta, en que resulta muy fcil generar este tipo de archivos, prcticamente cualquier PC con un micrfono y tarjeta de audio permiten obtener estos archivos, las configuraciones bsicas que se pueden realizar al generar un archivo de esta categora son guardar el sonido: wav Estereofnico. Conocido normalmente como Stereo, sirve para guardar la informacin de audio en dos canales separados e independientes. Monoaural. Conocido normalmente como Mono esta opcin permite guardar el sonido en un solo canal.

Un archivo con la caracterstica Estereofnico medir en disco duro el doble que un archivo con la caracterstica Monoaural.

Este es el formato de audio ms popular hoy en da, tal vez a nivel mundial. Su principal caracterstica es que a un archivo con formato de audio original, se le filtran (le son sustradas) las frecuencias de audio que no percibe el odo humano y con el audio que si percibe el odo humano, se generan los archivos de msica en ese formato. Desde luego cuando se genera un archivo de msica mp3, se pueden establecer diferentes opciones de filtrado para generar los archivos. A mayor calidad en el audio corresponder un mayor tamao de almacenamiento en disco duro y de manera inversa, cuando se filtra con menor calidad de audio, el archivo resultante ser menor calidad. Generalmente se acostumbra utilizar una frecuencia de 128 Kbps (Kilo bytes por segundo) con esta frecuencia de filtrado, los archivos regularmente miden un mega byte por cada minuto de audio, aproximadamente. Otra caracterstica de estos archivos es que permiten almacenar adems del sonido, etiquetas con la informacin del archivo, como nombre de la cancin, interprete, lbum, ao, etc.

mp3

mid

Este formato de audio, se desarrollo para cumplir varios objetivos, uno de ellos era que el tamao de un archivo de audio, fuera mas compacto con respecto a los conocidos, efectivamente ese objetivo se cumpli. Esta extensin proviene de midi que son las inciales de Musical Instrument Digital Interface, otro de los objetivos era proveer a los msicos de puertos digitales para trasladar msica en sus instrumentos digitales, de una manera sencilla. Sin embargo, este formato de audio no es muy popular debido a que el audio se encuentra sintetizado para reducir su tamao. Es decir que el sonido generado por un archivo de audio es distinto al audio esperado, un ejemplo tpico de esta categora, son los tonos o timbres para celular que se usa en los celulares que aun no tienen pantalla de color.

IX.2

Existen ms formatos de audio adems de los mostrados en la tabla anterior, sin embargo estos se manejan en una pgina de Internet de la misma forma que los archivos que sern vistos en esta prctica. La compatibilidad de estos archivos de audio adicionales, puede variar entre las diferentes versiones y tipos de navegadores. Hay dos formas posibles para utilizar un sonido dentro de una pgina de Internet: 1. Como sonido de fondo. 2. Como sonido incrustado.

Sonidos de fondo.
A continuacin se mostrara la forma de insertar un sonido de fondo dentro de una pgina de Internet y los diferentes parmetros que se pueden modificar. La etiqueta de HTML para insertar un sonido de fondo es bgsound el nombre de la etiqueta proviene de las siguientes palabras en ingles: BG = BackGround, en espaol significa fondo. Sound, en espaol significa sonido. El significado de esta etiqueta en espaol podra ser interpretado de forma literal como: sonido de fondo. Abajo se observa su forma de uso. Ejemplo:

<BGSOUND src="archivo_de_sonido.mid" loop="infinite">

El parmetro src que proviene de la palabra inglesa source, significa fuente, indica el nombre del archivo a insertar. En el caso del ejemplo, el archivo de sonido tiene la extensin mid y se llama archivo_de_sonido El parmetro loop que literalmente en espaol se traduce como bucle, sirve para indicar cuantas veces se debe repetir el sonido de fondo de la pagina HTML, en este caso el valor que le fue asignado al parmetro es infinite, que se interpreta como una repeticin continua o infinita de veces. Este parmetro puede tomar valores numricos como: 3, 5, etc. Y esa ser la cantidad de veces que se repetir el sonido de fondo en el archivo.

Ejercicio I. Prctica Paso a Paso (Sonidos de fondo).

Paso 1. Dentro de la carpeta practicas, creada anteriormente en la unidad C, crear un subdirectorio llamado PRACTICAIX. Paso 2. Abrir el entorno de trabajo (Gel) y capturar el archivo practicaIXa.html. Ver el cdigo en la siguiente pagina. Paso 3. Guardar el archivo practicaIXa.html en el subdirectorio PRACTICAIX, creado en el paso 1. Paso 4. En el mismo subdirectorio PRACTICAIX, genere un nuevo subdirectorio llamado SONIDOS y guarde ahi el archivo proporcionado por su profesor, llamado pantera_rosa_clasica.mid Paso 5. Para observar el resultado de este primer ejercicio, abra el archivo practicaIXa.html desde su navegador Internet Explorer.

IX.3

Nombre del Archivo: practicaIXa.html

<HTML> <HEAD> <TITLE>Sonido de fondo</TITLE> </HEAD> <BODY bgcolor="pink"> <BGSOUND src="../PRACTICAIX/SONIDOS/pantera_rosa_clasica.mid" loop="infinite"> <CENTER> <BR> <BR> <BR> <HR> <BR> <H2>Pagina con sonido de fondo en formato midi y repeticiones infinitas.</H2> <BR> <HR> </CENTER> </BODY> </HTML>

Este sencillo ejemplo de pgina HTML muestra como con tan solo una etiqueta <bgsound> y sus parmetros, se inserta un archivo de sonido. El mismo resultado se obtiene para un archivo mp3 o wav, solo se debe agregar a la etiqueta un archivo de sonido que se encuentre en esos formatos.

Sonidos incrustados.
Ahora se analizar la forma de incrustar sonidos dentro de una pgina de HTML, la principal diferencia con un sonido de fondo es que en este caso, se pueden agregar botones para controlar la reproduccin y pausa del sonido. Para incrustar un sonido tambin se requiere de manejar una etiqueta especial del lenguaje HTML, que es embed y en espaol significa precisamente incrustar. Una forma de utilizar esta etiqueta, se observa a continuacin. Ejemplo:

<EMBED src="ejemplo_de_audio.wav" autostart="true" loop="true">

En la etiqueta del ejemplo se repiten dos parmetros, vistos anteriormente: src y loop. El parmetro src funciona de manera idntica a la del ejemplo anterior. En este caso se utiliza un archivo de formato wav que se llama ejemplo_de_audio. El parmetro loop, bucle. Tiene una variacin respecto al caso previo, ahora toma el valor true que significa verdadero cuando esto ocurre, la repeticin se efectuara de forma indeterminada (como cuando se le asigno el valor infinite). Este parmetro, tambin puede tomar el valor false en ese caso significara falso, es decir que el bucle de repeticin, no se efectuara, y el audio solo se escuchara una vez.

De esta forma se incrustara un archivo en la pagina HTML y tambin se observara en ella, los controles play y pause que respectivamente significan reproducir y pausa.

IX.4

En caso de que se requiera ocultar esos controles, para que el usuario no pueda interactuar con el archivo de sonido, se debe agregar un parmetro como se vera ahora. Ejemplo:

<EMBED src="ejemplo_de_audio.wav" autostart="true" loop="true" hidden="true">

El nuevo parmetro incorporado a la etiqueta es hidden que significa oculto, cuando en la etiqueta se agrega el parmetro con valor true verdadero, entonces los botones de reproducir y pausa se ocultan. Tambin se puede asignar a este parmetro el valor false falso y los controles se vern, aunque esto mismo se puede realizar simplemente sin agregar el parmetro hidden. Ahora se aplicaran estos nuevos conceptos para incrustar un archivo de sonido dentro de una pagina HTML.

Ejercicio II. Prctica Paso a Paso (Sonidos incrustados).

Paso 1. Abrir el entorno de trabajo (Gel) y capturar el archivo practicaIXb1.html. Ver el cdigo.

Nombre del Archivo: practicaIXb1.html

<HTML> <HEAD> <TITLE>Sonido incrustado</TITLE> </HEAD> <BODY bgcolor="pink"> <CENTER> <BR> <BR> <BR> <HR> <BR> <H2>Pagina con un sonido incrustado en formato mp3 y controles de reproduccin.</H2> <EMBED src="./SONIDOS/pantera_rosa_punk.mp3" autostart="false" loop="infinite" hidden="false"> <H2>PANTERA ROSA VERSION SKA PUNK.</H2> <BR> <HR> </CENTER> </BODY> </HTML>

IX.5

Paso 2. Guardar el archivo practicaIXb1.html en el subdirectorio PRACTICAIX, creado en el ejercicio anterior. Paso 4. En el subdirectorio PRACTICAIX/sonidos guarde el archivo proporcionado por su profesor, llamado pantera_rosa_punk.mp3 Paso 5. Para observar el resultado de este primer ejercicio, abra el archivo practicaIXb1.html desde su navegador Internet Explorer. Nota: En este paso es recomendable, que realice pruebas con los controles de reproduccin, pausa, volumen, etc. Paso 6. Modifique el cdigo del archivo practicaIXb1.html y guarde practicaIXb2.html para ocultar los controles, el cdigo se debe ver como sigue. como

Nombre del Archivo: practicaIXb2.html

<HTML> <HEAD> <TITLE>Sonido incrustado</TITLE> </HEAD> <BODY bgcolor="pink"> <CENTER> <BR> <BR> <BR> <HR> <BR> <H2>Pagina con un sonido incrustado en formato mp3 y controles de reproduccin ocultos.</H2> <EMBED src="./SONIDOS/pantera_rosa_punk.mp3" autostart="false" loop="infinite" hidden="true"> <H2>PANTERA ROSA VERSION SKA PUNK.</H2> <BR> <HR> </CENTER> </BODY> </HTML>

Observese que ademas del texto, se cambio el parametro hidden con el valor de true o verdadero y de esa manera los controles de reproduccion de audio se ocultaron al usuario. Otro punto importante que se debe tomar en cuenta para incrustar un archivo de sonido dentro de una pagina HTML, cuando se desea permitir al usuario que interactue con los controles de audio, estos apareceran en la pagina fisicamente, en la ubicacion que tenga la etiqueta <embed> que es la responsable de incrustar elementos multimedia en las paginas.

IX.6

Nota: algunos navegadores como Internet Explorer de Microsoft o Mozilla Firefox, muestran alguna advertencia cuando se incrusta un elemento multimedia, para avisar al usuario, que su pgina HTML utilizara componentes o archivo externos.

2.-Con el botn derecho del mouse, sobre la cinta amarilla acceda a permitir contenido bloqueado

1.- Haga clic en cerrar

Generalmente basta con aceptar el aviso cuando se sabe la procedencia del archivo multimedia, ver imagen abajo. Y siga los dos pasos numerados para permitir el acceso del elemento bloqueado.

IX.7

Videos.
De manera semejante a los archivos de audio, existen distintos tipos de archivos de video, que pueden ser insertados en una pgina de HTML. Cada tipo de archivo de video tiene diferentes caractersticas que los distinguen y que a su vez, les permiten funcionar de diferente manera. Los formatos de video soportados por la mayora de los navegadores son los siguientes: Extensin Caractersticas Esta extensin toma su nombre de las siglas Windows Media Video, tal como su nombre lo indica es un formato de video que fue diseado para ser reproducido dentro de la aplicacin Windows Media Player o reproductor de medios (multimedios) de Windows. Aunque a primera vista pareciera que solo se puede reproducir este tipo de videos son los Sistemas Operativos Windows, con el tiempo este formato se ha convertido en un estndar a cumplir, para que pueda ser reproducido por diferentes reproductores en distintos Sistemas Operativos. Tcnicamente su principal caracterstica es que contiene algoritmos especializados en comprimir la informacin del video, sin perder calidad. El archivo de audio que desarrollo Windows como equivalente al de video, tiene las siglas wma que proviene de las siglas Windows Media Audio, este ultimo archivo, se puede incrustar o agregar como un sonido de fondo de la misma manera que se describi anteriormente en esta practica.

wmv

Este formato de video es el que se obtiene con la popular plataforma de desarrollo para paginas Web de la compaa Macromedia, con su producto mas popular Flash En este formato de video, las animaciones se pueden crear en forma de cuadro por cuadro frame by frame tal como se conoce que funcionan los dibujos animados de la televisin. swf Un ejemplo tpico de este tipo de animaciones, son los video de Huevos que se ven mucho en Internet. Una diferencia muy importante contra un formato de video puro, tal como el wmv, es que en este formato se pueden disear botones donde el usuario puede interactuar con la maquina para reproducir, adelantar, retrasar, control de volumen, etc.

avi

Este formato toma el nombre de las siglas Audio Video Interleave y en espaol, se podra traducir como: audio y video intercalado. Propiamente no es un archivo puro de video como wmv, de hecho este formato de video en su interior puede contener diferentes archivos de video o de audio tambin, aunque de manera general se le considera como un formato de archivo de video.

IX.8

Para insertar un archivo de video se utiliza la misma etiqueta de HTML utilizada para incrustar los archivos de audio. Es decir que se utiliza nuevamente la etiqueta especial embed. La forma de incrustar un video con esta etiqueta, se observa a continuacin. Ejemplo:

<EMBED src="ejemplo_de_video.wmv" autostart="true" loop="true">

En la etiqueta del ejemplo se repiten tres parmetros, vistos anteriormente: autostart, src y loop. El parmetro src funciona de manera idntica a la del ejemplo anterior. En este caso se utiliza un archivo de formato wmv que se llama ejemplo_de_video. El parmetro loop, bucle. Tiene una variacin respecto al caso previo, ahora toma el valor true que significa verdadero cuando esto ocurre, la repeticin se efectuara de forma indeterminada (como cuando se le asigno el valor infinite). Este parmetro, tambin puede tomar el valor false en ese caso significara falso, es decir que el bucle de repeticin, no se efectuara, y el video solo se reproducir una vez. Y el parmetro autostart indica si la reproduccin del archivo multimedia, debe ser automtica o manual.

Ejercicio III. Prctica Paso a Paso (Videos incrustados).

Paso 1. Abrir el entorno de trabajo (Gel) y capturar el archivo practicaIXc1.html. Ver el cdigo. Nombre del Archivo: practicaIXc1.html

<HTML> <HEAD> <TITLE>Videos incrustado</TITLE> </HEAD> <BODY bgcolor="lightblue" text="blue"> <CENTER> <BR> <H2>Pagina con dos videos incrustados en formato wmv con controles de reproduccin.</H2> <HR> <BR> <H2>ANUNCIO DE TV NO. 1</H2> <EMBED src="./VIDEOS/anuncio_1.wmv" autostart="false" loop="false"> <HR> <H2>ANUNCIO DE TV NO. 2</H2> <EMBED src="./VIDEOS/anuncio_2.wmv" autostart="false" loop="false"> <HR> </CENTER> </BODY> </HTML>

IX.9

Paso 2. Guardar el archivo practicaIXc1.html en el subdirectorio PRACTICAIX, creado anteriormente. Paso 3. En el Subdirectorio PRACTICAIX, genere un nuevo subdirectorio llamado videos y guarde ahi los archivos de video proporcionados por su profesor, llamados: anuncio_1.wmv y anuncio_2.wmv Paso 4. Abra el archivo practicaIXc1.html con el navegador Internet Explorer y observe que aparecen los dos videos incrustados, con sus respectivos controles de reproduccin. Haga pruebas en su navegador y observe los dos videos dentro de la pagina HTML. Se recomienda primero ver el video 1 y despus el video2. Paso 5. Modifique el archivo practicaIXc1.html de la siguiente manera y guarde como practicaIXc2.html Nombre del Archivo: practicaIXc2.html

<HTML> <HEAD> <TITLE>Videos incrustado</TITLE> </HEAD> <BODY bgcolor="lightblue" text="blue"> <CENTER> <BR> <H2>Pagina con dos videos incrustados en formato wmv con controles de reproduccin.</H2> <HR> <BR> <H2>ANUNCIO DE TV NO. 1</H2> <EMBED src="./VIDEOS/anuncio_1.wmv" autostart="true" loop="false" width="100" height="100"> <HR> <H2>ANUNCIO DE TV NO. 2</H2> <EMBED src="./VIDEOS/anuncio_2.wmv" autostart="false" loop="false" width="250" height="250"> <HR> </CENTER> </BODY> </HTML>

Paso 6. Abra el archivo nuevamente con el Internet Explorer y observe los cambios que se ven en pantalla. Ntese que ahora el video 1 se reproduce automticamente por que el atributo autostart ha cambiado de falso a verdadero. Tambin se observa que los tamaos de los videos son diferentes, por que los atributos width y height que controlan ancho y alto, han sido modificados. Tal como si se tratara de un archivo de imagen. Nota: es importante aclarar que cuando se incrusta un video no conviene utilizar o modificar el atributo hidden a verdadero. Esto se puede efectuar, sin embargo, el resultado podra no ser lo esperado por el diseador de la pgina. Cuando se agrega (hidden=true) en una etiqueta para incrustar video, no solo se ocultan los controles de reproduccin multimedia, tambin se oculta el video y el usuario, solo puede escuchar el audio.

IX.10

Los videos incrustados que se vieron en este apartado, segn se observa, se generan en otra aplicacin y solo se utilizan dentro de la pagina HTML, al igual que los archivos de sonido.

Imgenes animadas.
Los archivos de imgenes animadas, a diferencia de los de audio y de los archivos de video, los podremos generar nosotros a partir de archivos de imgenes que tengamos disponibles en el equipo, o que sean descargados de Internet. La forma de operar de una imagen animada, tiene mucha similitud con los programas de dibujos animados que se observan en la televisin. Es decir que se requiere tener varios archivos con imgenes para despus ir generando con ellos una secuencia que simula una animacin. Por ahora se supondr que ya contamos con los archivos de imgenes necesarios, mas adelante se explicaran algunas formas de conseguir archivos de imgenes. Tambin se utilizara una aplicacin o programa especial, en este caso, se eligi Microso ft Gif Animator aunque es un programa de Microsoft, es gratuito y no requiere de licencia para su uso. Junto con los archivos de esta prctica se lo debe proporcionar su Profesor. Otra ventaja importante de este programa adems de ser pequeo (cabe en un disquete de 3.5) no requiere instalacin, basta con abrirlo. A continuacin se realizara un ejercicio donde el usuario construya una imagen animada, a partir de tres imgenes fijas.

Ejercicio IV. Prctica Paso a Paso (Imgenes animadas).

Paso 1. Guarde en un subdirectorio de PRACTICAIX que se llame IMGENES, las siguientes tres imgenes proporcionados por su Profesor: pantera rosa 1.gif, pantera rosa 2.gif, pantera rosa 3.gif. Por ahora las animaciones sern realizadas con imgenes que tienen la extensin .gif mas adelante se explicara como se puede convertir otro formato de imagen a este ltimo. Las animaciones se realizan principalmente en formato .gif por que este formato admite la transparencia de imgenes, es decir que algunas regiones de la imagen pueden no tener color y permiten ver el fondo o lo que hay detrs en la pantalla de la computadora. Paso 2. Abra con doble clic, la aplicacin Microsoft Gif Animator su icono se observa a continuacin:

Antes de continuar con el paso 3 de este ejercicio, se describir brevemente la pantalla o interfaz grafica de esta aplicacin. Para conocer mejor sus principales componentes. Como se observa en la siguiente imagen, la aplicacin es tan sencilla, que no tiene barra de mens y solo tiene algunos iconos que sern explicados.

IX.11

La barra de herramientas se divide en tres partes, ahora se explicara en cada una de ellas que significa cada botn. Barra 1, esta agrupacin de iconos, es para aquellas funciones, relativas al manejo de archivos, de izquierda a derecha sus herramientas son: Nombre Nuevo Abrir Guardar Insertar Guardar como Descripcin Genera un nuevo archivo en blanco para agregarle imgenes de animaciones. Abre un archivo animado ya existente. Guarda en disco duro el avance del archivo. Agrega un nuevo espacio para ms animaciones. Permite guardar una copia del archivo con el que se esta trabajando. Teclas de acceso directo Control + N Control + O Control + S Control + I Control + A

Barra 2, esta agrupacin de iconos, es para el manejo convencional del portapapeles de Windows, de izquierda a derecha sus herramientas son: Nombre Cortar Copiar Pegar Borrar Descripcin Corta una imagen seleccionada del rea de trabajo. Copia una imagen seleccionada del rea de trabajo. Pega una imagen seleccionada del rea de trabajo. Agrega un nuevo espacio para ms animaciones. Teclas de acceso directo Control + X Control + C Control + V Supr (Borrar)

IX.12

Barra 3, esta agrupacin de iconos, realiza operaciones relativas a la imagen que se esta generando y tambin algunos aspectos de la aplicacin en particular, de izquierda a derecha sus herramientas son: Nombre Seleccionar todo Subir Bajar Vista previa Ayuda Descripcin Selecciona todas las imgenes del rea de trabajo. Sube una capa de la imagen seleccionada en el rea de trabajo. Baja una capa de la imagen seleccionada en el rea de trabajo. Muestra una pre visualizacin de la imagen final. Muestra la ayuda del programa. Teclas de acceso directo Control + L Flecha arriba Flecha abajo Control + R

Ahora se describir el resto de la interfaz grafica de la aplicacin, como se vera estos elementos, son muy sencillos:

La parte de la ventana, que tiene al nmero 4 como etiqueta, es conocida como el rea de trabajo, cada vez que se abre la aplicacin esta rea se ve con un cuadro en blanco por que no hay algn archivo abierto. Cuando ya se tiene abierto algn archivo en esa rea se observan las imgenes con las que se esta trabajando. La parte de la ventana que tiene al nmero 5 como etiqueta es conocida como las opciones del rea de trabajo. Esta rea cambia su aspecto y opciones posibles, dependiendo de que operacin se este realizando a la animacin. Ahora que ya se conocen los elementos que componen la aplicacin continuaremos con el paso 3 del ejercicio.

IX.13

Paso 3. Haga clic en al icono Abrir (o presione Control + O) y abra el directorio donde guardo las imgenes del paso 1. Paso 4. Abra la primera imagen pantera rosa 1.gif, observe que esta imagen ahora se ve e n el rea de trabajo, descrita anteriormente. Paso 5. Haga clic en al icono Insertar (o presione Control + I) y abra el archivo con la segunda imagen: pantera rosa 2.gif. Si le aparece algn mensaje sobre el tamao de la imagen, solo acptelo. Paso 6. Repita el paso 5 y en esta ocasin abra el tercer archivo: pantera rosa 3.gif. Observe que en su rea de trabajo, ya tiene los tres archivos fijos. A partir de estos se creara la secuencia de animacin, que posteriormente podr ser insertada en la pagina HTML. En este momento, su pantalla se debe ver as:

Observe que en este momento las opciones del rea de trabajo, tienen dos nuevas pestaas: Animacin e Imagen. Adems vase que cada imagen de las que se abri, ahora tiene abajo una etiqueta que sirve para distinguirla, como: Marco #1, Marco #2, Marco #3. Para que observe la primera versin de la animacin, presione el botn Vista previa o las teclas Control + R. Cierre esa ventana, como se ve faltan mas pasos para generar una animacin mas completa. Paso 7. Haga clic en la pestaa Imagen y en la opcin Mtodo difuminado elija la opcin restaurar fondo. Paso 8. En el rea de trabajo haga clic sobre la imagen Marco #2 y repita el paso 7. Paso 9. En el rea de trabajo, ahora vamos a elegir la imagen Marco #3 y se debe repetir el paso 7. Con los pasos 7, 8 y 9, se ha preparado la animacin, para que no se vean imgenes anteriores. Vuelva a ver la vista preliminar y observe cual es la diferencia.

IX.14

Paso 10. Ahora se establecer el tiempo de duracin de cada imagen, seleccione la imagen Marco #1 (con un solo clic, la imagen estar seleccionada cuando se le vea un borde azul en su contorno.) en el campo que dice Duracin (1/100 s) establezca un valor de 50. Esto significa que el tiempo durante el que ser posible visualizar esa imagen en pantalla sern 50 centsimas de segundo. O sea medio segundo en total. Paso 11. Repita el paso 10 para la imagen marcada como Marco #2. Paso 12. Repita el paso 10 para la imagen marcada como Marco #3. Vuelva a ver la imagen previa y verifique los resultados obtenidos. Paso 13. Ahora solo falta ligar la animacin para que se repita de manera indefinida. Haga clic en la pestaa Animacin y active las opciones Ciclo y Repetir por siempre en ese orden. Vuelva a ver la vista previa y observe que ya se consigui el resultado final de la animacin, a partir de tres imgenes fijas. Paso 14. Solo resta guardar el nuevo archivo para poder insertarlo en una pagina HTML. Haga clic en el icono Guardar como o presione las teclas Control + A. guarde el archivo en el directorio PRACTICAIX/IMAGENES, con el nombre pantera rosa.gif. Si quiere observar la imagen sola desde su navegador, brala con Internet Explorer. Finalmente incorporaremos la imagen creada en un archivo HTML. Paso 15. Abra el archivo practicaIXd.html realizado en el ejercicio II. Modifique el cdigo para que se vea de la siguiente manera: Nombre del Archivo: practicaIXd.html

<HTML> <HEAD> <TITLE>Sonido incrustado y animacin de imagenes</TITLE> </HEAD> <BODY bgcolor="pink"> <CENTER> <BR> <BR> <BR> <HR> <BR> <H2>Pagina con un sonido incrustado en formato mp3 y animacin de imagenes.</H2> <IMG src="./IMAGENES/pantera rosa.gif" width=200 heigth=200> <BR> <EMBED src="./SONIDOS/pantera_rosa_punk.mp3" autostart="true" loop="infinite"> <H2>PANTERA ROSA VERSION SKA PUNK.</H2> <BR> <HR> </CENTER> </BODY> </HTML>

IX.15

Recuerde que los archivos pantera_rosa_punk.mp3 y pantera rosa.gif, se deben guardar en los subdirectorios PRACTICAIX/SONIDOS e PRACTICAIX/IMGENES respectivamente. Si revisa con cuidado el cambio mas significativo en el cdi go fue agregar una etiqueta IMG tal como en la primera practica, para ver su animacin.

Consideraciones adicionales
El manejo de archivos multimedia, requiere de mas herramientas informticas, que escapan al alcance de este curso, sin embargo, con los elementos analizados en esta practica se pueden tener resultados que se vean bastante bien y sean funcionales dentro de una pagina HTML. Al respecto solo se agregaran algunas consideraciones importantes para tener en cuenta. 1. Los archivos de imgenes se pueden descargar de Internet, haciendo clic con el botn derecho del mouse y seleccionando la opcin Guardar imagen como. 2. Existen ms formatos de imagen que aceptan la animacin, a parte de la extensin .gif como .png por ejemplo. Sin embargo, para trabajar esta extensin se requiere de software distinto al utilizado en esta prctica. De cualquier manera el formato mas aceptado en las paginas HTML es el .gif. 3. Si se guarda un archivo de imagen, con extensin distinta a .gif se puede convertir a este formato con una aplicacin tan sencilla como Paint. Esta aplicacin viene incluida con Windows y se encuentra en: Inicio / Programas / Accesorios / Paint Dentro de Paint se debe abrir la imagen que se quiere convertir y seleccionar la opcin: Guardar imagen como... escoger la extensin .gif y guardar el archivo. 4. Es importante cuando se desea generar una animacin escoger imgenes de dimensiones semejantes, de otra manera al juntarlas, el Microsoft Gif animator cambiara la dimensin de la mas grande y la escalara para que se vea semejante al tamao de la mas pequea. 5. Dentro de la aplicacin Microsoft Gif animator existen mas opciones para modificar los grficos que se pueden utilizar en las paginas HTML, depender del diseador de las paginas si quiere conocer mas funcionalidad de esta sencilla aplicacin.

IX.16

Ejercicio V. Investigacin.
1. Se pueden insertar elementos multimedia en una tabla de HTML? 2. Qu son los appletts?

Ejercicio VI. Ejercicio Propuesto.

Instrucciones: 1. Consiga imgenes de su grupo musical favorito, con las recomendaciones antes explicadas. 2. Genere con estas una imagen animada, utilizando el Microsoft Gif Animator . 3. Descargue algn tono musical o cancin de su grupo favorito en formato de audio .mid o mp3. 4. Descargue algn video relacionado a su grupo favorito o algn tema de su inters. 5. Realice una(s) pgina(s) donde integre los archivos multimedia de los pasos anteriores.

IX.17