Tema: Imágenes por sustitución, audio y video CONTENIDOS Aplicación de imágenes por sustitución. Aplicar video por medio del programa de Dreamweaver y plataforma Youtube. Agregar audio en una plantilla web. OBJETIVOS ESPECÍFICOS Demostrar los pasos para poder aplicar elementos multimedia a un sitio web. Lograr que el estudiante aprenda aplicar elementos multimedia al sitio Simplify. MATERIALES Leer previamente la Guía Número 6. Materiales proporcionados por el docente para el desarrollo de la Guía 5. Imagen por sustitución Una imagen de sustitución es una imagen que, al visualizarse en un navegador, cambia cuando el lapuntero pasa sobre ella. Las imágenes de sustitución están automáticamente configuradas para que respondan al evento onmouseover. Puede definir una imagen para que responda a otro evento (por ejemplo, un clic del ratón) o cambiar una imagen de sustitución. Nota: debe tener dos imágenes para crear una imagen de sustitución: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera. Para comprender como funciona una imagen por sustitución y como aplicar correctamente a continuación un ejemplo: 70
DDV La imagen por sustitución no aplica si se realiza de la siguiente manera: Cómo aplicar una imagen por sustitución? Introduzca la imagen de sustitución mediante uno de estos métodos: -Seleccionar es área o espacio donde se va colocar la imagen por sustitución. -Seleccione Insertar > Objetos de imagen > Imagen de sustitución. (Versiones anteriores CC). -Seleccione Insertar>HTML>Imagen de sustitución (Versiones CC 2015). 71
Aparece la siguiente ventana: A) Nombre de la imagen: nombre de la imagen de sustitución. B) Imagen original: la imagen que desea que aparezca al cargarse la página. Introduzca la ruta en el cuadro de texto o haga clic en Examinar y seleccione la imagen. C) Imagen de sustitución: la imagen que desea que aparezca cuando el puntero pase por encima de la imagen original. Introduzca la ruta o haga clic en Examinar para seleccionar la imagen. **Precargar imagen de sustitución: realiza una carga previa de imágenes en la caché del navegador para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen. D) Texto alternativo: (Opcional) texto que describa la imagen para los usuarios que utilicen un navegador de sólo texto. E) Al hacerse clic, ir a URL: el archivo que desea que se abra cuando un usuario haga clic en la imagen de sustitución. Introduzca la ruta o haga clic en Examinar y seleccione el archivo. Adición de video y audio en HTML HTML admite etiquetas de vídeo y audio que permiten al usuario reproducir archivos de vídeo y de audio en un navegador sin utilizar plug-ins ni reproductores externos. Dreamweaver admite sugerencias para el código para la adición de etiquetas de vídeo y audio. Introduzca video y audio mediante los siguientes métodos: -Insertar -HTML5 Video -Se agrega dentro de html la siguiente etiqueta: 72
DDV Opción 2: -Insertar -Medios -Seleccionar la opción HTML5 Videos - Y de igual manera se agrega la etiqueta: Opción 3: -Ventana -Y seleccionamos el panel Insertar -Dentro de las opciones del panel, escogemos Medios. -Y seleccionamos la opción HTML5 Video - Y de igual manera se agregará la etiqueta: 73
Luego que colocamos la etiqueta video, dentro del panel propiedades le vamos examinar el video y seleccionar opciones para personalizar el video: A)Control de reproducción: Si seleccionamos la opción Controls aparece en la parte inferior del video un skin donde están los controles de reprodución (Play, pause, volumen y pantalla completa), la Opción AutoPlay nos permite reproducir el video en el momento que cargue la página dentro del navegador. La opción Muted permite que cada vez que se reproduce el video en modo silencio. Y por último la opción Loop permite reproducir indefinidamente el video. B)Medidas del video: esto nos permite definir el ancho y altura del video. C)Origen y Poster: origen nos permiten examinar el video y poster nos permite colocar una miniatura para el video. Cómo incrustar video desde plataformas Youtube? -Visitar el sitio de Youtube: http://www.youtube.com. -Buscar el video que vamos a incrustar en el sitio web. -En la parte inferior encontramos opciones para Compartir -Seleccionar la opción insertar, esta opción nos permite agregar un etiqueta denominada <iframe></ iframe> que es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Y es soportado por gran variedad de navegadores. Este es el código que necesitamos para poder agregar el video, solo basta copiar y pegar. Pero en el caso que queremos personalizar el código le damos click a la opción que se denomina MOSTRAR MÁS, acá nos permite agregar más opciones por ejemplo: formato o tamaño de video y opciones de reproducción. 74
DDV Esta es una muestra de como se visualizan las opciones de Youtube para insertar video: Cómo agregar audio en Dreamweaver? Introduzca la imagen de sustitución mediante los siguientes métodos: -Seleccionar la opción Insertar > Medios >HTML5 Audio - Dentro del código html se agregará la etiqueta <audio></audio> de la siguiente manera: Opción 2: -En la barra de menú seleccionamos la opción Ventana>Insertar -Dentro de las opciones del panel Insertar, escogemos Medios -Y seleccionamos la opción HTML5 Audio - Y de igual manera se agregará la etiqueta: 75
Luego que colocamos la etiqueta audio, dentro del panel propiedades a personalizar: A)Control de reproducción: Si seleccionamos la opción Controls aparece un skin donde están los controles de reprodución de audio (Play y pause), la Opción AutoPlay nos permite reproducir el audio en el momento que cargue la página dentro del navegador. La opción Muted permite que cada vez que se reproduce el audio este en modo silencio. Y por último la opción Loop permite reproducir indefinidamente el audio. B)Origen: origen nos permiten examinar y colocar el audio, que esta guardado en alguna ubicación de nuestras carpetas......................................... PROCEDIMIENTO DE LABORATORIO 1- Aplicar lo aprendido en clases sobre imágenes por sustitución, agregar video y audio al sitio que estamos trabajando de la Guía 5 Simplify. 2-Guardar los que se trabajo, dentro de su carpeta personal y si es necesario hacer una copia de sus docuementos. REFERENCIAS BIBLIOGRÁFICAS Aprender Dreamweaver CS6 con 100 ejercicios prácticos. MediaActive. 2011. https://helpx.adobe.com/es/dreamweaver/topics.html http://www.desarrolloweb.com/articulos/que-es-webkit.html https://es.wikipedia.org/wiki/iframe 76